@codecademy/brand 4.0.0-alpha.fdfb3ba880.0 → 4.0.0

package/dist/NotificationList/NotificationItem.js

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

package/dist/NotificationList/index.d.ts

@@ -1,13 +1,9 @@
-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;
+import * as React from 'react';
+import { Notification } from './typings';
+export 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 };
+export declare const NotificationList: React.FC<NotificationListProps>;

package/dist/NotificationList/index.js

@@ -1,41 +1,46 @@
-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 { jsx } from "react/jsx-runtime";
-import isEmpty from "lodash/isEmpty";
-
-//#region src/NotificationList/index.tsx
-const listFocusStyle = focusVisibleStyle("-4px");
-const UnstyledUnorderedList = styled(Background)(css({
-	listStyle: "none",
-	padding: 0,
-	margin: 0,
-	...listFocusStyle
-}));
-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__ */ 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,
-			handleClick: () => onNotificationClick?.(notification),
-			handleDismiss: () => onDismissHandler(notification)
-		}, notification.id))
-	});
-};
-
-//#endregion
-export { NotificationList };
+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"
+})(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))
+  });
+};

package/dist/NotificationList/typings.d.ts

@@ -1,19 +1,16 @@
-//#region src/NotificationList/typings.d.ts
-type NotificationIconSettings = {
-  backgroundColor?: string;
-  color?: string;
+export 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;
+export 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 };

package/dist/NotificationList/typings.js

@@ -0,0 +1 @@
+export {};

package/dist/Notifications/NotificationBell.d.ts

@@ -0,0 +1,10 @@
+import { ButtonBaseElements } from '@codecademy/gamut';
+import { Dispatch, SetStateAction } from 'react';
+import { Notification } from '../NotificationList/typings';
+export type NotificationBellProps = {
+    bellRef: React.RefObject<ButtonBaseElements>;
+    isOpen?: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    notifications: Notification[];
+};
+export declare const NotificationBell: React.FC<NotificationBellProps>;

package/dist/Notifications/NotificationBell.js

@@ -1,60 +1,72 @@
-import { useAppHeaderContext } from "../AppHeader/AppHeaderElements/AppHeaderProvider/index.js";
-import { FlexBox, IconButton, Text } from "@codecademy/gamut";
-import { useEffect, useMemo } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { BellIcon } from "@codecademy/gamut-icons";
-
-//#region src/Notifications/NotificationBell.tsx
-const notificationsID = "notifications";
-const NotificationBell = ({ bellRef, isOpen, setIsOpen, notifications }) => {
-	const { lastOpenedDropdown, setLastOpenedDropdown } = useAppHeaderContext();
-	const unread = notifications.filter((notification) => notification.unread).length;
-	useEffect(() => {
-		const favicon = window?.document?.querySelector("link[rel=\"shortcut icon\"]");
-		if (favicon) favicon.href = `/favicon${unread ? "-unread" : ""}.ico`;
-	}, [unread]);
-	useEffect(() => {
-		if (lastOpenedDropdown !== notificationsID && isOpen) setIsOpen(false);
-	}, [lastOpenedDropdown]);
-	const numOfUnread = useMemo(() => Math.min(unread, 99), [unread]);
-	const handleOnClick = () => {
-		setIsOpen(!isOpen);
-		if (!isOpen) {
-			if (setLastOpenedDropdown) setLastOpenedDropdown(notificationsID);
-		}
-	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
-		"aria-expanded": Boolean(isOpen),
-		"aria-haspopup": "dialog",
-		tip: unread ? `Notifications, ${numOfUnread} unread` : "Notifications, no unread",
-		icon: BellIcon,
-		onClick: handleOnClick,
-		ref: bellRef,
-		variant: "interface",
-		tipProps: {
-			alignment: "bottom-center",
-			placement: "floating"
-		}
-	}), unread ? /* @__PURE__ */ jsx(FlexBox, {
-		alignItems: "center",
-		bg: "red-500",
-		borderRadius: "md",
-		height: 18,
-		justifyContent: "center",
-		left: 22,
-		position: "absolute",
-		textAlign: "center",
-		top: -2,
-		width: 20,
-		children: /* @__PURE__ */ jsx(Text, {
-			color: "white",
-			fontSize: 14,
-			fontWeight: "bold",
-			mt: 4,
-			children: numOfUnread
-		})
-	}) : null] });
-};
-
-//#endregion
-export { NotificationBell };
+import { FlexBox, IconButton, Text } from '@codecademy/gamut';
+import { BellIcon } from '@codecademy/gamut-icons';
+import { useEffect, useMemo } from 'react';
+import { useAppHeaderContext } from '../AppHeader/AppHeaderElements/AppHeaderProvider';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const notificationsID = 'notifications';
+export const NotificationBell = ({
+  bellRef,
+  isOpen,
+  setIsOpen,
+  notifications
+}) => {
+  const {
+    lastOpenedDropdown,
+    setLastOpenedDropdown
+  } = useAppHeaderContext();
+  const unread = notifications.filter(notification => notification.unread).length;
+  useEffect(() => {
+    const favicon = window?.document?.querySelector('link[rel="shortcut icon"]');
+    if (favicon) {
+      favicon.href = `/favicon${unread ? '-unread' : ''}.ico`;
+    }
+  }, [unread]);
+  useEffect(() => {
+    if (lastOpenedDropdown !== notificationsID && isOpen) {
+      setIsOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastOpenedDropdown]);
+  const numOfUnread = useMemo(() => Math.min(unread, 99), [unread]);
+  const handleOnClick = () => {
+    setIsOpen(!isOpen);
+    if (!isOpen) {
+      if (setLastOpenedDropdown) {
+        setLastOpenedDropdown(notificationsID);
+      }
+    }
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      "aria-expanded": Boolean(isOpen),
+      "aria-haspopup": "dialog",
+      tip: unread ? `Notifications, ${numOfUnread} unread` : 'Notifications, no unread',
+      icon: BellIcon,
+      onClick: handleOnClick,
+      ref: bellRef,
+      variant: "interface",
+      tipProps: {
+        alignment: 'bottom-center',
+        placement: 'floating'
+      }
+    }), unread ? /*#__PURE__*/_jsx(FlexBox, {
+      alignItems: "center",
+      bg: "red-500",
+      borderRadius: "md",
+      height: 18,
+      justifyContent: "center",
+      left: 22,
+      position: "absolute",
+      textAlign: "center",
+      top: -2,
+      width: 20,
+      children: /*#__PURE__*/_jsx(Text, {
+        color: "white",
+        fontSize: 14,
+        fontWeight: "bold",
+        mt: 4,
+        children: numOfUnread
+      })
+    }) : null]
+  });
+};

package/dist/Notifications/NotificationsContents.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { NotificationsProps } from './types';
+export declare const NotificationsContents: React.FC<NotificationsProps>;