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

package/dist/Recurly/context/recurly/index.d.cts

@@ -0,0 +1,38 @@
+import { RecurlyConfig } from "./loadRecurly.cjs";
+import { PropsWithChildren } from "react";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
+import { Recurly } from "@recurly/recurly-js";
+
+//#region src/Recurly/context/recurly/index.d.ts
+type RecurlyProviderProps = PropsWithChildren<RecurlyConfig>;
+/**
+ * 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
+ */
+declare function RecurlyProvider({
+  children,
+  ...config
+}: RecurlyProviderProps): react_jsx_runtime3.JSX.Element;
+/**
+ * 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.
+ */
+declare function useRecurly(options?: {
+  noProviderError?: string;
+}): Recurly | undefined;
+//#endregion
+export { RecurlyProvider, useRecurly };

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

@@ -1,7 +1,10 @@
-import type { Recurly } from '@recurly/recurly-js';
-import { PropsWithChildren } from 'react';
-import { RecurlyConfig } from './loadRecurly';
-export type RecurlyProviderProps = PropsWithChildren<RecurlyConfig>;
+import { RecurlyConfig } from "./loadRecurly.js";
+import { PropsWithChildren } from "react";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
+import { Recurly } from "@recurly/recurly-js";
+
+//#region src/Recurly/context/recurly/index.d.ts
+type RecurlyProviderProps = PropsWithChildren<RecurlyConfig>;
 /**
  * A provider that:
  * - loads the Recurly library
@@ -9,7 +12,10 @@ export type RecurlyProviderProps = PropsWithChildren<RecurlyConfig>;
  * - configures the library with the provided public key
  * - provides the library instance via context
  */
