@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

package/dist/Recurly/fields/elements.js

@@ -1,106 +1,60 @@
-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 "../context/index.js";
+import { forwardRef, useMemo, useRef } from "react";
+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.
- */
-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
-    });
-  });
+* 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." });
+		const h = useRef({});
+		h.current = eventHandlers;
+		const callback = 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]);
+		return /* @__PURE__ */ React.createElement("div", { ref: callback });
+	});
 }
 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 };
+//# sourceMappingURL=elements.js.map

package/dist/Recurly/fields/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","names":["formFieldPaddingStyles","forwardRef","useMemo","useRef","useElements","CardNumber","element","ExpMonth","ExpYear","CVV","type","title","placeholder","eventHandlers","ref","elements","noProviderError","h","current","callback","el","div","style","getStyle","attach","bindEventHandlers","allowFocus","cleanup","destroy","querySelector","addEventListener","focus","Function","px","py","fontFamily","padding","on","args","onReady","onChange","onBlur","onFocus","onSubmit"],"sources":["../../../src/Recurly/fields/elements.tsx"],"sourcesContent":["import { formFieldPaddingStyles } from '@codecademy/gamut/dist/Form/styles';\nimport type {\n  CommonElementStyle,\n  IndividualElement,\n} from '@recurly/recurly-js';\nimport type { Emitter } from '@recurly/recurly-js/lib/emitter';\nimport { ForwardedRef, forwardRef, RefObject, useMemo, useRef } from 'react';\n\nimport { useElements } from '../context';\n\nexport const CardNumber = element('CardNumberElement', 'Card number');\nexport const ExpMonth = element('CardMonthElement', 'Expiration month', 'MM');\nexport const ExpYear = element('CardYearElement', 'Expiration year', 'YY');\nexport const CVV = element('CardCvvElement', 'CVV');\n\n/* These match methods on `ElementsInstance`. 'CardElement' is omitted since we\nonly need individual elements (number,month,year,cvv). */\nexport type ElementType =\n  | 'CardNumberElement'\n  | 'CardMonthElement'\n  | 'CardYearElement'\n  | 'CardCvvElement';\n\n// The type that `element.on` expects. See `bindEventHandlers`.\nexport type EventHandler = Parameters<Emitter['on']>[1];\n\nexport type EventHandlers = {\n  onReady?: EventHandler;\n  onChange?: EventHandler;\n  onBlur?: EventHandler;\n  onFocus?: EventHandler;\n  onSubmit?: EventHandler;\n};\n\n/* Our only reason for allowing folks to pass in a ref is so that they can call\n`.focus()` from the outside. This type satisfies `HTMLElement` (the type one\nmight try to use) and `ElementInstance` (what we actually set the ref to). */\nexport type Focusable = { focus: () => void };\n\n/**\n * Defines a Recurly element component for a given type.\n */\nfunction element(type: ElementType, title: string, placeholder?: string) {\n  return forwardRef<Focusable, EventHandlers>((eventHandlers, ref) => {\n    const elements = useElements({\n      noProviderError:\n        'Recurly element must be used within a Elements provider.',\n    });\n\n    // Keep ref updated with current event handlers. See `bindEventHandlers`.\n    const h = useRef<EventHandlers>({});\n    h.current = eventHandlers;\n\n    const callback = useMemo(() => {\n      if (!elements) return null;\n\n      let el: IndividualElement;\n      return (div: HTMLDivElement | null) => {\n        /* This is called once (with the div) when `elements` is defined and\n        once (with null) on component unmount. */\n        if (div) {\n          el = elements[type]({ style: getStyle(title, placeholder) });\n          el.attach(div);\n          bindEventHandlers(el, h);\n          allowFocus(div, ref, el);\n        } else {\n          cleanup(el);\n        }\n      };\n    }, [elements, ref]);\n\n    return <div ref={callback} />;\n  });\n}\n\nfunction cleanup(el?: IndividualElement) {\n  /* `.destroy()` is not documented or included in the IndividualElement type,\n  but there is an example of @recurly/react-recurly using it here:\n  https://github.com/recurly/react-recurly/blob/main/lib/element/element.jsx#L112 */\n  (el as unknown as { destroy: () => void })?.destroy();\n}\n\nfunction allowFocus(\n  div: HTMLDivElement,\n  ref: ForwardedRef<Focusable>,\n  el: IndividualElement\n) {\n  // Forward focus from iframe to element. (used by RecurlyField label onClick)\n  div.querySelector('iframe')?.addEventListener('focus', () => el.focus());\n\n  // Set ref to our Recurly element instance so that one can call `.focus()`.\n  if (ref instanceof Function) {\n    ref(el); // call RefCallback\n  } else if (ref) {\n    ref.current = el; // set RefObject\n  }\n}\n\nfunction getStyle(title: string, placeholder?: string) {\n  const { px, py } = formFieldPaddingStyles;\n  return {\n    /* We can't use Apercu in the iframe, but Recurly will pull in any Google\n    font. JetBrains Mono seems appropriate for card info. */\n    fontFamily: 'JetBrains Mono',\n\n    /* Most Gamut styling is applied outside the iframe by RecurlyField. We\n    apply padding in the iframe to ensure the entire element is clickable. */\n    padding: `${px}px ${py}px`,\n\n    /* For some bewildered reason, Recurly takes `title` and `placeholder` as\n    style properties. Title is necessary for screen readers. */\n    title,\n\n    /* The spread syntax for `placeholder` is only necessary because Recurly is\n    persnickety about only including it when defined. */\n    ...(placeholder ? { placeholder } : {}),\n  } as CommonElementStyle;\n}\n\n/* When event handlers are passed as inline function props, they technically are\nnew function instances on each render. Rather than re-attaching the handlers on\neach render, we keep a ref updated with the latest handlers and bind static\nhandlers that call the dynamic handlers from the ref. @recurly/react-recurly\nessentially uses the same approach here:\nhttps://github.com/recurly/react-recurly/blob/main/lib/element/element.jsx#L102 */\nfunction bindEventHandlers(el: IndividualElement, h: RefObject<EventHandlers>) {\n  el.on('attach', (...args) => h.current?.onReady?.(...args));\n  el.on('change', (...args) => h.current?.onChange?.(...args));\n  el.on('blur', (...args) => h.current?.onBlur?.(...args));\n  el.on('focus', (...args) => h.current?.onFocus?.(...args));\n  el.on('submit', (...args) => h.current?.onSubmit?.(...args));\n}\n"],"mappings":";;;;;;AAUA,MAAaK,aAAaC,QAAQ,qBAAqB,cAAA;AACvD,MAAaC,WAAWD,QAAQ,oBAAoB,oBAAoB,KAAA;AACxE,MAAaE,UAAUF,QAAQ,mBAAmB,mBAAmB,KAAA;AACrE,MAAaG,MAAMH,QAAQ,kBAAkB,MAAA;;;GA6B7C,SAASA,QAAQI,MAAmBC,OAAeC,aAAoB;AACrE,QAAOX,4BAAsCY,eAAeC,QAAAA;EAC1D,MAAMC,WAAWX,YAAY,EAC3BY,iBACE,4DACJ,CAAA;EAGA,MAAMC,IAAId,OAAsB,EAAC,CAAA;AACjCc,IAAEC,UAAUL;EAEZ,MAAMM,WAAWjB,cAAQ;AACvB,OAAI,CAACa,SAAU,QAAO;GAEtB,IAAIK;AACJ,WAAQC,QAAAA;AAGN,QAAIA,KAAK;AACPD,UAAKL,SAASL,MAAM,EAAEY,OAAOC,SAASZ,OAAOC,YAAAA,EAAa,CAAA;AAC1DQ,QAAGI,OAAOH,IAAAA;AACVI,uBAAkBL,IAAIH,EAAAA;AACtBS,gBAAWL,KAAKP,KAAKM,GAAAA;UAErBO,SAAQP,GAAAA;;KAGX,CAACL,UAAUD,IAAI,CAAA;AAElB,SAAO,sBAAA,cAACO,OAAAA,EAAIP,KAAKK;GACnB;;AAGF,SAASQ,QAAQP,IAAsB;AAIpCA,KAA2CQ,SAAAA;;AAG9C,SAASF,WACPL,KACAP,KACAM,IAAqB;AAGrBC,KAAIQ,cAAc,SAAA,EAAWC,iBAAiB,eAAeV,GAAGW,OAAK,CAAA;AAGrE,KAAIjB,eAAekB,SACjBlB,KAAIM,GAAAA;UACKN,IACTA,KAAII,UAAUE;;AAIlB,SAASG,SAASZ,OAAeC,aAAoB;CACnD,MAAM,EAAEqB,IAAIC,OAAOlC;AACnB,QAAO;EAGLmC,YAAY;EAIZC,SAAS,GAAGH,GAAG,KAAKC,GAAG;EAIvBvB;EAIA,GAAIC,cAAc,EAAEA,aAAY,GAAI,EAAE;EACxC;;AASF,SAASa,kBAAkBL,IAAuBH,GAA2B;AAC3EG,IAAGiB,GAAG,WAAW,GAAGC,SAASrB,EAAEC,SAASqB,UAAAA,GAAaD,KAAAA,CAAAA;AACrDlB,IAAGiB,GAAG,WAAW,GAAGC,SAASrB,EAAEC,SAASsB,WAAAA,GAAcF,KAAAA,CAAAA;AACtDlB,IAAGiB,GAAG,SAAS,GAAGC,SAASrB,EAAEC,SAASuB,SAAAA,GAAYH,KAAAA,CAAAA;AAClDlB,IAAGiB,GAAG,UAAU,GAAGC,SAASrB,EAAEC,SAASwB,UAAAA,GAAaJ,KAAAA,CAAAA;AACpDlB,IAAGiB,GAAG,WAAW,GAAGC,SAASrB,EAAEC,SAASyB,WAAAA,GAAcL,KAAAA,CAAAA"}

