@codecademy/brand 4.0.0-alpha.14deb86052.0 → 4.0.0-alpha.65b0979c7d.0

package/dist/AppHeader/Search/SearchWorker/index.cjs

@@ -1,24 +0,0 @@
-const require_types = require('./types.cjs');
-
-//#region src/AppHeader/Search/SearchWorker/index.ts
-let workerPromise;
-const initErr = "Search worker not initialized";
-const searchWorker = {
-	init() {
-		if (!workerPromise) workerPromise = (async () => {
-			const { createSearchWorker } = await Promise.resolve().then(() => require("./worker.cjs"));
-			return createSearchWorker();
-		})();
-	},
-	async autocomplete(query) {
-		if (!workerPromise) throw new Error(initErr);
-		return (await workerPromise)(require_types.SearchAction.Autocomplete, query);
-	},
-	async searchAsYouType(query) {
-		if (!workerPromise) throw new Error(initErr);
-		return (await workerPromise)(require_types.SearchAction.SearchAsYouType, query);
-	}
-};
-
-//#endregion
-exports.searchWorker = searchWorker;

package/dist/AppHeader/Search/SearchWorker/index.d.cts

@@ -1,10 +0,0 @@
-import { AutocompleteSuggestion, SearchAsYouTypeResults } from "./types.cjs";
-
-//#region src/AppHeader/Search/SearchWorker/index.d.ts
-declare const searchWorker: {
-  init(): void;
-  autocomplete(query: string): Promise<AutocompleteSuggestion[]>;
-  searchAsYouType(query: string): Promise<SearchAsYouTypeResults>;
-};
-//#endregion
-export { searchWorker };

package/dist/AppHeader/Search/SearchWorker/src.cjs

