@codecademy/brand 3.40.1-alpha.db88c958d7.0 → 4.0.0-alpha.0ae245495b.0

package/dist/NotificationList/EmptyNotification/index.js

@@ -1,38 +1,42 @@
-import { FlexBox, Text } from '@codecademy/gamut';
-import sample from 'lodash/sample';
-import { useMemo } from 'react';
-import { emptyNotificationContents } from './emptyNotificationContents';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const EmptyNotification = () => {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const content = useMemo(() => sample(emptyNotificationContents), []);
-  const Image = content.image;
-  return /*#__PURE__*/_jsxs(FlexBox, {
-    as: "li",
-    flexDirection: "column",
-    alignItems: "center",
-    pt: 32,
-    pb: 48,
-    "data-testid": "empty-notification",
-    "aria-label": "You have no notifications",
-    children: [/*#__PURE__*/_jsx(FlexBox, {
-      pb: 16,
-      children: /*#__PURE__*/_jsx(Image, {
-        "aria-hidden": true,
-        width: 80,
-        height: 60
-      })
-    }), /*#__PURE__*/_jsxs(FlexBox, {
-      flexDirection: "column",
-      alignItems: "center",
-      children: [/*#__PURE__*/_jsx(Text, {
-        as: "p",
-        mb: 16,
-        children: content.text
-      }), /*#__PURE__*/_jsx(Text, {
-        as: "p",
-        children: content.subtext
-      })]
-    })]
-  });
-};
+import { emptyNotificationContents } from "./emptyNotificationContents.js";
+import { FlexBox, Text } from "@codecademy/gamut";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import sample from "lodash/sample";
+
+//#region src/NotificationList/EmptyNotification/index.tsx
+const EmptyNotification = () => {
+	const content = useMemo(() => sample(emptyNotificationContents), []);
+	const Image = content.image;
+	return /* @__PURE__ */ jsxs(FlexBox, {
+		as: "li",
+		flexDirection: "column",
+		alignItems: "center",
+		pt: 32,
+		pb: 48,
+		"data-testid": "empty-notification",
+		"aria-label": "You have no notifications",
+		children: [/* @__PURE__ */ jsx(FlexBox, {
+			pb: 16,
+			children: /* @__PURE__ */ jsx(Image, {
+				"aria-hidden": true,
+				width: 80,
+				height: 60
+			})
+		}), /* @__PURE__ */ jsxs(FlexBox, {
+			flexDirection: "column",
+			alignItems: "center",
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "p",
+				mb: 16,
+				children: content.text
+			}), /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				children: content.subtext
+			})]
+		})]
+	});
+};
+
+//#endregion
+export { EmptyNotification };

package/dist/NotificationList/NotificationItem.cjs

@@ -0,0 +1,162 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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 _codecademy_gamut_patterns = require("@codecademy/gamut-patterns");
+let _codecademy_gamut_illustrations = require("@codecademy/gamut-illustrations");
+
+//#region src/NotificationList/NotificationItem.tsx
+const StyledLink = _emotion_styled.default.a`
+  text-decoration: none;
+  display: block;
+  z-index: 1;
+
+  &:before,
+  &:after {
+    top: -1px;
+    left: 0;
+    z-index: 0;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: calc(100% + 2px);
+    transition: background 250ms;
+  }
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    &:after {
+      border-radius: 4px;
+      border: 2px solid ${(0, _codecademy_gamut_styles.themed)("colors.navy")};
+    }
+  }
+  &:hover {
+    text-decoration: none;
+    &:before {
+      background-color: ${({ theme }) => theme.colors["gray-100"]};
+    }
+  }
+`;
+const StyledImg = _emotion_styled.default.img`
+  border-radius: 50%;
+  border: 1px solid ${(0, _codecademy_gamut_styles.themed)("colors.navy")};
+  height: 3rem;
+  width: 3rem;
+`;
+const isInternalLink = (href) => {
+	try {
+		return new URL(href).hostname === window.location.hostname;
+	} catch (_e) {}
+	return false;
+};
+const NotificationItem = ({ handleDismiss, notification, handleClick }) => {
+	const { date, imageUrl, link, text, type, id } = notification;
+	const notificationItemId = `NotificationItem${id}`;
+	const renderIllustration = (Illustration) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+		display: "inline-flex",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Illustration, {
+			height: 48,
+			width: 48
+		})
+	});
+	const renderIcon = (Icon) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+		display: "inline-flex",
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: "full",
+		border: 1,
+		width: 50,
+		height: 50,
+		"aria-hidden": true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			height: 22,
+			width: 22
+		})
+	});
+	const renderImage = () => {
+		if (imageUrl) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledImg, {
+			src: imageUrl,
+			alt: ""
+		});
+		switch (type) {
+			case "marketing_blast": return renderIllustration(_codecademy_gamut_illustrations.Megaphone);
+			case "curriculum_blast": return renderIllustration(_codecademy_gamut_illustrations.New);
+			case "cohort_blast": return renderIcon(_codecademy_gamut_icons.MultipleUsersIcon);
+			case "forum_comment": return renderIllustration(_codecademy_gamut_illustrations.ChatBox);
+			case "forum_message": return renderIllustration(_codecademy_gamut_illustrations.Envelope);
+			case "forum_like": return renderIllustration(_codecademy_gamut_illustrations.Heart);
+			case "forum_mention": return renderIllustration(_codecademy_gamut_illustrations.EmailAt);
+			default: return renderIllustration(_codecademy_gamut_illustrations.Bell);
+		}
+	};
+	const notificationContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+		zIndex: 1,
+		position: "relative",
+		textColor: "text",
+		children: [renderImage(), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+			flex: 1,
+			pl: 12,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				id: notificationItemId,
+				variant: "p-small",
+				children: text
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				variant: "p-small",
+				textColor: "text-secondary",
+				ml: 4,
+				children: date
+			})]
+		})]
+	});
+	const dismissIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.IconButton, {
+		icon: _codecademy_gamut_icons.MiniDeleteIcon,
+		onClick: handleDismiss,
+		"aria-describedby": notificationItemId,
+		size: "small",
+		variant: "secondary",
+		"z-index": 1,
+		tip: "Dismiss notification",
+		tipProps: {
+			alignment: "bottom-center",
+			placement: "floating"
+		}
+	});
+	const separatorPattern = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+		px: 32,
+		m: 0,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_patterns.CheckerDense, {
+			height: "1px",
+			display: "flex"
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+		py: 24,
+		px: 32,
+		alignItems: "flex-start",
+		justifyContent: "space-between",
+		position: "relative",
+		children: [link ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledLink, {
+			href: link,
+			"aria-label": `${text}, ${date} ago`,
+			rel: isInternalLink(link) ? "" : "noopener noreferrer",
+			target: isInternalLink(link) ? "" : "_blank",
+			onClick: (event) => handleClick?.(event),
+			children: notificationContent
+		}) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: notificationContent }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+			alignItems: "flex-start",
+			zIndex: 1,
+			children: handleDismiss && dismissIcon
+		})]
+	}), separatorPattern] });
+};
+
+//#endregion
+exports.NotificationItem = NotificationItem;

