@clerk/upgrade 0.0.3 → 0.1.0

package/dist/versions/v5/common/new-localization-keys.md

@@ -0,0 +1,133 @@
+---
+title: 'New localization keys added'
+matcher: "<ClerkProvider[\\s\\S]*?localization=[\\s\\S]*?>"
+matcherFlags: 'm'
+warning: true
+---
+
+As part of the redesign of Clerk's components, a number of new localization keys have been added and can be seen along with their default english values in the code block below. If you do not supply translated values for these keys in your custom localization, they will fall back to the default english values specified below.
+
+```js
+const newValues = {
+	formFieldLabel__organizationName: 'Name',
+	formFieldLabel__organizationSlug: 'Slug',
+	formFieldInputPlaceholder__emailAddresses: 'example@email.com, example2@email.com',
+	formFieldInputPlaceholder__organizationSlug: 'my-org',
+	signUp: {
+		start: {
+			subtitle: 'Welcome! Please fill in the details to get started.',
+			actionText: 'Already have an account?',
+		},
+		emailCode: {
+			subtitle: 'Enter the verification code sent to your email',
+		},
+		phoneCode: {
+			subtitle: 'Enter the verification code sent to your phone',
+		},
+		continue: {
+			subtitle: 'Please fill in the remaining details to continue.',
+			actionText: 'Already have an account?',
+		},
+	},
+	signIn: {
+		start: {
+			title: 'Sign in to {{applicationName}}',
+			subtitle: 'Welcome back! Please sign in to continue',
+			actionText: 'Don’t have an account?',
+		},
+		password: {
+			subtitle: 'Enter the password associated with your account',
+		},
+		forgotPasswordAlternativeMethods: {
+			label__alternativeMethods: 'Or, sign in with another method',
+		},
+		resetPassword: {
+			title: 'Set new password',
+		},
+		phoneCodeMfa: {
+			subtitle: 'To continue, please enter the verification code sent to your phone',
+		},
+		totpMfa: {
+			subtitle: 'To continue, please enter the verification code generated by your authenticator app',
+		},
+		backupCodeMfa: {
+			subtitle: 'Your backup code is the one you got when setting up two-step authentication.',
+		},
+	},
+	userProfile: {
+		formButtonPrimary__continue: 'Save',
+		start: {
+			headerTitle__account: 'Profile details',
+			profileSection: {
+				primaryButton: 'Edit profile',
+			},
+			emailAddressesSection: {
+				detailsAction__unverified: 'Verify',
+				destructiveAction: 'Remove email',
+			},
+			mfaSection: {
+				phoneCode: {
+					destructiveActionLabel: 'Remove',
+				},
+				backupCodes: {
+					actionLabel__regenerate: 'Regenerate',
+				},
+			},
+			dangerSection: {
+				title: 'Account termination',
+				deleteAccountButton: 'Delete account',
+			},
+		},
+		profilePage: {
+			imageFormSubtitle: 'Upload',
+			imageFormDestructiveActionSubtitle: 'Remove',
+		},
+		phoneNumberPage: {
+			title: 'Add a phone number',
+			infoText:
+				'A text message containing a verification link will be sent to this phone number. Message and data rates may apply.',
+		},
+		connectedAccountPage: {
+			socialButtonsBlockButton: '{{provider|titleize}}',
+		},
+		mfaPhoneCodePage: {
+			subtitle__availablePhoneNumbers:
+				'Select an existing phone number to register for SMS code two-step verification or add a new one.',
+			subtitle__unavailablePhoneNumbers:
+				'There are no available phone numbers to register for SMS code two-step verification, please add a new one.',
+		},
+		deletePage: {
+			actionDescription: 'Type "Delete account" below to continue.',
+		},
+	},
+	organizationSwitcher: {
+		action__createOrganization: 'Create organization',
+		action__manageOrganization: 'Manage',
+	},
+	organizationProfile: {
+		profilePage: {
+			title: 'Update Profile',
+			dangerSection: {
+				title: 'Danger',
+				leaveOrganization: {
+					actionDescription: 'Type "{{organizationName}}" below to continue.',
+				},
+				deleteOrganization: {
+					actionDescription: 'Type "{{organizationName}}" below to continue.',
+				},
+			},
+		},
+		invitePage: {
+			title: 'Invite new members',
+			subtitle: 'Enter or paste one or more email addresses, separated by spaces or commas.',
+		},
+	},
+	createOrganization: {
+		title: 'Create organization',
+	},
+	organizationList: {
+		title: 'Choose an account',
+		titleWithoutPersonal: 'Choose an organization',
+	},
+};
+```

