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

package/dist/Recurly/context/recurly/index.js

@@ -0,0 +1,50 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import { NO_PROVIDER } from '../NoProvider';
+import { loadRecurly } from './loadRecurly';
+import { jsx as _jsx } from "react/jsx-runtime";
+const RecurlyCtx = /*#__PURE__*/createContext(NO_PROVIDER);
+/**
+ * A provider that:
+ * - loads the Recurly library
+ * - ensures that only a single instance of the library is loaded
+ * - configures the library with the provided public key
+ * - provides the library instance via context
+ */
+export function RecurlyProvider({
+  children,
+  ...config
+}) {
+  const [recurly, setRecurly] = useState(undefined);
+  useEffect(() => {
+    loadRecurly(config)?.then(setRecurly);
+    // Exclude `config` dependency as it should be treated as static.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_jsx(RecurlyCtx.Provider, {
+    value: recurly,
+    children: children
+  });
+}
+
+/**
+ * A hook that returns the Recurly instance from context.
+ *
+ * If used outside of a RecurlyProvider, it will throw an error.
+ *
+ * Within a RecurlyProvider:
+ * - If used on the server, it will return undefined.
+ * - If used on the client, it will initially return undefined and then return
+ *   the provided Recurly instance once it is loaded.
+ *
+ * @param options - An object to provide an alternate contextual error message
+ * to use if one tries to use this hook outside of a RecurlyProvider.
+ *
+ * @returns The Recurly instance.
+ */
+export function useRecurly(options) {
+  const recurly = useContext(RecurlyCtx);
+  if (recurly === NO_PROVIDER) {
+    throw new Error(options?.noProviderError ?? 'useRecurly must be used within a RecurlyProvider');
+  }
+  return recurly;
+}

package/dist/Recurly/context/recurly/loadRecurly.d.ts

@@ -0,0 +1,6 @@
+import type { Recurly } from '@recurly/recurly-js';
+export type RecurlyConfig = {
+    publicKey: string;
+    required: string[];
+};
+export declare function loadRecurly(config: RecurlyConfig): Promise<Recurly> | undefined;

package/dist/Recurly/context/recurly/loadRecurly.js

@@ -0,0 +1,22 @@
+import { w } from './w';
+export function loadRecurly(config) {
+  if (w && w._recurlyPromise) {
+    w._recurlyPromise = new Promise(resolve => {
+      const script = w.document.createElement('script');
+      script.src = 'https://js.recurly.com/v4/recurly.js';
+      script.async = true;
+      script.onload = () => {
+        const {
+          recurly
+        } = w;
+        if (!recurly) {
+          throw new Error('Recurly was not loaded by recurly.js');
+        }
+        recurly.configure(config);
+        resolve(recurly);
+      };
+      w.document.head.appendChild(script);
+    });
+  }
+  return w?._recurlyPromise;
+}

package/dist/Recurly/context/recurly/w.d.ts

@@ -0,0 +1,14 @@
+import type { Recurly } from '@recurly/recurly-js';
+type Doc = {
+    createElement: Document['createElement'];
+    head: {
+        appendChild: Document['head']['appendChild'];
+    };
+};
+export type W = {
+    recurly?: Recurly;
+    _recurlyPromise?: Promise<Recurly>;
+    document: Doc;
+};
+export declare const w: W | undefined;
+export {};

package/dist/Recurly/context/recurly/w.js

@@ -0,0 +1,4 @@
+// By importing/exporting w as a window object, we can easily mock it in tests.
+
+// Exported for easy mocking
+export const w = typeof window === 'undefined' ? undefined : window;

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

