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

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

@@ -0,0 +1 @@
+{"version":3,"file":"loadRecurly.cjs","names":["w","loadRecurly","config","_recurlyPromise","Promise","resolve","script","document","createElement","src","async","onload","recurly","Error","configure","head","appendChild"],"sources":["../../../../src/Recurly/context/recurly/loadRecurly.ts"],"sourcesContent":["import type { Recurly } from '@recurly/recurly-js';\n\nimport { w } from './w';\n\nexport type RecurlyConfig = {\n  publicKey: string;\n  required: string[];\n};\n\nexport function loadRecurly(config: RecurlyConfig) {\n  if (w && w._recurlyPromise) {\n    w._recurlyPromise = new Promise<Recurly>((resolve) => {\n      const script = (w as Window).document.createElement('script');\n      script.src = 'https://js.recurly.com/v4/recurly.js';\n      script.async = true;\n      script.onload = () => {\n        const { recurly } = w as Window;\n        if (!recurly) {\n          throw new Error('Recurly was not loaded by recurly.js');\n        }\n        recurly.configure(config);\n        resolve(recurly);\n      };\n      (w as Window).document.head.appendChild(script);\n    });\n  }\n  return w?._recurlyPromise;\n}\n"],"mappings":";;;AASA,SAAgBC,YAAYC,QAAqB;AAC/C,KAAIF,eAAKA,YAAEG,gBACTH,aAAEG,kBAAkB,IAAIC,SAAkBC,YAAAA;EACxC,MAAMC,SAAS,YAAcC,SAASC,cAAc,SAAA;AACpDF,SAAOG,MAAM;AACbH,SAAOI,QAAQ;AACfJ,SAAOK,eAAS;GACd,MAAM,EAAEC,YAAYZ;AACpB,OAAI,CAACY,QACH,OAAM,IAAIC,MAAM,uCAAA;AAElBD,WAAQE,UAAUZ,OAAAA;AAClBG,WAAQO,QAAAA;;AAETZ,cAAaO,SAASQ,KAAKC,YAAYV,OAAAA;GAC1C;AAEF,QAAON,aAAGG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"loadRecurly.d.cts","names":[],"sources":["../../../../src/Recurly/context/recurly/loadRecurly.ts"],"mappings":";;;KAIY,aAAA;EACV,SAAA;EACA,QAAA;AAAA"}

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

@@ -1,6 +1,10 @@
-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 };
+//# sourceMappingURL=loadRecurly.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loadRecurly.d.ts","names":[],"sources":["../../../../src/Recurly/context/recurly/loadRecurly.ts"],"mappings":";;;KAIY,aAAA;EACV,SAAA;EACA,QAAA;AAAA"}

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

@@ -1,22 +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;
-}
+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 };
+//# sourceMappingURL=loadRecurly.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loadRecurly.js","names":["w","loadRecurly","config","_recurlyPromise","Promise","resolve","script","document","createElement","src","async","onload","recurly","Error","configure","head","appendChild"],"sources":["../../../../src/Recurly/context/recurly/loadRecurly.ts"],"sourcesContent":["import type { Recurly } from '@recurly/recurly-js';\n\nimport { w } from './w';\n\nexport type RecurlyConfig = {\n  publicKey: string;\n  required: string[];\n};\n\nexport function loadRecurly(config: RecurlyConfig) {\n  if (w && w._recurlyPromise) {\n    w._recurlyPromise = new Promise<Recurly>((resolve) => {\n      const script = (w as Window).document.createElement('script');\n      script.src = 'https://js.recurly.com/v4/recurly.js';\n      script.async = true;\n      script.onload = () => {\n        const { recurly } = w as Window;\n        if (!recurly) {\n          throw new Error('Recurly was not loaded by recurly.js');\n        }\n        recurly.configure(config);\n        resolve(recurly);\n      };\n      (w as Window).document.head.appendChild(script);\n    });\n  }\n  return w?._recurlyPromise;\n}\n"],"mappings":";;;AASA,SAAgBC,YAAYC,QAAqB;AAC/C,KAAIF,KAAKA,EAAEG,gBACTH,GAAEG,kBAAkB,IAAIC,SAAkBC,YAAAA;EACxC,MAAMC,SAAS,EAAcC,SAASC,cAAc,SAAA;AACpDF,SAAOG,MAAM;AACbH,SAAOI,QAAQ;AACfJ,SAAOK,eAAS;GACd,MAAM,EAAEC,YAAYZ;AACpB,OAAI,CAACY,QACH,OAAM,IAAIC,MAAM,uCAAA;AAElBD,WAAQE,UAAUZ,OAAAA;AAClBG,WAAQO,QAAAA;;AAETZ,IAAaO,SAASQ,KAAKC,YAAYV,OAAAA;GAC1C;AAEF,QAAON,GAAGG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"w.cjs","names":["w","window","undefined"],"sources":["../../../../src/Recurly/context/recurly/w.ts"],"sourcesContent":["import type { Recurly } from '@recurly/recurly-js';\n\n// By importing/exporting w as a window object, we can easily mock it in tests.\n\ntype Doc = {\n  createElement: Document['createElement'];\n  head: {\n    appendChild: Document['head']['appendChild'];\n  };\n};\n\nexport type W = {\n  recurly?: Recurly;\n  _recurlyPromise?: Promise<Recurly>;\n  document: Doc;\n};\n\n// Exported for easy mocking\nexport const w = typeof window === 'undefined' ? undefined : (window as W);\n"],"mappings":";;AAkBA,MAAaA,IAAI,OAAOC,WAAW,cAAcC,SAAaD"}

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

