@planningcenter/topbar 12.4.1 → 12.5.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- 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')) :
3
- 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) :
4
- (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));
5
- })(this, (function (exports, tapestry, React, pcoUrl$1, general, Jolt, shim, jsxRuntime, tapestryReact, addOns, churchCenter, people, toolbar, reactCalendly, algoliasearch, reactInstantsearchCore, reactTransitionGroup, datetimeFmt) { 'use strict';
2
+ 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')) :
3
+ 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) :
4
+ (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));
5
+ })(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';
6
6
 
7
7
  function _interopNamespaceDefault(e) {
8
8
  var n = Object.create(null);
@@ -23,11 +23,12 @@
23
23
 
24
24
  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
25
25
  var general__namespace = /*#__PURE__*/_interopNamespaceDefault(general);
26
+ var toolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(toolbar);
27
+ var logomarks__namespace = /*#__PURE__*/_interopNamespaceDefault(logomarks);
26
28
  var churchCenter__namespace = /*#__PURE__*/_interopNamespaceDefault(churchCenter);
27
29
  var people__namespace = /*#__PURE__*/_interopNamespaceDefault(people);
28
- var toolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(toolbar);
29
30
 
30
- var styles$m = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
31
+ var styles$u = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
31
32
 
32
33
  const AccessibilityToolbar = ({
33
34
  children
@@ -39,7 +40,7 @@
39
40
  (_a = document.getElementById("main-content")) === null || _a === void 0 ? void 0 : _a.focus();
40
41
  };
41
42
  return /*#__PURE__*/React.createElement("div", {
42
- className: styles$m["accessibility-toolbar"]
43
+ className: styles$u["accessibility-toolbar"]
43
44
  }, /*#__PURE__*/React.createElement(tapestry.Link, {
44
45
  href: "#main-content",
45
46
  kind: "primary",
@@ -358,11 +359,11 @@
358
359
  fill: fill
359
360
  })));
360
361
 
361
- 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"};
362
+ 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"};
362
363
 
363
364
  function AnnouncementIcon() {
364
365
  return /*#__PURE__*/React.createElement("svg", {
365
- className: styles$l["announcement-icon"],
366
+ className: styles$t["announcement-icon"],
366
367
  width: "16",
367
368
  height: "16",
368
369
  viewBox: "0 0 16 16",
@@ -487,7 +488,7 @@
487
488
  } = this.props;
488
489
  const isPromo = variant === "promo";
489
490
  return /*#__PURE__*/React.createElement("div", {
490
- className: classnames(styles$l["announcement"], styles$l[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
491
+ className: classnames(styles$t["announcement"], styles$t[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
491
492
  "data-announcement-variant": variant !== null && variant !== void 0 ? variant : "platform",
492
493
  style: isPromo ? {
493
494
  backgroundImage: promoBackgroundUrl,
@@ -496,7 +497,7 @@
496
497
  backgroundSize: "cover"
497
498
  } : undefined
498
499
  }, !isPromo && /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
499
- className: styles$l["announcement-content"],
500
+ className: styles$t["announcement-content"],
500
501
  style: style,
501
502
  ...platformProps
502
503
  }));
@@ -545,7 +546,7 @@
545
546
  const isPromo = variant === "promo";
546
547
  return /*#__PURE__*/React.createElement("button", {
547
548
  type: "button",
548
- className: classnames(styles$l.dismiss, isPromo && styles$l["dismiss--promo"]),
549
+ className: classnames(styles$t.dismiss, isPromo && styles$t["dismiss--promo"]),
549
550
  ...props
550
551
  }, /*#__PURE__*/React.createElement(X, {
551
552
  fill: isPromo ? "currentColor" : "white",
@@ -625,9 +626,9 @@
625
626
  ...platformProps
626
627
  } = this.props;
627
628
  return /*#__PURE__*/React.createElement("div", {
628
- className: styles$l["announcement"]
629
+ className: styles$t["announcement"]
629
630
  }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
630
- className: styles$l["announcement-content"],
631
+ className: styles$t["announcement-content"],
631
632
  style: style,
632
633
  ...platformProps
633
634
  }));
@@ -638,7 +639,7 @@
638
639
  }) {
639
640
  return /*#__PURE__*/React.createElement("button", {
640
641
  type: "button",
641
- className: styles$l.dismiss,
642
+ className: styles$t.dismiss,
642
643
  ...props
643
644
  }, /*#__PURE__*/React.createElement(X, {
644
645
  fill: "white",
@@ -1760,7 +1761,7 @@
1760
1761
  })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported")));
1761
1762
  }
1762
1763
 
1763
- var styles$k = {"icon-slot":"icon-slot-m3ZIk","name":"name-UNqbW"};
1764
+ var styles$s = {"name":"name-UNqbW"};
1764
1765
 
1765
1766
  const AppRow = ({
1766
1767
  appName,
@@ -1768,25 +1769,23 @@
1768
1769
  iconSize = 24
1769
1770
  }) => {
1770
1771
  if (appName === "Accounts") {
1771
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
1772
- className: styles$k["icon-slot"]
1773
- }, /*#__PURE__*/React.createElement(MonoAppIcon, {
1772
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MonoAppIcon, {
1774
1773
  appName: "Accounts",
1775
1774
  colors: colors,
1776
1775
  size: iconSize
1777
- })), /*#__PURE__*/React.createElement("span", {
1778
- className: styles$k.name
1776
+ }), /*#__PURE__*/React.createElement("span", {
1777
+ className: styles$s.name
1779
1778
  }, "Account settings"));
1780
1779
  }
1781
1780
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorAppIcon, {
1782
1781
  appName: appName.replace(/[\s-]/, ""),
1783
1782
  size: iconSize
1784
1783
  }), /*#__PURE__*/React.createElement("span", {
1785
- className: styles$k.name
1784
+ className: styles$s.name
1786
1785
  }, appName));
1787
1786
  };
1788
1787
 
1789
- var styles$j = {"button":"button-XMbeQ","label":"label-884of","chevron":"chevron-RRg9k"};
1788
+ var styles$r = {"button":"button-XMbeQ","label":"label-884of","chevron":"chevron-RRg9k"};
1790
1789
 
1791
1790
  const AppsButton = /*#__PURE__*/React.forwardRef(({
1792
1791
  appName,
@@ -1798,27 +1797,27 @@
1798
1797
  ...restProps,
1799
1798
  ref: ref,
1800
1799
  "aria-label": `App switcher: ${appName}`,
1801
- className: styles$j.button,
1800
+ className: styles$r.button,
1802
1801
  kind: "neutral-inline",
1803
1802
  label: /*#__PURE__*/React.createElement("span", {
1804
- className: styles$j.label
1803
+ className: styles$r.label
1805
1804
  }, isAccounts ? "Account settings" : appName),
1806
1805
  prefix: isAccounts ? (/*#__PURE__*/React.createElement(MonoAppIcon, {
1807
1806
  appName: "Accounts",
1808
1807
  colors: colors,
1809
- size: 22
1808
+ size: 24
1810
1809
  })) : (/*#__PURE__*/React.createElement(ColorAppIcon, {
1811
1810
  appName: appName.replace(/[\s-]/, ""),
1812
- size: 22
1811
+ size: 24
1813
1812
  })),
1814
1813
  suffix: /*#__PURE__*/React.createElement(DisclosureChevronIcon, {
1815
- className: `${styles$j.chevron} symbol`
1814
+ className: `${styles$r.chevron} symbol`
1816
1815
  })
1817
1816
  });
1818
1817
  });
1819
1818
  AppsButton.displayName = "AppsButton";
1820
1819
 
1821
- 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"};
1820
+ 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"};
1822
1821
 
