@planningcenter/topbar 10.20.0 → 10.20.1

package/dist/topbar.umd.js

@@ -33,9 +33,10 @@
     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.createElement("div", {
       className: styles$c["accessibility-toolbar"]
@@ -47,16 +48,6 @@
     }), 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;
   }
@@ -170,7 +161,8 @@
     });
   };
   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",
@@ -216,17 +208,17 @@
       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.createElement("svg", _extends({
+    return /*#__PURE__*/React.createElement("svg", {
       width: "24",
       height: "24",
       viewBox: "0 0 24 24",
       style: {
         display: "block",
         ...style
-      }
-    }, props, {
+      },
+      ...props,
       stroke: "none"
-    }), /*#__PURE__*/React.createElement("title", null, "bell"), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("mask", {
+    }, /*#__PURE__*/React.createElement("title", null, "bell"), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("mask", {
       id: "mask-no-dot"
     }, bellPath), /*#__PURE__*/React.createElement("mask", {
       id: "mask-dot"
@@ -253,14 +245,15 @@
     id = "default",
     style,
     ...nativeProps
-  }) => /*#__PURE__*/React.createElement("svg", _extends({
+  }) => (/*#__PURE__*/React.createElement("svg", {
     fill: "none",
     height: "123",
     style: {
       ...style
     },
-    width: "160"
-  }, nativeProps), /*#__PURE__*/React.createElement("g", {
+    width: "160",
+    ...nativeProps
+  }, /*#__PURE__*/React.createElement("g", {
     clipPath: `url(#clip-path-blank-state-${id})`
   }, /*#__PURE__*/React.createElement("path", {
     opacity: ".6",
@@ -292,70 +285,76 @@
   }, /*#__PURE__*/React.createElement("path", {
     fill: "#fff",
     d: "M0 0h160v122.063H0z"
-  }))));
+  })))));
   const DisclosureChevronIcon = ({
     className,
     style,
     ...nativeProps
-  }) => /*#__PURE__*/React.createElement("svg", _extends({
+  }) => (/*#__PURE__*/React.createElement("svg", {
     className: className,
     height: "16",
     viewBox: "0 0 16 16",
     width: "16",
-    style
-  }, nativeProps), /*#__PURE__*/React.createElement("title", null, "chevron"), /*#__PURE__*/React.createElement("polygon", {
+    ...{
+      style
+    },
+    ...nativeProps
+  }, /*#__PURE__*/React.createElement("title", null, "chevron"), /*#__PURE__*/React.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.createElement("svg", _extends({
+  }) => (/*#__PURE__*/React.createElement("svg", {
     height: size,
     style: {
       display: "block",
       ...style
     },
     viewBox: "0 0 16 16",
-    width: size
-  }, nativeProps), /*#__PURE__*/React.createElement("title", null, "exclamation triangle icon"), /*#__PURE__*/React.createElement("path", {
+    width: size,
+    ...nativeProps
+  }, /*#__PURE__*/React.createElement("title", null, "exclamation triangle icon"), /*#__PURE__*/React.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.createElement("svg", _extends({
+  }) => (/*#__PURE__*/React.createElement("svg", {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
     style: {
       display: "block",
       ...style
-    }
-  }, nativeProps), /*#__PURE__*/React.createElement("title", null, "search spyglass icon"), /*#__PURE__*/React.createElement("path", {
+    },
+    ...nativeProps
+  }, /*#__PURE__*/React.createElement("title", null, "search spyglass icon"), /*#__PURE__*/React.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.createElement("svg", _extends({
+  }) => (/*#__PURE__*/React.createElement("svg", {
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
     style: {
       display: "block",
       ...style
-    }
-  }, nativeProps), /*#__PURE__*/React.createElement("title", null, "close-x"), /*#__PURE__*/React.createElement("path", {
+    },
+    ...nativeProps
+  }, /*#__PURE__*/React.createElement("title", null, "close-x"), /*#__PURE__*/React.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"};
 
@@ -396,9 +395,6 @@
         announcements: props.initialAnnouncements
       };
     }
-    static defaultProps = {
-      formatter: formatter
-    };
     dismissAnnouncements(id) {
       this.setState(({
         announcements
@@ -421,6 +417,9 @@
       }));
     }
   }
+  Provider.defaultProps = {
+    formatter: formatter
+  };
   let StyledAnnouncement$1 = class StyledAnnouncement extends React.Component {
     render() {
       const {
@@ -429,10 +428,11 @@
       } = this.props;
       return /*#__PURE__*/React.createElement("div", {
         className: classnames(styles$b["announcement"], styles$b["announcement--platform"])
-      }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", _extends({
+      }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
         className: styles$b["announcement-content"],
-        style: style
-      }, platformProps)));
+        style: style,
+        ...platformProps
+      }));
     }
   };
   let StyleProvider$1 = class StyleProvider extends React.Component {
@@ -440,39 +440,42 @@
       const {
         ...platformProps
       } = this.props;
-      return /*#__PURE__*/React.createElement("div", platformProps);
+      return /*#__PURE__*/React.createElement("div", {
+        ...platformProps
+      });
     }
   };
   class PlatformAnnouncements extends React.Component {
-    static defaultProps = {
-      configuredFetch: defaultFetch,
-      renderItem: ({
-        announcement,
-        actions
-      }) => /*#__PURE__*/React.createElement(DissmissibleAnnouncement, {
-        key: announcement.id,
-        html: announcement.data.html,
-        onClick: () => actions.dismissAnnouncements(announcement.id)
-      })
-    };
     render() {
       return /*#__PURE__*/React.createElement(StyleProvider$1, null, /*#__PURE__*/React.createElement(Provider, {
         env: this.props.env,
         initialAnnouncements: this.props.data,
         configuredFetch: this.props.configuredFetch
-      }, (data, actions) => Boolean(data.announcements.length > 0) ? /*#__PURE__*/React.createElement("div", null, data.announcements.map(announcement => this.props.renderItem({
+      }, (data, actions) => Boolean(data.announcements.length > 0) ? (/*#__PURE__*/React.createElement("div", null, data.announcements.map(announcement => this.props.renderItem({
         actions,
         announcement
-      }))) : null));
+      })))) : null));
     }
   }
