@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

package/dist/NotificationList/EmptyNotification/emptyNotificationContents.js

@@ -1,23 +1,34 @@
-import { Bee, Browser, Confetti, Plant, Sun } from '@codecademy/gamut-illustrations';
-/* must have at least one in array */
-export const emptyNotificationContents = [{
-  text: "You're all caught up!",
-  subtext: 'Go forth and learn new things.',
-  image: Bee
-}, {
-  text: "You're all caught up!",
-  subtext: 'Time to learn new things.',
-  image: Confetti
-}, {
-  text: "You're all caught up!",
-  subtext: 'The future looks bright.',
-  image: Sun
-}, {
-  text: "You're up to date!",
-  subtext: 'Go forth and learn new things.',
-  image: Plant
-}, {
-  text: "You're up to date!",
-  subtext: 'Clear future ahead.',
-  image: Browser
-}];
+import { Bee, Browser, Confetti, Plant, Sun } from "@codecademy/gamut-illustrations";
+
+//#region src/NotificationList/EmptyNotification/emptyNotificationContents.tsx
+const emptyNotificationContents = [
+	{
+		text: "You're all caught up!",
+		subtext: "Go forth and learn new things.",
+		image: Bee
+	},
+	{
+		text: "You're all caught up!",
+		subtext: "Time to learn new things.",
+		image: Confetti
+	},
+	{
+		text: "You're all caught up!",
+		subtext: "The future looks bright.",
+		image: Sun
+	},
+	{
+		text: "You're up to date!",
+		subtext: "Go forth and learn new things.",
+		image: Plant
+	},
+	{
+		text: "You're up to date!",
+		subtext: "Clear future ahead.",
+		image: Browser
+	}
+];
+
+//#endregion
+export { emptyNotificationContents };
+//# sourceMappingURL=emptyNotificationContents.js.map

package/dist/NotificationList/EmptyNotification/emptyNotificationContents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emptyNotificationContents.js","names":["Bee","Browser","Confetti","Plant","Sun","emptyNotificationContents","text","subtext","image"],"sources":["../../../src/NotificationList/EmptyNotification/emptyNotificationContents.tsx"],"sourcesContent":["import {\n  Bee,\n  Browser,\n  Confetti,\n  Plant,\n  Sun,\n} from '@codecademy/gamut-illustrations';\n\nexport type exportNotificationsContent = {\n  text: string;\n  subtext: string;\n  image: typeof Bee;\n};\n\n/* must have at least one in array */\nexport const emptyNotificationContents: readonly exportNotificationsContent[] =\n  [\n    {\n      text: \"You're all caught up!\",\n      subtext: 'Go forth and learn new things.',\n      image: Bee,\n    },\n    {\n      text: \"You're all caught up!\",\n      subtext: 'Time to learn new things.',\n      image: Confetti,\n    },\n    {\n      text: \"You're all caught up!\",\n      subtext: 'The future looks bright.',\n      image: Sun,\n    },\n    {\n      text: \"You're up to date!\",\n      subtext: 'Go forth and learn new things.',\n      image: Plant,\n    },\n    {\n      text: \"You're up to date!\",\n      subtext: 'Clear future ahead.',\n      image: Browser,\n    },\n  ] as const;\n"],"mappings":";;;AAeA,MAAaK,4BACX;CACE;EACEC,MAAM;EACNC,SAAS;EACTC,OAAOR;EACT;CACA;EACEM,MAAM;EACNC,SAAS;EACTC,OAAON;EACT;CACA;EACEI,MAAM;EACNC,SAAS;EACTC,OAAOJ;EACT;CACA;EACEE,MAAM;EACNC,SAAS;EACTC,OAAOL;EACT;CACA;EACEG,MAAM;EACNC,SAAS;EACTC,OAAOP;EACT;CACD"}

package/dist/NotificationList/EmptyNotification/index.cjs

@@ -0,0 +1,35 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_emptyNotificationContents = require('./emptyNotificationContents.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+let lodash_sample = require("lodash/sample");
+lodash_sample = require_runtime.__toESM(lodash_sample);
+
+//#region src/NotificationList/EmptyNotification/index.tsx
+const EmptyNotification = () => {
+	const content = (0, react.useMemo)(() => (0, lodash_sample.default)(require_emptyNotificationContents.emptyNotificationContents), []);
+	const Image = content.image;
+	return /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
+		as: "li",
+		flexDirection: "column",
+		alignItems: "center",
+		pt: 32,
+		pb: 48,
+		"data-testid": "empty-notification",
+		"aria-label": "You have no notifications"
+	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, { pb: 16 }, /* @__PURE__ */ React.createElement(Image, {
+		"aria-hidden": true,
+		width: 80,
+		height: 60
+	})), /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
+		flexDirection: "column",
+		alignItems: "center"
+	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, {
+		as: "p",
+		mb: 16
+	}, content.text), /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, { as: "p" }, content.subtext)));
+};
+
+//#endregion
+exports.EmptyNotification = EmptyNotification;
+//# sourceMappingURL=index.cjs.map

package/dist/NotificationList/EmptyNotification/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["FlexBox","Text","sample","useMemo","emptyNotificationContents","EmptyNotification","content","Image","image","as","flexDirection","alignItems","pt","pb","data-testid","aria-label","aria-hidden","width","height","mb","text","subtext"],"sources":["../../../src/NotificationList/EmptyNotification/index.tsx"],"sourcesContent":["import { FlexBox, Text } from '@codecademy/gamut';\nimport sample from 'lodash/sample';\nimport { useMemo } from 'react';\n\nimport { emptyNotificationContents } from './emptyNotificationContents';\n\nexport const EmptyNotification = () => {\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const content = useMemo(() => sample(emptyNotificationContents), [])!;\n\n  const Image = content.image;\n\n  return (\n    <FlexBox\n      as=\"li\"\n      flexDirection=\"column\"\n      alignItems=\"center\"\n      pt={32}\n      pb={48}\n      data-testid=\"empty-notification\"\n      aria-label=\"You have no notifications\"\n    >\n      <FlexBox pb={16}>\n        <Image aria-hidden width={80} height={60} />\n      </FlexBox>\n      <FlexBox flexDirection=\"column\" alignItems=\"center\">\n        <Text as=\"p\" mb={16}>\n          {content.text}\n        </Text>\n        <Text as=\"p\">{content.subtext}</Text>\n      </FlexBox>\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;;;AAMA,MAAaK,0BAAoB;CAE/B,MAAMC,8DAA+BF,4DAAAA,EAA4B,EAAE,CAAA;CAEnE,MAAMG,QAAQD,QAAQE;AAEtB,QACE,sBAAA,cAACR,2BAAAA;EACCS,IAAG;EACHC,eAAc;EACdC,YAAW;EACXC,IAAI;EACJC,IAAI;EACJC,eAAY;EACZC,cAAW;IAEX,sBAAA,cAACf,2BAAAA,EAAQa,IAAI,MACX,sBAAA,cAACN,OAAAA;EAAMS,eAAAA;EAAYC,OAAO;EAAIC,QAAQ;MAExC,sBAAA,cAAClB,2BAAAA;EAAQU,eAAc;EAASC,YAAW;IACzC,sBAAA,cAACV,wBAAAA;EAAKQ,IAAG;EAAIU,IAAI;IACdb,QAAQc,KAAI,EAEf,sBAAA,cAACnB,wBAAAA,EAAKQ,IAAG,OAAKH,QAAQe,QAAO,CAAA,CAAA"}