1823
1822
  const AppsMenu = ({
1824
1823
  appName,
@@ -1839,8 +1838,8 @@
1839
1838
  }, /*#__PURE__*/React.createElement("a", {
1840
1839
  "aria-current": isCurrent ? "page" : undefined,
1841
1840
  "aria-label": name,
1842
- className: classnames(styles$i.link, {
1843
- [styles$i.current]: isCurrent
1841
+ className: classnames(styles$q.link, {
1842
+ [styles$q.current]: isCurrent
1844
1843
  }),
1845
1844
  "data-pendo": `app-switcher--change-app--${name}`,
1846
1845
  "data-turbolinks": false,
@@ -1856,22 +1855,22 @@
1856
1855
  colors: colors
1857
1856
  })), /*#__PURE__*/React.createElement(tapestry.PopoverContent, {
1858
1857
  "aria-label": "Switch app",
1859
- className: styles$i["popover-content"],
1858
+ className: styles$q["popover-content"],
1860
1859
  placement: "bottom start"
1861
1860
  }, /*#__PURE__*/React.createElement("nav", {
1862
- className: styles$i.nav,
1861
+ className: styles$q.nav,
1863
1862
  "data-pendo": "app-switcher"
1864
1863
  }, /*#__PURE__*/React.createElement("ul", {
1865
- className: styles$i.list,
1864
+ className: styles$q.list,
1866
1865
  role: "list"
1867
1866
  }, homeProduct && renderProductLink(homeProduct.name), restProducts.map(({
1868
1867
  name
1869
1868
  }) => renderProductLink(name)), accountsProduct && (/*#__PURE__*/React.createElement("li", {
1870
- className: styles$i["accounts-item"]
1869
+ className: styles$q["accounts-item"]
1871
1870
  }, /*#__PURE__*/React.createElement("a", {
1872
1871
  "aria-current": appName === accountsProduct.name ? "page" : undefined,
1873
1872
  "aria-label": "Account settings",
1874
- className: classnames(styles$i.link, styles$i["accounts-link"]),
1873
+ className: classnames(styles$q.link, styles$q["accounts-link"]),
1875
1874
  "data-pendo": "app-switcher--change-app--Accounts",
1876
1875
  "data-turbolinks": false,
1877
1876
  href: pcoUrl$1(env)("accounts") + getAppsSwitchProductPath(accountsProduct.name)
@@ -2079,7 +2078,7 @@
2079
2078
  })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported"));
2080
2079
  }
2081
2080
 
2082
- var styles$h = {"unbutton":"unbutton-lEbTR"};
2081
+ var styles$p = {"unbutton":"unbutton-lEbTR"};
2083
2082
 
2084
2083
  function Unbutton({
2085
2084
  className,
@@ -2088,7 +2087,7 @@
2088
2087
  ...nativeProps
2089
2088
  }) {
2090
2089
  return /*#__PURE__*/React.createElement("button", {
2091
- className: classnames(styles$h.unbutton, className),
2090
+ className: classnames(styles$p.unbutton, className),
2092
2091
  style: {
2093
2092
  ...style
2094
2093
  },
@@ -2097,7 +2096,7 @@
2097
2096
  });
2098
2097
  }
2099
2098
 
2100
- var styles$g = {"button":"button-wsipc","button-accounts":"button-accounts-zQmBM","chevron":"chevron-obyBF","is-expanded":"is-expanded-PoCQ9"};
2099
+ var styles$o = {"button":"button-wsipc","button-accounts":"button-accounts-zQmBM","chevron":"chevron-obyBF","is-expanded":"is-expanded-PoCQ9"};
2101
2100
 
2102
2101
  const LegacyAppsButton = ({
2103
2102
  appName,
@@ -2112,8 +2111,8 @@
2112
2111
  "aria-haspopup": "true",
2113
2112
  "aria-label": `App switcher: ${appName}`,
2114
2113
  onClick: onClick,
2115
- className: classnames(styles$g.button, {
2116
- [styles$g["is-expanded"]]: expanded
2114
+ className: classnames(styles$o.button, {
2115
+ [styles$o["is-expanded"]]: expanded
2117
2116
  }),
2118
2117
  type: "button",
2119
2118
  style: style,
@@ -2122,7 +2121,7 @@
2122
2121
  appName: "Accounts",
2123
2122
  colors: colors
2124
2123
  }), /*#__PURE__*/React.createElement("div", {
2125
- className: styles$g["button-accounts"]
2124
+ className: styles$o["button-accounts"]
2126
2125
  }, "Account settings"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorAppIcon, {
2127
2126
  appName: appName.replace(/[\s-]/, "")
2128
2127
  }), /*#__PURE__*/React.createElement(MonoAppName, {
@@ -2130,7 +2129,7 @@
2130
2129
  key: "mono-app-name",
2131
2130
  size: 24
2132
2131
  }))), /*#__PURE__*/React.createElement(DisclosureChevronIcon, {
2133
- className: styles$g.chevron,
2132
+ className: styles$o.chevron,
2134
2133
  key: "disclosure-chevron-icon"
2135
2134
  }));
2136
2135
  };
@@ -2263,7 +2262,7 @@
2263
2262
  }
2264
2263
  }
2265
2264
 
2266
- var styles$f = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
2265
+ var styles$n = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
2267
2266
 
2268
2267
  const Popup = ({
2269
2268
  className,
@@ -2271,8 +2270,8 @@
2271
2270
  isVisible,
2272
2271
  ...nativeProps
2273
2272
  }) => (/*#__PURE__*/React.createElement(C, {
2274
- className: classnames(styles$f.popup, {
2275
- [styles$f["is-visible"]]: isVisible
2273
+ className: classnames(styles$n.popup, {
2274
+ [styles$n["is-visible"]]: isVisible
2276
2275
  }, className),
2277
2276
  ...nativeProps
2278
2277
  }));
@@ -2280,11 +2279,11 @@
2280
2279
  const PopupRoot = ({
2281
2280
  ...nativeProps
2282
2281
  }) => (/*#__PURE__*/React.createElement("div", {
2283
- className: styles$f["popup-root"],
2282
+ className: styles$n["popup-root"],
2284
2283
  ...nativeProps
2285
2284
  }));
2286
2285
 
2287
- var styles$e = {"popup":"popup-bVhSa"};
2286
+ var styles$m = {"popup":"popup-bVhSa"};
2288
2287
 
2289
2288
  const LegacyAppsMenu = ({
2290
2289
  appName,
@@ -2322,7 +2321,7 @@
2322
2321
  cleanup: !visible,
2323
2322
  component: Outsider,
2324
2323
  onOutsideClick: toggle,
2325
- className: styles$e.popup,
2324
+ className: styles$m.popup,
2326
2325
  isVisible: visible
2327
2326
  }, /*#__PURE__*/React.createElement("menu", {
2328
2327
  ref: menuRef,
@@ -3232,34 +3231,117 @@ true;
3232
3231
  });
3233
3232
  }, []);
3234
3233
 
3234
+ const collections = {
3235
+ general: general__namespace,
3236
+ toolbar: toolbar__namespace
3237
+ };
3238
+ const paths = collections;
3239
+ function Icon({
3240
+ name,
3241
+ size = 16,
3242
+ style,
3243
+ theme,
3244
+ title,
3245
+ ...props
3246
+ }) {
3247
+ const [collection, symbol] = name.split(".");
3248
+ return /*#__PURE__*/React.createElement("svg", {
3249
+ "aria-hidden": title ? undefined : true,
3250
+ fill: "currentColor",
3251
+ height: size,
3252
+ role: title ? "img" : undefined,
3253
+ style: {
3254
+ color: theme && `var(${theme})`,
3255
+ flexShrink: 0,
3256
+ ...style
3257
+ },
3258
+ viewBox: "0 0 16 16",
3259
+ width: size,
3260
+ ...props
3261
+ }, title && /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("path", {
3262
+ d: paths[collection][symbol]
3263
+ }));
3264
+ }
3265
+
3266
+ const SEARCHABLE_PRODUCTS = [{
3267
+ appName: "Calendar",
3268
+ slug: "calendar"
3269
+ }, {
3270
+ appName: "Check-Ins",
3271
+ slug: "check-ins"
3272
+ }, {
3273
+ appName: "Giving",
3274
+ slug: "giving"
3275
+ }, {
3276
+ appName: "Groups",
3277
+ slug: "groups"
3278
+ }, {
3279
+ appName: "People",
3280
+ slug: "people"
3281
+ }, {
3282
+ appName: "Publishing",
3283
+ slug: "publishing"
3284
+ }, {
3285
+ appName: "Registrations",
3286
+ slug: "registrations"
3287
+ }, {
3288
+ appName: "Services",
3289
+ slug: "services"
3290
+ }];
3291
+ const KEYBOARD_SHORTCUTS = {
3292
+ copyLink: {
3293
+ key: "c",
3294
+ label: "Copy link",
3295
+ modifierKey: true
3296
+ },
3297
+ openInNewTab: {
3298
+ label: "Open in new tab"},
3299
+ openSearch: {
3300
+ key: "k",
3301
+ label: "Open search",
3302
+ modifierKey: true
3303
+ },
3304
+ select: {
3305
+ label: "Select",
3306
+ modifierKey: false,
3307
+ next: "ArrowDown",
3308
+ previous: "ArrowUp"
3309
+ }
3310
+ };
3311
+
3235
3312
  const isMac = () => /Mac|iPhone|iPad|iPod/.test(navigator.platform);
3236
3313
  const hasCommandKey = event => isMac() ? event.metaKey : event.ctrlKey;
3237
- const commandKeyLabel = () => isMac() ? "⌘" : "Ctrl+";
3238
- const isSearchShortcut = event => event.key.toLowerCase() === "k" && !event.altKey && !event.shiftKey && hasCommandKey(event);
3314
+ const matchesShortcut = (shortcut, event) => event.key.toLowerCase() === shortcut.key && !event.altKey && !event.shiftKey && hasCommandKey(event) === shortcut.modifierKey;
3315
+ const isSearchShortcut = event => matchesShortcut(KEYBOARD_SHORTCUTS.openSearch, event);
3239
3316
  // Products opened their own search with `/` before this one replaced it.
3240
3317
  const isLegacySearchShortcut = event => event.key === "/" && !event.altKey && !event.ctrlKey && !event.metaKey && !isTypingIn(event.target);
3241
- const isCopyShortcut = event => event.key.toLowerCase() === "c" && !event.altKey && !event.shiftKey && hasCommandKey(event);
3318
+ const isCopyShortcut = event => matchesShortcut(KEYBOARD_SHORTCUTS.copyLink, event);
3242
3319
  const isTypingIn = target => target instanceof Element && target.closest('input, select, textarea, [contenteditable]:not([contenteditable="false"])') !== null;
3243
3320
  const isTypingKey = event => event.key.length === 1 && event.key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey;
3244
3321
  const verticalStep = key => ({
3245
- ArrowDown: 1,
3246
- ArrowUp: -1
3322
+ [KEYBOARD_SHORTCUTS.select.next]: 1,
3323
+ [KEYBOARD_SHORTCUTS.select.previous]: -1
3247
3324
  })[key];
3248
3325
  const horizontalStep = key => ({
3249
3326
  ArrowLeft: -1,
3250
3327
  ArrowRight: 1
3251
3328
  })[key];
3252
3329
 
3330
+ var styles$l = {"searchButton":"searchButton-fYa5-"};
3331
+
3253
3332
  function SearchButton({
3333
+ mobile = false,
3254
3334
  onClick
3255
3335
  }) {
3256
3336
  return /*#__PURE__*/React.createElement("button", {
3257
- "aria-keyshortcuts": `${isMac() ? "Meta+K" : "Control+K"} /`,
3337
+ "aria-keyshortcuts": mobile ? undefined : `${isMac() ? "Meta" : "Control"}+${KEYBOARD_SHORTCUTS.openSearch.key.toUpperCase()} /`,
3258
3338
  "aria-label": "Search",
3339
+ className: styles$l.searchButton,
3259
3340
  onClick: onClick,
3260
3341
  type: "button"
3261
- }, /*#__PURE__*/React.createElement(Spyglass, {
3262
- fill: "currentColor"
3342
+ }, /*#__PURE__*/React.createElement(Icon, {
3343
+ name: "general.search",
3344
+ size: mobile ? 18 : 14
3263
3345
  }));
3264
3346
  }
3265
3347
 
@@ -3574,16 +3656,16 @@ true;
3574
3656
  const ENTRY_VERSION = 3;
3575
3657
  const MAX_ENTRIES = 50;
3576
3658
  const MAX_TEXT_LENGTH = 200;
3577
- const PRODUCTS = ["accounts", "calendar", "check-ins", "giving", "groups", "home", "login", "people", "publishing", "registrations", "services"];
3659
+ const PRODUCTS$1 = ["accounts", "calendar", "check-ins", "giving", "groups", "home", "login", "people", "publishing", "registrations", "services"];
3578
3660
  // Login has no pages worth returning to.
3579
- const APPS = PRODUCTS.filter(product => product !== "login");
3661
+ const APPS = PRODUCTS$1.filter(product => product !== "login");
3580
3662
  function isId(value) {
3581
3663
  return value !== "" && Array.from(value).every(character => character >= "0" && character <= "9");
3582
3664
  }
3583
3665
  // A PCRL looks like `<product>/v2/<resource_type>/<id>`.
3584
3666
  function isPcrl(value) {
3585
3667
  const segments = value.split("/");
3586
- return segments.length === 4 && PRODUCTS.some(product => product === segments[0]) && isId(segments[3]);
3668
+ return segments.length === 4 && PRODUCTS$1.some(product => product === segments[0]) && isId(segments[3]);
3587
3669
  }
3588
3670
  function isApp(value) {
3589
3671
  return APPS.some(app => app === value);
@@ -3982,7 +4064,13 @@ true;
3982
4064
  return selectedInField || ((_b = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "") !== "";
3983
4065
  }
3984
4066
 
3985
- const COPIED_FEEDBACK_MS = 1500;
4067
+ // eslint-disable-next-line sort-keys-fix/sort-keys-fix
4068
+ const COPIED_TIMING = {
4069
+ enter: 240,
4070
+ active: 1000,
4071
+ exit: 240
4072
+ };
4073
+ const COPIED_FEEDBACK_MS = COPIED_TIMING.enter + COPIED_TIMING.active + COPIED_TIMING.exit;
3986
4074
  // `copiedUrl` stays set briefly after a copy so the UI can confirm it.
3987
4075
  function useCopyLink() {
3988
4076
  const [copiedUrl, setCopiedUrl] = React.useState(null);
@@ -4006,22 +4094,27 @@ true;
4006
4094
  // Remembering which list the index belongs to puts the highlight back on the
4007
4095
  // first item whenever a new list replaces it, without an effect to reset it.
4008
4096
  // A list that grows or fills in under the same `list` keeps its highlight.
4009
- function useResultNavigation(items, list) {
4097
+ // Disabled, nothing is highlighted and the keys and pointer leave it alone.
4098
+ function useResultNavigation(items, list, enabled = true) {
4010
4099
  const [highlight, setHighlight] = React.useState({
4011
4100
  index: 0,
4012
4101
  list
4013
4102
  });
4014
4103
  const highlightedIndex = highlight.list === list ? highlight.index : 0;
4015
- const highlighted = items[highlightedIndex];
4104
+ const highlighted = enabled ? items[highlightedIndex] : undefined;
4016
4105
  const {
4017
4106
  copiedUrl,
4018
4107
  copy
4019
4108
  } = useCopyLink();
4020
- const highlightIndex = React.useCallback(index => setHighlight(current => current.list === list && current.index === index ? current : {
4021
- index,
4022
- list
4023
- }), [list]);
4109
+ const highlightIndex = React.useCallback(index => {
4110
+ if (!enabled) return;
4111
+ setHighlight(current => current.list === list && current.index === index ? current : {
4112
+ index,
4113
+ list
4114
+ });
4115
+ }, [enabled, list]);
4024
4116
  const handleKeyDown = event => {
4117
+ if (!enabled) return;
4025
4118
  const step = verticalStep(event.key);
4026
4119
  if (step && items.length > 0) {
4027
4120
  event.preventDefault();
@@ -4045,41 +4138,89 @@ true;
4045
4138
  };
4046
4139
  }
4047
4140
 
4048
- function groupSections(groups = []) {
4141
+ var styles$k = {"modal":"modal-NR3TO","visuallyHidden":"visuallyHidden-C28ju","panel":"panel-HlF7S"};
4142
+
4143
+ const FALLBACK_SLUGS = ["people", "services"];
4144
+ function defaultProduct(products, appName) {
4145
+ var _a;
4146
+ const current = products.find(product => product.appName === appName);
4147
+ const fallback = FALLBACK_SLUGS.map(slug => products.find(product => product.slug === slug)).find(Boolean);
4148
+ return (_a = current !== null && current !== void 0 ? current : fallback) !== null && _a !== void 0 ? _a : products[0];
4149
+ }
4150
+
4151
+ function groupSections(groups = [], timeZone) {
4049
4152
  return groups.map(({
4050
4153
  results,
4051
4154
  type
4052
4155
  }) => ({
4053
4156
  heading: type,
4054
- items: results.map(resultItem),
4157
+ items: results.map(result => resultItem(result, timeZone)),
4055
4158
  key: type
4056
4159
  }));
4057
4160
  }
4058
4161
  function resultItem({
4059
4162
  attributes,
4060
4163
  id
4061
- }) {
4164
+ }, timeZone) {
4062
4165
  return {
4166
+ category: attributes.category,
4167
+ imageUrl: attributes.image_url,
4063
4168
  key: id,
4064
- subtitle: summarize(attributes.metadata),
4169
+ product: attributes.product,
4170
+ subtitle: summarize(attributes, timeZone),
4065
4171
  title: attributes.title,
4066
4172
  url: attributes.url
4067
4173
  };
4068
4174
  }
4069
- function visitItem(visit) {
4175
+ function visitItem(visit, timeZone) {
4070
4176
  return {
4071
4177
  key: entryKey(visit.entry),
4072
- ...describeVisit(visit)
4178
+ ...describeVisit(visit, timeZone)
4073
4179
  };
4074
4180
  }
4075
- function summarize(metadata) {
4076
- return Object.values(metadata !== null && metadata !== void 0 ? metadata : {}).filter(value => typeof value === "string" && value !== "").join(" · ");
4181
+ const joinParts = (...parts) => parts.filter(Boolean).join(" · ");
4182
+ // Matches home-mobile's search subtitles, so a result reads the same in both.
4183
+ function summarize({
4184
+ category,
4185
+ metadata
4186
+ }, timeZone) {
4187
+ const text = key => {
4188
+ const value = metadata === null || metadata === void 0 ? void 0 : metadata[key];
4189
+ return typeof value === "string" ? value : "";
4190
+ };
4191
+ if (category === "profile") {
4192
+ return joinParts(text("phone"), text("email"));
4193
+ } else if (category === "event") {
4194
+ return eventTime(text("starts_at"), text("ends_at"), {
4195
+ recurring: (metadata === null || metadata === void 0 ? void 0 : metadata.recurring) === true,
4196
+ timeZone
4197
+ });
4198
+ } else {
4199
+ return text("details");
4200
+ }
4201
+ }
4202
+ // "Oct 25, 9–10:30am", in the organization's time zone like the rest
4203
+ // of Planning Center.
4204
+ function eventTime(startsAt, endsAt, {
4205
+ recurring,
4206
+ timeZone
4207
+ }) {
4208
+ if (startsAt === "") {
4209
+ return "";
4210
+ } else {
4211
+ const time = datetimeFmt.datetime(startsAt, endsAt || null, {
4212
+ style: "abbreviated",
4213
+ ...(timeZone && {
4214
+ timeZone
4215
+ })
4216
+ });
4217
+ return recurring ? joinParts(time, "Repeating") : time;
4218
+ }
4077
4219
  }
4078
4220
  // Unlike search results, recents come from every product, so each one names
4079
- // its product and type.
4080
- function describeVisit(visit) {
4221
+ // its type. The row's product icon says which product it came from.
4222
+ function describeVisit(visit, timeZone) {
4081
4223
  var _a, _b;
4082
- const subtitle = (...parts) => parts.filter(Boolean).join(" · ");
4083
4224
  if (visit.status === "page") {
4084
4225
  const {
4085
4226
  app,
@@ -4087,65 +4228,312 @@ true;
4087
4228
  title
4088
4229
  } = visit.entry;
4089
4230
  return {
4090
- 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 : ""),
4231
+ category: "generic",
4232
+ imageUrl: null,
4233
+ product: app,
4234
+ subtitle: joinParts(capitalize((_a = metadata === null || metadata === void 0 ? void 0 : metadata.type) !== null && _a !== void 0 ? _a : ""), (_b = metadata === null || metadata === void 0 ? void 0 : metadata.details) !== null && _b !== void 0 ? _b : ""),
4091
4235
  title,
4092
4236
  url: visit.url
4093
4237
  };
4094
4238
  } else {
4095
4239
  const {
4096
- metadata,
4240
+ attributes
4241
+ } = visit.result;
4242
+ const {
4243
+ category,
4244
+ image_url,
4097
4245
  product,
4098
4246
  title,
4099
4247
  type
4100
- } = visit.result.attributes;
4248
+ } = attributes;
4249
+ // Profiles and events say what they are with a phone number or a date.
4250
+ const kind = category === "generic" ? capitalize(pluralize.singular(type)) : "";
4101
4251
  return {
4102
- subtitle: subtitle(productName(product), type, summarize(metadata)),
4252
+ category,
4253
+ imageUrl: image_url,
4254
+ product,
4255
+ subtitle: joinParts(kind, summarize(attributes, timeZone)),
4103
4256
  title,
4104
4257
  url: visit.url
4105
4258
  };
4106
4259
  }
4107
4260
  }
4108
- // check-ins → Check-Ins
4109
- function productName(slug) {
4110
- return slug.split("-").map(capitalize).join("-");
4111
- }
4112
4261
  function capitalize(word) {
4113
4262
  return word.charAt(0).toUpperCase() + word.slice(1);
4114
4263
  }
4115
4264
 
4116
- const STORAGE_KEY = "topbar.product_search.last_product";
4117
- function readLastProduct() {
4118
- try {
4119
- return localStorage.getItem(STORAGE_KEY);
4120
- } catch {
4121
- return null;
4122
- }
4123
- }
4124
- function saveLastProduct(slug) {
4125
- try {
4126
- localStorage.setItem(STORAGE_KEY, slug);
4127
- } catch {
4128
- // Storage can be full or blocked; search still works without it.
4265
+ var styles$j = {"container":"container-YDdM1","hint":"hint-017Rd","keycap":"keycap-ENJM2","labels":"labels-GHPqL","copied":"copied-DUFa1"};
4266
+
4267
+ const SYMBOLS = {
4268
+ command: {
4269
+ label: "⌘",
4270
+ 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"]
4271
+ },
4272
+ down: {
4273
+ label: "↓",
4274
+ paths: ["M12 6l0 12", "M16 14l-4 4", "M8 14l4 4"]
4275
+ },
4276
+ return: {
4277
+ label: "↵",
4278
+ paths: ["M18 6v6a3 3 0 0 1 -3 3h-10l4 -4m0 8l-4 -4"]
4279
+ },
4280
+ up: {
4281
+ label: "↑",
4282
+ paths: ["M12 6l0 12", "M16 10l-4 -4", "M8 10l4 -4"]
4129
4283
  }
4284
+ };
4285
+ function Keycap(props) {
4286
+ return /*#__PURE__*/React.createElement("kbd", {
4287
+ className: styles$j.keycap
4288
+ }, "symbol" in props ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
4289
+ "aria-hidden": true,
4290
+ fill: "none",
4291
+ stroke: "currentColor",
4292
+ strokeLinecap: "round",
4293
+ strokeLinejoin: "round",
4294
+ viewBox: "0 0 24 24"
4295
+ }, SYMBOLS[props.symbol].paths.map(d => (/*#__PURE__*/React.createElement("path", {
4296
+ d: d,
4297
+ key: d
4298
+ })))), /*#__PURE__*/React.createElement("span", {
4299
+ className: styles$k.visuallyHidden
4300
+ }, SYMBOLS[props.symbol].label))) : props.label);
4301
+ }
4302
+ function CommandKey() {
4303
+ return isMac() ? /*#__PURE__*/React.createElement(Keycap, {
4304
+ symbol: "command"
4305
+ }) : /*#__PURE__*/React.createElement(Keycap, {
4306
+ label: "Ctrl"
4307
+ });
4130
4308
  }
4131
- function initialProduct(products) {
4132
- var _a, _b, _c;
4133
- const lastProduct = readLastProduct();
4134
- const bySlug = slug => products.find(product => product.slug === slug);
4135
- 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];
4309
+ function EnterKey() {
4310
+ return isMac() ? /*#__PURE__*/React.createElement(Keycap, {
4311
+ symbol: "return"
4312
+ }) : /*#__PURE__*/React.createElement(Keycap, {
4313
+ label: "Enter"
4314
+ });
4136
4315
  }
4137
-
4316
+ const {
4317
+ copyLink,
4318
+ openInNewTab,
4319
+ openSearch,
4320
+ select
4321
+ } = KEYBOARD_SHORTCUTS;
4138
4322
  function KeyboardHints({
4139
4323
  copied
4140
4324
  }) {
4141
- const command = commandKeyLabel();
4142
- 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", {
4325
+ return /*#__PURE__*/React.createElement("ul", {
4326
+ "aria-label": "Keyboard shortcuts",
4327
+ className: styles$j.container
4328
+ }, /*#__PURE__*/React.createElement("li", {
4329
+ className: styles$j.hint
4330
+ }, /*#__PURE__*/React.createElement(tapestry.Flex, {
4331
+ gap: 0.5
4332
+ }, select.modifierKey, /*#__PURE__*/React.createElement(Keycap, {
4333
+ symbol: "up"
4334
+ }), /*#__PURE__*/React.createElement(Keycap, {
4335
+ symbol: "down"
4336
+ })), select.label), /*#__PURE__*/React.createElement("li", {
4337
+ className: styles$j.hint
4338
+ }, /*#__PURE__*/React.createElement(tapestry.Flex, {
4339
+ gap: 0.5
4340
+ }, /*#__PURE__*/React.createElement(CommandKey, null), /*#__PURE__*/React.createElement(EnterKey, null)), openInNewTab.label), /*#__PURE__*/React.createElement("li", {
4341
+ className: classnames(styles$j.hint, copied && styles$j.copied),
4342
+ style: {
4343
+ "--copied-active": `${COPIED_TIMING.active}ms`,
4344
+ "--copied-enter": `${COPIED_TIMING.enter}ms`,
4345
+ "--copied-exit": `${COPIED_TIMING.exit}ms`
4346
+ }
4347
+ }, /*#__PURE__*/React.createElement(tapestry.Flex, {
4348
+ gap: 0.5
4349
+ }, /*#__PURE__*/React.createElement(CommandKey, null), /*#__PURE__*/React.createElement(Keycap, {
4350
+ label: copyLink.key.toUpperCase()
4351
+ })), /*#__PURE__*/React.createElement("span", {
4352
+ className: styles$j.labels
4353
+ }, /*#__PURE__*/React.createElement("span", {
4354
+ "aria-hidden": copied
4355
+ }, copyLink.label), /*#__PURE__*/React.createElement("span", {
4143
4356
  role: "status"
4144
- }, copied ? "Copied!" : "Copy link"), " \u00B7 ", command, "K Open search");
4357
+ }, copied && "Copied!"))), /*#__PURE__*/React.createElement("li", {
4358
+ className: styles$j.hint
4359
+ }, /*#__PURE__*/React.createElement(tapestry.Flex, {
4360
+ gap: 0.5
4361
+ }, /*#__PURE__*/React.createElement(CommandKey, null), /*#__PURE__*/React.createElement(Keycap, {
4362
+ label: openSearch.key.toUpperCase()
4363
+ })), openSearch.label));
4364
+ }
4365
+
4366
+ var styles$i = {"icon":"icon-XKLvN","squircle":"squircle-JCHr6"};
4367
+
4368
+ const PRODUCTS = {
4369
+ accounts: {
4370
+ gradient: "--t-fill-color-product-accounts-gradient-brand",
4371
+ path: logomarks__namespace.accounts
4372
+ },
4373
+ api: {
4374
+ gradient: "--t-fill-color-product-api-gradient-brand",
4375
+ path: logomarks__namespace.api
4376
+ },
4377
+ calendar: {
4378
+ gradient: "--t-fill-color-product-calendar-gradient-brand",
4379
+ path: logomarks__namespace.calendar
4380
+ },
4381
+ "check-ins": {
4382
+ gradient: "--t-fill-color-product-checkins-gradient-brand",
4383
+ path: logomarks__namespace.checkIns
4384
+ },
4385
+ "church-center": {
4386
+ gradient: "--t-fill-color-product-cc-gradient-brand",
4387
+ path: logomarks__namespace.churchCenter
4388
+ },
4389
+ giving: {
4390
+ gradient: "--t-fill-color-product-giving-gradient-brand",
4391
+ path: logomarks__namespace.giving
4392
+ },
4393
+ groups: {
4394
+ gradient: "--t-fill-color-product-groups-gradient-brand",
4395
+ path: logomarks__namespace.groups
4396
+ },
4397
+ home: {
4398
+ gradient: "--t-fill-color-product-home-gradient-brand",
4399
+ path: logomarks__namespace.home
4400
+ },
4401
+ "music-stand": {
4402
+ gradient: "--t-fill-color-product-musicstand-gradient-brand",
4403
+ path: logomarks__namespace.musicStand
4404
+ },
4405
+ people: {
4406
+ gradient: "--t-fill-color-product-people-gradient-brand",
4407
+ path: logomarks__namespace.people
4408
+ },
4409
+ publishing: {
4410
+ gradient: "--t-fill-color-product-publishing-gradient-brand",
4411
+ path: logomarks__namespace.publishing
4412
+ },
4413
+ registrations: {
4414
+ gradient: "--t-fill-color-product-registrations-gradient-brand",
4415
+ path: logomarks__namespace.registrations
4416
+ },
4417
+ services: {
4418
+ gradient: "--t-fill-color-product-services-gradient-brand",
4419
+ path: logomarks__namespace.services
4420
+ }
4421
+ };
4422
+ const isProductIconSlug = slug => Object.prototype.hasOwnProperty.call(PRODUCTS, slug);
4423
+ 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>`)}")`;
4424
+ function ProductIcon({
4425
+ size = 16,
4426
+ slug
4427
+ }) {
4428
+ const {
4429
+ gradient,
4430
+ path
4431
+ } = PRODUCTS[slug];
4432
+ const mask = maskFor(path);
4433
+ return /*#__PURE__*/React.createElement("span", {
4434
+ "aria-hidden": true,
4435
+ className: styles$i.icon,
4436
+ style: {
4437
+ height: size,
4438
+ width: size
4439
+ }
4440
+ }, /*#__PURE__*/React.createElement("span", {
4441
+ className: styles$i.squircle,
4442
+ style: {
4443
+ WebkitMaskImage: mask,
4444
+ background: `var(${gradient})`,
4445
+ maskImage: mask
4446
+ }
4447
+ }));
4448
+ }
4449
+
4450
+ var styles$h = {"picker":"picker-iuzzj","option":"option--7LXg"};
4451
+
4452
+ // Phones have no room for a tab per product, so they pick from a dropdown.
4453
+ // Complex mode renders each option's logomark, in the list and the trigger.
4454
+ function ProductSelect({
4455
+ children,
4456
+ onSelect,
4457
+ products,
4458
+ selected
4459
+ }) {
4460
+ const options = products.map(({
4461
+ appName,
4462
+ slug
4463
+ }) => ({
4464
+ label: (/*#__PURE__*/React.createElement("span", {
4465
+ className: styles$h.option
4466
+ }, /*#__PURE__*/React.createElement(ProductIcon, {
4467
+ slug: slug
4468
+ }), appName)),
4469
+ textValue: appName,
4470
+ value: slug
4471
+ }));
4472
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
4473
+ className: styles$h.picker
4474
+ }, /*#__PURE__*/React.createElement(tapestry.Select, {
4475
+ "aria-label": "Product",
4476
+ complex: true,
4477
+ onChange: event => onSelect(event.target.value),
4478
+ options: options,
4479
+ value: selected.slug
4480
+ })), /*#__PURE__*/React.createElement("div", {
4481
+ className: styles$k.panel
4482
+ }, children));
4483
+ }
4484
+
4485
+ // Browsers match :focus-visible on every focused text field, keyboard or not,
4486
+ // since typing follows either way. So this remembers what last moved focus,
4487
+ // shared by every field and listened for once, in the capture phase so it's
4488
+ // known before focus moves.
4489
+ let lastInteraction = "pointer";
4490
+ let listening = false;
4491
+ function listen() {
4492
+ if (listening) return;
4493
+ listening = true;
4494
+ document.addEventListener("keydown", event => {
4495
+ // Shortcuts like ⌘C don't move focus.
4496
+ if (!event.metaKey && !event.ctrlKey && !event.altKey) {
4497
+ lastInteraction = "keyboard";
4498
+ }
4499
+ }, true);
4500
+ document.addEventListener("pointerdown", () => {
4501
+ lastInteraction = "pointer";
4502
+ }, true);
4503
+ }
4504
+ /**
4505
+ * Whether a field was focused from the keyboard, as by Tab, rather than by a
4506
+ * click or tap. Spread `focusProps` onto the field, and style it by
4507
+ * `data-focus-visible`.
4508
+ */
4509
+ function useKeyboardFocus({
4510
+ onBlur,
4511
+ onFocus
4512
+ } = {}) {
4513
+ const [focusVisible, setFocusVisible] = React.useState(false);
4514
+ React.useEffect(listen, []);
4515
+ return {
4516
+ focusProps: {
4517
+ "data-focus-visible": focusVisible || undefined,
4518
+ onBlur: event => {
4519
+ setFocusVisible(false);
4520
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
4521
+ },
4522
+ onFocus: event => {
4523
+ const keyboard = lastInteraction === "keyboard";
4524
+ setFocusVisible(keyboard);
4525
+ onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, keyboard);
4526
+ }
4527
+ },
4528
+ focusVisible
4529
+ };
4145
4530
  }