+  PlatformAnnouncements.defaultProps = {
+    configuredFetch: defaultFetch,
+    renderItem: ({
+      announcement,
+      actions
+    }) => (/*#__PURE__*/React.createElement(DissmissibleAnnouncement, {
+      key: announcement.id,
+      html: announcement.data.html,
+      onClick: () => actions.dismissAnnouncements(announcement.id)
+    }))
+  };
   function StyledDismissButton$1({
     ...props
   }) {
-    return /*#__PURE__*/React.createElement("button", _extends({
+    return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$b.dismiss
-    }, props), /*#__PURE__*/React.createElement(X, {
+      className: styles$b.dismiss,
+      ...props
+    }, /*#__PURE__*/React.createElement(X, {
       fill: "white",
       style: {
         height: 20,
@@ -509,7 +512,6 @@
 
   Attributes like `className`, `id`, `data-*`, and `aria-*` are all applied to the root element.
   */
-
   function ProductAnnouncement({
     html = "",
     onClick = _event => {
@@ -518,7 +520,9 @@
     ...props
   }) {
     const [dismissed, updateDismissed] = React.useState(false);
-    return dismissed || !html ? null : /*#__PURE__*/React.createElement(StyleProvider, props, /*#__PURE__*/React.createElement(StyledAnnouncement, null, /*#__PURE__*/React.createElement("span", {
+    return dismissed || !html ? null : (/*#__PURE__*/React.createElement(StyleProvider, {
+      ...props
+    }, /*#__PURE__*/React.createElement(StyledAnnouncement, null, /*#__PURE__*/React.createElement("span", {
       dangerouslySetInnerHTML: {
         __html: html
       }
@@ -527,14 +531,16 @@
         onClick(event);
         updateDismissed(true);
       }
-    })));
+    }))));
   }
   class StyleProvider extends React.Component {
     render() {
       const {
         ...platformProps
       } = this.props;
-      return /*#__PURE__*/React.createElement("div", platformProps);
+      return /*#__PURE__*/React.createElement("div", {
+        ...platformProps
+      });
     }
   }
   class StyledAnnouncement extends React.Component {
@@ -545,19 +551,21 @@
       } = this.props;
       return /*#__PURE__*/React.createElement("div", {
         className: styles$b["announcement"]
-      }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", _extends({
+      }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
         className: styles$b["announcement-content"],
-        style: style
-      }, platformProps)));
+        style: style,
+        ...platformProps
+      }));
     }
   }
   function StyledDismissButton({
     ...props
   }) {
-    return /*#__PURE__*/React.createElement("button", _extends({
+    return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$b.dismiss
-    }, props), /*#__PURE__*/React.createElement(X, {
+      className: styles$b.dismiss,
+      ...props
+    }, /*#__PURE__*/React.createElement(X, {
       fill: "white",
       style: {
         height: 20,
@@ -633,8 +641,9 @@
     }, [enabled, subscribeToJoltChannel]);
     React.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);
@@ -649,7 +658,6 @@
     }, [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) => {
@@ -659,7 +667,8 @@
     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();
@@ -708,7 +717,6 @@
       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) {
@@ -716,13 +724,11 @@
         return initialValue;
       }
     });
-
     // Reflect the state into localStorage as a side effect.
     const localStorageRepresentation = JSON.stringify(storedValue);
     React.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 {
@@ -813,22 +819,21 @@
     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 = React.useMemo(() => {
       return resolveJoltPromise({
@@ -880,8 +885,6 @@
         ...state,
         algoliaSearchAuth,
         colorMode,
-        colorModeLaunched,
-        colorModeSelectionEnabled,
         disconnectJoltOnUnmount: !providedJoltPromise,
         hasConnectedPeople,
         indicatorVisible: {
@@ -901,17 +904,16 @@
         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() {
@@ -927,9 +929,6 @@
         connectedPeople: []
       };
     }
-    static defaultProps = {
-      configuredFetch: defaultFetch
-    };
     fetch() {
       apiRequest(this.props.configuredFetch, `${pcoUrl(this.props.env)("api")}/login/v2/me/connected_people`).then(({
         json,
@@ -948,7 +947,8 @@
       }).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) {
@@ -965,7 +965,8 @@
       }).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() {
@@ -984,6 +985,9 @@
       });
     }
   }
+  ConnectedPeopleProvider.defaultProps = {
+    configuredFetch: defaultFetch
+  };
 
   class PointBreak extends React.Component {
     constructor(props) {
@@ -1016,9 +1020,6 @@
     }
   }
   class DisplaySwitch extends React.Component {
-    static defaultProps = {
-      smallBreakpoints: ["xs", "sm"]
-    };
     render() {
       return /*#__PURE__*/React.createElement(PointBreak, {
         render: breakpoint => {
@@ -1030,6 +1031,9 @@
       });
     }
   }
+  DisplaySwitch.defaultProps = {
+    smallBreakpoints: ["xs", "sm"]
+  };
 
   // TODO: Use Fragments when we React 16 is a baseline
   function Accounts$2() {
@@ -1489,14 +1493,14 @@
       }
     }, ColorAppSquircles[appName] ? (/*#__PURE__*/React.createElement(ColorAppSquircles[appName], {
       key: "key1"
-    })) : /*#__PURE__*/React.createElement("span", {
+    })) : (/*#__PURE__*/React.createElement("span", {
       key: "key1"
-    }), AppSymbols[appName] ? (/*#__PURE__*/React.createElement(AppSymbols[appName], {
+    })), AppSymbols[appName] ? (/*#__PURE__*/React.createElement(AppSymbols[appName], {
       color: "#fff",
       key: "key2"
-    })) : /*#__PURE__*/React.createElement("div", {
+    })) : (/*#__PURE__*/React.createElement("div", {
       key: "key3"
-    }, "appName not supported"));
+    }, "appName not supported")));
   }
 
   const SQUIRCLE_FILL_COLORS = {
@@ -1527,7 +1531,7 @@
     size = 24,
     ...platformProps
   }) {
-    return /*#__PURE__*/React.createElement("svg", _extends({
+    return /*#__PURE__*/React.createElement("svg", {
       "data-logo": "mono-app-icon",
       xmlns: "http://www.w3.org/2000/svg",
       width: size,
@@ -1538,19 +1542,20 @@
       style: {
         display: "block",
         ...style
-      }
-    }, platformProps), /*#__PURE__*/React.createElement("title", {
+      },
+      ...platformProps
+    }, /*#__PURE__*/React.createElement("title", {
       id: "title"
     }, "Planning Center ", appName, " App Icon"), /*#__PURE__*/React.createElement("desc", {
       id: "desc"
-    }, "An image symbolizing the Planning Center ", appName, " app."), appName === "Accounts" ? null : /*#__PURE__*/React.createElement(Squircle, {
+    }, "An image symbolizing the Planning Center ", appName, " app."), appName === "Accounts" ? null : (/*#__PURE__*/React.createElement(Squircle, {
       appName: appName.toLowerCase()
-    }), AppSymbols[appName] ? (/*#__PURE__*/React.createElement(AppSymbols[appName], {
-      color: appName === "Accounts" ? "var(--t-text-color-default-primary)" : "var(--t-fill-color-neutral-100)"
-    })) : /*#__PURE__*/React.createElement("div", null, "appName not supported"));
+    })), AppSymbols[appName] ? (/*#__PURE__*/React.createElement(AppSymbols[appName], {
+      color: appName === "Accounts" ? "var(--t-text-color)" : "var(--t-fill-color-neutral-100)"
+    })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported")));
   }
 
-  const fill = "var(--t-text-color-default-primary)";
+  const fill = "var(--t-text-color)";
   function Accounts({
     size = 20
   }) {
@@ -1730,7 +1735,7 @@
   }) {
     return MonoAppText[appName] ? (/*#__PURE__*/React.createElement(MonoAppText[appName], {
       size
-    })) : /*#__PURE__*/React.createElement("div", null, "appName not supported");
+    })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported"));
   }
 
   var styles$a = {"unbutton":"unbutton-lEbTR"};