package/dist/NotificationList/EmptyNotification/index.js

@@ -1,38 +1,33 @@
-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 sample from "lodash/sample";
+
+//#region src/NotificationList/EmptyNotification/index.tsx
+const EmptyNotification = () => {
+	const content = useMemo(() => sample(emptyNotificationContents), []);
+	const Image = content.image;
+	return /* @__PURE__ */ React.createElement(FlexBox, {
+		as: "li",
+		flexDirection: "column",
+		alignItems: "center",
+		pt: 32,
+		pb: 48,
+		"data-testid": "empty-notification",
+		"aria-label": "You have no notifications"
+	}, /* @__PURE__ */ React.createElement(FlexBox, { pb: 16 }, /* @__PURE__ */ React.createElement(Image, {
+		"aria-hidden": true,
+		width: 80,
+		height: 60
+	})), /* @__PURE__ */ React.createElement(FlexBox, {
+		flexDirection: "column",
+		alignItems: "center"
+	}, /* @__PURE__ */ React.createElement(Text, {
+		as: "p",
+		mb: 16
+	}, content.text), /* @__PURE__ */ React.createElement(Text, { as: "p" }, content.subtext)));
+};
+
+//#endregion
+export { EmptyNotification };
+//# sourceMappingURL=index.js.map

package/dist/NotificationList/EmptyNotification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["FlexBox","Text","sample","useMemo","emptyNotificationContents","EmptyNotification","content","Image","image","as","flexDirection","alignItems","pt","pb","data-testid","aria-label","aria-hidden","width","height","mb","text","subtext"],"sources":["../../../src/NotificationList/EmptyNotification/index.tsx"],"sourcesContent":["import { FlexBox, Text } from '@codecademy/gamut';\nimport sample from 'lodash/sample';\nimport { useMemo } from 'react';\n\nimport { emptyNotificationContents } from './emptyNotificationContents';\n\nexport const EmptyNotification = () => {\n  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n  const content = useMemo(() => sample(emptyNotificationContents), [])!;\n\n  const Image = content.image;\n\n  return (\n    <FlexBox\n      as=\"li\"\n      flexDirection=\"column\"\n      alignItems=\"center\"\n      pt={32}\n      pb={48}\n      data-testid=\"empty-notification\"\n      aria-label=\"You have no notifications\"\n    >\n      <FlexBox pb={16}>\n        <Image aria-hidden width={80} height={60} />\n      </FlexBox>\n      <FlexBox flexDirection=\"column\" alignItems=\"center\">\n        <Text as=\"p\" mb={16}>\n          {content.text}\n        </Text>\n        <Text as=\"p\">{content.subtext}</Text>\n      </FlexBox>\n    </FlexBox>\n  );\n};\n"],"mappings":";;;;;;AAMA,MAAaK,0BAAoB;CAE/B,MAAMC,UAAUH,cAAcD,OAAOE,0BAAAA,EAA4B,EAAE,CAAA;CAEnE,MAAMG,QAAQD,QAAQE;AAEtB,QACE,sBAAA,cAACR,SAAAA;EACCS,IAAG;EACHC,eAAc;EACdC,YAAW;EACXC,IAAI;EACJC,IAAI;EACJC,eAAY;EACZC,cAAW;IAEX,sBAAA,cAACf,SAAAA,EAAQa,IAAI,MACX,sBAAA,cAACN,OAAAA;EAAMS,eAAAA;EAAYC,OAAO;EAAIC,QAAQ;MAExC,sBAAA,cAAClB,SAAAA;EAAQU,eAAc;EAASC,YAAW;IACzC,sBAAA,cAACV,MAAAA;EAAKQ,IAAG;EAAIU,IAAI;IACdb,QAAQc,KAAI,EAEf,sBAAA,cAACnB,MAAAA,EAAKQ,IAAG,OAAKH,QAAQe,QAAO,CAAA,CAAA"}

package/dist/NotificationList/NotificationItem.cjs