4146
4531
 
4147
- var styles$d = {"tab":"tab-dz8ki"};
4532
+ var styles$g = {"tablist":"tablist-7ASvc","tab":"tab-dz8ki"};
4148
4533
 
4534
+ // With this many tabs or more, only the selected tab shows its name, so they
4535
+ // all fit. Fewer always fit with their names.
4536
+ const ICON_ONLY_TAB_COUNT = 5;
4149
4537
  function ProductTabs({
4150
4538
  children,
4151
4539
  onKeyDown,
@@ -4156,6 +4544,7 @@ true;
4156
4544
  const id = useInstanceId("product-tabs");
4157
4545
  const tabId = slug => `${id}-tab-${slug}`;
4158
4546
  const tabRefs = React.useRef(new Map());
4547
+ const showAllNames = products.length < ICON_ONLY_TAB_COUNT;
4159
4548
  const handleKeyDown = event => {
4160
4549
  var _a;
4161
4550
  const offset = horizontalStep(event.key);
@@ -4170,13 +4559,14 @@ true;
4170
4559
  }
4171
4560
  };
4172
4561
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
4173
- "aria-label": "Product",
4562
+ "aria-label": "Search in",
4563
+ className: styles$g.tablist,
4174
4564
  onKeyDown: handleKeyDown,
4175
4565
  role: "tablist"
4176
- }, products.map(product => (/*#__PURE__*/React.createElement("button", {
4566
+ }, products.map(product => (/*#__PURE__*/React.createElement(Tab, {
4177
4567
  "aria-controls": `${id}-panel`,
4568
+ "aria-describedby": `${tabId(product.slug)}-description`,
4178
4569
  "aria-selected": product === selected,
4179
- className: styles$d.tab,
4180
4570
  id: tabId(product.slug),
4181
4571
  key: product.slug,
4182
4572
  onClick: () => onSelect(product.slug),
@@ -4187,15 +4577,397 @@ true;
4187
4577
  tabRefs.current.delete(product.slug);
4188
4578
  }
4189
4579
  },
4190
- role: "tab",
4191
- tabIndex: product === selected ? 0 : -1,
4192
- type: "button"
4193
- }, product.appName)))), /*#__PURE__*/React.createElement("div", {
4580
+ tabIndex: product === selected ? 0 : -1
4581
+ }, /*#__PURE__*/React.createElement(ProductIcon, {
4582
+ slug: product.slug
4583
+ }), showAllNames || product === selected ? product.appName : (/*#__PURE__*/React.createElement("span", {
4584
+ className: styles$k.visuallyHidden
4585
+ }, product.appName)))))), /*#__PURE__*/React.createElement("div", {
4586
+ className: styles$k.visuallyHidden
4587
+ }, products.map(product => (/*#__PURE__*/React.createElement("span", {
4588
+ id: `${tabId(product.slug)}-description`,
4589
+ key: product.slug
4590
+ }, "Planning Center ", product.appName)))), /*#__PURE__*/React.createElement("div", {
4194
4591
  "aria-labelledby": tabId(selected.slug),
4592
+ className: styles$k.panel,
4195
4593
  id: `${id}-panel`,
4196
4594
  role: "tabpanel"
4197
4595
  }, children));