package/dist/NotificationList/NotificationItem.d.cts

@@ -0,0 +1,12 @@
+import { Notification } from "./typings.cjs";
+import * as React$1 from "react";
+
+//#region src/NotificationList/NotificationItem.d.ts
+type NotificationItemProps = {
+  notification: Notification;
+  handleClick?: (event: object) => void;
+  handleDismiss?: () => void;
+};
+declare const NotificationItem: React$1.FC<NotificationItemProps>;
+//#endregion
+export { NotificationItem, NotificationItemProps };

package/dist/NotificationList/NotificationItem.d.ts

@@ -1,8 +1,12 @@
-import * as React from 'react';
-import { Notification } from './typings';
-export type NotificationItemProps = {
-    notification: Notification;
-    handleClick?: (event: object) => void;
-    handleDismiss?: () => void;
+import { Notification } from "./typings.js";
+import * as React$1 from "react";
+
+//#region src/NotificationList/NotificationItem.d.ts
+type NotificationItemProps = {
+  notification: Notification;
+  handleClick?: (event: object) => void;
+  handleDismiss?: () => void;
 };
-export declare const NotificationItem: React.FC<NotificationItemProps>;
+declare const NotificationItem: React$1.FC<NotificationItemProps>;
+//#endregion
+export { NotificationItem, NotificationItemProps };

package/dist/NotificationList/NotificationItem.js

@@ -1,151 +1,159 @@
-import _styled from "@emotion/styled/base";
-import { Box, FlexBox, IconButton, Text } from '@codecademy/gamut';
-import { MiniDeleteIcon, MultipleUsersIcon } from '@codecademy/gamut-icons';
-import { Bell, ChatBox, EmailAt, Envelope, Heart, Megaphone, New } from '@codecademy/gamut-illustrations';
-import { CheckerDense } from '@codecademy/gamut-patterns';
-import { themed } from '@codecademy/gamut-styles';
-import * as React from 'react';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const StyledLink = /*#__PURE__*/_styled("a", {
-  target: "e1vap9451",
-  label: "StyledLink"
-})("text-decoration:none;display:block;z-index:1;&:before,&:after{top:-1px;left:0;z-index:0;content:'';position:absolute;width:100%;height:calc(100% + 2px);transition:background 250ms;}&:focus{outline:none;}&:focus-visible{&:after{border-radius:4px;border:2px solid ", themed('colors.navy'), ";}}&:hover{text-decoration:none;&:before{background-color:", ({
-  theme
-}) => theme.colors['gray-100'], ";}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ob3RpZmljYXRpb25MaXN0L05vdGlmaWNhdGlvbkl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCMkIiLCJmaWxlIjoiLi4vLi4vc3JjL05vdGlmaWNhdGlvbkxpc3QvTm90aWZpY2F0aW9uSXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEZsZXhCb3gsIEljb25CdXR0b24sIFRleHQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBHYW11dEljb25Qcm9wcyxcbiAgTWluaURlbGV0ZUljb24sXG4gIE11bHRpcGxlVXNlcnNJY29uLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQge1xuICBCZWxsLFxuICBDaGF0Qm94LFxuICBFbWFpbEF0LFxuICBFbnZlbG9wZSxcbiAgSGVhcnQsXG4gIElsbHVzdHJhdGlvblByb3BzLFxuICBNZWdhcGhvbmUsXG4gIE5ldyxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWxsdXN0cmF0aW9ucyc7XG5pbXBvcnQgeyBDaGVja2VyRGVuc2UgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1wYXR0ZXJucyc7XG5pbXBvcnQgeyB0aGVtZWQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgUmVhY3RFbGVtZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBOb3RpZmljYXRpb24gfSBmcm9tICcuL3R5cGluZ3MnO1xuXG5jb25zdCBTdHlsZWRMaW5rID0gc3R5bGVkLmFgXG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHotaW5kZXg6IDE7XG5cbiAgJjpiZWZvcmUsXG4gICY6YWZ0ZXIge1xuICAgIHRvcDogLTFweDtcbiAgICBsZWZ0OiAwO1xuICAgIHotaW5kZXg6IDA7XG4gICAgY29udGVudDogJyc7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogY2FsYygxMDAlICsgMnB4KTtcbiAgICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kIDI1MG1zO1xuICB9XG4gICY6Zm9jdXMge1xuICAgIG91dGxpbmU6IG5vbmU7XG4gIH1cbiAgJjpmb2N1cy12aXNpYmxlIHtcbiAgICAmOmFmdGVyIHtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgICAgIGJvcmRlcjogMnB4IHNvbGlkICR7dGhlbWVkKCdjb2xvcnMubmF2eScpfTtcbiAgICB9XG4gIH1cbiAgJjpob3ZlciB7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgICY6YmVmb3JlIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydncmF5LTEwMCddfTtcbiAgICB9XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltZyA9IHN0eWxlZC5pbWdgXG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgYm9yZGVyOiAxcHggc29saWQgJHt0aGVtZWQoJ2NvbG9ycy5uYXZ5Jyl9O1xuICBoZWlnaHQ6IDNyZW07XG4gIHdpZHRoOiAzcmVtO1xuYDtcblxuY29uc3QgaXNJbnRlcm5hbExpbmsgPSAoaHJlZjogc3RyaW5nKSA9PiB7XG4gIHRyeSB7XG4gICAgcmV0dXJuIG5ldyBVUkwoaHJlZikuaG9zdG5hbWUgPT09IHdpbmRvdy5sb2NhdGlvbi5ob3N0bmFtZTtcbiAgfSBjYXRjaCAoX2UpIHt9XG4gIHJldHVybiBmYWxzZTtcbn07XG5cbmV4cG9ydCB0eXBlIE5vdGlmaWNhdGlvbkl0ZW1Qcm9wcyA9IHtcbiAgbm90aWZpY2F0aW9uOiBOb3RpZmljYXRpb247XG4gIGhhbmRsZUNsaWNrPzogKGV2ZW50OiBvYmplY3QpID0+IHZvaWQ7XG4gIGhhbmRsZURpc21pc3M/OiAoKSA9PiB2b2lkO1xufTtcblxuZXhwb3J0IGNvbnN0IE5vdGlmaWNhdGlvbkl0ZW06IFJlYWN0LkZDPE5vdGlmaWNhdGlvbkl0ZW1Qcm9wcz4gPSAoe1xuICBoYW5kbGVEaXNtaXNzLFxuICBub3RpZmljYXRpb24sXG4gIGhhbmRsZUNsaWNrLFxufSkgPT4ge1xuICBjb25zdCB7IGRhdGUsIGltYWdlVXJsLCBsaW5rLCB0ZXh0LCB0eXBlLCBpZCB9ID0gbm90aWZpY2F0aW9uO1xuICBjb25zdCBub3RpZmljYXRpb25JdGVtSWQgPSBgTm90aWZpY2F0aW9uSXRlbSR7aWR9YDtcblxuICBjb25zdCByZW5kZXJJbGx1c3RyYXRpb24gPSAoSWxsdXN0cmF0aW9uOiBSZWFjdC5GQzxJbGx1c3RyYXRpb25Qcm9wcz4pID0+IChcbiAgICA8Qm94IGRpc3BsYXk9XCJpbmxpbmUtZmxleFwiIGFyaWEtaGlkZGVuPlxuICAgICAgPElsbHVzdHJhdGlvbiBoZWlnaHQ9ezQ4fSB3aWR0aD17NDh9IC8+XG4gICAgPC9Cb3g+XG4gICk7XG5cbiAgY29uc3QgcmVuZGVySWNvbiA9IChJY29uOiBSZWFjdC5GQzxHYW11dEljb25Qcm9wcz4pID0+IChcbiAgICA8Qm94XG4gICAgICBkaXNwbGF5PVwiaW5saW5lLWZsZXhcIlxuICAgICAganVzdGlmeUNvbnRlbnQ9XCJjZW50ZXJcIlxuICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICBib3JkZXJSYWRpdXM9XCJmdWxsXCJcbiAgICAgIGJvcmRlcj17MX1cbiAgICAgIHdpZHRoPXs1MH1cbiAgICAgIGhlaWdodD17NTB9XG4gICAgICBhcmlhLWhpZGRlblxuICAgID5cbiAgICAgIDxJY29uIGhlaWdodD17MjJ9IHdpZHRoPXsyMn0gLz5cbiAgICA8L0JveD5cbiAgKTtcblxuICBjb25zdCByZW5kZXJJbWFnZSA9ICgpID0+IHtcbiAgICBpZiAoaW1hZ2VVcmwpIHJldHVybiA8U3R5bGVkSW1nIHNyYz17aW1hZ2VVcmx9IGFsdD1cIlwiIC8+O1xuXG4gICAgc3dpdGNoICh0eXBlKSB7XG4gICAgICBjYXNlICdtYXJrZXRpbmdfYmxhc3QnOlxuICAgICAgICByZXR1cm4gcmVuZGVySWxsdXN0cmF0aW9uKE1lZ2FwaG9uZSk7XG4gICAgICBjYXNlICdjdXJyaWN1bHVtX2JsYXN0JzpcbiAgICAgICAgcmV0dXJuIHJlbmRlcklsbHVzdHJhdGlvbihOZXcpO1xuICAgICAgY2FzZSAnY29ob3J0X2JsYXN0JzpcbiAgICAgICAgcmV0dXJuIHJlbmRlckljb24oTXVsdGlwbGVVc2Vyc0ljb24pO1xuICAgICAgY2FzZSAnZm9ydW1fY29tbWVudCc6XG4gICAgICAgIHJldHVybiByZW5kZXJJbGx1c3RyYXRpb24oQ2hhdEJveCk7XG4gICAgICBjYXNlICdmb3J1bV9tZXNzYWdlJzpcbiAgICAgICAgcmV0dXJuIHJlbmRlcklsbHVzdHJhdGlvbihFbnZlbG9wZSk7XG4gICAgICBjYXNlICdmb3J1bV9saWtlJzpcbiAgICAgICAgcmV0dXJuIHJlbmRlcklsbHVzdHJhdGlvbihIZWFydCk7XG4gICAgICBjYXNlICdmb3J1bV9tZW50aW9uJzpcbiAgICAgICAgcmV0dXJuIHJlbmRlcklsbHVzdHJhdGlvbihFbWFpbEF0KTtcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIHJldHVybiByZW5kZXJJbGx1c3RyYXRpb24oQmVsbCk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IG5vdGlmaWNhdGlvbkNvbnRlbnQ6IFJlYWN0RWxlbWVudCA9IChcbiAgICA8RmxleEJveCB6SW5kZXg9ezF9IHBvc2l0aW9uPVwicmVsYXRpdmVcIiB0ZXh0Q29sb3I9XCJ0ZXh0XCI+XG4gICAgICB7cmVuZGVySW1hZ2UoKX1cbiAgICAgIDxCb3ggZmxleD17MX0gcGw9ezEyfT5cbiAgICAgICAgPFRleHQgaWQ9e25vdGlmaWNhdGlvbkl0ZW1JZH0gdmFyaWFudD1cInAtc21hbGxcIj5cbiAgICAgICAgICB7dGV4dH1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgICA8VGV4dCB2YXJpYW50PVwicC1zbWFsbFwiIHRleHRDb2xvcj1cInRleHQtc2Vjb25kYXJ5XCIgbWw9ezR9PlxuICAgICAgICAgIHtkYXRlfVxuICAgICAgICA8L1RleHQ+XG4gICAgICA8L0JveD5cbiAgICA8L0ZsZXhCb3g+XG4gICk7XG5cbiAgY29uc3QgZGlzbWlzc0ljb246IFJlYWN0RWxlbWVudCA9IChcbiAgICA8SWNvbkJ1dHRvblxuICAgICAgaWNvbj17TWluaURlbGV0ZUljb259XG4gICAgICBvbkNsaWNrPXtoYW5kbGVEaXNtaXNzfVxuICAgICAgYXJpYS1kZXNjcmliZWRieT17bm90aWZpY2F0aW9uSXRlbUlkfVxuICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgei1pbmRleD17MX1cbiAgICAgIHRpcD1cIkRpc21pc3Mgbm90aWZpY2F0aW9uXCJcbiAgICAgIHRpcFByb3BzPXt7IGFsaWdubWVudDogJ2JvdHRvbS1jZW50ZXInLCBwbGFjZW1lbnQ6ICdmbG9hdGluZycgfX1cbiAgICAvPlxuICApO1xuXG4gIGNvbnN0IHNlcGFyYXRvclBhdHRlcm4gPSAoXG4gICAgPEJveCBweD17MzJ9IG09ezB9IGFyaWEtaGlkZGVuPVwidHJ1ZVwiPlxuICAgICAgPENoZWNrZXJEZW5zZSBoZWlnaHQ9XCIxcHhcIiBkaXNwbGF5PVwiZmxleFwiIC8+XG4gICAgPC9Cb3g+XG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8bGk+XG4gICAgICA8RmxleEJveFxuICAgICAgICBweT17MjR9XG4gICAgICAgIHB4PXszMn1cbiAgICAgICAgYWxpZ25JdGVtcz1cImZsZXgtc3RhcnRcIlxuICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgICBwb3NpdGlvbj1cInJlbGF0aXZlXCJcbiAgICAgID5cbiAgICAgICAge2xpbmsgPyAoXG4gICAgICAgICAgPD5cbiAgICAgICAgICAgIDxTdHlsZWRMaW5rXG4gICAgICAgICAgICAgIGhyZWY9e2xpbmt9XG4gICAgICAgICAgICAgIGFyaWEtbGFiZWw9e2Ake3RleHR9LCAke2RhdGV9IGFnb2B9XG4gICAgICAgICAgICAgIHJlbD17aXNJbnRlcm5hbExpbmsobGluaykgPyAnJyA6ICdub29wZW5lciBub3JlZmVycmVyJ31cbiAgICAgICAgICAgICAgdGFyZ2V0PXtpc0ludGVybmFsTGluayhsaW5rKSA/ICcnIDogJ19ibGFuayd9XG4gICAgICAgICAgICAgIG9uQ2xpY2s9eyhldmVudCkgPT4gaGFuZGxlQ2xpY2s/LihldmVudCl9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIHtub3RpZmljYXRpb25Db250ZW50fVxuICAgICAgICAgICAgPC9TdHlsZWRMaW5rPlxuICAgICAgICAgIDwvPlxuICAgICAgICApIDogKFxuICAgICAgICAgIDw+e25vdGlmaWNhdGlvbkNvbnRlbnR9PC8+XG4gICAgICAgICl9XG4gICAgICAgIDxGbGV4Qm94IGFsaWduSXRlbXM9XCJmbGV4LXN0YXJ0XCIgekluZGV4PXsxfT5cbiAgICAgICAgICB7aGFuZGxlRGlzbWlzcyAmJiBkaXNtaXNzSWNvbn1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgPC9GbGV4Qm94PlxuICAgICAge3NlcGFyYXRvclBhdHRlcm59XG4gICAgPC9saT5cbiAgKTtcbn07XG4iXX0= */"));
-const StyledImg = /*#__PURE__*/_styled("img", {
-  target: "e1vap9450",
-  label: "StyledImg"
-})("border-radius:50%;border:1px solid ", themed('colors.navy'), ";height:3rem;width:3rem;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ob3RpZmljYXRpb25MaXN0L05vdGlmaWNhdGlvbkl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlENEIiLCJmaWxlIjoiLi4vLi4vc3JjL05vdGlmaWNhdGlvbkxpc3QvTm90aWZpY2F0aW9uSXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCb3gsIEZsZXhCb3gsIEljb25CdXR0b24sIFRleHQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBHYW11dEljb25Qcm9wcyxcbiAgTWluaURlbGV0ZUljb24sXG4gIE11bHRpcGxlVXNlcnNJY29uLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pY29ucyc7XG5pbXBvcnQge1xuICBCZWxsLFxuICBDaGF0Qm94LFxuICBFbWFpbEF0LFxuICBFbnZlbG9wZSxcbiAgSGVhcnQsXG4gIElsbHVzdHJhdGlvblByb3BzLFxuICBNZWdhcGhvbmUsXG4gIE5ldyxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWxsdXN0cmF0aW9ucyc7XG5pbXBvcnQgeyBDaGVja2VyRGVuc2UgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1wYXR0ZXJucyc7XG5pbXBvcnQgeyB0aGVtZWQgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgUmVhY3RFbGVtZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBOb3RpZmljYXRpb24gfSBmcm9tICcuL3R5cGluZ3MnO1xuXG5jb25zdCBTdHlsZWRMaW5rID0gc3R5bGVkLmFgXG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHotaW5kZXg6IDE7XG5cbiAgJjpiZWZvcmUsXG4gICY6YWZ0ZXIge1xuICAgIHRvcDogLTFweDtcbiAgICBsZWZ0OiAwO1xuICAgIHotaW5kZXg6IDA7XG4gICAgY29udGVudDogJyc7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogY2FsYygxMDAlICsgMnB4KTtcbiAgICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kIDI1MG1zO1xuICB9XG4gICY6Zm9jdXMge1xuICAgIG91dGxpbmU6IG5vbmU7XG4gIH1cbiAgJjpmb2N1cy12aXNpYmxlIHtcbiAgICAmOmFmdGVyIHtcbiAgICAgIGJvcmRlci1yYWRpdXM6IDRweDtcbiAgICAgIGJvcmRlcjogMnB4IHNvbGlkICR7dGhlbWVkKCdjb2xvcnMubmF2eScpfTtcbiAgICB9XG4gIH1cbiAgJjpob3ZlciB7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgICY6YmVmb3JlIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzWydncmF5LTEwMCddfTtcbiAgICB9XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltZyA9IHN0eWxlZC5pbWdgXG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbiAgYm9yZGVyOiAxcHggc29saWQgJHt0aGVtZWQoJ2NvbG9ycy5uYXZ5Jyl9O1xuICBoZWlnaHQ6IDNyZW07XG4gIHdpZHRoOiAzcmVtO1xuYDtcblxuY29uc3QgaXNJbnRlcm5hbExpbmsgPSAoaHJlZjogc3RyaW5nKSA9PiB7XG4gIHRyeSB7XG4gICAgcmV0dXJuIG5ldyBVUkwoaHJlZikuaG9zdG5hbWUgPT09IHdpbmRvdy5sb2NhdGlvbi5ob3N0bmFtZTtcbiAgfSBjYXRjaCAoX2UpIHt9XG4gIHJldHVybiBmYWxzZTtcbn07XG5cbmV4cG9ydCB0eXBlIE5vdGlmaWNhdGlvbkl0ZW1Qcm9wcyA9IHtcbiAgbm90aWZpY2F0aW9uOiBOb3RpZmljYXRpb247XG4gIGhhbmRsZUNsaWNrPzogKGV2ZW50OiBvYmplY3QpID0+IHZvaWQ7XG4gIGhhbmRsZURpc21pc3M/OiAoKSA9PiB2b2lkO1xufTtcblxuZXhwb3J0IGNvbnN0IE5vdGlmaWNhdGlvbkl0ZW06IFJlYWN0LkZDPE5vdGlmaWNhdGlvbkl0ZW1Qcm9wcz4gPSAoe1xuICBoYW5kbGVEaXNtaXNzLFxuICBub3RpZmljYXRpb24sXG4gIGhhbmRsZUNsaWNrLFxufSkgPT4ge1xuICBjb25zdCB7IGRhdGUsIGltYWdlVXJsLCBsaW5rLCB0ZXh0LCB0eXBlLCBpZCB9ID0gbm90aWZpY2F0aW9uO1xuICBjb25zdCBub3RpZmljYXRpb25JdGVtSWQgPSBgTm90aWZpY2F0aW9uSXRlbSR7aWR9YDtcblxuICBjb25zdCByZW5kZXJJbGx1c3RyYXRpb24gPSAoSWxsdXN0cmF0aW9uOiBSZWFjdC5GQzxJbGx1c3RyYXRpb25Qcm9wcz4pID0+IChcbiAgICA8Qm94IGRpc3BsYXk9XCJpbmxpbmUtZmxleFwiIGFyaWEtaGlkZGVuPlxuICAgICAgPElsbHVzdHJhdGlvbiBoZWlnaHQ9ezQ4fSB3aWR0aD17NDh9IC8+XG4gICAgPC9Cb3g+XG4gICk7XG5cbiAgY29uc3QgcmVuZGVySWNvbiA9IChJY29uOiBSZWFjdC5GQzxHYW11dEljb25Qcm9wcz4pID0+IChcbiAgICA8Qm94XG4gICAgICBkaXNwbGF5PVwiaW5saW5lLWZsZXhcIlxuICAgICAganVzdGlmeUNvbnRlbnQ9XCJjZW50ZXJcIlxuICAgICAgYWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICBib3JkZXJSYWRpdXM9XCJmdWxsXCJcbiAgICAgIGJvcmRlcj17MX1cbiAgICAgIHdpZHRoPXs1MH1cbiAgICAgIGhlaWdodD17NTB9XG4gICAgICBhcmlhLWhpZGRlblxuICAgID5cbiAgICAgIDxJY29uIGhlaWdodD17MjJ9IHdpZHRoPXsyMn0gLz5cbiAgICA8L0JveD5cbiAgKTtcblxuICBjb25zdCByZW5kZXJJbWFnZSA9ICgpID0+IHtcbiAgICBpZiAoaW1hZ2VVcmwpIHJldHVybiA8U3R5bGVkSW1nIHNyYz17aW1hZ2VVcmx9IGFsdD1cIlwiIC8+O1xuXG4gICAgc3dpdGNoICh0eXBlKSB7XG4gICAgICBjYXNlICdtYXJrZXRpbmdfYmxhc3QnOlxuICAgICAgICByZXR1cm4gcmVuZGVySWxsdXN0cmF0aW9uKE1lZ2FwaG9uZSk7XG4gICAgICBjYXNlICdjdXJyaWN1bHVtX2JsYXN0JzpcbiAgICAgICAgcmV0dXJuIHJlbmRlcklsbHVzdHJhdGlvbihOZXcpO1xuICAgICAgY2FzZSAnY29ob3J0X2JsYXN0JzpcbiAgICAgICAgcmV0dXJuIHJlbmRlckljb24oTXVsdGlwbGVVc2Vyc0ljb24pO1xuICAgICAgY2FzZSAnZm9ydW1fY29tbWVudCc6XG4gICAgICAgIHJldHVybiByZW5kZXJJbGx1c3RyYXRpb24oQ2hhdEJveCk7XG4gICAgICBjYXNlICdmb3J1bV9tZXNzYWdlJzpcbiAgICAgICAgcmV0dXJuIHJlbmRlcklsbHVzdHJhdGlvbihFbnZlbG9wZSk7XG4gICAgICBjYXNlICdmb3J1bV9saWtlJzpcbiAgICAgICAgcmV0dXJuIHJlbmRlcklsbHVzdHJhdGlvbihIZWFydCk7XG4gICAgICBjYXNlICdmb3J1bV9tZW50aW9uJzpcbiAgICAgICAgcmV0dXJuIHJlbmRlcklsbHVzdHJhdGlvbihFbWFpbEF0KTtcbiAgICAgIGRlZmF1bHQ6XG4gICAgICAgIHJldHVybiByZW5kZXJJbGx1c3RyYXRpb24oQmVsbCk7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IG5vdGlmaWNhdGlvbkNvbnRlbnQ6IFJlYWN0RWxlbWVudCA9IChcbiAgICA8RmxleEJveCB6SW5kZXg9ezF9IHBvc2l0aW9uPVwicmVsYXRpdmVcIiB0ZXh0Q29sb3I9XCJ0ZXh0XCI+XG4gICAgICB7cmVuZGVySW1hZ2UoKX1cbiAgICAgIDxCb3ggZmxleD17MX0gcGw9ezEyfT5cbiAgICAgICAgPFRleHQgaWQ9e25vdGlmaWNhdGlvbkl0ZW1JZH0gdmFyaWFudD1cInAtc21hbGxcIj5cbiAgICAgICAgICB7dGV4dH1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgICA8VGV4dCB2YXJpYW50PVwicC1zbWFsbFwiIHRleHRDb2xvcj1cInRleHQtc2Vjb25kYXJ5XCIgbWw9ezR9PlxuICAgICAgICAgIHtkYXRlfVxuICAgICAgICA8L1RleHQ+XG4gICAgICA8L0JveD5cbiAgICA8L0ZsZXhCb3g+XG4gICk7XG5cbiAgY29uc3QgZGlzbWlzc0ljb246IFJlYWN0RWxlbWVudCA9IChcbiAgICA8SWNvbkJ1dHRvblxuICAgICAgaWNvbj17TWluaURlbGV0ZUljb259XG4gICAgICBvbkNsaWNrPXtoYW5kbGVEaXNtaXNzfVxuICAgICAgYXJpYS1kZXNjcmliZWRieT17bm90aWZpY2F0aW9uSXRlbUlkfVxuICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgei1pbmRleD17MX1cbiAgICAgIHRpcD1cIkRpc21pc3Mgbm90aWZpY2F0aW9uXCJcbiAgICAgIHRpcFByb3BzPXt7IGFsaWdubWVudDogJ2JvdHRvbS1jZW50ZXInLCBwbGFjZW1lbnQ6ICdmbG9hdGluZycgfX1cbiAgICAvPlxuICApO1xuXG4gIGNvbnN0IHNlcGFyYXRvclBhdHRlcm4gPSAoXG4gICAgPEJveCBweD17MzJ9IG09ezB9IGFyaWEtaGlkZGVuPVwidHJ1ZVwiPlxuICAgICAgPENoZWNrZXJEZW5zZSBoZWlnaHQ9XCIxcHhcIiBkaXNwbGF5PVwiZmxleFwiIC8+XG4gICAgPC9Cb3g+XG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8bGk+XG4gICAgICA8RmxleEJveFxuICAgICAgICBweT17MjR9XG4gICAgICAgIHB4PXszMn1cbiAgICAgICAgYWxpZ25JdGVtcz1cImZsZXgtc3RhcnRcIlxuICAgICAgICBqdXN0aWZ5Q29udGVudD1cInNwYWNlLWJldHdlZW5cIlxuICAgICAgICBwb3NpdGlvbj1cInJlbGF0aXZlXCJcbiAgICAgID5cbiAgICAgICAge2xpbmsgPyAoXG4gICAgICAgICAgPD5cbiAgICAgICAgICAgIDxTdHlsZWRMaW5rXG4gICAgICAgICAgICAgIGhyZWY9e2xpbmt9XG4gICAgICAgICAgICAgIGFyaWEtbGFiZWw9e2Ake3RleHR9LCAke2RhdGV9IGFnb2B9XG4gICAgICAgICAgICAgIHJlbD17aXNJbnRlcm5hbExpbmsobGluaykgPyAnJyA6ICdub29wZW5lciBub3JlZmVycmVyJ31cbiAgICAgICAgICAgICAgdGFyZ2V0PXtpc0ludGVybmFsTGluayhsaW5rKSA/ICcnIDogJ19ibGFuayd9XG4gICAgICAgICAgICAgIG9uQ2xpY2s9eyhldmVudCkgPT4gaGFuZGxlQ2xpY2s/LihldmVudCl9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIHtub3RpZmljYXRpb25Db250ZW50fVxuICAgICAgICAgICAgPC9TdHlsZWRMaW5rPlxuICAgICAgICAgIDwvPlxuICAgICAgICApIDogKFxuICAgICAgICAgIDw+e25vdGlmaWNhdGlvbkNvbnRlbnR9PC8+XG4gICAgICAgICl9XG4gICAgICAgIDxGbGV4Qm94IGFsaWduSXRlbXM9XCJmbGV4LXN0YXJ0XCIgekluZGV4PXsxfT5cbiAgICAgICAgICB7aGFuZGxlRGlzbWlzcyAmJiBkaXNtaXNzSWNvbn1cbiAgICAgICAgPC9GbGV4Qm94PlxuICAgICAgPC9GbGV4Qm94PlxuICAgICAge3NlcGFyYXRvclBhdHRlcm59XG4gICAgPC9saT5cbiAgKTtcbn07XG4iXX0= */"));
-const isInternalLink = href => {
-  try {
-    return new URL(href).hostname === window.location.hostname;
-  } catch (_e) {}
-  return false;
-};
-export const NotificationItem = ({
-  handleDismiss,
-  notification,
-  handleClick
-}) => {
-  const {
-    date,
-    imageUrl,
-    link,
-    text,
-    type,
-    id
-  } = notification;
-  const notificationItemId = `NotificationItem${id}`;
-  const renderIllustration = Illustration => /*#__PURE__*/_jsx(Box, {
-    display: "inline-flex",
-    "aria-hidden": true,
-    children: /*#__PURE__*/_jsx(Illustration, {
-      height: 48,
-      width: 48
-    })
-  });
-  const renderIcon = Icon => /*#__PURE__*/_jsx(Box, {
-    display: "inline-flex",
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: "full",
-    border: 1,
-    width: 50,
-    height: 50,
-    "aria-hidden": true,
-    children: /*#__PURE__*/_jsx(Icon, {
-      height: 22,
-      width: 22
-    })
-  });
-  const renderImage = () => {
-    if (imageUrl) return /*#__PURE__*/_jsx(StyledImg, {
-      src: imageUrl,
-      alt: ""
-    });
-    switch (type) {
-      case 'marketing_blast':
-        return renderIllustration(Megaphone);
-      case 'curriculum_blast':
-        return renderIllustration(New);
-      case 'cohort_blast':
-        return renderIcon(MultipleUsersIcon);
-      case 'forum_comment':
-        return renderIllustration(ChatBox);
-      case 'forum_message':
-        return renderIllustration(Envelope);
-      case 'forum_like':
-        return renderIllustration(Heart);
-      case 'forum_mention':
-        return renderIllustration(EmailAt);
-      default:
-        return renderIllustration(Bell);
+import { Box, FlexBox, IconButton, Text } from "@codecademy/gamut";
+import { themed } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { MiniDeleteIcon, MultipleUsersIcon } from "@codecademy/gamut-icons";
+import { CheckerDense } from "@codecademy/gamut-patterns";
+import { Bell, ChatBox, EmailAt, Envelope, Heart, Megaphone, New } from "@codecademy/gamut-illustrations";
+
+//#region src/NotificationList/NotificationItem.tsx
+const StyledLink = styled.a`
+  text-decoration: none;
+  display: block;
+  z-index: 1;
+
+  &:before,
+  &:after {
+    top: -1px;
+    left: 0;
+    z-index: 0;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: calc(100% + 2px);
+    transition: background 250ms;
+  }
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    &:after {
+      border-radius: 4px;
+      border: 2px solid ${themed("colors.navy")};
     }
-  };
-  const notificationContent = /*#__PURE__*/_jsxs(FlexBox, {
-    zIndex: 1,
-    position: "relative",
-    textColor: "text",
-    children: [renderImage(), /*#__PURE__*/_jsxs(Box, {
-      flex: 1,
-      pl: 12,
-      children: [/*#__PURE__*/_jsx(Text, {
-        id: notificationItemId,
-        variant: "p-small",
-        children: text
-      }), /*#__PURE__*/_jsx(Text, {
-        variant: "p-small",
-        textColor: "text-secondary",
-        ml: 4,
-        children: date
-      })]
-    })]
-  });
-  const dismissIcon = /*#__PURE__*/_jsx(IconButton, {
-    icon: MiniDeleteIcon,
-    onClick: handleDismiss,
-    "aria-describedby": notificationItemId,
-    size: "small",
-    variant: "secondary",
-    "z-index": 1,
-    tip: "Dismiss notification",
-    tipProps: {
-      alignment: 'bottom-center',
-      placement: 'floating'
+  }
+  &:hover {
+    text-decoration: none;
+    &:before {
+      background-color: ${({ theme: theme$1 }) => theme$1.colors["gray-100"]};
     }
-  });
-  const separatorPattern = /*#__PURE__*/_jsx(Box, {
-    px: 32,
-    m: 0,
-    "aria-hidden": "true",
-    children: /*#__PURE__*/_jsx(CheckerDense, {
-      height: "1px",
-      display: "flex"
-    })
-  });
-  return /*#__PURE__*/_jsxs("li", {
-    children: [/*#__PURE__*/_jsxs(FlexBox, {
-      py: 24,
-      px: 32,
-      alignItems: "flex-start",
-      justifyContent: "space-between",
-      position: "relative",
-      children: [link ? /*#__PURE__*/_jsx(_Fragment, {
-        children: /*#__PURE__*/_jsx(StyledLink, {
-          href: link,
-          "aria-label": `${text}, ${date} ago`,
-          rel: isInternalLink(link) ? '' : 'noopener noreferrer',
-          target: isInternalLink(link) ? '' : '_blank',
-          onClick: event => handleClick?.(event),
-          children: notificationContent
-        })
-      }) : /*#__PURE__*/_jsx(_Fragment, {
-        children: notificationContent
-      }), /*#__PURE__*/_jsx(FlexBox, {
-        alignItems: "flex-start",
-        zIndex: 1,
-        children: handleDismiss && dismissIcon
-      })]
-    }), separatorPattern]
-  });
-};
+  }
+`;
+const StyledImg = styled.img`
+  border-radius: 50%;
+  border: 1px solid ${themed("colors.navy")};
+  height: 3rem;
+  width: 3rem;
+`;
+const isInternalLink = (href) => {
+	try {
+		return new URL(href).hostname === window.location.hostname;
+	} catch (_e) {}
+	return false;
+};
+const NotificationItem = ({ handleDismiss, notification, handleClick }) => {
+	const { date, imageUrl, link, text, type, id } = notification;
+	const notificationItemId = `NotificationItem${id}`;
+	const renderIllustration = (Illustration) => /* @__PURE__ */ jsx(Box, {
+		display: "inline-flex",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx(Illustration, {
+			height: 48,
+			width: 48
+		})
+	});
+	const renderIcon = (Icon) => /* @__PURE__ */ jsx(Box, {
+		display: "inline-flex",
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: "full",
+		border: 1,
+		width: 50,
+		height: 50,
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx(Icon, {
+			height: 22,
+			width: 22
+		})
+	});
+	const renderImage = () => {
+		if (imageUrl) return /* @__PURE__ */ jsx(StyledImg, {
+			src: imageUrl,
+			alt: ""
+		});
+		switch (type) {
+			case "marketing_blast": return renderIllustration(Megaphone);
+			case "curriculum_blast": return renderIllustration(New);
+			case "cohort_blast": return renderIcon(MultipleUsersIcon);
+			case "forum_comment": return renderIllustration(ChatBox);
+			case "forum_message": return renderIllustration(Envelope);
+			case "forum_like": return renderIllustration(Heart);
+			case "forum_mention": return renderIllustration(EmailAt);
+			default: return renderIllustration(Bell);
+		}
+	};
+	const notificationContent = /* @__PURE__ */ jsxs(FlexBox, {
+		zIndex: 1,
+		position: "relative",
+		textColor: "text",
+		children: [renderImage(), /* @__PURE__ */ jsxs(Box, {
+			flex: 1,
+			pl: 12,
+			children: [/* @__PURE__ */ jsx(Text, {
+				id: notificationItemId,
+				variant: "p-small",
+				children: text
+			}), /* @__PURE__ */ jsx(Text, {
+				variant: "p-small",
+				textColor: "text-secondary",
+				ml: 4,
+				children: date
+			})]
+		})]
+	});
+	const dismissIcon = /* @__PURE__ */ jsx(IconButton, {
+		icon: MiniDeleteIcon,
+		onClick: handleDismiss,
+		"aria-describedby": notificationItemId,
+		size: "small",
+		variant: "secondary",
+		"z-index": 1,
+		tip: "Dismiss notification",
+		tipProps: {
+			alignment: "bottom-center",
+			placement: "floating"
+		}
+	});
+	const separatorPattern = /* @__PURE__ */ jsx(Box, {
+		px: 32,
+		m: 0,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(CheckerDense, {
+			height: "1px",
+			display: "flex"
+		})
+	});
+	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsxs(FlexBox, {
+		py: 24,
+		px: 32,
+		alignItems: "flex-start",
+		justifyContent: "space-between",
+		position: "relative",
+		children: [link ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(StyledLink, {
+			href: link,
+			"aria-label": `${text}, ${date} ago`,
+			rel: isInternalLink(link) ? "" : "noopener noreferrer",
+			target: isInternalLink(link) ? "" : "_blank",
+			onClick: (event) => handleClick?.(event),
+			children: notificationContent
+		}) }) : /* @__PURE__ */ jsx(Fragment, { children: notificationContent }), /* @__PURE__ */ jsx(FlexBox, {
+			alignItems: "flex-start",
+			zIndex: 1,
+			children: handleDismiss && dismissIcon
+		})]
+	}), separatorPattern] });
+};
+
+//#endregion
+export { NotificationItem };

