@codecademy/brand 2.5.0-alpha.975930aaa2.0 → 3.0.0-alpha.220d4ef8ba.0

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

@@ -1,26 +0,0 @@
-import type { ElementsInstance } from '@recurly/recurly-js';
-import { PropsWithChildren } from 'react';
-/**
- * A provider that provides the Elements instance via context.
- *
- * If used outside of a RecurlyProvider, it will throw an error.
- */
-export declare function Elements({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
-/**
- * A hook that returns the Elements instance from context.
- *
- * If used outside of an Elements provider, it will throw an error.
- *
- * Within an Elements provider:
- * - If used on the server, it will return undefined.
- * - If used on the client, it will initially return undefined and then return
- *   the provided Elements instance once the Recurly library is loaded.
- *
- * @param options - An object to provide an alternate contextual error message
- * to use if one tries to use this hook outside of an Elements provider.
- *
- * @returns The Elements instance.
- */
-export declare function useElements(options?: {
-    noProviderError?: string;
-}): ElementsInstance | undefined;

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

@@ -1,46 +0,0 @@
-import { createContext, useContext, useMemo } from 'react';
-import { NO_PROVIDER } from '../NoProvider';
-import { useRecurly } from '../recurly';
-import { jsx as _jsx } from "react/jsx-runtime";
-const ElementCtx = /*#__PURE__*/createContext(NO_PROVIDER);
-
-/**
- * A provider that provides the Elements instance via context.
- *
- * If used outside of a RecurlyProvider, it will throw an error.
- */
-export function Elements({
-  children
-}) {
-  const recurly = useRecurly({
-    noProviderError: 'Elements must be used within a RecurlyProvider.'
-  });
-  const elements = useMemo(() => recurly?.Elements(), [recurly]);
-  return /*#__PURE__*/_jsx(ElementCtx.Provider, {
-    value: elements,
-    children: children
-  });
-}
-
-/**
- * A hook that returns the Elements instance from context.
- *
- * If used outside of an Elements provider, it will throw an error.
- *
- * Within an Elements provider:
- * - If used on the server, it will return undefined.
- * - If used on the client, it will initially return undefined and then return
- *   the provided Elements instance once the Recurly library is loaded.
- *
- * @param options - An object to provide an alternate contextual error message
- * to use if one tries to use this hook outside of an Elements provider.
- *
- * @returns The Elements instance.
- */
-export function useElements(options) {
-  const elements = useContext(ElementCtx);
-  if (elements === NO_PROVIDER) {
-    throw new Error(options?.noProviderError ?? 'useElements must be used within a Elements provider.');
-  }
-  return elements;
-}

package/dist/Recurly/context/elements/index.test.js

@@ -1,88 +0,0 @@
-import { setupRtl } from '@codecademy/gamut-tests';
-import { RecurlyProvider } from '../recurly';
-import { Elements, useElements } from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-let mockRecurlyPromise;
-jest.mock('../recurly/loadRecurly', () => ({
-  loadRecurly: () => mockRecurlyPromise
-}));
-const renderView = setupRtl(({
-  children
-}) => children);
-const jsEventLoop = () => new Promise(r => setTimeout(r, 0));
-describe('Elements', () => {
-  it('should show content before recurly loads', () => {
-    mockRecurlyPromise = new Promise(() => {
-      // never resolve
-    });
-    const {
-      view
-    } = renderView({
-      children: /*#__PURE__*/_jsx(RecurlyProvider, {
-        publicKey: "testKey",
-        required: ['cvv', 'postal_code'],
-        children: /*#__PURE__*/_jsx(Elements, {
-          children: "test-content"
-        })
-      })
-    });
-    expect(view.getByText('test-content')).toBeInTheDocument();
-  });
-  it('should call Elements on recurly', async () => {
-    const mockRecurly = {
-      Elements: jest.fn()
-    };
-    mockRecurlyPromise = Promise.resolve(mockRecurly);
-    renderView({
-      children: /*#__PURE__*/_jsx(RecurlyProvider, {
-        publicKey: "testKey",
-        required: ['cvv', 'postal_code'],
-        children: /*#__PURE__*/_jsx(Elements, {})
-      })
-    });
-    await jsEventLoop(); // one for the Provider's useEffect to run
-    await jsEventLoop(); // one for the subsequent re-render where useMemo runs
-    expect(mockRecurly.Elements).toHaveBeenCalled();
-  });
-});
-describe('useElements', () => {
-  const Consumer = () => {
-    try {
-      const elements = useElements();
-      return /*#__PURE__*/_jsx("div", {
-        children: typeof elements
-      });
-    } catch {
-      return /*#__PURE__*/_jsx("div", {
-        children: "error"
-      });
-    }
-  };
-  it('throws an error when used without a Elements provider', () => {
-    const {
-      view
-    } = renderView({
-      children: /*#__PURE__*/_jsx(Consumer, {})
-    });
-    expect(view.getByText('error')).toBeInTheDocument();
-  });
-  it('returns null initially, then an Elements instance once Recurly loads', async () => {
-    const mockRecurly = {
-      Elements: () => ({})
-    };
-    mockRecurlyPromise = Promise.resolve(mockRecurly);
-    const {
-      view
-    } = renderView({
-      children: /*#__PURE__*/_jsx(RecurlyProvider, {
-        publicKey: "testKey",
-        required: ['cvv', 'postal_code'],
-        children: /*#__PURE__*/_jsx(Elements, {
-          children: /*#__PURE__*/_jsx(Consumer, {})
-        })
-      })
-    });
-    expect(view.getByText('undefined')).toBeInTheDocument();
-    expect(await view.findByText('object')).toBeInTheDocument();
-  });
-});

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

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

package/dist/Recurly/context/index.js

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

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

@@ -1,30 +0,0 @@
-import type { Recurly } from '@recurly/recurly-js';
-import { PropsWithChildren } from 'react';
-import { RecurlyConfig } from './loadRecurly';
-export 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
- */
-export declare function RecurlyProvider({ children, ...config }: RecurlyProviderProps): import("react/jsx-runtime").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.
- */
-export declare function useRecurly(options?: {
-    noProviderError?: string;
-}): Recurly | undefined;

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

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

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

@@ -1,63 +0,0 @@
-import { setupRtl } from '@codecademy/gamut-tests';
-import { RecurlyProvider, useRecurly } from '.';
-import { jsx as _jsx } from "react/jsx-runtime";
-let mockRecurlyPromise;
-jest.mock('./loadRecurly', () => ({
-  loadRecurly: () => mockRecurlyPromise
-}));
-describe('RecurlyProvider', () => {
-  const renderView = setupRtl(RecurlyProvider);
-  it('should show content before recurly loads', () => {
-    mockRecurlyPromise = new Promise(() => {
-      // never resolve
-    });
-    const {
-      view
-    } = renderView({
-      publicKey: 'testKey',
-      required: ['cvv', 'postal_code'],
-      children: 'test-content'
-    });
-    expect(view.getByText('test-content')).toBeInTheDocument();
-  });
-});
-describe('useRecurly', () => {
-  const renderView = setupRtl(({
-    children
-  }) => children);
-  const Consumer = () => {
-    try {
-      const recurly = useRecurly();
-      return /*#__PURE__*/_jsx("div", {
-        children: typeof recurly
-      });
-    } catch {
-      return /*#__PURE__*/_jsx("div", {
-        children: "error"
-      });
-    }
-  };
-  it('throws an error when used without a RecurlyProvider', () => {
-    mockRecurlyPromise = Promise.resolve({});
-    const {
-      view
-    } = renderView({
-      children: /*#__PURE__*/_jsx(Consumer, {})
-    });
-    expect(view.getByText('error')).toBeInTheDocument();
-  });
-  it('returns undefined and then an instance when used inside a RecurlyProvider', async () => {
-    mockRecurlyPromise = Promise.resolve({});
-    const {
-      view
-    } = renderView({
-      children: /*#__PURE__*/_jsx(RecurlyProvider, {
-        publicKey: "testKey",
-        required: ['cvv', 'postal_code'],
-        children: /*#__PURE__*/_jsx(Consumer, {})
-      })
-    });
-    expect(view.getByText('undefined')).toBeInTheDocument();
-    expect(await view.findByText('object')).toBeInTheDocument();
-  });
-});

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

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

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

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

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

@@ -1,57 +0,0 @@
-import { loadRecurly } from './loadRecurly';
-const w = {};
-jest.mock('./w', () => ({
-  w
-}));
-const mockConfig = {
-  publicKey: 'test-public-key',
-  required: ['field1', 'field2']
-};
-describe('loadRecurly', () => {
-  let mockScript;
-  let mockRecurly;
-  beforeEach(() => {
-    mockScript = {
-      src: '',
-      async: false,
-      onload: null
-    };
-    mockRecurly = {
-      configure: jest.fn()
-    };
-    w.recurly = undefined;
-    w._recurlyPromise = undefined;
-    w.document = {
-      createElement: jest.fn().mockReturnValue(mockScript),
-      head: {
-        appendChild: jest.fn()
-      }
-    };
-  });
-  it('should create a script, load recurly, and configure it', async () => {
-    const promise = loadRecurly(mockConfig);
-    expect(w.document.createElement).toHaveBeenCalledWith('script');
-    expect(mockScript.src).toBe('https://js.recurly.com/v4/recurly.js');
-    expect(mockScript.async).toBe(true);
-    expect(w.document.head.appendChild).toHaveBeenCalledWith(mockScript);
-    expect(mockScript.onload).toBeDefined();
-    w.recurly = mockRecurly;
-    mockScript.onload?.(new Event('load'));
-    await promise;
-    expect(mockRecurly.configure).toHaveBeenCalledWith(mockConfig);
-  });
-  it('should only create one script element when called multiple times', async () => {
-    const promises = [loadRecurly(mockConfig), loadRecurly(mockConfig), loadRecurly(mockConfig)];
-    w.recurly = mockRecurly;
-    mockScript.onload?.(new Event('load'));
-
-    // Should always return the same promise instance
-    expect(promises[0]).toBe(promises[1]);
-    expect(promises[1]).toBe(promises[2]);
-    await Promise.all(promises);
-
-    // Should only create one script element
-    expect(w.document.createElement).toHaveBeenCalledTimes(1);
-    expect(w.document.head.appendChild).toHaveBeenCalledTimes(1);
-  });
-});

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

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

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

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

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

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

package/dist/Recurly/fields/RecurlyField.js

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

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

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

package/dist/Recurly/fields/elements.js

@@ -1,106 +0,0 @@
-import { formFieldPaddingStyles } from '@codecademy/gamut/dist/Form/styles';
-import { forwardRef, useMemo, useRef } from 'react';
-import { useElements } from '../context';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const CardNumber = element('CardNumberElement', 'Card number');
-export const ExpMonth = element('CardMonthElement', 'Expiration month', 'MM');
-export const ExpYear = element('CardYearElement', 'Expiration year', 'YY');
-export const CVV = element('CardCvvElement', 'CVV');
-
-/* These match methods on `ElementsInstance`. 'CardElement' is omitted since we
-only need individual elements (number,month,year,cvv). */
-
-// The type that `element.on` expects. See `bindEventHandlers`.
-
-/* Our only reason for allowing folks to pass in a ref is so that they can call
-`.focus()` from the outside. This type satisfies `HTMLElement` (the type one
-might try to use) and `ElementInstance` (what we actually set the ref to). */
-
-/**
- * Defines a Recurly element component for a given type.
- */
-function element(type, title, placeholder) {
-  return /*#__PURE__*/forwardRef((eventHandlers, ref) => {
-    const elements = useElements({
-      noProviderError: 'Recurly element must be used within a Elements provider.'
-    });
-
-    // Keep ref updated with current event handlers. See `bindEventHandlers`.
-    const h = useRef({});
-    h.current = eventHandlers;
-    const callback = useMemo(() => {
-      if (!elements) return null;
-      let el;
-      return div => {
-        /* This is called once (with the div) when `elements` is defined and
-        once (with null) on component unmount. */
-        if (div) {
-          el = elements[type]({
-            style: getStyle(title, placeholder)
-          });
-          el.attach(div);
-          bindEventHandlers(el, h);
-          allowFocus(div, ref, el);
-        } else {
-          cleanup(el);
-        }
-      };
-    }, [elements, ref]);
-    return /*#__PURE__*/_jsx("div", {
-      ref: callback
-    });
-  });
-}
-function cleanup(el) {
-  /* `.destroy()` is not documented or included in the IndividualElement type,
-  but there is an example of @recurly/react-recurly using it here:
-  https://github.com/recurly/react-recurly/blob/main/lib/element/element.jsx#L112 */
-  el?.destroy();
-}
-function allowFocus(div, ref, el) {
-  // Forward focus from iframe to element. (used by RecurlyField label onClick)
-  div.querySelector('iframe')?.addEventListener('focus', () => el.focus());
-
-  // Set ref to our Recurly element instance so that one can call `.focus()`.
-  if (ref instanceof Function) {
-    ref(el); // call RefCallback
-  } else if (ref) {
-    ref.current = el; // set RefObject
-  }
-}
-function getStyle(title, placeholder) {
-  const {
-    px,
-    py
-  } = formFieldPaddingStyles;
-  return {
-    /* We can't use Apercu in the iframe, but Recurly will pull in any Google
-    font. JetBrains Mono seems appropriate for card info. */
-    fontFamily: 'JetBrains Mono',
-    /* Most Gamut styling is applied outside the iframe by RecurlyField. We
-    apply padding in the iframe to ensure the entire element is clickable. */
-    padding: `${px}px ${py}px`,
-    /* For some bewildered reason, Recurly takes `title` and `placeholder` as
-    style properties. Title is necessary for screen readers. */
-    title,
-    /* The spread syntax for `placeholder` is only necessary because Recurly is
-    persnickety about only including it when defined. */
-    ...(placeholder ? {
-      placeholder
-    } : {})
-  };
-}
-
-/* When event handlers are passed as inline function props, they technically are
-new function instances on each render. Rather than re-attaching the handlers on
-each render, we keep a ref updated with the latest handlers and bind static
-handlers that call the dynamic handlers from the ref. @recurly/react-recurly
-essentially uses the same approach here:
-https://github.com/recurly/react-recurly/blob/main/lib/element/element.jsx#L102 */
-function bindEventHandlers(el, h) {
-  el.on('attach', (...args) => h.current?.onReady?.(...args));
-  el.on('change', (...args) => h.current?.onChange?.(...args));
-  el.on('blur', (...args) => h.current?.onBlur?.(...args));
-  el.on('focus', (...args) => h.current?.onFocus?.(...args));
-  el.on('submit', (...args) => h.current?.onSubmit?.(...args));
-}