package/dist/Recurly/fields/index.cjs

@@ -0,0 +1,2 @@
+const require_elements = require('./elements.cjs');
+const require_RecurlyField = require('./RecurlyField.cjs');

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/fields/index.js

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

package/dist/Recurly/index.cjs

@@ -0,0 +1,6 @@
+const require_index = require('./context/recurly/index.cjs');
+const require_index$1 = require('./context/elements/index.cjs');
+require('./context/index.cjs');
+const require_elements = require('./fields/elements.cjs');
+const require_RecurlyField = require('./fields/RecurlyField.cjs');
+require('./fields/index.cjs');

package/dist/Recurly/index.d.ts

@@ -1,2 +1,6 @@
-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";

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 "./context/index.js";
+import { CVV, CardNumber, ExpMonth, ExpYear } from "./fields/elements.js";
+import { RecurlyField } from "./fields/RecurlyField.js";
+import "./fields/index.js";

package/dist/ResourceCard/index.cjs

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

package/dist/ResourceCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Box","Card","Text","theme","ResourceType","ResourceCard","title","description","resourceType","headingLevel","path","cardProps","cardTitle","join","variant","borderRadius","borderColor","overflow","display","flexDirection","isInteractive","p","height","px","py","boxShadow","colors","navy","fontFamily","fontSize","as","truncate","truncateLines","pt","pb","mb"],"sources":["../../src/ResourceCard/index.tsx"],"sourcesContent":["import { Box, Card, HeadingTags, Text } from '@codecademy/gamut';\nimport { theme } from '@codecademy/gamut-styles';\n\nimport { CardProps } from '../CurriculumCard';\n\nexport enum ResourceType {\n  Article = 'Article',\n  Doc = 'Doc',\n  Blog = 'Blog Post',\n  // can be expanded for Cheatsheet, etc...\n}\n\nexport type ResourceCardProps = CardProps & {\n  title: string;\n  description: string | React.ReactNode;\n  resourceType: ResourceType;\n  headingLevel: HeadingTags;\n  path?: string[];\n};\n\nexport const ResourceCard: React.FC<ResourceCardProps> = ({\n  title,\n  description,\n  resourceType,\n  headingLevel,\n  path,\n  ...cardProps\n}) => {\n  const cardTitle = path ? [resourceType, ...path].join(' / ') : resourceType;\n  return (\n    <Card\n      variant=\"white\"\n      borderRadius=\"md\"\n      borderColor=\"border-primary\"\n      overflow=\"hidden\"\n      display=\"flex\"\n      flexDirection=\"column\"\n      isInteractive\n      p={0}\n      height=\"100%\"\n      {...cardProps}\n    >\n      <Box px={12} py={4} boxShadow={`inset 0 -1px 0 0 ${theme.colors.navy}`}>\n        <Text fontFamily=\"accent\" fontSize={14}>\n          {cardTitle}\n        </Text>\n      </Box>\n      <Box px={12} py={4}>\n        <Text\n          variant=\"title-xs\"\n          as={headingLevel}\n          truncate=\"ellipsis\"\n          truncateLines={2}\n          pt={12}\n          pb={4}\n        >\n          {title}\n        </Text>\n        {description &&\n          (typeof description === 'string' ? (\n            <Text\n              variant=\"p-small\"\n              truncate=\"ellipsis\"\n              truncateLines={2}\n              mb={16}\n            >\n              {description}\n            </Text>\n          ) : (\n            description\n          ))}\n      </Box>\n    </Card>\n  );\n};\n"],"mappings":";;;;;;UAKYI,cAAAA;;;;GAAAA,iBAAAA,eAAAA,EAAAA,EAAAA;AAeZ,MAAaC,gBAA6C,EACxDC,OACAC,aACAC,cACAC,cACAC,MACA,GAAGC,gBACJ;CACC,MAAMC,YAAYF,OAAO,CAACF,iBAAiBE,KAAK,CAACG,KAAK,MAAA,GAASL;AAC/D,QACE,sBAAA,cAACP,wBAAAA;EACCa,SAAQ;EACRC,cAAa;EACbC,aAAY;EACZC,UAAS;EACTC,SAAQ;EACRC,eAAc;EACdC,eAAAA;EACAC,GAAG;EACHC,QAAO;EACN,GAAGX;IAEJ,sBAAA,cAACX,uBAAAA;EAAIuB,IAAI;EAAIC,IAAI;EAAGC,WAAW,oBAAoBtB,+BAAMuB,OAAOC;IAC9D,sBAAA,cAACzB,wBAAAA;EAAK0B,YAAW;EAASC,UAAU;IACjCjB,UAAAA,CAAAA,EAGL,sBAAA,cAACZ,uBAAAA;EAAIuB,IAAI;EAAIC,IAAI;IACf,sBAAA,cAACtB,wBAAAA;EACCY,SAAQ;EACRgB,IAAIrB;EACJsB,UAAS;EACTC,eAAe;EACfC,IAAI;EACJC,IAAI;IAEH5B,MAAAA,EAEFC,gBACE,OAAOA,gBAAgB,WACtB,sBAAA,cAACL,wBAAAA;EACCY,SAAQ;EACRiB,UAAS;EACTC,eAAe;EACfG,IAAI;IAEH5B,YAAAA,GAGHA,aACF,CAAA"}

package/dist/ResourceCard/index.d.cts

@@ -0,0 +1,20 @@
+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 };
+//# sourceMappingURL=index.d.cts.map