@@ -1,159 +0,0 @@
-
-//#region src/AppHeader/Search/SearchWorker/src.ts
-function getPortalOrigin() {
-	const { origin } = window.location;
-	if ([
-		"tengu",
-		"tayra",
-		"staging",
-		"www"
-	].some((s) => `https://${s}.codecademy.com` === origin)) return origin;
-	if (origin.includes(".dev-eks.codecademy.com")) return origin;
-	if (origin.includes("localhost")) return origin.replace(/:\d{4}/, ":3100");
-	return "https://staging.codecademy.com";
-}
-function serializeSearchWorkerSrc() {
-	const BASE_URL = `${getPortalOrigin()}/api/portal/search`;
-	const fnAsStr = worker.toString().trim();
-	return fnAsStr.slice(fnAsStr.indexOf("{") + 1, -1).replaceAll("  ", "").replaceAll("{BASE_URL}", BASE_URL).replaceAll("{SEARCH}", window.location.search);
-}
-function worker() {
-	const preloadTitlesPromise = fetch("{BASE_URL}/autocomplete-preload{SEARCH}").then((f) => f.json()).then((rawTitles) => rawTitles.map(preparseTitle));
-	function preparseTitle({ value, popularity }) {
-		const lower = value.toLowerCase();
-		return {
-			title: value,
-			lower,
-			words: getWordSet(lower),
-			popularity
-		};
-	}
-	function preparseQuery(query) {
-		return {
-			query,
-			words: getWordSet(query)
-		};
-	}
-	const wordSplitters = /[ :-]/g;
-	function getWordSet(str) {
-		const words = str.split(wordSplitters).map((w) => w.trim()).filter(Boolean);
-		return new Set(words);
-	}
-	const handlers = {
-		autocomplete: autocompleteHandler,
-		"search-as-you-type": searchAsYouTypeHandler
-	};
-	onmessage = ({ data }) => {
-		const { query, action } = data;
-		const handler = handlers[action];
-		if (handler) handler(preparseQuery(query));
-	};
-	function getScoredTitle(q, t) {
-		const charScores = getCharScores(q, t);
-		const score = getTotalScore(q, t, charScores);
-		return {
-			title: t.title,
-			charScores,
-			score
-		};
-	}
-	const maxResults = 5;
-	function autocompleteHandler(q) {
-		preloadTitlesPromise.then((titles) => {
-			const topAutocompleteTitles = titles.map((t) => getScoredTitle(q, t)).filter((x) => x.score > 0).sort((a, b) => a.score > b.score ? -1 : 1).slice(0, maxResults).map((t) => ({
-				title: t.title,
-				segments: getHighlightSegments(t.title, t.charScores)
-			}));
-			postMessage({
-				query: q.query,
-				result: topAutocompleteTitles,
-				action: "autocomplete"
-			});
-		});
-	}
-	function searchAsYouTypeHandler(q) {
-		fetch("{BASE_URL}/search-as-you-type{SEARCH}", {
-			body: JSON.stringify({
-				query: q.query,
-				max: maxResults
-			}),
-			method: "POST"
-		}).then((f) => f.json()).then((searchAsYouTypeResults) => {
-			for (let i = 0; i < searchAsYouTypeResults.top.length; i++) {
-				const entry = searchAsYouTypeResults.top[i];
-				const charScores = getCharScores(q, preparseTitle({
-					value: entry.title,
-					popularity: 0
-				}));
-				entry.segments = getHighlightSegments(entry.title, charScores);
-				entry.key = q.query + ":" + entry.title;
-			}
-			postMessage({
-				query: q.query,
-				result: searchAsYouTypeResults,
-				action: "search-as-you-type"
-			});
-		});
-	}
-	const popularityStrength = .04;
-	function getTotalScore(q, t, charScores) {
-		let fromChars = 0;
-		for (let i = 0; i < charScores.length; i++) fromChars += charScores[i];
-		const fromPopularity = (t.popularity || 0) * popularityStrength;
-		let bonus = 0;
-		q.words.forEach((qw) => {
-			if (t.words.has(qw)) bonus += 100;
-		});
-		if (t.lower.startsWith(q.query)) bonus += 200;
-		else if (t.lower.startsWith(q.query.slice(0, 3))) bonus += 100;
-		if (t.lower === q.query) bonus += 100;
-		if (fromChars > 1 && Math.abs(t.lower.length - q.query.length) <= 3) bonus += 100;
-		return fromChars + (fromChars > 1 ? fromPopularity : 0) + bonus;
-	}
-	function getHighlightSegments(title, charScores) {
-		let currentSegment = null;
-		const segments = [];
-		const shouldHighlight = (i) => charScores[i] > 0;
-		const isDifferentFromPrev = (i) => shouldHighlight(i - 1) !== shouldHighlight(i);
-		for (let i = 0; i < title.length; i++) {
-			if (i === 0 || isDifferentFromPrev(i)) {
-				currentSegment = {
-					value: "",
-					highlight: shouldHighlight(i)
-				};
-				segments.push(currentSegment);
-			}
-			currentSegment.value += title[i];
-		}
-		return segments;
-	}
-	function getCharScores(q, t) {
-		const cmcsForTitleChars = Array(t.lower.length).fill(0).map(() => []);
-		for (let shift = 1 - q.query.length; shift < t.lower.length; shift++) {
-			let cmc = null;
-			const startOverlap = Math.max(shift, 0);
-			const endOverlap = Math.min(q.query.length + shift, t.lower.length);
-			for (let i = startOverlap; i < endOverlap; i++) if (q.query[i - shift] === t.lower[i] && t.lower[i] !== " ") {
-				if (!cmc) cmc = { value: "" };
-				cmc.value += q.query[i - shift];
-				cmcsForTitleChars[i].push(cmc);
-			} else if (cmc) cmc = null;
-		}
-		const avgQueryWordLength = q.query.length / q.words.size;
-		const minMatchLength = Math.ceil(avgQueryWordLength ** .65);
-		const charScores = [];
-		for (let i = 0; i < cmcsForTitleChars.length; i++) {
-			const cmcs = cmcsForTitleChars[i];
-			let score = 0;
-			for (let j = 0; j < cmcs.length; j++) {
-				const cmc = cmcs[j];
-				if (cmc.value.length >= minMatchLength || q.words.has(cmc.value)) score += cmc.value.length;
-			}
-			charScores.push(score);
-		}
-		return charScores;
-	}
-}
-
-//#endregion
-exports.serializeSearchWorkerSrc = serializeSearchWorkerSrc;

package/dist/AppHeader/Search/SearchWorker/types.cjs

@@ -1,10 +0,0 @@
-
-//#region src/AppHeader/Search/SearchWorker/types.ts
-let SearchAction = /* @__PURE__ */ function(SearchAction$1) {
-	SearchAction$1["Autocomplete"] = "autocomplete";
-	SearchAction$1["SearchAsYouType"] = "search-as-you-type";
-	return SearchAction$1;
-}({});
-
-//#endregion
-exports.SearchAction = SearchAction;

package/dist/AppHeader/Search/SearchWorker/types.d.cts

@@ -1,30 +0,0 @@
-//#region src/AppHeader/Search/SearchWorker/types.d.ts
-type HighlightSegment = {
-  value: string;
-  highlight: boolean;
-};
-type AutocompleteSuggestion = {
-  title: string;
-  segments: HighlightSegment[];
-};
-interface SearchResults {
-  query: string;
-  queryLoadTime: number;
-  searchId: string;
-  resultsCount: number;
-}
-interface BaseTopData {
-  type: string;
-  title: string;
-  slug: string;
-}
-interface SearchAsYouTypeResults extends SearchResults {
-  top: (BaseTopData & {
-    contentId?: string;
-    segments: HighlightSegment[];
-    urlPath: string;
-    key: string;
-  })[];
-}
-//#endregion
-export { AutocompleteSuggestion, SearchAsYouTypeResults };

