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

package/dist/NotificationList/NotificationItem.js

@@ -1,151 +1,119 @@
-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;
+import { Box, FlexBox, IconButton, Text } from "@codecademy/gamut";
+import { themed } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import * as React$1 from "react";
+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 = /* @__PURE__ */ styled("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 ", 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__ */ styled("img", {
+	target: "e1gtce5z1",
+	label: "brand-StyledImg"
+})("border-radius:50%;border:1px solid ", 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;
 };
-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);
-    }
-  };
-  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]
-  });
-};
+const NotificationItem = ({ handleDismiss, notification, handleClick }) => {
+	const { date, imageUrl, link, text, type, id } = notification;
+	const notificationItemId = `NotificationItem${id}`;
+	const renderIllustration = (Illustration) => /* @__PURE__ */ React$1.createElement(Box, {
+		display: "inline-flex",
+		"aria-hidden": true
+	}, /* @__PURE__ */ React$1.createElement(Illustration, {
+		height: 48,
+		width: 48
+	}));
+	const renderIcon = (Icon) => /* @__PURE__ */ React$1.createElement(Box, {
+		display: "inline-flex",
+		justifyContent: "center",
+		alignItems: "center",
+		borderRadius: "full",
+		border: 1,
+		width: 50,
+		height: 50,
+		"aria-hidden": true
+	}, /* @__PURE__ */ React$1.createElement(Icon, {
+		height: 22,
+		width: 22
+	}));
+	const renderImage = () => {
+		if (imageUrl) return /* @__PURE__ */ React$1.createElement(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__ */ React$1.createElement(FlexBox, {
+		zIndex: 1,
+		position: "relative",
+		textColor: "text"
+	}, renderImage(), /* @__PURE__ */ React$1.createElement(Box, {
+		flex: 1,
+		pl: 12
+	}, /* @__PURE__ */ React$1.createElement(Text, {
+		id: notificationItemId,
+		variant: "p-small"
+	}, text), /* @__PURE__ */ React$1.createElement(Text, {
+		variant: "p-small",
+		textColor: "text-secondary",
+		ml: 4
+	}, date)));
+	const dismissIcon = /* @__PURE__ */ React$1.createElement(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__ */ React$1.createElement(Box, {
+		px: 32,
+		m: 0,
+		"aria-hidden": "true"
+	}, /* @__PURE__ */ React$1.createElement(CheckerDense, {
+		height: "1px",
+		display: "flex"
+	}));
+	return /* @__PURE__ */ React$1.createElement("li", null, /* @__PURE__ */ React$1.createElement(FlexBox, {
+		py: 24,
+		px: 32,
+		alignItems: "flex-start",
+		justifyContent: "space-between",
+		position: "relative"
+	}, link ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.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$1.createElement(React$1.Fragment, null, notificationContent), /* @__PURE__ */ React$1.createElement(FlexBox, {
+		alignItems: "flex-start",
+		zIndex: 1
+	}, handleDismiss && dismissIcon)), separatorPattern);
+};
+
+//#endregion
+export { NotificationItem };
+//# sourceMappingURL=NotificationItem.js.map

package/dist/NotificationList/NotificationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.js","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,uBAAAA,KAAAA;;;6QAsBOD,OAAO,cAAA,EAAA,+DAMN,EAAEI,YAAYA,MAAMC,OAAO,aAAW,OAAA,8yNAAA;AAKjE,MAAMC,YAAYL,uBAAAA,OAAAA;;;0CAEID,OAAO,cAAA,EAAA,4BAAA,8yNAAA;AAK7B,MAAMO,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,wBAAA,cAACxC,KAAAA;EAAIyC,SAAQ;EAAcC,eAAAA;IACzB,wBAAA,cAACF,cAAAA;EAAaG,QAAQ;EAAIC,OAAO;;CAIrC,MAAMC,cAAcC,SAClB,wBAAA,cAAC9C,KAAAA;EACCyC,SAAQ;EACRM,gBAAe;EACfC,YAAW;EACXC,cAAa;EACbC,QAAQ;EACRN,OAAO;EACPD,QAAQ;EACRD,eAAAA;IAEA,wBAAA,cAACI,MAAAA;EAAKH,QAAQ;EAAIC,OAAO;;CAI7B,MAAMO,oBAAc;AAClB,MAAIlB,SAAU,QAAO,wBAAA,cAACb,WAAAA;GAAUgC,KAAKnB;GAAUoB,KAAI;;AAEnD,UAAQjB,MAAR;GACE,KAAK,kBACH,QAAOG,mBAAmB5B,UAAAA;GAC5B,KAAK,mBACH,QAAO4B,mBAAmB3B,IAAAA;GAC5B,KAAK,eACH,QAAOiC,WAAWxC,kBAAAA;GACpB,KAAK,gBACH,QAAOkC,mBAAmBhC,QAAAA;GAC5B,KAAK,gBACH,QAAOgC,mBAAmB9B,SAAAA;GAC5B,KAAK,aACH,QAAO8B,mBAAmB7B,MAAAA;GAC5B,KAAK,gBACH,QAAO6B,mBAAmB/B,QAAAA;GAC5B,QACE,QAAO+B,mBAAmBjC,KAAAA;;;CAIhC,MAAMgD,sBACJ,wBAAA,cAACrD,SAAAA;EAAQsD,QAAQ;EAAGC,UAAS;EAAWC,WAAU;IAC/CN,aAAAA,EACD,wBAAA,cAACnD,KAAAA;EAAI0D,MAAM;EAAGC,IAAI;IAChB,wBAAA,cAACxD,MAAAA;EAAKkC,IAAIC;EAAoBsB,SAAQ;IACnCzB,KAAAA,EAEH,wBAAA,cAAChC,MAAAA;EAAKyD,SAAQ;EAAUH,WAAU;EAAiBI,IAAI;IACpD7B,KAAAA,CAAAA,CAAAA;CAMT,MAAM8B,cACJ,wBAAA,cAAC5D,YAAAA;EACC6D,MAAM3D;EACN4D,SAASnC;EACToC,oBAAkB3B;EAClB4B,MAAK;EACLN,SAAQ;EACRO,WAAS;EACTC,KAAI;EACJC,UAAU;GAAEC,WAAW;GAAiBC,WAAW;GAAW;;CAIlE,MAAMC,mBACJ,wBAAA,cAACxE,KAAAA;EAAIyE,IAAI;EAAIC,GAAG;EAAGhC,eAAY;IAC7B,wBAAA,cAAC7B,cAAAA;EAAa8B,QAAO;EAAMF,SAAQ;;AAIvC,QACE,wBAAA,cAACkC,MAAAA,MACC,wBAAA,cAAC1E,SAAAA;EACC2E,IAAI;EACJH,IAAI;EACJzB,YAAW;EACXD,gBAAe;EACfS,UAAS;IAERtB,OACC,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,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,wBAAA,cAAA,QAAA,UAAA,MAAGA,oBAAAA,EAEL,wBAAA,cAACrD,SAAAA;EAAQ+C,YAAW;EAAaO,QAAQ;IACtC1B,iBAAiBiC,YAAAA,CAAAA,EAGrBU,iBAAAA"}

package/dist/NotificationList/index.cjs

@@ -0,0 +1,48 @@
+const require_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_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let lodash_isEmpty = require("lodash/isEmpty");
+lodash_isEmpty = require_runtime.__toESM(lodash_isEmpty);
+
+//#region src/NotificationList/index.tsx
+const listFocusStyle = (0, _codecademy_gamut.focusVisibleStyle)("-4px");
+const UnstyledUnorderedList = /* @__PURE__ */ (0, _emotion_styled.default)(_codecademy_gamut_styles.Background, {
+	target: "ejex5j30",
+	label: "brand-UnstyledUnorderedList"
+})((0, _codecademy_gamut_styles.css)({
+	listStyle: "none",
+	padding: 0,
+	margin: 0,
+	...listFocusStyle
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL05vdGlmaWNhdGlvbkxpc3QvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvTm90aWZpY2F0aW9uTGlzdC9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZm9jdXNWaXNpYmxlU3R5bGUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBCYWNrZ3JvdW5kLCBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IGlzRW1wdHkgZnJvbSAnbG9kYXNoL2lzRW1wdHknO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBFbXB0eU5vdGlmaWNhdGlvbiB9IGZyb20gJy4vRW1wdHlOb3RpZmljYXRpb24nO1xuaW1wb3J0IHsgTm90aWZpY2F0aW9uSXRlbSB9IGZyb20gJy4vTm90aWZpY2F0aW9uSXRlbSc7XG5pbXBvcnQgeyBOb3RpZmljYXRpb24gfSBmcm9tICcuL3R5cGluZ3MnO1xuXG5leHBvcnQgdHlwZSBOb3RpZmljYXRpb25MaXN0UHJvcHMgPSB7XG4gIG9uRGlzbWlzcz86IChub3RpZmljYXRpb246IE5vdGlmaWNhdGlvbikgPT4gdm9pZDtcbiAgbm90aWZpY2F0aW9uczogTm90aWZpY2F0aW9uW107XG4gIG9uTm90aWZpY2F0aW9uQ2xpY2s/OiAobm90aWZpY2F0aW9uOiBOb3RpZmljYXRpb24pID0+IHZvaWQ7XG4gIGhlYWRlckVsZW1lbnRJZD86IHN0cmluZzsgLy8gVXNlZCBmb3IgYXJpYS1sYWJlbGxlZGJ5IGZvciB0aGUgbGlzdC5cbn07XG5cbmNvbnN0IGxpc3RGb2N1c1N0eWxlID0gZm9jdXNWaXNpYmxlU3R5bGUoJy00cHgnKTtcblxuY29uc3QgVW5zdHlsZWRVbm9yZGVyZWRMaXN0ID0gc3R5bGVkKEJhY2tncm91bmQpKFxuICBjc3Moe1xuICAgIGxpc3RTdHlsZTogJ25vbmUnLFxuICAgIHBhZGRpbmc6IDAsXG4gICAgbWFyZ2luOiAwLFxuICAgIC4uLmxpc3RGb2N1c1N0eWxlLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IE5vdGlmaWNhdGlvbkxpc3Q6IFJlYWN0LkZDPE5vdGlmaWNhdGlvbkxpc3RQcm9wcz4gPSAoe1xuICBub3RpZmljYXRpb25zLFxuICBvbk5vdGlmaWNhdGlvbkNsaWNrLFxuICBvbkRpc21pc3MsXG4gIGhlYWRlckVsZW1lbnRJZCxcbn0pID0+IHtcbiAgY29uc3QgbGlzdFJlZiA9IFJlYWN0LnVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IG9uRGlzbWlzc0hhbmRsZXIgPSBhc3luYyAobm90aWZpY2F0aW9uOiBOb3RpZmljYXRpb24pID0+IHtcbiAgICBpZiAobGlzdFJlZj8uY3VycmVudCkge1xuICAgICAgYXdhaXQgbGlzdFJlZi5jdXJyZW50LmZvY3VzKCk7XG4gICAgfVxuICAgIGF3YWl0IG9uRGlzbWlzcz8uKG5vdGlmaWNhdGlvbik7XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8VW5zdHlsZWRVbm9yZGVyZWRMaXN0XG4gICAgICBhcmlhLWxhYmVsbGVkYnk9e2hlYWRlckVsZW1lbnRJZH1cbiAgICAgIGFyaWEtbGl2ZT1cInBvbGl0ZVwiXG4gICAgICBhcmlhLXJlbGV2YW50PVwiYWRkaXRpb25zXCJcbiAgICAgIGFzPVwidWxcIlxuICAgICAgYmc9XCJiYWNrZ3JvdW5kXCJcbiAgICAgIHJlZj17bGlzdFJlZn1cbiAgICAgIHRhYkluZGV4PXstMX1cbiAgICA+XG4gICAgICB7aXNFbXB0eShub3RpZmljYXRpb25zKSA/IChcbiAgICAgICAgPEVtcHR5Tm90aWZpY2F0aW9uIC8+XG4gICAgICApIDogKFxuICAgICAgICBub3RpZmljYXRpb25zLm1hcCgobm90aWZpY2F0aW9uOiBOb3RpZmljYXRpb24pID0+IChcbiAgICAgICAgICA8Tm90aWZpY2F0aW9uSXRlbVxuICAgICAgICAgICAga2V5PXtub3RpZmljYXRpb24uaWR9XG4gICAgICAgICAgICBub3RpZmljYXRpb249e25vdGlmaWNhdGlvbn1cbiAgICAgICAgICAgIGhhbmRsZUNsaWNrPXsoKSA9PiBvbk5vdGlmaWNhdGlvbkNsaWNrPy4obm90aWZpY2F0aW9uKX1cbiAgICAgICAgICAgIGhhbmRsZURpc21pc3M9eygpID0+IG9uRGlzbWlzc0hhbmRsZXIobm90aWZpY2F0aW9uKX1cbiAgICAgICAgICAvPlxuICAgICAgICApKVxuICAgICAgKX1cbiAgICA8L1Vuc3R5bGVkVW5vcmRlcmVkTGlzdD5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUI4QiJ9 */");
+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__ */ react.createElement(UnstyledUnorderedList, {
+		"aria-labelledby": headerElementId,
+		"aria-live": "polite",
+		"aria-relevant": "additions",
+		as: "ul",
+		bg: "background",
+		ref: listRef,
+		tabIndex: -1
+	}, (0, lodash_isEmpty.default)(notifications) ? /* @__PURE__ */ react.createElement(require_index.EmptyNotification, null) : notifications.map((notification) => /* @__PURE__ */ react.createElement(require_NotificationItem.NotificationItem, {
+		key: notification.id,
+		notification,
+		handleClick: () => onNotificationClick?.(notification),
+		handleDismiss: () => onDismissHandler(notification)
+	})));
+};
+
+//#endregion
+exports.NotificationList = NotificationList;
+//# sourceMappingURL=index.cjs.map

package/dist/NotificationList/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["focusVisibleStyle","Background","css","styled","isEmpty","React","EmptyNotification","NotificationItem","listFocusStyle","UnstyledUnorderedList","listStyle","padding","margin","NotificationList","notifications","onNotificationClick","onDismiss","headerElementId","listRef","useRef","onDismissHandler","notification","current","focus","aria-labelledby","aria-live","aria-relevant","as","bg","ref","tabIndex","map","key","id","handleClick","handleDismiss"],"sources":["../../src/NotificationList/index.tsx"],"sourcesContent":["import { focusVisibleStyle } from '@codecademy/gamut';\nimport { Background, css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport isEmpty from 'lodash/isEmpty';\nimport * as React from 'react';\n\nimport { EmptyNotification } from './EmptyNotification';\nimport { NotificationItem } from './NotificationItem';\nimport { Notification } from './typings';\n\nexport type NotificationListProps = {\n  onDismiss?: (notification: Notification) => void;\n  notifications: Notification[];\n  onNotificationClick?: (notification: Notification) => void;\n  headerElementId?: string; // Used for aria-labelledby for the list.\n};\n\nconst listFocusStyle = focusVisibleStyle('-4px');\n\nconst UnstyledUnorderedList = styled(Background)(\n  css({\n    listStyle: 'none',\n    padding: 0,\n    margin: 0,\n    ...listFocusStyle,\n  })\n);\n\nexport const NotificationList: React.FC<NotificationListProps> = ({\n  notifications,\n  onNotificationClick,\n  onDismiss,\n  headerElementId,\n}) => {\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const onDismissHandler = async (notification: Notification) => {\n    if (listRef?.current) {\n      await listRef.current.focus();\n    }\n    await onDismiss?.(notification);\n  };\n\n  return (\n    <UnstyledUnorderedList\n      aria-labelledby={headerElementId}\n      aria-live=\"polite\"\n      aria-relevant=\"additions\"\n      as=\"ul\"\n      bg=\"background\"\n      ref={listRef}\n      tabIndex={-1}\n    >\n      {isEmpty(notifications) ? (\n        <EmptyNotification />\n      ) : (\n        notifications.map((notification: Notification) => (\n          <NotificationItem\n            key={notification.id}\n            notification={notification}\n            handleClick={() => onNotificationClick?.(notification)}\n            handleDismiss={() => onDismissHandler(notification)}\n          />\n        ))\n      )}\n    </UnstyledUnorderedList>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAMQ,0DAAmC,OAAA;AAEzC,MAAMC,wBAAwBN,6CAAOF,qCAAAA;;;qCAC/B;CACFS,WAAW;CACXC,SAAS;CACTC,QAAQ;CACR,GAAGJ;CACL,CAAA,EAAA,s6FAAA;AAGF,MAAaK,oBAAqD,EAChEC,eACAC,qBACAC,WACAC,sBACD;CACC,MAAMC,UAAUb,MAAMc,OAAuB,KAAA;CAC7C,MAAMC,mBAAmB,OAAOC,iBAAAA;AAC9B,MAAIH,SAASI,QACX,OAAMJ,QAAQI,QAAQC,OAAK;AAE7B,QAAMP,YAAYK,aAAAA;;AAGpB,QACE,sBAAA,cAACZ,uBAAAA;EACCe,mBAAiBP;EACjBQ,aAAU;EACVC,iBAAc;EACdC,IAAG;EACHC,IAAG;EACHC,KAAKX;EACLY,UAAU;gCAEDhB,cAAAA,GACP,sBAAA,cAACR,iCAAAA,KAAAA,GAEDQ,cAAciB,KAAKV,iBACjB,sBAAA,cAACd,2CAAAA;EACCyB,KAAKX,aAAaY;EACJZ;EACda,mBAAmBnB,sBAAsBM,aAAAA;EACzCc,qBAAqBf,iBAAiBC,aAAAA"}

package/dist/NotificationList/index.d.cts

@@ -0,0 +1,14 @@
+import { Notification } from "./typings.cjs";
+import * as React$1 from "react";
+
+//#region src/NotificationList/index.d.ts
+type NotificationListProps = {
+  onDismiss?: (notification: Notification) => void;
+  notifications: Notification[];
+  onNotificationClick?: (notification: Notification) => void;
+  headerElementId?: string;
+};
+declare const NotificationList: React$1.FC<NotificationListProps>;
+//#endregion
+export { NotificationList, NotificationListProps };
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/NotificationList/index.tsx"],"mappings":";;;;KAUY,qBAAA;EACV,SAAA,IAAa,YAAA,EAAc,YAAA;EAC3B,aAAA,EAAe,YAAA;EACf,mBAAA,IAAuB,YAAA,EAAc,YAAA;EACrC,eAAA;AAAA;AAAA,cAcW,gBAAA,EAAkB,OAAA,CAAM,EAAA,CAAG,qBAAA"}

package/dist/NotificationList/index.d.ts

@@ -1,9 +1,14 @@
-import * as React from 'react';
-import { Notification } from './typings';
-export type NotificationListProps = {
-    onDismiss?: (notification: Notification) => void;
-    notifications: Notification[];
-    onNotificationClick?: (notification: Notification) => void;
-    headerElementId?: string;
+import { Notification } from "./typings.js";
+import * as React$1 from "react";
+
+//#region src/NotificationList/index.d.ts
+type NotificationListProps = {
+  onDismiss?: (notification: Notification) => void;
+  notifications: Notification[];
+  onNotificationClick?: (notification: Notification) => void;
+  headerElementId?: string;
 };
-export declare const NotificationList: React.FC<NotificationListProps>;
+declare const NotificationList: React$1.FC<NotificationListProps>;
+//#endregion
+export { NotificationList, NotificationListProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/NotificationList/index.tsx"],"mappings":";;;;KAUY,qBAAA;EACV,SAAA,IAAa,YAAA,EAAc,YAAA;EAC3B,aAAA,EAAe,YAAA;EACf,mBAAA,IAAuB,YAAA,EAAc,YAAA;EACrC,eAAA;AAAA;AAAA,cAcW,gBAAA,EAAkB,OAAA,CAAM,EAAA,CAAG,qBAAA"}

package/dist/NotificationList/index.js

@@ -1,46 +1,44 @@
-import _styled from "@emotion/styled/base";
-import { focusVisibleStyle } from '@codecademy/gamut';
-import { Background, css } from '@codecademy/gamut-styles';
-import isEmpty from 'lodash/isEmpty';
-import * as React from 'react';
-import { EmptyNotification } from './EmptyNotification';
-import { NotificationItem } from './NotificationItem';
-import { jsx as _jsx } from "react/jsx-runtime";
-const listFocusStyle = focusVisibleStyle('-4px');
-const UnstyledUnorderedList = /*#__PURE__*/_styled(Background, {
-  target: "e1xane310",
-  label: "UnstyledUnorderedList"
+import { EmptyNotification } from "./EmptyNotification/index.js";
+import { NotificationItem } from "./NotificationItem.js";
+import { focusVisibleStyle } from "@codecademy/gamut";
+import { Background, css } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+import * as React$1 from "react";
+import isEmpty from "lodash/isEmpty";
+
+//#region src/NotificationList/index.tsx
+const listFocusStyle = focusVisibleStyle("-4px");
+const UnstyledUnorderedList = /* @__PURE__ */ styled(Background, {
+	target: "ejex5j30",
+	label: "brand-UnstyledUnorderedList"
 })(css({
-  listStyle: 'none',
-  padding: 0,
-  margin: 0,
-  ...listFocusStyle
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ob3RpZmljYXRpb25MaXN0L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQjhCIiwiZmlsZSI6Ii4uLy4uL3NyYy9Ob3RpZmljYXRpb25MaXN0L2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGZvY3VzVmlzaWJsZVN0eWxlIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHsgQmFja2dyb3VuZCwgY3NzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBpc0VtcHR5IGZyb20gJ2xvZGFzaC9pc0VtcHR5JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgRW1wdHlOb3RpZmljYXRpb24gfSBmcm9tICcuL0VtcHR5Tm90aWZpY2F0aW9uJztcbmltcG9ydCB7IE5vdGlmaWNhdGlvbkl0ZW0gfSBmcm9tICcuL05vdGlmaWNhdGlvbkl0ZW0nO1xuaW1wb3J0IHsgTm90aWZpY2F0aW9uIH0gZnJvbSAnLi90eXBpbmdzJztcblxuZXhwb3J0IHR5cGUgTm90aWZpY2F0aW9uTGlzdFByb3BzID0ge1xuICBvbkRpc21pc3M/OiAobm90aWZpY2F0aW9uOiBOb3RpZmljYXRpb24pID0+IHZvaWQ7XG4gIG5vdGlmaWNhdGlvbnM6IE5vdGlmaWNhdGlvbltdO1xuICBvbk5vdGlmaWNhdGlvbkNsaWNrPzogKG5vdGlmaWNhdGlvbjogTm90aWZpY2F0aW9uKSA9PiB2b2lkO1xuICBoZWFkZXJFbGVtZW50SWQ/OiBzdHJpbmc7IC8vIFVzZWQgZm9yIGFyaWEtbGFiZWxsZWRieSBmb3IgdGhlIGxpc3QuXG59O1xuXG5jb25zdCBsaXN0Rm9jdXNTdHlsZSA9IGZvY3VzVmlzaWJsZVN0eWxlKCctNHB4Jyk7XG5cbmNvbnN0IFVuc3R5bGVkVW5vcmRlcmVkTGlzdCA9IHN0eWxlZChCYWNrZ3JvdW5kKShcbiAgY3NzKHtcbiAgICBsaXN0U3R5bGU6ICdub25lJyxcbiAgICBwYWRkaW5nOiAwLFxuICAgIG1hcmdpbjogMCxcbiAgICAuLi5saXN0Rm9jdXNTdHlsZSxcbiAgfSlcbik7XG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25MaXN0OiBSZWFjdC5GQzxOb3RpZmljYXRpb25MaXN0UHJvcHM+ID0gKHtcbiAgbm90aWZpY2F0aW9ucyxcbiAgb25Ob3RpZmljYXRpb25DbGljayxcbiAgb25EaXNtaXNzLFxuICBoZWFkZXJFbGVtZW50SWQsXG59KSA9PiB7XG4gIGNvbnN0IGxpc3RSZWYgPSBSZWFjdC51c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCBvbkRpc21pc3NIYW5kbGVyID0gYXN5bmMgKG5vdGlmaWNhdGlvbjogTm90aWZpY2F0aW9uKSA9PiB7XG4gICAgaWYgKGxpc3RSZWY/LmN1cnJlbnQpIHtcbiAgICAgIGF3YWl0IGxpc3RSZWYuY3VycmVudC5mb2N1cygpO1xuICAgIH1cbiAgICBhd2FpdCBvbkRpc21pc3M/Lihub3RpZmljYXRpb24pO1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPFVuc3R5bGVkVW5vcmRlcmVkTGlzdFxuICAgICAgYXJpYS1sYWJlbGxlZGJ5PXtoZWFkZXJFbGVtZW50SWR9XG4gICAgICBhcmlhLWxpdmU9XCJwb2xpdGVcIlxuICAgICAgYXJpYS1yZWxldmFudD1cImFkZGl0aW9uc1wiXG4gICAgICBhcz1cInVsXCJcbiAgICAgIGJnPVwiYmFja2dyb3VuZFwiXG4gICAgICByZWY9e2xpc3RSZWZ9XG4gICAgICB0YWJJbmRleD17LTF9XG4gICAgPlxuICAgICAge2lzRW1wdHkobm90aWZpY2F0aW9ucykgPyAoXG4gICAgICAgIDxFbXB0eU5vdGlmaWNhdGlvbiAvPlxuICAgICAgKSA6IChcbiAgICAgICAgbm90aWZpY2F0aW9ucy5tYXAoKG5vdGlmaWNhdGlvbjogTm90aWZpY2F0aW9uKSA9PiAoXG4gICAgICAgICAgPE5vdGlmaWNhdGlvbkl0ZW1cbiAgICAgICAgICAgIGtleT17bm90aWZpY2F0aW9uLmlkfVxuICAgICAgICAgICAgbm90aWZpY2F0aW9uPXtub3RpZmljYXRpb259XG4gICAgICAgICAgICBoYW5kbGVDbGljaz17KCkgPT4gb25Ob3RpZmljYXRpb25DbGljaz8uKG5vdGlmaWNhdGlvbil9XG4gICAgICAgICAgICBoYW5kbGVEaXNtaXNzPXsoKSA9PiBvbkRpc21pc3NIYW5kbGVyKG5vdGlmaWNhdGlvbil9XG4gICAgICAgICAgLz5cbiAgICAgICAgKSlcbiAgICAgICl9XG4gICAgPC9VbnN0eWxlZFVub3JkZXJlZExpc3Q+XG4gICk7XG59O1xuIl19 */");
-export 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__*/_jsx(UnstyledUnorderedList, {
-    "aria-labelledby": headerElementId,
-    "aria-live": "polite",
-    "aria-relevant": "additions",
-    as: "ul",
-    bg: "background",
-    ref: listRef,
-    tabIndex: -1,
-    children: isEmpty(notifications) ? /*#__PURE__*/_jsx(EmptyNotification, {}) : notifications.map(notification => /*#__PURE__*/_jsx(NotificationItem, {
-      notification: notification,
-      handleClick: () => onNotificationClick?.(notification),
-      handleDismiss: () => onDismissHandler(notification)
-    }, notification.id))
-  });
-};
+	listStyle: "none",
+	padding: 0,
+	margin: 0,
+	...listFocusStyle
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL05vdGlmaWNhdGlvbkxpc3QvaW5kZXgudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvTm90aWZpY2F0aW9uTGlzdC9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZm9jdXNWaXNpYmxlU3R5bGUgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBCYWNrZ3JvdW5kLCBjc3MgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IGlzRW1wdHkgZnJvbSAnbG9kYXNoL2lzRW1wdHknO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBFbXB0eU5vdGlmaWNhdGlvbiB9IGZyb20gJy4vRW1wdHlOb3RpZmljYXRpb24nO1xuaW1wb3J0IHsgTm90aWZpY2F0aW9uSXRlbSB9IGZyb20gJy4vTm90aWZpY2F0aW9uSXRlbSc7XG5pbXBvcnQgeyBOb3RpZmljYXRpb24gfSBmcm9tICcuL3R5cGluZ3MnO1xuXG5leHBvcnQgdHlwZSBOb3RpZmljYXRpb25MaXN0UHJvcHMgPSB7XG4gIG9uRGlzbWlzcz86IChub3RpZmljYXRpb246IE5vdGlmaWNhdGlvbikgPT4gdm9pZDtcbiAgbm90aWZpY2F0aW9uczogTm90aWZpY2F0aW9uW107XG4gIG9uTm90aWZpY2F0aW9uQ2xpY2s/OiAobm90aWZpY2F0aW9uOiBOb3RpZmljYXRpb24pID0+IHZvaWQ7XG4gIGhlYWRlckVsZW1lbnRJZD86IHN0cmluZzsgLy8gVXNlZCBmb3IgYXJpYS1sYWJlbGxlZGJ5IGZvciB0aGUgbGlzdC5cbn07XG5cbmNvbnN0IGxpc3RGb2N1c1N0eWxlID0gZm9jdXNWaXNpYmxlU3R5bGUoJy00cHgnKTtcblxuY29uc3QgVW5zdHlsZWRVbm9yZGVyZWRMaXN0ID0gc3R5bGVkKEJhY2tncm91bmQpKFxuICBjc3Moe1xuICAgIGxpc3RTdHlsZTogJ25vbmUnLFxuICAgIHBhZGRpbmc6IDAsXG4gICAgbWFyZ2luOiAwLFxuICAgIC4uLmxpc3RGb2N1c1N0eWxlLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IE5vdGlmaWNhdGlvbkxpc3Q6IFJlYWN0LkZDPE5vdGlmaWNhdGlvbkxpc3RQcm9wcz4gPSAoe1xuICBub3RpZmljYXRpb25zLFxuICBvbk5vdGlmaWNhdGlvbkNsaWNrLFxuICBvbkRpc21pc3MsXG4gIGhlYWRlckVsZW1lbnRJZCxcbn0pID0+IHtcbiAgY29uc3QgbGlzdFJlZiA9IFJlYWN0LnVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IG9uRGlzbWlzc0hhbmRsZXIgPSBhc3luYyAobm90aWZpY2F0aW9uOiBOb3RpZmljYXRpb24pID0+IHtcbiAgICBpZiAobGlzdFJlZj8uY3VycmVudCkge1xuICAgICAgYXdhaXQgbGlzdFJlZi5jdXJyZW50LmZvY3VzKCk7XG4gICAgfVxuICAgIGF3YWl0IG9uRGlzbWlzcz8uKG5vdGlmaWNhdGlvbik7XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8VW5zdHlsZWRVbm9yZGVyZWRMaXN0XG4gICAgICBhcmlhLWxhYmVsbGVkYnk9e2hlYWRlckVsZW1lbnRJZH1cbiAgICAgIGFyaWEtbGl2ZT1cInBvbGl0ZVwiXG4gICAgICBhcmlhLXJlbGV2YW50PVwiYWRkaXRpb25zXCJcbiAgICAgIGFzPVwidWxcIlxuICAgICAgYmc9XCJiYWNrZ3JvdW5kXCJcbiAgICAgIHJlZj17bGlzdFJlZn1cbiAgICAgIHRhYkluZGV4PXstMX1cbiAgICA+XG4gICAgICB7aXNFbXB0eShub3RpZmljYXRpb25zKSA/IChcbiAgICAgICAgPEVtcHR5Tm90aWZpY2F0aW9uIC8+XG4gICAgICApIDogKFxuICAgICAgICBub3RpZmljYXRpb25zLm1hcCgobm90aWZpY2F0aW9uOiBOb3RpZmljYXRpb24pID0+IChcbiAgICAgICAgICA8Tm90aWZpY2F0aW9uSXRlbVxuICAgICAgICAgICAga2V5PXtub3RpZmljYXRpb24uaWR9XG4gICAgICAgICAgICBub3RpZmljYXRpb249e25vdGlmaWNhdGlvbn1cbiAgICAgICAgICAgIGhhbmRsZUNsaWNrPXsoKSA9PiBvbk5vdGlmaWNhdGlvbkNsaWNrPy4obm90aWZpY2F0aW9uKX1cbiAgICAgICAgICAgIGhhbmRsZURpc21pc3M9eygpID0+IG9uRGlzbWlzc0hhbmRsZXIobm90aWZpY2F0aW9uKX1cbiAgICAgICAgICAvPlxuICAgICAgICApKVxuICAgICAgKX1cbiAgICA8L1Vuc3R5bGVkVW5vcmRlcmVkTGlzdD5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUI4QiJ9 */");
+const NotificationList = ({ notifications, onNotificationClick, onDismiss, headerElementId }) => {
+	const listRef = React$1.useRef(null);
+	const onDismissHandler = async (notification) => {
+		if (listRef?.current) await listRef.current.focus();
+		await onDismiss?.(notification);
+	};
+	return /* @__PURE__ */ React$1.createElement(UnstyledUnorderedList, {
+		"aria-labelledby": headerElementId,
+		"aria-live": "polite",
+		"aria-relevant": "additions",
+		as: "ul",
+		bg: "background",
+		ref: listRef,
+		tabIndex: -1
+	}, isEmpty(notifications) ? /* @__PURE__ */ React$1.createElement(EmptyNotification, null) : notifications.map((notification) => /* @__PURE__ */ React$1.createElement(NotificationItem, {
+		key: notification.id,
+		notification,
+		handleClick: () => onNotificationClick?.(notification),
+		handleDismiss: () => onDismissHandler(notification)
+	})));
+};
+
+//#endregion
+export { NotificationList };
+//# sourceMappingURL=index.js.map

package/dist/NotificationList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["focusVisibleStyle","Background","css","styled","isEmpty","React","EmptyNotification","NotificationItem","listFocusStyle","UnstyledUnorderedList","listStyle","padding","margin","NotificationList","notifications","onNotificationClick","onDismiss","headerElementId","listRef","useRef","onDismissHandler","notification","current","focus","aria-labelledby","aria-live","aria-relevant","as","bg","ref","tabIndex","map","key","id","handleClick","handleDismiss"],"sources":["../../src/NotificationList/index.tsx"],"sourcesContent":["import { focusVisibleStyle } from '@codecademy/gamut';\nimport { Background, css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport isEmpty from 'lodash/isEmpty';\nimport * as React from 'react';\n\nimport { EmptyNotification } from './EmptyNotification';\nimport { NotificationItem } from './NotificationItem';\nimport { Notification } from './typings';\n\nexport type NotificationListProps = {\n  onDismiss?: (notification: Notification) => void;\n  notifications: Notification[];\n  onNotificationClick?: (notification: Notification) => void;\n  headerElementId?: string; // Used for aria-labelledby for the list.\n};\n\nconst listFocusStyle = focusVisibleStyle('-4px');\n\nconst UnstyledUnorderedList = styled(Background)(\n  css({\n    listStyle: 'none',\n    padding: 0,\n    margin: 0,\n    ...listFocusStyle,\n  })\n);\n\nexport const NotificationList: React.FC<NotificationListProps> = ({\n  notifications,\n  onNotificationClick,\n  onDismiss,\n  headerElementId,\n}) => {\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const onDismissHandler = async (notification: Notification) => {\n    if (listRef?.current) {\n      await listRef.current.focus();\n    }\n    await onDismiss?.(notification);\n  };\n\n  return (\n    <UnstyledUnorderedList\n      aria-labelledby={headerElementId}\n      aria-live=\"polite\"\n      aria-relevant=\"additions\"\n      as=\"ul\"\n      bg=\"background\"\n      ref={listRef}\n      tabIndex={-1}\n    >\n      {isEmpty(notifications) ? (\n        <EmptyNotification />\n      ) : (\n        notifications.map((notification: Notification) => (\n          <NotificationItem\n            key={notification.id}\n            notification={notification}\n            handleClick={() => onNotificationClick?.(notification)}\n            handleDismiss={() => onDismissHandler(notification)}\n          />\n        ))\n      )}\n    </UnstyledUnorderedList>\n  );\n};\n"],"mappings":";;;;;;;;;AAiBA,MAAMQ,iBAAiBR,kBAAkB,OAAA;AAEzC,MAAMS,wBAAwBN,uBAAOF,YAAAA;;;GACnCC,IAAI;CACFQ,WAAW;CACXC,SAAS;CACTC,QAAQ;CACR,GAAGJ;CACL,CAAA,EAAA,s6FAAA;AAGF,MAAaK,oBAAqD,EAChEC,eACAC,qBACAC,WACAC,sBACD;CACC,MAAMC,UAAUb,QAAMc,OAAuB,KAAA;CAC7C,MAAMC,mBAAmB,OAAOC,iBAAAA;AAC9B,MAAIH,SAASI,QACX,OAAMJ,QAAQI,QAAQC,OAAK;AAE7B,QAAMP,YAAYK,aAAAA;;AAGpB,QACE,wBAAA,cAACZ,uBAAAA;EACCe,mBAAiBP;EACjBQ,aAAU;EACVC,iBAAc;EACdC,IAAG;EACHC,IAAG;EACHC,KAAKX;EACLY,UAAU;IAET1B,QAAQU,cAAAA,GACP,wBAAA,cAACR,mBAAAA,KAAAA,GAEDQ,cAAciB,KAAKV,iBACjB,wBAAA,cAACd,kBAAAA;EACCyB,KAAKX,aAAaY;EACJZ;EACda,mBAAmBnB,sBAAsBM,aAAAA;EACzCc,qBAAqBf,iBAAiBC,aAAAA"}

package/dist/NotificationList/typings.d.cts

@@ -0,0 +1,20 @@
+//#region src/NotificationList/typings.d.ts
+type NotificationIconSettings = {
+  backgroundColor?: string;
+  color?: string;
+};
+type Notification = {
+  date: string;
+  id: string;
+  iconSettings?: NotificationIconSettings;
+  iconSlug?: string;
+  imageUrl?: string;
+  link?: string;
+  text: string;
+  type?: string;
+  unread?: boolean;
+  campaign: string;
+};
+//#endregion
+export { Notification, NotificationIconSettings };
+//# sourceMappingURL=typings.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typings.d.cts","names":[],"sources":["../../src/NotificationList/typings.ts"],"mappings":";KAAY,wBAAA;EACV,eAAA;EACA,KAAA;AAAA;AAAA,KAGU,YAAA;EACV,IAAA;EACA,EAAA;EACA,YAAA,GAAe,wBAAA;EACf,QAAA;EACA,QAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,MAAA;EACA,QAAA;AAAA"}