package/dist/ResourceCard/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/ResourceCard/index.tsx"],"mappings":";;;;aAKY,YAAA;EACV,OAAA;EACA,GAAA;EACA,IAAA;AAAA;AAAA,KAIU,iBAAA,GAAoB,SAAA;EAC9B,KAAA;EACA,WAAA,WAAsB,KAAA,CAAM,SAAA;EAC5B,YAAA,EAAc,YAAA;EACd,YAAA,EAAc,WAAA;EACd,IAAA;AAAA;AAAA,cAGW,YAAA,EAAc,KAAA,CAAM,EAAA,CAAG,iBAAA"}

package/dist/ResourceCard/index.d.ts

@@ -1,15 +1,20 @@
-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 };
+//# sourceMappingURL=index.d.ts.map

package/dist/ResourceCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/ResourceCard/index.tsx"],"mappings":";;;;aAKY,YAAA;EACV,OAAA;EACA,GAAA;EACA,IAAA;AAAA;AAAA,KAIU,iBAAA,GAAoB,SAAA;EAC9B,KAAA;EACA,WAAA,WAAsB,KAAA,CAAM,SAAA;EAC5B,YAAA,EAAc,YAAA;EACd,YAAA,EAAc,WAAA;EACd,IAAA;AAAA;AAAA,cAGW,YAAA,EAAc,KAAA,CAAM,EAAA,CAAG,iBAAA"}

