From 5ce8827a8cfc2425db20676a25ecbe5332f85685 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 30 Jan 2024 22:49:31 -0500
Subject: [PATCH] chore: Convert <Text /> component to span by default

---
 app/components/CollectionDeleteDialog.tsx     |  4 ++--
 app/components/CommandBarItem.tsx             |  2 +-
 app/components/CommentDeleteDialog.tsx        |  2 +-
 app/components/DocumentExplorer.tsx           |  4 +++-
 app/components/DuplicateDialog.tsx            | 21 +++++++++----------
 app/components/ErrorBoundary.tsx              |  4 ++--
 app/components/ExportDialog.tsx               |  6 +++---
 app/components/Input.tsx                      |  8 ++-----
 app/components/InputSelect.tsx                |  3 ++-
 app/components/Modal.tsx                      |  8 ++-----
 .../Notifications/NotificationListItem.tsx    |  8 +++----
 app/components/Sharing/SharePopover.tsx       |  2 +-
 .../Sidebar/components/SidebarButton.tsx      |  2 +-
 app/components/Text.ts                        |  2 +-
 app/scenes/APITokenNew.tsx                    |  2 +-
 app/scenes/Collection/Empty.tsx               |  2 +-
 app/scenes/CollectionEdit.tsx                 |  2 +-
 app/scenes/CollectionNew.tsx                  |  2 +-
 .../AddGroupsToCollection.tsx                 |  2 +-
 .../AddPeopleToCollection.tsx                 |  2 +-
 app/scenes/Document/components/Insights.tsx   | 10 ++++-----
 app/scenes/DocumentDelete.tsx                 |  4 ++--
 app/scenes/DocumentReparent.tsx               |  2 +-
 app/scenes/GroupEdit.tsx                      |  2 +-
 app/scenes/GroupMembers/AddPeopleToGroup.tsx  |  2 +-
 app/scenes/GroupMembers/GroupMembers.tsx      |  4 ++--
 app/scenes/GroupNew.tsx                       |  4 ++--
 app/scenes/Invite.tsx                         |  4 ++--
 app/scenes/Search/Search.tsx                  |  2 +-
 app/scenes/Settings/ApiKeys.tsx               |  2 +-
 app/scenes/Settings/Details.tsx               |  2 +-
 app/scenes/Settings/Export.tsx                |  2 +-
 app/scenes/Settings/Features.tsx              |  2 +-
 app/scenes/Settings/GoogleAnalytics.tsx       |  2 +-
 app/scenes/Settings/Groups.tsx                |  2 +-
 app/scenes/Settings/Import.tsx                |  2 +-
 app/scenes/Settings/Members.tsx               |  2 +-
 app/scenes/Settings/Notifications.tsx         |  2 +-
 app/scenes/Settings/Preferences.tsx           |  2 +-
 app/scenes/Settings/Profile.tsx               |  2 +-
 app/scenes/Settings/Security.tsx              |  4 ++--
 app/scenes/Settings/Shares.tsx                |  2 +-
 app/scenes/Settings/Templates.tsx             |  2 +-
 app/scenes/Settings/Zapier.tsx                |  2 +-
 .../Settings/components/HelpDisclosure.tsx    |  2 +-
 .../Settings/components/ImportJSONDialog.tsx  |  2 +-
 .../components/ImportMarkdownDialog.tsx       |  2 +-
 .../components/ImportNotionDialog.tsx         |  2 +-
 app/scenes/Settings/components/SettingRow.tsx |  6 +++++-
 app/scenes/TeamDelete.tsx                     |  4 ++--
 app/scenes/TeamNew.tsx                        |  2 +-
 app/scenes/UserDelete.tsx                     |  4 ++--
 plugins/slack/client/Settings.tsx             |  4 ++--
 .../slack/client/components/SlackListItem.tsx |  2 +-
 plugins/webhooks/client/Settings.tsx          |  2 +-
 .../components/WebhookSubscriptionForm.tsx    |  4 ++--
 56 files changed, 93 insertions(+), 97 deletions(-)