@@ -0,0 +1,9 @@
+import { InputWrapperProps } from '@codecademy/gamut';
+export type RecurlyFieldProps = InputWrapperProps & {
+    label: string;
+};
+/**
+ * A wrapper around a Recurly element (or two elements in the case of MM/YY) to
+ * add Gamut border styling and a label.
+ */
+export declare function RecurlyField({ label, children, ...props }: RecurlyFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/Recurly/fields/RecurlyField.js

@@ -0,0 +1,57 @@
+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, Input, Text } from '@codecademy/gamut';
+import { conditionalStyles, formFieldStyles } from '@codecademy/gamut/dist/Form/styles';
+import { theme } from '@codecademy/gamut-styles';
+import { useCallback, useRef } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const Slash = /*#__PURE__*/_styled("span", {
+  target: "e1ndrvyp1",
+  label: "Slash"
+})(process.env.NODE_ENV === "production" ? {
+  name: "18v1ai1",
+  styles: "width:0;font-family:'Suisse';transform:translate(-6px, 1px);font-size:18px"
+} : {
+  name: "18v1ai1",
+  styles: "width:0;font-family:'Suisse';transform:translate(-6px, 1px);font-size:18px/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9SZWN1cmx5L2ZpZWxkcy9SZWN1cmx5RmllbGQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWV5QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvUmVjdXJseS9maWVsZHMvUmVjdXJseUZpZWxkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEJveCxcbiAgSW5wdXQsXG4gIElucHV0V3JhcHBlclByb3BzLFxuICBTdHlsZWRJbnB1dFByb3BzLFxuICBUZXh0LFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBjb25kaXRpb25hbFN0eWxlcyxcbiAgZm9ybUZpZWxkU3R5bGVzLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC9kaXN0L0Zvcm0vc3R5bGVzJztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IFNsYXNoID0gc3R5bGVkLnNwYW5gXG4gIHdpZHRoOiAwO1xuICBmb250LWZhbWlseTogJ1N1aXNzZSc7XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlKC02cHgsIDFweCk7XG4gIGZvbnQtc2l6ZTogMThweDtcbmA7XG5cbmZ1bmN0aW9uIGZvY3VzQm9yZGVyQ29sb3IoeyB2YXJpYW50IH06IFN0eWxlZElucHV0UHJvcHMpIHtcbiAgcmV0dXJuIHZhcmlhbnQgPT09ICdlcnJvcidcbiAgICA/IHRoZW1lLmNvbG9yc1snZmVlZGJhY2stZXJyb3InXVxuICAgIDogdGhlbWUuY29sb3JzLnByaW1hcnk7XG59XG5cbmNvbnN0IElucHV0SW5uZXJCb3ggPSBzdHlsZWQuZGl2PFN0eWxlZElucHV0UHJvcHM+YFxuICAke2Zvcm1GaWVsZFN0eWxlc31cbiAgJHtjb25kaXRpb25hbFN0eWxlc31cbiAgJiA+IGRpdiB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbiAgcGFkZGluZzogMDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgaGVpZ2h0OiAzLjEyNXJlbTtcbiAgLnJlY3VybHktZWxlbWVudCB7XG4gICAgaGVpZ2h0OiAzLjEyNXJlbTtcbiAgfVxuICAmOmhhcygucmVjdXJseS1lbGVtZW50LWZvY3VzKSB7XG4gICAgYm9yZGVyLWNvbG9yOiAke2ZvY3VzQm9yZGVyQ29sb3J9O1xuICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCAke2ZvY3VzQm9yZGVyQ29sb3J9O1xuICB9XG4gICY6aGFzKCR7U2xhc2h9KSA+IGRpdjpmaXJzdC1vZi10eXBlIHtcbiAgICBtYXgtd2lkdGg6IDIuNzVyZW07XG4gICAgbWluLXdpZHRoOiAyLjc1cmVtO1xuICB9XG5gO1xuXG5leHBvcnQgdHlwZSBSZWN1cmx5RmllbGRQcm9wcyA9IElucHV0V3JhcHBlclByb3BzICYgeyBsYWJlbDogc3RyaW5nIH07XG5cbi8qKlxuICogQSB3cmFwcGVyIGFyb3VuZCBhIFJlY3VybHkgZWxlbWVudCAob3IgdHdvIGVsZW1lbnRzIGluIHRoZSBjYXNlIG9mIE1NL1lZKSB0b1xuICogYWRkIEdhbXV0IGJvcmRlciBzdHlsaW5nIGFuZCBhIGxhYmVsLlxuICovXG5leHBvcnQgZnVuY3Rpb24gUmVjdXJseUZpZWxkKHsgbGFiZWwsIGNoaWxkcmVuLCAuLi5wcm9wcyB9OiBSZWN1cmx5RmllbGRQcm9wcykge1xuICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIGNvbnN0IHNlbGVjdElmcmFtZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZWYuY3VycmVudD8ucXVlcnlTZWxlY3RvcignaWZyYW1lJyk/LmZvY3VzKCk7XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDxCb3ggcmVmPXtyZWZ9PlxuICAgICAgPFRleHQgYXM9XCJsYWJlbFwiIG9uQ2xpY2s9e3NlbGVjdElmcmFtZX0+XG4gICAgICAgIHtsYWJlbH1cbiAgICAgIDwvVGV4dD5cbiAgICAgIDxJbnB1dCBhcz17SW5wdXRJbm5lckJveH0gey4uLnByb3BzfT5cbiAgICAgICAge0FycmF5LmlzQXJyYXkoY2hpbGRyZW4pICYmIGNoaWxkcmVuLmxlbmd0aCA9PT0gMiA/IChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAge2NoaWxkcmVuWzBdfVxuICAgICAgICAgICAgPFNsYXNoPi88L1NsYXNoPlxuICAgICAgICAgICAge2NoaWxkcmVuWzFdfVxuICAgICAgICAgIDwvPlxuICAgICAgICApIDogKFxuICAgICAgICAgIGNoaWxkcmVuXG4gICAgICAgICl9XG4gICAgICA8L0lucHV0PlxuICAgIDwvQm94PlxuICApO1xufVxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+function focusBorderColor({
+  variant
+}) {
+  return variant === 'error' ? theme.colors['feedback-error'] : theme.colors.primary;
+}
+const InputInnerBox = /*#__PURE__*/_styled("div", {
+  target: "e1ndrvyp0",
+  label: "InputInnerBox"
+})(formFieldStyles, " ", conditionalStyles, " &>div{width:100%;}padding:0;display:flex;align-items:center;height:3.125rem;.recurly-element{height:3.125rem;}&:has(.recurly-element-focus){border-color:", focusBorderColor, ";box-shadow:inset 0 0 0 1px ", focusBorderColor, ";}&:has(", Slash, ")>div:first-of-type{max-width:2.75rem;min-width:2.75rem;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9SZWN1cmx5L2ZpZWxkcy9SZWN1cmx5RmllbGQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCa0QiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL1JlY3VybHkvZmllbGRzL1JlY3VybHlGaWVsZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBCb3gsXG4gIElucHV0LFxuICBJbnB1dFdyYXBwZXJQcm9wcyxcbiAgU3R5bGVkSW5wdXRQcm9wcyxcbiAgVGV4dCxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQnO1xuaW1wb3J0IHtcbiAgY29uZGl0aW9uYWxTdHlsZXMsXG4gIGZvcm1GaWVsZFN0eWxlcyxcbn0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQvZGlzdC9Gb3JtL3N0eWxlcyc7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LXN0eWxlcyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5jb25zdCBTbGFzaCA9IHN0eWxlZC5zcGFuYFxuICB3aWR0aDogMDtcbiAgZm9udC1mYW1pbHk6ICdTdWlzc2UnO1xuICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtNnB4LCAxcHgpO1xuICBmb250LXNpemU6IDE4cHg7XG5gO1xuXG5mdW5jdGlvbiBmb2N1c0JvcmRlckNvbG9yKHsgdmFyaWFudCB9OiBTdHlsZWRJbnB1dFByb3BzKSB7XG4gIHJldHVybiB2YXJpYW50ID09PSAnZXJyb3InXG4gICAgPyB0aGVtZS5jb2xvcnNbJ2ZlZWRiYWNrLWVycm9yJ11cbiAgICA6IHRoZW1lLmNvbG9ycy5wcmltYXJ5O1xufVxuXG5jb25zdCBJbnB1dElubmVyQm94ID0gc3R5bGVkLmRpdjxTdHlsZWRJbnB1dFByb3BzPmBcbiAgJHtmb3JtRmllbGRTdHlsZXN9XG4gICR7Y29uZGl0aW9uYWxTdHlsZXN9XG4gICYgPiBkaXYge1xuICAgIHdpZHRoOiAxMDAlO1xuICB9XG4gIHBhZGRpbmc6IDA7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGhlaWdodDogMy4xMjVyZW07XG4gIC5yZWN1cmx5LWVsZW1lbnQge1xuICAgIGhlaWdodDogMy4xMjVyZW07XG4gIH1cbiAgJjpoYXMoLnJlY3VybHktZWxlbWVudC1mb2N1cykge1xuICAgIGJvcmRlci1jb2xvcjogJHtmb2N1c0JvcmRlckNvbG9yfTtcbiAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMCAxcHggJHtmb2N1c0JvcmRlckNvbG9yfTtcbiAgfVxuICAmOmhhcygke1NsYXNofSkgPiBkaXY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgbWF4LXdpZHRoOiAyLjc1cmVtO1xuICAgIG1pbi13aWR0aDogMi43NXJlbTtcbiAgfVxuYDtcblxuZXhwb3J0IHR5cGUgUmVjdXJseUZpZWxkUHJvcHMgPSBJbnB1dFdyYXBwZXJQcm9wcyAmIHsgbGFiZWw6IHN0cmluZyB9O1xuXG4vKipcbiAqIEEgd3JhcHBlciBhcm91bmQgYSBSZWN1cmx5IGVsZW1lbnQgKG9yIHR3byBlbGVtZW50cyBpbiB0aGUgY2FzZSBvZiBNTS9ZWSkgdG9cbiAqIGFkZCBHYW11dCBib3JkZXIgc3R5bGluZyBhbmQgYSBsYWJlbC5cbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIFJlY3VybHlGaWVsZCh7IGxhYmVsLCBjaGlsZHJlbiwgLi4ucHJvcHMgfTogUmVjdXJseUZpZWxkUHJvcHMpIHtcbiAgY29uc3QgcmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKTtcblxuICBjb25zdCBzZWxlY3RJZnJhbWUgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgcmVmLmN1cnJlbnQ/LnF1ZXJ5U2VsZWN0b3IoJ2lmcmFtZScpPy5mb2N1cygpO1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8Qm94IHJlZj17cmVmfT5cbiAgICAgIDxUZXh0IGFzPVwibGFiZWxcIiBvbkNsaWNrPXtzZWxlY3RJZnJhbWV9PlxuICAgICAgICB7bGFiZWx9XG4gICAgICA8L1RleHQ+XG4gICAgICA8SW5wdXQgYXM9e0lucHV0SW5uZXJCb3h9IHsuLi5wcm9wc30+XG4gICAgICAgIHtBcnJheS5pc0FycmF5KGNoaWxkcmVuKSAmJiBjaGlsZHJlbi5sZW5ndGggPT09IDIgPyAoXG4gICAgICAgICAgPD5cbiAgICAgICAgICAgIHtjaGlsZHJlblswXX1cbiAgICAgICAgICAgIDxTbGFzaD4vPC9TbGFzaD5cbiAgICAgICAgICAgIHtjaGlsZHJlblsxXX1cbiAgICAgICAgICA8Lz5cbiAgICAgICAgKSA6IChcbiAgICAgICAgICBjaGlsZHJlblxuICAgICAgICApfVxuICAgICAgPC9JbnB1dD5cbiAgICA8L0JveD5cbiAgKTtcbn1cbiJdfQ== */"));
+/**
+ * A wrapper around a Recurly element (or two elements in the case of MM/YY) to
+ * add Gamut border styling and a label.
+ */
+export function RecurlyField({
+  label,
+  children,
+  ...props
+}) {
+  const ref = useRef(null);
+  const selectIframe = useCallback(() => {
+    ref.current?.querySelector('iframe')?.focus();
+  }, []);
+  return /*#__PURE__*/_jsxs(Box, {
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(Text, {
+      as: "label",
+      onClick: selectIframe,
+      children: label
+    }), /*#__PURE__*/_jsx(Input, {
+      as: InputInnerBox,
+      ...props,
+      children: Array.isArray(children) && children.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [children[0], /*#__PURE__*/_jsx(Slash, {
+          children: "/"
+        }), children[1]]
+      }) : children
+    })]
+  });
+}

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

