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

package/dist/Recurly/fields/RecurlyField.js

@@ -1,67 +1,57 @@
-import { Box, Input, Text } from "@codecademy/gamut";
-import { theme } from "@codecademy/gamut-styles";
-import styled from "@emotion/styled";
-import { useCallback, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { conditionalStyles, formFieldStyles } from "@codecademy/gamut/dist/Form/styles";
-
-//#region src/Recurly/fields/RecurlyField.tsx
-const Slash = styled.span`
-  width: 0;
-  font-family: 'Suisse';
-  transform: translate(-6px, 1px);
-  font-size: 18px;
-`;
-function focusBorderColor({ variant: variant$1 }) {
-	return variant$1 === "error" ? theme.colors["feedback-error"] : theme.colors.primary;
+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 = styled.div`
-  ${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;
-  }
-`;
+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.
-*/
-function RecurlyField({ label, children, ...props }) {
-	const ref = useRef(null);
-	return /* @__PURE__ */ jsxs(Box, {
-		ref,
-		children: [/* @__PURE__ */ jsx(Text, {
-			as: "label",
-			onClick: useCallback(() => {
-				ref.current?.querySelector("iframe")?.focus();
-			}, []),
-			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
-		})]
-	});
-}
-
-//#endregion
-export { RecurlyField };
+ * 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

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

package/dist/Recurly/fields/elements.js

@@ -1,59 +1,106 @@
-import { useElements } from "../context/elements/index.js";
-import { forwardRef, useMemo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { formFieldPaddingStyles } from "@codecademy/gamut/dist/Form/styles";
+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). */
 
-//#region src/Recurly/fields/elements.tsx
-const CardNumber = element("CardNumberElement", "Card number");
-const ExpMonth = element("CardMonthElement", "Expiration month", "MM");
-const ExpYear = element("CardYearElement", "Expiration year", "YY");
-const CVV = element("CardCvvElement", "CVV");
 /**
-* Defines a Recurly element component for a given type.
-*/
+ * Defines a Recurly element component for a given type.
+ */
 function element(type, title, placeholder) {
-	return forwardRef((eventHandlers, ref) => {
-		const elements = useElements({ noProviderError: "Recurly element must be used within a Elements provider." });
-		const h = useRef({});
-		h.current = eventHandlers;
-		return /* @__PURE__ */ jsx("div", { ref: useMemo(() => {
-			if (!elements) return null;
-			let el;
-			return (div) => {
-				if (div) {
-					el = elements[type]({ style: getStyle(title, placeholder) });
-					el.attach(div);
-					bindEventHandlers(el, h);
-					allowFocus(div, ref, el);
-				} else cleanup(el);
-			};
-		}, [elements, ref]) });
-	});
+  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) {
-	el?.destroy();
+  /* `.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) {
-	div.querySelector("iframe")?.addEventListener("focus", () => el.focus());
-	if (ref instanceof Function) ref(el);
-	else if (ref) ref.current = 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 {
-		fontFamily: "JetBrains Mono",
-		padding: `${px}px ${py}px`,
-		title,
-		...placeholder ? { placeholder } : {}
-	};
-}
-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));
+  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
+    } : {})
+  };
 }
 
-//#endregion
-export { CVV, CardNumber, ExpMonth, ExpYear };
+/* 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

@@ -1,2 +1,2 @@
-import { CVV, CardNumber, ElementType, EventHandler, EventHandlers, ExpMonth, ExpYear, Focusable } from "./elements.js";
-import { RecurlyField, RecurlyFieldProps } from "./RecurlyField.js";
+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

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

package/dist/Recurly/index.js

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

package/dist/ResourceCard/index.d.ts

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

package/dist/ResourceCard/index.js

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