@@ -1741,13 +1746,14 @@
     type = "button",
     ...nativeProps
   }) {
-    return /*#__PURE__*/React.createElement("button", _extends({
+    return /*#__PURE__*/React.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"};
@@ -1760,33 +1766,35 @@
     style = null,
     ...nativeProps
   }) => {
-    return /*#__PURE__*/React.createElement(Unbutton, _extends({
+    return /*#__PURE__*/React.createElement(Unbutton, {
       onClick: onClick,
       className: classnames(styles$9.button, {
         [styles$9["is-expanded"]]: expanded
       }),
       type: "button",
-      style: style
-    }, nativeProps), appName === "Accounts" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MonoAppIcon, {
+      style: style,
+      ...nativeProps
+    }, appName === "Accounts" ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MonoAppIcon, {
       appName: "Accounts",
       colors: colors
     }), /*#__PURE__*/React.createElement("div", {
       className: styles$9["button-accounts"]
-    }, "Account settings")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorAppIcon, {
+    }, "Account settings"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorAppIcon, {
       appName: appName.replace(/[\s-]/, "")
     }), /*#__PURE__*/React.createElement(MonoAppName, {
       appName: appName.replace(/[\s-]/, ""),
       key: "mono-app-name",
       size: 24
-    })), /*#__PURE__*/React.createElement(DisclosureChevronIcon, {
+    }))), /*#__PURE__*/React.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);
@@ -1810,14 +1818,15 @@
   }) => {
     const [entered, setEntered] = React.useState(false);
     const getBackgroundColor = () => active ? "var(--t-fill-color-neutral-060)" : entered ? "var(--t-fill-color-neutral-080)" : "transparent";
-    return /*#__PURE__*/React.createElement(C, _extends({
+    return /*#__PURE__*/React.createElement(C, {
       onMouseEnter: () => setEntered(true),
       onMouseLeave: () => setEntered(false),
       style: {
         ...style,
         backgroundColor: getBackgroundColor()
-      }
-    }, nativeProps));
+      },
+      ...nativeProps
+    });
   };
 
   class Outsider extends React.Component {
@@ -1849,9 +1858,10 @@
       } else {
         document.addEventListener("click", this.handleOutsideClick, true);
       }
-      return /*#__PURE__*/React.createElement("div", _extends({
-        ref: c => this.container = c
-      }, props));
+      return /*#__PURE__*/React.createElement("div", {
+        ref: c => this.container = c,
+        ...props
+      });
     }
   }
 
@@ -1862,17 +1872,19 @@
     component: C = "div",
     isVisible,
     ...nativeProps
-  }) => /*#__PURE__*/React.createElement(C, _extends({
+  }) => (/*#__PURE__*/React.createElement(C, {
     className: classnames(styles$7.popup, {
       [styles$7["is-visible"]]: isVisible
-    }, className)
-  }, nativeProps));
+    }, className),
+    ...nativeProps
+  }));
 
   const PopupRoot = ({
     ...nativeProps
-  }) => /*#__PURE__*/React.createElement("div", _extends({
-    className: styles$7["popup-root"]
-  }, nativeProps));
+  }) => (/*#__PURE__*/React.createElement("div", {
+    className: styles$7["popup-root"],
+    ...nativeProps
+  }));
 
   const AppsMenu = ({
     appName,
@@ -1911,14 +1923,14 @@
         margin: 0,
         padding: 0
       }
-    }, homeProduct && /*#__PURE__*/React.createElement(HoverableListItem, {
+    }, homeProduct && (/*#__PURE__*/React.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.createElement("div", {
       style: {
@@ -1930,7 +1942,7 @@
     })), /*#__PURE__*/React.createElement(MonoAppName, {
       appName: "Home",
       size: 18
-    })), restProducts.map(({
+    }))), restProducts.map(({
       name
     }, i) => {
       const isFirst = i === 0;
@@ -1958,14 +1970,14 @@
         appName: name.replace(/[\s-]/, ""),
         size: 18
       }));
-    }), accountsProduct && /*#__PURE__*/React.createElement(HoverableListItem, {
+    }), accountsProduct && (/*#__PURE__*/React.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"
       }
@@ -1979,15 +1991,15 @@
       width: 22,
       xmlns: "http://www.w3.org/2000/svg"
     }, /*#__PURE__*/React.createElement(Accounts$1, {
-      color: "var(--t-icon-color-default-secondary)",
+      color: "var(--t-icon-color-secondary)",
       key: "key2"
     })), /*#__PURE__*/React.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]));
@@ -2012,7 +2024,7 @@
           }) => ({
             active,
             name: key,
-            url: to ?? href
+            url: to !== null && to !== void 0 ? to : href
           }))
         };
       }