-export declare function RecurlyProvider({ children, ...config }: RecurlyProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function RecurlyProvider({
+  children,
+  ...config
+}: RecurlyProviderProps): react_jsx_runtime3.JSX.Element;
 /**
  * A hook that returns the Recurly instance from context.
  *
@@ -25,6 +31,8 @@ export declare function RecurlyProvider({ children, ...config }: RecurlyProvider
  *
  * @returns The Recurly instance.
  */
-export declare function useRecurly(options?: {
-    noProviderError?: string;
+declare function useRecurly(options?: {
+  noProviderError?: string;
 }): Recurly | undefined;
+//#endregion
+export { RecurlyProvider, RecurlyProviderProps, useRecurly };

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

@@ -1,50 +1,47 @@
-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);
+import { NO_PROVIDER } from "../NoProvider.js";
+import { loadRecurly } from "./loadRecurly.js";
+import { createContext, useContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Recurly/context/recurly/index.tsx
+const RecurlyCtx = 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 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
+*/
+function RecurlyProvider({ children, ...config }) {
+	const [recurly, setRecurly] = useState(void 0);
+	useEffect(() => {
+		loadRecurly(config)?.then(setRecurly);
+	}, []);
+	return /* @__PURE__ */ jsx(RecurlyCtx.Provider, {
+		value: recurly,
+		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;
-}
+* 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.
+*/
+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;
+}
+
+//#endregion
+export { RecurlyProvider, useRecurly };

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

@@ -0,0 +1,21 @@
+const require_w = require('./w.cjs');
+
+//#region src/Recurly/context/recurly/loadRecurly.ts
+function loadRecurly(config) {
+	if (require_w.w && require_w.w._recurlyPromise) require_w.w._recurlyPromise = new Promise((resolve) => {
+		const script = require_w.w.document.createElement("script");
+		script.src = "https://js.recurly.com/v4/recurly.js";
+		script.async = true;
+		script.onload = () => {
+			const { recurly } = require_w.w;
+			if (!recurly) throw new Error("Recurly was not loaded by recurly.js");
+			recurly.configure(config);
+			resolve(recurly);
+		};
+		require_w.w.document.head.appendChild(script);
+	});
+	return require_w.w?._recurlyPromise;
+}
+
+//#endregion
+exports.loadRecurly = loadRecurly;

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

@@ -0,0 +1,9 @@
+import { Recurly } from "@recurly/recurly-js";
+
+//#region src/Recurly/context/recurly/loadRecurly.d.ts
+type RecurlyConfig = {
+  publicKey: string;
+  required: string[];
+};
+//#endregion
+export { RecurlyConfig };

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

@@ -1,6 +1,9 @@
-import type { Recurly } from '@recurly/recurly-js';
-export type RecurlyConfig = {
-    publicKey: string;
-    required: string[];
+import { Recurly } from "@recurly/recurly-js";
+
+//#region src/Recurly/context/recurly/loadRecurly.d.ts
+type RecurlyConfig = {
+  publicKey: string;
+  required: string[];
 };
-export declare function loadRecurly(config: RecurlyConfig): Promise<Recurly> | undefined;
+//#endregion
+export { RecurlyConfig };

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

@@ -1,22 +1,21 @@
-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;
-}
+import { w } from "./w.js";
+
+//#region src/Recurly/context/recurly/loadRecurly.ts
+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;
+}
+
+//#endregion
+export { loadRecurly };

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

@@ -0,0 +1,6 @@
+
+//#region src/Recurly/context/recurly/w.ts
+const w = typeof window === "undefined" ? void 0 : window;
+
+//#endregion
+exports.w = w;

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

@@ -1,4 +1,5 @@
-// By importing/exporting w as a window object, we can easily mock it in tests.
+//#region src/Recurly/context/recurly/w.ts
+const w = typeof window === "undefined" ? void 0 : window;
 
-// Exported for easy mocking
-export const w = typeof window === 'undefined' ? undefined : window;
+//#endregion
+export { w };

package/dist/Recurly/fields/RecurlyField.cjs

@@ -0,0 +1,69 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let _codecademy_gamut_styles = require("@codecademy/gamut-styles");
+let _emotion_styled = require("@emotion/styled");
+_emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled);
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_dist_Form_styles = require("@codecademy/gamut/dist/Form/styles");
+
+//#region src/Recurly/fields/RecurlyField.tsx
+const Slash = _emotion_styled.default.span`
+  width: 0;
+  font-family: 'Suisse';
+  transform: translate(-6px, 1px);
+  font-size: 18px;
+`;
+function focusBorderColor({ variant }) {
+	return variant === "error" ? _codecademy_gamut_styles.theme.colors["feedback-error"] : _codecademy_gamut_styles.theme.colors.primary;
+}
+const InputInnerBox = _emotion_styled.default.div`
+  ${_codecademy_gamut_dist_Form_styles.formFieldStyles}
+  ${_codecademy_gamut_dist_Form_styles.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;
+  }
+`;
+/**
+* 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 = (0, react.useRef)(null);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_codecademy_gamut.Box, {
+		ref,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Text, {
+			as: "label",
+			onClick: (0, react.useCallback)(() => {
+				ref.current?.querySelector("iframe")?.focus();
+			}, []),
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_codecademy_gamut.Input, {
+			as: InputInnerBox,
+			...props,
+			children: Array.isArray(children) && children.length === 2 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				children[0],
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Slash, { children: "/" }),
+				children[1]
+			] }) : children
+		})]
+	});
+}
+
+//#endregion
+exports.RecurlyField = RecurlyField;

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

@@ -0,0 +1,18 @@
+import { InputWrapperProps } from "@codecademy/gamut";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+
+//#region src/Recurly/fields/RecurlyField.d.ts
+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.
+ */
+declare function RecurlyField({
+  label,
+  children,
+  ...props
+}: RecurlyFieldProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+export { RecurlyField, RecurlyFieldProps };

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

@@ -1,9 +1,18 @@
-import { InputWrapperProps } from '@codecademy/gamut';
-export type RecurlyFieldProps = InputWrapperProps & {
-    label: string;
+import { InputWrapperProps } from "@codecademy/gamut";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+
+//#region src/Recurly/fields/RecurlyField.d.ts
+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;
+declare function RecurlyField({
+  label,
+  children,
+  ...props
+}: RecurlyFieldProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+export { RecurlyField, RecurlyFieldProps };

package/dist/Recurly/fields/RecurlyField.js

@@ -1,57 +1,67 @@
-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;
+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;
 }
-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== */"));
+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;
+  }
+`;
 /**
- * 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
-    })]
-  });
-}
+* 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 };

package/dist/Recurly/fields/elements.cjs

@@ -0,0 +1,63 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_index = require('../context/elements/index.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _codecademy_gamut_dist_Form_styles = require("@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 (0, react.forwardRef)((eventHandlers, ref) => {
+		const elements = require_index.useElements({ noProviderError: "Recurly element must be used within a Elements provider." });
+		const h = (0, react.useRef)({});
+		h.current = eventHandlers;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { ref: (0, react.useMemo)(() => {
+			if (!elements) return null;
+			let el;
+			return (div) => {
+				if (div) {
+					el = elements[type]({ style: getStyle(title, placeholder) });
+					el.attach(div);
+					bindEventHandlers(el, h);
+					allowFocus(div, ref, el);
+				} else cleanup(el);
+			};
+		}, [elements, ref]) });
+	});
+}
+function cleanup(el) {
+	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;
+}
+function getStyle(title, placeholder) {
+	const { px, py } = _codecademy_gamut_dist_Form_styles.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));
+}
+
+//#endregion
+exports.CVV = CVV;
+exports.CardNumber = CardNumber;
+exports.ExpMonth = ExpMonth;
+exports.ExpYear = ExpYear;

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

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