package/dist/ResourceCard/index.js

@@ -1,59 +1,51 @@
-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;
-}({});
-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)]
-    })]
-  });
-};
+import { Box, Card, Text } from "@codecademy/gamut";
+import { theme } from "@codecademy/gamut-styles";
+
+//#region src/ResourceCard/index.tsx
+var ResourceType;
+(function(ResourceType) {
+	ResourceType["Article"] = "Article";
+	ResourceType["Doc"] = "Doc";
+	ResourceType["Blog"] = "Blog Post";
+})(ResourceType || (ResourceType = {}));
+const ResourceCard = ({ title, description, resourceType, headingLevel, path, ...cardProps }) => {
+	const cardTitle = path ? [resourceType, ...path].join(" / ") : resourceType;
+	return /* @__PURE__ */ React.createElement(Card, {
+		variant: "white",
+		borderRadius: "md",
+		borderColor: "border-primary",
+		overflow: "hidden",
+		display: "flex",
+		flexDirection: "column",
+		isInteractive: true,
+		p: 0,
+		height: "100%",
+		...cardProps
+	}, /* @__PURE__ */ React.createElement(Box, {
+		px: 12,
+		py: 4,
+		boxShadow: `inset 0 -1px 0 0 ${theme.colors.navy}`
+	}, /* @__PURE__ */ React.createElement(Text, {
+		fontFamily: "accent",
+		fontSize: 14
+	}, cardTitle)), /* @__PURE__ */ React.createElement(Box, {
+		px: 12,
+		py: 4
+	}, /* @__PURE__ */ React.createElement(Text, {
+		variant: "title-xs",
+		as: headingLevel,
+		truncate: "ellipsis",
+		truncateLines: 2,
+		pt: 12,
+		pb: 4
+	}, title), description && (typeof description === "string" ? /* @__PURE__ */ React.createElement(Text, {
+		variant: "p-small",
+		truncate: "ellipsis",
+		truncateLines: 2,
+		mb: 16
+	}, description) : description)));
+};
+
+//#endregion
+export { ResourceCard, ResourceType };
+//# sourceMappingURL=index.js.map