@@ -2034,7 +2046,7 @@
     style,
     ...nativeProps
   }) {
-    return /*#__PURE__*/React.createElement("nav", _extends({
+    return /*#__PURE__*/React.createElement("nav", {
       className: "simple",
       "data-pendo": "topbar",
       "aria-label": "topbar-navigation",
@@ -2044,8 +2056,9 @@
         display: "flex",
         height: "var(--topbar-height)",
         ...style
-      }
-    }, nativeProps), /*#__PURE__*/React.createElement("style", null, `
+      },
+      ...nativeProps
+    }, /*#__PURE__*/React.createElement("style", null, `
       @media only print {
         .simple {
           display: none !important;
@@ -2077,7 +2090,7 @@
       cleanup: !userMenuVisible,
       className: styles$5.popup,
       isVisible: userMenuVisible
-    }, /*#__PURE__*/React.createElement("div", null, hasConnectedPeople ? /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", null, hasConnectedPeople ? (/*#__PURE__*/React.createElement("div", {
       style: {
         alignItems: "center",
         backgroundColor: "var(--t-fill-color-neutral-060)",
@@ -2088,7 +2101,7 @@
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         ...IEFlex1,
-        color: "var(--t-text-color-default-secondary)",
+        color: "var(--t-text-color-secondary)",
         fontSize: "12px",
         textTransform: "uppercase",
         whiteSpace: "nowrap",
@@ -2110,12 +2123,12 @@
         e.preventDefault();
       },
       style: {
-        color: "var(--t-text-color-default-secondary)",
+        color: "var(--t-text-color-secondary)",
         marginLeft: "64px",
         textDecoration: "none",
         ...fontFamily
       }
-    }, "unlink"))) : /*#__PURE__*/React.createElement("noscript", null), /*#__PURE__*/React.createElement("style", null, `
+    }, "unlink")))) : (/*#__PURE__*/React.createElement("noscript", null)), /*#__PURE__*/React.createElement("style", null, `
                 .NotSmallTopbar__connected-people-list > *:first-child > * { border-top-width: 0 !important }
               `), /*#__PURE__*/React.createElement("ul", {
       className: "NotSmallTopbar__connected-people-list",
@@ -2127,7 +2140,7 @@
     }, connectedPeopleMenuFormatter(connectedPeople).map(({
       id,
       attributes: person
-    }) => /*#__PURE__*/React.createElement(HoverableListItem, {
+    }) => (/*#__PURE__*/React.createElement(HoverableListItem, {
       component: "li",
       key: id
     }, /*#__PURE__*/React.createElement("a", {
@@ -2139,8 +2152,8 @@
         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",
@@ -2151,7 +2164,7 @@
         whiteSpace: "nowrap",
         ...fontFamily
       }
-    }, person.organization_name))))), /*#__PURE__*/React.createElement(tapestryReact.ThemeProvider, null, hasConnectedPeople && /*#__PURE__*/React.createElement(tapestryReact.Divider, null), /*#__PURE__*/React.createElement("form", {
+    }, person.organization_name)))))), /*#__PURE__*/React.createElement(tapestryReact.ThemeProvider, null, hasConnectedPeople && /*#__PURE__*/React.createElement(tapestryReact.Divider, null), /*#__PURE__*/React.createElement("form", {
       method: "POST",
       action: logoutUrl
     }, /*#__PURE__*/React.createElement(tapestryReact.Button, {
@@ -2181,11 +2194,11 @@
       paddingVertical: 1.5,
       spacing: 4
     }, /*#__PURE__*/React.createElement(tapestryReact.Text, {
-      color: "var(--t-text-color-default-secondary)",
+      color: "var(--t-text-color-secondary)",
       lineHeight: "24px"
     }, "Log out"), /*#__PURE__*/React.createElement(tapestryReact.Icon, {
       name: "general.intoBox",
-      fill: "var(--t-icon-color-default-secondary)"
+      fill: "var(--t-icon-color-secondary)"
     })))))));
   };
 
@@ -2196,15 +2209,17 @@
     style = null,
     ...nativeProps
   }) => {
-    return /*#__PURE__*/React.createElement(C, _extends({
+    return /*#__PURE__*/React.createElement(C, {
       className: className,
       style: {
         ...fontFamily,
         ...style
-      }
-    }, innerRef && {
-      ref: innerRef
-    }, nativeProps));
+      },
+      ...(innerRef && {
+        ref: innerRef
+      }),
+      ...nativeProps
+    });
   };
 
   const UserMenuTrigger = ({
@@ -2232,9 +2247,9 @@
         setUserMenuVisible(visible => !visible);
         requestConnectedPeopleFetch();
       }
-    }, showOrgName && /*#__PURE__*/React.createElement("span", {
+    }, showOrgName && (/*#__PURE__*/React.createElement("span", {
       className: styles$5["trigger-orgname"]
-    }, orgName), /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)));
+    }, orgName)), /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)));
   };
 
   const NotSmallTopbar = ({
@@ -2327,9 +2342,10 @@
     colors,
     ...nativeProps
   }) => {
-    return /*#__PURE__*/React.createElement("a", _extends({
-      className: classnames(styles$6["route"], className, active && styles$6["is-active"])
-    }, nativeProps));
+    return /*#__PURE__*/React.createElement("a", {
+      className: classnames(styles$6["route"], className, active && styles$6["is-active"]),
+      ...nativeProps
+    });
   };
 
   var styles$4 = {"avatar":"avatar-tW-wn"};
@@ -2341,19 +2357,17 @@
     ...nativeProps
   }) {
     const url = incomingUrl || `${pcoUrl(env)("people")}/static/no_photo_thumbnail_gray.svg`;
-    return /*#__PURE__*/React.createElement("div", _extends({
+    return /*#__PURE__*/React.createElement("div", {
       className: styles$4.avatar,
       style: {
         backgroundImage: `url(${url})`,
         ...style
-      }
-    }, nativeProps));
+      },
+      ...nativeProps
+    });
   }
 
   class ClientStorage extends React.Component {
-    static defaultProps = {
-      method: "localStorage"
-    };
     update(value) {
       window[this.props.method].setItem(this.props.item, JSON.stringify(value));
       return this.forceUpdate();
@@ -2362,6 +2376,9 @@
       return /*#__PURE__*/React.createElement(React.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"};
 
@@ -2381,16 +2398,16 @@
       width: 24,
       xmlns: "http://www.w3.org/2000/svg"
     }, /*#__PURE__*/React.createElement(Accounts$1, {
-      color: "var(--t-icon-color-default-secondary",
+      color: "var(--t-icon-color-secondary",
       key: "key2"
     })), /*#__PURE__*/React.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.createElement("button", {
+  }) => (/*#__PURE__*/React.createElement("button", {
     "aria-label": "Close menu",
     type: "button",
     className: styles$3["appmenu-close-button"],
@@ -2402,7 +2419,7 @@
       width: `${size}px`
     },
     "aria-hidden": "true"
-  }));
+  })));
 
   const UserMenuAppLockup = ({
     appName: originalAppName
@@ -2426,10 +2443,13 @@
     }));
   };
   const SmallTopbar = ({
-    currentRouteComponent = props => /*#__PURE__*/React.createElement("span", props),
+    currentRouteComponent = props => (/*#__PURE__*/React.createElement("span", {
+      ...props
+    })),
     linkToProfile = true,
     ...props
   }) => {
+    var _a, _b;
     const [routesMenuVisible, setRoutesMenuVisible] = React.useState(false);
     const [productSwitcherVisible, setProductSwitcherVisible] = React.useState(false);
     const activeRoute = props.routes.filter(({
@@ -2454,7 +2474,7 @@
     }) => name !== "Home" && name !== "Accounts");
     React.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.createElement(StyledRoot, {
       style: {
         ...props.style
@@ -2470,11 +2490,11 @@
       }
     }, /*#__PURE__*/React.createElement(ColorAppIcon, {
       appName: props.appName.replace(/[\s-]/, "")
-    })), routesMenuVisible && /*#__PURE__*/React.createElement("div", {
+    })), routesMenuVisible && (/*#__PURE__*/React.createElement("div", {
       className: styles$3["routes"]
-    }, props.routes), /*#__PURE__*/React.createElement(ClientStorage, {
+    }, props.routes)), /*#__PURE__*/React.createElement(ClientStorage, {
       item: "Topbar:Small:Menus:Products:visibility",
-      render: () => /*#__PURE__*/React.createElement("div", {
+      render: () => (/*#__PURE__*/React.createElement("div", {
         className: styles$3["appmenu-layer"],
         style: {
           ...(productSwitcherVisible && {
@@ -2495,10 +2515,10 @@
         },
         className: styles$3["appmenu-container"]
       }, /*#__PURE__*/React.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.createElement(UserMenuAppLockup, {
         appName: homeProduct ? homeProduct.name : props.appName
       })), /*#__PURE__*/React.createElement("div", {
@@ -2508,7 +2528,7 @@
         className: styles$3["appmenu-list"]
       }, appsMenuFormatter(restProducts).map(({
         name
-      }) => /*#__PURE__*/React.createElement("li", {
+      }) => (/*#__PURE__*/React.createElement("li", {
         key: name,
         className: styles$3["appmenu-list-li"]
       }, /*#__PURE__*/React.createElement("a", {
@@ -2518,11 +2538,11 @@
         href: pcoUrl(props.env)("accounts") + getAppsSwitchProductPath(name)
       }, /*#__PURE__*/React.createElement(UserMenuAppLockup, {
         appName: name
-      })))), accountsProduct && /*#__PURE__*/React.createElement("li", {
+      }))))), accountsProduct && (/*#__PURE__*/React.createElement("li", {
         className: styles$3["appmenu-list-li"]
       }, /*#__PURE__*/React.createElement(AccountSettingsLink, {
         env: props.env
-      }))))))
+      }))))))))
     }), /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: classnames(styles$3["current-route"], {
@@ -2535,7 +2555,10 @@
     }, /*#__PURE__*/React.createElement(CurrentRouteComponent, null, capitalize(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React.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.createElement(Avatar, {
       env: props.env,
       url: props.userAvatarPath
@@ -2545,17 +2568,19 @@
     active,
     className,
     ...props
-  }) => /*#__PURE__*/React.createElement("a", _extends({
-    className: classnames(styles$3["route"], className, active && styles$3["is-active"])
-  }, props));
+  }) => (/*#__PURE__*/React.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}`);
@@ -2660,7 +2685,7 @@
         baseColor: "#2266f7",
         key: "primary"
       }),