4198
4596
  }
4597
+ // The modal's focus scope moves focus here by script when Tab is pressed, and
4598
+ // Safari doesn't match :focus-visible on focus moved by script. So the tab
4599
+ // remembers whether the keyboard brought focus, and the ring keys off that.
4600
+ const Tab = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
4601
+ const {
4602
+ focusProps
4603
+ } = useKeyboardFocus();
4604
+ return /*#__PURE__*/React.createElement("button", {
4605
+ className: styles$g.tab,
4606
+ ref: ref,
4607
+ role: "tab",
4608
+ type: "button",
4609
+ ...props,
4610
+ ...focusProps
4611
+ });
4612
+ });
4613
+
4614
+ function BlankStateRecentlyVisited(props) {
4615
+ const id = useInstanceId("blank-state-initial");
4616
+ return /*#__PURE__*/React.createElement("svg", {
4617
+ viewBox: "0 0 197 174",
4618
+ fill: "none",
4619
+ "aria-hidden": "true",
4620
+ focusable: "false",
4621
+ ...props
4622
+ }, /*#__PURE__*/React.createElement("path", {
4623
+ 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",
4624
+ fill: "currentColor"
4625
+ }), /*#__PURE__*/React.createElement("g", {
4626
+ clipPath: `url(#${id}-a)`
4627
+ }, /*#__PURE__*/React.createElement("path", {
4628
+ 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",
4629
+ fill: "#333"
4630
+ }), /*#__PURE__*/React.createElement("path", {
4631
+ 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",
4632
+ fill: "#333"
4633
+ }), /*#__PURE__*/React.createElement("path", {
4634
+ 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",
4635
+ fill: "#4D4D4D"
4636
+ }), /*#__PURE__*/React.createElement("path", {
4637
+ 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",
4638
+ fill: "#F2F2F2"
4639
+ }), /*#__PURE__*/React.createElement("path", {
4640
+ 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",
4641
+ fill: "#E6E6E6"
4642
+ }), /*#__PURE__*/React.createElement("path", {
4643
+ 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",
4644
+ fill: "#333"
4645
+ }), /*#__PURE__*/React.createElement("path", {
4646
+ 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",
4647
+ fill: "#333"
4648
+ }), /*#__PURE__*/React.createElement("path", {
4649
+ 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",
4650
+ fill: "#4D4D4D"
4651
+ }), /*#__PURE__*/React.createElement("path", {
4652
+ 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",
4653
+ fill: "#F2F2F2"
4654
+ }), /*#__PURE__*/React.createElement("path", {
4655
+ 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",
4656
+ fill: "#E6E6E6"
4657
+ }), /*#__PURE__*/React.createElement("path", {
4658
+ 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",
4659
+ fill: "#4D4D4D"
4660
+ }), /*#__PURE__*/React.createElement("path", {
4661
+ 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",
4662
+ fill: "gray"
4663
+ }), /*#__PURE__*/React.createElement("path", {
4664
+ 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",
4665
+ fill: "#333"
4666
+ }), /*#__PURE__*/React.createElement("path", {
4667
+ 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",
4668
+ fill: "#F2F2F2"
4669
+ }), /*#__PURE__*/React.createElement("path", {
4670
+ 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",
4671
+ fill: "#4D4D4D"
4672
+ }), /*#__PURE__*/React.createElement("path", {
4673
+ 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",
4674
+ fill: "gray"
4675
+ }), /*#__PURE__*/React.createElement("path", {
4676
+ 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",
4677
+ fill: "#333"
4678
+ }), /*#__PURE__*/React.createElement("path", {
4679
+ 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",
4680
+ fill: "#F2F2F2"
4681
+ }), /*#__PURE__*/React.createElement("path", {
4682
+ 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",
4683
+ fill: "gray"
4684
+ }), /*#__PURE__*/React.createElement("path", {
4685
+ 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",
4686
+ fill: "#333"
4687
+ }), /*#__PURE__*/React.createElement("path", {
4688
+ 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",
4689
+ fill: "#333"
4690
+ }), /*#__PURE__*/React.createElement("path", {
4691
+ 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",
4692
+ fill: "#4D4D4D"
4693
+ }), /*#__PURE__*/React.createElement("path", {
4694
+ 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",
4695
+ fill: "gray"
4696
+ }), /*#__PURE__*/React.createElement("path", {
4697
+ 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",
4698
+ fill: "#F2F2F2"
4699
+ }), /*#__PURE__*/React.createElement("path", {
4700
+ 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",
4701
+ fill: "#E6E6E6"
4702
+ }), /*#__PURE__*/React.createElement("path", {
4703
+ 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",
4704
+ fill: "#F2F2F2"
4705
+ }), /*#__PURE__*/React.createElement("path", {
4706
+ 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",
4707
+ fill: "#E6E6E6"
4708
+ }), /*#__PURE__*/React.createElement("path", {
4709
+ 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",
4710
+ fill: "#3690EA"
4711
+ }), /*#__PURE__*/React.createElement("path", {
4712
+ 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",
4713
+ fill: "#4D4D4D"
4714
+ }), /*#__PURE__*/React.createElement("path", {
4715
+ 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",
4716
+ fill: "gray"
4717
+ }), /*#__PURE__*/React.createElement("path", {
4718
+ 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",
4719
+ fill: "#333"
4720
+ }), /*#__PURE__*/React.createElement("path", {
4721
+ 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",
4722
+ fill: "#F2F2F2"
4723
+ }), /*#__PURE__*/React.createElement("path", {
4724
+ 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",
4725
+ fill: "#4D4D4D"
4726
+ }), /*#__PURE__*/React.createElement("path", {
4727
+ 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",
4728
+ fill: "gray"
4729
+ }), /*#__PURE__*/React.createElement("path", {
4730
+ 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",
4731
+ fill: "#333"
4732
+ }), /*#__PURE__*/React.createElement("path", {
4733
+ 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",
4734
+ fill: "#F2F2F2"
4735
+ }), /*#__PURE__*/React.createElement("path", {
4736
+ 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",
4737
+ fill: "gray"
4738
+ }), /*#__PURE__*/React.createElement("path", {
4739
+ 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",
4740
+ fill: "#333"
4741
+ }), /*#__PURE__*/React.createElement("path", {
4742
+ 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",
4743
+ fill: "#333"
4744
+ }), /*#__PURE__*/React.createElement("path", {
4745
+ 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",
4746
+ fill: "#4D4D4D"
4747
+ }), /*#__PURE__*/React.createElement("path", {
4748
+ 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",
4749
+ fill: "gray"
4750
+ }), /*#__PURE__*/React.createElement("path", {
4751
+ 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",
4752
+ fill: "#F2F2F2"
4753
+ }), /*#__PURE__*/React.createElement("path", {
4754
+ 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",
4755
+ fill: "#E6E6E6"
4756
+ }), /*#__PURE__*/React.createElement("path", {
4757
+ 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",
4758
+ fill: "#F2F2F2"
4759
+ }), /*#__PURE__*/React.createElement("path", {
4760
+ 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",
4761
+ fill: "#E6E6E6"
4762
+ }), /*#__PURE__*/React.createElement("path", {
4763
+ 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",
4764
+ fill: "#999"
4765
+ }), /*#__PURE__*/React.createElement("path", {
4766
+ 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",
4767
+ fill: "#3690EA"
4768
+ }), /*#__PURE__*/React.createElement("path", {
4769
+ 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",
4770
+ fill: "#B3B3B3"
4771
+ }), /*#__PURE__*/React.createElement("path", {
4772
+ 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",
4773
+ fill: "#3690EA"
4774
+ }), /*#__PURE__*/React.createElement("path", {
4775
+ 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",
4776
+ fill: "#F2F2F2"
4777
+ }), /*#__PURE__*/React.createElement("path", {
4778
+ 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",
4779
+ fill: "#E6E6E6"
4780
+ }), /*#__PURE__*/React.createElement("path", {
4781
+ d: "M100.863 15.992h-5.81v1.293h5.81v-1.293Z",
4782
+ fill: "#F2F2F2"
4783
+ }), /*#__PURE__*/React.createElement("path", {
4784
+ 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",
4785
+ fill: "#1A1A1A"
4786
+ }), /*#__PURE__*/React.createElement("path", {
4787
+ 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",
4788
+ fill: "#fff"
4789
+ }), /*#__PURE__*/React.createElement("path", {
4790
+ 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",
4791
+ fill: "#1A1A1A"
4792
+ }), /*#__PURE__*/React.createElement("path", {
4793
+ 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",
4794
+ fill: "#fff"
4795
+ }), /*#__PURE__*/React.createElement("path", {
4796
+ 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",
4797
+ fill: "#999"
4798
+ }), /*#__PURE__*/React.createElement("path", {
4799
+ 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",
4800
+ fill: "#3690EA"
4801
+ }), /*#__PURE__*/React.createElement("path", {
4802
+ 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",
4803
+ fill: "#F2F2F2"
4804
+ }), /*#__PURE__*/React.createElement("path", {
4805
+ 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",
4806
+ fill: "#B3B3B3"
4807
+ }), /*#__PURE__*/React.createElement("path", {
4808
+ 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",
4809
+ fill: "#3690EA"
4810
+ }), /*#__PURE__*/React.createElement("path", {
4811
+ 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",
4812
+ fill: "#F2F2F2"
4813
+ }), /*#__PURE__*/React.createElement("path", {
4814
+ 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",
4815
+ fill: "#E6E6E6"
4816
+ }), /*#__PURE__*/React.createElement("path", {
4817
+ 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",
4818
+ fill: "#1A1A1A"
4819
+ }), /*#__PURE__*/React.createElement("path", {
4820
+ 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",
4821
+ fill: "#fff"
4822
+ }), /*#__PURE__*/React.createElement("path", {
4823
+ 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",
4824
+ fill: "#1A1A1A"
4825
+ }), /*#__PURE__*/React.createElement("path", {
4826
+ 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",
4827
+ fill: "#fff"
4828
+ }), /*#__PURE__*/React.createElement("path", {
4829
+ 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",
4830
+ fill: "#999"
4831
+ }), /*#__PURE__*/React.createElement("path", {
4832
+ 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",
4833
+ fill: "#4BAAF7"
4834
+ }), /*#__PURE__*/React.createElement("g", {
4835
+ clipPath: `url(#${id}-b)`
4836
+ }, /*#__PURE__*/React.createElement("path", {
4837
+ 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",
4838
+ fill: "#6D4932"
4839
+ }), /*#__PURE__*/React.createElement("path", {
4840
+ 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",
4841
+ fill: "#A87B5D"
4842
+ }), /*#__PURE__*/React.createElement("path", {
4843
+ 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",
4844
+ fill: "#916A50"
4845
+ }), /*#__PURE__*/React.createElement("path", {
4846
+ opacity: ".3",
4847
+ 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",
4848
+ fill: "#D4B097"
4849
+ })), /*#__PURE__*/React.createElement("g", {
4850
+ clipPath: `url(#${id}-c)`
4851
+ }, /*#__PURE__*/React.createElement("path", {
4852
+ 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",
4853
+ strokeWidth: "6",
4854
+ strokeMiterlimit: "10",
4855
+ stroke: `url(#${id}-d)`
4856
+ }), /*#__PURE__*/React.createElement("path", {
4857
+ 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",
4858
+ fill: `url(#${id}-e)`
4859
+ })), /*#__PURE__*/React.createElement("path", {
4860
+ 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",
4861
+ fill: `url(#${id}-f)`
4862
+ }), /*#__PURE__*/React.createElement("path", {
4863
+ d: "M34.1 108.015v-3.363h57.697v3.363H34.1Z",
4864
+ fill: `url(#${id}-g)`
4865
+ }), /*#__PURE__*/React.createElement("path", {
4866
+ d: "M79.673 108.015v-3.363h12.124v3.363H79.673Z",
4867
+ fill: `url(#${id}-h)`
4868
+ })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
4869
+ id: `${id}-d`,
4870
+ x1: "150.254",
4871
+ y1: "100.449",
4872
+ x2: "158.273",
4873
+ y2: "100.449",
4874
+ gradientUnits: "userSpaceOnUse"
4875
+ }, /*#__PURE__*/React.createElement("stop", {
4876
+ stopColor: "#FEFEFE"
4877
+ }), /*#__PURE__*/React.createElement("stop", {
4878
+ offset: "1",
4879
+ stopColor: "#fff"
4880
+ })), /*#__PURE__*/React.createElement("linearGradient", {
4881
+ id: `${id}-e`,
4882
+ x1: "132.629",
4883
+ y1: "100.449",
4884
+ x2: "155.32",
4885
+ y2: "100.449",
4886
+ gradientUnits: "userSpaceOnUse"
4887
+ }, /*#__PURE__*/React.createElement("stop", {
4888
+ stopColor: "#FEFEFE"
4889
+ }), /*#__PURE__*/React.createElement("stop", {
4890
+ offset: "1",
4891
+ stopColor: "#F3F3F3"
4892
+ })), /*#__PURE__*/React.createElement("linearGradient", {
4893
+ id: `${id}-f`,
4894
+ x1: "56.925",
4895
+ y1: "45.291",
4896
+ x2: "56.925",
4897
+ y2: "93.076",
4898
+ gradientUnits: "userSpaceOnUse"
4899
+ }, /*#__PURE__*/React.createElement("stop", {
4900
+ stopColor: "#FEFEFE"
4901
+ }), /*#__PURE__*/React.createElement("stop", {
4902
+ offset: "1",
4903
+ stopColor: "#D1D6E7"
4904
+ })), /*#__PURE__*/React.createElement("linearGradient", {
4905
+ id: `${id}-g`,
4906
+ x1: "62.684",
4907
+ y1: "108.015",
4908
+ x2: "62.684",
4909
+ y2: "104.85",
4910
+ gradientUnits: "userSpaceOnUse"
4911
+ }, /*#__PURE__*/React.createElement("stop", {
4912
+ stopColor: "#D2D6E8"
4913
+ }), /*#__PURE__*/React.createElement("stop", {
4914
+ offset: ".726",
4915
+ stopColor: "#D1D6E7"
4916
+ })), /*#__PURE__*/React.createElement("linearGradient", {
4917
+ id: `${id}-h`,
4918
+ x1: "85.68",
4919
+ y1: "108.015",
4920
+ x2: "85.68",
4921
+ y2: "104.85",
4922
+ gradientUnits: "userSpaceOnUse"
4923
+ }, /*#__PURE__*/React.createElement("stop", {
4924
+ stopColor: "#D8DDF1"
4925
+ }), /*#__PURE__*/React.createElement("stop", {
4926
+ offset: ".726",
4927
+ stopColor: "#E2E6F6"
4928
+ })), /*#__PURE__*/React.createElement("clipPath", {
4929
+ id: `${id}-a`
4930
+ }, /*#__PURE__*/React.createElement("path", {
4931
+ fill: "#fff",
4932
+ transform: "translate(12.006)",
4933
+ d: "M0 0h172v174H0z"
4934
+ })), /*#__PURE__*/React.createElement("clipPath", {
4935
+ id: `${id}-b`
4936
+ }, /*#__PURE__*/React.createElement("path", {
4937
+ fill: "#fff",
4938
+ transform: "translate(29.084 105.073)",
4939
+ d: "M0 0h138.387v68.927H0z"
4940
+ })), /*#__PURE__*/React.createElement("clipPath", {
4941
+ id: `${id}-c`
4942
+ }, /*#__PURE__*/React.createElement("path", {
4943
+ fill: "#fff",
4944
+ transform: "translate(135.278 93.304)",
4945
+ d: "M0 0h22.995v14.29H0z"
4946
+ }))));
4947
+ }
4948
+
4949
+ var styles$f = {"blank_state":"blank_state-wMOWN","image":"image-uy0Fd"};
4950
+
4951
+ function BlankState$1({
4952
+ image,
4953
+ role,
4954
+ subtitle,
4955
+ title
4956
+ }) {
4957
+ return /*#__PURE__*/React.createElement(tapestry.Flex, {
4958
+ role: role,
4959
+ className: styles$f.blank_state,
4960
+ direction: "column",
4961
+ align: "center",
4962
+ gap: 3
4963
+ }, /*#__PURE__*/React.createElement(tapestry.Flex, {
4964
+ className: styles$f.image
4965
+ }, image), /*#__PURE__*/React.createElement(tapestry.Flex, {
4966
+ direction: "column",
4967
+ align: "center",
4968
+ gap: 1
4969
+ }, /*#__PURE__*/React.createElement("h2", null, title), /*#__PURE__*/React.createElement("p", null, subtitle)));
4970
+ }
4199
4971
 
