@codecademy/brand 5.10.0 → 6.0.0-alpha.0839dde39.0

package/dist/Notifications/elements.js

@@ -1,21 +1,27 @@
-import _styled from "@emotion/styled/base";
-import { Box, focusVisibleStyle } from '@codecademy/gamut';
-import { css } from '@codecademy/gamut-styles';
-export const NotificationsWrapper = /*#__PURE__*/_styled(Box, {
-  target: "eg81h671",
-  label: "NotificationsWrapper"
+import { Box, focusVisibleStyle } from "@codecademy/gamut";
+import { css } from "@codecademy/gamut-styles";
+import styled from "@emotion/styled";
+
+//#region src/Notifications/elements.tsx
+const NotificationsWrapper = /*#__PURE__*/ styled(Box, {
+	target: "esr8s590",
+	label: "brand-NotificationsWrapper"
 })(css({
-  display: 'flex',
-  textAlign: 'left',
-  width: 400
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ob3RpZmljYXRpb25zL2VsZW1lbnRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJb0MiLCJmaWxlIjoiLi4vLi4vc3JjL05vdGlmaWNhdGlvbnMvZWxlbWVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBmb2N1c1Zpc2libGVTdHlsZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICB0ZXh0QWxpZ246ICdsZWZ0JyxcbiAgICB3aWR0aDogNDAwLFxuICB9KVxuKTtcblxuY29uc3QgZm9jdXNTdHlsZSA9IGZvY3VzVmlzaWJsZVN0eWxlKCk7XG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25EaWFsb2cgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBwYjogMjQsXG4gICAgcHQ6IDMyLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgLi4uZm9jdXNTdHlsZSxcbiAgfSlcbik7XG4iXX0= */");
+	display: "flex",
+	textAlign: "left",
+	width: 400
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL05vdGlmaWNhdGlvbnMvZWxlbWVudHMudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvTm90aWZpY2F0aW9ucy9lbGVtZW50cy50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBmb2N1c1Zpc2libGVTdHlsZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICB0ZXh0QWxpZ246ICdsZWZ0JyxcbiAgICB3aWR0aDogNDAwLFxuICB9KVxuKTtcblxuY29uc3QgZm9jdXNTdHlsZSA9IGZvY3VzVmlzaWJsZVN0eWxlKCk7XG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25EaWFsb2cgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBwYjogMjQsXG4gICAgcHQ6IDMyLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgLi4uZm9jdXNTdHlsZSxcbiAgfSlcbik7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSW9DIn0= */");
 const focusStyle = focusVisibleStyle();
-export const NotificationDialog = /*#__PURE__*/_styled(Box, {
-  target: "eg81h670",
-  label: "NotificationDialog"
+const NotificationDialog = /*#__PURE__*/ styled(Box, {
+	target: "esr8s591",
+	label: "brand-NotificationDialog"
 })(css({
-  pb: 24,
-  pt: 32,
-  width: '100%',
-  ...focusStyle
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Ob3RpZmljYXRpb25zL2VsZW1lbnRzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFja0MiLCJmaWxlIjoiLi4vLi4vc3JjL05vdGlmaWNhdGlvbnMvZWxlbWVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBmb2N1c1Zpc2libGVTdHlsZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICB0ZXh0QWxpZ246ICdsZWZ0JyxcbiAgICB3aWR0aDogNDAwLFxuICB9KVxuKTtcblxuY29uc3QgZm9jdXNTdHlsZSA9IGZvY3VzVmlzaWJsZVN0eWxlKCk7XG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25EaWFsb2cgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBwYjogMjQsXG4gICAgcHQ6IDMyLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgLi4uZm9jdXNTdHlsZSxcbiAgfSlcbik7XG4iXX0= */");
+	pb: 24,
+	pt: 32,
+	width: "100%",
+	...focusStyle
+}), "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL05vdGlmaWNhdGlvbnMvZWxlbWVudHMudHN4Iiwic291cmNlcyI6WyIvaG9tZS9ydW5uZXIvd29yay9tb25vL21vbm8vbGlicy91aS9icmFuZC9zcmMvTm90aWZpY2F0aW9ucy9lbGVtZW50cy50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBmb2N1c1Zpc2libGVTdHlsZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25zV3JhcHBlciA9IHN0eWxlZChCb3gpKFxuICBjc3Moe1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICB0ZXh0QWxpZ246ICdsZWZ0JyxcbiAgICB3aWR0aDogNDAwLFxuICB9KVxuKTtcblxuY29uc3QgZm9jdXNTdHlsZSA9IGZvY3VzVmlzaWJsZVN0eWxlKCk7XG5cbmV4cG9ydCBjb25zdCBOb3RpZmljYXRpb25EaWFsb2cgPSBzdHlsZWQoQm94KShcbiAgY3NzKHtcbiAgICBwYjogMjQsXG4gICAgcHQ6IDMyLFxuICAgIHdpZHRoOiAnMTAwJScsXG4gICAgLi4uZm9jdXNTdHlsZSxcbiAgfSlcbik7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY2tDIn0= */");
+
+//#endregion
+export { NotificationDialog, NotificationsWrapper };
+//# sourceMappingURL=elements.js.map

package/dist/Notifications/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","names":["Box","focusVisibleStyle","css","styled","NotificationsWrapper","display","textAlign","width","focusStyle","NotificationDialog","pb","pt"],"sources":["../../src/Notifications/elements.tsx"],"sourcesContent":["import { Box, focusVisibleStyle } from '@codecademy/gamut';\nimport { css } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\n\nexport const NotificationsWrapper = styled(Box)(\n  css({\n    display: 'flex',\n    textAlign: 'left',\n    width: 400,\n  })\n);\n\nconst focusStyle = focusVisibleStyle();\n\nexport const NotificationDialog = styled(Box)(\n  css({\n    pb: 24,\n    pt: 32,\n    width: '100%',\n    ...focusStyle,\n  })\n);\n"],"mappings":";;;;;AAIA,MAAaI,uBAAuBD,qBAAOH,KAAAA;;;GACzCE,IAAI;CACFG,SAAS;CACTC,WAAW;CACXC,OAAO;AACT,CAAA,GAAA,q+BAAA;AAGF,MAAMC,aAAaP,kBAAAA;AAEnB,MAAaQ,qBAAqBN,qBAAOH,KAAAA;;;GACvCE,IAAI;CACFQ,IAAI;CACJC,IAAI;CACJJ,OAAO;CACP,GAAGC;AACL,CAAA,GAAA,q+BAAA"}

package/dist/Notifications/types.d.cts

@@ -0,0 +1,17 @@
+import { Notification } from "../NotificationList/typings.cjs";
+//#region src/Notifications/types.d.ts
+type NotificationActions = {
+  clear: () => void;
+  click: (notification: Notification) => void;
+  dismiss: (notification: Notification) => void;
+  read: (notifications: Notification[]) => void;
+  track: (target: string) => void;
+};
+type AppHeaderNotificationSettings = {
+  actions: NotificationActions;
+  notifications: Notification[];
+  onEnable: () => void;
+};
+//#endregion
+export { AppHeaderNotificationSettings };
+//# sourceMappingURL=types.d.cts.map

package/dist/Notifications/types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.cts","names":[],"sources":["../../src/Notifications/types.ts"],"mappings":";;KAIY,mBAAA;EACV,KAAA;EACA,KAAA,GAAQ,YAAA,EAAc,YAAA;EACtB,OAAA,GAAU,YAAA,EAAc,YAAA;EACxB,IAAA,GAAO,aAAA,EAAe,YAAA;EACtB,KAAA,GAAQ,MAAA;AAAA;AAAA,KAGE,6BAAA;EACV,OAAA,EAAS,mBAAA;EACT,aAAA,EAAe,YAAY;EAC3B,QAAA;AAAA"}

package/dist/Notifications/types.d.ts

@@ -1,24 +1,17 @@
-import { ButtonBaseElements } from '@codecademy/gamut';
-import { Notification } from '../NotificationList/typings';
-export type NotificationActions = {
-    clear: () => void;
-    click: (notification: Notification) => void;
-    dismiss: (notification: Notification) => void;
-    read: (notifications: Notification[]) => void;
-    track: (target: string) => void;
+import { Notification } from "../NotificationList/typings.js";
+//#region src/Notifications/types.d.ts
+type NotificationActions = {
+  clear: () => void;
+  click: (notification: Notification) => void;
+  dismiss: (notification: Notification) => void;
+  read: (notifications: Notification[]) => void;
+  track: (target: string) => void;
 };
-export type AppHeaderNotificationSettings = {
-    actions: NotificationActions;
-    notifications: Notification[];
-    onEnable: () => void;
+type AppHeaderNotificationSettings = {
+  actions: NotificationActions;
+  notifications: Notification[];
+  onEnable: () => void;
 };
-export interface NotificationsProps {
-    actions: NotificationActions;
-    handleClose: () => void;
-    notifications: Notification[];
-    notificationListRef?: React.RefObject<HTMLDivElement | null>;
-}
-export interface NotificationsDropdownProps extends NotificationsProps {
-    bellRef: React.RefObject<ButtonBaseElements | null>;
-    isOpen: boolean;
-}
+//#endregion
+export { AppHeaderNotificationSettings };
+//# sourceMappingURL=types.d.ts.map

package/dist/Notifications/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/Notifications/types.ts"],"mappings":";;KAIY,mBAAA;EACV,KAAA;EACA,KAAA,GAAQ,YAAA,EAAc,YAAA;EACtB,OAAA,GAAU,YAAA,EAAc,YAAA;EACxB,IAAA,GAAO,aAAA,EAAe,YAAA;EACtB,KAAA,GAAQ,MAAA;AAAA;AAAA,KAGE,6BAAA;EACV,OAAA,EAAS,mBAAA;EACT,aAAA,EAAe,YAAA;EACf,QAAA;AAAA"}

package/dist/Notifications/useHeaderNotifications.cjs

@@ -0,0 +1,38 @@
+const require_elements = require('../AppHeader/shared/elements.cjs');
+require('../AppHeader/shared/index.cjs');
+const require_NotificationBell = require('./NotificationBell.cjs');
+let react = require("react");
+
+//#region src/Notifications/useHeaderNotifications.tsx
+const useHeaderNotifications = ({ settings, Renderer }) => {
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const bellRef = (0, react.useRef)(null);
+	if (!settings) return [null, null];
+	const handleClose = async () => {
+		await setIsOpen(false);
+		await bellRef.current?.focus();
+	};
+	return [{
+		id: "notifications",
+		type: "render-element",
+		renderElement: () => /*#__PURE__*/ React.createElement(require_NotificationBell.NotificationBell, {
+			bellRef,
+			isOpen,
+			notifications: settings.notifications,
+			setIsOpen
+		})
+	}, /*#__PURE__*/ React.createElement(require_elements.AnimatedHeaderZone, {
+		visible: isOpen,
+		key: "notifications-content"
+	}, /*#__PURE__*/ React.createElement(Renderer, {
+		actions: settings.actions,
+		bellRef,
+		notifications: settings.notifications,
+		isOpen,
+		handleClose
+	}))];
+};
+
+//#endregion
+exports.useHeaderNotifications = useHeaderNotifications;
+//# sourceMappingURL=useHeaderNotifications.cjs.map

package/dist/Notifications/useHeaderNotifications.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeaderNotifications.cjs","names":["useRef","useState","AnimatedHeaderZone","NotificationBell","useHeaderNotifications","settings","Renderer","isOpen","setIsOpen","bellRef","handleClose","current","focus","id","type","renderElement","notifications","visible","key","actions"],"sources":["../../src/Notifications/useHeaderNotifications.tsx"],"sourcesContent":["import { ButtonBaseElements } from '@codecademy/gamut';\nimport { useRef, useState } from 'react';\n\nimport { AnimatedHeaderZone } from '../AppHeader/shared';\nimport { NotificationBell } from './NotificationBell';\nimport {\n  AppHeaderNotificationSettings,\n  NotificationsDropdownProps,\n} from './types';\n\nexport type HeaderNotificationProps = {\n  settings: AppHeaderNotificationSettings | undefined;\n  Renderer: React.ComponentType<NotificationsDropdownProps>;\n};\n\nexport const useHeaderNotifications = ({\n  settings,\n  Renderer,\n}: HeaderNotificationProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const bellRef = useRef<ButtonBaseElements>(null);\n\n  if (!settings) {\n    return [null, null];\n  }\n\n  const handleClose = async () => {\n    await setIsOpen(false);\n    await bellRef.current?.focus();\n  };\n\n  return [\n    {\n      id: 'notifications',\n      type: 'render-element',\n      renderElement: () => (\n        <NotificationBell\n          bellRef={bellRef}\n          isOpen={isOpen}\n          notifications={settings.notifications}\n          setIsOpen={setIsOpen}\n        />\n      ),\n    },\n\n    <AnimatedHeaderZone visible={isOpen} key=\"notifications-content\">\n      <Renderer\n        actions={settings.actions}\n        bellRef={bellRef}\n        notifications={settings.notifications}\n        isOpen={isOpen}\n        handleClose={handleClose}\n      />\n    </AnimatedHeaderZone>,\n  ] as const;\n};\n"],"mappings":";;;;;;AAeA,MAAaI,0BAA0B,EACrCC,UACAC,eACwB;CACxB,MAAM,CAACC,QAAQC,iCAAsB,KAAA;CACrC,MAAMC,4BAAqC,IAAA;CAE3C,IAAI,CAACJ,UACH,OAAO,CAAC,MAAM;CAGhB,MAAMK,cAAc,YAAA;EAClB,MAAMF,UAAU,KAAA;EAChB,MAAMC,QAAQE,SAASC,MAAAA;CACzB;CAEA,OAAO,CACL;EACEC,IAAI;EACJC,MAAM;EACNC,qBACE,oBAAA,cAACZ,2CAAAA;GACUM;GACDF;GACRS,eAAeX,SAASW;GACbR;;CAGjB,GAEA,oBAAA,cAACN,qCAAAA;EAAmBe,SAASV;EAAQW,KAAI;IACvC,oBAAA,cAACZ,UAAAA;EACCa,SAASd,SAASc;EACTV;EACTO,eAAeX,SAASW;EAChBT;EACKG;;AAIrB"}

package/dist/Notifications/useHeaderNotifications.js

@@ -1,37 +1,38 @@
-import { useRef, useState } from 'react';
-import { AnimatedHeaderZone } from '../AppHeader/shared';
-import { NotificationBell } from './NotificationBell';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const useHeaderNotifications = ({
-  settings,
-  Renderer
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const bellRef = useRef(null);
-  if (!settings) {
-    return [null, null];
-  }
-  const handleClose = async () => {
-    await setIsOpen(false);
-    await bellRef.current?.focus();
-  };
-  return [{
-    id: 'notifications',
-    type: 'render-element',
-    renderElement: () => /*#__PURE__*/_jsx(NotificationBell, {
-      bellRef: bellRef,
-      isOpen: isOpen,
-      notifications: settings.notifications,
-      setIsOpen: setIsOpen
-    })
-  }, /*#__PURE__*/_jsx(AnimatedHeaderZone, {
-    visible: isOpen,
-    children: /*#__PURE__*/_jsx(Renderer, {
-      actions: settings.actions,
-      bellRef: bellRef,
-      notifications: settings.notifications,
-      isOpen: isOpen,
-      handleClose: handleClose
-    })
-  }, "notifications-content")];
-};
+import { AnimatedHeaderZone } from "../AppHeader/shared/elements.js";
+import "../AppHeader/shared/index.js";
+import { NotificationBell } from "./NotificationBell.js";
+import { useRef, useState } from "react";
+
+//#region src/Notifications/useHeaderNotifications.tsx
+const useHeaderNotifications = ({ settings, Renderer }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const bellRef = useRef(null);
+	if (!settings) return [null, null];
+	const handleClose = async () => {
+		await setIsOpen(false);
+		await bellRef.current?.focus();
+	};
+	return [{
+		id: "notifications",
+		type: "render-element",
+		renderElement: () => /*#__PURE__*/ React.createElement(NotificationBell, {
+			bellRef,
+			isOpen,
+			notifications: settings.notifications,
+			setIsOpen
+		})
+	}, /*#__PURE__*/ React.createElement(AnimatedHeaderZone, {
+		visible: isOpen,
+		key: "notifications-content"
+	}, /*#__PURE__*/ React.createElement(Renderer, {
+		actions: settings.actions,
+		bellRef,
+		notifications: settings.notifications,
+		isOpen,
+		handleClose
+	}))];
+};
+
+//#endregion
+export { useHeaderNotifications };
+//# sourceMappingURL=useHeaderNotifications.js.map

package/dist/Notifications/useHeaderNotifications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeaderNotifications.js","names":["useRef","useState","AnimatedHeaderZone","NotificationBell","useHeaderNotifications","settings","Renderer","isOpen","setIsOpen","bellRef","handleClose","current","focus","id","type","renderElement","notifications","visible","key","actions"],"sources":["../../src/Notifications/useHeaderNotifications.tsx"],"sourcesContent":["import { ButtonBaseElements } from '@codecademy/gamut';\nimport { useRef, useState } from 'react';\n\nimport { AnimatedHeaderZone } from '../AppHeader/shared';\nimport { NotificationBell } from './NotificationBell';\nimport {\n  AppHeaderNotificationSettings,\n  NotificationsDropdownProps,\n} from './types';\n\nexport type HeaderNotificationProps = {\n  settings: AppHeaderNotificationSettings | undefined;\n  Renderer: React.ComponentType<NotificationsDropdownProps>;\n};\n\nexport const useHeaderNotifications = ({\n  settings,\n  Renderer,\n}: HeaderNotificationProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const bellRef = useRef<ButtonBaseElements>(null);\n\n  if (!settings) {\n    return [null, null];\n  }\n\n  const handleClose = async () => {\n    await setIsOpen(false);\n    await bellRef.current?.focus();\n  };\n\n  return [\n    {\n      id: 'notifications',\n      type: 'render-element',\n      renderElement: () => (\n        <NotificationBell\n          bellRef={bellRef}\n          isOpen={isOpen}\n          notifications={settings.notifications}\n          setIsOpen={setIsOpen}\n        />\n      ),\n    },\n\n    <AnimatedHeaderZone visible={isOpen} key=\"notifications-content\">\n      <Renderer\n        actions={settings.actions}\n        bellRef={bellRef}\n        notifications={settings.notifications}\n        isOpen={isOpen}\n        handleClose={handleClose}\n      />\n    </AnimatedHeaderZone>,\n  ] as const;\n};\n"],"mappings":";;;;;;AAeA,MAAaI,0BAA0B,EACrCC,UACAC,eACwB;CACxB,MAAM,CAACC,QAAQC,aAAaP,SAAS,KAAA;CACrC,MAAMQ,UAAUT,OAA2B,IAAA;CAE3C,IAAI,CAACK,UACH,OAAO,CAAC,MAAM;CAGhB,MAAMK,cAAc,YAAA;EAClB,MAAMF,UAAU,KAAA;EAChB,MAAMC,QAAQE,SAASC,MAAAA;CACzB;CAEA,OAAO,CACL;EACEC,IAAI;EACJC,MAAM;EACNC,qBACE,oBAAA,cAACZ,kBAAAA;GACUM;GACDF;GACRS,eAAeX,SAASW;GACbR;;CAGjB,GAEA,oBAAA,cAACN,oBAAAA;EAAmBe,SAASV;EAAQW,KAAI;IACvC,oBAAA,cAACZ,UAAAA;EACCa,SAASd,SAASc;EACTV;EACTO,eAAeX,SAASW;EAChBT;EACKG;;AAIrB"}

package/dist/Notifications/useNotificationButtons.cjs

@@ -0,0 +1,44 @@
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/Notifications/useNotificationButtons.tsx
+const useNotificationButtons = ({ actions, handleClose, notifications, notificationListRef }) => {
+	const [showMore, setShowMore] = (0, react.useState)(false);
+	const [displayLimit, amountAdjective] = showMore ? [notifications.length, "Less"] : [3, "More"];
+	const closeButton = /*#__PURE__*/ React.createElement(_codecademy_gamut.IconButton, {
+		icon: _codecademy_gamut_icons.MiniDeleteIcon,
+		onClick: handleClose,
+		tip: "Close"
+	});
+	if (notifications.length === 0) return {
+		clearAllButton: null,
+		closeButton,
+		showMoreButton: null,
+		notifications
+	};
+	return {
+		clearAllButton: notifications.length > 0 && (notifications.length <= displayLimit || showMore) ? /*#__PURE__*/ React.createElement(_codecademy_gamut.TextButton, {
+			onClick: () => {
+				actions.clear();
+				actions.track("notification_clear_all");
+				notificationListRef?.current?.focus();
+			},
+			"aria-label": `Clear all ${notifications.length} notifications`,
+			mr: 8
+		}, "Clear All") : null,
+		closeButton,
+		showMoreButton: notifications.length <= 3 ? null : /*#__PURE__*/ React.createElement(_codecademy_gamut.Box, { px: 32 }, /*#__PURE__*/ React.createElement(_codecademy_gamut.TextButton, { onClick: () => {
+			setShowMore(!showMore);
+			if (!showMore) {
+				actions.track("notification_show_more");
+				actions.read(notifications.slice(3));
+			}
+		} }, "Show ", amountAdjective)),
+		notifications: notifications.slice(0, displayLimit)
+	};
+};
+
+//#endregion
+exports.useNotificationButtons = useNotificationButtons;
+//# sourceMappingURL=useNotificationButtons.cjs.map

package/dist/Notifications/useNotificationButtons.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNotificationButtons.cjs","names":["Box","IconButton","TextButton","MiniDeleteIcon","useState","defaultDisplayLimit","useNotificationButtons","actions","handleClose","notifications","notificationListRef","showMore","setShowMore","displayLimit","amountAdjective","length","closeButton","icon","onClick","tip","clearAllButton","showMoreButton","clear","track","current","focus","aria-label","mr","px","read","slice"],"sources":["../../src/Notifications/useNotificationButtons.tsx"],"sourcesContent":["import { Box, IconButton, TextButton } from '@codecademy/gamut';\nimport { MiniDeleteIcon } from '@codecademy/gamut-icons';\nimport { ReactElement, useState } from 'react';\n\nimport { defaultDisplayLimit } from './constants';\nimport { NotificationsProps } from './types';\n\ninterface NotificationButtons\n  extends Pick<NotificationsProps, 'notifications'> {\n  clearAllButton: ReactElement | null;\n  closeButton: ReactElement;\n  showMoreButton: ReactElement | null;\n}\n\nexport const useNotificationButtons = ({\n  actions,\n  handleClose,\n  notifications,\n  notificationListRef,\n}: NotificationsProps): NotificationButtons => {\n  const [showMore, setShowMore] = useState(false);\n  const [displayLimit, amountAdjective] = showMore\n    ? [notifications.length, 'Less']\n    : [defaultDisplayLimit, 'More'];\n\n  const closeButton = (\n    <IconButton icon={MiniDeleteIcon} onClick={handleClose} tip=\"Close\" />\n  );\n\n  if (notifications.length === 0) {\n    return {\n      clearAllButton: null,\n      closeButton,\n      showMoreButton: null,\n      notifications,\n    } as const;\n  }\n\n  const clearAllButton =\n    notifications.length > 0 &&\n    (notifications.length <= displayLimit || showMore) ? (\n      <TextButton\n        onClick={() => {\n          actions.clear();\n          actions.track('notification_clear_all');\n          notificationListRef?.current?.focus();\n        }}\n        aria-label={`Clear all ${notifications.length} notifications`}\n        mr={8}\n      >\n        Clear All\n      </TextButton>\n    ) : null;\n\n  const showMoreButton =\n    notifications.length <= defaultDisplayLimit ? null : (\n      <Box px={32}>\n        <TextButton\n          onClick={() => {\n            setShowMore(!showMore);\n\n            if (!showMore) {\n              actions.track('notification_show_more');\n              actions.read(notifications.slice(defaultDisplayLimit));\n            }\n          }}\n        >\n          Show {amountAdjective}\n        </TextButton>\n      </Box>\n    );\n\n  return {\n    clearAllButton,\n    closeButton,\n    showMoreButton,\n    notifications: notifications.slice(0, displayLimit),\n  } as const;\n};\n"],"mappings":";;;;;AAcA,MAAaM,0BAA0B,EACrCC,SACAC,aACAC,eACAC,0BACmB;CACnB,MAAM,CAACC,UAAUC,mCAAwB,KAAA;CACzC,MAAM,CAACC,cAAcC,mBAAmBH,WACpC,CAACF,cAAcM,QAAQ,UACvB,IAAsB;CAE1B,MAAMC,cACJ,oBAAA,cAACf,8BAAAA;EAAWgB,MAAMd;EAAgBe,SAASV;EAAaW,KAAI;;CAG9D,IAAIV,cAAcM,WAAW,GAC3B,OAAO;EACLK,gBAAgB;EAChBJ;EACAK,gBAAgB;EAChBZ;CACF;CAqCF,OAAO;EACLW,gBAlCAX,cAAcM,SAAS,MACtBN,cAAcM,UAAUF,gBAAgBF,YACvC,oBAAA,cAACT,8BAAAA;GACCgB,eAAS;IACPX,QAAQe,MAAK;IACbf,QAAQgB,MAAM,wBAAA;IACdb,qBAAqBc,SAASC,MAAAA;GAChC;GACAC,cAAY,aAAajB,cAAcM,OAAO;GAC9CY,IAAI;KACL,WAAA,IAGC;EAsBJX;EACAK,gBApBAZ,cAAcM,cAAgC,OAC5C,oBAAA,cAACf,uBAAAA,EAAI4B,IAAI,MACP,oBAAA,cAAC1B,8BAAAA,EACCgB,eAAS;GACPN,YAAY,CAACD,QAAAA;GAEb,IAAI,CAACA,UAAU;IACbJ,QAAQgB,MAAM,wBAAA;IACdhB,QAAQsB,KAAKpB,cAAcqB,OAAMzB,CAAAA;GACnC;EACF,KACD,SACOS,eAAAA,CAAAA;EASZL,eAAeA,cAAcqB,MAAM,GAAGjB,YAAAA;CACxC;AACF"}

package/dist/Notifications/useNotificationButtons.js

@@ -1,56 +1,44 @@
-import { Box, IconButton, TextButton } from '@codecademy/gamut';
-import { MiniDeleteIcon } from '@codecademy/gamut-icons';
-import { useState } from 'react';
-import { defaultDisplayLimit } from './constants';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const useNotificationButtons = ({
-  actions,
-  handleClose,
-  notifications,
-  notificationListRef
-}) => {
-  const [showMore, setShowMore] = useState(false);
-  const [displayLimit, amountAdjective] = showMore ? [notifications.length, 'Less'] : [defaultDisplayLimit, 'More'];
-  const closeButton = /*#__PURE__*/_jsx(IconButton, {
-    icon: MiniDeleteIcon,
-    onClick: handleClose,
-    tip: "Close"
-  });
-  if (notifications.length === 0) {
-    return {
-      clearAllButton: null,
-      closeButton,
-      showMoreButton: null,
-      notifications
-    };
-  }
-  const clearAllButton = notifications.length > 0 && (notifications.length <= displayLimit || showMore) ? /*#__PURE__*/_jsx(TextButton, {
-    onClick: () => {
-      actions.clear();
-      actions.track('notification_clear_all');
-      notificationListRef?.current?.focus();
-    },
-    "aria-label": `Clear all ${notifications.length} notifications`,
-    mr: 8,
-    children: "Clear All"
-  }) : null;
-  const showMoreButton = notifications.length <= defaultDisplayLimit ? null : /*#__PURE__*/_jsx(Box, {
-    px: 32,
-    children: /*#__PURE__*/_jsxs(TextButton, {
-      onClick: () => {
-        setShowMore(!showMore);
-        if (!showMore) {
-          actions.track('notification_show_more');
-          actions.read(notifications.slice(defaultDisplayLimit));
-        }
-      },
-      children: ["Show ", amountAdjective]
-    })
-  });
-  return {
-    clearAllButton,
-    closeButton,
-    showMoreButton,
-    notifications: notifications.slice(0, displayLimit)
-  };
-};
+import { Box, IconButton, TextButton } from "@codecademy/gamut";
+import { useState } from "react";
+import { MiniDeleteIcon } from "@codecademy/gamut-icons";
+
+//#region src/Notifications/useNotificationButtons.tsx
+const useNotificationButtons = ({ actions, handleClose, notifications, notificationListRef }) => {
+	const [showMore, setShowMore] = useState(false);
+	const [displayLimit, amountAdjective] = showMore ? [notifications.length, "Less"] : [3, "More"];
+	const closeButton = /*#__PURE__*/ React.createElement(IconButton, {
+		icon: MiniDeleteIcon,
+		onClick: handleClose,
+		tip: "Close"
+	});
+	if (notifications.length === 0) return {
+		clearAllButton: null,
+		closeButton,
+		showMoreButton: null,
+		notifications
+	};
+	return {
+		clearAllButton: notifications.length > 0 && (notifications.length <= displayLimit || showMore) ? /*#__PURE__*/ React.createElement(TextButton, {
+			onClick: () => {
+				actions.clear();
+				actions.track("notification_clear_all");
+				notificationListRef?.current?.focus();
+			},
+			"aria-label": `Clear all ${notifications.length} notifications`,
+			mr: 8
+		}, "Clear All") : null,
+		closeButton,
+		showMoreButton: notifications.length <= 3 ? null : /*#__PURE__*/ React.createElement(Box, { px: 32 }, /*#__PURE__*/ React.createElement(TextButton, { onClick: () => {
+			setShowMore(!showMore);
+			if (!showMore) {
+				actions.track("notification_show_more");
+				actions.read(notifications.slice(3));
+			}
+		} }, "Show ", amountAdjective)),
+		notifications: notifications.slice(0, displayLimit)
+	};
+};
+
+//#endregion
+export { useNotificationButtons };
+//# sourceMappingURL=useNotificationButtons.js.map

package/dist/Notifications/useNotificationButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNotificationButtons.js","names":["Box","IconButton","TextButton","MiniDeleteIcon","useState","defaultDisplayLimit","useNotificationButtons","actions","handleClose","notifications","notificationListRef","showMore","setShowMore","displayLimit","amountAdjective","length","closeButton","icon","onClick","tip","clearAllButton","showMoreButton","clear","track","current","focus","aria-label","mr","px","read","slice"],"sources":["../../src/Notifications/useNotificationButtons.tsx"],"sourcesContent":["import { Box, IconButton, TextButton } from '@codecademy/gamut';\nimport { MiniDeleteIcon } from '@codecademy/gamut-icons';\nimport { ReactElement, useState } from 'react';\n\nimport { defaultDisplayLimit } from './constants';\nimport { NotificationsProps } from './types';\n\ninterface NotificationButtons\n  extends Pick<NotificationsProps, 'notifications'> {\n  clearAllButton: ReactElement | null;\n  closeButton: ReactElement;\n  showMoreButton: ReactElement | null;\n}\n\nexport const useNotificationButtons = ({\n  actions,\n  handleClose,\n  notifications,\n  notificationListRef,\n}: NotificationsProps): NotificationButtons => {\n  const [showMore, setShowMore] = useState(false);\n  const [displayLimit, amountAdjective] = showMore\n    ? [notifications.length, 'Less']\n    : [defaultDisplayLimit, 'More'];\n\n  const closeButton = (\n    <IconButton icon={MiniDeleteIcon} onClick={handleClose} tip=\"Close\" />\n  );\n\n  if (notifications.length === 0) {\n    return {\n      clearAllButton: null,\n      closeButton,\n      showMoreButton: null,\n      notifications,\n    } as const;\n  }\n\n  const clearAllButton =\n    notifications.length > 0 &&\n    (notifications.length <= displayLimit || showMore) ? (\n      <TextButton\n        onClick={() => {\n          actions.clear();\n          actions.track('notification_clear_all');\n          notificationListRef?.current?.focus();\n        }}\n        aria-label={`Clear all ${notifications.length} notifications`}\n        mr={8}\n      >\n        Clear All\n      </TextButton>\n    ) : null;\n\n  const showMoreButton =\n    notifications.length <= defaultDisplayLimit ? null : (\n      <Box px={32}>\n        <TextButton\n          onClick={() => {\n            setShowMore(!showMore);\n\n            if (!showMore) {\n              actions.track('notification_show_more');\n              actions.read(notifications.slice(defaultDisplayLimit));\n            }\n          }}\n        >\n          Show {amountAdjective}\n        </TextButton>\n      </Box>\n    );\n\n  return {\n    clearAllButton,\n    closeButton,\n    showMoreButton,\n    notifications: notifications.slice(0, displayLimit),\n  } as const;\n};\n"],"mappings":";;;;;AAcA,MAAaM,0BAA0B,EACrCC,SACAC,aACAC,eACAC,0BACmB;CACnB,MAAM,CAACC,UAAUC,eAAeR,SAAS,KAAA;CACzC,MAAM,CAACS,cAAcC,mBAAmBH,WACpC,CAACF,cAAcM,QAAQ,UACvB,IAAsB;CAE1B,MAAMC,cACJ,oBAAA,cAACf,YAAAA;EAAWgB,MAAMd;EAAgBe,SAASV;EAAaW,KAAI;;CAG9D,IAAIV,cAAcM,WAAW,GAC3B,OAAO;EACLK,gBAAgB;EAChBJ;EACAK,gBAAgB;EAChBZ;CACF;CAqCF,OAAO;EACLW,gBAlCAX,cAAcM,SAAS,MACtBN,cAAcM,UAAUF,gBAAgBF,YACvC,oBAAA,cAACT,YAAAA;GACCgB,eAAS;IACPX,QAAQe,MAAK;IACbf,QAAQgB,MAAM,wBAAA;IACdb,qBAAqBc,SAASC,MAAAA;GAChC;GACAC,cAAY,aAAajB,cAAcM,OAAO;GAC9CY,IAAI;KACL,WAAA,IAGC;EAsBJX;EACAK,gBApBAZ,cAAcM,cAAgC,OAC5C,oBAAA,cAACf,KAAAA,EAAI4B,IAAI,MACP,oBAAA,cAAC1B,YAAAA,EACCgB,eAAS;GACPN,YAAY,CAACD,QAAAA;GAEb,IAAI,CAACA,UAAU;IACbJ,QAAQgB,MAAM,wBAAA;IACdhB,QAAQsB,KAAKpB,cAAcqB,OAAMzB,CAAAA;GACnC;EACF,KACD,SACOS,eAAAA,CAAAA;EASZL,eAAeA,cAAcqB,MAAM,GAAGjB,YAAAA;CACxC;AACF"}

package/dist/PageAlerts/PageAlerts.cjs

@@ -0,0 +1,60 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_PageAlertsProvider = require('./PageAlertsProvider.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_runtime.__toESM(_emotion_styled);
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/PageAlerts/PageAlerts.tsx
+const AlertArea = /*#__PURE__*/ (0, _emotion_styled.default)("div", {
+	target: "e1fny7bz0",
+	label: "brand-AlertArea"
+})("display:grid;justify-content:center;width:100%;padding:1rem 0rem;grid-template-columns:1fr;row-gap:1rem;top:3.5rem;left:50%;z-index:15;position:fixed;transform:translate(-50%,0);", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BhZ2VBbGVydHMvUGFnZUFsZXJ0cy50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9QYWdlQWxlcnRzL1BhZ2VBbGVydHMudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFsZXJ0LCBCb2R5UG9ydGFsLCBDb250ZW50Q29udGFpbmVyIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUNvbnRleHQsIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7XG4gIFBhZ2VBbGVydHNDb250ZXh0LFxuICBQYWdlQWxlcnRzQ29udGV4dFZhbHVlLFxufSBmcm9tICcuL1BhZ2VBbGVydHNQcm92aWRlcic7XG5pbXBvcnQgeyBQYWdlQWxlcnQgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IHR5cGUgUGFnZUFsZXJ0c1Byb3BzID0ge1xuICBleHRyYT86IFBhZ2VBbGVydFtdO1xufTtcblxuZXhwb3J0IGNvbnN0IEFsZXJ0QXJlYSA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB3aWR0aDogMTAwJTtcbiAgcGFkZGluZzogMXJlbSAwcmVtO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmcjtcbiAgcm93LWdhcDogMXJlbTtcbiAgdG9wOiAzLjVyZW07XG4gIGxlZnQ6IDUwJTtcbiAgei1pbmRleDogMTU7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgMCk7XG5gO1xuXG5jb25zdCBTdHlsZWRBbGVydCA9IHN0eWxlZChBbGVydClgXG4gIG1heC13aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQYWdlQWxlcnRzOiBSZWFjdC5GQzxQYWdlQWxlcnRzUHJvcHM+ID0gKHsgZXh0cmEgPSBbXSB9KSA9PiB7XG4gIGNvbnN0IHsgYWxlcnRzLCBjbG9zZUFsZXJ0LCBhZGRBbGVydCB9ID1cbiAgICB1c2VDb250ZXh0PFBhZ2VBbGVydHNDb250ZXh0VmFsdWU+KFBhZ2VBbGVydHNDb250ZXh0KTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGV4dHJhLmZvckVhY2goYWRkQWxlcnQpO1xuICB9LCBbZXh0cmEsIGFkZEFsZXJ0XSk7XG5cbiAgY29uc3QgW2FsZXJ0QXJlYSwgc2V0QWxlcnRBcmVhXSA9IHVzZVN0YXRlPEhUTUxEaXZFbGVtZW50PigpO1xuICBjb25zdCByZWZDYWxsYmFjayA9IHVzZUNhbGxiYWNrKFxuICAgIChhbGVydEFyZWE6IEhUTUxEaXZFbGVtZW50KSA9PiB7XG4gICAgICBzZXRBbGVydEFyZWEoYWxlcnRBcmVhKTtcbiAgICB9LFxuICAgIFtzZXRBbGVydEFyZWFdXG4gICk7XG5cbiAgY29uc3QgZm9jdXNBbGVydENsb3NlQnV0dG9uID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGNvbnN0IHJlZkJ1dHRvbiA9IGFsZXJ0QXJlYT8ucXVlcnlTZWxlY3RvcignYnV0dG9uJyk7XG4gICAgcmVmQnV0dG9uPy5mb2N1cygpO1xuICB9LCBbYWxlcnRBcmVhXSk7XG5cbiAgLy8gRm9jdXMgd2hlbiBhbGVydEFyZWEgaXMgZmlyc3QgcmVuZGVyZWQsIGFzIHdlbGwgYXMgd2hlbiBhbGVydHMgY2hhbmdlXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgZm9jdXNBbGVydENsb3NlQnV0dG9uKCk7XG4gIH0sIFthbGVydHMsIGZvY3VzQWxlcnRDbG9zZUJ1dHRvbiwgYWxlcnRBcmVhXSk7XG5cbiAgaWYgKCFhbGVydHM/Lmxlbmd0aCkgcmV0dXJuIG51bGw7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm9keVBvcnRhbD5cbiAgICAgIDxBbGVydEFyZWFcbiAgICAgICAgcm9sZT1cImFsZXJ0XCJcbiAgICAgICAgYXJpYS1saXZlPVwiYXNzZXJ0aXZlXCJcbiAgICAgICAga2V5PVwiYWxlcnRzXCJcbiAgICAgICAgcmVmPXtyZWZDYWxsYmFja31cbiAgICAgID5cbiAgICAgICAge2FsZXJ0cy5tYXAoKGFsZXJ0KSA9PiAoXG4gICAgICAgICAgPENvbnRlbnRDb250YWluZXIgc2l6ZT1cIm1lZGl1bVwiIGtleT17YWxlcnQubWVzc2FnZX0+XG4gICAgICAgICAgICA8U3R5bGVkQWxlcnRcbiAgICAgICAgICAgICAgY3RhPXthbGVydC5jdGF9XG4gICAgICAgICAgICAgIG9uQ2xvc2U9e1xuICAgICAgICAgICAgICAgIGFsZXJ0LnBlcm1hbmVudFxuICAgICAgICAgICAgICAgICAgPyB1bmRlZmluZWRcbiAgICAgICAgICAgICAgICAgIDogKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgIGNsb3NlQWxlcnQoYWxlcnQubWVzc2FnZSk7XG4gICAgICAgICAgICAgICAgICAgICAgYWxlcnQ/Lm9uQ2xvc2U/LigpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgdHlwZT17YWxlcnQudHlwZX1cbiAgICAgICAgICAgICAgcGxhY2VtZW50PVwiZmxvYXRpbmdcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICB7YWxlcnQubWVzc2FnZX1cbiAgICAgICAgICAgIDwvU3R5bGVkQWxlcnQ+XG4gICAgICAgICAgPC9Db250ZW50Q29udGFpbmVyPlxuICAgICAgICApKX1cbiAgICAgIDwvQWxlcnRBcmVhPlxuICAgIDwvQm9keVBvcnRhbD5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZXlCIn0= */");
+const StyledAlert = /*#__PURE__*/ (0, _emotion_styled.default)(_codecademy_gamut.Alert, {
+	target: "e1fny7bz1",
+	label: "brand-StyledAlert"
+})("max-width:100%;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1BhZ2VBbGVydHMvUGFnZUFsZXJ0cy50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9QYWdlQWxlcnRzL1BhZ2VBbGVydHMudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFsZXJ0LCBCb2R5UG9ydGFsLCBDb250ZW50Q29udGFpbmVyIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdXNlQ2FsbGJhY2ssIHVzZUNvbnRleHQsIHVzZUVmZmVjdCwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7XG4gIFBhZ2VBbGVydHNDb250ZXh0LFxuICBQYWdlQWxlcnRzQ29udGV4dFZhbHVlLFxufSBmcm9tICcuL1BhZ2VBbGVydHNQcm92aWRlcic7XG5pbXBvcnQgeyBQYWdlQWxlcnQgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IHR5cGUgUGFnZUFsZXJ0c1Byb3BzID0ge1xuICBleHRyYT86IFBhZ2VBbGVydFtdO1xufTtcblxuZXhwb3J0IGNvbnN0IEFsZXJ0QXJlYSA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB3aWR0aDogMTAwJTtcbiAgcGFkZGluZzogMXJlbSAwcmVtO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmcjtcbiAgcm93LWdhcDogMXJlbTtcbiAgdG9wOiAzLjVyZW07XG4gIGxlZnQ6IDUwJTtcbiAgei1pbmRleDogMTU7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgMCk7XG5gO1xuXG5jb25zdCBTdHlsZWRBbGVydCA9IHN0eWxlZChBbGVydClgXG4gIG1heC13aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBQYWdlQWxlcnRzOiBSZWFjdC5GQzxQYWdlQWxlcnRzUHJvcHM+ID0gKHsgZXh0cmEgPSBbXSB9KSA9PiB7XG4gIGNvbnN0IHsgYWxlcnRzLCBjbG9zZUFsZXJ0LCBhZGRBbGVydCB9ID1cbiAgICB1c2VDb250ZXh0PFBhZ2VBbGVydHNDb250ZXh0VmFsdWU+KFBhZ2VBbGVydHNDb250ZXh0KTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGV4dHJhLmZvckVhY2goYWRkQWxlcnQpO1xuICB9LCBbZXh0cmEsIGFkZEFsZXJ0XSk7XG5cbiAgY29uc3QgW2FsZXJ0QXJlYSwgc2V0QWxlcnRBcmVhXSA9IHVzZVN0YXRlPEhUTUxEaXZFbGVtZW50PigpO1xuICBjb25zdCByZWZDYWxsYmFjayA9IHVzZUNhbGxiYWNrKFxuICAgIChhbGVydEFyZWE6IEhUTUxEaXZFbGVtZW50KSA9PiB7XG4gICAgICBzZXRBbGVydEFyZWEoYWxlcnRBcmVhKTtcbiAgICB9LFxuICAgIFtzZXRBbGVydEFyZWFdXG4gICk7XG5cbiAgY29uc3QgZm9jdXNBbGVydENsb3NlQnV0dG9uID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGNvbnN0IHJlZkJ1dHRvbiA9IGFsZXJ0QXJlYT8ucXVlcnlTZWxlY3RvcignYnV0dG9uJyk7XG4gICAgcmVmQnV0dG9uPy5mb2N1cygpO1xuICB9LCBbYWxlcnRBcmVhXSk7XG5cbiAgLy8gRm9jdXMgd2hlbiBhbGVydEFyZWEgaXMgZmlyc3QgcmVuZGVyZWQsIGFzIHdlbGwgYXMgd2hlbiBhbGVydHMgY2hhbmdlXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgZm9jdXNBbGVydENsb3NlQnV0dG9uKCk7XG4gIH0sIFthbGVydHMsIGZvY3VzQWxlcnRDbG9zZUJ1dHRvbiwgYWxlcnRBcmVhXSk7XG5cbiAgaWYgKCFhbGVydHM/Lmxlbmd0aCkgcmV0dXJuIG51bGw7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm9keVBvcnRhbD5cbiAgICAgIDxBbGVydEFyZWFcbiAgICAgICAgcm9sZT1cImFsZXJ0XCJcbiAgICAgICAgYXJpYS1saXZlPVwiYXNzZXJ0aXZlXCJcbiAgICAgICAga2V5PVwiYWxlcnRzXCJcbiAgICAgICAgcmVmPXtyZWZDYWxsYmFja31cbiAgICAgID5cbiAgICAgICAge2FsZXJ0cy5tYXAoKGFsZXJ0KSA9PiAoXG4gICAgICAgICAgPENvbnRlbnRDb250YWluZXIgc2l6ZT1cIm1lZGl1bVwiIGtleT17YWxlcnQubWVzc2FnZX0+XG4gICAgICAgICAgICA8U3R5bGVkQWxlcnRcbiAgICAgICAgICAgICAgY3RhPXthbGVydC5jdGF9XG4gICAgICAgICAgICAgIG9uQ2xvc2U9e1xuICAgICAgICAgICAgICAgIGFsZXJ0LnBlcm1hbmVudFxuICAgICAgICAgICAgICAgICAgPyB1bmRlZmluZWRcbiAgICAgICAgICAgICAgICAgIDogKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgIGNsb3NlQWxlcnQoYWxlcnQubWVzc2FnZSk7XG4gICAgICAgICAgICAgICAgICAgICAgYWxlcnQ/Lm9uQ2xvc2U/LigpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgdHlwZT17YWxlcnQudHlwZX1cbiAgICAgICAgICAgICAgcGxhY2VtZW50PVwiZmxvYXRpbmdcIlxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICB7YWxlcnQubWVzc2FnZX1cbiAgICAgICAgICAgIDwvU3R5bGVkQWxlcnQ+XG4gICAgICAgICAgPC9Db250ZW50Q29udGFpbmVyPlxuICAgICAgICApKX1cbiAgICAgIDwvQWxlcnRBcmVhPlxuICAgIDwvQm9keVBvcnRhbD5cbiAgKTtcbn07XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJvQiJ9 */");
+const PageAlerts = ({ extra = [] }) => {
+	const { alerts, closeAlert, addAlert } = (0, react.useContext)(require_PageAlertsProvider.PageAlertsContext);
+	(0, react.useEffect)(() => {
+		extra.forEach(addAlert);
+	}, [extra, addAlert]);
+	const [alertArea, setAlertArea] = (0, react.useState)();
+	const refCallback = (0, react.useCallback)((alertArea) => {
+		setAlertArea(alertArea);
+	}, [setAlertArea]);
+	const focusAlertCloseButton = (0, react.useCallback)(() => {
+		(alertArea?.querySelector("button"))?.focus();
+	}, [alertArea]);
+	(0, react.useEffect)(() => {
+		focusAlertCloseButton();
+	}, [
+		alerts,
+		focusAlertCloseButton,
+		alertArea
+	]);
+	if (!alerts?.length) return null;
+	return /*#__PURE__*/ react.createElement(_codecademy_gamut.BodyPortal, null, /*#__PURE__*/ react.createElement(AlertArea, {
+		role: "alert",
+		"aria-live": "assertive",
+		key: "alerts",
+		ref: refCallback
+	}, alerts.map((alert) => /*#__PURE__*/ react.createElement(_codecademy_gamut.ContentContainer, {
+		size: "medium",
+		key: alert.message
+	}, /*#__PURE__*/ react.createElement(StyledAlert, {
+		cta: alert.cta,
+		onClose: alert.permanent ? void 0 : () => {
+			closeAlert(alert.message);
+			alert?.onClose?.();
+		},
+		type: alert.type,
+		placement: "floating"
+	}, alert.message)))));
+};
+
+//#endregion
+exports.AlertArea = AlertArea;
+exports.PageAlerts = PageAlerts;
+//# sourceMappingURL=PageAlerts.cjs.map

package/dist/PageAlerts/PageAlerts.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageAlerts.cjs","names":["Alert","BodyPortal","ContentContainer","styled","useCallback","useContext","useEffect","useState","React","PageAlertsContext","AlertArea","StyledAlert","PageAlerts","extra","alerts","closeAlert","addAlert","forEach","alertArea","setAlertArea","refCallback","focusAlertCloseButton","refButton","querySelector","focus","length","role","aria-live","key","ref","map","alert","size","message","cta","onClose","permanent","undefined","type","placement"],"sources":["../../src/PageAlerts/PageAlerts.tsx"],"sourcesContent":["import { Alert, BodyPortal, ContentContainer } from '@codecademy/gamut';\nimport styled from '@emotion/styled';\nimport { useCallback, useContext, useEffect, useState } from 'react';\nimport * as React from 'react';\n\nimport {\n  PageAlertsContext,\n  PageAlertsContextValue,\n} from './PageAlertsProvider';\nimport { PageAlert } from './types';\n\nexport type PageAlertsProps = {\n  extra?: PageAlert[];\n};\n\nexport const AlertArea = styled.div`\n  display: grid;\n  justify-content: center;\n  width: 100%;\n  padding: 1rem 0rem;\n  grid-template-columns: 1fr;\n  row-gap: 1rem;\n  top: 3.5rem;\n  left: 50%;\n  z-index: 15;\n  position: fixed;\n  transform: translate(-50%, 0);\n`;\n\nconst StyledAlert = styled(Alert)`\n  max-width: 100%;\n`;\n\nexport const PageAlerts: React.FC<PageAlertsProps> = ({ extra = [] }) => {\n  const { alerts, closeAlert, addAlert } =\n    useContext<PageAlertsContextValue>(PageAlertsContext);\n\n  useEffect(() => {\n    extra.forEach(addAlert);\n  }, [extra, addAlert]);\n\n  const [alertArea, setAlertArea] = useState<HTMLDivElement>();\n  const refCallback = useCallback(\n    (alertArea: HTMLDivElement) => {\n      setAlertArea(alertArea);\n    },\n    [setAlertArea]\n  );\n\n  const focusAlertCloseButton = useCallback(() => {\n    const refButton = alertArea?.querySelector('button');\n    refButton?.focus();\n  }, [alertArea]);\n\n  // Focus when alertArea is first rendered, as well as when alerts change\n  useEffect(() => {\n    focusAlertCloseButton();\n  }, [alerts, focusAlertCloseButton, alertArea]);\n\n  if (!alerts?.length) return null;\n\n  return (\n    <BodyPortal>\n      <AlertArea\n        role=\"alert\"\n        aria-live=\"assertive\"\n        key=\"alerts\"\n        ref={refCallback}\n      >\n        {alerts.map((alert) => (\n          <ContentContainer size=\"medium\" key={alert.message}>\n            <StyledAlert\n              cta={alert.cta}\n              onClose={\n                alert.permanent\n                  ? undefined\n                  : () => {\n                      closeAlert(alert.message);\n                      alert?.onClose?.();\n                    }\n              }\n              type={alert.type}\n              placement=\"floating\"\n            >\n              {alert.message}\n            </StyledAlert>\n          </ContentContainer>\n        ))}\n      </AlertArea>\n    </BodyPortal>\n  );\n};\n"],"mappings":";;;;;;;;;AAeA,MAAaU,YAAYP,2CAAAA,OAAAA;;;;AAczB,MAAMQ,cAAcR,2CAAOH,yBAAAA;;;;AAI3B,MAAaY,cAAyC,EAAEC,QAAQ,CAAA,QAAI;CAClE,MAAM,EAAEC,QAAQC,YAAYC,mCACSP,4CAAAA;CAErCH,2BAAU;EACRO,MAAMI,QAAQD,QAAAA;CAChB,GAAG,CAACH,OAAOG,SAAS;CAEpB,MAAM,CAACE,WAAWC,oCAAgBZ;CAClC,MAAMa,sCACHF,cAAAA;EACCC,aAAaD,SAAAA;CACf,GACA,CAACC,aAAa;CAGhB,MAAME,qDAAoC;EAExCC,CADkBJ,WAAWK,cAAc,QAAA,EAC3CD,EAAWE,MAAAA;CACb,GAAG,CAACN,UAAU;CAGdZ,2BAAU;EACRe,sBAAAA;CACF,GAAG;EAACP;EAAQO;EAAuBH;EAAU;CAE7C,IAAI,CAACJ,QAAQW,QAAQ,OAAO;CAE5B,OACE,oBAAA,cAACxB,8BAAAA,MACC,oBAAA,cAACS,WAAAA;EACCgB,MAAK;EACLC,aAAU;EACVC,KAAI;EACJC,KAAKT;IAEJN,OAAOgB,KAAKC,UACX,oBAAA,cAAC7B,oCAAAA;EAAiB8B,MAAK;EAASJ,KAAKG,MAAME;IACzC,oBAAA,cAACtB,aAAAA;EACCuB,KAAKH,MAAMG;EACXC,SACEJ,MAAMK,YACFC,eACA;GACEtB,WAAWgB,MAAME,OAAO;GACxBF,OAAOI,UAAAA;EACT;EAENG,MAAMP,MAAMO;EACZC,WAAU;IAETR,MAAME,OAAO,CAAA,CAAA,CAAA,CAAA;AAO5B"}

package/dist/PageAlerts/PageAlerts.d.cts

@@ -0,0 +1,15 @@
+import { PageAlert } from "./types.cjs";
+import * as React$1 from "react";
+
+//#region src/PageAlerts/PageAlerts.d.ts
+type PageAlertsProps = {
+  extra?: PageAlert[];
+};
+declare const AlertArea: import("@emotion/styled").StyledComponent<{
+  theme?: import("@emotion/react").Theme;
+  as?: React$1.ElementType;
+}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const PageAlerts: React$1.FC<PageAlertsProps>;
+//#endregion
+export { AlertArea, PageAlerts, PageAlertsProps };
+//# sourceMappingURL=PageAlerts.d.cts.map

package/dist/PageAlerts/PageAlerts.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageAlerts.d.cts","names":[],"sources":["../../src/PageAlerts/PageAlerts.tsx"],"mappings":";;;;KAWY,eAAA;EACV,KAAA,GAAQ,SAAS;AAAA;AAAA,cAGN,SAAA,4BAAS,eAAA;;;;cAkBT,UAAA,EAAY,OAAA,CAAM,EAAE,CAAC,eAAA"}

package/dist/PageAlerts/PageAlerts.d.ts

@@ -1,10 +1,15 @@
-import * as React from 'react';
-import { PageAlert } from './types';
-export type PageAlertsProps = {
-    extra?: PageAlert[];
+import { PageAlert } from "./types.js";
+import * as React$1 from "react";
+
+//#region src/PageAlerts/PageAlerts.d.ts
+type PageAlertsProps = {
+  extra?: PageAlert[];
 };
-export declare const AlertArea: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PageAlerts: React.FC<PageAlertsProps>;
+declare const AlertArea: import("@emotion/styled").StyledComponent<{
+  theme?: import("@emotion/react").Theme;
+  as?: React$1.ElementType;
+}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const PageAlerts: React$1.FC<PageAlertsProps>;
+//#endregion
+export { AlertArea, PageAlerts, PageAlertsProps };
+//# sourceMappingURL=PageAlerts.d.ts.map

package/dist/PageAlerts/PageAlerts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageAlerts.d.ts","names":[],"sources":["../../src/PageAlerts/PageAlerts.tsx"],"mappings":";;;;KAWY,eAAA;EACV,KAAA,GAAQ,SAAA;AAAA;AAAA,cAGG,SAAA,4BAAS,eAAA;;;;cAkBT,UAAA,EAAY,OAAA,CAAM,EAAA,CAAG,eAAA"}