package/dist/ResourceCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Box","Card","Text","theme","ResourceType","ResourceCard","title","description","resourceType","headingLevel","path","cardProps","cardTitle","join","variant","borderRadius","borderColor","overflow","display","flexDirection","isInteractive","p","height","px","py","boxShadow","colors","navy","fontFamily","fontSize","as","truncate","truncateLines","pt","pb","mb"],"sources":["../../src/ResourceCard/index.tsx"],"sourcesContent":["import { Box, Card, HeadingTags, Text } from '@codecademy/gamut';\nimport { theme } from '@codecademy/gamut-styles';\n\nimport { CardProps } from '../CurriculumCard';\n\nexport enum ResourceType {\n  Article = 'Article',\n  Doc = 'Doc',\n  Blog = 'Blog Post',\n  // can be expanded for Cheatsheet, etc...\n}\n\nexport type ResourceCardProps = CardProps & {\n  title: string;\n  description: string | React.ReactNode;\n  resourceType: ResourceType;\n  headingLevel: HeadingTags;\n  path?: string[];\n};\n\nexport const ResourceCard: React.FC<ResourceCardProps> = ({\n  title,\n  description,\n  resourceType,\n  headingLevel,\n  path,\n  ...cardProps\n}) => {\n  const cardTitle = path ? [resourceType, ...path].join(' / ') : resourceType;\n  return (\n    <Card\n      variant=\"white\"\n      borderRadius=\"md\"\n      borderColor=\"border-primary\"\n      overflow=\"hidden\"\n      display=\"flex\"\n      flexDirection=\"column\"\n      isInteractive\n      p={0}\n      height=\"100%\"\n      {...cardProps}\n    >\n      <Box px={12} py={4} boxShadow={`inset 0 -1px 0 0 ${theme.colors.navy}`}>\n        <Text fontFamily=\"accent\" fontSize={14}>\n          {cardTitle}\n        </Text>\n      </Box>\n      <Box px={12} py={4}>\n        <Text\n          variant=\"title-xs\"\n          as={headingLevel}\n          truncate=\"ellipsis\"\n          truncateLines={2}\n          pt={12}\n          pb={4}\n        >\n          {title}\n        </Text>\n        {description &&\n          (typeof description === 'string' ? (\n            <Text\n              variant=\"p-small\"\n              truncate=\"ellipsis\"\n              truncateLines={2}\n              mb={16}\n            >\n              {description}\n            </Text>\n          ) : (\n            description\n          ))}\n      </Box>\n    </Card>\n  );\n};\n"],"mappings":";;;;;UAKYI,cAAAA;;;;GAAAA,iBAAAA,eAAAA,EAAAA,EAAAA;AAeZ,MAAaC,gBAA6C,EACxDC,OACAC,aACAC,cACAC,cACAC,MACA,GAAGC,gBACJ;CACC,MAAMC,YAAYF,OAAO,CAACF,iBAAiBE,KAAK,CAACG,KAAK,MAAA,GAASL;AAC/D,QACE,sBAAA,cAACP,MAAAA;EACCa,SAAQ;EACRC,cAAa;EACbC,aAAY;EACZC,UAAS;EACTC,SAAQ;EACRC,eAAc;EACdC,eAAAA;EACAC,GAAG;EACHC,QAAO;EACN,GAAGX;IAEJ,sBAAA,cAACX,KAAAA;EAAIuB,IAAI;EAAIC,IAAI;EAAGC,WAAW,oBAAoBtB,MAAMuB,OAAOC;IAC9D,sBAAA,cAACzB,MAAAA;EAAK0B,YAAW;EAASC,UAAU;IACjCjB,UAAAA,CAAAA,EAGL,sBAAA,cAACZ,KAAAA;EAAIuB,IAAI;EAAIC,IAAI;IACf,sBAAA,cAACtB,MAAAA;EACCY,SAAQ;EACRgB,IAAIrB;EACJsB,UAAS;EACTC,eAAe;EACfC,IAAI;EACJC,IAAI;IAEH5B,MAAAA,EAEFC,gBACE,OAAOA,gBAAgB,WACtB,sBAAA,cAACL,MAAAA;EACCY,SAAQ;EACRiB,UAAS;EACTC,eAAe;EACfG,IAAI;IAEH5B,YAAAA,GAGHA,aACF,CAAA"}

package/dist/ScoreSummary/SubScores.cjs

@@ -0,0 +1,109 @@
+const require_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 _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__ */ React.createElement(_codecademy_gamut.FlexBox, {
+		key: subContentId,
+		borderTop: i !== 0 ? 1 : "none",
+		px: 16,
+		py: 8,
+		justifyContent: "space-between",
+		alignItems: "center",
+		role: "listitem"
+	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, { alignItems: "center" }, colorfulIcons ? subContentPercentCorrect >= PASSING_SCORE ? /* @__PURE__ */ React.createElement(_codecademy_gamut_icons.CheckFilledIcon, {
+		minWidth: 16,
+		mr: 12,
+		color: "feedback-success"
+	}) : /* @__PURE__ */ React.createElement(_codecademy_gamut_icons.DeleteFilledIcon, {
+		minWidth: 16,
+		mr: 12,
+		color: "feedback-error"
+	}) : null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, { screenreader: true }, colorfulIcons ? `${subContentPercentCorrect >= PASSING_SCORE ? "passed" : "failed"}: ` : ""), isChallenge ? /* @__PURE__ */ React.createElement(_codecademy_gamut.Markdown, {
+		inline: true,
+		spacing: "none",
+		text: subContentTitle
+	}) : /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, { fontWeight: "bold" }, subContentTitle))), /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
+		fontSize: 14,
+		minWidth: subContentPercentCorrect < SHOW_REVIEW_SCORE && trackSlug ? "11rem" : "3rem",
+		justifyContent: "flex-end"
+	}, subContentPercentCorrect < SHOW_REVIEW_SCORE && trackSlug && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(_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
+		})
+	}, "Review Concepts"), " "), !isChallenge && /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, { "aria-label": `${subContentCorrect} out of ${subContentTotal} questions correct` }, `${subContentCorrect} / ${subContentTotal}`)));
+});
+const renderUntestedSubContent = ({ untestedSubContent, lighterBorderColor }) => /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
+	flexDirection: "column",
+	borderWidth: 1,
+	borderWidthTop: 0,
+	borderStyle: "solid",
+	borderColor: lighterBorderColor
+}, untestedSubContent.map(({ id, title }, i) => {
+	return /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
+		key: id,
+		borderWidth: 1,
+		borderWidthTop: i === 0 ? 0 : 1,
+		borderStyle: "solid",
+		borderColor: lighterBorderColor,
+		px: 16,
+		py: 8,
+		justifyContent: "space-between",
+		color: lighterBorderColor,
+		role: "listitem"
+	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, { flexGrow: 1 }, title), /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
+		fontSize: 14,
+		alignItems: "center",
+		minWidth: "6.5rem",
+		justifyContent: "flex-end"
+	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, { fontFamily: "accent" }, "Not tested")));
+}));
+const SubScores = ({ colorfulIcons = false, isChallenge = false, layout = "row", lighterBorderColor = "navy-400", noMaxWidth = false, pathSlug, showUntestedContent = false, subScores, trackSlug, trackingData, trackUserClick, untestedSubContent }) => {
+	return /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
+		flexDirection: "column",
+		maxWidth: noMaxWidth ? "" : (0, _codecademy_gamut_styles.pxRem)(705),
+		role: "list",
+		"aria-label": "Unit Subjects"
+	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.FlexBox, {
+		flexDirection: "column",
+		borderX: 1,
+		borderBottom: 1,
+		borderTop: isChallenge ? 1 : layout === "row" ? {
+			_: void 0,
+			md: 1
+		} : void 0
+	}, renderSubScores({
+		colorfulIcons,
+		isChallenge,
+		pathSlug,
+		subScores,
+		trackSlug,
+		trackingData,
+		trackUserClick
+	})), showUntestedContent && /* @__PURE__ */ React.createElement(_codecademy_gamut.GridBox, { bg: "transparent" }, untestedSubContent && untestedSubContent?.length > 0 && renderUntestedSubContent({
+		untestedSubContent,
+		lighterBorderColor
+	})));
+};
+
+//#endregion
+exports.SubScores = SubScores;
+exports.renderSubScores = renderSubScores;
+//# sourceMappingURL=SubScores.cjs.map

