@codecademy/brand 4.0.0-alpha.b1cfc89ee2.0 → 4.0.0-alpha.b5e5d575e.0

package/dist/AppHeader/index.cjs

@@ -1,93 +0,0 @@
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_index = require('../HeaderHeightArea/index.cjs');
-const require_elements = require('./shared/elements.cjs');
-const require_NotificationsDropdown = require('../Notifications/NotificationsDropdown.cjs');
-const require_index$1 = require('./AppHeaderElements/AppHeaderProvider/index.cjs');
-const require_useHeaderNotifications = require('../Notifications/useHeaderNotifications.cjs');
-const require_index$2 = require('./AppHeaderElements/AppHeaderListItem/index.cjs');
-const require_index$3 = 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_index$4 = 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_index$4.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$2.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_index.HeaderHeightArea, {
-		display: {
-			_: "none",
-			[require_elements.appHeaderMobileBreakpoint]: "block"
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.AppHeaderProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$3.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.AppHeader = AppHeader;
-//# sourceMappingURL=index.cjs.map

package/dist/AppHeader/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["AppHeader: React.FC<AppHeaderProps>","useHeaderNotifications","NotificationsDropdown","useHeaderSearch","LogErrorContext","items","appHeaderSpacing","AppHeaderListItem","mapAppHeaderItemToElement","HeaderHeightArea","appHeaderMobileBreakpoint","AppHeaderProvider","SearchTrackingProvider","StyledAppBar","StyledNavBar"],"sources":["../../src/AppHeader/index.tsx"],"sourcesContent":["import { Menu } from '@codecademy/gamut';\nimport * as React from 'react';\nimport { useContext, useMemo, useRef } from 'react';\n\nimport {\n  AppHeaderAction,\n  AppHeaderItem,\n  AppHeaderSearch,\n  FormattedAppHeaderItems,\n  LogErrorContext,\n} from '..';\nimport { HeaderHeightArea } from '../HeaderHeightArea';\nimport { NotificationsDropdown } from '../Notifications/NotificationsDropdown';\nimport { AppHeaderNotificationSettings } from '../Notifications/types';\nimport { useHeaderNotifications } from '../Notifications/useHeaderNotifications';\nimport { AppHeaderListItem } from './AppHeaderElements/AppHeaderListItem';\nimport { AppHeaderProvider } from './AppHeaderElements/AppHeaderProvider';\nimport { SearchTrackingProvider } from './Search/SearchTrackingProvider';\nimport { useHeaderSearch } from './Search/useHeaderSearch';\nimport {\n  appHeaderMobileBreakpoint,\n  appHeaderSpacing,\n  StyledAppBar,\n  StyledNavBar,\n} from './shared';\nimport { mapAppHeaderItemToElement } from './shared/utils';\n\nexport * from './Search/consts';\n\nexport type AppHeaderProps = AppHeaderAction & {\n  items: FormattedAppHeaderItems;\n  notifications?: AppHeaderNotificationSettings;\n  redirectParam?: string;\n  search: AppHeaderSearch;\n  /**\n   * used to conditonally hide the default search icon and notification bell\n   */\n  hideRightButtonDefaults?: boolean;\n  /**\n   * temporary solution to allow this to be used in LXStudio. Future Header epic here: GM-1024\n   */\n  isStandalone?: boolean;\n  isTeams?: boolean;\n  dropdownSpacing?: React.ComponentProps<typeof Menu>['spacing'];\n  type?: 'standard' | 'enterprise';\n};\n\nexport const AppHeader: React.FC<AppHeaderProps> = ({\n  action,\n  hideRightButtonDefaults,\n  items,\n  notifications,\n  redirectParam,\n  search,\n  isStandalone,\n  isTeams,\n  dropdownSpacing,\n  type = 'standard',\n}) => {\n  const menuContainerRef = useRef<HTMLUListElement>(null);\n\n  const [notificationsBell, notificationsView] = useHeaderNotifications({\n    settings: notifications,\n    Renderer: NotificationsDropdown,\n  });\n  const [searchButton, searchPane] = useHeaderSearch({\n    ...search,\n  });\n\n  const right = useMemo(() => {\n    const defaultItems = hideRightButtonDefaults\n      ? []\n      : [searchButton, ...(notificationsBell ? [notificationsBell] : [])];\n\n    if (isTeams) {\n      const teamsSpecificMenuItems = items.right.slice(0, -1);\n      const profile = items.right[items.right.length - 1];\n\n      return [...teamsSpecificMenuItems, ...defaultItems, profile];\n    }\n\n    return [...defaultItems, ...items.right];\n  }, [\n    searchButton,\n    notificationsBell,\n    hideRightButtonDefaults,\n    items,\n    isTeams,\n  ]);\n\n  const { logError } = useContext(LogErrorContext);\n\n  const mapItemsToElement = <T extends AppHeaderItem[]>(\n    items: T,\n    side: 'left' | 'right'\n  ) => {\n    // logging error to help with debugging\n    if (items && items.some((item) => !item)) {\n      try {\n        const itemTypesString = items\n          .map((item) => {\n            if (!item) return '**UNDEFINED ITEM**';\n            return item.type;\n          })\n          .join(', ');\n\n        logError?.(\n          `Error: Found an undefined app header item on the ${side} side of the header.`,\n          {\n            message: `The current array of items includes the following header item types: ${itemTypesString}`,\n          }\n        );\n      } catch (e) {\n        logError?.(`Error while logging undefined header items: ${e}`);\n      }\n    }\n\n    return (\n      items\n        // preventative measure to handle a possibly undefined item from being rendered\n        .filter((item) => !!item)\n        .map((item, index) => {\n          const margin = appHeaderSpacing[type];\n          return (\n            <AppHeaderListItem\n              key={item.id}\n              mr={margin}\n              ml={side === 'right' && index === 0 ? 'auto' : margin}\n            >\n              {mapAppHeaderItemToElement({\n                action,\n                item,\n                isStandalone,\n                isTeams,\n                redirectParam,\n                spacing: dropdownSpacing,\n              })}\n            </AppHeaderListItem>\n          );\n        })\n    );\n  };\n\n  return (\n    <HeaderHeightArea\n      display={{ _: 'none', [appHeaderMobileBreakpoint]: 'block' }}\n    >\n      <AppHeaderProvider>\n        <SearchTrackingProvider>\n          <StyledAppBar aria-label=\"Main\" as=\"nav\">\n            <StyledNavBar ref={menuContainerRef}>\n              {mapItemsToElement(items.left, 'left')}\n              {mapItemsToElement(right, 'right')}\n            </StyledNavBar>\n          </StyledAppBar>\n          {notificationsView}\n          {searchPane}\n        </SearchTrackingProvider>\n      </AppHeaderProvider>\n    </HeaderHeightArea>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA+CA,MAAaA,aAAuC,EAClD,QACA,yBACA,OACA,eACA,eACA,QACA,cACA,SACA,iBACA,OAAO,iBACH;CACJ,MAAM,qCAA4C,KAAK;CAEvD,MAAM,CAAC,mBAAmB,qBAAqBC,sDAAuB;EACpE,UAAU;EACV,UAAUC;EACX,CAAC;CACF,MAAM,CAAC,cAAc,cAAcC,wCAAgB,EACjD,GAAG,QACJ,CAAC;CAEF,MAAM,iCAAsB;EAC1B,MAAM,eAAe,0BACjB,EAAE,GACF,CAAC,cAAc,GAAI,oBAAoB,CAAC,kBAAkB,GAAG,EAAE,CAAE;AAErE,MAAI,SAAS;GACX,MAAM,yBAAyB,MAAM,MAAM,MAAM,GAAG,GAAG;GACvD,MAAM,UAAU,MAAM,MAAM,MAAM,MAAM,SAAS;AAEjD,UAAO;IAAC,GAAG;IAAwB,GAAG;IAAc;IAAQ;;AAG9D,SAAO,CAAC,GAAG,cAAc,GAAG,MAAM,MAAM;IACvC;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,mCAAwBC,gCAAgB;CAEhD,MAAM,qBACJ,SACA,SACG;AAEH,MAAIC,WAASA,QAAM,MAAM,SAAS,CAAC,KAAK,CACtC,KAAI;GACF,MAAM,kBAAkBA,QACrB,KAAK,SAAS;AACb,QAAI,CAAC,KAAM,QAAO;AAClB,WAAO,KAAK;KACZ,CACD,KAAK,KAAK;AAEb,cACE,oDAAoD,KAAK,uBACzD,EACE,SAAS,wEAAwE,mBAClF,CACF;WACM,GAAG;AACV,cAAW,+CAA+C,IAAI;;AAIlE,SACEA,QAEG,QAAQ,SAAS,CAAC,CAAC,KAAK,CACxB,KAAK,MAAM,UAAU;GACpB,MAAM,SAASC,kCAAiB;AAChC,UACE,2CAACC;IAEC,IAAI;IACJ,IAAI,SAAS,WAAW,UAAU,IAAI,SAAS;cAE9CC,wCAA0B;KACzB;KACA;KACA;KACA;KACA;KACA,SAAS;KACV,CAAC;MAXG,KAAK,GAYQ;IAEtB;;AAIR,QACE,2CAACC;EACC,SAAS;GAAE,GAAG;IAASC,6CAA4B;GAAS;YAE5D,2CAACC,+CACC,4CAACC;GACC,2CAACC;IAAa,cAAW;IAAO,IAAG;cACjC,4CAACC;KAAa,KAAK;gBAChB,kBAAkB,MAAM,MAAM,OAAO,EACrC,kBAAkB,OAAO,QAAQ;MACrB;KACF;GACd;GACA;MACsB,GACP;GACH"}

package/dist/AppHeader/index.d.cts

@@ -1,29 +0,0 @@
-import { AppHeaderNotificationSettings } from "../Notifications/types.cjs";
-import { ALLOWED_HOSTS, ContentType, popularContent, popularSearchTerms, searchPlaceholder } from "./Search/consts.cjs";
-import { AppHeaderAction, FormattedAppHeaderItems } from "./shared/types.cjs";
-import { AppHeaderSearch } from "./Search/types.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 { AppHeader, AppHeaderProps };
-//# sourceMappingURL=index.d.cts.map

package/dist/AppHeader/index.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/AppHeader/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;KA6BY,cAAA,GAAiB;SACpB;kBACS;EAFN,aAAA,CAAA,EAAA,MAAc;EAAG,MAAA,EAInB,eAJmB;EACpB;;;EAauC,uBAAA,CAAA,EAAA,OAAA;EAA5B;;AAIpB;;;oBAJoB,OAAA,CAAM,sBAAsB;;;cAInC,WAAW,OAAA,CAAM,GAAG"}

package/dist/AppHeader/index.d.mts

@@ -1,30 +0,0 @@
-import { AppHeaderNotificationSettings } from "../Notifications/types.mjs";
-import { ALLOWED_HOSTS, ContentType, popularContent, popularSearchTerms, searchPlaceholder } from "./Search/consts.mjs";
-import { AppHeaderAction, FormattedAppHeaderItems } from "./shared/types.mjs";
-import { AppHeaderSearch } from "./Search/types.mjs";
-import "../index.mjs";
-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 { AppHeader, AppHeaderProps };
-//# sourceMappingURL=index.d.mts.map

package/dist/AppHeader/index.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/AppHeader/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;KA6BY,cAAA,GAAiB;SACpB;kBACS;;EAFN,MAAA,EAIF,eAJgB;EAAG;;;EAInB,uBAAA,CAAA,EAAA,OAAA;EAUsC;;;EAInC,YAkHZ,CAAA,EAAA,OAAA;;oBAtHmB,OAAA,CAAM,sBAAsB;;;cAInC,WAAW,OAAA,CAAM,GAAG"}

package/dist/AppHeader/index.mjs

@@ -1,91 +0,0 @@
-import { HeaderHeightArea } from "../HeaderHeightArea/index.mjs";
-import { StyledAppBar, StyledNavBar, appHeaderMobileBreakpoint, appHeaderSpacing } from "./shared/elements.mjs";
-import { NotificationsDropdown } from "../Notifications/NotificationsDropdown.mjs";
-import { AppHeaderProvider } from "./AppHeaderElements/AppHeaderProvider/index.mjs";
-import { useHeaderNotifications } from "../Notifications/useHeaderNotifications.mjs";
-import { AppHeaderListItem } from "./AppHeaderElements/AppHeaderListItem/index.mjs";
-import { SearchTrackingProvider } from "./Search/SearchTrackingProvider/index.mjs";
-import { ALLOWED_HOSTS, ContentType, popularContent, popularSearchTerms, searchPlaceholder } from "./Search/consts.mjs";
-import { useHeaderSearch } from "./Search/useHeaderSearch.mjs";
-import { mapAppHeaderItemToElement } from "./shared/utils.mjs";
-import { LogErrorContext } from "../GlobalPage/index.mjs";
-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 { AppHeader };
-//# sourceMappingURL=index.mjs.map

package/dist/AppHeader/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":["AppHeader: React.FC<AppHeaderProps>","items"],"sources":["../../src/AppHeader/index.tsx"],"sourcesContent":["import { Menu } from '@codecademy/gamut';\nimport * as React from 'react';\nimport { useContext, useMemo, useRef } from 'react';\n\nimport {\n  AppHeaderAction,\n  AppHeaderItem,\n  AppHeaderSearch,\n  FormattedAppHeaderItems,\n  LogErrorContext,\n} from '..';\nimport { HeaderHeightArea } from '../HeaderHeightArea';\nimport { NotificationsDropdown } from '../Notifications/NotificationsDropdown';\nimport { AppHeaderNotificationSettings } from '../Notifications/types';\nimport { useHeaderNotifications } from '../Notifications/useHeaderNotifications';\nimport { AppHeaderListItem } from './AppHeaderElements/AppHeaderListItem';\nimport { AppHeaderProvider } from './AppHeaderElements/AppHeaderProvider';\nimport { SearchTrackingProvider } from './Search/SearchTrackingProvider';\nimport { useHeaderSearch } from './Search/useHeaderSearch';\nimport {\n  appHeaderMobileBreakpoint,\n  appHeaderSpacing,\n  StyledAppBar,\n  StyledNavBar,\n} from './shared';\nimport { mapAppHeaderItemToElement } from './shared/utils';\n\nexport * from './Search/consts';\n\nexport type AppHeaderProps = AppHeaderAction & {\n  items: FormattedAppHeaderItems;\n  notifications?: AppHeaderNotificationSettings;\n  redirectParam?: string;\n  search: AppHeaderSearch;\n  /**\n   * used to conditonally hide the default search icon and notification bell\n   */\n  hideRightButtonDefaults?: boolean;\n  /**\n   * temporary solution to allow this to be used in LXStudio. Future Header epic here: GM-1024\n   */\n  isStandalone?: boolean;\n  isTeams?: boolean;\n  dropdownSpacing?: React.ComponentProps<typeof Menu>['spacing'];\n  type?: 'standard' | 'enterprise';\n};\n\nexport const AppHeader: React.FC<AppHeaderProps> = ({\n  action,\n  hideRightButtonDefaults,\n  items,\n  notifications,\n  redirectParam,\n  search,\n  isStandalone,\n  isTeams,\n  dropdownSpacing,\n  type = 'standard',\n}) => {\n  const menuContainerRef = useRef<HTMLUListElement>(null);\n\n  const [notificationsBell, notificationsView] = useHeaderNotifications({\n    settings: notifications,\n    Renderer: NotificationsDropdown,\n  });\n  const [searchButton, searchPane] = useHeaderSearch({\n    ...search,\n  });\n\n  const right = useMemo(() => {\n    const defaultItems = hideRightButtonDefaults\n      ? []\n      : [searchButton, ...(notificationsBell ? [notificationsBell] : [])];\n\n    if (isTeams) {\n      const teamsSpecificMenuItems = items.right.slice(0, -1);\n      const profile = items.right[items.right.length - 1];\n\n      return [...teamsSpecificMenuItems, ...defaultItems, profile];\n    }\n\n    return [...defaultItems, ...items.right];\n  }, [\n    searchButton,\n    notificationsBell,\n    hideRightButtonDefaults,\n    items,\n    isTeams,\n  ]);\n\n  const { logError } = useContext(LogErrorContext);\n\n  const mapItemsToElement = <T extends AppHeaderItem[]>(\n    items: T,\n    side: 'left' | 'right'\n  ) => {\n    // logging error to help with debugging\n    if (items && items.some((item) => !item)) {\n      try {\n        const itemTypesString = items\n          .map((item) => {\n            if (!item) return '**UNDEFINED ITEM**';\n            return item.type;\n          })\n          .join(', ');\n\n        logError?.(\n          `Error: Found an undefined app header item on the ${side} side of the header.`,\n          {\n            message: `The current array of items includes the following header item types: ${itemTypesString}`,\n          }\n        );\n      } catch (e) {\n        logError?.(`Error while logging undefined header items: ${e}`);\n      }\n    }\n\n    return (\n      items\n        // preventative measure to handle a possibly undefined item from being rendered\n        .filter((item) => !!item)\n        .map((item, index) => {\n          const margin = appHeaderSpacing[type];\n          return (\n            <AppHeaderListItem\n              key={item.id}\n              mr={margin}\n              ml={side === 'right' && index === 0 ? 'auto' : margin}\n            >\n              {mapAppHeaderItemToElement({\n                action,\n                item,\n                isStandalone,\n                isTeams,\n                redirectParam,\n                spacing: dropdownSpacing,\n              })}\n            </AppHeaderListItem>\n          );\n        })\n    );\n  };\n\n  return (\n    <HeaderHeightArea\n      display={{ _: 'none', [appHeaderMobileBreakpoint]: 'block' }}\n    >\n      <AppHeaderProvider>\n        <SearchTrackingProvider>\n          <StyledAppBar aria-label=\"Main\" as=\"nav\">\n            <StyledNavBar ref={menuContainerRef}>\n              {mapItemsToElement(items.left, 'left')}\n              {mapItemsToElement(right, 'right')}\n            </StyledNavBar>\n          </StyledAppBar>\n          {notificationsView}\n          {searchPane}\n        </SearchTrackingProvider>\n      </AppHeaderProvider>\n    </HeaderHeightArea>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AA+CA,MAAaA,aAAuC,EAClD,QACA,yBACA,OACA,eACA,eACA,QACA,cACA,SACA,iBACA,OAAO,iBACH;CACJ,MAAM,mBAAmB,OAAyB,KAAK;CAEvD,MAAM,CAAC,mBAAmB,qBAAqB,uBAAuB;EACpE,UAAU;EACV,UAAU;EACX,CAAC;CACF,MAAM,CAAC,cAAc,cAAc,gBAAgB,EACjD,GAAG,QACJ,CAAC;CAEF,MAAM,QAAQ,cAAc;EAC1B,MAAM,eAAe,0BACjB,EAAE,GACF,CAAC,cAAc,GAAI,oBAAoB,CAAC,kBAAkB,GAAG,EAAE,CAAE;AAErE,MAAI,SAAS;GACX,MAAM,yBAAyB,MAAM,MAAM,MAAM,GAAG,GAAG;GACvD,MAAM,UAAU,MAAM,MAAM,MAAM,MAAM,SAAS;AAEjD,UAAO;IAAC,GAAG;IAAwB,GAAG;IAAc;IAAQ;;AAG9D,SAAO,CAAC,GAAG,cAAc,GAAG,MAAM,MAAM;IACvC;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,aAAa,WAAW,gBAAgB;CAEhD,MAAM,qBACJ,SACA,SACG;AAEH,MAAIC,WAASA,QAAM,MAAM,SAAS,CAAC,KAAK,CACtC,KAAI;GACF,MAAM,kBAAkBA,QACrB,KAAK,SAAS;AACb,QAAI,CAAC,KAAM,QAAO;AAClB,WAAO,KAAK;KACZ,CACD,KAAK,KAAK;AAEb,cACE,oDAAoD,KAAK,uBACzD,EACE,SAAS,wEAAwE,mBAClF,CACF;WACM,GAAG;AACV,cAAW,+CAA+C,IAAI;;AAIlE,SACEA,QAEG,QAAQ,SAAS,CAAC,CAAC,KAAK,CACxB,KAAK,MAAM,UAAU;GACpB,MAAM,SAAS,iBAAiB;AAChC,UACE,oBAAC;IAEC,IAAI;IACJ,IAAI,SAAS,WAAW,UAAU,IAAI,SAAS;cAE9C,0BAA0B;KACzB;KACA;KACA;KACA;KACA;KACA,SAAS;KACV,CAAC;MAXG,KAAK,GAYQ;IAEtB;;AAIR,QACE,oBAAC;EACC,SAAS;GAAE,GAAG;IAAS,4BAA4B;GAAS;YAE5D,oBAAC,+BACC,qBAAC;GACC,oBAAC;IAAa,cAAW;IAAO,IAAG;cACjC,qBAAC;KAAa,KAAK;gBAChB,kBAAkB,MAAM,MAAM,OAAO,EACrC,kBAAkB,OAAO,QAAQ;MACrB;KACF;GACd;GACA;MACsB,GACP;GACH"}

package/dist/AppHeader/shared/elements.cjs

@@ -1,173 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_index = require('../../AppBar/index.cjs');
-const require_elements = require('../AppHeaderElements/AppHeaderSection/elements.cjs');
-let _codecademy_gamut = require("@codecademy/gamut");
-let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
-let _emotion_styled = require("@emotion/styled");
-_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
-let react = require("react");
-react = require_rolldown_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
-let framer_motion = require("framer-motion");
-
-//#region src/AppHeader/shared/elements.tsx
-const appHeaderMobileBreakpoint = "lg";
-const animatedPopoverVariants = {
-	enter: {
-		opacity: 1,
-		transition: { duration: .2 }
-	},
-	exit: {
-		opacity: 0,
-		transition: { duration: .2 }
-	}
-};
-const AnimatedHeaderZone = ({ children, visible }) => {
-	return visible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-		animate: "enter",
-		exit: "exit",
-		initial: "exit",
-		variants: animatedPopoverVariants,
-		children
-	}) }) : null;
-};
-const DropdownAnchor = (0, _emotion_styled.default)(_codecademy_gamut.Anchor)((0, _codecademy_gamut_styles.css)({
-	alignItems: `center`,
-	display: `flex`,
-	padding: `0.5rem 0`,
-	textAlign: `center`,
-	whiteSpace: `nowrap`,
-	"&:focus::before": { opacity: 1 }
-}));
-const dropdownStates = (0, _codecademy_gamut_styles.states)({ open: { transform: `rotate(-180deg)` } });
-const DropdownIcon = (0, _emotion_styled.default)(_codecademy_gamut_icons.ArrowChevronDownFilledIcon)((0, _codecademy_gamut_styles.css)({
-	marginLeft: (0, _codecademy_gamut_styles.pxRem)(5),
-	transition: `transform 0.35s ease-out`,
-	transformOrigin: `center ${(0, _codecademy_gamut_styles.pxRem)(5)}`
-}), dropdownStates);
-const StyledText = (0, _emotion_styled.default)(_codecademy_gamut.Text)((0, _codecademy_gamut_styles.css)({ "&::after": {
-	display: `block`,
-	content: `attr(title)`,
-	fontWeight: `bold`,
-	height: `1px`,
-	color: `transparent`,
-	overflow: `hidden`,
-	visibility: `hidden`
-} }));
-const getDropdownAnimations = ({ isOpen, prefersReducedMotion }) => {
-	const openState = {
-		transform: "translateY(0)",
-		opacity: 1
-	};
-	const closedState = {
-		transform: prefersReducedMotion ? "none" : "translateY(-8px)",
-		opacity: 0
-	};
-	return {
-		animate: isOpen ? openState : closedState,
-		initial: closedState,
-		transition: {
-			duration: .15,
-			ease: "easeOut"
-		}
-	};
-};
-const BaseDropdown = (0, _emotion_styled.default)(framer_motion.motion.create("div"))(() => (0, _codecademy_gamut_styles.css)({ position: `absolute` }));
-const MegaMenuBackdrop = (0, _emotion_styled.default)(framer_motion.motion.create("div"))((0, _codecademy_gamut_styles.css)({
-	position: "relative",
-	zIndex: -1
-}));
-const AnimatedMegaMenuDropdown = react.forwardRef(({ isOpen, ...props }, ref) => {
-	const [isAnimating, setIsAnimating] = react.useState(false);
-	const prefersReducedMotion = (0, framer_motion.useReducedMotion)();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MegaMenuBackdrop, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		transition: {
-			duration: .15,
-			ease: "easeOut"
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_elements.GradientBackground, {
-			position: "fixed",
-			top: "0",
-			left: "0",
-			right: "0",
-			bottom: "0"
-		}, "dropdown-backdrop")
-	}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-		display: isOpen || isAnimating ? "block" : "none",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseDropdown, {
-			ref,
-			...getDropdownAnimations({
-				isOpen,
-				prefersReducedMotion
-			}),
-			...props,
-			onAnimationComplete: (anim) => {
-				if (!isOpen) setIsAnimating(false);
-				props.onAnimationComplete?.(anim);
-			},
-			onAnimationStart: (anim) => {
-				setIsAnimating(true);
-				props.onAnimationStart?.(anim);
-			}
-		}, "dropdown-content")
-	})] });
-});
-const AnimatedSimpleDropdown = ({ isOpen, ...props }) => {
-	const [isAnimating, setIsAnimating] = react.useState(false);
-	const prefersReducedMotion = (0, framer_motion.useReducedMotion)();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
-		display: isOpen || isAnimating ? "block" : "none",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseDropdown, {
-			...getDropdownAnimations({
-				isOpen,
-				prefersReducedMotion
-			}),
-			...props,
-			onAnimationComplete: (anim) => {
-				if (!isOpen) setIsAnimating(false);
-				props.onAnimationComplete?.(anim);
-			},
-			onAnimationStart: (anim) => {
-				setIsAnimating(true);
-				props.onAnimationStart?.(anim);
-			}
-		})
-	});
-};
-const LayoutGridAntiAliased = (0, _emotion_styled.default)(_codecademy_gamut.LayoutGrid)`
-  -webkit-font-smoothing: antialiased;
-`;
-const DescriptionSectionContainer = (0, _emotion_styled.default)(_codecademy_gamut.FlexBox)((0, _codecademy_gamut_styles.css)({ "&:focus-visible": {
-	color: "text",
-	outline: "1px solid currentColor !important"
-} }));
-const StyledAppBar = (0, _emotion_styled.default)(require_index.AppBar)((0, _codecademy_gamut_styles.css)({ boxShadow: `none` }));
-const StyledNavBar = _emotion_styled.default.ul((0, _codecademy_gamut_styles.css)({
-	alignItems: "stretch",
-	display: `flex`,
-	padding: 0,
-	listStyle: `none`,
-	margin: 0,
-	width: `100%`
-}));
-const appHeaderSpacing = {
-	standard: 8,
-	enterprise: 12
-};
-
-//#endregion
-exports.AnimatedHeaderZone = AnimatedHeaderZone;
-exports.AnimatedMegaMenuDropdown = AnimatedMegaMenuDropdown;
-exports.AnimatedSimpleDropdown = AnimatedSimpleDropdown;
-exports.DropdownAnchor = DropdownAnchor;
-exports.DropdownIcon = DropdownIcon;
-exports.StyledAppBar = StyledAppBar;
-exports.StyledNavBar = StyledNavBar;
-exports.StyledText = StyledText;
-exports.appHeaderMobileBreakpoint = appHeaderMobileBreakpoint;
-exports.appHeaderSpacing = appHeaderSpacing;
-//# sourceMappingURL=elements.cjs.map