4200
4972
  function EndOfResultsObserver({
4201
4973
  onVisible
@@ -4215,39 +4987,98 @@ true;
4215
4987
 
4216
4988
  const resultId = (listboxId, index) => `${listboxId}-result-${index}`;
4217
4989
 
4218
- var styles$c = {"result":"result-Thq2C"};
4990
+ var styles$e = {"result":"result-Thq2C","title":"title-KYUEn","subtitle":"subtitle-R2haq","image":"image-KVDor","avatar":"avatar-6Gh62","photo":"photo-FZR3Q","badge":"badge-trUKt"};
4219
4991
 
4220
4992
  function SearchResult({
4993
+ category,
4994
+ describedBy,
4221
4995
  highlighted,
4222
4996
  id,
4997
+ imageUrl,
4223
4998
  onHighlight,
4999
+ product,
4224
5000
  subtitle,
4225
5001
  title,
4226
5002
  url
4227
5003
  }) {
4228
5004
  const ref = React.useRef(null);
5005
+ // A hovered result is already under the pointer, and scrolling it clear of
5006
+ // the panel's scroll padding would slide the list out from under the mouse.
5007
+ const highlightedByPointer = React.useRef(false);
4229
5008
  React.useEffect(() => {
4230
5009
  var _a;
4231
- if (highlighted) (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
4232
- block: "nearest"
4233
- });
5010
+ if (!highlighted) return;
5011
+ if (highlightedByPointer.current) {
5012
+ highlightedByPointer.current = false;
5013
+ } else {
5014
+ (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
5015
+ block: "nearest"
5016
+ });
5017
+ }
4234
5018
  }, [highlighted]);
5019
+ const highlightFromPointer = () => {
5020
+ if (highlighted) return;
5021
+ highlightedByPointer.current = true;
5022
+ onHighlight();
5023
+ };
4235
5024
  // Focus stays in the search input, which points at the highlighted result
4236
5025
  // with aria-activedescendant, so results are kept out of the tab order.
4237
5026
  // Mouse move rather than enter: arrowing scrolls results under a resting
4238
5027
  // pointer, and that shouldn't steal the highlight.
4239
- return /*#__PURE__*/React.createElement("a", {
4240
- "aria-selected": highlighted,
4241
- className: styles$c.result,
4242
- href: url,
4243
- id: id,
4244
- onMouseMove: onHighlight,
4245
- ref: ref,
4246
- role: "option",
4247
- tabIndex: -1
4248
- }, /*#__PURE__*/React.createElement("div", null, title), /*#__PURE__*/React.createElement("div", null, subtitle));
5028
+ return (
5029
+ /*#__PURE__*/
5030
+ // Named by the title alone, so screen readers say "Ada Lovelace" rather
5031
+ // than the whole row. The section and subtitle are read after a pause.
5032
+ React.createElement("a", {
5033
+ "aria-describedby": [describedBy, subtitle && `${id}-subtitle`].filter(Boolean).join(" ") || undefined,
5034
+ "aria-labelledby": title ? `${id}-title` : undefined,
5035
+ "aria-selected": highlighted,
5036
+ className: styles$e.result,
5037
+ href: url,
5038
+ id: id,
5039
+ onMouseMove: highlightFromPointer,
5040
+ ref: ref,
5041
+ role: "option",
5042
+ tabIndex: -1
5043
+ }, /*#__PURE__*/React.createElement(ResultImage, {
5044
+ category: category,
5045
+ imageUrl: imageUrl,
5046
+ product: product
5047
+ }), /*#__PURE__*/React.createElement("span", {
5048
+ className: styles$e.title,
5049
+ id: `${id}-title`
5050
+ }, title), /*#__PURE__*/React.createElement("span", {
5051
+ className: styles$e.subtitle,
5052
+ id: `${id}-subtitle`
5053
+ }, subtitle))
5054
+ );
5055
+ }
5056
+ // A person's photo or the result's own image, badged with its product, or
5057
+ // just the product's logomark when there's no image.
5058
+ function ResultImage({
5059
+ category,
5060
+ imageUrl,
5061
+ product
5062
+ }) {
5063
+ const icon = size => isProductIconSlug(product) ? (/*#__PURE__*/React.createElement(ProductIcon, {
5064
+ size: size,
5065
+ slug: product
5066
+ })) : null;
5067
+ return /*#__PURE__*/React.createElement("span", {
5068
+ "aria-hidden": true,
5069
+ className: styles$e.image
5070
+ }, imageUrl ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
5071
+ alt: "",
5072
+ className: category === "profile" ? styles$e.avatar : styles$e.photo,
5073
+ loading: "lazy",
5074
+ src: imageUrl
5075
+ }), /*#__PURE__*/React.createElement("span", {
5076
+ className: styles$e.badge
5077
+ }, icon(16)))) : icon("100%"));
4249
5078
  }
4250
5079
 
5080
+ var styles$d = {"heading":"heading-LioUF","group":"group-cKChg"};
5081
+
4251
5082
  // Sections with a heading render as labelled groups; ones without render
4252
5083
  // their items straight into the listbox. Indexes run across every section.
4253
5084
  function ResultListbox({
@@ -4260,13 +5091,19 @@ true;
4260
5091
  sections
4261
5092
  }) {
4262
5093
  let index = 0;
4263
- const renderItem = item => {
5094
+ // With aria-activedescendant, screen readers don't reliably announce the
5095
+ // group a highlighted option is in, so each option names its heading too.
5096
+ const renderItem = (item, headingId) => {
4264
5097
  const itemIndex = index++;
4265
5098
  return /*#__PURE__*/React.createElement(SearchResult, {
5099
+ category: item.category,
5100
+ describedBy: headingId,
4266
5101
  highlighted: itemIndex === highlightedIndex,
4267
5102
  id: resultId(id, itemIndex),
5103
+ imageUrl: item.imageUrl,
4268
5104
  key: item.key,
4269
5105
  onHighlight: () => onHighlight(itemIndex),
5106
+ product: item.product,
4270
5107
  subtitle: item.subtitle,
4271
5108
  title: item.title,
4272
5109
  url: item.url
@@ -4282,16 +5119,18 @@ true;
4282
5119
  if (section.heading === undefined) {
4283
5120
  return /*#__PURE__*/React.createElement(React.Fragment, {
4284
5121
  key: section.key
4285
- }, section.items.map(renderItem));
5122
+ }, section.items.map(item => renderItem(item)));
4286
5123
  }
4287
5124
  const headingId = `${id}-group-${sectionIndex}`;
4288
5125
  return /*#__PURE__*/React.createElement("div", {
4289
5126
  "aria-labelledby": headingId,
5127
+ className: styles$d.group,
4290
5128
  key: section.key,
4291
5129
  role: "group"
4292
5130
  }, /*#__PURE__*/React.createElement("div", {
5131
+ className: styles$d.heading,
4293
5132
  id: headingId
4294
- }, section.heading), section.items.map(renderItem));
5133
+ }, section.heading), section.items.map(item => renderItem(item, headingId)));
4295
5134
  }));
4296
5135
  }
4297
5136
 
@@ -4305,9 +5144,14 @@ true;
4305
5144
  }) {
4306
5145
  const headingId = `${navigation.id}-heading`;
4307
5146
  if (items.length === 0 && !hasMore && !loading) {
4308
- return /*#__PURE__*/React.createElement("p", null, "Pages you visit will show up here.");
5147
+ return /*#__PURE__*/React.createElement(BlankState$1, {
5148
+ image: /*#__PURE__*/React.createElement(BlankStateRecentlyVisited, null),
5149
+ subtitle: "Pages you visit will show up here.",
5150
+ title: "Recently visited"
5151
+ });
4309
5152
  } else {
4310
5153
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
5154
+ className: styles$d.heading,
4311
5155
  id: headingId
4312
5156
  }, "Recently visited"), /*#__PURE__*/React.createElement(ResultListbox, {
4313
5157
  labelledBy: headingId,
@@ -4323,6 +5167,8 @@ true;
4323
5167
  }
4324
5168
  }
4325
5169
 
5170
+ var styles$c = {"row":"row-5P7UQ","header":"header-sXEyG","closeButton":"closeButton-rPJJV","input":"input-YQkTC","clearButton":"clearButton-9Yh9w"};
5171
+
4326
5172
  // A combobox: focus stays here while aria-activedescendant points screen
4327
5173
  // readers at the highlighted result in the listbox it controls.