@@ -0,0 +1,17 @@
+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;
+};
+export type Focusable = {
+    focus: () => void;
+};

package/dist/Recurly/fields/elements.js

@@ -0,0 +1,106 @@
+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). */
+
+/**
+ * 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
+    });
+  });
+}
+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();
+}
+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
+  }
+}
+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
+    } : {})
+  };
+}
+
+/* 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));
+}

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

@@ -0,0 +1,79 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+import { render } from '@testing-library/react';
+import { CardNumber } from './elements';
+import { jsx as _jsx } from "react/jsx-runtime";
+class MockElement {
+  attach = jest.fn();
+  handlers = {};
+  on = jest.fn((evt, handler) => {
+    this.handlers[evt] = handler;
+  });
+  configure = jest.fn();
+  destroy = jest.fn();
+  focus = jest.fn();
+}
+const mockElements = {};
+jest.mock('../context', () => ({
+  useElements: jest.fn(() => mockElements)
+}));
+describe('CardNumber', () => {
+  it('creates the Recurly element and attaches it to the DOM', () => {
+    const mockElement = new MockElement();
+    mockElements.CardNumberElement = jest.fn(() => mockElement);
+    const renderView = setupRtl(CardNumber);
+    renderView();
+    expect(mockElements.CardNumberElement).toHaveBeenCalled();
+    expect(mockElement.attach).toHaveBeenCalled();
+  });
+  it('sets and updates event handlers', () => {
+    const mockElement = new MockElement();
+    mockElements.CardNumberElement = () => mockElement;
+    const renderView = setupRtl(CardNumber);
+    const createHandlers = () => ({
+      onReady: jest.fn(),
+      onChange: jest.fn(),
+      onBlur: jest.fn(),
+      onFocus: jest.fn(),
+      onSubmit: jest.fn()
+    });
+    const handlersA = createHandlers();
+    const {
+      update
+    } = renderView(handlersA);
+    for (const handler of Object.values(mockElement.handlers)) {
+      handler('test-1');
+    }
+    const handlersB = createHandlers();
+    update(handlersB);
+    for (const handler of Object.values(mockElement.handlers)) {
+      handler('test-2');
+    }
+    for (const handler of Object.values(handlersA)) {
+      expect(handler).toHaveBeenCalledTimes(1);
+      expect(handler).toHaveBeenCalledWith('test-1');
+    }
+    for (const handler of Object.values(handlersB)) {
+      expect(handler).toHaveBeenCalledTimes(1);
+      expect(handler).toHaveBeenCalledWith('test-2');
+    }
+  });
+  it('allows focus from the outside via ref', () => {
+    const mockElement = new MockElement();
+    mockElements.CardNumberElement = jest.fn(() => mockElement);
+    const ref = {};
+    render(/*#__PURE__*/_jsx(CardNumber, {
+      ref: ref
+    }));
+    ref.current?.focus();
+    expect(mockElement.focus).toHaveBeenCalled();
+  });
+  it('destroys the Recurly element when the component unmounts', () => {
+    const mockElement = new MockElement();
+    mockElements.CardNumberElement = jest.fn(() => mockElement);
+    const {
+      unmount
+    } = render(/*#__PURE__*/_jsx(CardNumber, {}));
+    unmount();
+    expect(mockElement.destroy).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,2 @@
+export * from './elements';
+export * from './RecurlyField';

package/dist/Recurly/fields/index.js

@@ -0,0 +1,2 @@
+export * from './elements';
+export * from './RecurlyField';

package/dist/Recurly/index.d.ts

@@ -0,0 +1,2 @@
+export * from './fields';
+export { Elements, RecurlyProvider, useRecurly } from './context';

package/dist/Recurly/index.js

@@ -0,0 +1,2 @@
+export * from './fields';
+export { Elements, RecurlyProvider, useRecurly } from './context';

package/dist/ResourceCard/index.d.ts

@@ -0,0 +1,15 @@
+import { HeadingTags } from '@codecademy/gamut';
+import { CardProps } from '../CurriculumCard';
+export 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[];
+};
+export declare const ResourceCard: React.FC<ResourceCardProps>;

package/dist/ResourceCard/index.js

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

package/dist/ScoreSummary/SubScores.d.ts

@@ -0,0 +1,28 @@
+import { Colors } from '@codecademy/gamut-styles';
+import { UserClickData } from '@codecademy/tracking';
+import { CorrectAnswerCountsBySubContent, UntestedSubContent } from './types';
+export 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;
+}) => import("react/jsx-runtime").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[];
+}
+export declare const SubScores: React.FC<SubScoresProps>;
+export {};