@@ -1,4 +1,6 @@
-// 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 };
+//# sourceMappingURL=w.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"w.js","names":["w","window","undefined"],"sources":["../../../../src/Recurly/context/recurly/w.ts"],"sourcesContent":["import type { Recurly } from '@recurly/recurly-js';\n\n// By importing/exporting w as a window object, we can easily mock it in tests.\n\ntype Doc = {\n  createElement: Document['createElement'];\n  head: {\n    appendChild: Document['head']['appendChild'];\n  };\n};\n\nexport type W = {\n  recurly?: Recurly;\n  _recurlyPromise?: Promise<Recurly>;\n  document: Doc;\n};\n\n// Exported for easy mocking\nexport const w = typeof window === 'undefined' ? undefined : (window as W);\n"],"mappings":";AAkBA,MAAaA,IAAI,OAAOC,WAAW,cAAcC,SAAaD"}

package/dist/Recurly/fields/RecurlyField.cjs

@@ -0,0 +1,40 @@
+const require_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_runtime.__toESM(_emotion_styled);
+let react = require("react");
+let _codecademy_gamut_dist_Form_styles = require("@codecademy/gamut/dist/Form/styles");
+
+//#region src/Recurly/fields/RecurlyField.tsx
+const Slash = /* @__PURE__ */ (0, _emotion_styled.default)("span", {
+	target: "eghu46c0",
+	label: "brand-Slash"
+})("width:0;font-family:'Suisse';transform:translate(-6px,1px);font-size:18px;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1JlY3VybHkvZmllbGRzL1JlY3VybHlGaWVsZC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9SZWN1cmx5L2ZpZWxkcy9SZWN1cmx5RmllbGQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEJveCxcbiAgSW5wdXQsXG4gIElucHV0V3JhcHBlclByb3BzLFxuICBTdHlsZWRJbnB1dFByb3BzLFxuICBUZXh0LFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBjb25kaXRpb25hbFN0eWxlcyxcbiAgZm9ybUZpZWxkU3R5bGVzLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC9kaXN0L0Zvcm0vc3R5bGVzJztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IFNsYXNoID0gc3R5bGVkLnNwYW5gXG4gIHdpZHRoOiAwO1xuICBmb250LWZhbWlseTogJ1N1aXNzZSc7XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlKC02cHgsIDFweCk7XG4gIGZvbnQtc2l6ZTogMThweDtcbmA7XG5cbmZ1bmN0aW9uIGZvY3VzQm9yZGVyQ29sb3IoeyB2YXJpYW50IH06IFN0eWxlZElucHV0UHJvcHMpIHtcbiAgcmV0dXJuIHZhcmlhbnQgPT09ICdlcnJvcidcbiAgICA/IHRoZW1lLmNvbG9yc1snZmVlZGJhY2stZXJyb3InXVxuICAgIDogdGhlbWUuY29sb3JzLnByaW1hcnk7XG59XG5cbmNvbnN0IElucHV0SW5uZXJCb3ggPSBzdHlsZWQuZGl2PFN0eWxlZElucHV0UHJvcHM+YFxuICAke2Zvcm1GaWVsZFN0eWxlc31cbiAgJHtjb25kaXRpb25hbFN0eWxlc31cbiAgJiA+IGRpdiB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbiAgcGFkZGluZzogMDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgaGVpZ2h0OiAzLjEyNXJlbTtcbiAgLnJlY3VybHktZWxlbWVudCB7XG4gICAgaGVpZ2h0OiAzLjEyNXJlbTtcbiAgfVxuICAmOmhhcygucmVjdXJseS1lbGVtZW50LWZvY3VzKSB7XG4gICAgYm9yZGVyLWNvbG9yOiAke2ZvY3VzQm9yZGVyQ29sb3J9O1xuICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCAke2ZvY3VzQm9yZGVyQ29sb3J9O1xuICB9XG4gICY6aGFzKCR7U2xhc2h9KSA+IGRpdjpmaXJzdC1vZi10eXBlIHtcbiAgICBtYXgtd2lkdGg6IDIuNzVyZW07XG4gICAgbWluLXdpZHRoOiAyLjc1cmVtO1xuICB9XG5gO1xuXG5leHBvcnQgdHlwZSBSZWN1cmx5RmllbGRQcm9wcyA9IElucHV0V3JhcHBlclByb3BzICYgeyBsYWJlbDogc3RyaW5nIH07XG5cbi8qKlxuICogQSB3cmFwcGVyIGFyb3VuZCBhIFJlY3VybHkgZWxlbWVudCAob3IgdHdvIGVsZW1lbnRzIGluIHRoZSBjYXNlIG9mIE1NL1lZKSB0b1xuICogYWRkIEdhbXV0IGJvcmRlciBzdHlsaW5nIGFuZCBhIGxhYmVsLlxuICovXG5leHBvcnQgZnVuY3Rpb24gUmVjdXJseUZpZWxkKHsgbGFiZWwsIGNoaWxkcmVuLCAuLi5wcm9wcyB9OiBSZWN1cmx5RmllbGRQcm9wcykge1xuICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIGNvbnN0IHNlbGVjdElmcmFtZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZWYuY3VycmVudD8ucXVlcnlTZWxlY3RvcignaWZyYW1lJyk/LmZvY3VzKCk7XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDxCb3ggcmVmPXtyZWZ9PlxuICAgICAgPFRleHQgYXM9XCJsYWJlbFwiIG9uQ2xpY2s9e3NlbGVjdElmcmFtZX0+XG4gICAgICAgIHtsYWJlbH1cbiAgICAgIDwvVGV4dD5cbiAgICAgIDxJbnB1dCBhcz17SW5wdXRJbm5lckJveH0gey4uLnByb3BzfT5cbiAgICAgICAge0FycmF5LmlzQXJyYXkoY2hpbGRyZW4pICYmIGNoaWxkcmVuLmxlbmd0aCA9PT0gMiA/IChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAge2NoaWxkcmVuWzBdfVxuICAgICAgICAgICAgPFNsYXNoPi88L1NsYXNoPlxuICAgICAgICAgICAge2NoaWxkcmVuWzFdfVxuICAgICAgICAgIDwvPlxuICAgICAgICApIDogKFxuICAgICAgICAgIGNoaWxkcmVuXG4gICAgICAgICl9XG4gICAgICA8L0lucHV0PlxuICAgIDwvQm94PlxuICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVjIn0= */");
+function focusBorderColor({ variant }) {
+	return variant === "error" ? _codecademy_gamut_styles.theme.colors["feedback-error"] : _codecademy_gamut_styles.theme.colors.primary;
+}
+const InputInnerBox = /* @__PURE__ */ (0, _emotion_styled.default)("div", {
+	target: "eghu46c1",
+	label: "brand-InputInnerBox"
+})(_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;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1JlY3VybHkvZmllbGRzL1JlY3VybHlGaWVsZC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9SZWN1cmx5L2ZpZWxkcy9SZWN1cmx5RmllbGQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEJveCxcbiAgSW5wdXQsXG4gIElucHV0V3JhcHBlclByb3BzLFxuICBTdHlsZWRJbnB1dFByb3BzLFxuICBUZXh0LFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBjb25kaXRpb25hbFN0eWxlcyxcbiAgZm9ybUZpZWxkU3R5bGVzLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC9kaXN0L0Zvcm0vc3R5bGVzJztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IFNsYXNoID0gc3R5bGVkLnNwYW5gXG4gIHdpZHRoOiAwO1xuICBmb250LWZhbWlseTogJ1N1aXNzZSc7XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlKC02cHgsIDFweCk7XG4gIGZvbnQtc2l6ZTogMThweDtcbmA7XG5cbmZ1bmN0aW9uIGZvY3VzQm9yZGVyQ29sb3IoeyB2YXJpYW50IH06IFN0eWxlZElucHV0UHJvcHMpIHtcbiAgcmV0dXJuIHZhcmlhbnQgPT09ICdlcnJvcidcbiAgICA/IHRoZW1lLmNvbG9yc1snZmVlZGJhY2stZXJyb3InXVxuICAgIDogdGhlbWUuY29sb3JzLnByaW1hcnk7XG59XG5cbmNvbnN0IElucHV0SW5uZXJCb3ggPSBzdHlsZWQuZGl2PFN0eWxlZElucHV0UHJvcHM+YFxuICAke2Zvcm1GaWVsZFN0eWxlc31cbiAgJHtjb25kaXRpb25hbFN0eWxlc31cbiAgJiA+IGRpdiB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbiAgcGFkZGluZzogMDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgaGVpZ2h0OiAzLjEyNXJlbTtcbiAgLnJlY3VybHktZWxlbWVudCB7XG4gICAgaGVpZ2h0OiAzLjEyNXJlbTtcbiAgfVxuICAmOmhhcygucmVjdXJseS1lbGVtZW50LWZvY3VzKSB7XG4gICAgYm9yZGVyLWNvbG9yOiAke2ZvY3VzQm9yZGVyQ29sb3J9O1xuICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCAke2ZvY3VzQm9yZGVyQ29sb3J9O1xuICB9XG4gICY6aGFzKCR7U2xhc2h9KSA+IGRpdjpmaXJzdC1vZi10eXBlIHtcbiAgICBtYXgtd2lkdGg6IDIuNzVyZW07XG4gICAgbWluLXdpZHRoOiAyLjc1cmVtO1xuICB9XG5gO1xuXG5leHBvcnQgdHlwZSBSZWN1cmx5RmllbGRQcm9wcyA9IElucHV0V3JhcHBlclByb3BzICYgeyBsYWJlbDogc3RyaW5nIH07XG5cbi8qKlxuICogQSB3cmFwcGVyIGFyb3VuZCBhIFJlY3VybHkgZWxlbWVudCAob3IgdHdvIGVsZW1lbnRzIGluIHRoZSBjYXNlIG9mIE1NL1lZKSB0b1xuICogYWRkIEdhbXV0IGJvcmRlciBzdHlsaW5nIGFuZCBhIGxhYmVsLlxuICovXG5leHBvcnQgZnVuY3Rpb24gUmVjdXJseUZpZWxkKHsgbGFiZWwsIGNoaWxkcmVuLCAuLi5wcm9wcyB9OiBSZWN1cmx5RmllbGRQcm9wcykge1xuICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIGNvbnN0IHNlbGVjdElmcmFtZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZWYuY3VycmVudD8ucXVlcnlTZWxlY3RvcignaWZyYW1lJyk/LmZvY3VzKCk7XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDxCb3ggcmVmPXtyZWZ9PlxuICAgICAgPFRleHQgYXM9XCJsYWJlbFwiIG9uQ2xpY2s9e3NlbGVjdElmcmFtZX0+XG4gICAgICAgIHtsYWJlbH1cbiAgICAgIDwvVGV4dD5cbiAgICAgIDxJbnB1dCBhcz17SW5wdXRJbm5lckJveH0gey4uLnByb3BzfT5cbiAgICAgICAge0FycmF5LmlzQXJyYXkoY2hpbGRyZW4pICYmIGNoaWxkcmVuLmxlbmd0aCA9PT0gMiA/IChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAge2NoaWxkcmVuWzBdfVxuICAgICAgICAgICAgPFNsYXNoPi88L1NsYXNoPlxuICAgICAgICAgICAge2NoaWxkcmVuWzFdfVxuICAgICAgICAgIDwvPlxuICAgICAgICApIDogKFxuICAgICAgICAgIGNoaWxkcmVuXG4gICAgICAgICl9XG4gICAgICA8L0lucHV0PlxuICAgIDwvQm94PlxuICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCc0IifQ== */");
+/**
+* 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);
+	const selectIframe = (0, react.useCallback)(() => {
+		ref.current?.querySelector("iframe")?.focus();
+	}, []);
+	return /* @__PURE__ */ React.createElement(_codecademy_gamut.Box, { ref }, /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, {
+		as: "label",
+		onClick: selectIframe
+	}, label), /* @__PURE__ */ React.createElement(_codecademy_gamut.Input, {
+		as: InputInnerBox,
+		...props
+	}, Array.isArray(children) && children.length === 2 ? /* @__PURE__ */ React.createElement(React.Fragment, null, children[0], /* @__PURE__ */ React.createElement(Slash, null, "/"), children[1]) : children));
+}
+
+//#endregion
+exports.RecurlyField = RecurlyField;
+//# sourceMappingURL=RecurlyField.cjs.map