4328
5174
  function SearchInput({
@@ -4331,29 +5177,433 @@ true;
4331
5177
  inputRef,
4332
5178
  listboxId,
4333
5179
  onChange,
5180
+ onClose,
4334
5181
  onFocus,
4335
5182
  onKeyDown,
4336
5183
  value
4337
5184
  }) {
4338
- return /*#__PURE__*/React.createElement("input", {
5185
+ const {
5186
+ focusProps
5187
+ } = useKeyboardFocus({
5188
+ onFocus: (event, keyboard) => {
5189
+ // Tabbing in selects the whole term, which the next keystroke would
5190
+ // replace. Put the cursor after it instead, to keep typing. The
5191
+ // browser selects after the focus event, so this waits a frame and
5192
+ // only undoes that select-all: typing on the tabs moves focus here by
5193
+ // script, which keeps the cursor, and the keystroke may already be in.
5194
+ if (keyboard) {
5195
+ const input = event.currentTarget;
5196
+ requestAnimationFrame(() => {
5197
+ const length = input.value.length;
5198
+ const selectedAll = length > 0 && input.selectionStart === 0 && input.selectionEnd === length;
5199
+ if (document.activeElement !== input || !selectedAll) return;
5200
+ input.setSelectionRange(length, length);
5201
+ });
5202
+ }
5203
+ onFocus();
5204
+ }
5205
+ });
5206
+ return /*#__PURE__*/React.createElement("div", {
5207
+ className: styles$c.row
5208
+ }, /*#__PURE__*/React.createElement("label", {
5209
+ className: styles$c.header
5210
+ }, /*#__PURE__*/React.createElement(Icon, {
5211
+ name: "general.search",
5212
+ size: 20,
5213
+ theme: "--t-icon-color-dim"
5214
+ }), /*#__PURE__*/React.createElement("input", {
4339
5215
  "aria-activedescendant": highlightedIndex === null ? undefined : resultId(listboxId, highlightedIndex),
4340
5216
  "aria-autocomplete": "list",
4341
5217
  "aria-controls": expanded ? listboxId : undefined,
4342
5218
  "aria-expanded": expanded,
4343
5219
  "aria-label": "Search",
4344
5220
  autoFocus: true,
5221
+ className: styles$c.input,
5222
+ id: "product_search",
4345
5223
  onChange: event => onChange(event.target.value),
4346
- onFocus: onFocus,
4347
5224
  onKeyDown: onKeyDown,
4348
5225
  placeholder: "Search",
4349
5226
  ref: inputRef,
4350
5227
  role: "combobox",
4351
5228
  type: "search",
4352
- value: value
4353
- });
5229
+ value: value,
5230
+ ...focusProps
5231
+ }), !onClose && value !== "" && (/*#__PURE__*/React.createElement("button", {
5232
+ "aria-label": "Clear search",
5233
+ className: styles$c.clearButton,
5234
+ onClick: () => {
5235
+ var _a;
5236
+ onChange("");
5237
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
5238
+ },
5239
+ tabIndex: -1,
5240
+ type: "button"
5241
+ }, /*#__PURE__*/React.createElement(Icon, {
5242
+ name: "general.smallX"
5243
+ })))), onClose && (/*#__PURE__*/React.createElement(tapestry.IconButton, {
5244
+ "aria-label": "Close search",
5245
+ className: styles$c.closeButton,
5246
+ icon: /*#__PURE__*/React.createElement(Icon, {
5247
+ name: "general.x",
5248
+ theme: "--t-icon-color-dim"
5249
+ }),
5250
+ kind: "ghost",
5251
+ onClick: onClose,
5252
+ size: "md"
5253
+ })));
5254
+ }
5255
+
5256
+ function BlankStateError(props) {
5257
+ const id = useInstanceId("blank-state-error");
5258
+ return /*#__PURE__*/React.createElement("svg", {
5259
+ viewBox: "0 0 197 158",
5260
+ fill: "none",
5261
+ "aria-hidden": "true",
5262
+ focusable: "false",
5263
+ ...props
5264
+ }, /*#__PURE__*/React.createElement("path", {
5265
+ d: "M139.863 26.119c10.938 10.028 21.777 20.154 32.912 30.084 8.376 7.373 21.975 15.828 23.157 28.02.592 6.095-2.167 11.993-5.321 17.204-24.635 40.8-81.098 67.148-127.412 48.862-30.646-12.093-76.172-47.387-59.716-85.041C19.348 28.87 68.323 10.192 87.44 7.538c21.876-4.621 34.883 2.457 52.423 18.58Z",
5266
+ fill: "currentColor"
5267
+ }), /*#__PURE__*/React.createElement("g", {
5268
+ clipPath: `url(#${id}-a)`
5269
+ }, /*#__PURE__*/React.createElement("path", {
5270
+ d: "M76.296 111.268c-2.63 0-5.95-.883-9.822-3.622a3.39 3.39 0 0 1-1.375-2.212 3.375 3.375 0 0 1 .603-2.529 3.44 3.44 0 0 1 4.777-.767c5.305 3.786 7.949 1.838 8.056 1.767a1.23 1.23 0 0 0-.094.08l4.62 5.004a10.434 10.434 0 0 1-6.765 2.279Z",
5271
+ fill: "#4D4D4D"
5272
+ }), /*#__PURE__*/React.createElement("path", {
5273
+ d: "M83.313 102.999a2.751 2.751 0 0 0-2.882-2.611 2.747 2.747 0 0 0-2.63 2.86l.399 8.688a2.751 2.751 0 0 0 2.882 2.611 2.746 2.746 0 0 0 2.63-2.86l-.399-8.688Z",
5274
+ fill: "gray"
5275
+ }), /*#__PURE__*/React.createElement("path", {
5276
+ d: "M119.428 111.268a10.438 10.438 0 0 1-6.751-2.292l4.619-5.005a1.387 1.387 0 0 0-.093-.079c.106.084 2.75 2.032 8.055-1.767a3.439 3.439 0 0 1 4.777.766 3.378 3.378 0 0 1-.772 4.742c-3.885 2.774-7.205 3.635-9.835 3.635Z",
5277
+ fill: "#4D4D4D"
5278
+ }), /*#__PURE__*/React.createElement("path", {
5279
+ d: "M101.658 18.962H94.68v1.533h6.978v-1.533Z",
5280
+ fill: "#F2F2F2"
5281
+ }), /*#__PURE__*/React.createElement("path", {
5282
+ d: "M91.823 74.82a12.502 12.502 0 0 0 9.546 1.299 16.005 16.005 0 0 0 3.151-1.326.894.894 0 0 1 1.035.24.882.882 0 0 1 .064 1.053c-2.67 3.345-7.775 4.294-11.62 2.514a8.803 8.803 0 0 1-3.302-2.513.879.879 0 0 1 .561-1.353.887.887 0 0 1 .565.068v.017Z",
5283
+ fill: "#999"
5284
+ }), /*#__PURE__*/React.createElement("path", {
5285
+ d: "M88.236 143.397a3.433 3.433 0 0 1-2.304-.891 3.383 3.383 0 0 1-1.096-2.201c-.636-6.788 4.237-16.369 4.798-17.442a3.41 3.41 0 0 1 2-1.643 3.442 3.442 0 0 1 2.586.227 3.398 3.398 0 0 1 1.68 1.965 3.368 3.368 0 0 1-.196 2.569c-1.75 3.37-4.402 10.066-4.059 13.693a3.38 3.38 0 0 1-.773 2.479 3.43 3.43 0 0 1-2.31 1.213l-.326.031Z",
5286
+ fill: "#4D4D4D"
5287
+ }), /*#__PURE__*/React.createElement("path", {
5288
+ d: "M91.645 132.708c3.972 0 7.192-3.195 7.192-7.138 0-3.942-3.22-7.137-7.192-7.137s-7.191 3.195-7.191 7.137c0 3.943 3.22 7.138 7.191 7.138Z",
5289
+ fill: "gray"
5290
+ }), /*#__PURE__*/React.createElement("path", {
5291
+ d: "M77.765 152.218h14.134v4.417c0 .351-.141.689-.391.937-.25.249-.59.388-.944.388H75.33a1.34 1.34 0 0 1-.945-.388 1.32 1.32 0 0 1-.39-.937v-.671c0-.997.398-1.953 1.109-2.658a3.801 3.801 0 0 1 2.678-1.101l-.018.013Z",
5292
+ fill: "#333"
5293
+ }), /*#__PURE__*/React.createElement("path", {
5294
+ d: "M88.548 156.141s9.697.141 7.592-9.797c-2.105-9.939-14.641-18.198-18.295-7.191-3.654 11.007-1.695 18.056 10.703 16.988Z",
5295
+ fill: "#F2F2F2"
5296
+ }), /*#__PURE__*/React.createElement("path", {
5297
+ d: "M109.077 143.402h-.325a3.427 3.427 0 0 1-2.313-1.216 3.38 3.38 0 0 1-.771-2.481c.342-3.627-2.305-10.323-4.054-13.693a3.371 3.371 0 0 1-.11-2.514c.29-.821.887-1.5 1.666-1.897a3.44 3.44 0 0 1 2.525-.236 3.413 3.413 0 0 1 1.993 1.555c.556 1.069 5.429 10.654 4.789 17.443a3.383 3.383 0 0 1-1.113 2.167 3.426 3.426 0 0 1-2.287.872Z",
5298
+ fill: "#4D4D4D"
5299
+ }), /*#__PURE__*/React.createElement("path", {
5300
+ d: "M105.672 132.708c3.972 0 7.192-3.195 7.192-7.138 0-3.942-3.22-7.137-7.192-7.137s-7.191 3.195-7.191 7.137c0 3.943 3.219 7.138 7.191 7.138Z",
5301
+ fill: "gray"
5302
+ }), /*#__PURE__*/React.createElement("path", {
5303
+ d: "m121.972 158.007-15.22-.003c-.354 0-.693-.139-.943-.388a1.317 1.317 0 0 1-.391-.937v-4.417l14.139.003c1.004 0 1.967.396 2.678 1.101a3.745 3.745 0 0 1 1.108 2.658v.671c0 .352-.141.689-.391.937-.25.249-.59.388-.944.388l-.036-.013Z",
5304
+ fill: "#333"
5305
+ }), /*#__PURE__*/React.createElement("path", {
5306
+ d: "M108.769 156.145s-9.701.137-7.587-9.801c2.114-9.939 14.645-18.19 18.295-7.187 3.649 11.003 1.682 18.061-10.708 16.988Z",
5307
+ fill: "#F2F2F2"
5308
+ }), /*#__PURE__*/React.createElement("path", {
5309
+ d: "M112.002 111.683c-.07 1.51 1.108 2.791 2.63 2.86a2.75 2.75 0 0 0 2.882-2.611l.399-8.688a2.746 2.746 0 0 0-2.63-2.86 2.75 2.75 0 0 0-2.882 2.611l-.399 8.688Z",
5310
+ fill: "gray"
5311
+ }), /*#__PURE__*/React.createElement("path", {
5312
+ d: "M47.508 75.88c5.223 0 9.457-6.265 9.457-13.994 0-7.728-4.234-13.993-9.457-13.993-5.223 0-9.457 6.265-9.457 13.993 0 7.729 4.234 13.993 9.457 13.993Zm101.082.017c5.223 0 9.457-6.265 9.457-13.993 0-7.728-4.234-13.993-9.457-13.993-5.223 0-9.457 6.265-9.457 13.993 0 7.728 4.234 13.993 9.457 13.993Z",
5313
+ fill: "#3690EA"
5314
+ }), /*#__PURE__*/React.createElement("path", {
5315
+ d: "M94.622 16.97c-.133-.574 7.868-1.1 6.987.296 0 .305 0 .61.022.914 0 .884.04 1.767.04 2.681 0 .915.041 1.886.054 2.832.334.706-7.78 1.113-6.991-.133v-.795c-.036-1.935-.09-3.86-.112-5.795Z",
5316
+ fill: "#F2F2F2"
5317
+ }), /*#__PURE__*/React.createElement("path", {
5318
+ d: "M98.174 34.426c8.734 0 15.816-2.636 15.816-5.888s-7.082-5.888-15.816-5.888c-8.736 0-15.817 2.637-15.817 5.888 0 3.252 7.082 5.888 15.817 5.888Z",
5319
+ fill: "#B3B3B3"
5320
+ }), /*#__PURE__*/React.createElement("path", {
5321
+ d: "M98.174 19.625c5.458 0 9.883-4.393 9.883-9.81 0-5.418-4.425-9.81-9.883-9.81-5.46 0-9.884 4.392-9.884 9.81s4.425 9.81 9.883 9.81Z",
5322
+ fill: "#3690EA"
5323
+ }), /*#__PURE__*/React.createElement("path", {
5324
+ d: "M116.339 111.123c-.614-10.782-8.958-13.874-19.002-13.309-10.044.566-17.979 4.567-17.356 15.354.623 10.786 9.252 19.063 19.296 18.498 10.044-.565 17.676-9.761 17.062-20.543Z",
5325
+ fill: "#F2F2F2"
5326
+ }), /*#__PURE__*/React.createElement("path", {
5327
+ d: "M116.139 109.4c-1.268 8.891-8.171 15.901-16.884 16.378-9.43.53-17.623-6.74-19.096-16.559a17.615 17.615 0 0 0-.205 3.949c.619 10.781 9.257 19.063 19.297 18.498 10.039-.566 17.685-9.762 17.07-20.544a11.69 11.69 0 0 0-.182-1.722Z",
5328
+ fill: "#E6E6E6"
5329
+ }), /*#__PURE__*/React.createElement("path", {
5330
+ d: "M94.609 92.558c-.134-.579 7.868-1.1 6.987.291v.915c0 .883.035 1.789.04 2.68.004.893.04 1.891.053 2.837.334.702-7.779 1.108-6.991-.137v-.796c-.013-1.93-.067-3.86-.089-5.79Z",
5331
+ fill: "#999"
5332
+ }), /*#__PURE__*/React.createElement("path", {
5333
+ d: "M150.588 70.279V53.525a22.366 22.366 0 0 0-4.425-13.4 22.645 22.645 0 0 0-11.596-8.146c-10.613-3.19-23.061-5.027-36.376-5.031-13.315-.004-25.762 1.833-36.38 5.018a22.654 22.654 0 0 0-11.609 8.14 22.374 22.374 0 0 0-4.438 13.401v16.754a22.375 22.375 0 0 0 4.435 13.403 22.654 22.654 0 0 0 11.607 8.143c10.614 3.19 23.061 5.026 36.376 5.031 13.315.004 25.763-1.833 36.376-5.018a22.658 22.658 0 0 0 11.598-8.144 22.377 22.377 0 0 0 4.432-13.397Z",
5334
+ fill: "#F2F2F2"
5335
+ }), /*#__PURE__*/React.createElement("path", {
5336
+ d: "M98.16 88.976c-12.087 0-23.87-1.626-34.08-4.695a14.817 14.817 0 0 1-7.522-5.316 14.635 14.635 0 0 1-2.891-8.704V53.507a14.64 14.64 0 0 1 2.89-8.698 14.82 14.82 0 0 1 7.514-5.317c10.21-3.065 21.993-4.682 34.085-4.682 12.091 0 23.871 1.626 34.079 4.696a14.817 14.817 0 0 1 7.523 5.315 14.635 14.635 0 0 1 2.891 8.704V70.28a14.635 14.635 0 0 1-2.897 8.703 14.824 14.824 0 0 1-7.525 5.312c-10.191 3.047-21.976 4.682-34.067 4.682Zm3.498-70.014H94.68v1.533h6.978v-1.533Z",
5337
+ fill: "#E6E6E6"
5338
+ }), /*#__PURE__*/React.createElement("path", {
5339
+ d: "M72.367 78.304c5.195 0 9.407-7.348 9.407-16.413 0-9.065-4.212-16.414-9.407-16.414-5.196 0-9.408 7.349-9.408 16.414 0 9.065 4.212 16.413 9.408 16.413Z",
5340
+ fill: "#1A1A1A"
5341
+ }), /*#__PURE__*/React.createElement("path", {
5342
+ d: "M74.013 62.558c2.094 0 3.792-2.476 3.792-5.53 0-3.054-1.698-5.53-3.792-5.53s-3.791 2.476-3.791 5.53c0 3.054 1.697 5.53 3.791 5.53Z",
5343
+ fill: "#fff"
5344
+ }), /*#__PURE__*/React.createElement("path", {
5345
+ d: "M123.032 78.313c5.196 0 9.408-7.349 9.408-16.413 0-9.065-4.212-16.414-9.408-16.414-5.195 0-9.407 7.349-9.407 16.414 0 9.065 4.212 16.413 9.407 16.413Z",
5346
+ fill: "#1A1A1A"
5347
+ }), /*#__PURE__*/React.createElement("path", {
5348
+ d: "M124.679 62.567c2.094 0 3.792-2.476 3.792-5.53 0-3.054-1.698-5.53-3.792-5.53s-3.792 2.476-3.792 5.53c0 3.054 1.698 5.53 3.792 5.53Z",
5349
+ fill: "#fff"
5350
+ }), /*#__PURE__*/React.createElement("path", {
5351
+ d: "M105.325 106.675H90.991a.74.74 0 0 0-.743.737v2.089a.74.74 0 0 0 .743.738h14.334a.74.74 0 0 0 .743-.738v-2.089a.74.74 0 0 0-.743-.737Zm0 6.148H90.991a.74.74 0 0 0-.743.738v2.089a.74.74 0 0 0 .743.738h14.334c.41 0 .743-.331.743-.738v-2.089a.74.74 0 0 0-.743-.738Zm-.004 6.153H90.987a.74.74 0 0 0-.744.737v2.09a.74.74 0 0 0 .744.737h14.334a.74.74 0 0 0 .743-.737v-2.09a.74.74 0 0 0-.743-.737Z",
5352
+ fill: "#3690EA"
5353
+ }), /*#__PURE__*/React.createElement("path", {
5354
+ d: "M140.653 109.023c5.67-4.178 7.656-11.053 4.438-15.356-3.219-4.303-10.424-4.405-16.094-.227-5.67 4.177-7.656 11.052-4.438 15.356 3.219 4.303 10.424 4.405 16.094.227Z",
5355
+ fill: "#F2F2F2"
5356
+ }), /*#__PURE__*/React.createElement("path", {
5357
+ d: "M144.211 97.717c-3.217-4.302-10.422-4.417-16.092-.23a15.277 15.277 0 0 0-5.087 6.339c.067-3.613 2.194-7.58 5.964-10.358 5.669-4.174 12.874-4.073 16.092.23 1.86 2.486 1.976 5.83.649 9.019a7.943 7.943 0 0 0-1.526-5Z",
5358
+ fill: "#E6E6E6"
5359
+ }), /*#__PURE__*/React.createElement("path", {
5360
+ d: "M141.051 91.524c.966-1.66.874-3.508-.205-4.126-1.08-.618-2.737.226-3.703 1.887-.966 1.66-.874 3.508.205 4.126 1.079.619 2.737-.226 3.703-1.887Z",
5361
+ fill: "#333"
5362
+ }), /*#__PURE__*/React.createElement("path", {
5363
+ d: "M142.711 103.49c4.151 0 7.517-3.34 7.517-7.46s-3.366-7.46-7.517-7.46-7.516 3.34-7.516 7.46 3.365 7.46 7.516 7.46Z",
5364
+ fill: "#333"
5365
+ }), /*#__PURE__*/React.createElement("path", {
5366
+ d: "M70.234 108.894c3.219-4.303 1.232-11.178-4.437-15.356-5.67-4.178-12.875-4.076-16.094.227-3.219 4.303-1.232 11.179 4.438 15.356 5.67 4.178 12.875 4.076 16.093-.227Z",
5367
+ fill: "#F2F2F2"
5368
+ }), /*#__PURE__*/React.createElement("path", {
5369
+ d: "M50.574 97.717c3.218-4.302 10.422-4.417 16.092-.23a15.273 15.273 0 0 1 5.087 6.339c-.067-3.613-2.194-7.58-5.964-10.358-5.67-4.174-12.874-4.073-16.092.23-1.86 2.486-1.971 5.83-.65 9.019a7.945 7.945 0 0 1 1.527-5Z",
5370
+ fill: "#E6E6E6"
5371
+ }), /*#__PURE__*/React.createElement("path", {
5372
+ d: "M57.434 93.41c1.08-.618 1.171-2.466.206-4.126-.966-1.66-2.624-2.506-3.703-1.887-1.08.618-1.171 2.466-.205 4.126.965 1.66 2.623 2.506 3.702 1.887Z",
5373
+ fill: "#333"
5374
+ }), /*#__PURE__*/React.createElement("path", {
5375
+ d: "M52.074 103.49c4.151 0 7.516-3.34 7.516-7.46s-3.365-7.46-7.516-7.46-7.517 3.34-7.517 7.46 3.366 7.46 7.517 7.46Z",
5376
+ fill: "#333"
5377
+ }), /*#__PURE__*/React.createElement("path", {
5378
+ d: "M98.485 83.08c1.523-.183 2.609-1.544 2.426-3.041-.183-1.497-1.565-2.561-3.088-2.378-1.522.183-2.608 1.544-2.425 3.041.182 1.497 1.565 2.561 3.087 2.378Z",
5379
+ fill: "#1A1A1A"
5380
+ }), /*#__PURE__*/React.createElement("path", {
5381
+ d: "M101.729 11.17c1.733 0 3.138-1.394 3.138-3.113 0-1.72-1.405-3.114-3.138-3.114-1.733 0-3.137 1.394-3.137 3.114s1.404 3.114 3.137 3.114Zm52.37 52.753c.829 0 1.5-1.677 1.5-3.746s-.671-3.746-1.5-3.746c-.828 0-1.499 1.677-1.499 3.746s.671 3.746 1.499 3.746Zm-111.549 0c.829 0 1.5-1.677 1.5-3.746s-.671-3.746-1.5-3.746c-.828 0-1.5 1.677-1.5 3.746s.672 3.746 1.5 3.746Z",
5382
+ fill: "#4BAAF7"
5383
+ })), /*#__PURE__*/React.createElement("mask", {
5384
+ id: `${id}-b`,
5385
+ style: {
5386
+ maskType: "alpha"
5387
+ },
5388
+ maskUnits: "userSpaceOnUse",
5389
+ x: "0",
5390
+ y: "6",
5391
+ width: "197",
5392
+ height: "151"
5393
+ }, /*#__PURE__*/React.createElement("path", {
5394
+ d: "M139.863 26.12c10.938 10.028 21.777 20.154 32.912 30.084 8.376 7.373 21.975 15.828 23.157 28.02.592 6.095-2.167 11.993-5.321 17.204-24.635 40.8-81.098 67.148-127.412 48.862-30.646-12.093-76.172-47.387-59.716-85.041 15.865-36.377 64.84-55.056 83.957-57.71 21.876-4.621 34.883 2.457 52.423 18.58Z",
5395
+ fill: "#CEE1FF",
5396
+ fillOpacity: ".8"
5397
+ })), /*#__PURE__*/React.createElement("g", {
5398
+ mask: `url(#${id}-b)`
5399
+ }, /*#__PURE__*/React.createElement("path", {
5400
+ d: "m59.006 101 8 4m-4 1-4-5h6",
5401
+ stroke: "#FFD463"
5402
+ }), /*#__PURE__*/React.createElement("path", {
5403
+ d: "M60.006 100.999c-14.02-9.35-30.69-13.01-50-11S-26.916 103.01-38.276 115",
5404
+ strokeWidth: "2",
5405
+ stroke: "#fff"
5406
+ }), /*#__PURE__*/React.createElement("path", {
5407
+ d: "m125.304 89-8.08 3.84m1.68-3.77 6.4-.07-3.7 4.72",
5408
+ stroke: "#FFD463"
5409
+ }), /*#__PURE__*/React.createElement("path", {
5410
+ d: "M123.724 89.5c26.45-8.66 23 40.5 47 42.5 22.399 1.867 36.5-31.001 63 12",
5411
+ strokeWidth: "2",
5412
+ stroke: "#fff"
5413
+ })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
5414
+ id: `${id}-a`
5415
+ }, /*#__PURE__*/React.createElement("path", {
5416
+ fill: "#fff",
5417
+ transform: "translate(38.051)",
5418
+ d: "M0 0h120v158H0z"
5419
+ }))));
5420
+ }
5421
+
5422
+ function BlankStateNoResults(props) {
5423
+ const id = useInstanceId("blank-state-no-results");
5424
+ return /*#__PURE__*/React.createElement("svg", {
5425
+ viewBox: "0 0 197 152",
5426
+ fill: "none",
5427
+ "aria-hidden": "true",
5428
+ focusable: "false",
5429
+ ...props
5430
+ }, /*#__PURE__*/React.createElement("path", {
5431
+ 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",
5432
+ fill: "currentColor"
5433
+ }), /*#__PURE__*/React.createElement("path", {
5434
+ 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",
5435
+ fill: "#3690EA"
5436
+ }), /*#__PURE__*/React.createElement("path", {
5437
+ 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",
5438
+ fill: "#4BAAF7"
5439
+ }), /*#__PURE__*/React.createElement("path", {
5440
+ d: "M97.564 26.688h-6.248v3.565h6.248v-3.565Z",
5441
+ fill: "#F2F2F2"
5442
+ }), /*#__PURE__*/React.createElement("path", {
5443
+ 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",
5444
+ fill: "#3690EA"
5445
+ }), /*#__PURE__*/React.createElement("path", {
5446
+ 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",
5447
+ fill: "#B3B3B3"
5448
+ }), /*#__PURE__*/React.createElement("path", {
5449
+ 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",
5450
+ fill: "#F2F2F2"
5451
+ }), /*#__PURE__*/React.createElement("path", {
5452
+ 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",
5453
+ fill: "#E6E6E6"
5454
+ }), /*#__PURE__*/React.createElement("path", {
5455
+ 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",
5456
+ fill: "#1A1A1A"
5457
+ }), /*#__PURE__*/React.createElement("path", {
5458
+ 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",
5459
+ fill: "#fff"
5460
+ }), /*#__PURE__*/React.createElement("path", {
5461
+ 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",
5462
+ fill: "#1A1A1A"
5463
+ }), /*#__PURE__*/React.createElement("path", {
5464
+ 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",
5465
+ fill: "#fff"
5466
+ }), /*#__PURE__*/React.createElement("path", {
5467
+ 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",
5468
+ fill: "#999"
5469
+ }), /*#__PURE__*/React.createElement("path", {
5470
+ 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",
5471
+ fill: "#4BAAF7"
5472
+ }), /*#__PURE__*/React.createElement("path", {
5473
+ d: "M79.596 106.857s-13.835 0-13.835-18.752",
5474
+ strokeWidth: "13.63",
5475
+ strokeMiterlimit: "10",
5476
+ strokeLinecap: "round",
5477
+ stroke: "#4D4D4D"
5478
+ }), /*#__PURE__*/React.createElement("path", {
5479
+ 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",
5480
+ fill: "gray"
5481
+ }), /*#__PURE__*/React.createElement("path", {
5482
+ d: "M109.137 104.385s3.851 3.681 10.947-1.181",
5483
+ strokeWidth: "13.63",
5484
+ strokeMiterlimit: "10",
5485
+ strokeLinecap: "round",
5486
+ stroke: "#4D4D4D"
5487
+ }), /*#__PURE__*/React.createElement("path", {
5488
+ 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",
5489
+ fill: "gray"
5490
+ }), /*#__PURE__*/React.createElement("path", {
5491
+ d: "M89.494 121.176s-4.44 8.569-3.936 13.934",
5492
+ strokeWidth: "13.63",
5493
+ strokeMiterlimit: "10",
5494
+ strokeLinecap: "round",
5495
+ stroke: "#4D4D4D"
5496
+ }), /*#__PURE__*/React.createElement("path", {
5497
+ 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",
5498
+ fill: "gray"
5499
+ }), /*#__PURE__*/React.createElement("path", {
5500
+ 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",
5501
+ fill: "#333"
5502
+ }), /*#__PURE__*/React.createElement("path", {
5503
+ 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",
5504
+ fill: "#F2F2F2"
5505
+ }), /*#__PURE__*/React.createElement("path", {
5506
+ d: "M100.159 121.176s4.463 8.569 3.937 13.934",
5507
+ strokeWidth: "13.63",
5508
+ strokeMiterlimit: "10",
5509
+ strokeLinecap: "round",
5510
+ stroke: "#4D4D4D"
5511
+ }), /*#__PURE__*/React.createElement("path", {
5512
+ 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",
5513
+ fill: "gray"
5514
+ }), /*#__PURE__*/React.createElement("path", {
5515
+ 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",
5516
+ fill: "#333"
5517
+ }), /*#__PURE__*/React.createElement("path", {
5518
+ 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",
5519
+ fill: "#F2F2F2"
5520
+ }), /*#__PURE__*/React.createElement("path", {
5521
+ 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",
5522
+ fill: "#E6E6E6"
5523
+ }), /*#__PURE__*/React.createElement("path", {
5524
+ 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",
5525
+ fill: "#3690EA"
5526
+ }), /*#__PURE__*/React.createElement("path", {
5527
+ 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",
5528
+ fill: "#F2F2F2"
5529
+ }), /*#__PURE__*/React.createElement("path", {
5530
+ 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",
5531
+ fill: "#E6E6E6"
5532
+ }), /*#__PURE__*/React.createElement("path", {
5533
+ d: "M127.405 89.78c1.87.546 3.824.751 5.766.605v0a16.153 16.153 0 0 0 9.056-3.631",
5534
+ strokeWidth: "13.63",
5535
+ strokeMiterlimit: "10",
5536
+ strokeLinecap: "round",
5537
+ stroke: "#333"
5538
+ }), /*#__PURE__*/React.createElement("path", {
5539
+ 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",
5540
+ fill: "#F2F2F2"
5541
+ }), /*#__PURE__*/React.createElement("path", {
5542
+ 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",
5543
+ fill: "#E6E6E6"
5544
+ }), /*#__PURE__*/React.createElement("path", {
5545
+ 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",
5546
+ strokeWidth: "13.63",
5547
+ strokeMiterlimit: "10",
5548
+ strokeLinecap: "round",
5549
+ stroke: "#333"
5550
+ }), /*#__PURE__*/React.createElement("path", {
5551
+ 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",
5552
+ fill: "#2278D6"
5553
+ }), /*#__PURE__*/React.createElement("path", {
5554
+ 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",
5555
+ fill: "#3690EA"
5556
+ }), /*#__PURE__*/React.createElement("path", {
5557
+ 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",
5558
+ fill: "#50B0FF"
5559
+ }), /*#__PURE__*/React.createElement("path", {
5560
+ 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",
5561
+ fill: "#D6DEE5"
5562
+ }), /*#__PURE__*/React.createElement("path", {
5563
+ 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",
5564
+ fill: "#1B64CE"
5565
+ }), /*#__PURE__*/React.createElement("path", {
5566
+ 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",
5567
+ fill: "#fff"
5568
+ }), /*#__PURE__*/React.createElement("path", {
5569
+ 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",
5570
+ fill: "#fff"
5571
+ }), /*#__PURE__*/React.createElement("mask", {
5572
+ id: `${id}-a`,
5573
+ style: {
5574
+ maskType: "alpha"
5575
+ },
5576
+ maskUnits: "userSpaceOnUse",
5577
+ x: "90",
5578
+ y: "96",
5579
+ width: "9",
5580
+ height: "4"
5581
+ }, /*#__PURE__*/React.createElement("path", {
5582
+ 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",
5583
+ fill: "#000"
5584
+ })), /*#__PURE__*/React.createElement("g", {
5585
+ mask: `url(#${id}-a)`
5586
+ }, /*#__PURE__*/React.createElement("path", {
5587
+ 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",
5588
+ fill: "#999"
5589
+ })));
4354
5590
  }
