chore: Convert <Text /> component to span by default

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={{

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>{" "}
                 </>

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

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>

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>
   );

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={{

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">

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);

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>
       )}

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>
               )

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}

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")}>

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>

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) =>