@@ -0,0 +1,122 @@
+const require_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_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+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 = /* @__PURE__ */ (0, _emotion_styled.default)("a", {
+	target: "e1gtce5z0",
+	label: "brand-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 ", (0, _codecademy_gamut_styles.themed)("colors.navy"), ";}}&:hover{text-decoration:none;&:before{background-color:", ({ theme }) => theme.colors["gray-100"], ";}}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL05vdGlmaWNhdGlvbkxpc3QvTm90aWZpY2F0aW9uSXRlbS50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9Ob3RpZmljYXRpb25MaXN0L05vdGlmaWNhdGlvbkl0ZW0udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgRmxleEJveCwgSWNvbkJ1dHRvbiwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7XG4gIEdhbXV0SWNvblByb3BzLFxuICBNaW5pRGVsZXRlSWNvbixcbiAgTXVsdGlwbGVVc2Vyc0ljb24sXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7XG4gIEJlbGwsXG4gIENoYXRCb3gsXG4gIEVtYWlsQXQsXG4gIEVudmVsb3BlLFxuICBIZWFydCxcbiAgSWxsdXN0cmF0aW9uUHJvcHMsXG4gIE1lZ2FwaG9uZSxcbiAgTmV3LFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pbGx1c3RyYXRpb25zJztcbmltcG9ydCB7IENoZWNrZXJEZW5zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCB7IHRoZW1lZCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBSZWFjdEVsZW1lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IE5vdGlmaWNhdGlvbiB9IGZyb20gJy4vdHlwaW5ncyc7XG5cbmNvbnN0IFN0eWxlZExpbmsgPSBzdHlsZWQuYWBcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICBkaXNwbGF5OiBibG9jaztcbiAgei1pbmRleDogMTtcblxuICAmOmJlZm9yZSxcbiAgJjphZnRlciB7XG4gICAgdG9wOiAtMXB4O1xuICAgIGxlZnQ6IDA7XG4gICAgei1pbmRleDogMDtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiBjYWxjKDEwMCUgKyAycHgpO1xuICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQgMjUwbXM7XG4gIH1cbiAgJjpmb2N1cyB7XG4gICAgb3V0bGluZTogbm9uZTtcbiAgfVxuICAmOmZvY3VzLXZpc2libGUge1xuICAgICY6YWZ0ZXIge1xuICAgICAgYm9yZGVyLXJhZGl1czogNHB4O1xuICAgICAgYm9yZGVyOiAycHggc29saWQgJHt0aGVtZWQoJ2NvbG9ycy5uYXZ5Jyl9O1xuICAgIH1cbiAgfVxuICAmOmhvdmVyIHtcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgJjpiZWZvcmUge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ119O1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkSW1nID0gc3R5bGVkLmltZ2BcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lZCgnY29sb3JzLm5hdnknKX07XG4gIGhlaWdodDogM3JlbTtcbiAgd2lkdGg6IDNyZW07XG5gO1xuXG5jb25zdCBpc0ludGVybmFsTGluayA9IChocmVmOiBzdHJpbmcpID0+IHtcbiAgdHJ5IHtcbiAgICByZXR1cm4gbmV3IFVSTChocmVmKS5ob3N0bmFtZSA9PT0gd2luZG93LmxvY2F0aW9uLmhvc3RuYW1lO1xuICB9IGNhdGNoIChfZSkge31cbiAgcmV0dXJuIGZhbHNlO1xufTtcblxuZXhwb3J0IHR5cGUgTm90aWZpY2F0aW9uSXRlbVByb3BzID0ge1xuICBub3RpZmljYXRpb246IE5vdGlmaWNhdGlvbjtcbiAgaGFuZGxlQ2xpY2s/OiAoZXZlbnQ6IG9iamVjdCkgPT4gdm9pZDtcbiAgaGFuZGxlRGlzbWlzcz86ICgpID0+IHZvaWQ7XG59O1xuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uSXRlbTogUmVhY3QuRkM8Tm90aWZpY2F0aW9uSXRlbVByb3BzPiA9ICh7XG4gIGhhbmRsZURpc21pc3MsXG4gIG5vdGlmaWNhdGlvbixcbiAgaGFuZGxlQ2xpY2ssXG59KSA9PiB7XG4gIGNvbnN0IHsgZGF0ZSwgaW1hZ2VVcmwsIGxpbmssIHRleHQsIHR5cGUsIGlkIH0gPSBub3RpZmljYXRpb247XG4gIGNvbnN0IG5vdGlmaWNhdGlvbkl0ZW1JZCA9IGBOb3RpZmljYXRpb25JdGVtJHtpZH1gO1xuXG4gIGNvbnN0IHJlbmRlcklsbHVzdHJhdGlvbiA9IChJbGx1c3RyYXRpb246IFJlYWN0LkZDPElsbHVzdHJhdGlvblByb3BzPikgPT4gKFxuICAgIDxCb3ggZGlzcGxheT1cImlubGluZS1mbGV4XCIgYXJpYS1oaWRkZW4+XG4gICAgICA8SWxsdXN0cmF0aW9uIGhlaWdodD17NDh9IHdpZHRoPXs0OH0gLz5cbiAgICA8L0JveD5cbiAgKTtcblxuICBjb25zdCByZW5kZXJJY29uID0gKEljb246IFJlYWN0LkZDPEdhbXV0SWNvblByb3BzPikgPT4gKFxuICAgIDxCb3hcbiAgICAgIGRpc3BsYXk9XCJpbmxpbmUtZmxleFwiXG4gICAgICBqdXN0aWZ5Q29udGVudD1cImNlbnRlclwiXG4gICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgIGJvcmRlclJhZGl1cz1cImZ1bGxcIlxuICAgICAgYm9yZGVyPXsxfVxuICAgICAgd2lkdGg9ezUwfVxuICAgICAgaGVpZ2h0PXs1MH1cbiAgICAgIGFyaWEtaGlkZGVuXG4gICAgPlxuICAgICAgPEljb24gaGVpZ2h0PXsyMn0gd2lkdGg9ezIyfSAvPlxuICAgIDwvQm94PlxuICApO1xuXG4gIGNvbnN0IHJlbmRlckltYWdlID0gKCkgPT4ge1xuICAgIGlmIChpbWFnZVVybCkgcmV0dXJuIDxTdHlsZWRJbWcgc3JjPXtpbWFnZVVybH0gYWx0PVwiXCIgLz47XG5cbiAgICBzd2l0Y2ggKHR5cGUpIHtcbiAgICAgIGNhc2UgJ21hcmtldGluZ19ibGFzdCc6XG4gICAgICAgIHJldHVybiByZW5kZXJJbGx1c3RyYXRpb24oTWVnYXBob25lKTtcbiAgICAgIGNhc2UgJ2N1cnJpY3VsdW1fYmxhc3QnOlxuICAgICAgICByZXR1cm4gcmVuZGVySWxsdXN0cmF0aW9uKE5ldyk7XG4gICAgICBjYXNlICdjb2hvcnRfYmxhc3QnOlxuICAgICAgICByZXR1cm4gcmVuZGVySWNvbihNdWx0aXBsZVVzZXJzSWNvbik7XG4gICAgICBjYXNlICdmb3J1bV9jb21tZW50JzpcbiAgICAgICAgcmV0dXJuIHJlbmRlcklsbHVzdHJhdGlvbihDaGF0Qm94KTtcbiAgICAgIGNhc2UgJ2ZvcnVtX21lc3NhZ2UnOlxuICAgICAgICByZXR1cm4gcmVuZGVySWxsdXN0cmF0aW9uKEVudmVsb3BlKTtcbiAgICAgIGNhc2UgJ2ZvcnVtX2xpa2UnOlxuICAgICAgICByZXR1cm4gcmVuZGVySWxsdXN0cmF0aW9uKEhlYXJ0KTtcbiAgICAgIGNhc2UgJ2ZvcnVtX21lbnRpb24nOlxuICAgICAgICByZXR1cm4gcmVuZGVySWxsdXN0cmF0aW9uKEVtYWlsQXQpO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuIHJlbmRlcklsbHVzdHJhdGlvbihCZWxsKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3Qgbm90aWZpY2F0aW9uQ29udGVudDogUmVhY3RFbGVtZW50ID0gKFxuICAgIDxGbGV4Qm94IHpJbmRleD17MX0gcG9zaXRpb249XCJyZWxhdGl2ZVwiIHRleHRDb2xvcj1cInRleHRcIj5cbiAgICAgIHtyZW5kZXJJbWFnZSgpfVxuICAgICAgPEJveCBmbGV4PXsxfSBwbD17MTJ9PlxuICAgICAgICA8VGV4dCBpZD17bm90aWZpY2F0aW9uSXRlbUlkfSB2YXJpYW50PVwicC1zbWFsbFwiPlxuICAgICAgICAgIHt0ZXh0fVxuICAgICAgICA8L1RleHQ+XG4gICAgICAgIDxUZXh0IHZhcmlhbnQ9XCJwLXNtYWxsXCIgdGV4dENvbG9yPVwidGV4dC1zZWNvbmRhcnlcIiBtbD17NH0+XG4gICAgICAgICAge2RhdGV9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgIDwvQm94PlxuICAgIDwvRmxleEJveD5cbiAgKTtcblxuICBjb25zdCBkaXNtaXNzSWNvbjogUmVhY3RFbGVtZW50ID0gKFxuICAgIDxJY29uQnV0dG9uXG4gICAgICBpY29uPXtNaW5pRGVsZXRlSWNvbn1cbiAgICAgIG9uQ2xpY2s9e2hhbmRsZURpc21pc3N9XG4gICAgICBhcmlhLWRlc2NyaWJlZGJ5PXtub3RpZmljYXRpb25JdGVtSWR9XG4gICAgICBzaXplPVwic21hbGxcIlxuICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICB6LWluZGV4PXsxfVxuICAgICAgdGlwPVwiRGlzbWlzcyBub3RpZmljYXRpb25cIlxuICAgICAgdGlwUHJvcHM9e3sgYWxpZ25tZW50OiAnYm90dG9tLWNlbnRlcicsIHBsYWNlbWVudDogJ2Zsb2F0aW5nJyB9fVxuICAgIC8+XG4gICk7XG5cbiAgY29uc3Qgc2VwYXJhdG9yUGF0dGVybiA9IChcbiAgICA8Qm94IHB4PXszMn0gbT17MH0gYXJpYS1oaWRkZW49XCJ0cnVlXCI+XG4gICAgICA8Q2hlY2tlckRlbnNlIGhlaWdodD1cIjFweFwiIGRpc3BsYXk9XCJmbGV4XCIgLz5cbiAgICA8L0JveD5cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxsaT5cbiAgICAgIDxGbGV4Qm94XG4gICAgICAgIHB5PXsyNH1cbiAgICAgICAgcHg9ezMyfVxuICAgICAgICBhbGlnbkl0ZW1zPVwiZmxleC1zdGFydFwiXG4gICAgICAgIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiXG4gICAgICAgIHBvc2l0aW9uPVwicmVsYXRpdmVcIlxuICAgICAgPlxuICAgICAgICB7bGluayA/IChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPFN0eWxlZExpbmtcbiAgICAgICAgICAgICAgaHJlZj17bGlua31cbiAgICAgICAgICAgICAgYXJpYS1sYWJlbD17YCR7dGV4dH0sICR7ZGF0ZX0gYWdvYH1cbiAgICAgICAgICAgICAgcmVsPXtpc0ludGVybmFsTGluayhsaW5rKSA/ICcnIDogJ25vb3BlbmVyIG5vcmVmZXJyZXInfVxuICAgICAgICAgICAgICB0YXJnZXQ9e2lzSW50ZXJuYWxMaW5rKGxpbmspID8gJycgOiAnX2JsYW5rJ31cbiAgICAgICAgICAgICAgb25DbGljaz17KGV2ZW50KSA9PiBoYW5kbGVDbGljaz8uKGV2ZW50KX1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge25vdGlmaWNhdGlvbkNvbnRlbnR9XG4gICAgICAgICAgICA8L1N0eWxlZExpbms+XG4gICAgICAgICAgPC8+XG4gICAgICAgICkgOiAoXG4gICAgICAgICAgPD57bm90aWZpY2F0aW9uQ29udGVudH08Lz5cbiAgICAgICAgKX1cbiAgICAgICAgPEZsZXhCb3ggYWxpZ25JdGVtcz1cImZsZXgtc3RhcnRcIiB6SW5kZXg9ezF9PlxuICAgICAgICAgIHtoYW5kbGVEaXNtaXNzICYmIGRpc21pc3NJY29ufVxuICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICA8L0ZsZXhCb3g+XG4gICAgICB7c2VwYXJhdG9yUGF0dGVybn1cbiAgICA8L2xpPlxuICApO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3Qm1CIn0= */");
+const StyledImg = /* @__PURE__ */ (0, _emotion_styled.default)("img", {
+	target: "e1gtce5z1",
+	label: "brand-StyledImg"
+})("border-radius:50%;border:1px solid ", (0, _codecademy_gamut_styles.themed)("colors.navy"), ";height:3rem;width:3rem;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL05vdGlmaWNhdGlvbkxpc3QvTm90aWZpY2F0aW9uSXRlbS50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9Ob3RpZmljYXRpb25MaXN0L05vdGlmaWNhdGlvbkl0ZW0udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgRmxleEJveCwgSWNvbkJ1dHRvbiwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7XG4gIEdhbXV0SWNvblByb3BzLFxuICBNaW5pRGVsZXRlSWNvbixcbiAgTXVsdGlwbGVVc2Vyc0ljb24sXG59IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCB7XG4gIEJlbGwsXG4gIENoYXRCb3gsXG4gIEVtYWlsQXQsXG4gIEVudmVsb3BlLFxuICBIZWFydCxcbiAgSWxsdXN0cmF0aW9uUHJvcHMsXG4gIE1lZ2FwaG9uZSxcbiAgTmV3LFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1pbGx1c3RyYXRpb25zJztcbmltcG9ydCB7IENoZWNrZXJEZW5zZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXBhdHRlcm5zJztcbmltcG9ydCB7IHRoZW1lZCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBSZWFjdEVsZW1lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IE5vdGlmaWNhdGlvbiB9IGZyb20gJy4vdHlwaW5ncyc7XG5cbmNvbnN0IFN0eWxlZExpbmsgPSBzdHlsZWQuYWBcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICBkaXNwbGF5OiBibG9jaztcbiAgei1pbmRleDogMTtcblxuICAmOmJlZm9yZSxcbiAgJjphZnRlciB7XG4gICAgdG9wOiAtMXB4O1xuICAgIGxlZnQ6IDA7XG4gICAgei1pbmRleDogMDtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiBjYWxjKDEwMCUgKyAycHgpO1xuICAgIHRyYW5zaXRpb246IGJhY2tncm91bmQgMjUwbXM7XG4gIH1cbiAgJjpmb2N1cyB7XG4gICAgb3V0bGluZTogbm9uZTtcbiAgfVxuICAmOmZvY3VzLXZpc2libGUge1xuICAgICY6YWZ0ZXIge1xuICAgICAgYm9yZGVyLXJhZGl1czogNHB4O1xuICAgICAgYm9yZGVyOiAycHggc29saWQgJHt0aGVtZWQoJ2NvbG9ycy5uYXZ5Jyl9O1xuICAgIH1cbiAgfVxuICAmOmhvdmVyIHtcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgJjpiZWZvcmUge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnNbJ2dyYXktMTAwJ119O1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkSW1nID0gc3R5bGVkLmltZ2BcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lZCgnY29sb3JzLm5hdnknKX07XG4gIGhlaWdodDogM3JlbTtcbiAgd2lkdGg6IDNyZW07XG5gO1xuXG5jb25zdCBpc0ludGVybmFsTGluayA9IChocmVmOiBzdHJpbmcpID0+IHtcbiAgdHJ5IHtcbiAgICByZXR1cm4gbmV3IFVSTChocmVmKS5ob3N0bmFtZSA9PT0gd2luZG93LmxvY2F0aW9uLmhvc3RuYW1lO1xuICB9IGNhdGNoIChfZSkge31cbiAgcmV0dXJuIGZhbHNlO1xufTtcblxuZXhwb3J0IHR5cGUgTm90aWZpY2F0aW9uSXRlbVByb3BzID0ge1xuICBub3RpZmljYXRpb246IE5vdGlmaWNhdGlvbjtcbiAgaGFuZGxlQ2xpY2s/OiAoZXZlbnQ6IG9iamVjdCkgPT4gdm9pZDtcbiAgaGFuZGxlRGlzbWlzcz86ICgpID0+IHZvaWQ7XG59O1xuXG5leHBvcnQgY29uc3QgTm90aWZpY2F0aW9uSXRlbTogUmVhY3QuRkM8Tm90aWZpY2F0aW9uSXRlbVByb3BzPiA9ICh7XG4gIGhhbmRsZURpc21pc3MsXG4gIG5vdGlmaWNhdGlvbixcbiAgaGFuZGxlQ2xpY2ssXG59KSA9PiB7XG4gIGNvbnN0IHsgZGF0ZSwgaW1hZ2VVcmwsIGxpbmssIHRleHQsIHR5cGUsIGlkIH0gPSBub3RpZmljYXRpb247XG4gIGNvbnN0IG5vdGlmaWNhdGlvbkl0ZW1JZCA9IGBOb3RpZmljYXRpb25JdGVtJHtpZH1gO1xuXG4gIGNvbnN0IHJlbmRlcklsbHVzdHJhdGlvbiA9IChJbGx1c3RyYXRpb246IFJlYWN0LkZDPElsbHVzdHJhdGlvblByb3BzPikgPT4gKFxuICAgIDxCb3ggZGlzcGxheT1cImlubGluZS1mbGV4XCIgYXJpYS1oaWRkZW4+XG4gICAgICA8SWxsdXN0cmF0aW9uIGhlaWdodD17NDh9IHdpZHRoPXs0OH0gLz5cbiAgICA8L0JveD5cbiAgKTtcblxuICBjb25zdCByZW5kZXJJY29uID0gKEljb246IFJlYWN0LkZDPEdhbXV0SWNvblByb3BzPikgPT4gKFxuICAgIDxCb3hcbiAgICAgIGRpc3BsYXk9XCJpbmxpbmUtZmxleFwiXG4gICAgICBqdXN0aWZ5Q29udGVudD1cImNlbnRlclwiXG4gICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgIGJvcmRlclJhZGl1cz1cImZ1bGxcIlxuICAgICAgYm9yZGVyPXsxfVxuICAgICAgd2lkdGg9ezUwfVxuICAgICAgaGVpZ2h0PXs1MH1cbiAgICAgIGFyaWEtaGlkZGVuXG4gICAgPlxuICAgICAgPEljb24gaGVpZ2h0PXsyMn0gd2lkdGg9ezIyfSAvPlxuICAgIDwvQm94PlxuICApO1xuXG4gIGNvbnN0IHJlbmRlckltYWdlID0gKCkgPT4ge1xuICAgIGlmIChpbWFnZVVybCkgcmV0dXJuIDxTdHlsZWRJbWcgc3JjPXtpbWFnZVVybH0gYWx0PVwiXCIgLz47XG5cbiAgICBzd2l0Y2ggKHR5cGUpIHtcbiAgICAgIGNhc2UgJ21hcmtldGluZ19ibGFzdCc6XG4gICAgICAgIHJldHVybiByZW5kZXJJbGx1c3RyYXRpb24oTWVnYXBob25lKTtcbiAgICAgIGNhc2UgJ2N1cnJpY3VsdW1fYmxhc3QnOlxuICAgICAgICByZXR1cm4gcmVuZGVySWxsdXN0cmF0aW9uKE5ldyk7XG4gICAgICBjYXNlICdjb2hvcnRfYmxhc3QnOlxuICAgICAgICByZXR1cm4gcmVuZGVySWNvbihNdWx0aXBsZVVzZXJzSWNvbik7XG4gICAgICBjYXNlICdmb3J1bV9jb21tZW50JzpcbiAgICAgICAgcmV0dXJuIHJlbmRlcklsbHVzdHJhdGlvbihDaGF0Qm94KTtcbiAgICAgIGNhc2UgJ2ZvcnVtX21lc3NhZ2UnOlxuICAgICAgICByZXR1cm4gcmVuZGVySWxsdXN0cmF0aW9uKEVudmVsb3BlKTtcbiAgICAgIGNhc2UgJ2ZvcnVtX2xpa2UnOlxuICAgICAgICByZXR1cm4gcmVuZGVySWxsdXN0cmF0aW9uKEhlYXJ0KTtcbiAgICAgIGNhc2UgJ2ZvcnVtX21lbnRpb24nOlxuICAgICAgICByZXR1cm4gcmVuZGVySWxsdXN0cmF0aW9uKEVtYWlsQXQpO1xuICAgICAgZGVmYXVsdDpcbiAgICAgICAgcmV0dXJuIHJlbmRlcklsbHVzdHJhdGlvbihCZWxsKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3Qgbm90aWZpY2F0aW9uQ29udGVudDogUmVhY3RFbGVtZW50ID0gKFxuICAgIDxGbGV4Qm94IHpJbmRleD17MX0gcG9zaXRpb249XCJyZWxhdGl2ZVwiIHRleHRDb2xvcj1cInRleHRcIj5cbiAgICAgIHtyZW5kZXJJbWFnZSgpfVxuICAgICAgPEJveCBmbGV4PXsxfSBwbD17MTJ9PlxuICAgICAgICA8VGV4dCBpZD17bm90aWZpY2F0aW9uSXRlbUlkfSB2YXJpYW50PVwicC1zbWFsbFwiPlxuICAgICAgICAgIHt0ZXh0fVxuICAgICAgICA8L1RleHQ+XG4gICAgICAgIDxUZXh0IHZhcmlhbnQ9XCJwLXNtYWxsXCIgdGV4dENvbG9yPVwidGV4dC1zZWNvbmRhcnlcIiBtbD17NH0+XG4gICAgICAgICAge2RhdGV9XG4gICAgICAgIDwvVGV4dD5cbiAgICAgIDwvQm94PlxuICAgIDwvRmxleEJveD5cbiAgKTtcblxuICBjb25zdCBkaXNtaXNzSWNvbjogUmVhY3RFbGVtZW50ID0gKFxuICAgIDxJY29uQnV0dG9uXG4gICAgICBpY29uPXtNaW5pRGVsZXRlSWNvbn1cbiAgICAgIG9uQ2xpY2s9e2hhbmRsZURpc21pc3N9XG4gICAgICBhcmlhLWRlc2NyaWJlZGJ5PXtub3RpZmljYXRpb25JdGVtSWR9XG4gICAgICBzaXplPVwic21hbGxcIlxuICAgICAgdmFyaWFudD1cInNlY29uZGFyeVwiXG4gICAgICB6LWluZGV4PXsxfVxuICAgICAgdGlwPVwiRGlzbWlzcyBub3RpZmljYXRpb25cIlxuICAgICAgdGlwUHJvcHM9e3sgYWxpZ25tZW50OiAnYm90dG9tLWNlbnRlcicsIHBsYWNlbWVudDogJ2Zsb2F0aW5nJyB9fVxuICAgIC8+XG4gICk7XG5cbiAgY29uc3Qgc2VwYXJhdG9yUGF0dGVybiA9IChcbiAgICA8Qm94IHB4PXszMn0gbT17MH0gYXJpYS1oaWRkZW49XCJ0cnVlXCI+XG4gICAgICA8Q2hlY2tlckRlbnNlIGhlaWdodD1cIjFweFwiIGRpc3BsYXk9XCJmbGV4XCIgLz5cbiAgICA8L0JveD5cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxsaT5cbiAgICAgIDxGbGV4Qm94XG4gICAgICAgIHB5PXsyNH1cbiAgICAgICAgcHg9ezMyfVxuICAgICAgICBhbGlnbkl0ZW1zPVwiZmxleC1zdGFydFwiXG4gICAgICAgIGp1c3RpZnlDb250ZW50PVwic3BhY2UtYmV0d2VlblwiXG4gICAgICAgIHBvc2l0aW9uPVwicmVsYXRpdmVcIlxuICAgICAgPlxuICAgICAgICB7bGluayA/IChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPFN0eWxlZExpbmtcbiAgICAgICAgICAgICAgaHJlZj17bGlua31cbiAgICAgICAgICAgICAgYXJpYS1sYWJlbD17YCR7dGV4dH0sICR7ZGF0ZX0gYWdvYH1cbiAgICAgICAgICAgICAgcmVsPXtpc0ludGVybmFsTGluayhsaW5rKSA/ICcnIDogJ25vb3BlbmVyIG5vcmVmZXJyZXInfVxuICAgICAgICAgICAgICB0YXJnZXQ9e2lzSW50ZXJuYWxMaW5rKGxpbmspID8gJycgOiAnX2JsYW5rJ31cbiAgICAgICAgICAgICAgb25DbGljaz17KGV2ZW50KSA9PiBoYW5kbGVDbGljaz8uKGV2ZW50KX1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge25vdGlmaWNhdGlvbkNvbnRlbnR9XG4gICAgICAgICAgICA8L1N0eWxlZExpbms+XG4gICAgICAgICAgPC8+XG4gICAgICAgICkgOiAoXG4gICAgICAgICAgPD57bm90aWZpY2F0aW9uQ29udGVudH08Lz5cbiAgICAgICAgKX1cbiAgICAgICAgPEZsZXhCb3ggYWxpZ25JdGVtcz1cImZsZXgtc3RhcnRcIiB6SW5kZXg9ezF9PlxuICAgICAgICAgIHtoYW5kbGVEaXNtaXNzICYmIGRpc21pc3NJY29ufVxuICAgICAgICA8L0ZsZXhCb3g+XG4gICAgICA8L0ZsZXhCb3g+XG4gICAgICB7c2VwYXJhdG9yUGF0dGVybn1cbiAgICA8L2xpPlxuICApO1xufTtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5RGtCIn0= */");
+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__ */ react.createElement(_codecademy_gamut.Box, {
+		display: "inline-flex",
+		"aria-hidden": true
+	}, /* @__PURE__ */ react.createElement(Illustration, {
+		height: 48,
+		width: 48
+	}));
+	const renderIcon = (Icon) => /* @__PURE__ */ react.createElement(_codecademy_gamut.Box, {
+		display: "inline-flex",
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: "full",
+		border: 1,
+		width: 50,
+		height: 50,
+		"aria-hidden": true
+	}, /* @__PURE__ */ react.createElement(Icon, {
+		height: 22,
+		width: 22
+	}));
+	const renderImage = () => {
+		if (imageUrl) return /* @__PURE__ */ react.createElement(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__ */ react.createElement(_codecademy_gamut.FlexBox, {
+		zIndex: 1,
+		position: "relative",
+		textColor: "text"
+	}, renderImage(), /* @__PURE__ */ react.createElement(_codecademy_gamut.Box, {
+		flex: 1,
+		pl: 12
+	}, /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+		id: notificationItemId,
+		variant: "p-small"
+	}, text), /* @__PURE__ */ react.createElement(_codecademy_gamut.Text, {
+		variant: "p-small",
+		textColor: "text-secondary",
+		ml: 4
+	}, date)));
+	const dismissIcon = /* @__PURE__ */ react.createElement(_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__ */ react.createElement(_codecademy_gamut.Box, {
+		px: 32,
+		m: 0,
+		"aria-hidden": "true"
+	}, /* @__PURE__ */ react.createElement(_codecademy_gamut_patterns.CheckerDense, {
+		height: "1px",
+		display: "flex"
+	}));
+	return /* @__PURE__ */ react.createElement("li", null, /* @__PURE__ */ react.createElement(_codecademy_gamut.FlexBox, {
+		py: 24,
+		px: 32,
+		alignItems: "flex-start",
+		justifyContent: "space-between",
+		position: "relative"
+	}, link ? /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(StyledLink, {
+		href: link,
+		"aria-label": `${text}, ${date} ago`,
+		rel: isInternalLink(link) ? "" : "noopener noreferrer",
+		target: isInternalLink(link) ? "" : "_blank",
+		onClick: (event) => handleClick?.(event)
+	}, notificationContent)) : /* @__PURE__ */ react.createElement(react.Fragment, null, notificationContent), /* @__PURE__ */ react.createElement(_codecademy_gamut.FlexBox, {
+		alignItems: "flex-start",
+		zIndex: 1
+	}, handleDismiss && dismissIcon)), separatorPattern);
+};
+
+//#endregion
+exports.NotificationItem = NotificationItem;
+//# sourceMappingURL=NotificationItem.cjs.map