package/dist/AppHeader/Search/SearchWorker/worker.cjs

@@ -1,26 +0,0 @@
-const require_PromiseLookup = require('./PromiseLookup.cjs');
-const require_src = require('./src.cjs');
-
-//#region src/AppHeader/Search/SearchWorker/worker.ts
-const mockWorker = () => ({
-	onmessage: () => null,
-	postMessage: () => null
-});
-function createSearchWorker() {
-	const src = require_src.serializeSearchWorkerSrc();
-	const blob = new Blob([src], { type: "text/javascript" });
-	const dataUrl = URL.createObjectURL?.(blob);
-	const w = typeof Worker === "undefined" ? mockWorker() : new Worker(dataUrl);
-	const results = new require_PromiseLookup.PromiseLookup({ onKeyInit: (action, query) => w.postMessage({
-		action,
-		query
-	}) });
-	w.onmessage = ({ data }) => {
-		const { query, result, action } = data;
-		results.resolve(action, query, result);
-	};
-	return (action, query) => results.get(action, query);
-}
-
-//#endregion
-exports.createSearchWorker = createSearchWorker;

package/dist/AppHeader/Search/consts.cjs

@@ -1,68 +0,0 @@
-
-//#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;
-}({});
-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
-exports.ALLOWED_HOSTS = ALLOWED_HOSTS;
-exports.ContentType = ContentType;
-exports.popularContent = popularContent;
-exports.popularSearchTerms = popularSearchTerms;
-exports.searchPlaceholder = searchPlaceholder;

package/dist/AppHeader/Search/consts.d.cts

@@ -1,26 +0,0 @@
-//#region src/AppHeader/Search/consts.d.ts
-declare const searchPlaceholder = "What are you learning today?";
-declare const popularSearchTerms: string[];
-declare enum ContentType {
-  COURSE = "Course",
-  SKILLPATH = "Skill Path",
-  CAREERPATH = "Career Path",
-  ARTICLE = "Article",
-  DOC = "Doc",
-}
-declare const popularContent: ({
-  title: string;
-  href: string;
-  type: ContentType;
-  slug: string;
-  contentId: string;
-} | {
-  title: string;
-  href: string;
-  type: ContentType;
-  slug: string;
-  contentId?: undefined;
-})[];
-declare const ALLOWED_HOSTS: string[];
-//#endregion
-export { ALLOWED_HOSTS, ContentType, popularContent, popularSearchTerms, searchPlaceholder };

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

@@ -1,17 +0,0 @@
-const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
-let react = require("react");
-
-//#region src/AppHeader/Search/hooks/useUrlChangeDetection.ts
-const useUrlChangeDetection = ({ onUrlChange, getCurrentUrl = () => window.location?.href }) => {
-	const currentUrl = getCurrentUrl();
-	const prevUrlRef = (0, react.useRef)(currentUrl);
-	(0, react.useEffect)(() => {
-		if (prevUrlRef.current !== currentUrl) {
-			onUrlChange();
-			prevUrlRef.current = currentUrl;
-		}
-	}, [currentUrl, onUrlChange]);
-};
-
-//#endregion
-exports.useUrlChangeDetection = useUrlChangeDetection;

package/dist/AppHeader/Search/safelyRedirect.cjs

