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

package/dist/Logos/shared.js

@@ -0,0 +1,16 @@
+import _styled from "@emotion/styled/base";
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { styledOptions, system } from '@codecademy/gamut-styles';
+import { variance } from '@codecademy/variance';
+const logoStyles = variance.compose(system.layout, system.positioning, system.space);
+export const LogoSvg = /*#__PURE__*/_styled('svg', _extends({}, {
+  target: "e1d9jxa21",
+  label: "LogoSvg"
+}, styledOptions()))(system.css({
+  textColor: 'currentColor'
+}), logoStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Mb2dvcy9zaGFyZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCdUIiLCJmaWxlIjoiLi4vLi4vc3JjL0xvZ29zL3NoYXJlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb2xvck1vZGVzLCBzdHlsZWRPcHRpb25zLCBzeXN0ZW0gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcywgdmFyaWFuY2UgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBTVkdQcm9wcyB9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IHR5cGUgTG9nb1Byb3BzID0gU1ZHUHJvcHM8U1ZHU1ZHRWxlbWVudD4gJlxuICBTdHlsZVByb3BzPHR5cGVvZiBsb2dvU3R5bGVzPiAmIHtcbiAgICBoZWlnaHQ/OiBudW1iZXI7XG4gICAgd2lkdGg/OiBudW1iZXI7XG4gICAgbW9kZT86IENvbG9yTW9kZXM7XG4gIH07XG5cbmNvbnN0IGxvZ29TdHlsZXMgPSB2YXJpYW5jZS5jb21wb3NlKFxuICBzeXN0ZW0ubGF5b3V0LFxuICBzeXN0ZW0ucG9zaXRpb25pbmcsXG4gIHN5c3RlbS5zcGFjZVxuKTtcblxuZXhwb3J0IGNvbnN0IExvZ29TdmcgPSBzdHlsZWQoJ3N2ZycsIHN0eWxlZE9wdGlvbnM8J3N2Zyc+KCkpPFxuICBPbWl0PExvZ29Qcm9wcywgJ3ZhcmlhbnQnPlxuPihzeXN0ZW0uY3NzKHsgdGV4dENvbG9yOiAnY3VycmVudENvbG9yJyB9KSwgbG9nb1N0eWxlcyk7XG5cbmNvbnN0IGNvbXBvc2VkTG9nb1N0eWxlcyA9IHZhcmlhbmNlLmNvbXBvc2UoXG4gIHN5c3RlbS5sYXlvdXQsXG4gIHN5c3RlbS5jb2xvcixcbiAgc3lzdGVtLnNwYWNlLFxuICBzeXN0ZW0ucG9zaXRpb25pbmdcbik7XG5cbmludGVyZmFjZSBGcm9tTG9nb1N0eWxlUHJvcHMgZXh0ZW5kcyBTdHlsZVByb3BzPHR5cGVvZiBjb21wb3NlZExvZ29TdHlsZXM+IHt9XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2hhcmVkTG9nb1Byb3BzXG4gIGV4dGVuZHMgT21pdDxSZWFjdC5TVkdQcm9wczxTVkdTVkdFbGVtZW50Piwga2V5b2YgRnJvbUxvZ29TdHlsZVByb3BzPixcbiAgICBGcm9tTG9nb1N0eWxlUHJvcHMge31cblxuZXhwb3J0IGNvbnN0IFN0eWxlZFNWR1dyYXBwZXIgPSBzdHlsZWQoXG4gICdzdmcnLFxuICBzdHlsZWRPcHRpb25zPCdzdmcnPigpXG4pKGNvbXBvc2VkTG9nb1N0eWxlcyk7XG4iXX0= */");
+const composedLogoStyles = variance.compose(system.layout, system.color, system.space, system.positioning);
+export const StyledSVGWrapper = /*#__PURE__*/_styled('svg', _extends({}, {
+  target: "e1d9jxa20",
+  label: "StyledSVGWrapper"
+}, styledOptions()))(composedLogoStyles, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Mb2dvcy9zaGFyZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1DZ0MiLCJmaWxlIjoiLi4vLi4vc3JjL0xvZ29zL3NoYXJlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb2xvck1vZGVzLCBzdHlsZWRPcHRpb25zLCBzeXN0ZW0gfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgU3R5bGVQcm9wcywgdmFyaWFuY2UgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBTVkdQcm9wcyB9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IHR5cGUgTG9nb1Byb3BzID0gU1ZHUHJvcHM8U1ZHU1ZHRWxlbWVudD4gJlxuICBTdHlsZVByb3BzPHR5cGVvZiBsb2dvU3R5bGVzPiAmIHtcbiAgICBoZWlnaHQ/OiBudW1iZXI7XG4gICAgd2lkdGg/OiBudW1iZXI7XG4gICAgbW9kZT86IENvbG9yTW9kZXM7XG4gIH07XG5cbmNvbnN0IGxvZ29TdHlsZXMgPSB2YXJpYW5jZS5jb21wb3NlKFxuICBzeXN0ZW0ubGF5b3V0LFxuICBzeXN0ZW0ucG9zaXRpb25pbmcsXG4gIHN5c3RlbS5zcGFjZVxuKTtcblxuZXhwb3J0IGNvbnN0IExvZ29TdmcgPSBzdHlsZWQoJ3N2ZycsIHN0eWxlZE9wdGlvbnM8J3N2Zyc+KCkpPFxuICBPbWl0PExvZ29Qcm9wcywgJ3ZhcmlhbnQnPlxuPihzeXN0ZW0uY3NzKHsgdGV4dENvbG9yOiAnY3VycmVudENvbG9yJyB9KSwgbG9nb1N0eWxlcyk7XG5cbmNvbnN0IGNvbXBvc2VkTG9nb1N0eWxlcyA9IHZhcmlhbmNlLmNvbXBvc2UoXG4gIHN5c3RlbS5sYXlvdXQsXG4gIHN5c3RlbS5jb2xvcixcbiAgc3lzdGVtLnNwYWNlLFxuICBzeXN0ZW0ucG9zaXRpb25pbmdcbik7XG5cbmludGVyZmFjZSBGcm9tTG9nb1N0eWxlUHJvcHMgZXh0ZW5kcyBTdHlsZVByb3BzPHR5cGVvZiBjb21wb3NlZExvZ29TdHlsZXM+IHt9XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2hhcmVkTG9nb1Byb3BzXG4gIGV4dGVuZHMgT21pdDxSZWFjdC5TVkdQcm9wczxTVkdTVkdFbGVtZW50Piwga2V5b2YgRnJvbUxvZ29TdHlsZVByb3BzPixcbiAgICBGcm9tTG9nb1N0eWxlUHJvcHMge31cblxuZXhwb3J0IGNvbnN0IFN0eWxlZFNWR1dyYXBwZXIgPSBzdHlsZWQoXG4gICdzdmcnLFxuICBzdHlsZWRPcHRpb25zPCdzdmcnPigpXG4pKGNvbXBvc2VkTG9nb1N0eWxlcyk7XG4iXX0= */");

package/dist/MarketingToaster/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface MarketingToasterProps {
+    toasts: {
+        [key: string]: React.ReactNode;
+    };
+}
+export declare const MarketingToaster: React.FC<MarketingToasterProps>;
+export {};

package/dist/MarketingToaster/index.js

@@ -0,0 +1,67 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { Box, FlexBox } from '@codecademy/gamut';
+import { AnimatePresence, motion } from 'framer-motion';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MarketingToaster = ({
+  toasts
+}) => {
+  return /*#__PURE__*/_jsx(AnimatePresence, {
+    children: /*#__PURE__*/_jsx(motion.div, {
+      initial: false,
+      animate: {
+        opacity: 1,
+        left: 0
+      },
+      exit: {
+        opacity: 0
+      },
+      transition: {
+        duration: 0.2
+      },
+      children: /*#__PURE__*/_jsx(OuterBox, {
+        zIndex: 2,
+        position: "fixed",
+        justifyContent: "flex-end",
+        alignItems: "flex-end",
+        top: 0,
+        width: "100vw",
+        height: "100vh",
+        flexDirection: "column",
+        pb: 64,
+        pr: 224,
+        children: Object.keys(toasts).map(key => {
+          return /*#__PURE__*/_jsx(InnerBox, {
+            mt: 8,
+            mb: 8,
+            mx: 24,
+            children: toasts[key]
+          }, key);
+        })
+      })
+    }, "marketing_toast")
+  });
+};
+const OuterBox = /*#__PURE__*/_styled(FlexBox, {
+  target: "e1gq2ce91",
+  label: "OuterBox"
+})(process.env.NODE_ENV === "production" ? {
+  name: "je8g23",
+  styles: "pointer-events:none"
+} : {
+  name: "je8g23",
+  styles: "pointer-events:none/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9NYXJrZXRpbmdUb2FzdGVyL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnRGdDIiwiZmlsZSI6Ii4uLy4uL3NyYy9NYXJrZXRpbmdUb2FzdGVyL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgRmxleEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEFuaW1hdGVQcmVzZW5jZSwgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbnRlcmZhY2UgTWFya2V0aW5nVG9hc3RlclByb3BzIHtcbiAgdG9hc3RzOiB7XG4gICAgW2tleTogc3RyaW5nXTogUmVhY3QuUmVhY3ROb2RlO1xuICB9O1xufVxuXG5leHBvcnQgY29uc3QgTWFya2V0aW5nVG9hc3RlcjogUmVhY3QuRkM8TWFya2V0aW5nVG9hc3RlclByb3BzPiA9ICh7XG4gIHRvYXN0cyxcbn0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8QW5pbWF0ZVByZXNlbmNlPlxuICAgICAgPG1vdGlvbi5kaXZcbiAgICAgICAga2V5PVwibWFya2V0aW5nX3RvYXN0XCJcbiAgICAgICAgaW5pdGlhbD17ZmFsc2V9XG4gICAgICAgIGFuaW1hdGU9e3sgb3BhY2l0eTogMSwgbGVmdDogMCB9fVxuICAgICAgICBleGl0PXt7IG9wYWNpdHk6IDAgfX1cbiAgICAgICAgdHJhbnNpdGlvbj17eyBkdXJhdGlvbjogMC4yIH19XG4gICAgICA+XG4gICAgICAgIDxPdXRlckJveFxuICAgICAgICAgIHpJbmRleD17Mn1cbiAgICAgICAgICBwb3NpdGlvbj1cImZpeGVkXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cImZsZXgtZW5kXCJcbiAgICAgICAgICBhbGlnbkl0ZW1zPVwiZmxleC1lbmRcIlxuICAgICAgICAgIHRvcD17MH1cbiAgICAgICAgICB3aWR0aD1cIjEwMHZ3XCJcbiAgICAgICAgICBoZWlnaHQ9XCIxMDB2aFwiXG4gICAgICAgICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgICAgICAgcGI9ezY0fVxuICAgICAgICAgIHByPXsyMjQgYXMgMH1cbiAgICAgICAgPlxuICAgICAgICAgIHtPYmplY3Qua2V5cyh0b2FzdHMpLm1hcCgoa2V5KSA9PiB7XG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICA8SW5uZXJCb3ggbXQ9ezh9IG1iPXs4fSBteD17MjR9IGtleT17a2V5fT5cbiAgICAgICAgICAgICAgICB7dG9hc3RzW2tleV19XG4gICAgICAgICAgICAgIDwvSW5uZXJCb3g+XG4gICAgICAgICAgICApO1xuICAgICAgICAgIH0pfVxuICAgICAgICA8L091dGVyQm94PlxuICAgICAgPC9tb3Rpb24uZGl2PlxuICAgIDwvQW5pbWF0ZVByZXNlbmNlPlxuICApO1xufTtcblxuY29uc3QgT3V0ZXJCb3ggPSBzdHlsZWQoRmxleEJveClgXG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuYDtcblxuY29uc3QgSW5uZXJCb3ggPSBzdHlsZWQoQm94KWBcbiAgcG9pbnRlci1ldmVudHM6IGFsbDtcbmA7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const InnerBox = /*#__PURE__*/_styled(Box, {
+  target: "e1gq2ce90",
+  label: "InnerBox"
+})(process.env.NODE_ENV === "production" ? {
+  name: "n07k1x",
+  styles: "pointer-events:all"
+} : {
+  name: "n07k1x",
+  styles: "pointer-events:all/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9NYXJrZXRpbmdUb2FzdGVyL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvRDRCIiwiZmlsZSI6Ii4uLy4uL3NyYy9NYXJrZXRpbmdUb2FzdGVyL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgRmxleEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEFuaW1hdGVQcmVzZW5jZSwgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbnRlcmZhY2UgTWFya2V0aW5nVG9hc3RlclByb3BzIHtcbiAgdG9hc3RzOiB7XG4gICAgW2tleTogc3RyaW5nXTogUmVhY3QuUmVhY3ROb2RlO1xuICB9O1xufVxuXG5leHBvcnQgY29uc3QgTWFya2V0aW5nVG9hc3RlcjogUmVhY3QuRkM8TWFya2V0aW5nVG9hc3RlclByb3BzPiA9ICh7XG4gIHRvYXN0cyxcbn0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8QW5pbWF0ZVByZXNlbmNlPlxuICAgICAgPG1vdGlvbi5kaXZcbiAgICAgICAga2V5PVwibWFya2V0aW5nX3RvYXN0XCJcbiAgICAgICAgaW5pdGlhbD17ZmFsc2V9XG4gICAgICAgIGFuaW1hdGU9e3sgb3BhY2l0eTogMSwgbGVmdDogMCB9fVxuICAgICAgICBleGl0PXt7IG9wYWNpdHk6IDAgfX1cbiAgICAgICAgdHJhbnNpdGlvbj17eyBkdXJhdGlvbjogMC4yIH19XG4gICAgICA+XG4gICAgICAgIDxPdXRlckJveFxuICAgICAgICAgIHpJbmRleD17Mn1cbiAgICAgICAgICBwb3NpdGlvbj1cImZpeGVkXCJcbiAgICAgICAgICBqdXN0aWZ5Q29udGVudD1cImZsZXgtZW5kXCJcbiAgICAgICAgICBhbGlnbkl0ZW1zPVwiZmxleC1lbmRcIlxuICAgICAgICAgIHRvcD17MH1cbiAgICAgICAgICB3aWR0aD1cIjEwMHZ3XCJcbiAgICAgICAgICBoZWlnaHQ9XCIxMDB2aFwiXG4gICAgICAgICAgZmxleERpcmVjdGlvbj1cImNvbHVtblwiXG4gICAgICAgICAgcGI9ezY0fVxuICAgICAgICAgIHByPXsyMjQgYXMgMH1cbiAgICAgICAgPlxuICAgICAgICAgIHtPYmplY3Qua2V5cyh0b2FzdHMpLm1hcCgoa2V5KSA9PiB7XG4gICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICA8SW5uZXJCb3ggbXQ9ezh9IG1iPXs4fSBteD17MjR9IGtleT17a2V5fT5cbiAgICAgICAgICAgICAgICB7dG9hc3RzW2tleV19XG4gICAgICAgICAgICAgIDwvSW5uZXJCb3g+XG4gICAgICAgICAgICApO1xuICAgICAgICAgIH0pfVxuICAgICAgICA8L091dGVyQm94PlxuICAgICAgPC9tb3Rpb24uZGl2PlxuICAgIDwvQW5pbWF0ZVByZXNlbmNlPlxuICApO1xufTtcblxuY29uc3QgT3V0ZXJCb3ggPSBzdHlsZWQoRmxleEJveClgXG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuYDtcblxuY29uc3QgSW5uZXJCb3ggPSBzdHlsZWQoQm94KWBcbiAgcG9pbnRlci1ldmVudHM6IGFsbDtcbmA7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

package/dist/NotFoundContent/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface NotFoundPageProps {
+    title?: string;
+    subtitle?: string;
+    hiddenText?: string;
+}
+export declare const NotFoundContent: React.FC<NotFoundPageProps>;
+export {};

package/dist/NotFoundContent/index.js

@@ -0,0 +1,55 @@
+import _styled from "@emotion/styled/base";
+import { Box, Text } from '@codecademy/gamut';
+import { css } from '@codecademy/gamut-styles';
+import React from 'react';
+import notFound from './404.svg';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ErrorContainer = /*#__PURE__*/_styled(Box, {
+  target: "eg6lqba0",
+  label: "ErrorContainer"
+})(css({
+  canvas: {
+    maxWidth: '100vw'
+  }
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ob3RGb3VuZENvbnRlbnQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWF1QiIsImZpbGUiOiIuLi8uLi9zcmMvTm90Rm91bmRDb250ZW50L2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEJveCwgVGV4dCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgbm90Rm91bmQgZnJvbSAnLi80MDQuc3ZnJztcblxuaW50ZXJmYWNlIE5vdEZvdW5kUGFnZVByb3BzIHtcbiAgdGl0bGU/OiBzdHJpbmc7XG4gIHN1YnRpdGxlPzogc3RyaW5nO1xuICBoaWRkZW5UZXh0Pzogc3RyaW5nO1xufVxuXG5jb25zdCBFcnJvckNvbnRhaW5lciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGNhbnZhczoge1xuICAgICAgbWF4V2lkdGg6ICcxMDB2dycsXG4gICAgfSxcbiAgfSlcbik7XG5cbmNvbnN0IEltYWdlID0gQm94LndpdGhDb21wb25lbnQoJ2ltZycpO1xuXG5leHBvcnQgY29uc3QgTm90Rm91bmRDb250ZW50OiBSZWFjdC5GQzxOb3RGb3VuZFBhZ2VQcm9wcz4gPSAoe1xuICB0aXRsZSA9ICdPaCBubyEnLFxuICBzdWJ0aXRsZSA9IFwiTG9va3MgbGlrZSB5b3UncmUgbG9zdC5cIixcbiAgaGlkZGVuVGV4dCA9ICc0MDQ6IFBhZ2UgTm90IEZvdW5kJyxcbn0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8bWFpbiBkYXRhLXRlc3RpZD1cImVycm9yNDA0XCI+XG4gICAgICA8VGV4dCBzY3JlZW5yZWFkZXI+e2hpZGRlblRleHR9PC9UZXh0PlxuICAgICAgPEVycm9yQ29udGFpbmVyXG4gICAgICAgIGFzPVwibWFpblwiXG4gICAgICAgIG15PXs5Nn1cbiAgICAgICAgbXg9ezE2fVxuICAgICAgICB0ZXh0QWxpZ249XCJjZW50ZXJcIlxuICAgICAgICBkYXRhLXRlc3RpZD1cImVycm9yNDA0XCJcbiAgICAgID5cbiAgICAgICAgPEltYWdlIHNyYz17bm90Rm91bmR9IGFsdD1cIlwiIGhlaWdodD1cIjEyNVwiIHdpZHRoPVwiNTAwXCIgbWF4V2lkdGg9XCIxMDAlXCIgLz5cbiAgICAgICAgPEJveCBteT17NDh9PlxuICAgICAgICAgIDxUZXh0IGFzPVwiaDFcIiB2YXJpYW50PVwidGl0bGUteGxcIj5cbiAgICAgICAgICAgIHt0aXRsZX1cbiAgICAgICAgICA8L1RleHQ+XG4gICAgICAgICAgPFRleHQgYXM9XCJoMlwiIHZhcmlhbnQ9XCJ0aXRsZS1sZ1wiPlxuICAgICAgICAgICAge3N1YnRpdGxlfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgPC9Cb3g+XG4gICAgICA8L0Vycm9yQ29udGFpbmVyPlxuICAgIDwvbWFpbj5cbiAgKTtcbn07XG4iXX0= */");
+const Image = Box.withComponent('img', {
+  target: "eg6lqba1",
+  label: "Image"
+});
+export const NotFoundContent = ({
+  title = 'Oh no!',
+  subtitle = "Looks like you're lost.",
+  hiddenText = '404: Page Not Found'
+}) => {
+  return /*#__PURE__*/_jsxs("main", {
+    "data-testid": "error404",
+    children: [/*#__PURE__*/_jsx(Text, {
+      screenreader: true,
+      children: hiddenText
+    }), /*#__PURE__*/_jsxs(ErrorContainer, {
+      as: "main",
+      my: 96,
+      mx: 16,
+      textAlign: "center",
+      "data-testid": "error404",
+      children: [/*#__PURE__*/_jsx(Image, {
+        src: notFound,
+        alt: "",
+        height: "125",
+        width: "500",
+        maxWidth: "100%"
+      }), /*#__PURE__*/_jsxs(Box, {
+        my: 48,
+        children: [/*#__PURE__*/_jsx(Text, {
+          as: "h1",
+          variant: "title-xl",
+          children: title
+        }), /*#__PURE__*/_jsx(Text, {
+          as: "h2",
+          variant: "title-lg",
+          children: subtitle
+        })]
+      })]
+    })]
+  });
+};

package/dist/NotificationList/EmptyNotification/emptyNotificationContents.d.ts

@@ -0,0 +1,7 @@
+import { Bee } from '@codecademy/gamut-illustrations';
+export type exportNotificationsContent = {
+    text: string;
+    subtext: string;
+    image: typeof Bee;
+};
+export declare const emptyNotificationContents: readonly exportNotificationsContent[];

package/dist/NotificationList/EmptyNotification/emptyNotificationContents.js

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

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

@@ -0,0 +1 @@
+export declare const EmptyNotification: () => import("react/jsx-runtime").JSX.Element;

package/dist/NotificationList/EmptyNotification/index.js

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

package/dist/NotificationList/NotificationItem.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Notification } from './typings';
+export type NotificationItemProps = {
+    notification: Notification;
+    handleClick?: (event: object) => void;
+    handleDismiss?: () => void;
+};
+export declare const NotificationItem: React.FC<NotificationItemProps>;

package/dist/NotificationList/NotificationItem.js

@@ -0,0 +1,151 @@
+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);
+    }
+  };
+  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]
+  });
+};

package/dist/NotificationList/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Notification } from './typings';
+export type NotificationListProps = {
+    onDismiss?: (notification: Notification) => void;
+    notifications: Notification[];
+    onNotificationClick?: (notification: Notification) => void;
+    headerElementId?: string;
+};
+export declare const NotificationList: React.FC<NotificationListProps>;

package/dist/NotificationList/index.js

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,16 @@
+export type NotificationIconSettings = {
+    backgroundColor?: string;
+    color?: string;
+};
+export type Notification = {
+    date: string;
+    id: string;
+    iconSettings?: NotificationIconSettings;
+    iconSlug?: string;
+    imageUrl?: string;
+    link?: string;
+    text: string;
+    type?: string;
+    unread?: boolean;
+    campaign: string;
+};

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

@@ -0,0 +1,72 @@
+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>;