package/dist/NotificationList/index.cjs

@@ -0,0 +1,45 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_index = require('./EmptyNotification/index.cjs');
+const require_NotificationItem = require('./NotificationItem.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 lodash_isEmpty = require("lodash/isEmpty");
+lodash_isEmpty = require_rolldown_runtime.__toESM(lodash_isEmpty);
+
+//#region src/NotificationList/index.tsx
+const listFocusStyle = (0, _codecademy_gamut.focusVisibleStyle)("-4px");
+const UnstyledUnorderedList = (0, _emotion_styled.default)(_codecademy_gamut_styles.Background)((0, _codecademy_gamut_styles.css)({
+	listStyle: "none",
+	padding: 0,
+	margin: 0,
+	...listFocusStyle
+}));
+const NotificationList = ({ notifications, onNotificationClick, onDismiss, headerElementId }) => {
+	const listRef = react.useRef(null);
+	const onDismissHandler = async (notification) => {
+		if (listRef?.current) await listRef.current.focus();
+		await onDismiss?.(notification);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UnstyledUnorderedList, {
+		"aria-labelledby": headerElementId,
+		"aria-live": "polite",
+		"aria-relevant": "additions",
+		as: "ul",
+		bg: "background",
+		ref: listRef,
+		tabIndex: -1,
+		children: (0, lodash_isEmpty.default)(notifications) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.EmptyNotification, {}) : notifications.map((notification) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationItem.NotificationItem, {
+			notification,
+			handleClick: () => onNotificationClick?.(notification),
+			handleDismiss: () => onDismissHandler(notification)
+		}, notification.id))
+	});
+};
+
+//#endregion
+exports.NotificationList = NotificationList;