package/dist/versions/v5/common/organization-getdomains-arguments-change.md

@@ -0,0 +1,20 @@
+---
+title: '`Organization.getDomains` arguments changed'
+matcher: "\\.getDomains\\("
+---
+
+There have been a couple changes to the pagination arguments that can be passed into this function - `limit` has been renamed to `pageSize`, and `offset` has been renamed to `initialPage`. This will help to make it more clear and simple to reason about pagination control. Example of how changes might look below:
+
+```diff
+  import Clerk from "@clerk/clerk-js"
+
+  const clerk = new Clerk()
+  await clerk.load()
+
+  const { data: orgs } = await clerk.organization.getDomains({
+-   limit: 10,
++   pageSize: 10,
+-   offset: 10,
++   initialPage: 2,
+  })
+```

package/dist/versions/v5/common/organization-getmembershiprequests-arguments-changed.md

@@ -0,0 +1,20 @@
+---
+title: '`Organization.getMembershipRequests` arguments changed'
+matcher: "\\.getMembershipRequests\\("
+---
+
+There have been a couple changes to the pagination arguments that can be passed into this function - `limit` has been renamed to `pageSize`, and `offset` has been renamed to `initialPage`. This will help to make it more clear and simple to reason about pagination control. Example of how changes might look below:
+
+```diff
+  import Clerk from "@clerk/clerk-js"
+
+  const clerk = new Clerk()
+  await clerk.load()
+
+  const { data: orgs } = await clerk.organization.getMembershipRequests({
+-   limit: 10,
++   pageSize: 10,
+-   offset: 10,
++   initialPage: 2,
+  })
+```

package/dist/versions/v5/common/organization-getroles-arguments-changed.md

@@ -0,0 +1,20 @@
+---
+title: '`Organization.getRoles` arguments changed'
+matcher: "\\.getRoles\\("
+---
+
+There have been a couple changes to the pagination arguments that can be passed into this function - `limit` has been renamed to `pageSize`, and `offset` has been renamed to `initialPage`. This will help to make it more clear and simple to reason about pagination control. Example of how changes might look below:
+
+```diff
+  import Clerk from "@clerk/clerk-js"
+
+  const clerk = new Clerk()
+  await clerk.load()
+
+  const { data: orgs } = await clerk.organization.getRoles({
+-   limit: 10,
++   pageSize: 10,
+-   offset: 10,
++   initialPage: 2,
+  })
+```

package/dist/versions/v5/common/organizationprofile-settings.md