-      separatorTertiary: "var(--t-border-color-default-base)"
+      separatorTertiary: "var(--t-border-color)"
     },
     icons: {
       churchCenter: churchCenter__namespace,
@@ -2688,9 +2713,10 @@
     className,
     ...props
   }) {
-    return /*#__PURE__*/React.createElement("div", _extends({
-      className: classnames(styles$2["drawer-wrap"], className, isVisible && styles$2["is-visible"])
-    }, props), children);
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles$2["drawer-wrap"], className, isVisible && styles$2["is-visible"]),
+      ...props
+    }, children);
   }
 
   function DrawerHeader({
@@ -2706,9 +2732,9 @@
       paddingTop: 1
     }, /*#__PURE__*/React.createElement(tapestryReact.Box, {
       flex: 1
-    }, children), closeDrawer && /*#__PURE__*/React.createElement(tapestryReact.Button, {
+    }, children), closeDrawer && (/*#__PURE__*/React.createElement(tapestryReact.Button, {
       icon: {
-        fill: "var(--t-icon-color-default-dim)",
+        fill: "var(--t-icon-color-dim)",
         name: "general.x",
         size: "md"
       },
@@ -2719,25 +2745,25 @@
         backgroundColor: "var(--t-fill-color-neutral-070)"
       },
       marginTop: 0.25
-    }));
+    })));
   }
 
   function DrawerHeading({
     children,
     ...props
   }) {
-    return /*#__PURE__*/React.createElement(tapestryReact.Heading, _extends({
-      color: "var(--t-text-color-default-headline)",
+    return /*#__PURE__*/React.createElement(tapestryReact.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))",
@@ -2758,22 +2784,20 @@
     const containerRef = React.useRef(null);
     const bottomEdgeRef = React.useRef(null);
     const topEdgeRef = React.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);
       }
     };
     React.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,
@@ -2785,15 +2809,14 @@
       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);