package/dist/AppHeader/shared/elements.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"elements.cjs","names":["animatedPopoverVariants: Variants","AnimatedHeaderZone: React.FC<AnimatedHeaderZoneProps>","AnimatePresence","motion","Anchor","ArrowChevronDownFilledIcon","Text","React","GradientBackground","Box","LayoutGrid","FlexBox","AppBar","styled"],"sources":["../../../src/AppHeader/shared/elements.tsx"],"sourcesContent":["import {\n  Anchor,\n  Box,\n  FlexBox,\n  LayoutGrid,\n  Text,\n  WithChildrenProp,\n} from '@codecademy/gamut';\nimport { ArrowChevronDownFilledIcon } from '@codecademy/gamut-icons';\nimport {\n  Colors,\n  css,\n  pxRem,\n  states,\n  useCurrentMode,\n} from '@codecademy/gamut-styles';\nimport { StyleProps } from '@codecademy/variance';\nimport styled from '@emotion/styled';\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n  Variants,\n} from 'framer-motion';\nimport * as React from 'react';\n\nimport { AppBar } from '../../AppBar';\nimport { GradientBackground } from '../AppHeaderElements/AppHeaderSection/elements';\n\nexport const appHeaderMobileBreakpoint = 'lg' as const;\n\nexport interface AnimatedHeaderZoneProps extends WithChildrenProp {\n  visible?: boolean;\n}\n\nconst animatedPopoverVariants: Variants = {\n  enter: { opacity: 1, transition: { duration: 0.2 } },\n  exit: { opacity: 0, transition: { duration: 0.2 } },\n};\n\nexport const useMegaMenuHeaderResponsiveStyles = (): {\n  bg: Colors;\n  borderColor: Colors;\n  color: Colors;\n} => {\n  const mode = useCurrentMode();\n\n  const bg = mode === 'dark' ? 'white' : 'navy-800';\n  const color = mode === 'dark' ? 'navy-900' : 'blue-0';\n\n  return { bg, borderColor: color, color };\n};\n\nexport const AnimatedHeaderZone: React.FC<AnimatedHeaderZoneProps> = ({\n  children,\n  visible,\n}) => {\n  return visible ? (\n    <AnimatePresence>\n      <motion.div\n        animate=\"enter\"\n        exit=\"exit\"\n        initial=\"exit\"\n        variants={animatedPopoverVariants}\n      >\n        {children}\n      </motion.div>\n    </AnimatePresence>\n  ) : null;\n};\n\nexport const DropdownAnchor = styled(Anchor)(\n  css({\n    alignItems: `center`,\n    display: `flex`,\n    padding: `0.5rem 0`,\n    textAlign: `center`,\n    whiteSpace: `nowrap`,\n\n    '&:focus::before': {\n      opacity: 1,\n    },\n  })\n);\n\nconst dropdownStates = states({\n  open: {\n    transform: `rotate(-180deg)`,\n  },\n});\n\nexport const DropdownIcon = styled(ArrowChevronDownFilledIcon)<\n  StyleProps<typeof dropdownStates>\n>(\n  css({\n    marginLeft: pxRem(5),\n    transition: `transform 0.35s ease-out`,\n    transformOrigin: `center ${pxRem(5)}`,\n  }),\n  dropdownStates\n);\n\nexport const StyledText = styled(Text)(\n  css({\n    '&::after': {\n      display: `block`,\n      content: `attr(title)`,\n      fontWeight: `bold`,\n      height: `1px`,\n      color: `transparent`,\n      overflow: `hidden`,\n      visibility: `hidden`,\n    },\n  })\n);\n\nconst getDropdownAnimations = ({\n  isOpen,\n  prefersReducedMotion,\n}: {\n  isOpen: boolean;\n  prefersReducedMotion: boolean | null;\n}) => {\n  const openState = {\n    transform: 'translateY(0)',\n    opacity: 1,\n  };\n  const closedState = {\n    transform: prefersReducedMotion ? 'none' : 'translateY(-8px)',\n    opacity: 0,\n  };\n\n  return {\n    animate: isOpen ? openState : closedState,\n    initial: closedState,\n    transition: {\n      duration: 0.15,\n      ease: 'easeOut',\n    },\n  };\n};\n\nconst BaseDropdown = styled(motion.create('div'))(() =>\n  css({ position: `absolute` })\n);\n\nconst MegaMenuBackdrop = styled(motion.create('div'))(\n  css({\n    position: 'relative',\n    zIndex: -1,\n  })\n);\n\nexport const AnimatedMegaMenuDropdown = React.forwardRef(\n  (\n    {\n      isOpen,\n      ...props\n    }: React.ComponentProps<typeof BaseDropdown> & {\n      isOpen: boolean;\n    },\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const [isAnimating, setIsAnimating] = React.useState(false);\n    const prefersReducedMotion = useReducedMotion();\n\n    return (\n      <>\n        <AnimatePresence>\n          {isOpen && (\n            <MegaMenuBackdrop\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.15, ease: 'easeOut' }}\n            >\n              <GradientBackground\n                key=\"dropdown-backdrop\"\n                position=\"fixed\"\n                top=\"0\"\n                left=\"0\"\n                right=\"0\"\n                bottom=\"0\"\n              />\n            </MegaMenuBackdrop>\n          )}\n        </AnimatePresence>\n        {/* the preferred way to animate this would be via AnimatePresence, but it is unclear if\n            keeping closed dropdown content in the DOM has a positive effect on SEO */}\n        <Box display={isOpen || isAnimating ? 'block' : 'none'}>\n          <BaseDropdown\n            key=\"dropdown-content\"\n            ref={ref}\n            {...getDropdownAnimations({ isOpen, prefersReducedMotion })}\n            {...props}\n            onAnimationComplete={(anim) => {\n              if (!isOpen) {\n                // only consider animation complete when dropdown is closed to prevent flickering from rapid state changes\n                setIsAnimating(false);\n              }\n              props.onAnimationComplete?.(anim);\n            }}\n            onAnimationStart={(anim) => {\n              setIsAnimating(true);\n              props.onAnimationStart?.(anim);\n            }}\n          />\n        </Box>\n      </>\n    );\n  }\n);\n\nexport const AnimatedSimpleDropdown = ({\n  isOpen,\n  ...props\n}: React.ComponentProps<typeof BaseDropdown> & {\n  isOpen: boolean;\n}) => {\n  const [isAnimating, setIsAnimating] = React.useState(false);\n  const prefersReducedMotion = useReducedMotion();\n\n  // the preferred way to animate this would be via AnimatePresence, but it is unclear if\n  // keeping closed dropdown content in the DOM has a positive effect on SEO\n  return (\n    <Box display={isOpen || isAnimating ? 'block' : 'none'}>\n      <BaseDropdown\n        {...getDropdownAnimations({ isOpen, prefersReducedMotion })}\n        {...props}\n        onAnimationComplete={(anim) => {\n          if (!isOpen) {\n            // only consider animation complete when dropdown is closed to prevent flickering from rapid state changes\n            setIsAnimating(false);\n          }\n          props.onAnimationComplete?.(anim);\n        }}\n        onAnimationStart={(anim) => {\n          setIsAnimating(true);\n          props.onAnimationStart?.(anim);\n        }}\n      />\n    </Box>\n  );\n};\n\nexport const LayoutGridAntiAliased = styled(LayoutGrid)`\n  -webkit-font-smoothing: antialiased;\n`;\n\n/* for Resources & Catalog menus */\nexport const DescriptionSectionContainer = styled(FlexBox)(\n  css({\n    '&:focus-visible': {\n      color: 'text',\n      outline: '1px solid currentColor !important',\n    },\n  })\n);\n\nexport const StyledAppBar = styled(AppBar)(\n  css({\n    boxShadow: `none`,\n  })\n);\n\nexport const StyledNavBar = styled.ul(\n  css({\n    alignItems: 'stretch',\n    display: `flex`,\n    padding: 0,\n    listStyle: `none`,\n    margin: 0,\n    width: `100%`,\n  })\n);\n\nexport const appHeaderSpacing = {\n  standard: 8,\n\n  enterprise: 12,\n} as const;\n"],"mappings":"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"}

