@planningcenter/topbar 10.20.0 → 10.20.1

package/dist/topbar.module.js

@@ -22,9 +22,10 @@ const AccessibilityToolbar = ({
   children
 }) => {
   const handleClick = event => {
+    var _a;
     event.preventDefault();
     event.stopPropagation();
-    document.getElementById("main-content")?.focus();
+    (_a = document.getElementById("main-content")) === null || _a === void 0 ? void 0 : _a.focus();
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: styles$c["accessibility-toolbar"]
@@ -36,16 +37,6 @@ const AccessibilityToolbar = ({
   }), children);
 };
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -159,7 +150,8 @@ const railsCsrfFetch = (url, {
   });
 };
 function inferRailsCsrfToken() {
-  return window?.Rails?.csrfToken() || document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") || null;
+  var _a, _b;
+  return ((_a = window === null || window === void 0 ? void 0 : window.Rails) === null || _a === void 0 ? void 0 : _a.csrfToken()) || ((_b = document.querySelector('meta[name="csrf-token"]')) === null || _b === void 0 ? void 0 : _b.getAttribute("content")) || null;
 }
 function apiRequest(fetch, url, {
   method = "GET",
@@ -205,17 +197,17 @@ const Bell = ({
     d: "M21.482,16.626,19.1,13.649V9a7,7,0,0,0-14,0v4.649L2.478,16.929A1.89,1.89,0,0,0,3.952,20H9.285a2.983,2.983,0,0,0,5.633,0H19.86a2.077,2.077,0,0,0,1.622-3.374ZM19.86,18H4.182l2.7-3.375A1,1,0,0,0,7.1,14V9a5,5,0,0,1,10,0v5a1,1,0,0,0,.219.625l2.6,3.25Z",
     fill: "white"
   });
-  return /*#__PURE__*/React__default.createElement("svg", _extends({
+  return /*#__PURE__*/React__default.createElement("svg", {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
     style: {
       display: "block",
       ...style
-    }
-  }, props, {
+    },
+    ...props,
     stroke: "none"
-  }), /*#__PURE__*/React__default.createElement("title", null, "bell"), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("mask", {
+  }, /*#__PURE__*/React__default.createElement("title", null, "bell"), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("mask", {
     id: "mask-no-dot"
   }, bellPath), /*#__PURE__*/React__default.createElement("mask", {
     id: "mask-dot"
@@ -242,14 +234,15 @@ const BlankStateIcon = ({
   id = "default",
   style,
   ...nativeProps
-}) => /*#__PURE__*/React__default.createElement("svg", _extends({
+}) => (/*#__PURE__*/React__default.createElement("svg", {
   fill: "none",
   height: "123",
   style: {
     ...style
   },
-  width: "160"
-}, nativeProps), /*#__PURE__*/React__default.createElement("g", {
+  width: "160",
+  ...nativeProps
+}, /*#__PURE__*/React__default.createElement("g", {
   clipPath: `url(#clip-path-blank-state-${id})`
 }, /*#__PURE__*/React__default.createElement("path", {
   opacity: ".6",
@@ -281,70 +274,76 @@ const BlankStateIcon = ({
 }, /*#__PURE__*/React__default.createElement("path", {
   fill: "#fff",
   d: "M0 0h160v122.063H0z"
-}))));
+})))));
 const DisclosureChevronIcon = ({
   className,
   style,
   ...nativeProps
-}) => /*#__PURE__*/React__default.createElement("svg", _extends({
+}) => (/*#__PURE__*/React__default.createElement("svg", {
   className: className,
   height: "16",
   viewBox: "0 0 16 16",
   width: "16",
-  style
-}, nativeProps), /*#__PURE__*/React__default.createElement("title", null, "chevron"), /*#__PURE__*/React__default.createElement("polygon", {
+  ...{
+    style
+  },
+  ...nativeProps
+}, /*#__PURE__*/React__default.createElement("title", null, "chevron"), /*#__PURE__*/React__default.createElement("polygon", {
   fill: "currentColor",
   points: "11.931 4.892 8 8.824 4.069 4.892 2.927 6.034 8 11.108 9.142 9.966 13.073 6.034 11.931 4.892"
-}));
+})));
 const ExclamationTriangle = ({
   fill = "#000",
   size = 24,
   style,
   ...nativeProps
-}) => /*#__PURE__*/React__default.createElement("svg", _extends({
+}) => (/*#__PURE__*/React__default.createElement("svg", {
   height: size,
   style: {
     display: "block",
     ...style
   },
   viewBox: "0 0 16 16",
-  width: size
-}, nativeProps), /*#__PURE__*/React__default.createElement("title", null, "exclamation triangle icon"), /*#__PURE__*/React__default.createElement("path", {
+  width: size,
+  ...nativeProps
+}, /*#__PURE__*/React__default.createElement("title", null, "exclamation triangle icon"), /*#__PURE__*/React__default.createElement("path", {
   d: "M15.669 13.676L8.65499 1.56099C8.58867 1.44593 8.49322 1.35037 8.37823 1.28392C8.26325 1.21748 8.13279 1.1825 7.99999 1.1825C7.86718 1.1825 7.73672 1.21748 7.62174 1.28392C7.50675 1.35037 7.4113 1.44593 7.34499 1.56099L0.330986 13.676C0.264196 13.7911 0.228916 13.9217 0.2287 14.0548C0.228484 14.1878 0.26334 14.3186 0.329756 14.4339C0.396172 14.5492 0.491802 14.6449 0.60701 14.7115C0.722218 14.778 0.852933 14.813 0.985986 14.813H15.014C15.147 14.813 15.2778 14.778 15.393 14.7115C15.5082 14.6449 15.6038 14.5492 15.6702 14.4339C15.7366 14.3186 15.7715 14.1878 15.7713 14.0548C15.7711 13.9217 15.7358 13.7911 15.669 13.676ZM8.75699 12.542H7.24299V11.028H8.75699V12.542ZM8.75699 9.51399H7.24299V6.48499H8.75699V9.51399Z",
   fill: fill
-}));
+})));
 const Spyglass = ({
   fill = "#000",
   style,
   ...nativeProps
-}) => /*#__PURE__*/React__default.createElement("svg", _extends({
+}) => (/*#__PURE__*/React__default.createElement("svg", {
   width: "24",
   height: "24",
   viewBox: "0 0 24 24",
   style: {
     display: "block",
     ...style
-  }
-}, nativeProps), /*#__PURE__*/React__default.createElement("title", null, "search spyglass icon"), /*#__PURE__*/React__default.createElement("path", {
+  },
+  ...nativeProps
+}, /*#__PURE__*/React__default.createElement("title", null, "search spyglass icon"), /*#__PURE__*/React__default.createElement("path", {
   d: "M17.352,15.481a8.517,8.517,0,1,0-2.209,2.033l4.642,4.642,2.121-2.121Zm-6.757,1.364a6.5,6.5,0,1,1,6.5-6.5A6.508,6.508,0,0,1,10.595,16.845Z",
   fill: fill
-}));
+})));
 const X = ({
   fill = "#A0A0A0",
   style,
   ...nativeProps
-}) => /*#__PURE__*/React__default.createElement("svg", _extends({
+}) => (/*#__PURE__*/React__default.createElement("svg", {
   width: "16",
   height: "16",
   viewBox: "0 0 16 16",
   style: {
     display: "block",
     ...style
-  }
-}, nativeProps), /*#__PURE__*/React__default.createElement("title", null, "close-x"), /*#__PURE__*/React__default.createElement("path", {
+  },
+  ...nativeProps
+}, /*#__PURE__*/React__default.createElement("title", null, "close-x"), /*#__PURE__*/React__default.createElement("path", {
   d: "M9.142,8l3.814,3.814-1.142,1.142L8,9.142,4.186,12.956,3.044,11.814,6.858,8,3.044,4.186,4.186,3.044,8,6.858l3.814-3.814,1.142,1.142Z",
   fill: fill
-}));
+})));
 
 var styles$b = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU"};
 
@@ -385,9 +384,6 @@ class Provider extends React__default.Component {
       announcements: props.initialAnnouncements
     };
   }
-  static defaultProps = {
-    formatter: formatter
-  };
   dismissAnnouncements(id) {
     this.setState(({
       announcements
@@ -410,6 +406,9 @@ class Provider extends React__default.Component {
     }));
   }
 }
+Provider.defaultProps = {
+  formatter: formatter
+};
 let StyledAnnouncement$1 = class StyledAnnouncement extends React__default.Component {
   render() {
     const {
@@ -418,10 +417,11 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React__default.Compo
     } = this.props;
     return /*#__PURE__*/React__default.createElement("div", {
       className: classnames(styles$b["announcement"], styles$b["announcement--platform"])
-    }, /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", _extends({
+    }, /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", {
       className: styles$b["announcement-content"],
-      style: style
-    }, platformProps)));
+      style: style,
+      ...platformProps
+    }));
   }
 };
 let StyleProvider$1 = class StyleProvider extends React__default.Component {
@@ -429,39 +429,42 @@ let StyleProvider$1 = class StyleProvider extends React__default.Component {
     const {
       ...platformProps
     } = this.props;
-    return /*#__PURE__*/React__default.createElement("div", platformProps);
+    return /*#__PURE__*/React__default.createElement("div", {
+      ...platformProps
+    });
   }
 };
 class PlatformAnnouncements extends React__default.Component {
-  static defaultProps = {
-    configuredFetch: defaultFetch,
-    renderItem: ({
-      announcement,
-      actions
-    }) => /*#__PURE__*/React__default.createElement(DissmissibleAnnouncement, {
-      key: announcement.id,
-      html: announcement.data.html,
-      onClick: () => actions.dismissAnnouncements(announcement.id)
-    })
-  };
   render() {
     return /*#__PURE__*/React__default.createElement(StyleProvider$1, null, /*#__PURE__*/React__default.createElement(Provider, {
       env: this.props.env,
       initialAnnouncements: this.props.data,
       configuredFetch: this.props.configuredFetch
-    }, (data, actions) => Boolean(data.announcements.length > 0) ? /*#__PURE__*/React__default.createElement("div", null, data.announcements.map(announcement => this.props.renderItem({
+    }, (data, actions) => Boolean(data.announcements.length > 0) ? (/*#__PURE__*/React__default.createElement("div", null, data.announcements.map(announcement => this.props.renderItem({
       actions,
       announcement
-    }))) : null));
+    })))) : null));
   }
 }