4355
5591
 
4356
- var styles$b = {"visuallyHidden":"visuallyHidden-S9VG5"};
5592
+ var styles$b = {"spinner":"spinner-b5tlz"};
5593
+
5594
+ function LoadingSpinner({
5595
+ size = 48,
5596
+ trackWidth = 6
5597
+ }) {
5598
+ return /*#__PURE__*/React.createElement("span", {
5599
+ "aria-hidden": "true",
5600
+ className: styles$b.spinner,
5601
+ style: {
5602
+ "--spinner-size": `${size}px`,
5603
+ "--spinner-track-width": `${trackWidth}px`
5604
+ }
5605
+ });
5606
+ }
4357
5607
 
4358
5608
  function SearchResults({
4359
5609
  label,
@@ -4374,18 +5624,36 @@ true;
4374
5624
  ...navigation
4375
5625
  });
4376
5626
  }
4377
- return /*#__PURE__*/React.createElement("p", {
4378
- role: "status"
4379
- }, "Searching\u2026");
5627
+ return /*#__PURE__*/React.createElement(tapestry.Flex, {
5628
+ role: "status",
5629
+ justify: "center",
5630
+ align: "center",
5631
+ gap: 2,
5632
+ direction: "column",
5633
+ style: {
5634
+ color: "var(--t-text-color-placeholder)",
5635
+ fontSize: "var(--t-font-size-md)",
5636
+ marginTop: 48
5637
+ }
5638
+ }, /*#__PURE__*/React.createElement(LoadingSpinner, {
5639
+ size: 40,
5640
+ trackWidth: 5
5641
+ }), "Searching\u2026");
4380
5642
  case "error":
