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

package/dist/Logos/shared.js

@@ -1,12 +1,16 @@
-import { styledOptions, system } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import { variance } from "@codecademy/variance";
-
-//#region src/Logos/shared.tsx
+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);
-const LogoSvg = styled("svg", styledOptions())(system.css({ textColor: "currentColor" }), logoStyles);
+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);
-const StyledSVGWrapper = styled("svg", styledOptions())(composedLogoStyles);
-
-//#endregion
-export { StyledSVGWrapper };
+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

@@ -1,11 +1,8 @@
-import React from "react";
-
-//#region src/MarketingToaster/index.d.ts
+import React from 'react';
 interface MarketingToasterProps {
-  toasts: {
-    [key: string]: React.ReactNode;
-  };
+    toasts: {
+        [key: string]: React.ReactNode;
+    };
 }
-declare const MarketingToaster: React.FC<MarketingToasterProps>;
-//#endregion
-export { MarketingToaster };
+export declare const MarketingToaster: React.FC<MarketingToasterProps>;
+export {};

package/dist/MarketingToaster/index.js

@@ -1,47 +1,67 @@
-import { Box, FlexBox } from "@codecademy/gamut";
-import styled from "@emotion/styled";
-import React from "react";
-import { jsx } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "framer-motion";
-
-//#region src/MarketingToaster/index.tsx
-const MarketingToaster = ({ toasts }) => {
-	return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(motion.div, {
-		initial: false,
-		animate: {
-			opacity: 1,
-			left: 0
-		},
-		exit: { opacity: 0 },
-		transition: { duration: .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") });
+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 = styled(FlexBox)`
-  pointer-events: none;
-`;
-const InnerBox = styled(Box)`
-  pointer-events: all;
-`;
-
-//#endregion
-export { MarketingToaster };
+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

@@ -1,11 +1,8 @@
-import React from "react";
-
-//#region src/NotFoundContent/index.d.ts
+import React from 'react';
 interface NotFoundPageProps {
-  title?: string;
-  subtitle?: string;
-  hiddenText?: string;
+    title?: string;
+    subtitle?: string;
+    hiddenText?: string;
 }
-declare const NotFoundContent: React.FC<NotFoundPageProps>;
-//#endregion
-export { NotFoundContent };
+export declare const NotFoundContent: React.FC<NotFoundPageProps>;
+export {};

package/dist/NotFoundContent/index.js

@@ -1,46 +1,55 @@
-import _404_default from "./404.js";
-import { Box, Text } from "@codecademy/gamut";
-import { css } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/NotFoundContent/index.tsx
-const ErrorContainer = styled(Box)(css({ canvas: { maxWidth: "100vw" } }));
-const Image = Box.withComponent("img");
-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: _404_default,
-				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
-				})]
-			})]
-		})]
-	});
-};
-
-//#endregion
-export { NotFoundContent };
+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

@@ -1,33 +1,23 @@
-import { Bee, Browser, Confetti, Plant, Sun } from "@codecademy/gamut-illustrations";
-
-//#region src/NotificationList/EmptyNotification/emptyNotificationContents.tsx
-const emptyNotificationContents = [
-	{
-		text: "You're all caught up!",
-		subtext: "Go forth and learn new things.",
-		image: Bee
-	},
-	{
-		text: "You're all caught up!",
-		subtext: "Time to learn new things.",
-		image: Confetti
-	},
-	{
-		text: "You're all caught up!",
-		subtext: "The future looks bright.",
-		image: Sun
-	},
-	{
-		text: "You're up to date!",
-		subtext: "Go forth and learn new things.",
-		image: Plant
-	},
-	{
-		text: "You're up to date!",
-		subtext: "Clear future ahead.",
-		image: Browser
-	}
-];
-
-//#endregion
-export { emptyNotificationContents };
+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

@@ -1,42 +1,38 @@
-import { emptyNotificationContents } from "./emptyNotificationContents.js";
-import { FlexBox, Text } from "@codecademy/gamut";
-import { useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import sample from "lodash/sample";
-
-//#region src/NotificationList/EmptyNotification/index.tsx
-const EmptyNotification = () => {
-	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
-			})]
-		})]
-	});
-};
-
-//#endregion
-export { EmptyNotification };
+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

@@ -1,12 +1,8 @@
-import { Notification } from "./typings.js";
-import * as React$1 from "react";
-
-//#region src/NotificationList/NotificationItem.d.ts
-type NotificationItemProps = {
-  notification: Notification;
-  handleClick?: (event: object) => void;
-  handleDismiss?: () => void;
+import * as React from 'react';
+import { Notification } from './typings';
+export type NotificationItemProps = {
+    notification: Notification;
+    handleClick?: (event: object) => void;
+    handleDismiss?: () => void;
 };
-declare const NotificationItem: React$1.FC<NotificationItemProps>;
-//#endregion
-export { NotificationItem, NotificationItemProps };
+export declare const NotificationItem: React.FC<NotificationItemProps>;