@@ -0,0 +1,12 @@
+---
+title: '`Settings` -> `General` tab in `OrganizationProfile`'
+matcher: '<OrganizationProfile'
+warning: true
+image: true
+---
+
+The "Settings" tab within the `<OrganizationProfile />` component has been renamed to "General". If you are linking directly to `/organization-settings` from anywhere, the link will need to be updated to `/organization-general`.
+
+If you are [customizing the component](https://clerk.com/docs/components/customization/organization-profile) by re-ordering the pages, the label used to target this page must be changed from `settings` to `general` as well.
+
+If you are using the [appearance prop](https://clerk.com/docs/components/customization/overview) to customize the appearance of the `<OrganizationProfile />` component, please note that the `cl-profilePage__organizationSettings` key has also been changed to `cl-profilePage__organizationGeneral` to be consistent with the naming change.

package/dist/versions/v5/common/organizationswitcherpopoveractionbuttontext-removed.md

@@ -0,0 +1,14 @@
+---
+title: '`organizationSwitcherPopoverActionButtonText` customization id removed'
+image: true
+matcherFlags: 'm'
+matcher:
+  - "\\.cl-organizationSwitcherPopoverActionButtonText"
+  - "\\.cl-organizationSwitcherPopoverActionButtonText__manageOrganization"
+  - "\\.cl-organizationSwitcherPopoverActionButtonText__createOrganization"
+  - "elements:\\s+{[\\s\\S]*?organizationSwitcherPopoverActionButtonText:[\\s\\S]*?}"
+  - "elements:\\s+{[\\s\\S]*?organizationSwitcherPopoverActionButtonText__manageOrganization:[\\s\\S]*?}"
+  - "elements:\\s+{[\\s\\S]*?organizationSwitcherPopoverActionButtonText__createOrganization:[\\s\\S]*?}"
+---
+
+The `organizationSwitcherPopoverActionButtonText` customization id has been removed, as the text for this button is now directly rendered inside the button rather than an extra wrapping element. The nested ids `organizationSwitcherPopoverActionButtonText__manageOrganization` and `organizationSwitcherPopoverActionButtonText__createOrganization` have also been removed. Any styling that needs to apply to the text can be applied to its direct parent `cl-organizationSwitcherPopoverActionButton`.

package/dist/versions/v5/common/remove-identitypreview-avatar.md

@@ -0,0 +1,12 @@
+---
+title: 'Identity preview avatar customization ids removed'
+image: true
+matcherFlags: 'm'
+matcher:
+  - "\\.cl-identityPreviewAvatarBox"
+  - "\\.cl-identityPreviewAvatarImage"
+  - "elements:\\s+{[\\s\\S]*?identityPreviewAvatarBox:[\\s\\S]*?}"
+  - "elements:\\s+{[\\s\\S]*?identityPreviewAvatarImage:[\\s\\S]*?}"
+---
+
+When signing in with Clerk's `<SignIn />` component, after entering a username or email the user is brought to a second pane where they can enter a second factor such as a password. On this pane, there is an area called "identity preview" that shows the username/email that they are entering a password/etc for. Previously, this area included the user's avatar, but this is no longer the case in updated designs. As such, the customization ids related to the user's avatar have been removed.

package/dist/versions/v5/common/remove-socialbuttonsblockbuttonarrow.md

@@ -0,0 +1,10 @@
+---
+title: '`socialButtonsBlockButtonArrow` customization id removed'
+image: true
+matcherFlags: 'm'
+matcher:
+  - "\\.cl-socialButtonsBlockButtonArrow"
+  - "elements:\\s+{[\\s\\S]*?socialButtonsBlockButtonArrow:[\\s\\S]*?}"
+---
+
+Social sign-in buttons in the new component designs no longer include arrows, so the `socialButtonsBlockButtonArrow` customization id has been removed. You can use the `socialButtonsIconButton` to apply custom styling to the social buttons if desired.

package/dist/versions/v5/common/removed-localization-keys.md

@@ -0,0 +1,166 @@
+---
+title: 'Removed localization keys'
+matcherFlags: 'm'
+matcher:
+  - "signIn:\\s+{[\\s\\S]*?forgotPassword:\\s+{[\\s\\S]*?title_email:"
+  - "signIn:\\s+{[\\s\\S]*?forgotPassword:\\s+{[\\s\\S]*?title_phone:"
+  - "signIn:\\s+{[\\s\\S]*?forgotPassword:\\s+{[\\s\\S]*?formSubtitle_email:"
+  - "signIn:\\s+{[\\s\\S]*?forgotPassword:\\s+{[\\s\\S]*?formSubtitle_phone:"
+  - "signIn:\\s+{[\\s\\S]*?emailCode:\\s+{[\\s\\S]*?formSubtitle:"
+  - "signIn:\\s+{[\\s\\S]*?phoneCode:\\s+{[\\s\\S]*?formSubtitle:"
+  - "signIn:\\s+{[\\s\\S]*?phoneCodeMfa:\\s+{[\\s\\S]*?formSubtitle:"
+  - "signIn:\\s+{[\\s\\S]*?totpMfa:\\s+{[\\s\\S]*?formSubtitle:"
+  - "signIn:\\s+{[\\s\\S]*?backupCodeMfa:\\s+{[\\s\\S]*?formTitle:"
+  - "signIn:\\s+{[\\s\\S]*?backupCodeMfa:\\s+{[\\s\\S]*?formSubTitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?emailAddressesSection:\\s+{[\\s\\S]*?detailsTitle__primary:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?emailAddressesSection:\\s+{[\\s\\S]*?detailsSubtitle__primary:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?emailAddressesSection:\\s+{[\\s\\S]*?detailsTitle__nonPrimary:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?emailAddressesSection:\\s+{[\\s\\S]*?detailsSubtitle__nonPrimary:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?emailAddressesSection:\\s+{[\\s\\S]*?detailsTitle__unverified:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?emailAddressesSection:\\s+{[\\s\\S]*?detailsSubtitle__unverified:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?emailAddressesSection:\\s+{[\\s\\S]*?destructiveActionTitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?emailAddressesSection:\\s+{[\\s\\S]*?destructiveActionSubtitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?phoneNumbersSection:\\s+{[\\s\\S]*?detailsTitle__primary:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?phoneNumbersSection:\\s+{[\\s\\S]*?detailsSubtitle__primary:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?phoneNumbersSection:\\s+{[\\s\\S]*?detailsTitle__nonPrimary:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?phoneNumbersSection:\\s+{[\\s\\S]*?detailsSubtitle__nonPrimary:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?phoneNumbersSection:\\s+{[\\s\\S]*?detailsTitle__unverified:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?phoneNumbersSection:\\s+{[\\s\\S]*?detailsSubtitle__unverified:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?phoneNumbersSection:\\s+{[\\s\\S]*?destructiveActionTitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?phoneNumbersSection:\\s+{[\\s\\S]*?destructiveActionSubtitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?connectedAccountsSection:\\s+{[\\s\\S]*?title__conectionFailed:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?connectedAccountsSection:\\s+{[\\s\\S]*?title__connectionFailed:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?connectedAccountsSection:\\s+{[\\s\\S]*?title__reauthorize:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?connectedAccountsSection:\\s+{[\\s\\S]*?subtitle__reauthorize:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?connectedAccountsSection:\\s+{[\\s\\S]*?actionLabel__conectionFailed:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?connectedAccountsSection:\\s+{[\\s\\S]*?destructiveActionSubtitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?connectedAccountsSection:\\s+{[\\s\\S]*?destructiveActionAccordionSubtitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?mfaSection:\\s+{[\\s\\S]*?phoneCode:.destructiveActionTitle"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?mfaSection:\\s+{[\\s\\S]*?phoneCode:.destructiveActionSubtitle"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?mfaSection:\\s+{[\\s\\S]*?phoneCode:.title__default"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?mfaSection:\\s+{[\\s\\S]*?phoneCode:.title__setDefault"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?mfaSection:\\s+{[\\s\\S]*?phoneCode:.subtitle__default"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?mfaSection:\\s+{[\\s\\S]*?phoneCode:.subtitle__setDefault"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?mfaSection:\\s+{[\\s\\S]*?totp:.title"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?mfaSection:\\s+{[\\s\\S]*?totp:.subtitle"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?mfaSection:\\s+{[\\s\\S]*?totp:.destructiveActionSubtitle"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?mfaSection:\\s+{[\\s\\S]*?totp:.destructiveActionLabel"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?activeDevicesSection:\\s+{[\\s\\S]*?primaryButton:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?activeDevicesSection:\\s+{[\\s\\S]*?detailsTitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?activeDevicesSection:\\s+{[\\s\\S]*?detailsSubtitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?activeDevicesSection:\\s+{[\\s\\S]*?destructiveActionTitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?activeDevicesSection:\\s+{[\\s\\S]*?destructiveActionSubtitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?web3WalletsSection:\\s+{[\\s\\S]*?destructiveActionTitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?web3WalletsSection:\\s+{[\\s\\S]*?destructiveActionSubtitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?dangerSection:\\s+{[\\s\\S]*?deleteAccountTitle:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?dangerSection:\\s+{[\\s\\S]*?deleteAccountDescription:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?headerSubtitle__account:"
+  - "userProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?headerSubtitle__security:"
+  - "organizationProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?headerTitle__settings:"
+  - "organizationProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?headerSubtitle__members:"
+  - "organizationProfile:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?headerSubtitle__settings:"
+  - "organizationProfile:\\s+{[\\s\\S]*?profilePage:\\s+{[\\s\\S]*?domainSection:\\s+{[\\s\\S]*?unverifiedDomain_menuAction__verify:"
+  - "organizationProfile:\\s+{[\\s\\S]*?profilePage:\\s+{[\\s\\S]*?domainSection:\\s+{[\\s\\S]*?unverifiedDomain_menuAction__remove:"
+  - "organizationProfile:\\s+{[\\s\\S]*?profilePage:\\s+{[\\s\\S]*?subtitle"
+  - "organizationProfile:\\s+{[\\s\\S]*?membersPage:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?headerTitle__active"
+  - "organizationProfile:\\s+{[\\s\\S]*?membersPage:\\s+{[\\s\\S]*?start:\\s+{[\\s\\S]*?headerTitle__invited"
+  - "createOrganization:\\s+{[\\s\\S]*?subtitle"
+  - 'formFieldLabel__emailAddress_phoneNumber:'
+  - 'formFieldLabel__phoneNumber_username:'
+  - 'formFieldLabel__emailAddress_phoneNumber_username:'
+  - 'formFieldInputPlaceholder__emailAddress_phoneNumber:'
+  - 'formFieldInputPlaceholder__phoneNumber_username:'
+  - 'formFieldInputPlaceholder__emailAddress_phoneNumber_username:'
+  - "userProfile:\\s+{[\\s\\S]*?phoneNumberPage:\\s+{[\\s\\S]*?infoText__secondary:"
+  - "userProfile:\\s+{[\\s\\S]*?mfaPhoneCodePage:\\s+{[\\s\\S]*?successMessage:"
+  - "userProfile:\\s+{[\\s\\S]*?profilePage:\\s+{[\\s\\S]*?fileDropAreaTitle:"
+  - "userProfile:\\s+{[\\s\\S]*?profilePage:\\s+{[\\s\\S]*?fileDropAreaAction:"
+---
+
+As part of the redesign of Clerk's components, a number of localization keys have been removed as they were no longer present in the new designs. You should remove any of these keys that are present in your localization object as they are no longer needed.
+
+```js
+const deletedKeys = [
+	'signIn.forgotPassword.title_email',
+	'signIn.forgotPassword.title_phone',
+	'signIn.forgotPassword.formSubtitle_email',
+	'signIn.forgotPassword.formSubtitle_phone',
+	'signIn.emailCode.formSubtitle',
+	'signIn.phoneCode.formSubtitle',
+	'signIn.phoneCodeMfa.formSubtitle',
+	'signIn.totpMfa.formSubtitle',
+	'signIn.backupCodeMfa.formTitle',
+	'signIn.backupCodeMfa.formSubtitle',
+	'userProfile.start.emailAddressesSection.detailsTitle__primary',
+	'userProfile.start.emailAddressesSection.detailsSubtitle__primary',
+	'userProfile.start.emailAddressesSection.detailsTitle__nonPrimary',
+	'userProfile.start.emailAddressesSection.detailsSubtitle__nonPrimary',
+	'userProfile.start.emailAddressesSection.detailsTitle__unverified',
+	'userProfile.start.emailAddressesSection.detailsSubtitle__unverified',
+	'userProfile.start.emailAddressesSection.destructiveActionTitle',
+	'userProfile.start.emailAddressesSection.destructiveActionSubtitle',
+	'userProfile.start.phoneNumbersSection.detailsTitle__primary',
+	'userProfile.start.phoneNumbersSection.detailsSubtitle__primary',
+	'userProfile.start.phoneNumbersSection.detailsTitle__nonPrimary',
+	'userProfile.start.phoneNumbersSection.detailsSubtitle__nonPrimary',
+	'userProfile.start.phoneNumbersSection.detailsTitle__unverified',
+	'userProfile.start.phoneNumbersSection.detailsSubtitle__unverified',
+	'userProfile.start.phoneNumbersSection.destructiveActionTitle',
+	'userProfile.start.phoneNumbersSection.destructiveActionSubtitle',
+	'userProfile.start.connectedAccountsSection.title__conectionFailed',
+	'userProfile.start.connectedAccountsSection.title__connectionFailed',
+	'userProfile.start.connectedAccountsSection.title__reauthorize',
+	'userProfile.start.connectedAccountsSection.subtitle__reauthorize',
+	'userProfile.start.connectedAccountsSection.actionLabel__conectionFailed',
+	'userProfile.start.connectedAccountsSection.destructiveActionSubtitle',
+	'userProfile.start.connectedAccountsSection.destructiveActionAccordionSubtitle',
+	'userProfile.start.mfaSection.phoneCode.destructiveActionTitle',
+	'userProfile.start.mfaSection.phoneCode.destructiveActionSubtitle',
+	'userProfile.start.mfaSection.phoneCode.title__default',
+	'userProfile.start.mfaSection.phoneCode.title__setDefault',
+	'userProfile.start.mfaSection.phoneCode.subtitle__default',
+	'userProfile.start.mfaSection.phoneCode.subtitle__setDefault',
+	'userProfile.start.mfaSection.totp.title',
+	'userProfile.start.mfaSection.totp.subtitle',
+	'userProfile.start.mfaSection.totp.destructiveActionSubtitle',
+	'userProfile.start.mfaSection.totp.destructiveActionLabel',
+	'userProfile.start.activeDevicesSection.primaryButton',
+	'userProfile.start.activeDevicesSection.detailsTitle',
+	'userProfile.start.activeDevicesSection.detailsSubtitle',
+	'userProfile.start.activeDevicesSection.destructiveActionTitle',
+	'userProfile.start.activeDevicesSection.destructiveActionSubtitle',
+	'userProfile.start.web3WalletsSection.destructiveActionTitle',
+	'userProfile.start.web3WalletsSection.destructiveActionSubtitle',
+	'userProfile.start.dangerSection.deleteAccountTitle',
+	'userProfile.start.dangerSection.deleteAccountDescription',
+	'userProfile.start.headerSubtitle__account',
+	'userProfile.start.headerSubtitle__security',
+	'organizationProfile.start.headerTitle__settings',
+	'organizationProfile.start.headerSubtitle__members',
+	'organizationProfile.start.headerSubtitle__settings',
+	'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify',
+	'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove',
+	'organizationProfile.profilePage.subtitle',
+	'organizationProfile.membersPage.start.headerTitle__active',
+	'organizationProfile.membersPage.start.headerTitle__invited',
+	'createOrganization.subtitle',
+	'formFieldLabel__emailAddress_phoneNumber',
+	'formFieldLabel__phoneNumber_username',
+	'formFieldLabel__emailAddress_phoneNumber_username',
+	'formFieldInputPlaceholder__emailAddress_phoneNumber',
+	'formFieldInputPlaceholder__phoneNumber_username',
+	'formFieldInputPlaceholder__emailAddress_phoneNumber_username',
+	'userProfile.phoneNumberPage.infoText__secondary',
+	'userProfile.mfaPhoneCodePage.successMessage',
+	'userProfile.profilePage.fileDropAreaTitle',
+	'userProfile.profilePage.fileDropAreaAction',
+];
+```
+
+If you'd like to automate this, you can use the [lodash omit function](https://lodash.com/docs/#omit) as such:
+
+```js
+import { omit } from 'lodash-es';
+
+const localization = omit(yourOldOject, deletedKeys);
+```

package/dist/versions/v5/common/signoutcallback-to-redirecturl.md

@@ -0,0 +1,22 @@
+---
+title: 'Replace `signOutCallback` prop on `SignOutButton` with `redirectUrl`'
+matcher: "<SignOutButton[\\s\\S]*?signOutCallback=[\\s\\S]*?>"
+matcherFlags: 'm'
+---
+
+The `signOutCallback` prop on the [`<SignOutButton />` component](https://clerk.com/docs/components/unstyled/sign-out-button) has been removed. Instead, you can use the `redirectUrl` prop. Example below:
+
+```diff
+  import { SignOutButton } from "@clerk/clerk-react";
+
+  export const Signout = () => {
+    return (
+      <SignOutButton
+-       signOutCallback={() => { window.location.href = "/your-path" }}
++       redirectUrl="/your-path"
+      >
+        <button>Sign Out</button>
+      </SignOutButton>
+    )
+  }
+```

package/dist/versions/v5/common/useorganization-invitationlist.md

@@ -1,6 +1,6 @@
 ---
 title: '`invitationList` -> `invitations` as param to `useOrganizations`'
-matcher: "useOrganizations\\(\\s*{\\.*?invitationList:"
+matcher: "useOrganizations\\(\\s*{[\\s\\S]*?invitationList:"
 matcherFlags: 'm'
 ---
 

package/dist/versions/v5/common/useorganization-membershiplist.md

@@ -1,6 +1,7 @@
 ---
 title: '`membershipList` -> `members` as param to `useOrganization`'
-matcher: "useOrganizations\\(\\s*{\\.*?membershipList:"
+matcher: "useOrganizations\\(\\s*{[\\s\\S]*?membershipList:"
+matcherFlags: 'm'
 ---
 
 The `membershipList` param from the `useOrganization` hook has been removed. Instead, [use the `memberships` param](https://clerk.com/docs/references/react/use-organization#parameters). Examples of each can be seen here:

package/dist/versions/v5/common/userbuttonpopoveractionbuttontext-removed.md

@@ -0,0 +1,14 @@
+---
+title: '`userButtonPopoverActionButtonText` customization id removed'
+image: true
+matcher:
+  - "\\.cl-userButtonPopoverActionButtonText"
+  - "\\.cl-userButtonPopoverActionButtonText__signOut"
+  - "\\.cl-userButtonPopoverActionButtonText__manageAccount"
+  - "elements:\\s+{[\\s\\S]*?userButtonPopoverActionButtonText:[\\s\\S]*?}"
+  - "elements:\\s+{[\\s\\S]*?userButtonPopoverActionButtonText__signOut:[\\s\\S]*?}"
+  - "elements:\\s+{[\\s\\S]*?userButtonPopoverActionButtonText__manageAccount:[\\s\\S]*?}"
+matcherFlags: 'm'
+---
+
+The `userButtonPopoverActionButtonText` customization id has been removed, as the text for this button is now directly rendered inside the button rather than an extra wrapping element. The nested ids `userButtonPopoverActionButtonText__signOut` and `userButtonPopoverActionButtonText__manageAccount` have also been removed. Any styling that needs to apply to the text can be applied to its direct parent `cl-userButtonPopoverActionButton`.

package/dist/versions/v5/common/userbuttonpopoveractionbuttontext.md

@@ -0,0 +1,7 @@
+---
+title: '`userButtonPopoverActionButtonText` descriptor removed'
+matcher:
+  ["\\.cl-userButtonPopoverActionButtonText", "elements:\\s+{[\\s\\S]*?userButtonPopoverActionButtonText:[\\s\\S]*?}"]
+---
+
+The `userButtonPopoverActionButtonText` customization descriptor has been removed, as the text for this button is now directly rendered inside the button rather than an extra wrapping element. Any styling that needs to apply to the text can be applied to its direct parent `cl-userButtonPopoverActionButton`.

package/dist/versions/v5/common/userbuttontrigger-userbuttonbox-invert.md

@@ -0,0 +1,12 @@
+---
+title: '`userButtonBox` is now a child of `userButtonTrigger`'
+warning: true
+matcher:
+  - "\\.cl-userButtonTrigger"
+  - "\\.cl-userButtonBox"
+  - "elements:\\s+{[\\s\\S]*?userButtonTrigger:[\\s\\S]*?}"
+  - "elements:\\s+{[\\s\\S]*?userButtonBox:[\\s\\S]*?}"
+matcherFlags: 'm'
+---
+
+We have swapped the parent-child relationship of the two elements `userButtonTrigger` and `userButtonBox`. Previously, `userButtonTrigger` was nested inside of `userButtonBox`, and now `userButtonBox` is nested inside of `userButtonTrigger`. This change resolves [some usability issues](https://github.com/clerk/javascript/issues/1625) in `<UserButton />. If you are applying style customization to either of these elements, your customizations may need to be adjusted.

package/dist/versions/v5/common/userprofile-prop.md

@@ -1,6 +1,7 @@
 ---
 title: '`userProfile` -> `userProfileProps` for `UserButton`'
-matcher: '<UserButton.*?(userProfile)=.*?>'
+matcher: "<UserButton[\\s\\S]*?(userProfile)=[\\s\\S]*?>"
+matcherFlags: 'm'
 replaceWithString: 'userProfileProps'
 ---
 

package/dist/versions/v5/common/userprofile-security.md

@@ -0,0 +1,8 @@
+---
+title: 'Within `<UserProfile />`, Account and Security Pages Separated'
+matcher: '(?:<UserProfile|<UserButton)'
+warning: true
+image: true
+---
+
+Within the `<UserProfile />` component (which is also rendered by `<UserButton />`), the "Account" and "Security" pages now live within their own tabs. Previously, "Security" was a section within the "Account" tab. The "Security" page can now be directly linked to under the `/security` path if desired.

package/dist/versions/v5/common/withclerk-hof-removed.md

@@ -0,0 +1,29 @@
+---
+title: '`withClerk` function removed'
+matcher: "import\\s+{[\\s\\S]*?withClerk[\\s\\S]*?from\\s+['\"]@clerk\\/(?:nextjs|clerk-react)[\\s\\S]*?['\"]"
+matcherFlags: 'm'
+---
+
+The `withClerk` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](https://clerk.com/docs/references/react/overview). An example of how to do so is below:
+
+```js
+function withClerk(Component, displayName) {
+	displayName = displayName || Component.displayName || Component.name || 'Component';
+	Component.displayName = displayName;
+	const HOC = props => {
+		const clerk = useIsomorphicClerkContext();
+
+		if (!clerk.loaded) return null;
+
+		return (
+			<Component
+				{...props}
+				clerk={clerk}
+			/>
+		);
+	};
+
+	HOC.displayName = `withClerk(${displayName})`;
+	return HOC;
+}
+```

package/dist/versions/v5/common/withclerk-removed.md

@@ -0,0 +1,16 @@
+---
+title: '`WithClerk` component removed'
+matcher: "import\\s+{[\\s\\S]*?WithClerk[\\s\\S]*?from\\s+['\"]@clerk\\/(?:nextjs|clerk-react)[\\s\\S]*?['\"]"
+matcherFlags: 'm'
+---
+
+The `WithClerk` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](https://clerk.com/docs/references/react/overview). An example of how to do so is below:
+
+```js
+export const WithClerk = ({ children }) => {
+  const clerk = useClerk();
+  if (typeof children !== 'function') throw new Error();
+
+  return {children(clerk)};
+};
+```

package/dist/versions/v5/common/withsession-hof-removed.md

@@ -0,0 +1,29 @@
+---
+title: '`withSession` function removed'
+matcher: "import\\s+{[\\s\\S]*?withSession[\\s\\S]*?from\\s+['\"]@clerk\\/(?:nextjs|clerk-react)[\\s\\S]*?['\"]"
+matcherFlags: 'm'
+---
+
+The `withSession` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](https://clerk.com/docs/references/react/overview). An example of how to do so is below:
+
+```js
+function withSession(Component, displayName) {
+	displayName = displayName || Component.displayName || Component.name || 'Component';
+	Component.displayName = displayName;
+	const HOC = props => {
+		const session = useSessionContext();
+
+		if (!session) return null;
+
+		return (
+			<Component
+				{...props}
+				session={session}
+			/>
+		);
+	};
+
+	HOC.displayName = `withSession(${displayName})`;
+	return HOC;
+}
+```

package/dist/versions/v5/common/withsession-removed.md

@@ -0,0 +1,16 @@
+---
+title: '`WithSession` component removed'
+matcher: "import\\s+{[\\s\\S]*?WithSession[\\s\\S]*?from\\s+['\"]@clerk\\/(?:nextjs|clerk-react)[\\s\\S]*?['\"]"
+matcherFlags: 'm'
+---
+
+The `WithSession` higher order component has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](https://clerk.com/docs/references/react/overview). An example of how to do so is below:
+
+```js
+export const WithSession = ({ children }) => {
+  const session = useSession();
+  if (typeof children !== 'function') throw new Error();
+
+  return {children(session)};
+};
+```

package/dist/versions/v5/common/withuser-hof-removed.md

@@ -0,0 +1,29 @@
+---
+title: '`withUser` function removed'
+matcher: "import\\s+{[\\s\\S]*?withUser[\\s\\S]*?from\\s+['\"]@clerk\\/(?:nextjs|clerk-react)[\\s\\S]*?['\"]"
+matcherFlags: 'm'
+---
+
+The `withUser` higher order function has been removed. If you would still like to use this function in the way its implemented, it can be created quickly using Clerk's [custom hooks](https://clerk.com/docs/references/react/overview). An example of how to do so is below:
+
+```js
+function withUser(Component, displayName) {
+	displayName = displayName || Component.displayName || Component.name || 'Component';
+	Component.displayName = displayName;
+	const HOC = props => {
+		const clerk = useUserContext();
+
+		if (!user) return null;
+
+		return (
+			<Component
+				{...props}
+				user={user}
+			/>
+		);
+	};
+
+	HOC.displayName = `withUser(${displayName})`;
+	return HOC;
+}
+```