@@ -2815,7 +2838,7 @@
       edge: "top"
     }), overflowBottom && /*#__PURE__*/React.createElement(OverflowIndicator, {
       edge: "bottom"
-    }), /*#__PURE__*/React.createElement(tapestryReact.StackView, _extends({
+    }), /*#__PURE__*/React.createElement(tapestryReact.StackView, {
       basis: 2,
       grow: 1,
       innerRef: containerRef,
@@ -2824,8 +2847,9 @@
       shrink: 1,
       css: {
         overscrollBehavior: "contain"
-      }
-    }, props), /*#__PURE__*/React.createElement(tapestryReact.Box, {
+      },
+      ...props
+    }, /*#__PURE__*/React.createElement(tapestryReact.Box, {
       innerRef: topEdgeRef
     }), children, /*#__PURE__*/React.createElement(tapestryReact.Box, {
       innerRef: bottomEdgeRef
@@ -2834,15 +2858,16 @@
   const OverflowIndicator = ({
     edge
   }) => {
-    return /*#__PURE__*/React.createElement(tapestryReact.Box, _extends({
+    return /*#__PURE__*/React.createElement(tapestryReact.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 = ({
@@ -2873,7 +2898,7 @@
     }));
   };
 
-  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",
@@ -2888,8 +2913,7 @@
   let COLOR_MODE_INSTANCE_COUNTER = 0;
   function ColorModeSwitcher() {
     const {
-      colorMode,
-      colorModeLaunched
+      colorMode
     } = useStore();
     const updateStore = useUpdateStore();
     const [counter] = React.useState(() => COLOR_MODE_INSTANCE_COUNTER++);
@@ -2897,14 +2921,12 @@
       className: styles$1["color-mode-switcher"]
     }, /*#__PURE__*/React.createElement("legend", {
       className: styles$1["color-mode-switcher-label"]
-    }, "Appearance", " ", !colorModeLaunched && /*#__PURE__*/React.createElement("span", {
-      className: styles$1["color-mode-switcher-label-beta"]
-    }, "beta")), /*#__PURE__*/React.createElement("div", {
+    }, "Appearance", " "), /*#__PURE__*/React.createElement("div", {
       className: styles$1["color-mode-switcher-modes"]
     }, COLOR_MODES.map(({
       value,
       label
-    }) => /*#__PURE__*/React.createElement("label", {
+    }) => (/*#__PURE__*/React.createElement("label", {
       key: value
     }, /*#__PURE__*/React.createElement("input", {
       name: `color-mode-${counter}`,
@@ -2921,7 +2943,7 @@
       }
     }), /*#__PURE__*/React.createElement(ColorModeIcon, {
       mode: value
-    }), label))));
+    }), label)))));
   }
   function updateColorMode(mode) {
     return apiRequest(railsCsrfFetch, `${window.location.origin}/~api/people/v2/me/color_mode`, {
@@ -2975,8 +2997,7 @@
   }) {
     const {
       mfaConfigured,
-      name,
-      colorModeSelectionEnabled
+      name
     } = useStore();
     return /*#__PURE__*/React.createElement(tapestryReact.StackView, {
       axis: "vertical",
@@ -3000,17 +3021,17 @@
     }, /*#__PURE__*/React.createElement(DrawerHeading, {
       paddingTop: 0.5,
       lineHeight: 3.25
-    }, name), linkToProfile && /*#__PURE__*/React.createElement(tapestryReact.Link, {
+    }, name), linkToProfile && (/*#__PURE__*/React.createElement(tapestryReact.Link, {
       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.createElement(tapestryReact.Link, {
+    }, "My profile")), /*#__PURE__*/React.createElement(tapestryReact.Link, {
       to: loginSettingsUrl,
       style: {
-        color: "var(--t-icon-color-default-secondary)"
+        color: "var(--t-icon-color-secondary)"
       },
       size: 3
     }, "My login settings"), /*#__PURE__*/React.createElement(tapestryReact.StackView, {
@@ -3021,15 +3042,15 @@
     }, /*#__PURE__*/React.createElement(tapestryReact.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.createElement(tapestryReact.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.createElement(tapestryReact.Button, {
       icon: {
-        fill: "var(--t-icon-color-default-dim)",
+        fill: "var(--t-icon-color-dim)",
         name: "general.x",
         size: "md"
       },
@@ -3041,7 +3062,7 @@
       hover: {
         backgroundColor: "var(--t-fill-color-neutral-070)"
       }
-    })), colorModeSelectionEnabled && /*#__PURE__*/React.createElement(tapestryReact.GridView, {
+    })), /*#__PURE__*/React.createElement(tapestryReact.GridView, {
       padding: 2
     }, /*#__PURE__*/React.createElement(ColorModeSwitcher, null)), /*#__PURE__*/React.createElement("form", {
       method: "POST",
@@ -3071,8 +3092,8 @@
       size: 3
     }, "Log out"), /*#__PURE__*/React.createElement(tapestryReact.Icon, {
       name: "general.intoBox",
-      fill: "var(--t-icon-color-default-secondary)"
-    })))), hasConnectedPeople && /*#__PURE__*/React.createElement(tapestryReact.StackView, {
+      fill: "var(--t-icon-color-secondary)"
+    })))), hasConnectedPeople && (/*#__PURE__*/React.createElement(tapestryReact.StackView, {
       mediaQueries: {
         sm: {
           display: "none"
@@ -3093,7 +3114,7 @@
     }, connectedPeopleMenuFormatter(connectedPeople).map(({
       id,
       attributes: person
-    }) => /*#__PURE__*/React.createElement(tapestryReact.List.Item, {
+    }) => (/*#__PURE__*/React.createElement(tapestryReact.List.Item, {
       key: id,
       onClick: e => {
         requestClearAppsCache();
@@ -3105,7 +3126,7 @@
       padding: 2
     }, /*#__PURE__*/React.createElement(tapestryReact.Text, {
       truncate: true
-    }, person.organization_name))), /*#__PURE__*/React.createElement(tapestryReact.List.Item, {
+    }, person.organization_name)))), /*#__PURE__*/React.createElement(tapestryReact.List.Item, {
       onClick: e => {
         requestClearAppsCache();
         requestClearConnectedPeopleCache();
@@ -3117,16 +3138,16 @@
       underline: false
     }, /*#__PURE__*/React.createElement(tapestryReact.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
@@ -3224,7 +3245,7 @@
       hits,
       results
     } = reactInstantsearchCore.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] = [];
@@ -3249,7 +3270,7 @@
       onChange: e => setQuery(e.target.value),
       onSelect: selectedValue => handleSearchSelect(selectedValue, indexName),
       placement: "bottom-start"
-    }, !hits.length && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(tapestryReact.StackView, {
+    }, !hits.length && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(tapestryReact.StackView, {
       axis: "horizontal",
       alignment: "center",
       paddingHorizontal: 2,
@@ -3258,7 +3279,7 @@
       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.createElement(React.Fragment, {
         key: key
@@ -3277,11 +3298,11 @@
         size: 5,
         color: "foregroundSecondary",
         fontWeight: 500
-      }, key)), hits.map(hit => /*#__PURE__*/React.createElement(HitResult, {
+      }, key)), hits.map(hit => (/*#__PURE__*/React.createElement(HitResult, {
         key: hit.objectID,
         hit: hit,
         index: resultIndex++
-      })));
+      }))));
     })));
   };
 
@@ -3360,15 +3381,16 @@
     dark,
     style,
     ...props