diff --git a/app/components/CollectionDeleteDialog.tsx b/app/components/CollectionDeleteDialog.tsx
index 78bcf9a98..7cab8ab97 100644
--- a/app/components/CollectionDeleteDialog.tsx
+++ b/app/components/CollectionDeleteDialog.tsx
@@ -41,7 +41,7 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
       danger
     >
       <>
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <Trans
             defaults="Are you sure about that? Deleting the <em>{{collectionName}}</em> collection is permanent and cannot be restored, however all published documents within will be moved to the trash."
             values={{
@@ -53,7 +53,7 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
           />
         </Text>
         {team.defaultCollectionId === collection.id ? (
-          <Text type="secondary">
+          <Text as="p" type="secondary">
             <Trans
               defaults="Also, <em>{{collectionName}}</em> is being used as the start view – deleting it will reset the start view to the Home page."
               values={{
diff --git a/app/components/CommandBarItem.tsx b/app/components/CommandBarItem.tsx
index 11c094e34..b71d213ef 100644
--- a/app/components/CommandBarItem.tsx
+++ b/app/components/CommandBarItem.tsx
@@ -62,7 +62,7 @@ function CommandBarItem(
               {index > 0 ? (
                 <>
                   {" "}
-                  <Text size="xsmall" as="span" type="secondary">
+                  <Text size="xsmall" type="secondary">
                     then
                   </Text>{" "}
                 </>
diff --git a/app/components/CommentDeleteDialog.tsx b/app/components/CommentDeleteDialog.tsx
index 5e1e90285..eae67f317 100644
--- a/app/components/CommentDeleteDialog.tsx
+++ b/app/components/CommentDeleteDialog.tsx
@@ -33,7 +33,7 @@ function CommentDeleteDialog({ comment, onSubmit }: Props) {
       savingText={`${t("Deleting")}…`}
       danger
     >
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         {hasChildComments ? (
           <Trans>
             Are you sure you want to permanently delete this entire comment
diff --git a/app/components/DocumentExplorer.tsx b/app/components/DocumentExplorer.tsx
index 5d6802f26..156f3c13d 100644
--- a/app/components/DocumentExplorer.tsx
+++ b/app/components/DocumentExplorer.tsx
@@ -389,7 +389,9 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
           </AutoSizer>
         ) : (
           <FlexContainer>
-            <Text type="secondary">{t("No results found")}.</Text>
+            <Text as="p" type="secondary">
+              {t("No results found")}.
+            </Text>
           </FlexContainer>
         )}
       </ListContainer>
diff --git a/app/components/DuplicateDialog.tsx b/app/components/DuplicateDialog.tsx
index 534855c5d..2a6992ad6 100644
--- a/app/components/DuplicateDialog.tsx
+++ b/app/components/DuplicateDialog.tsx
@@ -5,6 +5,7 @@ import { DocumentValidation } from "@shared/validations";
 import Document from "~/models/Document";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Input from "./Input";
+import Switch from "./Switch";
 import Text from "./Text";
 
 type Props = {
@@ -55,17 +56,15 @@ function DuplicateDialog({ document, onSubmit }: Props) {
         defaultValue={defaultTitle}
       />
       {document.publishedAt && !document.isTemplate && (
-        <label>
-          <Text size="small">
-            <input
-              type="checkbox"
-              name="recursive"
-              checked={recursive}
-              onChange={handleRecursiveChange}
-            />{" "}
-            {t("Include nested documents")}
-          </Text>
-        </label>
+        <Text size="small">
+          <Switch
+            name="recursive"
+            label={t("Include nested documents")}
+            labelPosition="right"
+            checked={recursive}
+            onChange={handleRecursiveChange}
+          />
+        </Text>
       )}
     </ConfirmationDialog>
   );
diff --git a/app/components/ErrorBoundary.tsx b/app/components/ErrorBoundary.tsx
index ecf4766d7..0cc72ffff 100644
--- a/app/components/ErrorBoundary.tsx
+++ b/app/components/ErrorBoundary.tsx
@@ -82,7 +82,7 @@ class ErrorBoundary extends React.Component<Props> {
                 </h1>
               </>
             )}
-            <Text type="secondary">
+            <Text as="p" type="secondary">
               <Trans>
                 Sorry, part of the application failed to load. This may be
                 because it was updated since you opened the tab or because of a
@@ -106,7 +106,7 @@ class ErrorBoundary extends React.Component<Props> {
               </h1>
             </>
           )}
-          <Text type="secondary">
+          <Text as="p" type="secondary">
             <Trans
               defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
               values={{
diff --git a/app/components/ExportDialog.tsx b/app/components/ExportDialog.tsx
index 95eb48b66..aaef6ba84 100644
--- a/app/components/ExportDialog.tsx
+++ b/app/components/ExportDialog.tsx
@@ -95,7 +95,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
   return (
     <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Export")}>
       {collection && (
-        <Text>
+        <Text as="p">
           <Trans
             defaults="Exporting the collection <em>{{collectionName}}</em> may take some time."
             values={{
@@ -120,7 +120,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
               onChange={handleFormatChange}
             />
             <div>
-              <Text size="small" weight="bold">
+              <Text as="p" size="small" weight="bold">
                 {item.title}
               </Text>
               <Text size="small">{item.description}</Text>
@@ -137,7 +137,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
           onChange={handleIncludeAttachmentsChange}
         />
         <div>
-          <Text size="small" weight="bold">
+          <Text as="p" size="small" weight="bold">
             {t("Include attachments")}
           </Text>
           <Text size="small">
diff --git a/app/components/Input.tsx b/app/components/Input.tsx
index 7a06ec2ba..5e13ab264 100644
--- a/app/components/Input.tsx
+++ b/app/components/Input.tsx
@@ -245,9 +245,9 @@ function Input(
       </label>
       {error && (
         <TextWrapper>
-          <StyledText type="danger" size="xsmall">
+          <Text type="danger" size="xsmall">
             {error}
-          </StyledText>
+          </Text>
         </TextWrapper>
       )}
     </Wrapper>
@@ -260,8 +260,4 @@ export const TextWrapper = styled.span`
   margin-top: -16px;
 `;
 
-export const StyledText = styled(Text)`
-  margin-bottom: 0;
-`;
-
 export default React.forwardRef(Input);
diff --git a/app/components/InputSelect.tsx b/app/components/InputSelect.tsx
index 858e4e641..271ca9907 100644
--- a/app/components/InputSelect.tsx
+++ b/app/components/InputSelect.tsx
@@ -42,6 +42,7 @@ export type Props = {
   labelHidden?: boolean;
   icon?: React.ReactNode;
   options: Option[];
+  /** @deprecated Removing soon, do not use. */
   note?: React.ReactNode;
   onChange?: (value: string | null) => void;
 };
@@ -206,7 +207,7 @@ const InputSelect = (props: Props) => {
         </SelectPopover>
       </Wrapper>
       {note && (
-        <Text type="secondary" size="small">
+        <Text as="p" type="secondary" size="small">
           {note}
         </Text>
       )}
diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx
index 2af868f59..10f0118cb 100644
--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -89,11 +89,7 @@ const Modal: React.FC<Props> = ({
                       <ErrorBoundary component="div">{children}</ErrorBoundary>
                     </SmallContent>
                     <Header>
-                      {title && (
-                        <Text as="span" size="large">
-                          {title}
-                        </Text>
-                      )}
+                      {title && <Text size="large">{title}</Text>}
                       <NudeButton onClick={onRequestClose}>
                         <CloseIcon />
                       </NudeButton>
@@ -127,7 +123,7 @@ const Modal: React.FC<Props> = ({
                   </Close>
                   <Back onClick={onRequestClose}>
                     <BackIcon size={32} />
-                    <Text as="span">{t("Back")} </Text>
+                    <Text>{t("Back")} </Text>
                   </Back>
                 </Fullscreen>
               )
diff --git a/app/components/Notifications/NotificationListItem.tsx b/app/components/Notifications/NotificationListItem.tsx
index bab0a78ea..8998a6671 100644
--- a/app/components/Notifications/NotificationListItem.tsx
+++ b/app/components/Notifications/NotificationListItem.tsx
@@ -45,15 +45,13 @@ function NotificationListItem({ notification, onNavigate }: Props) {
         <StyledAvatar model={notification.actor} size={AvatarSize.Large} />
         <Flex column>
           <Text as="div" size="small">
-            <Text as="span" weight="bold">
+            <Text weight="bold">
               {notification.actor?.name ?? t("Unknown")}
             </Text>{" "}
             {notification.eventText(t)}{" "}
-            <Text as="span" weight="bold">
-              {notification.subject}
-            </Text>
+            <Text weight="bold">{notification.subject}</Text>
           </Text>
-          <Text as="span" type="tertiary" size="xsmall">
+          <Text type="tertiary" size="xsmall">
             <Time
               dateTime={notification.createdAt}
               tooltipDelay={1000}
diff --git a/app/components/Sharing/SharePopover.tsx b/app/components/Sharing/SharePopover.tsx
index 6a8ad4e69..5764c060a 100644
--- a/app/components/Sharing/SharePopover.tsx
+++ b/app/components/Sharing/SharePopover.tsx
@@ -478,7 +478,7 @@ const AccessTooltip = ({
 
   return (
     <Flex align="center" gap={2}>
-      <Text type="secondary" size="small" as="span">
+      <Text type="secondary" size="small">
         {children}
       </Text>
       <Tooltip tooltip={tooltip ?? t("Access inherited from collection")}>
diff --git a/app/components/Sidebar/components/SidebarButton.tsx b/app/components/Sidebar/components/SidebarButton.tsx
index aa15e8406..f4284657d 100644
--- a/app/components/Sidebar/components/SidebarButton.tsx
+++ b/app/components/Sidebar/components/SidebarButton.tsx
@@ -44,7 +44,7 @@ const SidebarButton = React.forwardRef<HTMLButtonElement, SidebarButtonProps>(
         >
           <Content gap={8} align="center">
             {image}
-            {title && <Title as="span">{title}</Title>}
+            {title && <Title>{title}</Title>}
           </Content>
           {showMoreMenu && <StyledMoreIcon />}
         </Button>
diff --git a/app/components/Text.ts b/app/components/Text.ts
index 3436725e4..88070b0a6 100644
--- a/app/components/Text.ts
+++ b/app/components/Text.ts
@@ -12,7 +12,7 @@ type Props = {
  * Use this component for all interface text that should not be selectable
  * by the user, this is the majority of UI text explainers, notes, headings.
  */
-const Text = styled.p<Props>`
+const Text = styled.span<Props>`
   margin-top: 0;
   text-align: ${(props) => (props.dir ? props.dir : "inherit")};
   color: ${(props) =>
diff --git a/app/scenes/APITokenNew.tsx b/app/scenes/APITokenNew.tsx
index cecce4748..0954bc463 100644
--- a/app/scenes/APITokenNew.tsx
+++ b/app/scenes/APITokenNew.tsx
@@ -43,7 +43,7 @@ function APITokenNew({ onSubmit }: Props) {
 
   return (
     <form onSubmit={handleSubmit}>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         {t(
           `Name your token something that will help you to remember it's use in the future, for example "local development", "production", or "continuous integration".`
         )}
diff --git a/app/scenes/Collection/Empty.tsx b/app/scenes/Collection/Empty.tsx
index 42ab0afac..3656e17b8 100644
--- a/app/scenes/Collection/Empty.tsx
+++ b/app/scenes/Collection/Empty.tsx
@@ -25,7 +25,7 @@ function EmptyCollection({ collection }: Props) {
 
   return (
     <Centered column>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans
           defaults="<em>{{ collectionName }}</em> doesn’t contain any
                     documents yet."
diff --git a/app/scenes/CollectionEdit.tsx b/app/scenes/CollectionEdit.tsx
index 0e3db5d13..48a0efe62 100644
--- a/app/scenes/CollectionEdit.tsx
+++ b/app/scenes/CollectionEdit.tsx
@@ -78,7 +78,7 @@ const CollectionEdit = ({ collectionId, onSubmit }: Props) => {
   return (
     <Flex column>
       <form onSubmit={handleSubmit}>
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <Trans>
             You can edit the name and other details at any time, however doing
             so often might confuse your team mates.
diff --git a/app/scenes/CollectionNew.tsx b/app/scenes/CollectionNew.tsx
index 8c301ff32..8e629fbad 100644
--- a/app/scenes/CollectionNew.tsx
+++ b/app/scenes/CollectionNew.tsx
@@ -119,7 +119,7 @@ class CollectionNew extends React.Component<Props> {
     const teamSharingEnabled = !!auth.team && auth.team.sharing;
     return (
       <form onSubmit={this.handleSubmit}>
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <Trans>
             Collections are for grouping your documents. They work best when
             organized around a topic or internal team — Product or Engineering
diff --git a/app/scenes/CollectionPermissions/AddGroupsToCollection.tsx b/app/scenes/CollectionPermissions/AddGroupsToCollection.tsx
index 8a89957de..a2035ec48 100644
--- a/app/scenes/CollectionPermissions/AddGroupsToCollection.tsx
+++ b/app/scenes/CollectionPermissions/AddGroupsToCollection.tsx
@@ -69,7 +69,7 @@ function AddGroupsToCollection(props: Props) {
   return (
     <Flex column>
       {can.createGroup ? (
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           {t("Can’t find the group you’re looking for?")}{" "}
           <ButtonLink onClick={handleNewGroupModalOpen}>
             {t("Create a group")}
diff --git a/app/scenes/CollectionPermissions/AddPeopleToCollection.tsx b/app/scenes/CollectionPermissions/AddPeopleToCollection.tsx
index a933b9713..6fd29ebc7 100644
--- a/app/scenes/CollectionPermissions/AddPeopleToCollection.tsx
+++ b/app/scenes/CollectionPermissions/AddPeopleToCollection.tsx
@@ -69,7 +69,7 @@ function AddPeopleToCollection({ collection }: Props) {
 
   return (
     <Flex column>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         {t("Need to add someone who’s not on the team yet?")}{" "}
         {can.inviteUser ? (
           <ButtonLink onClick={setInviteModalOpen}>
diff --git a/app/scenes/Document/components/Insights.tsx b/app/scenes/Document/components/Insights.tsx
index 51c2de0b0..9f8de8307 100644
--- a/app/scenes/Document/components/Insights.tsx
+++ b/app/scenes/Document/components/Insights.tsx
@@ -55,7 +55,7 @@ function Insights() {
           <div>
             <Content column>
               <Heading>{t("Stats")}</Heading>
-              <Text type="secondary" size="small">
+              <Text as="p" type="secondary" size="small">
                 <List>
                   {stats.total.words > 0 && (
                     <li>
@@ -98,7 +98,7 @@ function Insights() {
               <>
                 <Content column>
                   <Heading>{t("Contributors")}</Heading>
-                  <Text type="secondary" size="small">
+                  <Text as="p" type="secondary" size="small">
                     {t(`Created`)}{" "}
                     <Time dateTime={document.createdAt} addSuffix />.
                     <br />
@@ -130,7 +130,7 @@ function Insights() {
                 </Content>
                 <Content column>
                   <Heading>{t("Views")}</Heading>
-                  <Text type="secondary" size="small">
+                  <Text as="p" type="secondary" size="small">
                     {documentViews.length <= 1
                       ? t("No one else has viewed yet")
                       : t(
@@ -157,10 +157,10 @@ function Insights() {
           {can.updateInsights && (
             <Manage>
               <Flex column>
-                <Text size="small" weight="bold">
+                <Text as="p" size="small" weight="bold">
                   {t("Viewer insights")}
                 </Text>
-                <Text type="secondary" size="small">
+                <Text as="p" type="secondary" size="small">
                   {t(
                     "As an admin you can manage if team members can see who has viewed this document"
                   )}
diff --git a/app/scenes/DocumentDelete.tsx b/app/scenes/DocumentDelete.tsx
index 81818b96e..5304a15ae 100644
--- a/app/scenes/DocumentDelete.tsx
+++ b/app/scenes/DocumentDelete.tsx
@@ -83,7 +83,7 @@ function DocumentDelete({ document, onSubmit }: Props) {
 
   return (
     <form onSubmit={handleSubmit}>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         {document.isTemplate ? (
           <Trans
             defaults="Are you sure you want to delete the <em>{{ documentTitle }}</em> template?"
@@ -119,7 +119,7 @@ function DocumentDelete({ document, onSubmit }: Props) {
         )}
       </Text>
       {canArchive && (
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <Trans>
             If you’d like the option of referencing or restoring the{" "}
             {{
diff --git a/app/scenes/DocumentReparent.tsx b/app/scenes/DocumentReparent.tsx
index d88ecc273..4988abcf8 100644
--- a/app/scenes/DocumentReparent.tsx
+++ b/app/scenes/DocumentReparent.tsx
@@ -63,7 +63,7 @@ function DocumentReparent({ collection, item, onSubmit, onCancel }: Props) {
   return (
     <Flex column>
       <form onSubmit={handleSubmit}>
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <Trans
             defaults="Heads up – moving the document <em>{{ title }}</em> to the <em>{{ newCollectionName }}</em> collection will grant all members of the workspace <em>{{ newPermission }}</em>, they currently have {{ prevPermission }}."
             values={{
diff --git a/app/scenes/GroupEdit.tsx b/app/scenes/GroupEdit.tsx
index e78744b2d..fa682730a 100644
--- a/app/scenes/GroupEdit.tsx
+++ b/app/scenes/GroupEdit.tsx
@@ -45,7 +45,7 @@ function GroupEdit({ group, onSubmit }: Props) {
 
   return (
     <form onSubmit={handleSubmit}>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>
           You can edit the name of this group at any time, however doing so too
           often might confuse your team mates.
diff --git a/app/scenes/GroupMembers/AddPeopleToGroup.tsx b/app/scenes/GroupMembers/AddPeopleToGroup.tsx
index 95e48bd14..87c545ab6 100644
--- a/app/scenes/GroupMembers/AddPeopleToGroup.tsx
+++ b/app/scenes/GroupMembers/AddPeopleToGroup.tsx
@@ -75,7 +75,7 @@ function AddPeopleToGroup(props: Props) {
 
   return (
     <Flex column>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         {t(
           "Add members below to give them access to the group. Need to add someone who’s not yet a member?"
         )}{" "}
diff --git a/app/scenes/GroupMembers/GroupMembers.tsx b/app/scenes/GroupMembers/GroupMembers.tsx
index 37eb59be3..73a992149 100644
--- a/app/scenes/GroupMembers/GroupMembers.tsx
+++ b/app/scenes/GroupMembers/GroupMembers.tsx
@@ -51,7 +51,7 @@ function GroupMembers({ group }: Props) {
     <Flex column>
       {can.update ? (
         <>
-          <Text type="secondary">
+          <Text as="p" type="secondary">
             <Trans
               defaults="Add and remove members to the <em>{{groupName}}</em> group. Members of the group will have access to any collections this group has been added to."
               values={{
@@ -74,7 +74,7 @@ function GroupMembers({ group }: Props) {
           </span>
         </>
       ) : (
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <Trans
             defaults="Listing members of the <em>{{groupName}}</em> group."
             values={{
diff --git a/app/scenes/GroupNew.tsx b/app/scenes/GroupNew.tsx
index c5338e257..1933dfd8a 100644
--- a/app/scenes/GroupNew.tsx
+++ b/app/scenes/GroupNew.tsx
@@ -50,7 +50,7 @@ function GroupNew({ onSubmit }: Props) {
   return (
     <>
       <form onSubmit={handleSubmit}>
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <Trans>
             Groups are for organizing your team. They work best when centered
             around a function or a responsibility — Support or Engineering for
@@ -68,7 +68,7 @@ function GroupNew({ onSubmit }: Props) {
             flex
           />
         </Flex>
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <Trans>You’ll be able to add people to the group next.</Trans>
         </Text>
 
diff --git a/app/scenes/Invite.tsx b/app/scenes/Invite.tsx
index 0ee12f219..1f578ac9e 100644
--- a/app/scenes/Invite.tsx
+++ b/app/scenes/Invite.tsx
@@ -160,7 +160,7 @@ function Invite({ onSubmit }: Props) {
   return (
     <form onSubmit={handleSubmit}>
       {team.guestSignin ? (
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <Trans
             defaults="Invite members or guests to join your workspace. They can sign in with {{signinMethods}} or use their email address."
             values={{
@@ -170,7 +170,7 @@ function Invite({ onSubmit }: Props) {
           {collectionAccessNote}
         </Text>
       ) : (
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <Trans
             defaults="Invite members to join your workspace. They will need to sign in with {{signinMethods}}."
             values={{
diff --git a/app/scenes/Search/Search.tsx b/app/scenes/Search/Search.tsx
index 85ec89e20..283b1d38e 100644
--- a/app/scenes/Search/Search.tsx
+++ b/app/scenes/Search/Search.tsx
@@ -247,7 +247,7 @@ function Search(props: Props) {
             {showEmpty && (
               <Fade>
                 <Centered column>
-                  <Text type="secondary">
+                  <Text as="p" type="secondary">
                     {t("No documents found for your search filters.")}
                   </Text>
                 </Centered>
diff --git a/app/scenes/Settings/ApiKeys.tsx b/app/scenes/Settings/ApiKeys.tsx
index 1dda9bb4a..60e453d7d 100644
--- a/app/scenes/Settings/ApiKeys.tsx
+++ b/app/scenes/Settings/ApiKeys.tsx
@@ -43,7 +43,7 @@ function ApiKeys() {
       }
     >
       <Heading>{t("API Tokens")}</Heading>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans
           defaults="You can create an unlimited amount of personal tokens to authenticate
           with the API. Tokens have the same permissions as your user account.
diff --git a/app/scenes/Settings/Details.tsx b/app/scenes/Settings/Details.tsx
index c092583ee..37a072c83 100644
--- a/app/scenes/Settings/Details.tsx
+++ b/app/scenes/Settings/Details.tsx
@@ -136,7 +136,7 @@ function Details() {
     <ThemeProvider theme={newTheme}>
       <Scene title={t("Details")} icon={<TeamIcon />}>
         <Heading>{t("Details")}</Heading>
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <Trans>
             These settings affect the way that your workspace appears to
             everyone on the team.
diff --git a/app/scenes/Settings/Export.tsx b/app/scenes/Settings/Export.tsx
index 536353427..e25d4a638 100644
--- a/app/scenes/Settings/Export.tsx
+++ b/app/scenes/Settings/Export.tsx
@@ -34,7 +34,7 @@ function Export() {
   return (
     <Scene title={t("Export")} icon={<DownloadIcon />}>
       <Heading>{t("Export")}</Heading>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans
           defaults="A full export might take some time, consider exporting a single document or collection. The exported data is a zip of your documents in Markdown format. You may leave this page once the export has started – if you have notifications enabled, we will email a link to <em>{{ userEmail }}</em> when it’s complete."
           values={{
diff --git a/app/scenes/Settings/Features.tsx b/app/scenes/Settings/Features.tsx
index 8e17aaafd..4b210f7a4 100644
--- a/app/scenes/Settings/Features.tsx
+++ b/app/scenes/Settings/Features.tsx
@@ -29,7 +29,7 @@ function Features() {
   return (
     <Scene title={t("Features")} icon={<BeakerIcon />}>
       <Heading>{t("Features")}</Heading>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>
           Manage optional and beta features. Changing these settings will affect
           the experience for all members of the workspace.
diff --git a/app/scenes/Settings/GoogleAnalytics.tsx b/app/scenes/Settings/GoogleAnalytics.tsx
index 56c07a1cd..ef40bb084 100644
--- a/app/scenes/Settings/GoogleAnalytics.tsx
+++ b/app/scenes/Settings/GoogleAnalytics.tsx
@@ -78,7 +78,7 @@ function GoogleAnalytics() {
     <Scene title={t("Google Analytics")} icon={<GoogleIcon />}>
       <Heading>{t("Google Analytics")}</Heading>
 
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>
           Add a Google Analytics 4 measurement ID to send document views and
           analytics from the workspace to your own Google Analytics account.
diff --git a/app/scenes/Settings/Groups.tsx b/app/scenes/Settings/Groups.tsx
index 06c4b6d7b..95ca92ee7 100644
--- a/app/scenes/Settings/Groups.tsx
+++ b/app/scenes/Settings/Groups.tsx
@@ -48,7 +48,7 @@ function Groups() {
       }
     >
       <Heading>{t("Groups")}</Heading>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>
           Groups can be used to organize and manage the people on your team.
         </Trans>
diff --git a/app/scenes/Settings/Import.tsx b/app/scenes/Settings/Import.tsx
index 4ce741b4c..334df921d 100644
--- a/app/scenes/Settings/Import.tsx
+++ b/app/scenes/Settings/Import.tsx
@@ -28,7 +28,7 @@ function Import() {
   return (
     <Scene title={t("Import")} icon={<NewDocumentIcon />}>
       <Heading>{t("Import")}</Heading>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>
           Quickly transfer your existing documents, pages, and files from other
           tools and services into {{ appName }}. You can also drag and drop any
diff --git a/app/scenes/Settings/Members.tsx b/app/scenes/Settings/Members.tsx
index 8c727a280..044ec6f6b 100644
--- a/app/scenes/Settings/Members.tsx
+++ b/app/scenes/Settings/Members.tsx
@@ -167,7 +167,7 @@ function Members() {
       wide
     >
       <Heading>{t("Members")}</Heading>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>
           Everyone that has signed into {{ appName }} is listed here. It’s
           possible that there are other users who have access through{" "}
diff --git a/app/scenes/Settings/Notifications.tsx b/app/scenes/Settings/Notifications.tsx
index 694625163..264313f15 100644
--- a/app/scenes/Settings/Notifications.tsx
+++ b/app/scenes/Settings/Notifications.tsx
@@ -131,7 +131,7 @@ function Notifications() {
           </Trans>
         </Notice>
       )}
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>Manage when and where you receive email notifications.</Trans>
       </Text>
 
diff --git a/app/scenes/Settings/Preferences.tsx b/app/scenes/Settings/Preferences.tsx
index 01d3e81b3..6f62f2efe 100644
--- a/app/scenes/Settings/Preferences.tsx
+++ b/app/scenes/Settings/Preferences.tsx
@@ -50,7 +50,7 @@ function Preferences() {
   return (
     <Scene title={t("Preferences")} icon={<SettingsIcon />}>
       <Heading>{t("Preferences")}</Heading>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>Manage settings that affect your personal experience.</Trans>
       </Text>
 
diff --git a/app/scenes/Settings/Profile.tsx b/app/scenes/Settings/Profile.tsx
index f4a3d8db5..41ae340e6 100644
--- a/app/scenes/Settings/Profile.tsx
+++ b/app/scenes/Settings/Profile.tsx
@@ -48,7 +48,7 @@ const Profile = () => {
   return (
     <Scene title={t("Profile")} icon={<ProfileIcon />}>
       <Heading>{t("Profile")}</Heading>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>Manage how you appear to other members of the workspace.</Trans>
       </Text>
 
diff --git a/app/scenes/Settings/Security.tsx b/app/scenes/Settings/Security.tsx
index 8bc811002..f2a4f1a47 100644
--- a/app/scenes/Settings/Security.tsx
+++ b/app/scenes/Settings/Security.tsx
@@ -135,7 +135,7 @@ function Security() {
   return (
     <Scene title={t("Security")} icon={<PadlockIcon />}>
       <Heading>{t("Security")}</Heading>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>
           Settings that impact the access, security, and content of your
           workspace.
@@ -164,7 +164,7 @@ function Security() {
                 color={provider.isActive ? theme.accent : undefined}
                 checked={provider.isActive}
               />{" "}
-              <Text type="secondary">
+              <Text as="p" type="secondary">
                 {provider.isActive ? t("Connected") : t("Disabled")}
               </Text>
             </Flex>
diff --git a/app/scenes/Settings/Shares.tsx b/app/scenes/Settings/Shares.tsx
index 2ee133a83..8e7f4048a 100644
--- a/app/scenes/Settings/Shares.tsx
+++ b/app/scenes/Settings/Shares.tsx
@@ -86,7 +86,7 @@ function Shares() {
         </>
       )}
 
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>
           Documents that have been shared are listed below. Anyone that has the
           public link can access a read-only version of the document until the
diff --git a/app/scenes/Settings/Templates.tsx b/app/scenes/Settings/Templates.tsx
index 56ada3ffe..a65c8a87f 100644
--- a/app/scenes/Settings/Templates.tsx
+++ b/app/scenes/Settings/Templates.tsx
@@ -34,7 +34,7 @@ function Templates() {
       }
     >
       <Heading>{t("Templates")}</Heading>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>
           You can create templates to help your team create consistent and
           accurate documentation.
diff --git a/app/scenes/Settings/Zapier.tsx b/app/scenes/Settings/Zapier.tsx
index 251c744a0..233456899 100644
--- a/app/scenes/Settings/Zapier.tsx
+++ b/app/scenes/Settings/Zapier.tsx
@@ -28,7 +28,7 @@ function Zapier() {
           key="zapier-styles"
         />
       </Helmet>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>
           Zapier is a platform that allows {{ appName }} to easily integrate
           with thousands of other business tools. Automate your workflows, sync
diff --git a/app/scenes/Settings/components/HelpDisclosure.tsx b/app/scenes/Settings/components/HelpDisclosure.tsx
index 85ca5a769..7eabbcb87 100644
--- a/app/scenes/Settings/components/HelpDisclosure.tsx
+++ b/app/scenes/Settings/components/HelpDisclosure.tsx
@@ -33,7 +33,7 @@ const HelpDisclosure: React.FC<Props> = ({ title, children }: Props) => {
         )}
       </Disclosure>
       <HelpContent {...disclosure}>
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <br />
           {children}
         </Text>
diff --git a/app/scenes/Settings/components/ImportJSONDialog.tsx b/app/scenes/Settings/components/ImportJSONDialog.tsx
index 7686f36e0..0974f95f1 100644
--- a/app/scenes/Settings/components/ImportJSONDialog.tsx
+++ b/app/scenes/Settings/components/ImportJSONDialog.tsx
@@ -14,7 +14,7 @@ function ImportJSONDialog() {
 
   return (
     <Flex column>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <DropToImport
           onSubmit={dialogs.closeAllModals}
           format={FileOperationFormat.JSON}
diff --git a/app/scenes/Settings/components/ImportMarkdownDialog.tsx b/app/scenes/Settings/components/ImportMarkdownDialog.tsx
index fa24f46c3..a33d158c8 100644
--- a/app/scenes/Settings/components/ImportMarkdownDialog.tsx
+++ b/app/scenes/Settings/components/ImportMarkdownDialog.tsx
@@ -14,7 +14,7 @@ function ImportMarkdownDialog() {
 
   return (
     <Flex column>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <DropToImport
           onSubmit={dialogs.closeAllModals}
           format={FileOperationFormat.MarkdownZip}
diff --git a/app/scenes/Settings/components/ImportNotionDialog.tsx b/app/scenes/Settings/components/ImportNotionDialog.tsx
index 8717eabce..ea186ae99 100644
--- a/app/scenes/Settings/components/ImportNotionDialog.tsx
+++ b/app/scenes/Settings/components/ImportNotionDialog.tsx
@@ -13,7 +13,7 @@ function ImportNotionDialog() {
 
   return (
     <Flex column>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <DropToImport
           onSubmit={dialogs.closeAllModals}
           format={FileOperationFormat.Notion}
diff --git a/app/scenes/Settings/components/SettingRow.tsx b/app/scenes/Settings/components/SettingRow.tsx
index 711f1e7ba..de67a5db4 100644
--- a/app/scenes/Settings/components/SettingRow.tsx
+++ b/app/scenes/Settings/components/SettingRow.tsx
@@ -74,7 +74,11 @@ const SettingRow: React.FC<Props> = ({
         <Label as="h3">
           <label htmlFor={name}>{label}</label>
         </Label>
-        {description && <Text type="secondary">{description}</Text>}
+        {description && (
+          <Text as="p" type="secondary">
+            {description}
+          </Text>
+        )}
       </Column>
       <Column>{children}</Column>
     </Row>
diff --git a/app/scenes/TeamDelete.tsx b/app/scenes/TeamDelete.tsx
index acc4eeb7b..0e0091e6c 100644
--- a/app/scenes/TeamDelete.tsx
+++ b/app/scenes/TeamDelete.tsx
@@ -67,7 +67,7 @@ function TeamDelete({ onSubmit }: Props) {
     <form onSubmit={formHandleSubmit(handleSubmit)}>
       {isWaitingCode ? (
         <>
-          <Text type="secondary">
+          <Text as="p" type="secondary">
             <Trans>
               A confirmation code has been sent to your email address, please
               enter the code below to permanently destroy this workspace.
@@ -84,7 +84,7 @@ function TeamDelete({ onSubmit }: Props) {
         </>
       ) : (
         <>
-          <Text type="secondary">
+          <Text as="p" type="secondary">
             <Trans>
               Deleting the <strong>{{ workspaceName }}</strong> workspace will
               destroy all collections, documents, users, and associated data.
diff --git a/app/scenes/TeamNew.tsx b/app/scenes/TeamNew.tsx
index d2925df03..e9eef070a 100644
--- a/app/scenes/TeamNew.tsx
+++ b/app/scenes/TeamNew.tsx
@@ -65,7 +65,7 @@ function TeamNew({ user }: Props) {
           />
         </Flex>
 
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <Trans
             defaults="You are creating a new workspace using your current account — <em>{{email}}</em>"
             values={{
diff --git a/app/scenes/UserDelete.tsx b/app/scenes/UserDelete.tsx
index 8a60dfaa4..8912f5d7a 100644
--- a/app/scenes/UserDelete.tsx
+++ b/app/scenes/UserDelete.tsx
@@ -65,7 +65,7 @@ function UserDelete({ onSubmit }: Props) {
     <form onSubmit={formHandleSubmit(handleSubmit)}>
       {isWaitingCode ? (
         <>
-          <Text type="secondary">
+          <Text as="p" type="secondary">
             <Trans>
               A confirmation code has been sent to your email address, please
               enter the code below to permanently destroy your account.
@@ -82,7 +82,7 @@ function UserDelete({ onSubmit }: Props) {
         </>
       ) : (
         <>
-          <Text type="secondary">
+          <Text as="p" type="secondary">
             <Trans>
               Are you sure? Deleting your account will destroy identifying data
               associated with your user and cannot be undone. You will be
diff --git a/plugins/slack/client/Settings.tsx b/plugins/slack/client/Settings.tsx
index b8d33528c..65f7c06ea 100644
--- a/plugins/slack/client/Settings.tsx
+++ b/plugins/slack/client/Settings.tsx
@@ -75,7 +75,7 @@ function Slack() {
           </Trans>
         </Notice>
       )}
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans
           defaults="Get rich previews of {{ appName }} links shared in Slack and use the <em>{{ command }}</em> slash command to search for documents without leaving your chat."
           values={{
@@ -113,7 +113,7 @@ function Slack() {
           <p>&nbsp;</p>
 
           <h2>{t("Collections")}</h2>
-          <Text type="secondary">
+          <Text as="p" type="secondary">
             <Trans>
               Connect {{ appName }} collections to Slack channels. Messages will
               be automatically posted to Slack when documents are published or
diff --git a/plugins/slack/client/components/SlackListItem.tsx b/plugins/slack/client/components/SlackListItem.tsx
index 660bab9de..649d0b9bc 100644
--- a/plugins/slack/client/components/SlackListItem.tsx
+++ b/plugins/slack/client/components/SlackListItem.tsx
@@ -80,7 +80,7 @@ function SlackListItem({ integration, collection }: Props) {
           <Popover {...popover} aria-label={t("Settings")}>
             <Events>
               <h3>{t("Notifications")}</h3>
-              <Text type="secondary">
+              <Text as="p" type="secondary">
                 {t("These events should be posted to Slack")}
               </Text>
               <Switch
diff --git a/plugins/webhooks/client/Settings.tsx b/plugins/webhooks/client/Settings.tsx
index e274429a7..ccc3f7360 100644
--- a/plugins/webhooks/client/Settings.tsx
+++ b/plugins/webhooks/client/Settings.tsx
@@ -45,7 +45,7 @@ function Webhooks() {
       }
     >
       <Heading>{t("Webhooks")}</Heading>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>
           Webhooks can be used to notify your application when events happen in{" "}
           {{ appName }}. Events are sent as a https request with a JSON payload
diff --git a/plugins/webhooks/client/components/WebhookSubscriptionForm.tsx b/plugins/webhooks/client/components/WebhookSubscriptionForm.tsx
index 20514a9a0..1315887e0 100644
--- a/plugins/webhooks/client/components/WebhookSubscriptionForm.tsx
+++ b/plugins/webhooks/client/components/WebhookSubscriptionForm.tsx
@@ -231,7 +231,7 @@ function WebhookSubscriptionForm({ handleSubmit, webhookSubscription }: Props) {
 
   return (
     <form onSubmit={formHandleSubmit(handleSubmit)}>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>
           Provide a descriptive name for this webhook and the URL we should send
           a POST request to when matching events are created.
@@ -266,7 +266,7 @@ function WebhookSubscriptionForm({ handleSubmit, webhookSubscription }: Props) {
           })}
         />
       </TextFields>
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         <Trans>
           Subscribe to all events, groups, or individual events. We recommend
           only subscribing to the minimum amount of events that your application