package/dist/ScoreSummary/SubScores.js

@@ -0,0 +1,165 @@
+import { Anchor, FlexBox, GridBox, Markdown, Text } from '@codecademy/gamut';
+import { CheckFilledIcon, DeleteFilledIcon } from '@codecademy/gamut-icons';
+import { pxRem } from '@codecademy/gamut-styles';
+import { createResumeUrlPath } from './helpers';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SHOW_REVIEW_SCORE = 0.6;
+const PASSING_SCORE = 0.7;
+export 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 = createResumeUrlPath({
+    pathSlug,
+    trackSlug,
+    moduleSlug: subContentSlug
+  });
+  return /*#__PURE__*/_jsxs(FlexBox, {
+    borderTop: i !== 0 ? 1 : 'none',
+    px: 16,
+    py: 8,
+    justifyContent: "space-between",
+    alignItems: "center",
+    role: "listitem",
+    children: [/*#__PURE__*/_jsxs(FlexBox, {
+      alignItems: "center",
+      children: [colorfulIcons ? subContentPercentCorrect >= PASSING_SCORE ? /*#__PURE__*/_jsx(CheckFilledIcon, {
+        minWidth: 16,
+        mr: 12,
+        color: "feedback-success"
+      }) : /*#__PURE__*/_jsx(DeleteFilledIcon, {
+        minWidth: 16,
+        mr: 12,
+        color: "feedback-error"
+      }) : null, /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
+          screenreader: true,
+          children: colorfulIcons ? `${subContentPercentCorrect >= PASSING_SCORE ? 'passed' : 'failed'}: ` : ''
+        }), isChallenge ? /*#__PURE__*/_jsx(Markdown, {
+          inline: true,
+          spacing: "none",
+          text: subContentTitle
+        }) : /*#__PURE__*/_jsx(Text, {
+          fontWeight: "bold",
+          children: subContentTitle
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(FlexBox, {
+      fontSize: 14,
+      minWidth: subContentPercentCorrect < SHOW_REVIEW_SCORE && trackSlug ? '11rem' : '3rem',
+      justifyContent: "flex-end",
+      children: [subContentPercentCorrect < SHOW_REVIEW_SCORE && trackSlug && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(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__*/_jsx(Text, {
+        "aria-label": `${subContentCorrect} out of ${subContentTotal} questions correct`,
+        children: `${subContentCorrect} / ${subContentTotal}`
+      })]
+    })]
+  }, subContentId);
+});
+const renderUntestedSubContent = ({
+  untestedSubContent,
+  lighterBorderColor
+}) => /*#__PURE__*/_jsx(FlexBox, {
+  flexDirection: "column",
+  borderWidth: 1,
+  borderWidthTop: 0,
+  borderStyle: "solid",
+  borderColor: lighterBorderColor,
+  children: untestedSubContent.map(({
+    id,
+    title
+  }, i) => {
+    return /*#__PURE__*/_jsxs(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__*/_jsx(Text, {
+        flexGrow: 1,
+        children: title
+      }), /*#__PURE__*/_jsx(FlexBox, {
+        fontSize: 14,
+        alignItems: "center",
+        minWidth: "6.5rem",
+        justifyContent: "flex-end",
+        children: /*#__PURE__*/_jsx(Text, {
+          fontFamily: "accent",
+          children: "Not tested"
+        })
+      })]
+    }, id);
+  })
+});
+export const SubScores = ({
+  colorfulIcons = false,
+  isChallenge = false,
+  layout = 'row',
+  lighterBorderColor = 'navy-400',
+  noMaxWidth = false,
+  pathSlug,
+  showUntestedContent = false,
+  subScores,
+  trackSlug,
+  trackingData,
+  trackUserClick,
+  untestedSubContent
+}) => {
+  return /*#__PURE__*/_jsxs(FlexBox, {
+    flexDirection: "column",
+    maxWidth: noMaxWidth ? '' : pxRem(705),
+    role: "list",
+    "aria-label": "Unit Subjects",
+    children: [/*#__PURE__*/_jsx(FlexBox, {
+      flexDirection: "column",
+      borderX: 1,
+      borderBottom: 1,
+      borderTop: isChallenge ? 1 : layout === 'row' ? {
+        _: undefined,
+        md: 1
+      } : undefined,
+      children: renderSubScores({
+        colorfulIcons,
+        isChallenge,
+        pathSlug,
+        subScores,
+        trackSlug,
+        trackingData,
+        trackUserClick
+      })
+    }), showUntestedContent && /*#__PURE__*/_jsx(GridBox, {
+      bg: "transparent",
+      children: untestedSubContent && untestedSubContent?.length > 0 && renderUntestedSubContent({
+        untestedSubContent,
+        lighterBorderColor
+      })
+    })]
+  });
+};