@@ -1,39 +0,0 @@
-const require_consts = require('./consts.cjs');
-
-//#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) {}
-}
-function hasAllowedHost(url) {
-	const { hostname } = new URL(url);
-	return require_consts.ALLOWED_HOSTS.some((host) => hostname === host || hostname.endsWith(`.${host}`));
-}
-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()}`;
-}
-
-//#endregion
-exports.safelyRedirect = safelyRedirect;

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

@@ -1,14 +0,0 @@
-//#region src/AppHeader/Search/types.d.ts
-
-interface onTrackingClick {
-  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;
-}
-interface AppHeaderSearch extends OnSearch, onTrackingClick {
-  onEnable: () => void;
-}
-//#endregion
-export { AppHeaderSearch };

package/dist/AppHeader/Search/useHeaderSearch.cjs

@@ -1,39 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_elements = require('../shared/elements.cjs');
-const require_SearchButton = require('./SearchButton.cjs');
-const require_SearchPane = require('./SearchPane.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/AppHeader/Search/useHeaderSearch.tsx
-const useHeaderSearch = ({ onEnable, onSearch, onTrackingClick, onSearchAsYouType }) => {
-	const [isSearchVisible, setIsSearchVisible] = (0, react.useState)(false);
-	const searchButtonRef = (0, react.useRef)(null);
-	const toggleSearch = () => {
-		if (!isSearchVisible) onEnable();
-		setIsSearchVisible((oldIsSearchVisible) => !oldIsSearchVisible);
-	};
-	return [{
-		id: "search",
-		type: "render-element",
-		renderElement: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchButton.SearchButton, {
-			isSearchVisible,
-			setIsSearchVisible,
-			toggleSearch,
-			searchButtonRef,
-			onSearchAsYouType
-		})
-	}, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.AnimatedHeaderZone, {
-		visible: isSearchVisible,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchPane.SearchPane, {
-			onSearch,
-			onTrackingClick,
-			toggleSearch,
-			searchButtonRef,
-			onSearchAsYouType
-		})
-	}, "search-content")];
-};
-
-//#endregion
-exports.useHeaderSearch = useHeaderSearch;

package/dist/AppHeader/index.cjs

@@ -1,97 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_HeaderHeightArea_index = require('../HeaderHeightArea/index.cjs');
-const require_elements = require('./shared/elements.cjs');
-const require_NotificationsDropdown = require('../Notifications/NotificationsDropdown.cjs');
-const require_index = require('./AppHeaderElements/AppHeaderProvider/index.cjs');
-const require_useHeaderNotifications = require('../Notifications/useHeaderNotifications.cjs');
-const require_index$1 = require('./AppHeaderElements/AppHeaderListItem/index.cjs');
-const require_index$2 = require('./Search/SearchTrackingProvider/index.cjs');
-const require_consts = require('./Search/consts.cjs');
-const require_useHeaderSearch = require('./Search/useHeaderSearch.cjs');
-const require_utils = require('./shared/utils.cjs');
-const require_GlobalPage_index = require('../GlobalPage/index.cjs');
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/AppHeader/index.tsx
-const AppHeader = ({ action, hideRightButtonDefaults, items, notifications, redirectParam, search, isStandalone, isTeams, dropdownSpacing, type = "standard" }) => {
-	const menuContainerRef = (0, react.useRef)(null);
-	const [notificationsBell, notificationsView] = require_useHeaderNotifications.useHeaderNotifications({
-		settings: notifications,
-		Renderer: require_NotificationsDropdown.NotificationsDropdown
-	});
-	const [searchButton, searchPane] = require_useHeaderSearch.useHeaderSearch({ ...search });
-	const right = (0, react.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 } = (0, react.useContext)(require_GlobalPage_index.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 = require_elements.appHeaderSpacing[type];
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.AppHeaderListItem, {
-				mr: margin,
-				ml: side === "right" && index === 0 ? "auto" : margin,
-				children: require_utils.mapAppHeaderItemToElement({
-					action,
-					item,
-					isStandalone,
-					isTeams,
-					redirectParam,
-					spacing: dropdownSpacing
-				})
-			}, item.id);
-		});
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_HeaderHeightArea_index.HeaderHeightArea, {
-		display: {
-			_: "none",
-			[require_elements.appHeaderMobileBreakpoint]: "block"
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.AppHeaderProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$2.SearchTrackingProvider, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.StyledAppBar, {
-				"aria-label": "Main",
-				as: "nav",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_elements.StyledNavBar, {
-					ref: menuContainerRef,
-					children: [mapItemsToElement(items.left, "left"), mapItemsToElement(right, "right")]
-				})
-			}),
-			notificationsView,
-			searchPane
-		] }) })
-	});
-};
-
-//#endregion
-exports.ALLOWED_HOSTS = require_consts.ALLOWED_HOSTS;
-exports.AppHeader = AppHeader;
-exports.ContentType = require_consts.ContentType;
-exports.popularContent = require_consts.popularContent;
-exports.popularSearchTerms = require_consts.popularSearchTerms;
-exports.searchPlaceholder = require_consts.searchPlaceholder;

package/dist/AppHeader/index.d.cts

@@ -1,28 +0,0 @@
-import { AppHeaderAction, FormattedAppHeaderItems } from "./shared/types.cjs";
-import { AppHeaderNotificationSettings } from "../Notifications/types.cjs";
-import { AppHeaderSearch } from "./Search/types.cjs";
-import { ALLOWED_HOSTS, ContentType, popularContent, popularSearchTerms, searchPlaceholder } from "./Search/consts.cjs";
-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';
-};
-declare const AppHeader: React$1.FC<AppHeaderProps>;
-//#endregion
-export { ALLOWED_HOSTS, AppHeader, AppHeaderProps, ContentType, popularContent, popularSearchTerms, searchPlaceholder };