package/dist/ScoreSummary/SubScores.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubScores.cjs","names":["Anchor","FlexBox","GridBox","Markdown","Text","CheckFilledIcon","DeleteFilledIcon","pxRem","createResumeUrlPath","SHOW_REVIEW_SCORE","PASSING_SCORE","renderSubScores","isChallenge","subScores","pathSlug","trackSlug","trackingData","trackUserClick","colorfulIcons","Object","entries","map","subContentId","title","subContentTitle","correct","subContentCorrect","total","subContentTotal","slug","subContentSlug","i","subContentPercentCorrect","reviewConceptsPath","moduleSlug","key","borderTop","px","py","justifyContent","alignItems","role","minWidth","mr","color","screenreader","inline","spacing","text","fontWeight","fontSize","aria-label","href","onClick","course_progress","parseFloat","toFixed","module_id","renderUntestedSubContent","untestedSubContent","lighterBorderColor","flexDirection","borderWidth","borderWidthTop","borderStyle","borderColor","id","flexGrow","fontFamily","SubScores","layout","noMaxWidth","showUntestedContent","maxWidth","borderX","borderBottom","_","undefined","md","bg","length"],"sources":["../../src/ScoreSummary/SubScores.tsx"],"sourcesContent":["import { Anchor, FlexBox, GridBox, Markdown, Text } from '@codecademy/gamut';\nimport { CheckFilledIcon, DeleteFilledIcon } from '@codecademy/gamut-icons';\nimport { Colors, pxRem } from '@codecademy/gamut-styles';\nimport { UserClickData } from '@codecademy/tracking';\n\nimport { createResumeUrlPath } from './helpers';\nimport { CorrectAnswerCountsBySubContent, UntestedSubContent } from './types';\n\nconst SHOW_REVIEW_SCORE = 0.6;\nconst PASSING_SCORE = 0.7;\n\nexport const renderSubScores = ({\n  isChallenge,\n  subScores,\n  pathSlug,\n  trackSlug,\n  trackingData,\n  trackUserClick,\n  colorfulIcons,\n}: {\n  subScores: CorrectAnswerCountsBySubContent;\n  pathSlug: string;\n  colorfulIcons?: boolean;\n  isChallenge?: boolean;\n  trackSlug?: string;\n  trackingData?: UserClickData;\n  trackUserClick?: (data: UserClickData) => void;\n}) =>\n  Object.entries(subScores).map(\n    (\n      [\n        subContentId,\n        {\n          title: subContentTitle,\n          correct: subContentCorrect,\n          total: subContentTotal,\n          slug: subContentSlug,\n        },\n      ],\n      i\n    ) => {\n      const subContentPercentCorrect = subContentCorrect / subContentTotal;\n      const reviewConceptsPath = createResumeUrlPath({\n        pathSlug,\n        trackSlug,\n        moduleSlug: subContentSlug,\n      });\n\n      return (\n        <FlexBox\n          key={subContentId}\n          borderTop={i !== 0 ? 1 : 'none'}\n          px={16}\n          py={8}\n          justifyContent=\"space-between\"\n          alignItems=\"center\"\n          role=\"listitem\"\n        >\n          <FlexBox alignItems=\"center\">\n            {colorfulIcons ? (\n              subContentPercentCorrect >= PASSING_SCORE ? (\n                <CheckFilledIcon\n                  minWidth={16}\n                  mr={12}\n                  color=\"feedback-success\"\n                />\n              ) : (\n                <DeleteFilledIcon\n                  minWidth={16}\n                  mr={12}\n                  color=\"feedback-error\"\n                />\n              )\n            ) : null}\n            <>\n              <Text screenreader>\n                {colorfulIcons\n                  ? `${\n                      subContentPercentCorrect >= PASSING_SCORE\n                        ? 'passed'\n                        : 'failed'\n                    }: `\n                  : ''}\n              </Text>\n              {isChallenge ? (\n                <Markdown inline spacing=\"none\" text={subContentTitle} />\n              ) : (\n                <Text fontWeight=\"bold\">{subContentTitle}</Text>\n              )}\n            </>\n          </FlexBox>\n          <FlexBox\n            fontSize={14}\n            minWidth={\n              subContentPercentCorrect < SHOW_REVIEW_SCORE && trackSlug\n                ? '11rem'\n                : '3rem'\n            }\n            justifyContent=\"flex-end\"\n          >\n            {subContentPercentCorrect < SHOW_REVIEW_SCORE && trackSlug && (\n              <>\n                <Anchor\n                  aria-label={`Review concepts for ${subContentTitle}`}\n                  mr={16}\n                  href={reviewConceptsPath}\n                  onClick={() =>\n                    trackingData &&\n                    trackUserClick?.({\n                      ...trackingData,\n                      course_progress: parseFloat(\n                        subContentPercentCorrect.toFixed(4)\n                      ),\n                      href: reviewConceptsPath,\n                      module_id: subContentId,\n                    })\n                  }\n                >\n                  Review Concepts\n                </Anchor>{' '}\n              </>\n            )}\n            {!isChallenge && (\n              <Text\n                aria-label={`${subContentCorrect} out of ${subContentTotal} questions correct`}\n              >{`${subContentCorrect} / ${subContentTotal}`}</Text>\n            )}\n          </FlexBox>\n        </FlexBox>\n      );\n    }\n  );\n\nconst renderUntestedSubContent = ({\n  untestedSubContent,\n  lighterBorderColor,\n}: {\n  untestedSubContent: UntestedSubContent[];\n  lighterBorderColor: Colors;\n}) => (\n  <FlexBox\n    flexDirection=\"column\"\n    borderWidth={1}\n    borderWidthTop={0}\n    borderStyle=\"solid\"\n    borderColor={lighterBorderColor}\n  >\n    {untestedSubContent.map(({ id, title }, i) => {\n      return (\n        <FlexBox\n          key={id}\n          borderWidth={1}\n          borderWidthTop={i === 0 ? 0 : 1}\n          borderStyle=\"solid\"\n          borderColor={lighterBorderColor}\n          px={16}\n          py={8}\n          justifyContent=\"space-between\"\n          color={lighterBorderColor}\n          role=\"listitem\"\n        >\n          <Text flexGrow={1}>{title}</Text>\n          <FlexBox\n            fontSize={14}\n            alignItems=\"center\"\n            minWidth=\"6.5rem\"\n            justifyContent=\"flex-end\"\n          >\n            <Text fontFamily=\"accent\">Not tested</Text>\n          </FlexBox>\n        </FlexBox>\n      );\n    })}\n  </FlexBox>\n);\n\ninterface SubScoresProps {\n  colorfulIcons?: boolean;\n  isChallenge?: boolean;\n  layout?: 'column' | 'row';\n  lighterBorderColor?: Colors;\n  noMaxWidth?: boolean;\n  pathSlug: string;\n  showUntestedContent?: boolean;\n  subScores: CorrectAnswerCountsBySubContent;\n  trackingData?: UserClickData;\n  trackUserClick?: (data: UserClickData) => void;\n  trackSlug?: string;\n  untestedSubContent?: UntestedSubContent[];\n}\n\nexport const SubScores: React.FC<SubScoresProps> = ({\n  colorfulIcons = false,\n  isChallenge = false,\n  layout = 'row',\n  lighterBorderColor = 'navy-400',\n  noMaxWidth = false,\n  pathSlug,\n  showUntestedContent = false,\n  subScores,\n  trackSlug,\n  trackingData,\n  trackUserClick,\n  untestedSubContent,\n}) => {\n  return (\n    <FlexBox\n      flexDirection=\"column\"\n      maxWidth={noMaxWidth ? '' : pxRem(705)}\n      role=\"list\"\n      aria-label=\"Unit Subjects\"\n    >\n      <FlexBox\n        flexDirection=\"column\"\n        borderX={1}\n        borderBottom={1}\n        borderTop={\n          isChallenge\n            ? 1\n            : layout === 'row'\n            ? { _: undefined, md: 1 }\n            : undefined\n        }\n      >\n        {renderSubScores({\n          colorfulIcons,\n          isChallenge,\n          pathSlug,\n          subScores,\n          trackSlug,\n          trackingData,\n          trackUserClick,\n        })}\n      </FlexBox>\n      {showUntestedContent && (\n        <GridBox bg=\"transparent\">\n          {untestedSubContent &&\n            untestedSubContent?.length > 0 &&\n            renderUntestedSubContent({\n              untestedSubContent,\n              lighterBorderColor,\n            })}\n        </GridBox>\n      )}\n    </FlexBox>\n  );\n};\n"],"mappings":"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"}