package/dist/NotificationList/NotificationItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.cjs","names":["Box","FlexBox","IconButton","Text","MiniDeleteIcon","MultipleUsersIcon","Bell","ChatBox","EmailAt","Envelope","Heart","Megaphone","New","CheckerDense","themed","styled","React","StyledLink","theme","colors","StyledImg","isInternalLink","href","URL","hostname","window","location","_e","NotificationItem","handleDismiss","notification","handleClick","date","imageUrl","link","text","type","id","notificationItemId","renderIllustration","Illustration","display","aria-hidden","height","width","renderIcon","Icon","justifyContent","alignItems","borderRadius","border","renderImage","src","alt","notificationContent","zIndex","position","textColor","flex","pl","variant","ml","dismissIcon","icon","onClick","aria-describedby","size","z-index","tip","tipProps","alignment","placement","separatorPattern","px","m","li","py","aria-label","rel","target","event"],"sources":["../../src/NotificationList/NotificationItem.tsx"],"sourcesContent":["import { Box, FlexBox, IconButton, Text } from '@codecademy/gamut';\nimport {\n  GamutIconProps,\n  MiniDeleteIcon,\n  MultipleUsersIcon,\n} from '@codecademy/gamut-icons';\nimport {\n  Bell,\n  ChatBox,\n  EmailAt,\n  Envelope,\n  Heart,\n  IllustrationProps,\n  Megaphone,\n  New,\n} from '@codecademy/gamut-illustrations';\nimport { CheckerDense } from '@codecademy/gamut-patterns';\nimport { themed } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { ReactElement } from 'react';\nimport * as React from 'react';\n\nimport { Notification } from './typings';\n\nconst StyledLink = styled.a`\n  text-decoration: none;\n  display: block;\n  z-index: 1;\n\n  &:before,\n  &:after {\n    top: -1px;\n    left: 0;\n    z-index: 0;\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: calc(100% + 2px);\n    transition: background 250ms;\n  }\n  &:focus {\n    outline: none;\n  }\n  &:focus-visible {\n    &:after {\n      border-radius: 4px;\n      border: 2px solid ${themed('colors.navy')};\n    }\n  }\n  &:hover {\n    text-decoration: none;\n    &:before {\n      background-color: ${({ theme }) => theme.colors['gray-100']};\n    }\n  }\n`;\n\nconst StyledImg = styled.img`\n  border-radius: 50%;\n  border: 1px solid ${themed('colors.navy')};\n  height: 3rem;\n  width: 3rem;\n`;\n\nconst isInternalLink = (href: string) => {\n  try {\n    return new URL(href).hostname === window.location.hostname;\n  } catch (_e) {}\n  return false;\n};\n\nexport type NotificationItemProps = {\n  notification: Notification;\n  handleClick?: (event: object) => void;\n  handleDismiss?: () => void;\n};\n\nexport const NotificationItem: React.FC<NotificationItemProps> = ({\n  handleDismiss,\n  notification,\n  handleClick,\n}) => {\n  const { date, imageUrl, link, text, type, id } = notification;\n  const notificationItemId = `NotificationItem${id}`;\n\n  const renderIllustration = (Illustration: React.FC<IllustrationProps>) => (\n    <Box display=\"inline-flex\" aria-hidden>\n      <Illustration height={48} width={48} />\n    </Box>\n  );\n\n  const renderIcon = (Icon: React.FC<GamutIconProps>) => (\n    <Box\n      display=\"inline-flex\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      borderRadius=\"full\"\n      border={1}\n      width={50}\n      height={50}\n      aria-hidden\n    >\n      <Icon height={22} width={22} />\n    </Box>\n  );\n\n  const renderImage = () => {\n    if (imageUrl) return <StyledImg src={imageUrl} alt=\"\" />;\n\n    switch (type) {\n      case 'marketing_blast':\n        return renderIllustration(Megaphone);\n      case 'curriculum_blast':\n        return renderIllustration(New);\n      case 'cohort_blast':\n        return renderIcon(MultipleUsersIcon);\n      case 'forum_comment':\n        return renderIllustration(ChatBox);\n      case 'forum_message':\n        return renderIllustration(Envelope);\n      case 'forum_like':\n        return renderIllustration(Heart);\n      case 'forum_mention':\n        return renderIllustration(EmailAt);\n      default:\n        return renderIllustration(Bell);\n    }\n  };\n\n  const notificationContent: ReactElement = (\n    <FlexBox zIndex={1} position=\"relative\" textColor=\"text\">\n      {renderImage()}\n      <Box flex={1} pl={12}>\n        <Text id={notificationItemId} variant=\"p-small\">\n          {text}\n        </Text>\n        <Text variant=\"p-small\" textColor=\"text-secondary\" ml={4}>\n          {date}\n        </Text>\n      </Box>\n    </FlexBox>\n  );\n\n  const dismissIcon: ReactElement = (\n    <IconButton\n      icon={MiniDeleteIcon}\n      onClick={handleDismiss}\n      aria-describedby={notificationItemId}\n      size=\"small\"\n      variant=\"secondary\"\n      z-index={1}\n      tip=\"Dismiss notification\"\n      tipProps={{ alignment: 'bottom-center', placement: 'floating' }}\n    />\n  );\n\n  const separatorPattern = (\n    <Box px={32} m={0} aria-hidden=\"true\">\n      <CheckerDense height=\"1px\" display=\"flex\" />\n    </Box>\n  );\n\n  return (\n    <li>\n      <FlexBox\n        py={24}\n        px={32}\n        alignItems=\"flex-start\"\n        justifyContent=\"space-between\"\n        position=\"relative\"\n      >\n        {link ? (\n          <>\n            <StyledLink\n              href={link}\n              aria-label={`${text}, ${date} ago`}\n              rel={isInternalLink(link) ? '' : 'noopener noreferrer'}\n              target={isInternalLink(link) ? '' : '_blank'}\n              onClick={(event) => handleClick?.(event)}\n            >\n              {notificationContent}\n            </StyledLink>\n          </>\n        ) : (\n          <>{notificationContent}</>\n        )}\n        <FlexBox alignItems=\"flex-start\" zIndex={1}>\n          {handleDismiss && dismissIcon}\n        </FlexBox>\n      </FlexBox>\n      {separatorPattern}\n    </li>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAMiB,aAAaF,6CAAAA,KAAAA;;;kTAsBc,cAAA,EAAA,+DAMN,EAAEG,YAAYA,MAAMC,OAAO,aAAW,OAAA,8yNAAA;AAKjE,MAAMC,YAAYL,6CAAAA,OAAAA;;;+EAEW,cAAA,EAAA,4BAAA,8yNAAA;AAK7B,MAAMM,kBAAkBC,SAAAA;AACtB,KAAI;AACF,SAAO,IAAIC,IAAID,KAAAA,CAAME,aAAaC,OAAOC,SAASF;UAC3CG,IAAI;AACb,QAAO;;AAST,MAAaC,oBAAqD,EAChEC,eACAC,cACAC,kBACD;CACC,MAAM,EAAEC,MAAMC,UAAUC,MAAMC,MAAMC,MAAMC,OAAOP;CACjD,MAAMQ,qBAAqB,mBAAmBD;CAE9C,MAAME,sBAAsBC,iBAC1B,sBAAA,cAACxC,uBAAAA;EAAIyC,SAAQ;EAAcC,eAAAA;IACzB,sBAAA,cAACF,cAAAA;EAAaG,QAAQ;EAAIC,OAAO;;CAIrC,MAAMC,cAAcC,SAClB,sBAAA,cAAC9C,uBAAAA;EACCyC,SAAQ;EACRM,gBAAe;EACfC,YAAW;EACXC,cAAa;EACbC,QAAQ;EACRN,OAAO;EACPD,QAAQ;EACRD,eAAAA;IAEA,sBAAA,cAACI,MAAAA;EAAKH,QAAQ;EAAIC,OAAO;;CAI7B,MAAMO,oBAAc;AAClB,MAAIlB,SAAU,QAAO,sBAAA,cAACb,WAAAA;GAAUgC,KAAKnB;GAAUoB,KAAI;;AAEnD,UAAQjB,MAAR;GACE,KAAK,kBACH,QAAOG,mBAAmB5B,0CAAAA;GAC5B,KAAK,mBACH,QAAO4B,mBAAmB3B,oCAAAA;GAC5B,KAAK,eACH,QAAOiC,WAAWxC,0CAAAA;GACpB,KAAK,gBACH,QAAOkC,mBAAmBhC,wCAAAA;GAC5B,KAAK,gBACH,QAAOgC,mBAAmB9B,yCAAAA;GAC5B,KAAK,aACH,QAAO8B,mBAAmB7B,sCAAAA;GAC5B,KAAK,gBACH,QAAO6B,mBAAmB/B,wCAAAA;GAC5B,QACE,QAAO+B,mBAAmBjC,qCAAAA;;;CAIhC,MAAMgD,sBACJ,sBAAA,cAACrD,2BAAAA;EAAQsD,QAAQ;EAAGC,UAAS;EAAWC,WAAU;IAC/CN,aAAAA,EACD,sBAAA,cAACnD,uBAAAA;EAAI0D,MAAM;EAAGC,IAAI;IAChB,sBAAA,cAACxD,wBAAAA;EAAKkC,IAAIC;EAAoBsB,SAAQ;IACnCzB,KAAAA,EAEH,sBAAA,cAAChC,wBAAAA;EAAKyD,SAAQ;EAAUH,WAAU;EAAiBI,IAAI;IACpD7B,KAAAA,CAAAA,CAAAA;CAMT,MAAM8B,cACJ,sBAAA,cAAC5D,8BAAAA;EACC6D,MAAM3D;EACN4D,SAASnC;EACToC,oBAAkB3B;EAClB4B,MAAK;EACLN,SAAQ;EACRO,WAAS;EACTC,KAAI;EACJC,UAAU;GAAEC,WAAW;GAAiBC,WAAW;GAAW;;CAIlE,MAAMC,mBACJ,sBAAA,cAACxE,uBAAAA;EAAIyE,IAAI;EAAIC,GAAG;EAAGhC,eAAY;IAC7B,sBAAA,cAAC7B,yCAAAA;EAAa8B,QAAO;EAAMF,SAAQ;;AAIvC,QACE,sBAAA,cAACkC,MAAAA,MACC,sBAAA,cAAC1E,2BAAAA;EACC2E,IAAI;EACJH,IAAI;EACJzB,YAAW;EACXD,gBAAe;EACfS,UAAS;IAERtB,OACC,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACjB,YAAAA;EACCK,MAAMY;EACN2C,cAAY,GAAG1C,KAAK,IAAIH,KAAK;EAC7B8C,KAAKzD,eAAea,KAAAA,GAAQ,KAAK;EACjC6C,QAAQ1D,eAAea,KAAAA,GAAQ,KAAK;EACpC8B,UAAUgB,UAAUjD,cAAciD,MAAAA;IAEjC1B,oBAAAA,CAAAA,GAIL,sBAAA,cAAA,MAAA,UAAA,MAAGA,oBAAAA,EAEL,sBAAA,cAACrD,2BAAAA;EAAQ+C,YAAW;EAAaO,QAAQ;IACtC1B,iBAAiBiC,YAAAA,CAAAA,EAGrBU,iBAAAA"}

package/dist/NotificationList/NotificationItem.d.cts

@@ -0,0 +1,13 @@
+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 };
+//# sourceMappingURL=NotificationItem.d.cts.map

package/dist/NotificationList/NotificationItem.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.d.cts","names":[],"sources":["../../src/NotificationList/NotificationItem.tsx"],"mappings":";;;;KAuEY,qBAAA;EACV,YAAA,EAAc,YAAA;EACd,WAAA,IAAe,KAAA;EACf,aAAA;AAAA;AAAA,cAGW,gBAAA,EAAkB,OAAA,CAAM,EAAA,CAAG,qBAAA"}

package/dist/NotificationList/NotificationItem.d.ts

@@ -1,8 +1,13 @@
-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 };
+//# sourceMappingURL=NotificationItem.d.ts.map

package/dist/NotificationList/NotificationItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.d.ts","names":[],"sources":["../../src/NotificationList/NotificationItem.tsx"],"mappings":";;;;KAuEY,qBAAA;EACV,YAAA,EAAc,YAAA;EACd,WAAA,IAAe,KAAA;EACf,aAAA;AAAA;AAAA,cAGW,gBAAA,EAAkB,OAAA,CAAM,EAAA,CAAG,qBAAA"}