@codecademy/brand 4.0.0-alpha.fdfb3ba880.0 → 4.0.0

package/dist/AppHeader/Search/consts.js

@@ -1,63 +1,40 @@
-//#region src/AppHeader/Search/consts.ts
-const searchPlaceholder = "What are you learning today?";
-const popularSearchTerms = [
-	"Artificial Intelligence",
-	"Data Science",
-	"Python",
-	"Web Development",
-	"HTML",
-	"Java"
-];
-let ContentType = /* @__PURE__ */ function(ContentType$1) {
-	ContentType$1["COURSE"] = "Course";
-	ContentType$1["SKILLPATH"] = "Skill Path";
-	ContentType$1["CAREERPATH"] = "Career Path";
-	ContentType$1["ARTICLE"] = "Article";
-	ContentType$1["DOC"] = "Doc";
-	return ContentType$1;
+export const searchPlaceholder = 'What are you learning today?';
+export const popularSearchTerms = ['Artificial Intelligence', 'Data Science', 'Python', 'Web Development', 'HTML', 'Java'];
+export let ContentType = /*#__PURE__*/function (ContentType) {
+  ContentType["COURSE"] = "Course";
+  ContentType["SKILLPATH"] = "Skill Path";
+  ContentType["CAREERPATH"] = "Career Path";
+  ContentType["ARTICLE"] = "Article";
+  ContentType["DOC"] = "Doc";
+  return ContentType;
 }({});
-const popularContent = [
-	{
-		title: "Learn Python 3",
-		href: "/learn/learn-python-3",
-		type: ContentType.COURSE,
-		slug: "learn-python-3",
-		contentId: "6c152bd262967f8c941c9707ed636bda"
-	},
-	{
-		title: "Business Intelligence Data Analyst",
-		href: "/learn/paths/bi-data-analyst",
-		type: ContentType.CAREERPATH,
-		slug: "bi-data-analyst",
-		contentId: "d03c7391224540ef8f850f8807a2b72a"
-	},
-	{
-		title: "Code Foundations",
-		href: "/learn/paths/code-foundations",
-		type: ContentType.SKILLPATH,
-		slug: "code-foundations",
-		contentId: "5b55e668646caa552f8e4d1d"
-	},
-	{
-		title: "What is Programming?",
-		href: "/article/what-is-programming",
-		type: ContentType.ARTICLE,
-		slug: "what-is-programming"
-	},
-	{
-		title: "HTML | Elements",
-		href: "/resources/docs/html",
-		type: ContentType.DOC,
-		slug: "html/concepts/elements"
-	}
-];
-const ALLOWED_HOSTS = [
-	"skillsoft.com",
-	"percipio.com",
-	"localhost",
-	"codecademy.com",
-	"squads-dev.com"
-];
-
-//#endregion
-export { ALLOWED_HOSTS, ContentType, popularContent, popularSearchTerms, searchPlaceholder };
+export const popularContent = [{
+  title: 'Learn Python 3',
+  href: '/learn/learn-python-3',
+  type: ContentType.COURSE,
+  slug: 'learn-python-3',
+  contentId: '6c152bd262967f8c941c9707ed636bda'
+}, {
+  title: 'Business Intelligence Data Analyst',
+  href: '/learn/paths/bi-data-analyst',
+  type: ContentType.CAREERPATH,
+  slug: 'bi-data-analyst',
+  contentId: 'd03c7391224540ef8f850f8807a2b72a'
+}, {
+  title: 'Code Foundations',
+  href: '/learn/paths/code-foundations',
+  type: ContentType.SKILLPATH,
+  slug: 'code-foundations',
+  contentId: '5b55e668646caa552f8e4d1d'
+}, {
+  title: 'What is Programming?',
+  href: '/article/what-is-programming',
+  type: ContentType.ARTICLE,
+  slug: 'what-is-programming'
+}, {
+  title: 'HTML | Elements',
+  href: '/resources/docs/html',
+  type: ContentType.DOC,
+  slug: 'html/concepts/elements'
+}];
+export const ALLOWED_HOSTS = ['skillsoft.com', 'percipio.com', 'localhost', 'codecademy.com', 'squads-dev.com'];

package/dist/AppHeader/Search/hooks/useUrlChangeDetection.d.ts

@@ -0,0 +1,5 @@
+export interface UrlChangeDetectionOptions {
+    onUrlChange: () => void;
+    getCurrentUrl?: () => string;
+}
+export declare const useUrlChangeDetection: ({ onUrlChange, getCurrentUrl, }: UrlChangeDetectionOptions) => void;

package/dist/AppHeader/Search/hooks/useUrlChangeDetection.js

@@ -1,16 +1,14 @@
-import { useEffect, useRef } from "react";
-
-//#region src/AppHeader/Search/hooks/useUrlChangeDetection.ts
-const useUrlChangeDetection = ({ onUrlChange, getCurrentUrl = () => window.location?.href }) => {
-	const currentUrl = getCurrentUrl();
-	const prevUrlRef = useRef(currentUrl);
-	useEffect(() => {
-		if (prevUrlRef.current !== currentUrl) {
-			onUrlChange();
-			prevUrlRef.current = currentUrl;
-		}
-	}, [currentUrl, onUrlChange]);
-};
-
-//#endregion
-export { useUrlChangeDetection };
+import { useEffect, useRef } from 'react';
+export const useUrlChangeDetection = ({
+  onUrlChange,
+  getCurrentUrl = () => window.location?.href
+}) => {
+  const currentUrl = getCurrentUrl();
+  const prevUrlRef = useRef(currentUrl);
+  useEffect(() => {
+    if (prevUrlRef.current !== currentUrl) {
+      onUrlChange();
+      prevUrlRef.current = currentUrl;
+    }
+  }, [currentUrl, onUrlChange]);
+};

package/dist/AppHeader/Search/safelyRedirect.d.ts

@@ -0,0 +1,5 @@
+/**
+ * fork of @mono/util-url/src/safelyRedirect.ts, since
+ * the build script doesn't resolve @mono dependencies
+ */
+export declare function safelyRedirect(url: string): void;

package/dist/AppHeader/Search/safelyRedirect.js

@@ -1,39 +1,49 @@
-import { ALLOWED_HOSTS } from "./consts.js";
-
-//#region src/AppHeader/Search/safelyRedirect.ts
 /**
-* fork of @mono/util-url/src/safelyRedirect.ts, since
-* the build script doesn't resolve @mono dependencies
-*/
-function safelyRedirect(url) {
-	try {
-		const sanitizedURL = sanitizeURL(url);
-		if (isRelativeUrl(sanitizedURL) || hasAllowedHost(sanitizedURL)) window.location.assign(sanitizedURL);
-		else throw new Error(`Invalid redirect url: ${sanitizedURL}`);
-	} catch (error) {}
+ * fork of @mono/util-url/src/safelyRedirect.ts, since
+ * the build script doesn't resolve @mono dependencies
+ */
+
+import { ALLOWED_HOSTS } from './consts';
+export function safelyRedirect(url) {
+  try {
+    const sanitizedURL = sanitizeURL(url);
+    if (isRelativeUrl(sanitizedURL) || hasAllowedHost(sanitizedURL)) {
+      window.location.assign(sanitizedURL);
+    } else {
+      throw new Error(`Invalid redirect url: ${sanitizedURL}`);
+    }
+  } catch (error) {}
 }
 function hasAllowedHost(url) {
-	const { hostname } = new URL(url);
-	return ALLOWED_HOSTS.some((host) => hostname === host || hostname.endsWith(`.${host}`));
+  const parsedUrl = new URL(url);
+  const {
+    hostname
+  } = parsedUrl;
+  return ALLOWED_HOSTS.some(host =>
+  // Exact match or exact subdomain match (e.g. sub.codecademy.com)
+  hostname === host || hostname.endsWith(`.${host}`));
 }
+
+// when a url is relative, the URL constructor will throw a TypeError;
 function isRelativeUrl(url) {
-	try {
-		return new URL(url) === void 0;
-	} catch (error) {
-		return true;
-	}
-}
-function sanitizeURL(url) {
-	const [path, params] = url.split("?", 2);
-	const sanitizedPath = encodeURI(decodeURI(path));
-	if (!params) return sanitizedPath;
-	const urlParams = new URLSearchParams(params);
-	urlParams.forEach((value, key) => {
-		const decoded = decodeURIComponent(value);
-		urlParams.set(key, decoded);
-	});
-	return `${sanitizedPath}?${urlParams.toString()}`;
+  try {
+    const parsedUrl = new URL(url);
+    return parsedUrl === undefined;
+  } catch (error) {
+    return true;
+  }
 }
 
-//#endregion
-export { safelyRedirect };
+// supports already encoded urls by decoding and re-encoding.
+// params are handled separately to allow for the encoding of / characters
+function sanitizeURL(url) {
+  const [path, params] = url.split('?', 2);
+  const sanitizedPath = encodeURI(decodeURI(path));
+  if (!params) return sanitizedPath;
+  const urlParams = new URLSearchParams(params);
+  urlParams.forEach((value, key) => {
+    const decoded = decodeURIComponent(value);
+    urlParams.set(key, decoded);
+  });
+  return `${sanitizedPath}?${urlParams.toString()}`;
+}

package/dist/AppHeader/Search/types.d.ts

@@ -1,16 +1,24 @@
-import "@codecademy/gamut";
-import "react";
-
-//#region src/AppHeader/Search/types.d.ts
+import { ButtonBaseElements } from '@codecademy/gamut';
+import { Dispatch, SetStateAction } from 'react';
 interface onTrackingClick {
-  onTrackingClick: (target: string, extraTrackingProps?: Record<string, string>) => void;
+    onTrackingClick: (target: string, extraTrackingProps?: Record<string, string>) => void;
 }
 interface OnSearch {
-  onSearch: (query: string, fromPrevSearch?: string) => void;
-  onSearchAsYouType?: (query: string, searchId: string, resultsCount: number, queryLoadTime: number) => void;
+    onSearch: (query: string, fromPrevSearch?: string) => void;
+    onSearchAsYouType?: (query: string, searchId: string, resultsCount: number, queryLoadTime: number) => void;
 }
-interface AppHeaderSearch extends OnSearch, onTrackingClick {
-  onEnable: () => void;
+interface ToggleSearch {
+    toggleSearch: () => void;
+    searchButtonRef: React.RefObject<ButtonBaseElements>;
 }
-//#endregion
-export { AppHeaderSearch };
+export interface AppHeaderSearch extends OnSearch, onTrackingClick {
+    onEnable: () => void;
+}
+export interface SearchButtonProps extends ToggleSearch {
+    isSearchVisible: boolean;
+    setIsSearchVisible: Dispatch<SetStateAction<boolean>>;
+    onSearchAsYouType?: OnSearch['onSearchAsYouType'];
+}
+export interface SearchPaneProps extends OnSearch, ToggleSearch, onTrackingClick {
+}
+export {};

package/dist/AppHeader/Search/types.js

@@ -0,0 +1 @@
+export {};

package/dist/AppHeader/Search/useHeaderSearch.d.ts

@@ -0,0 +1,6 @@
+import { AppHeaderSearch } from './types';
+export declare const useHeaderSearch: ({ onEnable, onSearch, onTrackingClick, onSearchAsYouType, }: AppHeaderSearch) => readonly [{
+    readonly id: "search";
+    readonly type: "render-element";
+    readonly renderElement: () => import("react/jsx-runtime").JSX.Element;
+}, import("react/jsx-runtime").JSX.Element];

package/dist/AppHeader/Search/useHeaderSearch.js

@@ -1,38 +1,40 @@
-import { AnimatedHeaderZone } from "../shared/elements.js";
-import { SearchButton } from "./SearchButton.js";
-import { SearchPane } from "./SearchPane.js";
-import { useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/AppHeader/Search/useHeaderSearch.tsx
-const useHeaderSearch = ({ onEnable, onSearch, onTrackingClick, onSearchAsYouType }) => {
-	const [isSearchVisible, setIsSearchVisible] = useState(false);
-	const searchButtonRef = useRef(null);
-	const toggleSearch = () => {
-		if (!isSearchVisible) onEnable();
-		setIsSearchVisible((oldIsSearchVisible) => !oldIsSearchVisible);
-	};
-	return [{
-		id: "search",
-		type: "render-element",
-		renderElement: () => /* @__PURE__ */ jsx(SearchButton, {
-			isSearchVisible,
-			setIsSearchVisible,
-			toggleSearch,
-			searchButtonRef,
-			onSearchAsYouType
-		})
-	}, /* @__PURE__ */ jsx(AnimatedHeaderZone, {
-		visible: isSearchVisible,
-		children: /* @__PURE__ */ jsx(SearchPane, {
-			onSearch,
-			onTrackingClick,
-			toggleSearch,
-			searchButtonRef,
-			onSearchAsYouType
-		})
-	}, "search-content")];
-};
-
-//#endregion
-export { useHeaderSearch };
+import { useRef, useState } from 'react';
+import { AnimatedHeaderZone } from '../shared';
+import { SearchButton } from './SearchButton';
+import { SearchPane } from './SearchPane';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const useHeaderSearch = ({
+  onEnable,
+  onSearch,
+  onTrackingClick,
+  onSearchAsYouType
+}) => {
+  const [isSearchVisible, setIsSearchVisible] = useState(false);
+  const searchButtonRef = useRef(null);
+  const toggleSearch = () => {
+    if (!isSearchVisible) {
+      onEnable();
+    }
+    setIsSearchVisible(oldIsSearchVisible => !oldIsSearchVisible);
+  };
+  return [{
+    id: 'search',
+    type: 'render-element',
+    renderElement: () => /*#__PURE__*/_jsx(SearchButton, {
+      isSearchVisible: isSearchVisible,
+      setIsSearchVisible: setIsSearchVisible,
+      toggleSearch: toggleSearch,
+      searchButtonRef: searchButtonRef,
+      onSearchAsYouType: onSearchAsYouType
+    })
+  }, /*#__PURE__*/_jsx(AnimatedHeaderZone, {
+    visible: isSearchVisible,
+    children: /*#__PURE__*/_jsx(SearchPane, {
+      onSearch: onSearch,
+      onTrackingClick: onTrackingClick,
+      toggleSearch: toggleSearch,
+      searchButtonRef: searchButtonRef,
+      onSearchAsYouType: onSearchAsYouType
+    })
+  }, "search-content")];
+};

package/dist/AppHeader/index.d.ts

@@ -1,29 +1,23 @@
-import { AppHeaderAction, FormattedAppHeaderItems } from "./shared/types.js";
-import { AppHeaderNotificationSettings } from "../Notifications/types.js";
-import { AppHeaderSearch } from "./Search/types.js";
-import "../index.js";
-import { ALLOWED_HOSTS, ContentType, popularContent, popularSearchTerms, searchPlaceholder } from "./Search/consts.js";
-import { Menu } from "@codecademy/gamut";
-import * as React$1 from "react";
-
-//#region src/AppHeader/index.d.ts
-type AppHeaderProps = AppHeaderAction & {
-  items: FormattedAppHeaderItems;
-  notifications?: AppHeaderNotificationSettings;
-  redirectParam?: string;
-  search: AppHeaderSearch;
-  /**
-   * used to conditonally hide the default search icon and notification bell
-   */
-  hideRightButtonDefaults?: boolean;
-  /**
-   * temporary solution to allow this to be used in LXStudio. Future Header epic here: GM-1024
-   */
-  isStandalone?: boolean;
-  isTeams?: boolean;
-  dropdownSpacing?: React$1.ComponentProps<typeof Menu>['spacing'];
-  type?: 'standard' | 'enterprise';
+import { Menu } from '@codecademy/gamut';
+import * as React from 'react';
+import { AppHeaderAction, AppHeaderSearch, FormattedAppHeaderItems } from '..';
+import { AppHeaderNotificationSettings } from '../Notifications/types';
+export * from './Search/consts';
+export type AppHeaderProps = AppHeaderAction & {
+    items: FormattedAppHeaderItems;
+    notifications?: AppHeaderNotificationSettings;
+    redirectParam?: string;
+    search: AppHeaderSearch;
+    /**
+     * used to conditonally hide the default search icon and notification bell
+     */
+    hideRightButtonDefaults?: boolean;
+    /**
+     * temporary solution to allow this to be used in LXStudio. Future Header epic here: GM-1024
+     */
+    isStandalone?: boolean;
+    isTeams?: boolean;
+    dropdownSpacing?: React.ComponentProps<typeof Menu>['spacing'];
+    type?: 'standard' | 'enterprise';
 };
-declare const AppHeader: React$1.FC<AppHeaderProps>;
-//#endregion
-export { ALLOWED_HOSTS, AppHeader, AppHeaderProps, ContentType, popularContent, popularSearchTerms, searchPlaceholder };
+export declare const AppHeader: React.FC<AppHeaderProps>;

package/dist/AppHeader/index.js

@@ -1,90 +1,98 @@
-import { HeaderHeightArea } from "../HeaderHeightArea/index.js";
-import { StyledAppBar, StyledNavBar, appHeaderMobileBreakpoint, appHeaderSpacing } from "./shared/elements.js";
-import { NotificationsDropdown } from "../Notifications/NotificationsDropdown.js";
-import { AppHeaderProvider } from "./AppHeaderElements/AppHeaderProvider/index.js";
-import { useHeaderNotifications } from "../Notifications/useHeaderNotifications.js";
-import { AppHeaderListItem } from "./AppHeaderElements/AppHeaderListItem/index.js";
-import { SearchTrackingProvider } from "./Search/SearchTrackingProvider/index.js";
-import { ALLOWED_HOSTS, ContentType, popularContent, popularSearchTerms, searchPlaceholder } from "./Search/consts.js";
-import { useHeaderSearch } from "./Search/useHeaderSearch.js";
-import { mapAppHeaderItemToElement } from "./shared/utils.js";
-import { LogErrorContext } from "../GlobalPage/index.js";
-import { useContext, useMemo, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/AppHeader/index.tsx
-const AppHeader = ({ action, hideRightButtonDefaults, items, notifications, redirectParam, search, isStandalone, isTeams, dropdownSpacing, type = "standard" }) => {
-	const menuContainerRef = useRef(null);
-	const [notificationsBell, notificationsView] = useHeaderNotifications({
-		settings: notifications,
-		Renderer: NotificationsDropdown
-	});
-	const [searchButton, searchPane] = useHeaderSearch({ ...search });
-	const right = useMemo(() => {
-		const defaultItems = hideRightButtonDefaults ? [] : [searchButton, ...notificationsBell ? [notificationsBell] : []];
-		if (isTeams) {
-			const teamsSpecificMenuItems = items.right.slice(0, -1);
-			const profile = items.right[items.right.length - 1];
-			return [
-				...teamsSpecificMenuItems,
-				...defaultItems,
-				profile
-			];
-		}
-		return [...defaultItems, ...items.right];
-	}, [
-		searchButton,
-		notificationsBell,
-		hideRightButtonDefaults,
-		items,
-		isTeams
-	]);
-	const { logError } = useContext(LogErrorContext);
-	const mapItemsToElement = (items$1, side) => {
-		if (items$1 && items$1.some((item) => !item)) try {
-			const itemTypesString = items$1.map((item) => {
-				if (!item) return "**UNDEFINED ITEM**";
-				return item.type;
-			}).join(", ");
-			logError?.(`Error: Found an undefined app header item on the ${side} side of the header.`, { message: `The current array of items includes the following header item types: ${itemTypesString}` });
-		} catch (e) {
-			logError?.(`Error while logging undefined header items: ${e}`);
-		}
-		return items$1.filter((item) => !!item).map((item, index) => {
-			const margin = appHeaderSpacing[type];
-			return /* @__PURE__ */ jsx(AppHeaderListItem, {
-				mr: margin,
-				ml: side === "right" && index === 0 ? "auto" : margin,
-				children: mapAppHeaderItemToElement({
-					action,
-					item,
-					isStandalone,
-					isTeams,
-					redirectParam,
-					spacing: dropdownSpacing
-				})
-			}, item.id);
-		});
-	};
-	return /* @__PURE__ */ jsx(HeaderHeightArea, {
-		display: {
-			_: "none",
-			[appHeaderMobileBreakpoint]: "block"
-		},
-		children: /* @__PURE__ */ jsx(AppHeaderProvider, { children: /* @__PURE__ */ jsxs(SearchTrackingProvider, { children: [
-			/* @__PURE__ */ jsx(StyledAppBar, {
-				"aria-label": "Main",
-				as: "nav",
-				children: /* @__PURE__ */ jsxs(StyledNavBar, {
-					ref: menuContainerRef,
-					children: [mapItemsToElement(items.left, "left"), mapItemsToElement(right, "right")]
-				})
-			}),
-			notificationsView,
-			searchPane
-		] }) })
-	});
-};
-
-//#endregion
-export { ALLOWED_HOSTS, AppHeader, ContentType, popularContent, popularSearchTerms, searchPlaceholder };
+import * as React from 'react';
+import { useContext, useMemo, useRef } from 'react';
+import { LogErrorContext } from '..';
+import { HeaderHeightArea } from '../HeaderHeightArea';
+import { NotificationsDropdown } from '../Notifications/NotificationsDropdown';
+import { useHeaderNotifications } from '../Notifications/useHeaderNotifications';
+import { AppHeaderListItem } from './AppHeaderElements/AppHeaderListItem';
+import { AppHeaderProvider } from './AppHeaderElements/AppHeaderProvider';
+import { SearchTrackingProvider } from './Search/SearchTrackingProvider';
+import { useHeaderSearch } from './Search/useHeaderSearch';
+import { appHeaderMobileBreakpoint, appHeaderSpacing, StyledAppBar, StyledNavBar } from './shared';
+import { mapAppHeaderItemToElement } from './shared/utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export * from './Search/consts';
+export const AppHeader = ({
+  action,
+  hideRightButtonDefaults,
+  items,
+  notifications,
+  redirectParam,
+  search,
+  isStandalone,
+  isTeams,
+  dropdownSpacing,
+  type = 'standard'
+}) => {
+  const menuContainerRef = useRef(null);
+  const [notificationsBell, notificationsView] = useHeaderNotifications({
+    settings: notifications,
+    Renderer: NotificationsDropdown
+  });
+  const [searchButton, searchPane] = useHeaderSearch({
+    ...search
+  });
+  const right = useMemo(() => {
+    const defaultItems = hideRightButtonDefaults ? [] : [searchButton, ...(notificationsBell ? [notificationsBell] : [])];
+    if (isTeams) {
+      const teamsSpecificMenuItems = items.right.slice(0, -1);
+      const profile = items.right[items.right.length - 1];
+      return [...teamsSpecificMenuItems, ...defaultItems, profile];
+    }
+    return [...defaultItems, ...items.right];
+  }, [searchButton, notificationsBell, hideRightButtonDefaults, items, isTeams]);
+  const {
+    logError
+  } = useContext(LogErrorContext);
+  const mapItemsToElement = (items, side) => {
+    // logging error to help with debugging
+    if (items && items.some(item => !item)) {
+      try {
+        const itemTypesString = items.map(item => {
+          if (!item) return '**UNDEFINED ITEM**';
+          return item.type;
+        }).join(', ');
+        logError?.(`Error: Found an undefined app header item on the ${side} side of the header.`, {
+          message: `The current array of items includes the following header item types: ${itemTypesString}`
+        });
+      } catch (e) {
+        logError?.(`Error while logging undefined header items: ${e}`);
+      }
+    }
+    return items
+    // preventative measure to handle a possibly undefined item from being rendered
+    .filter(item => !!item).map((item, index) => {
+      const margin = appHeaderSpacing[type];
+      return /*#__PURE__*/_jsx(AppHeaderListItem, {
+        mr: margin,
+        ml: side === 'right' && index === 0 ? 'auto' : margin,
+        children: mapAppHeaderItemToElement({
+          action,
+          item,
+          isStandalone,
+          isTeams,
+          redirectParam,
+          spacing: dropdownSpacing
+        })
+      }, item.id);
+    });
+  };
+  return /*#__PURE__*/_jsx(HeaderHeightArea, {
+    display: {
+      _: 'none',
+      [appHeaderMobileBreakpoint]: 'block'
+    },
+    children: /*#__PURE__*/_jsx(AppHeaderProvider, {
+      children: /*#__PURE__*/_jsxs(SearchTrackingProvider, {
+        children: [/*#__PURE__*/_jsx(StyledAppBar, {
+          "aria-label": "Main",
+          as: "nav",
+          children: /*#__PURE__*/_jsxs(StyledNavBar, {
+            ref: menuContainerRef,
+            children: [mapItemsToElement(items.left, 'left'), mapItemsToElement(right, 'right')]
+          })
+        }), notificationsView, searchPane]
+      })
+    })
+  });
+};