package/dist/AppHeader/shared/elements.d.mts

@@ -1,9 +0,0 @@
-import "../../AppBar/index.mjs";
-import { WithChildrenProp } from "@codecademy/gamut";
-import { Colors } from "@codecademy/gamut-styles";
-import "@emotion/styled";
-import "react";
-import "react/jsx-runtime";
-import "@codecademy/gamut-icons";
-import "framer-motion";
-import "@emotion/react";

package/dist/AppHeader/shared/elements.mjs

@@ -1,161 +0,0 @@
-import { AppBar } from "../../AppBar/index.mjs";
-import { GradientBackground } from "../AppHeaderElements/AppHeaderSection/elements.mjs";
-import { Anchor, Box, FlexBox, LayoutGrid, Text } from "@codecademy/gamut";
-import { css, pxRem, states, useCurrentMode } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import * as React$1 from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowChevronDownFilledIcon } from "@codecademy/gamut-icons";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
-
-//#region src/AppHeader/shared/elements.tsx
-const appHeaderMobileBreakpoint = "lg";
-const animatedPopoverVariants = {
-	enter: {
-		opacity: 1,
-		transition: { duration: .2 }
-	},
-	exit: {
-		opacity: 0,
-		transition: { duration: .2 }
-	}
-};
-const AnimatedHeaderZone = ({ children, visible }) => {
-	return visible ? /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(motion.div, {
-		animate: "enter",
-		exit: "exit",
-		initial: "exit",
-		variants: animatedPopoverVariants,
-		children
-	}) }) : null;
-};
-const DropdownAnchor = styled(Anchor)(css({
-	alignItems: `center`,
-	display: `flex`,
-	padding: `0.5rem 0`,
-	textAlign: `center`,
-	whiteSpace: `nowrap`,
-	"&:focus::before": { opacity: 1 }
-}));
-const dropdownStates = states({ open: { transform: `rotate(-180deg)` } });
-const DropdownIcon = styled(ArrowChevronDownFilledIcon)(css({
-	marginLeft: pxRem(5),
-	transition: `transform 0.35s ease-out`,
-	transformOrigin: `center ${pxRem(5)}`
-}), dropdownStates);
-const StyledText = styled(Text)(css({ "&::after": {
-	display: `block`,
-	content: `attr(title)`,
-	fontWeight: `bold`,
-	height: `1px`,
-	color: `transparent`,
-	overflow: `hidden`,
-	visibility: `hidden`
-} }));
-const getDropdownAnimations = ({ isOpen, prefersReducedMotion }) => {
-	const openState = {
-		transform: "translateY(0)",
-		opacity: 1
-	};
-	const closedState = {
-		transform: prefersReducedMotion ? "none" : "translateY(-8px)",
-		opacity: 0
-	};
-	return {
-		animate: isOpen ? openState : closedState,
-		initial: closedState,
-		transition: {
-			duration: .15,
-			ease: "easeOut"
-		}
-	};
-};
-const BaseDropdown = styled(motion.create("div"))(() => css({ position: `absolute` }));
-const MegaMenuBackdrop = styled(motion.create("div"))(css({
-	position: "relative",
-	zIndex: -1
-}));
-const AnimatedMegaMenuDropdown = React$1.forwardRef(({ isOpen, ...props }, ref) => {
-	const [isAnimating, setIsAnimating] = React$1.useState(false);
-	const prefersReducedMotion = useReducedMotion();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(MegaMenuBackdrop, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		transition: {
-			duration: .15,
-			ease: "easeOut"
-		},
-		children: /* @__PURE__ */ jsx(GradientBackground, {
-			position: "fixed",
-			top: "0",
-			left: "0",
-			right: "0",
-			bottom: "0"
-		}, "dropdown-backdrop")
-	}) }), /* @__PURE__ */ jsx(Box, {
-		display: isOpen || isAnimating ? "block" : "none",
-		children: /* @__PURE__ */ jsx(BaseDropdown, {
-			ref,
-			...getDropdownAnimations({
-				isOpen,
-				prefersReducedMotion
-			}),
-			...props,
-			onAnimationComplete: (anim) => {
-				if (!isOpen) setIsAnimating(false);
-				props.onAnimationComplete?.(anim);
-			},
-			onAnimationStart: (anim) => {
-				setIsAnimating(true);
-				props.onAnimationStart?.(anim);
-			}
-		}, "dropdown-content")
-	})] });
-});
-const AnimatedSimpleDropdown = ({ isOpen, ...props }) => {
-	const [isAnimating, setIsAnimating] = React$1.useState(false);
-	const prefersReducedMotion = useReducedMotion();
-	return /* @__PURE__ */ jsx(Box, {
-		display: isOpen || isAnimating ? "block" : "none",
-		children: /* @__PURE__ */ jsx(BaseDropdown, {
-			...getDropdownAnimations({
-				isOpen,
-				prefersReducedMotion
-			}),
-			...props,
-			onAnimationComplete: (anim) => {
-				if (!isOpen) setIsAnimating(false);
-				props.onAnimationComplete?.(anim);
-			},
-			onAnimationStart: (anim) => {
-				setIsAnimating(true);
-				props.onAnimationStart?.(anim);
-			}
-		})
-	});
-};
-const LayoutGridAntiAliased = styled(LayoutGrid)`
-  -webkit-font-smoothing: antialiased;
-`;
-const DescriptionSectionContainer = styled(FlexBox)(css({ "&:focus-visible": {
-	color: "text",
-	outline: "1px solid currentColor !important"
-} }));
-const StyledAppBar = styled(AppBar)(css({ boxShadow: `none` }));
-const StyledNavBar = styled.ul(css({
-	alignItems: "stretch",
-	display: `flex`,
-	padding: 0,
-	listStyle: `none`,
-	margin: 0,
-	width: `100%`
-}));
-const appHeaderSpacing = {
-	standard: 8,
-	enterprise: 12
-};
-
-//#endregion
-export { AnimatedHeaderZone, AnimatedMegaMenuDropdown, AnimatedSimpleDropdown, DropdownAnchor, DropdownIcon, StyledAppBar, StyledNavBar, StyledText, appHeaderMobileBreakpoint, appHeaderSpacing };
-//# sourceMappingURL=elements.mjs.map