+PlatformAnnouncements.defaultProps = {
+  configuredFetch: defaultFetch,
+  renderItem: ({
+    announcement,
+    actions
+  }) => (/*#__PURE__*/React__default.createElement(DissmissibleAnnouncement, {
+    key: announcement.id,
+    html: announcement.data.html,
+    onClick: () => actions.dismissAnnouncements(announcement.id)
+  }))
+};
 function StyledDismissButton$1({
   ...props
 }) {
-  return /*#__PURE__*/React__default.createElement("button", _extends({
+  return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: styles$b.dismiss
-  }, props), /*#__PURE__*/React__default.createElement(X, {
+    className: styles$b.dismiss,
+    ...props
+  }, /*#__PURE__*/React__default.createElement(X, {
     fill: "white",
     style: {
       height: 20,
@@ -498,7 +501,6 @@ It should look something like this in your application's Topbar composition:
 
 Attributes like `className`, `id`, `data-*`, and `aria-*` are all applied to the root element.
 */
-
 function ProductAnnouncement({
   html = "",
   onClick = _event => {
@@ -507,7 +509,9 @@ function ProductAnnouncement({
   ...props
 }) {
   const [dismissed, updateDismissed] = React__default.useState(false);
-  return dismissed || !html ? null : /*#__PURE__*/React__default.createElement(StyleProvider, props, /*#__PURE__*/React__default.createElement(StyledAnnouncement, null, /*#__PURE__*/React__default.createElement("span", {
+  return dismissed || !html ? null : (/*#__PURE__*/React__default.createElement(StyleProvider, {
+    ...props
+  }, /*#__PURE__*/React__default.createElement(StyledAnnouncement, null, /*#__PURE__*/React__default.createElement("span", {
     dangerouslySetInnerHTML: {
       __html: html
     }
@@ -516,14 +520,16 @@ function ProductAnnouncement({
       onClick(event);
       updateDismissed(true);
     }
-  })));
+  }))));
 }
 class StyleProvider extends React__default.Component {
   render() {
     const {
       ...platformProps
     } = this.props;
-    return /*#__PURE__*/React__default.createElement("div", platformProps);
+    return /*#__PURE__*/React__default.createElement("div", {
+      ...platformProps
+    });
   }
 }
 class StyledAnnouncement extends React__default.Component {
@@ -534,19 +540,21 @@ class StyledAnnouncement extends React__default.Component {
     } = this.props;
     return /*#__PURE__*/React__default.createElement("div", {
       className: styles$b["announcement"]
-    }, /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", _extends({
+    }, /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", {
       className: styles$b["announcement-content"],
-      style: style
-    }, platformProps)));
+      style: style,
+      ...platformProps
+    }));
   }
 }
 function StyledDismissButton({
   ...props
 }) {
-  return /*#__PURE__*/React__default.createElement("button", _extends({
+  return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: styles$b.dismiss
-  }, props), /*#__PURE__*/React__default.createElement(X, {
+    className: styles$b.dismiss,
+    ...props
+  }, /*#__PURE__*/React__default.createElement(X, {
     fill: "white",
     style: {
       height: 20,
@@ -622,8 +630,9 @@ const useJoltChannelSubscription = ({
   }, [enabled, subscribeToJoltChannel]);
   React__default.useEffect(() => {
     const pcoPageExpiredHandler = event => {
+      var _a;
       if (!event.data.hasOwnProperty("PCOPageExpiredCurrentPersonACID")) return;
-      if (event.data.PCOPageExpiredCurrentPersonACID === window?.pcoPageExpired?.currentPersonACID) return;
+      if (event.data.PCOPageExpiredCurrentPersonACID === ((_a = window === null || window === void 0 ? void 0 : window.pcoPageExpired) === null || _a === void 0 ? void 0 : _a.currentPersonACID)) return;
       if (joltInstance) joltInstance.disconnect();
     };
     window.addEventListener("message", pcoPageExpiredHandler);
@@ -638,7 +647,6 @@ const useJoltChannelSubscription = ({
   }, [joltInstance]);
   return joltChannel;
 };
-
 // TODO: This can be removed once all Topbar consumers that
 // provide a joltPromise are updated to jolt-client v2
 const buildLegacyJoltChannel = (jolt, channelName, fetchSubscribeTokenFn) => {
@@ -648,7 +656,8 @@ const buildLegacyJoltChannel = (jolt, channelName, fetchSubscribeTokenFn) => {
   return channel;
 };
 const buildJoltChannel = (jolt, channelName, fetchSubscribeTokenFn) => {
-  const channel = jolt.allSubscriptions?.find(s => s.channel === channelName) || jolt.subscribe(channelName, {
+  var _a;
+  const channel = ((_a = jolt.allSubscriptions) === null || _a === void 0 ? void 0 : _a.find(s => s.channel === channelName)) || jolt.subscribe(channelName, {
     fetchSubscribeTokenFn
   });
   channel.subscribe();
@@ -697,7 +706,6 @@ function useLocalStorage(key, initialValue) {
     try {
       // Get from local storage by key
       const item = window.localStorage.getItem(key);
-
       // Parse stored json or if none return initialValue
       return item ? JSON.parse(item) : initialValue;
     } catch (error) {
@@ -705,13 +713,11 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-
   // Reflect the state into localStorage as a side effect.
   const localStorageRepresentation = JSON.stringify(storedValue);
   useEffect(() => {
     window.localStorage.setItem(key, localStorageRepresentation);
   }, [key, localStorageRepresentation]);
-
   // When we are done with this key, drop it from localStorage completely
   const dropKey = () => window.localStorage.removeItem(key);
   return {
@@ -802,22 +808,21 @@ const AppsProvider = ({
   render,
   userId
 }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
   const topbarResponse = useTopbarAPI({
     configuredFetch,
     env
   });
   const apps = formatter(topbarResponse);
-  const hasConnectedPeople = topbarResponse?.data?.attributes?.has_connected_people;
-  const mfaConfigured = !!topbarResponse?.data?.attributes?.mfa_configured;
-  const colorModeSelectionEnabled = topbarResponse?.data?.attributes?.features?.includes("color_mode_selection_enabled") ?? false;
-  const colorModeLaunched = topbarResponse?.data?.attributes?.features?.includes("color_mode_launched") ?? false;
-  const colorMode = topbarResponse?.data?.attributes?.color_mode;
-  const name = topbarResponse?.data?.attributes?.name;
+  const hasConnectedPeople = (_b = (_a = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b.has_connected_people;
+  const mfaConfigured = !!((_d = (_c = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _c === void 0 ? void 0 : _c.attributes) === null || _d === void 0 ? void 0 : _d.mfa_configured);
+  const colorMode = (_f = (_e = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _e === void 0 ? void 0 : _e.attributes) === null || _f === void 0 ? void 0 : _f.color_mode;
+  const name = (_h = (_g = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _g === void 0 ? void 0 : _g.attributes) === null || _h === void 0 ? void 0 : _h.name;
   const notificationsEnabled = !window.notificationsDisabled;
-  const organizationTimeZone = topbarResponse?.data?.attributes?.org_time_zone || "America/Los_Angeles";
+  const organizationTimeZone = ((_k = (_j = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _j === void 0 ? void 0 : _j.attributes) === null || _k === void 0 ? void 0 : _k.org_time_zone) || "America/Los_Angeles";
   const algoliaSearchAuth = {
-    algoliaApplicationId: topbarResponse?.data?.attributes?.algolia_application_identifier,
-    algoliaSearchOnlyApiKey: topbarResponse?.data?.attributes?.algolia_search_key
+    algoliaApplicationId: (_m = (_l = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _l === void 0 ? void 0 : _l.attributes) === null || _m === void 0 ? void 0 : _m.algolia_application_identifier,
+    algoliaSearchOnlyApiKey: (_p = (_o = topbarResponse === null || topbarResponse === void 0 ? void 0 : topbarResponse.data) === null || _o === void 0 ? void 0 : _o.attributes) === null || _p === void 0 ? void 0 : _p.algolia_search_key
   };
   const joltPromise = useMemo(() => {
     return resolveJoltPromise({
@@ -869,8 +874,6 @@ const AppsProvider = ({
       ...state,
       algoliaSearchAuth,
       colorMode,
-      colorModeLaunched,
-      colorModeSelectionEnabled,
       disconnectJoltOnUnmount: !providedJoltPromise,
       hasConnectedPeople,
       indicatorVisible: {
@@ -890,17 +893,16 @@ const AppsProvider = ({
       organizationTimeZone,
       userId
     });
-  }, [colorMode, colorModeLaunched, joltPromise, mfaConfigured, name, notificationsEnabled, notificationsHasUnread, organizationTimeZone, colorModeSelectionEnabled, userId]);
-
+  }, [colorMode, joltPromise, mfaConfigured, name, notificationsEnabled, notificationsHasUnread, organizationTimeZone, userId]);
   // TODO: remove `fetch` and `remove` (breaking changes)
   return render(apps || [], {
     fetch: () => {},
-    // no-op because we already have fresh data
     remove: () => {} // no-op because we are no longer caching anyway
   });
 };
 function mapApps(resp) {
-  return resp?.data?.attributes?.apps || [];
+  var _a, _b;
+  return ((_b = (_a = resp === null || resp === void 0 ? void 0 : resp.data) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b.apps) || [];
 }
 
 function remove() {
@@ -916,9 +918,6 @@ class ConnectedPeopleProvider extends React__default.Component {
       connectedPeople: []
     };
   }
-  static defaultProps = {
-    configuredFetch: defaultFetch
-  };
   fetch() {
     apiRequest(this.props.configuredFetch, `${pcoUrl(this.props.env)("api")}/login/v2/me/connected_people`).then(({
       json,
@@ -937,7 +936,8 @@ class ConnectedPeopleProvider extends React__default.Component {
     }).then(({
       json
     }) => {
-      if (json?.meta?.redirect_to) navigateTo(json.meta.redirect_to);
+      var _a;
+      if ((_a = json === null || json === void 0 ? void 0 : json.meta) === null || _a === void 0 ? void 0 : _a.redirect_to) navigateTo(json.meta.redirect_to);
     });
   }
   switch(toId, returnPath) {
@@ -954,7 +954,8 @@ class ConnectedPeopleProvider extends React__default.Component {
     }).then(({
       json
     }) => {
-      if (json?.meta?.redirect_to) navigateTo(json.meta.redirect_to);
+      var _a;
+      if ((_a = json === null || json === void 0 ? void 0 : json.meta) === null || _a === void 0 ? void 0 : _a.redirect_to) navigateTo(json.meta.redirect_to);
     });
   }
   componentDidMount() {
@@ -973,6 +974,9 @@ class ConnectedPeopleProvider extends React__default.Component {
     });
   }
 }
+ConnectedPeopleProvider.defaultProps = {
+  configuredFetch: defaultFetch
+};
 
 class PointBreak extends React__default.Component {
   constructor(props) {
@@ -1005,9 +1009,6 @@ class PointBreak extends React__default.Component {
   }
 }
 class DisplaySwitch extends React__default.Component {
-  static defaultProps = {
-    smallBreakpoints: ["xs", "sm"]
-  };
   render() {
     return /*#__PURE__*/React__default.createElement(PointBreak, {
       render: breakpoint => {
@@ -1019,6 +1020,9 @@ class DisplaySwitch extends React__default.Component {
     });
   }
 }
+DisplaySwitch.defaultProps = {
+  smallBreakpoints: ["xs", "sm"]
+};
 
 // TODO: Use Fragments when we React 16 is a baseline
 function Accounts$2() {
@@ -1478,14 +1482,14 @@ function ColorAppIcon({
     }
   }, ColorAppSquircles[appName] ? (/*#__PURE__*/React__default.createElement(ColorAppSquircles[appName], {
     key: "key1"
-  })) : /*#__PURE__*/React__default.createElement("span", {
+  })) : (/*#__PURE__*/React__default.createElement("span", {
     key: "key1"
-  }), AppSymbols[appName] ? (/*#__PURE__*/React__default.createElement(AppSymbols[appName], {
+  })), AppSymbols[appName] ? (/*#__PURE__*/React__default.createElement(AppSymbols[appName], {
     color: "#fff",
     key: "key2"
-  })) : /*#__PURE__*/React__default.createElement("div", {
+  })) : (/*#__PURE__*/React__default.createElement("div", {
     key: "key3"
-  }, "appName not supported"));
+  }, "appName not supported")));
 }
 
 const SQUIRCLE_FILL_COLORS = {
@@ -1516,7 +1520,7 @@ function MonoAppIcon({
   size = 24,
   ...platformProps
 }) {
-  return /*#__PURE__*/React__default.createElement("svg", _extends({
+  return /*#__PURE__*/React__default.createElement("svg", {
     "data-logo": "mono-app-icon",
     xmlns: "http://www.w3.org/2000/svg",
     width: size,
@@ -1527,19 +1531,20 @@ function MonoAppIcon({
     style: {
       display: "block",
       ...style
-    }
-  }, platformProps), /*#__PURE__*/React__default.createElement("title", {
+    },
+    ...platformProps
+  }, /*#__PURE__*/React__default.createElement("title", {
     id: "title"
   }, "Planning Center ", appName, " App Icon"), /*#__PURE__*/React__default.createElement("desc", {
     id: "desc"
-  }, "An image symbolizing the Planning Center ", appName, " app."), appName === "Accounts" ? null : /*#__PURE__*/React__default.createElement(Squircle, {
+  }, "An image symbolizing the Planning Center ", appName, " app."), appName === "Accounts" ? null : (/*#__PURE__*/React__default.createElement(Squircle, {
     appName: appName.toLowerCase()
-  }), AppSymbols[appName] ? (/*#__PURE__*/React__default.createElement(AppSymbols[appName], {
-    color: appName === "Accounts" ? "var(--t-text-color-default-primary)" : "var(--t-fill-color-neutral-100)"
-  })) : /*#__PURE__*/React__default.createElement("div", null, "appName not supported"));
+  })), AppSymbols[appName] ? (/*#__PURE__*/React__default.createElement(AppSymbols[appName], {
+    color: appName === "Accounts" ? "var(--t-text-color)" : "var(--t-fill-color-neutral-100)"
+  })) : (/*#__PURE__*/React__default.createElement("div", null, "appName not supported")));
 }
 
-const fill = "var(--t-text-color-default-primary)";
+const fill = "var(--t-text-color)";
 function Accounts({
   size = 20
 }) {
@@ -1719,7 +1724,7 @@ function MonoAppName({
 }) {
   return MonoAppText[appName] ? (/*#__PURE__*/React__default.createElement(MonoAppText[appName], {
     size
-  })) : /*#__PURE__*/React__default.createElement("div", null, "appName not supported");
+  })) : (/*#__PURE__*/React__default.createElement("div", null, "appName not supported"));
 }
 
 var styles$a = {"unbutton":"unbutton-lEbTR"};
@@ -1730,13 +1735,14 @@ function Unbutton({
   type = "button",
   ...nativeProps
 }) {
-  return /*#__PURE__*/React__default.createElement("button", _extends({
+  return /*#__PURE__*/React__default.createElement("button", {
     className: classnames(styles$a.unbutton, className),
     style: {
       ...style
     },
-    type: type
-  }, nativeProps));
+    type: type,
+    ...nativeProps
+  });
 }
 
 var styles$9 = {"button":"button-XMbeQ","button-accounts":"button-accounts-nNh-z","chevron":"chevron-RRg9k","is-expanded":"is-expanded-zD0A0"};
@@ -1749,33 +1755,35 @@ const AppsButton = ({
   style = null,
   ...nativeProps
 }) => {
-  return /*#__PURE__*/React__default.createElement(Unbutton, _extends({
+  return /*#__PURE__*/React__default.createElement(Unbutton, {
     onClick: onClick,
     className: classnames(styles$9.button, {
       [styles$9["is-expanded"]]: expanded
     }),
     type: "button",
-    style: style
-  }, nativeProps), appName === "Accounts" ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MonoAppIcon, {
+    style: style,
+    ...nativeProps
+  }, appName === "Accounts" ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MonoAppIcon, {
     appName: "Accounts",
     colors: colors
   }), /*#__PURE__*/React__default.createElement("div", {
     className: styles$9["button-accounts"]
-  }, "Account settings")) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ColorAppIcon, {
+  }, "Account settings"))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ColorAppIcon, {
     appName: appName.replace(/[\s-]/, "")
   }), /*#__PURE__*/React__default.createElement(MonoAppName, {
     appName: appName.replace(/[\s-]/, ""),
     key: "mono-app-name",
     size: 24
-  })), /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, {
+  }))), /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, {
     className: styles$9.chevron,
     key: "disclosure-chevron-icon"
   }));
 };
 
 function getAppsSwitchProductPath(productName) {
+  var _a, _b;
   const basePath = `/apps/${productName.toLowerCase()}`;
-  const referer = window?.location?.pathname?.toString();
+  const referer = (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.pathname) === null || _b === void 0 ? void 0 : _b.toString();
   if (!referer) return basePath;
   const params = new URLSearchParams();
   params.append("referer", referer);
@@ -1799,14 +1807,15 @@ const HoverableListItem = ({
 }) => {
   const [entered, setEntered] = React__default.useState(false);
   const getBackgroundColor = () => active ? "var(--t-fill-color-neutral-060)" : entered ? "var(--t-fill-color-neutral-080)" : "transparent";
-  return /*#__PURE__*/React__default.createElement(C, _extends({
+  return /*#__PURE__*/React__default.createElement(C, {
     onMouseEnter: () => setEntered(true),
     onMouseLeave: () => setEntered(false),
     style: {
       ...style,
       backgroundColor: getBackgroundColor()
-    }
-  }, nativeProps));
+    },
+    ...nativeProps
+  });
 };
 
 class Outsider extends React__default.Component {
@@ -1838,9 +1847,10 @@ class Outsider extends React__default.Component {
     } else {
       document.addEventListener("click", this.handleOutsideClick, true);
     }
-    return /*#__PURE__*/React__default.createElement("div", _extends({
-      ref: c => this.container = c
-    }, props));
+    return /*#__PURE__*/React__default.createElement("div", {
+      ref: c => this.container = c,
+      ...props
+    });
   }
 }
 
@@ -1851,17 +1861,19 @@ const Popup = ({
   component: C = "div",
   isVisible,
   ...nativeProps
-}) => /*#__PURE__*/React__default.createElement(C, _extends({
+}) => (/*#__PURE__*/React__default.createElement(C, {
   className: classnames(styles$7.popup, {
     [styles$7["is-visible"]]: isVisible
-  }, className)
-}, nativeProps));
+  }, className),
+  ...nativeProps
+}));
 
 const PopupRoot = ({
   ...nativeProps
-}) => /*#__PURE__*/React__default.createElement("div", _extends({
-  className: styles$7["popup-root"]
-}, nativeProps));
+}) => (/*#__PURE__*/React__default.createElement("div", {
+  className: styles$7["popup-root"],
+  ...nativeProps
+}));
 
 const AppsMenu = ({
   appName,
@@ -1900,14 +1912,14 @@ const AppsMenu = ({
       margin: 0,
       padding: 0
     }
-  }, homeProduct && /*#__PURE__*/React__default.createElement(HoverableListItem, {
+  }, homeProduct && (/*#__PURE__*/React__default.createElement(HoverableListItem, {
     component: "a",
     "data-pendo": `app-switcher--change-app--${homeProduct.name}`,
     "data-turbolinks": false,
     href: appName === homeProduct.name ? `${pcoUrl(env)("accounts")}/apps/${appName}` : pcoUrl(env)("accounts") + getAppsSwitchProductPath(homeProduct.name),
     style: {
       ...listItemProps,
-      borderBottom: "1px solid var(--t-border-color-default-base)"
+      borderBottom: "1px solid var(--t-border-color)"
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -1919,7 +1931,7 @@ const AppsMenu = ({
   })), /*#__PURE__*/React__default.createElement(MonoAppName, {
     appName: "Home",
     size: 18
-  })), restProducts.map(({
+  }))), restProducts.map(({
     name
   }, i) => {
     const isFirst = i === 0;
@@ -1947,14 +1959,14 @@ const AppsMenu = ({
       appName: name.replace(/[\s-]/, ""),
       size: 18
     }));
-  }), accountsProduct && /*#__PURE__*/React__default.createElement(HoverableListItem, {
+  }), accountsProduct && (/*#__PURE__*/React__default.createElement(HoverableListItem, {
     component: "a",
     "data-pendo": `app-switcher--change-app--${accountsProduct.name}`,
     "data-turbolinks": false,
     href: pcoUrl(env)("accounts") + getAppsSwitchProductPath(accountsProduct.name),
     style: {
       ...listItemProps,
-      borderTop: "1px solid var(--t-border-color-default-base)",
+      borderTop: "1px solid var(--t-border-color)",
       padding: "0 12px",
       textDecoration: "none"
     }
@@ -1968,15 +1980,15 @@ const AppsMenu = ({
     width: 22,
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React__default.createElement(Accounts$1, {
-    color: "var(--t-icon-color-default-secondary)",
+    color: "var(--t-icon-color-secondary)",
     key: "key2"
   })), /*#__PURE__*/React__default.createElement("div", {
     style: {
-      color: "var(--t-text-color-default-secondary)",
+      color: "var(--t-text-color-secondary)",
       fontSize: "12px",
       lineHeight: "28px"
     }
-  }, "Account settings")))));
+  }, "Account settings"))))));
 };
 
 const sortByAttribute = attr => arr => arr.slice().sort((a, b) => a[attr].localeCompare(b[attr]));
@@ -2001,7 +2013,7 @@ const useSetCurrentRouteInfo = ({
         }) => ({
           active,
           name: key,
-          url: to ?? href
+          url: to !== null && to !== void 0 ? to : href
         }))
       };
     }
@@ -2023,7 +2035,7 @@ function StyledRoot({
   style,
   ...nativeProps
 }) {
-  return /*#__PURE__*/React__default.createElement("nav", _extends({
+  return /*#__PURE__*/React__default.createElement("nav", {
     className: "simple",
     "data-pendo": "topbar",
     "aria-label": "topbar-navigation",
@@ -2033,8 +2045,9 @@ function StyledRoot({
       display: "flex",
       height: "var(--topbar-height)",
       ...style
-    }
-  }, nativeProps), /*#__PURE__*/React__default.createElement("style", null, `
+    },
+    ...nativeProps
+  }, /*#__PURE__*/React__default.createElement("style", null, `
       @media only print {
         .simple {
           display: none !important;
@@ -2066,7 +2079,7 @@ const UserMenu = ({
     cleanup: !userMenuVisible,
     className: styles$5.popup,
     isVisible: userMenuVisible
-  }, /*#__PURE__*/React__default.createElement("div", null, hasConnectedPeople ? /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", null, hasConnectedPeople ? (/*#__PURE__*/React__default.createElement("div", {
     style: {
       alignItems: "center",
       backgroundColor: "var(--t-fill-color-neutral-060)",
@@ -2077,7 +2090,7 @@ const UserMenu = ({
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       ...IEFlex1,
-      color: "var(--t-text-color-default-secondary)",
+      color: "var(--t-text-color-secondary)",
       fontSize: "12px",
       textTransform: "uppercase",
       whiteSpace: "nowrap",
@@ -2099,12 +2112,12 @@ const UserMenu = ({
       e.preventDefault();
     },
     style: {
-      color: "var(--t-text-color-default-secondary)",
+      color: "var(--t-text-color-secondary)",
       marginLeft: "64px",
       textDecoration: "none",
       ...fontFamily
     }
-  }, "unlink"))) : /*#__PURE__*/React__default.createElement("noscript", null), /*#__PURE__*/React__default.createElement("style", null, `
+  }, "unlink")))) : (/*#__PURE__*/React__default.createElement("noscript", null)), /*#__PURE__*/React__default.createElement("style", null, `
                 .NotSmallTopbar__connected-people-list > *:first-child > * { border-top-width: 0 !important }
               `), /*#__PURE__*/React__default.createElement("ul", {
     className: "NotSmallTopbar__connected-people-list",
@@ -2116,7 +2129,7 @@ const UserMenu = ({
   }, connectedPeopleMenuFormatter(connectedPeople).map(({
     id,
     attributes: person
-  }) => /*#__PURE__*/React__default.createElement(HoverableListItem, {
+  }) => (/*#__PURE__*/React__default.createElement(HoverableListItem, {
     component: "li",
     key: id
   }, /*#__PURE__*/React__default.createElement("a", {
@@ -2128,8 +2141,8 @@ const UserMenu = ({
       e.preventDefault();
     },
     style: {
-      borderTop: "1px solid var(--t-border-color-default-base)",
-      color: "var(--t-text-color-default-primary)",
+      borderTop: "1px solid var(--t-border-color)",
+      color: "var(--t-text-color)",
       display: "block",
       lineHeight: "48px",
       overflow: "hidden",
@@ -2140,7 +2153,7 @@ const UserMenu = ({
       whiteSpace: "nowrap",
       ...fontFamily
     }
-  }, person.organization_name))))), /*#__PURE__*/React__default.createElement(ThemeProvider, null, hasConnectedPeople && /*#__PURE__*/React__default.createElement(Divider, null), /*#__PURE__*/React__default.createElement("form", {
+  }, person.organization_name)))))), /*#__PURE__*/React__default.createElement(ThemeProvider, null, hasConnectedPeople && /*#__PURE__*/React__default.createElement(Divider, null), /*#__PURE__*/React__default.createElement("form", {
     method: "POST",
     action: logoutUrl
   }, /*#__PURE__*/React__default.createElement(Button, {
@@ -2170,11 +2183,11 @@ const UserMenu = ({
     paddingVertical: 1.5,
     spacing: 4
   }, /*#__PURE__*/React__default.createElement(Text, {
-    color: "var(--t-text-color-default-secondary)",
+    color: "var(--t-text-color-secondary)",
     lineHeight: "24px"
   }, "Log out"), /*#__PURE__*/React__default.createElement(Icon, {
     name: "general.intoBox",
-    fill: "var(--t-icon-color-default-secondary)"
+    fill: "var(--t-icon-color-secondary)"
   })))))));
 };
 
@@ -2185,15 +2198,17 @@ const Hoverable = ({
   style = null,
   ...nativeProps
 }) => {
-  return /*#__PURE__*/React__default.createElement(C, _extends({
+  return /*#__PURE__*/React__default.createElement(C, {
     className: className,
     style: {
       ...fontFamily,
       ...style
-    }
-  }, innerRef && {
-    ref: innerRef
-  }, nativeProps));
+    },
+    ...(innerRef && {
+      ref: innerRef
+    }),
+    ...nativeProps
+  });
 };
 
 const UserMenuTrigger = ({
@@ -2221,9 +2236,9 @@ const UserMenuTrigger = ({
       setUserMenuVisible(visible => !visible);
       requestConnectedPeopleFetch();
     }
-  }, showOrgName && /*#__PURE__*/React__default.createElement("span", {
+  }, showOrgName && (/*#__PURE__*/React__default.createElement("span", {
     className: styles$5["trigger-orgname"]
-  }, orgName), /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, null)));
+  }, orgName)), /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, null)));
 };
 
 const NotSmallTopbar = ({
@@ -2316,9 +2331,10 @@ const NotSmallRoute = ({
   colors,
   ...nativeProps
 }) => {
-  return /*#__PURE__*/React__default.createElement("a", _extends({
-    className: classnames(styles$6["route"], className, active && styles$6["is-active"])
-  }, nativeProps));
+  return /*#__PURE__*/React__default.createElement("a", {
+    className: classnames(styles$6["route"], className, active && styles$6["is-active"]),
+    ...nativeProps
+  });
 };
 
 var styles$4 = {"avatar":"avatar-tW-wn"};
@@ -2330,19 +2346,17 @@ function Avatar({
   ...nativeProps
 }) {
   const url = incomingUrl || `${pcoUrl(env)("people")}/static/no_photo_thumbnail_gray.svg`;
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement("div", {
     className: styles$4.avatar,
     style: {
       backgroundImage: `url(${url})`,
       ...style
-    }
-  }, nativeProps));
+    },
+    ...nativeProps
+  });
 }
 
 class ClientStorage extends React__default.Component {
-  static defaultProps = {
-    method: "localStorage"
-  };
   update(value) {
     window[this.props.method].setItem(this.props.item, JSON.stringify(value));
     return this.forceUpdate();
@@ -2351,6 +2365,9 @@ class ClientStorage extends React__default.Component {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, this.props.render(JSON.parse(window[this.props.method].getItem(this.props.item)) || undefined, this.update.bind(this)));
   }
 }
+ClientStorage.defaultProps = {
+  method: "localStorage"
+};
 
 var styles$3 = {"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"};
 
@@ -2370,16 +2387,16 @@ function AccountSettingsLink({
     width: 24,
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React__default.createElement(Accounts$1, {
-    color: "var(--t-icon-color-default-secondary",
+    color: "var(--t-icon-color-secondary",
     key: "key2"
   })), /*#__PURE__*/React__default.createElement("span", null, "Account settings"));
 }
 
 const CloseMenuButton = ({
-  color = "var(--t-icon-color-default-dim)",
+  color = "var(--t-icon-color-dim)",
   size = 24,
   style = {}
-}) => /*#__PURE__*/React__default.createElement("button", {
+}) => (/*#__PURE__*/React__default.createElement("button", {
   "aria-label": "Close menu",
   type: "button",
   className: styles$3["appmenu-close-button"],
@@ -2391,7 +2408,7 @@ const CloseMenuButton = ({
     width: `${size}px`
   },
   "aria-hidden": "true"
-}));
+})));
 
 const UserMenuAppLockup = ({
   appName: originalAppName
@@ -2415,10 +2432,13 @@ const UserMenuAppLockup = ({
   }));
 };
 const SmallTopbar = ({
-  currentRouteComponent = props => /*#__PURE__*/React__default.createElement("span", props),
+  currentRouteComponent = props => (/*#__PURE__*/React__default.createElement("span", {
+    ...props
+  })),
   linkToProfile = true,
   ...props
 }) => {
+  var _a, _b;
   const [routesMenuVisible, setRoutesMenuVisible] = React__default.useState(false);
   const [productSwitcherVisible, setProductSwitcherVisible] = React__default.useState(false);
   const activeRoute = props.routes.filter(({
@@ -2443,7 +2463,7 @@ const SmallTopbar = ({
   }) => name !== "Home" && name !== "Accounts");
   React__default.useEffect(() => {
     setRoutesMenuVisible(false);
-  }, [activeRoute && activeRoute[0]?.props?.href]);
+  }, [activeRoute && ((_b = (_a = activeRoute[0]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.href)]);
   return /*#__PURE__*/React__default.createElement(StyledRoot, {
     style: {
       ...props.style
@@ -2459,11 +2479,11 @@ const SmallTopbar = ({
     }
   }, /*#__PURE__*/React__default.createElement(ColorAppIcon, {
     appName: props.appName.replace(/[\s-]/, "")
-  })), routesMenuVisible && /*#__PURE__*/React__default.createElement("div", {
+  })), routesMenuVisible && (/*#__PURE__*/React__default.createElement("div", {
     className: styles$3["routes"]
-  }, props.routes), /*#__PURE__*/React__default.createElement(ClientStorage, {
+  }, props.routes)), /*#__PURE__*/React__default.createElement(ClientStorage, {
     item: "Topbar:Small:Menus:Products:visibility",
-    render: () => /*#__PURE__*/React__default.createElement("div", {
+    render: () => (/*#__PURE__*/React__default.createElement("div", {
       className: styles$3["appmenu-layer"],
       style: {
         ...(productSwitcherVisible && {
@@ -2484,10 +2504,10 @@ const SmallTopbar = ({
       },
       className: styles$3["appmenu-container"]
     }, /*#__PURE__*/React__default.createElement("a", {
-      "data-pendo": `app-switcher--change-app--${homeProduct?.name}`,
+      "data-pendo": `app-switcher--change-app--${homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name}`,
       "data-turbolinks": false,
       className: classnames(styles$3["appmenu-list-a"], styles$3["appmenu-list-a--top"]),
-      href: homeProduct ? pcoUrl(props.env)("accounts") + getAppsSwitchProductPath(homeProduct?.name) : undefined
+      href: homeProduct ? pcoUrl(props.env)("accounts") + getAppsSwitchProductPath(homeProduct === null || homeProduct === void 0 ? void 0 : homeProduct.name) : undefined
     }, /*#__PURE__*/React__default.createElement(UserMenuAppLockup, {
       appName: homeProduct ? homeProduct.name : props.appName
     })), /*#__PURE__*/React__default.createElement("div", {
@@ -2497,7 +2517,7 @@ const SmallTopbar = ({
       className: styles$3["appmenu-list"]
     }, appsMenuFormatter(restProducts).map(({
       name
-    }) => /*#__PURE__*/React__default.createElement("li", {
+    }) => (/*#__PURE__*/React__default.createElement("li", {
       key: name,
       className: styles$3["appmenu-list-li"]
     }, /*#__PURE__*/React__default.createElement("a", {
@@ -2507,11 +2527,11 @@ const SmallTopbar = ({
       href: pcoUrl(props.env)("accounts") + getAppsSwitchProductPath(name)
     }, /*#__PURE__*/React__default.createElement(UserMenuAppLockup, {
       appName: name
-    })))), accountsProduct && /*#__PURE__*/React__default.createElement("li", {
+    }))))), accountsProduct && (/*#__PURE__*/React__default.createElement("li", {
       className: styles$3["appmenu-list-li"]
     }, /*#__PURE__*/React__default.createElement(AccountSettingsLink, {
       env: props.env
-    }))))))
+    }))))))))
   }), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: classnames(styles$3["current-route"], {
@@ -2524,7 +2544,10 @@ const SmallTopbar = ({
   }, /*#__PURE__*/React__default.createElement(CurrentRouteComponent, null, capitalize(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: styles$3["profile-button"],
-    onClick: () => window.topbar?.openProfile?.()
+    onClick: () => {
+      var _a, _b;
+      return (_b = (_a = window.topbar) === null || _a === void 0 ? void 0 : _a.openProfile) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
   }, /*#__PURE__*/React__default.createElement(Avatar, {
     env: props.env,
     url: props.userAvatarPath
@@ -2534,17 +2557,19 @@ const SmallRoute = ({
   active,
   className,
   ...props
-}) => /*#__PURE__*/React__default.createElement("a", _extends({
-  className: classnames(styles$3["route"], className, active && styles$3["is-active"])
-}, props));
+}) => (/*#__PURE__*/React__default.createElement("a", {
+  className: classnames(styles$3["route"], className, active && styles$3["is-active"]),
+  ...props
+}));
 
 function getLoginProfilePath({
   env,
   appName,
   userId
 }) {
+  var _a, _b;
   const basePath = pcoUrl(env)("login") + `/people/AC${userId}`;
-  const pathname = window?.location?.pathname?.toString();
+  const pathname = (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.pathname) === null || _b === void 0 ? void 0 : _b.toString();
   if (!pathname) return basePath;
   const params = new URLSearchParams();
   params.append("return", `${appName}/${pathname}`);
@@ -2649,7 +2674,7 @@ const topbarTheme = {
       baseColor: "#2266f7",
       key: "primary"
     }),
-    separatorTertiary: "var(--t-border-color-default-base)"
+    separatorTertiary: "var(--t-border-color)"
   },
   icons: {
     churchCenter,
@@ -2677,9 +2702,10 @@ function DrawerWrap({
   className,
   ...props
 }) {
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classnames(styles$2["drawer-wrap"], className, isVisible && styles$2["is-visible"])
-  }, props), children);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(styles$2["drawer-wrap"], className, isVisible && styles$2["is-visible"]),
+    ...props
+  }, children);
 }
 
 function DrawerHeader({
@@ -2695,9 +2721,9 @@ function DrawerHeader({
     paddingTop: 1
   }, /*#__PURE__*/React__default.createElement(Box, {
     flex: 1
-  }, children), closeDrawer && /*#__PURE__*/React__default.createElement(Button, {
+  }, children), closeDrawer && (/*#__PURE__*/React__default.createElement(Button, {
     icon: {
-      fill: "var(--t-icon-color-default-dim)",
+      fill: "var(--t-icon-color-dim)",
       name: "general.x",
       size: "md"
     },
@@ -2708,25 +2734,25 @@ function DrawerHeader({
       backgroundColor: "var(--t-fill-color-neutral-070)"
     },
     marginTop: 0.25
-  }));
+  })));
 }
 
 function DrawerHeading({
   children,
   ...props
 }) {
-  return /*#__PURE__*/React__default.createElement(Heading, _extends({
-    color: "var(--t-text-color-default-headline)",
+  return /*#__PURE__*/React__default.createElement(Heading, {
+    color: "var(--t-text-color-headline)",
     letterSpacing: ".002em",
     level: 2,
     lineHeight: "35px",
-    weight: 700
-  }, props), children);
+    weight: 700,
+    ...props
+  }, children);
 }
 
 // TODO: This component could prob be genrealized to provide overflow-y scroll indication, as well, if needed.
 // `top`/`bottom` // `left`/`right` → `start`/`end`
-
 const INDICATOR_STYLES = {
   bottom: {
     background: "linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.07))",
@@ -2747,22 +2773,20 @@ const ScrollContainer = ({
   const containerRef = useRef(null);
   const bottomEdgeRef = useRef(null);
   const topEdgeRef = useRef(null);
-
   // Perf: should this be debounced?
   const handleResize = () => {
-    const container = containerRef?.current;
+    const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
     if (container) {
       const hasOverflowBottom = container.scrollHeight - container.clientHeight > container.scrollTop + 1;
       setOverflowBottom(hasOverflowBottom);
     }
   };
   useEffect(() => {
-    const container = containerRef?.current;
+    const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
     if (!container) {
       return () => {}; // noop
     }
     setOverflowBottom(container.scrollHeight > container.clientHeight);
-
     // setup intersection observers
     const options = {
       root: container,
@@ -2774,15 +2798,14 @@ const ScrollContainer = ({
     const topObserver = new IntersectionObserver(([{
       isIntersecting
     }]) => setOverflowTop(!isIntersecting), options);
-    const bottomTarget = bottomEdgeRef?.current;
-    const topTarget = topEdgeRef?.current;
+    const bottomTarget = bottomEdgeRef === null || bottomEdgeRef === void 0 ? void 0 : bottomEdgeRef.current;
+    const topTarget = topEdgeRef === null || topEdgeRef === void 0 ? void 0 : topEdgeRef.current;
     if (bottomTarget) {
       bottomObserver.observe(bottomTarget);
     }
     if (topTarget) {
       topObserver.observe(topTarget);
     }
-
     // setup resize observer
     const resizeObserver = new ResizeObserver(handleResize);
     resizeObserver.observe(container);
@@ -2804,7 +2827,7 @@ const ScrollContainer = ({
     edge: "top"
   }), overflowBottom && /*#__PURE__*/React__default.createElement(OverflowIndicator, {
     edge: "bottom"
-  }), /*#__PURE__*/React__default.createElement(StackView$2, _extends({
+  }), /*#__PURE__*/React__default.createElement(StackView$2, {
     basis: 2,
     grow: 1,
     innerRef: containerRef,
@@ -2813,8 +2836,9 @@ const ScrollContainer = ({
     shrink: 1,
     css: {
       overscrollBehavior: "contain"
-    }
-  }, props), /*#__PURE__*/React__default.createElement(Box, {
+    },
+    ...props
+  }, /*#__PURE__*/React__default.createElement(Box, {
     innerRef: topEdgeRef
   }), children, /*#__PURE__*/React__default.createElement(Box, {
     innerRef: bottomEdgeRef
@@ -2823,15 +2847,16 @@ const ScrollContainer = ({
 const OverflowIndicator = ({
   edge
 }) => {
-  return /*#__PURE__*/React__default.createElement(Box, _extends({
+  return /*#__PURE__*/React__default.createElement(Box, {
     height: 1,
     left: 0,
     pointerEvents: "none",
     position: "absolute",
     right: 0,
     role: "presentation",
-    zIndex: 10
-  }, INDICATOR_STYLES[edge]));
+    zIndex: 10,
+    ...INDICATOR_STYLES[edge]
+  });
 };
 
 const SwitchView = ({
@@ -2862,7 +2887,7 @@ const SwitchView = ({
   }));
 };
 
-var styles$1 = {"color-mode-switcher":"color-mode-switcher-JpczO","color-mode-switcher-label":"color-mode-switcher-label-3jPM2","color-mode-switcher-label-beta":"color-mode-switcher-label-beta-pwv5t","color-mode-switcher-modes":"color-mode-switcher-modes-u-bic"};
+var styles$1 = {"color-mode-switcher":"color-mode-switcher-JpczO","color-mode-switcher-label":"color-mode-switcher-label-3jPM2","color-mode-switcher-modes":"color-mode-switcher-modes-u-bic"};
 
 const COLOR_MODES = [{
   label: "Light",
@@ -2877,8 +2902,7 @@ const COLOR_MODES = [{
 let COLOR_MODE_INSTANCE_COUNTER = 0;
 function ColorModeSwitcher() {
   const {
-    colorMode,
-    colorModeLaunched
+    colorMode
   } = useStore();
   const updateStore = useUpdateStore();
   const [counter] = useState(() => COLOR_MODE_INSTANCE_COUNTER++);
@@ -2886,14 +2910,12 @@ function ColorModeSwitcher() {
     className: styles$1["color-mode-switcher"]
   }, /*#__PURE__*/React__default.createElement("legend", {
     className: styles$1["color-mode-switcher-label"]
-  }, "Appearance", " ", !colorModeLaunched && /*#__PURE__*/React__default.createElement("span", {
-    className: styles$1["color-mode-switcher-label-beta"]
-  }, "beta")), /*#__PURE__*/React__default.createElement("div", {
+  }, "Appearance", " "), /*#__PURE__*/React__default.createElement("div", {
     className: styles$1["color-mode-switcher-modes"]
   }, COLOR_MODES.map(({
     value,
     label
-  }) => /*#__PURE__*/React__default.createElement("label", {
+  }) => (/*#__PURE__*/React__default.createElement("label", {
     key: value
   }, /*#__PURE__*/React__default.createElement("input", {
     name: `color-mode-${counter}`,
@@ -2910,7 +2932,7 @@ function ColorModeSwitcher() {
     }
   }), /*#__PURE__*/React__default.createElement(ColorModeIcon, {
     mode: value
-  }), label))));
+  }), label)))));
 }
 function updateColorMode(mode) {
   return apiRequest(railsCsrfFetch, `${window.location.origin}/~api/people/v2/me/color_mode`, {
@@ -2964,8 +2986,7 @@ function UserProfile({
 }) {
   const {
     mfaConfigured,
-    name,
-    colorModeSelectionEnabled
+    name
   } = useStore();
   return /*#__PURE__*/React__default.createElement(StackView$2, {
     axis: "vertical",
@@ -2989,17 +3010,17 @@ function UserProfile({
   }, /*#__PURE__*/React__default.createElement(DrawerHeading, {
     paddingTop: 0.5,
     lineHeight: 3.25
-  }, name), linkToProfile && /*#__PURE__*/React__default.createElement(Link$1, {
+  }, name), linkToProfile && (/*#__PURE__*/React__default.createElement(Link$1, {
     to: profileUrl,
     style: {
-      color: "var(--t-icon-color-default-secondary)"
+      color: "var(--t-icon-color-secondary)"
     },
     size: 3,
     onClick: () => setTimeout(() => closeDrawer(), 50)
-  }, "My profile"), /*#__PURE__*/React__default.createElement(Link$1, {
+  }, "My profile")), /*#__PURE__*/React__default.createElement(Link$1, {
     to: loginSettingsUrl,
     style: {
-      color: "var(--t-icon-color-default-secondary)"
+      color: "var(--t-icon-color-secondary)"
     },
     size: 3
   }, "My login settings"), /*#__PURE__*/React__default.createElement(StackView$2, {
@@ -3010,15 +3031,15 @@ function UserProfile({
   }, /*#__PURE__*/React__default.createElement(Icon, {
     name: mfaConfigured ? "general.lock" : "general.unlock",
     size: "sm",
-    color: mfaConfigured ? "var(--t-icon-color-status-success-primary)" : "var(--t-icon-color-status-error-primary)"
+    color: mfaConfigured ? "var(--t-icon-color-status-success)" : "var(--t-icon-color-status-error)"
   }), /*#__PURE__*/React__default.createElement(Text, {
     size: 4,
     weight: 400,
-    color: "var(--t-text-color-default-secondary)",
+    color: "var(--t-text-color-secondary)",
     wrap: true
   }, "Two-step verification ", mfaConfigured ? "active" : "inactive"))), /*#__PURE__*/React__default.createElement(Button, {
     icon: {
-      fill: "var(--t-icon-color-default-dim)",
+      fill: "var(--t-icon-color-dim)",
       name: "general.x",
       size: "md"
     },
@@ -3030,7 +3051,7 @@ function UserProfile({
     hover: {
       backgroundColor: "var(--t-fill-color-neutral-070)"
     }
-  })), colorModeSelectionEnabled && /*#__PURE__*/React__default.createElement(GridView, {
+  })), /*#__PURE__*/React__default.createElement(GridView, {
     padding: 2
   }, /*#__PURE__*/React__default.createElement(ColorModeSwitcher, null)), /*#__PURE__*/React__default.createElement("form", {
     method: "POST",
@@ -3060,8 +3081,8 @@ function UserProfile({
     size: 3
   }, "Log out"), /*#__PURE__*/React__default.createElement(Icon, {
     name: "general.intoBox",
-    fill: "var(--t-icon-color-default-secondary)"
-  })))), hasConnectedPeople && /*#__PURE__*/React__default.createElement(StackView$2, {
+    fill: "var(--t-icon-color-secondary)"
+  })))), hasConnectedPeople && (/*#__PURE__*/React__default.createElement(StackView$2, {
     mediaQueries: {
       sm: {
         display: "none"
@@ -3082,7 +3103,7 @@ function UserProfile({
   }, connectedPeopleMenuFormatter(connectedPeople).map(({
     id,
     attributes: person
-  }) => /*#__PURE__*/React__default.createElement(List.Item, {
+  }) => (/*#__PURE__*/React__default.createElement(List.Item, {
     key: id,
     onClick: e => {
       requestClearAppsCache();
@@ -3094,7 +3115,7 @@ function UserProfile({
     padding: 2
   }, /*#__PURE__*/React__default.createElement(Text, {
     truncate: true
-  }, person.organization_name))), /*#__PURE__*/React__default.createElement(List.Item, {
+  }, person.organization_name)))), /*#__PURE__*/React__default.createElement(List.Item, {
     onClick: e => {
       requestClearAppsCache();
       requestClearConnectedPeopleCache();
@@ -3106,16 +3127,16 @@ function UserProfile({
     underline: false
   }, /*#__PURE__*/React__default.createElement(Text, {
     size: 3
-  }, "Unlink my accounts")))));
+  }, "Unlink my accounts"))))));
 }
 
-var ActionType = /*#__PURE__*/function (ActionType) {
+var ActionType;
+(function (ActionType) {
   ActionType["close"] = "close";
   ActionType["mount"] = "mount";
   ActionType["open"] = "open";
   ActionType["unmount"] = "unmount";
-  return ActionType;
-}(ActionType || {});
+})(ActionType || (ActionType = {}));
 const initialState = {
   currentContent: null,
   open: false
@@ -3213,7 +3234,7 @@ const CustomSearchBox = ({
     hits,
     results
   } = useHits();
-  const groups = results?.hits.reduce((acc, hit) => {
+  const groups = results === null || results === void 0 ? void 0 : results.hits.reduce((acc, hit) => {
     const key = hit.category.title;
     if (!acc[key]) {
       acc[key] = [];
@@ -3238,7 +3259,7 @@ const CustomSearchBox = ({
     onChange: e => setQuery(e.target.value),
     onSelect: selectedValue => handleSearchSelect(selectedValue, indexName),
     placement: "bottom-start"
-  }, !hits.length && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StackView$2, {
+  }, !hits.length && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StackView$2, {
     axis: "horizontal",
     alignment: "center",
     paddingHorizontal: 2,
@@ -3247,7 +3268,7 @@ const CustomSearchBox = ({
     color: "neutralDarker",
     size: 4,
     whiteSpace: "normal"
-  }, "No results match your search"))), groups && Object.keys(groups).map(key => {
+  }, "No results match your search")))), groups && Object.keys(groups).map(key => {
     const hits = groups[key];
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: key
@@ -3266,11 +3287,11 @@ const CustomSearchBox = ({
       size: 5,
       color: "foregroundSecondary",
       fontWeight: 500
-    }, key)), hits.map(hit => /*#__PURE__*/React__default.createElement(HitResult, {
+    }, key)), hits.map(hit => (/*#__PURE__*/React__default.createElement(HitResult, {
       key: hit.objectID,
       hit: hit,
       index: resultIndex++
-    })));
+    }))));
   })));
 };
 
@@ -3349,15 +3370,16 @@ const Eyebrow = ({
   dark,
   style,
   ...props
-}) => /*#__PURE__*/React__default.createElement("div", _extends({
+}) => (/*#__PURE__*/React__default.createElement("div", {
   style: {
-    color: "var(--t-text-color-default-primary)",
+    color: "var(--t-text-color)",
     fontSize: "12px",
     fontWeight: 400,
     textTransform: "uppercase",
     ...style
-  }
-}, props));
+  },
+  ...props
+}));
 
 const NotificationItem = ({
   mobile = false,
@@ -3407,7 +3429,7 @@ const NotificationItem = ({
     onClick: handleClick,
     style: {
       alignItems: "flex-start",
-      borderBottom: showBottomBorder || !isLast ? "1px solid var(--t-border-color-default-base)" : "none",
+      borderBottom: showBottomBorder || !isLast ? "1px solid var(--t-border-color)" : "none",
       cursor: "pointer",
       display: "flex",
       overflow: "hidden",
@@ -3444,14 +3466,14 @@ const NotificationItem = ({
     }
   }, appName), /*#__PURE__*/React__default.createElement("h1", {
     style: {
-      color: "var(--t-text-color-default-headline)",
+      color: "var(--t-text-color-headline)",
       fontSize: "16px",
       fontWeight: 500,
       lineHeight: "1.3em",
       margin: 0,
       userSelect: "none"
     }
-  }, title)), !mobile && /*#__PURE__*/React__default.createElement(Dropdown, {
+  }, title)), !mobile && (/*#__PURE__*/React__default.createElement(Dropdown, {
     icon: {
       name: "general.threeDots"
     },
@@ -3468,21 +3490,21 @@ const NotificationItem = ({
       e.stopPropagation();
       onToggleRead();
     }
-  }, "Mark ", isRead ? "unread" : "as read"), notification.taskUrl ? /*#__PURE__*/React__default.createElement(Dropdown.Item, {
+  }, "Mark ", isRead ? "unread" : "as read"), notification.taskUrl ? (/*#__PURE__*/React__default.createElement(Dropdown.Item, {
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
       window.location.href = notification.taskUrl;
     }
-  }, "Open task") : /*#__PURE__*/React__default.createElement(Dropdown.Item, {
+  }, "Open task")) : (/*#__PURE__*/React__default.createElement(Dropdown.Item, {
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
       onCreateTask(notification);
     }
-  }, "Create task"))), /*#__PURE__*/React__default.createElement("div", {
+  }, "Create task"))))), /*#__PURE__*/React__default.createElement("div", {
     style: {
-      color: "var(--t-text-color-default-primary)",
+      color: "var(--t-text-color)",
       fontSize: "12px",
       paddingLeft: "12px",
       userSelect: "none"
@@ -3494,22 +3516,22 @@ const NotificationsMenuBlankState = ({
   context,
   description,
   title = "No notifications"
-}) => /*#__PURE__*/React__default.createElement(StackView$2, {
+}) => (/*#__PURE__*/React__default.createElement(StackView$2, {
   alignment: "center",
   distribution: "center",
   padding: 4
 }, /*#__PURE__*/React__default.createElement(BlankStateIcon, {
   id: context
 }), /*#__PURE__*/React__default.createElement(Heading, {
-  color: "var(--t-text-color-default-headline)",
+  color: "var(--t-text-color-headline)",
   fontWeight: 500,
   marginTop: 1,
   size: 3
 }, title), /*#__PURE__*/React__default.createElement(Text, {
   align: "center",
-  color: "var(--t-text-color-default-primary)",
+  color: "var(--t-text-color)",
   size: 4
-}, description));
+}, description)));
 
 const notificationsOrganizer = notifications => {
   const {
@@ -3535,6 +3557,7 @@ const notificationsOrganizer = notifications => {
   };
 };
 const buildNotificationFromApiResponse = (resp, json) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const findInIncluded = ({
     type,
     id
@@ -3543,24 +3566,23 @@ const buildNotificationFromApiResponse = (resp, json) => {
       return i.type === type && i.id === id;
     });
   };
-  const appName = findInIncluded(resp.relationships.app.data, json.included)?.attributes?.name;
-
+  const appName = (_b = (_a = findInIncluded(resp.relationships.app.data, json.included)) === null || _a === void 0 ? void 0 : _a.attributes) === null || _b === void 0 ? void 0 : _b.name;
   // There is technically the possibility that there are multiple web payloads
   // returned from the API endpoint. However, at this point I'm not sure in
   // which situations that would be the case. For v1 of this feature, we'll
   // assume that there is only one web payload we need to worry about and it is
   // the first in the array that is returned.
-  const notificationData = JSON.parse(findInIncluded({
-    id: resp?.relationships?.web_payloads?.data[0]?.id,
+  const notificationData = JSON.parse((_g = (_f = findInIncluded({
+    id: (_e = (_d = (_c = resp === null || resp === void 0 ? void 0 : resp.relationships) === null || _c === void 0 ? void 0 : _c.web_payloads) === null || _d === void 0 ? void 0 : _d.data[0]) === null || _e === void 0 ? void 0 : _e.id,
     type: "Payload"
-  }, json.included)?.attributes?.content);
+  }, json.included)) === null || _f === void 0 ? void 0 : _f.attributes) === null || _g === void 0 ? void 0 : _g.content);
   return {
     appName,
     createdAt: new Date(resp.attributes.created_at),
     id: resp.id,
-    isRead: resp.attributes.read_at?.length > 0,
-    link: notificationData?.link,
-    title: notificationData?.title
+    isRead: ((_h = resp.attributes.read_at) === null || _h === void 0 ? void 0 : _h.length) > 0,
+    link: notificationData === null || notificationData === void 0 ? void 0 : notificationData.link,
+    title: notificationData === null || notificationData === void 0 ? void 0 : notificationData.title
   };
 };
 const useNotifications = ({
@@ -3659,7 +3681,6 @@ const useNotifications = ({
     }).then(e => {
       if (!e.ok) {
         // TODO: show an alert or something?
-
         setIsLoading(false);
         setHasError(true);
         // Rollback any optimistic UI updates
@@ -3692,7 +3713,6 @@ const useNotifications = ({
   }, []);
   const handleToggleRead = async notification => {
     const action = notification.isRead ? "unread" : "read";
-
     // optimistic UI update
     setNotifications(notifications => notifications.map(n => notification.id == n.id ? {
       ...n,
@@ -3705,7 +3725,6 @@ const useNotifications = ({
   };
   const handleMarkAllAsRead = () => {
     const unreadIds = unread.map(n => n.id);
-
     // optimistic UI update
     setNotifications(notifications => notifications.map(n => unreadIds.includes(n.id) ? {
       ...n,
@@ -3730,23 +3749,25 @@ const SectionHeaderButton = ({
   onClick,
   title,
   ...props
-}) => /*#__PURE__*/React__default.createElement(StackView$2, _extends({
-  color: disabled ? "var(--t-text-color-default-disabled)" : "var(--t-text-color-interaction-primary)",
+}) => (/*#__PURE__*/React__default.createElement(StackView$2, {
+  color: disabled ? "var(--t-text-color-disabled)" : "var(--t-text-color-interaction)",
   cursor: disabled ? "default" : "pointer",
   fontSize: 5,
   fontWeight: 600,
   userSelect: "none",
-  onClick: !disabled && onClick
-}, props), title);
+  onClick: !disabled && onClick,
+  ...props
+}, title));
 const SectionHeaderTitle = ({
   ...props
-}) => /*#__PURE__*/React__default.createElement(Heading, _extends({
-  color: "var(--t-text-color-default-headline)",
+}) => (/*#__PURE__*/React__default.createElement(Heading, {
+  color: "var(--t-text-color-headline)",
   lineHeight: 2,
   size: 5,
   textTransform: "uppercase",
-  userSelect: "none"
-}, props));
+  userSelect: "none",
+  ...props
+}));
 function NotificationsComponent({
   closeDrawer
 }) {
@@ -3790,17 +3811,17 @@ function NotificationsComponent({
     alignment: "center",
     axis: "horizontal",
     spacing: 1
-  }, /*#__PURE__*/React__default.createElement(DrawerHeading, null, "Notifications"), isLoading && /*#__PURE__*/React__default.createElement(Spinner, {
+  }, /*#__PURE__*/React__default.createElement(DrawerHeading, null, "Notifications"), isLoading && (/*#__PURE__*/React__default.createElement(Spinner, {
     color: "var(--t-fill-color-neutral-030)",
     thickness: 2,
     trackColor: "var(--t-fill-color-neutral-080)"
-  }), hasError && /*#__PURE__*/React__default.createElement(ExclamationTriangle, {
+  })), hasError && (/*#__PURE__*/React__default.createElement(ExclamationTriangle, {
     fill: "hsl(8 60% 47%)",
     size: 16
-  })), read.length > 0 && /*#__PURE__*/React__default.createElement(SectionHeaderButton, {
+  }))), read.length > 0 && (/*#__PURE__*/React__default.createElement(SectionHeaderButton, {
     onClick: () => setShowRead(showRead => !showRead),
     title: `${showRead ? "Hide" : "Show"} read`
-  }))), /*#__PURE__*/React__default.createElement(ScrollContainer, null, /*#__PURE__*/React__default.createElement(StackView$2, {
+  })))), /*#__PURE__*/React__default.createElement(ScrollContainer, null, /*#__PURE__*/React__default.createElement(StackView$2, {
     alignment: "stretch",
     spacing: 2
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -3812,25 +3833,26 @@ function NotificationsComponent({
       margin: 0,
       padding: "4px 0"
     }
-  }, !isLoading && unread.length === 0 && /*#__PURE__*/React__default.createElement(NotificationsMenuBlankState, _extends({
+  }, !isLoading && unread.length === 0 && (/*#__PURE__*/React__default.createElement(NotificationsMenuBlankState, {
     context: "toolbar",
-    description: `When you have ${read.length > 0 ? "unread " : ""}notifications they will show up here.`
-  }, read.length > 0 && {
-    title: "No unread notifications"
-  })), unread.length > 0 && /*#__PURE__*/React__default.createElement(StackView$2, {
+    description: `When you have ${read.length > 0 ? "unread " : ""}notifications they will show up here.`,
+    ...(read.length > 0 && {
+      title: "No unread notifications"
+    })
+  })), unread.length > 0 && (/*#__PURE__*/React__default.createElement(StackView$2, {
     axis: "horizontal",
     alignment: "center",
     distribution: "space-between",
     padding: 2
-  }, /*#__PURE__*/React__default.createElement(SectionHeaderTitle, null, "Unread"), unread.length > 0 && /*#__PURE__*/React__default.createElement(SectionHeaderButton, {
+  }, /*#__PURE__*/React__default.createElement(SectionHeaderTitle, null, "Unread"), unread.length > 0 && (/*#__PURE__*/React__default.createElement(SectionHeaderButton, {
     onClick: () => handleMarkAllAsRead(),
     title: `Mark ${unread.length} as read`
-  })), /*#__PURE__*/React__default.createElement(TransitionGroup, {
+  })))), /*#__PURE__*/React__default.createElement(TransitionGroup, {
     exit: false
-  }, unread.map((notification, idx) => /*#__PURE__*/React__default.createElement(Transition, {
+  }, unread.map((notification, idx) => (/*#__PURE__*/React__default.createElement(Transition, {
     key: notification.id,
     timeout: 0
-  }, state => /*#__PURE__*/React__default.createElement("div", {
+  }, state => (/*#__PURE__*/React__default.createElement("div", {
     style: {
       ...defaultStyle,
       ...transitionStyles[state]
@@ -3842,15 +3864,17 @@ function NotificationsComponent({
     onToggleRead: () => handleToggleRead(notification),
     onCreateTask: handleCreateTask,
     showBottomBorder: read.length > 0,
-    notification
-  }))))), read.length > 0 && showRead && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SectionHeaderTitle, {
+    ...{
+      notification
+    }
+  }))))))), read.length > 0 && showRead && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SectionHeaderTitle, {
     padding: 2
   }, "Read"), /*#__PURE__*/React__default.createElement(TransitionGroup, {
     exit: false
-  }, read.map(notification => /*#__PURE__*/React__default.createElement(Transition, {
+  }, read.map(notification => (/*#__PURE__*/React__default.createElement(Transition, {
     key: notification.id,
     timeout: 0
-  }, state => /*#__PURE__*/React__default.createElement("div", {
+  }, state => (/*#__PURE__*/React__default.createElement("div", {
     style: {
       ...defaultStyle,
       ...transitionStyles[state]
@@ -3864,8 +3888,10 @@ function NotificationsComponent({
     onToggleRead: () => handleToggleRead(notification),
     onCreateTask: handleCreateTask,
     showBottomBorder: true,
-    notification
-  })))))))))));
+    ...{
+      notification
+    }
+  }))))))))))))));
 }
 const Notifications = {
   component: NotificationsComponent,
@@ -3925,18 +3951,20 @@ function NavLinkWithBadge({
   onClick,
   ...rest
 }) {
-  return /*#__PURE__*/React__default.createElement(StackView$2, _extends({
+  return /*#__PURE__*/React__default.createElement(StackView$2, {
     as: "button",
     axis: "horizontal",
     distribution: "space-between",
     alignment: "center",
     paddingBottom: 0.75,
     onClick: () => onClick(),
-    spacing: 1
-  }, rest), children, badge && /*#__PURE__*/React__default.createElement(Badge, _extends({
+    spacing: 1,
+    ...rest
+  }, children, badge && /*#__PURE__*/React__default.createElement(Badge, {
     size: "sm",
-    fontWeight: "600"
-  }, badge)));
+    fontWeight: "600",
+    ...badge
+  }));
 }
 function TasksComponent({
   closeDrawer,
@@ -3958,7 +3986,7 @@ function TasksComponent({
     });
   }, []);
   const pendoTrackEvent = useCallback((event, properties = {}) => {
-    if (!window?.pendo) {
+    if (!(window === null || window === void 0 ? void 0 : window.pendo)) {
       return console.warn("`window.pendo` is undefined");
     }
     window.pendo.track(event, properties);
@@ -4013,7 +4041,7 @@ function JoltSubscriber({
   } = useStore();
   const joltIsV2 = useJoltIsV2(joltPromise);
   const joltChannel = useJoltChannelSubscription({
-    channelName: requestedJoltChannel?.channelName,
+    channelName: requestedJoltChannel === null || requestedJoltChannel === void 0 ? void 0 : requestedJoltChannel.channelName,
     disconnectJoltOnUnmount,
     enabled: !!requestedJoltChannel,
     env,
@@ -4033,13 +4061,13 @@ function JoltSubscriber({
     },
     joltPromise
   });
-  return joltIsV2 ? /*#__PURE__*/React__default.createElement(JoltEffectV2, {
+  return joltIsV2 ? (/*#__PURE__*/React__default.createElement(JoltEffectV2, {
     channel: joltChannel,
     onMessage: onMessage
-  }) : /*#__PURE__*/React__default.createElement(JoltEffectV1, {
+  })) : (/*#__PURE__*/React__default.createElement(JoltEffectV1, {
     channel: joltChannel,
     onMessage: onMessage
-  });
+  }));
 }
 function JoltEffectV2({
   channel,
@@ -4101,26 +4129,20 @@ function useHandleMessageFromChildFrame(callback, {
 }
 
 // TLDR; This hook is used to sync the fragment route in the browser's url without causing an annoying flicker.
-
 // It has a couple of interrelated responsibilities whose relationship may not be obvious:
-
 // First:
 // It listens for messages from the child frame that indicate that the frame has navigated to a new path.
 // When this happens, it updates the fragment route in the browser's url.
 // We also track the internal path of the child frame in a ref so that we can compare it to the fragment route in the browser's url.
-
 // Second:
 // It compares the current fragment route against the internal path of the child frame.
 // The only time that these would ever diverge is if the user manually changes the fragment route in the browser's url.
 // When they are not the same, we update the src attribute of the iframe to match the fragment route in the browser's url.
-
 // You may be asking yourself, why all this complexity?
 // Why not just update the src attribute of the iframe every time the fragment route changes?
-
 // The answer:
 // If you change an iframes src attribute, it will reload the iframe and cause a very annoying flicker.
 // It's not a rerender bug. It's a browser behavior that we can't control.
-
 function useStableIframeSrcAttributeAndSyncFragmentRoute({
   currentPath,
   setFragmentRoute,
@@ -4134,7 +4156,6 @@ function useStableIframeSrcAttributeAndSyncFragmentRoute({
     const unencodedPath = event.data.payload.replace(/^\/?topbar/, "") // Maybe this should happen on the child side of things?
     .replace(/^\/+/, "");
     internalPathOfChatRef.current = unencodedPath;
-
     // URL encode the payload's query string for the fragment route
     // so possible query params don't get dropped by the fragment router
     setFragmentRoute(encodeQueryString(unencodedPath));
@@ -4278,8 +4299,9 @@ const Profile = {
 
 const DURATION = 100;
 function isToolPathExemptFromStorage(toolName, path) {
+  var _a, _b;
   const tool = toolsRouteMap[toolName];
-  return tool?.storageExemptPaths?.includes(path) ?? false;
+  return (_b = (_a = tool === null || tool === void 0 ? void 0 : tool.storageExemptPaths) === null || _a === void 0 ? void 0 : _a.includes(path)) !== null && _b !== void 0 ? _b : false;
 }
 const TOOLS_MAP = {
   Chat,
@@ -4324,7 +4346,7 @@ function Toolbar({
     userId
   } = {
     ...storeData,
-    ...(env === "development" ? _storeDataOverride ?? {} : {})
+    ...(env === "development" ? _storeDataOverride !== null && _storeDataOverride !== void 0 ? _storeDataOverride : {} : {})
   };
   const updateStore = useUpdateStore();
   React__default.useEffect(() => {
@@ -4335,7 +4357,6 @@ function Toolbar({
       document.body.style.overflow = "auto";
     }
   }, [open]);
-
   // Listen for external close requests from store
   React__default.useEffect(() => {
     const unsubscribe = store$1.subscribe(state => {
@@ -4358,7 +4379,6 @@ function Toolbar({
     window.topbar.openProfile = () => handleToolOnClick(Profile);
     window.topbar.openHelpdesk = () => handleToolOnClick(Helpdesk);
     window.openHelpdesk = window.topbar.openHelpdesk; /* TODO: Remove when products have migrated to window.topbar.openHelpdesk */
-
     return () => {
       delete window.topbar.openProfile;
       delete window.topbar.openHelpdesk;
@@ -4424,30 +4444,31 @@ function Toolbar({
     }
   }, [toolbarFragmentRoute, toolStateCookie]);
   React__default.useEffect(() => {
-    if (toolbarFragmentRoute?.tool && (currentContent !== toolsRouteMap[toolbarFragmentRoute.tool] || !open)) {
+    if ((toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool) && (currentContent !== toolsRouteMap[toolbarFragmentRoute.tool] || !open)) {
       setToolAndOpenDrawer(toolsRouteMap[toolbarFragmentRoute.tool]);
     }
-  }, [setToolAndOpenDrawer, toolbarFragmentRoute?.tool, currentContent, open]);
+  }, [setToolAndOpenDrawer, toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool, currentContent, open]);
   const toggleDrawer = content => {
     if (!open) {
       return openDrawer(content);
     }
-    return currentContent?.name === content.name ? closeDrawer() : openDrawer(content);
+    return (currentContent === null || currentContent === void 0 ? void 0 : currentContent.name) === content.name ? closeDrawer() : openDrawer(content);
   };
   const {
     displayChatIcon,
     unreadIndicator
   } = useChatConfig({
-    disconnectJoltOnUnmount: storeData?.disconnectJoltOnUnmount,
+    disconnectJoltOnUnmount: storeData === null || storeData === void 0 ? void 0 : storeData.disconnectJoltOnUnmount,
     env,
     isEnabled: Boolean(userId),
-    joltPromise: storeData?.joltPromise,
+    joltPromise: storeData === null || storeData === void 0 ? void 0 : storeData.joltPromise,
     userId
   });
   const TOOLS = [Notifications, Tasks, displayChatIcon && Chat].filter(Boolean);
   const handleToolOnClick = tool => {
+    var _a;
     toggleDrawer(tool);
-    document.getElementById(`toolbarDrawer${tool.name}`)?.scrollTo({
+    (_a = document.getElementById(`toolbarDrawer${tool.name}`)) === null || _a === void 0 ? void 0 : _a.scrollTo({
       behavior: "smooth",
       top: 0
     });
@@ -4457,7 +4478,7 @@ function Toolbar({
       appName,
       closeDrawer,
       connectedPeople: connectedPeople || [],
-      hasConnectedPeople: storeData?.hasConnectedPeople || false,
+      hasConnectedPeople: (storeData === null || storeData === void 0 ? void 0 : storeData.hasConnectedPeople) || false,
       linkToProfile,
       loginSettingsUrl,
       logoutUrl,
@@ -4472,13 +4493,13 @@ function Toolbar({
     }
   };
   const onChangePath = useCallback(path => {
-    onChangeToolbarFragmentRoute(currentContent?.name.toLowerCase(), path);
-  }, [currentContent?.name]);
-  const routeIsForCurrentTool = toolbarFragmentRoute?.tool && toolsRouteMap[toolbarFragmentRoute.tool] === currentContent;
+    onChangeToolbarFragmentRoute(currentContent === null || currentContent === void 0 ? void 0 : currentContent.name.toLowerCase(), path);
+  }, [currentContent === null || currentContent === void 0 ? void 0 : currentContent.name]);
+  const routeIsForCurrentTool = (toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.tool) && toolsRouteMap[toolbarFragmentRoute.tool] === currentContent;
   const currentToolProps = {
     appName,
     closeDrawer,
-    currentPath: routeIsForCurrentTool ? toolbarFragmentRoute?.path : null,
+    currentPath: routeIsForCurrentTool ? toolbarFragmentRoute === null || toolbarFragmentRoute === void 0 ? void 0 : toolbarFragmentRoute.path : null,
     env,
     helpdeskConfig,
     isOpen: open,
@@ -4521,17 +4542,19 @@ function Toolbar({
       "aria-label": `Open ${tool.name} drawer`,
       "data-pendo": getDataPendoAttribute(tool.name),
       key: tool.name
-    }, !indicator && /*#__PURE__*/React__default.createElement(ToolbarButtonIcon, {
+    }, !indicator && (/*#__PURE__*/React__default.createElement(ToolbarButtonIcon, {
       path: tool.icons.staticPath
-    }), indicator && /*#__PURE__*/React__default.createElement(ToolbarButtonIcon, {
+    })), indicator && (/*#__PURE__*/React__default.createElement(ToolbarButtonIcon, {
       path: tool.icons.staticDotPath,
       dot: true
-    }));
+    })));
   })), /*#__PURE__*/React__default.createElement(DrawerWrap, {
     isVisible: open
-  }, mounted && /*#__PURE__*/React__default.createElement(Drawer, {
+  }, mounted && (/*#__PURE__*/React__default.createElement(Drawer, {
     id: `toolbarDrawer${currentContent.name}`
-  }, /*#__PURE__*/React__default.createElement(currentContent.component, currentToolProps)))));
+  }, /*#__PURE__*/React__default.createElement(currentContent.component, {
+    ...currentToolProps
+  }))))));
 }
 const ToolbarButton = ({
   children,
@@ -4540,12 +4563,13 @@ const ToolbarButton = ({
   onClick,
   ...restProps
 }) => {
-  return /*#__PURE__*/React__default.createElement("button", _extends({
+  return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: classnames(styles["toolbar-button"], className, current && styles["is-current"]),
     onClick: onClick,
-    "data-toolbar-link": "true"
-  }, restProps), children);
+    "data-toolbar-link": "true",
+    ...restProps
+  }, children);
 };
 function ToolbarButtonIcon({
   dot,
@@ -4562,12 +4586,12 @@ function ToolbarButtonIcon({
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: path
-  }), dot && /*#__PURE__*/React__default.createElement("circle", {
-    fill: "var(--t-icon-color-status-error-primary)",
+  }), dot && (/*#__PURE__*/React__default.createElement("circle", {
+    fill: "var(--t-icon-color-status-error)",
     cx: "24",
     cy: "8",
     r: "4"
-  }));
+  })));
 }
 function getDataPendoAttribute(toolName) {
   if (toolName === "Chat") {