-  }) => /*#__PURE__*/React.createElement("div", _extends({
+  }) => (/*#__PURE__*/React.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,
@@ -3418,7 +3440,7 @@
       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",
@@ -3455,14 +3477,14 @@
       }
     }, appName), /*#__PURE__*/React.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.createElement(tapestryReact.Dropdown, {
+    }, title)), !mobile && (/*#__PURE__*/React.createElement(tapestryReact.Dropdown, {
       icon: {
         name: "general.threeDots"
       },
@@ -3479,21 +3501,21 @@
         e.stopPropagation();
         onToggleRead();
       }
-    }, "Mark ", isRead ? "unread" : "as read"), notification.taskUrl ? /*#__PURE__*/React.createElement(tapestryReact.Dropdown.Item, {
+    }, "Mark ", isRead ? "unread" : "as read"), notification.taskUrl ? (/*#__PURE__*/React.createElement(tapestryReact.Dropdown.Item, {
       onClick: e => {
         e.preventDefault();
         e.stopPropagation();
         window.location.href = notification.taskUrl;
       }
-    }, "Open task") : /*#__PURE__*/React.createElement(tapestryReact.Dropdown.Item, {
+    }, "Open task")) : (/*#__PURE__*/React.createElement(tapestryReact.Dropdown.Item, {
       onClick: e => {
         e.preventDefault();
         e.stopPropagation();
         onCreateTask(notification);
       }
-    }, "Create task"))), /*#__PURE__*/React.createElement("div", {
+    }, "Create task"))))), /*#__PURE__*/React.createElement("div", {
       style: {
-        color: "var(--t-text-color-default-primary)",
+        color: "var(--t-text-color)",
         fontSize: "12px",
         paddingLeft: "12px",
         userSelect: "none"
@@ -3505,22 +3527,22 @@
     context,
     description,
     title = "No notifications"
-  }) => /*#__PURE__*/React.createElement(tapestryReact.StackView, {
+  }) => (/*#__PURE__*/React.createElement(tapestryReact.StackView, {
     alignment: "center",
     distribution: "center",
     padding: 4
   }, /*#__PURE__*/React.createElement(BlankStateIcon, {
     id: context
   }), /*#__PURE__*/React.createElement(tapestryReact.Heading, {
-    color: "var(--t-text-color-default-headline)",
+    color: "var(--t-text-color-headline)",
     fontWeight: 500,
     marginTop: 1,
     size: 3
   }, title), /*#__PURE__*/React.createElement(tapestryReact.Text, {
     align: "center",
-    color: "var(--t-text-color-default-primary)",
+    color: "var(--t-text-color)",
     size: 4
-  }, description));
+  }, description)));
 
   const notificationsOrganizer = notifications => {
     const {
@@ -3546,6 +3568,7 @@
     };
   };
   const buildNotificationFromApiResponse = (resp, json) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const findInIncluded = ({
       type,
       id
@@ -3554,24 +3577,23 @@
         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 = ({
@@ -3670,7 +3692,6 @@
       }).then(e => {
         if (!e.ok) {
           // TODO: show an alert or something?
-
           setIsLoading(false);
           setHasError(true);
           // Rollback any optimistic UI updates
@@ -3703,7 +3724,6 @@
     }, []);
     const handleToggleRead = async notification => {
       const action = notification.isRead ? "unread" : "read";
-
       // optimistic UI update
       setNotifications(notifications => notifications.map(n => notification.id == n.id ? {
         ...n,
@@ -3716,7 +3736,6 @@
     };
     const handleMarkAllAsRead = () => {
       const unreadIds = unread.map(n => n.id);
-
       // optimistic UI update
       setNotifications(notifications => notifications.map(n => unreadIds.includes(n.id) ? {
         ...n,
@@ -3741,23 +3760,25 @@
     onClick,
     title,
     ...props
-  }) => /*#__PURE__*/React.createElement(tapestryReact.StackView, _extends({
-    color: disabled ? "var(--t-text-color-default-disabled)" : "var(--t-text-color-interaction-primary)",
+  }) => (/*#__PURE__*/React.createElement(tapestryReact.StackView, {
+    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.createElement(tapestryReact.Heading, _extends({
-    color: "var(--t-text-color-default-headline)",
+  }) => (/*#__PURE__*/React.createElement(tapestryReact.Heading, {
+    color: "var(--t-text-color-headline)",
     lineHeight: 2,
     size: 5,
     textTransform: "uppercase",
-    userSelect: "none"
-  }, props));
+    userSelect: "none",
+    ...props
+  }));
   function NotificationsComponent({
     closeDrawer
   }) {
@@ -3801,17 +3822,17 @@
       alignment: "center",
       axis: "horizontal",
       spacing: 1
-    }, /*#__PURE__*/React.createElement(DrawerHeading, null, "Notifications"), isLoading && /*#__PURE__*/React.createElement(tapestryReact.Spinner, {
+    }, /*#__PURE__*/React.createElement(DrawerHeading, null, "Notifications"), isLoading && (/*#__PURE__*/React.createElement(tapestryReact.Spinner, {
       color: "var(--t-fill-color-neutral-030)",
       thickness: 2,
       trackColor: "var(--t-fill-color-neutral-080)"
-    }), hasError && /*#__PURE__*/React.createElement(ExclamationTriangle, {
+    })), hasError && (/*#__PURE__*/React.createElement(ExclamationTriangle, {
       fill: "hsl(8 60% 47%)",
       size: 16
-    })), read.length > 0 && /*#__PURE__*/React.createElement(SectionHeaderButton, {
+    }))), read.length > 0 && (/*#__PURE__*/React.createElement(SectionHeaderButton, {
       onClick: () => setShowRead(showRead => !showRead),
       title: `${showRead ? "Hide" : "Show"} read`
-    }))), /*#__PURE__*/React.createElement(ScrollContainer, null, /*#__PURE__*/React.createElement(tapestryReact.StackView, {
+    })))), /*#__PURE__*/React.createElement(ScrollContainer, null, /*#__PURE__*/React.createElement(tapestryReact.StackView, {
       alignment: "stretch",
       spacing: 2
     }, /*#__PURE__*/React.createElement("div", {
@@ -3823,25 +3844,26 @@
         margin: 0,
         padding: "4px 0"
       }
-    }, !isLoading && unread.length === 0 && /*#__PURE__*/React.createElement(NotificationsMenuBlankState, _extends({
+    }, !isLoading && unread.length === 0 && (/*#__PURE__*/React.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.createElement(tapestryReact.StackView, {
+      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.createElement(tapestryReact.StackView, {
       axis: "horizontal",
       alignment: "center",
       distribution: "space-between",
       padding: 2
-    }, /*#__PURE__*/React.createElement(SectionHeaderTitle, null, "Unread"), unread.length > 0 && /*#__PURE__*/React.createElement(SectionHeaderButton, {
+    }, /*#__PURE__*/React.createElement(SectionHeaderTitle, null, "Unread"), unread.length > 0 && (/*#__PURE__*/React.createElement(SectionHeaderButton, {
       onClick: () => handleMarkAllAsRead(),
       title: `Mark ${unread.length} as read`
-    })), /*#__PURE__*/React.createElement(reactTransitionGroup.TransitionGroup, {
+    })))), /*#__PURE__*/React.createElement(reactTransitionGroup.TransitionGroup, {
       exit: false
-    }, unread.map((notification, idx) => /*#__PURE__*/React.createElement(reactTransitionGroup.Transition, {
+    }, unread.map((notification, idx) => (/*#__PURE__*/React.createElement(reactTransitionGroup.Transition, {
       key: notification.id,
       timeout: 0
-    }, state => /*#__PURE__*/React.createElement("div", {
+    }, state => (/*#__PURE__*/React.createElement("div", {
       style: {
         ...defaultStyle,
         ...transitionStyles[state]
@@ -3853,15 +3875,17 @@
       onToggleRead: () => handleToggleRead(notification),
       onCreateTask: handleCreateTask,
       showBottomBorder: read.length > 0,
-      notification
-    }))))), read.length > 0 && showRead && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SectionHeaderTitle, {
+      ...{
+        notification
+      }
+    }))))))), read.length > 0 && showRead && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SectionHeaderTitle, {
       padding: 2
     }, "Read"), /*#__PURE__*/React.createElement(reactTransitionGroup.TransitionGroup, {
       exit: false
-    }, read.map(notification => /*#__PURE__*/React.createElement(reactTransitionGroup.Transition, {
+    }, read.map(notification => (/*#__PURE__*/React.createElement(reactTransitionGroup.Transition, {
       key: notification.id,
       timeout: 0
-    }, state => /*#__PURE__*/React.createElement("div", {
+    }, state => (/*#__PURE__*/React.createElement("div", {
       style: {
         ...defaultStyle,
         ...transitionStyles[state]
@@ -3875,8 +3899,10 @@
       onToggleRead: () => handleToggleRead(notification),
       onCreateTask: handleCreateTask,
       showBottomBorder: true,
-      notification
-    })))))))))));
+      ...{
+        notification
+      }
+    }))))))))))))));
   }
   const Notifications = {
     component: NotificationsComponent,
@@ -3936,18 +3962,20 @@
     onClick,
     ...rest
   }) {
-    return /*#__PURE__*/React.createElement(tapestryReact.StackView, _extends({
+    return /*#__PURE__*/React.createElement(tapestryReact.StackView, {
       as: "button",
       axis: "horizontal",
       distribution: "space-between",
       alignment: "center",
       paddingBottom: 0.75,
       onClick: () => onClick(),
-      spacing: 1
-    }, rest), children, badge && /*#__PURE__*/React.createElement(tapestryReact.Badge, _extends({
+      spacing: 1,
+      ...rest
+    }, children, badge && /*#__PURE__*/React.createElement(tapestryReact.Badge, {
       size: "sm",
-      fontWeight: "600"
-    }, badge)));
+      fontWeight: "600",
+      ...badge
+    }));
   }
   function TasksComponent({
     closeDrawer,
@@ -3969,7 +3997,7 @@
       });
     }, []);
     const pendoTrackEvent = React.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);
