diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index d96a13c..fa40d72 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -1,4 +1,5 @@
on:
+ workflow_call:
repository_dispatch:
types:
- docs_publish
@@ -14,7 +15,7 @@ jobs:
- uses: actions/checkout@v2
- name: Use Node.js
- uses: actions/setup-node@v1.1.0
+ uses: actions/setup-node@v3
- name: Build documentation
run: make docs-build
diff --git a/README.md b/README.md
deleted file mode 100644
index 47e6b6a..0000000
--- a/README.md
+++ /dev/null
@@ -1,203 +0,0 @@
-
-
-# react-recurly · [![build status][travis-image]][travis-url] [![coverage][coverage-image]][coverage-url] [](CODE_OF_CONDUCT.md)
-
-
-React components for [Recurly.js][docs-recurly-js]
-
-## Documentation
-
-[Documentation & Reference][docs]
-
-[Recurly.js Documentation][docs-recurly-js]
-
-## Examples
-
-[Interactive Demo][demo]
-
-A great way to get started is to try the [interactive demo][demo] in our documentation, and look through the [demo source][demo-src] on GitHub.
-
-## Installation
-
-Install this package with npm
-
-```bash
-npm install @recurly/react-recurly
-```
-
-Then, include recurly.js in your application via our CDN.
-
-```html
-
-
-
-```
-
-## Implementation Guide
-
-In this guide, we will cover the steps necessary to **create a payment form** that will submit your user's payment information to Recurly.
-
-> ℹ️ If you haven't yet, please review the [Recurly.js documentation][docs-recurly-js]. This will give you a solid understanding of the total capabilities of the library before we begin implementing some of its features in React.
-
-To start, we will use the [<RecurlyProvider />][docs-component-recurly-provider] component to set our [public key][app-api-access].
-
-```jsx
-// app.js
-import React from 'react';
-import { RecurlyProvider } from '@recurly/react-recurly';
-
-function App () {
- return (
-
- );
-}
-```
-
-Now we can set up our payment form. For this, we will use [Recurly.js Elements][docs-recurly-js-elements]. First, we will use the [<Elements />][docs-component-elements] component to group our Elements together. We'll also create a `` component to contain our payment form.
-
-```jsx
-// app.js
-import React from 'react';
-import { RecurlyProvider, Elements } from '@recurly/react-recurly';
-import { MyPaymentForm } from './my-payment-form';
-
-function App () {
- return (
-
-
-
-
-
- );
-}
-```
-
-Within our new `` component, we'll add a [<CardElement />][docs-component-card-element] which will render a secure card element. We'll also add inputs for our users' name. To let react-recurly know that we want to use these fields, we'll use a `data-recurly` attribute. To include additional properties, see [this billing fields table][docs-recurly-js-billing-fields].
-
-```jsx
-// my-payment-form.js
-import React from 'react';
-import { CardElement } from '@recurly/react-recurly';
-
-export function MyPaymentForm (props) {
- return (
-
- );
-}
-```
-
-We are now ready to add the final step: **getting a token**. When our users submit our form, we want to send their payment information to Recurly, which will return a token. We'll then keep this token to use in the Recurly API.
-
-To accomplish this, we will use the [useRecurly][docs-hook-use-recurly] hook. This hook returns a Recurly.js instance, on which we will call [recurly.token][docs-recurly-js-token]. Since this function expects a `
- );
-}
-```
-
-With that, we have implemented the essential components of a payment form using react-recurly. The tokens generated above may be used on any `billing_info` object in the [Recurly API][docs-recurly-api].
-
-### Additional Usage
-
-React-recurly also includes a [useCheckoutPricing][docs-hook-use-checkout-pricing] hook for generating a pricing preview before checking out.
-
-```js
-import { useCheckoutPricing, RecurlyProvider } from '@recurly/react-recurly';
-
-function PricingPreview () {
- const initialPricingInput = {
- subscriptions: [
- {
- plan: 'my-plan'
- }
- ]
- };
-
- const [{ price, loading }, setCheckoutPricing] = useCheckoutPricing(initialPricingInput);
-
- if (!loading) {
- return
{price.now.subtotal}
- };
-};
-
-export default function MyApp () {
-
-
-
-};
-```
-
-For more details, see the [useCheckoutPricing Documentation][docs-hook-use-checkout-pricing].
-
-## Additional resources
-
-* [Documentation & Reference][docs]
-* [Recurly.js Documentation][docs-recurly-js]
-* [Interactive Demo][demo]
-* [Code on GitHub][github]
-* [Package on npm][npm]
-* [Recurly API Documentation][docs-recurly-api]
-* Questions? [GitHub issues][github-issues] and [Recurly support][support] are here for you.
-
-## Licence
-
-MIT
-
-[github]: https://github.com/recurly/react-recurly
-[github-issues]: https://github.com/recurly/react-recurly/issues
-[npm]: https://www.npmjs.com/package/@recurly/react-recurly
-[travis-url]: https://travis-ci.org/recurly/react-recurly/builds
-[travis-image]: https://img.shields.io/travis/recurly/react-recurly/main.svg?style=flat-square
-[coverage-url]: https://coveralls.io/github/recurly/react-recurly
-[coverage-image]: https://img.shields.io/coveralls/github/recurly/react-recurly.svg?style=flat-square
-
-[docs]: https://recurly.github.io/react-recurly
-[docs-component-recurly-provider]: https://recurly.github.io/react-recurly/?path=/docs/components-recurlyprovider--page
-[docs-component-elements]: https://recurly.github.io/react-recurly/?path=/docs/components-elements--page
-[docs-component-card-element]: https://recurly.github.io/react-recurly/?path=/docs/components-cardelement--default
-[docs-hook-use-recurly]: https://recurly.github.io/react-recurly/?path=/docs/hooks-userecurly--page
-[docs-hook-use-checkout-pricing]: https://recurly.github.io/react-recurly/?path=/docs/hooks-usecheckoutpricing--page
-
-[docs-recurly-js]: https://developers.recurly.com/reference/recurly-js/
-[docs-recurly-js-elements]: https://developers.recurly.com/reference/recurly-js/#elements
-[docs-recurly-js-billing-fields]: https://developers.recurly.com/reference/recurly-js/#billing-fields
-[docs-recurly-js-token]: https://developers.recurly.com/reference/recurly-js/#getting-a-token
-[docs-recurly-api]: https://developers.recurly.com/api
-
-[demo]: https://recurly.github.io/react-recurly/?path=/docs/introduction-interactive-demo--page
-[demo-src]: https://github.com/recurly/react-recurly/tree/main/demo
-[card-element-demo.js]: https://github.com/recurly/react-recurly/demo/src/card-element-demo.js
-
-[app-api-access]: https://app.recurly.com/go/developer/api_access
-[support]: https://recurly.zendesk.com
-
-[react-refs]: https://reactjs.org/docs/refs-and-the-dom.html
diff --git a/README.md b/README.md
new file mode 120000
index 0000000..7a1ed50
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+README.mdx
\ No newline at end of file
diff --git a/README.mdx b/README.mdx
deleted file mode 120000
index 42061c0..0000000
--- a/README.mdx
+++ /dev/null
@@ -1 +0,0 @@
-README.md
\ No newline at end of file
diff --git a/README.mdx b/README.mdx
new file mode 100644
index 0000000..47e6b6a
--- /dev/null
+++ b/README.mdx
@@ -0,0 +1,203 @@
+
+
+# react-recurly · [![build status][travis-image]][travis-url] [![coverage][coverage-image]][coverage-url] [](CODE_OF_CONDUCT.md)
+
+
+React components for [Recurly.js][docs-recurly-js]
+
+## Documentation
+
+[Documentation & Reference][docs]
+
+[Recurly.js Documentation][docs-recurly-js]
+
+## Examples
+
+[Interactive Demo][demo]
+
+A great way to get started is to try the [interactive demo][demo] in our documentation, and look through the [demo source][demo-src] on GitHub.
+
+## Installation
+
+Install this package with npm
+
+```bash
+npm install @recurly/react-recurly
+```
+
+Then, include recurly.js in your application via our CDN.
+
+```html
+
+
+
+```
+
+## Implementation Guide
+
+In this guide, we will cover the steps necessary to **create a payment form** that will submit your user's payment information to Recurly.
+
+> ℹ️ If you haven't yet, please review the [Recurly.js documentation][docs-recurly-js]. This will give you a solid understanding of the total capabilities of the library before we begin implementing some of its features in React.
+
+To start, we will use the [<RecurlyProvider />][docs-component-recurly-provider] component to set our [public key][app-api-access].
+
+```jsx
+// app.js
+import React from 'react';
+import { RecurlyProvider } from '@recurly/react-recurly';
+
+function App () {
+ return (
+
+ );
+}
+```
+
+Now we can set up our payment form. For this, we will use [Recurly.js Elements][docs-recurly-js-elements]. First, we will use the [<Elements />][docs-component-elements] component to group our Elements together. We'll also create a `` component to contain our payment form.
+
+```jsx
+// app.js
+import React from 'react';
+import { RecurlyProvider, Elements } from '@recurly/react-recurly';
+import { MyPaymentForm } from './my-payment-form';
+
+function App () {
+ return (
+
+
+
+
+
+ );
+}
+```
+
+Within our new `` component, we'll add a [<CardElement />][docs-component-card-element] which will render a secure card element. We'll also add inputs for our users' name. To let react-recurly know that we want to use these fields, we'll use a `data-recurly` attribute. To include additional properties, see [this billing fields table][docs-recurly-js-billing-fields].
+
+```jsx
+// my-payment-form.js
+import React from 'react';
+import { CardElement } from '@recurly/react-recurly';
+
+export function MyPaymentForm (props) {
+ return (
+
+ );
+}
+```
+
+We are now ready to add the final step: **getting a token**. When our users submit our form, we want to send their payment information to Recurly, which will return a token. We'll then keep this token to use in the Recurly API.
+
+To accomplish this, we will use the [useRecurly][docs-hook-use-recurly] hook. This hook returns a Recurly.js instance, on which we will call [recurly.token][docs-recurly-js-token]. Since this function expects a `
+ );
+}
+```
+
+With that, we have implemented the essential components of a payment form using react-recurly. The tokens generated above may be used on any `billing_info` object in the [Recurly API][docs-recurly-api].
+
+### Additional Usage
+
+React-recurly also includes a [useCheckoutPricing][docs-hook-use-checkout-pricing] hook for generating a pricing preview before checking out.
+
+```js
+import { useCheckoutPricing, RecurlyProvider } from '@recurly/react-recurly';
+
+function PricingPreview () {
+ const initialPricingInput = {
+ subscriptions: [
+ {
+ plan: 'my-plan'
+ }
+ ]
+ };
+
+ const [{ price, loading }, setCheckoutPricing] = useCheckoutPricing(initialPricingInput);
+
+ if (!loading) {
+ return
-
-# react-recurly · [![build status][travis-image]][travis-url] [![coverage][coverage-image]][coverage-url] [](CODE_OF_CONDUCT.md)
-
-
-React components for [Recurly.js][docs-recurly-js]
-
-## Documentation
-
-[Documentation & Reference][docs]
-
-[Recurly.js Documentation][docs-recurly-js]
-
-## Examples
-
-[Interactive Demo][demo]
-
-A great way to get started is to try the [interactive demo][demo] in our documentation, and look through the [demo source][demo-src] on GitHub.
-
-## Installation
-
-Install this package with npm
-
-```bash
-npm install @recurly/react-recurly
-```
-
-Then, include recurly.js in your application via our CDN.
-
-```html
-
-
-
-```
-
-## Implementation Guide
-
-In this guide, we will cover the steps necessary to **create a payment form** that will submit your user's payment information to Recurly.
-
-> ℹ️ If you haven't yet, please review the [Recurly.js documentation][docs-recurly-js]. This will give you a solid understanding of the total capabilities of the library before we begin implementing some of its features in React.
-
-To start, we will use the [<RecurlyProvider />][docs-component-recurly-provider] component to set our [public key][app-api-access].
-
-```jsx
-// app.js
-import React from 'react';
-import { RecurlyProvider } from '@recurly/react-recurly';
-
-function App () {
- return (
-