package/dist/Recurly/fields/RecurlyField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecurlyField.cjs","names":["Box","Input","Text","conditionalStyles","formFieldStyles","theme","styled","useCallback","useRef","Slash","focusBorderColor","variant","colors","primary","InputInnerBox","RecurlyField","label","children","props","ref","selectIframe","current","querySelector","focus","as","onClick","Array","isArray","length"],"sources":["../../../src/Recurly/fields/RecurlyField.tsx"],"sourcesContent":["import {\n  Box,\n  Input,\n  InputWrapperProps,\n  StyledInputProps,\n  Text,\n} from '@codecademy/gamut';\nimport {\n  conditionalStyles,\n  formFieldStyles,\n} from '@codecademy/gamut/dist/Form/styles';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useCallback, useRef } from 'react';\n\nconst Slash = styled.span`\n  width: 0;\n  font-family: 'Suisse';\n  transform: translate(-6px, 1px);\n  font-size: 18px;\n`;\n\nfunction focusBorderColor({ variant }: StyledInputProps) {\n  return variant === 'error'\n    ? theme.colors['feedback-error']\n    : theme.colors.primary;\n}\n\nconst InputInnerBox = styled.div<StyledInputProps>`\n  ${formFieldStyles}\n  ${conditionalStyles}\n  & > div {\n    width: 100%;\n  }\n  padding: 0;\n  display: flex;\n  align-items: center;\n  height: 3.125rem;\n  .recurly-element {\n    height: 3.125rem;\n  }\n  &:has(.recurly-element-focus) {\n    border-color: ${focusBorderColor};\n    box-shadow: inset 0 0 0 1px ${focusBorderColor};\n  }\n  &:has(${Slash}) > div:first-of-type {\n    max-width: 2.75rem;\n    min-width: 2.75rem;\n  }\n`;\n\nexport type RecurlyFieldProps = InputWrapperProps & { label: string };\n\n/**\n * A wrapper around a Recurly element (or two elements in the case of MM/YY) to\n * add Gamut border styling and a label.\n */\nexport function RecurlyField({ label, children, ...props }: RecurlyFieldProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const selectIframe = useCallback(() => {\n    ref.current?.querySelector('iframe')?.focus();\n  }, []);\n\n  return (\n    <Box ref={ref}>\n      <Text as=\"label\" onClick={selectIframe}>\n        {label}\n      </Text>\n      <Input as={InputInnerBox} {...props}>\n        {Array.isArray(children) && children.length === 2 ? (\n          <>\n            {children[0]}\n            <Slash>/</Slash>\n            {children[1]}\n          </>\n        ) : (\n          children\n        )}\n      </Input>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;AAeA,MAAMS,QAAQH,6CAAAA,QAAAA;;;;AAOd,SAASI,iBAAiB,EAAEC,WAA2B;AACrD,QAAOA,YAAY,UACfN,+BAAMO,OAAO,oBACbP,+BAAMO,OAAOC;;AAGnB,MAAMC,gBAAgBR,6CAAAA,OAAAA;;;GAClBF,oDAAAA,KACAD,sDAAAA,iKAYgBO,kBAAAA,gCACcA,kBAAAA,YAExBD,OAAAA,+DAAAA,0/FAAAA;;;;GAYV,SAAgBM,aAAa,EAAEC,OAAOC,UAAU,GAAGC,SAA0B;CAC3E,MAAMC,wBAA6B,KAAA;CAEnC,MAAMC,4CAA2B;AAC/BD,MAAIE,SAASC,cAAc,SAAA,EAAWC,OAAAA;IACrC,EAAE,CAAA;AAEL,QACE,sBAAA,cAACvB,uBAAAA,EAASmB,OACR,sBAAA,cAACjB,wBAAAA;EAAKsB,IAAG;EAAQC,SAASL;IACvBJ,MAAAA,EAEH,sBAAA,cAACf,yBAAAA;EAAMuB,IAAIV;EAAgB,GAAGI;IAC3BQ,MAAMC,QAAQV,SAAAA,IAAaA,SAASW,WAAW,IAC9C,sBAAA,cAAA,MAAA,UAAA,MACGX,SAAS,IACV,sBAAA,cAACR,OAAAA,MAAM,IAAA,EACNQ,SAAS,GAAE,GAGdA,SAAAA,CAAAA"}

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

@@ -0,0 +1,19 @@
+import { InputWrapperProps } from "@codecademy/gamut";
+import * as react_jsx_runtime0 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_runtime0.JSX.Element;
+//#endregion
+export { RecurlyField, RecurlyFieldProps };
+//# sourceMappingURL=RecurlyField.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecurlyField.d.cts","names":[],"sources":["../../../src/Recurly/fields/RecurlyField.tsx"],"mappings":";;;;KAmDY,iBAAA,GAAoB,iBAAA;EAAsB,KAAA;AAAA;AAAtD;;;;AAAA,iBAMgB,YAAA,CAAA;EAAe,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -1,9 +1,19 @@
-import { InputWrapperProps } from '@codecademy/gamut';
-export type RecurlyFieldProps = InputWrapperProps & {
-    label: string;
+import { InputWrapperProps } from "@codecademy/gamut";
+import * as react_jsx_runtime0 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_runtime0.JSX.Element;
+//#endregion
+export { RecurlyField, RecurlyFieldProps };
+//# sourceMappingURL=RecurlyField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecurlyField.d.ts","names":[],"sources":["../../../src/Recurly/fields/RecurlyField.tsx"],"mappings":";;;;KAmDY,iBAAA,GAAoB,iBAAA;EAAsB,KAAA;AAAA;AAAtD;;;;AAAA,iBAMgB,YAAA,CAAA;EAAe,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Recurly/fields/RecurlyField.js

@@ -1,57 +1,38 @@
-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 { conditionalStyles, formFieldStyles } from "@codecademy/gamut/dist/Form/styles";
+
+//#region src/Recurly/fields/RecurlyField.tsx
+const Slash = /* @__PURE__ */ styled("span", {
+	target: "eghu46c0",
+	label: "brand-Slash"
+})("width:0;font-family:'Suisse';transform:translate(-6px,1px);font-size:18px;", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1JlY3VybHkvZmllbGRzL1JlY3VybHlGaWVsZC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9SZWN1cmx5L2ZpZWxkcy9SZWN1cmx5RmllbGQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEJveCxcbiAgSW5wdXQsXG4gIElucHV0V3JhcHBlclByb3BzLFxuICBTdHlsZWRJbnB1dFByb3BzLFxuICBUZXh0LFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBjb25kaXRpb25hbFN0eWxlcyxcbiAgZm9ybUZpZWxkU3R5bGVzLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC9kaXN0L0Zvcm0vc3R5bGVzJztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IFNsYXNoID0gc3R5bGVkLnNwYW5gXG4gIHdpZHRoOiAwO1xuICBmb250LWZhbWlseTogJ1N1aXNzZSc7XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlKC02cHgsIDFweCk7XG4gIGZvbnQtc2l6ZTogMThweDtcbmA7XG5cbmZ1bmN0aW9uIGZvY3VzQm9yZGVyQ29sb3IoeyB2YXJpYW50IH06IFN0eWxlZElucHV0UHJvcHMpIHtcbiAgcmV0dXJuIHZhcmlhbnQgPT09ICdlcnJvcidcbiAgICA/IHRoZW1lLmNvbG9yc1snZmVlZGJhY2stZXJyb3InXVxuICAgIDogdGhlbWUuY29sb3JzLnByaW1hcnk7XG59XG5cbmNvbnN0IElucHV0SW5uZXJCb3ggPSBzdHlsZWQuZGl2PFN0eWxlZElucHV0UHJvcHM+YFxuICAke2Zvcm1GaWVsZFN0eWxlc31cbiAgJHtjb25kaXRpb25hbFN0eWxlc31cbiAgJiA+IGRpdiB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbiAgcGFkZGluZzogMDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgaGVpZ2h0OiAzLjEyNXJlbTtcbiAgLnJlY3VybHktZWxlbWVudCB7XG4gICAgaGVpZ2h0OiAzLjEyNXJlbTtcbiAgfVxuICAmOmhhcygucmVjdXJseS1lbGVtZW50LWZvY3VzKSB7XG4gICAgYm9yZGVyLWNvbG9yOiAke2ZvY3VzQm9yZGVyQ29sb3J9O1xuICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCAke2ZvY3VzQm9yZGVyQ29sb3J9O1xuICB9XG4gICY6aGFzKCR7U2xhc2h9KSA+IGRpdjpmaXJzdC1vZi10eXBlIHtcbiAgICBtYXgtd2lkdGg6IDIuNzVyZW07XG4gICAgbWluLXdpZHRoOiAyLjc1cmVtO1xuICB9XG5gO1xuXG5leHBvcnQgdHlwZSBSZWN1cmx5RmllbGRQcm9wcyA9IElucHV0V3JhcHBlclByb3BzICYgeyBsYWJlbDogc3RyaW5nIH07XG5cbi8qKlxuICogQSB3cmFwcGVyIGFyb3VuZCBhIFJlY3VybHkgZWxlbWVudCAob3IgdHdvIGVsZW1lbnRzIGluIHRoZSBjYXNlIG9mIE1NL1lZKSB0b1xuICogYWRkIEdhbXV0IGJvcmRlciBzdHlsaW5nIGFuZCBhIGxhYmVsLlxuICovXG5leHBvcnQgZnVuY3Rpb24gUmVjdXJseUZpZWxkKHsgbGFiZWwsIGNoaWxkcmVuLCAuLi5wcm9wcyB9OiBSZWN1cmx5RmllbGRQcm9wcykge1xuICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIGNvbnN0IHNlbGVjdElmcmFtZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZWYuY3VycmVudD8ucXVlcnlTZWxlY3RvcignaWZyYW1lJyk/LmZvY3VzKCk7XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDxCb3ggcmVmPXtyZWZ9PlxuICAgICAgPFRleHQgYXM9XCJsYWJlbFwiIG9uQ2xpY2s9e3NlbGVjdElmcmFtZX0+XG4gICAgICAgIHtsYWJlbH1cbiAgICAgIDwvVGV4dD5cbiAgICAgIDxJbnB1dCBhcz17SW5wdXRJbm5lckJveH0gey4uLnByb3BzfT5cbiAgICAgICAge0FycmF5LmlzQXJyYXkoY2hpbGRyZW4pICYmIGNoaWxkcmVuLmxlbmd0aCA9PT0gMiA/IChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAge2NoaWxkcmVuWzBdfVxuICAgICAgICAgICAgPFNsYXNoPi88L1NsYXNoPlxuICAgICAgICAgICAge2NoaWxkcmVuWzFdfVxuICAgICAgICAgIDwvPlxuICAgICAgICApIDogKFxuICAgICAgICAgIGNoaWxkcmVuXG4gICAgICAgICl9XG4gICAgICA8L0lucHV0PlxuICAgIDwvQm94PlxuICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVjIn0= */");
+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== */"));
+const InputInnerBox = /* @__PURE__ */ styled("div", {
+	target: "eghu46c1",
+	label: "brand-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;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvbW9uby9tb25vL2xpYnMvdWkvYnJhbmQvc3JjL1JlY3VybHkvZmllbGRzL1JlY3VybHlGaWVsZC50c3giLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL21vbm8vbW9uby9saWJzL3VpL2JyYW5kL3NyYy9SZWN1cmx5L2ZpZWxkcy9SZWN1cmx5RmllbGQudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEJveCxcbiAgSW5wdXQsXG4gIElucHV0V3JhcHBlclByb3BzLFxuICBTdHlsZWRJbnB1dFByb3BzLFxuICBUZXh0LFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQge1xuICBjb25kaXRpb25hbFN0eWxlcyxcbiAgZm9ybUZpZWxkU3R5bGVzLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dC9kaXN0L0Zvcm0vc3R5bGVzJztcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtc3R5bGVzJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IFNsYXNoID0gc3R5bGVkLnNwYW5gXG4gIHdpZHRoOiAwO1xuICBmb250LWZhbWlseTogJ1N1aXNzZSc7XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlKC02cHgsIDFweCk7XG4gIGZvbnQtc2l6ZTogMThweDtcbmA7XG5cbmZ1bmN0aW9uIGZvY3VzQm9yZGVyQ29sb3IoeyB2YXJpYW50IH06IFN0eWxlZElucHV0UHJvcHMpIHtcbiAgcmV0dXJuIHZhcmlhbnQgPT09ICdlcnJvcidcbiAgICA/IHRoZW1lLmNvbG9yc1snZmVlZGJhY2stZXJyb3InXVxuICAgIDogdGhlbWUuY29sb3JzLnByaW1hcnk7XG59XG5cbmNvbnN0IElucHV0SW5uZXJCb3ggPSBzdHlsZWQuZGl2PFN0eWxlZElucHV0UHJvcHM+YFxuICAke2Zvcm1GaWVsZFN0eWxlc31cbiAgJHtjb25kaXRpb25hbFN0eWxlc31cbiAgJiA+IGRpdiB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbiAgcGFkZGluZzogMDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgaGVpZ2h0OiAzLjEyNXJlbTtcbiAgLnJlY3VybHktZWxlbWVudCB7XG4gICAgaGVpZ2h0OiAzLjEyNXJlbTtcbiAgfVxuICAmOmhhcygucmVjdXJseS1lbGVtZW50LWZvY3VzKSB7XG4gICAgYm9yZGVyLWNvbG9yOiAke2ZvY3VzQm9yZGVyQ29sb3J9O1xuICAgIGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCAke2ZvY3VzQm9yZGVyQ29sb3J9O1xuICB9XG4gICY6aGFzKCR7U2xhc2h9KSA+IGRpdjpmaXJzdC1vZi10eXBlIHtcbiAgICBtYXgtd2lkdGg6IDIuNzVyZW07XG4gICAgbWluLXdpZHRoOiAyLjc1cmVtO1xuICB9XG5gO1xuXG5leHBvcnQgdHlwZSBSZWN1cmx5RmllbGRQcm9wcyA9IElucHV0V3JhcHBlclByb3BzICYgeyBsYWJlbDogc3RyaW5nIH07XG5cbi8qKlxuICogQSB3cmFwcGVyIGFyb3VuZCBhIFJlY3VybHkgZWxlbWVudCAob3IgdHdvIGVsZW1lbnRzIGluIHRoZSBjYXNlIG9mIE1NL1lZKSB0b1xuICogYWRkIEdhbXV0IGJvcmRlciBzdHlsaW5nIGFuZCBhIGxhYmVsLlxuICovXG5leHBvcnQgZnVuY3Rpb24gUmVjdXJseUZpZWxkKHsgbGFiZWwsIGNoaWxkcmVuLCAuLi5wcm9wcyB9OiBSZWN1cmx5RmllbGRQcm9wcykge1xuICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIGNvbnN0IHNlbGVjdElmcmFtZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZWYuY3VycmVudD8ucXVlcnlTZWxlY3RvcignaWZyYW1lJyk/LmZvY3VzKCk7XG4gIH0sIFtdKTtcblxuICByZXR1cm4gKFxuICAgIDxCb3ggcmVmPXtyZWZ9PlxuICAgICAgPFRleHQgYXM9XCJsYWJlbFwiIG9uQ2xpY2s9e3NlbGVjdElmcmFtZX0+XG4gICAgICAgIHtsYWJlbH1cbiAgICAgIDwvVGV4dD5cbiAgICAgIDxJbnB1dCBhcz17SW5wdXRJbm5lckJveH0gey4uLnByb3BzfT5cbiAgICAgICAge0FycmF5LmlzQXJyYXkoY2hpbGRyZW4pICYmIGNoaWxkcmVuLmxlbmd0aCA9PT0gMiA/IChcbiAgICAgICAgICA8PlxuICAgICAgICAgICAge2NoaWxkcmVuWzBdfVxuICAgICAgICAgICAgPFNsYXNoPi88L1NsYXNoPlxuICAgICAgICAgICAge2NoaWxkcmVuWzFdfVxuICAgICAgICAgIDwvPlxuICAgICAgICApIDogKFxuICAgICAgICAgIGNoaWxkcmVuXG4gICAgICAgICl9XG4gICAgICA8L0lucHV0PlxuICAgIDwvQm94PlxuICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCc0IifQ== */");
 /**
- * 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);
+	const selectIframe = useCallback(() => {
+		ref.current?.querySelector("iframe")?.focus();
+	}, []);
+	return /* @__PURE__ */ React.createElement(Box, { ref }, /* @__PURE__ */ React.createElement(Text, {
+		as: "label",
+		onClick: selectIframe
+	}, label), /* @__PURE__ */ React.createElement(Input, {
+		as: InputInnerBox,
+		...props
+	}, Array.isArray(children) && children.length === 2 ? /* @__PURE__ */ React.createElement(React.Fragment, null, children[0], /* @__PURE__ */ React.createElement(Slash, null, "/"), children[1]) : children));
+}
+
+//#endregion
+export { RecurlyField };
+//# sourceMappingURL=RecurlyField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RecurlyField.js","names":["Box","Input","Text","conditionalStyles","formFieldStyles","theme","styled","useCallback","useRef","Slash","focusBorderColor","variant","colors","primary","InputInnerBox","RecurlyField","label","children","props","ref","selectIframe","current","querySelector","focus","as","onClick","Array","isArray","length"],"sources":["../../../src/Recurly/fields/RecurlyField.tsx"],"sourcesContent":["import {\n  Box,\n  Input,\n  InputWrapperProps,\n  StyledInputProps,\n  Text,\n} from '@codecademy/gamut';\nimport {\n  conditionalStyles,\n  formFieldStyles,\n} from '@codecademy/gamut/dist/Form/styles';\nimport { theme } from '@codecademy/gamut-styles';\nimport styled from '@emotion/styled';\nimport { useCallback, useRef } from 'react';\n\nconst Slash = styled.span`\n  width: 0;\n  font-family: 'Suisse';\n  transform: translate(-6px, 1px);\n  font-size: 18px;\n`;\n\nfunction focusBorderColor({ variant }: StyledInputProps) {\n  return variant === 'error'\n    ? theme.colors['feedback-error']\n    : theme.colors.primary;\n}\n\nconst InputInnerBox = styled.div<StyledInputProps>`\n  ${formFieldStyles}\n  ${conditionalStyles}\n  & > div {\n    width: 100%;\n  }\n  padding: 0;\n  display: flex;\n  align-items: center;\n  height: 3.125rem;\n  .recurly-element {\n    height: 3.125rem;\n  }\n  &:has(.recurly-element-focus) {\n    border-color: ${focusBorderColor};\n    box-shadow: inset 0 0 0 1px ${focusBorderColor};\n  }\n  &:has(${Slash}) > div:first-of-type {\n    max-width: 2.75rem;\n    min-width: 2.75rem;\n  }\n`;\n\nexport type RecurlyFieldProps = InputWrapperProps & { label: string };\n\n/**\n * A wrapper around a Recurly element (or two elements in the case of MM/YY) to\n * add Gamut border styling and a label.\n */\nexport function RecurlyField({ label, children, ...props }: RecurlyFieldProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const selectIframe = useCallback(() => {\n    ref.current?.querySelector('iframe')?.focus();\n  }, []);\n\n  return (\n    <Box ref={ref}>\n      <Text as=\"label\" onClick={selectIframe}>\n        {label}\n      </Text>\n      <Input as={InputInnerBox} {...props}>\n        {Array.isArray(children) && children.length === 2 ? (\n          <>\n            {children[0]}\n            <Slash>/</Slash>\n            {children[1]}\n          </>\n        ) : (\n          children\n        )}\n      </Input>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;AAeA,MAAMS,QAAQH,uBAAAA,QAAAA;;;;AAOd,SAASI,iBAAiB,EAAEC,WAA2B;AACrD,QAAOA,YAAY,UACfN,MAAMO,OAAO,oBACbP,MAAMO,OAAOC;;AAGnB,MAAMC,gBAAgBR,uBAAAA,OAAAA;;;GAClBF,iBAAAA,KACAD,mBAAAA,iKAYgBO,kBAAAA,gCACcA,kBAAAA,YAExBD,OAAAA,+DAAAA,0/FAAAA;;;;GAYV,SAAgBM,aAAa,EAAEC,OAAOC,UAAU,GAAGC,SAA0B;CAC3E,MAAMC,MAAMX,OAAuB,KAAA;CAEnC,MAAMY,eAAeb,kBAAY;AAC/BY,MAAIE,SAASC,cAAc,SAAA,EAAWC,OAAAA;IACrC,EAAE,CAAA;AAEL,QACE,sBAAA,cAACvB,KAAAA,EAASmB,OACR,sBAAA,cAACjB,MAAAA;EAAKsB,IAAG;EAAQC,SAASL;IACvBJ,MAAAA,EAEH,sBAAA,cAACf,OAAAA;EAAMuB,IAAIV;EAAgB,GAAGI;IAC3BQ,MAAMC,QAAQV,SAAAA,IAAaA,SAASW,WAAW,IAC9C,sBAAA,cAAA,MAAA,UAAA,MACGX,SAAS,IACV,sBAAA,cAACR,OAAAA,MAAM,IAAA,EACNQ,SAAS,GAAE,GAGdA,SAAAA,CAAAA"}

package/dist/Recurly/fields/elements.cjs

@@ -0,0 +1,64 @@
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../context/elements/index.cjs');
+require('../context/index.cjs');
+let react = require("react");
+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 /* @__PURE__ */ (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;
+		const callback = (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]);
+		return /* @__PURE__ */ React.createElement("div", { ref: callback });
+	});
+}
+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;
+//# sourceMappingURL=elements.cjs.map

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

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

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