@@ -4024,7 +4052,7 @@
     } = 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,
@@ -4044,13 +4072,13 @@
       },
       joltPromise
     });
-    return joltIsV2 ? /*#__PURE__*/React.createElement(JoltEffectV2, {
+    return joltIsV2 ? (/*#__PURE__*/React.createElement(JoltEffectV2, {
       channel: joltChannel,
       onMessage: onMessage
-    }) : /*#__PURE__*/React.createElement(JoltEffectV1, {
+    })) : (/*#__PURE__*/React.createElement(JoltEffectV1, {
       channel: joltChannel,
       onMessage: onMessage
-    });
+    }));
   }
   function JoltEffectV2({
     channel,
@@ -4112,26 +4140,20 @@
   }
 
   // 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,
@@ -4145,7 +4167,6 @@
       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));
@@ -4289,8 +4310,9 @@
 
   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,
@@ -4335,7 +4357,7 @@
       userId
     } = {
       ...storeData,
-      ...(env === "development" ? _storeDataOverride ?? {} : {})
+      ...(env === "development" ? _storeDataOverride !== null && _storeDataOverride !== void 0 ? _storeDataOverride : {} : {})
     };
     const updateStore = useUpdateStore();
     React.useEffect(() => {
@@ -4346,7 +4368,6 @@
         document.body.style.overflow = "auto";
       }
     }, [open]);
-
     // Listen for external close requests from store
     React.useEffect(() => {
       const unsubscribe = store$1.subscribe(state => {
@@ -4369,7 +4390,6 @@
       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;
@@ -4435,30 +4455,31 @@
       }
     }, [toolbarFragmentRoute, toolStateCookie]);
     React.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
       });
@@ -4468,7 +4489,7 @@
         appName,
         closeDrawer,
         connectedPeople: connectedPeople || [],
-        hasConnectedPeople: storeData?.hasConnectedPeople || false,
+        hasConnectedPeople: (storeData === null || storeData === void 0 ? void 0 : storeData.hasConnectedPeople) || false,
         linkToProfile,
         loginSettingsUrl,
         logoutUrl,
@@ -4483,13 +4504,13 @@
       }
     };
     const onChangePath = React.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,
@@ -4532,17 +4553,19 @@
         "aria-label": `Open ${tool.name} drawer`,
         "data-pendo": getDataPendoAttribute(tool.name),
         key: tool.name
-      }, !indicator && /*#__PURE__*/React.createElement(ToolbarButtonIcon, {
+      }, !indicator && (/*#__PURE__*/React.createElement(ToolbarButtonIcon, {
         path: tool.icons.staticPath
-      }), indicator && /*#__PURE__*/React.createElement(ToolbarButtonIcon, {
+      })), indicator && (/*#__PURE__*/React.createElement(ToolbarButtonIcon, {
         path: tool.icons.staticDotPath,
         dot: true
-      }));
+      })));
     })), /*#__PURE__*/React.createElement(DrawerWrap, {
       isVisible: open
-    }, mounted && /*#__PURE__*/React.createElement(Drawer, {
+    }, mounted && (/*#__PURE__*/React.createElement(Drawer, {
       id: `toolbarDrawer${currentContent.name}`
-    }, /*#__PURE__*/React.createElement(currentContent.component, currentToolProps)))));
+    }, /*#__PURE__*/React.createElement(currentContent.component, {
+      ...currentToolProps
+    }))))));
   }
   const ToolbarButton = ({
     children,
@@ -4551,12 +4574,13 @@
     onClick,
     ...restProps
   }) => {
-    return /*#__PURE__*/React.createElement("button", _extends({
+    return /*#__PURE__*/React.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,
@@ -4573,12 +4597,12 @@
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: path
-    }), dot && /*#__PURE__*/React.createElement("circle", {
-      fill: "var(--t-icon-color-status-error-primary)",
+    }), dot && (/*#__PURE__*/React.createElement("circle", {
+      fill: "var(--t-icon-color-status-error)",
       cx: "24",
       cy: "8",
       r: "4"
-    }));
+    })));
   }
   function getDataPendoAttribute(toolName) {
     if (toolName === "Chat") {