@codecademy/brand 3.0.0-alpha.2ba7921cce.0 → 3.0.0-alpha.39691db5eb.0

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/SkillPathCard/index.d.ts

@@ -13,5 +13,8 @@ export interface SkillPathCardProps {
     timeToComplete?: number | null;
     header?: React.ReactNode;
     footer?: React.ReactNode;
+    openInNewTab?: boolean;
+    href: string;
+    onClick: () => void;
 }
-export declare const SkillPathCard: React.FC<SkillPathCardProps>;
+export declare const SkillPathCard: import("react").ForwardRefExoticComponent<SkillPathCardProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/SkillPathCard/index.js

@@ -1,8 +1,9 @@
+import { forwardRef } from 'react';
 import { ContentGroupBaseCard } from '../ContentGroupBaseCard';
 import { getPathImageUrl } from '../ContentGroupBaseCard/helpers';
-import { CertificateComponent, CourseCountComponent, Divider } from '../ContentGroupBaseCard/shared';
+import { CertificateComponent, CourseCountComponent } from '../ContentGroupBaseCard/shared';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const SkillPathCard = ({
+export const SkillPathCard = /*#__PURE__*/forwardRef(({
   title,
   shortDescription,
   difficulty,
@@ -14,8 +15,11 @@ export const SkillPathCard = ({
   isFullSize = false,
   timeToComplete,
   header,
-  footer
-}) => {
+  footer,
+  openInNewTab = false,
+  href,
+  onClick
+}, ref) => {
   return /*#__PURE__*/_jsxs(ContentGroupBaseCard, {
     headerBackgroundColor: "blue-100",
     headerText: "Skill path",
@@ -31,8 +35,12 @@ export const SkillPathCard = ({
     timeToComplete: timeToComplete,
     header: header,
     footer: footer,
-    children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(CourseCountComponent, {
+    openInNewTab: openInNewTab,
+    href: href,
+    onClick: onClick,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(CourseCountComponent, {
       count: courseCount
-    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(CertificateComponent, {})]
+    }), /*#__PURE__*/_jsx(CertificateComponent, {})]
   });
-};
+});

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export * from './ContentGroupBaseCard';
 export * from './ContentGroupBaseCard/types';
 export * from './ContentGroupBaseCard/helpers';
 export * from './CourseCard';
+export * from './CourseRecommendationsLink';
 export * from './CurriculumCard';
 export * from './CurriculumCard/Difficulty';
 export * from './CurriculumCard/Difficulty/types';
@@ -73,6 +74,7 @@ export * from './PricingSection';
 export * from './ProductFeatureShowcase';
 export * from './ProLogoAlt';
 export * from './RatingsBar';
+export * from './Recurly';
 export * from './ResourceCard';
 export * from './ScoreSummary';
 export * from './ScoreSummary/SubScores';

package/dist/index.js

@@ -27,6 +27,7 @@ export * from './ContentGroupBaseCard';
 export * from './ContentGroupBaseCard/types';
 export * from './ContentGroupBaseCard/helpers';
 export * from './CourseCard';
+export * from './CourseRecommendationsLink';
 export * from './CurriculumCard';
 export * from './CurriculumCard/Difficulty';
 export * from './CurriculumCard/Difficulty/types';
@@ -73,6 +74,7 @@ export * from './PricingSection';
 export * from './ProductFeatureShowcase';
 export * from './ProLogoAlt';
 export * from './RatingsBar';
+export * from './Recurly';
 export * from './ResourceCard';
 export * from './ScoreSummary';
 export * from './ScoreSummary/SubScores';

package/dist/stories/Molecules/ContentGroupBaseCard.stories.js

@@ -8,7 +8,9 @@ const meta = {
     headerBackgroundColor: 'pink',
     headerText: 'Course',
     title: 'Python 101',
-    numLessons: 20
+    numLessons: 20,
+    href: '/learn/python-101',
+    onClick: () => {}
   }
 };
 export default meta;

package/dist/stories/Molecules/CurriculumCards/CareerPathCard.stories.js

@@ -9,7 +9,9 @@ const meta = {
     difficulty: CourseDifficulty.Beginner,
     title: 'Python 101',
     imageUrl: 'https://static-assets.codecademy.com/components/curriculum/path/front-end-engineer-career-path/curriculum-card.svg',
-    timeToComplete: 15
+    timeToComplete: 15,
+    href: '/learn/paths/python-101',
+    onClick: () => {}
   }
 };
 export default meta;

package/dist/stories/Molecules/CurriculumCards/CertificationPathCard.stories.js

@@ -7,7 +7,9 @@ const meta = {
     title: 'CLF-C02: AWS Certified Cloud Practitioner',
     courseCount: 16,
     shortDescription: 'Master AWS Cloud fundamentals, security, and migration strategies to prepare for the AWS Certified Cloud Practitioner exam (CLF-C02) and enhance your cloud skills.',
-    difficulty: CourseDifficulty.Beginner
+    difficulty: CourseDifficulty.Beginner,
+    href: '/learn/ext-paths/certification-prep-clf-c02',
+    onClick: () => {}
   }
 };
 export default meta;

package/dist/stories/Molecules/CurriculumCards/CourseCard.stories.js

@@ -9,7 +9,9 @@ const meta = {
     pro: false,
     shortDescription: 'Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.',
     difficulty: CourseDifficulty.Beginner,
-    timeToComplete: 3
+    timeToComplete: 3,
+    href: '/learn/javascript',
+    onClick: () => {}
   }
 };
 export default meta;

