@codecademy/brand 3.40.1-alpha.db88c958d7.0 → 4.0.0-alpha.0ae245495b.0

package/dist/Recurly/fields/elements.d.ts

@@ -1,17 +1,22 @@
-import type { Emitter } from '@recurly/recurly-js/lib/emitter';
-export declare const CardNumber: import("react").ForwardRefExoticComponent<EventHandlers & import("react").RefAttributes<Focusable>>;
-export declare const ExpMonth: import("react").ForwardRefExoticComponent<EventHandlers & import("react").RefAttributes<Focusable>>;
-export declare const ExpYear: import("react").ForwardRefExoticComponent<EventHandlers & import("react").RefAttributes<Focusable>>;
-export declare const CVV: import("react").ForwardRefExoticComponent<EventHandlers & import("react").RefAttributes<Focusable>>;
-export type ElementType = 'CardNumberElement' | 'CardMonthElement' | 'CardYearElement' | 'CardCvvElement';
-export type EventHandler = Parameters<Emitter['on']>[1];
-export type EventHandlers = {
-    onReady?: EventHandler;
-    onChange?: EventHandler;
-    onBlur?: EventHandler;
-    onFocus?: EventHandler;
-    onSubmit?: EventHandler;
+import * as react29 from "react";
+import { Emitter } from "@recurly/recurly-js/lib/emitter";
+
+//#region src/Recurly/fields/elements.d.ts
+declare const CardNumber: react29.ForwardRefExoticComponent<EventHandlers & react29.RefAttributes<Focusable>>;
+declare const ExpMonth: react29.ForwardRefExoticComponent<EventHandlers & react29.RefAttributes<Focusable>>;
+declare const ExpYear: react29.ForwardRefExoticComponent<EventHandlers & react29.RefAttributes<Focusable>>;
+declare const CVV: react29.ForwardRefExoticComponent<EventHandlers & react29.RefAttributes<Focusable>>;
+type ElementType = 'CardNumberElement' | 'CardMonthElement' | 'CardYearElement' | 'CardCvvElement';
+type EventHandler = Parameters<Emitter['on']>[1];
+type EventHandlers = {
+  onReady?: EventHandler;
+  onChange?: EventHandler;
+  onBlur?: EventHandler;
+  onFocus?: EventHandler;
+  onSubmit?: EventHandler;
 };
-export type Focusable = {
-    focus: () => void;
+type Focusable = {
+  focus: () => void;
 };
+//#endregion
+export { CVV, CardNumber, ElementType, EventHandler, EventHandlers, ExpMonth, ExpYear, Focusable };

package/dist/Recurly/fields/elements.js

@@ -1,106 +1,59 @@
-import { formFieldPaddingStyles } from '@codecademy/gamut/dist/Form/styles';
-import { forwardRef, useMemo, useRef } from 'react';
-import { useElements } from '../context';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const CardNumber = element('CardNumberElement', 'Card number');
-export const ExpMonth = element('CardMonthElement', 'Expiration month', 'MM');
-export const ExpYear = element('CardYearElement', 'Expiration year', 'YY');
-export const CVV = element('CardCvvElement', 'CVV');
-
-/* These match methods on `ElementsInstance`. 'CardElement' is omitted since we
-only need individual elements (number,month,year,cvv). */
-
-// The type that `element.on` expects. See `bindEventHandlers`.
-
-/* Our only reason for allowing folks to pass in a ref is so that they can call
-`.focus()` from the outside. This type satisfies `HTMLElement` (the type one
-might try to use) and `ElementInstance` (what we actually set the ref to). */
+import { useElements } from "../context/elements/index.js";
+import { forwardRef, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { formFieldPaddingStyles } from "@codecademy/gamut/dist/Form/styles";
 
+//#region src/Recurly/fields/elements.tsx
+const CardNumber = element("CardNumberElement", "Card number");
+const ExpMonth = element("CardMonthElement", "Expiration month", "MM");
+const ExpYear = element("CardYearElement", "Expiration year", "YY");
+const CVV = element("CardCvvElement", "CVV");
 /**
- * Defines a Recurly element component for a given type.
- */
+* Defines a Recurly element component for a given type.
+*/
 function element(type, title, placeholder) {
-  return /*#__PURE__*/forwardRef((eventHandlers, ref) => {
-    const elements = useElements({
-      noProviderError: 'Recurly element must be used within a Elements provider.'
-    });
-
-    // Keep ref updated with current event handlers. See `bindEventHandlers`.
-    const h = useRef({});
-    h.current = eventHandlers;
-    const callback = useMemo(() => {
-      if (!elements) return null;
-      let el;
-      return div => {
-        /* This is called once (with the div) when `elements` is defined and
-        once (with null) on component unmount. */
-        if (div) {
-          el = elements[type]({
-            style: getStyle(title, placeholder)
-          });
-          el.attach(div);
-          bindEventHandlers(el, h);
-          allowFocus(div, ref, el);
-        } else {
-          cleanup(el);
-        }
-      };
-    }, [elements, ref]);
-    return /*#__PURE__*/_jsx("div", {
-      ref: callback
-    });
-  });
+	return forwardRef((eventHandlers, ref) => {
+		const elements = useElements({ noProviderError: "Recurly element must be used within a Elements provider." });
+		const h = useRef({});
+		h.current = eventHandlers;
+		return /* @__PURE__ */ jsx("div", { ref: useMemo(() => {
+			if (!elements) return null;
+			let el;
+			return (div) => {
+				if (div) {
+					el = elements[type]({ style: getStyle(title, placeholder) });
+					el.attach(div);
+					bindEventHandlers(el, h);
+					allowFocus(div, ref, el);
+				} else cleanup(el);
+			};
+		}, [elements, ref]) });
+	});
 }
 function cleanup(el) {
-  /* `.destroy()` is not documented or included in the IndividualElement type,
-  but there is an example of @recurly/react-recurly using it here:
-  https://github.com/recurly/react-recurly/blob/main/lib/element/element.jsx#L112 */
-  el?.destroy();
+	el?.destroy();
 }
 function allowFocus(div, ref, el) {
-  // Forward focus from iframe to element. (used by RecurlyField label onClick)
-  div.querySelector('iframe')?.addEventListener('focus', () => el.focus());
-
-  // Set ref to our Recurly element instance so that one can call `.focus()`.
-  if (ref instanceof Function) {
-    ref(el); // call RefCallback
-  } else if (ref) {
-    ref.current = el; // set RefObject
-  }
+	div.querySelector("iframe")?.addEventListener("focus", () => el.focus());
+	if (ref instanceof Function) ref(el);
+	else if (ref) ref.current = el;
 }
 function getStyle(title, placeholder) {
-  const {
-    px,
-    py
-  } = formFieldPaddingStyles;
-  return {
-    /* We can't use Apercu in the iframe, but Recurly will pull in any Google
-    font. JetBrains Mono seems appropriate for card info. */
-    fontFamily: 'JetBrains Mono',
-    /* Most Gamut styling is applied outside the iframe by RecurlyField. We
-    apply padding in the iframe to ensure the entire element is clickable. */
-    padding: `${px}px ${py}px`,
-    /* For some bewildered reason, Recurly takes `title` and `placeholder` as
-    style properties. Title is necessary for screen readers. */
-    title,
-    /* The spread syntax for `placeholder` is only necessary because Recurly is
-    persnickety about only including it when defined. */
-    ...(placeholder ? {
-      placeholder
-    } : {})
-  };
+	const { px, py } = formFieldPaddingStyles;
+	return {
+		fontFamily: "JetBrains Mono",
+		padding: `${px}px ${py}px`,
+		title,
+		...placeholder ? { placeholder } : {}
+	};
 }
-
-/* When event handlers are passed as inline function props, they technically are
-new function instances on each render. Rather than re-attaching the handlers on
-each render, we keep a ref updated with the latest handlers and bind static
-handlers that call the dynamic handlers from the ref. @recurly/react-recurly
-essentially uses the same approach here:
-https://github.com/recurly/react-recurly/blob/main/lib/element/element.jsx#L102 */
 function bindEventHandlers(el, h) {
-  el.on('attach', (...args) => h.current?.onReady?.(...args));
-  el.on('change', (...args) => h.current?.onChange?.(...args));
-  el.on('blur', (...args) => h.current?.onBlur?.(...args));
-  el.on('focus', (...args) => h.current?.onFocus?.(...args));
-  el.on('submit', (...args) => h.current?.onSubmit?.(...args));
-}
+	el.on("attach", (...args) => h.current?.onReady?.(...args));
+	el.on("change", (...args) => h.current?.onChange?.(...args));
+	el.on("blur", (...args) => h.current?.onBlur?.(...args));
+	el.on("focus", (...args) => h.current?.onFocus?.(...args));
+	el.on("submit", (...args) => h.current?.onSubmit?.(...args));
+}
+
+//#endregion
+export { CVV, CardNumber, ExpMonth, ExpYear };

package/dist/Recurly/fields/index.d.ts

@@ -1,2 +1,2 @@
-export * from './elements';
-export * from './RecurlyField';
+import { CVV, CardNumber, ElementType, EventHandler, EventHandlers, ExpMonth, ExpYear, Focusable } from "./elements.js";
+import { RecurlyField, RecurlyFieldProps } from "./RecurlyField.js";

package/dist/Recurly/index.cjs

@@ -0,0 +1,13 @@
+const require_index = require('./context/recurly/index.cjs');
+const require_index$1 = require('./context/elements/index.cjs');
+const require_elements = require('./fields/elements.cjs');
+const require_RecurlyField = require('./fields/RecurlyField.cjs');
+
+exports.CVV = require_elements.CVV;
+exports.CardNumber = require_elements.CardNumber;
+exports.Elements = require_index$1.Elements;
+exports.ExpMonth = require_elements.ExpMonth;
+exports.ExpYear = require_elements.ExpYear;
+exports.RecurlyField = require_RecurlyField.RecurlyField;
+exports.RecurlyProvider = require_index.RecurlyProvider;
+exports.useRecurly = require_index.useRecurly;

package/dist/Recurly/index.d.cts

@@ -0,0 +1,5 @@
+import { CVV, CardNumber, ElementType, EventHandler, EventHandlers, ExpMonth, ExpYear, Focusable } from "./fields/elements.cjs";
+import { RecurlyField, RecurlyFieldProps } from "./fields/RecurlyField.cjs";
+import { RecurlyProvider, useRecurly } from "./context/recurly/index.cjs";
+import { Elements } from "./context/elements/index.cjs";
+export { CVV, CardNumber, ElementType, Elements, EventHandler, EventHandlers, ExpMonth, ExpYear, Focusable, RecurlyField, RecurlyFieldProps, RecurlyProvider, useRecurly };

package/dist/Recurly/index.d.ts

@@ -1,2 +1,7 @@
-export * from './fields';
-export { Elements, RecurlyProvider, useRecurly } from './context';
+import { CVV, CardNumber, ElementType, EventHandler, EventHandlers, ExpMonth, ExpYear, Focusable } from "./fields/elements.js";
+import { RecurlyField, RecurlyFieldProps } from "./fields/RecurlyField.js";
+import "./fields/index.js";
+import { RecurlyProvider, useRecurly } from "./context/recurly/index.js";
+import { Elements } from "./context/elements/index.js";
+import "./context/index.js";
+export { CVV, CardNumber, ElementType, Elements, EventHandler, EventHandlers, ExpMonth, ExpYear, Focusable, RecurlyField, RecurlyFieldProps, RecurlyProvider, useRecurly };

package/dist/Recurly/index.js

@@ -1,2 +1,6 @@
-export * from './fields';
-export { Elements, RecurlyProvider, useRecurly } from './context';
+import { RecurlyProvider, useRecurly } from "./context/recurly/index.js";
+import { Elements } from "./context/elements/index.js";
+import { CVV, CardNumber, ExpMonth, ExpYear } from "./fields/elements.js";
+import { RecurlyField } from "./fields/RecurlyField.js";
+
+export { CVV, CardNumber, Elements, ExpMonth, ExpYear, RecurlyField, RecurlyProvider, useRecurly };

package/dist/ResourceCard/index.cjs

@@ -0,0 +1,59 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/ResourceCard/index.tsx
+let ResourceType = /* @__PURE__ */ function(ResourceType$1) {
+	ResourceType$1["Article"] = "Article";
+	ResourceType$1["Doc"] = "Doc";
+	ResourceType$1["Blog"] = "Blog Post";
+	return ResourceType$1;
+}({});
+const ResourceCard = ({ title, description, resourceType, headingLevel, path, ...cardProps }) => {
+	const cardTitle = path ? [resourceType, ...path].join(" / ") : resourceType;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Card, {
+		variant: "white",
+		borderRadius: "md",
+		borderColor: "border-primary",
+		overflow: "hidden",
+		display: "flex",
+		flexDirection: "column",
+		isInteractive: true,
+		p: 0,
+		height: "100%",
+		...cardProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Box, {
+			px: 12,
+			py: 4,
+			boxShadow: `inset 0 -1px 0 0 ${_codecademy_gamut_styles.theme.colors.navy}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				fontFamily: "accent",
+				fontSize: 14,
+				children: cardTitle
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+			px: 12,
+			py: 4,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				variant: "title-xs",
+				as: headingLevel,
+				truncate: "ellipsis",
+				truncateLines: 2,
+				pt: 12,
+				pb: 4,
+				children: title
+			}), description && (typeof description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				variant: "p-small",
+				truncate: "ellipsis",
+				truncateLines: 2,
+				mb: 16,
+				children: description
+			}) : description)]
+		})]
+	});
+};
+
+//#endregion
+exports.ResourceCard = ResourceCard;
+exports.ResourceType = ResourceType;

package/dist/ResourceCard/index.d.cts

@@ -0,0 +1,19 @@
+import { CardProps } from "../CurriculumCard/index.cjs";
+import { HeadingTags } from "@codecademy/gamut";
+
+//#region src/ResourceCard/index.d.ts
+declare enum ResourceType {
+  Article = "Article",
+  Doc = "Doc",
+  Blog = "Blog Post",
+}
+type ResourceCardProps = CardProps & {
+  title: string;
+  description: string | React.ReactNode;
+  resourceType: ResourceType;
+  headingLevel: HeadingTags;
+  path?: string[];
+};
+declare const ResourceCard: React.FC<ResourceCardProps>;
+//#endregion
+export { ResourceCard, ResourceCardProps, ResourceType };

package/dist/ResourceCard/index.d.ts

@@ -1,15 +1,19 @@
-import { HeadingTags } from '@codecademy/gamut';
-import { CardProps } from '../CurriculumCard';
-export declare enum ResourceType {
-    Article = "Article",
-    Doc = "Doc",
-    Blog = "Blog Post"
+import { CardProps } from "../CurriculumCard/index.js";
+import { HeadingTags } from "@codecademy/gamut";
+
+//#region src/ResourceCard/index.d.ts
+declare enum ResourceType {
+  Article = "Article",
+  Doc = "Doc",
+  Blog = "Blog Post",
 }
-export type ResourceCardProps = CardProps & {
-    title: string;
-    description: string | React.ReactNode;
-    resourceType: ResourceType;
-    headingLevel: HeadingTags;
-    path?: string[];
+type ResourceCardProps = CardProps & {
+  title: string;
+  description: string | React.ReactNode;
+  resourceType: ResourceType;
+  headingLevel: HeadingTags;
+  path?: string[];
 };
-export declare const ResourceCard: React.FC<ResourceCardProps>;
+declare const ResourceCard: React.FC<ResourceCardProps>;
+//#endregion
+export { ResourceCard, ResourceCardProps, ResourceType };

package/dist/ResourceCard/index.js

@@ -1,59 +1,57 @@
-import { Box, Card, Text } from '@codecademy/gamut';
-import { theme } from '@codecademy/gamut-styles';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export let ResourceType = /*#__PURE__*/function (ResourceType) {
-  ResourceType["Article"] = "Article";
-  ResourceType["Doc"] = "Doc";
-  ResourceType["Blog"] = "Blog Post"; // can be expanded for Cheatsheet, etc...
-  return ResourceType;
+import { Box, Card, Text } from "@codecademy/gamut";
+import { theme } from "@codecademy/gamut-styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ResourceCard/index.tsx
+let ResourceType = /* @__PURE__ */ function(ResourceType$1) {
+	ResourceType$1["Article"] = "Article";
+	ResourceType$1["Doc"] = "Doc";
+	ResourceType$1["Blog"] = "Blog Post";
+	return ResourceType$1;
 }({});
-export const ResourceCard = ({
-  title,
-  description,
-  resourceType,
-  headingLevel,
-  path,
-  ...cardProps
-}) => {
-  const cardTitle = path ? [resourceType, ...path].join(' / ') : resourceType;
-  return /*#__PURE__*/_jsxs(Card, {
-    variant: "white",
-    borderRadius: "md",
-    borderColor: "border-primary",
-    overflow: "hidden",
-    display: "flex",
-    flexDirection: "column",
-    isInteractive: true,
-    p: 0,
-    height: "100%",
-    ...cardProps,
-    children: [/*#__PURE__*/_jsx(Box, {
-      px: 12,
-      py: 4,
-      boxShadow: `inset 0 -1px 0 0 ${theme.colors.navy}`,
-      children: /*#__PURE__*/_jsx(Text, {
-        fontFamily: "accent",
-        fontSize: 14,
-        children: cardTitle
-      })
-    }), /*#__PURE__*/_jsxs(Box, {
-      px: 12,
-      py: 4,
-      children: [/*#__PURE__*/_jsx(Text, {
-        variant: "title-xs",
-        as: headingLevel,
-        truncate: "ellipsis",
-        truncateLines: 2,
-        pt: 12,
-        pb: 4,
-        children: title
-      }), description && (typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
-        variant: "p-small",
-        truncate: "ellipsis",
-        truncateLines: 2,
-        mb: 16,
-        children: description
-      }) : description)]
-    })]
-  });
-};
+const ResourceCard = ({ title, description, resourceType, headingLevel, path, ...cardProps }) => {
+	const cardTitle = path ? [resourceType, ...path].join(" / ") : resourceType;
+	return /* @__PURE__ */ jsxs(Card, {
+		variant: "white",
+		borderRadius: "md",
+		borderColor: "border-primary",
+		overflow: "hidden",
+		display: "flex",
+		flexDirection: "column",
+		isInteractive: true,
+		p: 0,
+		height: "100%",
+		...cardProps,
+		children: [/* @__PURE__ */ jsx(Box, {
+			px: 12,
+			py: 4,
+			boxShadow: `inset 0 -1px 0 0 ${theme.colors.navy}`,
+			children: /* @__PURE__ */ jsx(Text, {
+				fontFamily: "accent",
+				fontSize: 14,
+				children: cardTitle
+			})
+		}), /* @__PURE__ */ jsxs(Box, {
+			px: 12,
+			py: 4,
+			children: [/* @__PURE__ */ jsx(Text, {
+				variant: "title-xs",
+				as: headingLevel,
+				truncate: "ellipsis",
+				truncateLines: 2,
+				pt: 12,
+				pb: 4,
+				children: title
+			}), description && (typeof description === "string" ? /* @__PURE__ */ jsx(Text, {
+				variant: "p-small",
+				truncate: "ellipsis",
+				truncateLines: 2,
+				mb: 16,
+				children: description
+			}) : description)]
+		})]
+	});
+};
+
+//#endregion
+export { ResourceCard, ResourceType };

package/dist/ScoreSummary/SubScores.cjs

@@ -0,0 +1,136 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_helpers = require('./helpers.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_icons = require("@codecademy/gamut-icons");
+
+//#region src/ScoreSummary/SubScores.tsx
+const SHOW_REVIEW_SCORE = .6;
+const PASSING_SCORE = .7;
+const renderSubScores = ({ isChallenge, subScores, pathSlug, trackSlug, trackingData, trackUserClick, colorfulIcons }) => Object.entries(subScores).map(([subContentId, { title: subContentTitle, correct: subContentCorrect, total: subContentTotal, slug: subContentSlug }], i) => {
+	const subContentPercentCorrect = subContentCorrect / subContentTotal;
+	const reviewConceptsPath = require_helpers.createResumeUrlPath({
+		pathSlug,
+		trackSlug,
+		moduleSlug: subContentSlug
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+		borderTop: i !== 0 ? 1 : "none",
+		px: 16,
+		py: 8,
+		justifyContent: "space-between",
+		alignItems: "center",
+		role: "listitem",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+			alignItems: "center",
+			children: [colorfulIcons ? subContentPercentCorrect >= PASSING_SCORE ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.CheckFilledIcon, {
+				minWidth: 16,
+				mr: 12,
+				color: "feedback-success"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut_icons.DeleteFilledIcon, {
+				minWidth: 16,
+				mr: 12,
+				color: "feedback-error"
+			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				screenreader: true,
+				children: colorfulIcons ? `${subContentPercentCorrect >= PASSING_SCORE ? "passed" : "failed"}: ` : ""
+			}), isChallenge ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Markdown, {
+				inline: true,
+				spacing: "none",
+				text: subContentTitle
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				fontWeight: "bold",
+				children: subContentTitle
+			})] })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+			fontSize: 14,
+			minWidth: subContentPercentCorrect < SHOW_REVIEW_SCORE && trackSlug ? "11rem" : "3rem",
+			justifyContent: "flex-end",
+			children: [subContentPercentCorrect < SHOW_REVIEW_SCORE && trackSlug && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Anchor, {
+				"aria-label": `Review concepts for ${subContentTitle}`,
+				mr: 16,
+				href: reviewConceptsPath,
+				onClick: () => trackingData && trackUserClick?.({
+					...trackingData,
+					course_progress: parseFloat(subContentPercentCorrect.toFixed(4)),
+					href: reviewConceptsPath,
+					module_id: subContentId
+				}),
+				children: "Review Concepts"
+			}), " "] }), !isChallenge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				"aria-label": `${subContentCorrect} out of ${subContentTotal} questions correct`,
+				children: `${subContentCorrect} / ${subContentTotal}`
+			})]
+		})]
+	}, subContentId);
+});
+const renderUntestedSubContent = ({ untestedSubContent, lighterBorderColor }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+	flexDirection: "column",
+	borderWidth: 1,
+	borderWidthTop: 0,
+	borderStyle: "solid",
+	borderColor: lighterBorderColor,
+	children: untestedSubContent.map(({ id, title }, i) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+			borderWidth: 1,
+			borderWidthTop: i === 0 ? 0 : 1,
+			borderStyle: "solid",
+			borderColor: lighterBorderColor,
+			px: 16,
+			py: 8,
+			justifyContent: "space-between",
+			color: lighterBorderColor,
+			role: "listitem",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+				flexGrow: 1,
+				children: title
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+				fontSize: 14,
+				alignItems: "center",
+				minWidth: "6.5rem",
+				justifyContent: "flex-end",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+					fontFamily: "accent",
+					children: "Not tested"
+				})
+			})]
+		}, id);
+	})
+});
+const SubScores = ({ colorfulIcons = false, isChallenge = false, layout = "row", lighterBorderColor = "navy-400", noMaxWidth = false, pathSlug, showUntestedContent = false, subScores, trackSlug, trackingData, trackUserClick, untestedSubContent }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.FlexBox, {
+		flexDirection: "column",
+		maxWidth: noMaxWidth ? "" : (0, _codecademy_gamut_styles.pxRem)(705),
+		role: "list",
+		"aria-label": "Unit Subjects",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.FlexBox, {
+			flexDirection: "column",
+			borderX: 1,
+			borderBottom: 1,
+			borderTop: isChallenge ? 1 : layout === "row" ? {
+				_: void 0,
+				md: 1
+			} : void 0,
+			children: renderSubScores({
+				colorfulIcons,
+				isChallenge,
+				pathSlug,
+				subScores,
+				trackSlug,
+				trackingData,
+				trackUserClick
+			})
+		}), showUntestedContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.GridBox, {
+			bg: "transparent",
+			children: untestedSubContent && untestedSubContent?.length > 0 && renderUntestedSubContent({
+				untestedSubContent,
+				lighterBorderColor
+			})
+		})]
+	});
+};
+
+//#endregion
+exports.SubScores = SubScores;
+exports.renderSubScores = renderSubScores;

package/dist/ScoreSummary/SubScores.d.cts

@@ -0,0 +1,40 @@
+import { CorrectAnswerCountsBySubContent, UntestedSubContent } from "./types.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Colors } from "@codecademy/gamut-styles";
+import { UserClickData } from "@codecademy/tracking";
+
+//#region src/ScoreSummary/SubScores.d.ts
+declare const renderSubScores: ({
+  isChallenge,
+  subScores,
+  pathSlug,
+  trackSlug,
+  trackingData,
+  trackUserClick,
+  colorfulIcons
+}: {
+  subScores: CorrectAnswerCountsBySubContent;
+  pathSlug: string;
+  colorfulIcons?: boolean;
+  isChallenge?: boolean;
+  trackSlug?: string;
+  trackingData?: UserClickData;
+  trackUserClick?: (data: UserClickData) => void;
+}) => react_jsx_runtime0.JSX.Element[];
+interface SubScoresProps {
+  colorfulIcons?: boolean;
+  isChallenge?: boolean;
+  layout?: 'column' | 'row';
+  lighterBorderColor?: Colors;
+  noMaxWidth?: boolean;
+  pathSlug: string;
+  showUntestedContent?: boolean;
+  subScores: CorrectAnswerCountsBySubContent;
+  trackingData?: UserClickData;
+  trackUserClick?: (data: UserClickData) => void;
+  trackSlug?: string;
+  untestedSubContent?: UntestedSubContent[];
+}
+declare const SubScores: React.FC<SubScoresProps>;
+//#endregion
+export { SubScores, renderSubScores };