4381
- return /*#__PURE__*/React.createElement("p", {
4382
- role: "alert"
4383
- }, "Search isn\u2019t working right now. Try again.");
5643
+ return /*#__PURE__*/React.createElement(BlankState$1, {
5644
+ image: /*#__PURE__*/React.createElement(BlankStateError, null),
5645
+ role: "alert",
5646
+ subtitle: "Try again in a moment.",
5647
+ title: "Search isn\u2019t working right now"
5648
+ });
4384
5649
  case "done":
4385
5650
  if (sections.length === 0) {
4386
- return /*#__PURE__*/React.createElement("p", {
4387
- role: "status"
4388
- }, "No results for \u201C", term.trim(), "\u201D");
5651
+ return /*#__PURE__*/React.createElement(BlankState$1, {
5652
+ image: /*#__PURE__*/React.createElement(BlankStateNoResults, null),
5653
+ role: "status",
5654
+ subtitle: "Clear search and try again.",
5655
+ title: `No results for “${term.trim()}”`
5656
+ });
4389
5657
  }
4390
5658
  return /*#__PURE__*/React.createElement(ResultListbox, {
4391
5659
  busy: false,
@@ -4400,27 +5668,37 @@ true;
4400
5668
  // stays put as more recents load and as their lookups answer.
4401
5669
  const RECENTS = "recents";
4402
5670
  function SearchPanel({
5671
+ appName,
5672
+ mobile = false,
4403
5673
  env,
5674
+ onClose,
4404
5675
  products
4405
5676
  }) {
4406
5677
  var _a, _b;
4407
5678
  const listboxId = useInstanceId("product-search-results");
4408
5679
  const [term, setTerm] = React.useState("");
4409
- const [selectedSlug, setSelectedSlug] = React.useState(() => initialProduct(products).slug);
5680
+ const [selectedSlug, setSelectedSlug] = React.useState(() => defaultProduct(products, appName).slug);
4410
5681
  const product = (_a = products.find(({
4411
5682
  slug
4412
5683
  }) => slug === selectedSlug)) !== null && _a !== void 0 ? _a : products[0];
4413
5684
  const hasTerm = term.trim() !== "";
4414
5685
  const search = useProductSearch(product.slug, term);
4415
5686
  const groups = "groups" in search ? search.groups : undefined;
4416
- const sections = React.useMemo(() => groupSections(groups), [groups]);
5687
+ const {
5688
+ organizationTimeZone
5689
+ } = useStore();
5690
+ const sections = React.useMemo(() => groupSections(groups, organizationTimeZone), [groups, organizationTimeZone]);
4417
5691
  const {
4418
5692
  visits,
4419
5693
  ...recents
4420
5694
  } = useRecentVisits(env);
4421
- const recentItems = visits.map(visitItem);
5695
+ const recentItems = visits.map(visit => visitItem(visit, organizationTimeZone));
4422
5696
  const items = hasTerm ? sections.flatMap(section => section.items) : recentItems;
4423
- const navigation = useResultNavigation(items, hasTerm ? sections : RECENTS);
5697
+ // Phones open results by tapping them, with no highlight to arrow through.
5698
+ // A narrow window with a keyboard and mouse keeps both, as does the desktop
5699
+ // layout on a touch device, whose keyboard hints still advertise them.
5700
+ const touchOnly = useMediaQuery("(hover: none) and (pointer: coarse)");
5701
+ const navigation = useResultNavigation(items, hasTerm ? sections : RECENTS, !(mobile && touchOnly));
4424
5702
  const {
4425
5703
  highlightedIndex
4426
5704
  } = navigation;
@@ -4440,41 +5718,48 @@ true;
4440
5718
  navigation.handleKeyDown(event);
4441
5719
  }
4442
5720
  };
4443
- React.useEffect(() => {
4444
- if (hasTerm) saveLastProduct(product.slug);
4445
- }, [hasTerm, product.slug]);
5721
+ const results = hasTerm ? (/*#__PURE__*/React.createElement(SearchResults, {
5722
+ highlightedIndex: highlightedIndex,
5723
+ id: listboxId,
5724
+ label: `Results from Planning Center ${product.appName}`,
5725
+ onHighlight: navigation.highlightIndex,
5726
+ sections: sections,
5727
+ status: search.status,
5728
+ term: term
5729
+ })) : (/*#__PURE__*/React.createElement(RecentlyVisited, {
5730
+ highlightedIndex: highlightedIndex,
5731
+ id: listboxId,
5732
+ items: recentItems,
5733
+ onHighlight: navigation.highlightIndex,
5734
+ ...recents
5735
+ }));
4446
5736
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchInput, {
4447
5737
  expanded: items.length > 0,
4448
5738
  highlightedIndex: highlightedIndex,
4449
5739
  inputRef: inputRef,
4450
5740
  listboxId: listboxId,
4451
5741
  onChange: setTerm,
5742
+ onClose: onClose,
4452
5743
  onFocus: () => setAnnounceHighlight(false),
4453
5744
  onKeyDown: navigation.handleKeyDown,
4454
5745
  value: term
4455
- }), /*#__PURE__*/React.createElement(ProductTabs, {
5746
+ }), mobile ? (/*#__PURE__*/React.createElement(ProductSelect, {
5747
+ onSelect: setSelectedSlug,
5748
+ products: products,
5749
+ selected: product
5750
+ }, results)) : (/*#__PURE__*/React.createElement(ProductTabs, {
4456
5751
  onKeyDown: handleTabsKeyDown,
4457
5752
  onSelect: setSelectedSlug,
4458
5753
  products: products,
4459
5754
  selected: product
4460
- }, hasTerm ? (/*#__PURE__*/React.createElement(SearchResults, {
4461
- highlightedIndex: highlightedIndex,
4462
- id: listboxId,
4463
- label: `${product.appName} results`,
4464
- onHighlight: navigation.highlightIndex,
4465
- sections: sections,
4466
- status: search.status,
4467
- term: term
4468
- })) : (/*#__PURE__*/React.createElement(RecentlyVisited, {
4469
- highlightedIndex: highlightedIndex,
4470
- id: listboxId,
4471
- items: recentItems,
4472
- onHighlight: navigation.highlightIndex,
4473
- ...recents
4474
- }))), /*#__PURE__*/React.createElement("div", {
5755
+ }, results)), /*#__PURE__*/React.createElement("div", {
4475
5756
  "aria-live": "polite",
4476
- className: styles$b.visuallyHidden
4477
- }, announceHighlight ? (_b = navigation.highlighted) === null || _b === void 0 ? void 0 : _b.title : null), /*#__PURE__*/React.createElement(KeyboardHints, {
5757
+ className: styles$k.visuallyHidden
5758
+ }, announceHighlight ? (_b = navigation.highlighted) === null || _b === void 0 ? void 0 : _b.title : null), /*#__PURE__*/React.createElement("div", {
5759
+ "aria-live": "polite",
5760
+ className: styles$k.visuallyHidden,
5761
+ "data-testid": "result-count"
5762
+ }, 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, {
4478
5763
  copied: navigation.copied
4479
5764
  }));
4480
5765
  }
@@ -4545,32 +5830,6 @@ true;
4545
5830
  }, [enabled, open, setOpen]);
4546
5831
  }
4547
5832
 
4548
- const SEARCHABLE_PRODUCTS = [{
4549
- appName: "Calendar",
4550
- slug: "calendar"
4551
- }, {
4552
- appName: "Check-Ins",
4553
- slug: "check-ins"
4554
- }, {
4555
- appName: "Giving",
4556
- slug: "giving"
4557
- }, {
4558
- appName: "Groups",
4559
- slug: "groups"
4560
- }, {
4561
- appName: "People",
4562
- slug: "people"
4563
- }, {
4564
- appName: "Publishing",
4565
- slug: "publishing"
4566
- }, {
4567
- appName: "Registrations",
4568
- slug: "registrations"
4569
- }, {
4570
- appName: "Services",
4571
- slug: "services"
4572
- }];
4573
-
4574
5833
  const PERMISSION_CHECKS = {
4575
5834
  "check-ins": () => fetchMe("check-ins", "permission").then(({
4576
5835
  permission
@@ -4675,24 +5934,59 @@ true;
4675
5934
  return groupApps(apps).restProducts.flatMap(app => SEARCHABLE_PRODUCTS.filter(product => product.appName === app.name));
4676
5935
  }
4677
5936
 
5937
+ /**
5938
+ * Writes the height of the visible part of the page to the parent of `ref`'s
5939
+ * element as `--visual-viewport-height`. It shrinks when an on-screen keyboard
5940
+ * opens; `100dvh` doesn't, since mobile Safari draws the keyboard over it.
5941
+ */
5942
+ function useVisualViewportHeight(ref, enabled) {
5943
+ React.useEffect(() => {
5944
+ var _a;
5945
+ const viewport = window.visualViewport;
5946
+ const parent = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
5947
+ if (!enabled || !viewport || !parent) return undefined;
5948
+ const update = () => parent.style.setProperty("--visual-viewport-height", `${viewport.height}px`);
5949
+ update();
5950
+ viewport.addEventListener("resize", update);
5951
+ return () => {
5952
+ viewport.removeEventListener("resize", update);
5953
+ parent.style.removeProperty("--visual-viewport-height");
5954
+ };
5955
+ }, [enabled, ref]);
5956
+ }
5957
+
4678
5958
  function ProductSearch({
5959
+ appName,
4679
5960
  apps,
5961
+ mobile = false,
4680
5962
  env
4681
5963
  }) {
4682
5964
  const searchable = useSearchableProducts(apps);
4683
5965
  const [open, setOpen] = React.useState(false);
5966
+ const modalRef = React.useRef(null);
5967
+ // Sizes Tapestry's modal frame, the dialog's parent, to fit above the keyboard.
5968
+ useVisualViewportHeight(modalRef, mobile && open);
4684
5969
  const available = searchable.status === "done" && searchable.products.length > 0;
4685
5970
  useSearchShortcut(available, open, setOpen);
4686
5971
  if (!available) return null;
4687
5972
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchButton, {
5973
+ mobile: mobile,
4688
5974
  onClick: () => setOpen(true)
4689
5975
  }), /*#__PURE__*/React.createElement(tapestry.Modal, {
4690
5976
  "aria-label": "Search",
5977
+ className: styles$k.modal,
4691
5978
  dismissible: true,
5979
+ id: "product_search_modal",
4692
5980
  onClose: () => setOpen(false),
4693
- open: open
5981
+ open: open,
5982
+ ref: modalRef,
5983
+ size: "lg"
4694
5984
  }, /*#__PURE__*/React.createElement(SearchPanel, {
5985
+ appName: appName,
5986
+ mobile: mobile,
4695
5987
  env: env,
5988
+ // Phones have no Esc, so mobile search gets a close button.
5989
+ onClose: mobile ? () => setOpen(false) : undefined,
4696
5990
  products: searchable.products
4697
5991
  })));
4698
5992
  }
@@ -4986,6 +6280,7 @@ true;
4986
6280
  margin: "auto"
4987
6281
  }
4988
6282
  }), !notificationsEnabled && notifications(), productSearchEnabled ? (/*#__PURE__*/React.createElement(ProductSearch, {
6283
+ appName: props.appName,
4989
6284
  apps: props.apps,
4990
6285
  env: props.env
4991
6286
  })) : search({
@@ -32900,7 +34195,7 @@ true;
32900
34195
  method: "localStorage"
32901
34196
  };
32902
34197
 
32903
- 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"};
34198
+ 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"};
32904
34199
 
32905
34200
  function AccountSettingsLink({
32906
34201
  env
@@ -33120,7 +34415,14 @@ true;
33120
34415
  setProductSwitcherVisible(false);
33121
34416
  setRoutesMenuVisible(visible => !visible);
33122
34417
  } : null
33123
- }, /*#__PURE__*/React.createElement(CurrentRouteComponent, null, capitalize$1(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React.createElement("button", {
34418
+ }, /*#__PURE__*/React.createElement(CurrentRouteComponent, null, capitalize$1(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React.createElement("div", {
34419
+ className: styles$6["actions"]
34420
+ }, productSearchEnabled && (/*#__PURE__*/React.createElement(ProductSearch, {
34421
+ appName: props.appName,
34422
+ apps: props.apps,
34423
+ mobile: true,
34424
+ env: props.env
34425
+ })), /*#__PURE__*/React.createElement("button", {
33124
34426
  type: "button",
33125
34427
  className: styles$6["profile-button"],
33126
34428
  onClick: () => {
@@ -33131,7 +34433,7 @@ true;
33131
34433
  }, /*#__PURE__*/React.createElement(Avatar, {
33132
34434
  env: props.env,
33133
34435
  url: props.userAvatarPath
33134
- })));
34436
+ }))));
33135
34437
  };
33136
34438
  const SmallRoute = ({
33137
34439
  active,
@@ -33621,38 +34923,6 @@ true;
33621
34923
  }));
33622
34924
  };
33623
34925
 
33624
- const collections = {
33625
- general: general__namespace,
33626
- toolbar: toolbar__namespace
33627
- };
33628
- const paths = collections;
33629
- function Icon({
33630
- name,
33631
- size = 16,
33632
- style,
33633
- theme,
33634
- title,
33635
- ...props
33636
- }) {
33637
- const [collection, symbol] = name.split(".");
33638
- return /*#__PURE__*/React.createElement("svg", {
33639
- "aria-hidden": title ? undefined : true,
33640
- fill: "currentColor",
33641
- height: size,
33642
- role: title ? "img" : undefined,
33643
- style: {
33644
- color: theme && `var(${theme})`,
33645
- flexShrink: 0,
33646
- ...style
33647
- },
33648
- viewBox: "0 0 16 16",
33649
- width: size,
33650
- ...props
33651
- }, title && /*#__PURE__*/React.createElement("title", null, title), /*#__PURE__*/React.createElement("path", {
33652
- d: paths[collection][symbol]
33653
- }));
33654
- }
33655
-
33656
34926
  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"};
33657
34927
 
33658
34928
  const COLOR_MODES = [{