@@ -0,0 +1,23 @@
+import * as react from "react";
+import { Emitter } from "@recurly/recurly-js/lib/emitter";
+
+//#region src/Recurly/fields/elements.d.ts
+declare const CardNumber: react.ForwardRefExoticComponent<EventHandlers & react.RefAttributes<Focusable>>;
+declare const ExpMonth: react.ForwardRefExoticComponent<EventHandlers & react.RefAttributes<Focusable>>;
+declare const ExpYear: react.ForwardRefExoticComponent<EventHandlers & react.RefAttributes<Focusable>>;
+declare const CVV: react.ForwardRefExoticComponent<EventHandlers & react.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 };
+//# sourceMappingURL=elements.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.cts","names":[],"sources":["../../../src/Recurly/fields/elements.tsx"],"mappings":";;;;cAUa,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,KAAA,CAAA,aAAA,CAAA,SAAA;AAAA,cACV,QAAA,EAAQ,KAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,KAAA,CAAA,aAAA,CAAA,SAAA;AAAA,cACR,OAAA,EAAO,KAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,KAAA,CAAA,aAAA,CAAA,SAAA;AAAA,cACP,GAAA,EAAG,KAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,KAAA,CAAA,aAAA,CAAA,SAAA;AAAA,KAIJ,WAAA;AAAA,KAOA,YAAA,GAAe,UAAA,CAAW,OAAA;AAAA,KAE1B,aAAA;EACV,OAAA,GAAU,YAAA;EACV,QAAA,GAAW,YAAA;EACX,MAAA,GAAS,YAAA;EACT,OAAA,GAAU,YAAA;EACV,QAAA,GAAW,YAAA;AAAA;AAAA,KAMD,SAAA;EAAc,KAAA;AAAA"}

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