package/dist/stories/Molecules/CurriculumCards/SkillPathCard.stories.js

@@ -9,7 +9,9 @@ const meta = {
     shortDescription: 'Web applications are constantly under threat. Authentication and authorization, protected data, and secure code will protect your web app.',
     difficulty: CourseDifficulty.Intermediate,
     imageUrl: 'https://static-assets.codecademy.com/components/curriculum/path/securing-express-applications/curriculum-card.svg',
-    timeToComplete: 10
+    timeToComplete: 10,
+    href: '/learn/paths/securing-express-applications',
+    onClick: () => {}
   }
 };
 export default meta;

package/dist/stories/Molecules/EnhancedBanner.stories.d.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Banner } from '../../index';
-declare const meta: Meta<typeof Banner>;
+import { EnhancedBanner } from '../../Banner/EnhancedBanner';
+declare const meta: Meta<typeof EnhancedBanner>;
 export default meta;
-type Story = StoryObj<typeof Banner>;
+type Story = StoryObj<typeof EnhancedBanner>;
 export declare const WithCountdownTimer: Story;
 export declare const WithoutCountdownTimer: Story;
 export declare const YellowVariant: Story;

package/dist/stories/Molecules/EnhancedBanner.stories.js

@@ -1,8 +1,8 @@
 import { action } from '@storybook/addon-actions';
-import { Banner } from '../../index';
+import { EnhancedBanner } from '../../Banner/EnhancedBanner';
 const meta = {
   title: 'Molecules/Enhanced Banner',
-  component: Banner,
+  component: EnhancedBanner,
   argTypes: {
     header: {
       control: 'text',
@@ -25,15 +25,6 @@ const meta = {
       control: 'text',
       description: 'ISO date string for countdown timer (e.g., "2024-12-31T23:59:59Z")'
     },
-    isInEnhancedBannerVariant: {
-      control: 'boolean',
-      description: 'Enable enhanced banner features',
-      table: {
-        defaultValue: {
-          summary: 'true'
-        }
-      }
-    },
     onClose: {
       action: 'closed',
       description: 'Callback when banner is closed'
@@ -48,7 +39,6 @@ const meta = {
     }
   },
   args: {
-    isInEnhancedBannerVariant: true,
     variant: 'navy',
     onClose: action('banner-closed'),
     onCtaClick: action('cta-clicked'),

package/dist/stories/Molecules/Recurly.stories.d.ts

@@ -0,0 +1,5 @@
+import type { StoryObj } from '@storybook/react';
+declare const _default: {};
+export default _default;
+export declare const Default: StoryObj;
+export declare const RecurlyFieldStory: StoryObj;

package/dist/stories/Molecules/Recurly.stories.js

@@ -0,0 +1,56 @@
+import { GridBox, Text } from '@codecademy/gamut';
+import { CardNumber, CVV, Elements, ExpMonth, ExpYear, RecurlyField, RecurlyProvider } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {};
+export const Default = {
+  render: () => /*#__PURE__*/_jsx(RecurlyProvider, {
+    publicKey: "test-key",
+    required: [],
+    children: /*#__PURE__*/_jsx(Elements, {
+      children: /*#__PURE__*/_jsxs(GridBox, {
+        gridTemplateColumns: "2fr 1fr 1fr",
+        gap: 16,
+        children: [/*#__PURE__*/_jsx(RecurlyField, {
+          label: "Card number*",
+          children: /*#__PURE__*/_jsx(CardNumber, {})
+        }), /*#__PURE__*/_jsxs(RecurlyField, {
+          label: "Expiration date*",
+          children: [/*#__PURE__*/_jsx(ExpMonth, {}), /*#__PURE__*/_jsx(ExpYear, {})]
+        }), /*#__PURE__*/_jsx(RecurlyField, {
+          label: "CVV*",
+          children: /*#__PURE__*/_jsx(CVV, {})
+        })]
+      })
+    })
+  })
+};
+export const RecurlyFieldStory = {
+  render: () => /*#__PURE__*/_jsx(RecurlyProvider, {
+    publicKey: "test-key",
+    required: [],
+    children: /*#__PURE__*/_jsx(Elements, {
+      children: /*#__PURE__*/_jsxs(GridBox, {
+        gridTemplateColumns: "4rem 1fr",
+        gap: 16,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "title-xs",
+          alignSelf: "center",
+          children: "Error"
+        }), /*#__PURE__*/_jsx(RecurlyField, {
+          label: "Card number*",
+          error: true,
+          children: /*#__PURE__*/_jsx(CardNumber, {})
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "title-xs",
+          alignSelf: "center",
+          children: "Valid"
+        }), /*#__PURE__*/_jsx(RecurlyField, {
+          label: "Card number*",
+          valid: true,
+          children: /*#__PURE__*/_jsx(CardNumber, {})
+        })]
+      })
+    })
+  }),
+  name: 'Validation'
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/brand",
   "description": "Brand component library for Codecademy",
-  "version": "3.0.0-alpha.2ba7921cce.0",
+  "version": "3.0.0-alpha.39691db5eb.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.1",