@@ -1,17 +1,23 @@
-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;
+import * as react from "react";
+import { Emitter } from "@recurly/recurly-js/lib/emitter";
+
+//#region src/Recurly/fields/elements.d.ts
+declare const CardNumber: react.ForwardRefExoticComponent<EventHandlers & react.RefAttributes<Focusable>>;
+declare const ExpMonth: react.ForwardRefExoticComponent<EventHandlers & react.RefAttributes<Focusable>>;
+declare const ExpYear: react.ForwardRefExoticComponent<EventHandlers & react.RefAttributes<Focusable>>;
+declare const CVV: react.ForwardRefExoticComponent<EventHandlers & react.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;
 };
-export type Focusable = {
-    focus: () => void;
+type Focusable = {
+  focus: () => void;
 };
+//#endregion
+export { CVV, CardNumber, ElementType, EventHandler, EventHandlers, ExpMonth, ExpYear, Focusable };
+//# sourceMappingURL=elements.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","names":[],"sources":["../../../src/Recurly/fields/elements.tsx"],"mappings":";;;;cAUa,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,KAAA,CAAA,aAAA,CAAA,SAAA;AAAA,cACV,QAAA,EAAQ,KAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,KAAA,CAAA,aAAA,CAAA,SAAA;AAAA,cACR,OAAA,EAAO,KAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,KAAA,CAAA,aAAA,CAAA,SAAA;AAAA,cACP,GAAA,EAAG,KAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,KAAA,CAAA,aAAA,CAAA,SAAA;AAAA,KAIJ,WAAA;AAAA,KAOA,YAAA,GAAe,UAAA,CAAW,OAAA;AAAA,KAE1B,aAAA;EACV,OAAA,GAAU,YAAA;EACV,QAAA,GAAW,YAAA;EACX,MAAA,GAAS,YAAA;EACT,OAAA,GAAU,YAAA;EACV,QAAA,GAAW,YAAA;AAAA;AAAA,KAMD,SAAA;EAAc,KAAA;AAAA"}