diff --git a/.eslintrc.js b/.eslintrc.js
index 147cc9422..5599c44fd 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -94,6 +94,33 @@ const rules = {
   // Prefer functional components with default params
   'react/require-default-props': 'off',
 
+  // Empty fragments are used in adapters between backbone and react views.
+  'react/jsx-no-useless-fragment': ['error', {
+    allowExpressions: true,
+  }],
+
+  // Our code base has tons of arrow functions passed directly to components.
+  'react/jsx-no-bind': 'off',
+
+  // Does not support forwardRef
+  'react/no-unused-prop-types': 'off',
+
+  // Not useful for us as we have lots of complicated types.
+  'react/destructuring-assignment': 'off',
+
+  'react/function-component-definition': ['error', {
+    namedComponents: 'function-declaration',
+    unnamedComponents: 'arrow-function',
+  }],
+
+  'react/display-name': 'error',
+
+  // Allow returning values from promise executors for brevity.
+  'no-promise-executor-return': 'off',
+
+  // Redux ducks use this a lot
+  'default-param-last': 'off',
+
   'jsx-a11y/label-has-associated-control': ['error', { assert: 'either' }],
 
   'no-restricted-syntax': [
diff --git a/package.json b/package.json
index e5e4d8d4b..7fcee2fd1 100644
--- a/package.json
+++ b/package.json
@@ -259,8 +259,8 @@
     "@types/webpack-dev-server": "3.11.3",
     "@types/websocket": "1.0.0",
     "@types/yargs": "17.0.7",
-    "@typescript-eslint/eslint-plugin": "5.6.0",
-    "@typescript-eslint/parser": "5.6.0",
+    "@typescript-eslint/eslint-plugin": "5.43.0",
+    "@typescript-eslint/parser": "5.43.0",
     "arraybuffer-loader": "1.0.3",
     "asar": "3.1.0",
     "babel-core": "7.0.0-bridge.0",
@@ -281,13 +281,13 @@
     "electron-notarize": "1.2.1",
     "endanger": "7.0.4",
     "esbuild": "0.15.8",
-    "eslint": "7.7.0",
-    "eslint-config-airbnb-typescript-prettier": "4.2.0",
-    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-import": "2.22.0",
-    "eslint-plugin-mocha": "9.0.0",
-    "eslint-plugin-more": "1.0.0",
-    "eslint-plugin-react": "7.20.6",
+    "eslint": "8.27.0",
+    "eslint-config-airbnb-typescript-prettier": "5.0.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-mocha": "10.1.0",
+    "eslint-plugin-more": "1.0.5",
+    "eslint-plugin-react": "7.31.10",
     "file-loader": "4.2.0",
     "html-webpack-plugin": "5.3.1",
     "json-to-ast": "2.1.0",
@@ -298,7 +298,7 @@
     "nyc": "11.4.1",
     "patch-package": "6.4.7",
     "playwright": "1.17.1",
-    "prettier": "2.6.0",
+    "prettier": "2.7.1",
     "sass": "1.49.7",
     "sass-loader": "10.2.0",
     "sinon": "11.1.1",
diff --git a/sticker-creator/app/index.tsx b/sticker-creator/app/index.tsx
index dbbb16cb4..29ccb1a90 100644
--- a/sticker-creator/app/index.tsx
+++ b/sticker-creator/app/index.tsx
@@ -20,10 +20,10 @@ export type AppPropsType = Readonly<{
   hasCustomTitleBar: boolean;
 }>;
 
-export const App = ({
+export function App({
   executeMenuRole,
   hasCustomTitleBar,
-}: AppPropsType): JSX.Element => {
+}: AppPropsType): JSX.Element {
   const i18n = useI18n();
   const theme = useTheme();
 
@@ -57,4 +57,4 @@ export const App = ({
       </div>
     </TitleBarContainer>
   );
-};
+}
diff --git a/sticker-creator/app/stages/AppStage.tsx b/sticker-creator/app/stages/AppStage.tsx
index e95bc001e..ee24ed5d0 100644
--- a/sticker-creator/app/stages/AppStage.tsx
+++ b/sticker-creator/app/stages/AppStage.tsx
@@ -35,7 +35,7 @@ const getClassName = ({ noMessage, empty }: Props) => {
   return styles.main;
 };
 
-export const AppStage: React.ComponentType<Props> = props => {
+export function AppStage(props: Props): JSX.Element {
   const {
     children,
     next,
@@ -101,4 +101,4 @@ export const AppStage: React.ComponentType<Props> = props => {
       />
     </>
   );
-};
+}
diff --git a/sticker-creator/app/stages/DropStage.tsx b/sticker-creator/app/stages/DropStage.tsx
index e25263081..d8a04f13c 100644
--- a/sticker-creator/app/stages/DropStage.tsx
+++ b/sticker-creator/app/stages/DropStage.tsx
@@ -10,7 +10,7 @@ import { StickerGrid } from '../../components/StickerGrid';
 import { stickersDuck } from '../../store';
 import { useI18n } from '../../util/i18n';
 
-export const DropStage: React.ComponentType = () => {
+export function DropStage(): JSX.Element {
   const i18n = useI18n();
   const stickerPaths = stickersDuck.useStickerOrder();
   const stickersReady = stickersDuck.useStickersReady();
@@ -40,4 +40,4 @@ export const DropStage: React.ComponentType = () => {
       </div>
     </AppStage>
   );
-};
+}
diff --git a/sticker-creator/app/stages/EmojiStage.tsx b/sticker-creator/app/stages/EmojiStage.tsx
index 637d5f869..2bf635ba6 100644
--- a/sticker-creator/app/stages/EmojiStage.tsx
+++ b/sticker-creator/app/stages/EmojiStage.tsx
@@ -9,7 +9,7 @@ import { StickerGrid } from '../../components/StickerGrid';
 import { stickersDuck } from '../../store';
 import { useI18n } from '../../util/i18n';
 
-export const EmojiStage: React.ComponentType = () => {
+export function EmojiStage(): JSX.Element {
   const i18n = useI18n();
   const emojisReady = stickersDuck.useEmojisReady();
 
@@ -26,4 +26,4 @@ export const EmojiStage: React.ComponentType = () => {
       </div>
     </AppStage>
   );
-};
+}
diff --git a/sticker-creator/app/stages/MetaStage.tsx b/sticker-creator/app/stages/MetaStage.tsx
index 9ee59a19c..93d735f9d 100644
--- a/sticker-creator/app/stages/MetaStage.tsx
+++ b/sticker-creator/app/stages/MetaStage.tsx
@@ -14,7 +14,7 @@ import { ConfirmModal } from '../../components/ConfirmModal';
 import { stickersDuck } from '../../store';
 import { useI18n } from '../../util/i18n';
 
-export const MetaStage: React.ComponentType = () => {
+export function MetaStage(): JSX.Element {
   const i18n = useI18n();
   const actions = stickersDuck.useStickerActions();
   const valid = stickersDuck.useAllDataValid();
@@ -99,4 +99,4 @@ export const MetaStage: React.ComponentType = () => {
       </div>
     </AppStage>
   );
-};
+}
diff --git a/sticker-creator/app/stages/ShareStage.tsx b/sticker-creator/app/stages/ShareStage.tsx
index e9e1853d5..00edeae3d 100644
--- a/sticker-creator/app/stages/ShareStage.tsx
+++ b/sticker-creator/app/stages/ShareStage.tsx
@@ -15,7 +15,7 @@ import { stickersDuck } from '../../store';
 import { useI18n } from '../../util/i18n';
 import { Intl } from '../../../ts/components/Intl';
 
-export const ShareStage: React.ComponentType = () => {
+export function ShareStage(): JSX.Element {
   const i18n = useI18n();
   const actions = stickersDuck.useStickerActions();
   const title = stickersDuck.useTitle();
@@ -94,4 +94,4 @@ export const ShareStage: React.ComponentType = () => {
       ) : null}
     </AppStage>
   );
-};
+}
diff --git a/sticker-creator/app/stages/UploadStage.tsx b/sticker-creator/app/stages/UploadStage.tsx
index 50fbbf0c9..b4a5824bc 100644
--- a/sticker-creator/app/stages/UploadStage.tsx
+++ b/sticker-creator/app/stages/UploadStage.tsx
@@ -18,7 +18,7 @@ const handleCancel = () => {
   history.push('/add-meta');
 };
 
-export const UploadStage: React.ComponentType = () => {
+export function UploadStage(): JSX.Element {
   const i18n = useI18n();
   const actions = stickersDuck.useStickerActions();
   const cover = stickersDuck.useCover();
@@ -81,4 +81,4 @@ export const UploadStage: React.ComponentType = () => {
       </div>
     </AppStage>
   );
-};
+}
diff --git a/sticker-creator/components/ConfirmModal.tsx b/sticker-creator/components/ConfirmModal.tsx
index 8cabd28e2..019316c40 100644
--- a/sticker-creator/components/ConfirmModal.tsx
+++ b/sticker-creator/components/ConfirmModal.tsx
@@ -9,7 +9,9 @@ import { ConfirmDialog } from '../elements/ConfirmDialog';
 
 export type Mode = 'removable' | 'pick-emoji' | 'add';
 
-export const ConfirmModal = React.memo((props: Props) => {
+export const ConfirmModal = React.memo(function ConfirmModalInner(
+  props: Props
+) {
   const { onCancel } = props;
   const [popperRoot, setPopperRoot] = React.useState<HTMLDivElement>();
 
diff --git a/sticker-creator/components/ShareButtons.tsx b/sticker-creator/components/ShareButtons.tsx
index f5173be48..8d6bfd7dd 100644
--- a/sticker-creator/components/ShareButtons.tsx
+++ b/sticker-creator/components/ShareButtons.tsx
@@ -12,7 +12,7 @@ export type Props = {
 };
 
 export const ShareButtons: React.ComponentType<Props> = React.memo(
-  ({ value }) => {
+  function ShareButtonsInner({ value }) {
     const i18n = useI18n();
 
     const buttonPaths = React.useMemo<
diff --git a/sticker-creator/components/StickerFrame.stories.tsx b/sticker-creator/components/StickerFrame.stories.tsx
index 7c0df44a9..518783008 100644
--- a/sticker-creator/components/StickerFrame.stories.tsx
+++ b/sticker-creator/components/StickerFrame.stories.tsx
@@ -47,7 +47,7 @@ _StickerFrame.story = {
   name: 'StickerFrame, add sticker',
 };
 
-export const EmojiSelectMode = (): JSX.Element => {
+export function EmojiSelectMode(): JSX.Element {
   const image = text('image url', '/fixtures/512x515-thumbs-up-lincoln.webp');
   const setSkinTone = action('setSkinTone');
   const onRemove = action('onRemove');
@@ -71,7 +71,7 @@ export const EmojiSelectMode = (): JSX.Element => {
       />
     </StoryRow>
   );
-};
+}
 
 EmojiSelectMode.story = {
   name: 'StickerFrame, emoji select mode',
diff --git a/sticker-creator/components/StickerFrame.tsx b/sticker-creator/components/StickerFrame.tsx
index e764c2e1b..9ba23b2b1 100644
--- a/sticker-creator/components/StickerFrame.tsx
+++ b/sticker-creator/components/StickerFrame.tsx
@@ -66,243 +66,239 @@ const ImageHandle = SortableHandle((props: { src: string }) => (
   <img className={styles.image} {...props} alt="Sticker" />
 ));
 
-export const StickerFrame = React.memo(
-  ({
-    id,
-    emojiData,
-    image,
-    showGuide,
-    mode,
-    onRemove,
-    onPickEmoji,
-    skinTone,
-    onSetSkinTone,
-    onDrop,
-  }: Props) => {
-    const i18n = useI18n();
-    const [emojiPickerOpen, setEmojiPickerOpen] = React.useState(false);
-    const [emojiPopperRoot, setEmojiPopperRoot] =
-      React.useState<HTMLElement | null>(null);
-    const [previewActive, setPreviewActive] = React.useState(false);
-    const [previewPopperRoot, setPreviewPopperRoot] =
-      React.useState<HTMLElement | null>(null);
-    const timerRef = React.useRef<number>();
+export const StickerFrame = React.memo(function StickerFrameInner({
+  id,
+  emojiData,
+  image,
+  showGuide,
+  mode,
+  onRemove,
+  onPickEmoji,
+  skinTone,
+  onSetSkinTone,
+  onDrop,
+}: Props) {
+  const i18n = useI18n();
+  const [emojiPickerOpen, setEmojiPickerOpen] = React.useState(false);
+  const [emojiPopperRoot, setEmojiPopperRoot] =
+    React.useState<HTMLElement | null>(null);
+  const [previewActive, setPreviewActive] = React.useState(false);
+  const [previewPopperRoot, setPreviewPopperRoot] =
+    React.useState<HTMLElement | null>(null);
+  const timerRef = React.useRef<number>();
 
-    const handleToggleEmojiPicker = React.useCallback(() => {
-      setEmojiPickerOpen(open => !open);
-    }, [setEmojiPickerOpen]);
+  const handleToggleEmojiPicker = React.useCallback(() => {
+    setEmojiPickerOpen(open => !open);
+  }, [setEmojiPickerOpen]);
 
-    const handlePickEmoji = React.useCallback(
-      (emoji: EmojiPickDataType) => {
-        if (!id) {
-          return;
-        }
-        if (!onPickEmoji) {
-          throw new Error(
-            'StickerFrame/handlePickEmoji: onPickEmoji was not provided!'
-          );
-        }
-        onPickEmoji({ id, emoji });
-        setEmojiPickerOpen(false);
-      },
-      [id, onPickEmoji, setEmojiPickerOpen]
-    );
-
-    const handleRemove = React.useCallback(() => {
+  const handlePickEmoji = React.useCallback(
+    (emoji: EmojiPickDataType) => {
       if (!id) {
         return;
       }
-      if (!onRemove) {
+      if (!onPickEmoji) {
         throw new Error(
-          'StickerFrame/handleRemove: onRemove was not provided!'
+          'StickerFrame/handlePickEmoji: onPickEmoji was not provided!'
         );
       }
-      onRemove(id);
-    }, [onRemove, id]);
+      onPickEmoji({ id, emoji });
+      setEmojiPickerOpen(false);
+    },
+    [id, onPickEmoji, setEmojiPickerOpen]
+  );
 
-    const handleMouseEnter = React.useCallback(() => {
-      window.clearTimeout(timerRef.current);
-      timerRef.current = window.setTimeout(() => {
-        setPreviewActive(true);
-      }, 500);
-    }, [timerRef, setPreviewActive]);
+  const handleRemove = React.useCallback(() => {
+    if (!id) {
+      return;
+    }
+    if (!onRemove) {
+      throw new Error('StickerFrame/handleRemove: onRemove was not provided!');
+    }
+    onRemove(id);
+  }, [onRemove, id]);
 
-    const handleMouseLeave = React.useCallback(() => {
+  const handleMouseEnter = React.useCallback(() => {
+    window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => {
+      setPreviewActive(true);
+    }, 500);
+  }, [timerRef, setPreviewActive]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    clearTimeout(timerRef.current);
+    setPreviewActive(false);
+  }, [timerRef, setPreviewActive]);
+
+  React.useEffect(
+    () => () => {
       clearTimeout(timerRef.current);
-      setPreviewActive(false);
-    }, [timerRef, setPreviewActive]);
+    },
+    [timerRef]
+  );
 
-    React.useEffect(
-      () => () => {
-        clearTimeout(timerRef.current);
-      },
-      [timerRef]
-    );
+  const { createRoot, removeRoot } = React.useContext(PopperRootContext);
 
-    const { createRoot, removeRoot } = React.useContext(PopperRootContext);
+  // Create popper root and handle outside clicks
+  React.useEffect(() => {
+    if (emojiPickerOpen) {
+      const root = createRoot();
+      setEmojiPopperRoot(root);
+      const handleOutsideClick = ({ target }: MouseEvent) => {
+        if (!root.contains(target as Node)) {
+          setEmojiPickerOpen(false);
+        }
+      };
+      document.addEventListener('click', handleOutsideClick);
 
-    // Create popper root and handle outside clicks
-    React.useEffect(() => {
-      if (emojiPickerOpen) {
-        const root = createRoot();
-        setEmojiPopperRoot(root);
-        const handleOutsideClick = ({ target }: MouseEvent) => {
-          if (!root.contains(target as Node)) {
-            setEmojiPickerOpen(false);
-          }
-        };
-        document.addEventListener('click', handleOutsideClick);
+      return () => {
+        removeRoot(root);
+        setEmojiPopperRoot(null);
+        document.removeEventListener('click', handleOutsideClick);
+      };
+    }
 
-        return () => {
-          removeRoot(root);
-          setEmojiPopperRoot(null);
-          document.removeEventListener('click', handleOutsideClick);
-        };
-      }
+    return noop;
+  }, [
+    createRoot,
+    emojiPickerOpen,
+    removeRoot,
+    setEmojiPickerOpen,
+    setEmojiPopperRoot,
+  ]);
 
-      return noop;
-    }, [
-      createRoot,
-      emojiPickerOpen,
-      removeRoot,
-      setEmojiPickerOpen,
-      setEmojiPopperRoot,
-    ]);
+  React.useEffect(() => {
+    if (mode !== 'pick-emoji' && image && previewActive) {
+      const root = createRoot();
+      setPreviewPopperRoot(root);
 
-    React.useEffect(() => {
-      if (mode !== 'pick-emoji' && image && previewActive) {
-        const root = createRoot();
-        setPreviewPopperRoot(root);
+      return () => {
+        removeRoot(root);
+      };
+    }
 
-        return () => {
-          removeRoot(root);
-        };
-      }
+    return noop;
+  }, [
+    createRoot,
+    image,
+    mode,
+    previewActive,
+    removeRoot,
+    setPreviewPopperRoot,
+  ]);
 
-      return noop;
-    }, [
-      createRoot,
-      image,
-      mode,
-      previewActive,
-      removeRoot,
-      setPreviewPopperRoot,
-    ]);
+  const [dragActive, setDragActive] = React.useState<boolean>(false);
+  const containerClass = dragActive ? styles.dragActive : styles.container;
 
-    const [dragActive, setDragActive] = React.useState<boolean>(false);
-    const containerClass = dragActive ? styles.dragActive : styles.container;
-
-    return (
-      <PopperManager>
-        <PopperReference>
-          {({ ref: rootRef }) => (
-            <div
-              className={containerClass}
-              onMouseEnter={handleMouseEnter}
-              onMouseLeave={handleMouseLeave}
-              ref={rootRef}
-            >
-              {
-                // eslint-disable-next-line no-nested-ternary
-                mode !== 'add' ? (
-                  image ? (
-                    <ImageHandle src={image} />
-                  ) : (
-                    <div className={styles.spinner}>{spinnerSvg}</div>
-                  )
-                ) : null
-              }
-              {showGuide && mode !== 'add' ? (
-                <div className={styles.guide} />
-              ) : null}
-              {mode === 'add' && onDrop ? (
-                <DropZone
-                  label={i18n('StickerCreator--DropStage--dragDrop')}
-                  onDrop={onDrop}
-                  inner
-                  onDragActive={setDragActive}
-                />
-              ) : null}
-              {mode === 'removable' ? (
-                <button
-                  type="button"
-                  aria-label={i18n('StickerCreator--DropStage--removeSticker')}
-                  className={styles.closeButton}
-                  onClick={handleRemove}
-                  // Reverse the mouseenter/leave logic for the remove button so
-                  // we don't accidentally cover the remove button
-                  onMouseEnter={handleMouseLeave}
-                  onMouseLeave={handleMouseEnter}
-                >
-                  {closeSvg}
-                </button>
-              ) : null}
-              {mode === 'pick-emoji' ? (
-                <PopperManager>
-                  <PopperReference>
-                    {({ ref }) => (
-                      <button
-                        type="button"
-                        ref={ref}
-                        className={styles.emojiButton}
-                        onClick={handleToggleEmojiPicker}
-                      >
-                        {emojiData ? (
-                          <Emoji {...emojiData} size={24} />
-                        ) : (
-                          <AddEmoji />
-                        )}
-                      </button>
-                    )}
-                  </PopperReference>
-                  {emojiPickerOpen && emojiPopperRoot
-                    ? createPortal(
-                        <Popper placement="bottom-start">
-                          {({ ref, style }) => (
-                            <EmojiPicker
-                              ref={ref}
-                              style={{ ...style, marginTop: '8px' }}
-                              i18n={i18n}
-                              onPickEmoji={handlePickEmoji}
-                              skinTone={skinTone}
-                              onSetSkinTone={onSetSkinTone}
-                              onClose={handleToggleEmojiPicker}
-                            />
-                          )}
-                        </Popper>,
-                        emojiPopperRoot
-                      )
-                    : null}
-                </PopperManager>
-              ) : null}
-              {mode !== 'pick-emoji' &&
-              image &&
-              previewActive &&
-              previewPopperRoot
-                ? createPortal(
-                    <Popper
-                      placement="bottom"
-                      modifiers={[
-                        { name: 'offset', options: { offset: [undefined, 8] } },
-                      ]}
+  return (
+    <PopperManager>
+      <PopperReference>
+        {({ ref: rootRef }) => (
+          <div
+            className={containerClass}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            ref={rootRef}
+          >
+            {
+              // eslint-disable-next-line no-nested-ternary
+              mode !== 'add' ? (
+                image ? (
+                  <ImageHandle src={image} />
+                ) : (
+                  <div className={styles.spinner}>{spinnerSvg}</div>
+                )
+              ) : null
+            }
+            {showGuide && mode !== 'add' ? (
+              <div className={styles.guide} />
+            ) : null}
+            {mode === 'add' && onDrop ? (
+              <DropZone
+                label={i18n('StickerCreator--DropStage--dragDrop')}
+                onDrop={onDrop}
+                inner
+                onDragActive={setDragActive}
+              />
+            ) : null}
+            {mode === 'removable' ? (
+              <button
+                type="button"
+                aria-label={i18n('StickerCreator--DropStage--removeSticker')}
+                className={styles.closeButton}
+                onClick={handleRemove}
+                // Reverse the mouseenter/leave logic for the remove button so
+                // we don't accidentally cover the remove button
+                onMouseEnter={handleMouseLeave}
+                onMouseLeave={handleMouseEnter}
+              >
+                {closeSvg}
+              </button>
+            ) : null}
+            {mode === 'pick-emoji' ? (
+              <PopperManager>
+                <PopperReference>
+                  {({ ref }) => (
+                    <button
+                      type="button"
+                      ref={ref}
+                      className={styles.emojiButton}
+                      onClick={handleToggleEmojiPicker}
                     >
-                      {({ ref, style, arrowProps, placement }) => (
-                        <StickerPreview
-                          ref={ref}
-                          style={style}
-                          image={image}
-                          arrowProps={arrowProps}
-                          placement={placement}
-                        />
+                      {emojiData ? (
+                        <Emoji {...emojiData} size={24} />
+                      ) : (
+                        <AddEmoji />
                       )}
-                    </Popper>,
-                    previewPopperRoot
-                  )
-                : null}
-            </div>
-          )}
-        </PopperReference>
-      </PopperManager>
-    );
-  }
-);
+                    </button>
+                  )}
+                </PopperReference>
+                {emojiPickerOpen && emojiPopperRoot
+                  ? createPortal(
+                      <Popper placement="bottom-start">
+                        {({ ref, style }) => (
+                          <EmojiPicker
+                            ref={ref}
+                            style={{ ...style, marginTop: '8px' }}
+                            i18n={i18n}
+                            onPickEmoji={handlePickEmoji}
+                            skinTone={skinTone}
+                            onSetSkinTone={onSetSkinTone}
+                            onClose={handleToggleEmojiPicker}
+                          />
+                        )}
+                      </Popper>,
+                      emojiPopperRoot
+                    )
+                  : null}
+              </PopperManager>
+            ) : null}
+            {mode !== 'pick-emoji' &&
+            image &&
+            previewActive &&
+            previewPopperRoot
+              ? createPortal(
+                  <Popper
+                    placement="bottom"
+                    modifiers={[
+                      { name: 'offset', options: { offset: [undefined, 8] } },
+                    ]}
+                  >
+                    {({ ref, style, arrowProps, placement }) => (
+                      <StickerPreview
+                        ref={ref}
+                        style={style}
+                        image={image}
+                        arrowProps={arrowProps}
+                        placement={placement}
+                      />
+                    )}
+                  </Popper>,
+                  previewPopperRoot
+                )
+              : null}
+          </div>
+        )}
+      </PopperReference>
+    </PopperManager>
+  );
+});
diff --git a/sticker-creator/components/StickerPackPreview.tsx b/sticker-creator/components/StickerPackPreview.tsx
index 2adbcc20a..3dfce5e34 100644
--- a/sticker-creator/components/StickerPackPreview.tsx
+++ b/sticker-creator/components/StickerPackPreview.tsx
@@ -11,27 +11,29 @@ export type Props = {
   author: string;
 };
 
-export const StickerPackPreview = React.memo(
-  ({ images, title, author }: Props) => {
-    const i18n = useI18n();
+export const StickerPackPreview = React.memo(function StickerPackPreviewInner({
+  images,
+  title,
+  author,
+}: Props) {
+  const i18n = useI18n();
 
-    return (
-      <div className={styles.container}>
-        <div className={styles.titleBar}>
-          {i18n('StickerCreator--Preview--title')}
-        </div>
-        <div className={styles.scroller}>
-          <div className={styles.grid}>
-            {images.map(src => (
-              <img key={src} className={styles.sticker} src={src} alt={src} />
-            ))}
-          </div>
-        </div>
-        <div className={styles.meta}>
-          <div className={styles.metaTitle}>{title}</div>
-          <div className={styles.metaAuthor}>{author}</div>
+  return (
+    <div className={styles.container}>
+      <div className={styles.titleBar}>
+        {i18n('StickerCreator--Preview--title')}
+      </div>
+      <div className={styles.scroller}>
+        <div className={styles.grid}>
+          {images.map(src => (
+            <img key={src} className={styles.sticker} src={src} alt={src} />
+          ))}
         </div>
       </div>
-    );
-  }
-);
+      <div className={styles.meta}>
+        <div className={styles.metaTitle}>{title}</div>
+        <div className={styles.metaAuthor}>{author}</div>
+      </div>
+    </div>
+  );
+});
diff --git a/sticker-creator/components/Toaster.tsx b/sticker-creator/components/Toaster.tsx
index 2d6b31223..22afe959c 100644
--- a/sticker-creator/components/Toaster.tsx
+++ b/sticker-creator/components/Toaster.tsx
@@ -12,7 +12,11 @@ export type Props = React.HTMLAttributes<HTMLDivElement> & {
 
 const DEFAULT_DISMISS = 1e4;
 
-export const Toaster = React.memo(({ loaf, onDismiss, className }: Props) => {
+export const Toaster = React.memo(function ToasterInner({
+  loaf,
+  onDismiss,
+  className,
+}: Props) {
   const slice = last(loaf);
 
   React.useEffect(() => {
diff --git a/sticker-creator/elements/Button.tsx b/sticker-creator/elements/Button.tsx
index 6e05369c7..ad5e773d6 100644
--- a/sticker-creator/elements/Button.tsx
+++ b/sticker-creator/elements/Button.tsx
@@ -27,11 +27,11 @@ const getClassName = ({ primary, pill }: Props) => {
   return styles.base;
 };
 
-export const Button: React.ComponentType<Props> = ({
+export function Button({
   className,
   children,
   ...otherProps
-}) => {
+}: React.PropsWithChildren<Props>): JSX.Element {
   return (
     <button
       type="button"
@@ -41,4 +41,4 @@ export const Button: React.ComponentType<Props> = ({
       {children}
     </button>
   );
-};
+}
diff --git a/sticker-creator/elements/ConfirmDialog.tsx b/sticker-creator/elements/ConfirmDialog.tsx
index 5e1cff7e0..7a0909c0d 100644
--- a/sticker-creator/elements/ConfirmDialog.tsx
+++ b/sticker-creator/elements/ConfirmDialog.tsx
@@ -14,14 +14,14 @@ export type Props = {
   readonly onCancel: () => unknown;
 };
 
-export const ConfirmDialog: React.ComponentType<Props> = ({
+export function ConfirmDialog({
   title,
   children,
   confirm,
   cancel,
   onConfirm,
   onCancel,
-}) => {
+}: Props): JSX.Element {
   const i18n = useI18n();
   const cancelText = cancel || i18n('StickerCreator--ConfirmDialog--cancel');
 
@@ -43,4 +43,4 @@ export const ConfirmDialog: React.ComponentType<Props> = ({
       </div>
     </div>
   );
-};
+}
diff --git a/sticker-creator/elements/CopyText.tsx b/sticker-creator/elements/CopyText.tsx
index 5a1e338c5..c8e437a7e 100644
--- a/sticker-creator/elements/CopyText.tsx
+++ b/sticker-creator/elements/CopyText.tsx
@@ -14,7 +14,7 @@ export type Props = {
 };
 
 export const CopyText: React.ComponentType<Props> = React.memo(
-  ({ label, onCopy, value }) => {
+  function CopyTextInner({ label, onCopy, value }) {
     const i18n = useI18n();
     const handleClick = React.useCallback(() => {
       copy(value);
diff --git a/sticker-creator/elements/DropZone.tsx b/sticker-creator/elements/DropZone.tsx
index 58a0f5e56..4a5752400 100644
--- a/sticker-creator/elements/DropZone.tsx
+++ b/sticker-creator/elements/DropZone.tsx
@@ -28,7 +28,7 @@ const getClassName = ({ inner }: Props, isDragActive: boolean) => {
   return styles.standalone;
 };
 
-export const DropZone: React.ComponentType<Props> = props => {
+export function DropZone(props: Props): JSX.Element {
   const { inner, label, onDrop, onDragActive } = props;
   const i18n = useI18n();
 
@@ -52,7 +52,7 @@ export const DropZone: React.ComponentType<Props> = props => {
     <div
       {...getRootProps({ className: getClassName(props, isDragActive) })}
       role="button"
-      area-label={label}
+      aria-label={label}
     >
       <input {...getInputProps()} />
       <svg viewBox="0 0 36 36" width="36px" height="36px">
@@ -67,4 +67,4 @@ export const DropZone: React.ComponentType<Props> = props => {
       ) : null}
     </div>
   );
-};
+}
diff --git a/sticker-creator/elements/LabeledCheckbox.tsx b/sticker-creator/elements/LabeledCheckbox.tsx
index 5607cb71c..9fc6d2964 100644
--- a/sticker-creator/elements/LabeledCheckbox.tsx
+++ b/sticker-creator/elements/LabeledCheckbox.tsx
@@ -17,28 +17,30 @@ const checkSvg = (
   </svg>
 );
 
-export const LabeledCheckbox = React.memo(
-  ({ children, value, onChange }: Props) => {
-    const handleChange = React.useCallback(() => {
-      if (onChange !== undefined) {
-        onChange(!value);
-      }
-    }, [onChange, value]);
+export const LabeledCheckbox = React.memo(function LabeledCheckboxInner({
+  children,
+  value,
+  onChange,
+}: Props) {
+  const handleChange = React.useCallback(() => {
+    if (onChange !== undefined) {
+      onChange(!value);
+    }
+  }, [onChange, value]);
 
-    const className = value ? styles.checkboxChecked : styles.checkbox;
+  const className = value ? styles.checkboxChecked : styles.checkbox;
 
-    return (
-      <label className={styles.base}>
-        <input
-          type="checkbox"
-          className={styles.input}
-          checked={value}
-          aria-checked={value}
-          onChange={handleChange}
-        />
-        <span className={className}>{value ? checkSvg : null}</span>
-        <Inline className={styles.label}>{children}</Inline>
-      </label>
-    );
-  }
-);
+  return (
+    <label className={styles.base}>
+      <input
+        type="checkbox"
+        className={styles.input}
+        checked={value}
+        aria-checked={value}
+        onChange={handleChange}
+      />
+      <span className={className}>{value ? checkSvg : null}</span>
+      <Inline className={styles.label}>{children}</Inline>
+    </label>
+  );
+});
diff --git a/sticker-creator/elements/LabeledInput.tsx b/sticker-creator/elements/LabeledInput.tsx
index 095b150b4..a034bcc58 100644
--- a/sticker-creator/elements/LabeledInput.tsx
+++ b/sticker-creator/elements/LabeledInput.tsx
@@ -12,28 +12,31 @@ export type Props = {
   onChange?: (value: string) => unknown;
 };
 
-export const LabeledInput = React.memo(
-  ({ children, value, placeholder, onChange }: Props) => {
-    const handleChange = React.useCallback(
-      (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (onChange !== undefined) {
-          onChange(e.currentTarget.value);
-        }
-      },
-      [onChange]
-    );
+export const LabeledInput = React.memo(function LabeledInputInner({
+  children,
+  value,
+  placeholder,
+  onChange,
+}: Props) {
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (onChange !== undefined) {
+        onChange(e.currentTarget.value);
+      }
+    },
+    [onChange]
+  );
 
-    return (
-      <label className={styles.container}>
-        <Inline className={styles.label}>{children}</Inline>
-        <input
-          type="text"
-          className={styles.input}
-          placeholder={placeholder}
-          value={value}
-          onChange={handleChange}
-        />
-      </label>
-    );
-  }
-);
+  return (
+    <label className={styles.container}>
+      <Inline className={styles.label}>{children}</Inline>
+      <input
+        type="text"
+        className={styles.input}
+        placeholder={placeholder}
+        value={value}
+        onChange={handleChange}
+      />
+    </label>
+  );
+});
diff --git a/sticker-creator/elements/MessageBubble.tsx b/sticker-creator/elements/MessageBubble.tsx
index 8697ad6f0..a75f9cff2 100644
--- a/sticker-creator/elements/MessageBubble.tsx
+++ b/sticker-creator/elements/MessageBubble.tsx
@@ -10,14 +10,11 @@ export type Props = Pick<MessageMetaProps, 'minutesAgo'> & {
   children: React.ReactNode;
 };
 
-export const MessageBubble: React.ComponentType<Props> = ({
-  children,
-  minutesAgo,
-}) => {
+export function MessageBubble({ children, minutesAgo }: Props): JSX.Element {
   return (
     <div className={styles.base}>
       {children}
       <MessageMeta kind="bubble" minutesAgo={minutesAgo} />
     </div>
   );
-};
+}
diff --git a/sticker-creator/elements/MessageMeta.tsx b/sticker-creator/elements/MessageMeta.tsx
index 74c6bfe59..da754b34f 100644
--- a/sticker-creator/elements/MessageMeta.tsx
+++ b/sticker-creator/elements/MessageMeta.tsx
@@ -22,7 +22,7 @@ const getItemClass = ({ kind }: Props) => {
   return styles.bubble;
 };
 
-export const MessageMeta = React.memo((props: Props) => {
+export const MessageMeta = React.memo(function MessageMetaInner(props: Props) {
   const i18n = useI18n();
   const itemClass = getItemClass(props);
 
diff --git a/sticker-creator/elements/MessageSticker.tsx b/sticker-creator/elements/MessageSticker.tsx
index b3495e48c..95a98a344 100644
--- a/sticker-creator/elements/MessageSticker.tsx
+++ b/sticker-creator/elements/MessageSticker.tsx
@@ -10,15 +10,15 @@ export type Props = MessageMetaProps & {
   image: string;
 };
 
-export const MessageSticker: React.ComponentType<Props> = ({
+export function MessageSticker({
   image,
   kind,
   minutesAgo,
-}) => {
+}: Props): JSX.Element {
   return (
     <div className={styles.base}>
       <img src={image} alt="Sticker" className={styles.image} />
       <MessageMeta kind={kind} minutesAgo={minutesAgo} />
     </div>
   );
-};
+}
diff --git a/sticker-creator/elements/PageHeader.tsx b/sticker-creator/elements/PageHeader.tsx
index 2a17e9e19..d1ed108cc 100644
--- a/sticker-creator/elements/PageHeader.tsx
+++ b/sticker-creator/elements/PageHeader.tsx
@@ -9,6 +9,8 @@ export type Props = {
   children: React.ReactNode;
 };
 
-export const PageHeader = React.memo(({ children }: Props) => (
-  <H1 className={styles.base}>{children}</H1>
-));
+export const PageHeader = React.memo(function PageHeaderInner({
+  children,
+}: Props) {
+  return <H1 className={styles.base}>{children}</H1>;
+});
diff --git a/sticker-creator/elements/ProgressBar.tsx b/sticker-creator/elements/ProgressBar.tsx
index 73fd51379..ac50a07e9 100644
--- a/sticker-creator/elements/ProgressBar.tsx
+++ b/sticker-creator/elements/ProgressBar.tsx
@@ -11,11 +11,17 @@ export type Props = Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
   readonly total: number;
 };
 
-export const ProgressBar = React.memo(({ className, count, total }: Props) => (
-  <div className={classnames(styles.base, className)}>
-    <div
-      className={styles.bar}
-      style={{ width: `${Math.floor((count / total) * 100)}%` }}
-    />
-  </div>
-));
+export const ProgressBar = React.memo(function ProgressBarInner({
+  className,
+  count,
+  total,
+}: Props) {
+  return (
+    <div className={classnames(styles.base, className)}>
+      <div
+        className={styles.bar}
+        style={{ width: `${Math.floor((count / total) * 100)}%` }}
+      />
+    </div>
+  );
+});
diff --git a/sticker-creator/elements/StoryRow.tsx b/sticker-creator/elements/StoryRow.tsx
index e981fe2ba..dfa88582b 100644
--- a/sticker-creator/elements/StoryRow.tsx
+++ b/sticker-creator/elements/StoryRow.tsx
@@ -31,7 +31,9 @@ const getClassName = ({ left, right, top, bottom }: Props) => {
   return styles.base;
 };
 
-export const StoryRow: React.ComponentType<Props> = ({
+export function StoryRow({
   children,
   ...props
-}) => <div className={getClassName(props)}>{children}</div>;
+}: React.PropsWithChildren<Props>): JSX.Element {
+  return <div className={getClassName(props)}>{children}</div>;
+}
diff --git a/sticker-creator/elements/Toast.tsx b/sticker-creator/elements/Toast.tsx
index 702e5a2f1..433270dc0 100644
--- a/sticker-creator/elements/Toast.tsx
+++ b/sticker-creator/elements/Toast.tsx
@@ -9,12 +9,18 @@ export type Props = React.HTMLAttributes<HTMLButtonElement> & {
   children: React.ReactNode;
 };
 
-export const Toast = React.memo(({ children, className, ...rest }: Props) => (
-  <button
-    type="button"
-    className={classNames(styles.base, className)}
-    {...rest}
-  >
-    {children}
-  </button>
-));
+export const Toast = React.memo(function ToastInner({
+  children,
+  className,
+  ...rest
+}: Props) {
+  return (
+    <button
+      type="button"
+      className={classNames(styles.base, className)}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+});
diff --git a/sticker-creator/elements/Typography.stories.tsx b/sticker-creator/elements/Typography.stories.tsx
index 6c30cbe7b..a531fc0e9 100644
--- a/sticker-creator/elements/Typography.stories.tsx
+++ b/sticker-creator/elements/Typography.stories.tsx
@@ -1,7 +1,7 @@
 // Copyright 2019-2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* eslint-disable no-script-url, jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/anchor-is-valid */
 
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
@@ -13,7 +13,7 @@ export default {
   title: 'Sticker Creator/elements',
 };
 
-export const Typography = (): JSX.Element => {
+export function Typography(): JSX.Element {
   const child = text('text', 'foo bar');
 
   return (
@@ -32,11 +32,9 @@ export const Typography = (): JSX.Element => {
       <StoryRow left>
         <Text>
           {child} {child} {child} {child}{' '}
-          <a href="javascript: void 0;">
-            Something something something dark side.
-          </a>
+          <a href="#">Something something something dark side.</a>
         </Text>
       </StoryRow>
     </>
   );
-};
+}
diff --git a/sticker-creator/elements/Typography.tsx b/sticker-creator/elements/Typography.tsx
index d4b664305..a89621b48 100644
--- a/sticker-creator/elements/Typography.tsx
+++ b/sticker-creator/elements/Typography.tsx
@@ -18,30 +18,38 @@ export type ParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {
 };
 export type SpanProps = React.HTMLAttributes<HTMLSpanElement>;
 
-export const H1 = React.memo(
-  ({ children, className, ...rest }: Props & HeadingProps) => (
+export const H1 = React.memo(function H1Inner({
+  children,
+  className,
+  ...rest
+}: Props & HeadingProps) {
+  return (
     <h1 className={classnames(styles.h1, className)} {...rest}>
       {children}
     </h1>
-  )
-);
+  );
+});
 
-export const H2 = React.memo(
-  ({ children, className, ...rest }: Props & HeadingProps) => (
+export const H2 = React.memo(function H2Inner({
+  children,
+  className,
+  ...rest
+}: Props & HeadingProps) {
+  return (
     <h2 className={classnames(styles.h2, className)} {...rest}>
       {children}
     </h2>
-  )
-);
+  );
+});
 
-export const Text = React.memo(
-  ({
-    children,
-    className,
-    center,
-    secondary,
-    ...rest
-  }: Props & ParagraphProps) => (
+export const Text = React.memo(function TextInner({
+  children,
+  className,
+  center,
+  secondary,
+  ...rest
+}: Props & ParagraphProps) {
+  return (
     <p
       className={classnames(
         center ? styles.textCenter : styles.text,
@@ -52,13 +60,17 @@ export const Text = React.memo(
     >
       {children}
     </p>
-  )
-);
+  );
+});
 
-export const Inline = React.memo(
-  ({ children, className, ...rest }: Props & SpanProps) => (
+export const Inline = React.memo(function InlineInner({
+  children,
+  className,
+  ...rest
+}: Props & SpanProps) {
+  return (
     <span className={classnames(styles.text, className)} {...rest}>
       {children}
     </span>
-  )
-);
+  );
+});
diff --git a/sticker-creator/elements/icons/AddEmoji.tsx b/sticker-creator/elements/icons/AddEmoji.tsx
index 9e1b1fb84..5cb0cb790 100644
--- a/sticker-creator/elements/icons/AddEmoji.tsx
+++ b/sticker-creator/elements/icons/AddEmoji.tsx
@@ -3,8 +3,10 @@
 
 import * as React from 'react';
 
-export const AddEmoji = React.memo(() => (
-  <svg width="32px" height="20px" viewBox="0 0 32 20">
-    <path d="M21.993 15.5a5.679 5.679 0 0 1-4.6-2.29.75.75 0 1 1 1.212-.883 4.266 4.266 0 0 0 6.786-.015.749.749 0 0 1 1.216.876 5.671 5.671 0 0 1-4.614 2.312zM22 2.5a7.254 7.254 0 0 0-7.5 7.5 7.254 7.254 0 0 0 7.5 7.5 7.254 7.254 0 0 0 7.5-7.5A7.254 7.254 0 0 0 22 2.5M22 1a8.751 8.751 0 0 1 9 9 8.751 8.751 0 0 1-9 9 8.751 8.751 0 0 1-9-9 8.751 8.751 0 0 1 9-9zm-2.75 5.75A1.476 1.476 0 0 0 18 8.375 1.476 1.476 0 0 0 19.25 10a1.476 1.476 0 0 0 1.25-1.625 1.476 1.476 0 0 0-1.25-1.625zm5.5 0a1.476 1.476 0 0 0-1.25 1.625A1.476 1.476 0 0 0 24.75 10 1.476 1.476 0 0 0 26 8.375a1.476 1.476 0 0 0-1.25-1.625zM10 9.25H6.75V6h-1.5v3.25H2v1.5h3.25V14h1.5v-3.25H10z" />
-  </svg>
-));
+export const AddEmoji = React.memo(function AddEmojiInner() {
+  return (
+    <svg width="32px" height="20px" viewBox="0 0 32 20">
+      <path d="M21.993 15.5a5.679 5.679 0 0 1-4.6-2.29.75.75 0 1 1 1.212-.883 4.266 4.266 0 0 0 6.786-.015.749.749 0 0 1 1.216.876 5.671 5.671 0 0 1-4.614 2.312zM22 2.5a7.254 7.254 0 0 0-7.5 7.5 7.254 7.254 0 0 0 7.5 7.5 7.254 7.254 0 0 0 7.5-7.5A7.254 7.254 0 0 0 22 2.5M22 1a8.751 8.751 0 0 1 9 9 8.751 8.751 0 0 1-9 9 8.751 8.751 0 0 1-9-9 8.751 8.751 0 0 1 9-9zm-2.75 5.75A1.476 1.476 0 0 0 18 8.375 1.476 1.476 0 0 0 19.25 10a1.476 1.476 0 0 0 1.25-1.625 1.476 1.476 0 0 0-1.25-1.625zm5.5 0a1.476 1.476 0 0 0-1.25 1.625A1.476 1.476 0 0 0 24.75 10 1.476 1.476 0 0 0 26 8.375a1.476 1.476 0 0 0-1.25-1.625zM10 9.25H6.75V6h-1.5v3.25H2v1.5h3.25V14h1.5v-3.25H10z" />
+    </svg>
+  );
+});
diff --git a/sticker-creator/root.tsx b/sticker-creator/root.tsx
index fb4714d92..139e64bd3 100644
--- a/sticker-creator/root.tsx
+++ b/sticker-creator/root.tsx
@@ -12,17 +12,19 @@ import { I18n } from './util/i18n';
 
 const { localeMessages, SignalContext } = window;
 
-const ColdRoot = () => (
-  <ReduxProvider store={store}>
-    <Router history={history}>
-      <I18n messages={localeMessages} locale={SignalContext.config.locale}>
-        <App
-          executeMenuRole={SignalContext.executeMenuRole}
-          hasCustomTitleBar={SignalContext.OS.hasCustomTitleBar()}
-        />
-      </I18n>
-    </Router>
-  </ReduxProvider>
-);
+function ColdRoot() {
+  return (
+    <ReduxProvider store={store}>
+      <Router history={history}>
+        <I18n messages={localeMessages} locale={SignalContext.config.locale}>
+          <App
+            executeMenuRole={SignalContext.executeMenuRole}
+            hasCustomTitleBar={SignalContext.OS.hasCustomTitleBar()}
+          />
+        </I18n>
+      </Router>
+    </ReduxProvider>
+  );
+}
 
 export const Root = hot(ColdRoot);
diff --git a/sticker-creator/store/ducks/stickers.ts b/sticker-creator/store/ducks/stickers.ts
index 29d7d1f67..dd2c26c75 100644
--- a/sticker-creator/store/ducks/stickers.ts
+++ b/sticker-creator/store/ducks/stickers.ts
@@ -31,6 +31,8 @@ import type { EmojiPickDataType } from '../../../ts/components/emoji/EmojiPicker
 import { convertShortName } from '../../../ts/components/emoji/lib';
 import { isNotNil } from '../../../ts/util/isNotNil';
 
+type StickerEmojiData = { id: string; emoji: EmojiPickDataType };
+
 export const initializeStickers = createAction<Array<string>>(
   'stickers/initializeStickers'
 );
@@ -41,8 +43,7 @@ export const removeSticker = createAction<string>('stickers/removeSticker');
 export const moveSticker = createAction<SortEnd>('stickers/moveSticker');
 export const setCover = createAction<StickerImageData>('stickers/setCover');
 export const resetCover = createAction<StickerImageData>('stickers/resetCover');
-export const setEmoji =
-  createAction<{ id: string; emoji: EmojiPickDataType }>('stickers/setEmoji');
+export const setEmoji = createAction<StickerEmojiData>('stickers/setEmoji');
 export const setTitle = createAction<string>('stickers/setTitle');
 export const setAuthor = createAction<string>('stickers/setAuthor');
 export const setPackMeta = createAction<PackMetaData>('stickers/setPackMeta');
diff --git a/sticker-creator/util/i18n.tsx b/sticker-creator/util/i18n.tsx
index 03ddf70d5..05d5958ec 100644
--- a/sticker-creator/util/i18n.tsx
+++ b/sticker-creator/util/i18n.tsx
@@ -27,11 +27,7 @@ export type I18nProps = {
   messages: LocaleMessagesType;
 };
 
-export const I18n = ({
-  messages,
-  locale,
-  children,
-}: I18nProps): JSX.Element => {
+export function I18n({ messages, locale, children }: I18nProps): JSX.Element {
   const { icuMessages, legacyMessages } = React.useMemo(() => {
     return classifyMessages(messages);
   }, [messages]);
@@ -115,6 +111,6 @@ export const I18n = ({
   return (
     <I18nContext.Provider value={getMessage}>{children}</I18nContext.Provider>
   );
-};
+}
 
 export const useI18n = (): LocalizerType => React.useContext(I18nContext);
diff --git a/ts/components/About.tsx b/ts/components/About.tsx
index d1c559f0f..9e49e515f 100644
--- a/ts/components/About.tsx
+++ b/ts/components/About.tsx
@@ -18,14 +18,14 @@ export type PropsType = {
   executeMenuRole: ExecuteMenuRoleType;
 };
 
-export const About = ({
+export function About({
   closeAbout,
   i18n,
   environment,
   version,
   hasCustomTitleBar,
   executeMenuRole,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   useEscapeHandling(closeAbout);
 
   const theme = useTheme();
@@ -63,4 +63,4 @@ export const About = ({
       </div>
     </TitleBarContainer>
   );
-};
+}
diff --git a/ts/components/AddCaptionModal.stories.tsx b/ts/components/AddCaptionModal.stories.tsx
index 3cc8e95cb..270ba795f 100644
--- a/ts/components/AddCaptionModal.stories.tsx
+++ b/ts/components/AddCaptionModal.stories.tsx
@@ -37,6 +37,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<Props> = args => (
   <AddCaptionModal {...args} theme={React.useContext(StorybookThemeContext)} />
 );
diff --git a/ts/components/AddCaptionModal.tsx b/ts/components/AddCaptionModal.tsx
index ce8819b3b..71bd4614d 100644
--- a/ts/components/AddCaptionModal.tsx
+++ b/ts/components/AddCaptionModal.tsx
@@ -19,14 +19,14 @@ export type Props = {
   ) => JSX.Element;
 };
 
-export const AddCaptionModal = ({
+export function AddCaptionModal({
   i18n,
   onClose,
   onSubmit,
   draftText,
   RenderCompositionTextArea,
   theme,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const [messageText, setMessageText] = React.useState('');
 
   const [isScrolledTop, setIsScrolledTop] = React.useState(true);
@@ -84,4 +84,4 @@ export const AddCaptionModal = ({
       />
     </Modal>
   );
-};
+}
diff --git a/ts/components/AddGroupMemberErrorDialog.stories.tsx b/ts/components/AddGroupMemberErrorDialog.stories.tsx
index 0265ef13d..64f73f5fe 100644
--- a/ts/components/AddGroupMemberErrorDialog.stories.tsx
+++ b/ts/components/AddGroupMemberErrorDialog.stories.tsx
@@ -35,13 +35,15 @@ _MaximumGroupSize.story = {
   name: 'Maximum group size',
 };
 
-export const MaximumRecommendedGroupSize = (): JSX.Element => (
-  <AddGroupMemberErrorDialog
-    {...defaultProps}
-    mode={AddGroupMemberErrorDialogMode.RecommendedMaximumGroupSize}
-    recommendedMaximumNumberOfContacts={123}
-  />
-);
+export function MaximumRecommendedGroupSize(): JSX.Element {
+  return (
+    <AddGroupMemberErrorDialog
+      {...defaultProps}
+      mode={AddGroupMemberErrorDialogMode.RecommendedMaximumGroupSize}
+      recommendedMaximumNumberOfContacts={123}
+    />
+  );
+}
 
 MaximumRecommendedGroupSize.story = {
   name: 'Maximum recommended group size',
diff --git a/ts/components/AddGroupMemberErrorDialog.tsx b/ts/components/AddGroupMemberErrorDialog.tsx
index 52f51c61f..673b20e2d 100644
--- a/ts/components/AddGroupMemberErrorDialog.tsx
+++ b/ts/components/AddGroupMemberErrorDialog.tsx
@@ -1,7 +1,7 @@
 // Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 
 import type { LocalizerType } from '../types/Util';
@@ -28,9 +28,7 @@ type PropsType = {
   onClose: () => void;
 } & PropsDataType;
 
-export const AddGroupMemberErrorDialog: FunctionComponent<
-  PropsType
-> = props => {
+export function AddGroupMemberErrorDialog(props: PropsType): JSX.Element {
   const { i18n, onClose } = props;
 
   let title: string;
@@ -57,4 +55,4 @@ export const AddGroupMemberErrorDialog: FunctionComponent<
   }
 
   return <Alert body={body} i18n={i18n} onClose={onClose} title={title} />;
-};
+}
diff --git a/ts/components/AddUserToAnotherGroupModal.stories.tsx b/ts/components/AddUserToAnotherGroupModal.stories.tsx
index 7cf0c0887..b1713a891 100644
--- a/ts/components/AddUserToAnotherGroupModal.stories.tsx
+++ b/ts/components/AddUserToAnotherGroupModal.stories.tsx
@@ -39,6 +39,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<Props> = args => (
   <AddUserToAnotherGroupModal
     {...args}
diff --git a/ts/components/AddUserToAnotherGroupModal.tsx b/ts/components/AddUserToAnotherGroupModal.tsx
index 120f4b09d..9e79e68a4 100644
--- a/ts/components/AddUserToAnotherGroupModal.tsx
+++ b/ts/components/AddUserToAnotherGroupModal.tsx
@@ -42,7 +42,7 @@ type DispatchProps = {
 
 export type Props = OwnProps & DispatchProps;
 
-export const AddUserToAnotherGroupModal = ({
+export function AddUserToAnotherGroupModal({
   i18n,
   theme,
   contact,
@@ -51,7 +51,7 @@ export const AddUserToAnotherGroupModal = ({
   showToast,
   candidateConversations,
   regionCode,
-}: Props): JSX.Element | null => {
+}: Props): JSX.Element | null {
   const [searchTerm, setSearchTerm] = React.useState('');
   const [filteredConversations, setFilteredConversations] = React.useState(
     filterAndSortConversationsByRecent(candidateConversations, '', undefined)
@@ -177,7 +177,6 @@ export const AddUserToAnotherGroupModal = ({
                     onClickArchiveButton={noop}
                     onClickContactCheckbox={noop}
                     onSelectConversation={setSelectedGroupId}
-                    renderMessageSearchResult={_ => <></>}
                     showChooseGroupMembers={noop}
                     lookupConversationWithoutUuid={async _ => undefined}
                     showUserNotFoundModal={noop}
@@ -223,4 +222,4 @@ export const AddUserToAnotherGroupModal = ({
       )}
     </>
   );
-};
+}
diff --git a/ts/components/Alert.stories.tsx b/ts/components/Alert.stories.tsx
index 77bfa8645..d590dcef9 100644
--- a/ts/components/Alert.stories.tsx
+++ b/ts/components/Alert.stories.tsx
@@ -23,67 +23,75 @@ const defaultProps = {
 const LOREM_IPSUM =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.';
 
-export const TitleAndBodyAreStrings = (): JSX.Element => (
-  <Alert
-    {...defaultProps}
-    title="Hello world"
-    body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus."
-  />
-);
+export function TitleAndBodyAreStrings(): JSX.Element {
+  return (
+    <Alert
+      {...defaultProps}
+      title="Hello world"
+      body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus."
+    />
+  );
+}
 
 TitleAndBodyAreStrings.story = {
   name: 'Title and body are strings',
 };
 
-export const BodyIsAReactNode = (): JSX.Element => (
-  <Alert
-    {...defaultProps}
-    title="Hello world"
-    body={
-      <>
-        <span style={{ color: 'red' }}>Hello</span>{' '}
-        <span style={{ color: 'green', fontWeight: 'bold' }}>world</span>!
-      </>
-    }
-  />
-);
+export function BodyIsAReactNode(): JSX.Element {
+  return (
+    <Alert
+      {...defaultProps}
+      title="Hello world"
+      body={
+        <>
+          <span style={{ color: 'red' }}>Hello</span>{' '}
+          <span style={{ color: 'green', fontWeight: 'bold' }}>world</span>!
+        </>
+      }
+    />
+  );
+}
 
 BodyIsAReactNode.story = {
   name: 'Body is a ReactNode',
 };
 
-export const LongBodyWithoutTitle = (): JSX.Element => (
-  <Alert
-    {...defaultProps}
-    body={
-      <>
-        <p>{LOREM_IPSUM}</p>
-        <p>{LOREM_IPSUM}</p>
-        <p>{LOREM_IPSUM}</p>
-        <p>{LOREM_IPSUM}</p>
-      </>
-    }
-  />
-);
+export function LongBodyWithoutTitle(): JSX.Element {
+  return (
+    <Alert
+      {...defaultProps}
+      body={
+        <>
+          <p>{LOREM_IPSUM}</p>
+          <p>{LOREM_IPSUM}</p>
+          <p>{LOREM_IPSUM}</p>
+          <p>{LOREM_IPSUM}</p>
+        </>
+      }
+    />
+  );
+}
 
 LongBodyWithoutTitle.story = {
   name: 'Long body (without title)',
 };
 
-export const LongBodyWithTitle = (): JSX.Element => (
-  <Alert
-    {...defaultProps}
-    title="Hello world"
-    body={
-      <>
-        <p>{LOREM_IPSUM}</p>
-        <p>{LOREM_IPSUM}</p>
-        <p>{LOREM_IPSUM}</p>
-        <p>{LOREM_IPSUM}</p>
-      </>
-    }
-  />
-);
+export function LongBodyWithTitle(): JSX.Element {
+  return (
+    <Alert
+      {...defaultProps}
+      title="Hello world"
+      body={
+        <>
+          <p>{LOREM_IPSUM}</p>
+          <p>{LOREM_IPSUM}</p>
+          <p>{LOREM_IPSUM}</p>
+          <p>{LOREM_IPSUM}</p>
+        </>
+      }
+    />
+  );
+}
 
 LongBodyWithTitle.story = {
   name: 'Long body (with title)',
diff --git a/ts/components/Alert.tsx b/ts/components/Alert.tsx
index 532d8d617..33b33c3b6 100644
--- a/ts/components/Alert.tsx
+++ b/ts/components/Alert.tsx
@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 
 import type { LocalizerType } from '../types/Util';
@@ -17,23 +17,25 @@ type PropsType = {
   title?: string;
 };
 
-export const Alert: FunctionComponent<PropsType> = ({
+export function Alert({
   body,
   i18n,
   onClose,
   theme,
   title,
-}) => (
-  <Modal
-    i18n={i18n}
-    modalFooter={
-      <Button onClick={onClose}>{i18n('Confirmation--confirm')}</Button>
-    }
-    modalName="Alert"
-    onClose={onClose}
-    theme={theme}
-    title={title}
-  >
-    {body}
-  </Modal>
-);
+}: PropsType): JSX.Element {
+  return (
+    <Modal
+      i18n={i18n}
+      modalFooter={
+        <Button onClick={onClose}>{i18n('Confirmation--confirm')}</Button>
+      }
+      modalName="Alert"
+      onClose={onClose}
+      theme={theme}
+      title={title}
+    >
+      {body}
+    </Modal>
+  );
+}
diff --git a/ts/components/AnimatedEmojiGalore.stories.tsx b/ts/components/AnimatedEmojiGalore.stories.tsx
index 67704ade9..491e2eec0 100644
--- a/ts/components/AnimatedEmojiGalore.stories.tsx
+++ b/ts/components/AnimatedEmojiGalore.stories.tsx
@@ -18,6 +18,6 @@ function getDefaultProps(): PropsType {
   };
 }
 
-export const Hearts = (): JSX.Element => (
-  <AnimatedEmojiGalore {...getDefaultProps()} />
-);
+export function Hearts(): JSX.Element {
+  return <AnimatedEmojiGalore {...getDefaultProps()} />;
+}
diff --git a/ts/components/AnimatedEmojiGalore.tsx b/ts/components/AnimatedEmojiGalore.tsx
index 24a7a4c43..1d9a3620f 100644
--- a/ts/components/AnimatedEmojiGalore.tsx
+++ b/ts/components/AnimatedEmojiGalore.tsx
@@ -34,10 +34,10 @@ function transform(y: number, scale: number, rotate: number): string {
   return `translateY(${y}px) scale(${scale}) rotate(${rotate}deg)`;
 }
 
-export const AnimatedEmojiGalore = ({
+export function AnimatedEmojiGalore({
   emoji,
   onAnimationEnd,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [springs] = useSprings(NUM_EMOJIS, i => ({
     ...to(i, onAnimationEnd),
     from: from(i),
@@ -69,4 +69,4 @@ export const AnimatedEmojiGalore = ({
       ))}
     </>
   );
-};
+}
diff --git a/ts/components/AnnouncementsOnlyGroupBanner.tsx b/ts/components/AnnouncementsOnlyGroupBanner.tsx
index 23b8b679e..83319f6f5 100644
--- a/ts/components/AnnouncementsOnlyGroupBanner.tsx
+++ b/ts/components/AnnouncementsOnlyGroupBanner.tsx
@@ -15,12 +15,12 @@ type PropsType = {
   theme: ThemeType;
 };
 
-export const AnnouncementsOnlyGroupBanner = ({
+export function AnnouncementsOnlyGroupBanner({
   groupAdmins,
   i18n,
   openConversation,
   theme,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [isShowingAdmins, setIsShowingAdmins] = useState(false);
 
   return (
@@ -64,4 +64,4 @@ export const AnnouncementsOnlyGroupBanner = ({
       </div>
     </>
   );
-};
+}
diff --git a/ts/components/App.tsx b/ts/components/App.tsx
index b06797321..73f0cb79b 100644
--- a/ts/components/App.tsx
+++ b/ts/components/App.tsx
@@ -55,7 +55,7 @@ type PropsType = {
   viewStory: ViewStoryActionCreatorType;
 } & ComponentProps<typeof Inbox>;
 
-export const App = ({
+export function App({
   appView,
   executeMenuAction,
   executeMenuRole,
@@ -89,7 +89,7 @@ export const App = ({
   toast,
   toggleStoriesView,
   viewStory,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   let contents;
 
   if (appView === AppViewType.Installer) {
@@ -183,4 +183,4 @@ export const App = ({
       </div>
     </TitleBarContainer>
   );
-};
+}
diff --git a/ts/components/Avatar.stories.tsx b/ts/components/Avatar.stories.tsx
index e0f197004..d904c22ca 100644
--- a/ts/components/Avatar.stories.tsx
+++ b/ts/components/Avatar.stories.tsx
@@ -102,6 +102,7 @@ const sizes = Object.values(AvatarSize).filter(
   x => typeof x === 'number'
 ) as Array<AvatarSize>;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<Props> = args => (
   <>
     {sizes.map(size => (
@@ -110,6 +111,7 @@ const Template: Story<Props> = args => (
   </>
 );
 
+// eslint-disable-next-line react/function-component-definition
 const TemplateSingle: Story<Props> = args => (
   <Avatar {...args} size={AvatarSize.ONE_HUNDRED_TWELVE} />
 );
@@ -198,7 +200,7 @@ SearchIcon.args = createProps({
   searchResult: true,
 });
 
-export const Colors = (): JSX.Element => {
+export function Colors(): JSX.Element {
   const props = createProps();
 
   return (
@@ -208,7 +210,7 @@ export const Colors = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
 
 export const BrokenColor = Template.bind({});
 BrokenColor.args = createProps({
diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx
index 6b254a505..8dfc9042c 100644
--- a/ts/components/Avatar.tsx
+++ b/ts/components/Avatar.tsx
@@ -1,13 +1,7 @@
 // Copyright 2018-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type {
-  CSSProperties,
-  FunctionComponent,
-  MouseEvent,
-  ReactChild,
-  ReactNode,
-} from 'react';
+import type { CSSProperties, MouseEvent, ReactChild, ReactNode } from 'react';
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { noop } from 'lodash';
@@ -98,7 +92,7 @@ const getDefaultBlur = (
 ): AvatarBlur =>
   shouldBlurAvatar(...args) ? AvatarBlur.BlurPicture : AvatarBlur.NoBlur;
 
-export const Avatar: FunctionComponent<Props> = ({
+export function Avatar({
   acceptedMessageRequest,
   avatarPath,
   badge,
@@ -126,7 +120,7 @@ export const Avatar: FunctionComponent<Props> = ({
     sharedGroupNames,
     unblurredAvatarPath,
   }),
-}) => {
+}: Props): JSX.Element {
   const [imageBroken, setImageBroken] = useState(false);
 
   useEffect(() => {
@@ -312,7 +306,7 @@ export const Avatar: FunctionComponent<Props> = ({
       {badgeNode}
     </div>
   );
-};
+}
 
 // This is only exported for testing.
 export function _getBadgeSize(avatarSize: number): undefined | number {
diff --git a/ts/components/AvatarColorPicker.stories.tsx b/ts/components/AvatarColorPicker.stories.tsx
index 94d23f993..c66e745de 100644
--- a/ts/components/AvatarColorPicker.stories.tsx
+++ b/ts/components/AvatarColorPicker.stories.tsx
@@ -23,14 +23,16 @@ export default {
   title: 'Components/AvatarColorPicker',
 };
 
-export const Default = (): JSX.Element => (
-  <AvatarColorPicker {...createProps()} />
-);
+export function Default(): JSX.Element {
+  return <AvatarColorPicker {...createProps()} />;
+}
 
-export const Selected = (): JSX.Element => (
-  <AvatarColorPicker
-    {...createProps({
-      selectedColor: AvatarColors[7],
-    })}
-  />
-);
+export function Selected(): JSX.Element {
+  return (
+    <AvatarColorPicker
+      {...createProps({
+        selectedColor: AvatarColors[7],
+      })}
+    />
+  );
+}
diff --git a/ts/components/AvatarColorPicker.tsx b/ts/components/AvatarColorPicker.tsx
index 888452281..88c0e66f4 100644
--- a/ts/components/AvatarColorPicker.tsx
+++ b/ts/components/AvatarColorPicker.tsx
@@ -13,11 +13,11 @@ export type PropsType = {
   selectedColor?: AvatarColorType;
 };
 
-export const AvatarColorPicker = ({
+export function AvatarColorPicker({
   i18n,
   onColorSelected,
   selectedColor,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <>
       <div className="AvatarEditor__avatar-selector-title">
@@ -38,4 +38,4 @@ export const AvatarColorPicker = ({
       </div>
     </>
   );
-};
+}
diff --git a/ts/components/AvatarEditor.stories.tsx b/ts/components/AvatarEditor.stories.tsx
index 3cf28f0c4..f4ef76f54 100644
--- a/ts/components/AvatarEditor.stories.tsx
+++ b/ts/components/AvatarEditor.stories.tsx
@@ -82,28 +82,37 @@ export default {
   title: 'Components/AvatarEditor',
 };
 
-export const NoAvatarGroup = (): JSX.Element => (
-  <AvatarEditor
-    {...createProps({ isGroup: true, userAvatarData: getDefaultAvatars(true) })}
-  />
-);
+export function NoAvatarGroup(): JSX.Element {
+  return (
+    <AvatarEditor
+      {...createProps({
+        isGroup: true,
+        userAvatarData: getDefaultAvatars(true),
+      })}
+    />
+  );
+}
 
 NoAvatarGroup.story = {
   name: 'No Avatar (group)',
 };
 
-export const NoAvatarMe = (): JSX.Element => (
-  <AvatarEditor {...createProps({ userAvatarData: getDefaultAvatars() })} />
-);
+export function NoAvatarMe(): JSX.Element {
+  return (
+    <AvatarEditor {...createProps({ userAvatarData: getDefaultAvatars() })} />
+  );
+}
 
 NoAvatarMe.story = {
   name: 'No Avatar (me)',
 };
 
-export const HasAvatar = (): JSX.Element => (
-  <AvatarEditor
-    {...createProps({
-      avatarPath: '/fixtures/kitten-3-64-64.jpg',
-    })}
-  />
-);
+export function HasAvatar(): JSX.Element {
+  return (
+    <AvatarEditor
+      {...createProps({
+        avatarPath: '/fixtures/kitten-3-64-64.jpg',
+      })}
+    />
+  );
+}
diff --git a/ts/components/AvatarEditor.tsx b/ts/components/AvatarEditor.tsx
index a7533bdd1..be19271ed 100644
--- a/ts/components/AvatarEditor.tsx
+++ b/ts/components/AvatarEditor.tsx
@@ -44,7 +44,7 @@ enum EditMode {
   Text = 'Text',
 }
 
-export const AvatarEditor = ({
+export function AvatarEditor({
   avatarColor,
   avatarPath,
   avatarValue,
@@ -58,7 +58,7 @@ export const AvatarEditor = ({
   userAvatarData,
   replaceAvatar,
   saveAvatarToDisk,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [provisionalSelectedAvatar, setProvisionalSelectedAvatar] = useState<
     AvatarDataType | undefined
   >();
@@ -298,4 +298,4 @@ export const AvatarEditor = ({
   }
 
   return <div className="AvatarEditor">{content}</div>;
-};
+}
diff --git a/ts/components/AvatarIconEditor.stories.tsx b/ts/components/AvatarIconEditor.stories.tsx
index e8ba8bd72..2c655c88b 100644
--- a/ts/components/AvatarIconEditor.stories.tsx
+++ b/ts/components/AvatarIconEditor.stories.tsx
@@ -25,24 +25,28 @@ export default {
   title: 'Components/AvatarIconEditor',
 };
 
-export const PersonalIcon = (): JSX.Element => (
-  <AvatarIconEditor
-    {...createProps({
-      avatarData: createAvatarData({
-        color: AvatarColors[3],
-        icon: PersonalAvatarIcons[0],
-      }),
-    })}
-  />
-);
+export function PersonalIcon(): JSX.Element {
+  return (
+    <AvatarIconEditor
+      {...createProps({
+        avatarData: createAvatarData({
+          color: AvatarColors[3],
+          icon: PersonalAvatarIcons[0],
+        }),
+      })}
+    />
+  );
+}
 
-export const GroupIcon = (): JSX.Element => (
-  <AvatarIconEditor
-    {...createProps({
-      avatarData: createAvatarData({
-        color: AvatarColors[8],
-        icon: GroupAvatarIcons[0],
-      }),
-    })}
-  />
-);
+export function GroupIcon(): JSX.Element {
+  return (
+    <AvatarIconEditor
+      {...createProps({
+        avatarData: createAvatarData({
+          color: AvatarColors[8],
+          icon: GroupAvatarIcons[0],
+        }),
+      })}
+    />
+  );
+}
diff --git a/ts/components/AvatarIconEditor.tsx b/ts/components/AvatarIconEditor.tsx
index 308460080..80f80f885 100644
--- a/ts/components/AvatarIconEditor.tsx
+++ b/ts/components/AvatarIconEditor.tsx
@@ -17,11 +17,11 @@ export type PropsType = {
   onClose: (avatarData?: AvatarDataType) => unknown;
 };
 
-export const AvatarIconEditor = ({
+export function AvatarIconEditor({
   avatarData: initialAvatarData,
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [avatarBuffer, setAvatarBuffer] = useState<Uint8Array | undefined>();
   const [avatarData, setAvatarData] =
     useState<AvatarDataType>(initialAvatarData);
@@ -81,4 +81,4 @@ export const AvatarIconEditor = ({
       />
     </>
   );
-};
+}
diff --git a/ts/components/AvatarLightbox.stories.tsx b/ts/components/AvatarLightbox.stories.tsx
index 5e7419312..c06b79848 100644
--- a/ts/components/AvatarLightbox.stories.tsx
+++ b/ts/components/AvatarLightbox.stories.tsx
@@ -32,15 +32,17 @@ export default {
   title: 'Components/AvatarLightbox',
 };
 
-export const Group = (): JSX.Element => (
-  <AvatarLightbox
-    {...createProps({
-      isGroup: true,
-    })}
-  />
-);
+export function Group(): JSX.Element {
+  return (
+    <AvatarLightbox
+      {...createProps({
+        isGroup: true,
+      })}
+    />
+  );
+}
 
-export const Person = (): JSX.Element => {
+export function Person(): JSX.Element {
   const conversation = getDefaultConversation();
   return (
     <AvatarLightbox
@@ -50,12 +52,14 @@ export const Person = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
-export const Photo = (): JSX.Element => (
-  <AvatarLightbox
-    {...createProps({
-      avatarPath: '/fixtures/kitten-1-64-64.jpg',
-    })}
-  />
-);
+export function Photo(): JSX.Element {
+  return (
+    <AvatarLightbox
+      {...createProps({
+        avatarPath: '/fixtures/kitten-1-64-64.jpg',
+      })}
+    />
+  );
+}
diff --git a/ts/components/AvatarLightbox.tsx b/ts/components/AvatarLightbox.tsx
index d1fba0cc5..ea2a7e8ab 100644
--- a/ts/components/AvatarLightbox.tsx
+++ b/ts/components/AvatarLightbox.tsx
@@ -17,14 +17,14 @@ export type PropsType = {
   onClose: () => unknown;
 };
 
-export const AvatarLightbox = ({
+export function AvatarLightbox({
   avatarColor,
   avatarPath,
   conversationTitle,
   i18n,
   isGroup,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Lightbox close={onClose} i18n={i18n} media={[]}>
       <AvatarPreview
@@ -43,4 +43,4 @@ export const AvatarLightbox = ({
       />
     </Lightbox>
   );
-};
+}
diff --git a/ts/components/AvatarModalButtons.stories.tsx b/ts/components/AvatarModalButtons.stories.tsx
index 814703954..d4488f664 100644
--- a/ts/components/AvatarModalButtons.stories.tsx
+++ b/ts/components/AvatarModalButtons.stories.tsx
@@ -23,21 +23,23 @@ export default {
   title: 'Components/AvatarModalButtons',
 };
 
-export const HasChanges = (): JSX.Element => (
-  <AvatarModalButtons
-    {...createProps({
-      hasChanges: true,
-    })}
-  />
-);
+export function HasChanges(): JSX.Element {
+  return (
+    <AvatarModalButtons
+      {...createProps({
+        hasChanges: true,
+      })}
+    />
+  );
+}
 
 HasChanges.story = {
   name: 'Has changes',
 };
 
-export const NoChanges = (): JSX.Element => (
-  <AvatarModalButtons {...createProps()} />
-);
+export function NoChanges(): JSX.Element {
+  return <AvatarModalButtons {...createProps()} />;
+}
 
 NoChanges.story = {
   name: 'No changes',
diff --git a/ts/components/AvatarModalButtons.tsx b/ts/components/AvatarModalButtons.tsx
index a7cd70a96..02d2b9187 100644
--- a/ts/components/AvatarModalButtons.tsx
+++ b/ts/components/AvatarModalButtons.tsx
@@ -15,12 +15,12 @@ export type PropsType = {
   onSave: () => unknown;
 };
 
-export const AvatarModalButtons = ({
+export function AvatarModalButtons({
   hasChanges,
   i18n,
   onCancel,
   onSave,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [confirmDiscardAction, setConfirmDiscardAction] = useState<
     (() => unknown) | undefined
   >(undefined);
@@ -51,4 +51,4 @@ export const AvatarModalButtons = ({
       )}
     </Modal.ButtonFooter>
   );
-};
+}
diff --git a/ts/components/AvatarPopup.stories.tsx b/ts/components/AvatarPopup.stories.tsx
index 6f56792c1..7e4d68fae 100644
--- a/ts/components/AvatarPopup.stories.tsx
+++ b/ts/components/AvatarPopup.stories.tsx
@@ -61,54 +61,54 @@ export default {
   title: 'Components/Avatar Popup',
 };
 
-export const AvatarOnly = (): JSX.Element => {
+export function AvatarOnly(): JSX.Element {
   const props = useProps();
 
   return <AvatarPopup {...props} />;
-};
+}
 
-export const HasBadge = (): JSX.Element => {
+export function HasBadge(): JSX.Element {
   const props = useProps({
     badge: getFakeBadge(),
     title: 'Janet Yellen',
   });
 
   return <AvatarPopup {...props} />;
-};
+}
 
 HasBadge.story = {
   name: 'Has badge',
 };
 
-export const Title = (): JSX.Element => {
+export function Title(): JSX.Element {
   const props = useProps({
     title: 'My Great Title',
   });
 
   return <AvatarPopup {...props} />;
-};
+}
 
-export const ProfileName = (): JSX.Element => {
+export function ProfileName(): JSX.Element {
   const props = useProps({
     profileName: 'Sam Neill',
   });
 
   return <AvatarPopup {...props} />;
-};
+}
 
-export const PhoneNumber = (): JSX.Element => {
+export function PhoneNumber(): JSX.Element {
   const props = useProps({
     profileName: 'Sam Neill',
     phoneNumber: '(555) 867-5309',
   });
 
   return <AvatarPopup {...props} />;
-};
+}
 
-export const UpdateAvailable = (): JSX.Element => {
+export function UpdateAvailable(): JSX.Element {
   const props = useProps({
     hasPendingUpdate: true,
   });
 
   return <AvatarPopup {...props} />;
-};
+}
diff --git a/ts/components/AvatarPopup.tsx b/ts/components/AvatarPopup.tsx
index 7191de217..fa986bf15 100644
--- a/ts/components/AvatarPopup.tsx
+++ b/ts/components/AvatarPopup.tsx
@@ -28,7 +28,7 @@ export type Props = {
   name?: string;
 } & Omit<AvatarProps, 'onClick'>;
 
-export const AvatarPopup = (props: Props): JSX.Element => {
+export function AvatarPopup(props: Props): JSX.Element {
   const {
     hasPendingUpdate,
     i18n,
@@ -121,4 +121,4 @@ export const AvatarPopup = (props: Props): JSX.Element => {
       )}
     </div>
   );
-};
+}
diff --git a/ts/components/AvatarPreview.stories.tsx b/ts/components/AvatarPreview.stories.tsx
index 7633d1f6f..3868ef0c4 100644
--- a/ts/components/AvatarPreview.stories.tsx
+++ b/ts/components/AvatarPreview.stories.tsx
@@ -39,85 +39,97 @@ export default {
   title: 'Components/AvatarPreview',
 };
 
-export const NoStatePersonal = (): JSX.Element => (
-  <AvatarPreview
-    {...createProps({
-      avatarColor: AvatarColors[0],
-      conversationTitle: 'Just Testing',
-    })}
-  />
-);
+export function NoStatePersonal(): JSX.Element {
+  return (
+    <AvatarPreview
+      {...createProps({
+        avatarColor: AvatarColors[0],
+        conversationTitle: 'Just Testing',
+      })}
+    />
+  );
+}
 
 NoStatePersonal.story = {
   name: 'No state (personal)',
 };
 
-export const NoStateGroup = (): JSX.Element => (
-  <AvatarPreview
-    {...createProps({
-      avatarColor: AvatarColors[1],
-      isGroup: true,
-    })}
-  />
-);
+export function NoStateGroup(): JSX.Element {
+  return (
+    <AvatarPreview
+      {...createProps({
+        avatarColor: AvatarColors[1],
+        isGroup: true,
+      })}
+    />
+  );
+}
 
 NoStateGroup.story = {
   name: 'No state (group)',
 };
 
-export const NoStateGroupUploadMe = (): JSX.Element => (
-  <AvatarPreview
-    {...createProps({
-      avatarColor: AvatarColors[1],
-      isEditable: true,
-      isGroup: true,
-    })}
-  />
-);
+export function NoStateGroupUploadMe(): JSX.Element {
+  return (
+    <AvatarPreview
+      {...createProps({
+        avatarColor: AvatarColors[1],
+        isEditable: true,
+        isGroup: true,
+      })}
+    />
+  );
+}
 
 NoStateGroupUploadMe.story = {
   name: 'No state (group) + upload me',
 };
 
-export const Value = (): JSX.Element => (
-  <AvatarPreview {...createProps({ avatarValue: TEST_IMAGE })} />
-);
+export function Value(): JSX.Element {
+  return <AvatarPreview {...createProps({ avatarValue: TEST_IMAGE })} />;
+}
 
 Value.story = {
   name: 'value',
 };
 
-export const Path = (): JSX.Element => (
-  <AvatarPreview
-    {...createProps({ avatarPath: '/fixtures/kitten-3-64-64.jpg' })}
-  />
-);
+export function Path(): JSX.Element {
+  return (
+    <AvatarPreview
+      {...createProps({ avatarPath: '/fixtures/kitten-3-64-64.jpg' })}
+    />
+  );
+}
 
 Path.story = {
   name: 'path',
 };
 
-export const ValuePath = (): JSX.Element => (
-  <AvatarPreview
-    {...createProps({
-      avatarPath: '/fixtures/kitten-3-64-64.jpg',
-      avatarValue: TEST_IMAGE,
-    })}
-  />
-);
+export function ValuePath(): JSX.Element {
+  return (
+    <AvatarPreview
+      {...createProps({
+        avatarPath: '/fixtures/kitten-3-64-64.jpg',
+        avatarValue: TEST_IMAGE,
+      })}
+    />
+  );
+}
 
 ValuePath.story = {
   name: 'value & path',
 };
 
-export const Style = (): JSX.Element => (
-  <AvatarPreview
-    {...createProps({
-      avatarValue: TEST_IMAGE,
-      style: { height: 100, width: 100 },
-    })}
-  />
-);
+export function Style(): JSX.Element {
+  return (
+    <AvatarPreview
+      {...createProps({
+        avatarValue: TEST_IMAGE,
+        style: { height: 100, width: 100 },
+      })}
+    />
+  );
+}
 
 Style.story = {
   name: 'style',
diff --git a/ts/components/AvatarPreview.tsx b/ts/components/AvatarPreview.tsx
index 24e099b8f..86f55a9eb 100644
--- a/ts/components/AvatarPreview.tsx
+++ b/ts/components/AvatarPreview.tsx
@@ -33,7 +33,7 @@ enum ImageStatus {
   HasImage = 'has-image',
 }
 
-export const AvatarPreview = ({
+export function AvatarPreview({
   avatarColor = AvatarColors[0],
   avatarPath,
   avatarValue,
@@ -45,7 +45,7 @@ export const AvatarPreview = ({
   onClear,
   onClick,
   style = {},
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [avatarPreview, setAvatarPreview] = useState<Uint8Array | undefined>();
 
   // Loads the initial avatarPath if one is provided, but only if we're in editable mode.
@@ -199,4 +199,4 @@ export const AvatarPreview = ({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/AvatarSpacer.tsx b/ts/components/AvatarSpacer.tsx
index 54f63e775..c3b3356ee 100644
--- a/ts/components/AvatarSpacer.tsx
+++ b/ts/components/AvatarSpacer.tsx
@@ -5,8 +5,8 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import type { AvatarSize } from './Avatar';
 
-export const AvatarSpacer = ({
+export function AvatarSpacer({
   size,
-}: Readonly<{ size: AvatarSize }>): ReactElement => (
-  <div style={{ minWidth: size, height: size, width: size }} />
-);
+}: Readonly<{ size: AvatarSize }>): ReactElement {
+  return <div style={{ minWidth: size, height: size, width: size }} />;
+}
diff --git a/ts/components/AvatarTextEditor.stories.tsx b/ts/components/AvatarTextEditor.stories.tsx
index 3fc93f159..3d113be24 100644
--- a/ts/components/AvatarTextEditor.stories.tsx
+++ b/ts/components/AvatarTextEditor.stories.tsx
@@ -24,35 +24,41 @@ export default {
   title: 'Components/AvatarTextEditor',
 };
 
-export const Empty = (): JSX.Element => <AvatarTextEditor {...createProps()} />;
+export function Empty(): JSX.Element {
+  return <AvatarTextEditor {...createProps()} />;
+}
 
-export const WithData = (): JSX.Element => (
-  <AvatarTextEditor
-    {...createProps({
-      avatarData: {
-        id: '123',
-        color: AvatarColors[6],
-        text: 'SUP',
-      },
-    })}
-  />
-);
+export function WithData(): JSX.Element {
+  return (
+    <AvatarTextEditor
+      {...createProps({
+        avatarData: {
+          id: '123',
+          color: AvatarColors[6],
+          text: 'SUP',
+        },
+      })}
+    />
+  );
+}
 
 WithData.story = {
   name: 'with Data',
 };
 
-export const WithWideCharacters = (): JSX.Element => (
-  <AvatarTextEditor
-    {...createProps({
-      avatarData: {
-        id: '123',
-        color: AvatarColors[6],
-        text: '‱௸𒈙',
-      },
-    })}
-  />
-);
+export function WithWideCharacters(): JSX.Element {
+  return (
+    <AvatarTextEditor
+      {...createProps({
+        avatarData: {
+          id: '123',
+          color: AvatarColors[6],
+          text: '‱௸𒈙',
+        },
+      })}
+    />
+  );
+}
 
 WithWideCharacters.story = {
   name: 'with wide characters',
diff --git a/ts/components/AvatarTextEditor.tsx b/ts/components/AvatarTextEditor.tsx
index 9c970c7de..0df2611ac 100644
--- a/ts/components/AvatarTextEditor.tsx
+++ b/ts/components/AvatarTextEditor.tsx
@@ -40,12 +40,12 @@ export type PropsType = {
 const BUBBLE_SIZE = 120;
 const MAX_LENGTH = 3;
 
-export const AvatarTextEditor = ({
+export function AvatarTextEditor({
   avatarData,
   i18n,
   onCancel,
   onDone,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const initialText = useMemo(() => avatarData?.text || '', [avatarData]);
   const initialColor = useMemo(
     () => avatarData?.color || AvatarColors[0],
@@ -194,4 +194,4 @@ export const AvatarTextEditor = ({
       </div>
     </>
   );
-};
+}
diff --git a/ts/components/AvatarUploadButton.stories.tsx b/ts/components/AvatarUploadButton.stories.tsx
index 3251b20a0..1f4aed996 100644
--- a/ts/components/AvatarUploadButton.stories.tsx
+++ b/ts/components/AvatarUploadButton.stories.tsx
@@ -22,6 +22,6 @@ export default {
   title: 'Components/AvatarUploadButton',
 };
 
-export const Default = (): JSX.Element => (
-  <AvatarUploadButton {...createProps()} />
-);
+export function Default(): JSX.Element {
+  return <AvatarUploadButton {...createProps()} />;
+}
diff --git a/ts/components/AvatarUploadButton.tsx b/ts/components/AvatarUploadButton.tsx
index fd18b165f..a98d450e9 100644
--- a/ts/components/AvatarUploadButton.tsx
+++ b/ts/components/AvatarUploadButton.tsx
@@ -14,11 +14,11 @@ export type PropsType = {
   onChange: (avatar: Uint8Array) => unknown;
 };
 
-export const AvatarUploadButton = ({
+export function AvatarUploadButton({
   className,
   i18n,
   onChange,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const fileInputRef = useRef<null | HTMLInputElement>(null);
 
   const [processingFile, setProcessingFile] = useState<File | undefined>();
@@ -84,4 +84,4 @@ export const AvatarUploadButton = ({
       />
     </>
   );
-};
+}
diff --git a/ts/components/BackboneHost.tsx b/ts/components/BackboneHost.tsx
index aae61b0ec..d29460e6d 100644
--- a/ts/components/BackboneHost.tsx
+++ b/ts/components/BackboneHost.tsx
@@ -9,7 +9,7 @@ type PropsType = {
   className?: string;
 };
 
-export const BackboneHost = ({ View, className }: PropsType): JSX.Element => {
+export function BackboneHost({ View, className }: PropsType): JSX.Element {
   const hostRef = useRef<HTMLDivElement | null>(null);
   const viewRef = useRef<Backbone.View | undefined>(undefined);
 
@@ -35,4 +35,4 @@ export const BackboneHost = ({ View, className }: PropsType): JSX.Element => {
       <div className={className} ref={hostRef} />
     </div>
   );
-};
+}
diff --git a/ts/components/BadgeDescription.stories.tsx b/ts/components/BadgeDescription.stories.tsx
index 040b3c7f0..5edb8e2d5 100644
--- a/ts/components/BadgeDescription.stories.tsx
+++ b/ts/components/BadgeDescription.stories.tsx
@@ -9,24 +9,28 @@ export default {
   title: 'Components/BadgeDescription',
 };
 
-export const NormalName = (): JSX.Element => (
-  <BadgeDescription
-    template="{short_name} is here! Hello, {short_name}! {short_name}, I think you're great. This is not replaced: {not_replaced}"
-    firstName="Alice"
-    title="Should not be seen"
-  />
-);
+export function NormalName(): JSX.Element {
+  return (
+    <BadgeDescription
+      template="{short_name} is here! Hello, {short_name}! {short_name}, I think you're great. This is not replaced: {not_replaced}"
+      firstName="Alice"
+      title="Should not be seen"
+    />
+  );
+}
 
 NormalName.story = {
   name: 'Normal name',
 };
 
-export const NameWithRtlOverrides = (): JSX.Element => (
-  <BadgeDescription
-    template="Hello, {short_name}! {short_name}, I think you're great."
-    title={'Flip-\u202eflop'}
-  />
-);
+export function NameWithRtlOverrides(): JSX.Element {
+  return (
+    <BadgeDescription
+      template="Hello, {short_name}! {short_name}, I think you're great."
+      title={'Flip-\u202eflop'}
+    />
+  );
+}
 
 NameWithRtlOverrides.story = {
   name: 'Name with RTL overrides',
diff --git a/ts/components/BadgeDialog.stories.tsx b/ts/components/BadgeDialog.stories.tsx
index 3a155456b..36ff3b2dc 100644
--- a/ts/components/BadgeDialog.stories.tsx
+++ b/ts/components/BadgeDialog.stories.tsx
@@ -27,108 +27,120 @@ const defaultProps: ComponentProps<typeof BadgeDialog> = {
   title: 'Alice Levine',
 };
 
-export const NoBadgesClosedImmediately = (): JSX.Element => (
-  <BadgeDialog {...defaultProps} badges={[]} />
-);
+export function NoBadgesClosedImmediately(): JSX.Element {
+  return <BadgeDialog {...defaultProps} badges={[]} />;
+}
 
 NoBadgesClosedImmediately.story = {
   name: 'No badges (closed immediately)',
 };
 
-export const OneBadge = (): JSX.Element => (
-  <BadgeDialog {...defaultProps} badges={getFakeBadges(1)} />
-);
+export function OneBadge(): JSX.Element {
+  return <BadgeDialog {...defaultProps} badges={getFakeBadges(1)} />;
+}
 
 OneBadge.story = {
   name: 'One badge',
 };
 
-export const BadgeWithNoImageShouldBeImpossible = (): JSX.Element => (
-  <BadgeDialog
-    {...defaultProps}
-    badges={[
-      {
-        ...getFakeBadge(),
-        images: [],
-      },
-    ]}
-  />
-);
+export function BadgeWithNoImageShouldBeImpossible(): JSX.Element {
+  return (
+    <BadgeDialog
+      {...defaultProps}
+      badges={[
+        {
+          ...getFakeBadge(),
+          images: [],
+        },
+      ]}
+    />
+  );
+}
 
 BadgeWithNoImageShouldBeImpossible.story = {
   name: 'Badge with no image (should be impossible)',
 };
 
-export const BadgeWithPendingImage = (): JSX.Element => (
-  <BadgeDialog
-    {...defaultProps}
-    badges={[
-      {
-        ...getFakeBadge(),
-        images: Array(4).fill(
-          zipObject(
-            Object.values(BadgeImageTheme),
-            repeat({ url: 'https://example.com/ignored.svg' })
-          )
-        ),
-      },
-    ]}
-  />
-);
-
-BadgeWithPendingImage.story = {
-  name: 'Badge with pending image',
-};
-
-export const BadgeWithOnlyOneLowDetailImage = (): JSX.Element => (
-  <BadgeDialog
-    {...defaultProps}
-    badges={[
-      {
-        ...getFakeBadge(),
-        images: [
-          zipObject(
-            Object.values(BadgeImageTheme),
-            repeat({
-              localPath: '/fixtures/orange-heart.svg',
-              url: 'https://example.com/ignored.svg',
-            })
-          ),
-          ...Array(3).fill(
+export function BadgeWithPendingImage(): JSX.Element {
+  return (
+    <BadgeDialog
+      {...defaultProps}
+      badges={[
+        {
+          ...getFakeBadge(),
+          images: Array(4).fill(
             zipObject(
               Object.values(BadgeImageTheme),
               repeat({ url: 'https://example.com/ignored.svg' })
             )
           ),
-        ],
-      },
-    ]}
-  />
-);
+        },
+      ]}
+    />
+  );
+}
+
+BadgeWithPendingImage.story = {
+  name: 'Badge with pending image',
+};
+
+export function BadgeWithOnlyOneLowDetailImage(): JSX.Element {
+  return (
+    <BadgeDialog
+      {...defaultProps}
+      badges={[
+        {
+          ...getFakeBadge(),
+          images: [
+            zipObject(
+              Object.values(BadgeImageTheme),
+              repeat({
+                localPath: '/fixtures/orange-heart.svg',
+                url: 'https://example.com/ignored.svg',
+              })
+            ),
+            ...Array(3).fill(
+              zipObject(
+                Object.values(BadgeImageTheme),
+                repeat({ url: 'https://example.com/ignored.svg' })
+              )
+            ),
+          ],
+        },
+      ]}
+    />
+  );
+}
 
 BadgeWithOnlyOneLowDetailImage.story = {
   name: 'Badge with only one, low-detail image',
 };
 
-export const FiveBadges = (): JSX.Element => (
-  <BadgeDialog {...defaultProps} badges={getFakeBadges(5)} />
-);
+export function FiveBadges(): JSX.Element {
+  return <BadgeDialog {...defaultProps} badges={getFakeBadges(5)} />;
+}
 
 FiveBadges.story = {
   name: 'Five badges',
 };
 
-export const ManyBadges = (): JSX.Element => (
-  <BadgeDialog {...defaultProps} badges={getFakeBadges(50)} />
-);
+export function ManyBadges(): JSX.Element {
+  return <BadgeDialog {...defaultProps} badges={getFakeBadges(50)} />;
+}
 
 ManyBadges.story = {
   name: 'Many badges',
 };
 
-export const ManyBadgesUserIsASubscriber = (): JSX.Element => (
-  <BadgeDialog {...defaultProps} areWeASubscriber badges={getFakeBadges(50)} />
-);
+export function ManyBadgesUserIsASubscriber(): JSX.Element {
+  return (
+    <BadgeDialog
+      {...defaultProps}
+      areWeASubscriber
+      badges={getFakeBadges(50)}
+    />
+  );
+}
 
 ManyBadgesUserIsASubscriber.story = {
   name: 'Many badges, user is a subscriber',
diff --git a/ts/components/BetterAvatar.stories.tsx b/ts/components/BetterAvatar.stories.tsx
index b03d05f76..e07cae81c 100644
--- a/ts/components/BetterAvatar.stories.tsx
+++ b/ts/components/BetterAvatar.stories.tsx
@@ -30,35 +30,41 @@ export default {
   title: 'Components/BetterAvatar',
 };
 
-export const Text = (): JSX.Element => (
-  <BetterAvatar
-    {...createProps({
-      avatarData: createAvatarData({
-        color: AvatarColors[0],
-        text: 'AH',
-      }),
-    })}
-  />
-);
+export function Text(): JSX.Element {
+  return (
+    <BetterAvatar
+      {...createProps({
+        avatarData: createAvatarData({
+          color: AvatarColors[0],
+          text: 'AH',
+        }),
+      })}
+    />
+  );
+}
 
-export const PersonalIcon = (): JSX.Element => (
-  <BetterAvatar
-    {...createProps({
-      avatarData: createAvatarData({
-        color: AvatarColors[1],
-        icon: PersonalAvatarIcons[1],
-      }),
-    })}
-  />
-);
+export function PersonalIcon(): JSX.Element {
+  return (
+    <BetterAvatar
+      {...createProps({
+        avatarData: createAvatarData({
+          color: AvatarColors[1],
+          icon: PersonalAvatarIcons[1],
+        }),
+      })}
+    />
+  );
+}
 
-export const GroupIcon = (): JSX.Element => (
-  <BetterAvatar
-    {...createProps({
-      avatarData: createAvatarData({
-        color: AvatarColors[1],
-        icon: GroupAvatarIcons[1],
-      }),
-    })}
-  />
-);
+export function GroupIcon(): JSX.Element {
+  return (
+    <BetterAvatar
+      {...createProps({
+        avatarData: createAvatarData({
+          color: AvatarColors[1],
+          icon: GroupAvatarIcons[1],
+        }),
+      })}
+    />
+  );
+}
diff --git a/ts/components/BetterAvatar.tsx b/ts/components/BetterAvatar.tsx
index 6157322a5..144b7f6d5 100644
--- a/ts/components/BetterAvatar.tsx
+++ b/ts/components/BetterAvatar.tsx
@@ -21,14 +21,14 @@ export type PropsType = {
   size?: AvatarSize;
 };
 
-export const BetterAvatar = ({
+export function BetterAvatar({
   avatarData,
   i18n,
   isSelected,
   onClick,
   onDelete,
   size = 48,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [avatarBuffer, setAvatarBuffer] = useState<Uint8Array | undefined>(
     avatarData.buffer
   );
@@ -115,4 +115,4 @@ export const BetterAvatar = ({
       )}
     </BetterAvatarBubble>
   );
-};
+}
diff --git a/ts/components/BetterAvatarBubble.stories.tsx b/ts/components/BetterAvatarBubble.stories.tsx
index 096093723..b4921bc95 100644
--- a/ts/components/BetterAvatarBubble.stories.tsx
+++ b/ts/components/BetterAvatarBubble.stories.tsx
@@ -27,32 +27,38 @@ export default {
   title: 'Components/BetterAvatarBubble',
 };
 
-export const Children = (): JSX.Element => (
-  <BetterAvatarBubble
-    {...createProps({
-      children: <div>HI</div>,
-      color: AvatarColors[8],
-    })}
-  />
-);
+export function Children(): JSX.Element {
+  return (
+    <BetterAvatarBubble
+      {...createProps({
+        children: <div>HI</div>,
+        color: AvatarColors[8],
+      })}
+    />
+  );
+}
 
-export const Selected = (): JSX.Element => (
-  <BetterAvatarBubble
-    {...createProps({
-      color: AvatarColors[1],
-      isSelected: true,
-    })}
-  />
-);
+export function Selected(): JSX.Element {
+  return (
+    <BetterAvatarBubble
+      {...createProps({
+        color: AvatarColors[1],
+        isSelected: true,
+      })}
+    />
+  );
+}
 
-export const Style = (): JSX.Element => (
-  <BetterAvatarBubble
-    {...createProps({
-      style: {
-        height: 120,
-        width: 120,
-      },
-      color: AvatarColors[2],
-    })}
-  />
-);
+export function Style(): JSX.Element {
+  return (
+    <BetterAvatarBubble
+      {...createProps({
+        style: {
+          height: 120,
+          width: 120,
+        },
+        color: AvatarColors[2],
+      })}
+    />
+  );
+}
diff --git a/ts/components/BetterAvatarBubble.tsx b/ts/components/BetterAvatarBubble.tsx
index 296d3665c..1bb06f3a6 100644
--- a/ts/components/BetterAvatarBubble.tsx
+++ b/ts/components/BetterAvatarBubble.tsx
@@ -18,7 +18,7 @@ export type PropsType = {
   style?: CSSProperties;
 };
 
-export const BetterAvatarBubble = ({
+export function BetterAvatarBubble({
   children,
   color,
   i18n,
@@ -26,7 +26,7 @@ export const BetterAvatarBubble = ({
   onDelete,
   onSelect,
   style,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <div
       className={classNames(
@@ -58,4 +58,4 @@ export const BetterAvatarBubble = ({
       {children}
     </div>
   );
-};
+}
diff --git a/ts/components/Button.stories.tsx b/ts/components/Button.stories.tsx
index 36446b56f..7ad08a7f3 100644
--- a/ts/components/Button.stories.tsx
+++ b/ts/components/Button.stories.tsx
@@ -10,55 +10,65 @@ export default {
   title: 'Components/Button',
 };
 
-export const KitchenSink = (): JSX.Element => (
-  <>
-    {Object.values(ButtonVariant).map(variant => (
-      <React.Fragment key={variant}>
-        {[ButtonSize.Large, ButtonSize.Medium, ButtonSize.Small].map(size => (
-          <React.Fragment key={size}>
-            <p>
-              <Button onClick={action('onClick')} size={size} variant={variant}>
-                {variant}
-              </Button>
-            </p>
-            <p>
-              <Button
-                disabled
-                onClick={action('onClick')}
-                size={size}
-                variant={variant}
-              >
-                {variant}
-              </Button>
-            </p>
-          </React.Fragment>
-        ))}
-      </React.Fragment>
-    ))}
-  </>
-);
+export function KitchenSink(): JSX.Element {
+  return (
+    <>
+      {Object.values(ButtonVariant).map(variant => (
+        <React.Fragment key={variant}>
+          {[ButtonSize.Large, ButtonSize.Medium, ButtonSize.Small].map(size => (
+            <React.Fragment key={size}>
+              <p>
+                <Button
+                  onClick={action('onClick')}
+                  size={size}
+                  variant={variant}
+                >
+                  {variant}
+                </Button>
+              </p>
+              <p>
+                <Button
+                  disabled
+                  onClick={action('onClick')}
+                  size={size}
+                  variant={variant}
+                >
+                  {variant}
+                </Button>
+              </p>
+            </React.Fragment>
+          ))}
+        </React.Fragment>
+      ))}
+    </>
+  );
+}
 
 KitchenSink.story = {
   name: 'Kitchen sink',
 };
 
-export const AriaLabel = (): JSX.Element => (
-  <Button
-    aria-label="hello"
-    className="module-ForwardMessageModal__header--back"
-    onClick={action('onClick')}
-  />
-);
+export function AriaLabel(): JSX.Element {
+  return (
+    <Button
+      aria-label="hello"
+      className="module-ForwardMessageModal__header--back"
+      onClick={action('onClick')}
+    />
+  );
+}
 
 AriaLabel.story = {
   name: 'aria-label',
 };
 
-export const CustomStyles = (): JSX.Element => (
-  <Button onClick={action('onClick')} style={{ transform: 'rotate(5deg)' }}>
-    Hello world
-  </Button>
-);
+export function CustomStyles(): JSX.Element {
+  return (
+    <Button onClick={action('onClick')} style={{ transform: 'rotate(5deg)' }}>
+      Hello world
+    </Button>
+  );
+}
 
 CustomStyles.story = {
   name: 'Custom styles',
diff --git a/ts/components/Button.tsx b/ts/components/Button.tsx
index fb6048081..99adbeaf2 100644
--- a/ts/components/Button.tsx
+++ b/ts/components/Button.tsx
@@ -100,7 +100,7 @@ const VARIANT_CLASS_NAMES = new Map<ButtonVariant, string>([
 ]);
 
 export const Button = React.forwardRef<HTMLButtonElement, PropsType>(
-  (props, ref) => {
+  function ButtonInner(props, ref) {
     const {
       children,
       className,
diff --git a/ts/components/CallBackgroundBlur.tsx b/ts/components/CallBackgroundBlur.tsx
index 63bb60d03..2f62667f0 100644
--- a/ts/components/CallBackgroundBlur.tsx
+++ b/ts/components/CallBackgroundBlur.tsx
@@ -12,12 +12,12 @@ export type PropsType = {
   color?: AvatarColorType;
 };
 
-export const CallBackgroundBlur = ({
+export function CallBackgroundBlur({
   avatarPath,
   children,
   className,
   color,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <div
       className={classNames(
@@ -39,4 +39,4 @@ export const CallBackgroundBlur = ({
       {children}
     </div>
   );
-};
+}
diff --git a/ts/components/CallManager.stories.tsx b/ts/components/CallManager.stories.tsx
index 5504ddecc..dbda846d6 100644
--- a/ts/components/CallManager.stories.tsx
+++ b/ts/components/CallManager.stories.tsx
@@ -121,128 +121,142 @@ export default {
   title: 'Components/CallManager',
 };
 
-export const NoCall = (): JSX.Element => <CallManager {...createProps()} />;
+export function NoCall(): JSX.Element {
+  return <CallManager {...createProps()} />;
+}
 
-export const OngoingDirectCall = (): JSX.Element => (
-  <CallManager
-    {...createProps({
-      activeCall: {
-        ...getCommonActiveCallData(),
-        callMode: CallMode.Direct,
-        callState: CallState.Accepted,
-        peekedParticipants: [],
-        remoteParticipants: [
-          { hasRemoteVideo: true, presenting: false, title: 'Remy' },
-        ],
-      },
-    })}
-  />
-);
+export function OngoingDirectCall(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        activeCall: {
+          ...getCommonActiveCallData(),
+          callMode: CallMode.Direct,
+          callState: CallState.Accepted,
+          peekedParticipants: [],
+          remoteParticipants: [
+            { hasRemoteVideo: true, presenting: false, title: 'Remy' },
+          ],
+        },
+      })}
+    />
+  );
+}
 
-export const OngoingGroupCall = (): JSX.Element => (
-  <CallManager
-    {...createProps({
-      activeCall: {
-        ...getCommonActiveCallData(),
-        callMode: CallMode.Group,
-        connectionState: GroupCallConnectionState.Connected,
-        conversationsWithSafetyNumberChanges: [],
-        deviceCount: 0,
-        joinState: GroupCallJoinState.Joined,
-        maxDevices: 5,
-        groupMembers: [],
-        isConversationTooBigToRing: false,
-        peekedParticipants: [],
-        remoteParticipants: [],
-        remoteAudioLevels: new Map<number, number>(),
-      },
-    })}
-  />
-);
+export function OngoingGroupCall(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        activeCall: {
+          ...getCommonActiveCallData(),
+          callMode: CallMode.Group,
+          connectionState: GroupCallConnectionState.Connected,
+          conversationsWithSafetyNumberChanges: [],
+          deviceCount: 0,
+          joinState: GroupCallJoinState.Joined,
+          maxDevices: 5,
+          groupMembers: [],
+          isConversationTooBigToRing: false,
+          peekedParticipants: [],
+          remoteParticipants: [],
+          remoteAudioLevels: new Map<number, number>(),
+        },
+      })}
+    />
+  );
+}
 
-export const RingingDirectCall = (): JSX.Element => (
-  <CallManager
-    {...createProps({
-      incomingCall: {
-        callMode: CallMode.Direct as const,
-        conversation: getConversation(),
-        isVideoCall: true,
-      },
-    })}
-  />
-);
+export function RingingDirectCall(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        incomingCall: {
+          callMode: CallMode.Direct as const,
+          conversation: getConversation(),
+          isVideoCall: true,
+        },
+      })}
+    />
+  );
+}
 
 RingingDirectCall.story = {
   name: 'Ringing (direct call)',
 };
 
-export const RingingGroupCall = (): JSX.Element => (
-  <CallManager
-    {...createProps({
-      incomingCall: {
-        callMode: CallMode.Group as const,
-        conversation: {
-          ...getConversation(),
-          type: 'group',
-          title: 'Tahoe Trip',
+export function RingingGroupCall(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        incomingCall: {
+          callMode: CallMode.Group as const,
+          conversation: {
+            ...getConversation(),
+            type: 'group',
+            title: 'Tahoe Trip',
+          },
+          otherMembersRung: [
+            { firstName: 'Morty', title: 'Morty Smith' },
+            { firstName: 'Summer', title: 'Summer Smith' },
+          ],
+          ringer: { firstName: 'Rick', title: 'Rick Sanchez' },
         },
-        otherMembersRung: [
-          { firstName: 'Morty', title: 'Morty Smith' },
-          { firstName: 'Summer', title: 'Summer Smith' },
-        ],
-        ringer: { firstName: 'Rick', title: 'Rick Sanchez' },
-      },
-    })}
-  />
-);
+      })}
+    />
+  );
+}
 
 RingingGroupCall.story = {
   name: 'Ringing (group call)',
 };
 
-export const CallRequestNeeded = (): JSX.Element => (
-  <CallManager
-    {...createProps({
-      activeCall: {
-        ...getCommonActiveCallData(),
-        callEndedReason: CallEndedReason.RemoteHangupNeedPermission,
-        callMode: CallMode.Direct,
-        callState: CallState.Accepted,
-        peekedParticipants: [],
-        remoteParticipants: [
-          { hasRemoteVideo: true, presenting: false, title: 'Mike' },
-        ],
-      },
-    })}
-  />
-);
+export function CallRequestNeeded(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        activeCall: {
+          ...getCommonActiveCallData(),
+          callEndedReason: CallEndedReason.RemoteHangupNeedPermission,
+          callMode: CallMode.Direct,
+          callState: CallState.Accepted,
+          peekedParticipants: [],
+          remoteParticipants: [
+            { hasRemoteVideo: true, presenting: false, title: 'Mike' },
+          ],
+        },
+      })}
+    />
+  );
+}
 
-export const GroupCallSafetyNumberChanged = (): JSX.Element => (
-  <CallManager
-    {...createProps({
-      activeCall: {
-        ...getCommonActiveCallData(),
-        callMode: CallMode.Group,
-        connectionState: GroupCallConnectionState.Connected,
-        conversationsWithSafetyNumberChanges: [
-          {
-            ...getDefaultConversation({
-              title: 'Aaron',
-            }),
-          },
-        ],
-        deviceCount: 0,
-        joinState: GroupCallJoinState.Joined,
-        maxDevices: 5,
-        groupMembers: [],
-        isConversationTooBigToRing: false,
-        peekedParticipants: [],
-        remoteParticipants: [],
-        remoteAudioLevels: new Map<number, number>(),
-      },
-    })}
-  />
-);
+export function GroupCallSafetyNumberChanged(): JSX.Element {
+  return (
+    <CallManager
+      {...createProps({
+        activeCall: {
+          ...getCommonActiveCallData(),
+          callMode: CallMode.Group,
+          connectionState: GroupCallConnectionState.Connected,
+          conversationsWithSafetyNumberChanges: [
+            {
+              ...getDefaultConversation({
+                title: 'Aaron',
+              }),
+            },
+          ],
+          deviceCount: 0,
+          joinState: GroupCallJoinState.Joined,
+          maxDevices: 5,
+          groupMembers: [],
+          isConversationTooBigToRing: false,
+          peekedParticipants: [],
+          remoteParticipants: [],
+          remoteAudioLevels: new Map<number, number>(),
+        },
+      })}
+    />
+  );
+}
 
 GroupCallSafetyNumberChanged.story = {
   name: 'Group call - Safety Number Changed',
diff --git a/ts/components/CallManager.tsx b/ts/components/CallManager.tsx
index 64ee7588c..94227fc6b 100644
--- a/ts/components/CallManager.tsx
+++ b/ts/components/CallManager.tsx
@@ -105,7 +105,7 @@ type ActiveCallManagerPropsType = PropsType & {
   activeCall: ActiveCallType;
 };
 
-const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
+function ActiveCallManager({
   activeCall,
   availableCameras,
   cancelCall,
@@ -137,7 +137,7 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
   toggleScreenRecordingPermissionsDialog,
   toggleSettings,
   toggleSpeakerView,
-}) => {
+}: ActiveCallManagerPropsType): JSX.Element {
   const {
     conversation,
     hasLocalAudio,
@@ -374,9 +374,9 @@ const ActiveCallManager: React.FC<ActiveCallManagerPropsType> = ({
       ) : null}
     </>
   );
-};
+}
 
-export const CallManager: React.FC<PropsType> = props => {
+export function CallManager(props: PropsType): JSX.Element | null {
   const {
     acceptCall,
     activeCall,
@@ -449,7 +449,7 @@ export const CallManager: React.FC<PropsType> = props => {
   }
 
   return null;
-};
+}
 
 function getShouldRing({
   activeCall,
diff --git a/ts/components/CallNeedPermissionScreen.tsx b/ts/components/CallNeedPermissionScreen.tsx
index 87c5e1754..db8f1d810 100644
--- a/ts/components/CallNeedPermissionScreen.tsx
+++ b/ts/components/CallNeedPermissionScreen.tsx
@@ -29,11 +29,11 @@ type Props = {
 
 const AUTO_CLOSE_MS = 10000;
 
-export const CallNeedPermissionScreen: React.FC<Props> = ({
+export function CallNeedPermissionScreen({
   conversation,
   i18n,
   close,
-}) => {
+}: Props): JSX.Element {
   const title = conversation.title || i18n('unknownContact');
 
   const autoCloseAtRef = useRef<number>(Date.now() + AUTO_CLOSE_MS);
@@ -79,4 +79,4 @@ export const CallNeedPermissionScreen: React.FC<Props> = ({
       </button>
     </div>
   );
-};
+}
diff --git a/ts/components/CallScreen.stories.tsx b/ts/components/CallScreen.stories.tsx
index e0bc727b7..0b1d397da 100644
--- a/ts/components/CallScreen.stories.tsx
+++ b/ts/components/CallScreen.stories.tsx
@@ -189,11 +189,11 @@ export default {
   title: 'Components/CallScreen',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return <CallScreen {...createProps()} />;
-};
+}
 
-export const PreRing = (): JSX.Element => {
+export function PreRing(): JSX.Element {
   return (
     <CallScreen
       {...createProps({
@@ -202,7 +202,7 @@ export const PreRing = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 PreRing.story = {
   name: 'Pre-Ring',
@@ -241,7 +241,7 @@ export const _Ended = (): JSX.Element => {
   );
 };
 
-export const HasLocalAudio = (): JSX.Element => {
+export function HasLocalAudio(): JSX.Element {
   return (
     <CallScreen
       {...createProps({
@@ -250,13 +250,13 @@ export const HasLocalAudio = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 HasLocalAudio.story = {
   name: 'hasLocalAudio',
 };
 
-export const HasLocalVideo = (): JSX.Element => {
+export function HasLocalVideo(): JSX.Element {
   return (
     <CallScreen
       {...createProps({
@@ -265,13 +265,13 @@ export const HasLocalVideo = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 HasLocalVideo.story = {
   name: 'hasLocalVideo',
 };
 
-export const HasRemoteVideo = (): JSX.Element => {
+export function HasRemoteVideo(): JSX.Element {
   return (
     <CallScreen
       {...createProps({
@@ -280,34 +280,36 @@ export const HasRemoteVideo = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 HasRemoteVideo.story = {
   name: 'hasRemoteVideo',
 };
 
-export const GroupCall1 = (): JSX.Element => (
-  <CallScreen
-    {...createProps({
-      callMode: CallMode.Group,
-      remoteParticipants: [
-        {
-          demuxId: 0,
-          hasRemoteAudio: true,
-          hasRemoteVideo: true,
-          presenting: false,
-          sharingScreen: false,
-          videoAspectRatio: 1.3,
-          ...getDefaultConversation({
-            isBlocked: false,
-            uuid: '72fa60e5-25fb-472d-8a56-e56867c57dda',
-            title: 'Tyler',
-          }),
-        },
-      ],
-    })}
-  />
-);
+export function GroupCall1(): JSX.Element {
+  return (
+    <CallScreen
+      {...createProps({
+        callMode: CallMode.Group,
+        remoteParticipants: [
+          {
+            demuxId: 0,
+            hasRemoteAudio: true,
+            hasRemoteVideo: true,
+            presenting: false,
+            sharingScreen: false,
+            videoAspectRatio: 1.3,
+            ...getDefaultConversation({
+              isBlocked: false,
+              uuid: '72fa60e5-25fb-472d-8a56-e56867c57dda',
+              title: 'Tyler',
+            }),
+          },
+        ],
+      })}
+    />
+  );
+}
 
 GroupCall1.story = {
   name: 'Group call - 1',
@@ -327,7 +329,7 @@ const allRemoteParticipants = times(MAX_PARTICIPANTS).map(index => ({
   }),
 }));
 
-export const GroupCallMany = (): JSX.Element => {
+export function GroupCallMany(): JSX.Element {
   return (
     <CallScreen
       {...createProps({
@@ -344,74 +346,80 @@ export const GroupCallMany = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 GroupCallMany.story = {
   name: 'Group call - Many',
 };
 
-export const GroupCallReconnecting = (): JSX.Element => (
-  <CallScreen
-    {...createProps({
-      callMode: CallMode.Group,
-      connectionState: GroupCallConnectionState.Reconnecting,
-      remoteParticipants: [
-        {
-          demuxId: 0,
-          hasRemoteAudio: true,
-          hasRemoteVideo: true,
-          presenting: false,
-          sharingScreen: false,
-          videoAspectRatio: 1.3,
-          ...getDefaultConversation({
-            isBlocked: false,
-            title: 'Tyler',
-            uuid: '33871c64-0c22-45ce-8aa4-0ec237ac4a31',
-          }),
-        },
-      ],
-    })}
-  />
-);
+export function GroupCallReconnecting(): JSX.Element {
+  return (
+    <CallScreen
+      {...createProps({
+        callMode: CallMode.Group,
+        connectionState: GroupCallConnectionState.Reconnecting,
+        remoteParticipants: [
+          {
+            demuxId: 0,
+            hasRemoteAudio: true,
+            hasRemoteVideo: true,
+            presenting: false,
+            sharingScreen: false,
+            videoAspectRatio: 1.3,
+            ...getDefaultConversation({
+              isBlocked: false,
+              title: 'Tyler',
+              uuid: '33871c64-0c22-45ce-8aa4-0ec237ac4a31',
+            }),
+          },
+        ],
+      })}
+    />
+  );
+}
 
 GroupCallReconnecting.story = {
   name: 'Group call - reconnecting',
 };
 
-export const GroupCall0 = (): JSX.Element => (
-  <CallScreen
-    {...createProps({
-      callMode: CallMode.Group,
-      remoteParticipants: [],
-    })}
-  />
-);
+export function GroupCall0(): JSX.Element {
+  return (
+    <CallScreen
+      {...createProps({
+        callMode: CallMode.Group,
+        remoteParticipants: [],
+      })}
+    />
+  );
+}
 
 GroupCall0.story = {
   name: 'Group call - 0',
 };
 
-export const GroupCallSomeoneIsSharingScreen = (): JSX.Element => (
-  <CallScreen
-    {...createProps({
-      callMode: CallMode.Group,
-      remoteParticipants: allRemoteParticipants
-        .slice(0, 5)
-        .map((participant, index) => ({
-          ...participant,
-          presenting: index === 1,
-          sharingScreen: index === 1,
-        })),
-    })}
-  />
-);
+export function GroupCallSomeoneIsSharingScreen(): JSX.Element {
+  return (
+    <CallScreen
+      {...createProps({
+        callMode: CallMode.Group,
+        remoteParticipants: allRemoteParticipants
+          .slice(0, 5)
+          .map((participant, index) => ({
+            ...participant,
+            presenting: index === 1,
+            sharingScreen: index === 1,
+          })),
+      })}
+    />
+  );
+}
 
 GroupCallSomeoneIsSharingScreen.story = {
   name: 'Group call - someone is sharing screen',
 };
 
-export const GroupCallSomeoneIsSharingScreenAndYoureReconnecting =
-  (): JSX.Element => (
+export function GroupCallSomeoneIsSharingScreenAndYoureReconnecting(): JSX.Element {
+  return (
     <CallScreen
       {...createProps({
         callMode: CallMode.Group,
@@ -426,6 +434,7 @@ export const GroupCallSomeoneIsSharingScreenAndYoureReconnecting =
       })}
     />
   );
+}
 
 GroupCallSomeoneIsSharingScreenAndYoureReconnecting.story = {
   name: "Group call - someone is sharing screen and you're reconnecting",
diff --git a/ts/components/CallScreen.tsx b/ts/components/CallScreen.tsx
index dc0e70b7b..cb2ed6c60 100644
--- a/ts/components/CallScreen.tsx
+++ b/ts/components/CallScreen.tsx
@@ -119,7 +119,7 @@ function DirectCallHeaderMessage({
   return null;
 }
 
-export const CallScreen: React.FC<PropsType> = ({
+export function CallScreen({
   activeCall,
   getGroupCallVideoFrameSource,
   getPresentingSources,
@@ -143,7 +143,7 @@ export const CallScreen: React.FC<PropsType> = ({
   toggleScreenRecordingPermissionsDialog,
   toggleSettings,
   toggleSpeakerView,
-}) => {
+}: PropsType): JSX.Element {
   const {
     conversation,
     hasLocalAudio,
@@ -539,7 +539,7 @@ export const CallScreen: React.FC<PropsType> = ({
       </div>
     </div>
   );
-};
+}
 
 function getCallModeClassSuffix(
   callMode: CallMode.Direct | CallMode.Group
diff --git a/ts/components/CallingAudioIndicator.stories.tsx b/ts/components/CallingAudioIndicator.stories.tsx
index 75f992c2a..04d38ed58 100644
--- a/ts/components/CallingAudioIndicator.stories.tsx
+++ b/ts/components/CallingAudioIndicator.stories.tsx
@@ -11,7 +11,7 @@ export default {
   title: 'Components/CallingAudioIndicator',
 };
 
-export const Extreme = (): JSX.Element => {
+export function Extreme(): JSX.Element {
   const [audioLevel, setAudioLevel] = useState(1);
 
   useEffect(() => {
@@ -30,9 +30,9 @@ export const Extreme = (): JSX.Element => {
       audioLevel={audioLevel}
     />
   );
-};
+}
 
-export const Random = (): JSX.Element => {
+export function Random(): JSX.Element {
   const [audioLevel, setAudioLevel] = useState(1);
 
   useEffect(() => {
@@ -51,4 +51,4 @@ export const Random = (): JSX.Element => {
       audioLevel={audioLevel}
     />
   );
-};
+}
diff --git a/ts/components/CallingButton.stories.tsx b/ts/components/CallingButton.stories.tsx
index 3fc0b5049..969b6658c 100644
--- a/ts/components/CallingButton.stories.tsx
+++ b/ts/components/CallingButton.stories.tsx
@@ -32,7 +32,7 @@ export default {
   title: 'Components/CallingButton',
 };
 
-export const KitchenSink = (): JSX.Element => {
+export function KitchenSink(): JSX.Element {
   return (
     <>
       {Object.keys(CallingButtonType).map(buttonType => (
@@ -43,71 +43,71 @@ export const KitchenSink = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
 
-export const AudioOn = (): JSX.Element => {
+export function AudioOn(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.AUDIO_ON,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const AudioOff = (): JSX.Element => {
+export function AudioOff(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.AUDIO_OFF,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const AudioDisabled = (): JSX.Element => {
+export function AudioDisabled(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.AUDIO_DISABLED,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const VideoOn = (): JSX.Element => {
+export function VideoOn(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.VIDEO_ON,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const VideoOff = (): JSX.Element => {
+export function VideoOff(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.VIDEO_OFF,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const VideoDisabled = (): JSX.Element => {
+export function VideoDisabled(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.VIDEO_DISABLED,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const TooltipRight = (): JSX.Element => {
+export function TooltipRight(): JSX.Element {
   const props = createProps({
     tooltipDirection: TooltipPlacement.Right,
   });
   return <CallingButton {...props} />;
-};
+}
 
 TooltipRight.story = {
   name: 'Tooltip right',
 };
 
-export const PresentingOn = (): JSX.Element => {
+export function PresentingOn(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.PRESENTING_ON,
   });
   return <CallingButton {...props} />;
-};
+}
 
-export const PresentingOff = (): JSX.Element => {
+export function PresentingOff(): JSX.Element {
   const props = createProps({
     buttonType: CallingButtonType.PRESENTING_OFF,
   });
   return <CallingButton {...props} />;
-};
+}
diff --git a/ts/components/CallingButton.tsx b/ts/components/CallingButton.tsx
index 552c82f49..5d551b41a 100644
--- a/ts/components/CallingButton.tsx
+++ b/ts/components/CallingButton.tsx
@@ -35,7 +35,7 @@ export type PropsType = {
   tooltipDirection?: TooltipPlacement;
 };
 
-export const CallingButton = ({
+export function CallingButton({
   buttonType,
   i18n,
   isVisible = true,
@@ -43,7 +43,7 @@ export const CallingButton = ({
   onMouseEnter,
   onMouseLeave,
   tooltipDirection,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const uniqueButtonId = useMemo(() => uuid(), []);
 
   let classNameSuffix = '';
@@ -145,4 +145,4 @@ export const CallingButton = ({
       </div>
     </Tooltip>
   );
-};
+}
diff --git a/ts/components/CallingDeviceSelection.stories.tsx b/ts/components/CallingDeviceSelection.stories.tsx
index bcf5422c1..0c2935c38 100644
--- a/ts/components/CallingDeviceSelection.stories.tsx
+++ b/ts/components/CallingDeviceSelection.stories.tsx
@@ -41,11 +41,11 @@ export default {
   title: 'Components/CallingDeviceSelection',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return <CallingDeviceSelection {...createProps()} />;
-};
+}
 
-export const SomeDevices = (): JSX.Element => {
+export function SomeDevices(): JSX.Element {
   const availableSpeakers = [
     {
       name: 'Default',
@@ -72,9 +72,9 @@ export const SomeDevices = (): JSX.Element => {
   });
 
   return <CallingDeviceSelection {...props} />;
-};
+}
 
-export const DefaultDevices = (): JSX.Element => {
+export function DefaultDevices(): JSX.Element {
   const availableSpeakers = [
     {
       name: 'default (Headphones)',
@@ -103,9 +103,9 @@ export const DefaultDevices = (): JSX.Element => {
   });
 
   return <CallingDeviceSelection {...props} />;
-};
+}
 
-export const AllDevices = (): JSX.Element => {
+export function AllDevices(): JSX.Element {
   const availableSpeakers = [
     {
       name: 'Default',
@@ -179,4 +179,4 @@ export const AllDevices = (): JSX.Element => {
   });
 
   return <CallingDeviceSelection {...props} />;
-};
+}
diff --git a/ts/components/CallingDeviceSelection.tsx b/ts/components/CallingDeviceSelection.tsx
index f79e3b9dc..9ec6da791 100644
--- a/ts/components/CallingDeviceSelection.tsx
+++ b/ts/components/CallingDeviceSelection.tsx
@@ -116,7 +116,7 @@ function createCameraChangeHandler(
   };
 }
 
-export const CallingDeviceSelection = ({
+export function CallingDeviceSelection({
   availableCameras,
   availableMicrophones,
   availableSpeakers,
@@ -126,7 +126,7 @@ export const CallingDeviceSelection = ({
   selectedMicrophone,
   selectedSpeaker,
   toggleSettings,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const selectedMicrophoneIndex = selectedMicrophone
     ? selectedMicrophone.index
     : undefined;
@@ -212,4 +212,4 @@ export const CallingDeviceSelection = ({
       </div>
     </Modal>
   );
-};
+}
diff --git a/ts/components/CallingHeader.stories.tsx b/ts/components/CallingHeader.stories.tsx
index 7dde76cb9..2146f806a 100644
--- a/ts/components/CallingHeader.stories.tsx
+++ b/ts/components/CallingHeader.stories.tsx
@@ -34,61 +34,73 @@ export default {
   title: 'Components/CallingHeader',
 };
 
-export const Default = (): JSX.Element => <CallingHeader {...createProps()} />;
+export function Default(): JSX.Element {
+  return <CallingHeader {...createProps()} />;
+}
 
-export const LobbyStyle = (): JSX.Element => (
-  <CallingHeader
-    {...createProps()}
-    title={undefined}
-    togglePip={undefined}
-    onCancel={action('onClose')}
-  />
-);
+export function LobbyStyle(): JSX.Element {
+  return (
+    <CallingHeader
+      {...createProps()}
+      title={undefined}
+      togglePip={undefined}
+      onCancel={action('onClose')}
+    />
+  );
+}
 
 LobbyStyle.story = {
   name: 'Lobby style',
 };
 
-export const WithParticipants = (): JSX.Element => (
-  <CallingHeader
-    {...createProps({
-      isGroupCall: true,
-      participantCount: 10,
-    })}
-  />
-);
+export function WithParticipants(): JSX.Element {
+  return (
+    <CallingHeader
+      {...createProps({
+        isGroupCall: true,
+        participantCount: 10,
+      })}
+    />
+  );
+}
 
-export const WithParticipantsShown = (): JSX.Element => (
-  <CallingHeader
-    {...createProps({
-      isGroupCall: true,
-      participantCount: 10,
-      showParticipantsList: true,
-    })}
-  />
-);
+export function WithParticipantsShown(): JSX.Element {
+  return (
+    <CallingHeader
+      {...createProps({
+        isGroupCall: true,
+        participantCount: 10,
+        showParticipantsList: true,
+      })}
+    />
+  );
+}
 
 WithParticipantsShown.story = {
   name: 'With Participants (shown)',
 };
 
-export const LongTitle = (): JSX.Element => (
-  <CallingHeader
-    {...createProps({
-      title:
-        'What do I got to, what do I got to do to wake you up? To shake you up, to break the structure up?',
-    })}
-  />
-);
+export function LongTitle(): JSX.Element {
+  return (
+    <CallingHeader
+      {...createProps({
+        title:
+          'What do I got to, what do I got to do to wake you up? To shake you up, to break the structure up?',
+      })}
+    />
+  );
+}
 
-export const TitleWithMessage = (): JSX.Element => (
-  <CallingHeader
-    {...createProps({
-      title: 'Hello world',
-      message: 'Goodbye earth',
-    })}
-  />
-);
+export function TitleWithMessage(): JSX.Element {
+  return (
+    <CallingHeader
+      {...createProps({
+        title: 'Hello world',
+        message: 'Goodbye earth',
+      })}
+    />
+  );
+}
 
 TitleWithMessage.story = {
   name: 'Title with message',
diff --git a/ts/components/CallingHeader.tsx b/ts/components/CallingHeader.tsx
index dd32b2a95..d7d4a6d96 100644
--- a/ts/components/CallingHeader.tsx
+++ b/ts/components/CallingHeader.tsx
@@ -23,7 +23,7 @@ export type PropsType = {
   toggleSpeakerView?: () => void;
 };
 
-export const CallingHeader = ({
+export function CallingHeader({
   i18n,
   isInSpeakerView,
   isGroupCall = false,
@@ -36,103 +36,110 @@ export const CallingHeader = ({
   togglePip,
   toggleSettings,
   toggleSpeakerView,
-}: PropsType): JSX.Element => (
-  <div className="module-calling__header">
-    {title ? (
-      <div className="module-calling__header--header-name">{title}</div>
-    ) : null}
-    {message ? (
-      <div className="module-ongoing-call__header-message">{message}</div>
-    ) : null}
-    <div className="module-calling-tools">
-      {isGroupCall && participantCount ? (
-        <div className="module-calling-tools__button">
-          <Tooltip
-            content={i18n('calling__participants', [String(participantCount)])}
-            theme={Theme.Dark}
-          >
-            <button
-              aria-label={i18n('calling__participants', [
+}: PropsType): JSX.Element {
+  return (
+    <div className="module-calling__header">
+      {title ? (
+        <div className="module-calling__header--header-name">{title}</div>
+      ) : null}
+      {message ? (
+        <div className="module-ongoing-call__header-message">{message}</div>
+      ) : null}
+      <div className="module-calling-tools">
+        {isGroupCall && participantCount ? (
+          <div className="module-calling-tools__button">
+            <Tooltip
+              content={i18n('calling__participants', [
                 String(participantCount),
               ])}
-              className={classNames('CallingButton__participants--container', {
-                'CallingButton__participants--shown': showParticipantsList,
-              })}
-              onClick={toggleParticipants}
-              type="button"
+              theme={Theme.Dark}
             >
-              <i className="CallingButton__participants" />
-              <span className="CallingButton__participants--count">
-                {participantCount}
-              </span>
-            </button>
-          </Tooltip>
-        </div>
-      ) : null}
-      <div className="module-calling-tools__button">
-        <Tooltip
-          content={i18n('callingDeviceSelection__settings')}
-          theme={Theme.Dark}
-        >
-          <button
-            aria-label={i18n('callingDeviceSelection__settings')}
-            className="CallingButton__settings"
-            onClick={toggleSettings}
-            type="button"
-          />
-        </Tooltip>
-      </div>
-      {isGroupCall && participantCount > 2 && toggleSpeakerView && (
+              <button
+                aria-label={i18n('calling__participants', [
+                  String(participantCount),
+                ])}
+                className={classNames(
+                  'CallingButton__participants--container',
+                  {
+                    'CallingButton__participants--shown': showParticipantsList,
+                  }
+                )}
+                onClick={toggleParticipants}
+                type="button"
+              >
+                <i className="CallingButton__participants" />
+                <span className="CallingButton__participants--count">
+                  {participantCount}
+                </span>
+              </button>
+            </Tooltip>
+          </div>
+        ) : null}
         <div className="module-calling-tools__button">
           <Tooltip
-            content={i18n(
-              isInSpeakerView
-                ? 'calling__switch-view--to-grid'
-                : 'calling__switch-view--to-speaker'
-            )}
+            content={i18n('callingDeviceSelection__settings')}
             theme={Theme.Dark}
           >
             <button
-              aria-label={i18n(
+              aria-label={i18n('callingDeviceSelection__settings')}
+              className="CallingButton__settings"
+              onClick={toggleSettings}
+              type="button"
+            />
+          </Tooltip>
+        </div>
+        {isGroupCall && participantCount > 2 && toggleSpeakerView && (
+          <div className="module-calling-tools__button">
+            <Tooltip
+              content={i18n(
                 isInSpeakerView
                   ? 'calling__switch-view--to-grid'
                   : 'calling__switch-view--to-speaker'
               )}
-              className={
-                isInSpeakerView
-                  ? 'CallingButton__grid-view'
-                  : 'CallingButton__speaker-view'
-              }
-              onClick={toggleSpeakerView}
-              type="button"
-            />
-          </Tooltip>
-        </div>
-      )}
-      {togglePip && (
-        <div className="module-calling-tools__button">
-          <Tooltip content={i18n('calling__pip--on')} theme={Theme.Dark}>
-            <button
-              aria-label={i18n('calling__pip--on')}
-              className="CallingButton__pip"
-              onClick={togglePip}
-              type="button"
-            />
-          </Tooltip>
-        </div>
-      )}
-      {onCancel && (
-        <div className="module-calling-tools__button">
-          <Tooltip content={i18n('cancel')} theme={Theme.Dark}>
-            <button
-              aria-label={i18n('cancel')}
-              className="CallingButton__cancel"
-              onClick={onCancel}
-              type="button"
-            />
-          </Tooltip>
-        </div>
-      )}
+              theme={Theme.Dark}
+            >
+              <button
+                aria-label={i18n(
+                  isInSpeakerView
+                    ? 'calling__switch-view--to-grid'
+                    : 'calling__switch-view--to-speaker'
+                )}
+                className={
+                  isInSpeakerView
+                    ? 'CallingButton__grid-view'
+                    : 'CallingButton__speaker-view'
+                }
+                onClick={toggleSpeakerView}
+                type="button"
+              />
+            </Tooltip>
+          </div>
+        )}
+        {togglePip && (
+          <div className="module-calling-tools__button">
+            <Tooltip content={i18n('calling__pip--on')} theme={Theme.Dark}>
+              <button
+                aria-label={i18n('calling__pip--on')}
+                className="CallingButton__pip"
+                onClick={togglePip}
+                type="button"
+              />
+            </Tooltip>
+          </div>
+        )}
+        {onCancel && (
+          <div className="module-calling-tools__button">
+            <Tooltip content={i18n('cancel')} theme={Theme.Dark}>
+              <button
+                aria-label={i18n('cancel')}
+                className="CallingButton__cancel"
+                onClick={onCancel}
+                type="button"
+              />
+            </Tooltip>
+          </div>
+        )}
+      </div>
     </div>
-  </div>
-);
+  );
+}
diff --git a/ts/components/CallingLobby.stories.tsx b/ts/components/CallingLobby.stories.tsx
index 1714c412d..320ba5516 100644
--- a/ts/components/CallingLobby.stories.tsx
+++ b/ts/components/CallingLobby.stories.tsx
@@ -94,23 +94,23 @@ export default {
   title: 'Components/CallingLobby',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   const props = createProps();
   return <CallingLobby {...props} />;
-};
+}
 
-export const NoCameraNoAvatar = (): JSX.Element => {
+export function NoCameraNoAvatar(): JSX.Element {
   const props = createProps({
     availableCameras: [],
   });
   return <CallingLobby {...props} />;
-};
+}
 
 NoCameraNoAvatar.story = {
   name: 'No Camera, no avatar',
 };
 
-export const NoCameraLocalAvatar = (): JSX.Element => {
+export function NoCameraLocalAvatar(): JSX.Element {
   const props = createProps({
     availableCameras: [],
     me: getDefaultConversation({
@@ -121,52 +121,52 @@ export const NoCameraLocalAvatar = (): JSX.Element => {
     }),
   });
   return <CallingLobby {...props} />;
-};
+}
 
 NoCameraLocalAvatar.story = {
   name: 'No Camera, local avatar',
 };
 
-export const LocalVideo = (): JSX.Element => {
+export function LocalVideo(): JSX.Element {
   const props = createProps({
     hasLocalVideo: true,
   });
   return <CallingLobby {...props} />;
-};
+}
 
-export const InitiallyMuted = (): JSX.Element => {
+export function InitiallyMuted(): JSX.Element {
   const props = createProps({
     hasLocalAudio: false,
   });
   return <CallingLobby {...props} />;
-};
+}
 
 InitiallyMuted.story = {
   name: 'Initially muted',
 };
 
-export const GroupCall0PeekedParticipants = (): JSX.Element => {
+export function GroupCall0PeekedParticipants(): JSX.Element {
   const props = createProps({ isGroupCall: true, peekedParticipants: [] });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCall0PeekedParticipants.story = {
   name: 'Group Call - 0 peeked participants',
 };
 
-export const GroupCall1PeekedParticipant = (): JSX.Element => {
+export function GroupCall1PeekedParticipant(): JSX.Element {
   const props = createProps({
     isGroupCall: true,
     peekedParticipants: [{ title: 'Sam' }].map(fakePeekedParticipant),
   });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCall1PeekedParticipant.story = {
   name: 'Group Call - 1 peeked participant',
 };
 
-export const GroupCall1PeekedParticipantSelf = (): JSX.Element => {
+export function GroupCall1PeekedParticipantSelf(): JSX.Element {
   const uuid = UUID.generate().toString();
   const props = createProps({
     isGroupCall: true,
@@ -177,13 +177,13 @@ export const GroupCall1PeekedParticipantSelf = (): JSX.Element => {
     peekedParticipants: [fakePeekedParticipant({ title: 'Ash', uuid })],
   });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCall1PeekedParticipantSelf.story = {
   name: 'Group Call - 1 peeked participant (self)',
 };
 
-export const GroupCall4PeekedParticipants = (): JSX.Element => {
+export function GroupCall4PeekedParticipants(): JSX.Element {
   const props = createProps({
     isGroupCall: true,
     peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(title =>
@@ -191,13 +191,13 @@ export const GroupCall4PeekedParticipants = (): JSX.Element => {
     ),
   });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCall4PeekedParticipants.story = {
   name: 'Group Call - 4 peeked participants',
 };
 
-export const GroupCall4PeekedParticipantsParticipantsList = (): JSX.Element => {
+export function GroupCall4PeekedParticipantsParticipantsList(): JSX.Element {
   const props = createProps({
     isGroupCall: true,
     peekedParticipants: ['Sam', 'Cayce', 'April', 'Logan', 'Carl'].map(title =>
@@ -206,13 +206,13 @@ export const GroupCall4PeekedParticipantsParticipantsList = (): JSX.Element => {
     showParticipantsList: true,
   });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCall4PeekedParticipantsParticipantsList.story = {
   name: 'Group Call - 4 peeked participants (participants list)',
 };
 
-export const GroupCallCallFull = (): JSX.Element => {
+export function GroupCallCallFull(): JSX.Element {
   const props = createProps({
     isGroupCall: true,
     isCallFull: true,
@@ -221,19 +221,19 @@ export const GroupCallCallFull = (): JSX.Element => {
     ),
   });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCallCallFull.story = {
   name: 'Group Call - call full',
 };
 
-export const GroupCall0PeekedParticipantsBigGroup = (): JSX.Element => {
+export function GroupCall0PeekedParticipantsBigGroup(): JSX.Element {
   const props = createProps({
     isGroupCall: true,
     groupMembers: times(100, () => getDefaultConversation()),
   });
   return <CallingLobby {...props} />;
-};
+}
 
 GroupCall0PeekedParticipantsBigGroup.story = {
   name: 'Group Call - 0 peeked participants, big group',
diff --git a/ts/components/CallingLobby.tsx b/ts/components/CallingLobby.tsx
index 491ae3d0c..2f2079174 100644
--- a/ts/components/CallingLobby.tsx
+++ b/ts/components/CallingLobby.tsx
@@ -63,7 +63,7 @@ export type PropsType = {
   toggleSettings: () => void;
 };
 
-export const CallingLobby = ({
+export function CallingLobby({
   availableCameras,
   conversation,
   groupMembers,
@@ -86,7 +86,7 @@ export const CallingLobby = ({
   toggleParticipants,
   toggleSettings,
   outgoingRing,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [isMutedToastVisible, setIsMutedToastVisible] = React.useState(
     !hasLocalAudio
   );
@@ -303,4 +303,4 @@ export const CallingLobby = ({
       </div>
     </FocusTrap>
   );
-};
+}
diff --git a/ts/components/CallingLobbyJoinButton.tsx b/ts/components/CallingLobbyJoinButton.tsx
index 574f1b529..810e67a10 100644
--- a/ts/components/CallingLobbyJoinButton.tsx
+++ b/ts/components/CallingLobbyJoinButton.tsx
@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent, ReactChild } from 'react';
+import type { ReactChild } from 'react';
 import React, { useState } from 'react';
 import { noop } from 'lodash';
 
@@ -19,6 +19,13 @@ export enum CallingLobbyJoinButtonVariant {
   Start = 'Start',
 }
 
+type PropsType = {
+  disabled?: boolean;
+  i18n: LocalizerType;
+  onClick: () => void;
+  variant: CallingLobbyJoinButtonVariant;
+};
+
 /**
  * This component is a little weird. Why not just render a button with some children?
  *
@@ -29,12 +36,12 @@ export enum CallingLobbyJoinButtonVariant {
  * For example, we might initially render "Join call" and then render a spinner when you
  * click the button. The button shouldn't resize in that situation.
  */
-export const CallingLobbyJoinButton: FunctionComponent<{
-  disabled?: boolean;
-  i18n: LocalizerType;
-  onClick: () => void;
-  variant: CallingLobbyJoinButtonVariant;
-}> = ({ disabled, i18n, onClick, variant }) => {
+export function CallingLobbyJoinButton({
+  disabled,
+  i18n,
+  onClick,
+  variant,
+}: PropsType): JSX.Element {
   const [width, setWidth] = useState<undefined | number>();
   const [height, setHeight] = useState<undefined | number>();
 
@@ -103,4 +110,4 @@ export const CallingLobbyJoinButton: FunctionComponent<{
       </div>
     </>
   );
-};
+}
diff --git a/ts/components/CallingParticipantsList.stories.tsx b/ts/components/CallingParticipantsList.stories.tsx
index 57de5131f..b4db4e046 100644
--- a/ts/components/CallingParticipantsList.stories.tsx
+++ b/ts/components/CallingParticipantsList.stories.tsx
@@ -47,16 +47,16 @@ export default {
   title: 'Components/CallingParticipantsList',
 };
 
-export const NoOne = (): JSX.Element => {
+export function NoOne(): JSX.Element {
   const props = createProps();
   return <CallingParticipantsList {...props} />;
-};
+}
 
 NoOne.story = {
   name: 'No one',
 };
 
-export const SoloCall = (): JSX.Element => {
+export function SoloCall(): JSX.Element {
   const props = createProps({
     participants: [
       createParticipant({
@@ -65,9 +65,9 @@ export const SoloCall = (): JSX.Element => {
     ],
   });
   return <CallingParticipantsList {...props} />;
-};
+}
 
-export const ManyParticipants = (): JSX.Element => {
+export function ManyParticipants(): JSX.Element {
   const props = createProps({
     participants: [
       createParticipant({
@@ -95,13 +95,13 @@ export const ManyParticipants = (): JSX.Element => {
     ],
   });
   return <CallingParticipantsList {...props} />;
-};
+}
 
-export const Overflow = (): JSX.Element => {
+export function Overflow(): JSX.Element {
   const props = createProps({
     participants: Array(50)
       .fill(null)
       .map(() => createParticipant({ title: 'Kirby' })),
   });
   return <CallingParticipantsList {...props} />;
-};
+}
diff --git a/ts/components/CallingParticipantsList.tsx b/ts/components/CallingParticipantsList.tsx
index 1156e1f2d..dbe0bb499 100644
--- a/ts/components/CallingParticipantsList.tsx
+++ b/ts/components/CallingParticipantsList.tsx
@@ -30,7 +30,12 @@ export type PropsType = {
 };
 
 export const CallingParticipantsList = React.memo(
-  ({ i18n, onClose, ourUuid, participants }: PropsType) => {
+  function CallingParticipantsListInner({
+    i18n,
+    onClose,
+    ourUuid,
+    participants,
+  }: PropsType) {
     const [root, setRoot] = React.useState<HTMLElement | null>(null);
 
     const modalContainer = useContext(ModalContainerContext) ?? document.body;
diff --git a/ts/components/CallingPip.stories.tsx b/ts/components/CallingPip.stories.tsx
index 00b20f724..aefd11b2a 100644
--- a/ts/components/CallingPip.stories.tsx
+++ b/ts/components/CallingPip.stories.tsx
@@ -10,7 +10,7 @@ import { AvatarColors } from '../types/Colors';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { PropsType } from './CallingPip';
 import { CallingPip } from './CallingPip';
-import type { ActiveCallType } from '../types/Calling';
+import type { ActiveDirectCallType } from '../types/Calling';
 import {
   CallMode,
   CallViewMode,
@@ -52,7 +52,7 @@ const getCommonActiveCallData = () => ({
   showParticipantsList: false,
 });
 
-const defaultCall: ActiveCallType = {
+const defaultCall: ActiveDirectCallType = {
   ...getCommonActiveCallData(),
   callMode: CallMode.Direct as CallMode.Direct,
   callState: CallState.Accepted,
@@ -80,12 +80,12 @@ export default {
   title: 'Components/CallingPip',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   const props = createProps({});
   return <CallingPip {...props} />;
-};
+}
 
-export const ContactWithAvatarAndNoVideo = (): JSX.Element => {
+export function ContactWithAvatarAndNoVideo(): JSX.Element {
   const props = createProps({
     activeCall: {
       ...defaultCall,
@@ -99,13 +99,13 @@ export const ContactWithAvatarAndNoVideo = (): JSX.Element => {
     },
   });
   return <CallingPip {...props} />;
-};
+}
 
 ContactWithAvatarAndNoVideo.story = {
   name: 'Contact (with avatar and no video)',
 };
 
-export const ContactNoColor = (): JSX.Element => {
+export function ContactNoColor(): JSX.Element {
   const props = createProps({
     activeCall: {
       ...defaultCall,
@@ -116,13 +116,13 @@ export const ContactNoColor = (): JSX.Element => {
     },
   });
   return <CallingPip {...props} />;
-};
+}
 
 ContactNoColor.story = {
   name: 'Contact (no color)',
 };
 
-export const GroupCall = (): JSX.Element => {
+export function GroupCall(): JSX.Element {
   const props = createProps({
     activeCall: {
       ...getCommonActiveCallData(),
@@ -140,4 +140,4 @@ export const GroupCall = (): JSX.Element => {
     },
   });
   return <CallingPip {...props} />;
-};
+}
diff --git a/ts/components/CallingPip.tsx b/ts/components/CallingPip.tsx
index 2d934a0ba..0385bd255 100644
--- a/ts/components/CallingPip.tsx
+++ b/ts/components/CallingPip.tsx
@@ -70,7 +70,7 @@ const PIP_WIDTH = 120;
 const PIP_TOP_MARGIN = 56;
 const PIP_PADDING = 8;
 
-export const CallingPip = ({
+export function CallingPip({
   activeCall,
   getGroupCallVideoFrameSource,
   hangUpActiveCall,
@@ -82,7 +82,7 @@ export const CallingPip = ({
   switchToPresentationView,
   switchFromPresentationView,
   togglePip,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const videoContainerRef = React.useRef<null | HTMLDivElement>(null);
   const localVideoRef = React.useRef(null);
 
@@ -315,4 +315,4 @@ export const CallingPip = ({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/CallingPipRemoteVideo.tsx b/ts/components/CallingPipRemoteVideo.tsx
index b377b86a8..588906d85 100644
--- a/ts/components/CallingPipRemoteVideo.tsx
+++ b/ts/components/CallingPipRemoteVideo.tsx
@@ -27,13 +27,13 @@ import { nonRenderedRemoteParticipant } from '../util/ringrtc/nonRenderedRemoteP
 //   less than `MAX_FRAME_HEIGHT`.
 const PIP_VIDEO_HEIGHT_PX = 120;
 
-const NoVideo = ({
+function NoVideo({
   activeCall,
   i18n,
 }: {
   activeCall: ActiveCallType;
   i18n: LocalizerType;
-}): JSX.Element => {
+}): JSX.Element {
   const {
     acceptedMessageRequest,
     avatarPath,
@@ -68,7 +68,7 @@ const NoVideo = ({
       </CallBackgroundBlur>
     </div>
   );
-};
+}
 
 export type PropsType = {
   activeCall: ActiveCallType;
@@ -81,13 +81,13 @@ export type PropsType = {
   setRendererCanvas: (_: SetRendererCanvasType) => void;
 };
 
-export const CallingPipRemoteVideo = ({
+export function CallingPipRemoteVideo({
   activeCall,
   getGroupCallVideoFrameSource,
   i18n,
   setGroupCallVideoRequest,
   setRendererCanvas,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const { conversation } = activeCall;
 
   const getGroupCallFrameBuffer = useGetCallingFrameBuffer();
@@ -177,4 +177,4 @@ export const CallingPipRemoteVideo = ({
     default:
       throw missingCaseError(activeCall);
   }
-};
+}
diff --git a/ts/components/CallingPreCallInfo.stories.tsx b/ts/components/CallingPreCallInfo.stories.tsx
index 8d1bcc522..4297403e6 100644
--- a/ts/components/CallingPreCallInfo.stories.tsx
+++ b/ts/components/CallingPreCallInfo.stories.tsx
@@ -24,230 +24,260 @@ export default {
   title: 'Components/CallingPreCallInfo',
 };
 
-export const DirectConversation = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultConversation()}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function DirectConversation(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultConversation()}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 DirectConversation.story = {
   name: 'Direct conversation',
 };
 
-export const Ring0 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 0)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Ring0(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 0)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Ring0.story = {
   name: 'Group call: Will ring 0 people',
 };
 
-export const Ring1 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 1)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Ring1(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 1)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Ring1.story = {
   name: 'Group call: Will ring 1 person',
 };
 
-export const Ring2 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 2)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Ring2(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 2)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Ring2.story = {
   name: 'Group call: Will ring 2 people',
 };
 
-export const Ring3 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 3)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Ring3(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 3)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Ring3.story = {
   name: 'Group call: Will ring 3 people',
 };
 
-export const Ring4 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 4)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Ring4(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 4)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Ring3.story = {
   name: 'Group call: Will ring 4 people',
 };
 
-export const Notify0 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 0)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillNotRing}
-  />
-);
+export function Notify0(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 0)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillNotRing}
+    />
+  );
+}
 
 Notify0.story = {
   name: 'Group call: Will notify 0 people',
 };
 
-export const Notify1 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 1)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillNotRing}
-  />
-);
+export function Notify1(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 1)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillNotRing}
+    />
+  );
+}
 
 Notify1.story = {
   name: 'Group call: Will notify 1 person',
 };
 
-export const Notify2 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 2)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillNotRing}
-  />
-);
+export function Notify2(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 2)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillNotRing}
+    />
+  );
+}
 
 Notify2.story = {
   name: 'Group call: Will notify 2 people',
 };
 
-export const Notify3 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 3)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillNotRing}
-  />
-);
+export function Notify3(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 3)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillNotRing}
+    />
+  );
+}
 
 Notify3.story = {
   name: 'Group call: Will notify 3 people',
 };
 
-export const Notify4 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers.slice(0, 4)}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={[]}
-    ringMode={RingMode.WillNotRing}
-  />
-);
+export function Notify4(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers.slice(0, 4)}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={[]}
+      ringMode={RingMode.WillNotRing}
+    />
+  );
+}
 
 Notify4.story = {
   name: 'Group call: Will notify 4 people',
 };
 
-export const Peek1 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={otherMembers.slice(0, 1)}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Peek1(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={otherMembers.slice(0, 1)}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Peek1.story = {
   name: 'Group call: 1 participant peeked',
 };
 
-export const Peek2 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={otherMembers.slice(0, 2)}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Peek2(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={otherMembers.slice(0, 2)}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Peek2.story = {
   name: 'Group call: 2 participants peeked',
 };
 
-export const Peek3 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={otherMembers.slice(0, 3)}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Peek3(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={otherMembers.slice(0, 3)}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Peek3.story = {
   name: 'Group call: 3 participants peeked',
 };
 
-export const Peek4 = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers}
-    i18n={i18n}
-    me={getDefaultConversation()}
-    peekedParticipants={otherMembers.slice(0, 4)}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function Peek4(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers}
+      i18n={i18n}
+      me={getDefaultConversation()}
+      peekedParticipants={otherMembers.slice(0, 4)}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 Peek4.story = {
   name: 'Group call: 4 participants peeked',
 };
 
-export const GroupConversationYouOnAnOtherDevice = (): JSX.Element => {
+export function GroupConversationYouOnAnOtherDevice(): JSX.Element {
   const me = getDefaultConversation();
   return (
     <CallingPreCallInfo
@@ -259,23 +289,25 @@ export const GroupConversationYouOnAnOtherDevice = (): JSX.Element => {
       ringMode={RingMode.WillRing}
     />
   );
-};
+}
 
 GroupConversationYouOnAnOtherDevice.story = {
   name: 'Group conversation, you on an other device',
 };
 
-export const GroupConversationCallIsFull = (): JSX.Element => (
-  <CallingPreCallInfo
-    conversation={getDefaultGroupConversation()}
-    groupMembers={otherMembers}
-    i18n={i18n}
-    isCallFull
-    me={getDefaultConversation()}
-    peekedParticipants={otherMembers}
-    ringMode={RingMode.WillRing}
-  />
-);
+export function GroupConversationCallIsFull(): JSX.Element {
+  return (
+    <CallingPreCallInfo
+      conversation={getDefaultGroupConversation()}
+      groupMembers={otherMembers}
+      i18n={i18n}
+      isCallFull
+      me={getDefaultConversation()}
+      peekedParticipants={otherMembers}
+      ringMode={RingMode.WillRing}
+    />
+  );
+}
 
 GroupConversationCallIsFull.story = {
   name: 'Group conversation, call is full',
diff --git a/ts/components/CallingPreCallInfo.tsx b/ts/components/CallingPreCallInfo.tsx
index 8bcf28fbb..d70530f36 100644
--- a/ts/components/CallingPreCallInfo.tsx
+++ b/ts/components/CallingPreCallInfo.tsx
@@ -1,7 +1,6 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React from 'react';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { LocalizerType } from '../types/Util';
@@ -42,7 +41,7 @@ type PropsType = {
   >;
 };
 
-export const CallingPreCallInfo: FunctionComponent<PropsType> = ({
+export function CallingPreCallInfo({
   conversation,
   groupMembers = [],
   i18n,
@@ -50,7 +49,7 @@ export const CallingPreCallInfo: FunctionComponent<PropsType> = ({
   me,
   peekedParticipants = [],
   ringMode,
-}) => {
+}: PropsType): JSX.Element {
   let subtitle: string;
   if (ringMode === RingMode.IsRinging) {
     subtitle = i18n('outgoingCallRinging');
@@ -183,4 +182,4 @@ export const CallingPreCallInfo: FunctionComponent<PropsType> = ({
       <div className="module-CallingPreCallInfo__subtitle">{subtitle}</div>
     </div>
   );
-};
+}
diff --git a/ts/components/CallingScreenSharingController.stories.tsx b/ts/components/CallingScreenSharingController.stories.tsx
index 54832efac..76211b488 100644
--- a/ts/components/CallingScreenSharingController.stories.tsx
+++ b/ts/components/CallingScreenSharingController.stories.tsx
@@ -23,11 +23,11 @@ export default {
   title: 'Components/CallingScreenSharingController',
 };
 
-export const Controller = (): JSX.Element => {
+export function Controller(): JSX.Element {
   return <CallingScreenSharingController {...createProps()} />;
-};
+}
 
-export const ReallyLongAppName = (): JSX.Element => {
+export function ReallyLongAppName(): JSX.Element {
   return (
     <CallingScreenSharingController
       {...createProps({
@@ -36,7 +36,7 @@ export const ReallyLongAppName = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 ReallyLongAppName.story = {
   name: 'Really long app name',
diff --git a/ts/components/CallingScreenSharingController.tsx b/ts/components/CallingScreenSharingController.tsx
index ac1cce259..5b6f752e3 100644
--- a/ts/components/CallingScreenSharingController.tsx
+++ b/ts/components/CallingScreenSharingController.tsx
@@ -12,12 +12,12 @@ export type PropsType = {
   presentedSourceName: string;
 };
 
-export const CallingScreenSharingController = ({
+export function CallingScreenSharingController({
   i18n,
   onCloseController,
   onStopSharing,
   presentedSourceName,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <div className="module-CallingScreenSharingController">
       <div className="module-CallingScreenSharingController__text">
@@ -40,4 +40,4 @@ export const CallingScreenSharingController = ({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/CallingSelectPresentingSourcesModal.stories.tsx b/ts/components/CallingSelectPresentingSourcesModal.stories.tsx
index 496a4f3a0..e48a88539 100644
--- a/ts/components/CallingSelectPresentingSourcesModal.stories.tsx
+++ b/ts/components/CallingSelectPresentingSourcesModal.stories.tsx
@@ -57,6 +57,6 @@ export default {
   title: 'Components/CallingSelectPresentingSourcesModal',
 };
 
-export const Modal = (): JSX.Element => {
+export function Modal(): JSX.Element {
   return <CallingSelectPresentingSourcesModal {...createProps()} />;
-};
+}
diff --git a/ts/components/CallingSelectPresentingSourcesModal.tsx b/ts/components/CallingSelectPresentingSourcesModal.tsx
index d4389983f..acc2b7a9a 100644
--- a/ts/components/CallingSelectPresentingSourcesModal.tsx
+++ b/ts/components/CallingSelectPresentingSourcesModal.tsx
@@ -16,7 +16,7 @@ export type PropsType = {
   setPresenting: (_?: PresentedSource) => void;
 };
 
-const Source = ({
+function Source({
   onSourceClick,
   source,
   sourceToPresent,
@@ -24,7 +24,7 @@ const Source = ({
   onSourceClick: (source: PresentedSource) => void;
   source: PresentableSource;
   sourceToPresent?: PresentedSource;
-}): JSX.Element => {
+}): JSX.Element {
   return (
     <button
       className={classNames({
@@ -62,13 +62,13 @@ const Source = ({
       </div>
     </button>
   );
-};
+}
 
-export const CallingSelectPresentingSourcesModal = ({
+export function CallingSelectPresentingSourcesModal({
   i18n,
   presentingSourcesAvailable,
   setPresenting,
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   const [sourceToPresent, setSourceToPresent] = useState<
     PresentedSource | undefined
   >(undefined);
@@ -137,4 +137,4 @@ export const CallingSelectPresentingSourcesModal = ({
       </div>
     </Modal>
   );
-};
+}
diff --git a/ts/components/CallingToast.tsx b/ts/components/CallingToast.tsx
index fe82b193c..64ad1bc6f 100644
--- a/ts/components/CallingToast.tsx
+++ b/ts/components/CallingToast.tsx
@@ -1,27 +1,32 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 
 type PropsType = {
   isVisible: boolean;
   onClick: () => unknown;
+  children?: JSX.Element | string;
 };
 
 export const DEFAULT_LIFETIME = 5000;
 
-export const CallingToast: FunctionComponent<PropsType> = ({
+export function CallingToast({
   isVisible,
   onClick,
   children,
-}) => (
-  <button
-    className={classNames('CallingToast', !isVisible && 'CallingToast--hidden')}
-    type="button"
-    onClick={onClick}
-  >
-    {children}
-  </button>
-);
+}: PropsType): JSX.Element {
+  return (
+    <button
+      className={classNames(
+        'CallingToast',
+        !isVisible && 'CallingToast--hidden'
+      )}
+      type="button"
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/ts/components/CallingToastManager.tsx b/ts/components/CallingToastManager.tsx
index 815fada48..82e060ce9 100644
--- a/ts/components/CallingToastManager.tsx
+++ b/ts/components/CallingToastManager.tsx
@@ -104,7 +104,7 @@ function useScreenSharingToast({ activeCall, i18n }: PropsType): ToastType {
 
 // In the future, this component should show toasts when users join or leave. See
 //   DESKTOP-902.
-export const CallingToastManager: React.FC<PropsType> = props => {
+export function CallingToastManager(props: PropsType): JSX.Element {
   const reconnectingToast = getReconnectingToast(props);
   const screenSharingToast = useScreenSharingToast(props);
 
@@ -144,4 +144,4 @@ export const CallingToastManager: React.FC<PropsType> = props => {
       {toastMessage}
     </CallingToast>
   );
-};
+}
diff --git a/ts/components/ChatColorPicker.stories.tsx b/ts/components/ChatColorPicker.stories.tsx
index a8f3e5751..597caa4e7 100644
--- a/ts/components/ChatColorPicker.stories.tsx
+++ b/ts/components/ChatColorPicker.stories.tsx
@@ -41,9 +41,9 @@ const createProps = (): PropsType => ({
   ),
 });
 
-export const Default = (): JSX.Element => (
-  <ChatColorPicker {...createProps()} />
-);
+export function Default(): JSX.Element {
+  return <ChatColorPicker {...createProps()} />;
+}
 
 const CUSTOM_COLORS = {
   abc: {
@@ -62,14 +62,16 @@ const CUSTOM_COLORS = {
   },
 };
 
-export const CustomColors = (): JSX.Element => (
-  <ChatColorPicker
-    {...createProps()}
-    customColors={CUSTOM_COLORS}
-    selectedColor="custom"
-    selectedCustomColor={{
-      id: 'ghi',
-      value: SAMPLE_CUSTOM_COLOR,
-    }}
-  />
-);
+export function CustomColors(): JSX.Element {
+  return (
+    <ChatColorPicker
+      {...createProps()}
+      customColors={CUSTOM_COLORS}
+      selectedColor="custom"
+      selectedCustomColor={{
+        id: 'ghi',
+        value: SAMPLE_CUSTOM_COLOR,
+      }}
+    />
+  );
+}
diff --git a/ts/components/ChatColorPicker.tsx b/ts/components/ChatColorPicker.tsx
index 635e8b701..dbd092270 100644
--- a/ts/components/ChatColorPicker.tsx
+++ b/ts/components/ChatColorPicker.tsx
@@ -61,7 +61,7 @@ type PropsActionType = {
 
 export type PropsType = PropsDataType & PropsActionType;
 
-export const ChatColorPicker = ({
+export function ChatColorPicker({
   addCustomColor,
   colorSelected,
   conversationId,
@@ -77,7 +77,7 @@ export const ChatColorPicker = ({
   selectedColor = ConversationColors[0],
   selectedCustomColor,
   setGlobalDefaultConversationColor,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [confirmResetAll, setConfirmResetAll] = useState(false);
   const [confirmResetWhat, setConfirmResetWhat] = useState(false);
   const [customColorToEdit, setCustomColorToEdit] = useState<
@@ -264,7 +264,7 @@ export const ChatColorPicker = ({
       />
     </div>
   );
-};
+}
 
 type CustomColorBubblePropsType = {
   color: CustomColorType;
@@ -280,7 +280,7 @@ type CustomColorBubblePropsType = {
   onChoose: () => unknown;
 };
 
-const CustomColorBubble = ({
+function CustomColorBubble({
   color,
   colorId,
   getConversationsWithCustomColor,
@@ -290,7 +290,7 @@ const CustomColorBubble = ({
   onDupe,
   onEdit,
   onChoose,
-}: CustomColorBubblePropsType): JSX.Element => {
+}: CustomColorBubblePropsType): JSX.Element {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const menuRef = useRef<any | null>(null);
   const [confirmDeleteCount, setConfirmDeleteCount] = useState<
@@ -410,7 +410,7 @@ const CustomColorBubble = ({
       </ContextMenu>
     </>
   );
-};
+}
 
 type CustomColorEditorWrapperPropsType = {
   customColorToEdit?: CustomColorDataType;
@@ -419,12 +419,12 @@ type CustomColorEditorWrapperPropsType = {
   onSave: (color: CustomColorType) => unknown;
 };
 
-const CustomColorEditorWrapper = ({
+function CustomColorEditorWrapper({
   customColorToEdit,
   i18n,
   onClose,
   onSave,
-}: CustomColorEditorWrapperPropsType): JSX.Element => {
+}: CustomColorEditorWrapperPropsType): JSX.Element {
   const editor = (
     <CustomColorEditor
       customColor={customColorToEdit?.value}
@@ -447,4 +447,4 @@ const CustomColorEditorWrapper = ({
       {editor}
     </Modal>
   );
-};
+}
diff --git a/ts/components/Checkbox.stories.tsx b/ts/components/Checkbox.stories.tsx
index f7408e440..4f0034efe 100644
--- a/ts/components/Checkbox.stories.tsx
+++ b/ts/components/Checkbox.stories.tsx
@@ -18,15 +18,17 @@ export default {
   title: 'Components/Checkbox',
 };
 
-export const Normal = (): JSX.Element => <Checkbox {...createProps()} />;
-export const Checked = (): JSX.Element => (
-  <Checkbox {...createProps()} checked />
-);
+export function Normal(): JSX.Element {
+  return <Checkbox {...createProps()} />;
+}
+export function Checked(): JSX.Element {
+  return <Checkbox {...createProps()} checked />;
+}
 
-export const Description = (): JSX.Element => (
-  <Checkbox {...createProps()} description="This is a checkbox" />
-);
+export function Description(): JSX.Element {
+  return <Checkbox {...createProps()} description="This is a checkbox" />;
+}
 
-export const Disabled = (): JSX.Element => (
-  <Checkbox {...createProps()} disabled />
-);
+export function Disabled(): JSX.Element {
+  return <Checkbox {...createProps()} disabled />;
+}
diff --git a/ts/components/Checkbox.tsx b/ts/components/Checkbox.tsx
index ccfa26fc1..0da4c770a 100644
--- a/ts/components/Checkbox.tsx
+++ b/ts/components/Checkbox.tsx
@@ -24,7 +24,7 @@ export type PropsType = {
   onClick?: () => unknown;
 };
 
-export const Checkbox = ({
+export function Checkbox({
   checked,
   children,
   description,
@@ -35,7 +35,7 @@ export const Checkbox = ({
   name,
   onChange,
   onClick,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const getClassName = getClassNamesFor('Checkbox', moduleClassName);
   const id = useMemo(() => `${name}::${uuid()}`, [name]);
 
@@ -76,4 +76,4 @@ export const Checkbox = ({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/CompositionArea.stories.tsx b/ts/components/CompositionArea.stories.tsx
index 943fab19e..d153db9ed 100644
--- a/ts/components/CompositionArea.stories.tsx
+++ b/ts/components/CompositionArea.stories.tsx
@@ -120,63 +120,63 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
   isFetchingUUID: overrideProps.isFetchingUUID || false,
 });
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   const props = useProps();
 
   return <CompositionArea {...props} />;
-};
+}
 
-export const StartingText = (): JSX.Element => {
+export function StartingText(): JSX.Element {
   const props = useProps({
     draftText: "here's some starting text",
   });
 
   return <CompositionArea {...props} />;
-};
+}
 
-export const StickerButton = (): JSX.Element => {
+export function StickerButton(): JSX.Element {
   const props = useProps({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     knownPacks: [{} as any],
   });
 
   return <CompositionArea {...props} />;
-};
+}
 
-export const MessageRequest = (): JSX.Element => {
+export function MessageRequest(): JSX.Element {
   const props = useProps({
     messageRequestsEnabled: true,
   });
 
   return <CompositionArea {...props} />;
-};
+}
 
-export const SmsOnlyFetchingUuid = (): JSX.Element => {
+export function SmsOnlyFetchingUuid(): JSX.Element {
   const props = useProps({
     isSMSOnly: true,
     isFetchingUUID: true,
   });
 
   return <CompositionArea {...props} />;
-};
+}
 
 SmsOnlyFetchingUuid.story = {
   name: 'SMS-only fetching UUID',
 };
 
-export const SmsOnly = (): JSX.Element => {
+export function SmsOnly(): JSX.Element {
   const props = useProps({
     isSMSOnly: true,
   });
 
   return <CompositionArea {...props} />;
-};
+}
 
 SmsOnly.story = {
   name: 'SMS-only',
 };
 
-export const Attachments = (): JSX.Element => {
+export function Attachments(): JSX.Element {
   const props = useProps({
     draftAttachments: [
       fakeDraftAttachment({
@@ -187,33 +187,37 @@ export const Attachments = (): JSX.Element => {
   });
 
   return <CompositionArea {...props} />;
-};
+}
 
-export const AnnouncementsOnlyGroup = (): JSX.Element => (
-  <CompositionArea
-    {...useProps({
-      announcementsOnly: true,
-      areWeAdmin: false,
-    })}
-  />
-);
+export function AnnouncementsOnlyGroup(): JSX.Element {
+  return (
+    <CompositionArea
+      {...useProps({
+        announcementsOnly: true,
+        areWeAdmin: false,
+      })}
+    />
+  );
+}
 
 AnnouncementsOnlyGroup.story = {
   name: 'Announcements Only group',
 };
 
-export const Quote = (): JSX.Element => (
-  <CompositionArea
-    {...useProps({
-      quotedMessageProps: {
-        text: 'something',
-        conversationColor: ConversationColors[10],
-        isGiftBadge: false,
-        isViewOnce: false,
-        referencedMessageNotFound: false,
-        authorTitle: 'Someone',
-        isFromMe: false,
-      },
-    })}
-  />
-);
+export function Quote(): JSX.Element {
+  return (
+    <CompositionArea
+      {...useProps({
+        quotedMessageProps: {
+          text: 'something',
+          conversationColor: ConversationColors[10],
+          isGiftBadge: false,
+          isViewOnce: false,
+          referencedMessageNotFound: false,
+          authorTitle: 'Someone',
+          isFromMe: false,
+        },
+      })}
+    />
+  );
+}
diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx
index 4b11a8baf..4af92417b 100644
--- a/ts/components/CompositionArea.tsx
+++ b/ts/components/CompositionArea.tsx
@@ -168,7 +168,7 @@ export type Props = Pick<
   Pick<GroupV2PendingApprovalActionsPropsType, 'onCancelJoinRequest'> &
   OwnProps;
 
-export const CompositionArea = ({
+export function CompositionArea({
   // Base props
   addAttachment,
   addPendingAttachment,
@@ -258,7 +258,7 @@ export const CompositionArea = ({
   // SMS-only contacts
   isSMSOnly,
   isFetchingUUID,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const [disabled, setDisabled] = useState(false);
   const [dirty, setDirty] = useState(false);
   const [large, setLarge] = useState(false);
@@ -744,4 +744,4 @@ export const CompositionArea = ({
       />
     </div>
   );
-};
+}
diff --git a/ts/components/CompositionInput.stories.tsx b/ts/components/CompositionInput.stories.tsx
index fcfe65f2b..ff3c96779 100644
--- a/ts/components/CompositionInput.stories.tsx
+++ b/ts/components/CompositionInput.stories.tsx
@@ -49,37 +49,37 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
   theme: React.useContext(StorybookThemeContext),
 });
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   const props = useProps();
 
   return <CompositionInput {...props} />;
-};
+}
 
-export const Large = (): JSX.Element => {
+export function Large(): JSX.Element {
   const props = useProps({
     large: true,
   });
 
   return <CompositionInput {...props} />;
-};
+}
 
-export const Disabled = (): JSX.Element => {
+export function Disabled(): JSX.Element {
   const props = useProps({
     disabled: true,
   });
 
   return <CompositionInput {...props} />;
-};
+}
 
-export const StartingText = (): JSX.Element => {
+export function StartingText(): JSX.Element {
   const props = useProps({
     draftText: "here's some starting text",
   });
 
   return <CompositionInput {...props} />;
-};
+}
 
-export const MultilineText = (): JSX.Element => {
+export function MultilineText(): JSX.Element {
   const props = useProps({
     draftText: `here's some starting text
 and more on another line
@@ -93,9 +93,9 @@ and we're done`,
   });
 
   return <CompositionInput {...props} />;
-};
+}
 
-export const Emojis = (): JSX.Element => {
+export function Emojis(): JSX.Element {
   const props = useProps({
     draftText: `⁣😐😐😐😐😐😐😐
 😐😐😐😐😐😐😐
@@ -105,9 +105,9 @@ export const Emojis = (): JSX.Element => {
   });
 
   return <CompositionInput {...props} />;
-};
+}
 
-export const Mentions = (): JSX.Element => {
+export function Mentions(): JSX.Element {
   const props = useProps({
     sortedGroupMembers: [
       getDefaultConversation({
@@ -129,4 +129,4 @@ export const Mentions = (): JSX.Element => {
   });
 
   return <CompositionInput {...props} />;
-};
+}
diff --git a/ts/components/CompositionTextArea.tsx b/ts/components/CompositionTextArea.tsx
index a5f509d65..bd8c5936f 100644
--- a/ts/components/CompositionTextArea.tsx
+++ b/ts/components/CompositionTextArea.tsx
@@ -46,7 +46,7 @@ export type CompositionTextAreaProps = {
  * Meant for modals that need to collect a message or caption. It is
  * basically a rectangle input with an emoji selector floating at the top-right
  */
-export const CompositionTextArea = ({
+export function CompositionTextArea({
   i18n,
   placeholder,
   maxLength,
@@ -63,7 +63,7 @@ export const CompositionTextArea = ({
   theme,
   recentEmojis,
   skinTone,
-}: CompositionTextAreaProps): JSX.Element => {
+}: CompositionTextAreaProps): JSX.Element {
   const inputApiRef = React.useRef<InputApi | undefined>();
   const [characterCount, setCharacterCount] = React.useState(
     grapheme.count(draftText)
@@ -158,4 +158,4 @@ export const CompositionTextArea = ({
         )}
     </div>
   );
-};
+}
diff --git a/ts/components/CompositionUpload.tsx b/ts/components/CompositionUpload.tsx
index a127b7941..59ec14154 100644
--- a/ts/components/CompositionUpload.tsx
+++ b/ts/components/CompositionUpload.tsx
@@ -41,7 +41,7 @@ export type PropsType = {
 };
 
 export const CompositionUpload = forwardRef<HTMLInputElement, PropsType>(
-  (
+  function CompositionUploadInner(
     {
       addAttachment,
       addPendingAttachment,
@@ -52,7 +52,7 @@ export const CompositionUpload = forwardRef<HTMLInputElement, PropsType>(
       removeAttachment,
     },
     ref
-  ) => {
+  ) {
     const [toastType, setToastType] = useState<
       AttachmentToastType | undefined
     >();
diff --git a/ts/components/ConfirmDiscardDialog.stories.tsx b/ts/components/ConfirmDiscardDialog.stories.tsx
index e79253de6..9f3bb1497 100644
--- a/ts/components/ConfirmDiscardDialog.stories.tsx
+++ b/ts/components/ConfirmDiscardDialog.stories.tsx
@@ -22,6 +22,6 @@ export default {
   title: 'Components/ConfirmDiscardDialog',
 };
 
-export const Default = (): JSX.Element => (
-  <ConfirmDiscardDialog {...createProps()} />
-);
+export function Default(): JSX.Element {
+  return <ConfirmDiscardDialog {...createProps()} />;
+}
diff --git a/ts/components/ConfirmDiscardDialog.tsx b/ts/components/ConfirmDiscardDialog.tsx
index c99f6e820..6b1f486b2 100644
--- a/ts/components/ConfirmDiscardDialog.tsx
+++ b/ts/components/ConfirmDiscardDialog.tsx
@@ -11,11 +11,11 @@ export type PropsType = {
   onDiscard: () => unknown;
 };
 
-export const ConfirmDiscardDialog = ({
+export function ConfirmDiscardDialog({
   i18n,
   onClose,
   onDiscard,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <ConfirmationDialog
       dialogName="ConfirmDiscardDialog"
@@ -32,4 +32,4 @@ export const ConfirmDiscardDialog = ({
       {i18n('ConfirmDiscardDialog--discard')}
     </ConfirmationDialog>
   );
-};
+}
diff --git a/ts/components/ConfirmationDialog.stories.tsx b/ts/components/ConfirmationDialog.stories.tsx
index 902fa9345..7a3aec6b5 100644
--- a/ts/components/ConfirmationDialog.stories.tsx
+++ b/ts/components/ConfirmationDialog.stories.tsx
@@ -43,7 +43,7 @@ _ConfirmationDialog.story = {
   name: 'ConfirmationDialog',
 };
 
-export const CustomCancelText = (): JSX.Element => {
+export function CustomCancelText(): JSX.Element {
   return (
     <ConfirmationDialog
       dialogName="test"
@@ -62,13 +62,13 @@ export const CustomCancelText = (): JSX.Element => {
       Because.
     </ConfirmationDialog>
   );
-};
+}
 
 CustomCancelText.story = {
   name: 'Custom cancel text',
 };
 
-export const NoDefaultCancel = (): JSX.Element => {
+export function NoDefaultCancel(): JSX.Element {
   return (
     <ConfirmationDialog
       dialogName="test"
@@ -87,4 +87,4 @@ export const NoDefaultCancel = (): JSX.Element => {
       No default cancel!
     </ConfirmationDialog>
   );
-};
+}
diff --git a/ts/components/ConfirmationDialog.tsx b/ts/components/ConfirmationDialog.tsx
index 484a21ffd..b75786c38 100644
--- a/ts/components/ConfirmationDialog.tsx
+++ b/ts/components/ConfirmationDialog.tsx
@@ -57,103 +57,101 @@ function getButtonVariant(
   return ButtonVariant.Secondary;
 }
 
-export const ConfirmationDialog = React.memo(
-  ({
-    actions = [],
-    dialogName,
-    cancelButtonVariant,
-    cancelText,
-    children,
-    hasXButton,
-    i18n,
-    moduleClassName,
-    noMouseClose,
-    noDefaultCancelButton,
-    onCancel,
-    onClose,
-    onTopOfEverything,
-    theme,
-    title,
-  }: Props) => {
-    const { close, overlayStyles, modalStyles } = useAnimated(onClose, {
-      getFrom: () => ({ opacity: 0, transform: 'scale(0.25)' }),
-      getTo: isOpen => ({ opacity: isOpen ? 1 : 0, transform: 'scale(1)' }),
-    });
+export const ConfirmationDialog = React.memo(function ConfirmationDialogInner({
+  actions = [],
+  dialogName,
+  cancelButtonVariant,
+  cancelText,
+  children,
+  hasXButton,
+  i18n,
+  moduleClassName,
+  noMouseClose,
+  noDefaultCancelButton,
+  onCancel,
+  onClose,
+  onTopOfEverything,
+  theme,
+  title,
+}: Props) {
+  const { close, overlayStyles, modalStyles } = useAnimated(onClose, {
+    getFrom: () => ({ opacity: 0, transform: 'scale(0.25)' }),
+    getTo: isOpen => ({ opacity: isOpen ? 1 : 0, transform: 'scale(1)' }),
+  });
 
-    const cancelAndClose = useCallback(() => {
-      if (onCancel) {
-        onCancel();
+  const cancelAndClose = useCallback(() => {
+    if (onCancel) {
+      onCancel();
+    }
+    close();
+  }, [close, onCancel]);
+
+  const handleCancel = useCallback(
+    (e: MouseEvent) => {
+      if (e.target === e.currentTarget) {
+        cancelAndClose();
       }
-      close();
-    }, [close, onCancel]);
+    },
+    [cancelAndClose]
+  );
 
-    const handleCancel = useCallback(
-      (e: MouseEvent) => {
-        if (e.target === e.currentTarget) {
-          cancelAndClose();
-        }
-      },
-      [cancelAndClose]
-    );
+  const hasActions = Boolean(actions.length);
 
-    const hasActions = Boolean(actions.length);
+  const footer = (
+    <>
+      {!noDefaultCancelButton ? (
+        <Button
+          onClick={handleCancel}
+          ref={focusRef}
+          variant={
+            cancelButtonVariant ||
+            (hasActions ? ButtonVariant.Secondary : ButtonVariant.Primary)
+          }
+        >
+          {cancelText || i18n('confirmation-dialog--Cancel')}
+        </Button>
+      ) : null}
+      {actions.map((action, i) => (
+        <Button
+          key={action.text}
+          onClick={() => {
+            action.action();
+            close();
+          }}
+          data-action={i}
+          variant={getButtonVariant(action.style)}
+        >
+          {action.text}
+        </Button>
+      ))}
+    </>
+  );
 
-    const footer = (
-      <>
-        {!noDefaultCancelButton ? (
-          <Button
-            onClick={handleCancel}
-            ref={focusRef}
-            variant={
-              cancelButtonVariant ||
-              (hasActions ? ButtonVariant.Secondary : ButtonVariant.Primary)
-            }
-          >
-            {cancelText || i18n('confirmation-dialog--Cancel')}
-          </Button>
-        ) : null}
-        {actions.map((action, i) => (
-          <Button
-            key={action.text}
-            onClick={() => {
-              action.action();
-              close();
-            }}
-            data-action={i}
-            variant={getButtonVariant(action.style)}
-          >
-            {action.text}
-          </Button>
-        ))}
-      </>
-    );
+  const modalName = `ConfirmationDialog.${dialogName}`;
 
-    const modalName = `ConfirmationDialog.${dialogName}`;
-
-    return (
-      <ModalHost
-        modalName={modalName}
-        noMouseClose={noMouseClose}
-        onClose={close}
-        onEscape={cancelAndClose}
-        onTopOfEverything={onTopOfEverything}
-        overlayStyles={overlayStyles}
-        theme={theme}
-      >
-        <animated.div style={modalStyles}>
-          <ModalPage
-            modalName={modalName}
-            hasXButton={hasXButton}
-            i18n={i18n}
-            moduleClassName={moduleClassName}
-            onClose={cancelAndClose}
-            title={title}
-            modalFooter={footer}
-          >
-            {children}
-          </ModalPage>
-        </animated.div>
-      </ModalHost>
-    );
-  }
-);
+  return (
+    <ModalHost
+      modalName={modalName}
+      noMouseClose={noMouseClose}
+      onClose={close}
+      onEscape={cancelAndClose}
+      onTopOfEverything={onTopOfEverything}
+      overlayStyles={overlayStyles}
+      theme={theme}
+    >
+      <animated.div style={modalStyles}>
+        <ModalPage
+          modalName={modalName}
+          hasXButton={hasXButton}
+          i18n={i18n}
+          moduleClassName={moduleClassName}
+          onClose={cancelAndClose}
+          title={title}
+          modalFooter={footer}
+        >
+          {children}
+        </ModalPage>
+      </animated.div>
+    </ModalHost>
+  );
+});
diff --git a/ts/components/ContactPill.tsx b/ts/components/ContactPill.tsx
index 6a0449cf9..acd8fa043 100644
--- a/ts/components/ContactPill.tsx
+++ b/ts/components/ContactPill.tsx
@@ -1,7 +1,6 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React from 'react';
 
 import type { ConversationType } from '../state/ducks/conversations';
@@ -28,7 +27,7 @@ export type PropsType = {
   | 'unblurredAvatarPath'
 >;
 
-export const ContactPill: FunctionComponent<PropsType> = ({
+export function ContactPill({
   acceptedMessageRequest,
   avatarPath,
   color,
@@ -42,7 +41,7 @@ export const ContactPill: FunctionComponent<PropsType> = ({
   title,
   unblurredAvatarPath,
   onClickRemove,
-}) => {
+}: PropsType): JSX.Element {
   const removeLabel = i18n('ContactPill--remove');
 
   return (
@@ -80,4 +79,4 @@ export const ContactPill: FunctionComponent<PropsType> = ({
       />
     </div>
   );
-};
+}
diff --git a/ts/components/ContactPills.stories.tsx b/ts/components/ContactPills.stories.tsx
index 3d5da9475..4f19f2bd7 100644
--- a/ts/components/ContactPills.stories.tsx
+++ b/ts/components/ContactPills.stories.tsx
@@ -50,60 +50,70 @@ const contactPillProps = (
   onClickRemove: action('onClickRemove'),
 });
 
-export const EmptyList = (): JSX.Element => <ContactPills />;
+export function EmptyList(): JSX.Element {
+  return <ContactPills />;
+}
 
 EmptyList.story = {
   name: 'Empty list',
 };
 
-export const OneContact = (): JSX.Element => (
-  <ContactPills>
-    <ContactPill {...contactPillProps()} />
-  </ContactPills>
-);
+export function OneContact(): JSX.Element {
+  return (
+    <ContactPills>
+      <ContactPill {...contactPillProps()} />
+    </ContactPills>
+  );
+}
 
 OneContact.story = {
   name: 'One contact',
 };
 
-export const ThreeContacts = (): JSX.Element => (
-  <ContactPills>
-    <ContactPill {...contactPillProps(contacts[0])} />
-    <ContactPill {...contactPillProps(contacts[1])} />
-    <ContactPill {...contactPillProps(contacts[2])} />
-  </ContactPills>
-);
+export function ThreeContacts(): JSX.Element {
+  return (
+    <ContactPills>
+      <ContactPill {...contactPillProps(contacts[0])} />
+      <ContactPill {...contactPillProps(contacts[1])} />
+      <ContactPill {...contactPillProps(contacts[2])} />
+    </ContactPills>
+  );
+}
 
 ThreeContacts.story = {
   name: 'Three contacts',
 };
 
-export const FourContactsOneWithALongName = (): JSX.Element => (
-  <ContactPills>
-    <ContactPill {...contactPillProps(contacts[0])} />
-    <ContactPill
-      {...contactPillProps({
-        ...contacts[1],
-        title:
-          'Pablo Diego José Francisco de Paula Juan Nepomuceno María de los Remedios Cipriano de la Santísima Trinidad Ruiz y Picasso',
-      })}
-    />
-    <ContactPill {...contactPillProps(contacts[2])} />
-    <ContactPill {...contactPillProps(contacts[3])} />
-  </ContactPills>
-);
+export function FourContactsOneWithALongName(): JSX.Element {
+  return (
+    <ContactPills>
+      <ContactPill {...contactPillProps(contacts[0])} />
+      <ContactPill
+        {...contactPillProps({
+          ...contacts[1],
+          title:
+            'Pablo Diego José Francisco de Paula Juan Nepomuceno María de los Remedios Cipriano de la Santísima Trinidad Ruiz y Picasso',
+        })}
+      />
+      <ContactPill {...contactPillProps(contacts[2])} />
+      <ContactPill {...contactPillProps(contacts[3])} />
+    </ContactPills>
+  );
+}
 
 FourContactsOneWithALongName.story = {
   name: 'Four contacts, one with a long name',
 };
 
-export const FiftyContacts = (): JSX.Element => (
-  <ContactPills>
-    {contacts.map(contact => (
-      <ContactPill key={contact.id} {...contactPillProps(contact)} />
-    ))}
-  </ContactPills>
-);
+export function FiftyContacts(): JSX.Element {
+  return (
+    <ContactPills>
+      {contacts.map(contact => (
+        <ContactPill key={contact.id} {...contactPillProps(contact)} />
+      ))}
+    </ContactPills>
+  );
+}
 
 FiftyContacts.story = {
   name: 'Fifty contacts',
diff --git a/ts/components/ContactPills.tsx b/ts/components/ContactPills.tsx
index 6d0da62b9..63d243d30 100644
--- a/ts/components/ContactPills.tsx
+++ b/ts/components/ContactPills.tsx
@@ -1,7 +1,7 @@
 // Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React, { useRef, useEffect, Children } from 'react';
 import classNames from 'classnames';
 
@@ -13,10 +13,10 @@ type PropsType = {
   children?: ReactNode;
 };
 
-export const ContactPills: FunctionComponent<PropsType> = ({
+export function ContactPills({
   moduleClassName,
   children,
-}) => {
+}: PropsType): JSX.Element {
   const elRef = useRef<null | HTMLDivElement>(null);
 
   const childCount = Children.count(children);
@@ -38,4 +38,4 @@ export const ContactPills: FunctionComponent<PropsType> = ({
       {children}
     </div>
   );
-};
+}
diff --git a/ts/components/ContextMenu.stories.tsx b/ts/components/ContextMenu.stories.tsx
index 506386632..99f9db985 100644
--- a/ts/components/ContextMenu.stories.tsx
+++ b/ts/components/ContextMenu.stories.tsx
@@ -33,6 +33,6 @@ const getDefaultProps = (): PropsType<number> => ({
   ],
 });
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return <ContextMenu {...getDefaultProps()}>Menu</ContextMenu>;
-};
+}
diff --git a/ts/components/ConversationList.stories.tsx b/ts/components/ConversationList.stories.tsx
index d82c3d96d..130a622c7 100644
--- a/ts/components/ConversationList.stories.tsx
+++ b/ts/components/ConversationList.stories.tsx
@@ -50,10 +50,10 @@ const defaultConversations: Array<ConversationListItemPropsType> = [
   getDefaultConversation(),
 ];
 
-const Wrapper = ({
+function Wrapper({
   rows,
   scrollable,
-}: Readonly<{ rows: ReadonlyArray<Row>; scrollable?: boolean }>) => {
+}: Readonly<{ rows: ReadonlyArray<Row>; scrollable?: boolean }>) {
   const theme = useContext(StorybookThemeContext);
 
   return (
@@ -95,7 +95,7 @@ const Wrapper = ({
       theme={theme}
     />
   );
-};
+}
 
 export const _ArchiveButton = (): JSX.Element => (
   <Wrapper
@@ -107,137 +107,151 @@ _ArchiveButton.story = {
   name: 'Archive button',
 };
 
-export const ContactNoteToSelf = (): JSX.Element => (
-  <Wrapper
-    rows={[
-      {
-        type: RowType.Contact,
-        contact: {
-          ...defaultConversations[0],
-          isMe: true,
-          about: '🤠 should be ignored',
+export function ContactNoteToSelf(): JSX.Element {
+  return (
+    <Wrapper
+      rows={[
+        {
+          type: RowType.Contact,
+          contact: {
+            ...defaultConversations[0],
+            isMe: true,
+            about: '🤠 should be ignored',
+          },
         },
-      },
-    ]}
-  />
-);
+      ]}
+    />
+  );
+}
 
 ContactNoteToSelf.story = {
   name: 'Contact: note to self',
 };
 
-export const ContactDirect = (): JSX.Element => (
-  <Wrapper
-    rows={[{ type: RowType.Contact, contact: defaultConversations[0] }]}
-  />
-);
+export function ContactDirect(): JSX.Element {
+  return (
+    <Wrapper
+      rows={[{ type: RowType.Contact, contact: defaultConversations[0] }]}
+    />
+  );
+}
 
 ContactDirect.story = {
   name: 'Contact: direct',
 };
 
-export const ContactDirectWithShortAbout = (): JSX.Element => (
-  <Wrapper
-    rows={[
-      {
-        type: RowType.Contact,
-        contact: { ...defaultConversations[0], about: '🤠 yee haw' },
-      },
-    ]}
-  />
-);
+export function ContactDirectWithShortAbout(): JSX.Element {
+  return (
+    <Wrapper
+      rows={[
+        {
+          type: RowType.Contact,
+          contact: { ...defaultConversations[0], about: '🤠 yee haw' },
+        },
+      ]}
+    />
+  );
+}
 
 ContactDirectWithShortAbout.story = {
   name: 'Contact: direct with short about',
 };
 
-export const ContactDirectWithLongAbout = (): JSX.Element => (
-  <Wrapper
-    rows={[
-      {
-        type: RowType.Contact,
-        contact: {
-          ...defaultConversations[0],
-          about:
-            '🤠 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.',
+export function ContactDirectWithLongAbout(): JSX.Element {
+  return (
+    <Wrapper
+      rows={[
+        {
+          type: RowType.Contact,
+          contact: {
+            ...defaultConversations[0],
+            about:
+              '🤠 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.',
+          },
         },
-      },
-    ]}
-  />
-);
+      ]}
+    />
+  );
+}
 
 ContactDirectWithLongAbout.story = {
   name: 'Contact: direct with long about',
 };
 
-export const ContactGroup = (): JSX.Element => (
-  <Wrapper
-    rows={[
-      {
-        type: RowType.Contact,
-        contact: { ...defaultConversations[0], type: 'group' },
-      },
-    ]}
-  />
-);
+export function ContactGroup(): JSX.Element {
+  return (
+    <Wrapper
+      rows={[
+        {
+          type: RowType.Contact,
+          contact: { ...defaultConversations[0], type: 'group' },
+        },
+      ]}
+    />
+  );
+}
 
 ContactGroup.story = {
   name: 'Contact: group',
 };
 
-export const ContactCheckboxes = (): JSX.Element => (
-  <Wrapper
-    rows={[
-      {
-        type: RowType.ContactCheckbox,
-        contact: defaultConversations[0],
-        isChecked: true,
-      },
-      {
-        type: RowType.ContactCheckbox,
-        contact: defaultConversations[1],
-        isChecked: false,
-      },
-      {
-        type: RowType.ContactCheckbox,
-        contact: {
-          ...defaultConversations[2],
-          about: '😃 Hola',
+export function ContactCheckboxes(): JSX.Element {
+  return (
+    <Wrapper
+      rows={[
+        {
+          type: RowType.ContactCheckbox,
+          contact: defaultConversations[0],
+          isChecked: true,
         },
-        isChecked: true,
-      },
-    ]}
-  />
-);
+        {
+          type: RowType.ContactCheckbox,
+          contact: defaultConversations[1],
+          isChecked: false,
+        },
+        {
+          type: RowType.ContactCheckbox,
+          contact: {
+            ...defaultConversations[2],
+            about: '😃 Hola',
+          },
+          isChecked: true,
+        },
+      ]}
+    />
+  );
+}
 
 ContactCheckboxes.story = {
   name: 'Contact checkboxes',
 };
 
-export const ContactCheckboxesDisabled = (): JSX.Element => (
-  <Wrapper
-    rows={[
-      {
-        type: RowType.ContactCheckbox,
-        contact: defaultConversations[0],
-        isChecked: false,
-        disabledReason: ContactCheckboxDisabledReason.MaximumContactsSelected,
-      },
-      {
-        type: RowType.ContactCheckbox,
-        contact: defaultConversations[2],
-        isChecked: true,
-        disabledReason: ContactCheckboxDisabledReason.MaximumContactsSelected,
-      },
-      {
-        type: RowType.ContactCheckbox,
-        contact: defaultConversations[3],
-        isChecked: true,
-        disabledReason: ContactCheckboxDisabledReason.AlreadyAdded,
-      },
-    ]}
-  />
-);
+export function ContactCheckboxesDisabled(): JSX.Element {
+  return (
+    <Wrapper
+      rows={[
+        {
+          type: RowType.ContactCheckbox,
+          contact: defaultConversations[0],
+          isChecked: false,
+          disabledReason: ContactCheckboxDisabledReason.MaximumContactsSelected,
+        },
+        {
+          type: RowType.ContactCheckbox,
+          contact: defaultConversations[2],
+          isChecked: true,
+          disabledReason: ContactCheckboxDisabledReason.MaximumContactsSelected,
+        },
+        {
+          type: RowType.ContactCheckbox,
+          contact: defaultConversations[3],
+          isChecked: true,
+          disabledReason: ContactCheckboxDisabledReason.AlreadyAdded,
+        },
+      ]}
+    />
+  );
+}
 
 ContactCheckboxesDisabled.story = {
   name: 'Contact checkboxes: disabled',
@@ -322,16 +336,18 @@ ConversationWithYourself.story = {
   name: 'Conversation: with yourself',
 };
 
-export const ConversationsMessageStatuses = (): JSX.Element => (
-  <Wrapper
-    rows={MessageStatuses.map(status => ({
-      type: RowType.Conversation,
-      conversation: createConversation({
-        lastMessage: { text: status, status, deletedForEveryone: false },
-      }),
-    }))}
-  />
-);
+export function ConversationsMessageStatuses(): JSX.Element {
+  return (
+    <Wrapper
+      rows={MessageStatuses.map(status => ({
+        type: RowType.Conversation,
+        conversation: createConversation({
+          lastMessage: { text: status, status, deletedForEveryone: false },
+        }),
+      }))}
+    />
+  );
+}
 
 ConversationsMessageStatuses.story = {
   name: 'Conversations: Message Statuses',
@@ -379,21 +395,23 @@ ConversationMessageRequest.story = {
   name: 'Conversation: Message Request',
 };
 
-export const ConversationsUnreadCount = (): JSX.Element => (
-  <Wrapper
-    rows={[4, 10, 34, 250].map(unreadCount => ({
-      type: RowType.Conversation,
-      conversation: createConversation({
-        lastMessage: {
-          text: 'Hey there!',
-          status: 'delivered',
-          deletedForEveryone: false,
-        },
-        unreadCount,
-      }),
-    }))}
-  />
-);
+export function ConversationsUnreadCount(): JSX.Element {
+  return (
+    <Wrapper
+      rows={[4, 10, 34, 250].map(unreadCount => ({
+        type: RowType.Conversation,
+        conversation: createConversation({
+          lastMessage: {
+            text: 'Hey there!',
+            status: 'delivered',
+            deletedForEveryone: false,
+          },
+          unreadCount,
+        }),
+      }))}
+    />
+  );
+}
 
 ConversationsUnreadCount.story = {
   name: 'Conversations: unread count',
@@ -459,7 +477,7 @@ ConversationLongName.story = {
   name: 'Conversation: long name',
 };
 
-export const ConversationLongMessage = (): JSX.Element => {
+export function ConversationLongMessage(): JSX.Element {
   const messages = [
     "Long line. This is a really really really long line. Really really long. Because that's just how it is",
     `Many lines. This is a many-line message.
@@ -482,13 +500,13 @@ Line 4, well.`,
       }))}
     />
   );
-};
+}
 
 ConversationLongMessage.story = {
   name: 'Conversation: Long Message',
 };
 
-export const ConversationsVariousTimes = (): JSX.Element => {
+export function ConversationsVariousTimes(): JSX.Element {
   const pairs: Array<[number, string]> = [
     [Date.now() - 5 * 60 * 60 * 1000, 'Five hours ago'],
     [Date.now() - 24 * 60 * 60 * 1000, 'One day ago'],
@@ -511,33 +529,33 @@ export const ConversationsVariousTimes = (): JSX.Element => {
       }))}
     />
   );
-};
+}
 
 ConversationsVariousTimes.story = {
   name: 'Conversations: Various Times',
 };
 
-export const ConversationMissingDate = (): JSX.Element => {
+export function ConversationMissingDate(): JSX.Element {
   const row = {
     type: RowType.Conversation as const,
     conversation: omit(createConversation(), 'lastUpdated'),
   };
 
   return <Wrapper rows={[row]} />;
-};
+}
 
 ConversationMissingDate.story = {
   name: 'Conversation: Missing Date',
 };
 
-export const ConversationMissingMessage = (): JSX.Element => {
+export function ConversationMissingMessage(): JSX.Element {
   const row = {
     type: RowType.Conversation as const,
     conversation: omit(createConversation(), 'lastMessage'),
   };
 
   return <Wrapper rows={[row]} />;
-};
+}
 
 ConversationMissingMessage.story = {
   name: 'Conversation: Missing Message',
@@ -580,178 +598,188 @@ ConversationAtMention.story = {
   name: 'Conversation: At Mention',
 };
 
-export const Headers = (): JSX.Element => (
-  <Wrapper
-    rows={[
-      {
-        type: RowType.Header,
-        i18nKey: 'conversationsHeader',
-      },
-      {
-        type: RowType.Header,
-        i18nKey: 'messagesHeader',
-      },
-      {
-        type: RowType.Header,
-        i18nKey: 'findByUsernameHeader',
-      },
-      {
-        type: RowType.Header,
-        i18nKey: 'findByPhoneNumberHeader',
-      },
-    ]}
-  />
-);
+export function Headers(): JSX.Element {
+  return (
+    <Wrapper
+      rows={[
+        {
+          type: RowType.Header,
+          i18nKey: 'conversationsHeader',
+        },
+        {
+          type: RowType.Header,
+          i18nKey: 'messagesHeader',
+        },
+        {
+          type: RowType.Header,
+          i18nKey: 'findByUsernameHeader',
+        },
+        {
+          type: RowType.Header,
+          i18nKey: 'findByPhoneNumberHeader',
+        },
+      ]}
+    />
+  );
+}
 
-export const FindByPhoneNumber = (): JSX.Element => (
-  <Wrapper
-    rows={[
-      {
-        type: RowType.Header,
-        i18nKey: 'findByPhoneNumberHeader',
-      },
-      {
-        type: RowType.StartNewConversation,
-        phoneNumber: {
-          isValid: true,
-          userInput: '+1(234)555 98 76',
-          e164: '+12345559876',
+export function FindByPhoneNumber(): JSX.Element {
+  return (
+    <Wrapper
+      rows={[
+        {
+          type: RowType.Header,
+          i18nKey: 'findByPhoneNumberHeader',
         },
-        isFetching: false,
-      },
-      {
-        type: RowType.StartNewConversation,
-        phoneNumber: {
-          isValid: true,
-          userInput: '+1(234)555 98 76',
-          e164: '+12345559876',
+        {
+          type: RowType.StartNewConversation,
+          phoneNumber: {
+            isValid: true,
+            userInput: '+1(234)555 98 76',
+            e164: '+12345559876',
+          },
+          isFetching: false,
         },
-        isFetching: true,
-      },
-      {
-        type: RowType.StartNewConversation,
-        phoneNumber: {
-          isValid: true,
-          userInput: '+1(234)555',
-          e164: '+1234555',
+        {
+          type: RowType.StartNewConversation,
+          phoneNumber: {
+            isValid: true,
+            userInput: '+1(234)555 98 76',
+            e164: '+12345559876',
+          },
+          isFetching: true,
         },
-        isFetching: false,
-      },
-    ]}
-  />
-);
+        {
+          type: RowType.StartNewConversation,
+          phoneNumber: {
+            isValid: true,
+            userInput: '+1(234)555',
+            e164: '+1234555',
+          },
+          isFetching: false,
+        },
+      ]}
+    />
+  );
+}
 
 FindByPhoneNumber.story = {
   name: 'Find by phone number',
 };
 
-export const FindByUsername = (): JSX.Element => (
-  <Wrapper
-    rows={[
-      {
-        type: RowType.Header,
-        i18nKey: 'findByUsernameHeader',
-      },
-      {
-        type: RowType.UsernameSearchResult,
-        username: 'jowerty',
-        isFetchingUsername: false,
-      },
-      {
-        type: RowType.UsernameSearchResult,
-        username: 'jowerty',
-        isFetchingUsername: true,
-      },
-    ]}
-  />
-);
+export function FindByUsername(): JSX.Element {
+  return (
+    <Wrapper
+      rows={[
+        {
+          type: RowType.Header,
+          i18nKey: 'findByUsernameHeader',
+        },
+        {
+          type: RowType.UsernameSearchResult,
+          username: 'jowerty',
+          isFetchingUsername: false,
+        },
+        {
+          type: RowType.UsernameSearchResult,
+          username: 'jowerty',
+          isFetchingUsername: true,
+        },
+      ]}
+    />
+  );
+}
 
 FindByUsername.story = {
   name: 'Find by username',
 };
 
-export const SearchResultsLoadingSkeleton = (): JSX.Element => (
-  <Wrapper
-    scrollable={false}
-    rows={[
-      { type: RowType.SearchResultsLoadingFakeHeader },
-      ...times(99, () => ({
-        type: RowType.SearchResultsLoadingFakeRow as const,
-      })),
-    ]}
-  />
-);
+export function SearchResultsLoadingSkeleton(): JSX.Element {
+  return (
+    <Wrapper
+      scrollable={false}
+      rows={[
+        { type: RowType.SearchResultsLoadingFakeHeader },
+        ...times(99, () => ({
+          type: RowType.SearchResultsLoadingFakeRow as const,
+        })),
+      ]}
+    />
+  );
+}
 
 SearchResultsLoadingSkeleton.story = {
   name: 'Search results loading skeleton',
 };
 
-export const KitchenSink = (): JSX.Element => (
-  <Wrapper
-    rows={[
-      {
-        type: RowType.StartNewConversation,
-        phoneNumber: {
-          isValid: true,
-          userInput: '+1(234)555 98 76',
-          e164: '+12345559876',
+export function KitchenSink(): JSX.Element {
+  return (
+    <Wrapper
+      rows={[
+        {
+          type: RowType.StartNewConversation,
+          phoneNumber: {
+            isValid: true,
+            userInput: '+1(234)555 98 76',
+            e164: '+12345559876',
+          },
+          isFetching: false,
         },
-        isFetching: false,
-      },
-      {
-        type: RowType.StartNewConversation,
-        phoneNumber: {
-          isValid: true,
-          userInput: '+1(234)555 98 76',
-          e164: '+12345559876',
+        {
+          type: RowType.StartNewConversation,
+          phoneNumber: {
+            isValid: true,
+            userInput: '+1(234)555 98 76',
+            e164: '+12345559876',
+          },
+          isFetching: true,
         },
-        isFetching: true,
-      },
-      {
-        type: RowType.StartNewConversation,
-        phoneNumber: {
-          isValid: false,
-          userInput: '+1(234)555 98',
-          e164: '+123455598',
+        {
+          type: RowType.StartNewConversation,
+          phoneNumber: {
+            isValid: false,
+            userInput: '+1(234)555 98',
+            e164: '+123455598',
+          },
+          isFetching: true,
         },
-        isFetching: true,
-      },
-      {
-        type: RowType.Header,
-        i18nKey: 'contactsHeader',
-      },
-      {
-        type: RowType.Contact,
-        contact: defaultConversations[0],
-      },
-      {
-        type: RowType.Header,
-        i18nKey: 'messagesHeader',
-      },
-      {
-        type: RowType.Conversation,
-        conversation: defaultConversations[1],
-      },
-      {
-        type: RowType.MessageSearchResult,
-        messageId: '123',
-      },
-      {
-        type: RowType.Header,
-        i18nKey: 'findByUsernameHeader',
-      },
-      {
-        type: RowType.UsernameSearchResult,
-        username: 'jowerty',
-        isFetchingUsername: false,
-      },
-      {
-        type: RowType.ArchiveButton,
-        archivedConversationsCount: 123,
-      },
-    ]}
-  />
-);
+        {
+          type: RowType.Header,
+          i18nKey: 'contactsHeader',
+        },
+        {
+          type: RowType.Contact,
+          contact: defaultConversations[0],
+        },
+        {
+          type: RowType.Header,
+          i18nKey: 'messagesHeader',
+        },
+        {
+          type: RowType.Conversation,
+          conversation: defaultConversations[1],
+        },
+        {
+          type: RowType.MessageSearchResult,
+          messageId: '123',
+        },
+        {
+          type: RowType.Header,
+          i18nKey: 'findByUsernameHeader',
+        },
+        {
+          type: RowType.UsernameSearchResult,
+          username: 'jowerty',
+          isFetchingUsername: false,
+        },
+        {
+          type: RowType.ArchiveButton,
+          archivedConversationsCount: 123,
+        },
+      ]}
+    />
+  );
+}
 
 KitchenSink.story = {
   name: 'Kitchen sink',
diff --git a/ts/components/ConversationList.tsx b/ts/components/ConversationList.tsx
index aec7fe55f..4d16ead9a 100644
--- a/ts/components/ConversationList.tsx
+++ b/ts/components/ConversationList.tsx
@@ -173,7 +173,7 @@ export type PropsType = {
     disabledReason: undefined | ContactCheckboxDisabledReason
   ) => void;
   onSelectConversation: (conversationId: string, messageId?: string) => void;
-  renderMessageSearchResult: (id: string) => JSX.Element;
+  renderMessageSearchResult?: (id: string) => JSX.Element;
   showChooseGroupMembers: () => void;
   showConversation: ShowConversationType;
 } & LookupConversationWithoutUuidActionsType;
@@ -182,7 +182,7 @@ const NORMAL_ROW_HEIGHT = 76;
 const SELECT_ROW_HEIGHT = 52;
 const HEADER_ROW_HEIGHT = 40;
 
-export const ConversationList: React.FC<PropsType> = ({
+export function ConversationList({
   dimensions,
   getPreferredBadge,
   getRow,
@@ -202,7 +202,7 @@ export const ConversationList: React.FC<PropsType> = ({
   setIsFetchingUUID,
   showConversation,
   theme,
-}) => {
+}: PropsType): JSX.Element | null {
   const calculateRowHeight = useCallback(
     (index: number): number => {
       const row = getRow(index);
@@ -252,7 +252,7 @@ export const ConversationList: React.FC<PropsType> = ({
           );
           break;
         case RowType.Blank:
-          result = <></>;
+          result = undefined;
           break;
         case RowType.Contact: {
           const { isClickable = true } = row;
@@ -381,7 +381,7 @@ export const ConversationList: React.FC<PropsType> = ({
           );
           break;
         case RowType.MessageSearchResult:
-          result = <>{renderMessageSearchResult(row.messageId)}</>;
+          result = <>{renderMessageSearchResult?.(row.messageId)}</>;
           break;
         case RowType.SearchResultsLoadingFakeHeader:
           result = <SearchResultsLoadingFakeHeaderComponent />;
@@ -479,4 +479,4 @@ export const ConversationList: React.FC<PropsType> = ({
       scrollBehavior={scrollBehavior}
     />
   );
-};
+}
diff --git a/ts/components/CustomColorEditor.stories.tsx b/ts/components/CustomColorEditor.stories.tsx
index a3cc482b7..173e7cc45 100644
--- a/ts/components/CustomColorEditor.stories.tsx
+++ b/ts/components/CustomColorEditor.stories.tsx
@@ -22,6 +22,6 @@ const createProps = (): PropsType => ({
   onSave: action('onSave'),
 });
 
-export const Default = (): JSX.Element => (
-  <CustomColorEditor {...createProps()} />
-);
+export function Default(): JSX.Element {
+  return <CustomColorEditor {...createProps()} />;
+}
diff --git a/ts/components/CustomColorEditor.tsx b/ts/components/CustomColorEditor.tsx
index f50d10054..5fbab85f8 100644
--- a/ts/components/CustomColorEditor.tsx
+++ b/ts/components/CustomColorEditor.tsx
@@ -42,12 +42,12 @@ const ULTRAMARINE_ISH: CustomColorType = {
   deg: 180,
 };
 
-export const CustomColorEditor = ({
+export function CustomColorEditor({
   customColor = ULTRAMARINE_ISH,
   i18n,
   onClose,
   onSave,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [color, setColor] = useState<CustomColorType>(customColor);
   const [selectedColorKnob, setSelectedColorKnob] = useState<KnobType>(
     KnobType.start
@@ -57,135 +57,129 @@ export const CustomColorEditor = ({
     color[selectedColorKnob] || ULTRAMARINE_ISH_VALUES;
 
   return (
-    <>
-      <Tabs
-        initialSelectedTab={color.end ? TabViews.Gradient : TabViews.Solid}
-        moduleClassName="CustomColorEditor__tabs"
-        onTabChange={selectedTab => {
-          if (selectedTab === TabViews.Gradient && !color.end) {
-            setColor({
-              ...color,
-              end: ULTRAMARINE_ISH_VALUES,
-            });
-          }
+    <Tabs
+      initialSelectedTab={color.end ? TabViews.Gradient : TabViews.Solid}
+      moduleClassName="CustomColorEditor__tabs"
+      onTabChange={selectedTab => {
+        if (selectedTab === TabViews.Gradient && !color.end) {
+          setColor({
+            ...color,
+            end: ULTRAMARINE_ISH_VALUES,
+          });
+        }
 
-          if (selectedTab === TabViews.Solid && color.end) {
-            setColor({
-              ...color,
-              end: undefined,
-            });
-          }
-        }}
-        tabs={[
-          {
-            id: TabViews.Solid,
-            label: i18n('CustomColorEditor__solid'),
-          },
-          {
-            id: TabViews.Gradient,
-            label: i18n('CustomColorEditor__gradient'),
-          },
-        ]}
-      >
-        {({ selectedTab }) => (
-          <>
-            <div className="CustomColorEditor__messages">
-              <SampleMessageBubbles
-                backgroundStyle={getCustomColorStyle(color)}
-                color="custom"
-                i18n={i18n}
-                includeAnotherBubble
-              />
-              {selectedTab === TabViews.Gradient && (
-                <>
-                  <GradientDial
-                    deg={color.deg}
-                    knob1Style={{ backgroundColor: getHSL(color.start) }}
-                    knob2Style={{
-                      backgroundColor: getHSL(
-                        color.end || ULTRAMARINE_ISH_VALUES
-                      ),
-                    }}
-                    onChange={deg => {
-                      setColor({
-                        ...color,
-                        deg,
-                      });
-                    }}
-                    onClick={knob => setSelectedColorKnob(knob)}
-                    selectedKnob={selectedColorKnob}
-                  />
-                </>
-              )}
-            </div>
-            <div className="CustomColorEditor__slider-container">
-              {i18n('CustomColorEditor__hue')}
-              <Slider
-                handleStyle={{
-                  backgroundColor: getHSL({
-                    hue,
-                    saturation: 100,
-                  }),
+        if (selectedTab === TabViews.Solid && color.end) {
+          setColor({
+            ...color,
+            end: undefined,
+          });
+        }
+      }}
+      tabs={[
+        {
+          id: TabViews.Solid,
+          label: i18n('CustomColorEditor__solid'),
+        },
+        {
+          id: TabViews.Gradient,
+          label: i18n('CustomColorEditor__gradient'),
+        },
+      ]}
+    >
+      {({ selectedTab }) => (
+        <>
+          <div className="CustomColorEditor__messages">
+            <SampleMessageBubbles
+              backgroundStyle={getCustomColorStyle(color)}
+              color="custom"
+              i18n={i18n}
+              includeAnotherBubble
+            />
+            {selectedTab === TabViews.Gradient && (
+              <GradientDial
+                deg={color.deg}
+                knob1Style={{ backgroundColor: getHSL(color.start) }}
+                knob2Style={{
+                  backgroundColor: getHSL(color.end || ULTRAMARINE_ISH_VALUES),
                 }}
-                label={i18n('CustomColorEditor__hue')}
-                moduleClassName="CustomColorEditor__hue-slider"
-                onChange={(percentage: number) => {
+                onChange={deg => {
                   setColor({
                     ...color,
-                    [selectedColorKnob]: {
-                      ...ULTRAMARINE_ISH_VALUES,
-                      ...color[selectedColorKnob],
-                      hue: getValue(percentage, MAX_HUE),
-                    },
+                    deg,
                   });
                 }}
-                value={getPercentage(hue, MAX_HUE)}
+                onClick={knob => setSelectedColorKnob(knob)}
+                selectedKnob={selectedColorKnob}
               />
-            </div>
-            <div className="CustomColorEditor__slider-container">
-              {i18n('CustomColorEditor__saturation')}
-              <Slider
-                containerStyle={getCustomColorStyle({
-                  deg: 180,
-                  start: { hue, saturation: 0 },
-                  end: { hue, saturation: 100 },
-                })}
-                handleStyle={{
-                  backgroundColor: getHSL(
-                    color[selectedColorKnob] || ULTRAMARINE_ISH_VALUES
-                  ),
-                }}
-                label={i18n('CustomColorEditor__saturation')}
-                moduleClassName="CustomColorEditor__saturation-slider"
-                onChange={(value: number) => {
-                  setColor({
-                    ...color,
-                    [selectedColorKnob]: {
-                      ...ULTRAMARINE_ISH_VALUES,
-                      ...color[selectedColorKnob],
-                      saturation: value,
-                    },
-                  });
-                }}
-                value={saturation}
-              />
-            </div>
-            <div className="CustomColorEditor__footer">
-              <Button variant={ButtonVariant.Secondary} onClick={onClose}>
-                {i18n('cancel')}
-              </Button>
-              <Button
-                onClick={() => {
-                  onSave(color);
-                  onClose();
-                }}
-              >
-                {i18n('save')}
-              </Button>
-            </div>
-          </>
-        )}
-      </Tabs>
-    </>
+            )}
+          </div>
+          <div className="CustomColorEditor__slider-container">
+            {i18n('CustomColorEditor__hue')}
+            <Slider
+              handleStyle={{
+                backgroundColor: getHSL({
+                  hue,
+                  saturation: 100,
+                }),
+              }}
+              label={i18n('CustomColorEditor__hue')}
+              moduleClassName="CustomColorEditor__hue-slider"
+              onChange={(percentage: number) => {
+                setColor({
+                  ...color,
+                  [selectedColorKnob]: {
+                    ...ULTRAMARINE_ISH_VALUES,
+                    ...color[selectedColorKnob],
+                    hue: getValue(percentage, MAX_HUE),
+                  },
+                });
+              }}
+              value={getPercentage(hue, MAX_HUE)}
+            />
+          </div>
+          <div className="CustomColorEditor__slider-container">
+            {i18n('CustomColorEditor__saturation')}
+            <Slider
+              containerStyle={getCustomColorStyle({
+                deg: 180,
+                start: { hue, saturation: 0 },
+                end: { hue, saturation: 100 },
+              })}
+              handleStyle={{
+                backgroundColor: getHSL(
+                  color[selectedColorKnob] || ULTRAMARINE_ISH_VALUES
+                ),
+              }}
+              label={i18n('CustomColorEditor__saturation')}
+              moduleClassName="CustomColorEditor__saturation-slider"
+              onChange={(value: number) => {
+                setColor({
+                  ...color,
+                  [selectedColorKnob]: {
+                    ...ULTRAMARINE_ISH_VALUES,
+                    ...color[selectedColorKnob],
+                    saturation: value,
+                  },
+                });
+              }}
+              value={saturation}
+            />
+          </div>
+          <div className="CustomColorEditor__footer">
+            <Button variant={ButtonVariant.Secondary} onClick={onClose}>
+              {i18n('cancel')}
+            </Button>
+            <Button
+              onClick={() => {
+                onSave(color);
+                onClose();
+              }}
+            >
+              {i18n('save')}
+            </Button>
+          </div>
+        </>
+      )}
+    </Tabs>
   );
-};
+}
diff --git a/ts/components/CustomizingPreferredReactionsModal.stories.tsx b/ts/components/CustomizingPreferredReactionsModal.stories.tsx
index 8d7256a42..62a69bc67 100644
--- a/ts/components/CustomizingPreferredReactionsModal.stories.tsx
+++ b/ts/components/CustomizingPreferredReactionsModal.stories.tsx
@@ -37,28 +37,30 @@ const defaultProps: ComponentProps<typeof CustomizingPreferredReactionsModal> =
     skinTone: 4,
   };
 
-export const Default = (): JSX.Element => (
-  <CustomizingPreferredReactionsModal {...defaultProps} />
-);
+export function Default(): JSX.Element {
+  return <CustomizingPreferredReactionsModal {...defaultProps} />;
+}
 
-export const DraftEmojiSelected = (): JSX.Element => (
-  <CustomizingPreferredReactionsModal
-    {...defaultProps}
-    selectedDraftEmojiIndex={4}
-  />
-);
+export function DraftEmojiSelected(): JSX.Element {
+  return (
+    <CustomizingPreferredReactionsModal
+      {...defaultProps}
+      selectedDraftEmojiIndex={4}
+    />
+  );
+}
 
 DraftEmojiSelected.story = {
   name: 'Draft emoji selected',
 };
 
-export const Saving = (): JSX.Element => (
-  <CustomizingPreferredReactionsModal {...defaultProps} isSaving />
-);
+export function Saving(): JSX.Element {
+  return <CustomizingPreferredReactionsModal {...defaultProps} isSaving />;
+}
 
-export const HadError = (): JSX.Element => (
-  <CustomizingPreferredReactionsModal {...defaultProps} hadSaveError />
-);
+export function HadError(): JSX.Element {
+  return <CustomizingPreferredReactionsModal {...defaultProps} hadSaveError />;
+}
 
 HadError.story = {
   name: 'Had error',
diff --git a/ts/components/DebugLogWindow.tsx b/ts/components/DebugLogWindow.tsx
index dd1f19e82..def1335f0 100644
--- a/ts/components/DebugLogWindow.tsx
+++ b/ts/components/DebugLogWindow.tsx
@@ -41,7 +41,7 @@ enum ToastType {
   Loading,
 }
 
-export const DebugLogWindow = ({
+export function DebugLogWindow({
   closeWindow,
   downloadLog,
   i18n,
@@ -49,7 +49,7 @@ export const DebugLogWindow = ({
   uploadLogs,
   hasCustomTitleBar,
   executeMenuRole,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [loadState, setLoadState] = useState<LoadState>(LoadState.NotStarted);
   const [logText, setLogText] = useState<string | undefined>();
   const [publicLogURL, setPublicLogURL] = useState<string | undefined>();
@@ -230,4 +230,4 @@ export const DebugLogWindow = ({
       </div>
     </TitleBarContainer>
   );
-};
+}
diff --git a/ts/components/DialogExpiredBuild.tsx b/ts/components/DialogExpiredBuild.tsx
index 0ab680ee6..1deb50596 100644
--- a/ts/components/DialogExpiredBuild.tsx
+++ b/ts/components/DialogExpiredBuild.tsx
@@ -15,11 +15,11 @@ type PropsType = {
   i18n: LocalizerType;
 };
 
-export const DialogExpiredBuild = ({
+export function DialogExpiredBuild({
   containerWidthBreakpoint,
   hasExpired,
   i18n,
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   if (!hasExpired) {
     return null;
   }
@@ -37,4 +37,4 @@ export const DialogExpiredBuild = ({
       {i18n('expiredWarning')}{' '}
     </LeftPaneDialog>
   );
-};
+}
diff --git a/ts/components/DialogNetworkStatus.stories.tsx b/ts/components/DialogNetworkStatus.stories.tsx
index 07db92a91..6c3a161ad 100644
--- a/ts/components/DialogNetworkStatus.stories.tsx
+++ b/ts/components/DialogNetworkStatus.stories.tsx
@@ -29,7 +29,7 @@ export default {
   title: 'Components/DialogNetworkStatus',
 };
 
-export const KnobsPlayground = (args: PropsType): JSX.Element => {
+export function KnobsPlayground(args: PropsType): JSX.Element {
   /*
   const socketStatus = select(
     'socketStatus',
@@ -48,7 +48,7 @@ export const KnobsPlayground = (args: PropsType): JSX.Element => {
       <DialogNetworkStatus {...defaultProps} {...args} />
     </FakeLeftPaneContainer>
   );
-};
+}
 KnobsPlayground.args = {
   containerWidthBreakpoint: WidthBreakpoint.Wide,
   hasNetworkDialog: true,
@@ -56,113 +56,129 @@ KnobsPlayground.args = {
   socketStatus: SocketStatus.CONNECTING,
 };
 
-export const ConnectingWide = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
-    <DialogNetworkStatus
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Wide}
-      socketStatus={SocketStatus.CONNECTING}
-    />
-  </FakeLeftPaneContainer>
-);
+export function ConnectingWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogNetworkStatus
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        socketStatus={SocketStatus.CONNECTING}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 ConnectingWide.story = {
   name: 'Connecting Wide',
 };
 
-export const ClosingWide = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
-    <DialogNetworkStatus
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Wide}
-      socketStatus={SocketStatus.CLOSING}
-    />
-  </FakeLeftPaneContainer>
-);
+export function ClosingWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogNetworkStatus
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        socketStatus={SocketStatus.CLOSING}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 ClosingWide.story = {
   name: 'Closing Wide',
 };
 
-export const ClosedWide = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
-    <DialogNetworkStatus
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Wide}
-      socketStatus={SocketStatus.CLOSED}
-    />
-  </FakeLeftPaneContainer>
-);
+export function ClosedWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogNetworkStatus
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        socketStatus={SocketStatus.CLOSED}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 ClosedWide.story = {
   name: 'Closed Wide',
 };
 
-export const OfflineWide = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
-    <DialogNetworkStatus
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Wide}
-      isOnline={false}
-    />
-  </FakeLeftPaneContainer>
-);
+export function OfflineWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogNetworkStatus
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        isOnline={false}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 OfflineWide.story = {
   name: 'Offline Wide',
 };
 
-export const ConnectingNarrow = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
-    <DialogNetworkStatus
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Narrow}
-      socketStatus={SocketStatus.CONNECTING}
-    />
-  </FakeLeftPaneContainer>
-);
+export function ConnectingNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogNetworkStatus
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        socketStatus={SocketStatus.CONNECTING}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 ConnectingNarrow.story = {
   name: 'Connecting Narrow',
 };
 
-export const ClosingNarrow = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
-    <DialogNetworkStatus
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Narrow}
-      socketStatus={SocketStatus.CLOSING}
-    />
-  </FakeLeftPaneContainer>
-);
+export function ClosingNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogNetworkStatus
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        socketStatus={SocketStatus.CLOSING}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 ClosingNarrow.story = {
   name: 'Closing Narrow',
 };
 
-export const ClosedNarrow = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
-    <DialogNetworkStatus
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Narrow}
-      socketStatus={SocketStatus.CLOSED}
-    />
-  </FakeLeftPaneContainer>
-);
+export function ClosedNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogNetworkStatus
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        socketStatus={SocketStatus.CLOSED}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 ClosedNarrow.story = {
   name: 'Closed Narrow',
 };
 
-export const OfflineNarrow = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
-    <DialogNetworkStatus
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Narrow}
-      isOnline={false}
-    />
-  </FakeLeftPaneContainer>
-);
+export function OfflineNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogNetworkStatus
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        isOnline={false}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 OfflineNarrow.story = {
   name: 'Offline Narrow',
diff --git a/ts/components/DialogNetworkStatus.tsx b/ts/components/DialogNetworkStatus.tsx
index d4af87ad1..3eb0c2a56 100644
--- a/ts/components/DialogNetworkStatus.tsx
+++ b/ts/components/DialogNetworkStatus.tsx
@@ -20,14 +20,14 @@ export type PropsType = NetworkStateType & {
   manualReconnect: () => void;
 };
 
-export const DialogNetworkStatus = ({
+export function DialogNetworkStatus({
   containerWidthBreakpoint,
   hasNetworkDialog,
   i18n,
   isOnline,
   socketStatus,
   manualReconnect,
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   const [isConnecting, setIsConnecting] = React.useState<boolean>(
     socketStatus === SocketStatus.CONNECTING
   );
@@ -93,4 +93,4 @@ export const DialogNetworkStatus = ({
       onClick={reconnect}
     />
   );
-};
+}
diff --git a/ts/components/DialogRelink.stories.tsx b/ts/components/DialogRelink.stories.tsx
index 550f98eb8..edba61839 100644
--- a/ts/components/DialogRelink.stories.tsx
+++ b/ts/components/DialogRelink.stories.tsx
@@ -41,15 +41,15 @@ export default {
   title: 'Components/DialogRelink',
 };
 
-export const KnobsPlayground = (): JSX.Element => {
+export function KnobsPlayground(): JSX.Element {
   const isRegistrationDone = boolean('isRegistrationDone', false);
 
   return (
     <DialogRelink {...defaultProps} isRegistrationDone={isRegistrationDone} />
   );
-};
+}
 
-export const Iterations = (): JSX.Element => {
+export function Iterations(): JSX.Element {
   return (
     <>
       {permutations.map(({ props, title }) => (
@@ -64,4 +64,4 @@ export const Iterations = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
diff --git a/ts/components/DialogRelink.tsx b/ts/components/DialogRelink.tsx
index dd3202c98..472b4b9a6 100644
--- a/ts/components/DialogRelink.tsx
+++ b/ts/components/DialogRelink.tsx
@@ -15,12 +15,12 @@ export type PropsType = {
   relinkDevice: () => void;
 };
 
-export const DialogRelink = ({
+export function DialogRelink({
   containerWidthBreakpoint,
   i18n,
   isRegistrationDone,
   relinkDevice,
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   if (isRegistrationDone) {
     return null;
   }
@@ -36,4 +36,4 @@ export const DialogRelink = ({
       hasAction
     />
   );
-};
+}
diff --git a/ts/components/DialogUpdate.stories.tsx b/ts/components/DialogUpdate.stories.tsx
index 318f8b00d..6c76d27b1 100644
--- a/ts/components/DialogUpdate.stories.tsx
+++ b/ts/components/DialogUpdate.stories.tsx
@@ -32,7 +32,7 @@ export default {
   title: 'Components/DialogUpdate',
 };
 
-export const KnobsPlayground = (): JSX.Element => {
+export function KnobsPlayground(): JSX.Element {
   const containerWidthBreakpoint = select(
     'containerWidthBreakpoint',
     WidthBreakpoint,
@@ -54,277 +54,313 @@ export const KnobsPlayground = (): JSX.Element => {
       />
     </FakeLeftPaneContainer>
   );
-};
+}
 
-export const UpdateWide = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Wide}
-      dialogType={DialogType.Update}
-      currentVersion="5.24.0"
-    />
-  </FakeLeftPaneContainer>
-);
+export function UpdateWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        dialogType={DialogType.Update}
+        currentVersion="5.24.0"
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 UpdateWide.story = {
   name: 'Update (Wide)',
 };
 
-export const DownloadReadyWide = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Wide}
-      currentVersion="5.24.0"
-      dialogType={DialogType.DownloadReady}
-      downloadSize={30123456}
-    />
-  </FakeLeftPaneContainer>
-);
+export function DownloadReadyWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        currentVersion="5.24.0"
+        dialogType={DialogType.DownloadReady}
+        downloadSize={30123456}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 DownloadReadyWide.story = {
   name: 'DownloadReady (Wide)',
 };
 
-export const FullDownloadReadyWide = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Wide}
-      currentVersion="5.24.0"
-      dialogType={DialogType.FullDownloadReady}
-      downloadSize={300123456}
-    />
-  </FakeLeftPaneContainer>
-);
+export function FullDownloadReadyWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        currentVersion="5.24.0"
+        dialogType={DialogType.FullDownloadReady}
+        downloadSize={300123456}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 FullDownloadReadyWide.story = {
   name: 'FullDownloadReady (Wide)',
 };
 
-export const DownloadingWide = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Wide}
-      currentVersion="5.24.0"
-      dialogType={DialogType.Downloading}
-    />
-  </FakeLeftPaneContainer>
-);
+export function DownloadingWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        currentVersion="5.24.0"
+        dialogType={DialogType.Downloading}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 DownloadingWide.story = {
   name: 'Downloading (Wide)',
 };
 
-export const CannotUpdateWide = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Wide}
-      currentVersion="5.24.0"
-      dialogType={DialogType.Cannot_Update}
-    />
-  </FakeLeftPaneContainer>
-);
+export function CannotUpdateWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        currentVersion="5.24.0"
+        dialogType={DialogType.Cannot_Update}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 CannotUpdateWide.story = {
   name: 'Cannot_Update (Wide)',
 };
 
-export const CannotUpdateBetaWide = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Wide}
-      currentVersion="5.24.0-beta.1"
-      dialogType={DialogType.Cannot_Update}
-    />
-  </FakeLeftPaneContainer>
-);
+export function CannotUpdateBetaWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        currentVersion="5.24.0-beta.1"
+        dialogType={DialogType.Cannot_Update}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 CannotUpdateBetaWide.story = {
   name: 'Cannot_Update_Beta (Wide)',
 };
 
-export const CannotUpdateRequireManualWide = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Wide}
-      currentVersion="5.24.0"
-      dialogType={DialogType.Cannot_Update_Require_Manual}
-    />
-  </FakeLeftPaneContainer>
-);
+export function CannotUpdateRequireManualWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        currentVersion="5.24.0"
+        dialogType={DialogType.Cannot_Update_Require_Manual}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 CannotUpdateRequireManualWide.story = {
   name: 'Cannot_Update_Require_Manual (Wide)',
 };
 
-export const CannotUpdateRequireManualBetaWide = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Wide}
-      currentVersion="5.24.0-beta.1"
-      dialogType={DialogType.Cannot_Update_Require_Manual}
-    />
-  </FakeLeftPaneContainer>
-);
+export function CannotUpdateRequireManualBetaWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        currentVersion="5.24.0-beta.1"
+        dialogType={DialogType.Cannot_Update_Require_Manual}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 CannotUpdateRequireManualBetaWide.story = {
   name: 'Cannot_Update_Require_Manual_Beta (Wide)',
 };
 
-export const MacOSReadOnlyWide = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Wide}
-      currentVersion="5.24.0"
-      dialogType={DialogType.MacOS_Read_Only}
-    />
-  </FakeLeftPaneContainer>
-);
+export function MacOSReadOnlyWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        currentVersion="5.24.0"
+        dialogType={DialogType.MacOS_Read_Only}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 MacOSReadOnlyWide.story = {
   name: 'MacOS_Read_Only (Wide)',
 };
 
-export const UpdateNarrow = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Narrow}
-      dialogType={DialogType.Update}
-      currentVersion="5.24.0"
-    />
-  </FakeLeftPaneContainer>
-);
+export function UpdateNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        dialogType={DialogType.Update}
+        currentVersion="5.24.0"
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 UpdateNarrow.story = {
   name: 'Update (Narrow)',
 };
 
-export const DownloadReadyNarrow = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Narrow}
-      currentVersion="5.24.0"
-      dialogType={DialogType.DownloadReady}
-      downloadSize={30123456}
-    />
-  </FakeLeftPaneContainer>
-);
+export function DownloadReadyNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        currentVersion="5.24.0"
+        dialogType={DialogType.DownloadReady}
+        downloadSize={30123456}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 DownloadReadyNarrow.story = {
   name: 'DownloadReady (Narrow)',
 };
 
-export const FullDownloadReadyNarrow = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Narrow}
-      currentVersion="5.24.0"
-      dialogType={DialogType.FullDownloadReady}
-      downloadSize={300123456}
-    />
-  </FakeLeftPaneContainer>
-);
+export function FullDownloadReadyNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        currentVersion="5.24.0"
+        dialogType={DialogType.FullDownloadReady}
+        downloadSize={300123456}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 FullDownloadReadyNarrow.story = {
   name: 'FullDownloadReady (Narrow)',
 };
 
-export const DownloadingNarrow = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Narrow}
-      currentVersion="5.24.0"
-      dialogType={DialogType.Downloading}
-    />
-  </FakeLeftPaneContainer>
-);
+export function DownloadingNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        currentVersion="5.24.0"
+        dialogType={DialogType.Downloading}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 DownloadingNarrow.story = {
   name: 'Downloading (Narrow)',
 };
 
-export const CannotUpdateNarrow = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Narrow}
-      currentVersion="5.24.0"
-      dialogType={DialogType.Cannot_Update}
-    />
-  </FakeLeftPaneContainer>
-);
+export function CannotUpdateNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        currentVersion="5.24.0"
+        dialogType={DialogType.Cannot_Update}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 CannotUpdateNarrow.story = {
   name: 'Cannot Update (Narrow)',
 };
 
-export const CannotUpdateBetaNarrow = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Narrow}
-      currentVersion="5.24.0-beta.1"
-      dialogType={DialogType.Cannot_Update}
-    />
-  </FakeLeftPaneContainer>
-);
+export function CannotUpdateBetaNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        currentVersion="5.24.0-beta.1"
+        dialogType={DialogType.Cannot_Update}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 CannotUpdateBetaNarrow.story = {
   name: 'Cannot Update Beta (Narrow)',
 };
 
-export const CannotUpdateRequireManualNarrow = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Narrow}
-      currentVersion="5.24.0"
-      dialogType={DialogType.Cannot_Update_Require_Manual}
-    />
-  </FakeLeftPaneContainer>
-);
+export function CannotUpdateRequireManualNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        currentVersion="5.24.0"
+        dialogType={DialogType.Cannot_Update_Require_Manual}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 CannotUpdateRequireManualNarrow.story = {
   name: 'Cannot_Update_Require_Manual (Narrow)',
 };
 
-export const CannotUpdateRequireManualBetaNarrow = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Narrow}
-      currentVersion="5.24.0-beta.1"
-      dialogType={DialogType.Cannot_Update_Require_Manual}
-    />
-  </FakeLeftPaneContainer>
-);
+export function CannotUpdateRequireManualBetaNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        currentVersion="5.24.0-beta.1"
+        dialogType={DialogType.Cannot_Update_Require_Manual}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 CannotUpdateRequireManualBetaNarrow.story = {
   name: 'Cannot_Update_Require_Manual_Beta (Narrow)',
 };
 
-export const MacOSReadOnlyNarrow = (): JSX.Element => (
-  <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
-    <DialogUpdate
-      {...defaultProps}
-      containerWidthBreakpoint={WidthBreakpoint.Narrow}
-      currentVersion="5.24.0"
-      dialogType={DialogType.MacOS_Read_Only}
-    />
-  </FakeLeftPaneContainer>
-);
+export function MacOSReadOnlyNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        currentVersion="5.24.0"
+        dialogType={DialogType.MacOS_Read_Only}
+      />
+    </FakeLeftPaneContainer>
+  );
+}
 
 MacOSReadOnlyNarrow.story = {
   name: 'MacOS_Read_Only (Narrow)',
diff --git a/ts/components/DialogUpdate.tsx b/ts/components/DialogUpdate.tsx
index 07877b189..103051b40 100644
--- a/ts/components/DialogUpdate.tsx
+++ b/ts/components/DialogUpdate.tsx
@@ -30,7 +30,7 @@ export type PropsType = {
 const PRODUCTION_DOWNLOAD_URL = 'https://signal.org/download/';
 const BETA_DOWNLOAD_URL = 'https://support.signal.org/beta';
 
-export const DialogUpdate = ({
+export function DialogUpdate({
   containerWidthBreakpoint,
   dialogType,
   didSnooze,
@@ -43,7 +43,7 @@ export const DialogUpdate = ({
   startUpdate,
   version,
   currentVersion,
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   if (hasNetworkDialog) {
     return null;
   }
@@ -237,4 +237,4 @@ export const DialogUpdate = ({
       closeLabel={i18n('autoUpdateIgnoreButtonLabel')}
     />
   );
-};
+}
diff --git a/ts/components/DirectCallRemoteParticipant.tsx b/ts/components/DirectCallRemoteParticipant.tsx
index 01eeba6de..80d114517 100644
--- a/ts/components/DirectCallRemoteParticipant.tsx
+++ b/ts/components/DirectCallRemoteParticipant.tsx
@@ -15,12 +15,12 @@ type PropsType = {
   setRendererCanvas: (_: SetRendererCanvasType) => void;
 };
 
-export const DirectCallRemoteParticipant: React.FC<PropsType> = ({
+export function DirectCallRemoteParticipant({
   conversation,
   hasRemoteVideo,
   i18n,
   setRendererCanvas,
-}) => {
+}: PropsType): JSX.Element {
   const remoteVideoRef = useRef<HTMLCanvasElement | null>(null);
 
   useEffect(() => {
@@ -38,7 +38,7 @@ export const DirectCallRemoteParticipant: React.FC<PropsType> = ({
   ) : (
     renderAvatar(i18n, conversation)
   );
-};
+}
 
 function renderAvatar(
   i18n: LocalizerType,
diff --git a/ts/components/DisappearingTimeDialog.stories.tsx b/ts/components/DisappearingTimeDialog.stories.tsx
index 965bc9253..3ed55aa89 100644
--- a/ts/components/DisappearingTimeDialog.stories.tsx
+++ b/ts/components/DisappearingTimeDialog.stories.tsx
@@ -16,47 +16,57 @@ export default {
 
 const i18n = setupI18n('en', enMessages);
 
-export const Seconds = (): JSX.Element => (
-  <DisappearingTimeDialog
-    i18n={i18n}
-    initialValue={EXPIRE_TIMERS[0].value}
-    onSubmit={action('onSubmit')}
-    onClose={action('onClose')}
-  />
-);
+export function Seconds(): JSX.Element {
+  return (
+    <DisappearingTimeDialog
+      i18n={i18n}
+      initialValue={EXPIRE_TIMERS[0].value}
+      onSubmit={action('onSubmit')}
+      onClose={action('onClose')}
+    />
+  );
+}
 
-export const Minutes = (): JSX.Element => (
-  <DisappearingTimeDialog
-    i18n={i18n}
-    initialValue={EXPIRE_TIMERS[1].value}
-    onSubmit={action('onSubmit')}
-    onClose={action('onClose')}
-  />
-);
+export function Minutes(): JSX.Element {
+  return (
+    <DisappearingTimeDialog
+      i18n={i18n}
+      initialValue={EXPIRE_TIMERS[1].value}
+      onSubmit={action('onSubmit')}
+      onClose={action('onClose')}
+    />
+  );
+}
 
-export const Hours = (): JSX.Element => (
-  <DisappearingTimeDialog
-    i18n={i18n}
-    initialValue={EXPIRE_TIMERS[2].value}
-    onSubmit={action('onSubmit')}
-    onClose={action('onClose')}
-  />
-);
+export function Hours(): JSX.Element {
+  return (
+    <DisappearingTimeDialog
+      i18n={i18n}
+      initialValue={EXPIRE_TIMERS[2].value}
+      onSubmit={action('onSubmit')}
+      onClose={action('onClose')}
+    />
+  );
+}
 
-export const Days = (): JSX.Element => (
-  <DisappearingTimeDialog
-    i18n={i18n}
-    initialValue={EXPIRE_TIMERS[3].value}
-    onSubmit={action('onSubmit')}
-    onClose={action('onClose')}
-  />
-);
+export function Days(): JSX.Element {
+  return (
+    <DisappearingTimeDialog
+      i18n={i18n}
+      initialValue={EXPIRE_TIMERS[3].value}
+      onSubmit={action('onSubmit')}
+      onClose={action('onClose')}
+    />
+  );
+}
 
-export const Weeks = (): JSX.Element => (
-  <DisappearingTimeDialog
-    i18n={i18n}
-    initialValue={EXPIRE_TIMERS[4].value}
-    onSubmit={action('onSubmit')}
-    onClose={action('onClose')}
-  />
-);
+export function Weeks(): JSX.Element {
+  return (
+    <DisappearingTimeDialog
+      i18n={i18n}
+      initialValue={EXPIRE_TIMERS[4].value}
+      onSubmit={action('onSubmit')}
+      onClose={action('onClose')}
+    />
+  );
+}
diff --git a/ts/components/DisappearingTimerSelect.stories.tsx b/ts/components/DisappearingTimerSelect.stories.tsx
index e8aa8fffe..11d8973f0 100644
--- a/ts/components/DisappearingTimerSelect.stories.tsx
+++ b/ts/components/DisappearingTimerSelect.stories.tsx
@@ -18,7 +18,7 @@ type Props = {
   initialValue: number;
 };
 
-const TimerSelectWrap: React.FC<Props> = ({ initialValue }) => {
+function TimerSelectWrap({ initialValue }: Props): JSX.Element {
   const [value, setValue] = useState(initialValue);
 
   return (
@@ -28,19 +28,19 @@ const TimerSelectWrap: React.FC<Props> = ({ initialValue }) => {
       onChange={newValue => setValue(newValue)}
     />
   );
-};
+}
 
-export const InitialValue1Day = (): JSX.Element => (
-  <TimerSelectWrap initialValue={24 * 3600} />
-);
+export function InitialValue1Day(): JSX.Element {
+  return <TimerSelectWrap initialValue={24 * 3600} />;
+}
 
 InitialValue1Day.story = {
   name: 'Initial value: 1 day',
 };
 
-export const InitialValue3DaysCustomTime = (): JSX.Element => (
-  <TimerSelectWrap initialValue={3 * 24 * 3600} />
-);
+export function InitialValue3DaysCustomTime(): JSX.Element {
+  return <TimerSelectWrap initialValue={3 * 24 * 3600} />;
+}
 
 InitialValue3DaysCustomTime.story = {
   name: 'Initial value 3 days (Custom time)',
diff --git a/ts/components/DisappearingTimerSelect.tsx b/ts/components/DisappearingTimerSelect.tsx
index f78a1015f..958579da0 100644
--- a/ts/components/DisappearingTimerSelect.tsx
+++ b/ts/components/DisappearingTimerSelect.tsx
@@ -21,7 +21,7 @@ export type Props = {
   onChange(value: DurationInSeconds): void;
 };
 
-export const DisappearingTimerSelect: React.FC<Props> = (props: Props) => {
+export function DisappearingTimerSelect(props: Props): JSX.Element {
   const { i18n, value = DurationInSeconds.ZERO, onChange } = props;
 
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -104,4 +104,4 @@ export const DisappearingTimerSelect: React.FC<Props> = (props: Props) => {
       {modalNode}
     </div>
   );
-};
+}
diff --git a/ts/components/EditUsernameModalBody.stories.tsx b/ts/components/EditUsernameModalBody.stories.tsx
index 63dbc46ea..b7205ac1c 100644
--- a/ts/components/EditUsernameModalBody.stories.tsx
+++ b/ts/components/EditUsernameModalBody.stories.tsx
@@ -80,6 +80,7 @@ type ArgsType = PropsType & {
   reservation?: UsernameReservationType;
 };
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<ArgsType> = args => {
   let { reservation } = args;
   if (!reservation && args.discriminator) {
diff --git a/ts/components/EditUsernameModalBody.tsx b/ts/components/EditUsernameModalBody.tsx
index 6db309dee..431c0f7cb 100644
--- a/ts/components/EditUsernameModalBody.tsx
+++ b/ts/components/EditUsernameModalBody.tsx
@@ -45,7 +45,7 @@ export type PropsType = PropsDataType &
   ActionPropsDataType &
   ExternalPropsDataType;
 
-export const EditUsernameModalBody = ({
+export function EditUsernameModalBody({
   i18n,
   currentUsername,
   reserveUsername,
@@ -57,7 +57,7 @@ export const EditUsernameModalBody = ({
   error,
   state,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const currentNickname = useMemo(() => {
     if (!currentUsername) {
       return undefined;
@@ -266,4 +266,4 @@ export const EditUsernameModalBody = ({
       )}
     </>
   );
-};
+}
diff --git a/ts/components/ErrorModal.stories.tsx b/ts/components/ErrorModal.stories.tsx
index a0a9f5611..42722fd5c 100644
--- a/ts/components/ErrorModal.stories.tsx
+++ b/ts/components/ErrorModal.stories.tsx
@@ -25,11 +25,11 @@ export default {
   title: 'Components/ErrorModal',
 };
 
-export const Normal = (): JSX.Element => {
+export function Normal(): JSX.Element {
   return <ErrorModal {...createProps()} />;
-};
+}
 
-export const CustomStrings = (): JSX.Element => {
+export function CustomStrings(): JSX.Element {
   return (
     <ErrorModal
       {...createProps({
@@ -39,4 +39,4 @@ export const CustomStrings = (): JSX.Element => {
       })}
     />
   );
-};
+}
diff --git a/ts/components/ErrorModal.tsx b/ts/components/ErrorModal.tsx
index 43edb586e..5d6dcb1aa 100644
--- a/ts/components/ErrorModal.tsx
+++ b/ts/components/ErrorModal.tsx
@@ -22,7 +22,7 @@ function focusRef(el: HTMLElement | null) {
   }
 }
 
-export const ErrorModal = (props: PropsType): JSX.Element => {
+export function ErrorModal(props: PropsType): JSX.Element {
   const { buttonText, description, i18n, onClose, title } = props;
 
   const footer = (
@@ -44,4 +44,4 @@ export const ErrorModal = (props: PropsType): JSX.Element => {
       </div>
     </Modal>
   );
-};
+}
diff --git a/ts/components/ForwardMessageModal.stories.tsx b/ts/components/ForwardMessageModal.stories.tsx
index 959669ca8..a0a9512b8 100644
--- a/ts/components/ForwardMessageModal.stories.tsx
+++ b/ts/components/ForwardMessageModal.stories.tsx
@@ -72,35 +72,35 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   regionCode: 'US',
 });
 
-export const Modal = (): JSX.Element => {
+export function Modal(): JSX.Element {
   return <ForwardMessageModal {...useProps()} />;
-};
+}
 
-export const WithText = (): JSX.Element => {
+export function WithText(): JSX.Element {
   return <ForwardMessageModal {...useProps({ messageBody: 'sup' })} />;
-};
+}
 
 WithText.story = {
   name: 'with text',
 };
 
-export const ASticker = (): JSX.Element => {
+export function ASticker(): JSX.Element {
   return <ForwardMessageModal {...useProps({ isSticker: true })} />;
-};
+}
 
 ASticker.story = {
   name: 'a sticker',
 };
 
-export const WithAContact = (): JSX.Element => {
+export function WithAContact(): JSX.Element {
   return <ForwardMessageModal {...useProps({ hasContact: true })} />;
-};
+}
 
 WithAContact.story = {
   name: 'with a contact',
 };
 
-export const LinkPreview = (): JSX.Element => {
+export function LinkPreview(): JSX.Element {
   return (
     <ForwardMessageModal
       {...useProps({
@@ -120,13 +120,13 @@ export const LinkPreview = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 LinkPreview.story = {
   name: 'link preview',
 };
 
-export const MediaAttachments = (): JSX.Element => {
+export function MediaAttachments(): JSX.Element {
   return (
     <ForwardMessageModal
       {...useProps({
@@ -150,23 +150,25 @@ export const MediaAttachments = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 MediaAttachments.story = {
   name: 'media attachments',
 };
 
-export const AnnouncementOnlyGroupsNonAdmin = (): JSX.Element => (
-  <ForwardMessageModal
-    {...useProps()}
-    candidateConversations={[
-      getDefaultConversation({
-        announcementsOnly: true,
-        areWeAdmin: false,
-      }),
-    ]}
-  />
-);
+export function AnnouncementOnlyGroupsNonAdmin(): JSX.Element {
+  return (
+    <ForwardMessageModal
+      {...useProps()}
+      candidateConversations={[
+        getDefaultConversation({
+          announcementsOnly: true,
+          areWeAdmin: false,
+        }),
+      ]}
+    />
+  );
+}
 
 AnnouncementOnlyGroupsNonAdmin.story = {
   name: 'announcement only groups non-admin',
diff --git a/ts/components/ForwardMessageModal.tsx b/ts/components/ForwardMessageModal.tsx
index 68792a4d2..3248fe734 100644
--- a/ts/components/ForwardMessageModal.tsx
+++ b/ts/components/ForwardMessageModal.tsx
@@ -1,7 +1,6 @@
 // Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React, {
   useCallback,
   useEffect,
@@ -76,7 +75,7 @@ export type PropsType = DataPropsType & ActionPropsType;
 
 const MAX_FORWARD = 5;
 
-export const ForwardMessageModal: FunctionComponent<PropsType> = ({
+export function ForwardMessageModal({
   attachments,
   candidateConversations,
   doForwardMessage,
@@ -92,7 +91,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
   RenderCompositionTextArea,
   theme,
   regionCode,
-}) => {
+}: PropsType): JSX.Element {
   const inputRef = useRef<null | HTMLInputElement>(null);
   const [selectedContacts, setSelectedContacts] = useState<
     Array<ConversationType>
@@ -428,4 +427,4 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
       </ModalHost>
     </>
   );
-};
+}
diff --git a/ts/components/GlobalAudioContext.tsx b/ts/components/GlobalAudioContext.tsx
index cd2cfff84..2325bfdff 100644
--- a/ts/components/GlobalAudioContext.tsx
+++ b/ts/components/GlobalAudioContext.tsx
@@ -183,11 +183,11 @@ export type GlobalAudioProps = {
  * A global context that holds Audio, AudioContext, LRU instances that are used
  * inside the conversation by ts/components/conversation/MessageAudio.tsx
  */
-export const GlobalAudioProvider: React.FC<GlobalAudioProps> = ({
+export function GlobalAudioProvider({
   conversationId,
   children,
   unloadMessageAudio,
-}) => {
+}: GlobalAudioProps): JSX.Element {
   // When moving between conversations - stop audio
   React.useEffect(() => {
     return () => {
@@ -200,4 +200,4 @@ export const GlobalAudioProvider: React.FC<GlobalAudioProps> = ({
       {children}
     </GlobalAudioContext.Provider>
   );
-};
+}
diff --git a/ts/components/GlobalModalContainer.tsx b/ts/components/GlobalModalContainer.tsx
index 5def11f04..1096939f0 100644
--- a/ts/components/GlobalModalContainer.tsx
+++ b/ts/components/GlobalModalContainer.tsx
@@ -52,7 +52,7 @@ export type PropsType = {
   hideWhatsNewModal: () => unknown;
 };
 
-export const GlobalModalContainer = ({
+export function GlobalModalContainer({
   i18n,
   // ContactModal
   contactModalState,
@@ -85,7 +85,7 @@ export const GlobalModalContainer = ({
   // WhatsNewModal
   hideWhatsNewModal,
   isWhatsNewVisible,
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   // We want the send anyway dialog to supersede most modals since this is an
   // immediate action the user needs to take.
   if (hasSafetyNumberChangeModal || safetyNumberChangedBlockingData) {
@@ -159,4 +159,4 @@ export const GlobalModalContainer = ({
   }
 
   return null;
-};
+}
diff --git a/ts/components/GradientDial.tsx b/ts/components/GradientDial.tsx
index 0e7c74369..fbcfb5dac 100644
--- a/ts/components/GradientDial.tsx
+++ b/ts/components/GradientDial.tsx
@@ -184,14 +184,14 @@ function getKnobCoordinates(
   };
 }
 
-export const GradientDial = ({
+export function GradientDial({
   deg = 180,
   knob1Style,
   knob2Style,
   onChange,
   onClick,
   selectedKnob,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const containerRef = useRef<HTMLDivElement | null>(null);
 
   const [knobDim, setKnobDim] = useState<{
@@ -325,4 +325,4 @@ export const GradientDial = ({
       )}
     </div>
   );
-};
+}
diff --git a/ts/components/GroupCallOverflowArea.stories.tsx b/ts/components/GroupCallOverflowArea.stories.tsx
index 422f90b7e..053edfe64 100644
--- a/ts/components/GroupCallOverflowArea.stories.tsx
+++ b/ts/components/GroupCallOverflowArea.stories.tsx
@@ -1,7 +1,6 @@
 // Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FC } from 'react';
 import React from 'react';
 import { memoize, times } from 'lodash';
 import { number } from '@storybook/addon-knobs';
@@ -44,70 +43,80 @@ const defaultProps = {
 };
 
 // This component is usually rendered on a call screen.
-const Container: FC = ({ children }) => (
-  <div
-    style={{
-      background: 'black',
-      display: 'inline-flex',
-      height: '80vh',
-    }}
-  >
-    {children}
-  </div>
-);
+function Container({ children }: { children: JSX.Element }): JSX.Element {
+  return (
+    <div
+      style={{
+        background: 'black',
+        display: 'inline-flex',
+        height: '80vh',
+      }}
+    >
+      {children}
+    </div>
+  );
+}
 
-export const NoOverflowedParticipants = (): JSX.Element => (
-  <Container>
-    <GroupCallOverflowArea {...defaultProps} overflowedParticipants={[]} />
-  </Container>
-);
+export function NoOverflowedParticipants(): JSX.Element {
+  return (
+    <Container>
+      <GroupCallOverflowArea {...defaultProps} overflowedParticipants={[]} />
+    </Container>
+  );
+}
 
 NoOverflowedParticipants.story = {
   name: 'No overflowed participants',
 };
 
-export const OneOverflowedParticipant = (): JSX.Element => (
-  <Container>
-    <GroupCallOverflowArea
-      {...defaultProps}
-      overflowedParticipants={allRemoteParticipants.slice(0, 1)}
-    />
-  </Container>
-);
+export function OneOverflowedParticipant(): JSX.Element {
+  return (
+    <Container>
+      <GroupCallOverflowArea
+        {...defaultProps}
+        overflowedParticipants={allRemoteParticipants.slice(0, 1)}
+      />
+    </Container>
+  );
+}
 
 OneOverflowedParticipant.story = {
   name: 'One overflowed participant',
 };
 
-export const ThreeOverflowedParticipants = (): JSX.Element => (
-  <Container>
-    <GroupCallOverflowArea
-      {...defaultProps}
-      overflowedParticipants={allRemoteParticipants.slice(0, 3)}
-    />
-  </Container>
-);
+export function ThreeOverflowedParticipants(): JSX.Element {
+  return (
+    <Container>
+      <GroupCallOverflowArea
+        {...defaultProps}
+        overflowedParticipants={allRemoteParticipants.slice(0, 3)}
+      />
+    </Container>
+  );
+}
 
 ThreeOverflowedParticipants.story = {
   name: 'Three overflowed participants',
 };
 
-export const ManyOverflowedParticipants = (): JSX.Element => (
-  <Container>
-    <GroupCallOverflowArea
-      {...defaultProps}
-      overflowedParticipants={allRemoteParticipants.slice(
-        0,
-        number('Participant count', MAX_PARTICIPANTS, {
-          range: true,
-          min: 0,
-          max: MAX_PARTICIPANTS,
-          step: 1,
-        })
-      )}
-    />
-  </Container>
-);
+export function ManyOverflowedParticipants(): JSX.Element {
+  return (
+    <Container>
+      <GroupCallOverflowArea
+        {...defaultProps}
+        overflowedParticipants={allRemoteParticipants.slice(
+          0,
+          number('Participant count', MAX_PARTICIPANTS, {
+            range: true,
+            min: 0,
+            max: MAX_PARTICIPANTS,
+            step: 1,
+          })
+        )}
+      />
+    </Container>
+  );
+}
 
 ManyOverflowedParticipants.story = {
   name: 'Many overflowed participants',
diff --git a/ts/components/GroupCallOverflowArea.tsx b/ts/components/GroupCallOverflowArea.tsx
index 0bff0201e..4424c80eb 100644
--- a/ts/components/GroupCallOverflowArea.tsx
+++ b/ts/components/GroupCallOverflowArea.tsx
@@ -1,7 +1,7 @@
 // Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FC, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import React, { useRef, useState, useEffect } from 'react';
 import classNames from 'classnames';
 import type { VideoFrameSource } from 'ringrtc';
@@ -27,14 +27,14 @@ type PropsType = {
   remoteAudioLevels: Map<number, number>;
 };
 
-export const GroupCallOverflowArea: FC<PropsType> = ({
+export function GroupCallOverflowArea({
   getFrameBuffer,
   getGroupCallVideoFrameSource,
   i18n,
   onParticipantVisibilityChanged,
   overflowedParticipants,
   remoteAudioLevels,
-}) => {
+}: PropsType): JSX.Element | null {
   const overflowRef = useRef<HTMLDivElement | null>(null);
   const [overflowScrollTop, setOverflowScrollTop] = useState(0);
 
@@ -147,7 +147,7 @@ export const GroupCallOverflowArea: FC<PropsType> = ({
       />
     </div>
   );
-};
+}
 
 function OverflowAreaScrollMarker({
   i18n,
diff --git a/ts/components/GroupCallRemoteParticipant.stories.tsx b/ts/components/GroupCallRemoteParticipant.stories.tsx
index 082ead69a..6279945a5 100644
--- a/ts/components/GroupCallRemoteParticipant.stories.tsx
+++ b/ts/components/GroupCallRemoteParticipant.stories.tsx
@@ -67,57 +67,65 @@ export default {
   title: 'Components/GroupCallRemoteParticipant',
 };
 
-export const Default = (): JSX.Element => (
-  <GroupCallRemoteParticipant
-    {...createProps({
-      isInPip: false,
-      height: 120,
-      left: 0,
-      top: 0,
-      width: 120,
-    })}
-  />
-);
-
-export const Speaking = (): JSX.Element => (
-  <GroupCallRemoteParticipant
-    {...createProps(
-      {
+export function Default(): JSX.Element {
+  return (
+    <GroupCallRemoteParticipant
+      {...createProps({
         isInPip: false,
         height: 120,
         left: 0,
         top: 0,
         width: 120,
-        audioLevel: select('audioLevel', [0, 0.5, 1], 0.5),
-      },
-      { hasRemoteAudio: true }
-    )}
-  />
-);
+      })}
+    />
+  );
+}
 
-export const IsInPip = (): JSX.Element => (
-  <GroupCallRemoteParticipant
-    {...createProps({
-      isInPip: true,
-    })}
-  />
-);
+export function Speaking(): JSX.Element {
+  return (
+    <GroupCallRemoteParticipant
+      {...createProps(
+        {
+          isInPip: false,
+          height: 120,
+          left: 0,
+          top: 0,
+          width: 120,
+          audioLevel: select('audioLevel', [0, 0.5, 1], 0.5),
+        },
+        { hasRemoteAudio: true }
+      )}
+    />
+  );
+}
+
+export function IsInPip(): JSX.Element {
+  return (
+    <GroupCallRemoteParticipant
+      {...createProps({
+        isInPip: true,
+      })}
+    />
+  );
+}
 
 IsInPip.story = {
   name: 'isInPip',
 };
 
-export const Blocked = (): JSX.Element => (
-  <GroupCallRemoteParticipant
-    {...createProps(
-      {
-        isInPip: false,
-        height: 120,
-        left: 0,
-        top: 0,
-        width: 120,
-      },
-      { isBlocked: true }
-    )}
-  />
-);
+export function Blocked(): JSX.Element {
+  return (
+    <GroupCallRemoteParticipant
+      {...createProps(
+        {
+          isInPip: false,
+          height: 120,
+          left: 0,
+          top: 0,
+          width: 120,
+        },
+        { isBlocked: true }
+      )}
+    />
+  );
+}
diff --git a/ts/components/GroupCallRemoteParticipant.tsx b/ts/components/GroupCallRemoteParticipant.tsx
index 7f98fa3ad..085238909 100644
--- a/ts/components/GroupCallRemoteParticipant.tsx
+++ b/ts/components/GroupCallRemoteParticipant.tsx
@@ -55,7 +55,7 @@ export type PropsType = BasePropsType &
   (InPipPropsType | InOverflowAreaPropsType | InGridPropsType);
 
 export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
-  props => {
+  function GroupCallRemoteParticipantInner(props) {
     const {
       getFrameBuffer,
       getGroupCallVideoFrameSource,
diff --git a/ts/components/GroupCallRemoteParticipants.tsx b/ts/components/GroupCallRemoteParticipants.tsx
index 50d796f65..551839c1a 100644
--- a/ts/components/GroupCallRemoteParticipants.tsx
+++ b/ts/components/GroupCallRemoteParticipants.tsx
@@ -84,14 +84,14 @@ enum VideoRequestMode {
 //    "scalar": how much can we scale these boxes up while still fitting them on the
 //    screen? The biggest scalar wins as the "best arrangement".
 // 4. Lay out this arrangement on the screen.
-export const GroupCallRemoteParticipants: React.FC<PropsType> = ({
+export function GroupCallRemoteParticipants({
   getGroupCallVideoFrameSource,
   i18n,
   isInSpeakerView,
   remoteParticipants,
   setGroupCallVideoRequest,
   remoteAudioLevels,
-}) => {
+}: PropsType): JSX.Element {
   const [containerDimensions, setContainerDimensions] = useState<Dimensions>({
     width: 0,
     height: 0,
@@ -443,7 +443,7 @@ export const GroupCallRemoteParticipants: React.FC<PropsType> = ({
       )}
     </Measure>
   );
-};
+}
 
 // This function is only meant for use with `useInvisibleParticipants`. It helps avoid
 //   returning new set instances when the underlying values are equal.
diff --git a/ts/components/GroupDescriptionInput.stories.tsx b/ts/components/GroupDescriptionInput.stories.tsx
index 85cc3f969..390fcdd6e 100644
--- a/ts/components/GroupDescriptionInput.stories.tsx
+++ b/ts/components/GroupDescriptionInput.stories.tsx
@@ -14,13 +14,13 @@ export default {
   title: 'Components/GroupDescriptionInput',
 };
 
-const Wrapper = ({
+function Wrapper({
   disabled,
   startingValue = '',
 }: {
   disabled?: boolean;
   startingValue?: string;
-}) => {
+}) {
   const [value, setValue] = useState(startingValue);
 
   return (
@@ -31,14 +31,18 @@ const Wrapper = ({
       value={value}
     />
   );
-};
+}
 
-export const Default = (): JSX.Element => <Wrapper />;
+export function Default(): JSX.Element {
+  return <Wrapper />;
+}
 
-export const Disabled = (): JSX.Element => (
-  <>
-    <Wrapper disabled />
-    <br />
-    <Wrapper disabled startingValue="Has a value" />
-  </>
-);
+export function Disabled(): JSX.Element {
+  return (
+    <>
+      <Wrapper disabled />
+      <br />
+      <Wrapper disabled startingValue="Has a value" />
+    </>
+  );
+}
diff --git a/ts/components/GroupDescriptionInput.tsx b/ts/components/GroupDescriptionInput.tsx
index 4092a9566..c6860b717 100644
--- a/ts/components/GroupDescriptionInput.tsx
+++ b/ts/components/GroupDescriptionInput.tsx
@@ -14,7 +14,10 @@ type PropsType = {
 };
 
 export const GroupDescriptionInput = forwardRef<HTMLInputElement, PropsType>(
-  ({ i18n, disabled = false, onChangeValue, value }, ref) => {
+  function GroupDescriptionInput(
+    { i18n, disabled = false, onChangeValue, value },
+    ref
+  ) {
     return (
       <Input
         disabled={disabled}
diff --git a/ts/components/GroupDescriptionText.tsx b/ts/components/GroupDescriptionText.tsx
index c9b61310f..3940b7156 100644
--- a/ts/components/GroupDescriptionText.tsx
+++ b/ts/components/GroupDescriptionText.tsx
@@ -1,7 +1,6 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React from 'react';
 import type { RenderTextCallbackType } from '../types/Util';
 import { AddNewLines } from './conversation/AddNewLines';
@@ -20,6 +19,6 @@ const renderNonNewLine: RenderTextCallbackType = ({ key, text }) => (
   <Linkify key={key} text={text} renderNonLink={renderNonLink} />
 );
 
-export const GroupDescriptionText: FunctionComponent<PropsType> = ({
-  text,
-}) => <AddNewLines text={text} renderNonNewLine={renderNonNewLine} />;
+export function GroupDescriptionText({ text }: PropsType): JSX.Element {
+  return <AddNewLines text={text} renderNonNewLine={renderNonNewLine} />;
+}
diff --git a/ts/components/GroupDialog.tsx b/ts/components/GroupDialog.tsx
index 3643e754f..d458c85ae 100644
--- a/ts/components/GroupDialog.tsx
+++ b/ts/components/GroupDialog.tsx
@@ -85,11 +85,11 @@ type ParagraphPropsType = {
   children: ReactNode;
 };
 
-GroupDialog.Paragraph = ({
-  children,
-}: Readonly<ParagraphPropsType>): JSX.Element => (
-  <p className="module-GroupDialog__paragraph">{children}</p>
-);
+function Paragraph({ children }: Readonly<ParagraphPropsType>): JSX.Element {
+  return <p className="module-GroupDialog__paragraph">{children}</p>;
+}
+
+GroupDialog.Paragraph = Paragraph;
 
 type ContactsPropsType = {
   contacts: Array<ConversationType>;
@@ -98,38 +98,41 @@ type ContactsPropsType = {
   theme: ThemeType;
 };
 
-GroupDialog.Contacts = ({
+function Contacts({
   contacts,
   getPreferredBadge,
   i18n,
   theme,
-}: Readonly<ContactsPropsType>) => (
-  <ul className="module-GroupDialog__contacts">
-    {contacts.map(contact => (
-      <li key={contact.id} className="module-GroupDialog__contacts__contact">
-        <Avatar
-          acceptedMessageRequest={contact.acceptedMessageRequest}
-          avatarPath={contact.avatarPath}
-          badge={getPreferredBadge(contact.badges)}
-          color={contact.color}
-          conversationType={contact.type}
-          isMe={contact.isMe}
-          noteToSelf={contact.isMe}
-          theme={theme}
-          title={contact.title}
-          unblurredAvatarPath={contact.unblurredAvatarPath}
-          sharedGroupNames={contact.sharedGroupNames}
-          size={AvatarSize.TWENTY_EIGHT}
-          i18n={i18n}
-        />
-        <ContactName
-          module="module-GroupDialog__contacts__contact__name"
-          title={contact.title}
-        />
-      </li>
-    ))}
-  </ul>
-);
+}: Readonly<ContactsPropsType>): JSX.Element {
+  return (
+    <ul className="module-GroupDialog__contacts">
+      {contacts.map(contact => (
+        <li key={contact.id} className="module-GroupDialog__contacts__contact">
+          <Avatar
+            acceptedMessageRequest={contact.acceptedMessageRequest}
+            avatarPath={contact.avatarPath}
+            badge={getPreferredBadge(contact.badges)}
+            color={contact.color}
+            conversationType={contact.type}
+            isMe={contact.isMe}
+            noteToSelf={contact.isMe}
+            theme={theme}
+            title={contact.title}
+            unblurredAvatarPath={contact.unblurredAvatarPath}
+            sharedGroupNames={contact.sharedGroupNames}
+            size={AvatarSize.TWENTY_EIGHT}
+            i18n={i18n}
+          />
+          <ContactName
+            module="module-GroupDialog__contacts__contact__name"
+            title={contact.title}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+GroupDialog.Contacts = Contacts;
 
 function focusRef(el: HTMLElement | null) {
   if (el) {
diff --git a/ts/components/GroupTitleInput.stories.tsx b/ts/components/GroupTitleInput.stories.tsx
index d0ed4b6f4..af128f350 100644
--- a/ts/components/GroupTitleInput.stories.tsx
+++ b/ts/components/GroupTitleInput.stories.tsx
@@ -14,13 +14,13 @@ export default {
   title: 'Components/GroupTitleInput',
 };
 
-const Wrapper = ({
+function Wrapper({
   disabled,
   startingValue = '',
 }: {
   disabled?: boolean;
   startingValue?: string;
-}) => {
+}) {
   const [value, setValue] = useState(startingValue);
 
   return (
@@ -31,14 +31,18 @@ const Wrapper = ({
       value={value}
     />
   );
-};
+}
 
-export const Default = (): JSX.Element => <Wrapper />;
+export function Default(): JSX.Element {
+  return <Wrapper />;
+}
 
-export const Disabled = (): JSX.Element => (
-  <>
-    <Wrapper disabled />
-    <br />
-    <Wrapper disabled startingValue="Has a value" />
-  </>
-);
+export function Disabled(): JSX.Element {
+  return (
+    <>
+      <Wrapper disabled />
+      <br />
+      <Wrapper disabled startingValue="Has a value" />
+    </>
+  );
+}
diff --git a/ts/components/GroupTitleInput.tsx b/ts/components/GroupTitleInput.tsx
index f200c1394..748159fab 100644
--- a/ts/components/GroupTitleInput.tsx
+++ b/ts/components/GroupTitleInput.tsx
@@ -14,7 +14,10 @@ type PropsType = {
 };
 
 export const GroupTitleInput = forwardRef<HTMLInputElement, PropsType>(
-  ({ i18n, disabled = false, onChangeValue, value }, ref) => {
+  function GroupTitleInputInner(
+    { i18n, disabled = false, onChangeValue, value },
+    ref
+  ) {
     return (
       <Input
         disabled={disabled}
diff --git a/ts/components/GroupV1MigrationDialog.stories.tsx b/ts/components/GroupV1MigrationDialog.stories.tsx
index 66878da54..97f6ba25e 100644
--- a/ts/components/GroupV1MigrationDialog.stories.tsx
+++ b/ts/components/GroupV1MigrationDialog.stories.tsx
@@ -49,15 +49,15 @@ export default {
   title: 'Components/GroupV1MigrationDialog',
 };
 
-export const NotYetMigratedBasic = (): JSX.Element => {
+export function NotYetMigratedBasic(): JSX.Element {
   return <GroupV1MigrationDialog {...createProps()} />;
-};
+}
 
 NotYetMigratedBasic.story = {
   name: 'Not yet migrated, basic',
 };
 
-export const MigratedBasic = (): JSX.Element => {
+export function MigratedBasic(): JSX.Element {
   return (
     <GroupV1MigrationDialog
       {...createProps({
@@ -65,13 +65,13 @@ export const MigratedBasic = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 MigratedBasic.story = {
   name: 'Migrated, basic',
 };
 
-export const MigratedYouAreInvited = (): JSX.Element => {
+export function MigratedYouAreInvited(): JSX.Element {
   return (
     <GroupV1MigrationDialog
       {...createProps({
@@ -80,29 +80,28 @@ export const MigratedYouAreInvited = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 MigratedYouAreInvited.story = {
   name: 'Migrated, you are invited',
 };
 
-export const NotYetMigratedMultipleDroppedAndInvitedMembers =
-  (): JSX.Element => {
-    return (
-      <GroupV1MigrationDialog
-        {...createProps({
-          droppedMembers: [contact3, contact1, contact2],
-          invitedMembers: [contact2, contact3, contact1],
-        })}
-      />
-    );
-  };
+export function NotYetMigratedMultipleDroppedAndInvitedMembers(): JSX.Element {
+  return (
+    <GroupV1MigrationDialog
+      {...createProps({
+        droppedMembers: [contact3, contact1, contact2],
+        invitedMembers: [contact2, contact3, contact1],
+      })}
+    />
+  );
+}
 
 NotYetMigratedMultipleDroppedAndInvitedMembers.story = {
   name: 'Not yet migrated, multiple dropped and invited members',
 };
 
-export const NotYetMigratedNoMembers = (): JSX.Element => {
+export function NotYetMigratedNoMembers(): JSX.Element {
   return (
     <GroupV1MigrationDialog
       {...createProps({
@@ -111,13 +110,13 @@ export const NotYetMigratedNoMembers = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 NotYetMigratedNoMembers.story = {
   name: 'Not yet migrated, no members',
 };
 
-export const NotYetMigratedJustDroppedMember = (): JSX.Element => {
+export function NotYetMigratedJustDroppedMember(): JSX.Element {
   return (
     <GroupV1MigrationDialog
       {...createProps({
@@ -125,7 +124,7 @@ export const NotYetMigratedJustDroppedMember = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 NotYetMigratedJustDroppedMember.story = {
   name: 'Not yet migrated, just dropped member',
diff --git a/ts/components/GroupV1MigrationDialog.tsx b/ts/components/GroupV1MigrationDialog.tsx
index 96ae9daba..41623fb97 100644
--- a/ts/components/GroupV1MigrationDialog.tsx
+++ b/ts/components/GroupV1MigrationDialog.tsx
@@ -28,7 +28,7 @@ export type HousekeepingPropsType = {
 export type PropsType = DataPropsType & HousekeepingPropsType;
 
 export const GroupV1MigrationDialog: React.FunctionComponent<PropsType> =
-  React.memo((props: PropsType) => {
+  React.memo(function GroupV1MigrationDialogInner(props: PropsType) {
     const {
       areWeInvited,
       droppedMembers,
diff --git a/ts/components/GroupV2JoinDialog.stories.tsx b/ts/components/GroupV2JoinDialog.stories.tsx
index 5817056b6..ab0515616 100644
--- a/ts/components/GroupV2JoinDialog.stories.tsx
+++ b/ts/components/GroupV2JoinDialog.stories.tsx
@@ -30,11 +30,11 @@ export default {
   title: 'Components/GroupV2JoinDialog',
 };
 
-export const Basic = (): JSX.Element => {
+export function Basic(): JSX.Element {
   return <GroupV2JoinDialog {...createProps()} />;
-};
+}
 
-export const ApprovalRequired = (): JSX.Element => {
+export function ApprovalRequired(): JSX.Element {
   return (
     <GroupV2JoinDialog
       {...createProps({
@@ -43,13 +43,13 @@ export const ApprovalRequired = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 ApprovalRequired.story = {
   name: 'Approval required',
 };
 
-export const WithAvatar = (): JSX.Element => {
+export function WithAvatar(): JSX.Element {
   return (
     <GroupV2JoinDialog
       {...createProps({
@@ -60,13 +60,13 @@ export const WithAvatar = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 WithAvatar.story = {
   name: 'With avatar',
 };
 
-export const WithOneMember = (): JSX.Element => {
+export function WithOneMember(): JSX.Element {
   return (
     <GroupV2JoinDialog
       {...createProps({
@@ -75,13 +75,13 @@ export const WithOneMember = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 WithOneMember.story = {
   name: 'With one member',
 };
 
-export const AvatarLoadingState = (): JSX.Element => {
+export function AvatarLoadingState(): JSX.Element {
   return (
     <GroupV2JoinDialog
       {...createProps({
@@ -92,13 +92,13 @@ export const AvatarLoadingState = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 AvatarLoadingState.story = {
   name: 'Avatar loading state',
 };
 
-export const Full = (): JSX.Element => {
+export function Full(): JSX.Element {
   return (
     <GroupV2JoinDialog
       {...createProps({
@@ -111,4 +111,4 @@ export const Full = (): JSX.Element => {
       })}
     />
   );
-};
+}
diff --git a/ts/components/GroupV2JoinDialog.tsx b/ts/components/GroupV2JoinDialog.tsx
index 4cba90ee5..90e5a9655 100644
--- a/ts/components/GroupV2JoinDialog.tsx
+++ b/ts/components/GroupV2JoinDialog.tsx
@@ -30,7 +30,9 @@ function focusRef(el: HTMLElement | null) {
   }
 }
 
-export const GroupV2JoinDialog = React.memo((props: PropsType) => {
+export const GroupV2JoinDialog = React.memo(function GroupV2JoinDialogInner(
+  props: PropsType
+) {
   const [isWorking, setIsWorking] = React.useState(false);
   const [isJoining, setIsJoining] = React.useState(false);
   const {
diff --git a/ts/components/IdenticonSVG.stories.tsx b/ts/components/IdenticonSVG.stories.tsx
index 61cf0bcb2..7c564b77e 100644
--- a/ts/components/IdenticonSVG.stories.tsx
+++ b/ts/components/IdenticonSVG.stories.tsx
@@ -10,7 +10,7 @@ export default {
   title: 'Components/IdenticonSVG',
 };
 
-export const AllColors = (): JSX.Element => {
+export function AllColors(): JSX.Element {
   const stories: Array<JSX.Element> = [];
 
   AvatarColorMap.forEach(value =>
@@ -24,4 +24,4 @@ export const AllColors = (): JSX.Element => {
   );
 
   return <>{stories}</>;
-};
+}
diff --git a/ts/components/InContactsIcon.stories.tsx b/ts/components/InContactsIcon.stories.tsx
index bfe5bc28c..5c5acb632 100644
--- a/ts/components/InContactsIcon.stories.tsx
+++ b/ts/components/InContactsIcon.stories.tsx
@@ -13,6 +13,6 @@ export default {
   title: 'Components/InContactsIcon',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return <InContactsIcon i18n={i18n} />;
-};
+}
diff --git a/ts/components/InContactsIcon.tsx b/ts/components/InContactsIcon.tsx
index 42e9b3e2b..7edc91888 100644
--- a/ts/components/InContactsIcon.tsx
+++ b/ts/components/InContactsIcon.tsx
@@ -13,7 +13,7 @@ type PropsType = {
   i18n: LocalizerType;
 };
 
-export const InContactsIcon = (props: PropsType): JSX.Element => {
+export function InContactsIcon(props: PropsType): JSX.Element {
   const { className, i18n, tooltipContainerRef } = props;
 
   /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
@@ -38,4 +38,4 @@ export const InContactsIcon = (props: PropsType): JSX.Element => {
     </Tooltip>
   );
   /* eslint-enable jsx-a11y/no-noninteractive-tabindex */
-};
+}
diff --git a/ts/components/Inbox.tsx b/ts/components/Inbox.tsx
index d45e53fad..cac22b225 100644
--- a/ts/components/Inbox.tsx
+++ b/ts/components/Inbox.tsx
@@ -30,7 +30,7 @@ export type PropsType = {
   showWhatsNewModal: () => unknown;
 };
 
-export const Inbox = ({
+export function Inbox({
   hasInitialLoadCompleted,
   i18n,
   isCustomizingPreferredReactions,
@@ -41,7 +41,7 @@ export const Inbox = ({
   selectedMessageSource,
   showConversation,
   showWhatsNewModal,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [loadingMessageCount, setLoadingMessageCount] = useState(0);
   const [internalHasInitialLoadCompleted, setInternalHasInitialLoadCompleted] =
     useState(hasInitialLoadCompleted);
@@ -250,4 +250,4 @@ export const Inbox = ({
       {activeModal}
     </>
   );
-};
+}
diff --git a/ts/components/IncomingCallBar.stories.tsx b/ts/components/IncomingCallBar.stories.tsx
index 13808d688..e07c36425 100644
--- a/ts/components/IncomingCallBar.stories.tsx
+++ b/ts/components/IncomingCallBar.stories.tsx
@@ -55,109 +55,123 @@ export default {
   title: 'Components/IncomingCallBar',
 };
 
-export const IncomingDirectCallVideo = (): JSX.Element => (
-  <IncomingCallBar
-    {...commonProps}
-    conversation={directConversation}
-    callMode={CallMode.Direct}
-    isVideoCall
-  />
-);
+export function IncomingDirectCallVideo(): JSX.Element {
+  return (
+    <IncomingCallBar
+      {...commonProps}
+      conversation={directConversation}
+      callMode={CallMode.Direct}
+      isVideoCall
+    />
+  );
+}
 
 IncomingDirectCallVideo.story = {
   name: 'Incoming direct call (video)',
 };
 
-export const IncomingDirectCallAudio = (): JSX.Element => (
-  <IncomingCallBar
-    {...commonProps}
-    conversation={directConversation}
-    callMode={CallMode.Direct}
-    isVideoCall={false}
-  />
-);
+export function IncomingDirectCallAudio(): JSX.Element {
+  return (
+    <IncomingCallBar
+      {...commonProps}
+      conversation={directConversation}
+      callMode={CallMode.Direct}
+      isVideoCall={false}
+    />
+  );
+}
 
 IncomingDirectCallAudio.story = {
   name: 'Incoming direct call (audio)',
 };
 
-export const IncomingGroupCallOnlyCallingYou = (): JSX.Element => (
-  <IncomingCallBar
-    {...commonProps}
-    conversation={groupConversation}
-    callMode={CallMode.Group}
-    otherMembersRung={[]}
-    ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
-  />
-);
+export function IncomingGroupCallOnlyCallingYou(): JSX.Element {
+  return (
+    <IncomingCallBar
+      {...commonProps}
+      conversation={groupConversation}
+      callMode={CallMode.Group}
+      otherMembersRung={[]}
+      ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
+    />
+  );
+}
 
 IncomingGroupCallOnlyCallingYou.story = {
   name: 'Incoming group call (only calling you)',
 };
 
-export const IncomingGroupCallCallingYouAnd1Other = (): JSX.Element => (
-  <IncomingCallBar
-    {...commonProps}
-    conversation={groupConversation}
-    callMode={CallMode.Group}
-    otherMembersRung={[{ firstName: 'Morty', title: 'Morty Smith' }]}
-    ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
-  />
-);
+export function IncomingGroupCallCallingYouAnd1Other(): JSX.Element {
+  return (
+    <IncomingCallBar
+      {...commonProps}
+      conversation={groupConversation}
+      callMode={CallMode.Group}
+      otherMembersRung={[{ firstName: 'Morty', title: 'Morty Smith' }]}
+      ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
+    />
+  );
+}
 
 IncomingGroupCallCallingYouAnd1Other.story = {
   name: 'Incoming group call (calling you and 1 other)',
 };
 
-export const IncomingGroupCallCallingYouAnd2Others = (): JSX.Element => (
-  <IncomingCallBar
-    {...commonProps}
-    conversation={groupConversation}
-    callMode={CallMode.Group}
-    otherMembersRung={[
-      { firstName: 'Morty', title: 'Morty Smith' },
-      { firstName: 'Summer', title: 'Summer Smith' },
-    ]}
-    ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
-  />
-);
+export function IncomingGroupCallCallingYouAnd2Others(): JSX.Element {
+  return (
+    <IncomingCallBar
+      {...commonProps}
+      conversation={groupConversation}
+      callMode={CallMode.Group}
+      otherMembersRung={[
+        { firstName: 'Morty', title: 'Morty Smith' },
+        { firstName: 'Summer', title: 'Summer Smith' },
+      ]}
+      ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
+    />
+  );
+}
 
 IncomingGroupCallCallingYouAnd2Others.story = {
   name: 'Incoming group call (calling you and 2 others)',
 };
 
-export const IncomingGroupCallCallingYouAnd3Others = (): JSX.Element => (
-  <IncomingCallBar
-    {...commonProps}
-    conversation={groupConversation}
-    callMode={CallMode.Group}
-    otherMembersRung={[
-      { firstName: 'Morty', title: 'Morty Smith' },
-      { firstName: 'Summer', title: 'Summer Smith' },
-      { firstName: 'Beth', title: 'Beth Smith' },
-    ]}
-    ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
-  />
-);
+export function IncomingGroupCallCallingYouAnd3Others(): JSX.Element {
+  return (
+    <IncomingCallBar
+      {...commonProps}
+      conversation={groupConversation}
+      callMode={CallMode.Group}
+      otherMembersRung={[
+        { firstName: 'Morty', title: 'Morty Smith' },
+        { firstName: 'Summer', title: 'Summer Smith' },
+        { firstName: 'Beth', title: 'Beth Smith' },
+      ]}
+      ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
+    />
+  );
+}
 
 IncomingGroupCallCallingYouAnd3Others.story = {
   name: 'Incoming group call (calling you and 3 others)',
 };
 
-export const IncomingGroupCallCallingYouAnd4Others = (): JSX.Element => (
-  <IncomingCallBar
-    {...commonProps}
-    conversation={groupConversation}
-    callMode={CallMode.Group}
-    otherMembersRung={[
-      { firstName: 'Morty', title: 'Morty Smith' },
-      { firstName: 'Summer', title: 'Summer Smith' },
-      { firstName: 'Beth', title: 'Beth Sanchez' },
-      { firstName: 'Jerry', title: 'Beth Smith' },
-    ]}
-    ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
-  />
-);
+export function IncomingGroupCallCallingYouAnd4Others(): JSX.Element {
+  return (
+    <IncomingCallBar
+      {...commonProps}
+      conversation={groupConversation}
+      callMode={CallMode.Group}
+      otherMembersRung={[
+        { firstName: 'Morty', title: 'Morty Smith' },
+        { firstName: 'Summer', title: 'Summer Smith' },
+        { firstName: 'Beth', title: 'Beth Sanchez' },
+        { firstName: 'Jerry', title: 'Beth Smith' },
+      ]}
+      ringer={{ firstName: 'Rick', title: 'Rick Sanchez' }}
+    />
+  );
+}
 
 IncomingGroupCallCallingYouAnd4Others.story = {
   name: 'Incoming group call (calling you and 4 others)',
diff --git a/ts/components/IncomingCallBar.tsx b/ts/components/IncomingCallBar.tsx
index 6832c6c24..297582a60 100644
--- a/ts/components/IncomingCallBar.tsx
+++ b/ts/components/IncomingCallBar.tsx
@@ -61,12 +61,12 @@ type CallButtonProps = {
   onClick: () => void;
 };
 
-const CallButton = ({
+function CallButton({
   classSuffix,
   onClick,
   tabIndex,
   tooltipContent,
-}: CallButtonProps): JSX.Element => {
+}: CallButtonProps): JSX.Element {
   return (
     <Tooltip content={tooltipContent} theme={Theme.Dark}>
       <button
@@ -80,9 +80,9 @@ const CallButton = ({
       </button>
     </Tooltip>
   );
-};
+}
 
-const GroupCallMessage = ({
+function GroupCallMessage({
   i18n,
   otherMembersRung,
   ringer,
@@ -90,7 +90,7 @@ const GroupCallMessage = ({
   i18n: LocalizerType;
   otherMembersRung: Array<Pick<ConversationType, 'firstName' | 'title'>>;
   ringer: Pick<ConversationType, 'firstName' | 'title'>;
-}>): JSX.Element => {
+}>): JSX.Element {
   // As an optimization, we only process the first two names.
   const [first, second] = otherMembersRung
     .slice(0, 2)
@@ -155,9 +155,9 @@ const GroupCallMessage = ({
         />
       );
   }
-};
+}
 
-export const IncomingCallBar = (props: PropsType): JSX.Element | null => {
+export function IncomingCallBar(props: PropsType): JSX.Element | null {
   const {
     acceptCall,
     bounceAppIconStart,
@@ -309,4 +309,4 @@ export const IncomingCallBar = (props: PropsType): JSX.Element | null => {
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/Input.stories.tsx b/ts/components/Input.stories.tsx
index 6dd02e870..c8c68bb6d 100644
--- a/ts/components/Input.stories.tsx
+++ b/ts/components/Input.stories.tsx
@@ -41,91 +41,107 @@ function Controller(props: PropsType): JSX.Element {
   return <Input {...props} onChange={setValue} value={value} />;
 }
 
-export const Simple = (): JSX.Element => <Controller {...createProps()} />;
+export function Simple(): JSX.Element {
+  return <Controller {...createProps()} />;
+}
 
-export const HasClearButton = (): JSX.Element => (
-  <Controller
-    {...createProps({
-      hasClearButton: true,
-    })}
-  />
-);
+export function HasClearButton(): JSX.Element {
+  return (
+    <Controller
+      {...createProps({
+        hasClearButton: true,
+      })}
+    />
+  );
+}
 
 HasClearButton.story = {
   name: 'hasClearButton',
 };
 
-export const CharacterCount = (): JSX.Element => (
-  <Controller
-    {...createProps({
-      maxLengthCount: 10,
-    })}
-  />
-);
+export function CharacterCount(): JSX.Element {
+  return (
+    <Controller
+      {...createProps({
+        maxLengthCount: 10,
+      })}
+    />
+  );
+}
 
 CharacterCount.story = {
   name: 'character count',
 };
 
-export const CharacterCountCustomizableShow = (): JSX.Element => (
-  <Controller
-    {...createProps({
-      maxLengthCount: 64,
-      whenToShowRemainingCount: 32,
-    })}
-  />
-);
+export function CharacterCountCustomizableShow(): JSX.Element {
+  return (
+    <Controller
+      {...createProps({
+        maxLengthCount: 64,
+        whenToShowRemainingCount: 32,
+      })}
+    />
+  );
+}
 
 CharacterCountCustomizableShow.story = {
   name: 'character count (customizable show)',
 };
 
-export const Expandable = (): JSX.Element => (
-  <Controller
-    {...createProps({
-      expandable: true,
-    })}
-  />
-);
+export function Expandable(): JSX.Element {
+  return (
+    <Controller
+      {...createProps({
+        expandable: true,
+      })}
+    />
+  );
+}
 
 Expandable.story = {
   name: 'expandable',
 };
 
-export const ExpandableWCount = (): JSX.Element => (
-  <Controller
-    {...createProps({
-      expandable: true,
-      hasClearButton: true,
-      maxLengthCount: 140,
-      whenToShowRemainingCount: 0,
-    })}
-  />
-);
+export function ExpandableWCount(): JSX.Element {
+  return (
+    <Controller
+      {...createProps({
+        expandable: true,
+        hasClearButton: true,
+        maxLengthCount: 140,
+        whenToShowRemainingCount: 0,
+      })}
+    />
+  );
+}
 
 ExpandableWCount.story = {
   name: 'expandable w/count',
 };
 
-export const Disabled = (): JSX.Element => (
-  <Controller
-    {...createProps({
-      disabled: true,
-    })}
-  />
-);
+export function Disabled(): JSX.Element {
+  return (
+    <Controller
+      {...createProps({
+        disabled: true,
+      })}
+    />
+  );
+}
 
 Disabled.story = {
   name: 'disabled',
 };
 
-export const SpellcheckDisabled = (): JSX.Element => (
-  <Controller
-    {...createProps({
-      disableSpellcheck: true,
-    })}
-  />
-);
+export function SpellcheckDisabled(): JSX.Element {
+  return (
+    <Controller
+      {...createProps({
+        disableSpellcheck: true,
+      })}
+    />
+  );
+}
 
 SpellcheckDisabled.story = {
   name: 'spellcheck disabled',
diff --git a/ts/components/Input.tsx b/ts/components/Input.tsx
index 08227666b..6b679d83c 100644
--- a/ts/components/Input.tsx
+++ b/ts/components/Input.tsx
@@ -57,218 +57,213 @@ export type PropsType = {
 export const Input = forwardRef<
   HTMLInputElement | HTMLTextAreaElement,
   PropsType
->(
-  (
-    {
-      countBytes = byteLength,
-      countLength = grapheme.count,
-      disabled,
-      disableSpellcheck,
-      expandable,
-      hasClearButton,
-      i18n,
-      icon,
-      maxByteCount = 0,
-      maxLengthCount = 0,
-      moduleClassName,
-      onChange,
-      onEnter,
-      placeholder,
-      value = '',
-      whenToShowRemainingCount = Infinity,
-      children,
+>(function InputInner(
+  {
+    countBytes = byteLength,
+    countLength = grapheme.count,
+    disabled,
+    disableSpellcheck,
+    expandable,
+    hasClearButton,
+    i18n,
+    icon,
+    maxByteCount = 0,
+    maxLengthCount = 0,
+    moduleClassName,
+    onChange,
+    onEnter,
+    placeholder,
+    value = '',
+    whenToShowRemainingCount = Infinity,
+    children,
+  },
+  ref
+) {
+  const innerRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
+  const valueOnKeydownRef = useRef<string>(value);
+  const selectionStartOnKeydownRef = useRef<number>(value.length);
+  const [isLarge, setIsLarge] = useState(false);
+  const refMerger = useRefMerger();
+
+  const maybeSetLarge = useCallback(() => {
+    if (!expandable) {
+      return;
+    }
+
+    const inputEl = innerRef.current;
+    if (!inputEl) {
+      return;
+    }
+
+    if (
+      inputEl.scrollHeight > inputEl.clientHeight ||
+      inputEl.scrollWidth > inputEl.clientWidth
+    ) {
+      setIsLarge(true);
+    }
+  }, [expandable]);
+
+  const handleKeyDown = useCallback(
+    event => {
+      if (onEnter && event.key === 'Enter') {
+        onEnter();
+      }
+
+      const inputEl = innerRef.current;
+      if (!inputEl) {
+        return;
+      }
+
+      valueOnKeydownRef.current = inputEl.value;
+      selectionStartOnKeydownRef.current = inputEl.selectionStart || 0;
     },
-    ref
-  ) => {
-    const innerRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(
-      null
-    );
-    const valueOnKeydownRef = useRef<string>(value);
-    const selectionStartOnKeydownRef = useRef<number>(value.length);
-    const [isLarge, setIsLarge] = useState(false);
-    const refMerger = useRefMerger();
+    [onEnter]
+  );
 
-    const maybeSetLarge = useCallback(() => {
-      if (!expandable) {
-        return;
-      }
+  const handleChange = useCallback(() => {
+    const inputEl = innerRef.current;
+    if (!inputEl) {
+      return;
+    }
 
+    const newValue = inputEl.value;
+
+    const newLengthCount = maxLengthCount ? countLength(newValue) : 0;
+    const newByteCount = maxByteCount ? countBytes(newValue) : 0;
+
+    if (newLengthCount <= maxLengthCount && newByteCount <= maxByteCount) {
+      onChange(newValue);
+    } else {
+      inputEl.value = valueOnKeydownRef.current;
+      inputEl.selectionStart = selectionStartOnKeydownRef.current;
+      inputEl.selectionEnd = selectionStartOnKeydownRef.current;
+    }
+
+    maybeSetLarge();
+  }, [
+    countLength,
+    countBytes,
+    maxLengthCount,
+    maxByteCount,
+    maybeSetLarge,
+    onChange,
+  ]);
+
+  const handlePaste = useCallback(
+    (event: ClipboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       const inputEl = innerRef.current;
-      if (!inputEl) {
+      if (!inputEl || !maxLengthCount || !maxByteCount) {
         return;
       }
 
-      if (
-        inputEl.scrollHeight > inputEl.clientHeight ||
-        inputEl.scrollWidth > inputEl.clientWidth
-      ) {
-        setIsLarge(true);
-      }
-    }, [expandable]);
+      const selectionStart = inputEl.selectionStart || 0;
+      const selectionEnd = inputEl.selectionEnd || inputEl.selectionStart || 0;
+      const textBeforeSelection = value.slice(0, selectionStart);
+      const textAfterSelection = value.slice(selectionEnd);
 
-    const handleKeyDown = useCallback(
-      event => {
-        if (onEnter && event.key === 'Enter') {
-          onEnter();
-        }
+      const pastedText = event.clipboardData.getData('Text');
 
-        const inputEl = innerRef.current;
-        if (!inputEl) {
-          return;
-        }
+      const newLengthCount =
+        countLength(textBeforeSelection) +
+        countLength(pastedText) +
+        countLength(textAfterSelection);
+      const newByteCount =
+        countBytes(textBeforeSelection) +
+        countBytes(pastedText) +
+        countBytes(textAfterSelection);
 
-        valueOnKeydownRef.current = inputEl.value;
-        selectionStartOnKeydownRef.current = inputEl.selectionStart || 0;
-      },
-      [onEnter]
-    );
-
-    const handleChange = useCallback(() => {
-      const inputEl = innerRef.current;
-      if (!inputEl) {
-        return;
-      }
-
-      const newValue = inputEl.value;
-
-      const newLengthCount = maxLengthCount ? countLength(newValue) : 0;
-      const newByteCount = maxByteCount ? countBytes(newValue) : 0;
-
-      if (newLengthCount <= maxLengthCount && newByteCount <= maxByteCount) {
-        onChange(newValue);
-      } else {
-        inputEl.value = valueOnKeydownRef.current;
-        inputEl.selectionStart = selectionStartOnKeydownRef.current;
-        inputEl.selectionEnd = selectionStartOnKeydownRef.current;
+      if (newLengthCount > maxLengthCount || newByteCount > maxByteCount) {
+        event.preventDefault();
       }
 
       maybeSetLarge();
-    }, [
+    },
+    [
       countLength,
       countBytes,
       maxLengthCount,
       maxByteCount,
       maybeSetLarge,
-      onChange,
-    ]);
-
-    const handlePaste = useCallback(
-      (event: ClipboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        const inputEl = innerRef.current;
-        if (!inputEl || !maxLengthCount || !maxByteCount) {
-          return;
-        }
-
-        const selectionStart = inputEl.selectionStart || 0;
-        const selectionEnd =
-          inputEl.selectionEnd || inputEl.selectionStart || 0;
-        const textBeforeSelection = value.slice(0, selectionStart);
-        const textAfterSelection = value.slice(selectionEnd);
-
-        const pastedText = event.clipboardData.getData('Text');
-
-        const newLengthCount =
-          countLength(textBeforeSelection) +
-          countLength(pastedText) +
-          countLength(textAfterSelection);
-        const newByteCount =
-          countBytes(textBeforeSelection) +
-          countBytes(pastedText) +
-          countBytes(textAfterSelection);
-
-        if (newLengthCount > maxLengthCount || newByteCount > maxByteCount) {
-          event.preventDefault();
-        }
-
-        maybeSetLarge();
-      },
-      [
-        countLength,
-        countBytes,
-        maxLengthCount,
-        maxByteCount,
-        maybeSetLarge,
-        value,
-      ]
-    );
-
-    useEffect(() => {
-      maybeSetLarge();
-    }, [maybeSetLarge]);
-
-    const lengthCount = maxLengthCount ? countLength(value) : -1;
-    const getClassName = getClassNamesFor('Input', moduleClassName);
-
-    const inputProps = {
-      className: classNames(
-        getClassName('__input'),
-        icon && getClassName('__input--with-icon'),
-        isLarge && getClassName('__input--large'),
-        expandable && getClassName('__input--expandable')
-      ),
-      disabled: Boolean(disabled),
-      spellCheck: !disableSpellcheck,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      onPaste: handlePaste,
-      placeholder,
-      ref: refMerger<HTMLInputElement | HTMLTextAreaElement | null>(
-        ref,
-        innerRef
-      ),
-      type: 'text',
       value,
-    };
+    ]
+  );
 
-    const clearButtonElement =
-      hasClearButton && value ? (
-        <button
-          tabIndex={-1}
-          className={getClassName('__clear-icon')}
-          onClick={() => onChange('')}
-          type="button"
-          aria-label={i18n('cancel')}
-        />
-      ) : null;
+  useEffect(() => {
+    maybeSetLarge();
+  }, [maybeSetLarge]);
 
-    const lengthCountElement = lengthCount >= whenToShowRemainingCount && (
-      <div className={getClassName('__remaining-count')}>
-        {maxLengthCount - lengthCount}
-      </div>
-    );
+  const lengthCount = maxLengthCount ? countLength(value) : -1;
+  const getClassName = getClassNamesFor('Input', moduleClassName);
 
-    return (
-      <div
-        className={classNames(
-          getClassName('__container'),
-          expandable && getClassName('__container--expandable'),
-          disabled && getClassName('__container--disabled')
-        )}
-      >
-        {icon ? <div className={getClassName('__icon')}>{icon}</div> : null}
-        {expandable ? (
-          <textarea rows={1} {...inputProps} />
-        ) : (
-          <input {...inputProps} />
-        )}
-        {isLarge ? (
-          <>
-            <div className={getClassName('__controls')}>
-              {clearButtonElement}
-              {children}
-            </div>
-            <div className={getClassName('__remaining-count--large')}>
-              {lengthCountElement}
-            </div>
-          </>
-        ) : (
+  const inputProps = {
+    className: classNames(
+      getClassName('__input'),
+      icon && getClassName('__input--with-icon'),
+      isLarge && getClassName('__input--large'),
+      expandable && getClassName('__input--expandable')
+    ),
+    disabled: Boolean(disabled),
+    spellCheck: !disableSpellcheck,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onPaste: handlePaste,
+    placeholder,
+    ref: refMerger<HTMLInputElement | HTMLTextAreaElement | null>(
+      ref,
+      innerRef
+    ),
+    type: 'text',
+    value,
+  };
+
+  const clearButtonElement =
+    hasClearButton && value ? (
+      <button
+        tabIndex={-1}
+        className={getClassName('__clear-icon')}
+        onClick={() => onChange('')}
+        type="button"
+        aria-label={i18n('cancel')}
+      />
+    ) : null;
+
+  const lengthCountElement = lengthCount >= whenToShowRemainingCount && (
+    <div className={getClassName('__remaining-count')}>
+      {maxLengthCount - lengthCount}
+    </div>
+  );
+
+  return (
+    <div
+      className={classNames(
+        getClassName('__container'),
+        expandable && getClassName('__container--expandable'),
+        disabled && getClassName('__container--disabled')
+      )}
+    >
+      {icon ? <div className={getClassName('__icon')}>{icon}</div> : null}
+      {expandable ? (
+        <textarea rows={1} {...inputProps} />
+      ) : (
+        <input {...inputProps} />
+      )}
+      {isLarge ? (
+        <>
           <div className={getClassName('__controls')}>
-            {lengthCountElement}
             {clearButtonElement}
             {children}
           </div>
-        )}
-      </div>
-    );
-  }
-);
+          <div className={getClassName('__remaining-count--large')}>
+            {lengthCountElement}
+          </div>
+        </>
+      ) : (
+        <div className={getClassName('__controls')}>
+          {lengthCountElement}
+          {clearButtonElement}
+          {children}
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/ts/components/InstallScreen.tsx b/ts/components/InstallScreen.tsx
index dd7f12221..6a1f7460c 100644
--- a/ts/components/InstallScreen.tsx
+++ b/ts/components/InstallScreen.tsx
@@ -19,7 +19,7 @@ export enum InstallScreenStep {
 
 // We can't always use destructuring assignment because of the complexity of this props
 //   type.
-/* eslint-disable react/destructuring-assignment */
+
 type PropsType =
   | {
       step: InstallScreenStep.Error;
diff --git a/ts/components/Intl.stories.tsx b/ts/components/Intl.stories.tsx
index ff57e7e06..cf3cbba3d 100644
--- a/ts/components/Intl.stories.tsx
+++ b/ts/components/Intl.stories.tsx
@@ -23,6 +23,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   renderText: overrideProps.renderText,
 });
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<Props> = args => <Intl {...args} />;
 
 export const NoReplacements = Template.bind({});
diff --git a/ts/components/LeftPane.stories.tsx b/ts/components/LeftPane.stories.tsx
index 67d9483ad..ff3a37241 100644
--- a/ts/components/LeftPane.stories.tsx
+++ b/ts/components/LeftPane.stories.tsx
@@ -201,248 +201,272 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => {
   };
 };
 
-export const InboxNoConversations = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Inbox,
-        pinnedConversations: [],
-        conversations: [],
-        archivedConversations: [],
-        isAboutToSearchInAConversation: false,
-      },
-    })}
-  />
-);
+export function InboxNoConversations(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Inbox,
+          pinnedConversations: [],
+          conversations: [],
+          archivedConversations: [],
+          isAboutToSearchInAConversation: false,
+        },
+      })}
+    />
+  );
+}
 
 InboxNoConversations.story = {
   name: 'Inbox: no conversations',
 };
 
-export const InboxOnlyPinnedConversations = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Inbox,
-        pinnedConversations,
-        conversations: [],
-        archivedConversations: [],
-        isAboutToSearchInAConversation: false,
-      },
-    })}
-  />
-);
+export function InboxOnlyPinnedConversations(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Inbox,
+          pinnedConversations,
+          conversations: [],
+          archivedConversations: [],
+          isAboutToSearchInAConversation: false,
+        },
+      })}
+    />
+  );
+}
 
 InboxOnlyPinnedConversations.story = {
   name: 'Inbox: only pinned conversations',
 };
 
-export const InboxOnlyNonPinnedConversations = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Inbox,
-        pinnedConversations: [],
-        conversations: defaultConversations,
-        archivedConversations: [],
-        isAboutToSearchInAConversation: false,
-      },
-    })}
-  />
-);
+export function InboxOnlyNonPinnedConversations(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Inbox,
+          pinnedConversations: [],
+          conversations: defaultConversations,
+          archivedConversations: [],
+          isAboutToSearchInAConversation: false,
+        },
+      })}
+    />
+  );
+}
 
 InboxOnlyNonPinnedConversations.story = {
   name: 'Inbox: only non-pinned conversations',
 };
 
-export const InboxOnlyArchivedConversations = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Inbox,
-        pinnedConversations: [],
-        conversations: [],
-        archivedConversations: defaultArchivedConversations,
-        isAboutToSearchInAConversation: false,
-      },
-    })}
-  />
-);
+export function InboxOnlyArchivedConversations(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Inbox,
+          pinnedConversations: [],
+          conversations: [],
+          archivedConversations: defaultArchivedConversations,
+          isAboutToSearchInAConversation: false,
+        },
+      })}
+    />
+  );
+}
 
 InboxOnlyArchivedConversations.story = {
   name: 'Inbox: only archived conversations',
 };
 
-export const InboxPinnedAndArchivedConversations = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Inbox,
-        pinnedConversations,
-        conversations: [],
-        archivedConversations: defaultArchivedConversations,
-        isAboutToSearchInAConversation: false,
-      },
-    })}
-  />
-);
+export function InboxPinnedAndArchivedConversations(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Inbox,
+          pinnedConversations,
+          conversations: [],
+          archivedConversations: defaultArchivedConversations,
+          isAboutToSearchInAConversation: false,
+        },
+      })}
+    />
+  );
+}
 
 InboxPinnedAndArchivedConversations.story = {
   name: 'Inbox: pinned and archived conversations',
 };
 
-export const InboxNonPinnedAndArchivedConversations = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Inbox,
-        pinnedConversations: [],
-        conversations: defaultConversations,
-        archivedConversations: defaultArchivedConversations,
-        isAboutToSearchInAConversation: false,
-      },
-    })}
-  />
-);
+export function InboxNonPinnedAndArchivedConversations(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Inbox,
+          pinnedConversations: [],
+          conversations: defaultConversations,
+          archivedConversations: defaultArchivedConversations,
+          isAboutToSearchInAConversation: false,
+        },
+      })}
+    />
+  );
+}
 
 InboxNonPinnedAndArchivedConversations.story = {
   name: 'Inbox: non-pinned and archived conversations',
 };
 
-export const InboxPinnedAndNonPinnedConversations = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Inbox,
-        pinnedConversations,
-        conversations: defaultConversations,
-        archivedConversations: [],
-        isAboutToSearchInAConversation: false,
-      },
-    })}
-  />
-);
+export function InboxPinnedAndNonPinnedConversations(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Inbox,
+          pinnedConversations,
+          conversations: defaultConversations,
+          archivedConversations: [],
+          isAboutToSearchInAConversation: false,
+        },
+      })}
+    />
+  );
+}
 
 InboxPinnedAndNonPinnedConversations.story = {
   name: 'Inbox: pinned and non-pinned conversations',
 };
 
-export const InboxPinnedNonPinnedAndArchivedConversations = (): JSX.Element => (
-  <LeftPane {...useProps()} />
-);
+export function InboxPinnedNonPinnedAndArchivedConversations(): JSX.Element {
+  return <LeftPane {...useProps()} />;
+}
 
 InboxPinnedNonPinnedAndArchivedConversations.story = {
   name: 'Inbox: pinned, non-pinned, and archived conversations',
 };
 
-export const SearchNoResultsWhenSearchingEverywhere = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Search,
-        conversationResults: emptySearchResultsGroup,
-        contactResults: emptySearchResultsGroup,
-        messageResults: emptySearchResultsGroup,
-        primarySendsSms: false,
-      },
-    })}
-  />
-);
+export function SearchNoResultsWhenSearchingEverywhere(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Search,
+          conversationResults: emptySearchResultsGroup,
+          contactResults: emptySearchResultsGroup,
+          messageResults: emptySearchResultsGroup,
+          primarySendsSms: false,
+        },
+      })}
+    />
+  );
+}
 
 SearchNoResultsWhenSearchingEverywhere.story = {
   name: 'Search: no results when searching everywhere',
 };
 
-export const SearchNoResultsWhenSearchingEverywhereSms = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Search,
-        conversationResults: emptySearchResultsGroup,
-        contactResults: emptySearchResultsGroup,
-        messageResults: emptySearchResultsGroup,
-        primarySendsSms: true,
-      },
-    })}
-  />
-);
+export function SearchNoResultsWhenSearchingEverywhereSms(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Search,
+          conversationResults: emptySearchResultsGroup,
+          contactResults: emptySearchResultsGroup,
+          messageResults: emptySearchResultsGroup,
+          primarySendsSms: true,
+        },
+      })}
+    />
+  );
+}
 
 SearchNoResultsWhenSearchingEverywhereSms.story = {
   name: 'Search: no results when searching everywhere (SMS)',
 };
 
-export const SearchNoResultsWhenSearchingInAConversation = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Search,
-        conversationResults: emptySearchResultsGroup,
-        contactResults: emptySearchResultsGroup,
-        messageResults: emptySearchResultsGroup,
-        searchConversationName: 'Bing Bong',
-        primarySendsSms: false,
-      },
-    })}
-  />
-);
+export function SearchNoResultsWhenSearchingInAConversation(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Search,
+          conversationResults: emptySearchResultsGroup,
+          contactResults: emptySearchResultsGroup,
+          messageResults: emptySearchResultsGroup,
+          searchConversationName: 'Bing Bong',
+          primarySendsSms: false,
+        },
+      })}
+    />
+  );
+}
 
 SearchNoResultsWhenSearchingInAConversation.story = {
   name: 'Search: no results when searching in a conversation',
 };
 
-export const SearchAllResultsLoading = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Search,
-        conversationResults: { isLoading: true },
-        contactResults: { isLoading: true },
-        messageResults: { isLoading: true },
-        primarySendsSms: false,
-      },
-    })}
-  />
-);
+export function SearchAllResultsLoading(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Search,
+          conversationResults: { isLoading: true },
+          contactResults: { isLoading: true },
+          messageResults: { isLoading: true },
+          primarySendsSms: false,
+        },
+      })}
+    />
+  );
+}
 
 SearchAllResultsLoading.story = {
   name: 'Search: all results loading',
 };
 
-export const SearchSomeResultsLoading = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Search,
-        conversationResults: {
-          isLoading: false,
-          results: defaultConversations,
+export function SearchSomeResultsLoading(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Search,
+          conversationResults: {
+            isLoading: false,
+            results: defaultConversations,
+          },
+          contactResults: { isLoading: true },
+          messageResults: { isLoading: true },
+          primarySendsSms: false,
         },
-        contactResults: { isLoading: true },
-        messageResults: { isLoading: true },
-        primarySendsSms: false,
-      },
-    })}
-  />
-);
+      })}
+    />
+  );
+}
 
 SearchSomeResultsLoading.story = {
   name: 'Search: some results loading',
 };
 
-export const SearchHasConversationsAndContactsButNotMessages =
-  (): JSX.Element => (
+export function SearchHasConversationsAndContactsButNotMessages(): JSX.Element {
+  return (
     <LeftPane
       {...useProps({
         modeSpecificProps: {
@@ -459,237 +483,260 @@ export const SearchHasConversationsAndContactsButNotMessages =
       })}
     />
   );
+}
 
 SearchHasConversationsAndContactsButNotMessages.story = {
   name: 'Search: has conversations and contacts, but not messages',
 };
 
-export const SearchAllResults = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Search,
-        conversationResults: {
-          isLoading: false,
-          results: defaultConversations,
+export function SearchAllResults(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Search,
+          conversationResults: {
+            isLoading: false,
+            results: defaultConversations,
+          },
+          contactResults: { isLoading: false, results: defaultConversations },
+          messageResults: {
+            isLoading: false,
+            results: [
+              { id: 'msg1', type: 'outgoing', conversationId: 'foo' },
+              { id: 'msg2', type: 'incoming', conversationId: 'bar' },
+            ],
+          },
+          primarySendsSms: false,
         },
-        contactResults: { isLoading: false, results: defaultConversations },
-        messageResults: {
-          isLoading: false,
-          results: [
-            { id: 'msg1', type: 'outgoing', conversationId: 'foo' },
-            { id: 'msg2', type: 'incoming', conversationId: 'bar' },
-          ],
-        },
-        primarySendsSms: false,
-      },
-    })}
-  />
-);
+      })}
+    />
+  );
+}
 
 SearchAllResults.story = {
   name: 'Search: all results',
 };
 
-export const ArchiveNoArchivedConversations = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Archive,
-        archivedConversations: [],
-        searchConversation: undefined,
-        searchTerm: '',
-        startSearchCounter: 0,
-      },
-    })}
-  />
-);
+export function ArchiveNoArchivedConversations(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Archive,
+          archivedConversations: [],
+          searchConversation: undefined,
+          searchTerm: '',
+          startSearchCounter: 0,
+        },
+      })}
+    />
+  );
+}
 
 ArchiveNoArchivedConversations.story = {
   name: 'Archive: no archived conversations',
 };
 
-export const ArchiveArchivedConversations = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Archive,
-        archivedConversations: defaultConversations,
-        searchConversation: undefined,
-        searchTerm: '',
-        startSearchCounter: 0,
-      },
-    })}
-  />
-);
+export function ArchiveArchivedConversations(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Archive,
+          archivedConversations: defaultConversations,
+          searchConversation: undefined,
+          searchTerm: '',
+          startSearchCounter: 0,
+        },
+      })}
+    />
+  );
+}
 
 ArchiveArchivedConversations.story = {
   name: 'Archive: archived conversations',
 };
 
-export const ArchiveSearchingAConversation = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Archive,
-        archivedConversations: defaultConversations,
-        searchConversation: undefined,
-        searchTerm: '',
-        startSearchCounter: 0,
-      },
-    })}
-  />
-);
+export function ArchiveSearchingAConversation(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Archive,
+          archivedConversations: defaultConversations,
+          searchConversation: undefined,
+          searchTerm: '',
+          startSearchCounter: 0,
+        },
+      })}
+    />
+  );
+}
 
 ArchiveSearchingAConversation.story = {
   name: 'Archive: searching a conversation',
 };
 
-export const ComposeNoResults = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Compose,
-        composeContacts: [],
-        composeGroups: [],
-        isUsernamesEnabled: true,
-        uuidFetchState: {},
-        regionCode: 'US',
-        searchTerm: '',
-      },
-    })}
-  />
-);
+export function ComposeNoResults(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Compose,
+          composeContacts: [],
+          composeGroups: [],
+          isUsernamesEnabled: true,
+          uuidFetchState: {},
+          regionCode: 'US',
+          searchTerm: '',
+        },
+      })}
+    />
+  );
+}
 
 ComposeNoResults.story = {
   name: 'Compose: no results',
 };
 
-export const ComposeSomeContactsNoSearchTerm = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Compose,
-        composeContacts: defaultConversations,
-        composeGroups: [],
-        isUsernamesEnabled: true,
-        uuidFetchState: {},
-        regionCode: 'US',
-        searchTerm: '',
-      },
-    })}
-  />
-);
+export function ComposeSomeContactsNoSearchTerm(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Compose,
+          composeContacts: defaultConversations,
+          composeGroups: [],
+          isUsernamesEnabled: true,
+          uuidFetchState: {},
+          regionCode: 'US',
+          searchTerm: '',
+        },
+      })}
+    />
+  );
+}
 
 ComposeSomeContactsNoSearchTerm.story = {
   name: 'Compose: some contacts, no search term',
 };
 
-export const ComposeSomeContactsWithASearchTerm = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Compose,
-        composeContacts: defaultConversations,
-        composeGroups: [],
-        isUsernamesEnabled: true,
-        uuidFetchState: {},
-        regionCode: 'US',
-        searchTerm: 'ar',
-      },
-    })}
-  />
-);
+export function ComposeSomeContactsWithASearchTerm(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Compose,
+          composeContacts: defaultConversations,
+          composeGroups: [],
+          isUsernamesEnabled: true,
+          uuidFetchState: {},
+          regionCode: 'US',
+          searchTerm: 'ar',
+        },
+      })}
+    />
+  );
+}
 
 ComposeSomeContactsWithASearchTerm.story = {
   name: 'Compose: some contacts, with a search term',
 };
 
-export const ComposeSomeGroupsNoSearchTerm = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Compose,
-        composeContacts: [],
-        composeGroups: defaultGroups,
-        isUsernamesEnabled: true,
-        uuidFetchState: {},
-        regionCode: 'US',
-        searchTerm: '',
-      },
-    })}
-  />
-);
+export function ComposeSomeGroupsNoSearchTerm(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Compose,
+          composeContacts: [],
+          composeGroups: defaultGroups,
+          isUsernamesEnabled: true,
+          uuidFetchState: {},
+          regionCode: 'US',
+          searchTerm: '',
+        },
+      })}
+    />
+  );
+}
 
 ComposeSomeGroupsNoSearchTerm.story = {
   name: 'Compose: some groups, no search term',
 };
 
-export const ComposeSomeGroupsWithSearchTerm = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Compose,
-        composeContacts: [],
-        composeGroups: defaultGroups,
-        isUsernamesEnabled: true,
-        uuidFetchState: {},
-        regionCode: 'US',
-        searchTerm: 'ar',
-      },
-    })}
-  />
-);
+export function ComposeSomeGroupsWithSearchTerm(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Compose,
+          composeContacts: [],
+          composeGroups: defaultGroups,
+          isUsernamesEnabled: true,
+          uuidFetchState: {},
+          regionCode: 'US',
+          searchTerm: 'ar',
+        },
+      })}
+    />
+  );
+}
 
 ComposeSomeGroupsWithSearchTerm.story = {
   name: 'Compose: some groups, with search term',
 };
 
-export const ComposeSearchIsValidUsername = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Compose,
-        composeContacts: [],
-        composeGroups: [],
-        isUsernamesEnabled: true,
-        uuidFetchState: {},
-        regionCode: 'US',
-        searchTerm: 'someone',
-      },
-    })}
-  />
-);
+export function ComposeSearchIsValidUsername(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Compose,
+          composeContacts: [],
+          composeGroups: [],
+          isUsernamesEnabled: true,
+          uuidFetchState: {},
+          regionCode: 'US',
+          searchTerm: 'someone',
+        },
+      })}
+    />
+  );
+}
 
 ComposeSearchIsValidUsername.story = {
   name: 'Compose: search is valid username',
 };
 
-export const ComposeSearchIsValidUsernameFetchingUsername = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Compose,
-        composeContacts: [],
-        composeGroups: [],
-        isUsernamesEnabled: true,
-        uuidFetchState: {
-          'username:someone': true,
+export function ComposeSearchIsValidUsernameFetchingUsername(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Compose,
+          composeContacts: [],
+          composeGroups: [],
+          isUsernamesEnabled: true,
+          uuidFetchState: {
+            'username:someone': true,
+          },
+          regionCode: 'US',
+          searchTerm: 'someone',
         },
-        regionCode: 'US',
-        searchTerm: 'someone',
-      },
-    })}
-  />
-);
+      })}
+    />
+  );
+}
 
 ComposeSearchIsValidUsernameFetchingUsername.story = {
   name: 'Compose: search is valid username, fetching username',
 };
 
-export const ComposeSearchIsValidUsernameButFlagIsNotEnabled =
-  (): JSX.Element => (
+export function ComposeSearchIsValidUsernameButFlagIsNotEnabled(): JSX.Element {
+  return (
     <LeftPane
       {...useProps({
         modeSpecificProps: {
@@ -704,53 +751,58 @@ export const ComposeSearchIsValidUsernameButFlagIsNotEnabled =
       })}
     />
   );
+}
 
 ComposeSearchIsValidUsernameButFlagIsNotEnabled.story = {
   name: 'Compose: search is valid username, but flag is not enabled',
 };
 
-export const ComposeSearchIsPartialPhoneNumber = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Compose,
-        composeContacts: [],
-        composeGroups: [],
-        isUsernamesEnabled: false,
-        uuidFetchState: {},
-        regionCode: 'US',
-        searchTerm: '+1(212)555',
-      },
-    })}
-  />
-);
+export function ComposeSearchIsPartialPhoneNumber(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Compose,
+          composeContacts: [],
+          composeGroups: [],
+          isUsernamesEnabled: false,
+          uuidFetchState: {},
+          regionCode: 'US',
+          searchTerm: '+1(212)555',
+        },
+      })}
+    />
+  );
+}
 
 ComposeSearchIsPartialPhoneNumber.story = {
   name: 'Compose: search is partial phone number',
 };
 
-export const ComposeSearchIsValidPhoneNumber = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Compose,
-        composeContacts: [],
-        composeGroups: [],
-        isUsernamesEnabled: true,
-        uuidFetchState: {},
-        regionCode: 'US',
-        searchTerm: '2125555454',
-      },
-    })}
-  />
-);
+export function ComposeSearchIsValidPhoneNumber(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Compose,
+          composeContacts: [],
+          composeGroups: [],
+          isUsernamesEnabled: true,
+          uuidFetchState: {},
+          regionCode: 'US',
+          searchTerm: '2125555454',
+        },
+      })}
+    />
+  );
+}
 
 ComposeSearchIsValidPhoneNumber.story = {
   name: 'Compose: search is valid phone number',
 };
 
-export const ComposeSearchIsValidPhoneNumberFetchingPhoneNumber =
-  (): JSX.Element => (
+export function ComposeSearchIsValidPhoneNumberFetchingPhoneNumber(): JSX.Element {
+  return (
     <LeftPane
       {...useProps({
         modeSpecificProps: {
@@ -767,88 +819,97 @@ export const ComposeSearchIsValidPhoneNumberFetchingPhoneNumber =
       })}
     />
   );
+}
 
 ComposeSearchIsValidPhoneNumberFetchingPhoneNumber.story = {
   name: 'Compose: search is valid phone number, fetching phone number',
 };
 
-export const ComposeAllKindsOfResultsNoSearchTerm = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Compose,
-        composeContacts: defaultConversations,
-        composeGroups: defaultGroups,
-        isUsernamesEnabled: true,
-        uuidFetchState: {},
-        regionCode: 'US',
-        searchTerm: '',
-      },
-    })}
-  />
-);
+export function ComposeAllKindsOfResultsNoSearchTerm(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Compose,
+          composeContacts: defaultConversations,
+          composeGroups: defaultGroups,
+          isUsernamesEnabled: true,
+          uuidFetchState: {},
+          regionCode: 'US',
+          searchTerm: '',
+        },
+      })}
+    />
+  );
+}
 
 ComposeAllKindsOfResultsNoSearchTerm.story = {
   name: 'Compose: all kinds of results, no search term',
 };
 
-export const ComposeAllKindsOfResultsWithASearchTerm = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.Compose,
-        composeContacts: defaultConversations,
-        composeGroups: defaultGroups,
-        isUsernamesEnabled: true,
-        uuidFetchState: {},
-        regionCode: 'US',
-        searchTerm: 'someone',
-      },
-    })}
-  />
-);
+export function ComposeAllKindsOfResultsWithASearchTerm(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.Compose,
+          composeContacts: defaultConversations,
+          composeGroups: defaultGroups,
+          isUsernamesEnabled: true,
+          uuidFetchState: {},
+          regionCode: 'US',
+          searchTerm: 'someone',
+        },
+      })}
+    />
+  );
+}
 
 ComposeAllKindsOfResultsWithASearchTerm.story = {
   name: 'Compose: all kinds of results, with a search term',
 };
 
-export const CaptchaDialogRequired = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Inbox,
-        pinnedConversations,
-        conversations: defaultConversations,
-        archivedConversations: [],
-        isAboutToSearchInAConversation: false,
-        searchTerm: '',
-      },
-      challengeStatus: 'required',
-    })}
-  />
-);
+export function CaptchaDialogRequired(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Inbox,
+          pinnedConversations,
+          conversations: defaultConversations,
+          archivedConversations: [],
+          isAboutToSearchInAConversation: false,
+          searchTerm: '',
+        },
+        challengeStatus: 'required',
+      })}
+    />
+  );
+}
 
 CaptchaDialogRequired.story = {
   name: 'Captcha dialog: required',
 };
 
-export const CaptchaDialogPending = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Inbox,
-        pinnedConversations,
-        conversations: defaultConversations,
-        archivedConversations: [],
-        isAboutToSearchInAConversation: false,
-        searchTerm: '',
-      },
-      challengeStatus: 'pending',
-    })}
-  />
-);
+export function CaptchaDialogPending(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Inbox,
+          pinnedConversations,
+          conversations: defaultConversations,
+          archivedConversations: [],
+          isAboutToSearchInAConversation: false,
+          searchTerm: '',
+        },
+        challengeStatus: 'pending',
+      })}
+    />
+  );
+}
 
 CaptchaDialogPending.story = {
   name: 'Captcha dialog: pending',
@@ -875,157 +936,171 @@ _CrashReportDialog.story = {
   name: 'Crash report dialog',
 };
 
-export const ChooseGroupMembersPartialPhoneNumber = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.ChooseGroupMembers,
-        uuidFetchState: {},
-        candidateContacts: [],
-        groupSizeRecommendedLimit: 151,
-        groupSizeHardLimit: 1001,
-        isShowingRecommendedGroupSizeModal: false,
-        isShowingMaximumGroupSizeModal: false,
-        isUsernamesEnabled: true,
-        searchTerm: '+1(212) 555',
-        regionCode: 'US',
-        selectedContacts: [],
-      },
-    })}
-  />
-);
+export function ChooseGroupMembersPartialPhoneNumber(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.ChooseGroupMembers,
+          uuidFetchState: {},
+          candidateContacts: [],
+          groupSizeRecommendedLimit: 151,
+          groupSizeHardLimit: 1001,
+          isShowingRecommendedGroupSizeModal: false,
+          isShowingMaximumGroupSizeModal: false,
+          isUsernamesEnabled: true,
+          searchTerm: '+1(212) 555',
+          regionCode: 'US',
+          selectedContacts: [],
+        },
+      })}
+    />
+  );
+}
 
 ChooseGroupMembersPartialPhoneNumber.story = {
   name: 'Choose Group Members: Partial phone number',
 };
 
-export const ChooseGroupMembersValidPhoneNumber = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.ChooseGroupMembers,
-        uuidFetchState: {},
-        candidateContacts: [],
-        groupSizeRecommendedLimit: 151,
-        groupSizeHardLimit: 1001,
-        isShowingRecommendedGroupSizeModal: false,
-        isShowingMaximumGroupSizeModal: false,
-        isUsernamesEnabled: true,
-        searchTerm: '+1(212) 555 5454',
-        regionCode: 'US',
-        selectedContacts: [],
-      },
-    })}
-  />
-);
+export function ChooseGroupMembersValidPhoneNumber(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.ChooseGroupMembers,
+          uuidFetchState: {},
+          candidateContacts: [],
+          groupSizeRecommendedLimit: 151,
+          groupSizeHardLimit: 1001,
+          isShowingRecommendedGroupSizeModal: false,
+          isShowingMaximumGroupSizeModal: false,
+          isUsernamesEnabled: true,
+          searchTerm: '+1(212) 555 5454',
+          regionCode: 'US',
+          selectedContacts: [],
+        },
+      })}
+    />
+  );
+}
 
 ChooseGroupMembersValidPhoneNumber.story = {
   name: 'Choose Group Members: Valid phone number',
 };
 
-export const ChooseGroupMembersUsername = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.ChooseGroupMembers,
-        uuidFetchState: {},
-        candidateContacts: [],
-        groupSizeRecommendedLimit: 151,
-        groupSizeHardLimit: 1001,
-        isShowingRecommendedGroupSizeModal: false,
-        isShowingMaximumGroupSizeModal: false,
-        isUsernamesEnabled: true,
-        searchTerm: '@signal',
-        regionCode: 'US',
-        selectedContacts: [],
-      },
-    })}
-  />
-);
+export function ChooseGroupMembersUsername(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.ChooseGroupMembers,
+          uuidFetchState: {},
+          candidateContacts: [],
+          groupSizeRecommendedLimit: 151,
+          groupSizeHardLimit: 1001,
+          isShowingRecommendedGroupSizeModal: false,
+          isShowingMaximumGroupSizeModal: false,
+          isUsernamesEnabled: true,
+          searchTerm: '@signal',
+          regionCode: 'US',
+          selectedContacts: [],
+        },
+      })}
+    />
+  );
+}
 
 ChooseGroupMembersUsername.story = {
   name: 'Choose Group Members: username',
 };
 
-export const GroupMetadataNoTimer = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.SetGroupMetadata,
-        groupAvatar: undefined,
-        groupName: 'Group 1',
-        groupExpireTimer: DurationInSeconds.ZERO,
-        hasError: false,
-        isCreating: false,
-        isEditingAvatar: false,
-        selectedContacts: defaultConversations,
-        userAvatarData: [],
-      },
-    })}
-  />
-);
+export function GroupMetadataNoTimer(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.SetGroupMetadata,
+          groupAvatar: undefined,
+          groupName: 'Group 1',
+          groupExpireTimer: DurationInSeconds.ZERO,
+          hasError: false,
+          isCreating: false,
+          isEditingAvatar: false,
+          selectedContacts: defaultConversations,
+          userAvatarData: [],
+        },
+      })}
+    />
+  );
+}
 
 GroupMetadataNoTimer.story = {
   name: 'Group Metadata: No Timer',
 };
 
-export const GroupMetadataRegularTimer = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.SetGroupMetadata,
-        groupAvatar: undefined,
-        groupName: 'Group 1',
-        groupExpireTimer: DurationInSeconds.DAY,
-        hasError: false,
-        isCreating: false,
-        isEditingAvatar: false,
-        selectedContacts: defaultConversations,
-        userAvatarData: [],
-      },
-    })}
-  />
-);
+export function GroupMetadataRegularTimer(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.SetGroupMetadata,
+          groupAvatar: undefined,
+          groupName: 'Group 1',
+          groupExpireTimer: DurationInSeconds.DAY,
+          hasError: false,
+          isCreating: false,
+          isEditingAvatar: false,
+          selectedContacts: defaultConversations,
+          userAvatarData: [],
+        },
+      })}
+    />
+  );
+}
 
 GroupMetadataRegularTimer.story = {
   name: 'Group Metadata: Regular Timer',
 };
 
-export const GroupMetadataCustomTimer = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        mode: LeftPaneMode.SetGroupMetadata,
-        groupAvatar: undefined,
-        groupName: 'Group 1',
-        groupExpireTimer: DurationInSeconds.fromHours(7),
-        hasError: false,
-        isCreating: false,
-        isEditingAvatar: false,
-        selectedContacts: defaultConversations,
-        userAvatarData: [],
-      },
-    })}
-  />
-);
+export function GroupMetadataCustomTimer(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          mode: LeftPaneMode.SetGroupMetadata,
+          groupAvatar: undefined,
+          groupName: 'Group 1',
+          groupExpireTimer: DurationInSeconds.fromHours(7),
+          hasError: false,
+          isCreating: false,
+          isEditingAvatar: false,
+          selectedContacts: defaultConversations,
+          userAvatarData: [],
+        },
+      })}
+    />
+  );
+}
 
 GroupMetadataCustomTimer.story = {
   name: 'Group Metadata: Custom Timer',
 };
 
-export const SearchingConversation = (): JSX.Element => (
-  <LeftPane
-    {...useProps({
-      modeSpecificProps: {
-        ...defaultSearchProps,
-        mode: LeftPaneMode.Inbox,
-        pinnedConversations: [],
-        conversations: defaultConversations,
-        archivedConversations: [],
-        isAboutToSearchInAConversation: false,
-        searchConversation: getDefaultConversation(),
-        searchTerm: '',
-      },
-    })}
-  />
-);
+export function SearchingConversation(): JSX.Element {
+  return (
+    <LeftPane
+      {...useProps({
+        modeSpecificProps: {
+          ...defaultSearchProps,
+          mode: LeftPaneMode.Inbox,
+          pinnedConversations: [],
+          conversations: defaultConversations,
+          archivedConversations: [],
+          isAboutToSearchInAConversation: false,
+          searchConversation: getDefaultConversation(),
+          searchTerm: '',
+        },
+      })}
+    />
+  );
+}
diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx
index 2d42efa61..2ada69ddc 100644
--- a/ts/components/LeftPane.tsx
+++ b/ts/components/LeftPane.tsx
@@ -140,7 +140,7 @@ export type PropsType = {
   renderCrashReportDialog: () => JSX.Element;
 } & LookupConversationWithoutUuidActionsType;
 
-export const LeftPane: React.FC<PropsType> = ({
+export function LeftPane({
   challengeStatus,
   crashReportCount,
   clearConversationSearch,
@@ -187,7 +187,7 @@ export const LeftPane: React.FC<PropsType> = ({
   theme,
   toggleComposeEditingAvatar,
   updateSearchTerm,
-}) => {
+}: PropsType): JSX.Element {
   const [preferredWidth, setPreferredWidth] = useState(
     // This clamp is present just in case we get a bogus value from storage.
     clamp(preferredWidthFromStorage, MIN_WIDTH, MAX_WIDTH)
@@ -622,15 +622,13 @@ export const LeftPane: React.FC<PropsType> = ({
       {footerContents && (
         <div className="module-left-pane__footer">{footerContents}</div>
       )}
-      <>
-        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-        <div
-          className="module-left-pane__resize-grab-area"
-          onMouseDown={() => {
-            setIsResizing(true);
-          }}
-        />
-      </>
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div
+        className="module-left-pane__resize-grab-area"
+        onMouseDown={() => {
+          setIsResizing(true);
+        }}
+      />
       {challengeStatus !== 'idle' &&
         renderCaptchaDialog({
           onSkip() {
@@ -640,7 +638,7 @@ export const LeftPane: React.FC<PropsType> = ({
       {crashReportCount > 0 && renderCrashReportDialog()}
     </div>
   );
-};
+}
 
 function keyboardKeyToNumericIndex(key: string): undefined | number {
   if (key.length !== 1) {
diff --git a/ts/components/LeftPaneDialog.tsx b/ts/components/LeftPaneDialog.tsx
index 628176f65..e338a0e34 100644
--- a/ts/components/LeftPaneDialog.tsx
+++ b/ts/components/LeftPaneDialog.tsx
@@ -43,7 +43,7 @@ export type PropsType = {
       }
   );
 
-export const LeftPaneDialog: React.FC<PropsType> = ({
+export function LeftPaneDialog({
   icon = 'warning',
   type,
   onClick,
@@ -58,7 +58,7 @@ export const LeftPaneDialog: React.FC<PropsType> = ({
   hasXButton,
   onClose,
   closeLabel,
-}) => {
+}: PropsType): JSX.Element {
   const onClickWrap = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -188,4 +188,4 @@ export const LeftPaneDialog: React.FC<PropsType> = ({
   }
 
   return dialogNode;
-};
+}
diff --git a/ts/components/LeftPaneSearchInput.tsx b/ts/components/LeftPaneSearchInput.tsx
index 3392a9fe7..f9ad3c45c 100644
--- a/ts/components/LeftPaneSearchInput.tsx
+++ b/ts/components/LeftPaneSearchInput.tsx
@@ -27,7 +27,7 @@ type PropsType = {
   ) => void;
 };
 
-export const LeftPaneSearchInput = ({
+export function LeftPaneSearchInput({
   clearConversationSearch,
   clearSearch,
   disabled,
@@ -38,7 +38,7 @@ export const LeftPaneSearchInput = ({
   updateSearchTerm,
   showConversation,
   onEnterKeyDown,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const inputRef = useRef<null | HTMLInputElement>(null);
 
   const prevSearchConversationId = usePrevious(
@@ -158,4 +158,4 @@ export const LeftPaneSearchInput = ({
       )}
     </SearchInput>
   );
-};
+}
diff --git a/ts/components/Lightbox.stories.tsx b/ts/components/Lightbox.stories.tsx
index f99763722..1e9a65c8d 100644
--- a/ts/components/Lightbox.stories.tsx
+++ b/ts/components/Lightbox.stories.tsx
@@ -63,7 +63,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   selectedIndex: number('selectedIndex', overrideProps.selectedIndex || 0),
 });
 
-export const Multimedia = (): JSX.Element => {
+export function Multimedia(): JSX.Element {
   const props = createProps({
     media: [
       {
@@ -120,9 +120,9 @@ export const Multimedia = (): JSX.Element => {
   });
 
   return <Lightbox {...props} />;
-};
+}
 
-export const MissingMedia = (): JSX.Element => {
+export function MissingMedia(): JSX.Element {
   const props = createProps({
     media: [
       {
@@ -147,185 +147,207 @@ export const MissingMedia = (): JSX.Element => {
   });
 
   return <Lightbox {...props} />;
-};
+}
 
-export const SingleImage = (): JSX.Element => (
-  <Lightbox
-    {...createProps({
-      media: [
-        createMediaItem({
-          objectURL: '/fixtures/tina-rolf-269345-unsplash.jpg',
-        }),
-      ],
-    })}
-  />
-);
+export function SingleImage(): JSX.Element {
+  return (
+    <Lightbox
+      {...createProps({
+        media: [
+          createMediaItem({
+            objectURL: '/fixtures/tina-rolf-269345-unsplash.jpg',
+          }),
+        ],
+      })}
+    />
+  );
+}
 
-export const ImageWithCaptionNormalImage = (): JSX.Element => (
-  <Lightbox
-    {...createProps({
-      media: [
-        createMediaItem({
-          caption:
-            'This lighthouse is really cool because there are lots of rocks and there is a tower that has a light and the light is really bright because it shines so much. The day was super duper cloudy and stormy and you can see all the waves hitting against the rocks. Wait? What is that weird red hose line thingy running all the way to the tower? Those rocks look slippery! I bet that water is really cold. I am cold now, can I get a sweater? I wonder where this place is, probably somewhere cold like Coldsgar, Frozenville.',
-          objectURL: '/fixtures/tina-rolf-269345-unsplash.jpg',
-        }),
-      ],
-    })}
-  />
-);
+export function ImageWithCaptionNormalImage(): JSX.Element {
+  return (
+    <Lightbox
+      {...createProps({
+        media: [
+          createMediaItem({
+            caption:
+              'This lighthouse is really cool because there are lots of rocks and there is a tower that has a light and the light is really bright because it shines so much. The day was super duper cloudy and stormy and you can see all the waves hitting against the rocks. Wait? What is that weird red hose line thingy running all the way to the tower? Those rocks look slippery! I bet that water is really cold. I am cold now, can I get a sweater? I wonder where this place is, probably somewhere cold like Coldsgar, Frozenville.',
+            objectURL: '/fixtures/tina-rolf-269345-unsplash.jpg',
+          }),
+        ],
+      })}
+    />
+  );
+}
 
 ImageWithCaptionNormalImage.story = {
   name: 'Image with Caption (normal image)',
 };
 
-export const ImageWithCaptionAllWhiteImage = (): JSX.Element => (
-  <Lightbox
-    {...createProps({
-      media: [
-        createMediaItem({
-          caption:
-            'This is the user-provided caption. It should be visible on light backgrounds.',
-          objectURL: '/fixtures/2000x2000-white.png',
-        }),
-      ],
-    })}
-  />
-);
+export function ImageWithCaptionAllWhiteImage(): JSX.Element {
+  return (
+    <Lightbox
+      {...createProps({
+        media: [
+          createMediaItem({
+            caption:
+              'This is the user-provided caption. It should be visible on light backgrounds.',
+            objectURL: '/fixtures/2000x2000-white.png',
+          }),
+        ],
+      })}
+    />
+  );
+}
 
 ImageWithCaptionAllWhiteImage.story = {
   name: 'Image with Caption (all-white image)',
 };
 
-export const SingleVideo = (): JSX.Element => (
-  <Lightbox
-    {...createProps({
-      media: [
-        createMediaItem({
-          contentType: VIDEO_MP4,
-          objectURL: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
-        }),
-      ],
-    })}
-  />
-);
+export function SingleVideo(): JSX.Element {
+  return (
+    <Lightbox
+      {...createProps({
+        media: [
+          createMediaItem({
+            contentType: VIDEO_MP4,
+            objectURL: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
+          }),
+        ],
+      })}
+    />
+  );
+}
 
-export const SingleVideoWCaption = (): JSX.Element => (
-  <Lightbox
-    {...createProps({
-      media: [
-        createMediaItem({
-          caption:
-            'This is the user-provided caption. It can get long and wrap onto multiple lines.',
-          contentType: VIDEO_MP4,
-          objectURL: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
-        }),
-      ],
-    })}
-  />
-);
+export function SingleVideoWCaption(): JSX.Element {
+  return (
+    <Lightbox
+      {...createProps({
+        media: [
+          createMediaItem({
+            caption:
+              'This is the user-provided caption. It can get long and wrap onto multiple lines.',
+            contentType: VIDEO_MP4,
+            objectURL: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
+          }),
+        ],
+      })}
+    />
+  );
+}
 
 SingleVideoWCaption.story = {
   name: 'Single Video w/caption',
 };
 
-export const UnsupportedImageType = (): JSX.Element => (
-  <Lightbox
-    {...createProps({
-      media: [
-        createMediaItem({
-          contentType: stringToMIMEType('image/tiff'),
-          objectURL: 'unsupported-image.tiff',
-        }),
-      ],
-    })}
-  />
-);
+export function UnsupportedImageType(): JSX.Element {
+  return (
+    <Lightbox
+      {...createProps({
+        media: [
+          createMediaItem({
+            contentType: stringToMIMEType('image/tiff'),
+            objectURL: 'unsupported-image.tiff',
+          }),
+        ],
+      })}
+    />
+  );
+}
 
-export const UnsupportedVideoType = (): JSX.Element => (
-  <Lightbox
-    {...createProps({
-      media: [
-        createMediaItem({
-          contentType: VIDEO_QUICKTIME,
-          objectURL: 'unsupported-video.mov',
-        }),
-      ],
-    })}
-  />
-);
+export function UnsupportedVideoType(): JSX.Element {
+  return (
+    <Lightbox
+      {...createProps({
+        media: [
+          createMediaItem({
+            contentType: VIDEO_QUICKTIME,
+            objectURL: 'unsupported-video.mov',
+          }),
+        ],
+      })}
+    />
+  );
+}
 
-export const UnsupportedContent = (): JSX.Element => (
-  <Lightbox
-    {...createProps({
-      media: [
-        createMediaItem({
-          contentType: AUDIO_MP3,
-          objectURL: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
-        }),
-      ],
-    })}
-  />
-);
+export function UnsupportedContent(): JSX.Element {
+  return (
+    <Lightbox
+      {...createProps({
+        media: [
+          createMediaItem({
+            contentType: AUDIO_MP3,
+            objectURL: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
+          }),
+        ],
+      })}
+    />
+  );
+}
 
-export const CustomChildren = (): JSX.Element => (
-  <Lightbox {...createProps({})} media={[]}>
-    <div
-      style={{
-        color: 'white',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      I am middle child
-    </div>
-  </Lightbox>
-);
+export function CustomChildren(): JSX.Element {
+  return (
+    <Lightbox {...createProps({})} media={[]}>
+      <div
+        style={{
+          color: 'white',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        I am middle child
+      </div>
+    </Lightbox>
+  );
+}
 
 CustomChildren.story = {
   name: 'Custom children',
 };
 
-export const Forwarding = (): JSX.Element => (
-  <Lightbox {...createProps({})} onForward={action('onForward')} />
-);
+export function Forwarding(): JSX.Element {
+  return <Lightbox {...createProps({})} onForward={action('onForward')} />;
+}
 
-export const ConversationHeader = (): JSX.Element => (
-  <Lightbox
-    {...createProps({})}
-    getConversation={() => ({
-      acceptedMessageRequest: true,
-      avatarPath: '/fixtures/kitten-1-64-64.jpg',
-      badges: [],
-      id: '1234',
-      isMe: false,
-      name: 'Test',
-      profileName: 'Test',
-      sharedGroupNames: [],
-      title: 'Test',
-      type: 'direct',
-    })}
-    media={[
-      createMediaItem({
-        contentType: VIDEO_MP4,
-        objectURL: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
-      }),
-    ]}
-  />
-);
-
-export const ViewOnceVideo = (): JSX.Element => (
-  <Lightbox
-    {...createProps({
-      isViewOnce: true,
-      media: [
+export function ConversationHeader(): JSX.Element {
+  return (
+    <Lightbox
+      {...createProps({})}
+      getConversation={() => ({
+        acceptedMessageRequest: true,
+        avatarPath: '/fixtures/kitten-1-64-64.jpg',
+        badges: [],
+        id: '1234',
+        isMe: false,
+        name: 'Test',
+        profileName: 'Test',
+        sharedGroupNames: [],
+        title: 'Test',
+        type: 'direct',
+      })}
+      media={[
         createMediaItem({
           contentType: VIDEO_MP4,
           objectURL: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
         }),
-      ],
-    })}
-    isViewOnce
-  />
-);
+      ]}
+    />
+  );
+}
+
+export function ViewOnceVideo(): JSX.Element {
+  return (
+    <Lightbox
+      {...createProps({
+        isViewOnce: true,
+        media: [
+          createMediaItem({
+            contentType: VIDEO_MP4,
+            objectURL: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
+          }),
+        ],
+      })}
+      isViewOnce
+    />
+  );
+}
diff --git a/ts/components/ListView.tsx b/ts/components/ListView.tsx
index 0469f3f25..ea849e3d9 100644
--- a/ts/components/ListView.tsx
+++ b/ts/components/ListView.tsx
@@ -24,7 +24,7 @@ type Props = {
  * Thin wrapper around react-virtualized List. Simplified API and provides common
  * defaults.
  */
-export const ListView = ({
+export function ListView({
   width,
   height,
   rowCount,
@@ -35,7 +35,7 @@ export const ListView = ({
   scrollable = true,
   shouldRecomputeRowHeights = false,
   scrollBehavior = ScrollBehavior.Default,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const listRef = useRef<null | List>(null);
 
   useEffect(() => {
@@ -67,4 +67,4 @@ export const ListView = ({
       tabIndex={-1}
     />
   );
-};
+}
diff --git a/ts/components/MainHeader.stories.tsx b/ts/components/MainHeader.stories.tsx
index ce2a25128..48f64a928 100644
--- a/ts/components/MainHeader.stories.tsx
+++ b/ts/components/MainHeader.stories.tsx
@@ -52,6 +52,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <MainHeader {...args} />;
 
 export const Basic = Template.bind({});
diff --git a/ts/components/MediaEditor.stories.tsx b/ts/components/MediaEditor.stories.tsx
index 455bc0dc4..45cde4523 100644
--- a/ts/components/MediaEditor.stories.tsx
+++ b/ts/components/MediaEditor.stories.tsx
@@ -35,39 +35,41 @@ const getDefaultProps = (): PropsType => ({
   recentStickers: [Stickers.wide, Stickers.tall, Stickers.abe],
 });
 
-export const ExtraLarge = (): JSX.Element => (
-  <MediaEditor {...getDefaultProps()} />
-);
+export function ExtraLarge(): JSX.Element {
+  return <MediaEditor {...getDefaultProps()} />;
+}
 
-export const Large = (): JSX.Element => (
-  <MediaEditor {...getDefaultProps()} imageSrc={IMAGE_1} />
-);
+export function Large(): JSX.Element {
+  return <MediaEditor {...getDefaultProps()} imageSrc={IMAGE_1} />;
+}
 
-export const Smol = (): JSX.Element => (
-  <MediaEditor {...getDefaultProps()} imageSrc={IMAGE_3} />
-);
+export function Smol(): JSX.Element {
+  return <MediaEditor {...getDefaultProps()} imageSrc={IMAGE_3} />;
+}
 
-export const Portrait = (): JSX.Element => (
-  <MediaEditor {...getDefaultProps()} imageSrc={IMAGE_4} />
-);
+export function Portrait(): JSX.Element {
+  return <MediaEditor {...getDefaultProps()} imageSrc={IMAGE_4} />;
+}
 
-export const Sending = (): JSX.Element => (
-  <MediaEditor {...getDefaultProps()} isSending />
-);
+export function Sending(): JSX.Element {
+  return <MediaEditor {...getDefaultProps()} isSending />;
+}
 
-export const WithCaption = (): JSX.Element => (
-  <MediaEditor
-    {...getDefaultProps()}
-    supportsCaption
-    renderCompositionTextArea={props => (
-      <CompositionTextArea
-        {...props}
-        i18n={i18n}
-        onPickEmoji={action('onPickEmoji')}
-        onSetSkinTone={action('onSetSkinTone')}
-        onTextTooLong={action('onTextTooLong')}
-        getPreferredBadge={() => undefined}
-      />
-    )}
-  />
-);
+export function WithCaption(): JSX.Element {
+  return (
+    <MediaEditor
+      {...getDefaultProps()}
+      supportsCaption
+      renderCompositionTextArea={props => (
+        <CompositionTextArea
+          {...props}
+          i18n={i18n}
+          onPickEmoji={action('onPickEmoji')}
+          onSetSkinTone={action('onSetSkinTone')}
+          onTextTooLong={action('onTextTooLong')}
+          getPreferredBadge={() => undefined}
+        />
+      )}
+    />
+  );
+}
diff --git a/ts/components/MediaEditor.tsx b/ts/components/MediaEditor.tsx
index f39fd6c87..f34d02aea 100644
--- a/ts/components/MediaEditor.tsx
+++ b/ts/components/MediaEditor.tsx
@@ -115,7 +115,7 @@ function isCmdOrCtrl(ev: KeyboardEvent): boolean {
   return commandKey || controlKey;
 }
 
-export const MediaEditor = ({
+export function MediaEditor({
   doneButtonLabel,
   i18n,
   imageSrc,
@@ -127,7 +127,7 @@ export const MediaEditor = ({
   installedPacks,
   recentStickers,
   ...props
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   const [fabricCanvas, setFabricCanvas] = useState<fabric.Canvas | undefined>();
   const [image, setImage] = useState<HTMLImageElement>(new Image());
   const [isStickerPopperOpen, setIsStickerPopperOpen] =
@@ -1198,7 +1198,7 @@ export const MediaEditor = ({
     </div>,
     portal
   );
-};
+}
 
 function getPendingCrop(
   fabricCanvas: fabric.Canvas
diff --git a/ts/components/MediaQualitySelector.stories.tsx b/ts/components/MediaQualitySelector.stories.tsx
index 93e773fa2..6a3252bfd 100644
--- a/ts/components/MediaQualitySelector.stories.tsx
+++ b/ts/components/MediaQualitySelector.stories.tsx
@@ -23,14 +23,16 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   onSelectQuality: action('onSelectQuality'),
 });
 
-export const StandardQuality = (): JSX.Element => (
-  <MediaQualitySelector {...createProps()} />
-);
+export function StandardQuality(): JSX.Element {
+  return <MediaQualitySelector {...createProps()} />;
+}
 
-export const HighQuality = (): JSX.Element => (
-  <MediaQualitySelector
-    {...createProps({
-      isHighQuality: true,
-    })}
-  />
-);
+export function HighQuality(): JSX.Element {
+  return (
+    <MediaQualitySelector
+      {...createProps({
+        isHighQuality: true,
+      })}
+    />
+  );
+}
diff --git a/ts/components/MediaQualitySelector.tsx b/ts/components/MediaQualitySelector.tsx
index 03315f59b..51cb38c75 100644
--- a/ts/components/MediaQualitySelector.tsx
+++ b/ts/components/MediaQualitySelector.tsx
@@ -17,11 +17,11 @@ export type PropsType = {
   onSelectQuality: (isHQ: boolean) => unknown;
 };
 
-export const MediaQualitySelector = ({
+export function MediaQualitySelector({
   i18n,
   isHighQuality,
   onSelectQuality,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [menuShowing, setMenuShowing] = useState(false);
   const [popperRoot, setPopperRoot] = useState<HTMLElement | null>(null);
   const [focusedOption, setFocusedOption] = useState<0 | 1 | undefined>(
@@ -196,4 +196,4 @@ export const MediaQualitySelector = ({
         : null}
     </Manager>
   );
-};
+}
diff --git a/ts/components/Modal.stories.tsx b/ts/components/Modal.stories.tsx
index 42f2a978c..267fdffeb 100644
--- a/ts/components/Modal.stories.tsx
+++ b/ts/components/Modal.stories.tsx
@@ -22,236 +22,260 @@ const onClose = action('onClose');
 const LOREM_IPSUM =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.';
 
-export const BareBonesShort = (): JSX.Element => (
-  <Modal modalName="test" i18n={i18n} useFocusTrap={false}>
-    Hello world!
-  </Modal>
-);
+export function BareBonesShort(): JSX.Element {
+  return (
+    <Modal modalName="test" i18n={i18n} useFocusTrap={false}>
+      Hello world!
+    </Modal>
+  );
+}
 
 BareBonesShort.story = {
   name: 'Bare bones, short',
 };
 
-export const BareBonesLong = (): JSX.Element => (
-  <Modal modalName="test" i18n={i18n} useFocusTrap={false}>
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-  </Modal>
-);
+export function BareBonesLong(): JSX.Element {
+  return (
+    <Modal modalName="test" i18n={i18n} useFocusTrap={false}>
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+    </Modal>
+  );
+}
 
 BareBonesLong.story = {
   name: 'Bare bones, long',
 };
 
-export const BareBonesLongWithButton = (): JSX.Element => (
-  <Modal
-    modalName="test"
-    i18n={i18n}
-    modalFooter={<Button onClick={noop}>Okay</Button>}
-  >
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-  </Modal>
-);
+export function BareBonesLongWithButton(): JSX.Element {
+  return (
+    <Modal
+      modalName="test"
+      i18n={i18n}
+      modalFooter={<Button onClick={noop}>Okay</Button>}
+    >
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+    </Modal>
+  );
+}
 
 BareBonesLongWithButton.story = {
   name: 'Bare bones, long, with button',
 };
 
-export const TitleXButtonBodyAndButtonFooter = (): JSX.Element => (
-  <Modal
-    modalName="test"
-    i18n={i18n}
-    title="Hello world"
-    onClose={onClose}
-    hasXButton
-    modalFooter={<Button onClick={noop}>Okay</Button>}
-  >
-    {LOREM_IPSUM}
-  </Modal>
-);
+export function TitleXButtonBodyAndButtonFooter(): JSX.Element {
+  return (
+    <Modal
+      modalName="test"
+      i18n={i18n}
+      title="Hello world"
+      onClose={onClose}
+      hasXButton
+      modalFooter={<Button onClick={noop}>Okay</Button>}
+    >
+      {LOREM_IPSUM}
+    </Modal>
+  );
+}
 
 TitleXButtonBodyAndButtonFooter.story = {
   name: 'Title, X button, body, and button footer',
 };
 
-export const LotsOfButtonsInTheFooter = (): JSX.Element => (
-  <Modal
-    modalName="test"
-    i18n={i18n}
-    onClose={onClose}
-    modalFooter={
-      <>
-        <Button onClick={noop}>Okay X</Button>
-        <Button onClick={noop}>Okay</Button>
-        <Button onClick={noop}>Okay</Button>
-        <Button onClick={noop}>
-          This is a button with a fairly large amount of text
-        </Button>
-        <Button onClick={noop}>Okay</Button>
-        <Button onClick={noop}>
-          This is a button with a fairly large amount of text
-        </Button>
-        <Button onClick={noop}>Okay</Button>
-      </>
-    }
-  >
-    Hello world!
-  </Modal>
-);
+export function LotsOfButtonsInTheFooter(): JSX.Element {
+  return (
+    <Modal
+      modalName="test"
+      i18n={i18n}
+      onClose={onClose}
+      modalFooter={
+        <>
+          <Button onClick={noop}>Okay X</Button>
+          <Button onClick={noop}>Okay</Button>
+          <Button onClick={noop}>Okay</Button>
+          <Button onClick={noop}>
+            This is a button with a fairly large amount of text
+          </Button>
+          <Button onClick={noop}>Okay</Button>
+          <Button onClick={noop}>
+            This is a button with a fairly large amount of text
+          </Button>
+          <Button onClick={noop}>Okay</Button>
+        </>
+      }
+    >
+      Hello world!
+    </Modal>
+  );
+}
 
 LotsOfButtonsInTheFooter.story = {
   name: 'Lots of buttons in the footer',
 };
 
-export const LongBodyWithTitle = (): JSX.Element => (
-  <Modal
-    modalName="test"
-    i18n={i18n}
-    title="Hello world"
-    onClose={onClose}
-    useFocusTrap={false}
-  >
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-  </Modal>
-);
+export function LongBodyWithTitle(): JSX.Element {
+  return (
+    <Modal
+      modalName="test"
+      i18n={i18n}
+      title="Hello world"
+      onClose={onClose}
+      useFocusTrap={false}
+    >
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+    </Modal>
+  );
+}
 
 LongBodyWithTitle.story = {
   name: 'Long body with title',
 };
 
-export const LongBodyWithTitleAndButton = (): JSX.Element => (
-  <Modal
-    modalName="test"
-    i18n={i18n}
-    title="Hello world"
-    onClose={onClose}
-    modalFooter={<Button onClick={noop}>Okay</Button>}
-  >
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-  </Modal>
-);
+export function LongBodyWithTitleAndButton(): JSX.Element {
+  return (
+    <Modal
+      modalName="test"
+      i18n={i18n}
+      title="Hello world"
+      onClose={onClose}
+      modalFooter={<Button onClick={noop}>Okay</Button>}
+    >
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+    </Modal>
+  );
+}
 
 LongBodyWithTitleAndButton.story = {
   name: 'Long body with title and button',
 };
 
-export const LongBodyWithLongTitleAndXButton = (): JSX.Element => (
-  <Modal
-    modalName="test"
-    i18n={i18n}
-    title={LOREM_IPSUM.slice(0, 104)}
-    hasXButton
-    onClose={onClose}
-  >
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-  </Modal>
-);
+export function LongBodyWithLongTitleAndXButton(): JSX.Element {
+  return (
+    <Modal
+      modalName="test"
+      i18n={i18n}
+      title={LOREM_IPSUM.slice(0, 104)}
+      hasXButton
+      onClose={onClose}
+    >
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+    </Modal>
+  );
+}
 
 LongBodyWithLongTitleAndXButton.story = {
   name: 'Long body with long title and X button',
 };
 
-export const WithStickyButtonsLongBody = (): JSX.Element => (
-  <Modal
-    modalName="test"
-    hasXButton
-    i18n={i18n}
-    onClose={onClose}
-    modalFooter={
-      <>
-        <Button onClick={noop}>Okay</Button>
-        <Button onClick={noop}>Okay</Button>
-      </>
-    }
-  >
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-    <p>{LOREM_IPSUM}</p>
-  </Modal>
-);
+export function WithStickyButtonsLongBody(): JSX.Element {
+  return (
+    <Modal
+      modalName="test"
+      hasXButton
+      i18n={i18n}
+      onClose={onClose}
+      modalFooter={
+        <>
+          <Button onClick={noop}>Okay</Button>
+          <Button onClick={noop}>Okay</Button>
+        </>
+      }
+    >
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+      <p>{LOREM_IPSUM}</p>
+    </Modal>
+  );
+}
 
 WithStickyButtonsLongBody.story = {
   name: 'With sticky buttons long body',
 };
 
-export const WithStickyButtonsShortBody = (): JSX.Element => (
-  <Modal
-    modalName="test"
-    hasXButton
-    i18n={i18n}
-    onClose={onClose}
-    modalFooter={
-      <>
-        <Button onClick={noop}>Okay</Button>
-        <Button onClick={noop}>Okay</Button>
-      </>
-    }
-  >
-    <p>{LOREM_IPSUM.slice(0, 140)}</p>
-  </Modal>
-);
+export function WithStickyButtonsShortBody(): JSX.Element {
+  return (
+    <Modal
+      modalName="test"
+      hasXButton
+      i18n={i18n}
+      onClose={onClose}
+      modalFooter={
+        <>
+          <Button onClick={noop}>Okay</Button>
+          <Button onClick={noop}>Okay</Button>
+        </>
+      }
+    >
+      <p>{LOREM_IPSUM.slice(0, 140)}</p>
+    </Modal>
+  );
+}
 
 WithStickyButtonsShortBody.story = {
   name: 'With sticky buttons short body',
 };
 
-export const StickyFooterLotsOfButtons = (): JSX.Element => (
-  <Modal
-    modalName="test"
-    i18n={i18n}
-    onClose={onClose}
-    title="OK"
-    modalFooter={
-      <>
-        <Button onClick={noop}>Okay</Button>
-        <Button onClick={noop}>Okay</Button>
-        <Button onClick={noop}>Okay</Button>
-        <Button onClick={noop}>
-          This is a button with a fairly large amount of text
-        </Button>
-        <Button onClick={noop}>Okay</Button>
-        <Button onClick={noop}>
-          This is a button with a fairly large amount of text
-        </Button>
-        <Button onClick={noop}>Okay</Button>
-      </>
-    }
-  >
-    <p>{LOREM_IPSUM}</p>
-  </Modal>
-);
+export function StickyFooterLotsOfButtons(): JSX.Element {
+  return (
+    <Modal
+      modalName="test"
+      i18n={i18n}
+      onClose={onClose}
+      title="OK"
+      modalFooter={
+        <>
+          <Button onClick={noop}>Okay</Button>
+          <Button onClick={noop}>Okay</Button>
+          <Button onClick={noop}>Okay</Button>
+          <Button onClick={noop}>
+            This is a button with a fairly large amount of text
+          </Button>
+          <Button onClick={noop}>Okay</Button>
+          <Button onClick={noop}>
+            This is a button with a fairly large amount of text
+          </Button>
+          <Button onClick={noop}>Okay</Button>
+        </>
+      }
+    >
+      <p>{LOREM_IPSUM}</p>
+    </Modal>
+  );
+}
 
 StickyFooterLotsOfButtons.story = {
   name: 'Sticky footer, Lots of buttons',
 };
 
-export const WithBackButton = (): JSX.Element => (
-  <Modal
-    modalName="test"
-    hasXButton
-    i18n={i18n}
-    onBackButtonClick={noop}
-    useFocusTrap={false}
-    title="The Modal Title"
-  >
-    Hello world!
-  </Modal>
-);
+export function WithBackButton(): JSX.Element {
+  return (
+    <Modal
+      modalName="test"
+      hasXButton
+      i18n={i18n}
+      onBackButtonClick={noop}
+      useFocusTrap={false}
+      title="The Modal Title"
+    >
+      Hello world!
+    </Modal>
+  );
+}
 
 WithBackButton.story = {
   name: 'Back Button',
diff --git a/ts/components/Modal.tsx b/ts/components/Modal.tsx
index 503ed0a2c..6a119b3a6 100644
--- a/ts/components/Modal.tsx
+++ b/ts/components/Modal.tsx
@@ -237,7 +237,7 @@ export function ModalPage({
   );
 }
 
-Modal.ButtonFooter = function ButtonFooter({
+function ButtonFooter({
   children,
 }: Readonly<{
   children: ReactNode;
@@ -257,7 +257,8 @@ Modal.ButtonFooter = function ButtonFooter({
       {children}
     </div>
   );
-};
+}
+Modal.ButtonFooter = ButtonFooter;
 
 type PagedModalProps = Readonly<{
   modalName: string;
diff --git a/ts/components/ModalHost.tsx b/ts/components/ModalHost.tsx
index 55d736dd3..edcce8043 100644
--- a/ts/components/ModalHost.tsx
+++ b/ts/components/ModalHost.tsx
@@ -36,120 +36,118 @@ export type PropsType = Readonly<{
   useFocusTrap?: boolean;
 }>;
 
-export const ModalHost = React.memo(
-  ({
-    children,
-    modalName,
-    moduleClassName,
-    noMouseClose,
-    onClose,
-    onEscape,
-    onTopOfEverything,
-    overlayStyles,
-    theme,
-    useFocusTrap = true,
-  }: PropsType) => {
-    const [root, setRoot] = React.useState<HTMLElement | null>(null);
-    const containerRef = React.useRef<HTMLDivElement | null>(null);
-    const previousModalName = usePrevious(modalName, modalName);
-    const modalContainer = useContext(ModalContainerContext) ?? document.body;
+export const ModalHost = React.memo(function ModalHostInner({
+  children,
+  modalName,
+  moduleClassName,
+  noMouseClose,
+  onClose,
+  onEscape,
+  onTopOfEverything,
+  overlayStyles,
+  theme,
+  useFocusTrap = true,
+}: PropsType) {
+  const [root, setRoot] = React.useState<HTMLElement | null>(null);
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const previousModalName = usePrevious(modalName, modalName);
+  const modalContainer = useContext(ModalContainerContext) ?? document.body;
 
-    if (previousModalName !== modalName) {
-      log.error(
-        `ModalHost detected conflict between ${previousModalName} ` +
-          `and ${modalName}. Consider using "key" attributes on both modals.`
-      );
-      assertDev(false, 'Modal conflict');
+  if (previousModalName !== modalName) {
+    log.error(
+      `ModalHost detected conflict between ${previousModalName} ` +
+        `and ${modalName}. Consider using "key" attributes on both modals.`
+    );
+    assertDev(false, 'Modal conflict');
+  }
+
+  useEffect(() => {
+    const div = document.createElement('div');
+    modalContainer.appendChild(div);
+    setRoot(div);
+
+    return () => {
+      modalContainer.removeChild(div);
+      setRoot(null);
+    };
+  }, [modalContainer]);
+
+  useEscapeHandling(onEscape || onClose);
+  useEffect(() => {
+    if (noMouseClose) {
+      return noop;
     }
+    return handleOutsideClick(
+      node => {
+        // ignore clicks that originate in the calling/pip
+        // when we're not handling a component in the calling/pip
+        if (
+          modalContainer === document.body &&
+          node instanceof Element &&
+          node.closest('.module-calling__modal-container')
+        ) {
+          return false;
+        }
+        onClose();
+        return true;
+      },
+      { containerElements: [containerRef], name: modalName }
+    );
+  }, [noMouseClose, onClose, containerRef, modalName, modalContainer]);
 
-    useEffect(() => {
-      const div = document.createElement('div');
-      modalContainer.appendChild(div);
-      setRoot(div);
+  const className = classNames([
+    theme ? themeClassName(theme) : undefined,
+    onTopOfEverything ? 'module-modal-host--on-top-of-everything' : undefined,
+  ]);
+  const getClassName = getClassNamesFor('module-modal-host', moduleClassName);
 
-      return () => {
-        modalContainer.removeChild(div);
-        setRoot(null);
-      };
-    }, [modalContainer]);
-
-    useEscapeHandling(onEscape || onClose);
-    useEffect(() => {
-      if (noMouseClose) {
-        return noop;
-      }
-      return handleOutsideClick(
-        node => {
-          // ignore clicks that originate in the calling/pip
-          // when we're not handling a component in the calling/pip
-          if (
-            modalContainer === document.body &&
-            node instanceof Element &&
-            node.closest('.module-calling__modal-container')
-          ) {
-            return false;
-          }
-          onClose();
-          return true;
-        },
-        { containerElements: [containerRef], name: modalName }
-      );
-    }, [noMouseClose, onClose, containerRef, modalName, modalContainer]);
-
-    const className = classNames([
-      theme ? themeClassName(theme) : undefined,
-      onTopOfEverything ? 'module-modal-host--on-top-of-everything' : undefined,
-    ]);
-    const getClassName = getClassNamesFor('module-modal-host', moduleClassName);
-
-    const modalContent = (
-      <div className={className}>
-        <animated.div
-          role="presentation"
-          className={getClassName('__overlay')}
-          style={overlayStyles}
-        />
-        <div className={getClassName('__overlay-container')}>
-          <div ref={containerRef} className={getClassName('__width-container')}>
-            {children}
-          </div>
+  const modalContent = (
+    <div className={className}>
+      <animated.div
+        role="presentation"
+        className={getClassName('__overlay')}
+        style={overlayStyles}
+      />
+      <div className={getClassName('__overlay-container')}>
+        <div ref={containerRef} className={getClassName('__width-container')}>
+          {children}
         </div>
       </div>
-    );
+    </div>
+  );
 
-    return root
-      ? createPortal(
-          useFocusTrap ? (
-            <FocusTrap
-              focusTrapOptions={{
-                allowOutsideClick: ({ target }) => {
-                  if (!target || !(target instanceof HTMLElement)) {
-                    return false;
-                  }
-
-                  // Exemptions:
-                  // - TitleBar should always receive clicks.
-                  // - Quill suggestions since they are placed in the document.body
-                  // - Calling module (and pip) are always above everything else
-                  const exemptParent = target.closest(
-                    '.TitleBarContainer__title, ' +
-                      '.module-composition-input__suggestions, ' +
-                      '.module-calling__modal-container'
-                  );
-                  if (exemptParent) {
-                    return true;
-                  }
+  return root
+    ? createPortal(
+        useFocusTrap ? (
+          <FocusTrap
+            focusTrapOptions={{
+              allowOutsideClick: ({ target }) => {
+                if (!target || !(target instanceof HTMLElement)) {
                   return false;
-                },
-              }}
-            >
-              {modalContent}
-            </FocusTrap>
-          ) : (
-            modalContent
-          ),
-          root
-        )
-      : null;
-  }
-);
+                }
+
+                // Exemptions:
+                // - TitleBar should always receive clicks.
+                // - Quill suggestions since they are placed in the document.body
+                // - Calling module (and pip) are always above everything else
+                const exemptParent = target.closest(
+                  '.TitleBarContainer__title, ' +
+                    '.module-composition-input__suggestions, ' +
+                    '.module-calling__modal-container'
+                );
+                if (exemptParent) {
+                  return true;
+                }
+                return false;
+              },
+            }}
+          >
+            {modalContent}
+          </FocusTrap>
+        ) : (
+          modalContent
+        ),
+        root
+      )
+    : null;
+});
diff --git a/ts/components/MyStories.stories.tsx b/ts/components/MyStories.stories.tsx
index 36945a4bb..c006cd086 100644
--- a/ts/components/MyStories.stories.tsx
+++ b/ts/components/MyStories.stories.tsx
@@ -56,6 +56,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <MyStories {...args} />;
 
 export const NoStories = Template.bind({});
diff --git a/ts/components/MyStories.tsx b/ts/components/MyStories.tsx
index 7d42cf6bc..5c9b82674 100644
--- a/ts/components/MyStories.tsx
+++ b/ts/components/MyStories.tsx
@@ -32,7 +32,7 @@ export type PropsType = {
   hasViewReceiptSetting: boolean;
 };
 
-export const MyStories = ({
+export function MyStories({
   i18n,
   myStories,
   onBack,
@@ -43,7 +43,7 @@ export const MyStories = ({
   retrySend,
   viewStory,
   hasViewReceiptSetting,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [confirmDeleteStory, setConfirmDeleteStory] = useState<
     StoryViewType | undefined
   >();
@@ -111,7 +111,7 @@ export const MyStories = ({
       )}
     </>
   );
-};
+}
 
 type StorySentPropsType = Pick<
   PropsType,
diff --git a/ts/components/MyStoryButton.stories.tsx b/ts/components/MyStoryButton.stories.tsx
index d18c4110d..b49b3b057 100644
--- a/ts/components/MyStoryButton.stories.tsx
+++ b/ts/components/MyStoryButton.stories.tsx
@@ -38,6 +38,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <MyStoryButton {...args} />;
 
 const interactionTest: PlayFunction<ReactFramework, PropsType> = async ({
diff --git a/ts/components/MyStoryButton.tsx b/ts/components/MyStoryButton.tsx
index 2858b5449..7815a51b1 100644
--- a/ts/components/MyStoryButton.tsx
+++ b/ts/components/MyStoryButton.tsx
@@ -29,7 +29,7 @@ function getNewestMyStory(story: MyStoryType): StoryViewType {
   return story.stories[0];
 }
 
-export const MyStoryButton = ({
+export function MyStoryButton({
   i18n,
   me,
   myStories,
@@ -37,7 +37,7 @@ export const MyStoryButton = ({
   onClick,
   queueStoryDownload,
   showToast,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [active, setActive] = useState(false);
 
   const newestStory = myStories.length
@@ -79,14 +79,12 @@ export const MyStoryButton = ({
           <div className="MyStories__avatar__add-story" />
         </div>
         <div className="StoryListItem__info">
-          <>
-            <div className="StoryListItem__info--title">
-              {i18n('Stories__mine')}
-            </div>
-            <div className="StoryListItem__info--timestamp">
-              {i18n('Stories__add')}
-            </div>
-          </>
+          <div className="StoryListItem__info--title">
+            {i18n('Stories__mine')}
+          </div>
+          <div className="StoryListItem__info--timestamp">
+            {i18n('Stories__add')}
+          </div>
         </div>
       </StoriesAddStoryButton>
     );
@@ -197,4 +195,4 @@ export const MyStoryButton = ({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/NeedsScreenRecordingPermissionsModal.tsx b/ts/components/NeedsScreenRecordingPermissionsModal.tsx
index e1f880e0d..15cb8f28e 100644
--- a/ts/components/NeedsScreenRecordingPermissionsModal.tsx
+++ b/ts/components/NeedsScreenRecordingPermissionsModal.tsx
@@ -19,11 +19,11 @@ function focusRef(el: HTMLElement | null) {
   }
 }
 
-export const NeedsScreenRecordingPermissionsModal = ({
+export function NeedsScreenRecordingPermissionsModal({
   i18n,
   openSystemPreferencesAction,
   toggleScreenRecordingPermissionsDialog,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const footer = (
     <>
       <Button
@@ -61,4 +61,4 @@ export const NeedsScreenRecordingPermissionsModal = ({
       </ol>
     </Modal>
   );
-};
+}
diff --git a/ts/components/NewlyCreatedGroupInvitedContactsDialog.stories.tsx b/ts/components/NewlyCreatedGroupInvitedContactsDialog.stories.tsx
index b83c1d364..a50347902 100644
--- a/ts/components/NewlyCreatedGroupInvitedContactsDialog.stories.tsx
+++ b/ts/components/NewlyCreatedGroupInvitedContactsDialog.stories.tsx
@@ -23,29 +23,33 @@ export default {
   title: 'Components/NewlyCreatedGroupInvitedContactsDialog',
 };
 
-export const OneContact = (): JSX.Element => (
-  <NewlyCreatedGroupInvitedContactsDialog
-    contacts={[conversations[0]]}
-    getPreferredBadge={() => undefined}
-    i18n={i18n}
-    onClose={action('onClose')}
-    theme={ThemeType.light}
-  />
-);
+export function OneContact(): JSX.Element {
+  return (
+    <NewlyCreatedGroupInvitedContactsDialog
+      contacts={[conversations[0]]}
+      getPreferredBadge={() => undefined}
+      i18n={i18n}
+      onClose={action('onClose')}
+      theme={ThemeType.light}
+    />
+  );
+}
 
 OneContact.story = {
   name: 'One contact',
 };
 
-export const TwoContacts = (): JSX.Element => (
-  <NewlyCreatedGroupInvitedContactsDialog
-    contacts={conversations}
-    getPreferredBadge={() => undefined}
-    i18n={i18n}
-    onClose={action('onClose')}
-    theme={ThemeType.light}
-  />
-);
+export function TwoContacts(): JSX.Element {
+  return (
+    <NewlyCreatedGroupInvitedContactsDialog
+      contacts={conversations}
+      getPreferredBadge={() => undefined}
+      i18n={i18n}
+      onClose={action('onClose')}
+      theme={ThemeType.light}
+    />
+  );
+}
 
 TwoContacts.story = {
   name: 'Two contacts',
diff --git a/ts/components/NewlyCreatedGroupInvitedContactsDialog.tsx b/ts/components/NewlyCreatedGroupInvitedContactsDialog.tsx
index 9ee255947..e2e902d3b 100644
--- a/ts/components/NewlyCreatedGroupInvitedContactsDialog.tsx
+++ b/ts/components/NewlyCreatedGroupInvitedContactsDialog.tsx
@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 
 import type { LocalizerType, ThemeType } from '../types/Util';
@@ -20,9 +20,13 @@ type PropsType = {
   theme: ThemeType;
 };
 
-export const NewlyCreatedGroupInvitedContactsDialog: FunctionComponent<
-  PropsType
-> = ({ contacts, getPreferredBadge, i18n, onClose, theme }) => {
+export function NewlyCreatedGroupInvitedContactsDialog({
+  contacts,
+  getPreferredBadge,
+  i18n,
+  onClose,
+  theme,
+}: PropsType): JSX.Element {
   let title: string;
   let body: ReactNode;
   if (contacts.length === 1) {
@@ -86,4 +90,4 @@ export const NewlyCreatedGroupInvitedContactsDialog: FunctionComponent<
       {body}
     </GroupDialog>
   );
-};
+}
diff --git a/ts/components/OutgoingGiftBadgeModal.stories.tsx b/ts/components/OutgoingGiftBadgeModal.stories.tsx
index c1722b7a4..8c9e22d44 100644
--- a/ts/components/OutgoingGiftBadgeModal.stories.tsx
+++ b/ts/components/OutgoingGiftBadgeModal.stories.tsx
@@ -44,18 +44,18 @@ export default {
   title: 'Components/OutgoingGiftBadgeModal',
 };
 
-export const Normal = (): JSX.Element => {
+export function Normal(): JSX.Element {
   return <OutgoingGiftBadgeModal {...createProps()} />;
-};
+}
 
-export const MissingBadge = (): JSX.Element => {
+export function MissingBadge(): JSX.Element {
   const props = {
     ...createProps(),
     getPreferredBadge: () => undefined,
   };
 
   return <OutgoingGiftBadgeModal {...props} />;
-};
+}
 
 MissingBadge.story = {
   name: 'Missing badge',
diff --git a/ts/components/OutgoingGiftBadgeModal.tsx b/ts/components/OutgoingGiftBadgeModal.tsx
index 7c4397c9c..f2d7ba5c6 100644
--- a/ts/components/OutgoingGiftBadgeModal.tsx
+++ b/ts/components/OutgoingGiftBadgeModal.tsx
@@ -21,13 +21,13 @@ export type PropsType = {
   getPreferredBadge: PreferredBadgeSelectorType;
 };
 
-export const OutgoingGiftBadgeModal = ({
+export function OutgoingGiftBadgeModal({
   recipientTitle,
   i18n,
   badgeId,
   hideOutgoingGiftBadgeModal,
   getPreferredBadge,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const badge = getPreferredBadge([{ id: badgeId }]);
   const badgeSize = 140;
   const badgeImagePath = getBadgeImageFileLocalPath(
@@ -75,4 +75,4 @@ export const OutgoingGiftBadgeModal = ({
       </div>
     </Modal>
   );
-};
+}
diff --git a/ts/components/PermissionsPopup.tsx b/ts/components/PermissionsPopup.tsx
index f698ee566..94f4febe3 100644
--- a/ts/components/PermissionsPopup.tsx
+++ b/ts/components/PermissionsPopup.tsx
@@ -19,12 +19,12 @@ function focusRef(el: HTMLElement | null) {
   }
 }
 
-export const PermissionsPopup = ({
+export function PermissionsPopup({
   i18n,
   message,
   onAccept,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   useEscapeHandling(onClose);
 
   return (
@@ -48,4 +48,4 @@ export const PermissionsPopup = ({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/PopperRootContext.tsx b/ts/components/PopperRootContext.tsx
index 7611a34ee..0bfa519af 100644
--- a/ts/components/PopperRootContext.tsx
+++ b/ts/components/PopperRootContext.tsx
@@ -29,10 +29,10 @@ export type ClassyProviderProps = {
   children?: React.ReactChildren;
 };
 
-export const ClassyProvider: React.FunctionComponent<ClassyProviderProps> = ({
+export function ClassyProvider({
   classes,
   children,
-}) => {
+}: ClassyProviderProps): JSX.Element {
   const api = React.useMemo(() => makeApi(classes), [classes]);
 
   return (
@@ -40,4 +40,4 @@ export const ClassyProvider: React.FunctionComponent<ClassyProviderProps> = ({
       {children}
     </PopperRootContext.Provider>
   );
-};
+}
diff --git a/ts/components/Preferences.stories.tsx b/ts/components/Preferences.stories.tsx
index 25f41573f..6af02a269 100644
--- a/ts/components/Preferences.stories.tsx
+++ b/ts/components/Preferences.stories.tsx
@@ -170,6 +170,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <Preferences {...args} />;
 
 export const _Preferences = Template.bind({});
diff --git a/ts/components/Preferences.tsx b/ts/components/Preferences.tsx
index 2acea09cb..39d1ca287 100644
--- a/ts/components/Preferences.tsx
+++ b/ts/components/Preferences.tsx
@@ -196,7 +196,7 @@ const DEFAULT_ZOOM_FACTORS = [
   },
 ];
 
-export const Preferences = ({
+export function Preferences({
   addCustomColor,
   availableCameras,
   availableMicrophones,
@@ -285,7 +285,7 @@ export const Preferences = ({
   whoCanFindMe,
   whoCanSeeMe,
   zoomFactor,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const storiesId = useUniqueId();
   const themeSelectId = useUniqueId();
   const zoomSelectId = useUniqueId();
@@ -1174,24 +1174,24 @@ export const Preferences = ({
       </div>
     </TitleBarContainer>
   );
-};
+}
 
-const SettingsRow = ({
+function SettingsRow({
   children,
   title,
 }: {
   children: ReactNode;
   title?: string;
-}): JSX.Element => {
+}): JSX.Element {
   return (
     <div className="Preferences__settings-row">
       {title && <h3 className="Preferences__padding">{title}</h3>}
       {children}
     </div>
   );
-};
+}
 
-const Control = ({
+function Control({
   left,
   onClick,
   right,
@@ -1199,7 +1199,7 @@ const Control = ({
   left: ReactNode;
   onClick?: () => unknown;
   right: ReactNode;
-}): JSX.Element => {
+}): JSX.Element {
   const content = (
     <>
       <div className="Preferences__control--key">{left}</div>
@@ -1220,7 +1220,7 @@ const Control = ({
   }
 
   return <div className="Preferences__control">{content}</div>;
-};
+}
 
 function localizeDefault(i18n: LocalizerType, deviceLabel: string): string {
   return deviceLabel.toLowerCase().startsWith('default')
diff --git a/ts/components/ProfileEditor.stories.tsx b/ts/components/ProfileEditor.stories.tsx
index 9325e4c30..0071ba3da 100644
--- a/ts/components/ProfileEditor.stories.tsx
+++ b/ts/components/ProfileEditor.stories.tsx
@@ -104,6 +104,7 @@ function renderEditUsernameModalBody(props: {
   );
 }
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => {
   const [skinTone, setSkinTone] = useState(0);
 
diff --git a/ts/components/ProfileEditor.tsx b/ts/components/ProfileEditor.tsx
index 6b8a6cac7..e54c99686 100644
--- a/ts/components/ProfileEditor.tsx
+++ b/ts/components/ProfileEditor.tsx
@@ -115,7 +115,7 @@ const DEFAULT_BIOS: Array<DefaultBio> = [
   },
 ];
 
-export const ProfileEditor = ({
+export function ProfileEditor({
   aboutEmoji,
   aboutText,
   color,
@@ -141,7 +141,7 @@ export const ProfileEditor = ({
   userAvatarData,
   username,
   usernameEditState,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const focusInputRef = useRef<HTMLInputElement | null>(null);
   const [editState, setEditState] = useState<EditState>(EditState.None);
   const [confirmDiscardAction, setConfirmDiscardAction] = useState<
@@ -666,4 +666,4 @@ export const ProfileEditor = ({
       <div className="ProfileEditor">{content}</div>
     </>
   );
-};
+}
diff --git a/ts/components/ProfileEditorModal.tsx b/ts/components/ProfileEditorModal.tsx
index 091eaa34f..d0d64cc80 100644
--- a/ts/components/ProfileEditorModal.tsx
+++ b/ts/components/ProfileEditorModal.tsx
@@ -23,7 +23,7 @@ type PropsType = {
 } & PropsDataType &
   Omit<ProfileEditorPropsType, 'onEditStateChanged' | 'onProfileChanged'>;
 
-export const ProfileEditorModal = ({
+export function ProfileEditorModal({
   hasError,
   i18n,
   myProfileChanged,
@@ -31,7 +31,7 @@ export const ProfileEditorModal = ({
   toggleProfileEditor,
   toggleProfileEditorHasError,
   ...restProps
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const MODAL_TITLES_BY_EDIT_STATE: Record<EditState, string> = {
     [EditState.BetterAvatar]: i18n('ProfileEditorModal--avatar'),
     [EditState.Bio]: i18n('ProfileEditorModal--about'),
@@ -58,24 +58,22 @@ export const ProfileEditorModal = ({
   }
 
   return (
-    <>
-      <Modal
-        modalName="ProfileEditorModal"
-        hasXButton
+    <Modal
+      modalName="ProfileEditorModal"
+      hasXButton
+      i18n={i18n}
+      onClose={toggleProfileEditor}
+      title={modalTitle}
+    >
+      <ProfileEditor
+        {...restProps}
         i18n={i18n}
-        onClose={toggleProfileEditor}
-        title={modalTitle}
-      >
-        <ProfileEditor
-          {...restProps}
-          i18n={i18n}
-          onEditStateChanged={editState => {
-            setModalTitle(MODAL_TITLES_BY_EDIT_STATE[editState]);
-          }}
-          onProfileChanged={myProfileChanged}
-          onSetSkinTone={onSetSkinTone}
-        />
-      </Modal>
-    </>
+        onEditStateChanged={editState => {
+          setModalTitle(MODAL_TITLES_BY_EDIT_STATE[editState]);
+        }}
+        onProfileChanged={myProfileChanged}
+        onSetSkinTone={onSetSkinTone}
+      />
+    </Modal>
   );
-};
+}
diff --git a/ts/components/Profiler.tsx b/ts/components/Profiler.tsx
index 3778c0048..fc2165bd2 100644
--- a/ts/components/Profiler.tsx
+++ b/ts/components/Profiler.tsx
@@ -20,9 +20,9 @@ type InternalPropsType = Readonly<{
   ): void;
 }>;
 
-const Fallback: React.FC<InternalPropsType> = ({ children }) => {
+function Fallback({ children }: InternalPropsType): JSX.Element {
   return <>{children}</>;
-};
+}
 
 const BaseProfiler: React.FC<InternalPropsType> =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -48,10 +48,10 @@ const onRender: InternalPropsType['onRender'] = (
   );
 };
 
-export const Profiler: React.FC<PropsType> = ({ id, children }) => {
+export function Profiler({ id, children }: PropsType): JSX.Element {
   return (
     <BaseProfiler id={id} onRender={onRender}>
       {children}
     </BaseProfiler>
   );
-};
+}
diff --git a/ts/components/ProgressDialog.stories.tsx b/ts/components/ProgressDialog.stories.tsx
index eb75a60cd..88b5ced0a 100644
--- a/ts/components/ProgressDialog.stories.tsx
+++ b/ts/components/ProgressDialog.stories.tsx
@@ -19,8 +19,8 @@ const createProps = (): PropsType => ({
   i18n,
 });
 
-export const Normal = (): JSX.Element => {
+export function Normal(): JSX.Element {
   const props = createProps();
 
   return <ProgressDialog {...props} />;
-};
+}
diff --git a/ts/components/ProgressDialog.tsx b/ts/components/ProgressDialog.tsx
index c5d9f3496..329a8d53b 100644
--- a/ts/components/ProgressDialog.tsx
+++ b/ts/components/ProgressDialog.tsx
@@ -10,7 +10,9 @@ export type PropsType = {
 };
 
 // TODO: This should use <Modal>. See DESKTOP-1038.
-export const ProgressDialog = React.memo(({ i18n }: PropsType) => {
+export const ProgressDialog = React.memo(function ProgressDialogInner({
+  i18n,
+}: PropsType) {
   return (
     <div className="module-progress-dialog">
       <div className="module-progress-dialog__spinner">
diff --git a/ts/components/ProgressModal.stories.tsx b/ts/components/ProgressModal.stories.tsx
index 0b26ebc63..ae82f83a0 100644
--- a/ts/components/ProgressModal.stories.tsx
+++ b/ts/components/ProgressModal.stories.tsx
@@ -14,6 +14,6 @@ export default {
   title: 'Components/ProgressModal',
 };
 
-export const Normal = (): JSX.Element => {
+export function Normal(): JSX.Element {
   return <ProgressModal i18n={i18n} />;
-};
+}
diff --git a/ts/components/ProgressModal.tsx b/ts/components/ProgressModal.tsx
index ebbb9056f..c163cba1e 100644
--- a/ts/components/ProgressModal.tsx
+++ b/ts/components/ProgressModal.tsx
@@ -10,7 +10,9 @@ export type PropsType = {
   readonly i18n: LocalizerType;
 };
 
-export const ProgressModal = React.memo(({ i18n }: PropsType) => {
+export const ProgressModal = React.memo(function ProgressModalInner({
+  i18n,
+}: PropsType) {
   const [root, setRoot] = React.useState<HTMLElement | null>(null);
 
   // Note: We explicitly don't register for user interaction here, since this dialog
diff --git a/ts/components/QrCode.stories.tsx b/ts/components/QrCode.stories.tsx
index 4425757a1..380f7d09a 100644
--- a/ts/components/QrCode.stories.tsx
+++ b/ts/components/QrCode.stories.tsx
@@ -9,9 +9,11 @@ export default {
   title: 'Components/QrCode',
 };
 
-export const Default = (): JSX.Element => (
-  <QrCode
-    alt="Scan this little code!"
-    data="sgnl://linkdevice?uuid=gCkj0T2xiSUaPRhMYiF24w&pub_key=7RshtQrb3UTMowITe79uW9dgw_CLTGWenj0OT80i0HpH"
-  />
-);
+export function Default(): JSX.Element {
+  return (
+    <QrCode
+      alt="Scan this little code!"
+      data="sgnl://linkdevice?uuid=gCkj0T2xiSUaPRhMYiF24w&pub_key=7RshtQrb3UTMowITe79uW9dgw_CLTGWenj0OT80i0HpH"
+    />
+  );
+}
diff --git a/ts/components/ReactionPickerPicker.tsx b/ts/components/ReactionPickerPicker.tsx
index e7da8acf7..b5e8a2579 100644
--- a/ts/components/ReactionPickerPicker.tsx
+++ b/ts/components/ReactionPickerPicker.tsx
@@ -21,62 +21,69 @@ export const ReactionPickerPickerEmojiButton = React.forwardRef<
     onClick: () => unknown;
     title?: string;
   }
->(({ emoji, onClick, isSelected, title }, ref) => (
-  <button
-    type="button"
-    ref={ref}
-    tabIndex={0}
-    className={classNames(
-      'module-ReactionPickerPicker__button',
-      'module-ReactionPickerPicker__button--emoji',
-      isSelected && 'module-ReactionPickerPicker__button--selected'
-    )}
-    onClick={event => {
-      event.stopPropagation();
-      onClick();
-    }}
-    onKeyDown={event => {
-      if (event.key === 'Enter' || event.key === 'Space') {
+>(function ReactionPickerPickerEmojiButtonInner(
+  { emoji, onClick, isSelected, title },
+  ref
+) {
+  return (
+    <button
+      type="button"
+      ref={ref}
+      tabIndex={0}
+      className={classNames(
+        'module-ReactionPickerPicker__button',
+        'module-ReactionPickerPicker__button--emoji',
+        isSelected && 'module-ReactionPickerPicker__button--selected'
+      )}
+      onClick={event => {
         event.stopPropagation();
-        event.preventDefault();
         onClick();
-      }
-    }}
-  >
-    <Emoji size={48} emoji={emoji} title={title} />
-  </button>
-));
+      }}
+      onKeyDown={event => {
+        if (event.key === 'Enter' || event.key === 'Space') {
+          event.stopPropagation();
+          event.preventDefault();
+          onClick();
+        }
+      }}
+    >
+      <Emoji size={48} emoji={emoji} title={title} />
+    </button>
+  );
+});
 
-export const ReactionPickerPickerMoreButton = ({
+export function ReactionPickerPickerMoreButton({
   i18n,
   onClick,
 }: Readonly<{
   i18n: LocalizerType;
   onClick: () => unknown;
-}>): JSX.Element => (
-  <button
-    aria-label={i18n('Reactions--more')}
-    className="module-ReactionPickerPicker__button module-ReactionPickerPicker__button--more"
-    onClick={event => {
-      event.stopPropagation();
-      onClick();
-    }}
-    onKeyDown={event => {
-      if (event.key === 'Enter' || event.key === 'Space') {
+}>): JSX.Element {
+  return (
+    <button
+      aria-label={i18n('Reactions--more')}
+      className="module-ReactionPickerPicker__button module-ReactionPickerPicker__button--more"
+      onClick={event => {
         event.stopPropagation();
-        event.preventDefault();
         onClick();
-      }
-    }}
-    tabIndex={0}
-    title={i18n('Reactions--more')}
-    type="button"
-  >
-    <div className="module-ReactionPickerPicker__button--more__dot" />
-    <div className="module-ReactionPickerPicker__button--more__dot" />
-    <div className="module-ReactionPickerPicker__button--more__dot" />
-  </button>
-);
+      }}
+      onKeyDown={event => {
+        if (event.key === 'Enter' || event.key === 'Space') {
+          event.stopPropagation();
+          event.preventDefault();
+          onClick();
+        }
+      }}
+      tabIndex={0}
+      title={i18n('Reactions--more')}
+      type="button"
+    >
+      <div className="module-ReactionPickerPicker__button--more__dot" />
+      <div className="module-ReactionPickerPicker__button--more__dot" />
+      <div className="module-ReactionPickerPicker__button--more__dot" />
+    </button>
+  );
+}
 
 export const ReactionPickerPicker = forwardRef<
   HTMLDivElement,
@@ -86,21 +93,27 @@ export const ReactionPickerPicker = forwardRef<
     pickerStyle: ReactionPickerPickerStyle;
     style?: CSSProperties;
   }
->(({ children, isSomethingSelected, pickerStyle, style }, ref) => (
-  <div
-    className={classNames(
-      'module-ReactionPickerPicker',
-      isSomethingSelected && 'module-ReactionPickerPicker--something-selected',
-      {
-        'module-ReactionPickerPicker--picker-style':
-          pickerStyle === ReactionPickerPickerStyle.Picker,
-        'module-ReactionPickerPicker--menu-style':
-          pickerStyle === ReactionPickerPickerStyle.Menu,
-      }
-    )}
-    ref={ref}
-    style={style}
-  >
-    {children}
-  </div>
-));
+>(function ReactionPickerPickerInner(
+  { children, isSomethingSelected, pickerStyle, style },
+  ref
+) {
+  return (
+    <div
+      className={classNames(
+        'module-ReactionPickerPicker',
+        isSomethingSelected &&
+          'module-ReactionPickerPicker--something-selected',
+        {
+          'module-ReactionPickerPicker--picker-style':
+            pickerStyle === ReactionPickerPickerStyle.Picker,
+          'module-ReactionPickerPicker--menu-style':
+            pickerStyle === ReactionPickerPickerStyle.Menu,
+        }
+      )}
+      ref={ref}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+});
diff --git a/ts/components/SafetyNumberChangeDialog.stories.tsx b/ts/components/SafetyNumberChangeDialog.stories.tsx
index a6e8b33e7..83e2c7702 100644
--- a/ts/components/SafetyNumberChangeDialog.stories.tsx
+++ b/ts/components/SafetyNumberChangeDialog.stories.tsx
@@ -58,7 +58,7 @@ export default {
   title: 'Components/SafetyNumberChangeDialog',
 };
 
-export const SingleContactDialog = (): JSX.Element => {
+export function SingleContactDialog(): JSX.Element {
   const theme = useTheme();
   return (
     <SafetyNumberChangeDialog
@@ -80,9 +80,9 @@ export const SingleContactDialog = (): JSX.Element => {
       theme={theme}
     />
   );
-};
+}
 
-export const DifferentConfirmationText = (): JSX.Element => {
+export function DifferentConfirmationText(): JSX.Element {
   const theme = useTheme();
   return (
     <SafetyNumberChangeDialog
@@ -105,9 +105,9 @@ export const DifferentConfirmationText = (): JSX.Element => {
       theme={theme}
     />
   );
-};
+}
 
-export const MultiContactDialog = (): JSX.Element => {
+export function MultiContactDialog(): JSX.Element {
   const theme = useTheme();
   return (
     <SafetyNumberChangeDialog
@@ -133,9 +133,9 @@ export const MultiContactDialog = (): JSX.Element => {
       theme={theme}
     />
   );
-};
+}
 
-export const AllVerified = (): JSX.Element => {
+export function AllVerified(): JSX.Element {
   const theme = useTheme();
   return (
     <SafetyNumberChangeDialog
@@ -160,12 +160,12 @@ export const AllVerified = (): JSX.Element => {
       theme={theme}
     />
   );
-};
+}
 AllVerified.story = {
   name: 'All verified; Send button instead',
 };
 
-export const MultipleContactsAllWithBadges = (): JSX.Element => {
+export function MultipleContactsAllWithBadges(): JSX.Element {
   const theme = useTheme();
   return (
     <SafetyNumberChangeDialog
@@ -192,13 +192,13 @@ export const MultipleContactsAllWithBadges = (): JSX.Element => {
       theme={theme}
     />
   );
-};
+}
 
 MultipleContactsAllWithBadges.story = {
   name: 'Multiple contacts, all with badges',
 };
 
-export const TenContacts = (): JSX.Element => {
+export function TenContacts(): JSX.Element {
   const theme = useTheme();
   return (
     <SafetyNumberChangeDialog
@@ -231,13 +231,13 @@ export const TenContacts = (): JSX.Element => {
       theme={theme}
     />
   );
-};
+}
 
 TenContacts.story = {
   name: 'Ten contacts; first isReviewing = false, then scrolling dialog',
 };
 
-export const NoContacts = (): JSX.Element => {
+export function NoContacts(): JSX.Element {
   const theme = useTheme();
   return (
     <SafetyNumberChangeDialog
@@ -271,9 +271,9 @@ export const NoContacts = (): JSX.Element => {
       theme={theme}
     />
   );
-};
+}
 
-export const InMultipleStories = (): JSX.Element => {
+export function InMultipleStories(): JSX.Element {
   const theme = useTheme();
   return (
     <SafetyNumberChangeDialog
@@ -322,4 +322,4 @@ export const InMultipleStories = (): JSX.Element => {
       theme={theme}
     />
   );
-};
+}
diff --git a/ts/components/SafetyNumberChangeDialog.tsx b/ts/components/SafetyNumberChangeDialog.tsx
index 0d0259379..319ea0511 100644
--- a/ts/components/SafetyNumberChangeDialog.tsx
+++ b/ts/components/SafetyNumberChangeDialog.tsx
@@ -84,7 +84,7 @@ function getStartingDialogState(count: number): DialogState {
   return DialogState.StartingInReview;
 }
 
-export const SafetyNumberChangeDialog = ({
+export function SafetyNumberChangeDialog({
   confirmText,
   contacts,
   getPreferredBadge,
@@ -94,7 +94,7 @@ export const SafetyNumberChangeDialog = ({
   removeFromStory,
   renderSafetyNumber,
   theme,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const totalCount = contacts.reduce(
     (count, item) => count + item.contacts.length,
     0
@@ -260,7 +260,7 @@ export const SafetyNumberChangeDialog = ({
       </div>
     </ConfirmationDialog>
   );
-};
+}
 
 function ContactSection({
   section,
diff --git a/ts/components/SafetyNumberModal.tsx b/ts/components/SafetyNumberModal.tsx
index 6b8d9e97d..ef938ef8a 100644
--- a/ts/components/SafetyNumberModal.tsx
+++ b/ts/components/SafetyNumberModal.tsx
@@ -10,11 +10,11 @@ type PropsType = {
   toggleSafetyNumberModal: () => unknown;
 } & Omit<SafetyNumberViewerPropsType, 'onClose'>;
 
-export const SafetyNumberModal = ({
+export function SafetyNumberModal({
   i18n,
   toggleSafetyNumberModal,
   ...safetyNumberViewerProps
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   return (
     <Modal
       modalName="SafetyNumberModal"
@@ -31,4 +31,4 @@ export const SafetyNumberModal = ({
       />
     </Modal>
   );
-};
+}
diff --git a/ts/components/SafetyNumberViewer.stories.tsx b/ts/components/SafetyNumberViewer.stories.tsx
index 1a0881578..3a047e563 100644
--- a/ts/components/SafetyNumberViewer.stories.tsx
+++ b/ts/components/SafetyNumberViewer.stories.tsx
@@ -64,11 +64,11 @@ export default {
   title: 'Components/SafetyNumberViewer',
 };
 
-export const SafetyNumber = (): JSX.Element => {
+export function SafetyNumber(): JSX.Element {
   return <SafetyNumberViewer {...createProps({})} />;
-};
+}
 
-export const SafetyNumberNotVerified = (): JSX.Element => {
+export function SafetyNumberNotVerified(): JSX.Element {
   return (
     <SafetyNumberViewer
       {...createProps({
@@ -79,13 +79,13 @@ export const SafetyNumberNotVerified = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 SafetyNumberNotVerified.story = {
   name: 'Safety Number (not verified)',
 };
 
-export const VerificationDisabled = (): JSX.Element => {
+export function VerificationDisabled(): JSX.Element {
   return (
     <SafetyNumberViewer
       {...createProps({
@@ -93,9 +93,9 @@ export const VerificationDisabled = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
-export const SafetyNumberDialogClose = (): JSX.Element => {
+export function SafetyNumberDialogClose(): JSX.Element {
   return (
     <SafetyNumberViewer
       {...createProps({
@@ -103,13 +103,13 @@ export const SafetyNumberDialogClose = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 SafetyNumberDialogClose.story = {
   name: 'Safety Number (dialog close)',
 };
 
-export const JustProfileAndNumber = (): JSX.Element => {
+export function JustProfileAndNumber(): JSX.Element {
   return (
     <SafetyNumberViewer
       {...createProps({
@@ -117,13 +117,13 @@ export const JustProfileAndNumber = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 JustProfileAndNumber.story = {
   name: 'Just Profile and Number',
 };
 
-export const JustNumber = (): JSX.Element => {
+export function JustNumber(): JSX.Element {
   return (
     <SafetyNumberViewer
       {...createProps({
@@ -131,9 +131,9 @@ export const JustNumber = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
-export const NoPhoneNumberCannotVerify = (): JSX.Element => {
+export function NoPhoneNumberCannotVerify(): JSX.Element {
   return (
     <SafetyNumberViewer
       {...createProps({
@@ -141,7 +141,7 @@ export const NoPhoneNumberCannotVerify = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 NoPhoneNumberCannotVerify.story = {
   name: 'No Phone Number (cannot verify)',
diff --git a/ts/components/SafetyNumberViewer.tsx b/ts/components/SafetyNumberViewer.tsx
index e2519d542..935d6b4f7 100644
--- a/ts/components/SafetyNumberViewer.tsx
+++ b/ts/components/SafetyNumberViewer.tsx
@@ -17,7 +17,7 @@ export type PropsType = {
   verificationDisabled: boolean;
 };
 
-export const SafetyNumberViewer = ({
+export function SafetyNumberViewer({
   contact,
   generateSafetyNumber,
   i18n,
@@ -25,7 +25,7 @@ export const SafetyNumberViewer = ({
   safetyNumber,
   toggleVerified,
   verificationDisabled,
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   React.useEffect(() => {
     if (!contact) {
       return;
@@ -94,7 +94,7 @@ export const SafetyNumberViewer = ({
       </div>
     </div>
   );
-};
+}
 
 function getPlaceholder(): string {
   return Array.from(Array(12))
diff --git a/ts/components/SampleMessageBubbles.tsx b/ts/components/SampleMessageBubbles.tsx
index ae6814fca..b71a49408 100644
--- a/ts/components/SampleMessageBubbles.tsx
+++ b/ts/components/SampleMessageBubbles.tsx
@@ -16,7 +16,7 @@ export type PropsType = {
 
 const A_FEW_DAYS_AGO = 60 * 60 * 24 * 5 * 1000;
 
-const SampleMessage = ({
+function SampleMessage({
   color = 'ultramarine',
   direction,
   i18n,
@@ -32,44 +32,46 @@ const SampleMessage = ({
   timestampDeltaFromNow: number;
   status: 'delivered' | 'read' | 'sent';
   style?: CSSProperties;
-}): JSX.Element => (
-  <div className={`module-message module-message--${direction}`}>
-    <div className="module-message__container-outer">
-      <div
-        className={`module-message__container module-message__container--${direction} module-message__container--${direction}-${color}`}
-        style={style}
-      >
+}): JSX.Element {
+  return (
+    <div className={`module-message module-message--${direction}`}>
+      <div className="module-message__container-outer">
         <div
-          dir="auto"
-          className={`module-message__text module-message__text--${direction}`}
+          className={`module-message__container module-message__container--${direction} module-message__container--${direction}-${color}`}
+          style={style}
         >
-          <span>{text}</span>
-        </div>
-        <div
-          className={`module-message__metadata module-message__metadata--${direction}`}
-        >
-          <span
-            className={`module-message__metadata__date module-message__metadata__date--${direction}`}
+          <div
+            dir="auto"
+            className={`module-message__text module-message__text--${direction}`}
           >
-            {formatTime(i18n, Date.now() - timestampDeltaFromNow, Date.now())}
-          </span>
-          {direction === 'outgoing' && (
-            <div
-              className={`module-message__metadata__status-icon module-message__metadata__status-icon--${status}`}
-            />
-          )}
+            <span>{text}</span>
+          </div>
+          <div
+            className={`module-message__metadata module-message__metadata--${direction}`}
+          >
+            <span
+              className={`module-message__metadata__date module-message__metadata__date--${direction}`}
+            >
+              {formatTime(i18n, Date.now() - timestampDeltaFromNow, Date.now())}
+            </span>
+            {direction === 'outgoing' && (
+              <div
+                className={`module-message__metadata__status-icon module-message__metadata__status-icon--${status}`}
+              />
+            )}
+          </div>
         </div>
       </div>
     </div>
-  </div>
-);
+  );
+}
 
-export const SampleMessageBubbles = ({
+export function SampleMessageBubbles({
   backgroundStyle = {},
   color,
   i18n,
   includeAnotherBubble = false,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const firstBubbleStyle = includeAnotherBubble ? backgroundStyle : undefined;
   return (
     <>
@@ -110,4 +112,4 @@ export const SampleMessageBubbles = ({
       <br style={{ clear: 'both' }} />
     </>
   );
-};
+}
diff --git a/ts/components/SearchInput.tsx b/ts/components/SearchInput.tsx
index 642f287ca..f25994585 100644
--- a/ts/components/SearchInput.tsx
+++ b/ts/components/SearchInput.tsx
@@ -30,7 +30,7 @@ export type PropTypes = {
 const BASE_CLASS_NAME = 'module-SearchInput';
 
 export const SearchInput = forwardRef<HTMLInputElement, PropTypes>(
-  (
+  function SearchInputInner(
     {
       children,
       disabled = false,
@@ -46,7 +46,7 @@ export const SearchInput = forwardRef<HTMLInputElement, PropTypes>(
       value,
     },
     ref
-  ) => {
+  ) {
     const getClassName = getClassNamesFor(BASE_CLASS_NAME, moduleClassName);
     return (
       <div className={getClassName('__container')}>
diff --git a/ts/components/Select.stories.tsx b/ts/components/Select.stories.tsx
index 6c6a42422..82b938b15 100644
--- a/ts/components/Select.stories.tsx
+++ b/ts/components/Select.stories.tsx
@@ -10,7 +10,7 @@ export default {
   title: 'Components/Select',
 };
 
-export const Normal = (): JSX.Element => {
+export function Normal(): JSX.Element {
   const [value, setValue] = useState(0);
 
   const onChange = action('onChange');
@@ -29,20 +29,22 @@ export const Normal = (): JSX.Element => {
       }}
     />
   );
-};
+}
 
-export const WithDisabledOptions = (): JSX.Element => (
-  <Select
-    options={[
-      { value: 'a', text: 'Apples' },
-      { value: 'b', text: 'Bananas', disabled: true },
-      { value: 'c', text: 'Cabbage' },
-      { value: 'd', text: 'Durian', disabled: true },
-    ]}
-    onChange={action('onChange')}
-    value="c"
-  />
-);
+export function WithDisabledOptions(): JSX.Element {
+  return (
+    <Select
+      options={[
+        { value: 'a', text: 'Apples' },
+        { value: 'b', text: 'Bananas', disabled: true },
+        { value: 'c', text: 'Cabbage' },
+        { value: 'd', text: 'Durian', disabled: true },
+      ]}
+      onChange={action('onChange')}
+      value="c"
+    />
+  );
+}
 
 WithDisabledOptions.story = {
   name: 'With disabled options',
diff --git a/ts/components/Select.tsx b/ts/components/Select.tsx
index 68ad450ea..5732a7918 100644
--- a/ts/components/Select.tsx
+++ b/ts/components/Select.tsx
@@ -22,51 +22,49 @@ export type PropsType = Readonly<{
   value?: string | number;
 }>;
 
-export const Select = React.forwardRef(
-  (
-    {
-      ariaLabel,
-      disabled,
-      id,
-      moduleClassName,
-      name,
-      onChange,
-      options,
-      value,
-    }: PropsType,
-    ref: React.Ref<HTMLSelectElement>
-  ): JSX.Element => {
-    const onSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
-      onChange(event.target.value);
-    };
+export const Select = React.forwardRef(function SelectInner(
+  {
+    ariaLabel,
+    disabled,
+    id,
+    moduleClassName,
+    name,
+    onChange,
+    options,
+    value,
+  }: PropsType,
+  ref: React.Ref<HTMLSelectElement>
+): JSX.Element {
+  const onSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    onChange(event.target.value);
+  };
 
-    return (
-      <div className={classNames(['module-select', moduleClassName])}>
-        <select
-          aria-label={ariaLabel}
-          disabled={disabled}
-          id={id}
-          name={name}
-          value={value}
-          onChange={onSelectChange}
-          ref={ref}
-        >
-          {options.map(
-            ({ disabled: optionDisabled, text, value: optionValue }) => {
-              return (
-                <option
-                  disabled={optionDisabled}
-                  value={optionValue}
-                  key={optionValue}
-                  aria-label={text}
-                >
-                  {text}
-                </option>
-              );
-            }
-          )}
-        </select>
-      </div>
-    );
-  }
-);
+  return (
+    <div className={classNames(['module-select', moduleClassName])}>
+      <select
+        aria-label={ariaLabel}
+        disabled={disabled}
+        id={id}
+        name={name}
+        value={value}
+        onChange={onSelectChange}
+        ref={ref}
+      >
+        {options.map(
+          ({ disabled: optionDisabled, text, value: optionValue }) => {
+            return (
+              <option
+                disabled={optionDisabled}
+                value={optionValue}
+                key={optionValue}
+                aria-label={text}
+              >
+                {text}
+              </option>
+            );
+          }
+        )}
+      </select>
+    </div>
+  );
+});
diff --git a/ts/components/SendStoryModal.stories.tsx b/ts/components/SendStoryModal.stories.tsx
index 4a5604ef4..5c62f1941 100644
--- a/ts/components/SendStoryModal.stories.tsx
+++ b/ts/components/SendStoryModal.stories.tsx
@@ -73,6 +73,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <SendStoryModal {...args} />;
 
 export const Modal = Template.bind({});
diff --git a/ts/components/SendStoryModal.tsx b/ts/components/SendStoryModal.tsx
index e30256b53..955d745c0 100644
--- a/ts/components/SendStoryModal.tsx
+++ b/ts/components/SendStoryModal.tsx
@@ -113,7 +113,7 @@ function getListMemberUuids(
   return memberUuids;
 }
 
-export const SendStoryModal = ({
+export function SendStoryModal({
   draftAttachment,
   candidateConversations,
   distributionLists,
@@ -138,7 +138,7 @@ export const SendStoryModal = ({
   toggleGroupsForStorySend,
   mostRecentActiveStoryTimestampByGroupOrDistributionList,
   toggleSignalConnectionsModal,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [page, setPage] = useState<PageType>(Page.SendStory);
 
   const [confirmDiscardModal, confirmDiscardIf] = useConfirmDiscard(i18n);
@@ -987,4 +987,4 @@ export const SendStoryModal = ({
       {confirmDiscardModal}
     </>
   );
-};
+}
diff --git a/ts/components/SharedGroupNames.tsx b/ts/components/SharedGroupNames.tsx
index cdfb526f1..147450660 100644
--- a/ts/components/SharedGroupNames.tsx
+++ b/ts/components/SharedGroupNames.tsx
@@ -1,7 +1,6 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React from 'react';
 import { take } from 'lodash';
 
@@ -15,11 +14,11 @@ type PropsType = {
   sharedGroupNames: Array<string>;
 };
 
-export const SharedGroupNames: FunctionComponent<PropsType> = ({
+export function SharedGroupNames({
   i18n,
   nameClassName,
   sharedGroupNames,
-}) => {
+}: PropsType): JSX.Element {
   const firstThreeGroups = take(sharedGroupNames, 3).map((group, i) => (
     // We cannot guarantee uniqueness of group names
     // eslint-disable-next-line react/no-array-index-key
@@ -94,4 +93,4 @@ export const SharedGroupNames: FunctionComponent<PropsType> = ({
   }
 
   return <>{i18n('no-groups-in-common')}</>;
-};
+}
diff --git a/ts/components/ShortcutGuide.stories.tsx b/ts/components/ShortcutGuide.stories.tsx
index add18a970..055ad3e38 100644
--- a/ts/components/ShortcutGuide.stories.tsx
+++ b/ts/components/ShortcutGuide.stories.tsx
@@ -33,17 +33,17 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   ),
 });
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   const props = createProps({});
   return <ShortcutGuide {...props} />;
-};
+}
 
-export const Mac = (): JSX.Element => {
+export function Mac(): JSX.Element {
   const props = createProps({ platform: 'darwin' });
   return <ShortcutGuide {...props} />;
-};
+}
 
-export const HasStickers = (): JSX.Element => {
+export function HasStickers(): JSX.Element {
   const props = createProps({ hasInstalledStickers: true });
   return <ShortcutGuide {...props} />;
-};
+}
diff --git a/ts/components/ShortcutGuide.tsx b/ts/components/ShortcutGuide.tsx
index 76579ff64..3c27182a6 100644
--- a/ts/components/ShortcutGuide.tsx
+++ b/ts/components/ShortcutGuide.tsx
@@ -230,7 +230,7 @@ const CALLING_SHORTCUTS: Array<ShortcutType> = [
   },
 ];
 
-export const ShortcutGuide = (props: Props): JSX.Element => {
+export function ShortcutGuide(props: Props): JSX.Element {
   const { i18n, close, hasInstalledStickers, platform } = props;
   const isMacOS = platform === 'darwin';
 
@@ -308,7 +308,7 @@ export const ShortcutGuide = (props: Props): JSX.Element => {
       </div>
     </div>
   );
-};
+}
 
 function renderShortcut(
   shortcut: ShortcutType,
diff --git a/ts/components/ShortcutGuideModal.tsx b/ts/components/ShortcutGuideModal.tsx
index 066367100..ea22ba930 100644
--- a/ts/components/ShortcutGuideModal.tsx
+++ b/ts/components/ShortcutGuideModal.tsx
@@ -13,7 +13,9 @@ export type PropsType = {
   readonly i18n: LocalizerType;
 };
 
-export const ShortcutGuideModal = React.memo((props: PropsType) => {
+export const ShortcutGuideModal = React.memo(function ShortcutGuideModalInner(
+  props: PropsType
+) {
   const { i18n, close, hasInstalledStickers, platform } = props;
   const [root, setRoot] = React.useState<HTMLElement | null>(null);
 
diff --git a/ts/components/SignalConnectionsModal.stories.tsx b/ts/components/SignalConnectionsModal.stories.tsx
index 49adcd1ba..dec509bb5 100644
--- a/ts/components/SignalConnectionsModal.stories.tsx
+++ b/ts/components/SignalConnectionsModal.stories.tsx
@@ -22,6 +22,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <SignalConnectionsModal {...args} />;
 
 export const Modal = Template.bind({});
diff --git a/ts/components/SignalConnectionsModal.tsx b/ts/components/SignalConnectionsModal.tsx
index 9f392da95..1e545f534 100644
--- a/ts/components/SignalConnectionsModal.tsx
+++ b/ts/components/SignalConnectionsModal.tsx
@@ -13,10 +13,10 @@ export type PropsType = {
   onClose: () => unknown;
 };
 
-export const SignalConnectionsModal = ({
+export function SignalConnectionsModal({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Modal
       modalName="SignalConnectionsModal"
@@ -57,4 +57,4 @@ export const SignalConnectionsModal = ({
       </div>
     </Modal>
   );
-};
+}
diff --git a/ts/components/Slider.stories.tsx b/ts/components/Slider.stories.tsx
index e13d8fe31..897641df0 100644
--- a/ts/components/Slider.stories.tsx
+++ b/ts/components/Slider.stories.tsx
@@ -18,14 +18,16 @@ const createProps = (): PropsType => ({
   value: 30,
 });
 
-export const Default = (): JSX.Element => <Slider {...createProps()} />;
+export function Default(): JSX.Element {
+  return <Slider {...createProps()} />;
+}
 
-export const DraggableTest = (): JSX.Element => {
-  function StatefulSliderController(props: PropsType): JSX.Element {
-    const [value, setValue] = useState(30);
+function StatefulSliderController(props: PropsType): JSX.Element {
+  const [value, setValue] = useState(30);
 
-    return <Slider {...props} onChange={setValue} value={value} />;
-  }
+  return <Slider {...props} onChange={setValue} value={value} />;
+}
 
+export function DraggableTest(): JSX.Element {
   return <StatefulSliderController {...createProps()} />;
-};
+}
diff --git a/ts/components/Slider.tsx b/ts/components/Slider.tsx
index d39f270e9..ce55a359a 100644
--- a/ts/components/Slider.tsx
+++ b/ts/components/Slider.tsx
@@ -14,14 +14,14 @@ export type PropsType = {
   value: number;
 };
 
-export const Slider = ({
+export function Slider({
   containerStyle = {},
   label,
   handleStyle = {},
   moduleClassName,
   onChange,
   value,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const diff = useRef<number>(0);
   const handleRef = useRef<HTMLDivElement | null>(null);
   const sliderRef = useRef<HTMLDivElement | null>(null);
@@ -124,4 +124,4 @@ export const Slider = ({
       />
     </div>
   );
-};
+}
diff --git a/ts/components/Spinner.stories.tsx b/ts/components/Spinner.stories.tsx
index 5f6915288..bd73aa4e7 100644
--- a/ts/components/Spinner.stories.tsx
+++ b/ts/components/Spinner.stories.tsx
@@ -25,13 +25,13 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   ),
 });
 
-export const Normal = (): JSX.Element => {
+export function Normal(): JSX.Element {
   const props = createProps();
 
   return <Spinner {...props} />;
-};
+}
 
-export const SvgSizes = (): JSX.Element => {
+export function SvgSizes(): JSX.Element {
   const props = createProps();
 
   return (
@@ -41,13 +41,13 @@ export const SvgSizes = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
 
 SvgSizes.story = {
   name: 'SVG Sizes',
 };
 
-export const Directions = (): JSX.Element => {
+export function Directions(): JSX.Element {
   const props = createProps();
 
   return (
@@ -57,4 +57,4 @@ export const Directions = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
diff --git a/ts/components/Spinner.tsx b/ts/components/Spinner.tsx
index 3419a12d6..96094732a 100644
--- a/ts/components/Spinner.tsx
+++ b/ts/components/Spinner.tsx
@@ -28,14 +28,14 @@ export type Props = {
   svgSize: SpinnerSvgSize;
 };
 
-export const Spinner = ({
+export function Spinner({
   ariaLabel,
   direction,
   moduleClassName,
   role,
   size,
   svgSize,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const getClassName = getClassNamesFor('module-spinner', moduleClassName);
 
   return (
@@ -71,4 +71,4 @@ export const Spinner = ({
       />
     </div>
   );
-};
+}
diff --git a/ts/components/StandaloneRegistration.tsx b/ts/components/StandaloneRegistration.tsx
index 87e507c7f..395efe8c3 100644
--- a/ts/components/StandaloneRegistration.tsx
+++ b/ts/components/StandaloneRegistration.tsx
@@ -10,13 +10,13 @@ import { strictAssert } from '../util/assert';
 import { parseNumber } from '../util/libphonenumberUtil';
 import { getChallengeURL } from '../challenge';
 
-const PhoneInput = ({
+function PhoneInput({
   onValidation,
   onNumberChange,
 }: {
   onValidation: (isValid: boolean) => void;
   onNumberChange: (number?: string) => void;
-}): JSX.Element => {
+}): JSX.Element {
   const [isValid, setIsValid] = useState(false);
   const pluginRef = useRef<Plugin | undefined>();
   const elemRef = useRef<HTMLInputElement | null>(null);
@@ -90,9 +90,9 @@ const PhoneInput = ({
       </div>
     </div>
   );
-};
+}
 
-export const StandaloneRegistration = ({
+export function StandaloneRegistration({
   onComplete,
   requestVerification,
   registerSingleDevice,
@@ -104,7 +104,7 @@ export const StandaloneRegistration = ({
     token: string
   ) => Promise<void>;
   registerSingleDevice: (number: string, code: string) => Promise<void>;
-}): JSX.Element => {
+}): JSX.Element {
   useEffect(() => {
     window.readyForUpdates();
   }, []);
@@ -269,4 +269,4 @@ export const StandaloneRegistration = ({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/StopPropagation.tsx b/ts/components/StopPropagation.tsx
index bbeed3708..c8b059c56 100644
--- a/ts/components/StopPropagation.tsx
+++ b/ts/components/StopPropagation.tsx
@@ -5,19 +5,21 @@ import type { ReactNode } from 'react';
 import React from 'react';
 
 // Whenever you don't want click or key events to propagate into their parent container
-export const StopPropagation = ({
+export function StopPropagation({
   children,
   className,
 }: {
   children: ReactNode;
   className?: string;
-}): JSX.Element => (
-  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-  <div
-    className={className}
-    onClick={ev => ev.stopPropagation()}
-    onKeyDown={ev => ev.stopPropagation()}
-  >
-    {children}
-  </div>
-);
+}): JSX.Element {
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      className={className}
+      onClick={ev => ev.stopPropagation()}
+      onKeyDown={ev => ev.stopPropagation()}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/ts/components/Stories.stories.tsx b/ts/components/Stories.stories.tsx
index 19f463809..7ec82c000 100644
--- a/ts/components/Stories.stories.tsx
+++ b/ts/components/Stories.stories.tsx
@@ -59,6 +59,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <Stories {...args} />;
 
 export const Blank = Template.bind({});
diff --git a/ts/components/Stories.tsx b/ts/components/Stories.tsx
index d757f2198..1a7c7185c 100644
--- a/ts/components/Stories.tsx
+++ b/ts/components/Stories.tsx
@@ -54,7 +54,7 @@ export type PropsType = {
   viewUserStories: ViewUserStoriesActionCreatorType;
 };
 
-export const Stories = ({
+export function Stories({
   addStoryData,
   deleteStoryForEveryone,
   getPreferredBadge,
@@ -80,7 +80,7 @@ export const Stories = ({
   toggleStoriesView,
   viewStory,
   viewUserStories,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const width = getWidthFromPreferredWidth(preferredWidthFromStorage, {
     requiresFullWidth: true,
   });
@@ -150,4 +150,4 @@ export const Stories = ({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/StoriesAddStoryButton.tsx b/ts/components/StoriesAddStoryButton.tsx
index 77b08cbf2..4090adce3 100644
--- a/ts/components/StoriesAddStoryButton.tsx
+++ b/ts/components/StoriesAddStoryButton.tsx
@@ -23,14 +23,14 @@ export type PropsType = {
   showToast: ShowToastActionCreatorType;
 };
 
-export const StoriesAddStoryButton = ({
+export function StoriesAddStoryButton({
   children,
   i18n,
   moduleClassName,
   onAddStory,
   showToast,
   onContextMenuShowingChanged,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <ContextMenu
       ariaLabel={i18n('Stories__add')}
@@ -90,4 +90,4 @@ export const StoriesAddStoryButton = ({
       {children}
     </ContextMenu>
   );
-};
+}
diff --git a/ts/components/StoriesPane.tsx b/ts/components/StoriesPane.tsx
index c2795c032..1741be4d0 100644
--- a/ts/components/StoriesPane.tsx
+++ b/ts/components/StoriesPane.tsx
@@ -73,7 +73,7 @@ export type PropsType = {
   viewUserStories: ViewUserStoriesActionCreatorType;
 };
 
-export const StoriesPane = ({
+export function StoriesPane({
   getPreferredBadge,
   hiddenStories,
   i18n,
@@ -89,7 +89,7 @@ export const StoriesPane = ({
   toggleHideStories,
   toggleStoriesView,
   viewUserStories,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [searchTerm, setSearchTerm] = useState('');
   const [isShowingHiddenStories, setIsShowingHiddenStories] = useState(false);
   const [renderedStories, setRenderedStories] =
@@ -151,76 +151,72 @@ export const StoriesPane = ({
         value={searchTerm}
       />
       <div className="Stories__pane__list">
-        <>
-          <MyStoryButton
+        <MyStoryButton
+          i18n={i18n}
+          me={me}
+          myStories={myStories}
+          onAddStory={onAddStory}
+          onClick={onMyStoriesClicked}
+          queueStoryDownload={queueStoryDownload}
+          showToast={showToast}
+        />
+        {renderedStories.map(story => (
+          <StoryListItem
+            conversationId={story.conversationId}
+            getPreferredBadge={getPreferredBadge}
+            hasReplies={story.hasReplies}
+            hasRepliesFromSelf={story.hasRepliesFromSelf}
+            group={story.group}
             i18n={i18n}
-            me={me}
-            myStories={myStories}
-            onAddStory={onAddStory}
-            onClick={onMyStoriesClicked}
+            key={story.storyView.timestamp}
+            onGoToConversation={conversationId => {
+              showConversation({ conversationId });
+              toggleStoriesView();
+            }}
+            onHideStory={toggleHideStories}
             queueStoryDownload={queueStoryDownload}
-            showToast={showToast}
+            story={story.storyView}
+            viewUserStories={viewUserStories}
           />
-          {renderedStories.map(story => (
-            <StoryListItem
-              conversationId={story.conversationId}
-              getPreferredBadge={getPreferredBadge}
-              hasReplies={story.hasReplies}
-              hasRepliesFromSelf={story.hasRepliesFromSelf}
-              group={story.group}
-              i18n={i18n}
-              key={story.storyView.timestamp}
-              onGoToConversation={conversationId => {
-                showConversation({ conversationId });
-                toggleStoriesView();
-              }}
-              onHideStory={toggleHideStories}
-              queueStoryDownload={queueStoryDownload}
-              story={story.storyView}
-              viewUserStories={viewUserStories}
-            />
-          ))}
-          {Boolean(hiddenStories.length) && (
-            <>
-              <button
-                className={classNames('Stories__hidden-stories', {
-                  'Stories__hidden-stories--expanded': isShowingHiddenStories,
-                })}
-                onClick={() =>
-                  setIsShowingHiddenStories(!isShowingHiddenStories)
-                }
-                type="button"
-              >
-                {i18n('Stories__hidden-stories')}
-              </button>
-              {isShowingHiddenStories &&
-                hiddenStories.map(story => (
-                  <StoryListItem
-                    conversationId={story.conversationId}
-                    getPreferredBadge={getPreferredBadge}
-                    group={story.group}
-                    i18n={i18n}
-                    isHidden
-                    key={story.storyView.timestamp}
-                    onGoToConversation={conversationId => {
-                      showConversation({ conversationId });
-                      toggleStoriesView();
-                    }}
-                    onHideStory={toggleHideStories}
-                    queueStoryDownload={queueStoryDownload}
-                    story={story.storyView}
-                    viewUserStories={viewUserStories}
-                  />
-                ))}
-            </>
-          )}
-          {!stories.length && (
-            <div className="Stories__pane__list--empty">
-              {i18n('Stories__list-empty')}
-            </div>
-          )}
-        </>
+        ))}
+        {Boolean(hiddenStories.length) && (
+          <>
+            <button
+              className={classNames('Stories__hidden-stories', {
+                'Stories__hidden-stories--expanded': isShowingHiddenStories,
+              })}
+              onClick={() => setIsShowingHiddenStories(!isShowingHiddenStories)}
+              type="button"
+            >
+              {i18n('Stories__hidden-stories')}
+            </button>
+            {isShowingHiddenStories &&
+              hiddenStories.map(story => (
+                <StoryListItem
+                  conversationId={story.conversationId}
+                  getPreferredBadge={getPreferredBadge}
+                  group={story.group}
+                  i18n={i18n}
+                  isHidden
+                  key={story.storyView.timestamp}
+                  onGoToConversation={conversationId => {
+                    showConversation({ conversationId });
+                    toggleStoriesView();
+                  }}
+                  onHideStory={toggleHideStories}
+                  queueStoryDownload={queueStoryDownload}
+                  story={story.storyView}
+                  viewUserStories={viewUserStories}
+                />
+              ))}
+          </>
+        )}
+        {!stories.length && (
+          <div className="Stories__pane__list--empty">
+            {i18n('Stories__list-empty')}
+          </div>
+        )}
       </div>
     </>
   );
-};
+}
diff --git a/ts/components/StoriesSettingsModal.stories.tsx b/ts/components/StoriesSettingsModal.stories.tsx
index c6e4a34f0..ee7dd0cb5 100644
--- a/ts/components/StoriesSettingsModal.stories.tsx
+++ b/ts/components/StoriesSettingsModal.stories.tsx
@@ -60,6 +60,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <StoriesSettingsModal {...args} />;
 
 export const MyStories = Template.bind({});
diff --git a/ts/components/StoriesSettingsModal.tsx b/ts/components/StoriesSettingsModal.tsx
index 0f747fa40..2507b517e 100644
--- a/ts/components/StoriesSettingsModal.tsx
+++ b/ts/components/StoriesSettingsModal.tsx
@@ -236,7 +236,7 @@ function GroupStoryItem({
   );
 }
 
-export const StoriesSettingsModal = ({
+export function StoriesSettingsModal({
   candidateConversations,
   distributionLists,
   groupStories,
@@ -258,7 +258,7 @@ export const StoriesSettingsModal = ({
   toggleStoriesView,
   setStoriesDisabled,
   getConversationByUuid,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [confirmDiscardModal, confirmDiscardIf] = useConfirmDiscard(i18n);
 
   const [listToEditId, setListToEditId] = useState<string | undefined>(
@@ -539,7 +539,7 @@ export const StoriesSettingsModal = ({
       {confirmDiscardModal}
     </>
   );
-};
+}
 
 type DistributionListSettingsModalPropsType = {
   i18n: LocalizerType;
@@ -559,7 +559,7 @@ type DistributionListSettingsModalPropsType = {
   | 'toggleSignalConnectionsModal'
 >;
 
-export const DistributionListSettingsModal = ({
+export function DistributionListSettingsModal({
   getPreferredBadge,
   i18n,
   listToEdit,
@@ -573,7 +573,7 @@ export const DistributionListSettingsModal = ({
   setSelectedContacts,
   toggleSignalConnectionsModal,
   signalConnectionsCount,
-}: DistributionListSettingsModalPropsType): JSX.Element => {
+}: DistributionListSettingsModalPropsType): JSX.Element {
   const [confirmRemoveMember, setConfirmRemoveMember] = useState<
     | undefined
     | {
@@ -761,7 +761,7 @@ export const DistributionListSettingsModal = ({
       )}
     </ModalPage>
   );
-};
+}
 
 type CheckboxRenderProps = {
   checkboxNode: ReactNode;
@@ -801,7 +801,7 @@ type EditMyStoryPrivacyPropsType = {
   'setMyStoriesToAllSignalConnections' | 'toggleSignalConnectionsModal'
 >;
 
-export const EditMyStoryPrivacy = ({
+export function EditMyStoryPrivacy({
   hasDisclaimerAbove,
   i18n,
   learnMore,
@@ -812,7 +812,7 @@ export const EditMyStoryPrivacy = ({
   setMyStoriesToAllSignalConnections,
   toggleSignalConnectionsModal,
   signalConnectionsCount,
-}: EditMyStoryPrivacyPropsType): JSX.Element => {
+}: EditMyStoryPrivacyPropsType): JSX.Element {
   const disclaimerElement = (
     <div className="StoriesSettingsModal__disclaimer">
       <Intl
@@ -935,7 +935,7 @@ export const EditMyStoryPrivacy = ({
       {!hasDisclaimerAbove && disclaimerElement}
     </>
   );
-};
+}
 
 type EditDistributionListModalPropsType = {
   onCreateList: (name: string, viewerUuids: Array<UUIDStringType>) => unknown;
@@ -956,7 +956,7 @@ type EditDistributionListModalPropsType = {
  * @param param0
  * @returns
  */
-export const EditDistributionListModal = ({
+export function EditDistributionListModal({
   candidateConversations,
   getPreferredBadge,
   i18n,
@@ -967,7 +967,7 @@ export const EditDistributionListModal = ({
   selectedContacts,
   setSelectedContacts,
   onBackButtonClick,
-}: EditDistributionListModalPropsType): JSX.Element => {
+}: EditDistributionListModalPropsType): JSX.Element {
   const [storyName, setStoryName] = useState('');
   const [searchTerm, setSearchTerm] = useState('');
 
@@ -1226,7 +1226,7 @@ export const EditDistributionListModal = ({
       )}
     </ModalPage>
   );
-};
+}
 
 type GroupStorySettingsModalProps = {
   i18n: LocalizerType;
@@ -1237,14 +1237,14 @@ type GroupStorySettingsModalProps = {
   onRemoveGroup(group: ConversationType): void;
 };
 
-export const GroupStorySettingsModal = ({
+export function GroupStorySettingsModal({
   i18n,
   group,
   onClose,
   onBackButtonClick,
   getConversationByUuid,
   onRemoveGroup,
-}: GroupStorySettingsModalProps): JSX.Element => {
+}: GroupStorySettingsModalProps): JSX.Element {
   const groupMemberships = getGroupMemberships(group, getConversationByUuid);
   return (
     <ModalPage
@@ -1319,4 +1319,4 @@ export const GroupStorySettingsModal = ({
       </button>
     </ModalPage>
   );
-};
+}
diff --git a/ts/components/StoryCreator.stories.tsx b/ts/components/StoryCreator.stories.tsx
index b89be2728..0b11f0dc8 100644
--- a/ts/components/StoryCreator.stories.tsx
+++ b/ts/components/StoryCreator.stories.tsx
@@ -69,6 +69,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <StoryCreator {...args} />;
 
 export const Default = Template.bind({});
diff --git a/ts/components/StoryCreator.tsx b/ts/components/StoryCreator.tsx
index b90a9ce82..bc9bcc7e8 100644
--- a/ts/components/StoryCreator.tsx
+++ b/ts/components/StoryCreator.tsx
@@ -72,7 +72,7 @@ export type PropsType = {
     | 'toggleSignalConnectionsModal'
   >;
 
-export const StoryCreator = ({
+export function StoryCreator({
   candidateConversations,
   debouncedMaybeGrabLinkPreview,
   distributionLists,
@@ -106,7 +106,7 @@ export const StoryCreator = ({
   toggleGroupsForStorySend,
   mostRecentActiveStoryTimestampByGroupOrDistributionList,
   toggleSignalConnectionsModal,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [draftAttachment, setDraftAttachment] = useState<
     AttachmentType | undefined
   >();
@@ -240,4 +240,4 @@ export const StoryCreator = ({
       )}
     </>
   );
-};
+}
diff --git a/ts/components/StoryDetailsModal.stories.tsx b/ts/components/StoryDetailsModal.stories.tsx
index fb0d7c75c..50b42db17 100644
--- a/ts/components/StoryDetailsModal.stories.tsx
+++ b/ts/components/StoryDetailsModal.stories.tsx
@@ -39,6 +39,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <StoryDetailsModal {...args} />;
 
 export const MyStory = Template.bind({});
diff --git a/ts/components/StoryDetailsModal.tsx b/ts/components/StoryDetailsModal.tsx
index 7af389ba2..d63184723 100644
--- a/ts/components/StoryDetailsModal.tsx
+++ b/ts/components/StoryDetailsModal.tsx
@@ -61,7 +61,7 @@ function getI18nKey(sendStatus: SendStatus | undefined): string {
   return 'from';
 }
 
-export const StoryDetailsModal = ({
+export function StoryDetailsModal({
   getPreferredBadge,
   i18n,
   onClose,
@@ -70,7 +70,7 @@ export const StoryDetailsModal = ({
   size,
   timestamp,
   expirationTimestamp,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   // the sender is included in the sendState data
   // but we don't want to show the sender in the "Sent To" list
   const actualRecipientsSendState = sendState?.filter(
@@ -269,4 +269,4 @@ export const StoryDetailsModal = ({
       {content}
     </Modal>
   );
-};
+}
diff --git a/ts/components/StoryDistributionListName.tsx b/ts/components/StoryDistributionListName.tsx
index 4f2029688..bcdfc81d7 100644
--- a/ts/components/StoryDistributionListName.tsx
+++ b/ts/components/StoryDistributionListName.tsx
@@ -12,10 +12,10 @@ type PropsType = {
   name: string;
 };
 
-export const StoryDistributionListName = ({
+export function StoryDistributionListName({
   i18n,
   id,
   name,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return <>{getStoryDistributionListName(i18n, id, name)}</>;
-};
+}
diff --git a/ts/components/StoryImage.stories.tsx b/ts/components/StoryImage.stories.tsx
index dbad9bf0d..ccdfa0f38 100644
--- a/ts/components/StoryImage.stories.tsx
+++ b/ts/components/StoryImage.stories.tsx
@@ -35,134 +35,152 @@ function getDefaultProps(): PropsType {
   };
 }
 
-export const GoodStory = (): JSX.Element => (
-  <StoryImage {...getDefaultProps()} />
-);
+export function GoodStory(): JSX.Element {
+  return <StoryImage {...getDefaultProps()} />;
+}
 
 GoodStory.story = {
   name: 'Good story',
 };
 
-export const GoodStoryThumbnail = (): JSX.Element => (
-  <StoryImage {...getDefaultProps()} isThumbnail />
-);
+export function GoodStoryThumbnail(): JSX.Element {
+  return <StoryImage {...getDefaultProps()} isThumbnail />;
+}
 
 GoodStoryThumbnail.story = {
   name: 'Good story (thumbnail)',
 };
 
-export const NotDownloaded = (): JSX.Element => (
-  <StoryImage {...getDefaultProps()} attachment={fakeAttachment()} />
-);
+export function NotDownloaded(): JSX.Element {
+  return <StoryImage {...getDefaultProps()} attachment={fakeAttachment()} />;
+}
 
 NotDownloaded.story = {
   name: 'Not downloaded',
 };
 
-export const NotDownloadedThumbnail = (): JSX.Element => (
-  <StoryImage
-    {...getDefaultProps()}
-    attachment={fakeAttachment()}
-    isThumbnail
-  />
-);
+export function NotDownloadedThumbnail(): JSX.Element {
+  return (
+    <StoryImage
+      {...getDefaultProps()}
+      attachment={fakeAttachment()}
+      isThumbnail
+    />
+  );
+}
 
 NotDownloadedThumbnail.story = {
   name: 'Not downloaded (thumbnail)',
 };
 
-export const PendingDownload = (): JSX.Element => (
-  <StoryImage
-    {...getDefaultProps()}
-    attachment={fakeAttachment({
-      pending: true,
-    })}
-  />
-);
+export function PendingDownload(): JSX.Element {
+  return (
+    <StoryImage
+      {...getDefaultProps()}
+      attachment={fakeAttachment({
+        pending: true,
+      })}
+    />
+  );
+}
 
 PendingDownload.story = {
   name: 'Pending download',
 };
 
-export const PendingDownloadThumbnail = (): JSX.Element => (
-  <StoryImage
-    {...getDefaultProps()}
-    attachment={fakeAttachment({
-      pending: true,
-    })}
-    isThumbnail
-  />
-);
+export function PendingDownloadThumbnail(): JSX.Element {
+  return (
+    <StoryImage
+      {...getDefaultProps()}
+      attachment={fakeAttachment({
+        pending: true,
+      })}
+      isThumbnail
+    />
+  );
+}
 
 PendingDownloadThumbnail.story = {
   name: 'Pending download (thumbnail)',
 };
 
-export const BrokenImage = (): JSX.Element => (
-  <StoryImage
-    {...getDefaultProps()}
-    attachment={fakeAttachment({
-      url: '/this/path/does/not/exist.jpg',
-    })}
-  />
-);
+export function BrokenImage(): JSX.Element {
+  return (
+    <StoryImage
+      {...getDefaultProps()}
+      attachment={fakeAttachment({
+        url: '/this/path/does/not/exist.jpg',
+      })}
+    />
+  );
+}
 
-export const BrokenImageThumbnail = (): JSX.Element => (
-  <StoryImage
-    {...getDefaultProps()}
-    attachment={fakeAttachment({
-      url: '/this/path/does/not/exist.jpg',
-    })}
-    isThumbnail
-  />
-);
+export function BrokenImageThumbnail(): JSX.Element {
+  return (
+    <StoryImage
+      {...getDefaultProps()}
+      attachment={fakeAttachment({
+        url: '/this/path/does/not/exist.jpg',
+      })}
+      isThumbnail
+    />
+  );
+}
 
 BrokenImageThumbnail.story = {
   name: 'Broken Image (thumbnail)',
 };
 
-export const Video = (): JSX.Element => (
-  <StoryImage
-    {...getDefaultProps()}
-    attachment={fakeAttachment({
-      contentType: VIDEO_MP4,
-      url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
-    })}
-  />
-);
+export function Video(): JSX.Element {
+  return (
+    <StoryImage
+      {...getDefaultProps()}
+      attachment={fakeAttachment({
+        contentType: VIDEO_MP4,
+        url: '/fixtures/pixabay-Soap-Bubble-7141.mp4',
+      })}
+    />
+  );
+}
 
-export const ErrorImage = (): JSX.Element => (
-  <StoryImage
-    {...getDefaultProps()}
-    attachment={fakeAttachment({
-      error: true,
-      url: '/this/path/does/not/exist.jpg',
-    })}
-  />
-);
+export function ErrorImage(): JSX.Element {
+  return (
+    <StoryImage
+      {...getDefaultProps()}
+      attachment={fakeAttachment({
+        error: true,
+        url: '/this/path/does/not/exist.jpg',
+      })}
+    />
+  );
+}
 
-export const ErrorImageThumbnail = (): JSX.Element => (
-  <StoryImage
-    {...getDefaultProps()}
-    attachment={fakeAttachment({
-      error: true,
-      url: '/this/path/does/not/exist.jpg',
-    })}
-    isThumbnail
-  />
-);
+export function ErrorImageThumbnail(): JSX.Element {
+  return (
+    <StoryImage
+      {...getDefaultProps()}
+      attachment={fakeAttachment({
+        error: true,
+        url: '/this/path/does/not/exist.jpg',
+      })}
+      isThumbnail
+    />
+  );
+}
 
 ErrorImageThumbnail.story = {
   name: 'Error Image (thumbnail)',
 };
 
-export const ErrorImageYou = (): JSX.Element => (
-  <StoryImage
-    {...getDefaultProps()}
-    isMe
-    attachment={fakeAttachment({
-      error: true,
-      url: '/this/path/does/not/exist.jpg',
-    })}
-  />
-);
+export function ErrorImageYou(): JSX.Element {
+  return (
+    <StoryImage
+      {...getDefaultProps()}
+      isMe
+      attachment={fakeAttachment({
+        error: true,
+        url: '/this/path/does/not/exist.jpg',
+      })}
+    />
+  );
+}
diff --git a/ts/components/StoryImage.tsx b/ts/components/StoryImage.tsx
index 4efa0eb6d..a828fcd86 100644
--- a/ts/components/StoryImage.tsx
+++ b/ts/components/StoryImage.tsx
@@ -37,7 +37,7 @@ export type PropsType = {
   readonly storyId: string;
 };
 
-export const StoryImage = ({
+export function StoryImage({
   attachment,
   children,
   firstName,
@@ -50,7 +50,7 @@ export const StoryImage = ({
   moduleClassName,
   queueStoryDownload,
   storyId,
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   const shouldDownloadAttachment =
     (!isDownloaded(attachment) && !isDownloading(attachment)) ||
     hasNotResolved(attachment);
@@ -170,4 +170,4 @@ export const StoryImage = ({
       {children}
     </div>
   );
-};
+}
diff --git a/ts/components/StoryLinkPreview.stories.tsx b/ts/components/StoryLinkPreview.stories.tsx
index f04d678d1..1df0ae1b0 100644
--- a/ts/components/StoryLinkPreview.stories.tsx
+++ b/ts/components/StoryLinkPreview.stories.tsx
@@ -48,6 +48,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<Props> = args => <StoryLinkPreview {...args} />;
 
 export const Default = Template.bind({});
diff --git a/ts/components/StoryLinkPreview.tsx b/ts/components/StoryLinkPreview.tsx
index 6c3f918aa..9f58b907e 100644
--- a/ts/components/StoryLinkPreview.tsx
+++ b/ts/components/StoryLinkPreview.tsx
@@ -16,7 +16,7 @@ export type Props = LinkPreviewType & {
   i18n: LocalizerType;
 };
 
-export const StoryLinkPreview = ({
+export function StoryLinkPreview({
   description,
   domain,
   forceCompactMode,
@@ -24,7 +24,7 @@ export const StoryLinkPreview = ({
   image,
   title,
   url,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const isImage = isImageAttachment(image);
   const location = domain || getDomain(String(url));
   const isCompact = forceCompactMode || !image;
@@ -90,4 +90,4 @@ export const StoryLinkPreview = ({
       {content}
     </div>
   );
-};
+}
diff --git a/ts/components/StoryListItem.stories.tsx b/ts/components/StoryListItem.stories.tsx
index 5cf5c51b8..14c85c49c 100644
--- a/ts/components/StoryListItem.stories.tsx
+++ b/ts/components/StoryListItem.stories.tsx
@@ -41,6 +41,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <StoryListItem {...args} />;
 
 export const SomeonesStory = Template.bind({});
diff --git a/ts/components/StoryListItem.tsx b/ts/components/StoryListItem.tsx
index f07da7112..67e5e8a66 100644
--- a/ts/components/StoryListItem.tsx
+++ b/ts/components/StoryListItem.tsx
@@ -78,7 +78,7 @@ function StoryListItemAvatar({
   );
 }
 
-export const StoryListItem = ({
+export function StoryListItem({
   conversationId,
   getPreferredBadge,
   group,
@@ -91,7 +91,7 @@ export const StoryListItem = ({
   queueStoryDownload,
   story,
   viewUserStories,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [hasConfirmHideStory, setHasConfirmHideStory] = useState(false);
 
   const { attachment, isUnread, sender, timestamp } = story;
@@ -168,22 +168,20 @@ export const StoryListItem = ({
           {...(group || sender)}
         />
         <div className="StoryListItem__info">
-          <>
-            <div className="StoryListItem__info--title">
-              {group ? group.title : title}
-              {isSignalOfficial && (
-                <span className="StoryListItem__signal-official" />
-              )}
-            </div>
-            {!isSignalOfficial && (
-              <MessageTimestamp
-                i18n={i18n}
-                isRelativeTime
-                module="StoryListItem__info--timestamp"
-                timestamp={timestamp}
-              />
+          <div className="StoryListItem__info--title">
+            {group ? group.title : title}
+            {isSignalOfficial && (
+              <span className="StoryListItem__signal-official" />
             )}
-          </>
+          </div>
+          {!isSignalOfficial && (
+            <MessageTimestamp
+              i18n={i18n}
+              isRelativeTime
+              module="StoryListItem__info--timestamp"
+              timestamp={timestamp}
+            />
+          )}
           {repliesElement}
         </div>
 
@@ -220,4 +218,4 @@ export const StoryListItem = ({
       )}
     </>
   );
-};
+}
diff --git a/ts/components/StoryViewer.stories.tsx b/ts/components/StoryViewer.stories.tsx
index 3fad0c0ce..f17947711 100644
--- a/ts/components/StoryViewer.stories.tsx
+++ b/ts/components/StoryViewer.stories.tsx
@@ -76,6 +76,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <StoryViewer {...args} />;
 
 export const SomeonesStory = Template.bind({});
diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx
index 71cf48a82..3e30750ec 100644
--- a/ts/components/StoryViewer.tsx
+++ b/ts/components/StoryViewer.tsx
@@ -118,7 +118,7 @@ enum Arrow {
   Right,
 }
 
-export const StoryViewer = ({
+export function StoryViewer({
   currentIndex,
   deleteGroupStoryReply,
   deleteGroupStoryReplyForEveryone,
@@ -155,7 +155,7 @@ export const StoryViewer = ({
   storyViewMode,
   viewStory,
   viewTarget,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [isShowingContextMenu, setIsShowingContextMenu] =
     useState<boolean>(false);
   const [storyDuration, setStoryDuration] = useState<number | undefined>();
@@ -827,52 +827,50 @@ export const StoryViewer = ({
                   tabIndex={0}
                   type="button"
                 >
-                  <>
-                    {isSent || replyCount > 0 ? (
-                      <span className="StoryViewer__reply__chevron">
-                        {isSent && !hasViewReceiptSetting && !replyCount && (
-                          <>{i18n('StoryViewer__views-off')}</>
-                        )}
-                        {isSent &&
-                          hasViewReceiptSetting &&
-                          (viewCount === 1 ? (
-                            <Intl
-                              i18n={i18n}
-                              id="MyStories__views--singular"
-                              components={[<strong>{viewCount}</strong>]}
-                            />
-                          ) : (
-                            <Intl
-                              i18n={i18n}
-                              id="MyStories__views--plural"
-                              components={[<strong>{viewCount}</strong>]}
-                            />
-                          ))}
-                        {(isSent || viewCount > 0) && replyCount > 0 && ' '}
-                        {replyCount > 0 &&
-                          (replyCount === 1 ? (
-                            <Intl
-                              i18n={i18n}
-                              id="MyStories__replies--singular"
-                              components={[<strong>{replyCount}</strong>]}
-                            />
-                          ) : (
-                            <Intl
-                              i18n={i18n}
-                              id="MyStories__replies--plural"
-                              components={[<strong>{replyCount}</strong>]}
-                            />
-                          ))}
-                      </span>
-                    ) : null}
-                    {!isSent && !replyCount && (
-                      <span className="StoryViewer__reply__arrow">
-                        {isGroupStory
-                          ? i18n('StoryViewer__reply-group')
-                          : i18n('StoryViewer__reply')}
-                      </span>
-                    )}
-                  </>
+                  {isSent || replyCount > 0 ? (
+                    <span className="StoryViewer__reply__chevron">
+                      {isSent && !hasViewReceiptSetting && !replyCount && (
+                        <>{i18n('StoryViewer__views-off')}</>
+                      )}
+                      {isSent &&
+                        hasViewReceiptSetting &&
+                        (viewCount === 1 ? (
+                          <Intl
+                            i18n={i18n}
+                            id="MyStories__views--singular"
+                            components={[<strong>{viewCount}</strong>]}
+                          />
+                        ) : (
+                          <Intl
+                            i18n={i18n}
+                            id="MyStories__views--plural"
+                            components={[<strong>{viewCount}</strong>]}
+                          />
+                        ))}
+                      {(isSent || viewCount > 0) && replyCount > 0 && ' '}
+                      {replyCount > 0 &&
+                        (replyCount === 1 ? (
+                          <Intl
+                            i18n={i18n}
+                            id="MyStories__replies--singular"
+                            components={[<strong>{replyCount}</strong>]}
+                          />
+                        ) : (
+                          <Intl
+                            i18n={i18n}
+                            id="MyStories__replies--plural"
+                            components={[<strong>{replyCount}</strong>]}
+                          />
+                        ))}
+                    </span>
+                  ) : null}
+                  {!isSent && !replyCount && (
+                    <span className="StoryViewer__reply__arrow">
+                      {isGroupStory
+                        ? i18n('StoryViewer__reply-group')
+                        : i18n('StoryViewer__reply')}
+                    </span>
+                  )}
                 </button>
               )}
             </div>
@@ -980,4 +978,4 @@ export const StoryViewer = ({
       </div>
     </FocusTrap>
   );
-};
+}
diff --git a/ts/components/StoryViewsNRepliesModal.stories.tsx b/ts/components/StoryViewsNRepliesModal.stories.tsx
index b8b768128..c6194af73 100644
--- a/ts/components/StoryViewsNRepliesModal.stories.tsx
+++ b/ts/components/StoryViewsNRepliesModal.stories.tsx
@@ -171,6 +171,7 @@ function getViewsAndReplies() {
   };
 }
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => {
   const [, updateArgs] = useArgs();
 
diff --git a/ts/components/StoryViewsNRepliesModal.tsx b/ts/components/StoryViewsNRepliesModal.tsx
index e1cc1e376..d5c0d3c77 100644
--- a/ts/components/StoryViewsNRepliesModal.tsx
+++ b/ts/components/StoryViewsNRepliesModal.tsx
@@ -113,7 +113,7 @@ export type PropsType = {
   deleteGroupStoryReplyForEveryone: (id: string) => void;
 };
 
-export const StoryViewsNRepliesModal = ({
+export function StoryViewsNRepliesModal({
   authorTitle,
   canReply,
   getPreferredBadge,
@@ -139,7 +139,7 @@ export const StoryViewsNRepliesModal = ({
   onChangeViewTarget,
   deleteGroupStoryReply,
   deleteGroupStoryReplyForEveryone,
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   const [deleteReplyId, setDeleteReplyId] = useState<string | undefined>(
     undefined
   );
@@ -497,7 +497,7 @@ export const StoryViewsNRepliesModal = ({
       )}
     </>
   );
-};
+}
 
 type ReplyOrReactionMessageProps = {
   i18n: LocalizerType;
@@ -511,7 +511,7 @@ type ReplyOrReactionMessageProps = {
   onContextMenu?: (ev: React.MouseEvent) => void;
 };
 
-const ReplyOrReactionMessage = ({
+function ReplyOrReactionMessage({
   i18n,
   reply,
   deleteGroupStoryReply,
@@ -520,7 +520,7 @@ const ReplyOrReactionMessage = ({
   getPreferredBadge,
   shouldCollapseAbove,
   shouldCollapseBelow,
-}: ReplyOrReactionMessageProps) => {
+}: ReplyOrReactionMessageProps) {
   const renderContent = (onContextMenu?: (ev: React.MouseEvent) => void) => {
     if (reply.reactionEmoji && !reply.deletedForEveryone) {
       return (
@@ -622,4 +622,4 @@ const ReplyOrReactionMessage = ({
   ) : (
     renderContent()
   );
-};
+}
diff --git a/ts/components/Tabs.tsx b/ts/components/Tabs.tsx
index f8b298c8b..2f39bace4 100644
--- a/ts/components/Tabs.tsx
+++ b/ts/components/Tabs.tsx
@@ -11,7 +11,7 @@ type PropsType = {
   children: (renderProps: { selectedTab: string }) => ReactNode;
 } & TabsOptionsType;
 
-export const Tabs = (props: PropsType): JSX.Element => {
+export function Tabs(props: PropsType): JSX.Element {
   const { children, ...options } = props;
   const { selectedTab, tabsHeaderElement } = useTabs(options);
 
@@ -21,4 +21,4 @@ export const Tabs = (props: PropsType): JSX.Element => {
       {children({ selectedTab })}
     </>
   );
-};
+}
diff --git a/ts/components/TextAttachment.stories.tsx b/ts/components/TextAttachment.stories.tsx
index 08d8535aa..0a2624406 100644
--- a/ts/components/TextAttachment.stories.tsx
+++ b/ts/components/TextAttachment.stories.tsx
@@ -19,321 +19,355 @@ export default {
   title: 'Components/TextAttachment',
 };
 
-export const SolidBgTextBg = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      color: 4286869806,
-      text: 'hello',
-      textBackgroundColor: 4293263387,
-      textForegroundColor: 4294967295,
-      textStyle: 1,
-    }}
-  />
-);
+export function SolidBgTextBg(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        color: 4286869806,
+        text: 'hello',
+        textBackgroundColor: 4293263387,
+        textForegroundColor: 4294967295,
+        textStyle: 1,
+      }}
+    />
+  );
+}
 
 SolidBgTextBg.story = {
   name: 'Solid bg + text bg',
 };
 
-export const Gradient = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      gradient: {
-        angle: 191,
-        endColor: 4282529679,
-        startColor: 4294260804,
-      },
-      text: 'hey',
-      textBackgroundColor: 0,
-      textForegroundColor: 4294704123,
-      textStyle: 1,
-    }}
-  />
-);
+export function Gradient(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        gradient: {
+          angle: 191,
+          endColor: 4282529679,
+          startColor: 4294260804,
+        },
+        text: 'hey',
+        textBackgroundColor: 0,
+        textForegroundColor: 4294704123,
+        textStyle: 1,
+      }}
+    />
+  );
+}
 
-export const TextWithLineBreaksCondensedFont = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      gradient: {
-        angle: 180,
-        endColor: 4278884698,
-        startColor: 4284861868,
-      },
-      text: 'Wow!\nThis is 2 lines!',
-      textBackgroundColor: 4294967295,
-      textForegroundColor: 4278249127,
-      textStyle: 5,
-    }}
-  />
-);
+export function TextWithLineBreaksCondensedFont(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        gradient: {
+          angle: 180,
+          endColor: 4278884698,
+          startColor: 4284861868,
+        },
+        text: 'Wow!\nThis is 2 lines!',
+        textBackgroundColor: 4294967295,
+        textForegroundColor: 4278249127,
+        textStyle: 5,
+      }}
+    />
+  );
+}
 
 TextWithLineBreaksCondensedFont.story = {
   name: 'Text with line breaks (condensed font)',
 };
 
-export const TextWithLineBreaksAutowrapSerifFont = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      color: 4278249127,
-      text: 'Wrap?\nYes please, wrap this text automatically for me so that it fits nicely inside the story.',
-      textBackgroundColor: 0,
-      textForegroundColor: 4294967295,
-      textStyle: 3,
-    }}
-  />
-);
+export function TextWithLineBreaksAutowrapSerifFont(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        color: 4278249127,
+        text: 'Wrap?\nYes please, wrap this text automatically for me so that it fits nicely inside the story.',
+        textBackgroundColor: 0,
+        textForegroundColor: 4294967295,
+        textStyle: 3,
+      }}
+    />
+  );
+}
 
 TextWithLineBreaksAutowrapSerifFont.story = {
   name: 'Text with line breaks + Autowrap (serif font)',
 };
 
-export const AutowrapText = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      gradient: {
-        angle: 175,
-        endColor: 4294859832,
-        startColor: 4294950980,
-      },
-      text: 'This text should automatically wrap into multiple lines since it exceeds the bounds of the story',
-      textBackgroundColor: 4294967295,
-      textForegroundColor: 4278249037,
-      textStyle: 1,
-    }}
-  />
-);
+export function AutowrapText(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        gradient: {
+          angle: 175,
+          endColor: 4294859832,
+          startColor: 4294950980,
+        },
+        text: 'This text should automatically wrap into multiple lines since it exceeds the bounds of the story',
+        textBackgroundColor: 4294967295,
+        textForegroundColor: 4278249037,
+        textStyle: 1,
+      }}
+    />
+  );
+}
 
 AutowrapText.story = {
   name: 'Autowrap text',
 };
 
-export const RomeoJuliet = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      gradient: {
-        angle: 180,
-        endColor: 4286632135,
-        startColor: 4278227945,
-      },
-      text: "Two households, both alike in dignity, In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean. From forth the fatal loins of these two foes A pair of star-cross'd lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents' strife. The fearful passage of their death-mark'd love, And the continuance of their parents' rage, Which, but their children's end, nought could remove, Is now the two hours' traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend.",
-      textBackgroundColor: 0,
-      textForegroundColor: 4294704123,
-      textStyle: 4,
-    }}
-  />
-);
+export function RomeoJuliet(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        gradient: {
+          angle: 180,
+          endColor: 4286632135,
+          startColor: 4278227945,
+        },
+        text: "Two households, both alike in dignity, In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean. From forth the fatal loins of these two foes A pair of star-cross'd lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents' strife. The fearful passage of their death-mark'd love, And the continuance of their parents' rage, Which, but their children's end, nought could remove, Is now the two hours' traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend.",
+        textBackgroundColor: 0,
+        textForegroundColor: 4294704123,
+        textStyle: 4,
+      }}
+    />
+  );
+}
 
 RomeoJuliet.story = {
   name: 'Romeo & Juliet',
 };
 
-export const OverflowNewlineNumbers = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      gradient: {
-        angle: 175,
-        endColor: 4294859832,
-        startColor: 4294950980,
-      },
-      text: '1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16',
-      textBackgroundColor: 4294967295,
-      textForegroundColor: 4278249037,
-      textStyle: 1,
-    }}
-  />
-);
+export function OverflowNewlineNumbers(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        gradient: {
+          angle: 175,
+          endColor: 4294859832,
+          startColor: 4294950980,
+        },
+        text: '1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n16',
+        textBackgroundColor: 4294967295,
+        textForegroundColor: 4278249037,
+        textStyle: 1,
+      }}
+    />
+  );
+}
 
 OverflowNewlineNumbers.story = {
   name: 'Overflow newline numbers',
 };
 
-export const CharacterWrapBold = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      color: 4278825851,
-      text: 'mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm',
-      textBackgroundColor: 0,
-      textForegroundColor: 4294704123,
-      textStyle: 2,
-    }}
-  />
-);
+export function CharacterWrapBold(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        color: 4278825851,
+        text: 'mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm',
+        textBackgroundColor: 0,
+        textForegroundColor: 4294704123,
+        textStyle: 2,
+      }}
+    />
+  );
+}
 
 CharacterWrapBold.story = {
   name: 'Character wrap (bold)',
 };
 
-export const MixOfNewlinesOverflowAutowrap = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      color: 4294951251,
-      text: 'A new line\nIs this a new line? Yes, indeed and I should be wrapped woooooooooooooooooooooooow this is working!\nCool.',
-      textBackgroundColor: 0,
-      textForegroundColor: 4278231014,
-      textStyle: 1,
-    }}
-  />
-);
+export function MixOfNewlinesOverflowAutowrap(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        color: 4294951251,
+        text: 'A new line\nIs this a new line? Yes, indeed and I should be wrapped woooooooooooooooooooooooow this is working!\nCool.',
+        textBackgroundColor: 0,
+        textForegroundColor: 4278231014,
+        textStyle: 1,
+      }}
+    />
+  );
+}
 
 MixOfNewlinesOverflowAutowrap.story = {
   name: 'Mix of newlines, overflow, autowrap',
 };
 
-export const LinkPreview = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      color: 4294951251,
-      preview: {
-        url: 'https://www.signal.org/workworkwork',
-        title: 'Signal >> Careers',
-      },
-    }}
-  />
-);
+export function LinkPreview(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        color: 4294951251,
+        preview: {
+          url: 'https://www.signal.org/workworkwork',
+          title: 'Signal >> Careers',
+        },
+      }}
+    />
+  );
+}
 
 LinkPreview.story = {
   name: 'Link preview',
 };
 
-export const LinkPreviewThumbnail = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    isThumbnail
-    textAttachment={{
-      color: 4294951251,
-      preview: {
-        url: 'https://www.signal.org/workworkwork',
-        title: 'Signal >> Careers',
-      },
-    }}
-  />
-);
+export function LinkPreviewThumbnail(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      isThumbnail
+      textAttachment={{
+        color: 4294951251,
+        preview: {
+          url: 'https://www.signal.org/workworkwork',
+          title: 'Signal >> Careers',
+        },
+      }}
+    />
+  );
+}
 
 LinkPreviewThumbnail.story = {
   name: 'Link preview (thumbnail)',
 };
 
-export const LinkPreviewLongTitle = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      color: 4294951251,
-      preview: {
-        title:
-          '2021 Etihad Airways Abu Dhabi Grand Prix Race Summary - F1 RaceCast Dec 10 to Dec 12 - ESPN',
-        url: 'https://www.espn.com/f1/race/_/id/600001776',
-      },
-      text: 'Spoiler alert!',
-      textForegroundColor: 4294704123,
-    }}
-  />
-);
+export function LinkPreviewLongTitle(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        color: 4294951251,
+        preview: {
+          title:
+            '2021 Etihad Airways Abu Dhabi Grand Prix Race Summary - F1 RaceCast Dec 10 to Dec 12 - ESPN',
+          url: 'https://www.espn.com/f1/race/_/id/600001776',
+        },
+        text: 'Spoiler alert!',
+        textForegroundColor: 4294704123,
+      }}
+    />
+  );
+}
 
 LinkPreviewLongTitle.story = {
   name: 'Link preview (long title)',
 };
 
-export const LinkPreviewJustUrl = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      color: 4294951251,
-      preview: {
-        url: 'https://www.rolex.com/en-us/watches/day-date/m228236-0012.html',
-      },
-    }}
-  />
-);
+export function LinkPreviewJustUrl(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        color: 4294951251,
+        preview: {
+          url: 'https://www.rolex.com/en-us/watches/day-date/m228236-0012.html',
+        },
+      }}
+    />
+  );
+}
 
 LinkPreviewJustUrl.story = {
   name: 'Link preview (just url)',
 };
 
-export const LinkPreviewJustUrlText = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      color: 4294951251,
-      preview: {
-        url: 'https://www.rolex.com/en-us/watches/day-date/m228236-0012.html',
-      },
-      text: 'Check this out!',
-    }}
-  />
-);
+export function LinkPreviewJustUrlText(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        color: 4294951251,
+        preview: {
+          url: 'https://www.rolex.com/en-us/watches/day-date/m228236-0012.html',
+        },
+        text: 'Check this out!',
+      }}
+    />
+  );
+}
 
 LinkPreviewJustUrlText.story = {
   name: 'Link preview (just url + text)',
 };
 
-export const LinkPreviewReallyLongDomain = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      color: 4294951251,
-      preview: {
-        url: 'https://llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.international/',
-      },
-    }}
-  />
-);
+export function LinkPreviewReallyLongDomain(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        color: 4294951251,
+        preview: {
+          url: 'https://llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.international/',
+        },
+      }}
+    />
+  );
+}
 
 LinkPreviewReallyLongDomain.story = {
   name: 'Link preview (really long domain)',
 };
 
-export const LinkPreviewWRJ = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      gradient: {
-        angle: 180,
-        endColor: 4286632135,
-        startColor: 4278227945,
-      },
-      text: "Two households, both alike in dignity, In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean. From forth the fatal loins of these two foes A pair of star-cross'd lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents' strife. The fearful passage of their death-mark'd love, And the continuance of their parents' rage, Which, but their children's end, nought could remove, Is now the two hours' traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend.",
-      textBackgroundColor: 0,
-      textForegroundColor: 4294704123,
-      textStyle: 4,
-      preview: {
-        title: 'Romeo and Juliet: Entire Play',
-        url: 'http://shakespeare.mit.edu/romeo_juliet/full.html',
-      },
-    }}
-  />
-);
+export function LinkPreviewWRJ(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        gradient: {
+          angle: 180,
+          endColor: 4286632135,
+          startColor: 4278227945,
+        },
+        text: "Two households, both alike in dignity, In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean. From forth the fatal loins of these two foes A pair of star-cross'd lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents' strife. The fearful passage of their death-mark'd love, And the continuance of their parents' rage, Which, but their children's end, nought could remove, Is now the two hours' traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend.",
+        textBackgroundColor: 0,
+        textForegroundColor: 4294704123,
+        textStyle: 4,
+        preview: {
+          title: 'Romeo and Juliet: Entire Play',
+          url: 'http://shakespeare.mit.edu/romeo_juliet/full.html',
+        },
+      }}
+    />
+  );
+}
 
 LinkPreviewWRJ.story = {
   name: 'Link Preview w/ R&J',
 };
 
-export const TextBackgroundAndLinkPreview = (): JSX.Element => (
-  <TextAttachment
-    {...getDefaultProps()}
-    textAttachment={{
-      gradient: {
-        angle: 175,
-        endColor: 4294859832,
-        startColor: 4294950980,
-      },
-      text: 'Check out this neat video I found',
-      textBackgroundColor: 4294967295,
-      textForegroundColor: 4278249037,
-      textStyle: 1,
-      preview: {
-        title: 'A really long title so that the we can test the margins',
-        url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
-      },
-    }}
-  />
-);
+export function TextBackgroundAndLinkPreview(): JSX.Element {
+  return (
+    <TextAttachment
+      {...getDefaultProps()}
+      textAttachment={{
+        gradient: {
+          angle: 175,
+          endColor: 4294859832,
+          startColor: 4294950980,
+        },
+        text: 'Check out this neat video I found',
+        textBackgroundColor: 4294967295,
+        textForegroundColor: 4278249037,
+        textStyle: 1,
+        preview: {
+          title: 'A really long title so that the we can test the margins',
+          url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+        },
+      }}
+    />
+  );
+}
diff --git a/ts/components/TextAttachment.tsx b/ts/components/TextAttachment.tsx
index 0fe52cfb2..a125f6884 100644
--- a/ts/components/TextAttachment.tsx
+++ b/ts/components/TextAttachment.tsx
@@ -104,7 +104,7 @@ function getTextStyles(
   };
 }
 
-export const TextAttachment = ({
+export function TextAttachment({
   disableLinkPreviewPopup,
   i18n,
   isEditingText,
@@ -113,7 +113,7 @@ export const TextAttachment = ({
   onClick,
   onRemoveLinkPreview,
   textAttachment,
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   const linkPreview = useRef<HTMLDivElement | null>(null);
   const [linkPreviewOffsetTop, setLinkPreviewOffsetTop] = useState<
     number | undefined
@@ -242,52 +242,44 @@ export const TextAttachment = ({
                 </div>
               )}
               {textAttachment.preview && textAttachment.preview.url && (
-                <>
-                  <div
-                    className={classNames('TextAttachment__preview-container', {
-                      'TextAttachment__preview-container--large': Boolean(
-                        textAttachment.preview.title
-                      ),
-                    })}
-                    ref={linkPreview}
-                    onFocus={() => {
-                      if (!disableLinkPreviewPopup) {
-                        setLinkPreviewOffsetTop(
-                          linkPreview?.current?.offsetTop
-                        );
-                      }
-                    }}
-                    onMouseOver={() => {
-                      if (!disableLinkPreviewPopup) {
-                        setLinkPreviewOffsetTop(
-                          linkPreview?.current?.offsetTop
-                        );
-                      }
-                    }}
-                  >
-                    {onRemoveLinkPreview && (
-                      <div className="TextAttachment__preview__remove">
-                        <button
-                          aria-label={i18n(
-                            'Keyboard--remove-draft-link-preview'
-                          )}
-                          type="button"
-                          onClick={onRemoveLinkPreview}
-                        />
-                      </div>
-                    )}
-                    <StoryLinkPreview
-                      {...textAttachment.preview}
-                      domain={getDomain(String(textAttachment.preview.url))}
-                      forceCompactMode={
-                        getTextSize(textContent) !== TextSize.Large
-                      }
-                      i18n={i18n}
-                      title={textAttachment.preview.title || undefined}
-                      url={textAttachment.preview.url}
-                    />
-                  </div>
-                </>
+                <div
+                  className={classNames('TextAttachment__preview-container', {
+                    'TextAttachment__preview-container--large': Boolean(
+                      textAttachment.preview.title
+                    ),
+                  })}
+                  ref={linkPreview}
+                  onFocus={() => {
+                    if (!disableLinkPreviewPopup) {
+                      setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
+                    }
+                  }}
+                  onMouseOver={() => {
+                    if (!disableLinkPreviewPopup) {
+                      setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
+                    }
+                  }}
+                >
+                  {onRemoveLinkPreview && (
+                    <div className="TextAttachment__preview__remove">
+                      <button
+                        aria-label={i18n('Keyboard--remove-draft-link-preview')}
+                        type="button"
+                        onClick={onRemoveLinkPreview}
+                      />
+                    </div>
+                  )}
+                  <StoryLinkPreview
+                    {...textAttachment.preview}
+                    domain={getDomain(String(textAttachment.preview.url))}
+                    forceCompactMode={
+                      getTextSize(textContent) !== TextSize.Large
+                    }
+                    i18n={i18n}
+                    title={textAttachment.preview.title || undefined}
+                    url={textAttachment.preview.url}
+                  />
+                </div>
               )}
             </div>
           </div>
@@ -295,4 +287,4 @@ export const TextAttachment = ({
       }}
     </Measure>
   );
-};
+}
diff --git a/ts/components/TextStoryCreator.tsx b/ts/components/TextStoryCreator.tsx
index ed09a4f27..0a7f74a51 100644
--- a/ts/components/TextStoryCreator.tsx
+++ b/ts/components/TextStoryCreator.tsx
@@ -121,14 +121,14 @@ function getBgButtonAriaLabel(
   return i18n('StoryCreator__text-bg--none');
 }
 
-export const TextStoryCreator = ({
+export function TextStoryCreator({
   debouncedMaybeGrabLinkPreview,
   i18n,
   isSending,
   linkPreview,
   onClose,
   onDone,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [showConfirmDiscardModal, setShowConfirmDiscardModal] = useState(false);
 
   const onTryClose = useCallback(() => {
@@ -594,4 +594,4 @@ export const TextStoryCreator = ({
       </div>
     </FocusTrap>
   );
-};
+}
diff --git a/ts/components/TitleBarContainer.tsx b/ts/components/TitleBarContainer.tsx
index fdfe8d6a1..193ca79ac 100644
--- a/ts/components/TitleBarContainer.tsx
+++ b/ts/components/TitleBarContainer.tsx
@@ -121,7 +121,7 @@ function convertMenu(
   });
 }
 
-export const TitleBarContainer = (props: PropsType): JSX.Element => {
+export function TitleBarContainer(props: PropsType): JSX.Element {
   const {
     theme,
     isMaximized,
@@ -269,4 +269,4 @@ export const TitleBarContainer = (props: PropsType): JSX.Element => {
       />
     </div>
   );
-};
+}
diff --git a/ts/components/TitlebarDragArea.tsx b/ts/components/TitlebarDragArea.tsx
index f74bbdb31..21ce9ec30 100644
--- a/ts/components/TitlebarDragArea.tsx
+++ b/ts/components/TitlebarDragArea.tsx
@@ -4,6 +4,6 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 
-export const TitlebarDragArea = (): ReactElement => (
-  <div className="module-title-bar-drag-area" />
-);
+export function TitlebarDragArea(): ReactElement {
+  return <div className="module-title-bar-drag-area" />;
+}
diff --git a/ts/components/Toast.tsx b/ts/components/Toast.tsx
index 06dfd9296..4e14e7ec0 100644
--- a/ts/components/Toast.tsx
+++ b/ts/components/Toast.tsx
@@ -23,93 +23,91 @@ export type PropsType = {
   style?: React.CSSProperties;
 };
 
-export const Toast = memo(
-  ({
-    autoDismissDisabled = false,
-    children,
-    align = 'center',
-    className,
-    disableCloseOnClick = false,
-    onClose,
-    style,
-    timeout = 8000,
-    toastAction,
-  }: PropsType): JSX.Element | null => {
-    const [root, setRoot] = React.useState<HTMLElement | null>(null);
-    const [focusRef] = useRestoreFocus();
+export const Toast = memo(function ToastInner({
+  autoDismissDisabled = false,
+  children,
+  align = 'center',
+  className,
+  disableCloseOnClick = false,
+  onClose,
+  style,
+  timeout = 8000,
+  toastAction,
+}: PropsType): JSX.Element | null {
+  const [root, setRoot] = React.useState<HTMLElement | null>(null);
+  const [focusRef] = useRestoreFocus();
 
-    useEffect(() => {
-      const div = document.createElement('div');
-      document.body.appendChild(div);
-      setRoot(div);
+  useEffect(() => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    setRoot(div);
 
-      return () => {
-        document.body.removeChild(div);
-        setRoot(null);
-      };
-    }, []);
+    return () => {
+      document.body.removeChild(div);
+      setRoot(null);
+    };
+  }, []);
 
-    useEffect(() => {
-      if (!root || autoDismissDisabled) {
-        return;
-      }
+  useEffect(() => {
+    if (!root || autoDismissDisabled) {
+      return;
+    }
 
-      const timeoutId = setTimeout(onClose, timeout);
+    const timeoutId = setTimeout(onClose, timeout);
 
-      return () => {
-        clearTimeoutIfNecessary(timeoutId);
-      };
-    }, [autoDismissDisabled, onClose, root, timeout]);
+    return () => {
+      clearTimeoutIfNecessary(timeoutId);
+    };
+  }, [autoDismissDisabled, onClose, root, timeout]);
 
-    return root
-      ? createPortal(
-          <div
-            aria-live="assertive"
-            className={classNames('Toast', `Toast--align-${align}`, className)}
-            onClick={() => {
+  return root
+    ? createPortal(
+        <div
+          aria-live="assertive"
+          className={classNames('Toast', `Toast--align-${align}`, className)}
+          onClick={() => {
+            if (!disableCloseOnClick) {
+              onClose();
+            }
+          }}
+          onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
+            if (ev.key === 'Enter' || ev.key === ' ') {
               if (!disableCloseOnClick) {
                 onClose();
               }
-            }}
-            onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
-              if (ev.key === 'Enter' || ev.key === ' ') {
-                if (!disableCloseOnClick) {
-                  onClose();
-                }
-              }
-            }}
-            role="button"
-            tabIndex={0}
-            style={style}
-          >
-            <div className="Toast__content">{children}</div>
-            {toastAction && (
-              <div
-                className="Toast__button"
-                onClick={(ev: MouseEvent<HTMLDivElement>) => {
+            }
+          }}
+          role="button"
+          tabIndex={0}
+          style={style}
+        >
+          <div className="Toast__content">{children}</div>
+          {toastAction && (
+            <div
+              className="Toast__button"
+              onClick={(ev: MouseEvent<HTMLDivElement>) => {
+                ev.stopPropagation();
+                ev.preventDefault();
+                toastAction.onClick();
+                onClose();
+              }}
+              onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
+                if (ev.key === 'Enter' || ev.key === ' ') {
                   ev.stopPropagation();
                   ev.preventDefault();
                   toastAction.onClick();
                   onClose();
-                }}
-                onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
-                  if (ev.key === 'Enter' || ev.key === ' ') {
-                    ev.stopPropagation();
-                    ev.preventDefault();
-                    toastAction.onClick();
-                    onClose();
-                  }
-                }}
-                ref={focusRef}
-                role="button"
-                tabIndex={0}
-              >
-                {toastAction.label}
-              </div>
-            )}
-          </div>,
-          root
-        )
-      : null;
-  }
-);
+                }
+              }}
+              ref={focusRef}
+              role="button"
+              tabIndex={0}
+            >
+              {toastAction.label}
+            </div>
+          )}
+        </div>,
+        root
+      )
+    : null;
+});
diff --git a/ts/components/ToastAlreadyGroupMember.tsx b/ts/components/ToastAlreadyGroupMember.tsx
index d3daf626c..88c6a1eee 100644
--- a/ts/components/ToastAlreadyGroupMember.tsx
+++ b/ts/components/ToastAlreadyGroupMember.tsx
@@ -10,11 +10,11 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastAlreadyGroupMember = ({
+export function ToastAlreadyGroupMember({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose}>{i18n('GroupV2--join--already-in-group')}</Toast>
   );
-};
+}
diff --git a/ts/components/ToastAlreadyRequestedToJoin.tsx b/ts/components/ToastAlreadyRequestedToJoin.tsx
index 27dc98b54..45fe8913a 100644
--- a/ts/components/ToastAlreadyRequestedToJoin.tsx
+++ b/ts/components/ToastAlreadyRequestedToJoin.tsx
@@ -10,13 +10,13 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastAlreadyRequestedToJoin = ({
+export function ToastAlreadyRequestedToJoin({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose}>
       {i18n('GroupV2--join--already-awaiting-approval')}
     </Toast>
   );
-};
+}
diff --git a/ts/components/ToastBlocked.tsx b/ts/components/ToastBlocked.tsx
index f952a1a0d..b40e2831b 100644
--- a/ts/components/ToastBlocked.tsx
+++ b/ts/components/ToastBlocked.tsx
@@ -10,6 +10,6 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastBlocked = ({ i18n, onClose }: PropsType): JSX.Element => {
+export function ToastBlocked({ i18n, onClose }: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('unblockToSend')}</Toast>;
-};
+}
diff --git a/ts/components/ToastBlockedGroup.tsx b/ts/components/ToastBlockedGroup.tsx
index f2c66613d..0c5ebdcf7 100644
--- a/ts/components/ToastBlockedGroup.tsx
+++ b/ts/components/ToastBlockedGroup.tsx
@@ -10,9 +10,6 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastBlockedGroup = ({
-  i18n,
-  onClose,
-}: PropsType): JSX.Element => {
+export function ToastBlockedGroup({ i18n, onClose }: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('unblockGroupToSend')}</Toast>;
-};
+}
diff --git a/ts/components/ToastCannotMixMultiAndNonMultiAttachments.tsx b/ts/components/ToastCannotMixMultiAndNonMultiAttachments.tsx
index 2f4182f6e..a402c1891 100644
--- a/ts/components/ToastCannotMixMultiAndNonMultiAttachments.tsx
+++ b/ts/components/ToastCannotMixMultiAndNonMultiAttachments.tsx
@@ -10,13 +10,13 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastCannotMixMultiAndNonMultiAttachments = ({
+export function ToastCannotMixMultiAndNonMultiAttachments({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose}>
       {i18n('cannotSelectPhotosAndVideosAlongWithFiles')}
     </Toast>
   );
-};
+}
diff --git a/ts/components/ToastCannotOpenGiftBadge.tsx b/ts/components/ToastCannotOpenGiftBadge.tsx
index 540a4791a..5a9137f18 100644
--- a/ts/components/ToastCannotOpenGiftBadge.tsx
+++ b/ts/components/ToastCannotOpenGiftBadge.tsx
@@ -11,14 +11,14 @@ export type ToastPropsType = {
   onClose: () => unknown;
 };
 
-export const ToastCannotOpenGiftBadge = ({
+export function ToastCannotOpenGiftBadge({
   i18n,
   isIncoming,
   onClose,
-}: ToastPropsType): JSX.Element => {
+}: ToastPropsType): JSX.Element {
   const key = `message--giftBadge--unopened--toast--${
     isIncoming ? 'incoming' : 'outgoing'
   }`;
 
   return <Toast onClose={onClose}>{i18n(key)}</Toast>;
-};
+}
diff --git a/ts/components/ToastCannotStartGroupCall.tsx b/ts/components/ToastCannotStartGroupCall.tsx
index d0ea13e79..58996bc15 100644
--- a/ts/components/ToastCannotStartGroupCall.tsx
+++ b/ts/components/ToastCannotStartGroupCall.tsx
@@ -10,11 +10,11 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastCannotStartGroupCall = ({
+export function ToastCannotStartGroupCall({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose}>{i18n('GroupV2--cannot-start-group-call')}</Toast>
   );
-};
+}
diff --git a/ts/components/ToastCaptchaFailed.tsx b/ts/components/ToastCaptchaFailed.tsx
index e9c5e1f6f..c9ecb5f25 100644
--- a/ts/components/ToastCaptchaFailed.tsx
+++ b/ts/components/ToastCaptchaFailed.tsx
@@ -10,9 +10,6 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastCaptchaFailed = ({
-  i18n,
-  onClose,
-}: PropsType): JSX.Element => {
+export function ToastCaptchaFailed({ i18n, onClose }: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('verificationFailed')}</Toast>;
-};
+}
diff --git a/ts/components/ToastCaptchaSolved.tsx b/ts/components/ToastCaptchaSolved.tsx
index 6af2b8338..7e2711111 100644
--- a/ts/components/ToastCaptchaSolved.tsx
+++ b/ts/components/ToastCaptchaSolved.tsx
@@ -10,9 +10,6 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastCaptchaSolved = ({
-  i18n,
-  onClose,
-}: PropsType): JSX.Element => {
+export function ToastCaptchaSolved({ i18n, onClose }: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('verificationComplete')}</Toast>;
-};
+}
diff --git a/ts/components/ToastConversationArchived.tsx b/ts/components/ToastConversationArchived.tsx
index 6101226a3..de5a5cc4f 100644
--- a/ts/components/ToastConversationArchived.tsx
+++ b/ts/components/ToastConversationArchived.tsx
@@ -14,11 +14,11 @@ export type PropsType = {
   onClose: () => unknown;
 } & ToastPropsType;
 
-export const ToastConversationArchived = ({
+export function ToastConversationArchived({
   i18n,
   onClose,
   undo,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast
       toastAction={{
@@ -33,4 +33,4 @@ export const ToastConversationArchived = ({
       {i18n('conversationArchived')}
     </Toast>
   );
-};
+}
diff --git a/ts/components/ToastConversationMarkedUnread.tsx b/ts/components/ToastConversationMarkedUnread.tsx
index bee8807fb..797f6db97 100644
--- a/ts/components/ToastConversationMarkedUnread.tsx
+++ b/ts/components/ToastConversationMarkedUnread.tsx
@@ -10,9 +10,9 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastConversationMarkedUnread = ({
+export function ToastConversationMarkedUnread({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('conversationMarkedUnread')}</Toast>;
-};
+}
diff --git a/ts/components/ToastConversationUnarchived.tsx b/ts/components/ToastConversationUnarchived.tsx
index b06eb4fa2..f4a47dc75 100644
--- a/ts/components/ToastConversationUnarchived.tsx
+++ b/ts/components/ToastConversationUnarchived.tsx
@@ -10,9 +10,9 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastConversationUnarchived = ({
+export function ToastConversationUnarchived({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('conversationReturnedToInbox')}</Toast>;
-};
+}
diff --git a/ts/components/ToastDangerousFileType.tsx b/ts/components/ToastDangerousFileType.tsx
index 466d6b3d2..556cd39ab 100644
--- a/ts/components/ToastDangerousFileType.tsx
+++ b/ts/components/ToastDangerousFileType.tsx
@@ -10,9 +10,9 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastDangerousFileType = ({
+export function ToastDangerousFileType({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('dangerousFileType')}</Toast>;
-};
+}
diff --git a/ts/components/ToastDebugLogError.tsx b/ts/components/ToastDebugLogError.tsx
index 29e2443ea..1d73882c2 100644
--- a/ts/components/ToastDebugLogError.tsx
+++ b/ts/components/ToastDebugLogError.tsx
@@ -10,9 +10,6 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastDebugLogError = ({
-  i18n,
-  onClose,
-}: PropsType): JSX.Element => {
+export function ToastDebugLogError({ i18n, onClose }: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('debugLogError')}</Toast>;
-};
+}
diff --git a/ts/components/ToastDeleteForEveryoneFailed.tsx b/ts/components/ToastDeleteForEveryoneFailed.tsx
index 0def25bb8..3696d16c7 100644
--- a/ts/components/ToastDeleteForEveryoneFailed.tsx
+++ b/ts/components/ToastDeleteForEveryoneFailed.tsx
@@ -10,9 +10,9 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastDeleteForEveryoneFailed = ({
+export function ToastDeleteForEveryoneFailed({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('deleteForEveryoneFailed')}</Toast>;
-};
+}
diff --git a/ts/components/ToastExpired.tsx b/ts/components/ToastExpired.tsx
index e8e4cc03f..b1c98851c 100644
--- a/ts/components/ToastExpired.tsx
+++ b/ts/components/ToastExpired.tsx
@@ -10,6 +10,6 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastExpired = ({ i18n, onClose }: PropsType): JSX.Element => {
+export function ToastExpired({ i18n, onClose }: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('expiredWarning')}</Toast>;
-};
+}
diff --git a/ts/components/ToastFailedToFetchPhoneNumber.tsx b/ts/components/ToastFailedToFetchPhoneNumber.tsx
index 6ad3ad7c4..01bc69b60 100644
--- a/ts/components/ToastFailedToFetchPhoneNumber.tsx
+++ b/ts/components/ToastFailedToFetchPhoneNumber.tsx
@@ -10,13 +10,13 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastFailedToFetchPhoneNumber = ({
+export function ToastFailedToFetchPhoneNumber({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose} style={{ maxWidth: '280px' }}>
       {i18n('Toast--failed-to-fetch-phone-number')}
     </Toast>
   );
-};
+}
diff --git a/ts/components/ToastFailedToFetchUsername.tsx b/ts/components/ToastFailedToFetchUsername.tsx
index 0ac51004a..adfbb3ce1 100644
--- a/ts/components/ToastFailedToFetchUsername.tsx
+++ b/ts/components/ToastFailedToFetchUsername.tsx
@@ -10,13 +10,13 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastFailedToFetchUsername = ({
+export function ToastFailedToFetchUsername({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose} style={{ maxWidth: '280px' }}>
       {i18n('Toast--failed-to-fetch-username')}
     </Toast>
   );
-};
+}
diff --git a/ts/components/ToastFileSaved.tsx b/ts/components/ToastFileSaved.tsx
index b4878d335..2658c8679 100644
--- a/ts/components/ToastFileSaved.tsx
+++ b/ts/components/ToastFileSaved.tsx
@@ -14,11 +14,11 @@ type PropsType = {
   onClose: () => unknown;
 } & ToastPropsType;
 
-export const ToastFileSaved = ({
+export function ToastFileSaved({
   i18n,
   onClose,
   onOpenFile,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast
       onClose={onClose}
@@ -30,4 +30,4 @@ export const ToastFileSaved = ({
       {i18n('attachmentSaved')}
     </Toast>
   );
-};
+}
diff --git a/ts/components/ToastFileSize.tsx b/ts/components/ToastFileSize.tsx
index 78600a724..a3954f1df 100644
--- a/ts/components/ToastFileSize.tsx
+++ b/ts/components/ToastFileSize.tsx
@@ -15,16 +15,16 @@ type PropsType = {
   onClose: () => unknown;
 } & ToastPropsType;
 
-export const ToastFileSize = ({
+export function ToastFileSize({
   i18n,
   limit,
   onClose,
   units,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose}>
       {i18n('fileSizeWarning')} {limit}
       {units}
     </Toast>
   );
-};
+}
diff --git a/ts/components/ToastGroupLinkCopied.tsx b/ts/components/ToastGroupLinkCopied.tsx
index 3b11e8cb9..513e3172a 100644
--- a/ts/components/ToastGroupLinkCopied.tsx
+++ b/ts/components/ToastGroupLinkCopied.tsx
@@ -10,11 +10,11 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastGroupLinkCopied = ({
+export function ToastGroupLinkCopied({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose}>{i18n('GroupLinkManagement--clipboard')}</Toast>
   );
-};
+}
diff --git a/ts/components/ToastInternalError.stories.tsx b/ts/components/ToastInternalError.stories.tsx
index 292b8dced..edc512cdd 100644
--- a/ts/components/ToastInternalError.stories.tsx
+++ b/ts/components/ToastInternalError.stories.tsx
@@ -23,25 +23,29 @@ export default {
   title: 'Components/ToastInternalError',
 };
 
-export const ToastDecryptionError = (): JSX.Element => (
-  <ToastInternalError
-    kind={ToastInternalErrorKind.DecryptionError}
-    deviceId={3}
-    name="Someone Somewhere"
-    {...defaultProps}
-  />
-);
+export function ToastDecryptionError(): JSX.Element {
+  return (
+    <ToastInternalError
+      kind={ToastInternalErrorKind.DecryptionError}
+      deviceId={3}
+      name="Someone Somewhere"
+      {...defaultProps}
+    />
+  );
+}
 
 ToastDecryptionError.story = {
   name: 'ToastDecryptionError',
 };
 
-export const ToastCDSMirroringError = (): JSX.Element => (
-  <ToastInternalError
-    kind={ToastInternalErrorKind.CDSMirroringError}
-    {...defaultProps}
-  />
-);
+export function ToastCDSMirroringError(): JSX.Element {
+  return (
+    <ToastInternalError
+      kind={ToastInternalErrorKind.CDSMirroringError}
+      {...defaultProps}
+    />
+  );
+}
 
 ToastDecryptionError.story = {
   name: 'ToastCDSMirroringError',
diff --git a/ts/components/ToastInternalError.tsx b/ts/components/ToastInternalError.tsx
index 240e4cf9d..a62c435b6 100644
--- a/ts/components/ToastInternalError.tsx
+++ b/ts/components/ToastInternalError.tsx
@@ -29,7 +29,7 @@ type PropsType = {
   onClose: () => unknown;
 } & ToastPropsType;
 
-export const ToastInternalError = (props: PropsType): JSX.Element => {
+export function ToastInternalError(props: PropsType): JSX.Element {
   const { kind, i18n, onClose, onShowDebugLog } = props;
 
   let body: string;
@@ -60,4 +60,4 @@ export const ToastInternalError = (props: PropsType): JSX.Element => {
       {body}
     </Toast>
   );
-};
+}
diff --git a/ts/components/ToastInvalidConversation.tsx b/ts/components/ToastInvalidConversation.tsx
index 02ee6e9a0..f3040494d 100644
--- a/ts/components/ToastInvalidConversation.tsx
+++ b/ts/components/ToastInvalidConversation.tsx
@@ -10,9 +10,9 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastInvalidConversation = ({
+export function ToastInvalidConversation({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('invalidConversation')}</Toast>;
-};
+}
diff --git a/ts/components/ToastLeftGroup.tsx b/ts/components/ToastLeftGroup.tsx
index 32ac1469b..c07fc5d37 100644
--- a/ts/components/ToastLeftGroup.tsx
+++ b/ts/components/ToastLeftGroup.tsx
@@ -10,6 +10,6 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastLeftGroup = ({ i18n, onClose }: PropsType): JSX.Element => {
+export function ToastLeftGroup({ i18n, onClose }: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('youLeftTheGroup')}</Toast>;
-};
+}
diff --git a/ts/components/ToastLinkCopied.tsx b/ts/components/ToastLinkCopied.tsx
index 2f1e7170f..ef74997f3 100644
--- a/ts/components/ToastLinkCopied.tsx
+++ b/ts/components/ToastLinkCopied.tsx
@@ -10,6 +10,6 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastLinkCopied = ({ i18n, onClose }: PropsType): JSX.Element => {
+export function ToastLinkCopied({ i18n, onClose }: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('debugLogLinkCopied')}</Toast>;
-};
+}
diff --git a/ts/components/ToastLoadingFullLogs.tsx b/ts/components/ToastLoadingFullLogs.tsx
index cf1658ca6..6d8bda05d 100644
--- a/ts/components/ToastLoadingFullLogs.tsx
+++ b/ts/components/ToastLoadingFullLogs.tsx
@@ -10,9 +10,9 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastLoadingFullLogs = ({
+export function ToastLoadingFullLogs({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('loading')}</Toast>;
-};
+}
diff --git a/ts/components/ToastManager.stories.tsx b/ts/components/ToastManager.stories.tsx
index fe6a7e2eb..538847de4 100644
--- a/ts/components/ToastManager.stories.tsx
+++ b/ts/components/ToastManager.stories.tsx
@@ -26,6 +26,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <ToastManager {...args} />;
 
 export const UndefinedToast = Template.bind({});
diff --git a/ts/components/ToastManager.tsx b/ts/components/ToastManager.tsx
index 83f8ae1e5..e4676e7d8 100644
--- a/ts/components/ToastManager.tsx
+++ b/ts/components/ToastManager.tsx
@@ -20,11 +20,11 @@ export type PropsType = {
 
 const SHORT_TIMEOUT = 3 * SECOND;
 
-export const ToastManager = ({
+export function ToastManager({
   hideToast,
   i18n,
   toast,
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   if (toast === undefined) {
     return null;
   }
@@ -144,4 +144,4 @@ export const ToastManager = ({
   }
 
   throw missingCaseError(toastType);
-};
+}
diff --git a/ts/components/ToastMaxAttachments.tsx b/ts/components/ToastMaxAttachments.tsx
index 50e3f5f2a..5b3acb47b 100644
--- a/ts/components/ToastMaxAttachments.tsx
+++ b/ts/components/ToastMaxAttachments.tsx
@@ -10,9 +10,6 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastMaxAttachments = ({
-  i18n,
-  onClose,
-}: PropsType): JSX.Element => {
+export function ToastMaxAttachments({ i18n, onClose }: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('maximumAttachments')}</Toast>;
-};
+}
diff --git a/ts/components/ToastMessageBodyTooLong.tsx b/ts/components/ToastMessageBodyTooLong.tsx
index 48101840b..68b75f5b7 100644
--- a/ts/components/ToastMessageBodyTooLong.tsx
+++ b/ts/components/ToastMessageBodyTooLong.tsx
@@ -10,9 +10,9 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastMessageBodyTooLong = ({
+export function ToastMessageBodyTooLong({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('messageBodyTooLong')}</Toast>;
-};
+}
diff --git a/ts/components/ToastOriginalMessageNotFound.tsx b/ts/components/ToastOriginalMessageNotFound.tsx
index cc685962b..d300a05ff 100644
--- a/ts/components/ToastOriginalMessageNotFound.tsx
+++ b/ts/components/ToastOriginalMessageNotFound.tsx
@@ -10,9 +10,9 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastOriginalMessageNotFound = ({
+export function ToastOriginalMessageNotFound({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('originalMessageNotFound')}</Toast>;
-};
+}
diff --git a/ts/components/ToastPinnedConversationsFull.tsx b/ts/components/ToastPinnedConversationsFull.tsx
index c9399be7c..91bc040a4 100644
--- a/ts/components/ToastPinnedConversationsFull.tsx
+++ b/ts/components/ToastPinnedConversationsFull.tsx
@@ -10,9 +10,9 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastPinnedConversationsFull = ({
+export function ToastPinnedConversationsFull({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('pinnedConversationsFull')}</Toast>;
-};
+}
diff --git a/ts/components/ToastReactionFailed.tsx b/ts/components/ToastReactionFailed.tsx
index eea3f5eac..7c97aecbc 100644
--- a/ts/components/ToastReactionFailed.tsx
+++ b/ts/components/ToastReactionFailed.tsx
@@ -10,9 +10,6 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastReactionFailed = ({
-  i18n,
-  onClose,
-}: PropsType): JSX.Element => {
+export function ToastReactionFailed({ i18n, onClose }: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('Reactions--error')}</Toast>;
-};
+}
diff --git a/ts/components/ToastReportedSpamAndBlocked.tsx b/ts/components/ToastReportedSpamAndBlocked.tsx
index fc6723e1e..56c13fda6 100644
--- a/ts/components/ToastReportedSpamAndBlocked.tsx
+++ b/ts/components/ToastReportedSpamAndBlocked.tsx
@@ -10,13 +10,13 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastReportedSpamAndBlocked = ({
+export function ToastReportedSpamAndBlocked({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose}>
       {i18n('MessageRequests--block-and-report-spam-success-toast')}
     </Toast>
   );
-};
+}
diff --git a/ts/components/ToastStickerPackInstallFailed.tsx b/ts/components/ToastStickerPackInstallFailed.tsx
index 3e2b293fd..ef9f1d7ac 100644
--- a/ts/components/ToastStickerPackInstallFailed.tsx
+++ b/ts/components/ToastStickerPackInstallFailed.tsx
@@ -10,11 +10,11 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastStickerPackInstallFailed = ({
+export function ToastStickerPackInstallFailed({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose}>{i18n('stickers--toast--InstallFailed')}</Toast>
   );
-};
+}
diff --git a/ts/components/ToastTapToViewExpiredIncoming.tsx b/ts/components/ToastTapToViewExpiredIncoming.tsx
index f52f19801..e03ab5f1a 100644
--- a/ts/components/ToastTapToViewExpiredIncoming.tsx
+++ b/ts/components/ToastTapToViewExpiredIncoming.tsx
@@ -10,13 +10,13 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastTapToViewExpiredIncoming = ({
+export function ToastTapToViewExpiredIncoming({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose}>
       {i18n('Message--tap-to-view--incoming--expired-toast')}
     </Toast>
   );
-};
+}
diff --git a/ts/components/ToastTapToViewExpiredOutgoing.tsx b/ts/components/ToastTapToViewExpiredOutgoing.tsx
index 505cd6ac6..635e0e104 100644
--- a/ts/components/ToastTapToViewExpiredOutgoing.tsx
+++ b/ts/components/ToastTapToViewExpiredOutgoing.tsx
@@ -10,13 +10,13 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastTapToViewExpiredOutgoing = ({
+export function ToastTapToViewExpiredOutgoing({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose}>
       {i18n('Message--tap-to-view--outgoing--expired-toast')}
     </Toast>
   );
-};
+}
diff --git a/ts/components/ToastUnableToLoadAttachment.tsx b/ts/components/ToastUnableToLoadAttachment.tsx
index 91671158e..0ff5fc163 100644
--- a/ts/components/ToastUnableToLoadAttachment.tsx
+++ b/ts/components/ToastUnableToLoadAttachment.tsx
@@ -10,9 +10,9 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastUnableToLoadAttachment = ({
+export function ToastUnableToLoadAttachment({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('unableToLoadAttachment')}</Toast>;
-};
+}
diff --git a/ts/components/ToastUnsupportedMultiAttachment.tsx b/ts/components/ToastUnsupportedMultiAttachment.tsx
index 4c08c3707..56ed86c17 100644
--- a/ts/components/ToastUnsupportedMultiAttachment.tsx
+++ b/ts/components/ToastUnsupportedMultiAttachment.tsx
@@ -10,13 +10,13 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastUnsupportedMultiAttachment = ({
+export function ToastUnsupportedMultiAttachment({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose}>
       {i18n('cannotSelectPhotosAndVideosAlongWithFiles')}
     </Toast>
   );
-};
+}
diff --git a/ts/components/ToastVoiceNoteError.tsx b/ts/components/ToastVoiceNoteError.tsx
index 70b5b1db7..fafb87d3d 100644
--- a/ts/components/ToastVoiceNoteError.tsx
+++ b/ts/components/ToastVoiceNoteError.tsx
@@ -10,9 +10,6 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastVoiceNoteLimit = ({
-  i18n,
-  onClose,
-}: PropsType): JSX.Element => {
+export function ToastVoiceNoteLimit({ i18n, onClose }: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('voiceNoteError')}</Toast>;
-};
+}
diff --git a/ts/components/ToastVoiceNoteLimit.tsx b/ts/components/ToastVoiceNoteLimit.tsx
index b268a9e00..8b7acd42a 100644
--- a/ts/components/ToastVoiceNoteLimit.tsx
+++ b/ts/components/ToastVoiceNoteLimit.tsx
@@ -10,9 +10,6 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastVoiceNoteLimit = ({
-  i18n,
-  onClose,
-}: PropsType): JSX.Element => {
+export function ToastVoiceNoteLimit({ i18n, onClose }: PropsType): JSX.Element {
   return <Toast onClose={onClose}>{i18n('voiceNoteLimit')}</Toast>;
-};
+}
diff --git a/ts/components/ToastVoiceNoteMustBeOnlyAttachment.tsx b/ts/components/ToastVoiceNoteMustBeOnlyAttachment.tsx
index ec2fe8b83..227b400ee 100644
--- a/ts/components/ToastVoiceNoteMustBeOnlyAttachment.tsx
+++ b/ts/components/ToastVoiceNoteMustBeOnlyAttachment.tsx
@@ -10,11 +10,11 @@ type PropsType = {
   onClose: () => unknown;
 };
 
-export const ToastVoiceNoteMustBeOnlyAttachment = ({
+export function ToastVoiceNoteMustBeOnlyAttachment({
   i18n,
   onClose,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <Toast onClose={onClose}>{i18n('voiceNoteMustBeOnlyAttachment')}</Toast>
   );
-};
+}
diff --git a/ts/components/Tooltip.stories.tsx b/ts/components/Tooltip.stories.tsx
index 19e3c9247..352c98f2e 100644
--- a/ts/components/Tooltip.stories.tsx
+++ b/ts/components/Tooltip.stories.tsx
@@ -73,17 +73,19 @@ export const _Left = (): JSX.Element => (
   </Tooltip>
 );
 
-export const Sticky = (): JSX.Element => (
-  <Tooltip
-    {...createProps({
-      sticky: true,
-    })}
-  >
-    {Trigger}
-  </Tooltip>
-);
+export function Sticky(): JSX.Element {
+  return (
+    <Tooltip
+      {...createProps({
+        sticky: true,
+      })}
+    >
+      {Trigger}
+    </Tooltip>
+  );
+}
 
-export const WithAppliedPopperModifiers = (): JSX.Element => {
+export function WithAppliedPopperModifiers(): JSX.Element {
   return (
     <Tooltip
       {...createProps({
@@ -101,15 +103,17 @@ export const WithAppliedPopperModifiers = (): JSX.Element => {
       {Trigger}
     </Tooltip>
   );
-};
+}
 
-export const DarkTheme = (): JSX.Element => (
-  <Tooltip
-    {...createProps({
-      sticky: true,
-      theme: Theme.Dark,
-    })}
-  >
-    {Trigger}
-  </Tooltip>
-);
+export function DarkTheme(): JSX.Element {
+  return (
+    <Tooltip
+      {...createProps({
+        sticky: true,
+        theme: Theme.Dark,
+      })}
+    >
+      {Trigger}
+    </Tooltip>
+  );
+}
diff --git a/ts/components/Tooltip.tsx b/ts/components/Tooltip.tsx
index 482788ebc..5a08c89ca 100644
--- a/ts/components/Tooltip.tsx
+++ b/ts/components/Tooltip.tsx
@@ -23,7 +23,7 @@ type EventWrapperPropsType = {
 const TooltipEventWrapper = React.forwardRef<
   HTMLSpanElement,
   EventWrapperPropsType
->(({ onHoverChanged, children }, ref) => {
+>(function TooltipEvent({ onHoverChanged, children }, ref): JSX.Element {
   const wrapperRef = React.useRef<HTMLSpanElement | null>(null);
 
   const on = React.useCallback(() => {
@@ -77,13 +77,14 @@ export enum TooltipPlacement {
 export type PropsType = {
   content: string | JSX.Element;
   className?: string;
+  children?: React.ReactNode;
   direction?: TooltipPlacement;
   popperModifiers?: Array<StrictModifiers>;
   sticky?: boolean;
   theme?: Theme;
 };
 
-export const Tooltip: React.FC<PropsType> = ({
+export function Tooltip({
   children,
   className,
   content,
@@ -91,7 +92,7 @@ export const Tooltip: React.FC<PropsType> = ({
   sticky,
   theme,
   popperModifiers = [],
-}) => {
+}: PropsType): JSX.Element {
   const [isHovering, setIsHovering] = React.useState(false);
 
   const showTooltip = isHovering || Boolean(sticky);
@@ -137,4 +138,4 @@ export const Tooltip: React.FC<PropsType> = ({
       </Popper>
     </Manager>
   );
-};
+}
diff --git a/ts/components/WhatsNewLink.tsx b/ts/components/WhatsNewLink.tsx
index 53f8729d2..30eba5688 100644
--- a/ts/components/WhatsNewLink.tsx
+++ b/ts/components/WhatsNewLink.tsx
@@ -12,7 +12,7 @@ export type PropsType = {
   showWhatsNewModal: () => unknown;
 };
 
-export const WhatsNewLink = (props: PropsType): JSX.Element => {
+export function WhatsNewLink(props: PropsType): JSX.Element {
   const { i18n, showWhatsNewModal } = props;
 
   return (
@@ -26,4 +26,4 @@ export const WhatsNewLink = (props: PropsType): JSX.Element => {
       ]}
     />
   );
-};
+}
diff --git a/ts/components/WhatsNewModal.stories.tsx b/ts/components/WhatsNewModal.stories.tsx
index 5e4485d69..fc24bd9be 100644
--- a/ts/components/WhatsNewModal.stories.tsx
+++ b/ts/components/WhatsNewModal.stories.tsx
@@ -20,6 +20,6 @@ const getDefaultProps = (): PropsType => ({
   i18n,
 });
 
-export const Modal = (): JSX.Element => (
-  <WhatsNewModal {...getDefaultProps()} />
-);
+export function Modal(): JSX.Element {
+  return <WhatsNewModal {...getDefaultProps()} />;
+}
diff --git a/ts/components/WhatsNewModal.tsx b/ts/components/WhatsNewModal.tsx
index baea01dc1..6f651f169 100644
--- a/ts/components/WhatsNewModal.tsx
+++ b/ts/components/WhatsNewModal.tsx
@@ -37,10 +37,10 @@ const releaseNotes: ReleaseNotesType = {
   ],
 };
 
-export const WhatsNewModal = ({
+export function WhatsNewModal({
   i18n,
   hideWhatsNewModal,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   let contentNode: ReactChild;
 
   if (releaseNotes.features.length === 1) {
@@ -89,4 +89,4 @@ export const WhatsNewModal = ({
       </>
     </Modal>
   );
-};
+}
diff --git a/ts/components/conversation/About.tsx b/ts/components/conversation/About.tsx
index fb3ee855a..dab6d39fe 100644
--- a/ts/components/conversation/About.tsx
+++ b/ts/components/conversation/About.tsx
@@ -10,10 +10,10 @@ export type PropsType = {
   text?: string;
 };
 
-export const About = ({
+export function About({
   className = 'module-about__text',
   text,
-}: PropsType): JSX.Element | null => {
+}: PropsType): JSX.Element | null {
   if (!text) {
     return null;
   }
@@ -23,4 +23,4 @@ export const About = ({
       <Emojify text={text || ''} />
     </span>
   );
-};
+}
diff --git a/ts/components/conversation/AddNewLines.stories.tsx b/ts/components/conversation/AddNewLines.stories.tsx
index 7cc14720f..ecc258112 100644
--- a/ts/components/conversation/AddNewLines.stories.tsx
+++ b/ts/components/conversation/AddNewLines.stories.tsx
@@ -17,51 +17,51 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   text: text('text', overrideProps.text || ''),
 });
 
-export const AllNewlines = (): JSX.Element => {
+export function AllNewlines(): JSX.Element {
   const props = createProps({
     text: '\n\n\n',
   });
 
   return <AddNewLines {...props} />;
-};
+}
 
 AllNewlines.story = {
   name: 'All newlines',
 };
 
-export const StartingEndingWithNewlines = (): JSX.Element => {
+export function StartingEndingWithNewlines(): JSX.Element {
   const props = createProps({
     text: '\nSome text\n',
   });
 
   return <AddNewLines {...props} />;
-};
+}
 
 StartingEndingWithNewlines.story = {
   name: 'Starting/Ending with Newlines',
 };
 
-export const NewlinesInTheMiddle = (): JSX.Element => {
+export function NewlinesInTheMiddle(): JSX.Element {
   const props = createProps({
     text: 'Some\ntext',
   });
 
   return <AddNewLines {...props} />;
-};
+}
 
 NewlinesInTheMiddle.story = {
   name: 'Newlines in the Middle',
 };
 
-export const NoNewlines = (): JSX.Element => {
+export function NoNewlines(): JSX.Element {
   const props = createProps({
     text: 'Some text',
   });
 
   return <AddNewLines {...props} />;
-};
+}
 
-export const CustomRenderFunction = (): JSX.Element => {
+export function CustomRenderFunction(): JSX.Element {
   const props = createProps({
     text: 'Some text',
     renderNonNewLine: ({ text: theText, key }) => (
@@ -72,4 +72,4 @@ export const CustomRenderFunction = (): JSX.Element => {
   });
 
   return <AddNewLines {...props} />;
-};
+}
diff --git a/ts/components/conversation/AtMentionify.stories.tsx b/ts/components/conversation/AtMentionify.stories.tsx
index 10dd21e16..9c2257e49 100644
--- a/ts/components/conversation/AtMentionify.stories.tsx
+++ b/ts/components/conversation/AtMentionify.stories.tsx
@@ -24,19 +24,19 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   text: text('text', overrideProps.text || ''),
 });
 
-export const NoMentions = (): JSX.Element => {
+export function NoMentions(): JSX.Element {
   const props = createProps({
     text: 'Hello World',
   });
 
   return <AtMentionify {...props} />;
-};
+}
 
 NoMentions.story = {
   name: 'No @mentions',
 };
 
-export const MultipleMentions = (): JSX.Element => {
+export function MultipleMentions(): JSX.Element {
   const bodyRanges = [
     {
       start: 4,
@@ -67,13 +67,13 @@ export const MultipleMentions = (): JSX.Element => {
   });
 
   return <AtMentionify {...props} />;
-};
+}
 
 MultipleMentions.story = {
   name: 'Multiple @Mentions',
 };
 
-export const ComplexMentions = (): JSX.Element => {
+export function ComplexMentions(): JSX.Element {
   const bodyRanges = [
     {
       start: 80,
@@ -107,7 +107,7 @@ export const ComplexMentions = (): JSX.Element => {
   });
 
   return <AtMentionify {...props} />;
-};
+}
 
 ComplexMentions.story = {
   name: 'Complex @mentions',
diff --git a/ts/components/conversation/AtMentionify.tsx b/ts/components/conversation/AtMentionify.tsx
index 1943c58c9..5220dfdbc 100644
--- a/ts/components/conversation/AtMentionify.tsx
+++ b/ts/components/conversation/AtMentionify.tsx
@@ -17,12 +17,12 @@ export type Props = {
   text: string;
 };
 
-export const AtMentionify = ({
+export function AtMentionify({
   bodyRanges,
   direction,
   openConversation,
   text,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   if (!bodyRanges) {
     return <>{text}</>;
   }
@@ -88,7 +88,7 @@ export const AtMentionify = ({
   }
 
   return <>{results}</>;
-};
+}
 
 // At-mentions need to be pre-processed before being pushed through the
 // AtMentionify component, this is due to bodyRanges containing start+length
diff --git a/ts/components/conversation/AttachmentList.stories.tsx b/ts/components/conversation/AttachmentList.stories.tsx
index f3e579636..732e4f296 100644
--- a/ts/components/conversation/AttachmentList.stories.tsx
+++ b/ts/components/conversation/AttachmentList.stories.tsx
@@ -37,7 +37,7 @@ const createProps = (
   onCloseAttachment: action('onCloseAttachment'),
 });
 
-export const OneFile = (): JSX.Element => {
+export function OneFile(): JSX.Element {
   const props = createProps({
     attachments: [
       fakeDraftAttachment({
@@ -48,9 +48,9 @@ export const OneFile = (): JSX.Element => {
     ],
   });
   return <AttachmentList {...props} />;
-};
+}
 
-export const MultipleVisualAttachments = (): JSX.Element => {
+export function MultipleVisualAttachments(): JSX.Element {
   const props = createProps({
     attachments: [
       fakeDraftAttachment({
@@ -73,9 +73,9 @@ export const MultipleVisualAttachments = (): JSX.Element => {
   });
 
   return <AttachmentList {...props} />;
-};
+}
 
-export const MultipleWithNonVisualTypes = (): JSX.Element => {
+export function MultipleWithNonVisualTypes(): JSX.Element {
   const props = createProps({
     attachments: [
       fakeDraftAttachment({
@@ -108,14 +108,14 @@ export const MultipleWithNonVisualTypes = (): JSX.Element => {
   });
 
   return <AttachmentList {...props} />;
-};
+}
 
 MultipleWithNonVisualTypes.story = {
   name: 'Multiple with Non-Visual Types',
 };
 
-export const EmptyList = (): JSX.Element => {
+export function EmptyList(): JSX.Element {
   const props = createProps();
 
   return <AttachmentList {...props} />;
-};
+}
diff --git a/ts/components/conversation/AttachmentList.tsx b/ts/components/conversation/AttachmentList.tsx
index 3d18c5aaf..dd6b7769e 100644
--- a/ts/components/conversation/AttachmentList.tsx
+++ b/ts/components/conversation/AttachmentList.tsx
@@ -49,7 +49,7 @@ function getUrl(
   return attachment.url;
 }
 
-export const AttachmentList = <T extends AttachmentType | AttachmentDraftType>({
+export function AttachmentList<T extends AttachmentType | AttachmentDraftType>({
   attachments,
   canEditImages,
   i18n,
@@ -57,7 +57,7 @@ export const AttachmentList = <T extends AttachmentType | AttachmentDraftType>({
   onClickAttachment,
   onCloseAttachment,
   onClose,
-}: Props<T>): JSX.Element | null => {
+}: Props<T>): JSX.Element | null {
   if (!attachments.length) {
     return null;
   }
@@ -151,4 +151,4 @@ export const AttachmentList = <T extends AttachmentType | AttachmentDraftType>({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/AudioCapture.stories.tsx b/ts/components/conversation/AudioCapture.stories.tsx
index 0d0e49881..0d51714d3 100644
--- a/ts/components/conversation/AudioCapture.stories.tsx
+++ b/ts/components/conversation/AudioCapture.stories.tsx
@@ -38,9 +38,9 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   startRecording: action('startRecording'),
 });
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return <AudioCapture {...createProps()} />;
-};
+}
 
 export const _Initializing = (): JSX.Element => {
   return (
@@ -62,7 +62,7 @@ export const _Recording = (): JSX.Element => {
   );
 };
 
-export const VoiceLimit = (): JSX.Element => {
+export function VoiceLimit(): JSX.Element {
   return (
     <AudioCapture
       {...createProps({
@@ -71,9 +71,9 @@ export const VoiceLimit = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
-export const SwitchedApps = (): JSX.Element => {
+export function SwitchedApps(): JSX.Element {
   return (
     <AudioCapture
       {...createProps({
@@ -82,4 +82,4 @@ export const SwitchedApps = (): JSX.Element => {
       })}
     />
   );
-};
+}
diff --git a/ts/components/conversation/AudioCapture.tsx b/ts/components/conversation/AudioCapture.tsx
index 27b1c50de..98e4b4e8a 100644
--- a/ts/components/conversation/AudioCapture.tsx
+++ b/ts/components/conversation/AudioCapture.tsx
@@ -48,7 +48,7 @@ enum ToastType {
 
 const START_DURATION_TEXT = '0:00';
 
-export const AudioCapture = ({
+export function AudioCapture({
   cancelRecording,
   completeRecording,
   conversationId,
@@ -59,7 +59,7 @@ export const AudioCapture = ({
   recordingState,
   onSendAudioRecording,
   startRecording,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const [durationText, setDurationText] = useState<string>(START_DURATION_TEXT);
   const [toastType, setToastType] = useState<ToastType | undefined>();
 
@@ -251,4 +251,4 @@ export const AudioCapture = ({
       {toastElement}
     </>
   );
-};
+}
diff --git a/ts/components/conversation/CallingNotification.stories.tsx b/ts/components/conversation/CallingNotification.stories.tsx
index fba15f651..b8e35e5cc 100644
--- a/ts/components/conversation/CallingNotification.stories.tsx
+++ b/ts/components/conversation/CallingNotification.stories.tsx
@@ -38,103 +38,119 @@ const getCommonProps = () => ({
 />
  */
 
-export const AcceptedIncomingAudioCall = (): JSX.Element => (
-  <CallingNotification
-    {...getCommonProps()}
-    acceptedTime={1618894800000}
-    callMode={CallMode.Direct}
-    endedTime={1618894800000}
-    wasDeclined={false}
-    wasIncoming
-    wasVideoCall={false}
-  />
-);
+export function AcceptedIncomingAudioCall(): JSX.Element {
+  return (
+    <CallingNotification
+      {...getCommonProps()}
+      acceptedTime={1618894800000}
+      callMode={CallMode.Direct}
+      endedTime={1618894800000}
+      wasDeclined={false}
+      wasIncoming
+      wasVideoCall={false}
+    />
+  );
+}
 
-export const AcceptedIncomingVideoCall = (): JSX.Element => (
-  <CallingNotification
-    {...getCommonProps()}
-    acceptedTime={1618894800000}
-    callMode={CallMode.Direct}
-    endedTime={1618894800000}
-    wasDeclined={false}
-    wasIncoming
-    wasVideoCall
-  />
-);
+export function AcceptedIncomingVideoCall(): JSX.Element {
+  return (
+    <CallingNotification
+      {...getCommonProps()}
+      acceptedTime={1618894800000}
+      callMode={CallMode.Direct}
+      endedTime={1618894800000}
+      wasDeclined={false}
+      wasIncoming
+      wasVideoCall
+    />
+  );
+}
 
-export const DeclinedIncomingAudioCall = (): JSX.Element => (
-  <CallingNotification
-    {...getCommonProps()}
-    acceptedTime={undefined}
-    callMode={CallMode.Direct}
-    endedTime={1618894800000}
-    wasDeclined
-    wasIncoming
-    wasVideoCall={false}
-  />
-);
+export function DeclinedIncomingAudioCall(): JSX.Element {
+  return (
+    <CallingNotification
+      {...getCommonProps()}
+      acceptedTime={undefined}
+      callMode={CallMode.Direct}
+      endedTime={1618894800000}
+      wasDeclined
+      wasIncoming
+      wasVideoCall={false}
+    />
+  );
+}
 
-export const DeclinedIncomingVideoCall = (): JSX.Element => (
-  <CallingNotification
-    {...getCommonProps()}
-    acceptedTime={undefined}
-    callMode={CallMode.Direct}
-    endedTime={1618894800000}
-    wasDeclined
-    wasIncoming
-    wasVideoCall
-  />
-);
+export function DeclinedIncomingVideoCall(): JSX.Element {
+  return (
+    <CallingNotification
+      {...getCommonProps()}
+      acceptedTime={undefined}
+      callMode={CallMode.Direct}
+      endedTime={1618894800000}
+      wasDeclined
+      wasIncoming
+      wasVideoCall
+    />
+  );
+}
 
-export const AcceptedOutgoingAudioCall = (): JSX.Element => (
-  <CallingNotification
-    {...getCommonProps()}
-    acceptedTime={1618894800000}
-    callMode={CallMode.Direct}
-    endedTime={1618894800000}
-    wasDeclined={false}
-    wasIncoming={false}
-    wasVideoCall={false}
-  />
-);
+export function AcceptedOutgoingAudioCall(): JSX.Element {
+  return (
+    <CallingNotification
+      {...getCommonProps()}
+      acceptedTime={1618894800000}
+      callMode={CallMode.Direct}
+      endedTime={1618894800000}
+      wasDeclined={false}
+      wasIncoming={false}
+      wasVideoCall={false}
+    />
+  );
+}
 
-export const AcceptedOutgoingVideoCall = (): JSX.Element => (
-  <CallingNotification
-    {...getCommonProps()}
-    acceptedTime={1618894800000}
-    callMode={CallMode.Direct}
-    endedTime={1618894800000}
-    wasDeclined={false}
-    wasIncoming={false}
-    wasVideoCall
-  />
-);
+export function AcceptedOutgoingVideoCall(): JSX.Element {
+  return (
+    <CallingNotification
+      {...getCommonProps()}
+      acceptedTime={1618894800000}
+      callMode={CallMode.Direct}
+      endedTime={1618894800000}
+      wasDeclined={false}
+      wasIncoming={false}
+      wasVideoCall
+    />
+  );
+}
 
-export const DeclinedOutgoingAudioCall = (): JSX.Element => (
-  <CallingNotification
-    {...getCommonProps()}
-    acceptedTime={undefined}
-    callMode={CallMode.Direct}
-    endedTime={1618894800000}
-    wasDeclined
-    wasIncoming={false}
-    wasVideoCall={false}
-  />
-);
+export function DeclinedOutgoingAudioCall(): JSX.Element {
+  return (
+    <CallingNotification
+      {...getCommonProps()}
+      acceptedTime={undefined}
+      callMode={CallMode.Direct}
+      endedTime={1618894800000}
+      wasDeclined
+      wasIncoming={false}
+      wasVideoCall={false}
+    />
+  );
+}
 
-export const DeclinedOutgoingVideoCall = (): JSX.Element => (
-  <CallingNotification
-    {...getCommonProps()}
-    acceptedTime={undefined}
-    callMode={CallMode.Direct}
-    endedTime={1618894800000}
-    wasDeclined
-    wasIncoming={false}
-    wasVideoCall
-  />
-);
+export function DeclinedOutgoingVideoCall(): JSX.Element {
+  return (
+    <CallingNotification
+      {...getCommonProps()}
+      acceptedTime={undefined}
+      callMode={CallMode.Direct}
+      endedTime={1618894800000}
+      wasDeclined
+      wasIncoming={false}
+      wasVideoCall
+    />
+  );
+}
 
-export const TwoIncomingDirectCallsBackToBack = (): JSX.Element => {
+export function TwoIncomingDirectCallsBackToBack(): JSX.Element {
   const call1: CallingNotificationType = {
     callMode: CallMode.Direct,
     wasIncoming: true,
@@ -161,13 +177,13 @@ export const TwoIncomingDirectCallsBackToBack = (): JSX.Element => {
       <CallingNotification {...getCommonProps()} {...call2} />
     </>
   );
-};
+}
 
 TwoIncomingDirectCallsBackToBack.story = {
   name: 'Two incoming direct calls back-to-back',
 };
 
-export const TwoOutgoingDirectCallsBackToBack = (): JSX.Element => {
+export function TwoOutgoingDirectCallsBackToBack(): JSX.Element {
   const call1: CallingNotificationType = {
     callMode: CallMode.Direct,
     wasIncoming: false,
@@ -194,49 +210,55 @@ export const TwoOutgoingDirectCallsBackToBack = (): JSX.Element => {
       <CallingNotification {...getCommonProps()} {...call2} />
     </>
   );
-};
+}
 
 TwoOutgoingDirectCallsBackToBack.story = {
   name: 'Two outgoing direct calls back-to-back',
 };
 
-export const GroupCallByUnknown = (): JSX.Element => (
-  <CallingNotification
-    {...getCommonProps()}
-    callMode={CallMode.Group}
-    creator={undefined}
-    deviceCount={15}
-    ended={false}
-    maxDevices={16}
-    startedTime={1618894800000}
-  />
-);
+export function GroupCallByUnknown(): JSX.Element {
+  return (
+    <CallingNotification
+      {...getCommonProps()}
+      callMode={CallMode.Group}
+      creator={undefined}
+      deviceCount={15}
+      ended={false}
+      maxDevices={16}
+      startedTime={1618894800000}
+    />
+  );
+}
 
-export const GroupCallByYou = (): JSX.Element => (
-  <CallingNotification
-    {...getCommonProps()}
-    callMode={CallMode.Group}
-    creator={{ isMe: true, title: 'Alicia' }}
-    deviceCount={15}
-    ended={false}
-    maxDevices={16}
-    startedTime={1618894800000}
-  />
-);
+export function GroupCallByYou(): JSX.Element {
+  return (
+    <CallingNotification
+      {...getCommonProps()}
+      callMode={CallMode.Group}
+      creator={{ isMe: true, title: 'Alicia' }}
+      deviceCount={15}
+      ended={false}
+      maxDevices={16}
+      startedTime={1618894800000}
+    />
+  );
+}
 
-export const GroupCallBySomeone = (): JSX.Element => (
-  <CallingNotification
-    {...getCommonProps()}
-    callMode={CallMode.Group}
-    creator={{ isMe: false, title: 'Alicia' }}
-    deviceCount={15}
-    ended={false}
-    maxDevices={16}
-    startedTime={1618894800000}
-  />
-);
+export function GroupCallBySomeone(): JSX.Element {
+  return (
+    <CallingNotification
+      {...getCommonProps()}
+      callMode={CallMode.Group}
+      creator={{ isMe: false, title: 'Alicia' }}
+      deviceCount={15}
+      ended={false}
+      maxDevices={16}
+      startedTime={1618894800000}
+    />
+  );
+}
 
-export const GroupCallStartedBySomeoneWithALongName = (): JSX.Element => {
+export function GroupCallStartedBySomeoneWithALongName(): JSX.Element {
   const longName = '😤🪐🦆'.repeat(50);
 
   return (
@@ -253,37 +275,41 @@ export const GroupCallStartedBySomeoneWithALongName = (): JSX.Element => {
       startedTime={1618894800000}
     />
   );
-};
+}
 
 GroupCallStartedBySomeoneWithALongName.story = {
   name: 'Group call: started by someone with a long name',
 };
 
-export const GroupCallActiveCallFull = (): JSX.Element => (
-  <CallingNotification
-    {...getCommonProps()}
-    callMode={CallMode.Group}
-    deviceCount={16}
-    ended={false}
-    maxDevices={16}
-    startedTime={1618894800000}
-  />
-);
+export function GroupCallActiveCallFull(): JSX.Element {
+  return (
+    <CallingNotification
+      {...getCommonProps()}
+      callMode={CallMode.Group}
+      deviceCount={16}
+      ended={false}
+      maxDevices={16}
+      startedTime={1618894800000}
+    />
+  );
+}
 
 GroupCallActiveCallFull.story = {
   name: 'Group call: active, call full',
 };
 
-export const GroupCallEnded = (): JSX.Element => (
-  <CallingNotification
-    {...getCommonProps()}
-    callMode={CallMode.Group}
-    deviceCount={0}
-    ended
-    maxDevices={16}
-    startedTime={1618894800000}
-  />
-);
+export function GroupCallEnded(): JSX.Element {
+  return (
+    <CallingNotification
+      {...getCommonProps()}
+      callMode={CallMode.Group}
+      deviceCount={0}
+      ended
+      maxDevices={16}
+      startedTime={1618894800000}
+    />
+  );
+}
 
 GroupCallEnded.story = {
   name: 'Group call: ended',
diff --git a/ts/components/conversation/CallingNotification.tsx b/ts/components/conversation/CallingNotification.tsx
index 754d563b1..30ee5c977 100644
--- a/ts/components/conversation/CallingNotification.tsx
+++ b/ts/components/conversation/CallingNotification.tsx
@@ -35,48 +35,52 @@ type PropsHousekeeping = {
 
 type PropsType = CallingNotificationType & PropsActionsType & PropsHousekeeping;
 
-export const CallingNotification: React.FC<PropsType> = React.memo(props => {
-  const { i18n } = props;
+export const CallingNotification: React.FC<PropsType> = React.memo(
+  function CallingNotificationInner(props) {
+    const { i18n } = props;
 
-  let timestamp: number;
-  let wasMissed = false;
-  switch (props.callMode) {
-    case CallMode.Direct:
-      timestamp = props.acceptedTime || props.endedTime;
-      wasMissed =
-        props.wasIncoming && !props.acceptedTime && !props.wasDeclined;
-      break;
-    case CallMode.Group:
-      timestamp = props.startedTime;
-      break;
-    default:
-      log.error(`CallingNotification missing case: ${missingCaseError(props)}`);
-      return null;
+    let timestamp: number;
+    let wasMissed = false;
+    switch (props.callMode) {
+      case CallMode.Direct:
+        timestamp = props.acceptedTime || props.endedTime;
+        wasMissed =
+          props.wasIncoming && !props.acceptedTime && !props.wasDeclined;
+        break;
+      case CallMode.Group:
+        timestamp = props.startedTime;
+        break;
+      default:
+        log.error(
+          `CallingNotification missing case: ${missingCaseError(props)}`
+        );
+        return null;
+    }
+
+    const icon = getCallingIcon(props);
+
+    return (
+      <SystemMessage
+        button={renderCallingNotificationButton(props)}
+        contents={
+          <>
+            {getCallingNotificationText(props, i18n)} &middot;{' '}
+            <MessageTimestamp
+              direction="outgoing"
+              i18n={i18n}
+              timestamp={timestamp}
+              withImageNoCaption={false}
+              withSticker={false}
+              withTapToViewExpired={false}
+            />
+          </>
+        }
+        icon={icon}
+        isError={wasMissed}
+      />
+    );
   }
-
-  const icon = getCallingIcon(props);
-
-  return (
-    <SystemMessage
-      button={renderCallingNotificationButton(props)}
-      contents={
-        <>
-          {getCallingNotificationText(props, i18n)} &middot;{' '}
-          <MessageTimestamp
-            direction="outgoing"
-            i18n={i18n}
-            timestamp={timestamp}
-            withImageNoCaption={false}
-            withSticker={false}
-            withTapToViewExpired={false}
-          />
-        </>
-      }
-      icon={icon}
-      isError={wasMissed}
-    />
-  );
-});
+);
 
 function renderCallingNotificationButton(
   props: Readonly<PropsType>
diff --git a/ts/components/conversation/ChangeNumberNotification.stories.tsx b/ts/components/conversation/ChangeNumberNotification.stories.tsx
index 7a3457d28..4a8da6310 100644
--- a/ts/components/conversation/ChangeNumberNotification.stories.tsx
+++ b/ts/components/conversation/ChangeNumberNotification.stories.tsx
@@ -15,23 +15,27 @@ export default {
 
 const i18n = setupI18n('en', enMessages);
 
-export const Default = (): JSX.Element => (
-  <ChangeNumberNotification
-    sender={getDefaultConversation()}
-    timestamp={1618894800000}
-    i18n={i18n}
-  />
-);
+export function Default(): JSX.Element {
+  return (
+    <ChangeNumberNotification
+      sender={getDefaultConversation()}
+      timestamp={1618894800000}
+      i18n={i18n}
+    />
+  );
+}
 
-export const LongName = (): JSX.Element => (
-  <ChangeNumberNotification
-    sender={getDefaultConversation({
-      firstName: '💅😇🖋'.repeat(50),
-    })}
-    timestamp={1618894800000}
-    i18n={i18n}
-  />
-);
+export function LongName(): JSX.Element {
+  return (
+    <ChangeNumberNotification
+      sender={getDefaultConversation({
+        firstName: '💅😇🖋'.repeat(50),
+      })}
+      timestamp={1618894800000}
+      i18n={i18n}
+    />
+  );
+}
 
 LongName.story = {
   name: 'Long name',
diff --git a/ts/components/conversation/ChangeNumberNotification.tsx b/ts/components/conversation/ChangeNumberNotification.tsx
index 7fccedd82..0f4e3aff9 100644
--- a/ts/components/conversation/ChangeNumberNotification.tsx
+++ b/ts/components/conversation/ChangeNumberNotification.tsx
@@ -22,7 +22,7 @@ export type PropsHousekeeping = {
 
 export type Props = PropsData & PropsHousekeeping;
 
-export const ChangeNumberNotification: React.FC<Props> = props => {
+export function ChangeNumberNotification(props: Props): JSX.Element {
   const { i18n, sender, timestamp } = props;
 
   return (
@@ -43,4 +43,4 @@ export const ChangeNumberNotification: React.FC<Props> = props => {
       icon="phone"
     />
   );
-};
+}
diff --git a/ts/components/conversation/ChatSessionRefreshedDialog.stories.tsx b/ts/components/conversation/ChatSessionRefreshedDialog.stories.tsx
index e904baab0..43eb24d5e 100644
--- a/ts/components/conversation/ChatSessionRefreshedDialog.stories.tsx
+++ b/ts/components/conversation/ChatSessionRefreshedDialog.stories.tsx
@@ -14,7 +14,7 @@ export default {
   title: 'Components/Conversation/ChatSessionRefreshedDialog',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return (
     <ChatSessionRefreshedDialog
       contactSupport={action('contactSupport')}
@@ -22,4 +22,4 @@ export const Default = (): JSX.Element => {
       i18n={i18n}
     />
   );
-};
+}
diff --git a/ts/components/conversation/ChatSessionRefreshedNotification.stories.tsx b/ts/components/conversation/ChatSessionRefreshedNotification.stories.tsx
index 711a96ffb..545a1c37b 100644
--- a/ts/components/conversation/ChatSessionRefreshedNotification.stories.tsx
+++ b/ts/components/conversation/ChatSessionRefreshedNotification.stories.tsx
@@ -14,11 +14,11 @@ export default {
   title: 'Components/Conversation/ChatSessionRefreshedNotification',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return (
     <ChatSessionRefreshedNotification
       contactSupport={action('contactSupport')}
       i18n={i18n}
     />
   );
-};
+}
diff --git a/ts/components/conversation/ContactDetail.stories.tsx b/ts/components/conversation/ContactDetail.stories.tsx
index 1b68d7908..abb7b70aa 100644
--- a/ts/components/conversation/ContactDetail.stories.tsx
+++ b/ts/components/conversation/ContactDetail.stories.tsx
@@ -134,15 +134,15 @@ const fullContact = {
   ],
 };
 
-export const FullyFilledOut = (): JSX.Element => {
+export function FullyFilledOut(): JSX.Element {
   const props = createProps({
     contact: fullContact,
     hasSignalAccount: true,
   });
   return <ContactDetail {...props} />;
-};
+}
 
-export const OnlyEmail = (): JSX.Element => {
+export function OnlyEmail(): JSX.Element {
   const props = createProps({
     contact: {
       email: [
@@ -156,9 +156,9 @@ export const OnlyEmail = (): JSX.Element => {
   });
 
   return <ContactDetail {...props} />;
-};
+}
 
-export const GivenName = (): JSX.Element => {
+export function GivenName(): JSX.Element {
   const props = createProps({
     contact: {
       name: {
@@ -169,9 +169,9 @@ export const GivenName = (): JSX.Element => {
   });
 
   return <ContactDetail {...props} />;
-};
+}
 
-export const Organization = (): JSX.Element => {
+export function Organization(): JSX.Element {
   const props = createProps({
     contact: {
       organization: 'Company 5',
@@ -180,9 +180,9 @@ export const Organization = (): JSX.Element => {
   });
 
   return <ContactDetail {...props} />;
-};
+}
 
-export const GivenFamilyName = (): JSX.Element => {
+export function GivenFamilyName(): JSX.Element {
   const props = createProps({
     contact: {
       name: {
@@ -194,13 +194,13 @@ export const GivenFamilyName = (): JSX.Element => {
   });
 
   return <ContactDetail {...props} />;
-};
+}
 
 GivenFamilyName.story = {
   name: 'Given + Family Name',
 };
 
-export const FamilyName = (): JSX.Element => {
+export function FamilyName(): JSX.Element {
   const props = createProps({
     contact: {
       name: {
@@ -211,9 +211,9 @@ export const FamilyName = (): JSX.Element => {
   });
 
   return <ContactDetail {...props} />;
-};
+}
 
-export const LoadingAvatar = (): JSX.Element => {
+export function LoadingAvatar(): JSX.Element {
   const props = createProps({
     contact: {
       avatar: {
@@ -227,25 +227,25 @@ export const LoadingAvatar = (): JSX.Element => {
     hasSignalAccount: true,
   });
   return <ContactDetail {...props} />;
-};
+}
 
-export const EmptyWithAccount = (): JSX.Element => {
+export function EmptyWithAccount(): JSX.Element {
   const props = createProps({
     hasSignalAccount: true,
   });
   return <ContactDetail {...props} />;
-};
+}
 
 EmptyWithAccount.story = {
   name: 'Empty with Account',
 };
 
-export const EmptyWithoutAccount = (): JSX.Element => {
+export function EmptyWithoutAccount(): JSX.Element {
   const props = createProps({
     hasSignalAccount: false,
   });
   return <ContactDetail {...props} />;
-};
+}
 
 EmptyWithoutAccount.story = {
   name: 'Empty without Account',
diff --git a/ts/components/conversation/ContactModal.stories.tsx b/ts/components/conversation/ContactModal.stories.tsx
index 9f383117e..7aa9a9ed2 100644
--- a/ts/components/conversation/ContactModal.stories.tsx
+++ b/ts/components/conversation/ContactModal.stories.tsx
@@ -72,6 +72,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<PropsType> = args => <ContactModal {...args} />;
 
 export const AsNonAdmin = Template.bind({});
diff --git a/ts/components/conversation/ContactModal.tsx b/ts/components/conversation/ContactModal.tsx
index 8efaef420..c6bde322f 100644
--- a/ts/components/conversation/ContactModal.tsx
+++ b/ts/components/conversation/ContactModal.tsx
@@ -62,7 +62,7 @@ enum SubModalState {
   MemberRemove = 'MemberRemove',
 }
 
-export const ContactModal = ({
+export function ContactModal({
   areWeASubscriber,
   areWeAdmin,
   badges,
@@ -81,7 +81,7 @@ export const ContactModal = ({
   toggleAddUserToAnotherGroupModal,
   updateConversationModelSharedGroups,
   viewUserStories,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   if (!contact) {
     throw new Error('Contact modal opened without a matching contact');
   }
@@ -319,4 +319,4 @@ export const ContactModal = ({
     default:
       throw missingCaseError(view);
   }
-};
+}
diff --git a/ts/components/conversation/ContactName.stories.tsx b/ts/components/conversation/ContactName.stories.tsx
index 7e91981da..382138303 100644
--- a/ts/components/conversation/ContactName.stories.tsx
+++ b/ts/components/conversation/ContactName.stories.tsx
@@ -10,27 +10,29 @@ export default {
   title: 'Components/Conversation/ContactName',
 };
 
-export const FirstNameAndTitleTitlePreferred = (): JSX.Element => (
-  <ContactName firstName="Ignored" title="Someone 🔥 Somewhere" />
-);
+export function FirstNameAndTitleTitlePreferred(): JSX.Element {
+  return <ContactName firstName="Ignored" title="Someone 🔥 Somewhere" />;
+}
 
 FirstNameAndTitleTitlePreferred.story = {
   name: 'First name and title; title preferred',
 };
 
-export const FirstNameAndTitleFirstNamePreferred = (): JSX.Element => (
-  <ContactName
-    firstName="Someone 🔥 Somewhere"
-    title="Ignored"
-    preferFirstName
-  />
-);
+export function FirstNameAndTitleFirstNamePreferred(): JSX.Element {
+  return (
+    <ContactName
+      firstName="Someone 🔥 Somewhere"
+      title="Ignored"
+      preferFirstName
+    />
+  );
+}
 
 FirstNameAndTitleFirstNamePreferred.story = {
   name: 'First name and title; first name preferred',
 };
 
-export const Colors = (): JSX.Element => {
+export function Colors(): JSX.Element {
   return (
     <>
       {ContactNameColors.map(color => (
@@ -40,4 +42,4 @@ export const Colors = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
diff --git a/ts/components/conversation/ContactName.tsx b/ts/components/conversation/ContactName.tsx
index b50e6e8fc..7f4cb3c58 100644
--- a/ts/components/conversation/ContactName.tsx
+++ b/ts/components/conversation/ContactName.tsx
@@ -17,14 +17,14 @@ export type PropsType = {
   title: string;
 };
 
-export const ContactName = ({
+export function ContactName({
   contactNameColor,
   firstName,
   isSignalConversation,
   module,
   preferFirstName,
   title,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const getClassName = getClassNamesFor('module-contact-name', module);
 
   let text: string;
@@ -48,4 +48,4 @@ export const ContactName = ({
       )}
     </span>
   );
-};
+}
diff --git a/ts/components/conversation/ContactSpoofingReviewDialog.stories.tsx b/ts/components/conversation/ContactSpoofingReviewDialog.stories.tsx
index 1e7bdff22..f3bec3c05 100644
--- a/ts/components/conversation/ContactSpoofingReviewDialog.stories.tsx
+++ b/ts/components/conversation/ContactSpoofingReviewDialog.stories.tsx
@@ -32,68 +32,74 @@ const getCommonProps = () => ({
   theme: ThemeType.light,
 });
 
-export const DirectConversationsWithSameTitle = (): JSX.Element => (
-  <ContactSpoofingReviewDialog
-    {...getCommonProps()}
-    type={ContactSpoofingType.DirectConversationWithSameTitle}
-    possiblyUnsafeConversation={getDefaultConversation()}
-    safeConversation={getDefaultConversation()}
-  />
-);
+export function DirectConversationsWithSameTitle(): JSX.Element {
+  return (
+    <ContactSpoofingReviewDialog
+      {...getCommonProps()}
+      type={ContactSpoofingType.DirectConversationWithSameTitle}
+      possiblyUnsafeConversation={getDefaultConversation()}
+      safeConversation={getDefaultConversation()}
+    />
+  );
+}
 
 DirectConversationsWithSameTitle.story = {
   name: 'Direct conversations with same title',
 };
 
-export const NotAdmin = (): JSX.Element => (
-  <ContactSpoofingReviewDialog
-    {...getCommonProps()}
-    type={ContactSpoofingType.MultipleGroupMembersWithSameTitle}
-    group={{
-      ...getDefaultConversation(),
-      areWeAdmin: false,
-    }}
-    collisionInfoByTitle={{
-      Alice: times(2, () => ({
-        oldName: 'Alicia',
-        conversation: getDefaultConversation({ title: 'Alice' }),
-      })),
-      Bob: times(3, () => ({
-        conversation: getDefaultConversation({ title: 'Bob' }),
-      })),
-      Charlie: times(5, () => ({
-        conversation: getDefaultConversation({ title: 'Charlie' }),
-      })),
-    }}
-  />
-);
+export function NotAdmin(): JSX.Element {
+  return (
+    <ContactSpoofingReviewDialog
+      {...getCommonProps()}
+      type={ContactSpoofingType.MultipleGroupMembersWithSameTitle}
+      group={{
+        ...getDefaultConversation(),
+        areWeAdmin: false,
+      }}
+      collisionInfoByTitle={{
+        Alice: times(2, () => ({
+          oldName: 'Alicia',
+          conversation: getDefaultConversation({ title: 'Alice' }),
+        })),
+        Bob: times(3, () => ({
+          conversation: getDefaultConversation({ title: 'Bob' }),
+        })),
+        Charlie: times(5, () => ({
+          conversation: getDefaultConversation({ title: 'Charlie' }),
+        })),
+      }}
+    />
+  );
+}
 
 NotAdmin.story = {
   name: 'Group conversation many group members',
 };
 
-export const Admin = (): JSX.Element => (
-  <ContactSpoofingReviewDialog
-    {...getCommonProps()}
-    type={ContactSpoofingType.MultipleGroupMembersWithSameTitle}
-    group={{
-      ...getDefaultConversation(),
-      areWeAdmin: true,
-    }}
-    collisionInfoByTitle={{
-      Alice: times(2, () => ({
-        oldName: 'Alicia',
-        conversation: getDefaultConversation({ title: 'Alice' }),
-      })),
-      Bob: times(3, () => ({
-        conversation: getDefaultConversation({ title: 'Bob' }),
-      })),
-      Charlie: times(5, () => ({
-        conversation: getDefaultConversation({ title: 'Charlie' }),
-      })),
-    }}
-  />
-);
+export function Admin(): JSX.Element {
+  return (
+    <ContactSpoofingReviewDialog
+      {...getCommonProps()}
+      type={ContactSpoofingType.MultipleGroupMembersWithSameTitle}
+      group={{
+        ...getDefaultConversation(),
+        areWeAdmin: true,
+      }}
+      collisionInfoByTitle={{
+        Alice: times(2, () => ({
+          oldName: 'Alicia',
+          conversation: getDefaultConversation({ title: 'Alice' }),
+        })),
+        Bob: times(3, () => ({
+          conversation: getDefaultConversation({ title: 'Bob' }),
+        })),
+        Charlie: times(5, () => ({
+          conversation: getDefaultConversation({ title: 'Charlie' }),
+        })),
+      }}
+    />
+  );
+}
 
 Admin.story = {
   name: 'Group conversation many group members, and we are admin',
diff --git a/ts/components/conversation/ContactSpoofingReviewDialog.tsx b/ts/components/conversation/ContactSpoofingReviewDialog.tsx
index 8e82594fc..9ce006a8d 100644
--- a/ts/components/conversation/ContactSpoofingReviewDialog.tsx
+++ b/ts/components/conversation/ContactSpoofingReviewDialog.tsx
@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent, ReactChild, ReactNode } from 'react';
+import type { ReactChild, ReactNode } from 'react';
 import React, { useState } from 'react';
 import { concat, orderBy } from 'lodash';
 
@@ -60,9 +60,7 @@ enum ConfirmationStateType {
   ConfirmingGroupRemoval,
 }
 
-export const ContactSpoofingReviewDialog: FunctionComponent<
-  PropsType
-> = props => {
+export function ContactSpoofingReviewDialog(props: PropsType): JSX.Element {
   const {
     getPreferredBadge,
     i18n,
@@ -364,4 +362,4 @@ export const ContactSpoofingReviewDialog: FunctionComponent<
       {contents}
     </Modal>
   );
-};
+}
diff --git a/ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx b/ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx
index 5f1f85c9a..fbd846fb1 100644
--- a/ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx
+++ b/ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx
@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 
 import type { ConversationType } from '../../state/ducks/conversations';
@@ -22,9 +22,14 @@ type PropsType = {
   theme: ThemeType;
 };
 
-export const ContactSpoofingReviewDialogPerson: FunctionComponent<
-  PropsType
-> = ({ children, conversation, getPreferredBadge, i18n, onClick, theme }) => {
+export function ContactSpoofingReviewDialogPerson({
+  children,
+  conversation,
+  getPreferredBadge,
+  i18n,
+  onClick,
+  theme,
+}: PropsType): JSX.Element {
   assertDev(
     conversation.type === 'direct',
     '<ContactSpoofingReviewDialogPerson> expected a direct conversation'
@@ -77,4 +82,4 @@ export const ContactSpoofingReviewDialogPerson: FunctionComponent<
   return (
     <div className="module-ContactSpoofingReviewDialogPerson">{contents}</div>
   );
-};
+}
diff --git a/ts/components/conversation/ConversationHeader.stories.tsx b/ts/components/conversation/ConversationHeader.stories.tsx
index 38e9ed816..2847029e5 100644
--- a/ts/components/conversation/ConversationHeader.stories.tsx
+++ b/ts/components/conversation/ConversationHeader.stories.tsx
@@ -60,7 +60,7 @@ const commonProps = {
   viewUserStories: action('viewUserStories'),
 };
 
-export const PrivateConvo = (): JSX.Element => {
+export function PrivateConvo(): JSX.Element {
   const items: ItemsType = [
     {
       title: 'With name and profile, verified',
@@ -214,13 +214,13 @@ export const PrivateConvo = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 PrivateConvo.story = {
   name: '1:1 conversation',
 };
 
-export const Group = (): JSX.Element => {
+export function Group(): JSX.Element {
   const items: ItemsType = [
     {
       title: 'Basic',
@@ -300,13 +300,13 @@ export const Group = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 Group.story = {
   name: 'In a group',
 };
 
-const NoteToSelf = () => {
+function NoteToSelf() {
   const items: ItemsType = [
     {
       title: 'In chat with yourself',
@@ -338,13 +338,13 @@ const NoteToSelf = () => {
       })}
     </>
   );
-};
+}
 
 NoteToSelf.story = {
   name: 'Note to Self',
 };
 
-const Unaccepted = () => {
+function Unaccepted() {
   const items: ItemsType = [
     {
       title: '1:1 conversation',
@@ -376,7 +376,7 @@ const Unaccepted = () => {
       })}
     </>
   );
-};
+}
 
 Unaccepted.story = {
   name: 'Unaccepted',
diff --git a/ts/components/conversation/ConversationHero.stories.tsx b/ts/components/conversation/ConversationHero.stories.tsx
index 1f0e7fa1c..27e83cb47 100644
--- a/ts/components/conversation/ConversationHero.stories.tsx
+++ b/ts/components/conversation/ConversationHero.stories.tsx
@@ -35,6 +35,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<Props> = args => {
   const theme = useContext(StorybookThemeContext);
   return (
diff --git a/ts/components/conversation/ConversationHero.tsx b/ts/components/conversation/ConversationHero.tsx
index 18347267e..7b4129de0 100644
--- a/ts/components/conversation/ConversationHero.tsx
+++ b/ts/components/conversation/ConversationHero.tsx
@@ -100,7 +100,7 @@ const renderMembershipRow = ({
   );
 };
 
-export const ConversationHero = ({
+export function ConversationHero({
   i18n,
   about,
   acceptedMessageRequest,
@@ -124,7 +124,7 @@ export const ConversationHero = ({
   unblurredAvatarPath,
   updateSharedGroups,
   viewUserStories,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const [isShowingMessageRequestWarning, setIsShowingMessageRequestWarning] =
     useState(false);
   const closeMessageRequestWarning = () => {
@@ -257,4 +257,4 @@ export const ConversationHero = ({
     </>
   );
   /* eslint-enable no-nested-ternary */
-};
+}
diff --git a/ts/components/conversation/ConversationView.tsx b/ts/components/conversation/ConversationView.tsx
index 1c6c5bd73..c024e12ff 100644
--- a/ts/components/conversation/ConversationView.tsx
+++ b/ts/components/conversation/ConversationView.tsx
@@ -9,11 +9,11 @@ export type PropsType = {
   renderTimeline: () => JSX.Element;
 };
 
-export const ConversationView = ({
+export function ConversationView({
   renderCompositionArea,
   renderConversationHeader,
   renderTimeline,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <div className="ConversationView">
       <div className="ConversationView__header">
@@ -31,4 +31,4 @@ export const ConversationView = ({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/DeliveryIssueDialog.stories.tsx b/ts/components/conversation/DeliveryIssueDialog.stories.tsx
index a6c4f1cf0..c501694b1 100644
--- a/ts/components/conversation/DeliveryIssueDialog.stories.tsx
+++ b/ts/components/conversation/DeliveryIssueDialog.stories.tsx
@@ -16,7 +16,7 @@ export default {
   title: 'Components/Conversation/DeliveryIssueDialog',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return (
     <DeliveryIssueDialog
       i18n={i18n}
@@ -26,9 +26,9 @@ export const Default = (): JSX.Element => {
       onClose={action('onClose')}
     />
   );
-};
+}
 
-export const InGroup = (): JSX.Element => {
+export function InGroup(): JSX.Element {
   return (
     <DeliveryIssueDialog
       i18n={i18n}
@@ -38,4 +38,4 @@ export const InGroup = (): JSX.Element => {
       onClose={action('onClose')}
     />
   );
-};
+}
diff --git a/ts/components/conversation/DeliveryIssueNotification.stories.tsx b/ts/components/conversation/DeliveryIssueNotification.stories.tsx
index ddffeb468..a2c888454 100644
--- a/ts/components/conversation/DeliveryIssueNotification.stories.tsx
+++ b/ts/components/conversation/DeliveryIssueNotification.stories.tsx
@@ -16,7 +16,7 @@ export default {
 const i18n = setupI18n('en', enMessages);
 const sender = getDefaultConversation();
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return (
     <DeliveryIssueNotification
       i18n={i18n}
@@ -25,9 +25,9 @@ export const Default = (): JSX.Element => {
       sender={sender}
     />
   );
-};
+}
 
-export const WithALongName = (): JSX.Element => {
+export function WithALongName(): JSX.Element {
   const longName = '🤷🏽‍♀️❤️🐞'.repeat(50);
   return (
     <DeliveryIssueNotification
@@ -42,13 +42,13 @@ export const WithALongName = (): JSX.Element => {
       })}
     />
   );
-};
+}
 
 WithALongName.story = {
   name: 'With a long name',
 };
 
-export const InGroup = (): JSX.Element => {
+export function InGroup(): JSX.Element {
   return (
     <DeliveryIssueNotification
       i18n={i18n}
@@ -57,4 +57,4 @@ export const InGroup = (): JSX.Element => {
       sender={sender}
     />
   );
-};
+}
diff --git a/ts/components/conversation/EmbeddedContact.tsx b/ts/components/conversation/EmbeddedContact.tsx
index 660728c48..1c6255b61 100644
--- a/ts/components/conversation/EmbeddedContact.tsx
+++ b/ts/components/conversation/EmbeddedContact.tsx
@@ -23,7 +23,7 @@ export type Props = {
   onClick?: () => void;
 };
 
-export const EmbeddedContact: React.FC<Props> = (props: Props) => {
+export function EmbeddedContact(props: Props): JSX.Element {
   const {
     contact,
     i18n,
@@ -74,4 +74,4 @@ export const EmbeddedContact: React.FC<Props> = (props: Props) => {
       </div>
     </button>
   );
-};
+}
diff --git a/ts/components/conversation/Emojify.stories.tsx b/ts/components/conversation/Emojify.stories.tsx
index 3faa68de8..0357a68fd 100644
--- a/ts/components/conversation/Emojify.stories.tsx
+++ b/ts/components/conversation/Emojify.stories.tsx
@@ -18,88 +18,88 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   text: text('text', overrideProps.text || ''),
 });
 
-export const EmojiOnly = (): JSX.Element => {
+export function EmojiOnly(): JSX.Element {
   const props = createProps({
     text: '😹😹😹',
   });
 
   return <Emojify {...props} />;
-};
+}
 
-export const SkinColorModifier = (): JSX.Element => {
+export function SkinColorModifier(): JSX.Element {
   const props = createProps({
     text: '👍🏾',
   });
 
   return <Emojify {...props} />;
-};
+}
 
-export const Jumbo = (): JSX.Element => {
+export function Jumbo(): JSX.Element {
   const props = createProps({
     text: '😹😹😹',
     sizeClass: 'max',
   });
 
   return <Emojify {...props} />;
-};
+}
 
-export const ExtraLarge = (): JSX.Element => {
+export function ExtraLarge(): JSX.Element {
   const props = createProps({
     text: '😹😹😹',
     sizeClass: 'extra-large',
   });
 
   return <Emojify {...props} />;
-};
+}
 
-export const Large = (): JSX.Element => {
+export function Large(): JSX.Element {
   const props = createProps({
     text: '😹😹😹',
     sizeClass: 'large',
   });
 
   return <Emojify {...props} />;
-};
+}
 
-export const Medium = (): JSX.Element => {
+export function Medium(): JSX.Element {
   const props = createProps({
     text: '😹😹😹',
     sizeClass: 'medium',
   });
 
   return <Emojify {...props} />;
-};
+}
 
-export const Small = (): JSX.Element => {
+export function Small(): JSX.Element {
   const props = createProps({
     text: '😹😹😹',
     sizeClass: 'small',
   });
 
   return <Emojify {...props} />;
-};
+}
 
-export const PlusText = (): JSX.Element => {
+export function PlusText(): JSX.Element {
   const props = createProps({
     text: 'this 😹 cat 😹 is 😹 so 😹 joyful',
   });
 
   return <Emojify {...props} />;
-};
+}
 
-export const AllTextNoEmoji = (): JSX.Element => {
+export function AllTextNoEmoji(): JSX.Element {
   const props = createProps({
     text: 'this cat is so joyful',
   });
 
   return <Emojify {...props} />;
-};
+}
 
 AllTextNoEmoji.story = {
   name: 'All Text, No Emoji',
 };
 
-export const CustomTextRender = (): JSX.Element => {
+export function CustomTextRender(): JSX.Element {
   const props = createProps({
     text: 'this 😹 cat 😹 is 😹 so 😹 joyful',
     renderNonEmoji: ({ text: theText, key }) => (
@@ -110,27 +110,27 @@ export const CustomTextRender = (): JSX.Element => {
   });
 
   return <Emojify {...props} />;
-};
+}
 
-export const TensOfThousandsOfEmoji = (): JSX.Element => {
+export function TensOfThousandsOfEmoji(): JSX.Element {
   const props = createProps({
     text: '💅'.repeat(40000),
   });
 
   return <Emojify {...props} />;
-};
+}
 
 TensOfThousandsOfEmoji.story = {
   name: 'Tens of thousands of emoji',
 };
 
-export const TensOfThousandsOfEmojiInterspersedWithText = (): JSX.Element => {
+export function TensOfThousandsOfEmojiInterspersedWithText(): JSX.Element {
   const props = createProps({
     text: '💅 hi '.repeat(40000),
   });
 
   return <Emojify {...props} />;
-};
+}
 
 TensOfThousandsOfEmojiInterspersedWithText.story = {
   name: 'Tens of thousands of emoji, interspersed with text',
diff --git a/ts/components/conversation/ErrorBoundary.stories.tsx b/ts/components/conversation/ErrorBoundary.stories.tsx
index 937768268..b3b24b907 100644
--- a/ts/components/conversation/ErrorBoundary.stories.tsx
+++ b/ts/components/conversation/ErrorBoundary.stories.tsx
@@ -18,13 +18,13 @@ const Fail: React.FC<Record<string, never>> = () => {
   throw new Error('Failed');
 };
 
-export const ErrorState = (): JSX.Element => {
+export function ErrorState(): JSX.Element {
   return (
     <ErrorBoundary i18n={i18n} showDebugLog={action('showDebugLog')}>
       <Fail />
     </ErrorBoundary>
   );
-};
+}
 
 ErrorState.story = {
   name: 'Error state',
diff --git a/ts/components/conversation/ExpireTimer.stories.tsx b/ts/components/conversation/ExpireTimer.stories.tsx
index 79ad48df3..916a7876f 100644
--- a/ts/components/conversation/ExpireTimer.stories.tsx
+++ b/ts/components/conversation/ExpireTimer.stories.tsx
@@ -57,39 +57,39 @@ _2Minutes.story = {
   name: '2 minutes',
 };
 
-export const InProgress = (): JSX.Element => {
+export function InProgress(): JSX.Element {
   const props = createProps({
     expirationTimestamp: Date.now() + 15 * 1000,
   });
 
   return <ExpireTimer {...props} />;
-};
+}
 
-export const Expired = (): JSX.Element => {
+export function Expired(): JSX.Element {
   const props = createProps({
     expirationTimestamp: Date.now() - 30 * 1000,
   });
 
   return <ExpireTimer {...props} />;
-};
+}
 
-export const Sticker = (): JSX.Element => {
+export function Sticker(): JSX.Element {
   const props = createProps({
     withSticker: true,
   });
 
   return <ExpireTimer {...props} />;
-};
+}
 
-export const TapToViewExpired = (): JSX.Element => {
+export function TapToViewExpired(): JSX.Element {
   const props = createProps({
     withTapToViewExpired: true,
   });
 
   return <ExpireTimer {...props} />;
-};
+}
 
-export const ImageNoCaption = (): JSX.Element => {
+export function ImageNoCaption(): JSX.Element {
   const props = createProps({
     withImageNoCaption: true,
   });
@@ -99,9 +99,9 @@ export const ImageNoCaption = (): JSX.Element => {
       <ExpireTimer {...props} />
     </div>
   );
-};
+}
 
-export const Incoming = (): JSX.Element => {
+export function Incoming(): JSX.Element {
   const props = createProps({
     direction: 'incoming',
   });
@@ -111,12 +111,12 @@ export const Incoming = (): JSX.Element => {
       <ExpireTimer {...props} />
     </div>
   );
-};
+}
 
-export const ExpirationTooFarOut = (): JSX.Element => {
+export function ExpirationTooFarOut(): JSX.Element {
   const props = createProps({
     expirationTimestamp: Date.now() + 150 * 1000,
   });
 
   return <ExpireTimer {...props} />;
-};
+}
diff --git a/ts/components/conversation/GIF.tsx b/ts/components/conversation/GIF.tsx
index 1bd4b63ca..6c1c6fee7 100644
--- a/ts/components/conversation/GIF.tsx
+++ b/ts/components/conversation/GIF.tsx
@@ -36,7 +36,7 @@ export type Props = {
 
 type MediaEvent = React.SyntheticEvent<HTMLVideoElement, Event>;
 
-export const GIF: React.FC<Props> = props => {
+export function GIF(props: Props): JSX.Element {
   const {
     attachment,
     size,
@@ -258,4 +258,4 @@ export const GIF: React.FC<Props> = props => {
       {fileSize}
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/GroupDescription.stories.tsx b/ts/components/conversation/GroupDescription.stories.tsx
index d5149f1ca..45b4510ec 100644
--- a/ts/components/conversation/GroupDescription.stories.tsx
+++ b/ts/components/conversation/GroupDescription.stories.tsx
@@ -22,61 +22,71 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   text: text('text', overrideProps.text || 'Default group description'),
 });
 
-export const Default = (): JSX.Element => (
-  <GroupDescription {...createProps()} />
-);
+export function Default(): JSX.Element {
+  return <GroupDescription {...createProps()} />;
+}
 
-export const Long = (): JSX.Element => (
-  <GroupDescription
-    {...createProps({
-      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed vehicula urna. Ut rhoncus, justo a vestibulum elementum, libero ligula molestie massa, et volutpat nibh ipsum sit amet enim. Vestibulum ac mi enim. Nulla fringilla justo justo, volutpat semper ex convallis quis. Proin posuere, mi at auctor tincidunt, magna turpis mattis nibh, ullamcorper vehicula lectus mauris in mauris. Nullam blandit sapien tortor, quis vehicula quam molestie nec. Nam sagittis dolor in eros dapibus scelerisque. Proin vitae ex sed magna lobortis tincidunt. Aenean dictum laoreet dolor, at suscipit ligula fermentum ac. Nam condimentum turpis quis sollicitudin rhoncus.',
-    })}
-  />
-);
+export function Long(): JSX.Element {
+  return (
+    <GroupDescription
+      {...createProps({
+        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed vehicula urna. Ut rhoncus, justo a vestibulum elementum, libero ligula molestie massa, et volutpat nibh ipsum sit amet enim. Vestibulum ac mi enim. Nulla fringilla justo justo, volutpat semper ex convallis quis. Proin posuere, mi at auctor tincidunt, magna turpis mattis nibh, ullamcorper vehicula lectus mauris in mauris. Nullam blandit sapien tortor, quis vehicula quam molestie nec. Nam sagittis dolor in eros dapibus scelerisque. Proin vitae ex sed magna lobortis tincidunt. Aenean dictum laoreet dolor, at suscipit ligula fermentum ac. Nam condimentum turpis quis sollicitudin rhoncus.',
+      })}
+    />
+  );
+}
 
-export const WithNewlines = (): JSX.Element => (
-  <GroupDescription
-    {...createProps({
-      text: 'This is long\n\nSo many lines\n\nToo many lines?',
-    })}
-  />
-);
+export function WithNewlines(): JSX.Element {
+  return (
+    <GroupDescription
+      {...createProps({
+        text: 'This is long\n\nSo many lines\n\nToo many lines?',
+      })}
+    />
+  );
+}
 
 WithNewlines.story = {
   name: 'With newlines',
 };
 
-export const WithEmoji = (): JSX.Element => (
-  <GroupDescription
-    {...createProps({
-      text: '🍒🍩🌭',
-    })}
-  />
-);
+export function WithEmoji(): JSX.Element {
+  return (
+    <GroupDescription
+      {...createProps({
+        text: '🍒🍩🌭',
+      })}
+    />
+  );
+}
 
 WithEmoji.story = {
   name: 'With emoji',
 };
 
-export const WithLink = (): JSX.Element => (
-  <GroupDescription
-    {...createProps({
-      text: 'I love https://example.com and http://example.com and example.com, but not https://user:bar@example.com',
-    })}
-  />
-);
+export function WithLink(): JSX.Element {
+  return (
+    <GroupDescription
+      {...createProps({
+        text: 'I love https://example.com and http://example.com and example.com, but not https://user:bar@example.com',
+      })}
+    />
+  );
+}
 
 WithLink.story = {
   name: 'With link',
 };
 
-export const KitchenSink = (): JSX.Element => (
-  <GroupDescription
-    {...createProps({
-      text: '🍒 https://example.com this is a long thing\nhttps://example.com on another line\nhttps://example.com',
-    })}
-  />
-);
+export function KitchenSink(): JSX.Element {
+  return (
+    <GroupDescription
+      {...createProps({
+        text: '🍒 https://example.com this is a long thing\nhttps://example.com on another line\nhttps://example.com',
+      })}
+    />
+  );
+}
 
 KitchenSink.story = {
   name: 'Kitchen sink',
diff --git a/ts/components/conversation/GroupDescription.tsx b/ts/components/conversation/GroupDescription.tsx
index 500edc729..7836f2c56 100644
--- a/ts/components/conversation/GroupDescription.tsx
+++ b/ts/components/conversation/GroupDescription.tsx
@@ -16,11 +16,11 @@ export type PropsType = {
   text: string;
 };
 
-export const GroupDescription = ({
+export function GroupDescription({
   i18n,
   title,
   text,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const textRef = useRef<HTMLDivElement | null>(null);
   const [hasReadMore, setHasReadMore] = useState(false);
   const [showFullDescription, setShowFullDescription] = useState(false);
@@ -67,4 +67,4 @@ export const GroupDescription = ({
       )}
     </>
   );
-};
+}
diff --git a/ts/components/conversation/GroupV1DisabledActions.stories.tsx b/ts/components/conversation/GroupV1DisabledActions.stories.tsx
index 98d7145d2..86416f35e 100644
--- a/ts/components/conversation/GroupV1DisabledActions.stories.tsx
+++ b/ts/components/conversation/GroupV1DisabledActions.stories.tsx
@@ -20,6 +20,6 @@ export default {
   title: 'Components/Conversation/GroupV1DisabledActions',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return <GroupV1DisabledActions {...createProps()} />;
-};
+}
diff --git a/ts/components/conversation/GroupV1DisabledActions.tsx b/ts/components/conversation/GroupV1DisabledActions.tsx
index c0436d217..3b09f0c26 100644
--- a/ts/components/conversation/GroupV1DisabledActions.tsx
+++ b/ts/components/conversation/GroupV1DisabledActions.tsx
@@ -10,10 +10,10 @@ export type PropsType = {
   onStartGroupMigration: () => unknown;
 };
 
-export const GroupV1DisabledActions = ({
+export function GroupV1DisabledActions({
   i18n,
   onStartGroupMigration,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <div className="module-group-v1-disabled-actions">
       <p className="module-group-v1-disabled-actions__message">
@@ -46,4 +46,4 @@ export const GroupV1DisabledActions = ({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/GroupV1Migration.stories.tsx b/ts/components/conversation/GroupV1Migration.stories.tsx
index c2b22f6bc..842bb411f 100644
--- a/ts/components/conversation/GroupV1Migration.stories.tsx
+++ b/ts/components/conversation/GroupV1Migration.stories.tsx
@@ -42,73 +42,83 @@ export default {
   title: 'Components/Conversation/GroupV1Migration',
 };
 
-export const YouWereInvited = (): JSX.Element => (
-  <GroupV1Migration
-    {...createProps({
-      areWeInvited: true,
-    })}
-  />
-);
+export function YouWereInvited(): JSX.Element {
+  return (
+    <GroupV1Migration
+      {...createProps({
+        areWeInvited: true,
+      })}
+    />
+  );
+}
 
 YouWereInvited.story = {
   name: 'You were invited',
 };
 
-export const SingleDroppedAndSingleInvitedMember = (): JSX.Element => (
-  <GroupV1Migration {...createProps()} />
-);
+export function SingleDroppedAndSingleInvitedMember(): JSX.Element {
+  return <GroupV1Migration {...createProps()} />;
+}
 
 SingleDroppedAndSingleInvitedMember.story = {
   name: 'Single dropped and single invited member',
 };
 
-export const MultipleDroppedAndInvitedMembers = (): JSX.Element => (
-  <GroupV1Migration
-    {...createProps({
-      invitedMembers: [contact1, contact2],
-      droppedMembers: [contact1, contact2],
-    })}
-  />
-);
+export function MultipleDroppedAndInvitedMembers(): JSX.Element {
+  return (
+    <GroupV1Migration
+      {...createProps({
+        invitedMembers: [contact1, contact2],
+        droppedMembers: [contact1, contact2],
+      })}
+    />
+  );
+}
 
 MultipleDroppedAndInvitedMembers.story = {
   name: 'Multiple dropped and invited members',
 };
 
-export const JustInvitedMembers = (): JSX.Element => (
-  <GroupV1Migration
-    {...createProps({
-      invitedMembers: [contact1, contact1, contact2, contact2],
-      droppedMembers: [],
-    })}
-  />
-);
+export function JustInvitedMembers(): JSX.Element {
+  return (
+    <GroupV1Migration
+      {...createProps({
+        invitedMembers: [contact1, contact1, contact2, contact2],
+        droppedMembers: [],
+      })}
+    />
+  );
+}
 
 JustInvitedMembers.story = {
   name: 'Just invited members',
 };
 
-export const JustDroppedMembers = (): JSX.Element => (
-  <GroupV1Migration
-    {...createProps({
-      invitedMembers: [],
-      droppedMembers: [contact1, contact1, contact2, contact2],
-    })}
-  />
-);
+export function JustDroppedMembers(): JSX.Element {
+  return (
+    <GroupV1Migration
+      {...createProps({
+        invitedMembers: [],
+        droppedMembers: [contact1, contact1, contact2, contact2],
+      })}
+    />
+  );
+}
 
 JustDroppedMembers.story = {
   name: 'Just dropped members',
 };
 
-export const NoDroppedOrInvitedMembers = (): JSX.Element => (
-  <GroupV1Migration
-    {...createProps({
-      invitedMembers: [],
-      droppedMembers: [],
-    })}
-  />
-);
+export function NoDroppedOrInvitedMembers(): JSX.Element {
+  return (
+    <GroupV1Migration
+      {...createProps({
+        invitedMembers: [],
+        droppedMembers: [],
+      })}
+    />
+  );
+}
 
 NoDroppedOrInvitedMembers.story = {
   name: 'No dropped or invited members',
diff --git a/ts/components/conversation/GroupV2Change.stories.tsx b/ts/components/conversation/GroupV2Change.stories.tsx
index 7604ff564..693220e6e 100644
--- a/ts/components/conversation/GroupV2Change.stories.tsx
+++ b/ts/components/conversation/GroupV2Change.stories.tsx
@@ -70,7 +70,7 @@ export default {
   title: 'Components/Conversation/GroupV2Change',
 };
 
-export const Multiple = (): JSX.Element => {
+export function Multiple(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -110,9 +110,9 @@ export const Multiple = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
-export const Create = (): JSX.Element => {
+export function Create(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -140,9 +140,9 @@ export const Create = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
-export const Title = (): JSX.Element => {
+export function Title(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -196,9 +196,9 @@ export const Title = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
-export const Avatar = (): JSX.Element => {
+export function Avatar(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -255,9 +255,9 @@ export const Avatar = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
-export const AccessAttributes = (): JSX.Element => {
+export function AccessAttributes(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -314,13 +314,13 @@ export const AccessAttributes = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 AccessAttributes.story = {
   name: 'Access (Attributes)',
 };
 
-export const AccessMembers = (): JSX.Element => {
+export function AccessMembers(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -377,13 +377,13 @@ export const AccessMembers = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 AccessMembers.story = {
   name: 'Access (Members)',
 };
 
-export const AccessInviteLink = (): JSX.Element => {
+export function AccessInviteLink(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -440,13 +440,13 @@ export const AccessInviteLink = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 AccessInviteLink.story = {
   name: 'Access (Invite Link)',
 };
 
-export const MemberAdd = (): JSX.Element => {
+export function MemberAdd(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -503,9 +503,9 @@ export const MemberAdd = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
-export const MemberAddFromInvited = (): JSX.Element => {
+export function MemberAddFromInvited(): JSX.Element {
   return (
     <>
       {/* the strings where someone added you - shown like a normal add */}
@@ -620,13 +620,13 @@ export const MemberAddFromInvited = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 MemberAddFromInvited.story = {
   name: 'Member Add (from invited)',
 };
 
-export const MemberAddFromLink = (): JSX.Element => {
+export function MemberAddFromLink(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -657,13 +657,13 @@ export const MemberAddFromLink = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 MemberAddFromLink.story = {
   name: 'Member Add (from link)',
 };
 
-export const MemberAddFromAdminApproval = (): JSX.Element => {
+export function MemberAddFromAdminApproval(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -711,13 +711,13 @@ export const MemberAddFromAdminApproval = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 MemberAddFromAdminApproval.story = {
   name: 'Member Add (from admin approval)',
 };
 
-export const MemberRemove = (): JSX.Element => {
+export function MemberRemove(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -783,9 +783,9 @@ export const MemberRemove = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
-export const MemberPrivilege = (): JSX.Element => {
+export function MemberPrivilege(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -886,9 +886,9 @@ export const MemberPrivilege = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
-export const PendingAddOne = (): JSX.Element => {
+export function PendingAddOne(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -936,13 +936,13 @@ export const PendingAddOne = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 PendingAddOne.story = {
   name: 'Pending Add - one',
 };
 
-export const PendingAddMany = (): JSX.Element => {
+export function PendingAddMany(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -973,13 +973,13 @@ export const PendingAddMany = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 PendingAddMany.story = {
   name: 'Pending Add - many',
 };
 
-export const PendingRemoveOne = (): JSX.Element => {
+export function PendingRemoveOne(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -1120,13 +1120,13 @@ export const PendingRemoveOne = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 PendingRemoveOne.story = {
   name: 'Pending Remove - one',
 };
 
-export const PendingRemoveMany = (): JSX.Element => {
+export function PendingRemoveMany(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -1216,13 +1216,13 @@ export const PendingRemoveMany = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 PendingRemoveMany.story = {
   name: 'Pending Remove - many',
 };
 
-export const AdminApprovalAdd = (): JSX.Element => {
+export function AdminApprovalAdd(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -1243,13 +1243,13 @@ export const AdminApprovalAdd = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 AdminApprovalAdd.story = {
   name: 'Admin Approval (Add)',
 };
 
-export const AdminApprovalRemove = (): JSX.Element => {
+export function AdminApprovalRemove(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -1361,13 +1361,13 @@ export const AdminApprovalRemove = (): JSX.Element => {
       )}
     </>
   );
-};
+}
 
 AdminApprovalRemove.story = {
   name: 'Admin Approval (Remove)',
 };
 
-export const GroupLinkAdd = (): JSX.Element => {
+export function GroupLinkAdd(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -1424,13 +1424,13 @@ export const GroupLinkAdd = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 GroupLinkAdd.story = {
   name: 'Group Link (Add)',
 };
 
-export const GroupLinkReset = (): JSX.Element => {
+export function GroupLinkReset(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -1458,13 +1458,13 @@ export const GroupLinkReset = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 GroupLinkReset.story = {
   name: 'Group Link (Reset)',
 };
 
-export const GroupLinkRemove = (): JSX.Element => {
+export function GroupLinkRemove(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -1492,13 +1492,13 @@ export const GroupLinkRemove = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 GroupLinkRemove.story = {
   name: 'Group Link (Remove)',
 };
 
-export const DescriptionRemove = (): JSX.Element => {
+export function DescriptionRemove(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -1529,13 +1529,13 @@ export const DescriptionRemove = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 DescriptionRemove.story = {
   name: 'Description (Remove)',
 };
 
-export const DescriptionChange = (): JSX.Element => {
+export function DescriptionChange(): JSX.Element {
   return (
     <>
       {renderChange(
@@ -1578,13 +1578,13 @@ export const DescriptionChange = (): JSX.Element => {
       )}
     </>
   );
-};
+}
 
 DescriptionChange.story = {
   name: 'Description (Change)',
 };
 
-export const AnnouncementGroupChange = (): JSX.Element => {
+export function AnnouncementGroupChange(): JSX.Element {
   return (
     <>
       {renderChange({
@@ -1641,7 +1641,7 @@ export const AnnouncementGroupChange = (): JSX.Element => {
       })}
     </>
   );
-};
+}
 
 AnnouncementGroupChange.story = {
   name: 'Announcement Group (Change)',
diff --git a/ts/components/conversation/GroupV2PendingApprovalActions.stories.tsx b/ts/components/conversation/GroupV2PendingApprovalActions.stories.tsx
index 9a7326442..83ce30e1a 100644
--- a/ts/components/conversation/GroupV2PendingApprovalActions.stories.tsx
+++ b/ts/components/conversation/GroupV2PendingApprovalActions.stories.tsx
@@ -20,6 +20,6 @@ export default {
   title: 'Components/Conversation/GroupV2PendingApprovalActions',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return <GroupV2PendingApprovalActions {...createProps()} />;
-};
+}
diff --git a/ts/components/conversation/GroupV2PendingApprovalActions.tsx b/ts/components/conversation/GroupV2PendingApprovalActions.tsx
index eebb26ce5..8c8dafbf4 100644
--- a/ts/components/conversation/GroupV2PendingApprovalActions.tsx
+++ b/ts/components/conversation/GroupV2PendingApprovalActions.tsx
@@ -9,10 +9,10 @@ export type PropsType = {
   onCancelJoinRequest: () => unknown;
 };
 
-export const GroupV2PendingApprovalActions = ({
+export function GroupV2PendingApprovalActions({
   i18n,
   onCancelJoinRequest,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   return (
     <div className="module-group-v2-pending-approval-actions">
       <p className="module-group-v2-pending-approval-actions__message">
@@ -30,4 +30,4 @@ export const GroupV2PendingApprovalActions = ({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/Image.stories.tsx b/ts/components/conversation/Image.stories.tsx
index ad8765de5..09da9a0a1 100644
--- a/ts/components/conversation/Image.stories.tsx
+++ b/ts/components/conversation/Image.stories.tsx
@@ -70,17 +70,17 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   width: number('width', overrideProps.width || 100),
 });
 
-export const UrlWithHeightWidth = (): JSX.Element => {
+export function UrlWithHeightWidth(): JSX.Element {
   const props = createProps();
 
   return <Image {...props} />;
-};
+}
 
 UrlWithHeightWidth.story = {
   name: 'URL with Height/Width',
 };
 
-export const Caption = (): JSX.Element => {
+export function Caption(): JSX.Element {
   const defaultProps = createProps();
   const props = {
     ...defaultProps,
@@ -91,25 +91,25 @@ export const Caption = (): JSX.Element => {
   };
 
   return <Image {...props} />;
-};
+}
 
-export const PlayIcon = (): JSX.Element => {
+export function PlayIcon(): JSX.Element {
   const props = createProps({
     playIconOverlay: true,
   });
 
   return <Image {...props} />;
-};
+}
 
-export const CloseButton = (): JSX.Element => {
+export function CloseButton(): JSX.Element {
   const props = createProps({
     closeButton: true,
   });
 
   return <Image {...props} />;
-};
+}
 
-export const NoBorderOrBackground = (): JSX.Element => {
+export function NoBorderOrBackground(): JSX.Element {
   const props = createProps({
     attachment: fakeAttachment({
       contentType: IMAGE_PNG,
@@ -126,13 +126,13 @@ export const NoBorderOrBackground = (): JSX.Element => {
       <Image {...props} />
     </div>
   );
-};
+}
 
 NoBorderOrBackground.story = {
   name: 'No Border or Background',
 };
 
-export const Pending = (): JSX.Element => {
+export function Pending(): JSX.Element {
   const props = createProps({
     attachment: fakeAttachment({
       contentType: IMAGE_PNG,
@@ -143,9 +143,9 @@ export const Pending = (): JSX.Element => {
   });
 
   return <Image {...props} />;
-};
+}
 
-export const PendingWBlurhash = (): JSX.Element => {
+export function PendingWBlurhash(): JSX.Element {
   const props = createProps({
     attachment: fakeAttachment({
       contentType: IMAGE_PNG,
@@ -163,13 +163,13 @@ export const PendingWBlurhash = (): JSX.Element => {
       height={400}
     />
   );
-};
+}
 
 PendingWBlurhash.story = {
   name: 'Pending w/blurhash',
 };
 
-export const CurvedCorners = (): JSX.Element => {
+export function CurvedCorners(): JSX.Element {
   const props = createProps({
     curveBottomLeft: CurveType.Normal,
     curveBottomRight: CurveType.Normal,
@@ -178,17 +178,17 @@ export const CurvedCorners = (): JSX.Element => {
   });
 
   return <Image {...props} />;
-};
+}
 
-export const SmallCurveTopLeft = (): JSX.Element => {
+export function SmallCurveTopLeft(): JSX.Element {
   const props = createProps({
     curveTopLeft: CurveType.Small,
   });
 
   return <Image {...props} />;
-};
+}
 
-export const SoftCorners = (): JSX.Element => {
+export function SoftCorners(): JSX.Element {
   const props = createProps({
     curveBottomLeft: CurveType.Tiny,
     curveBottomRight: CurveType.Tiny,
@@ -197,30 +197,30 @@ export const SoftCorners = (): JSX.Element => {
   });
 
   return <Image {...props} />;
-};
+}
 
-export const BottomOverlay = (): JSX.Element => {
+export function BottomOverlay(): JSX.Element {
   const props = createProps({
     bottomOverlay: true,
   });
 
   return <Image {...props} />;
-};
+}
 
-export const FullOverlayWithText = (): JSX.Element => {
+export function FullOverlayWithText(): JSX.Element {
   const props = createProps({
     darkOverlay: true,
     overlayText: 'Honk!',
   });
 
   return <Image {...props} />;
-};
+}
 
 FullOverlayWithText.story = {
   name: 'Full Overlay with Text',
 };
 
-export const Blurhash = (): JSX.Element => {
+export function Blurhash(): JSX.Element {
   const defaultProps = createProps();
   const props = {
     ...defaultProps,
@@ -228,28 +228,28 @@ export const Blurhash = (): JSX.Element => {
   };
 
   return <Image {...props} />;
-};
+}
 
-export const UndefinedBlurHash = (): JSX.Element => {
-  const Wrapper = () => {
-    const theme = React.useContext(StorybookThemeContext);
-    const props = createProps({
-      blurHash: undefined,
-      theme,
-      url: undefined,
-    });
+function UndefinedBlurHashWrapper() {
+  const theme = React.useContext(StorybookThemeContext);
+  const props = createProps({
+    blurHash: undefined,
+    theme,
+    url: undefined,
+  });
 
-    return <Image {...props} />;
-  };
+  return <Image {...props} />;
+}
 
-  return <Wrapper />;
-};
+export function UndefinedBlurHash(): JSX.Element {
+  return <UndefinedBlurHashWrapper />;
+}
 
 UndefinedBlurHash.story = {
   name: 'undefined blurHash',
 };
 
-export const MissingImage = (): JSX.Element => {
+export function MissingImage(): JSX.Element {
   const defaultProps = createProps();
   const props = {
     ...defaultProps,
@@ -258,4 +258,4 @@ export const MissingImage = (): JSX.Element => {
   };
 
   return <Image {...props} />;
-};
+}
diff --git a/ts/components/conversation/ImageGrid.stories.tsx b/ts/components/conversation/ImageGrid.stories.tsx
index 746ba8f1b..9f1eda49f 100644
--- a/ts/components/conversation/ImageGrid.stories.tsx
+++ b/ts/components/conversation/ImageGrid.stories.tsx
@@ -55,13 +55,13 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   ),
 });
 
-export const OneImage = (): JSX.Element => {
+export function OneImage(): JSX.Element {
   const props = createProps();
 
   return <ImageGrid {...props} />;
-};
+}
 
-export const TwoImages = (): JSX.Element => {
+export function TwoImages(): JSX.Element {
   const props = createProps({
     attachments: [
       fakeAttachment({
@@ -82,9 +82,9 @@ export const TwoImages = (): JSX.Element => {
   });
 
   return <ImageGrid {...props} />;
-};
+}
 
-export const ThreeImages = (): JSX.Element => {
+export function ThreeImages(): JSX.Element {
   const props = createProps({
     attachments: [
       fakeAttachment({
@@ -112,9 +112,9 @@ export const ThreeImages = (): JSX.Element => {
   });
 
   return <ImageGrid {...props} />;
-};
+}
 
-export const FourImages = (): JSX.Element => {
+export function FourImages(): JSX.Element {
   const props = createProps({
     attachments: [
       fakeAttachment({
@@ -149,9 +149,9 @@ export const FourImages = (): JSX.Element => {
   });
 
   return <ImageGrid {...props} />;
-};
+}
 
-export const FiveImages = (): JSX.Element => {
+export function FiveImages(): JSX.Element {
   const props = createProps({
     attachments: [
       fakeAttachment({
@@ -193,7 +193,7 @@ export const FiveImages = (): JSX.Element => {
   });
 
   return <ImageGrid {...props} />;
-};
+}
 
 export const _6Images = (): JSX.Element => {
   const props = createProps({
@@ -257,7 +257,7 @@ _6Images.story = {
   name: '6+ Images',
 };
 
-export const MixedContentTypes = (): JSX.Element => {
+export function MixedContentTypes(): JSX.Element {
   const props = createProps({
     attachments: [
       fakeAttachment({
@@ -295,9 +295,9 @@ export const MixedContentTypes = (): JSX.Element => {
   });
 
   return <ImageGrid {...props} />;
-};
+}
 
-export const Sticker = (): JSX.Element => {
+export function Sticker(): JSX.Element {
   const props = createProps({
     attachments: [
       fakeAttachment({
@@ -313,25 +313,25 @@ export const Sticker = (): JSX.Element => {
   });
 
   return <ImageGrid {...props} />;
-};
+}
 
-export const ContentAboveAndBelow = (): JSX.Element => {
+export function ContentAboveAndBelow(): JSX.Element {
   const props = createProps({
     withContentAbove: true,
     withContentBelow: true,
   });
 
   return <ImageGrid {...props} />;
-};
+}
 
 ContentAboveAndBelow.story = {
   name: 'Content Above and Below',
 };
 
-export const BottomOverlay = (): JSX.Element => {
+export function BottomOverlay(): JSX.Element {
   const props = createProps({
     bottomOverlay: true,
   });
 
   return <ImageGrid {...props} />;
-};
+}
diff --git a/ts/components/conversation/ImageGrid.tsx b/ts/components/conversation/ImageGrid.tsx
index c70ae1002..f80f5a25a 100644
--- a/ts/components/conversation/ImageGrid.tsx
+++ b/ts/components/conversation/ImageGrid.tsx
@@ -94,7 +94,7 @@ function getCurves({
   };
 }
 
-export const ImageGrid = ({
+export function ImageGrid({
   attachments,
   bottomOverlay,
   direction,
@@ -109,7 +109,7 @@ export const ImageGrid = ({
   theme,
   withContentAbove,
   withContentBelow,
-}: Props): JSX.Element | null => {
+}: Props): JSX.Element | null {
   const { curveTopLeft, curveTopRight, curveBottomLeft, curveBottomRight } =
     getCurves({
       direction,
@@ -438,4 +438,4 @@ export const ImageGrid = ({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/LastSeenIndicator.stories.tsx b/ts/components/conversation/LastSeenIndicator.stories.tsx
index 009602307..138d8c918 100644
--- a/ts/components/conversation/LastSeenIndicator.stories.tsx
+++ b/ts/components/conversation/LastSeenIndicator.stories.tsx
@@ -21,18 +21,18 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   i18n,
 });
 
-export const One = (): JSX.Element => {
+export function One(): JSX.Element {
   const props = createProps();
   return <LastSeenIndicator {...props} />;
-};
+}
 
-export const MoreThanOne = (): JSX.Element => {
+export function MoreThanOne(): JSX.Element {
   const props = createProps({
     count: 5,
   });
 
   return <LastSeenIndicator {...props} />;
-};
+}
 
 MoreThanOne.story = {
   name: 'More than One',
diff --git a/ts/components/conversation/LastSeenIndicator.tsx b/ts/components/conversation/LastSeenIndicator.tsx
index a6b576319..ca7a3f6ed 100644
--- a/ts/components/conversation/LastSeenIndicator.tsx
+++ b/ts/components/conversation/LastSeenIndicator.tsx
@@ -11,7 +11,7 @@ export type Props = {
 };
 
 export const LastSeenIndicator = forwardRef<HTMLDivElement, Props>(
-  ({ count, i18n }, ref) => {
+  function LastSeenIndicatorInner({ count, i18n }, ref) {
     const message =
       count === 1
         ? i18n('unreadMessage')
diff --git a/ts/components/conversation/LinkPreviewDate.tsx b/ts/components/conversation/LinkPreviewDate.tsx
index 835f5c847..1517fbed1 100644
--- a/ts/components/conversation/LinkPreviewDate.tsx
+++ b/ts/components/conversation/LinkPreviewDate.tsx
@@ -11,10 +11,10 @@ type Props = {
   className?: string;
 };
 
-export const LinkPreviewDate: React.FC<Props> = ({
+export function LinkPreviewDate({
   date,
   className = '',
-}: Props) => {
+}: Props): JSX.Element | null {
   const dateMoment: Moment | null = isLinkPreviewDateValid(date)
     ? moment(date)
     : null;
@@ -24,4 +24,4 @@ export const LinkPreviewDate: React.FC<Props> = ({
       {dateMoment.format('ll')}
     </time>
   ) : null;
-};
+}
diff --git a/ts/components/conversation/Linkify.stories.tsx b/ts/components/conversation/Linkify.stories.tsx
index 795ab345c..78f3afb4a 100644
--- a/ts/components/conversation/Linkify.stories.tsx
+++ b/ts/components/conversation/Linkify.stories.tsx
@@ -17,79 +17,79 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   text: text('text', overrideProps.text || ''),
 });
 
-export const OnlyLink = (): JSX.Element => {
+export function OnlyLink(): JSX.Element {
   const props = createProps({
     text: 'https://www.signal.org',
   });
 
   return <Linkify {...props} />;
-};
+}
 
-export const LinksWithText = (): JSX.Element => {
+export function LinksWithText(): JSX.Element {
   const props = createProps({
     text: 'you should see this: https://www.signal.org - it is good. Also: https://placekitten.com!',
   });
 
   return <Linkify {...props} />;
-};
+}
 
 LinksWithText.story = {
   name: 'Links with Text',
 };
 
-export const LinksWithEmojiWithoutSpace = (): JSX.Element => {
+export function LinksWithEmojiWithoutSpace(): JSX.Element {
   const props = createProps({
     text: '👍https://www.signal.org😎',
   });
 
   return <Linkify {...props} />;
-};
+}
 
 LinksWithEmojiWithoutSpace.story = {
   name: 'Links with Emoji without space',
 };
 
-export const LinksWithEmojiAndText = (): JSX.Element => {
+export function LinksWithEmojiAndText(): JSX.Element {
   const props = createProps({
     text: 'https://example.com ⚠️ 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ https://example.com',
   });
 
   return <Linkify {...props} />;
-};
+}
 
 LinksWithEmojiAndText.story = {
   name: 'Links with Emoji and Text',
 };
 
-export const NoLink = (): JSX.Element => {
+export function NoLink(): JSX.Element {
   const props = createProps({
     text: 'I am fond of cats',
   });
 
   return <Linkify {...props} />;
-};
+}
 
-export const BlockedProtocols = (): JSX.Element => {
+export function BlockedProtocols(): JSX.Element {
   const props = createProps({
     text: 'smailto:someone@somewhere.com - ftp://something.com - //local/share - \\localshare',
   });
 
   return <Linkify {...props} />;
-};
+}
 
-export const MissingProtocols = (): JSX.Element => {
+export function MissingProtocols(): JSX.Element {
   const props = createProps({
     text: 'I love example.com. I also love кц.рф. I also love مثال.تونس. But I do not love test.example.',
   });
 
   return <Linkify {...props} />;
-};
+}
 
 MissingProtocols.story = {
   name: 'Missing protocols',
 };
 
-export const CustomTextRender = (): JSX.Element => {
+export function CustomTextRender(): JSX.Element {
   const props = createProps({
     text: 'you should see this: https://www.signal.org - it is good. Also: https://placekitten.com!',
     renderNonLink: ({ text: theText, key }) => (
@@ -100,4 +100,4 @@ export const CustomTextRender = (): JSX.Element => {
   });
 
   return <Linkify {...props} />;
-};
+}
diff --git a/ts/components/conversation/MandatoryProfileSharingActions.stories.tsx b/ts/components/conversation/MandatoryProfileSharingActions.stories.tsx
index fd5eeaff4..df738b56c 100644
--- a/ts/components/conversation/MandatoryProfileSharingActions.stories.tsx
+++ b/ts/components/conversation/MandatoryProfileSharingActions.stories.tsx
@@ -31,18 +31,18 @@ export default {
   title: 'Components/Conversation/MandatoryProfileSharingActions',
 };
 
-export const Direct = (): JSX.Element => {
+export function Direct(): JSX.Element {
   return (
     <div style={{ width: '480px' }}>
       <MandatoryProfileSharingActions {...getBaseProps()} />
     </div>
   );
-};
+}
 
-export const Group = (): JSX.Element => {
+export function Group(): JSX.Element {
   return (
     <div style={{ width: '480px' }}>
       <MandatoryProfileSharingActions {...getBaseProps(true)} />
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/MandatoryProfileSharingActions.tsx b/ts/components/conversation/MandatoryProfileSharingActions.tsx
index 04adee612..33d6a8011 100644
--- a/ts/components/conversation/MandatoryProfileSharingActions.tsx
+++ b/ts/components/conversation/MandatoryProfileSharingActions.tsx
@@ -23,7 +23,7 @@ export type Props = {
     'conversationType' | 'onBlock' | 'onBlockAndReportSpam' | 'onDelete'
   >;
 
-export const MandatoryProfileSharingActions = ({
+export function MandatoryProfileSharingActions({
   conversationType,
   firstName,
   i18n,
@@ -32,7 +32,7 @@ export const MandatoryProfileSharingActions = ({
   onBlockAndReportSpam,
   onDelete,
   title,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const [mrState, setMrState] = React.useState(MessageRequestState.default);
 
   return (
@@ -112,4 +112,4 @@ export const MandatoryProfileSharingActions = ({
       </div>
     </>
   );
-};
+}
diff --git a/ts/components/conversation/MessageAudio.tsx b/ts/components/conversation/MessageAudio.tsx
index e2a35aead..45e4a1b30 100644
--- a/ts/components/conversation/MessageAudio.tsx
+++ b/ts/components/conversation/MessageAudio.tsx
@@ -126,7 +126,7 @@ const timeToText = (time: number): string => {
  * for play button and playback rate button
  */
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
+  function ButtonInner(props, ref) {
     const {
       i18n,
       variant,
@@ -197,13 +197,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   }
 );
 
-const PlayedDot = ({
+function PlayedDot({
   played,
   onHide,
 }: {
   played: boolean;
   onHide: () => void;
-}) => {
+}) {
   const start = played ? 1 : 0;
   const end = played ? 0 : 1;
 
@@ -231,7 +231,7 @@ const PlayedDot = ({
       )}
     />
   );
-};
+}
 
 /**
  * Display message audio attachment along with its waveform, duration, and
@@ -246,7 +246,7 @@ const PlayedDot = ({
  * `context` is required for displaying separate MessageAudio instances in
  * MessageDetails and Message React components.
  */
-export const MessageAudio: React.FC<Props> = (props: Props) => {
+export function MessageAudio(props: Props): JSX.Element {
   const {
     active,
     buttonRef,
@@ -625,4 +625,4 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
       {metadata}
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/MessageBody.stories.tsx b/ts/components/conversation/MessageBody.stories.tsx
index 87b0e4705..8b99cb3aa 100644
--- a/ts/components/conversation/MessageBody.stories.tsx
+++ b/ts/components/conversation/MessageBody.stories.tsx
@@ -31,24 +31,24 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   },
 });
 
-export const LinksEnabled = (): JSX.Element => {
+export function LinksEnabled(): JSX.Element {
   const props = createProps({
     text: 'Check out https://www.signal.org',
   });
 
   return <MessageBody {...props} />;
-};
+}
 
-export const LinksDisabled = (): JSX.Element => {
+export function LinksDisabled(): JSX.Element {
   const props = createProps({
     disableLinks: true,
     text: 'Check out https://www.signal.org',
   });
 
   return <MessageBody {...props} />;
-};
+}
 
-export const EmojiSizeBasedOnCount = (): JSX.Element => {
+export function EmojiSizeBasedOnCount(): JSX.Element {
   const props = createProps();
 
   return (
@@ -64,38 +64,38 @@ export const EmojiSizeBasedOnCount = (): JSX.Element => {
       <MessageBody {...props} text="😹😹😹😹😹😹😹😹😹" />
     </>
   );
-};
+}
 
-export const JumbomojiEnabled = (): JSX.Element => {
+export function JumbomojiEnabled(): JSX.Element {
   const props = createProps({
     text: '😹',
   });
 
   return <MessageBody {...props} />;
-};
+}
 
-export const JumbomojiDisabled = (): JSX.Element => {
+export function JumbomojiDisabled(): JSX.Element {
   const props = createProps({
     disableJumbomoji: true,
     text: '😹',
   });
 
   return <MessageBody {...props} />;
-};
+}
 
-export const JumbomojiDisabledByText = (): JSX.Element => {
+export function JumbomojiDisabledByText(): JSX.Element {
   const props = createProps({
     text: 'not a jumbo kitty 😹',
   });
 
   return <MessageBody {...props} />;
-};
+}
 
 JumbomojiDisabledByText.story = {
   name: 'Jumbomoji Disabled by Text',
 };
 
-export const TextPending = (): JSX.Element => {
+export function TextPending(): JSX.Element {
   const props = createProps({
     text: 'Check out https://www.signal.org',
     textAttachment: {
@@ -104,9 +104,9 @@ export const TextPending = (): JSX.Element => {
   });
 
   return <MessageBody {...props} />;
-};
+}
 
-export const Mention = (): JSX.Element => {
+export function Mention(): JSX.Element {
   const props = createProps({
     bodyRanges: [
       {
@@ -121,13 +121,13 @@ export const Mention = (): JSX.Element => {
   });
 
   return <MessageBody {...props} />;
-};
+}
 
 Mention.story = {
   name: '@Mention',
 };
 
-export const MultipleMentions = (): JSX.Element => {
+export function MultipleMentions(): JSX.Element {
   const props = createProps({
     // These are intentionally in a mixed order to test how we deal with that
     bodyRanges: [
@@ -157,13 +157,13 @@ export const MultipleMentions = (): JSX.Element => {
   });
 
   return <MessageBody {...props} />;
-};
+}
 
 MultipleMentions.story = {
   name: 'Multiple @Mentions',
 };
 
-export const ComplexMessageBody = (): JSX.Element => {
+export function ComplexMessageBody(): JSX.Element {
   const props = createProps({
     bodyRanges: [
       // These are intentionally in a mixed order to test how we deal with that
@@ -194,7 +194,7 @@ export const ComplexMessageBody = (): JSX.Element => {
   });
 
   return <MessageBody {...props} />;
-};
+}
 
 ComplexMessageBody.story = {
   name: 'Complex MessageBody',
diff --git a/ts/components/conversation/MessageBodyReadMore.stories.tsx b/ts/components/conversation/MessageBodyReadMore.stories.tsx
index bc1c26b4e..e8ef5b53a 100644
--- a/ts/components/conversation/MessageBodyReadMore.stories.tsx
+++ b/ts/components/conversation/MessageBodyReadMore.stories.tsx
@@ -43,49 +43,56 @@ function MessageBodyReadMoreTest({
   );
 }
 
-export const LongText100More = (): JSX.Element => (
-  <MessageBodyReadMoreTest
-    text={`${'test '.repeat(160)}${'extra '.repeat(10)}`}
-  />
-);
+export function LongText100More(): JSX.Element {
+  return (
+    <MessageBodyReadMoreTest
+      text={`${'test '.repeat(160)}${'extra '.repeat(10)}`}
+    />
+  );
+}
 
 LongText100More.story = {
   name: 'Long text + 100 more',
 };
 
-export const LotsOfCakeWithSomeCherriesOnTop = (): JSX.Element => (
-  <MessageBodyReadMoreTest text={`x${'🍰'.repeat(399)}${'🍒'.repeat(100)}`} />
-);
+export function LotsOfCakeWithSomeCherriesOnTop(): JSX.Element {
+  return (
+    <MessageBodyReadMoreTest text={`x${'🍰'.repeat(399)}${'🍒'.repeat(100)}`} />
+  );
+}
 
 LotsOfCakeWithSomeCherriesOnTop.story = {
   name: 'Lots of cake with some cherries on top',
 };
 
-export const LeafyNotBuffered = (): JSX.Element => (
-  <MessageBodyReadMoreTest text={`x${'🌿'.repeat(450)}`} />
-);
+export function LeafyNotBuffered(): JSX.Element {
+  return <MessageBodyReadMoreTest text={`x${'🌿'.repeat(450)}`} />;
+}
 
 LeafyNotBuffered.story = {
   name: 'Leafy not buffered',
 };
 
-export const Links = (): JSX.Element => (
-  <MessageBodyReadMoreTest
-    text={`${'test '.repeat(176)}https://www.signal.org`}
-  />
-);
+export function Links(): JSX.Element {
+  return (
+    <MessageBodyReadMoreTest
+      text={`${'test '.repeat(176)}https://www.signal.org`}
+    />
+  );
+}
 
-export const ExcessiveAmountsOfCake = (): JSX.Element => (
-  <MessageBodyReadMoreTest text={`x${'🍰'.repeat(20000)}`} />
-);
+export function ExcessiveAmountsOfCake(): JSX.Element {
+  return <MessageBodyReadMoreTest text={`x${'🍰'.repeat(20000)}`} />;
+}
 
 ExcessiveAmountsOfCake.story = {
   name: 'Excessive amounts of cake',
 };
 
-export const LongText = (): JSX.Element => (
-  <MessageBodyReadMoreTest
-    text={`
+export function LongText(): JSX.Element {
+  return (
+    <MessageBodyReadMoreTest
+      text={`
       SCENE I. Rome. A street.
       Enter FLAVIUS, MARULLUS, and certain Commoners
       FLAVIUS
@@ -183,8 +190,9 @@ export const LongText = (): JSX.Element => (
       Who else would soar above the view of men
       And keep us all in servile fearfulness.
       `}
-  />
-);
+    />
+  );
+}
 
 LongText.story = {
   name: 'Long text',
diff --git a/ts/components/conversation/MessageDetail.stories.tsx b/ts/components/conversation/MessageDetail.stories.tsx
index 0bc37bf53..187869503 100644
--- a/ts/components/conversation/MessageDetail.stories.tsx
+++ b/ts/components/conversation/MessageDetail.stories.tsx
@@ -95,7 +95,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   viewStory: action('viewStory'),
 });
 
-export const DeliveredIncoming = (): JSX.Element => {
+export function DeliveredIncoming(): JSX.Element {
   const props = createProps({
     contacts: [
       {
@@ -110,9 +110,9 @@ export const DeliveredIncoming = (): JSX.Element => {
     ],
   });
   return <MessageDetail {...props} />;
-};
+}
 
-export const DeliveredOutgoing = (): JSX.Element => {
+export function DeliveredOutgoing(): JSX.Element {
   const props = createProps({
     message: {
       ...defaultMessage,
@@ -121,9 +121,9 @@ export const DeliveredOutgoing = (): JSX.Element => {
     },
   });
   return <MessageDetail {...props} />;
-};
+}
 
-export const MessageStatuses = (): JSX.Element => {
+export function MessageStatuses(): JSX.Element {
   const props = createProps({
     contacts: [
       {
@@ -174,9 +174,9 @@ export const MessageStatuses = (): JSX.Element => {
     },
   });
   return <MessageDetail {...props} />;
-};
+}
 
-export const NotDelivered = (): JSX.Element => {
+export function NotDelivered(): JSX.Element {
   const props = createProps({
     message: {
       ...defaultMessage,
@@ -188,9 +188,9 @@ export const NotDelivered = (): JSX.Element => {
   props.receivedAt = undefined as any;
 
   return <MessageDetail {...props} />;
-};
+}
 
-export const NoContacts = (): JSX.Element => {
+export function NoContacts(): JSX.Element {
   const props = createProps({
     contacts: [],
     message: {
@@ -200,9 +200,9 @@ export const NoContacts = (): JSX.Element => {
     },
   });
   return <MessageDetail {...props} />;
-};
+}
 
-export const AllErrors = (): JSX.Element => {
+export function AllErrors(): JSX.Element {
   const props = createProps({
     errors: [
       {
@@ -247,4 +247,4 @@ export const AllErrors = (): JSX.Element => {
     ],
   });
   return <MessageDetail {...props} />;
-};
+}
diff --git a/ts/components/conversation/MessageMetadata.tsx b/ts/components/conversation/MessageMetadata.tsx
index 3bf646e2a..8aa5e2a63 100644
--- a/ts/components/conversation/MessageMetadata.tsx
+++ b/ts/components/conversation/MessageMetadata.tsx
@@ -31,7 +31,7 @@ type PropsType = {
   timestamp: number;
 };
 
-export const MessageMetadata = ({
+export function MessageMetadata({
   deletedForEveryone,
   direction,
   expirationLength,
@@ -48,7 +48,7 @@ export const MessageMetadata = ({
   status,
   textPending,
   timestamp,
-}: Readonly<PropsType>): ReactElement => {
+}: Readonly<PropsType>): ReactElement {
   const withImageNoCaption = Boolean(!isSticker && !hasText && isShowingImage);
   const metadataDirection = isSticker ? undefined : direction;
 
@@ -187,4 +187,4 @@ export const MessageMetadata = ({
   }
 
   return <div className={className}>{children}</div>;
-};
+}
diff --git a/ts/components/conversation/MessageRequestActions.stories.tsx b/ts/components/conversation/MessageRequestActions.stories.tsx
index a6d11d3b2..3c5f66343 100644
--- a/ts/components/conversation/MessageRequestActions.stories.tsx
+++ b/ts/components/conversation/MessageRequestActions.stories.tsx
@@ -30,41 +30,41 @@ export default {
   title: 'Components/Conversation/MessageRequestActions',
 };
 
-export const Direct = (): JSX.Element => {
+export function Direct(): JSX.Element {
   return (
     <div style={{ width: '480px' }}>
       <MessageRequestActions {...getBaseProps()} />
     </div>
   );
-};
+}
 
-export const DirectBlocked = (): JSX.Element => {
+export function DirectBlocked(): JSX.Element {
   return (
     <div style={{ width: '480px' }}>
       <MessageRequestActions {...getBaseProps()} isBlocked />
     </div>
   );
-};
+}
 
 DirectBlocked.story = {
   name: 'Direct (Blocked)',
 };
 
-export const Group = (): JSX.Element => {
+export function Group(): JSX.Element {
   return (
     <div style={{ width: '480px' }}>
       <MessageRequestActions {...getBaseProps(true)} />
     </div>
   );
-};
+}
 
-export const GroupBlocked = (): JSX.Element => {
+export function GroupBlocked(): JSX.Element {
   return (
     <div style={{ width: '480px' }}>
       <MessageRequestActions {...getBaseProps(true)} isBlocked />
     </div>
   );
-};
+}
 
 GroupBlocked.story = {
   name: 'Group (Blocked)',
diff --git a/ts/components/conversation/MessageRequestActions.tsx b/ts/components/conversation/MessageRequestActions.tsx
index 031a5d2ea..c7d4acdbc 100644
--- a/ts/components/conversation/MessageRequestActions.tsx
+++ b/ts/components/conversation/MessageRequestActions.tsx
@@ -22,7 +22,7 @@ export type Props = {
     'i18n' | 'state' | 'onChangeState'
   >;
 
-export const MessageRequestActions = ({
+export function MessageRequestActions({
   conversationType,
   firstName,
   i18n,
@@ -33,7 +33,7 @@ export const MessageRequestActions = ({
   onDelete,
   onUnblock,
   title,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const [mrState, setMrState] = React.useState(MessageRequestState.default);
 
   return (
@@ -112,4 +112,4 @@ export const MessageRequestActions = ({
       </div>
     </>
   );
-};
+}
diff --git a/ts/components/conversation/MessageRequestActionsConfirmation.tsx b/ts/components/conversation/MessageRequestActionsConfirmation.tsx
index 8269f42cb..d8f08f352 100644
--- a/ts/components/conversation/MessageRequestActionsConfirmation.tsx
+++ b/ts/components/conversation/MessageRequestActionsConfirmation.tsx
@@ -27,7 +27,7 @@ export type Props = {
   onChangeState(state: MessageRequestState): unknown;
 } & Omit<ContactNameProps, 'module'>;
 
-export const MessageRequestActionsConfirmation = ({
+export function MessageRequestActionsConfirmation({
   conversationType,
   i18n,
   onBlock,
@@ -37,7 +37,7 @@ export const MessageRequestActionsConfirmation = ({
   onUnblock,
   state,
   title,
-}: Props): JSX.Element | null => {
+}: Props): JSX.Element | null {
   if (state === MessageRequestState.blocking) {
     return (
       <ConfirmationDialog
@@ -134,4 +134,4 @@ export const MessageRequestActionsConfirmation = ({
   }
 
   return null;
-};
+}
diff --git a/ts/components/conversation/MessageTextMetadataSpacer.tsx b/ts/components/conversation/MessageTextMetadataSpacer.tsx
index 9c3ec4eae..f3de18a1f 100644
--- a/ts/components/conversation/MessageTextMetadataSpacer.tsx
+++ b/ts/components/conversation/MessageTextMetadataSpacer.tsx
@@ -6,8 +6,10 @@ import React from 'react';
 
 const SPACING = 10;
 
-export const MessageTextMetadataSpacer = ({
+export function MessageTextMetadataSpacer({
   metadataWidth,
-}: Readonly<{ metadataWidth: number }>): ReactElement => (
-  <span style={{ display: 'inline-block', width: metadataWidth + SPACING }} />
-);
+}: Readonly<{ metadataWidth: number }>): ReactElement {
+  return (
+    <span style={{ display: 'inline-block', width: metadataWidth + SPACING }} />
+  );
+}
diff --git a/ts/components/conversation/MessageTimestamp.stories.tsx b/ts/components/conversation/MessageTimestamp.stories.tsx
index 619d95ec1..4535230cd 100644
--- a/ts/components/conversation/MessageTimestamp.stories.tsx
+++ b/ts/components/conversation/MessageTimestamp.stories.tsx
@@ -81,10 +81,10 @@ export const Normal = (): JSX.Element => {
   return createTable();
 };
 
-export const Knobs = (): JSX.Element => {
+export function Knobs(): JSX.Element {
   const props = createProps({
     timestamp: date('timestamp', new Date()),
   });
 
   return <MessageTimestamp {...props} />;
-};
+}
diff --git a/ts/components/conversation/ProfileChangeNotification.stories.tsx b/ts/components/conversation/ProfileChangeNotification.stories.tsx
index 29abe1007..10bb1d678 100644
--- a/ts/components/conversation/ProfileChangeNotification.stories.tsx
+++ b/ts/components/conversation/ProfileChangeNotification.stories.tsx
@@ -14,7 +14,7 @@ export default {
   title: 'Components/Conversation/ProfileChangeNotification',
 };
 
-export const FromContact = (): JSX.Element => {
+export function FromContact(): JSX.Element {
   return (
     <ProfileChangeNotification
       i18n={i18n}
@@ -31,13 +31,13 @@ export const FromContact = (): JSX.Element => {
       }}
     />
   );
-};
+}
 
 FromContact.story = {
   name: 'From contact',
 };
 
-export const FromNonContact = (): JSX.Element => {
+export function FromNonContact(): JSX.Element {
   return (
     <ProfileChangeNotification
       i18n={i18n}
@@ -53,13 +53,13 @@ export const FromNonContact = (): JSX.Element => {
       }}
     />
   );
-};
+}
 
 FromNonContact.story = {
   name: 'From non-contact',
 };
 
-export const FromContactWithLongNamesBeforeAndAfter = (): JSX.Element => {
+export function FromContactWithLongNamesBeforeAndAfter(): JSX.Element {
   return (
     <ProfileChangeNotification
       i18n={i18n}
@@ -75,7 +75,7 @@ export const FromContactWithLongNamesBeforeAndAfter = (): JSX.Element => {
       }}
     />
   );
-};
+}
 
 FromContactWithLongNamesBeforeAndAfter.story = {
   name: 'From contact with long names before and after',
diff --git a/ts/components/conversation/Quote.stories.tsx b/ts/components/conversation/Quote.stories.tsx
index 6a02c4f7a..e6d3c35fc 100644
--- a/ts/components/conversation/Quote.stories.tsx
+++ b/ts/components/conversation/Quote.stories.tsx
@@ -185,6 +185,7 @@ const renderInMessage = ({
   );
 };
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<Props> = args => <Quote {...args} />;
 const TemplateInMessage: Story<Props> = args => renderInMessage(args);
 
@@ -222,7 +223,7 @@ IncomingByMe.story = {
   name: 'Incoming by Me',
 };
 
-export const IncomingOutgoingColors = (args: Props): JSX.Element => {
+export function IncomingOutgoingColors(args: Props): JSX.Element {
   return (
     <>
       {ConversationColors.map(color =>
@@ -230,7 +231,7 @@ export const IncomingOutgoingColors = (args: Props): JSX.Element => {
       )}
     </>
   );
-};
+}
 IncomingOutgoingColors.args = {};
 IncomingOutgoingColors.story = {
   name: 'Incoming/Outgoing Colors',
@@ -499,26 +500,28 @@ MentionIncomingMe.story = {
   name: '@mention + incoming + me',
 };
 
-export const CustomColor = (args: Props): JSX.Element => (
-  <>
-    <Quote
-      {...args}
-      customColor={{
-        start: { hue: 82, saturation: 35 },
-      }}
-    />
-    <Quote
-      {...args}
-      isIncoming={false}
-      text="A gradient"
-      customColor={{
-        deg: 192,
-        start: { hue: 304, saturation: 85 },
-        end: { hue: 231, saturation: 76 },
-      }}
-    />
-  </>
-);
+export function CustomColor(args: Props): JSX.Element {
+  return (
+    <>
+      <Quote
+        {...args}
+        customColor={{
+          start: { hue: 82, saturation: 35 },
+        }}
+      />
+      <Quote
+        {...args}
+        isIncoming={false}
+        text="A gradient"
+        customColor={{
+          deg: 192,
+          start: { hue: 304, saturation: 85 },
+          end: { hue: 231, saturation: 76 },
+        }}
+      />
+    </>
+  );
+}
 CustomColor.args = {
   isIncoming: true,
   text: 'Solid + Gradient',
diff --git a/ts/components/conversation/ReactionPicker.stories.tsx b/ts/components/conversation/ReactionPicker.stories.tsx
index a3c679f8b..97cae657c 100644
--- a/ts/components/conversation/ReactionPicker.stories.tsx
+++ b/ts/components/conversation/ReactionPicker.stories.tsx
@@ -35,7 +35,7 @@ export default {
   title: 'Components/Conversation/ReactionPicker',
 };
 
-export const Base = (): JSX.Element => {
+export function Base(): JSX.Element {
   return (
     <ReactionPicker
       i18n={i18n}
@@ -48,9 +48,9 @@ export const Base = (): JSX.Element => {
       renderEmojiPicker={renderEmojiPicker}
     />
   );
-};
+}
 
-export const SelectedReaction = (): JSX.Element => {
+export function SelectedReaction(): JSX.Element {
   return (
     <>
       {['❤️', '👍', '👎', '😂', '😮', '😢', '😡'].map(e => (
@@ -70,4 +70,4 @@ export const SelectedReaction = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
diff --git a/ts/components/conversation/ReactionPicker.tsx b/ts/components/conversation/ReactionPicker.tsx
index 82b5ba013..bdd613ca7 100644
--- a/ts/components/conversation/ReactionPicker.tsx
+++ b/ts/components/conversation/ReactionPicker.tsx
@@ -35,7 +35,7 @@ export type OwnProps = {
 export type Props = OwnProps & Pick<React.HTMLProps<HTMLDivElement>, 'style'>;
 
 export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
-  (
+  function ReactionPickerInner(
     {
       i18n,
       onClose,
@@ -48,7 +48,7 @@ export const ReactionPicker = React.forwardRef<HTMLDivElement, Props>(
       style,
     },
     ref
-  ) => {
+  ) {
     const [pickingOther, setPickingOther] = React.useState(false);
 
     // Handle escape key
diff --git a/ts/components/conversation/ReactionViewer.stories.tsx b/ts/components/conversation/ReactionViewer.stories.tsx
index 4646f5d19..c3735367c 100644
--- a/ts/components/conversation/ReactionViewer.stories.tsx
+++ b/ts/components/conversation/ReactionViewer.stories.tsx
@@ -28,7 +28,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   theme: ThemeType.light,
 });
 
-export const AllReactions = (): JSX.Element => {
+export function AllReactions(): JSX.Element {
   const props = createProps({
     reactions: [
       {
@@ -126,9 +126,9 @@ export const AllReactions = (): JSX.Element => {
     ],
   });
   return <ReactionViewer {...props} />;
-};
+}
 
-export const PickedReaction = (): JSX.Element => {
+export function PickedReaction(): JSX.Element {
   const props = createProps({
     pickedReaction: '❤️',
     reactions: [
@@ -155,9 +155,9 @@ export const PickedReaction = (): JSX.Element => {
     ],
   });
   return <ReactionViewer {...props} />;
-};
+}
 
-export const PickedMissingReaction = (): JSX.Element => {
+export function PickedMissingReaction(): JSX.Element {
   const props = createProps({
     pickedReaction: '😡',
     reactions: [
@@ -184,7 +184,7 @@ export const PickedMissingReaction = (): JSX.Element => {
     ],
   });
   return <ReactionViewer {...props} />;
-};
+}
 
 const skinTones = [
   '\u{1F3FB}',
@@ -210,7 +210,7 @@ const createReaction = (
   timestamp,
 });
 
-export const ReactionSkinTones = (): JSX.Element => {
+export function ReactionSkinTones(): JSX.Element {
   const props = createProps({
     pickedReaction: '😡',
     reactions: [
@@ -223,4 +223,4 @@ export const ReactionSkinTones = (): JSX.Element => {
     ],
   });
   return <ReactionViewer {...props} />;
-};
+}
diff --git a/ts/components/conversation/ReactionViewer.tsx b/ts/components/conversation/ReactionViewer.tsx
index 4c1071cbe..1279669e3 100644
--- a/ts/components/conversation/ReactionViewer.tsx
+++ b/ts/components/conversation/ReactionViewer.tsx
@@ -66,7 +66,7 @@ type ReactionCategory = {
 type ReactionWithEmojiData = Reaction & EmojiData;
 
 export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
-  (
+  function ReactionViewerInner(
     {
       getPreferredBadge,
       i18n,
@@ -77,7 +77,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
       ...rest
     },
     ref
-  ) => {
+  ) {
     const reactionsWithEmojiData = React.useMemo(
       () =>
         reactions
diff --git a/ts/components/conversation/RemoveGroupMemberConfirmationDialog.tsx b/ts/components/conversation/RemoveGroupMemberConfirmationDialog.tsx
index fc23c3616..daf67df79 100644
--- a/ts/components/conversation/RemoveGroupMemberConfirmationDialog.tsx
+++ b/ts/components/conversation/RemoveGroupMemberConfirmationDialog.tsx
@@ -1,7 +1,6 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React from 'react';
 
 import type { ConversationType } from '../../state/ducks/conversations';
@@ -20,9 +19,13 @@ type PropsType = {
   onRemove: () => void;
 };
 
-export const RemoveGroupMemberConfirmationDialog: FunctionComponent<
-  PropsType
-> = ({ conversation, group, i18n, onClose, onRemove }) => {
+export function RemoveGroupMemberConfirmationDialog({
+  conversation,
+  group,
+  i18n,
+  onClose,
+  onRemove,
+}: PropsType): JSX.Element {
   const descriptionKey = isAccessControlEnabled(
     group.accessControlAddFromInviteLink
   )
@@ -52,4 +55,4 @@ export const RemoveGroupMemberConfirmationDialog: FunctionComponent<
       }
     />
   );
-};
+}
diff --git a/ts/components/conversation/ResetSessionNotification.stories.tsx b/ts/components/conversation/ResetSessionNotification.stories.tsx
index 45042e4e7..ed81ac188 100644
--- a/ts/components/conversation/ResetSessionNotification.stories.tsx
+++ b/ts/components/conversation/ResetSessionNotification.stories.tsx
@@ -13,6 +13,6 @@ export default {
   title: 'Components/Conversation/ResetSessionNotification',
 };
 
-export const Notification = (): JSX.Element => {
+export function Notification(): JSX.Element {
   return <ResetSessionNotification i18n={i18n} />;
-};
+}
diff --git a/ts/components/conversation/ResetSessionNotification.tsx b/ts/components/conversation/ResetSessionNotification.tsx
index 164813a3a..5598d2b00 100644
--- a/ts/components/conversation/ResetSessionNotification.tsx
+++ b/ts/components/conversation/ResetSessionNotification.tsx
@@ -10,6 +10,8 @@ export type Props = {
   i18n: LocalizerType;
 };
 
-export const ResetSessionNotification = ({ i18n }: Props): JSX.Element => (
-  <SystemMessage contents={i18n('sessionEnded')} icon="session-refresh" />
-);
+export function ResetSessionNotification({ i18n }: Props): JSX.Element {
+  return (
+    <SystemMessage contents={i18n('sessionEnded')} icon="session-refresh" />
+  );
+}
diff --git a/ts/components/conversation/SafetyNumberNotification.stories.tsx b/ts/components/conversation/SafetyNumberNotification.stories.tsx
index af232fb4c..efd4d7074 100644
--- a/ts/components/conversation/SafetyNumberNotification.stories.tsx
+++ b/ts/components/conversation/SafetyNumberNotification.stories.tsx
@@ -28,7 +28,7 @@ export default {
   title: 'Components/Conversation/SafetyNumberNotification',
 };
 
-export const GroupConversation = (): JSX.Element => {
+export function GroupConversation(): JSX.Element {
   const props = createProps({
     isGroup: true,
     contact: createContact({
@@ -37,9 +37,9 @@ export const GroupConversation = (): JSX.Element => {
   });
 
   return <SafetyNumberNotification {...props} />;
-};
+}
 
-export const DirectConversation = (): JSX.Element => {
+export function DirectConversation(): JSX.Element {
   const props = createProps({
     isGroup: false,
     contact: createContact({
@@ -48,9 +48,9 @@ export const DirectConversation = (): JSX.Element => {
   });
 
   return <SafetyNumberNotification {...props} />;
-};
+}
 
-export const LongNameInGroup = (): JSX.Element => {
+export function LongNameInGroup(): JSX.Element {
   const props = createProps({
     isGroup: true,
     contact: createContact({
@@ -59,7 +59,7 @@ export const LongNameInGroup = (): JSX.Element => {
   });
 
   return <SafetyNumberNotification {...props} />;
-};
+}
 
 LongNameInGroup.story = {
   name: 'Long name in group',
diff --git a/ts/components/conversation/SafetyNumberNotification.tsx b/ts/components/conversation/SafetyNumberNotification.tsx
index 328482a41..cd6654fca 100644
--- a/ts/components/conversation/SafetyNumberNotification.tsx
+++ b/ts/components/conversation/SafetyNumberNotification.tsx
@@ -29,12 +29,12 @@ export type PropsActions = {
 
 export type Props = PropsData & PropsHousekeeping & PropsActions;
 
-export const SafetyNumberNotification = ({
+export function SafetyNumberNotification({
   contact,
   isGroup,
   i18n,
   showIdentity,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const changeKey = isGroup
     ? 'safetyNumberChangedGroup'
     : 'safetyNumberChanged';
@@ -72,4 +72,4 @@ export const SafetyNumberNotification = ({
       }
     />
   );
-};
+}
diff --git a/ts/components/conversation/ScrollDownButton.stories.tsx b/ts/components/conversation/ScrollDownButton.stories.tsx
index d93b88bae..93e5a984f 100644
--- a/ts/components/conversation/ScrollDownButton.stories.tsx
+++ b/ts/components/conversation/ScrollDownButton.stories.tsx
@@ -35,6 +35,7 @@ export default {
   },
 } as Meta;
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<Props> = args => <ScrollDownButton {...args} />;
 
 export const Default = Template.bind({});
diff --git a/ts/components/conversation/ScrollDownButton.tsx b/ts/components/conversation/ScrollDownButton.tsx
index 1313b6163..8a8c65eab 100644
--- a/ts/components/conversation/ScrollDownButton.tsx
+++ b/ts/components/conversation/ScrollDownButton.tsx
@@ -14,12 +14,12 @@ export type Props = {
   i18n: LocalizerType;
 };
 
-export const ScrollDownButton = ({
+export function ScrollDownButton({
   conversationId,
   unreadCount,
   i18n,
   scrollDown,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const altText = unreadCount ? i18n('messagesBelow') : i18n('scrollDown');
 
   let badgeText: string | undefined;
@@ -48,4 +48,4 @@ export const ScrollDownButton = ({
       </button>
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/StagedGenericAttachment.stories.tsx b/ts/components/conversation/StagedGenericAttachment.stories.tsx
index a468c8a9b..01e9ec97b 100644
--- a/ts/components/conversation/StagedGenericAttachment.stories.tsx
+++ b/ts/components/conversation/StagedGenericAttachment.stories.tsx
@@ -35,7 +35,7 @@ const createAttachment = (
   size: 14243,
 });
 
-export const TextFile = (): JSX.Element => {
+export function TextFile(): JSX.Element {
   const attachment = createAttachment({
     contentType: stringToMIMEType('text/plain'),
     fileName: 'manifesto.txt',
@@ -43,9 +43,9 @@ export const TextFile = (): JSX.Element => {
   const props = createProps({ attachment });
 
   return <StagedGenericAttachment {...props} />;
-};
+}
 
-export const LongName = (): JSX.Element => {
+export function LongName(): JSX.Element {
   const attachment = createAttachment({
     contentType: stringToMIMEType('text/plain'),
     fileName: 'this-is-my-very-important-manifesto-you-must-read-it.txt',
@@ -53,9 +53,9 @@ export const LongName = (): JSX.Element => {
   const props = createProps({ attachment });
 
   return <StagedGenericAttachment {...props} />;
-};
+}
 
-export const LongExtension = (): JSX.Element => {
+export function LongExtension(): JSX.Element {
   const attachment = createAttachment({
     contentType: stringToMIMEType('text/plain'),
     fileName: 'manifesto.reallylongtxt',
@@ -63,4 +63,4 @@ export const LongExtension = (): JSX.Element => {
   const props = createProps({ attachment });
 
   return <StagedGenericAttachment {...props} />;
-};
+}
diff --git a/ts/components/conversation/StagedGenericAttachment.tsx b/ts/components/conversation/StagedGenericAttachment.tsx
index d623c7a8f..ae9259992 100644
--- a/ts/components/conversation/StagedGenericAttachment.tsx
+++ b/ts/components/conversation/StagedGenericAttachment.tsx
@@ -13,11 +13,11 @@ export type Props = {
   i18n: LocalizerType;
 };
 
-export const StagedGenericAttachment = ({
+export function StagedGenericAttachment({
   attachment,
   i18n,
   onClose,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const { fileName, contentType } = attachment;
   const extension = getExtensionForDisplay({ contentType, fileName });
 
@@ -45,4 +45,4 @@ export const StagedGenericAttachment = ({
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/StagedLinkPreview.stories.tsx b/ts/components/conversation/StagedLinkPreview.stories.tsx
index b4b6f48ae..61b50d4f9 100644
--- a/ts/components/conversation/StagedLinkPreview.stories.tsx
+++ b/ts/components/conversation/StagedLinkPreview.stories.tsx
@@ -34,6 +34,7 @@ const getDefaultProps = (): Props => ({
   url: 'https://www.signal.org',
 });
 
+// eslint-disable-next-line react/function-component-definition
 const Template: Story<Props> = args => <StagedLinkPreview {...args} />;
 
 export const Loading = Template.bind({});
diff --git a/ts/components/conversation/StagedLinkPreview.tsx b/ts/components/conversation/StagedLinkPreview.tsx
index d0757d866..04c83ab79 100644
--- a/ts/components/conversation/StagedLinkPreview.tsx
+++ b/ts/components/conversation/StagedLinkPreview.tsx
@@ -20,7 +20,7 @@ export type Props = LinkPreviewType & {
   onClose?: () => void;
 };
 
-export const StagedLinkPreview: React.FC<Props> = ({
+export function StagedLinkPreview({
   date,
   description,
   domain,
@@ -30,7 +30,7 @@ export const StagedLinkPreview: React.FC<Props> = ({
   moduleClassName,
   onClose,
   title,
-}: Props) => {
+}: Props): JSX.Element {
   const isImage = isImageAttachment(image);
   const isLoaded = Boolean(domain);
 
@@ -111,4 +111,4 @@ export const StagedLinkPreview: React.FC<Props> = ({
       )}
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/StagedPlaceholderAttachment.stories.tsx b/ts/components/conversation/StagedPlaceholderAttachment.stories.tsx
index 47c8c088f..d0cad5214 100644
--- a/ts/components/conversation/StagedPlaceholderAttachment.stories.tsx
+++ b/ts/components/conversation/StagedPlaceholderAttachment.stories.tsx
@@ -14,8 +14,8 @@ export default {
   title: 'Components/Conversation/StagedPlaceholderAttachment',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return (
     <StagedPlaceholderAttachment i18n={i18n} onClick={action('onClick')} />
   );
-};
+}
diff --git a/ts/components/conversation/StagedPlaceholderAttachment.tsx b/ts/components/conversation/StagedPlaceholderAttachment.tsx
index 2d0dcce08..a4b43d16a 100644
--- a/ts/components/conversation/StagedPlaceholderAttachment.tsx
+++ b/ts/components/conversation/StagedPlaceholderAttachment.tsx
@@ -9,16 +9,18 @@ type Props = {
   i18n: LocalizerType;
 };
 
-export const StagedPlaceholderAttachment = ({
+export function StagedPlaceholderAttachment({
   i18n,
   onClick,
-}: Props): JSX.Element => (
-  <button
-    type="button"
-    className="module-staged-placeholder-attachment"
-    onClick={onClick}
-    title={i18n('addImageOrVideoattachment')}
-  >
-    <div className="module-staged-placeholder-attachment__plus-icon" />
-  </button>
-);
+}: Props): JSX.Element {
+  return (
+    <button
+      type="button"
+      className="module-staged-placeholder-attachment"
+      onClick={onClick}
+      title={i18n('addImageOrVideoattachment')}
+    >
+      <div className="module-staged-placeholder-attachment__plus-icon" />
+    </button>
+  );
+}
diff --git a/ts/components/conversation/SystemMessage.tsx b/ts/components/conversation/SystemMessage.tsx
index 847407fd9..bdbe013cb 100644
--- a/ts/components/conversation/SystemMessage.tsx
+++ b/ts/components/conversation/SystemMessage.tsx
@@ -13,7 +13,7 @@ type PropsType = {
 };
 
 export const SystemMessage = forwardRef<HTMLDivElement, PropsType>(
-  ({ icon, contents, button, isError }, ref) => {
+  function SystemMessageInner({ icon, contents, button, isError }, ref) {
     return (
       <div
         className={classNames(
diff --git a/ts/components/conversation/Timeline.stories.tsx b/ts/components/conversation/Timeline.stories.tsx
index a80f3a0b0..e69267690 100644
--- a/ts/components/conversation/Timeline.stories.tsx
+++ b/ts/components/conversation/Timeline.stories.tsx
@@ -484,7 +484,7 @@ const getAvatarPath = () =>
 const getPhoneNumber = () => text('phoneNumber', '+1 (808) 555-1234');
 
 const renderHeroRow = () => {
-  const Wrapper = () => {
+  function Wrapper() {
     const theme = React.useContext(StorybookThemeContext);
     return (
       <ConversationHero
@@ -506,7 +506,7 @@ const renderHeroRow = () => {
         viewUserStories={action('viewUserStories')}
       />
     );
-  };
+  }
   return <Wrapper />;
 };
 const renderTypingBubble = () => (
@@ -560,98 +560,98 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   ...actions(),
 });
 
-export const OldestAndNewest = (): JSX.Element => {
+export function OldestAndNewest(): JSX.Element {
   const props = useProps();
 
   return <Timeline {...props} />;
-};
+}
 
 OldestAndNewest.story = {
   name: 'Oldest and Newest',
 };
 
-export const WithActiveMessageRequest = (): JSX.Element => {
+export function WithActiveMessageRequest(): JSX.Element {
   const props = useProps({
     isIncomingMessageRequest: true,
   });
 
   return <Timeline {...props} />;
-};
+}
 
 WithActiveMessageRequest.story = {
   name: 'With active message request',
 };
 
-export const WithoutNewestMessage = (): JSX.Element => {
+export function WithoutNewestMessage(): JSX.Element {
   const props = useProps({
     haveNewest: false,
   });
 
   return <Timeline {...props} />;
-};
+}
 
-export const WithoutNewestMessageActiveMessageRequest = (): JSX.Element => {
+export function WithoutNewestMessageActiveMessageRequest(): JSX.Element {
   const props = useProps({
     haveOldest: false,
     isIncomingMessageRequest: true,
   });
 
   return <Timeline {...props} />;
-};
+}
 
 WithoutNewestMessageActiveMessageRequest.story = {
   name: 'Without newest message, active message request',
 };
 
-export const WithoutOldestMessage = (): JSX.Element => {
+export function WithoutOldestMessage(): JSX.Element {
   const props = useProps({
     haveOldest: false,
     scrollToIndex: -1,
   });
 
   return <Timeline {...props} />;
-};
+}
 
-export const EmptyJustHero = (): JSX.Element => {
+export function EmptyJustHero(): JSX.Element {
   const props = useProps({
     items: [],
   });
 
   return <Timeline {...props} />;
-};
+}
 
 EmptyJustHero.story = {
   name: 'Empty (just hero)',
 };
 
-export const LastSeen = (): JSX.Element => {
+export function LastSeen(): JSX.Element {
   const props = useProps({
     oldestUnseenIndex: 13,
     totalUnseen: 2,
   });
 
   return <Timeline {...props} />;
-};
+}
 
-export const TargetIndexToTop = (): JSX.Element => {
+export function TargetIndexToTop(): JSX.Element {
   const props = useProps({
     scrollToIndex: 0,
   });
 
   return <Timeline {...props} />;
-};
+}
 
 TargetIndexToTop.story = {
   name: 'Target Index to Top',
 };
 
-export const TypingIndicator = (): JSX.Element => {
+export function TypingIndicator(): JSX.Element {
   const props = useProps({ isSomeoneTyping: true });
 
   return <Timeline {...props} />;
-};
+}
 
-export const WithInvitedContactsForANewlyCreatedGroup = (): JSX.Element => {
+export function WithInvitedContactsForANewlyCreatedGroup(): JSX.Element {
   const props = useProps({
     invitedContactsForNewlyCreatedGroup: [
       getDefaultConversation({
@@ -666,13 +666,13 @@ export const WithInvitedContactsForANewlyCreatedGroup = (): JSX.Element => {
   });
 
   return <Timeline {...props} />;
-};
+}
 
 WithInvitedContactsForANewlyCreatedGroup.story = {
   name: 'With invited contacts for a newly-created group',
 };
 
-export const WithSameNameInDirectConversationWarning = (): JSX.Element => {
+export function WithSameNameInDirectConversationWarning(): JSX.Element {
   const props = useProps({
     warning: {
       type: ContactSpoofingType.DirectConversationWithSameTitle,
@@ -682,13 +682,13 @@ export const WithSameNameInDirectConversationWarning = (): JSX.Element => {
   });
 
   return <Timeline {...props} />;
-};
+}
 
 WithSameNameInDirectConversationWarning.story = {
   name: 'With "same name in direct conversation" warning',
 };
 
-export const WithSameNameInGroupConversationWarning = (): JSX.Element => {
+export function WithSameNameInGroupConversationWarning(): JSX.Element {
   const props = useProps({
     warning: {
       type: ContactSpoofingType.MultipleGroupMembersWithSameTitle,
@@ -702,7 +702,7 @@ export const WithSameNameInGroupConversationWarning = (): JSX.Element => {
   });
 
   return <Timeline {...props} />;
-};
+}
 
 WithSameNameInGroupConversationWarning.story = {
   name: 'With "same name in group conversation" warning',
diff --git a/ts/components/conversation/Timeline.tsx b/ts/components/conversation/Timeline.tsx
index 3bc1134ca..f2d5f9dac 100644
--- a/ts/components/conversation/Timeline.tsx
+++ b/ts/components/conversation/Timeline.tsx
@@ -296,6 +296,7 @@ export class Timeline extends React.Component<
   private delayedPeekTimeout?: NodeJS.Timeout;
   private peekInterval?: NodeJS.Timeout;
 
+  // eslint-disable-next-line react/state-in-constructor
   override state: StateType = {
     hasRecentlyScrolled: true,
     hasDismissedDirectContactSpoofingWarning: false,
diff --git a/ts/components/conversation/TimelineFloatingHeader.stories.tsx b/ts/components/conversation/TimelineFloatingHeader.stories.tsx
index d9524a797..b3b298306 100644
--- a/ts/components/conversation/TimelineFloatingHeader.stories.tsx
+++ b/ts/components/conversation/TimelineFloatingHeader.stories.tsx
@@ -29,14 +29,14 @@ export default {
   title: 'Components/TimelineFloatingHeader',
 };
 
-export const Visible = (): JSX.Element => {
+export function Visible(): JSX.Element {
   return <TimelineFloatingHeader {...createProps({ visible: true })} />;
-};
+}
 
-export const Loading = (): JSX.Element => {
+export function Loading(): JSX.Element {
   return (
     <TimelineFloatingHeader
       {...createProps({ visible: true, isLoading: true })}
     />
   );
-};
+}
diff --git a/ts/components/conversation/TimelineFloatingHeader.tsx b/ts/components/conversation/TimelineFloatingHeader.tsx
index 80e8ff62a..2d072d33e 100644
--- a/ts/components/conversation/TimelineFloatingHeader.tsx
+++ b/ts/components/conversation/TimelineFloatingHeader.tsx
@@ -18,13 +18,13 @@ export type PropsType = Readonly<{
   visible: boolean;
 }>;
 
-export const TimelineFloatingHeader = ({
+export function TimelineFloatingHeader({
   i18n,
   isLoading,
   style,
   timestamp,
   visible,
-}: PropsType): ReactElement => {
+}: PropsType): ReactElement {
   const [hasRendered, setHasRendered] = useState(false);
   const [showSpinner, setShowSpinner] = useState(isLoading);
 
@@ -86,4 +86,4 @@ export const TimelineFloatingHeader = ({
       )}
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/TimelineItem.stories.tsx b/ts/components/conversation/TimelineItem.stories.tsx
index 72bece802..b43756e8b 100644
--- a/ts/components/conversation/TimelineItem.stories.tsx
+++ b/ts/components/conversation/TimelineItem.stories.tsx
@@ -118,7 +118,7 @@ export default {
   title: 'Components/Conversation/TimelineItem',
 };
 
-export const PlainMessage = (): JSX.Element => {
+export function PlainMessage(): JSX.Element {
   const item = {
     type: 'message',
     data: {
@@ -134,9 +134,9 @@ export const PlainMessage = (): JSX.Element => {
   } as TimelineItemProps['item'];
 
   return <TimelineItem {...getDefaultProps()} item={item} i18n={i18n} />;
-};
+}
 
-export const Notification = (): JSX.Element => {
+export function Notification(): JSX.Element {
   const items = [
     {
       type: 'timerNotification',
@@ -502,9 +502,9 @@ export const Notification = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
 
-export const UnknownType = (): JSX.Element => {
+export function UnknownType(): JSX.Element {
   const item = {
     type: 'random',
     data: {
@@ -514,11 +514,11 @@ export const UnknownType = (): JSX.Element => {
   } as any as TimelineItemProps['item'];
 
   return <TimelineItem {...getDefaultProps()} item={item} i18n={i18n} />;
-};
+}
 
-export const MissingItem = (): JSX.Element => {
+export function MissingItem(): JSX.Element {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const item = null as any as TimelineItemProps['item'];
 
   return <TimelineItem {...getDefaultProps()} item={item} i18n={i18n} />;
-};
+}
diff --git a/ts/components/conversation/TimelineMessage.stories.tsx b/ts/components/conversation/TimelineMessage.stories.tsx
index 352de89d8..6a225f2a1 100644
--- a/ts/components/conversation/TimelineMessage.stories.tsx
+++ b/ts/components/conversation/TimelineMessage.stories.tsx
@@ -122,10 +122,10 @@ const renderReactionPicker: Props['renderReactionPicker'] = () => <div />;
  * It doesn't handle consecutive playback
  * since that logic mostly lives in the audioPlayer duck
  */
-const MessageAudioContainer: React.FC<AudioAttachmentProps> = ({
+function MessageAudioContainer({
   played,
   ...props
-}) => {
+}: AudioAttachmentProps): JSX.Element {
   const [isActive, setIsActive] = React.useState<boolean>(false);
   const [currentTime, setCurrentTime] = React.useState<number>(0);
   const [playbackRate, setPlaybackRate] = React.useState<number>(1);
@@ -212,7 +212,7 @@ const MessageAudioContainer: React.FC<AudioAttachmentProps> = ({
       setCurrentTime={setCurrentTimeAction}
     />
   );
-};
+}
 
 const renderAudioAttachment: Props['renderAudioAttachment'] = props => (
   <MessageAudioContainer {...props} />
@@ -372,102 +372,104 @@ PlainRtlMessage.story = {
   name: 'Plain RTL Message',
 };
 
-export const EmojiMessages = (): JSX.Element => (
-  <>
-    <TimelineMessage {...createProps({ text: '😀' })} />
-    <br />
-    <TimelineMessage {...createProps({ text: '😀😀' })} />
-    <br />
-    <TimelineMessage {...createProps({ text: '😀😀😀' })} />
-    <br />
-    <TimelineMessage {...createProps({ text: '😀😀😀😀' })} />
-    <br />
-    <TimelineMessage {...createProps({ text: '😀😀😀😀😀' })} />
-    <br />
-    <TimelineMessage {...createProps({ text: '😀😀😀😀😀😀😀' })} />
-    <br />
-    <TimelineMessage
-      {...createProps({
-        previews: [
-          {
-            domain: 'signal.org',
-            image: fakeAttachment({
-              contentType: IMAGE_PNG,
-              fileName: 'the-sax.png',
-              height: 240,
-              url: pngUrl,
-              width: 320,
+export function EmojiMessages(): JSX.Element {
+  return (
+    <>
+      <TimelineMessage {...createProps({ text: '😀' })} />
+      <br />
+      <TimelineMessage {...createProps({ text: '😀😀' })} />
+      <br />
+      <TimelineMessage {...createProps({ text: '😀😀😀' })} />
+      <br />
+      <TimelineMessage {...createProps({ text: '😀😀😀😀' })} />
+      <br />
+      <TimelineMessage {...createProps({ text: '😀😀😀😀😀' })} />
+      <br />
+      <TimelineMessage {...createProps({ text: '😀😀😀😀😀😀😀' })} />
+      <br />
+      <TimelineMessage
+        {...createProps({
+          previews: [
+            {
+              domain: 'signal.org',
+              image: fakeAttachment({
+                contentType: IMAGE_PNG,
+                fileName: 'the-sax.png',
+                height: 240,
+                url: pngUrl,
+                width: 320,
+              }),
+              isStickerPack: false,
+              title: 'Signal',
+              description:
+                'Say "hello" to a different messaging experience. An unexpected focus on privacy, combined with all of the features you expect.',
+              url: 'https://www.signal.org',
+              date: new Date(2020, 2, 10).valueOf(),
+            },
+          ],
+          text: '😀',
+        })}
+      />
+      <br />
+      <TimelineMessage
+        {...createProps({
+          attachments: [
+            fakeAttachment({
+              url: '/fixtures/tina-rolf-269345-unsplash.jpg',
+              fileName: 'tina-rolf-269345-unsplash.jpg',
+              contentType: IMAGE_JPEG,
+              width: 128,
+              height: 128,
             }),
-            isStickerPack: false,
-            title: 'Signal',
-            description:
-              'Say "hello" to a different messaging experience. An unexpected focus on privacy, combined with all of the features you expect.',
-            url: 'https://www.signal.org',
-            date: new Date(2020, 2, 10).valueOf(),
-          },
-        ],
-        text: '😀',
-      })}
-    />
-    <br />
-    <TimelineMessage
-      {...createProps({
-        attachments: [
-          fakeAttachment({
-            url: '/fixtures/tina-rolf-269345-unsplash.jpg',
-            fileName: 'tina-rolf-269345-unsplash.jpg',
-            contentType: IMAGE_JPEG,
-            width: 128,
-            height: 128,
-          }),
-        ],
-        text: '😀',
-      })}
-    />
-    <br />
-    <TimelineMessage
-      {...createProps({
-        attachments: [
-          fakeAttachment({
-            contentType: AUDIO_MP3,
-            fileName: 'incompetech-com-Agnus-Dei-X.mp3',
-            url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
-          }),
-        ],
-        text: '😀',
-      })}
-    />
-    <br />
-    <TimelineMessage
-      {...createProps({
-        attachments: [
-          fakeAttachment({
-            contentType: stringToMIMEType('text/plain'),
-            fileName: 'my-resume.txt',
-            url: 'my-resume.txt',
-          }),
-        ],
-        text: '😀',
-      })}
-    />
-    <br />
-    <TimelineMessage
-      {...createProps({
-        attachments: [
-          fakeAttachment({
-            contentType: VIDEO_MP4,
-            flags: SignalService.AttachmentPointer.Flags.GIF,
-            fileName: 'cat-gif.mp4',
-            url: '/fixtures/cat-gif.mp4',
-            width: 400,
-            height: 332,
-          }),
-        ],
-        text: '😀',
-      })}
-    />
-  </>
-);
+          ],
+          text: '😀',
+        })}
+      />
+      <br />
+      <TimelineMessage
+        {...createProps({
+          attachments: [
+            fakeAttachment({
+              contentType: AUDIO_MP3,
+              fileName: 'incompetech-com-Agnus-Dei-X.mp3',
+              url: '/fixtures/incompetech-com-Agnus-Dei-X.mp3',
+            }),
+          ],
+          text: '😀',
+        })}
+      />
+      <br />
+      <TimelineMessage
+        {...createProps({
+          attachments: [
+            fakeAttachment({
+              contentType: stringToMIMEType('text/plain'),
+              fileName: 'my-resume.txt',
+              url: 'my-resume.txt',
+            }),
+          ],
+          text: '😀',
+        })}
+      />
+      <br />
+      <TimelineMessage
+        {...createProps({
+          attachments: [
+            fakeAttachment({
+              contentType: VIDEO_MP4,
+              flags: SignalService.AttachmentPointer.Flags.GIF,
+              fileName: 'cat-gif.mp4',
+              url: '/fixtures/cat-gif.mp4',
+              width: 400,
+              height: 332,
+            }),
+          ],
+          text: '😀',
+        })}
+      />
+    </>
+  );
+}
 
 export const Delivered = Template.bind({});
 Delivered.args = {
@@ -737,7 +739,7 @@ Sticker.args = {
   status: 'sent',
 };
 
-export const Deleted = (): JSX.Element => {
+export function Deleted(): JSX.Element {
   const propsSent = createProps({
     conversationType: 'direct',
     deletedForEveryone: true,
@@ -755,7 +757,7 @@ export const Deleted = (): JSX.Element => {
       {renderBothDirections(propsSending)}
     </>
   );
-};
+}
 
 export const DeletedWithExpireTimer = Template.bind({});
 DeletedWithExpireTimer.args = {
@@ -770,7 +772,7 @@ DeletedWithExpireTimer.story = {
   name: 'Deleted with expireTimer',
 };
 
-export const DeletedWithError = (): JSX.Element => {
+export function DeletedWithError(): JSX.Element {
   const propsPartialError = createProps({
     timestamp: Date.now() - 60 * 1000,
     // canDeleteForEveryone: true,
@@ -794,7 +796,7 @@ export const DeletedWithError = (): JSX.Element => {
       {renderThree(propsError)}
     </>
   );
-};
+}
 DeletedWithError.story = {
   name: 'Deleted with error',
 };
@@ -1067,7 +1069,7 @@ LinkPreviewWithTooNewADate.story = {
   name: 'Link Preview with too new a date',
 };
 
-export const Image = (): JSX.Element => {
+export function Image(): JSX.Element {
   const darkImageProps = createProps({
     attachments: [
       fakeAttachment({
@@ -1099,7 +1101,7 @@ export const Image = (): JSX.Element => {
       {renderBothDirections(lightImageProps)}
     </>
   );
-};
+}
 
 export const MultipleImages2 = Template.bind({});
 MultipleImages2.args = {
@@ -1322,7 +1324,7 @@ PendingGif.story = {
 };
 
 export const _Audio = (): JSX.Element => {
-  const Wrapper = () => {
+  function Wrapper() {
     const [isPlayed, setIsPlayed] = React.useState(false);
 
     const messageProps = createProps({
@@ -1362,7 +1364,7 @@ export const _Audio = (): JSX.Element => {
         {renderBothDirections(messageProps)}
       </>
     );
-  };
+  }
 
   return <Wrapper />;
 };
@@ -1581,7 +1583,7 @@ DangerousFileType.args = {
   status: 'sent',
 };
 
-export const Colors = (): JSX.Element => {
+export function Colors(): JSX.Element {
   return (
     <>
       {ConversationColors.map(color => (
@@ -1596,7 +1598,7 @@ export const Colors = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
 
 export const Mentions = Template.bind({});
 Mentions.args = {
@@ -1615,7 +1617,7 @@ Mentions.story = {
   name: '@Mentions',
 };
 
-export const AllTheContextMenus = (): JSX.Element => {
+export function AllTheContextMenus(): JSX.Element {
   const props = createProps({
     attachments: [
       fakeAttachment({
@@ -1633,7 +1635,7 @@ export const AllTheContextMenus = (): JSX.Element => {
   });
 
   return <TimelineMessage {...props} direction="outgoing" />;
-};
+}
 AllTheContextMenus.story = {
   name: 'All the context menus',
 };
@@ -1666,27 +1668,29 @@ NotApprovedWithLinkPreview.story = {
   name: 'Not approved, with link preview',
 };
 
-export const CustomColor = (): JSX.Element => (
-  <>
-    {renderThree({
-      ...createProps({ text: 'Solid.' }),
-      direction: 'outgoing',
-      customColor: {
-        start: { hue: 82, saturation: 35 },
-      },
-    })}
-    <br style={{ clear: 'both' }} />
-    {renderThree({
-      ...createProps({ text: 'Gradient.' }),
-      direction: 'outgoing',
-      customColor: {
-        deg: 192,
-        start: { hue: 304, saturation: 85 },
-        end: { hue: 231, saturation: 76 },
-      },
-    })}
-  </>
-);
+export function CustomColor(): JSX.Element {
+  return (
+    <>
+      {renderThree({
+        ...createProps({ text: 'Solid.' }),
+        direction: 'outgoing',
+        customColor: {
+          start: { hue: 82, saturation: 35 },
+        },
+      })}
+      <br style={{ clear: 'both' }} />
+      {renderThree({
+        ...createProps({ text: 'Gradient.' }),
+        direction: 'outgoing',
+        customColor: {
+          deg: 192,
+          start: { hue: 304, saturation: 85 },
+          end: { hue: 231, saturation: 76 },
+        },
+      })}
+    </>
+  );
+}
 
 export const CollapsingTextOnlyDMs = (): JSX.Element => {
   const them = getDefaultConversation();
diff --git a/ts/components/conversation/TimelineMessage.tsx b/ts/components/conversation/TimelineMessage.tsx
index 9d775ca5e..ab4b49318 100644
--- a/ts/components/conversation/TimelineMessage.tsx
+++ b/ts/components/conversation/TimelineMessage.tsx
@@ -65,7 +65,7 @@ type Trigger = {
 /**
  * Message with menu/context-menu (as necessary for rendering in the timeline)
  */
-export const TimelineMessage = (props: Props): JSX.Element => {
+export function TimelineMessage(props: Props): JSX.Element {
   const {
     i18n,
     id,
@@ -306,7 +306,7 @@ export const TimelineMessage = (props: Props): JSX.Element => {
       />
     </>
   );
-};
+}
 
 type MessageMenuProps = {
   i18n: LocalizerType;
@@ -319,7 +319,7 @@ type MessageMenuProps = {
   onReact: (() => void) | undefined;
 } & Pick<MessageProps, 'i18n' | 'direction'>;
 
-const MessageMenu = ({
+function MessageMenu({
   i18n,
   triggerId,
   direction,
@@ -329,7 +329,7 @@ const MessageMenu = ({
   onDownload,
   onReplyToMessage,
   onReact,
-}: MessageMenuProps) => {
+}: MessageMenuProps) {
   // This a menu meant for mouse use only
   /* eslint-disable jsx-a11y/interactive-supports-focus */
   /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -445,7 +445,7 @@ const MessageMenu = ({
       {menuButton}
     </div>
   );
-};
+}
 
 type MessageContextProps = {
   i18n: LocalizerType;
diff --git a/ts/components/conversation/TimelineWarning.tsx b/ts/components/conversation/TimelineWarning.tsx
index e544d26d2..78141733a 100644
--- a/ts/components/conversation/TimelineWarning.tsx
+++ b/ts/components/conversation/TimelineWarning.tsx
@@ -37,30 +37,37 @@ export function TimelineWarning({
   );
 }
 
-TimelineWarning.IconContainer = ({
+function IconContainer({
   children,
-}: Readonly<{ children: ReactNode }>): JSX.Element => (
-  <div className={ICON_CONTAINER_CLASS_NAME}>{children}</div>
-);
+}: Readonly<{ children: ReactNode }>): JSX.Element {
+  return <div className={ICON_CONTAINER_CLASS_NAME}>{children}</div>;
+}
 
-TimelineWarning.GenericIcon = () => <div className={GENERIC_ICON_CLASS_NAME} />;
+TimelineWarning.IconContainer = IconContainer;
 
-TimelineWarning.Text = ({
-  children,
-}: Readonly<{ children: ReactNode }>): JSX.Element => (
-  <div className={TEXT_CLASS_NAME}>{children}</div>
-);
+function GenericIcon() {
+  return <div className={GENERIC_ICON_CLASS_NAME} />;
+}
+
+TimelineWarning.GenericIcon = GenericIcon;
+
+function Text({ children }: Readonly<{ children: ReactNode }>): JSX.Element {
+  return <div className={TEXT_CLASS_NAME}>{children}</div>;
+}
+
+TimelineWarning.Text = Text;
 
 type LinkProps = {
   children: ReactNode;
   onClick: () => void;
 };
 
-TimelineWarning.Link = ({
-  children,
-  onClick,
-}: Readonly<LinkProps>): JSX.Element => (
-  <button className={LINK_CLASS_NAME} onClick={onClick} type="button">
-    {children}
-  </button>
-);
+function Link({ children, onClick }: Readonly<LinkProps>): JSX.Element {
+  return (
+    <button className={LINK_CLASS_NAME} onClick={onClick} type="button">
+      {children}
+    </button>
+  );
+}
+
+TimelineWarning.Link = Link;
diff --git a/ts/components/conversation/TimelineWarnings.tsx b/ts/components/conversation/TimelineWarnings.tsx
index 96fb90ccb..baed4f1c4 100644
--- a/ts/components/conversation/TimelineWarnings.tsx
+++ b/ts/components/conversation/TimelineWarnings.tsx
@@ -11,9 +11,11 @@ type PropsType = {
 };
 
 export const TimelineWarnings = forwardRef<HTMLDivElement, PropsType>(
-  ({ children }, ref) => (
-    <div className={CLASS_NAME} ref={ref}>
-      {children}
-    </div>
-  )
+  function TimelineWarningsInner({ children }, ref) {
+    return (
+      <div className={CLASS_NAME} ref={ref}>
+        {children}
+      </div>
+    );
+  }
 );
diff --git a/ts/components/conversation/TimerNotification.stories.tsx b/ts/components/conversation/TimerNotification.stories.tsx
index 14f5050bd..67439ef49 100644
--- a/ts/components/conversation/TimerNotification.stories.tsx
+++ b/ts/components/conversation/TimerNotification.stories.tsx
@@ -44,7 +44,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
       }),
 });
 
-export const SetByOther = (): JSX.Element => {
+export function SetByOther(): JSX.Element {
   const props = createProps({
     expireTimer: DurationInSeconds.fromHours(1),
     type: 'fromOther',
@@ -58,9 +58,9 @@ export const SetByOther = (): JSX.Element => {
       <TimerNotification {...props} disabled />
     </>
   );
-};
+}
 
-export const SetByOtherWithALongName = (): JSX.Element => {
+export function SetByOtherWithALongName(): JSX.Element {
   const longName = '🦴🧩📴'.repeat(50);
 
   const props = createProps({
@@ -76,13 +76,13 @@ export const SetByOtherWithALongName = (): JSX.Element => {
       <TimerNotification {...props} disabled />
     </>
   );
-};
+}
 
 SetByOtherWithALongName.story = {
   name: 'Set By Other (with a long name)',
 };
 
-export const SetByYou = (): JSX.Element => {
+export function SetByYou(): JSX.Element {
   const props = createProps({
     expireTimer: DurationInSeconds.fromHours(1),
     type: 'fromMe',
@@ -96,9 +96,9 @@ export const SetByYou = (): JSX.Element => {
       <TimerNotification {...props} disabled />
     </>
   );
-};
+}
 
-export const SetBySync = (): JSX.Element => {
+export function SetBySync(): JSX.Element {
   const props = createProps({
     expireTimer: DurationInSeconds.fromHours(1),
     type: 'fromSync',
@@ -112,4 +112,4 @@ export const SetBySync = (): JSX.Element => {
       <TimerNotification {...props} disabled />
     </>
   );
-};
+}
diff --git a/ts/components/conversation/TimerNotification.tsx b/ts/components/conversation/TimerNotification.tsx
index fb44766cf..6b164d9c9 100644
--- a/ts/components/conversation/TimerNotification.tsx
+++ b/ts/components/conversation/TimerNotification.tsx
@@ -1,7 +1,7 @@
 // Copyright 2018-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 
 import { ContactName } from './ContactName';
@@ -20,7 +20,7 @@ export type TimerNotificationType =
 
 // We can't always use destructuring assignment because of the complexity of this props
 //   type.
-/* eslint-disable react/destructuring-assignment */
+
 export type PropsData = {
   type: TimerNotificationType;
   title: string;
@@ -38,7 +38,7 @@ type PropsHousekeeping = {
 
 export type Props = PropsData & PropsHousekeeping;
 
-export const TimerNotification: FunctionComponent<Props> = props => {
+export function TimerNotification(props: Props): JSX.Element {
   const { disabled, i18n, title, type } = props;
 
   let changeKey: string;
@@ -88,4 +88,4 @@ export const TimerNotification: FunctionComponent<Props> = props => {
   const icon = disabled ? 'timer-disabled' : 'timer';
 
   return <SystemMessage icon={icon} contents={message} />;
-};
+}
diff --git a/ts/components/conversation/TypingAnimation.stories.tsx b/ts/components/conversation/TypingAnimation.stories.tsx
index 363217531..5d24c5486 100644
--- a/ts/components/conversation/TypingAnimation.stories.tsx
+++ b/ts/components/conversation/TypingAnimation.stories.tsx
@@ -19,13 +19,13 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   color: overrideProps.color || '',
 });
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   const props = createProps();
 
   return <TypingAnimation {...props} />;
-};
+}
 
-export const Light = (): JSX.Element => {
+export function Light(): JSX.Element {
   const props = createProps({
     color: 'light',
   });
@@ -35,4 +35,4 @@ export const Light = (): JSX.Element => {
       <TypingAnimation {...props} />
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/TypingAnimation.tsx b/ts/components/conversation/TypingAnimation.tsx
index 0d776f296..2ea66da26 100644
--- a/ts/components/conversation/TypingAnimation.tsx
+++ b/ts/components/conversation/TypingAnimation.tsx
@@ -11,30 +11,32 @@ export type Props = {
   color?: string;
 };
 
-export const TypingAnimation = ({ i18n, color }: Props): JSX.Element => (
-  <div className="module-typing-animation" title={i18n('typingAlt')}>
-    <div
-      className={classNames(
-        'module-typing-animation__dot',
-        'module-typing-animation__dot--first',
-        color ? `module-typing-animation__dot--${color}` : null
-      )}
-    />
-    <div className="module-typing-animation__spacer" />
-    <div
-      className={classNames(
-        'module-typing-animation__dot',
-        'module-typing-animation__dot--second',
-        color ? `module-typing-animation__dot--${color}` : null
-      )}
-    />
-    <div className="module-typing-animation__spacer" />
-    <div
-      className={classNames(
-        'module-typing-animation__dot',
-        'module-typing-animation__dot--third',
-        color ? `module-typing-animation__dot--${color}` : null
-      )}
-    />
-  </div>
-);
+export function TypingAnimation({ i18n, color }: Props): JSX.Element {
+  return (
+    <div className="module-typing-animation" title={i18n('typingAlt')}>
+      <div
+        className={classNames(
+          'module-typing-animation__dot',
+          'module-typing-animation__dot--first',
+          color ? `module-typing-animation__dot--${color}` : null
+        )}
+      />
+      <div className="module-typing-animation__spacer" />
+      <div
+        className={classNames(
+          'module-typing-animation__dot',
+          'module-typing-animation__dot--second',
+          color ? `module-typing-animation__dot--${color}` : null
+        )}
+      />
+      <div className="module-typing-animation__spacer" />
+      <div
+        className={classNames(
+          'module-typing-animation__dot',
+          'module-typing-animation__dot--third',
+          color ? `module-typing-animation__dot--${color}` : null
+        )}
+      />
+    </div>
+  );
+}
diff --git a/ts/components/conversation/TypingBubble.stories.tsx b/ts/components/conversation/TypingBubble.stories.tsx
index 7efd1363e..01eb211fa 100644
--- a/ts/components/conversation/TypingBubble.stories.tsx
+++ b/ts/components/conversation/TypingBubble.stories.tsx
@@ -40,26 +40,26 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   theme: ThemeType.light,
 });
 
-export const Direct = (): JSX.Element => {
+export function Direct(): JSX.Element {
   const props = createProps();
 
   return <TypingBubble {...props} />;
-};
+}
 
-export const Group = (): JSX.Element => {
+export function Group(): JSX.Element {
   const props = createProps({ conversationType: 'group' });
 
   return <TypingBubble {...props} />;
-};
+}
 
-export const GroupWithBadge = (): JSX.Element => {
+export function GroupWithBadge(): JSX.Element {
   const props = createProps({
     badge: getFakeBadge(),
     conversationType: 'group',
   });
 
   return <TypingBubble {...props} />;
-};
+}
 
 GroupWithBadge.story = {
   name: 'Group (with badge)',
diff --git a/ts/components/conversation/UniversalTimerNotification.stories.tsx b/ts/components/conversation/UniversalTimerNotification.stories.tsx
index 558c25314..e6464a9ad 100644
--- a/ts/components/conversation/UniversalTimerNotification.stories.tsx
+++ b/ts/components/conversation/UniversalTimerNotification.stories.tsx
@@ -15,37 +15,47 @@ export default {
 
 const i18n = setupI18n('en', enMessages);
 
-export const Seconds = (): JSX.Element => (
-  <UniversalTimerNotification
-    i18n={i18n}
-    expireTimer={EXPIRE_TIMERS[0].value}
-  />
-);
+export function Seconds(): JSX.Element {
+  return (
+    <UniversalTimerNotification
+      i18n={i18n}
+      expireTimer={EXPIRE_TIMERS[0].value}
+    />
+  );
+}
 
-export const Minutes = (): JSX.Element => (
-  <UniversalTimerNotification
-    i18n={i18n}
-    expireTimer={EXPIRE_TIMERS[1].value}
-  />
-);
+export function Minutes(): JSX.Element {
+  return (
+    <UniversalTimerNotification
+      i18n={i18n}
+      expireTimer={EXPIRE_TIMERS[1].value}
+    />
+  );
+}
 
-export const Hours = (): JSX.Element => (
-  <UniversalTimerNotification
-    i18n={i18n}
-    expireTimer={EXPIRE_TIMERS[2].value}
-  />
-);
+export function Hours(): JSX.Element {
+  return (
+    <UniversalTimerNotification
+      i18n={i18n}
+      expireTimer={EXPIRE_TIMERS[2].value}
+    />
+  );
+}
 
-export const Days = (): JSX.Element => (
-  <UniversalTimerNotification
-    i18n={i18n}
-    expireTimer={EXPIRE_TIMERS[3].value}
-  />
-);
+export function Days(): JSX.Element {
+  return (
+    <UniversalTimerNotification
+      i18n={i18n}
+      expireTimer={EXPIRE_TIMERS[3].value}
+    />
+  );
+}
 
-export const Weeks = (): JSX.Element => (
-  <UniversalTimerNotification
-    i18n={i18n}
-    expireTimer={EXPIRE_TIMERS[4].value}
-  />
-);
+export function Weeks(): JSX.Element {
+  return (
+    <UniversalTimerNotification
+      i18n={i18n}
+      expireTimer={EXPIRE_TIMERS[4].value}
+    />
+  );
+}
diff --git a/ts/components/conversation/UniversalTimerNotification.tsx b/ts/components/conversation/UniversalTimerNotification.tsx
index 115075330..0bb044ce2 100644
--- a/ts/components/conversation/UniversalTimerNotification.tsx
+++ b/ts/components/conversation/UniversalTimerNotification.tsx
@@ -13,7 +13,7 @@ export type Props = {
   expireTimer: DurationInSeconds;
 };
 
-export const UniversalTimerNotification: React.FC<Props> = props => {
+export function UniversalTimerNotification(props: Props): JSX.Element | null {
   const { i18n, expireTimer } = props;
 
   if (!expireTimer) {
@@ -30,4 +30,4 @@ export const UniversalTimerNotification: React.FC<Props> = props => {
       })}
     />
   );
-};
+}
diff --git a/ts/components/conversation/UnsupportedMessage.stories.tsx b/ts/components/conversation/UnsupportedMessage.stories.tsx
index b83947ffd..a42792463 100644
--- a/ts/components/conversation/UnsupportedMessage.stories.tsx
+++ b/ts/components/conversation/UnsupportedMessage.stories.tsx
@@ -29,7 +29,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   downloadNewVersion: action('downloadNewVersion'),
 });
 
-export const FromSomeone = (): JSX.Element => {
+export function FromSomeone(): JSX.Element {
   const contact = createContact({
     title: 'Alice',
     name: 'Alice',
@@ -38,9 +38,9 @@ export const FromSomeone = (): JSX.Element => {
   const props = createProps({ contact });
 
   return <UnsupportedMessage {...props} />;
-};
+}
 
-export const AfterUpgrade = (): JSX.Element => {
+export function AfterUpgrade(): JSX.Element {
   const contact = createContact({
     title: 'Alice',
     name: 'Alice',
@@ -49,9 +49,9 @@ export const AfterUpgrade = (): JSX.Element => {
   const props = createProps({ contact, canProcessNow: true });
 
   return <UnsupportedMessage {...props} />;
-};
+}
 
-export const FromYourself = (): JSX.Element => {
+export function FromYourself(): JSX.Element {
   const contact = createContact({
     title: 'Alice',
     name: 'Alice',
@@ -61,9 +61,9 @@ export const FromYourself = (): JSX.Element => {
   const props = createProps({ contact });
 
   return <UnsupportedMessage {...props} />;
-};
+}
 
-export const FromYourselfAfterUpgrade = (): JSX.Element => {
+export function FromYourselfAfterUpgrade(): JSX.Element {
   const contact = createContact({
     title: 'Alice',
     name: 'Alice',
@@ -73,4 +73,4 @@ export const FromYourselfAfterUpgrade = (): JSX.Element => {
   const props = createProps({ contact, canProcessNow: true });
 
   return <UnsupportedMessage {...props} />;
-};
+}
diff --git a/ts/components/conversation/UnsupportedMessage.tsx b/ts/components/conversation/UnsupportedMessage.tsx
index 1cfdb2a5a..382280631 100644
--- a/ts/components/conversation/UnsupportedMessage.tsx
+++ b/ts/components/conversation/UnsupportedMessage.tsx
@@ -33,12 +33,12 @@ type PropsHousekeeping = {
 
 export type Props = PropsData & PropsHousekeeping & PropsActions;
 
-export const UnsupportedMessage = ({
+export function UnsupportedMessage({
   canProcessNow,
   contact,
   i18n,
   downloadNewVersion,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const { isMe } = contact;
 
   const otherStringId = canProcessNow
@@ -87,4 +87,4 @@ export const UnsupportedMessage = ({
       }
     />
   );
-};
+}
diff --git a/ts/components/conversation/VerificationNotification.stories.tsx b/ts/components/conversation/VerificationNotification.stories.tsx
index caed3b6d7..d750eb9a5 100644
--- a/ts/components/conversation/VerificationNotification.stories.tsx
+++ b/ts/components/conversation/VerificationNotification.stories.tsx
@@ -24,47 +24,47 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   contact: overrideProps.contact || contact,
 });
 
-export const MarkAsVerified = (): JSX.Element => {
+export function MarkAsVerified(): JSX.Element {
   const props = createProps({ type: 'markVerified' });
 
   return <VerificationNotification {...props} />;
-};
+}
 
 MarkAsVerified.story = {
   name: 'Mark as Verified',
 };
 
-export const MarkAsNotVerified = (): JSX.Element => {
+export function MarkAsNotVerified(): JSX.Element {
   const props = createProps({ type: 'markNotVerified' });
 
   return <VerificationNotification {...props} />;
-};
+}
 
 MarkAsNotVerified.story = {
   name: 'Mark as Not Verified',
 };
 
-export const MarkAsVerifiedRemotely = (): JSX.Element => {
+export function MarkAsVerifiedRemotely(): JSX.Element {
   const props = createProps({ type: 'markVerified', isLocal: false });
 
   return <VerificationNotification {...props} />;
-};
+}
 
 MarkAsVerifiedRemotely.story = {
   name: 'Mark as Verified Remotely',
 };
 
-export const MarkAsNotVerifiedRemotely = (): JSX.Element => {
+export function MarkAsNotVerifiedRemotely(): JSX.Element {
   const props = createProps({ type: 'markNotVerified', isLocal: false });
 
   return <VerificationNotification {...props} />;
-};
+}
 
 MarkAsNotVerifiedRemotely.story = {
   name: 'Mark as Not Verified Remotely',
 };
 
-export const LongName = (): JSX.Element => {
+export function LongName(): JSX.Element {
   const longName = '🎆🍬🏈'.repeat(50);
 
   const props = createProps({
@@ -73,7 +73,7 @@ export const LongName = (): JSX.Element => {
   });
 
   return <VerificationNotification {...props} />;
-};
+}
 
 LongName.story = {
   name: 'Long name',
diff --git a/ts/components/conversation/conversation-details/AddGroupMembersModal.stories.tsx b/ts/components/conversation/conversation-details/AddGroupMembersModal.stories.tsx
index 99bcbd97a..4f29c9708 100644
--- a/ts/components/conversation/conversation-details/AddGroupMembersModal.stories.tsx
+++ b/ts/components/conversation/conversation-details/AddGroupMembersModal.stories.tsx
@@ -90,65 +90,69 @@ const createProps = (
   ...overrideProps,
 });
 
-export const Default = (): JSX.Element => (
-  <AddGroupMembersModal {...createProps()} />
-);
+export function Default(): JSX.Element {
+  return <AddGroupMembersModal {...createProps()} />;
+}
 
-export const Only3Contacts = (): JSX.Element => (
-  <AddGroupMembersModal
-    {...createProps({}, allCandidateContacts.slice(0, 3))}
-  />
-);
+export function Only3Contacts(): JSX.Element {
+  return (
+    <AddGroupMembersModal
+      {...createProps({}, allCandidateContacts.slice(0, 3))}
+    />
+  );
+}
 
 Only3Contacts.story = {
   name: 'Only 3 contacts',
 };
 
-export const NoCandidateContacts = (): JSX.Element => (
-  <AddGroupMembersModal {...createProps({}, [])} />
-);
+export function NoCandidateContacts(): JSX.Element {
+  return <AddGroupMembersModal {...createProps({}, [])} />;
+}
 
 NoCandidateContacts.story = {
   name: 'No candidate contacts',
 };
 
-export const EveryoneAlreadyAdded = (): JSX.Element => (
-  <AddGroupMembersModal
-    {...createProps({
-      conversationIdsAlreadyInGroup: new Set(
-        allCandidateContacts.map(contact => contact.id)
-      ),
-    })}
-  />
-);
+export function EveryoneAlreadyAdded(): JSX.Element {
+  return (
+    <AddGroupMembersModal
+      {...createProps({
+        conversationIdsAlreadyInGroup: new Set(
+          allCandidateContacts.map(contact => contact.id)
+        ),
+      })}
+    />
+  );
+}
 
 EveryoneAlreadyAdded.story = {
   name: 'Everyone already added',
 };
 
-export const RequestFailsAfter1Second = (): JSX.Element => {
-  const Wrapper = () => {
-    const [requestState, setRequestState] = useState(RequestState.Inactive);
+function RequestFailsAfter1SecondWrapper() {
+  const [requestState, setRequestState] = useState(RequestState.Inactive);
 
-    return (
-      <AddGroupMembersModal
-        {...createProps({
-          clearRequestError: () => {
-            setRequestState(RequestState.Inactive);
-          },
-          makeRequest: async () => {
-            setRequestState(RequestState.Active);
-            await sleep(1000);
-            setRequestState(RequestState.InactiveWithError);
-          },
-          requestState,
-        })}
-      />
-    );
-  };
+  return (
+    <AddGroupMembersModal
+      {...createProps({
+        clearRequestError: () => {
+          setRequestState(RequestState.Inactive);
+        },
+        makeRequest: async () => {
+          setRequestState(RequestState.Active);
+          await sleep(1000);
+          setRequestState(RequestState.InactiveWithError);
+        },
+        requestState,
+      })}
+    />
+  );
+}
 
-  return <Wrapper />;
-};
+export function RequestFailsAfter1Second(): JSX.Element {
+  return <RequestFailsAfter1SecondWrapper />;
+}
 
 RequestFailsAfter1Second.story = {
   name: 'Request fails after 1 second',
diff --git a/ts/components/conversation/conversation-details/AddGroupMembersModal.tsx b/ts/components/conversation/conversation-details/AddGroupMembersModal.tsx
index 2ac27352c..2b787a0f4 100644
--- a/ts/components/conversation/conversation-details/AddGroupMembersModal.tsx
+++ b/ts/components/conversation/conversation-details/AddGroupMembersModal.tsx
@@ -1,7 +1,6 @@
 // Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React, { useReducer } from 'react';
 import { without } from 'lodash';
 
@@ -134,7 +133,7 @@ function reducer(
   }
 }
 
-export const AddGroupMembersModal: FunctionComponent<PropsType> = ({
+export function AddGroupMembersModal({
   clearRequestError,
   conversationIdsAlreadyInGroup,
   groupTitle,
@@ -146,7 +145,7 @@ export const AddGroupMembersModal: FunctionComponent<PropsType> = ({
   requestState,
   renderChooseGroupMembersModal,
   renderConfirmAdditionsModal,
-}) => {
+}: PropsType): JSX.Element {
   const numberOfContactsAlreadyInGroup = conversationIdsAlreadyInGroup.size;
   const isGroupAlreadyFull = numberOfContactsAlreadyInGroup >= maxGroupSize;
   const isGroupAlreadyOverRecommendedMaximum =
@@ -260,4 +259,4 @@ export const AddGroupMembersModal: FunctionComponent<PropsType> = ({
     default:
       throw missingCaseError(stage);
   }
-};
+}
diff --git a/ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx b/ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx
index d6bcc3e89..3a5ec1728 100644
--- a/ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx
+++ b/ts/components/conversation/conversation-details/AddGroupMembersModal/ChooseGroupMembersModal.tsx
@@ -1,7 +1,6 @@
 // Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React, {
   useEffect,
   useMemo,
@@ -71,7 +70,7 @@ type ActionPropsType = Omit<
 type PropsType = StatePropsType & ActionPropsType;
 
 // TODO: This should use <Modal>. See DESKTOP-1038.
-export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
+export function ChooseGroupMembersModal({
   regionCode,
   candidateContacts,
   confirmAdds,
@@ -89,7 +88,7 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
   lookupConversationWithoutUuid,
   showUserNotFoundModal,
   isUsernamesEnabled,
-}) => {
+}: PropsType): JSX.Element {
   const [focusRef] = useRestoreFocus();
 
   const phoneNumber = parseAndFormatPhoneNumber(searchTerm, regionCode);
@@ -400,4 +399,4 @@ export const ChooseGroupMembersModal: FunctionComponent<PropsType> = ({
       </div>
     </ModalHost>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/AddGroupMembersModal/ConfirmAdditionsModal.tsx b/ts/components/conversation/conversation-details/AddGroupMembersModal/ConfirmAdditionsModal.tsx
index 24828bb14..7fde3250c 100644
--- a/ts/components/conversation/conversation-details/AddGroupMembersModal/ConfirmAdditionsModal.tsx
+++ b/ts/components/conversation/conversation-details/AddGroupMembersModal/ConfirmAdditionsModal.tsx
@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import React from 'react';
 
 import type { LocalizerType } from '../../../../types/Util';
@@ -26,14 +26,14 @@ export type StatePropsType = {
 
 type PropsType = StatePropsType;
 
-export const ConfirmAdditionsModal: FunctionComponent<PropsType> = ({
+export function ConfirmAdditionsModal({
   groupTitle,
   i18n,
   makeRequest,
   onClose,
   requestState,
   selectedContacts,
-}) => {
+}: PropsType): JSX.Element {
   const firstContact = selectedContacts[0];
   assertDev(
     firstContact,
@@ -106,4 +106,4 @@ export const ConfirmAdditionsModal: FunctionComponent<PropsType> = ({
       </div>
     </ModalHost>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/ConversationDetails.stories.tsx b/ts/components/conversation/conversation-details/ConversationDetails.stories.tsx
index 9cc8e5a14..e4b4596a1 100644
--- a/ts/components/conversation/conversation-details/ConversationDetails.stories.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetails.stories.tsx
@@ -131,23 +131,23 @@ const createProps = (
   },
 });
 
-export const Basic = (): JSX.Element => {
+export function Basic(): JSX.Element {
   const props = createProps();
 
   return <ConversationDetails {...props} />;
-};
+}
 
-export const AsAdmin = (): JSX.Element => {
+export function AsAdmin(): JSX.Element {
   const props = createProps();
 
   return <ConversationDetails {...props} isAdmin />;
-};
+}
 
 AsAdmin.story = {
   name: 'as Admin',
 };
 
-export const AsLastAdmin = (): JSX.Element => {
+export function AsLastAdmin(): JSX.Element {
   const props = createProps();
 
   return (
@@ -162,13 +162,13 @@ export const AsLastAdmin = (): JSX.Element => {
       }))}
     />
   );
-};
+}
 
 AsLastAdmin.story = {
   name: 'as last admin',
 };
 
-export const AsOnlyAdmin = (): JSX.Element => {
+export function AsOnlyAdmin(): JSX.Element {
   const props = createProps();
 
   return (
@@ -185,33 +185,33 @@ export const AsOnlyAdmin = (): JSX.Element => {
       ]}
     />
   );
-};
+}
 
 AsOnlyAdmin.story = {
   name: 'as only admin',
 };
 
-export const GroupEditable = (): JSX.Element => {
+export function GroupEditable(): JSX.Element {
   const props = createProps();
 
   return <ConversationDetails {...props} canEditGroupInfo />;
-};
+}
 
-export const GroupEditableWithCustomDisappearingTimeout = (): JSX.Element => {
+export function GroupEditableWithCustomDisappearingTimeout(): JSX.Element {
   const props = createProps(false, DurationInSeconds.fromDays(3));
 
   return <ConversationDetails {...props} canEditGroupInfo />;
-};
+}
 
 GroupEditableWithCustomDisappearingTimeout.story = {
   name: 'Group Editable with custom disappearing timeout',
 };
 
-export const GroupLinksOn = (): JSX.Element => {
+export function GroupLinksOn(): JSX.Element {
   const props = createProps(true);
 
   return <ConversationDetails {...props} isAdmin />;
-};
+}
 
 export const _11 = (): JSX.Element => (
   <ConversationDetails {...createProps()} isGroup={false} />
diff --git a/ts/components/conversation/conversation-details/ConversationDetails.tsx b/ts/components/conversation/conversation-details/ConversationDetails.tsx
index 53b6205e7..5c503d372 100644
--- a/ts/components/conversation/conversation-details/ConversationDetails.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetails.tsx
@@ -127,7 +127,7 @@ type ActionProps = {
 
 export type Props = StateProps & ActionProps;
 
-export const ConversationDetails: React.ComponentType<Props> = ({
+export function ConversationDetails({
   addMembers,
   areWeASubscriber,
   badges,
@@ -174,7 +174,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
   toggleAddUserToAnotherGroupModal,
   updateGroupAttributes,
   userAvatarData,
-}) => {
+}: Props): JSX.Element {
   const [modalState, setModalState] = useState<ModalState>(
     ModalState.NothingOpen
   );
@@ -453,22 +453,20 @@ export const ConversationDetails: React.ComponentType<Props> = ({
           />
         )}
         {!isGroup && !conversation.isMe && (
-          <>
-            <PanelRow
-              onClick={() => toggleSafetyNumberModal(conversation.id)}
-              icon={
-                <ConversationDetailsIcon
-                  ariaLabel={i18n('verifyNewNumber')}
-                  icon={IconType.verify}
-                />
-              }
-              label={
-                <div className="ConversationDetails__safety-number">
-                  {i18n('verifyNewNumber')}
-                </div>
-              }
-            />
-          </>
+          <PanelRow
+            onClick={() => toggleSafetyNumberModal(conversation.id)}
+            icon={
+              <ConversationDetailsIcon
+                ariaLabel={i18n('verifyNewNumber')}
+                icon={IconType.verify}
+              />
+            }
+            label={
+              <div className="ConversationDetails__safety-number">
+                {i18n('verifyNewNumber')}
+              </div>
+            }
+          />
         )}
       </PanelSection>
 
@@ -563,7 +561,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
       {modalNode}
     </div>
   );
-};
+}
 
 function ConversationDetailsCallButton({
   disabled,
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsActions.stories.tsx b/ts/components/conversation/conversation-details/ConversationDetailsActions.stories.tsx
index 17a4999c8..5b5d65515 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsActions.stories.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsActions.stories.tsx
@@ -34,23 +34,23 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   isGroup: true,
 });
 
-export const Basic = (): JSX.Element => {
+export function Basic(): JSX.Element {
   const props = createProps();
 
   return <ConversationDetailsActions {...props} />;
-};
+}
 
-export const LeftTheGroup = (): JSX.Element => {
+export function LeftTheGroup(): JSX.Element {
   const props = createProps({ left: true });
 
   return <ConversationDetailsActions {...props} />;
-};
+}
 
 LeftTheGroup.story = {
   name: 'Left the group',
 };
 
-export const BlockedAndLeftTheGroup = (): JSX.Element => {
+export function BlockedAndLeftTheGroup(): JSX.Element {
   const props = createProps({
     left: true,
     isBlocked: true,
@@ -58,17 +58,17 @@ export const BlockedAndLeftTheGroup = (): JSX.Element => {
   });
 
   return <ConversationDetailsActions {...props} />;
-};
+}
 
 BlockedAndLeftTheGroup.story = {
   name: 'Blocked and left the group',
 };
 
-export const CannotLeaveBecauseYouAreTheLastAdmin = (): JSX.Element => {
+export function CannotLeaveBecauseYouAreTheLastAdmin(): JSX.Element {
   const props = createProps({ cannotLeaveBecauseYouAreLastAdmin: true });
 
   return <ConversationDetailsActions {...props} />;
-};
+}
 
 CannotLeaveBecauseYouAreTheLastAdmin.story = {
   name: 'Cannot leave because you are the last admin',
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsActions.tsx b/ts/components/conversation/conversation-details/ConversationDetailsActions.tsx
index fc72ac62b..7f29419ca 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsActions.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsActions.tsx
@@ -25,7 +25,7 @@ export type Props = {
   onUnblock: () => void;
 };
 
-export const ConversationDetailsActions: React.ComponentType<Props> = ({
+export function ConversationDetailsActions({
   cannotLeaveBecauseYouAreLastAdmin,
   conversationTitle,
   i18n,
@@ -35,7 +35,7 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
   onBlock,
   onLeave,
   onUnblock,
-}) => {
+}: Props): JSX.Element {
   const [confirmLeave, gLeave] = useState<boolean>(false);
   const [confirmGroupBlock, gGroupBlock] = useState<boolean>(false);
   const [confirmGroupUnblock, gGroupUnblock] = useState<boolean>(false);
@@ -268,4 +268,4 @@ export const ConversationDetailsActions: React.ComponentType<Props> = ({
       )}
     </>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsGroups.tsx b/ts/components/conversation/conversation-details/ConversationDetailsGroups.tsx
index ee1be5a44..2db16f07a 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsGroups.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsGroups.tsx
@@ -20,13 +20,13 @@ type Props = {
   showConversation: ShowConversationType;
 };
 
-export const ConversationDetailsGroups = ({
+export function ConversationDetailsGroups({
   contactId,
   i18n,
   groupsInCommon,
   toggleAddUserToAnotherGroupModal,
   showConversation,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   const [showAllGroups, setShowAllGroups] = React.useState(false);
 
   const maxShownGroupCount = 5;
@@ -81,4 +81,4 @@ export const ConversationDetailsGroups = ({
       )}
     </PanelSection>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsHeader.stories.tsx b/ts/components/conversation/conversation-details/ConversationDetailsHeader.stories.tsx
index 4eb6c5441..c53852141 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsHeader.stories.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsHeader.stories.tsx
@@ -35,7 +35,7 @@ const createConversation = (): ConversationType =>
     ),
   });
 
-const Wrapper = (overrideProps: Partial<Props>) => {
+function Wrapper(overrideProps: Partial<Props>) {
   const theme = React.useContext(StorybookThemeContext);
 
   return (
@@ -52,32 +52,40 @@ const Wrapper = (overrideProps: Partial<Props>) => {
       {...overrideProps}
     />
   );
-};
+}
 
-export const Basic = (): JSX.Element => <Wrapper />;
-export const Editable = (): JSX.Element => <Wrapper canEdit />;
+export function Basic(): JSX.Element {
+  return <Wrapper />;
+}
+export function Editable(): JSX.Element {
+  return <Wrapper canEdit />;
+}
 
-export const BasicNoDescription = (): JSX.Element => (
-  <Wrapper
-    conversation={getDefaultConversation({
-      title: 'My Group',
-      type: 'group',
-    })}
-  />
-);
+export function BasicNoDescription(): JSX.Element {
+  return (
+    <Wrapper
+      conversation={getDefaultConversation({
+        title: 'My Group',
+        type: 'group',
+      })}
+    />
+  );
+}
 
 BasicNoDescription.story = {
   name: 'Basic no-description',
 };
 
-export const EditableNoDescription = (): JSX.Element => (
-  <Wrapper
-    conversation={getDefaultConversation({
-      title: 'My Group',
-      type: 'group',
-    })}
-  />
-);
+export function EditableNoDescription(): JSX.Element {
+  return (
+    <Wrapper
+      conversation={getDefaultConversation({
+        title: 'My Group',
+        type: 'group',
+      })}
+    />
+  );
+}
 
 EditableNoDescription.story = {
   name: 'Editable no-description',
@@ -91,7 +99,9 @@ _11.story = {
   name: '1:1',
 };
 
-export const NoteToSelf = (): JSX.Element => <Wrapper isMe />;
+export function NoteToSelf(): JSX.Element {
+  return <Wrapper isMe />;
+}
 
 NoteToSelf.story = {
   name: 'Note to self',
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
index a970ddde0..9866fe447 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
@@ -36,7 +36,7 @@ enum ConversationDetailsHeaderActiveModal {
 
 const bem = bemGenerator('ConversationDetails-header');
 
-export const ConversationDetailsHeader: React.ComponentType<Props> = ({
+export function ConversationDetailsHeader({
   areWeASubscriber,
   badges,
   canEdit,
@@ -47,7 +47,7 @@ export const ConversationDetailsHeader: React.ComponentType<Props> = ({
   memberships,
   startEditing,
   theme,
-}) => {
+}: Props): JSX.Element {
   const [activeModal, setActiveModal] = useState<
     undefined | ConversationDetailsHeaderActiveModal
   >();
@@ -189,4 +189,4 @@ export const ConversationDetailsHeader: React.ComponentType<Props> = ({
       <div className={bem('subtitle')}>{subtitle}</div>
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsIcon.stories.tsx b/ts/components/conversation/conversation-details/ConversationDetailsIcon.stories.tsx
index 315163c0c..e48be8cc0 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsIcon.stories.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsIcon.stories.tsx
@@ -18,7 +18,7 @@ const createProps = (overrideProps: Partial<Props>): Props => ({
   onClick: overrideProps.onClick,
 });
 
-export const All = (): JSX.Element => {
+export function All(): JSX.Element {
   const icons = Object.values(IconType);
 
   return (
@@ -28,9 +28,9 @@ export const All = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
 
-export const ClickableIcons = (): JSX.Element => {
+export function ClickableIcons(): JSX.Element {
   const icons = [
     IconType.timer,
     IconType.trash,
@@ -49,4 +49,4 @@ export const ClickableIcons = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx b/ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx
index caa9b7a51..b4ba22876 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx
@@ -37,13 +37,13 @@ export type Props = {
 
 const bem = bemGenerator('ConversationDetails-icon');
 
-export const ConversationDetailsIcon: React.ComponentType<Props> = ({
+export function ConversationDetailsIcon({
   ariaLabel,
   disabled,
   icon,
   fakeButton,
   onClick,
-}) => {
+}: Props): JSX.Element {
   let content: React.ReactChild;
 
   if (icon === IconType.spinner) {
@@ -105,4 +105,4 @@ export const ConversationDetailsIcon: React.ComponentType<Props> = ({
   }
 
   return content;
-};
+}
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsMediaList.stories.tsx b/ts/components/conversation/conversation-details/ConversationDetailsMediaList.stories.tsx
index 383eaef45..c72a8343b 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsMediaList.stories.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsMediaList.stories.tsx
@@ -33,9 +33,9 @@ const createProps = (mediaItems?: Array<MediaItemType>): Props => ({
   showLightboxForMedia: action('showLightboxForMedia'),
 });
 
-export const Basic = (): JSX.Element => {
+export function Basic(): JSX.Element {
   const mediaItems = createPreparedMediaItems(createRandomMedia);
   const props = createProps(mediaItems);
 
   return <ConversationDetailsMediaList {...props} />;
-};
+}
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsMediaList.tsx b/ts/components/conversation/conversation-details/ConversationDetailsMediaList.tsx
index 84b49feea..d2792e73c 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsMediaList.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsMediaList.tsx
@@ -27,13 +27,13 @@ const MEDIA_ITEM_LIMIT = 6;
 
 const bem = bemGenerator('ConversationDetails-media-list');
 
-export const ConversationDetailsMediaList: React.ComponentType<Props> = ({
+export function ConversationDetailsMediaList({
   conversation,
   i18n,
   loadRecentMediaItems,
   showAllMedia,
   showLightboxForMedia,
-}) => {
+}: Props): JSX.Element | null {
   const mediaItems = conversation.recentMediaItems || [];
 
   const mediaItemsLength = mediaItems.length;
@@ -71,4 +71,4 @@ export const ConversationDetailsMediaList: React.ComponentType<Props> = ({
       </div>
     </PanelSection>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.stories.tsx b/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.stories.tsx
index cf2d9d882..099fba8be 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.stories.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.stories.tsx
@@ -53,67 +53,67 @@ const createProps = (overrideProps: Partial<Props>): Props => ({
   theme: ThemeType.light,
 });
 
-export const Few = (): JSX.Element => {
+export function Few(): JSX.Element {
   const memberships = createMemberships(3);
 
   const props = createProps({ memberships });
 
   return <ConversationDetailsMembershipList {...props} />;
-};
+}
 
-export const Limit = (): JSX.Element => {
+export function Limit(): JSX.Element {
   const memberships = createMemberships(5);
 
   const props = createProps({ memberships });
 
   return <ConversationDetailsMembershipList {...props} />;
-};
+}
 
-export const Limit1 = (): JSX.Element => {
+export function Limit1(): JSX.Element {
   const memberships = createMemberships(6);
 
   const props = createProps({ memberships });
 
   return <ConversationDetailsMembershipList {...props} />;
-};
+}
 
 Limit1.story = {
   name: 'Limit +1',
 };
 
-export const Limit2 = (): JSX.Element => {
+export function Limit2(): JSX.Element {
   const memberships = createMemberships(7);
 
   const props = createProps({ memberships });
 
   return <ConversationDetailsMembershipList {...props} />;
-};
+}
 
 Limit2.story = {
   name: 'Limit +2',
 };
 
-export const Many = (): JSX.Element => {
+export function Many(): JSX.Element {
   const memberships = createMemberships(100);
 
   const props = createProps({ memberships });
 
   return <ConversationDetailsMembershipList {...props} />;
-};
+}
 
-export const None = (): JSX.Element => {
+export function None(): JSX.Element {
   const props = createProps({ memberships: [] });
 
   return <ConversationDetailsMembershipList {...props} />;
-};
+}
 
-export const CanAddNewMembers = (): JSX.Element => {
+export function CanAddNewMembers(): JSX.Element {
   const memberships = createMemberships(10);
 
   const props = createProps({ canAddNewMembers: true, memberships });
 
   return <ConversationDetailsMembershipList {...props} />;
-};
+}
 
 CanAddNewMembers.story = {
   name: 'Can add new members',
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.tsx b/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.tsx
index 86332b69e..0f0ff819e 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsMembershipList.tsx
@@ -70,7 +70,7 @@ function sortMemberships(
   return sortedMemberships;
 }
 
-export const ConversationDetailsMembershipList: React.ComponentType<Props> = ({
+export function ConversationDetailsMembershipList({
   canAddNewMembers,
   conversationId,
   getPreferredBadge,
@@ -80,7 +80,7 @@ export const ConversationDetailsMembershipList: React.ComponentType<Props> = ({
   showContactModal,
   startAddingNewMembers,
   theme,
-}) => {
+}: Props): JSX.Element {
   const [showAllMembers, setShowAllMembers] = React.useState<boolean>(false);
   const sortedMemberships = sortMemberships(memberships);
 
@@ -139,4 +139,4 @@ export const ConversationDetailsMembershipList: React.ComponentType<Props> = ({
       )}
     </PanelSection>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/ConversationNotificationsModal.tsx b/ts/components/conversation/conversation-details/ConversationNotificationsModal.tsx
index e35bfdbaa..f651fb355 100644
--- a/ts/components/conversation/conversation-details/ConversationNotificationsModal.tsx
+++ b/ts/components/conversation/conversation-details/ConversationNotificationsModal.tsx
@@ -17,12 +17,12 @@ type PropsType = {
   setMuteExpiration: (muteExpiresAt: undefined | number) => unknown;
 };
 
-export const ConversationNotificationsModal = ({
+export function ConversationNotificationsModal({
   i18n,
   muteExpiresAt,
   onClose,
   setMuteExpiration,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const muteOptions = useMemo(
     () =>
       getMuteOptions(muteExpiresAt, i18n).map(({ disabled, name, value }) => ({
@@ -78,4 +78,4 @@ export const ConversationNotificationsModal = ({
         ))}
     </Modal>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/ConversationNotificationsSettings.stories.tsx b/ts/components/conversation/conversation-details/ConversationNotificationsSettings.stories.tsx
index 64c5bef1f..f88fc6d27 100644
--- a/ts/components/conversation/conversation-details/ConversationNotificationsSettings.stories.tsx
+++ b/ts/components/conversation/conversation-details/ConversationNotificationsSettings.stories.tsx
@@ -25,31 +25,35 @@ const getCommonProps = () => ({
   setMuteExpiration: action('setMuteExpiration'),
 });
 
-export const GroupConversationAllDefault = (): JSX.Element => (
-  <ConversationNotificationsSettings {...getCommonProps()} />
-);
+export function GroupConversationAllDefault(): JSX.Element {
+  return <ConversationNotificationsSettings {...getCommonProps()} />;
+}
 
 GroupConversationAllDefault.story = {
   name: 'Group conversation, all default',
 };
 
-export const GroupConversationMuted = (): JSX.Element => (
-  <ConversationNotificationsSettings
-    {...getCommonProps()}
-    muteExpiresAt={Date.UTC(2099, 5, 9)}
-  />
-);
+export function GroupConversationMuted(): JSX.Element {
+  return (
+    <ConversationNotificationsSettings
+      {...getCommonProps()}
+      muteExpiresAt={Date.UTC(2099, 5, 9)}
+    />
+  );
+}
 
 GroupConversationMuted.story = {
   name: 'Group conversation, muted',
 };
 
-export const GroupConversationMentionsMuted = (): JSX.Element => (
-  <ConversationNotificationsSettings
-    {...getCommonProps()}
-    dontNotifyForMentionsIfMuted
-  />
-);
+export function GroupConversationMentionsMuted(): JSX.Element {
+  return (
+    <ConversationNotificationsSettings
+      {...getCommonProps()}
+      dontNotifyForMentionsIfMuted
+    />
+  );
+}
 
 GroupConversationMentionsMuted.story = {
   name: 'Group conversation, @mentions muted',
diff --git a/ts/components/conversation/conversation-details/ConversationNotificationsSettings.tsx b/ts/components/conversation/conversation-details/ConversationNotificationsSettings.tsx
index 07bbc2929..6808c410b 100644
--- a/ts/components/conversation/conversation-details/ConversationNotificationsSettings.tsx
+++ b/ts/components/conversation/conversation-details/ConversationNotificationsSettings.tsx
@@ -1,7 +1,6 @@
 // Copyright 2021-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React, { useMemo } from 'react';
 
 import type { ConversationTypeType } from '../../../state/ducks/conversations';
@@ -26,16 +25,14 @@ type PropsType = {
   setMuteExpiration: (muteExpiresAt: undefined | number) => unknown;
 };
 
-export const ConversationNotificationsSettings: FunctionComponent<
-  PropsType
-> = ({
+export function ConversationNotificationsSettings({
   conversationType,
   dontNotifyForMentionsIfMuted,
   i18n,
   muteExpiresAt,
   setMuteExpiration,
   setDontNotifyForMentionsIfMuted,
-}) => {
+}: PropsType): JSX.Element {
   const muteNotificationsSelectId = useUniqueId();
   const mentionsSelectId = useUniqueId();
   const muteOptions = useMemo(
@@ -138,4 +135,4 @@ export const ConversationNotificationsSettings: FunctionComponent<
       </PanelSection>
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/EditConversationAttributesModal.stories.tsx b/ts/components/conversation/conversation-details/EditConversationAttributesModal.stories.tsx
index e1529de1f..07a13f63c 100644
--- a/ts/components/conversation/conversation-details/EditConversationAttributesModal.stories.tsx
+++ b/ts/components/conversation/conversation-details/EditConversationAttributesModal.stories.tsx
@@ -36,51 +36,59 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   ...overrideProps,
 });
 
-export const NoAvatarEmptyTitle = (): JSX.Element => (
-  <EditConversationAttributesModal {...createProps({ title: '' })} />
-);
+export function NoAvatarEmptyTitle(): JSX.Element {
+  return <EditConversationAttributesModal {...createProps({ title: '' })} />;
+}
 
 NoAvatarEmptyTitle.story = {
   name: 'No avatar, empty title',
 };
 
-export const AvatarAndTitle = (): JSX.Element => (
-  <EditConversationAttributesModal
-    {...createProps({
-      avatarPath: '/fixtures/kitten-3-64-64.jpg',
-    })}
-  />
-);
+export function AvatarAndTitle(): JSX.Element {
+  return (
+    <EditConversationAttributesModal
+      {...createProps({
+        avatarPath: '/fixtures/kitten-3-64-64.jpg',
+      })}
+    />
+  );
+}
 
 AvatarAndTitle.story = {
   name: 'Avatar and title',
 };
 
-export const InitiallyFocusingDescription = (): JSX.Element => (
-  <EditConversationAttributesModal
-    {...createProps({ title: 'Has title', initiallyFocusDescription: true })}
-  />
-);
+export function InitiallyFocusingDescription(): JSX.Element {
+  return (
+    <EditConversationAttributesModal
+      {...createProps({ title: 'Has title', initiallyFocusDescription: true })}
+    />
+  );
+}
 
 InitiallyFocusingDescription.story = {
   name: 'Initially focusing description',
 };
 
-export const RequestActive = (): JSX.Element => (
-  <EditConversationAttributesModal
-    {...createProps({ requestState: RequestState.Active })}
-  />
-);
+export function RequestActive(): JSX.Element {
+  return (
+    <EditConversationAttributesModal
+      {...createProps({ requestState: RequestState.Active })}
+    />
+  );
+}
 
 RequestActive.story = {
   name: 'Request active',
 };
 
-export const HasError = (): JSX.Element => (
-  <EditConversationAttributesModal
-    {...createProps({ requestState: RequestState.InactiveWithError })}
-  />
-);
+export function HasError(): JSX.Element {
+  return (
+    <EditConversationAttributesModal
+      {...createProps({ requestState: RequestState.InactiveWithError })}
+    />
+  );
+}
 
 HasError.story = {
   name: 'Has error',
diff --git a/ts/components/conversation/conversation-details/EditConversationAttributesModal.tsx b/ts/components/conversation/conversation-details/EditConversationAttributesModal.tsx
index e1a55c510..b2bb8a53b 100644
--- a/ts/components/conversation/conversation-details/EditConversationAttributesModal.tsx
+++ b/ts/components/conversation/conversation-details/EditConversationAttributesModal.tsx
@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FormEventHandler, FunctionComponent } from 'react';
+import type { FormEventHandler } from 'react';
 import React, { useRef, useState } from 'react';
 
 import type { LocalizerType } from '../../../types/Util';
@@ -44,7 +44,7 @@ type PropsType = {
   userAvatarData: Array<AvatarDataType>;
 };
 
-export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
+export function EditConversationAttributesModal({
   avatarColor,
   avatarPath: externalAvatarPath,
   conversationId,
@@ -59,7 +59,7 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
   replaceAvatar,
   saveAvatarToDisk,
   userAvatarData,
-}) => {
+}: PropsType): JSX.Element {
   const focusDescriptionRef = useRef<undefined | boolean>(
     initiallyFocusDescription
   );
@@ -242,4 +242,4 @@ export const EditConversationAttributesModal: FunctionComponent<PropsType> = ({
       {content}
     </Modal>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/GroupLinkManagement.stories.tsx b/ts/components/conversation/conversation-details/GroupLinkManagement.stories.tsx
index e6e9a22f8..6c34590e2 100644
--- a/ts/components/conversation/conversation-details/GroupLinkManagement.stories.tsx
+++ b/ts/components/conversation/conversation-details/GroupLinkManagement.stories.tsx
@@ -55,59 +55,59 @@ const createProps = (
   ),
 });
 
-export const OffAdmin = (): JSX.Element => {
+export function OffAdmin(): JSX.Element {
   const props = createProps(undefined, true);
 
   return <GroupLinkManagement {...props} />;
-};
+}
 
 OffAdmin.story = {
   name: 'Off (Admin)',
 };
 
-export const OnAdmin = (): JSX.Element => {
+export function OnAdmin(): JSX.Element {
   const props = createProps(
     getConversation('https://signal.group/1', AccessControlEnum.ANY),
     true
   );
 
   return <GroupLinkManagement {...props} />;
-};
+}
 
 OnAdmin.story = {
   name: 'On (Admin)',
 };
 
-export const OnAdminAdminApprovalNeeded = (): JSX.Element => {
+export function OnAdminAdminApprovalNeeded(): JSX.Element {
   const props = createProps(
     getConversation('https://signal.group/1', AccessControlEnum.ADMINISTRATOR),
     true
   );
 
   return <GroupLinkManagement {...props} />;
-};
+}
 
 OnAdminAdminApprovalNeeded.story = {
   name: 'On (Admin + Admin Approval Needed)',
 };
 
-export const OnNonAdmin = (): JSX.Element => {
+export function OnNonAdmin(): JSX.Element {
   const props = createProps(
     getConversation('https://signal.group/1', AccessControlEnum.ANY)
   );
 
   return <GroupLinkManagement {...props} />;
-};
+}
 
 OnNonAdmin.story = {
   name: 'On (Non-admin)',
 };
 
-export const OffNonAdminUserCannotGetHere = (): JSX.Element => {
+export function OffNonAdminUserCannotGetHere(): JSX.Element {
   const props = createProps(undefined, false);
 
   return <GroupLinkManagement {...props} />;
-};
+}
 
 OffNonAdminUserCannotGetHere.story = {
   name: 'Off (Non-admin) - user cannot get here',
diff --git a/ts/components/conversation/conversation-details/GroupLinkManagement.tsx b/ts/components/conversation/conversation-details/GroupLinkManagement.tsx
index 3b6b8bc18..48baa7ca3 100644
--- a/ts/components/conversation/conversation-details/GroupLinkManagement.tsx
+++ b/ts/components/conversation/conversation-details/GroupLinkManagement.tsx
@@ -34,14 +34,14 @@ export type PropsType = PropsDataType & {
   ) => unknown;
 };
 
-export const GroupLinkManagement: React.ComponentType<PropsType> = ({
+export function GroupLinkManagement({
   changeHasGroupLink,
   conversation,
   generateNewGroupLink,
   i18n,
   isAdmin,
   setAccessControlAddFromInviteLinkSetting,
-}) => {
+}: PropsType): JSX.Element {
   const groupLinkSelectId = useUniqueId();
   const approveSelectId = useUniqueId();
 
@@ -191,4 +191,4 @@ export const GroupLinkManagement: React.ComponentType<PropsType> = ({
       ) : null}
     </>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/GroupV2Permissions.stories.tsx b/ts/components/conversation/conversation-details/GroupV2Permissions.stories.tsx
index 29b918045..fbba2d9aa 100644
--- a/ts/components/conversation/conversation-details/GroupV2Permissions.stories.tsx
+++ b/ts/components/conversation/conversation-details/GroupV2Permissions.stories.tsx
@@ -40,50 +40,56 @@ const createProps = (): PropsType => ({
   setAnnouncementsOnly: action('setAnnouncementsOnly'),
 });
 
-export const Basic = (): JSX.Element => {
+export function Basic(): JSX.Element {
   const props = createProps();
 
   return <GroupV2Permissions {...props} />;
-};
+}
 
-export const NotAdmin = (): JSX.Element => (
-  <GroupV2Permissions
-    {...createProps()}
-    conversation={getDefaultConversation({
-      announcementsOnly: true,
-      areWeAdmin: false,
-    })}
-  />
-);
+export function NotAdmin(): JSX.Element {
+  return (
+    <GroupV2Permissions
+      {...createProps()}
+      conversation={getDefaultConversation({
+        announcementsOnly: true,
+        areWeAdmin: false,
+      })}
+    />
+  );
+}
 
 NotAdmin.story = {
   name: 'Not admin',
 };
 
-export const AdminButNotAnnouncementReady = (): JSX.Element => (
-  <GroupV2Permissions
-    {...createProps()}
-    conversation={getDefaultConversation({
-      announcementsOnlyReady: false,
-      areWeAdmin: true,
-    })}
-  />
-);
+export function AdminButNotAnnouncementReady(): JSX.Element {
+  return (
+    <GroupV2Permissions
+      {...createProps()}
+      conversation={getDefaultConversation({
+        announcementsOnlyReady: false,
+        areWeAdmin: true,
+      })}
+    />
+  );
+}
 
 AdminButNotAnnouncementReady.story = {
   name: 'Admin but not announcement ready',
 };
 
-export const AdminNotAnnouncementReadyButItWasOn = (): JSX.Element => (
-  <GroupV2Permissions
-    {...createProps()}
-    conversation={getDefaultConversation({
-      announcementsOnly: true,
-      announcementsOnlyReady: false,
-      areWeAdmin: true,
-    })}
-  />
-);
+export function AdminNotAnnouncementReadyButItWasOn(): JSX.Element {
+  return (
+    <GroupV2Permissions
+      {...createProps()}
+      conversation={getDefaultConversation({
+        announcementsOnly: true,
+        announcementsOnlyReady: false,
+        areWeAdmin: true,
+      })}
+    />
+  );
+}
 
 AdminNotAnnouncementReadyButItWasOn.story = {
   name: 'Admin, not announcement ready, but it was on',
diff --git a/ts/components/conversation/conversation-details/GroupV2Permissions.tsx b/ts/components/conversation/conversation-details/GroupV2Permissions.tsx
index d7f26f381..7113dcafb 100644
--- a/ts/components/conversation/conversation-details/GroupV2Permissions.tsx
+++ b/ts/components/conversation/conversation-details/GroupV2Permissions.tsx
@@ -21,13 +21,13 @@ export type PropsType = {
   setAnnouncementsOnly: (value: boolean) => void;
 };
 
-export const GroupV2Permissions = ({
+export function GroupV2Permissions({
   conversation,
   i18n,
   setAccessControlAttributesSetting,
   setAccessControlMembersSetting,
   setAnnouncementsOnly,
-}: PropsType): JSX.Element => {
+}: PropsType): JSX.Element {
   const addMembersSelectId = useUniqueId();
   const groupInfoSelectId = useUniqueId();
   const announcementSelectId = useUniqueId();
@@ -111,4 +111,4 @@ export const GroupV2Permissions = ({
       )}
     </PanelSection>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/PanelRow.stories.tsx b/ts/components/conversation/conversation-details/PanelRow.stories.tsx
index a73bf081e..f13e203ba 100644
--- a/ts/components/conversation/conversation-details/PanelRow.stories.tsx
+++ b/ts/components/conversation/conversation-details/PanelRow.stories.tsx
@@ -33,15 +33,15 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
     : undefined,
 });
 
-export const Basic = (): JSX.Element => {
+export function Basic(): JSX.Element {
   const props = createProps({
     label: 'this is a panel row',
   });
 
   return <PanelRow {...props} />;
-};
+}
 
-export const Simple = (): JSX.Element => {
+export function Simple(): JSX.Element {
   const props = createProps({
     label: 'this is a panel row',
     icon: 'with icon',
@@ -49,9 +49,9 @@ export const Simple = (): JSX.Element => {
   });
 
   return <PanelRow {...props} />;
-};
+}
 
-export const Full = (): JSX.Element => {
+export function Full(): JSX.Element {
   const props = createProps({
     label: 'this is a panel row',
     icon: 'with icon',
@@ -61,9 +61,9 @@ export const Full = (): JSX.Element => {
   });
 
   return <PanelRow {...props} />;
-};
+}
 
-export const Button = (): JSX.Element => {
+export function Button(): JSX.Element {
   const props = createProps({
     label: 'this is a panel row',
     icon: 'with icon',
@@ -72,4 +72,4 @@ export const Button = (): JSX.Element => {
   });
 
   return <PanelRow {...props} />;
-};
+}
diff --git a/ts/components/conversation/conversation-details/PanelRow.tsx b/ts/components/conversation/conversation-details/PanelRow.tsx
index 99d084b29..27aad58b9 100644
--- a/ts/components/conversation/conversation-details/PanelRow.tsx
+++ b/ts/components/conversation/conversation-details/PanelRow.tsx
@@ -20,7 +20,7 @@ export type Props = {
 const bem = bemGenerator('ConversationDetails-panel-row');
 
 export const PanelRow = React.forwardRef<HTMLButtonElement, Props>(
-  (
+  function PanelRowInner(
     {
       alwaysShowActions,
       className,
@@ -33,7 +33,7 @@ export const PanelRow = React.forwardRef<HTMLButtonElement, Props>(
       onClick,
     }: Props,
     ref: React.Ref<HTMLButtonElement>
-  ) => {
+  ) {
     const content = (
       <>
         {icon !== undefined ? <div className={bem('icon')}>{icon}</div> : null}
diff --git a/ts/components/conversation/conversation-details/PanelSection.stories.tsx b/ts/components/conversation/conversation-details/PanelSection.stories.tsx
index 0ae0828a0..437af8106 100644
--- a/ts/components/conversation/conversation-details/PanelSection.stories.tsx
+++ b/ts/components/conversation/conversation-details/PanelSection.stories.tsx
@@ -24,24 +24,24 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   ) : null,
 });
 
-export const Basic = (): JSX.Element => {
+export function Basic(): JSX.Element {
   const props = createProps({
     title: 'panel section header',
   });
 
   return <PanelSection {...props} />;
-};
+}
 
-export const Centered = (): JSX.Element => {
+export function Centered(): JSX.Element {
   const props = createProps({
     title: 'this is a panel row',
     centerTitle: true,
   });
 
   return <PanelSection {...props} />;
-};
+}
 
-export const WithActions = (): JSX.Element => {
+export function WithActions(): JSX.Element {
   const props = createProps({
     title: 'this is a panel row',
     actions: (
@@ -52,9 +52,9 @@ export const WithActions = (): JSX.Element => {
   });
 
   return <PanelSection {...props} />;
-};
+}
 
-export const WithContent = (): JSX.Element => {
+export function WithContent(): JSX.Element {
   const props = createProps({
     title: 'this is a panel row',
   });
@@ -67,4 +67,4 @@ export const WithContent = (): JSX.Element => {
       <PanelRow label="this is panel row four" />
     </PanelSection>
   );
-};
+}
diff --git a/ts/components/conversation/conversation-details/PanelSection.tsx b/ts/components/conversation/conversation-details/PanelSection.tsx
index a06e6a8c0..2a0cf4500 100644
--- a/ts/components/conversation/conversation-details/PanelSection.tsx
+++ b/ts/components/conversation/conversation-details/PanelSection.tsx
@@ -7,6 +7,7 @@ import { bemGenerator } from './util';
 
 export type Props = {
   actions?: React.ReactNode;
+  children?: React.ReactNode;
   borderless?: boolean;
   centerTitle?: boolean;
   title?: string;
@@ -15,20 +16,24 @@ export type Props = {
 const bem = bemGenerator('ConversationDetails-panel-section');
 const borderlessClass = bem('root', 'borderless');
 
-export const PanelSection: React.ComponentType<Props> = ({
+export function PanelSection({
   actions,
   borderless,
   centerTitle,
   children,
   title,
-}) => (
-  <div className={classNames(bem('root'), borderless ? borderlessClass : null)}>
-    {(title || actions) && (
-      <div className={bem('header', { center: centerTitle || false })}>
-        {title && <div className={bem('title')}>{title}</div>}
-        {actions && <div>{actions}</div>}
-      </div>
-    )}
-    <div>{children}</div>
-  </div>
-);
+}: Props): JSX.Element {
+  return (
+    <div
+      className={classNames(bem('root'), borderless ? borderlessClass : null)}
+    >
+      {(title || actions) && (
+        <div className={bem('header', { center: centerTitle || false })}>
+          {title && <div className={bem('title')}>{title}</div>}
+          {actions && <div>{actions}</div>}
+        </div>
+      )}
+      <div>{children}</div>
+    </div>
+  );
+}
diff --git a/ts/components/conversation/conversation-details/PendingInvites.stories.tsx b/ts/components/conversation/conversation-details/PendingInvites.stories.tsx
index ea18cf9b2..d11daea26 100644
--- a/ts/components/conversation/conversation-details/PendingInvites.stories.tsx
+++ b/ts/components/conversation/conversation-details/PendingInvites.stories.tsx
@@ -72,17 +72,17 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   ...overrideProps,
 });
 
-export const Basic = (): JSX.Element => {
+export function Basic(): JSX.Element {
   const props = useProps();
 
   return <PendingInvites {...props} />;
-};
+}
 
-export const WithBadges = (): JSX.Element => {
+export function WithBadges(): JSX.Element {
   const props = useProps({ getPreferredBadge: () => getFakeBadge() });
 
   return <PendingInvites {...props} />;
-};
+}
 
 WithBadges.story = {
   name: 'With badges',
diff --git a/ts/components/conversation/conversation-details/PendingInvites.tsx b/ts/components/conversation/conversation-details/PendingInvites.tsx
index 2ba54fef9..b5ab7b047 100644
--- a/ts/components/conversation/conversation-details/PendingInvites.tsx
+++ b/ts/components/conversation/conversation-details/PendingInvites.tsx
@@ -56,7 +56,7 @@ type StagedMembershipType = {
   membership: GroupV2PendingMembership | GroupV2RequestingMembership;
 };
 
-export const PendingInvites: React.ComponentType<PropsType> = ({
+export function PendingInvites({
   approvePendingMembership,
   conversation,
   getPreferredBadge,
@@ -66,7 +66,7 @@ export const PendingInvites: React.ComponentType<PropsType> = ({
   pendingApprovalMemberships,
   revokePendingMemberships,
   theme,
-}) => {
+}: PropsType): JSX.Element {
   if (!conversation || !ourUuid) {
     throw new Error(
       'PendingInvites rendered without a conversation or ourUuid'
@@ -160,7 +160,7 @@ export const PendingInvites: React.ComponentType<PropsType> = ({
       )}
     </div>
   );
-};
+}
 
 function MembershipActionConfirmation({
   approvePendingMembership,
diff --git a/ts/components/conversation/media-gallery/AttachmentSection.stories.tsx b/ts/components/conversation/media-gallery/AttachmentSection.stories.tsx
index 5474a5168..ee2d1d6d7 100644
--- a/ts/components/conversation/media-gallery/AttachmentSection.stories.tsx
+++ b/ts/components/conversation/media-gallery/AttachmentSection.stories.tsx
@@ -108,16 +108,16 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   mediaItems: overrideProps.mediaItems || [],
 });
 
-export const Documents = () => {
+export function Documents() {
   const mediaItems = createRandomDocuments(now, days(1));
   const props = createProps({ mediaItems, type: 'documents' });
 
   return <AttachmentSection {...props} />;
-};
+}
 
-export const Media = () => {
+export function Media() {
   const mediaItems = createRandomMedia(now, days(1));
   const props = createProps({ mediaItems, type: 'media' });
 
   return <AttachmentSection {...props} />;
-};
+}
diff --git a/ts/components/conversation/media-gallery/DocumentListItem.stories.tsx b/ts/components/conversation/media-gallery/DocumentListItem.stories.tsx
index 42aee18fe..6e16b96dd 100644
--- a/ts/components/conversation/media-gallery/DocumentListItem.stories.tsx
+++ b/ts/components/conversation/media-gallery/DocumentListItem.stories.tsx
@@ -11,17 +11,19 @@ export default {
   title: 'Components/Conversation/MediaGallery/DocumentListItem',
 };
 
-export const Single = (): JSX.Element => (
-  <DocumentListItem
-    timestamp={date('timestamp', new Date())}
-    fileName={text('fileName', 'meow.jpg')}
-    fileSize={number('fileSize', 1024 * 1000 * 2)}
-    shouldShowSeparator={boolean('shouldShowSeparator', false)}
-    onClick={action('onClick')}
-  />
-);
+export function Single(): JSX.Element {
+  return (
+    <DocumentListItem
+      timestamp={date('timestamp', new Date())}
+      fileName={text('fileName', 'meow.jpg')}
+      fileSize={number('fileSize', 1024 * 1000 * 2)}
+      shouldShowSeparator={boolean('shouldShowSeparator', false)}
+      onClick={action('onClick')}
+    />
+  );
+}
 
-export const Multiple = (): JSX.Element => {
+export function Multiple(): JSX.Element {
   const items = [
     {
       fileName: 'meow.jpg',
@@ -52,4 +54,4 @@ export const Multiple = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
diff --git a/ts/components/conversation/media-gallery/EmptyState.stories.tsx b/ts/components/conversation/media-gallery/EmptyState.stories.tsx
index ba2a6bf52..a02c7fe5d 100644
--- a/ts/components/conversation/media-gallery/EmptyState.stories.tsx
+++ b/ts/components/conversation/media-gallery/EmptyState.stories.tsx
@@ -9,6 +9,6 @@ export default {
   title: 'Components/Conversation/MediaGallery/EmptyState',
 };
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   return <EmptyState label={text('label', 'placeholder text')} />;
-};
+}
diff --git a/ts/components/conversation/media-gallery/EmptyState.tsx b/ts/components/conversation/media-gallery/EmptyState.tsx
index 4ec967017..e536e2256 100644
--- a/ts/components/conversation/media-gallery/EmptyState.tsx
+++ b/ts/components/conversation/media-gallery/EmptyState.tsx
@@ -7,6 +7,6 @@ type Props = {
   label: string;
 };
 
-export const EmptyState = ({ label }: Props): JSX.Element => (
-  <div className="module-empty-state">{label}</div>
-);
+export function EmptyState({ label }: Props): JSX.Element {
+  return <div className="module-empty-state">{label}</div>;
+}
diff --git a/ts/components/conversation/media-gallery/LoadingIndicator.tsx b/ts/components/conversation/media-gallery/LoadingIndicator.tsx
index 69a12ed79..c4e551b92 100644
--- a/ts/components/conversation/media-gallery/LoadingIndicator.tsx
+++ b/ts/components/conversation/media-gallery/LoadingIndicator.tsx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-export const LoadingIndicator = (): JSX.Element => {
+export function LoadingIndicator(): JSX.Element {
   return (
     <div className="loading-widget">
       <div className="container">
@@ -13,4 +13,4 @@ export const LoadingIndicator = (): JSX.Element => {
       </div>
     </div>
   );
-};
+}
diff --git a/ts/components/conversation/media-gallery/MediaGallery.stories.tsx b/ts/components/conversation/media-gallery/MediaGallery.stories.tsx
index e35e89407..f3ce1f782 100644
--- a/ts/components/conversation/media-gallery/MediaGallery.stories.tsx
+++ b/ts/components/conversation/media-gallery/MediaGallery.stories.tsx
@@ -30,39 +30,39 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   media: overrideProps.media || [],
 });
 
-export const Populated = (): JSX.Element => {
+export function Populated(): JSX.Element {
   const documents = createRandomDocuments(now, days(1)).slice(0, 1);
   const media = createPreparedMediaItems(createRandomMedia);
   const props = createProps({ documents, media });
 
   return <MediaGallery {...props} />;
-};
+}
 
-export const NoDocuments = (): JSX.Element => {
+export function NoDocuments(): JSX.Element {
   const media = createPreparedMediaItems(createRandomMedia);
   const props = createProps({ media });
 
   return <MediaGallery {...props} />;
-};
+}
 
-export const NoMedia = (): JSX.Element => {
+export function NoMedia(): JSX.Element {
   const documents = createPreparedMediaItems(createRandomDocuments);
   const props = createProps({ documents });
 
   return <MediaGallery {...props} />;
-};
+}
 
-export const OneEach = (): JSX.Element => {
+export function OneEach(): JSX.Element {
   const media = createRandomMedia(now, days(1)).slice(0, 1);
   const documents = createRandomDocuments(now, days(1)).slice(0, 1);
 
   const props = createProps({ documents, media });
 
   return <MediaGallery {...props} />;
-};
+}
 
-export const Empty = (): JSX.Element => {
+export function Empty(): JSX.Element {
   const props = createProps();
 
   return <MediaGallery {...props} />;
-};
+}
diff --git a/ts/components/conversation/media-gallery/MediaGallery.tsx b/ts/components/conversation/media-gallery/MediaGallery.tsx
index 1f287ee10..699aa919e 100644
--- a/ts/components/conversation/media-gallery/MediaGallery.tsx
+++ b/ts/components/conversation/media-gallery/MediaGallery.tsx
@@ -34,7 +34,7 @@ type TabSelectEvent = {
   type: 'media' | 'documents';
 };
 
-const Tab = ({
+function Tab({
   isSelected,
   label,
   onSelect,
@@ -44,7 +44,7 @@ const Tab = ({
   label: string;
   onSelect?: (event: TabSelectEvent) => void;
   type: 'media' | 'documents';
-}) => {
+}) {
   const handleClick = onSelect
     ? () => {
         onSelect({ type });
@@ -66,7 +66,7 @@ const Tab = ({
       {label}
     </div>
   );
-};
+}
 
 export class MediaGallery extends React.Component<Props, State> {
   public readonly focusRef: React.RefObject<HTMLDivElement> = React.createRef();
diff --git a/ts/components/conversation/media-gallery/MediaGridItem.stories.tsx b/ts/components/conversation/media-gallery/MediaGridItem.stories.tsx
index 916eb6ab4..11f66c3f6 100644
--- a/ts/components/conversation/media-gallery/MediaGridItem.stories.tsx
+++ b/ts/components/conversation/media-gallery/MediaGridItem.stories.tsx
@@ -50,7 +50,7 @@ const createMediaItem = (
   },
 });
 
-export const Image = (): JSX.Element => {
+export function Image(): JSX.Element {
   const mediaItem = createMediaItem({
     thumbnailObjectUrl: '/fixtures/kitten-1-64-64.jpg',
     contentType: stringToMIMEType('image/jpeg'),
@@ -61,9 +61,9 @@ export const Image = (): JSX.Element => {
   });
 
   return <MediaGridItem {...props} />;
-};
+}
 
-export const Video = (): JSX.Element => {
+export function Video(): JSX.Element {
   const mediaItem = createMediaItem({
     thumbnailObjectUrl: '/fixtures/kitten-2-64-64.jpg',
     contentType: stringToMIMEType('video/mp4'),
@@ -74,9 +74,9 @@ export const Video = (): JSX.Element => {
   });
 
   return <MediaGridItem {...props} />;
-};
+}
 
-export const MissingImage = (): JSX.Element => {
+export function MissingImage(): JSX.Element {
   const mediaItem = createMediaItem({
     contentType: stringToMIMEType('image/jpeg'),
   });
@@ -86,9 +86,9 @@ export const MissingImage = (): JSX.Element => {
   });
 
   return <MediaGridItem {...props} />;
-};
+}
 
-export const MissingVideo = (): JSX.Element => {
+export function MissingVideo(): JSX.Element {
   const mediaItem = createMediaItem({
     contentType: stringToMIMEType('video/mp4'),
   });
@@ -98,9 +98,9 @@ export const MissingVideo = (): JSX.Element => {
   });
 
   return <MediaGridItem {...props} />;
-};
+}
 
-export const BrokenImage = (): JSX.Element => {
+export function BrokenImage(): JSX.Element {
   const mediaItem = createMediaItem({
     thumbnailObjectUrl: '/missing-fixtures/nope.jpg',
     contentType: stringToMIMEType('image/jpeg'),
@@ -111,9 +111,9 @@ export const BrokenImage = (): JSX.Element => {
   });
 
   return <MediaGridItem {...props} />;
-};
+}
 
-export const BrokenVideo = (): JSX.Element => {
+export function BrokenVideo(): JSX.Element {
   const mediaItem = createMediaItem({
     thumbnailObjectUrl: '/missing-fixtures/nope.mp4',
     contentType: stringToMIMEType('video/mp4'),
@@ -124,9 +124,9 @@ export const BrokenVideo = (): JSX.Element => {
   });
 
   return <MediaGridItem {...props} />;
-};
+}
 
-export const OtherContentType = (): JSX.Element => {
+export function OtherContentType(): JSX.Element {
   const mediaItem = createMediaItem({
     contentType: stringToMIMEType('application/text'),
   });
@@ -136,7 +136,7 @@ export const OtherContentType = (): JSX.Element => {
   });
 
   return <MediaGridItem {...props} />;
-};
+}
 
 OtherContentType.story = {
   name: 'Other ContentType',
diff --git a/ts/components/conversationList/GroupListItem.tsx b/ts/components/conversationList/GroupListItem.tsx
index bf69832b3..eaac631fe 100644
--- a/ts/components/conversationList/GroupListItem.tsx
+++ b/ts/components/conversationList/GroupListItem.tsx
@@ -31,11 +31,11 @@ export type Props = {
   group: GroupListItemConversationType;
 };
 
-export const GroupListItem = ({
+export function GroupListItem({
   group,
   i18n,
   onSelectGroup,
-}: Props): JSX.Element => {
+}: Props): JSX.Element {
   let messageText: string;
   switch (group.disabledReason) {
     case DisabledReason.AlreadyMember:
@@ -66,4 +66,4 @@ export const GroupListItem = ({
       messageText={messageText}
     />
   );
-};
+}
diff --git a/ts/components/conversationList/MessageBodyHighlight.stories.tsx b/ts/components/conversationList/MessageBodyHighlight.stories.tsx
index 11b854913..883f0f9bd 100644
--- a/ts/components/conversationList/MessageBodyHighlight.stories.tsx
+++ b/ts/components/conversationList/MessageBodyHighlight.stories.tsx
@@ -21,31 +21,31 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   text: text('text', overrideProps.text || ''),
 });
 
-export const Basic = (): JSX.Element => {
+export function Basic(): JSX.Element {
   const props = createProps({
     text: 'This is before <<left>>Inside<<right>> This is after.',
   });
 
   return <MessageBodyHighlight {...props} />;
-};
+}
 
-export const NoReplacement = (): JSX.Element => {
+export function NoReplacement(): JSX.Element {
   const props = createProps({
     text: 'All\nplain\ntext 🔥 http://somewhere.com',
   });
 
   return <MessageBodyHighlight {...props} />;
-};
+}
 
-export const TwoReplacements = (): JSX.Element => {
+export function TwoReplacements(): JSX.Element {
   const props = createProps({
     text: 'Begin <<left>>Inside #1<<right>> This is between the two <<left>>Inside #2<<right>> End.',
   });
 
   return <MessageBodyHighlight {...props} />;
-};
+}
 
-export const TwoReplacementsWithAnMention = (): JSX.Element => {
+export function TwoReplacementsWithAnMention(): JSX.Element {
   const props = createProps({
     bodyRanges: [
       {
@@ -60,28 +60,28 @@ export const TwoReplacementsWithAnMention = (): JSX.Element => {
   });
 
   return <MessageBodyHighlight {...props} />;
-};
+}
 
 TwoReplacementsWithAnMention.story = {
   name: 'Two Replacements with an @mention',
 };
 
-export const EmojiNewlinesUrLs = (): JSX.Element => {
+export function EmojiNewlinesUrLs(): JSX.Element {
   const props = createProps({
     text: '\nhttp://somewhere.com\n\n🔥 Before -- <<left>>A 🔥 inside<<right>> -- After 🔥',
   });
 
   return <MessageBodyHighlight {...props} />;
-};
+}
 
 EmojiNewlinesUrLs.story = {
   name: 'Emoji + Newlines + URLs',
 };
 
-export const NoJumbomoji = (): JSX.Element => {
+export function NoJumbomoji(): JSX.Element {
   const props = createProps({
     text: '🔥',
   });
 
   return <MessageBodyHighlight {...props} />;
-};
+}
diff --git a/ts/components/conversationList/MessageSearchResult.stories.tsx b/ts/components/conversationList/MessageSearchResult.stories.tsx
index e3b116835..9638f910e 100644
--- a/ts/components/conversationList/MessageSearchResult.stories.tsx
+++ b/ts/components/conversationList/MessageSearchResult.stories.tsx
@@ -61,16 +61,16 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   theme: React.useContext(StorybookThemeContext),
 });
 
-export const Default = (): JSX.Element => {
+export function Default(): JSX.Element {
   const props = useProps({
     from: someone,
     to: me,
   });
 
   return <MessageSearchResult {...props} />;
-};
+}
 
-export const SenderHasABadge = (): JSX.Element => {
+export function SenderHasABadge(): JSX.Element {
   const props = useProps({
     from: { ...someone, badges: [{ id: 'sender badge' }] },
     to: me,
@@ -84,13 +84,13 @@ export const SenderHasABadge = (): JSX.Element => {
   });
 
   return <MessageSearchResult {...props} />;
-};
+}
 
 SenderHasABadge.story = {
   name: 'Sender has a badge',
 };
 
-export const Selected = (): JSX.Element => {
+export function Selected(): JSX.Element {
   const props = useProps({
     from: someone,
     to: me,
@@ -98,18 +98,18 @@ export const Selected = (): JSX.Element => {
   });
 
   return <MessageSearchResult {...props} />;
-};
+}
 
-export const FromYou = (): JSX.Element => {
+export function FromYou(): JSX.Element {
   const props = useProps({
     from: me,
     to: someone,
   });
 
   return <MessageSearchResult {...props} />;
-};
+}
 
-export const SearchingInConversation = (): JSX.Element => {
+export function SearchingInConversation(): JSX.Element {
   const props = useProps({
     from: me,
     to: someone,
@@ -117,52 +117,52 @@ export const SearchingInConversation = (): JSX.Element => {
   });
 
   return <MessageSearchResult {...props} />;
-};
+}
 
 SearchingInConversation.story = {
   name: 'Searching in Conversation',
 };
 
-export const FromYouToYourself = (): JSX.Element => {
+export function FromYouToYourself(): JSX.Element {
   const props = useProps({
     from: me,
     to: me,
   });
 
   return <MessageSearchResult {...props} />;
-};
+}
 
 FromYouToYourself.story = {
   name: 'From You to Yourself',
 };
 
-export const FromYouToGroup = (): JSX.Element => {
+export function FromYouToGroup(): JSX.Element {
   const props = useProps({
     from: me,
     to: group,
   });
 
   return <MessageSearchResult {...props} />;
-};
+}
 
 FromYouToGroup.story = {
   name: 'From You to Group',
 };
 
-export const FromSomeoneToGroup = (): JSX.Element => {
+export function FromSomeoneToGroup(): JSX.Element {
   const props = useProps({
     from: someone,
     to: group,
   });
 
   return <MessageSearchResult {...props} />;
-};
+}
 
 FromSomeoneToGroup.story = {
   name: 'From Someone to Group',
 };
 
-export const LongSearchResult = (): JSX.Element => {
+export function LongSearchResult(): JSX.Element {
   const snippets = [
     'This is a really <<left>>detail<<right>>ed long line which will wrap and only be cut off after it gets to three lines. So maybe this will make it in as well?',
     "Okay, here are the <<left>>detail<<right>>s:\n\n1355 Ridge Way\nCode: 234\n\nI'm excited!",
@@ -186,19 +186,19 @@ export const LongSearchResult = (): JSX.Element => {
       <MessageSearchResult {...props2} />
     </>
   );
-};
+}
 
-export const EmptyShouldBeInvalid = (): JSX.Element => {
+export function EmptyShouldBeInvalid(): JSX.Element {
   const props = useProps();
 
   return <MessageSearchResult {...props} />;
-};
+}
 
 EmptyShouldBeInvalid.story = {
   name: 'Empty (should be invalid)',
 };
 
-export const Mention = (): JSX.Element => {
+export function Mention(): JSX.Element {
   const props = useProps({
     body: 'moss banana twine sound lake zoo brain count vacuum work stairs try power forget hair dry diary years no results \uFFFC elephant sorry umbrella potato igloo kangaroo home Georgia bayonet vector orange forge diary zebra turtle rise front \uFFFC',
     bodyRanges: [
@@ -224,13 +224,13 @@ export const Mention = (): JSX.Element => {
   });
 
   return <MessageSearchResult {...props} />;
-};
+}
 
 Mention.story = {
   name: '@mention',
 };
 
-export const MentionRegexp = (): JSX.Element => {
+export function MentionRegexp(): JSX.Element {
   const props = useProps({
     body: '\uFFFC This is a (long) /text/ ^$ that is ... specially **crafted** to (test) our regexp escaping mechanism! Making sure that the code we write works in all sorts of scenarios',
     bodyRanges: [
@@ -249,13 +249,13 @@ export const MentionRegexp = (): JSX.Element => {
   });
 
   return <MessageSearchResult {...props} />;
-};
+}
 
 MentionRegexp.story = {
   name: '@mention regexp',
 };
 
-export const MentionNoMatches = (): JSX.Element => {
+export function MentionNoMatches(): JSX.Element {
   const props = useProps({
     body: '\uFFFC hello',
     bodyRanges: [
@@ -273,7 +273,7 @@ export const MentionNoMatches = (): JSX.Element => {
   });
 
   return <MessageSearchResult {...props} />;
-};
+}
 
 MentionNoMatches.story = {
   name: '@mention no-matches',
@@ -311,7 +311,7 @@ _MentionNoMatches.story = {
   name: '@mention no-matches',
 };
 
-export const DoubleMention = (): JSX.Element => {
+export function DoubleMention(): JSX.Element {
   const props = useProps({
     body: 'Hey \uFFFC \uFFFC test',
     bodyRanges: [
@@ -336,7 +336,7 @@ export const DoubleMention = (): JSX.Element => {
   });
 
   return <MessageSearchResult {...props} />;
-};
+}
 
 DoubleMention.story = {
   name: 'Double @mention',
diff --git a/ts/components/conversationList/SearchResultsLoadingFakeHeader.tsx b/ts/components/conversationList/SearchResultsLoadingFakeHeader.tsx
index 1492cd952..ae766422b 100644
--- a/ts/components/conversationList/SearchResultsLoadingFakeHeader.tsx
+++ b/ts/components/conversationList/SearchResultsLoadingFakeHeader.tsx
@@ -1,11 +1,10 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React from 'react';
 
 type PropsType = Record<string, never>;
 
-export const SearchResultsLoadingFakeHeader: FunctionComponent<
-  PropsType
-> = () => <div className="module-SearchResultsLoadingFakeHeader" />;
+export function SearchResultsLoadingFakeHeader(_: PropsType): JSX.Element {
+  return <div className="module-SearchResultsLoadingFakeHeader" />;
+}
diff --git a/ts/components/conversationList/SearchResultsLoadingFakeRow.tsx b/ts/components/conversationList/SearchResultsLoadingFakeRow.tsx
index 4bc96ee82..733d361f6 100644
--- a/ts/components/conversationList/SearchResultsLoadingFakeRow.tsx
+++ b/ts/components/conversationList/SearchResultsLoadingFakeRow.tsx
@@ -1,18 +1,19 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React from 'react';
 
 type PropsType = Record<string, never>;
 
-export const SearchResultsLoadingFakeRow: FunctionComponent<PropsType> = () => (
-  <div className="module-SearchResultsLoadingFakeRow">
-    <div className="module-SearchResultsLoadingFakeRow__avatar" />
-    <div className="module-SearchResultsLoadingFakeRow__content">
-      <div className="module-SearchResultsLoadingFakeRow__content__line" />
-      <div className="module-SearchResultsLoadingFakeRow__content__line" />
-      <div className="module-SearchResultsLoadingFakeRow__content__line" />
+export function SearchResultsLoadingFakeRow(_: PropsType): JSX.Element {
+  return (
+    <div className="module-SearchResultsLoadingFakeRow">
+      <div className="module-SearchResultsLoadingFakeRow__avatar" />
+      <div className="module-SearchResultsLoadingFakeRow__content">
+        <div className="module-SearchResultsLoadingFakeRow__content__line" />
+        <div className="module-SearchResultsLoadingFakeRow__content__line" />
+        <div className="module-SearchResultsLoadingFakeRow__content__line" />
+      </div>
     </div>
-  </div>
-);
+  );
+}
diff --git a/ts/components/conversationList/UsernameSearchResultListItem.tsx b/ts/components/conversationList/UsernameSearchResultListItem.tsx
index cf9cc5de5..ff72cbc0b 100644
--- a/ts/components/conversationList/UsernameSearchResultListItem.tsx
+++ b/ts/components/conversationList/UsernameSearchResultListItem.tsx
@@ -1,7 +1,6 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React, { useCallback } from 'react';
 
 import { BaseConversationListItem } from './BaseConversationListItem';
@@ -22,7 +21,7 @@ type PropsHousekeeping = {
 
 export type Props = PropsData & PropsHousekeeping;
 
-export const UsernameSearchResultListItem: FunctionComponent<Props> = ({
+export function UsernameSearchResultListItem({
   i18n,
   isFetchingUsername,
   lookupConversationWithoutUuid,
@@ -30,7 +29,7 @@ export const UsernameSearchResultListItem: FunctionComponent<Props> = ({
   showUserNotFoundModal,
   setIsFetchingUUID,
   showConversation,
-}) => {
+}: Props): JSX.Element {
   const usernameText = i18n('at-username', { username });
   const boundOnClick = useCallback(async () => {
     if (isFetchingUsername) {
@@ -71,4 +70,4 @@ export const UsernameSearchResultListItem: FunctionComponent<Props> = ({
       title={usernameText}
     />
   );
-};
+}
diff --git a/ts/components/emoji/Emoji.stories.tsx b/ts/components/emoji/Emoji.stories.tsx
index f69c5a931..c61d25229 100644
--- a/ts/components/emoji/Emoji.stories.tsx
+++ b/ts/components/emoji/Emoji.stories.tsx
@@ -27,7 +27,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   ),
 });
 
-export const Sizes = (): JSX.Element => {
+export function Sizes(): JSX.Element {
   const props = createProps({
     shortName: 'grinning_face_with_star_eyes',
   });
@@ -39,9 +39,9 @@ export const Sizes = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
 
-export const SkinTones = (): JSX.Element => {
+export function SkinTones(): JSX.Element {
   const props = createProps({
     shortName: 'raised_back_of_hand',
   });
@@ -53,12 +53,12 @@ export const SkinTones = (): JSX.Element => {
       ))}
     </>
   );
-};
+}
 
-export const FromEmoji = (): JSX.Element => {
+export function FromEmoji(): JSX.Element {
   const props = createProps({
     emoji: '😂',
   });
 
   return <Emoji {...props} />;
-};
+}
diff --git a/ts/components/emoji/EmojiButton.stories.tsx b/ts/components/emoji/EmojiButton.stories.tsx
index 496242750..7d656e510 100644
--- a/ts/components/emoji/EmojiButton.stories.tsx
+++ b/ts/components/emoji/EmojiButton.stories.tsx
@@ -16,7 +16,7 @@ export default {
   title: 'Components/Emoji/EmojiButton',
 };
 
-export const Base = (): JSX.Element => {
+export function Base(): JSX.Element {
   return (
     <div
       style={{
@@ -68,4 +68,4 @@ export const Base = (): JSX.Element => {
       />
     </div>
   );
-};
+}
diff --git a/ts/components/emoji/EmojiButton.tsx b/ts/components/emoji/EmojiButton.tsx
index 926439b97..f861a5371 100644
--- a/ts/components/emoji/EmojiButton.tsx
+++ b/ts/components/emoji/EmojiButton.tsx
@@ -40,162 +40,158 @@ export type EmojiButtonAPI = Readonly<{
   close: () => void;
 }>;
 
-export const EmojiButton = React.memo(
-  ({
-    className,
-    closeOnPick,
-    emoji,
-    emojiButtonApi,
-    i18n,
-    doSend,
-    onClose,
-    onPickEmoji,
-    skinTone,
-    onSetSkinTone,
-    recentEmojis,
-    variant = EmojiButtonVariant.Normal,
-  }: Props) => {
-    const [open, setOpen] = React.useState(false);
-    const [popperRoot, setPopperRoot] = React.useState<HTMLElement | null>(
-      null
-    );
-    const buttonRef = React.useRef<HTMLButtonElement | null>(null);
-    const refMerger = useRefMerger();
+export const EmojiButton = React.memo(function EmojiButtonInner({
+  className,
+  closeOnPick,
+  emoji,
+  emojiButtonApi,
+  i18n,
+  doSend,
+  onClose,
+  onPickEmoji,
+  skinTone,
+  onSetSkinTone,
+  recentEmojis,
+  variant = EmojiButtonVariant.Normal,
+}: Props) {
+  const [open, setOpen] = React.useState(false);
+  const [popperRoot, setPopperRoot] = React.useState<HTMLElement | null>(null);
+  const buttonRef = React.useRef<HTMLButtonElement | null>(null);
+  const refMerger = useRefMerger();
 
-    const handleClickButton = React.useCallback(() => {
-      if (popperRoot) {
-        setOpen(false);
-      } else {
-        setOpen(true);
-      }
-    }, [popperRoot, setOpen]);
-
-    const handleClose = React.useCallback(() => {
+  const handleClickButton = React.useCallback(() => {
+    if (popperRoot) {
       setOpen(false);
-      if (onClose) {
-        onClose();
-      }
-    }, [setOpen, onClose]);
-
-    const api = React.useMemo(
-      () => ({
-        close: () => setOpen(false),
-      }),
-      [setOpen]
-    );
-
-    if (emojiButtonApi) {
-      // Using a React.MutableRefObject, so we need to reassign this prop.
-      // eslint-disable-next-line no-param-reassign
-      emojiButtonApi.current = api;
+    } else {
+      setOpen(true);
     }
+  }, [popperRoot, setOpen]);
 
-    // Create popper root and handle outside clicks
-    React.useEffect(() => {
-      if (open) {
-        const root = document.createElement('div');
-        setPopperRoot(root);
-        document.body.appendChild(root);
+  const handleClose = React.useCallback(() => {
+    setOpen(false);
+    if (onClose) {
+      onClose();
+    }
+  }, [setOpen, onClose]);
 
-        return () => {
-          document.body.removeChild(root);
-          setPopperRoot(null);
-        };
-      }
+  const api = React.useMemo(
+    () => ({
+      close: () => setOpen(false),
+    }),
+    [setOpen]
+  );
 
-      return noop;
-    }, [open, setOpen, setPopperRoot, handleClose]);
+  if (emojiButtonApi) {
+    // Using a React.MutableRefObject, so we need to reassign this prop.
+    // eslint-disable-next-line no-param-reassign
+    emojiButtonApi.current = api;
+  }
 
-    React.useEffect(() => {
-      if (!open) {
-        return noop;
-      }
-
-      return handleOutsideClick(
-        () => {
-          handleClose();
-          return true;
-        },
-        { containerElements: [popperRoot, buttonRef], name: 'EmojiButton' }
-      );
-    }, [open, handleClose, popperRoot]);
-
-    // Install keyboard shortcut to open emoji picker
-    React.useEffect(() => {
-      const handleKeydown = (event: KeyboardEvent) => {
-        const { ctrlKey, metaKey, shiftKey } = event;
-        const commandKey = get(window, 'platform') === 'darwin' && metaKey;
-        const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;
-        const commandOrCtrl = commandKey || controlKey;
-        const key = KeyboardLayout.lookup(event);
-
-        // We don't want to open up if the conversation has any panels open
-        const panels = document.querySelectorAll('.conversation .panel');
-        if (panels && panels.length > 1) {
-          return;
-        }
-
-        if (commandOrCtrl && shiftKey && (key === 'j' || key === 'J')) {
-          event.stopPropagation();
-          event.preventDefault();
-
-          setOpen(!open);
-        }
-      };
-      document.addEventListener('keydown', handleKeydown);
+  // Create popper root and handle outside clicks
+  React.useEffect(() => {
+    if (open) {
+      const root = document.createElement('div');
+      setPopperRoot(root);
+      document.body.appendChild(root);
 
       return () => {
-        document.removeEventListener('keydown', handleKeydown);
+        document.body.removeChild(root);
+        setPopperRoot(null);
       };
-    }, [open, setOpen]);
+    }
 
-    return (
-      <Manager>
-        <Reference>
-          {({ ref }) => (
-            <button
-              type="button"
-              ref={refMerger(buttonRef, ref)}
-              onClick={handleClickButton}
-              className={classNames(className, {
-                'module-emoji-button__button': true,
-                'module-emoji-button__button--active': open,
-                'module-emoji-button__button--has-emoji': Boolean(emoji),
-                'module-emoji-button__button--profile-editor':
-                  variant === EmojiButtonVariant.ProfileEditor,
-              })}
-              aria-label={i18n('EmojiButton__label')}
-            >
-              {emoji && <Emoji emoji={emoji} size={24} />}
-            </button>
-          )}
-        </Reference>
-        {open && popperRoot
-          ? createPortal(
-              <Popper placement="top-start" strategy="fixed">
-                {({ ref, style }) => (
-                  <EmojiPicker
-                    ref={ref}
-                    i18n={i18n}
-                    style={style}
-                    onPickEmoji={ev => {
-                      onPickEmoji(ev);
-                      if (closeOnPick) {
-                        handleClose();
-                      }
-                    }}
-                    doSend={doSend}
-                    onClose={handleClose}
-                    skinTone={skinTone}
-                    onSetSkinTone={onSetSkinTone}
-                    recentEmojis={recentEmojis}
-                  />
-                )}
-              </Popper>,
-              popperRoot
-            )
-          : null}
-      </Manager>
+    return noop;
+  }, [open, setOpen, setPopperRoot, handleClose]);
+
+  React.useEffect(() => {
+    if (!open) {
+      return noop;
+    }
+
+    return handleOutsideClick(
+      () => {
+        handleClose();
+        return true;
+      },
+      { containerElements: [popperRoot, buttonRef], name: 'EmojiButton' }
     );
-  }
-);
+  }, [open, handleClose, popperRoot]);
+
+  // Install keyboard shortcut to open emoji picker
+  React.useEffect(() => {
+    const handleKeydown = (event: KeyboardEvent) => {
+      const { ctrlKey, metaKey, shiftKey } = event;
+      const commandKey = get(window, 'platform') === 'darwin' && metaKey;
+      const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;
+      const commandOrCtrl = commandKey || controlKey;
+      const key = KeyboardLayout.lookup(event);
+
+      // We don't want to open up if the conversation has any panels open
+      const panels = document.querySelectorAll('.conversation .panel');
+      if (panels && panels.length > 1) {
+        return;
+      }
+
+      if (commandOrCtrl && shiftKey && (key === 'j' || key === 'J')) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        setOpen(!open);
+      }
+    };
+    document.addEventListener('keydown', handleKeydown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeydown);
+    };
+  }, [open, setOpen]);
+
+  return (
+    <Manager>
+      <Reference>
+        {({ ref }) => (
+          <button
+            type="button"
+            ref={refMerger(buttonRef, ref)}
+            onClick={handleClickButton}
+            className={classNames(className, {
+              'module-emoji-button__button': true,
+              'module-emoji-button__button--active': open,
+              'module-emoji-button__button--has-emoji': Boolean(emoji),
+              'module-emoji-button__button--profile-editor':
+                variant === EmojiButtonVariant.ProfileEditor,
+            })}
+            aria-label={i18n('EmojiButton__label')}
+          >
+            {emoji && <Emoji emoji={emoji} size={24} />}
+          </button>
+        )}
+      </Reference>
+      {open && popperRoot
+        ? createPortal(
+            <Popper placement="top-start" strategy="fixed">
+              {({ ref, style }) => (
+                <EmojiPicker
+                  ref={ref}
+                  i18n={i18n}
+                  style={style}
+                  onPickEmoji={ev => {
+                    onPickEmoji(ev);
+                    if (closeOnPick) {
+                      handleClose();
+                    }
+                  }}
+                  doSend={doSend}
+                  onClose={handleClose}
+                  skinTone={skinTone}
+                  onSetSkinTone={onSetSkinTone}
+                  recentEmojis={recentEmojis}
+                />
+              )}
+            </Popper>,
+            popperRoot
+          )
+        : null}
+    </Manager>
+  );
+});
diff --git a/ts/components/emoji/EmojiPicker.stories.tsx b/ts/components/emoji/EmojiPicker.stories.tsx
index 6901cb533..7f7efc1ee 100644
--- a/ts/components/emoji/EmojiPicker.stories.tsx
+++ b/ts/components/emoji/EmojiPicker.stories.tsx
@@ -16,7 +16,7 @@ export default {
   title: 'Components/Emoji/EmojiPicker',
 };
 
-export const Base = (): JSX.Element => {
+export function Base(): JSX.Element {
   return (
     <EmojiPicker
       i18n={i18n}
@@ -60,9 +60,9 @@ export const Base = (): JSX.Element => {
       ]}
     />
   );
-};
+}
 
-export const NoRecents = (): JSX.Element => {
+export function NoRecents(): JSX.Element {
   return (
     <EmojiPicker
       i18n={i18n}
@@ -73,9 +73,9 @@ export const NoRecents = (): JSX.Element => {
       recentEmojis={[]}
     />
   );
-};
+}
 
-export const WithSettingsButton = (): JSX.Element => {
+export function WithSettingsButton(): JSX.Element {
   return (
     <EmojiPicker
       i18n={i18n}
@@ -87,7 +87,7 @@ export const WithSettingsButton = (): JSX.Element => {
       recentEmojis={[]}
     />
   );
-};
+}
 
 WithSettingsButton.story = {
   name: 'With settings button',
diff --git a/ts/components/installScreen/InstallScreenChoosingDeviceNameStep.stories.tsx b/ts/components/installScreen/InstallScreenChoosingDeviceNameStep.stories.tsx
index c6af952db..72d46649d 100644
--- a/ts/components/installScreen/InstallScreenChoosingDeviceNameStep.stories.tsx
+++ b/ts/components/installScreen/InstallScreenChoosingDeviceNameStep.stories.tsx
@@ -16,19 +16,19 @@ export default {
   title: 'Components/InstallScreen/InstallScreenChoosingDeviceNameStep',
 };
 
-export const Default = (): JSX.Element => {
-  const Wrapper = () => {
-    const [deviceName, setDeviceName] = useState<string>('Default value');
+function Wrapper() {
+  const [deviceName, setDeviceName] = useState<string>('Default value');
 
-    return (
-      <InstallScreenChoosingDeviceNameStep
-        i18n={i18n}
-        deviceName={deviceName}
-        setDeviceName={setDeviceName}
-        onSubmit={action('onSubmit')}
-      />
-    );
-  };
+  return (
+    <InstallScreenChoosingDeviceNameStep
+      i18n={i18n}
+      deviceName={deviceName}
+      setDeviceName={setDeviceName}
+      onSubmit={action('onSubmit')}
+    />
+  );
+}
 
+export function Default(): JSX.Element {
   return <Wrapper />;
-};
+}
diff --git a/ts/components/installScreen/InstallScreenLinkInProgress.stories.tsx b/ts/components/installScreen/InstallScreenLinkInProgress.stories.tsx
index ff488882e..56f94957a 100644
--- a/ts/components/installScreen/InstallScreenLinkInProgress.stories.tsx
+++ b/ts/components/installScreen/InstallScreenLinkInProgress.stories.tsx
@@ -14,6 +14,6 @@ export default {
   title: 'Components/InstallScreen/InstallScreenLinkInProgressStep',
 };
 
-export const Default = (): JSX.Element => (
-  <InstallScreenLinkInProgressStep i18n={i18n} />
-);
+export function Default(): JSX.Element {
+  return <InstallScreenLinkInProgressStep i18n={i18n} />;
+}
diff --git a/ts/components/installScreen/InstallScreenLinkInProgressStep.tsx b/ts/components/installScreen/InstallScreenLinkInProgressStep.tsx
index 62c0c7c9c..47a541e8d 100644
--- a/ts/components/installScreen/InstallScreenLinkInProgressStep.tsx
+++ b/ts/components/installScreen/InstallScreenLinkInProgressStep.tsx
@@ -10,16 +10,18 @@ import { Spinner } from '../Spinner';
 import { TitlebarDragArea } from '../TitlebarDragArea';
 import { InstallScreenSignalLogo } from './InstallScreenSignalLogo';
 
-export const InstallScreenLinkInProgressStep = ({
+export function InstallScreenLinkInProgressStep({
   i18n,
-}: Readonly<{ i18n: LocalizerType }>): ReactElement => (
-  <div className="module-InstallScreenLinkInProgressStep">
-    <TitlebarDragArea />
+}: Readonly<{ i18n: LocalizerType }>): ReactElement {
+  return (
+    <div className="module-InstallScreenLinkInProgressStep">
+      <TitlebarDragArea />
 
-    <InstallScreenSignalLogo />
+      <InstallScreenSignalLogo />
 
-    <Spinner size="50px" svgSize="normal" />
-    <h1>{i18n('initialSync')}</h1>
-    <h2>{i18n('initialSync__subtitle')}</h2>
-  </div>
-);
+      <Spinner size="50px" svgSize="normal" />
+      <h1>{i18n('initialSync')}</h1>
+      <h2>{i18n('initialSync__subtitle')}</h2>
+    </div>
+  );
+}
diff --git a/ts/components/installScreen/InstallScreenQrCodeNotScannedStep.stories.tsx b/ts/components/installScreen/InstallScreenQrCodeNotScannedStep.stories.tsx
index dbaec3881..656086049 100644
--- a/ts/components/installScreen/InstallScreenQrCodeNotScannedStep.stories.tsx
+++ b/ts/components/installScreen/InstallScreenQrCodeNotScannedStep.stories.tsx
@@ -16,7 +16,7 @@ export default {
   title: 'Components/InstallScreen/InstallScreenQrCodeNotScannedStep',
 };
 
-const Simulation = ({ finalResult }: { finalResult: Loadable<string> }) => {
+function Simulation({ finalResult }: { finalResult: Loadable<string> }) {
   const [provisioningUrl, setProvisioningUrl] = useState<Loadable<string>>({
     loadingState: LoadingState.Loading,
   });
@@ -36,72 +36,82 @@ const Simulation = ({ finalResult }: { finalResult: Loadable<string> }) => {
       provisioningUrl={provisioningUrl}
     />
   );
-};
+}
 
-export const QrCodeLoading = (): JSX.Element => (
-  <InstallScreenQrCodeNotScannedStep
-    i18n={i18n}
-    provisioningUrl={{
-      loadingState: LoadingState.Loading,
-    }}
-  />
-);
+export function QrCodeLoading(): JSX.Element {
+  return (
+    <InstallScreenQrCodeNotScannedStep
+      i18n={i18n}
+      provisioningUrl={{
+        loadingState: LoadingState.Loading,
+      }}
+    />
+  );
+}
 
 QrCodeLoading.story = {
   name: 'QR code loading',
 };
 
-export const QrCodeFailedToLoad = (): JSX.Element => (
-  <InstallScreenQrCodeNotScannedStep
-    i18n={i18n}
-    provisioningUrl={{
-      loadingState: LoadingState.LoadFailed,
-      error: new Error('uh oh'),
-    }}
-  />
-);
+export function QrCodeFailedToLoad(): JSX.Element {
+  return (
+    <InstallScreenQrCodeNotScannedStep
+      i18n={i18n}
+      provisioningUrl={{
+        loadingState: LoadingState.LoadFailed,
+        error: new Error('uh oh'),
+      }}
+    />
+  );
+}
 
 QrCodeFailedToLoad.story = {
   name: 'QR code failed to load',
 };
 
-export const QrCodeLoaded = (): JSX.Element => (
-  <InstallScreenQrCodeNotScannedStep
-    i18n={i18n}
-    provisioningUrl={{
-      loadingState: LoadingState.Loaded,
-      value:
-        'https://example.com/fake-signal-link?uuid=56cdd548-e595-4962-9a27-3f1e8210a959&pub_key=SW4gdGhlIHZhc3QsIGRlZXAgZm9yZXN0IG9mIEh5cnVsZS4uLg%3D%3D',
-    }}
-  />
-);
+export function QrCodeLoaded(): JSX.Element {
+  return (
+    <InstallScreenQrCodeNotScannedStep
+      i18n={i18n}
+      provisioningUrl={{
+        loadingState: LoadingState.Loaded,
+        value:
+          'https://example.com/fake-signal-link?uuid=56cdd548-e595-4962-9a27-3f1e8210a959&pub_key=SW4gdGhlIHZhc3QsIGRlZXAgZm9yZXN0IG9mIEh5cnVsZS4uLg%3D%3D',
+      }}
+    />
+  );
+}
 
 QrCodeLoaded.story = {
   name: 'QR code loaded',
 };
 
-export const SimulatedLoading = (): JSX.Element => (
-  <Simulation
-    finalResult={{
-      loadingState: LoadingState.Loaded,
-      value:
-        'https://example.com/fake-signal-link?uuid=56cdd548-e595-4962-9a27-3f1e8210a959&pub_key=SW4gdGhlIHZhc3QsIGRlZXAgZm9yZXN0IG9mIEh5cnVsZS4uLg%3D%3D',
-    }}
-  />
-);
+export function SimulatedLoading(): JSX.Element {
+  return (
+    <Simulation
+      finalResult={{
+        loadingState: LoadingState.Loaded,
+        value:
+          'https://example.com/fake-signal-link?uuid=56cdd548-e595-4962-9a27-3f1e8210a959&pub_key=SW4gdGhlIHZhc3QsIGRlZXAgZm9yZXN0IG9mIEh5cnVsZS4uLg%3D%3D',
+      }}
+    />
+  );
+}
 
 SimulatedLoading.story = {
   name: 'Simulated loading',
 };
 
-export const SimulatedFailure = (): JSX.Element => (
-  <Simulation
-    finalResult={{
-      loadingState: LoadingState.LoadFailed,
-      error: new Error('uh oh'),
-    }}
-  />
-);
+export function SimulatedFailure(): JSX.Element {
+  return (
+    <Simulation
+      finalResult={{
+        loadingState: LoadingState.LoadFailed,
+        error: new Error('uh oh'),
+      }}
+    />
+  );
+}
 
 SimulatedFailure.story = {
   name: 'Simulated failure',
diff --git a/ts/components/installScreen/InstallScreenQrCodeNotScannedStep.tsx b/ts/components/installScreen/InstallScreenQrCodeNotScannedStep.tsx
index d82c63416..f957c6219 100644
--- a/ts/components/installScreen/InstallScreenQrCodeNotScannedStep.tsx
+++ b/ts/components/installScreen/InstallScreenQrCodeNotScannedStep.tsx
@@ -19,7 +19,7 @@ import { getClassNamesFor } from '../../util/getClassNamesFor';
 
 // We can't always use destructuring assignment because of the complexity of this props
 //   type.
-/* eslint-disable react/destructuring-assignment */
+
 type PropsType = {
   i18n: LocalizerType;
   provisioningUrl: Loadable<string>;
@@ -32,56 +32,60 @@ const getQrCodeClassName = getClassNamesFor(
   'module-InstallScreenQrCodeNotScannedStep__qr-code'
 );
 
-export const InstallScreenQrCodeNotScannedStep = ({
+export function InstallScreenQrCodeNotScannedStep({
   i18n,
   provisioningUrl,
-}: Readonly<PropsType>): ReactElement => (
-  <div className="module-InstallScreenQrCodeNotScannedStep">
-    <TitlebarDragArea />
+}: Readonly<PropsType>): ReactElement {
+  return (
+    <div className="module-InstallScreenQrCodeNotScannedStep">
+      <TitlebarDragArea />
 
-    <InstallScreenSignalLogo />
+      <InstallScreenSignalLogo />
 
-    <div className="module-InstallScreenQrCodeNotScannedStep__contents">
-      <InstallScreenQrCode i18n={i18n} {...provisioningUrl} />
-      <div className="module-InstallScreenQrCodeNotScannedStep__instructions">
-        <h1>{i18n('Install__scan-this-code')}</h1>
-        <ol>
-          <li>{i18n('Install__instructions__1')}</li>
-          <li>
-            <Intl
-              i18n={i18n}
-              id="Install__instructions__2"
-              components={{
-                settings: (
-                  <strong>{i18n('Install__instructions__2__settings')}</strong>
-                ),
-                linkedDevices: <strong>{i18n('linkedDevices')}</strong>,
-              }}
-            />
-          </li>
-          <li>
-            <Intl
-              i18n={i18n}
-              id="Install__instructions__3"
-              components={{
-                plusButton: (
-                  <div
-                    className="module-InstallScreenQrCodeNotScannedStep__android-plus"
-                    aria-label="+"
-                  />
-                ),
-                linkNewDevice: <strong>{i18n('linkNewDevice')}</strong>,
-              }}
-            />
-          </li>
-        </ol>
-        <a href="https://support.signal.org/hc/articles/360007320451#desktop_multiple_device">
-          {i18n('Install__support-link')}
-        </a>
+      <div className="module-InstallScreenQrCodeNotScannedStep__contents">
+        <InstallScreenQrCode i18n={i18n} {...provisioningUrl} />
+        <div className="module-InstallScreenQrCodeNotScannedStep__instructions">
+          <h1>{i18n('Install__scan-this-code')}</h1>
+          <ol>
+            <li>{i18n('Install__instructions__1')}</li>
+            <li>
+              <Intl
+                i18n={i18n}
+                id="Install__instructions__2"
+                components={{
+                  settings: (
+                    <strong>
+                      {i18n('Install__instructions__2__settings')}
+                    </strong>
+                  ),
+                  linkedDevices: <strong>{i18n('linkedDevices')}</strong>,
+                }}
+              />
+            </li>
+            <li>
+              <Intl
+                i18n={i18n}
+                id="Install__instructions__3"
+                components={{
+                  plusButton: (
+                    <div
+                      className="module-InstallScreenQrCodeNotScannedStep__android-plus"
+                      aria-label="+"
+                    />
+                  ),
+                  linkNewDevice: <strong>{i18n('linkNewDevice')}</strong>,
+                }}
+              />
+            </li>
+          </ol>
+          <a href="https://support.signal.org/hc/articles/360007320451#desktop_multiple_device">
+            {i18n('Install__support-link')}
+          </a>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+}
 
 function InstallScreenQrCode(
   props: Loadable<string> & { i18n: LocalizerType }
@@ -100,6 +104,7 @@ function InstallScreenQrCode(
             i18n={i18n}
             id="icu:Install__qr-failed"
             components={{
+              // eslint-disable-next-line react/no-unstable-nested-components
               learnMoreLink: children => (
                 <a href={QR_CODE_FAILED_LINK}>{children}</a>
               ),
diff --git a/ts/components/installScreen/InstallScreenSignalLogo.tsx b/ts/components/installScreen/InstallScreenSignalLogo.tsx
index 4f0e4c778..37fde673b 100644
--- a/ts/components/installScreen/InstallScreenSignalLogo.tsx
+++ b/ts/components/installScreen/InstallScreenSignalLogo.tsx
@@ -4,7 +4,6 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 
-export const InstallScreenSignalLogo = (): ReactElement => (
-  // Because "Signal" should be the same in every language, this is not localized.
-  <div className="InstallScreenSignalLogo">Signal</div>
-);
+export function InstallScreenSignalLogo(): ReactElement {
+  return <div className="InstallScreenSignalLogo">Signal</div>;
+}
diff --git a/ts/components/stickers/StickerButton.stories.tsx b/ts/components/stickers/StickerButton.stories.tsx
index c8629db3e..827680f32 100644
--- a/ts/components/stickers/StickerButton.stories.tsx
+++ b/ts/components/stickers/StickerButton.stories.tsx
@@ -85,46 +85,46 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   showPickerHint: boolean('showPickerHint', false),
 });
 
-export const OnlyInstalled = (): JSX.Element => {
+export function OnlyInstalled(): JSX.Element {
   const props = createProps({ installedPacks });
 
   return <StickerButton {...props} />;
-};
+}
 
-export const OnlyReceived = (): JSX.Element => {
+export function OnlyReceived(): JSX.Element {
   const props = createProps({ receivedPacks });
 
   return <StickerButton {...props} />;
-};
+}
 
-export const OnlyKnown = (): JSX.Element => {
+export function OnlyKnown(): JSX.Element {
   const props = createProps({ knownPacks });
 
   return <StickerButton {...props} />;
-};
+}
 
-export const OnlyBlessed = (): JSX.Element => {
+export function OnlyBlessed(): JSX.Element {
   const props = createProps({ blessedPacks });
 
   return <StickerButton {...props} />;
-};
+}
 
-export const NoPacks = (): JSX.Element => {
+export function NoPacks(): JSX.Element {
   const props = createProps();
 
   return <StickerButton {...props} />;
-};
+}
 
-export const InstalledPackTooltip = (): JSX.Element => {
+export function InstalledPackTooltip(): JSX.Element {
   const props = createProps({
     installedPacks,
     installedPack: installedPacks[0],
   });
 
   return <StickerButton {...props} />;
-};
+}
 
-export const InstalledPackTooltipWide = (): JSX.Element => {
+export function InstalledPackTooltipWide(): JSX.Element {
   const installedPack = createPack({ id: 'installed-pack-wide' }, wideSticker);
 
   const props = createProps({
@@ -133,13 +133,13 @@ export const InstalledPackTooltipWide = (): JSX.Element => {
   });
 
   return <StickerButton {...props} />;
-};
+}
 
 InstalledPackTooltipWide.story = {
   name: 'Installed Pack Tooltip (Wide)',
 };
 
-export const InstalledPackTooltipTall = (): JSX.Element => {
+export function InstalledPackTooltipTall(): JSX.Element {
   const installedPack = createPack({ id: 'installed-pack-tall' }, tallSticker);
 
   const props = createProps({
@@ -148,17 +148,17 @@ export const InstalledPackTooltipTall = (): JSX.Element => {
   });
 
   return <StickerButton {...props} />;
-};
+}
 
 InstalledPackTooltipTall.story = {
   name: 'Installed Pack Tooltip (Tall)',
 };
 
-export const NewInstallTooltip = (): JSX.Element => {
+export function NewInstallTooltip(): JSX.Element {
   const props = createProps({
     installedPacks,
     showIntroduction: true,
   });
 
   return <StickerButton {...props} />;
-};
+}
diff --git a/ts/components/stickers/StickerButton.tsx b/ts/components/stickers/StickerButton.tsx
index 0d7f55d8c..ccbea36e9 100644
--- a/ts/components/stickers/StickerButton.tsx
+++ b/ts/components/stickers/StickerButton.tsx
@@ -45,330 +45,325 @@ export type OwnProps = {
 
 export type Props = OwnProps;
 
-export const StickerButton = React.memo(
-  ({
-    className,
-    i18n,
-    clearInstalledStickerPack,
-    onClickAddPack,
-    onPickSticker,
-    recentStickers,
-    onOpenStateChanged,
-    receivedPacks,
-    installedPack,
-    installedPacks,
-    blessedPacks,
-    knownPacks,
-    showIntroduction,
-    clearShowIntroduction,
-    showPickerHint,
-    clearShowPickerHint,
-    position = 'top-end',
-    theme,
-  }: Props) => {
-    const [open, internalSetOpen] = React.useState(false);
+export const StickerButton = React.memo(function StickerButtonInner({
+  className,
+  i18n,
+  clearInstalledStickerPack,
+  onClickAddPack,
+  onPickSticker,
+  recentStickers,
+  onOpenStateChanged,
+  receivedPacks,
+  installedPack,
+  installedPacks,
+  blessedPacks,
+  knownPacks,
+  showIntroduction,
+  clearShowIntroduction,
+  showPickerHint,
+  clearShowPickerHint,
+  position = 'top-end',
+  theme,
+}: Props) {
+  const [open, internalSetOpen] = React.useState(false);
 
-    const setOpen = React.useCallback(
-      (value: boolean) => {
-        internalSetOpen(value);
-        if (onOpenStateChanged) {
-          onOpenStateChanged(value);
-        }
-      },
-      [internalSetOpen, onOpenStateChanged]
-    );
-
-    const [popperRoot, setPopperRoot] = React.useState<HTMLElement | null>(
-      null
-    );
-    const buttonRef = React.useRef<HTMLButtonElement | null>(null);
-    const refMerger = useRefMerger();
-
-    const handleClickButton = React.useCallback(() => {
-      // Clear tooltip state
-      clearInstalledStickerPack();
-      clearShowIntroduction();
-
-      // Handle button click
-      if (installedPacks.length === 0) {
-        onClickAddPack?.();
-      } else if (popperRoot) {
-        setOpen(false);
-      } else {
-        setOpen(true);
+  const setOpen = React.useCallback(
+    (value: boolean) => {
+      internalSetOpen(value);
+      if (onOpenStateChanged) {
+        onOpenStateChanged(value);
       }
-    }, [
-      clearInstalledStickerPack,
-      clearShowIntroduction,
-      installedPacks,
-      onClickAddPack,
-      popperRoot,
-      setOpen,
-    ]);
+    },
+    [internalSetOpen, onOpenStateChanged]
+  );
 
-    const handlePickSticker = React.useCallback(
-      (packId: string, stickerId: number, url: string) => {
-        setOpen(false);
-        onPickSticker(packId, stickerId, url);
-      },
-      [setOpen, onPickSticker]
-    );
+  const [popperRoot, setPopperRoot] = React.useState<HTMLElement | null>(null);
+  const buttonRef = React.useRef<HTMLButtonElement | null>(null);
+  const refMerger = useRefMerger();
 
-    const handleClose = React.useCallback(() => {
-      setOpen(false);
-    }, [setOpen]);
+  const handleClickButton = React.useCallback(() => {
+    // Clear tooltip state
+    clearInstalledStickerPack();
+    clearShowIntroduction();
 
-    const handleClickAddPack = React.useCallback(() => {
-      setOpen(false);
-      if (showPickerHint) {
-        clearShowPickerHint();
-      }
+    // Handle button click
+    if (installedPacks.length === 0) {
       onClickAddPack?.();
-    }, [onClickAddPack, showPickerHint, setOpen, clearShowPickerHint]);
+    } else if (popperRoot) {
+      setOpen(false);
+    } else {
+      setOpen(true);
+    }
+  }, [
+    clearInstalledStickerPack,
+    clearShowIntroduction,
+    installedPacks,
+    onClickAddPack,
+    popperRoot,
+    setOpen,
+  ]);
 
-    const handleClearIntroduction = React.useCallback(() => {
-      clearInstalledStickerPack();
-      clearShowIntroduction();
-    }, [clearInstalledStickerPack, clearShowIntroduction]);
+  const handlePickSticker = React.useCallback(
+    (packId: string, stickerId: number, url: string) => {
+      setOpen(false);
+      onPickSticker(packId, stickerId, url);
+    },
+    [setOpen, onPickSticker]
+  );
 
-    // Create popper root and handle outside clicks
-    React.useEffect(() => {
-      if (open) {
-        const root = document.createElement('div');
-        setPopperRoot(root);
-        document.body.appendChild(root);
+  const handleClose = React.useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
 
-        return () => {
-          document.body.removeChild(root);
-          setPopperRoot(null);
-        };
-      }
+  const handleClickAddPack = React.useCallback(() => {
+    setOpen(false);
+    if (showPickerHint) {
+      clearShowPickerHint();
+    }
+    onClickAddPack?.();
+  }, [onClickAddPack, showPickerHint, setOpen, clearShowPickerHint]);
 
-      return noop;
-    }, [open, setOpen, setPopperRoot]);
+  const handleClearIntroduction = React.useCallback(() => {
+    clearInstalledStickerPack();
+    clearShowIntroduction();
+  }, [clearInstalledStickerPack, clearShowIntroduction]);
 
-    React.useEffect(() => {
-      if (!open) {
-        return noop;
-      }
-
-      return handleOutsideClick(
-        target => {
-          const targetElement = target as HTMLElement;
-          const targetClassName = targetElement
-            ? targetElement.className || ''
-            : '';
-
-          // We need to special-case sticker picker header buttons, because they can
-          //   disappear after being clicked, which breaks the .contains() check below.
-          const isMissingButtonClass =
-            !targetClassName ||
-            targetClassName.indexOf('module-sticker-picker__header__button') <
-              0;
-
-          if (!isMissingButtonClass) {
-            return false;
-          }
-
-          setOpen(false);
-          return true;
-        },
-        {
-          containerElements: [popperRoot, buttonRef],
-          name: 'StickerButton',
-        }
-      );
-    }, [open, popperRoot, setOpen]);
-
-    // Install keyboard shortcut to open sticker picker
-    React.useEffect(() => {
-      const handleKeydown = (event: KeyboardEvent) => {
-        const { ctrlKey, metaKey, shiftKey } = event;
-        const commandKey = get(window, 'platform') === 'darwin' && metaKey;
-        const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;
-        const commandOrCtrl = commandKey || controlKey;
-        const key = KeyboardLayout.lookup(event);
-
-        // We don't want to open up if the conversation has any panels open
-        const panels = document.querySelectorAll('.conversation .panel');
-        if (panels && panels.length > 1) {
-          return;
-        }
-
-        if (commandOrCtrl && shiftKey && (key === 's' || key === 'S')) {
-          event.stopPropagation();
-          event.preventDefault();
-
-          setOpen(!open);
-        }
-      };
-      document.addEventListener('keydown', handleKeydown);
+  // Create popper root and handle outside clicks
+  React.useEffect(() => {
+    if (open) {
+      const root = document.createElement('div');
+      setPopperRoot(root);
+      document.body.appendChild(root);
 
       return () => {
-        document.removeEventListener('keydown', handleKeydown);
+        document.body.removeChild(root);
+        setPopperRoot(null);
       };
-    }, [open, setOpen]);
-
-    // Clear the installed pack after one minute
-    React.useEffect(() => {
-      if (installedPack) {
-        const timerId = setTimeout(clearInstalledStickerPack, 10 * 1000);
-
-        return () => {
-          clearTimeout(timerId);
-        };
-      }
-
-      return noop;
-    }, [installedPack, clearInstalledStickerPack]);
-
-    if (
-      countStickers({
-        knownPacks,
-        blessedPacks,
-        installedPacks,
-        receivedPacks,
-      }) === 0
-    ) {
-      return null;
     }
 
-    return (
-      <Manager>
-        <Reference>
-          {({ ref }) => (
-            <button
-              type="button"
-              ref={refMerger(buttonRef, ref)}
-              onClick={handleClickButton}
-              className={classNames(
-                {
-                  'module-sticker-button__button': true,
-                  'module-sticker-button__button--active': open,
-                },
-                className
-              )}
-              aria-label={i18n('stickers--StickerPicker--Open')}
-            />
-          )}
-        </Reference>
-        {!open && !showIntroduction && installedPack ? (
-          <Popper
-            placement={position}
-            key={installedPack.id}
-            modifiers={[offsetDistanceModifier(6)]}
-          >
-            {({ ref, style, placement, arrowProps }) => (
-              <div className={theme ? themeClassName(theme) : undefined}>
-                <button
-                  type="button"
-                  ref={ref}
-                  style={style}
-                  className="module-sticker-button__tooltip"
-                  onClick={clearInstalledStickerPack}
-                >
-                  {installedPack.cover ? (
-                    <img
-                      className="module-sticker-button__tooltip__image"
-                      src={installedPack.cover.url}
-                      alt={installedPack.title}
-                    />
-                  ) : (
-                    <div className="module-sticker-button__tooltip__image-placeholder" />
-                  )}
-                  <span className="module-sticker-button__tooltip__text">
-                    <span className="module-sticker-button__tooltip__text__title">
-                      {installedPack.title}
-                    </span>{' '}
-                    installed
-                  </span>
-                  <div
-                    ref={arrowProps.ref}
-                    style={arrowProps.style}
-                    className={classNames(
-                      'module-sticker-button__tooltip__triangle',
-                      `module-sticker-button__tooltip__triangle--${placement}`
-                    )}
-                  />
-                </button>
-              </div>
-            )}
-          </Popper>
-        ) : null}
-        {!open && showIntroduction ? (
-          <Popper placement={position} modifiers={[offsetDistanceModifier(6)]}>
-            {({ ref, style, placement, arrowProps }) => (
-              <div className={theme ? themeClassName(theme) : undefined}>
-                <button
-                  type="button"
-                  ref={ref}
-                  style={style}
-                  className={classNames(
-                    'module-sticker-button__tooltip',
-                    'module-sticker-button__tooltip--introduction'
-                  )}
-                  onClick={handleClearIntroduction}
-                >
-                  <img
-                    className="module-sticker-button__tooltip--introduction__image"
-                    srcSet="images/sticker_splash@1x.png 1x, images/sticker_splash@2x.png 2x"
-                    alt={i18n('stickers--StickerManager--Introduction--Image')}
-                  />
-                  <div className="module-sticker-button__tooltip--introduction__meta">
-                    <div className="module-sticker-button__tooltip--introduction__meta__title">
-                      {i18n('stickers--StickerManager--Introduction--Title')}
-                    </div>
-                    <div className="module-sticker-button__tooltip--introduction__meta__subtitle">
-                      {i18n('stickers--StickerManager--Introduction--Body')}
-                    </div>
-                  </div>
-                  <div className="module-sticker-button__tooltip--introduction__close">
-                    <button
-                      type="button"
-                      className="module-sticker-button__tooltip--introduction__close__button"
-                      onClick={handleClearIntroduction}
-                      aria-label={i18n('close')}
-                    />
-                  </div>
-                  <div
-                    ref={arrowProps.ref}
-                    style={arrowProps.style}
-                    className={classNames(
-                      'module-sticker-button__tooltip__triangle',
-                      'module-sticker-button__tooltip__triangle--introduction',
-                      `module-sticker-button__tooltip__triangle--${placement}`
-                    )}
-                  />
-                </button>
-              </div>
-            )}
-          </Popper>
-        ) : null}
-        {open && popperRoot
-          ? createPortal(
-              <Popper placement={position}>
-                {({ ref, style }) => (
-                  <div className={theme ? themeClassName(theme) : undefined}>
-                    <StickerPicker
-                      ref={ref}
-                      i18n={i18n}
-                      style={style}
-                      packs={installedPacks}
-                      onClose={handleClose}
-                      onClickAddPack={
-                        onClickAddPack ? handleClickAddPack : undefined
-                      }
-                      onPickSticker={handlePickSticker}
-                      recentStickers={recentStickers}
-                      showPickerHint={showPickerHint}
-                    />
-                  </div>
-                )}
-              </Popper>,
-              popperRoot
-            )
-          : null}
-      </Manager>
+    return noop;
+  }, [open, setOpen, setPopperRoot]);
+
+  React.useEffect(() => {
+    if (!open) {
+      return noop;
+    }
+
+    return handleOutsideClick(
+      target => {
+        const targetElement = target as HTMLElement;
+        const targetClassName = targetElement
+          ? targetElement.className || ''
+          : '';
+
+        // We need to special-case sticker picker header buttons, because they can
+        //   disappear after being clicked, which breaks the .contains() check below.
+        const isMissingButtonClass =
+          !targetClassName ||
+          targetClassName.indexOf('module-sticker-picker__header__button') < 0;
+
+        if (!isMissingButtonClass) {
+          return false;
+        }
+
+        setOpen(false);
+        return true;
+      },
+      {
+        containerElements: [popperRoot, buttonRef],
+        name: 'StickerButton',
+      }
     );
+  }, [open, popperRoot, setOpen]);
+
+  // Install keyboard shortcut to open sticker picker
+  React.useEffect(() => {
+    const handleKeydown = (event: KeyboardEvent) => {
+      const { ctrlKey, metaKey, shiftKey } = event;
+      const commandKey = get(window, 'platform') === 'darwin' && metaKey;
+      const controlKey = get(window, 'platform') !== 'darwin' && ctrlKey;
+      const commandOrCtrl = commandKey || controlKey;
+      const key = KeyboardLayout.lookup(event);
+
+      // We don't want to open up if the conversation has any panels open
+      const panels = document.querySelectorAll('.conversation .panel');
+      if (panels && panels.length > 1) {
+        return;
+      }
+
+      if (commandOrCtrl && shiftKey && (key === 's' || key === 'S')) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        setOpen(!open);
+      }
+    };
+    document.addEventListener('keydown', handleKeydown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeydown);
+    };
+  }, [open, setOpen]);
+
+  // Clear the installed pack after one minute
+  React.useEffect(() => {
+    if (installedPack) {
+      const timerId = setTimeout(clearInstalledStickerPack, 10 * 1000);
+
+      return () => {
+        clearTimeout(timerId);
+      };
+    }
+
+    return noop;
+  }, [installedPack, clearInstalledStickerPack]);
+
+  if (
+    countStickers({
+      knownPacks,
+      blessedPacks,
+      installedPacks,
+      receivedPacks,
+    }) === 0
+  ) {
+    return null;
   }
-);
+
+  return (
+    <Manager>
+      <Reference>
+        {({ ref }) => (
+          <button
+            type="button"
+            ref={refMerger(buttonRef, ref)}
+            onClick={handleClickButton}
+            className={classNames(
+              {
+                'module-sticker-button__button': true,
+                'module-sticker-button__button--active': open,
+              },
+              className
+            )}
+            aria-label={i18n('stickers--StickerPicker--Open')}
+          />
+        )}
+      </Reference>
+      {!open && !showIntroduction && installedPack ? (
+        <Popper
+          placement={position}
+          key={installedPack.id}
+          modifiers={[offsetDistanceModifier(6)]}
+        >
+          {({ ref, style, placement, arrowProps }) => (
+            <div className={theme ? themeClassName(theme) : undefined}>
+              <button
+                type="button"
+                ref={ref}
+                style={style}
+                className="module-sticker-button__tooltip"
+                onClick={clearInstalledStickerPack}
+              >
+                {installedPack.cover ? (
+                  <img
+                    className="module-sticker-button__tooltip__image"
+                    src={installedPack.cover.url}
+                    alt={installedPack.title}
+                  />
+                ) : (
+                  <div className="module-sticker-button__tooltip__image-placeholder" />
+                )}
+                <span className="module-sticker-button__tooltip__text">
+                  <span className="module-sticker-button__tooltip__text__title">
+                    {installedPack.title}
+                  </span>{' '}
+                  installed
+                </span>
+                <div
+                  ref={arrowProps.ref}
+                  style={arrowProps.style}
+                  className={classNames(
+                    'module-sticker-button__tooltip__triangle',
+                    `module-sticker-button__tooltip__triangle--${placement}`
+                  )}
+                />
+              </button>
+            </div>
+          )}
+        </Popper>
+      ) : null}
+      {!open && showIntroduction ? (
+        <Popper placement={position} modifiers={[offsetDistanceModifier(6)]}>
+          {({ ref, style, placement, arrowProps }) => (
+            <div className={theme ? themeClassName(theme) : undefined}>
+              <button
+                type="button"
+                ref={ref}
+                style={style}
+                className={classNames(
+                  'module-sticker-button__tooltip',
+                  'module-sticker-button__tooltip--introduction'
+                )}
+                onClick={handleClearIntroduction}
+              >
+                <img
+                  className="module-sticker-button__tooltip--introduction__image"
+                  srcSet="images/sticker_splash@1x.png 1x, images/sticker_splash@2x.png 2x"
+                  alt={i18n('stickers--StickerManager--Introduction--Image')}
+                />
+                <div className="module-sticker-button__tooltip--introduction__meta">
+                  <div className="module-sticker-button__tooltip--introduction__meta__title">
+                    {i18n('stickers--StickerManager--Introduction--Title')}
+                  </div>
+                  <div className="module-sticker-button__tooltip--introduction__meta__subtitle">
+                    {i18n('stickers--StickerManager--Introduction--Body')}
+                  </div>
+                </div>
+                <div className="module-sticker-button__tooltip--introduction__close">
+                  <button
+                    type="button"
+                    className="module-sticker-button__tooltip--introduction__close__button"
+                    onClick={handleClearIntroduction}
+                    aria-label={i18n('close')}
+                  />
+                </div>
+                <div
+                  ref={arrowProps.ref}
+                  style={arrowProps.style}
+                  className={classNames(
+                    'module-sticker-button__tooltip__triangle',
+                    'module-sticker-button__tooltip__triangle--introduction',
+                    `module-sticker-button__tooltip__triangle--${placement}`
+                  )}
+                />
+              </button>
+            </div>
+          )}
+        </Popper>
+      ) : null}
+      {open && popperRoot
+        ? createPortal(
+            <Popper placement={position}>
+              {({ ref, style }) => (
+                <div className={theme ? themeClassName(theme) : undefined}>
+                  <StickerPicker
+                    ref={ref}
+                    i18n={i18n}
+                    style={style}
+                    packs={installedPacks}
+                    onClose={handleClose}
+                    onClickAddPack={
+                      onClickAddPack ? handleClickAddPack : undefined
+                    }
+                    onPickSticker={handlePickSticker}
+                    recentStickers={recentStickers}
+                    showPickerHint={showPickerHint}
+                  />
+                </div>
+              )}
+            </Popper>,
+            popperRoot
+          )
+        : null}
+    </Manager>
+  );
+});
diff --git a/ts/components/stickers/StickerManager.stories.tsx b/ts/components/stickers/StickerManager.stories.tsx
index fc2679ce7..437ba15df 100644
--- a/ts/components/stickers/StickerManager.stories.tsx
+++ b/ts/components/stickers/StickerManager.stories.tsx
@@ -53,36 +53,36 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   uninstallStickerPack: action('uninstallStickerPack'),
 });
 
-export const Full = (): JSX.Element => {
+export function Full(): JSX.Element {
   const props = createProps({ installedPacks, receivedPacks, blessedPacks });
 
   return <StickerManager {...props} />;
-};
+}
 
-export const InstalledPacks = (): JSX.Element => {
+export function InstalledPacks(): JSX.Element {
   const props = createProps({ installedPacks });
 
   return <StickerManager {...props} />;
-};
+}
 
-export const ReceivedPacks = (): JSX.Element => {
+export function ReceivedPacks(): JSX.Element {
   const props = createProps({ receivedPacks });
 
   return <StickerManager {...props} />;
-};
+}
 
-export const InstalledKnownPacks = (): JSX.Element => {
+export function InstalledKnownPacks(): JSX.Element {
   const props = createProps({ installedPacks, knownPacks });
 
   return <StickerManager {...props} />;
-};
+}
 
 InstalledKnownPacks.story = {
   name: 'Installed + Known Packs',
 };
 
-export const Empty = (): JSX.Element => {
+export function Empty(): JSX.Element {
   const props = createProps();
 
   return <StickerManager {...props} />;
-};
+}
diff --git a/ts/components/stickers/StickerManager.tsx b/ts/components/stickers/StickerManager.tsx
index c301afda0..feea1dcd6 100644
--- a/ts/components/stickers/StickerManager.tsx
+++ b/ts/components/stickers/StickerManager.tsx
@@ -21,116 +21,114 @@ export type OwnProps = {
 
 export type Props = OwnProps;
 
-export const StickerManager = React.memo(
-  ({
-    installedPacks,
-    receivedPacks,
-    knownPacks,
-    blessedPacks,
-    downloadStickerPack,
-    installStickerPack,
-    uninstallStickerPack,
-    i18n,
-  }: Props) => {
-    const focusRef = React.createRef<HTMLDivElement>();
-    const [packToPreview, setPackToPreview] =
-      React.useState<StickerPackType | null>(null);
+export const StickerManager = React.memo(function StickerManagerInner({
+  installedPacks,
+  receivedPacks,
+  knownPacks,
+  blessedPacks,
+  downloadStickerPack,
+  installStickerPack,
+  uninstallStickerPack,
+  i18n,
+}: Props) {
+  const focusRef = React.createRef<HTMLDivElement>();
+  const [packToPreview, setPackToPreview] =
+    React.useState<StickerPackType | null>(null);
 
-    React.useEffect(() => {
-      if (!knownPacks) {
-        return;
+  React.useEffect(() => {
+    if (!knownPacks) {
+      return;
+    }
+    knownPacks.forEach(pack => {
+      downloadStickerPack(pack.id, pack.key);
+    });
+
+    // When this component is created, it's initially not part of the DOM, and then it's
+    //   added off-screen and animated in. This ensures that the focus takes.
+    setTimeout(() => {
+      if (focusRef.current) {
+        focusRef.current.focus();
       }
-      knownPacks.forEach(pack => {
-        downloadStickerPack(pack.id, pack.key);
-      });
+    });
+    // We only want to attempt downloads on initial load
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-      // When this component is created, it's initially not part of the DOM, and then it's
-      //   added off-screen and animated in. This ensures that the focus takes.
-      setTimeout(() => {
-        if (focusRef.current) {
-          focusRef.current.focus();
-        }
-      });
-      // We only want to attempt downloads on initial load
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+  const clearPackToPreview = React.useCallback(() => {
+    setPackToPreview(null);
+  }, [setPackToPreview]);
 
-    const clearPackToPreview = React.useCallback(() => {
-      setPackToPreview(null);
-    }, [setPackToPreview]);
+  const previewPack = React.useCallback((pack: StickerPackType) => {
+    setPackToPreview(pack);
+  }, []);
 
-    const previewPack = React.useCallback((pack: StickerPackType) => {
-      setPackToPreview(pack);
-    }, []);
+  return (
+    <>
+      {packToPreview ? (
+        <StickerPreviewModal
+          i18n={i18n}
+          pack={packToPreview}
+          onClose={clearPackToPreview}
+          downloadStickerPack={downloadStickerPack}
+          installStickerPack={installStickerPack}
+          uninstallStickerPack={uninstallStickerPack}
+        />
+      ) : null}
+      <div className="module-sticker-manager" tabIndex={-1} ref={focusRef}>
+        {[
+          {
+            i18nKey: 'stickers--StickerManager--InstalledPacks',
+            i18nEmptyKey: 'stickers--StickerManager--InstalledPacks--Empty',
+            packs: installedPacks,
+            hideIfEmpty: false,
+          },
+          {
+            i18nKey: 'stickers--StickerManager--BlessedPacks',
+            i18nEmptyKey: 'stickers--StickerManager--BlessedPacks--Empty',
+            packs: blessedPacks,
+            hideIfEmpty: true,
+          },
+          {
+            i18nKey: 'stickers--StickerManager--ReceivedPacks',
+            i18nEmptyKey: 'stickers--StickerManager--ReceivedPacks--Empty',
+            packs: receivedPacks,
+            hideIfEmpty: false,
+          },
+        ].map(section => {
+          if (section.hideIfEmpty && section.packs.length === 0) {
+            return null;
+          }
 
-    return (
-      <>
-        {packToPreview ? (
-          <StickerPreviewModal
-            i18n={i18n}
-            pack={packToPreview}
-            onClose={clearPackToPreview}
-            downloadStickerPack={downloadStickerPack}
-            installStickerPack={installStickerPack}
-            uninstallStickerPack={uninstallStickerPack}
-          />
-        ) : null}
-        <div className="module-sticker-manager" tabIndex={-1} ref={focusRef}>
-          {[
-            {
-              i18nKey: 'stickers--StickerManager--InstalledPacks',
-              i18nEmptyKey: 'stickers--StickerManager--InstalledPacks--Empty',
-              packs: installedPacks,
-              hideIfEmpty: false,
-            },
-            {
-              i18nKey: 'stickers--StickerManager--BlessedPacks',
-              i18nEmptyKey: 'stickers--StickerManager--BlessedPacks--Empty',
-              packs: blessedPacks,
-              hideIfEmpty: true,
-            },
-            {
-              i18nKey: 'stickers--StickerManager--ReceivedPacks',
-              i18nEmptyKey: 'stickers--StickerManager--ReceivedPacks--Empty',
-              packs: receivedPacks,
-              hideIfEmpty: false,
-            },
-          ].map(section => {
-            if (section.hideIfEmpty && section.packs.length === 0) {
-              return null;
-            }
-
-            return (
-              <React.Fragment key={section.i18nKey}>
-                <h2
-                  className={classNames(
-                    'module-sticker-manager__text',
-                    'module-sticker-manager__text--heading'
-                  )}
-                >
-                  {i18n(section.i18nKey)}
-                </h2>
-                {section.packs.length > 0 ? (
-                  section.packs.map(pack => (
-                    <StickerManagerPackRow
-                      key={pack.id}
-                      pack={pack}
-                      i18n={i18n}
-                      onClickPreview={previewPack}
-                      installStickerPack={installStickerPack}
-                      uninstallStickerPack={uninstallStickerPack}
-                    />
-                  ))
-                ) : (
-                  <div className="module-sticker-manager__empty">
-                    {i18n(section.i18nEmptyKey)}
-                  </div>
+          return (
+            <React.Fragment key={section.i18nKey}>
+              <h2
+                className={classNames(
+                  'module-sticker-manager__text',
+                  'module-sticker-manager__text--heading'
                 )}
-              </React.Fragment>
-            );
-          })}
-        </div>
-      </>
-    );
-  }
-);
+              >
+                {i18n(section.i18nKey)}
+              </h2>
+              {section.packs.length > 0 ? (
+                section.packs.map(pack => (
+                  <StickerManagerPackRow
+                    key={pack.id}
+                    pack={pack}
+                    i18n={i18n}
+                    onClickPreview={previewPack}
+                    installStickerPack={installStickerPack}
+                    uninstallStickerPack={uninstallStickerPack}
+                  />
+                ))
+              ) : (
+                <div className="module-sticker-manager__empty">
+                  {i18n(section.i18nEmptyKey)}
+                </div>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </div>
+    </>
+  );
+});
diff --git a/ts/components/stickers/StickerManagerPackRow.tsx b/ts/components/stickers/StickerManagerPackRow.tsx
index fa2c54299..ca262a99f 100644
--- a/ts/components/stickers/StickerManagerPackRow.tsx
+++ b/ts/components/stickers/StickerManagerPackRow.tsx
@@ -18,13 +18,13 @@ export type OwnProps = {
 export type Props = OwnProps;
 
 export const StickerManagerPackRow = React.memo(
-  ({
+  function StickerManagerPackRowInner({
     installStickerPack,
     uninstallStickerPack,
     onClickPreview,
     pack,
     i18n,
-  }: Props) => {
+  }: Props) {
     const { id, key, isBlessed } = pack;
     const [uninstalling, setUninstalling] = React.useState(false);
 
diff --git a/ts/components/stickers/StickerPackInstallButton.tsx b/ts/components/stickers/StickerPackInstallButton.tsx
index 38e280315..ba9e8c936 100644
--- a/ts/components/stickers/StickerPackInstallButton.tsx
+++ b/ts/components/stickers/StickerPackInstallButton.tsx
@@ -17,19 +17,24 @@ export type Props = OwnProps & ButtonHTMLAttributes<HTMLButtonElement>;
 export const StickerPackInstallButton = React.forwardRef<
   HTMLButtonElement,
   Props
->(({ i18n, installed, blue, ...props }: Props, ref) => (
-  <button
-    type="button"
-    ref={ref}
-    className={classNames({
-      'module-sticker-manager__install-button': true,
-      'module-sticker-manager__install-button--blue': blue,
-    })}
-    aria-label={i18n('stickers--StickerManager--Install')}
-    {...props}
-  >
-    {installed
-      ? i18n('stickers--StickerManager--Uninstall')
-      : i18n('stickers--StickerManager--Install')}
-  </button>
-));
+>(function StickerPackInstallButtonInner(
+  { i18n, installed, blue, ...props }: Props,
+  ref
+) {
+  return (
+    <button
+      type="button"
+      ref={ref}
+      className={classNames({
+        'module-sticker-manager__install-button': true,
+        'module-sticker-manager__install-button--blue': blue,
+      })}
+      aria-label={i18n('stickers--StickerManager--Install')}
+      {...props}
+    >
+      {installed
+        ? i18n('stickers--StickerManager--Uninstall')
+        : i18n('stickers--StickerManager--Install')}
+    </button>
+  );
+});
diff --git a/ts/components/stickers/StickerPicker.stories.tsx b/ts/components/stickers/StickerPicker.stories.tsx
index aa88b871d..ac341e07a 100644
--- a/ts/components/stickers/StickerPicker.stories.tsx
+++ b/ts/components/stickers/StickerPicker.stories.tsx
@@ -116,31 +116,31 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   ),
 });
 
-export const Full = (): JSX.Element => {
+export function Full(): JSX.Element {
   const props = createProps({ packs, recentStickers });
 
   return <StickerPicker {...props} />;
-};
+}
 
-export const PickerHint = (): JSX.Element => {
+export function PickerHint(): JSX.Element {
   const props = createProps({ packs, recentStickers, showPickerHint: true });
 
   return <StickerPicker {...props} />;
-};
+}
 
-export const NoRecentStickers = (): JSX.Element => {
+export function NoRecentStickers(): JSX.Element {
   const props = createProps({ packs });
 
   return <StickerPicker {...props} />;
-};
+}
 
-export const Empty = (): JSX.Element => {
+export function Empty(): JSX.Element {
   const props = createProps();
 
   return <StickerPicker {...props} />;
-};
+}
 
-export const PendingDownload = (): JSX.Element => {
+export function PendingDownload(): JSX.Element {
   const pack = createPack(
     { status: 'pending', stickers: [abeSticker] },
     abeSticker
@@ -148,9 +148,9 @@ export const PendingDownload = (): JSX.Element => {
   const props = createProps({ packs: [pack] });
 
   return <StickerPicker {...props} />;
-};
+}
 
-export const Error = (): JSX.Element => {
+export function Error(): JSX.Element {
   const pack = createPack(
     { status: 'error', stickers: [abeSticker] },
     abeSticker
@@ -158,11 +158,11 @@ export const Error = (): JSX.Element => {
   const props = createProps({ packs: [pack] });
 
   return <StickerPicker {...props} />;
-};
+}
 
-export const NoCover = (): JSX.Element => {
+export function NoCover(): JSX.Element {
   const pack = createPack({ status: 'error', stickers: [abeSticker] });
   const props = createProps({ packs: [pack] });
 
   return <StickerPicker {...props} />;
-};
+}
diff --git a/ts/components/stickers/StickerPreviewModal.stories.tsx b/ts/components/stickers/StickerPreviewModal.stories.tsx
index f1a9f2b9e..5f6c4c188 100644
--- a/ts/components/stickers/StickerPreviewModal.stories.tsx
+++ b/ts/components/stickers/StickerPreviewModal.stories.tsx
@@ -39,7 +39,7 @@ const tallSticker = {
   packId: 'tall',
 };
 
-export const Full = (): JSX.Element => {
+export function Full(): JSX.Element {
   const title = text('title', 'Foo');
   const author = text('author', 'Foo McBarrington');
 
@@ -72,9 +72,9 @@ export const Full = (): JSX.Element => {
       pack={pack}
     />
   );
-};
+}
 
-export const JustFourStickers = (): JSX.Element => {
+export function JustFourStickers(): JSX.Element {
   const title = text('title', 'Foo');
   const author = text('author', 'Foo McBarrington');
 
@@ -101,13 +101,13 @@ export const JustFourStickers = (): JSX.Element => {
       pack={pack}
     />
   );
-};
+}
 
 JustFourStickers.story = {
   name: 'Just four stickers',
 };
 
-export const InitialDownload = (): JSX.Element => {
+export function InitialDownload(): JSX.Element {
   return (
     <StickerPreviewModal
       onClose={action('onClose')}
@@ -119,13 +119,13 @@ export const InitialDownload = (): JSX.Element => {
       pack={{} as any}
     />
   );
-};
+}
 
 InitialDownload.story = {
   name: 'Initial download',
 };
 
-export const PackDeleted = (): JSX.Element => {
+export function PackDeleted(): JSX.Element {
   return (
     <StickerPreviewModal
       onClose={action('onClose')}
@@ -136,7 +136,7 @@ export const PackDeleted = (): JSX.Element => {
       pack={undefined}
     />
   );
-};
+}
 
 PackDeleted.story = {
   name: 'Pack deleted',
diff --git a/ts/components/stickers/StickerPreviewModal.tsx b/ts/components/stickers/StickerPreviewModal.tsx
index 6c05e2abc..3c2396399 100644
--- a/ts/components/stickers/StickerPreviewModal.tsx
+++ b/ts/components/stickers/StickerPreviewModal.tsx
@@ -72,7 +72,9 @@ function renderBody({ pack, i18n }: Props) {
   );
 }
 
-export const StickerPreviewModal = React.memo((props: Props) => {
+export const StickerPreviewModal = React.memo(function StickerPreviewModalInner(
+  props: Props
+) {
   const {
     onClose,
     pack,
diff --git a/ts/groups/joinViaLink.tsx b/ts/groups/joinViaLink.tsx
index 38a559894..3272547e4 100644
--- a/ts/groups/joinViaLink.tsx
+++ b/ts/groups/joinViaLink.tsx
@@ -157,6 +157,7 @@ export async function joinViaLink(hash: string): Promise<void> {
     const timestamp = existingConversation.get('timestamp') || Date.now();
     // eslint-disable-next-line camelcase
     const active_at = existingConversation.get('active_at') || Date.now();
+    // eslint-disable-next-line camelcase
     existingConversation.set({ active_at, timestamp });
     window.Signal.Data.updateConversation(existingConversation.attributes);
 
@@ -301,6 +302,7 @@ export async function joinViaLink(hash: string): Promise<void> {
               const active_at =
                 targetConversation.get('active_at') || Date.now();
               targetConversation.set({
+                // eslint-disable-next-line camelcase
                 active_at,
                 avatar:
                   localAvatar && localAvatar.path && result.avatar
diff --git a/ts/model-types.d.ts b/ts/model-types.d.ts
index 3759b06c0..39073dd3b 100644
--- a/ts/model-types.d.ts
+++ b/ts/model-types.d.ts
@@ -118,7 +118,6 @@ export type MessageReactionType = {
   isSentByConversationId?: Record<string, boolean>;
 };
 
-/* eslint-disable camelcase */
 export type MessageAttributesType = {
   bodyAttachment?: AttachmentType;
   bodyRanges?: BodyRangesType;
@@ -259,7 +258,6 @@ export type ValidateConversationType = Pick<
   'e164' | 'uuid' | 'type' | 'groupId'
 >;
 
-/* eslint-disable camelcase */
 export type ConversationAttributesType = {
   accessKey?: string | null;
   addedBy?: string;
diff --git a/ts/mp4box.d.ts b/ts/mp4box.d.ts
index 3fa633aad..a55da60c0 100644
--- a/ts/mp4box.d.ts
+++ b/ts/mp4box.d.ts
@@ -1,8 +1,6 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* eslint-disable camelcase */
-
 declare module 'mp4box' {
   type MP4MediaTrack = {
     alternate_group: number;
diff --git a/ts/sql/Interface.ts b/ts/sql/Interface.ts
index 0e0a67e22..95014d394 100644
--- a/ts/sql/Interface.ts
+++ b/ts/sql/Interface.ts
@@ -1,7 +1,6 @@
 // Copyright 2020-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* eslint-disable camelcase */
 import type {
   ConversationAttributesType,
   MessageAttributesType,
diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts
index c66b346cb..0b48a35a9 100644
--- a/ts/state/ducks/conversations.ts
+++ b/ts/state/ducks/conversations.ts
@@ -1,8 +1,6 @@
 // Copyright 2019-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* eslint-disable camelcase */
-
 import type { ThunkAction } from 'redux-thunk';
 import {
   difference,
diff --git a/ts/state/smart/CompositionTextArea.tsx b/ts/state/smart/CompositionTextArea.tsx
index 931cd652a..1550362f3 100644
--- a/ts/state/smart/CompositionTextArea.tsx
+++ b/ts/state/smart/CompositionTextArea.tsx
@@ -27,9 +27,9 @@ export type SmartCompositionTextAreaProps = Pick<
   | 'scrollerRef'
 >;
 
-export const SmartCompositionTextArea = (
+export function SmartCompositionTextArea(
   props: SmartCompositionTextAreaProps
-): JSX.Element => {
+): JSX.Element {
   const i18n = useSelector<StateType, LocalizerType>(getIntl);
 
   const { onUseEmoji: onPickEmoji } = useEmojiActions();
@@ -47,4 +47,4 @@ export const SmartCompositionTextArea = (
       onTextTooLong={() => showToast(ToastMessageBodyTooLong)}
     />
   );
-};
+}
diff --git a/ts/state/smart/ContactName.tsx b/ts/state/smart/ContactName.tsx
index f34549219..fabb5fc28 100644
--- a/ts/state/smart/ContactName.tsx
+++ b/ts/state/smart/ContactName.tsx
@@ -17,7 +17,7 @@ type ExternalProps = {
   conversationId: string;
 };
 
-export const SmartContactName: React.ComponentType<ExternalProps> = props => {
+export function SmartContactName(props: ExternalProps): JSX.Element {
   const { conversationId } = props;
   const i18n = useSelector<StateType, LocalizerType>(getIntl);
   const getConversation = useSelector<StateType, GetConversationByIdType>(
@@ -34,4 +34,4 @@ export const SmartContactName: React.ComponentType<ExternalProps> = props => {
       title={conversation.title}
     />
   );
-};
+}
diff --git a/ts/state/smart/ContactSpoofingReviewDialog.tsx b/ts/state/smart/ContactSpoofingReviewDialog.tsx
index 46ffacb61..f73ac1b15 100644
--- a/ts/state/smart/ContactSpoofingReviewDialog.tsx
+++ b/ts/state/smart/ContactSpoofingReviewDialog.tsx
@@ -33,9 +33,9 @@ export type PropsType = Omit<DownstreamPropsType, 'type'> &
       }
   );
 
-export const SmartContactSpoofingReviewDialog: React.ComponentType<
-  PropsType
-> = props => {
+export function SmartContactSpoofingReviewDialog(
+  props: PropsType
+): JSX.Element {
   const { type } = props;
 
   const getConversation = useSelector<StateType, GetConversationByIdType>(
@@ -52,4 +52,4 @@ export const SmartContactSpoofingReviewDialog: React.ComponentType<
   }
 
   return <ContactSpoofingReviewDialog {...props} />;
-};
+}
diff --git a/ts/state/smart/EmojiPicker.tsx b/ts/state/smart/EmojiPicker.tsx
index 1c02779cd..15e2417b6 100644
--- a/ts/state/smart/EmojiPicker.tsx
+++ b/ts/state/smart/EmojiPicker.tsx
@@ -19,7 +19,10 @@ export const SmartEmojiPicker = React.forwardRef<
     EmojiPickerProps,
     'onClickSettings' | 'onPickEmoji' | 'onSetSkinTone' | 'onClose' | 'style'
   >
->(({ onClickSettings, onPickEmoji, onSetSkinTone, onClose, style }, ref) => {
+>(function SmartEmojiPickerInner(
+  { onClickSettings, onPickEmoji, onSetSkinTone, onClose, style },
+  ref
+) {
   const i18n = useSelector<StateType, LocalizerType>(getIntl);
   const skinTone = useSelector<StateType, number>(state =>
     getEmojiSkinTone(state)
diff --git a/ts/state/smart/ReactionPicker.tsx b/ts/state/smart/ReactionPicker.tsx
index 5972472ee..717c086b1 100644
--- a/ts/state/smart/ReactionPicker.tsx
+++ b/ts/state/smart/ReactionPicker.tsx
@@ -27,7 +27,7 @@ type ExternalProps = Omit<
 export const SmartReactionPicker = React.forwardRef<
   HTMLDivElement,
   ExternalProps
->((props, ref) => {
+>(function SmartReactionPickerInner(props, ref) {
   const { openCustomizePreferredReactionsModal } =
     usePreferredReactionsActions();
   const { onSetSkinTone } = useItemsActions();
diff --git a/ts/test-both/helpers/FakeLeftPaneContainer.tsx b/ts/test-both/helpers/FakeLeftPaneContainer.tsx
index 9dd95db8a..721bbbe91 100644
--- a/ts/test-both/helpers/FakeLeftPaneContainer.tsx
+++ b/ts/test-both/helpers/FakeLeftPaneContainer.tsx
@@ -1,11 +1,11 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { FunctionComponent } from 'react';
 import React from 'react';
 import { WidthBreakpoint } from '../../components/_util';
 
 type PropsType = {
+  children?: React.ReactNode;
   containerWidthBreakpoint: WidthBreakpoint;
 };
 
@@ -15,10 +15,10 @@ const WIDTHS = {
   [WidthBreakpoint.Narrow]: 130,
 };
 
-export const FakeLeftPaneContainer: FunctionComponent<PropsType> = ({
+export function FakeLeftPaneContainer({
   children,
   containerWidthBreakpoint,
-}) => {
+}: PropsType): JSX.Element {
   return (
     <div
       className={`module-left-pane--width-${containerWidthBreakpoint}`}
@@ -27,4 +27,4 @@ export const FakeLeftPaneContainer: FunctionComponent<PropsType> = ({
       {children}
     </div>
   );
-};
+}
diff --git a/ts/test-node/jobs/JobQueueDatabaseStore_test.ts b/ts/test-node/jobs/JobQueueDatabaseStore_test.ts
index a8f98902d..07e09c9f9 100644
--- a/ts/test-node/jobs/JobQueueDatabaseStore_test.ts
+++ b/ts/test-node/jobs/JobQueueDatabaseStore_test.ts
@@ -1,5 +1,6 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
+/* eslint-disable no-unreachable-loop */
 
 import { assert } from 'chai';
 import * as sinon from 'sinon';
diff --git a/ts/textsecure/Types.d.ts b/ts/textsecure/Types.d.ts
index 2f498f6b3..1d489bbaf 100644
--- a/ts/textsecure/Types.d.ts
+++ b/ts/textsecure/Types.d.ts
@@ -67,7 +67,7 @@ export type KeyPairType = {
 
 export type OuterSignedPrekeyType = {
   confirmed: boolean;
-  // eslint-disable-next-line camelcase
+
   created_at: number;
   keyId: number;
   privKey: Uint8Array;
diff --git a/ts/types/Calling.ts b/ts/types/Calling.ts
index 1b3d77840..cc9fc267f 100644
--- a/ts/types/Calling.ts
+++ b/ts/types/Calling.ts
@@ -49,7 +49,7 @@ type ActiveCallBaseType = {
   showParticipantsList: boolean;
 };
 
-type ActiveDirectCallType = ActiveCallBaseType & {
+export type ActiveDirectCallType = ActiveCallBaseType & {
   callMode: CallMode.Direct;
   callState?: CallState;
   callEndedReason?: CallEndedReason;
@@ -64,7 +64,7 @@ type ActiveDirectCallType = ActiveCallBaseType & {
   ];
 };
 
-type ActiveGroupCallType = ActiveCallBaseType & {
+export type ActiveGroupCallType = ActiveCallBaseType & {
   callMode: CallMode.Group;
   connectionState: GroupCallConnectionState;
   conversationsWithSafetyNumberChanges: Array<ConversationType>;
diff --git a/ts/types/Dialogs.ts b/ts/types/Dialogs.ts
index 5e2008250..65af8438c 100644
--- a/ts/types/Dialogs.ts
+++ b/ts/types/Dialogs.ts
@@ -1,8 +1,6 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* eslint-disable camelcase */
-
 export enum DialogType {
   None = 'None',
   Update = 'Update',
diff --git a/ts/types/I18N.ts b/ts/types/I18N.ts
index 36a707e22..2f668dfb6 100644
--- a/ts/types/I18N.ts
+++ b/ts/types/I18N.ts
@@ -1,8 +1,6 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* eslint-disable camelcase */
-
 import type { LocalizerType } from './Util';
 
 export type { LocalizerType } from './Util';
diff --git a/ts/types/LinkPreview.ts b/ts/types/LinkPreview.ts
index 77415f94c..f95ee89db 100644
--- a/ts/types/LinkPreview.ts
+++ b/ts/types/LinkPreview.ts
@@ -153,7 +153,7 @@ const VALID_URI_CHARACTERS = new Set([
   '_',
   '~',
 ]);
-const ASCII_PATTERN = new RegExp('[\\u0020-\\u007F]', 'g');
+const ASCII_PATTERN = /[\u0020-\u007F]/g;
 const MAX_HREF_LENGTH = 2 ** 12;
 
 export function isLinkSneaky(href: string): boolean {
diff --git a/ts/types/Message.ts b/ts/types/Message.ts
index 32b26a763..64530d9ef 100644
--- a/ts/types/Message.ts
+++ b/ts/types/Message.ts
@@ -1,8 +1,6 @@
 // Copyright 2018-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* eslint-disable camelcase */
-
 import type { DurationInSeconds } from '../util/durations';
 import type { AttachmentType } from './Attachment';
 import type { EmbeddedContactType } from './EmbeddedContact';
diff --git a/ts/types/Storage.d.ts b/ts/types/Storage.d.ts
index c1837eda2..e342a46d4 100644
--- a/ts/types/Storage.d.ts
+++ b/ts/types/Storage.d.ts
@@ -41,7 +41,7 @@ export type IdentityKeyMap = Record<
 >;
 
 // This should be in sync with `STORAGE_UI_KEYS` in `ts/types/StorageUIKeys.ts`.
-/* eslint-disable camelcase */
+
 export type StorageAccessType = {
   'always-relay-calls': boolean;
   'audio-notification': boolean;
diff --git a/ts/util/durations/duration-in-seconds.ts b/ts/util/durations/duration-in-seconds.ts
index 64d851e4c..3351880e7 100644
--- a/ts/util/durations/duration-in-seconds.ts
+++ b/ts/util/durations/duration-in-seconds.ts
@@ -4,7 +4,6 @@
 import * as Constants from './constants';
 
 export type DurationInSeconds = number & {
-  // eslint-disable-next-line camelcase
   __time_difference_in_seconds: never;
 };
 
diff --git a/ts/util/iterables.ts b/ts/util/iterables.ts
index 69369d3c0..8e69dc350 100644
--- a/ts/util/iterables.ts
+++ b/ts/util/iterables.ts
@@ -116,6 +116,7 @@ export function collectFirst<T, S>(
   iterable: Iterable<T>,
   fn: (value: T) => S | undefined
 ): S | undefined {
+  // eslint-disable-next-line no-unreachable-loop
   for (const v of collect(iterable, fn)) {
     return v;
   }
diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json
index 076a1e8aa..a2faff066 100644
--- a/ts/util/lint/exceptions.json
+++ b/ts/util/lint/exceptions.json
@@ -410,34 +410,6 @@
     "reasonCategory": "falseMatch",
     "updated": "2022-06-04T00:50:49.405Z"
   },
-  {
-    "rule": "jQuery-load(",
-    "path": "node_modules/@mdx-js/mdx/node_modules/resolve/lib/async.js",
-    "line": "        load(exts, x, loadAsFilePackage);",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-06-04T00:50:49.405Z"
-  },
-  {
-    "rule": "jQuery-load(",
-    "path": "node_modules/@mdx-js/mdx/node_modules/resolve/lib/async.js",
-    "line": "        function load(exts, x, loadPackage) {",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-06-04T00:50:49.405Z"
-  },
-  {
-    "rule": "jQuery-load(",
-    "path": "node_modules/@mdx-js/mdx/node_modules/resolve/lib/async.js",
-    "line": "                    if (r) return load(",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-06-04T00:50:49.405Z"
-  },
-  {
-    "rule": "jQuery-load(",
-    "path": "node_modules/@mdx-js/mdx/node_modules/resolve/lib/async.js",
-    "line": "                load(exts.slice(1), x, pkg);",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-06-04T00:50:49.405Z"
-  },
   {
     "rule": "jQuery-prepend(",
     "path": "node_modules/@mdx-js/mdx/node_modules/source-map/dist/source-map.debug.js",
@@ -465,20 +437,6 @@
     "reasonCategory": "falseMatch",
     "updated": "2022-06-04T00:50:49.405Z"
   },
-  {
-    "rule": "jQuery-wrap(",
-    "path": "node_modules/@mixer/parallel-prettier/node_modules/commander/index.js",
-    "line": "        return helper.wrap(fullText, helpWidth - itemIndentWidth, termWidth + itemSeparatorWidth);",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-03-22T19:29:46.099Z"
-  },
-  {
-    "rule": "jQuery-wrap(",
-    "path": "node_modules/@mixer/parallel-prettier/node_modules/commander/index.js",
-    "line": "  wrap(str, width, indent, minColumnWidth = 40) {",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-03-22T19:29:46.099Z"
-  },
   {
     "rule": "eval",
     "path": "node_modules/@protobufjs/inquire/index.js",
@@ -1801,34 +1759,6 @@
     "reasonCategory": "falseMatch|",
     "updated": "2020-04-30T22:35:27.860Z"
   },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/del/node_modules/picomatch/lib/parse.js",
-    "line": "    if (tok.value || tok.output) append(tok);",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-02-14T16:45:31.703Z"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/del/node_modules/picomatch/lib/parse.js",
-    "line": "      append({ value });",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-02-14T16:45:31.703Z"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/del/node_modules/picomatch/lib/parse.js",
-    "line": "      append({ value });",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-02-14T16:45:31.703Z"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/del/node_modules/picomatch/lib/parse.js",
-    "line": "      append({ value });",
-    "reasonCategory": "falseMatch|exampleCode|otherUtilityCode|regexMatchedSafeCode|notExercisedByOurApp|ruleNeeded|usageTrusted",
-    "updated": "2022-02-14T16:45:31.703Z"
-  },
   {
     "rule": "eval",
     "path": "node_modules/depd/index.js",
@@ -2010,163 +1940,12 @@
     "reasonCategory": "falseMatch",
     "updated": "2022-06-01T22:57:44.591Z"
   },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/prompts/autocomplete.js",
-    "line": "    return this.append(ch);",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/prompts/autocomplete.js",
-    "line": "    return this.options.multiple ? super.space(ch) : this.append(ch);",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/prompts/autocomplete.js",
-    "line": "  append(ch) {",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/prompts/autocomplete.js",
-    "line": "    return this.append(ch);",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/prompts/editable.js",
-    "line": "  append(char, key) {",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/prompts/editable.js",
-    "line": "    return this.focused.editable ? this.append(char) : super.space();",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/prompts/editable.js",
-    "line": "    return this.focused.editable ? this.append(char) : super.number(char);",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/prompts/form.js",
-    "line": "    return !!char && this.append(char);",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/prompts/form.js",
-    "line": "  append(char) {",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/prompts/snippet.js",
-    "line": "      this.append(ch, key);",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/prompts/snippet.js",
-    "line": "  append(ch, key) {",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/types/number.js",
-    "line": "  append(ch) {",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/types/number.js",
-    "line": "    return super.append(ch);",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/types/number.js",
-    "line": "    return super.append(ch);",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/types/string.js",
-    "line": "        return this.append('\\n', key);",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/types/string.js",
-    "line": "    this.append(ch);",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/types/string.js",
-    "line": "  append(ch) {",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/enquirer/lib/types/string.js",
-    "line": "    this.append(str);",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
   {
     "rule": "jQuery-$(",
     "path": "node_modules/envinfo/dist/envinfo.js",
     "reasonCategory": "falseMatch",
     "updated": "2021-04-05T20:48:36.065Z"
   },
-  {
-    "rule": "jQuery-$(",
-    "path": "node_modules/espree/node_modules/acorn/dist/acorn.js",
-    "line": "  // $$('#table-binary-unicode-properties > figure > table > tbody > tr > td:nth-child(1) code').map(el => el.innerText)",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-06-04T00:50:49.405Z"
-  },
   {
     "rule": "React-ref",
     "path": "node_modules/esquery/dist/esquery.esm.min.js",
@@ -2229,13 +2008,6 @@
     "reasonCategory": "falseMatch",
     "updated": "2021-12-01T01:13:59.892Z"
   },
-  {
-    "rule": "jQuery-load(",
-    "path": "node_modules/file-entry-cache/cache.js",
-    "line": "    var cache = flatCache.load( cacheId, _path );",
-    "reasonCategory": "falseMatch",
-    "updated": "2018-09-15T00:38:04.183Z"
-  },
   {
     "rule": "jQuery-wrap(",
     "path": "node_modules/filelist/index.js",
@@ -2250,20 +2022,6 @@
     "reasonCategory": "falseMatch",
     "updated": "2020-08-25T00:30:50.619Z"
   },
-  {
-    "rule": "jQuery-load(",
-    "path": "node_modules/flat-cache/cache.js",
-    "line": "    me.load( fName, dir );",
-    "reasonCategory": "falseMatch",
-    "updated": "2018-09-15T00:38:04.183Z"
-  },
-  {
-    "rule": "jQuery-load(",
-    "path": "node_modules/flat-cache/cache.js",
-    "line": "    obj.load( docId, cacheDir );",
-    "reasonCategory": "falseMatch",
-    "updated": "2018-09-15T00:38:04.183Z"
-  },
   {
     "rule": "React-findDOMNode",
     "path": "node_modules/focus-trap-react/dist/focus-trap-react.js",
@@ -8062,34 +7820,6 @@
     "reasonCategory": "falseMatch",
     "updated": "2022-06-04T00:50:49.405Z"
   },
-  {
-    "rule": "jQuery-load(",
-    "path": "node_modules/remark-mdx/node_modules/resolve/lib/async.js",
-    "line": "        load(exts, x, loadAsFilePackage);",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-06-04T00:50:49.405Z"
-  },
-  {
-    "rule": "jQuery-load(",
-    "path": "node_modules/remark-mdx/node_modules/resolve/lib/async.js",
-    "line": "        function load(exts, x, loadPackage) {",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-06-04T00:50:49.405Z"
-  },
-  {
-    "rule": "jQuery-load(",
-    "path": "node_modules/remark-mdx/node_modules/resolve/lib/async.js",
-    "line": "                    if (r) return load(",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-06-04T00:50:49.405Z"
-  },
-  {
-    "rule": "jQuery-load(",
-    "path": "node_modules/remark-mdx/node_modules/resolve/lib/async.js",
-    "line": "                load(exts.slice(1), x, pkg);",
-    "reasonCategory": "falseMatch",
-    "updated": "2022-06-04T00:50:49.405Z"
-  },
   {
     "rule": "jQuery-prepend(",
     "path": "node_modules/remark-mdx/node_modules/source-map/dist/source-map.debug.js",
@@ -8255,14 +7985,6 @@
     "reasonCategory": "falseMatch",
     "updated": "2022-02-11T21:58:24.827Z"
   },
-  {
-    "rule": "jQuery-append(",
-    "path": "node_modules/table/dist/createStream.js",
-    "line": "        return append(row, columnWidthIndex, config);",
-    "reasonCategory": "falseMatch",
-    "updated": "2020-08-26T00:10:28.628Z",
-    "reasonDetail": "isn't jquery"
-  },
   {
     "rule": "jQuery-append(",
     "path": "node_modules/tar-stream/extract.js",
@@ -9043,13 +8765,6 @@
     "reasonCategory": "usageTrusted",
     "updated": "2022-08-19T17:09:38.534Z"
   },
-  {
-    "rule": "React-useRef",
-    "path": "ts/components/ListView.tsx",
-    "line": "  const listRef = useRef<null | List>(null);",
-    "reasonCategory": "usageTrusted",
-    "updated": "2022-11-11T17:11:07.659Z"
-  },
   {
     "rule": "React-useRef",
     "path": "ts/components/DirectCallRemoteParticipant.tsx",
@@ -9133,7 +8848,7 @@
   {
     "rule": "React-useRef",
     "path": "ts/components/Input.tsx",
-    "line": "    const innerRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(",
+    "line": "    const innerRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);",
     "reasonCategory": "usageTrusted",
     "updated": "2021-07-30T16:57:33.618Z"
   },
@@ -9200,6 +8915,13 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-10-11T21:21:08.188Z"
   },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/ListView.tsx",
+    "line": "  const listRef = useRef<null | List>(null);",
+    "reasonCategory": "usageTrusted",
+    "updated": "2022-11-11T17:11:07.659Z"
+  },
   {
     "rule": "React-createRef",
     "path": "ts/components/MainHeader.tsx",
diff --git a/ts/util/lint/linter.ts b/ts/util/lint/linter.ts
index 6dd1f9ad9..46cf73d20 100644
--- a/ts/util/lint/linter.ts
+++ b/ts/util/lint/linter.ts
@@ -110,6 +110,9 @@ const excludedFilesRegexp = RegExp(
     // Modules used only in test/development scenarios
     '^node_modules/@babel/.+',
     '^node_modules/@chanzuckerberg/axe-storybook-testing/.+',
+    '^node_modules/@humanwhocodes/config-array/.+',
+    '^node_modules/@mixer/parallel-prettier/.+',
+    '^node_modules/@eslint/.+',
     '^node_modules/@signalapp/mock-server/.+',
     '^node_modules/@svgr/.+',
     '^node_modules/@types/.+',
@@ -165,17 +168,21 @@ const excludedFilesRegexp = RegExp(
     '^node_modules/esbuild/.+',
     '^node_modules/escodegen/.+',
     '^node_modules/eslint.+',
+    '^node_modules/espree.+',
     '^node_modules/@typescript-eslint.+',
     '^node_modules/esprima/.+',
     '^node_modules/express/.+',
     '^node_modules/fast-glob/.+',
+    '^node_modules/file-entry-cache/.+',
     '^node_modules/file-loader/.+',
     '^node_modules/file-system-cache/.+', // Currently only used in storybook
     '^node_modules/finalhandler/.+',
+    '^node_modules/flat-cache/.+',
     '^node_modules/foreground-chat/.+',
     '^node_modules/fsevents/.+',
     '^node_modules/gauge/.+',
     '^node_modules/global-agent/.+',
+    '^node_modules/globby/.+',
     '^node_modules/globule/.+',
     '^node_modules/handle-thing/.+',
     '^node_modules/handlebars/.+', // Used by nyc#istanbul-reports
@@ -189,6 +196,7 @@ const excludedFilesRegexp = RegExp(
     '^node_modules/jimp/.+',
     '^node_modules/jquery/.+',
     '^node_modules/jake/.+',
+    '^node_modules/js-sdsl/.+',
     '^node_modules/jss-global/.+',
     '^node_modules/jss/.+',
     '^node_modules/liftup/.+',
@@ -203,6 +211,7 @@ const excludedFilesRegexp = RegExp(
     '^node_modules/needle/.+',
     '^node_modules/nise/.+',
     '^node_modules/node-gyp/.+',
+    '^node_modules/normalize-package-data/.+',
     '^node_modules/npm-run-all/.+',
     '^node_modules/nsp/.+',
     '^node_modules/nyc/.+',
@@ -217,12 +226,14 @@ const excludedFilesRegexp = RegExp(
     '^node_modules/prop-types/.+',
     '^node_modules/protobufjs/cli/.+',
     '^node_modules/ramda/.+',
+    '^node_modules/rambda/.+',
     '^node_modules/react-dev-utils/.+',
     '^node_modules/react-docgen/.+',
     '^node_modules/react-error-overlay/.+',
     '^node_modules/read-config-file/.+', // Used by electron-builder
     '^node_modules/read-pkg/.+', // Used by npm-run-all
     '^node_modules/recast/.+',
+    '^node_modules/rechoir/.+',
     '^node_modules/reduce-css-calc/.+',
     '^node_modules/requizzle/.+',
     '^node_modules/resolve/.+',
@@ -395,7 +406,7 @@ async function main(argv: ReadonlyArray<string>): Promise<void> {
               exception.rule === rule.name &&
               exception.path === relativePath &&
               (line.length < 300
-                ? exception.line === line
+                ? exception.line?.trim() === line.trim()
                 : exception.line === undefined)
           );
 
diff --git a/ts/views/conversation_view.tsx b/ts/views/conversation_view.tsx
index a327b8cd6..728c4188c 100644
--- a/ts/views/conversation_view.tsx
+++ b/ts/views/conversation_view.tsx
@@ -1433,6 +1433,7 @@ export class ConversationView extends window.Backbone.View<ConversationModel> {
     const view = new ReactWrapperView({
       className: 'panel',
       // We present an empty panel briefly, while we wait for props to load.
+      // eslint-disable-next-line react/jsx-no-useless-fragment
       JSX: <></>,
       onClose: () => {
         unsubscribe();
diff --git a/yarn.lock b/yarn.lock
index 18651e0ed..2e3886de6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1170,7 +1170,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.16.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.5.0":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.5.0":
   version "7.16.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
   integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
@@ -1184,6 +1184,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.18.9":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.1.tgz#1148bb33ab252b165a06698fde7576092a78b4a9"
+  integrity sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==
+  dependencies:
+    regenerator-runtime "^0.13.10"
+
 "@babel/runtime@^7.9.2":
   version "7.17.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
@@ -1445,6 +1452,21 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.8.tgz#d64575fc46bf4eb689352aa9f8a139271b6e1647"
   integrity sha512-pE5RQsOTSERCtfZdfCT25wzo7dfhOSlhAXcsZmuvRYhendOv7djcdvtINdnDp2DAjP17WXlBB4nBO6sHLczmsg==
 
+"@eslint/eslintrc@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95"
+  integrity sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.4.0"
+    globals "^13.15.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
 "@formatjs/ecma402-abstract@1.11.4":
   version "1.11.4"
   resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz#b962dfc4ae84361f9f08fbce411b4e4340930eda"
@@ -1559,6 +1581,25 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
+"@humanwhocodes/config-array@^0.11.6":
+  version "0.11.7"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.7.tgz#38aec044c6c828f6ed51d5d7ae3d9b9faf6dbb0f"
+  integrity sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.1"
+    debug "^4.1.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+
 "@indutny/frameless-titlebar@2.3.5":
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/@indutny/frameless-titlebar/-/frameless-titlebar-2.3.5.tgz#7d4908d43a753629c7d48d97dbff56f93a4f64cd"
@@ -1707,11 +1748,24 @@
     "@nodelib/fs.stat" "2.0.3"
     run-parallel "^1.1.9"
 
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
 "@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3"
   integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==
 
+"@nodelib/fs.stat@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
 "@nodelib/fs.stat@^1.1.2":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
@@ -1725,6 +1779,14 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
+"@nodelib/fs.walk@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
 "@npmcli/fs@^1.0.0":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-1.1.1.tgz#72f719fe935e687c56a4faecf3c03d06ba593257"
@@ -3386,7 +3448,7 @@
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.0.tgz#3494ce97358e2675e24e97a747ec23478eeaf8b6"
   integrity sha512-UGEe/6RsNAxgWdknhzFZbCxuYc5I7b/YEKlfKbo+76SM8CJzGs7XKCj7zyugXViRbKYpXhSXhCYVQZL5tmDbpQ==
 
-"@types/json-schema@*", "@types/json-schema@^7.0.6", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.9":
+"@types/json-schema@*", "@types/json-schema@^7.0.6", "@types/json-schema@^7.0.9":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
@@ -3679,6 +3741,11 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-5.5.0.tgz#146c2a29ee7d3bae4bf2fcb274636e264c813c45"
   integrity sha512-41qEJgBH/TWgo5NFSvBCJ1qkoi3Q6ONSF2avrHq1LVEZfYpdHmj0y9SuTK+u9ZhG1sYQKBL1AWXKyLWP4RaUoQ==
 
+"@types/semver@^7.3.12":
+  version "7.3.13"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91"
+  integrity sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==
+
 "@types/serve-index@^1.9.1":
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.1.tgz#1b5e85370a192c01ec6cec4735cf2917337a6278"
@@ -3875,145 +3942,88 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/eslint-plugin@5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.6.0.tgz#efd8668b3d6627c46ce722c2afe813928fe120a0"
-  integrity sha512-MIbeMy5qfLqtgs1hWd088k1hOuRsN9JrHUPwVVKCD99EOUqScd7SrwoZl4Gso05EAP9w1kvLWUVGJOVpRPkDPA==
+"@typescript-eslint/eslint-plugin@5.43.0", "@typescript-eslint/eslint-plugin@^5.6.0":
+  version "5.43.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.43.0.tgz#4a5248eb31b454715ddfbf8cfbf497529a0a78bc"
+  integrity sha512-wNPzG+eDR6+hhW4yobEmpR36jrqqQv1vxBq5LJO3fBAktjkvekfr4BRl+3Fn1CM/A+s8/EiGUbOMDoYqWdbtXA==
   dependencies:
-    "@typescript-eslint/experimental-utils" "5.6.0"
-    "@typescript-eslint/scope-manager" "5.6.0"
-    debug "^4.3.2"
-    functional-red-black-tree "^1.0.1"
-    ignore "^5.1.8"
+    "@typescript-eslint/scope-manager" "5.43.0"
+    "@typescript-eslint/type-utils" "5.43.0"
+    "@typescript-eslint/utils" "5.43.0"
+    debug "^4.3.4"
+    ignore "^5.2.0"
+    natural-compare-lite "^1.4.0"
     regexpp "^3.2.0"
-    semver "^7.3.5"
+    semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/eslint-plugin@^4.7.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz#c24dc7c8069c7706bc40d99f6fa87edcb2005276"
-  integrity sha512-aINiAxGVdOl1eJyVjaWn/YcVAq4Gi/Yo35qHGCnqbWVz61g39D0h23veY/MA0rFFGfxK7TySg2uwDeNv+JgVpg==
+"@typescript-eslint/parser@5.43.0", "@typescript-eslint/parser@^5.6.0":
+  version "5.43.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.43.0.tgz#9c86581234b88f2ba406f0b99a274a91c11630fd"
+  integrity sha512-2iHUK2Lh7PwNUlhFxxLI2haSDNyXvebBO9izhjhMoDC+S3XI9qt2DGFUsiJ89m2k7gGYch2aEpYqV5F/+nwZug==
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.33.0"
-    "@typescript-eslint/scope-manager" "4.33.0"
-    debug "^4.3.1"
-    functional-red-black-tree "^1.0.1"
-    ignore "^5.1.8"
-    regexpp "^3.1.0"
-    semver "^7.3.5"
+    "@typescript-eslint/scope-manager" "5.43.0"
+    "@typescript-eslint/types" "5.43.0"
+    "@typescript-eslint/typescript-estree" "5.43.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.43.0.tgz#566e46303392014d5d163704724872e1f2dd3c15"
+  integrity sha512-XNWnGaqAtTJsUiZaoiGIrdJYHsUOd3BZ3Qj5zKp9w6km6HsrjPk/TGZv0qMTWyWj0+1QOqpHQ2gZOLXaGA9Ekw==
+  dependencies:
+    "@typescript-eslint/types" "5.43.0"
+    "@typescript-eslint/visitor-keys" "5.43.0"
+
+"@typescript-eslint/type-utils@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.43.0.tgz#91110fb827df5161209ecca06f70d19a96030be6"
+  integrity sha512-K21f+KY2/VvYggLf5Pk4tgBOPs2otTaIHy2zjclo7UZGLyFH86VfUOm5iq+OtDtxq/Zwu2I3ujDBykVW4Xtmtg==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "5.43.0"
+    "@typescript-eslint/utils" "5.43.0"
+    debug "^4.3.4"
     tsutils "^3.21.0"
 
-"@typescript-eslint/experimental-utils@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz#6f2a786a4209fa2222989e9380b5331b2810f7fd"
-  integrity sha512-zeQjOoES5JFjTnAhI5QY7ZviczMzDptls15GFsI6jyUOq0kOf9+WonkhtlIhh0RgHRnqj5gdNxW5j1EvAyYg6Q==
-  dependencies:
-    "@types/json-schema" "^7.0.7"
-    "@typescript-eslint/scope-manager" "4.33.0"
-    "@typescript-eslint/types" "4.33.0"
-    "@typescript-eslint/typescript-estree" "4.33.0"
-    eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
+"@typescript-eslint/types@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.43.0.tgz#e4ddd7846fcbc074325293515fa98e844d8d2578"
+  integrity sha512-jpsbcD0x6AUvV7tyOlyvon0aUsQpF8W+7TpJntfCUWU1qaIKu2K34pMwQKSzQH8ORgUrGYY6pVIh1Pi8TNeteg==
 
-"@typescript-eslint/experimental-utils@5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.6.0.tgz#f3a5960f2004abdcac7bb81412bafc1560841c23"
-  integrity sha512-VDoRf3Qj7+W3sS/ZBXZh3LBzp0snDLEgvp6qj0vOAIiAPM07bd5ojQ3CTzF/QFl5AKh7Bh1ycgj6lFBJHUt/DA==
+"@typescript-eslint/typescript-estree@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.43.0.tgz#b6883e58ba236a602c334be116bfc00b58b3b9f2"
+  integrity sha512-BZ1WVe+QQ+igWal2tDbNg1j2HWUkAa+CVqdU79L4HP9izQY6CNhXfkNwd1SS4+sSZAP/EthI1uiCSY/+H0pROg==
+  dependencies:
+    "@typescript-eslint/types" "5.43.0"
+    "@typescript-eslint/visitor-keys" "5.43.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.43.0.tgz#00fdeea07811dbdf68774a6f6eacfee17fcc669f"
+  integrity sha512-8nVpA6yX0sCjf7v/NDfeaOlyaIIqL7OaIGOWSPFqUKK59Gnumd3Wa+2l8oAaYO2lk0sO+SbWFWRSvhu8gLGv4A==
   dependencies:
     "@types/json-schema" "^7.0.9"
-    "@typescript-eslint/scope-manager" "5.6.0"
-    "@typescript-eslint/types" "5.6.0"
-    "@typescript-eslint/typescript-estree" "5.6.0"
+    "@types/semver" "^7.3.12"
+    "@typescript-eslint/scope-manager" "5.43.0"
+    "@typescript-eslint/types" "5.43.0"
+    "@typescript-eslint/typescript-estree" "5.43.0"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
+    semver "^7.3.7"
 
-"@typescript-eslint/parser@5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.6.0.tgz#11677324659641400d653253c03dcfbed468d199"
-  integrity sha512-YVK49NgdUPQ8SpCZaOpiq1kLkYRPMv9U5gcMrywzI8brtwZjr/tG3sZpuHyODt76W/A0SufNjYt9ZOgrC4tLIQ==
+"@typescript-eslint/visitor-keys@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.43.0.tgz#cbbdadfdfea385310a20a962afda728ea106befa"
+  integrity sha512-icl1jNH/d18OVHLfcwdL3bWUKsBeIiKYTGxMJCoGe7xFht+E4QgzOqoWYrU8XSLJWhVw8nTacbm03v23J/hFTg==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.6.0"
-    "@typescript-eslint/types" "5.6.0"
-    "@typescript-eslint/typescript-estree" "5.6.0"
-    debug "^4.3.2"
-
-"@typescript-eslint/parser@^4.7.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.33.0.tgz#dfe797570d9694e560528d18eecad86c8c744899"
-  integrity sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==
-  dependencies:
-    "@typescript-eslint/scope-manager" "4.33.0"
-    "@typescript-eslint/types" "4.33.0"
-    "@typescript-eslint/typescript-estree" "4.33.0"
-    debug "^4.3.1"
-
-"@typescript-eslint/scope-manager@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz#d38e49280d983e8772e29121cf8c6e9221f280a3"
-  integrity sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==
-  dependencies:
-    "@typescript-eslint/types" "4.33.0"
-    "@typescript-eslint/visitor-keys" "4.33.0"
-
-"@typescript-eslint/scope-manager@5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.6.0.tgz#9dd7f007dc8f3a34cdff6f79f5eaab27ae05157e"
-  integrity sha512-1U1G77Hw2jsGWVsO2w6eVCbOg0HZ5WxL/cozVSTfqnL/eB9muhb8THsP0G3w+BB5xAHv9KptwdfYFAUfzcIh4A==
-  dependencies:
-    "@typescript-eslint/types" "5.6.0"
-    "@typescript-eslint/visitor-keys" "5.6.0"
-
-"@typescript-eslint/types@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72"
-  integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==
-
-"@typescript-eslint/types@5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.6.0.tgz#745cb1b59daadcc1f32f7be95f0f68accf38afdd"
-  integrity sha512-OIZffked7mXv4mXzWU5MgAEbCf9ecNJBKi+Si6/I9PpTaj+cf2x58h2oHW5/P/yTnPkKaayfjhLvx+crnl5ubA==
-
-"@typescript-eslint/typescript-estree@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz#0dfb51c2908f68c5c08d82aefeaf166a17c24609"
-  integrity sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==
-  dependencies:
-    "@typescript-eslint/types" "4.33.0"
-    "@typescript-eslint/visitor-keys" "4.33.0"
-    debug "^4.3.1"
-    globby "^11.0.3"
-    is-glob "^4.0.1"
-    semver "^7.3.5"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/typescript-estree@5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.6.0.tgz#dfbb19c9307fdd81bd9c650c67e8397821d7faf0"
-  integrity sha512-92vK5tQaE81rK7fOmuWMrSQtK1IMonESR+RJR2Tlc7w4o0MeEdjgidY/uO2Gobh7z4Q1hhS94Cr7r021fMVEeA==
-  dependencies:
-    "@typescript-eslint/types" "5.6.0"
-    "@typescript-eslint/visitor-keys" "5.6.0"
-    debug "^4.3.2"
-    globby "^11.0.4"
-    is-glob "^4.0.3"
-    semver "^7.3.5"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/visitor-keys@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd"
-  integrity sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==
-  dependencies:
-    "@typescript-eslint/types" "4.33.0"
-    eslint-visitor-keys "^2.0.0"
-
-"@typescript-eslint/visitor-keys@5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.6.0.tgz#3e36509e103fe9713d8f035ac977235fd63cb6e6"
-  integrity sha512-1p7hDp5cpRFUyE3+lvA74egs+RWSgumrBpzBCDzfTFv0aQ7lIeay80yU0hIxgAhwQ6PcasW35kaOCyDOv6O/Ng==
-  dependencies:
-    "@typescript-eslint/types" "5.6.0"
-    eslint-visitor-keys "^3.0.0"
+    "@typescript-eslint/types" "5.43.0"
+    eslint-visitor-keys "^3.3.0"
 
 "@ungap/promise-all-settled@1.1.2":
   version "1.1.2"
@@ -4463,12 +4473,7 @@ acorn-import-assertions@^1.7.6:
   resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz#ba2b5939ce62c238db6d93d81c9b111b29b855e9"
   integrity sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==
 
-acorn-jsx@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
-  integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
-
-acorn-jsx@^5.3.1:
+acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
@@ -4488,7 +4493,7 @@ acorn@^6.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
   integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
 
-acorn@^7.4.0, acorn@^7.4.1:
+acorn@^7.4.1:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -4498,6 +4503,11 @@ acorn@^8.0.4, acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
+acorn@^8.8.0:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
+  integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
+
 address@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -4658,7 +4668,7 @@ ansi-styles@^2.2.1:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
   integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
 
-ansi-styles@^3.2.0, ansi-styles@^3.2.1:
+ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
   integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
@@ -4854,7 +4864,7 @@ array-flatten@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.1.tgz#426bb9da84090c1838d812c8150af20a8331e296"
 
-array-includes@^3.0.3, array-includes@^3.1.1, array-includes@^3.1.3, array-includes@^3.1.4:
+array-includes@^3.0.3, array-includes@^3.1.3, array-includes@^3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.4.tgz#f5b493162c760f3539631f005ba2bb46acb45ba9"
   integrity sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==
@@ -4865,6 +4875,17 @@ array-includes@^3.0.3, array-includes@^3.1.1, array-includes@^3.1.3, array-inclu
     get-intrinsic "^1.1.1"
     is-string "^1.0.7"
 
+array-includes@^3.1.5:
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f"
+  integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    get-intrinsic "^1.1.3"
+    is-string "^1.0.7"
+
 array-move@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-move/-/array-move-2.1.0.tgz#b4e9fc8d6a580bc97dcad408e0539c61b4b7ed7e"
@@ -4894,7 +4915,7 @@ array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
 
-array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.3, array.prototype.flat@^1.2.5:
+array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz#07e0975d84bbc7c48cd1879d609e682598d33e13"
   integrity sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==
@@ -4903,7 +4924,7 @@ array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.3, array.prototype.flat@^
     define-properties "^1.1.3"
     es-abstract "^1.19.0"
 
-array.prototype.flatmap@^1.2.1, array.prototype.flatmap@^1.2.3, array.prototype.flatmap@^1.2.5:
+array.prototype.flatmap@^1.2.1:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz#908dc82d8a406930fdf38598d51e7411d18d4446"
   integrity sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==
@@ -4912,6 +4933,16 @@ array.prototype.flatmap@^1.2.1, array.prototype.flatmap@^1.2.3, array.prototype.
     define-properties "^1.1.3"
     es-abstract "^1.19.0"
 
+array.prototype.flatmap@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz#1aae7903c2100433cb8261cd4ed310aab5c4a183"
+  integrity sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    es-shim-unscopables "^1.0.0"
+
 arraybuffer-loader@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/arraybuffer-loader/-/arraybuffer-loader-1.0.3.tgz#0ef589c60414f1b489e7bda0ebafd2fe329f0a4f"
@@ -4987,11 +5018,6 @@ ast-types@^0.14.2:
   dependencies:
     tslib "^2.0.1"
 
-astral-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
-  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
-
 async-each@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
@@ -5071,10 +5097,10 @@ axe-core@^4.2.0:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.2.tgz#dcf7fb6dea866166c3eab33d68208afe4d5f670c"
   integrity sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==
 
-axe-core@^4.3.5:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.3.5.tgz#78d6911ba317a8262bfee292aeafcc1e04b49cc5"
-  integrity sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==
+axe-core@^4.4.3:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.5.2.tgz#823fdf491ff717ac3c58a52631d4206930c1d9f7"
+  integrity sha512-u2MVsXfew5HBvjsczCv+xlwdNnB1oQR9HlAcsejZttNjKKSkeDNVwB1vMThIUIFI9GoT57Vtk8iQLwqOfAkboA==
 
 axobject-query@^2.2.0:
   version "2.2.0"
@@ -6477,10 +6503,6 @@ constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
 
-contains-path@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
-
 content-disposition@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
@@ -6850,10 +6872,10 @@ d@1:
   dependencies:
     es5-ext "^0.10.9"
 
-damerau-levenshtein@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz#64368003512a1a6992593741a09a9d31a836f55d"
-  integrity sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==
+damerau-levenshtein@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
 danger@11.1.2:
   version "11.1.2"
@@ -6931,7 +6953,7 @@ debug@3.1.0:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@4.3.2, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2:
+debug@4, debug@4.3.2, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
   integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
@@ -7078,6 +7100,14 @@ define-properties@^1.1.2, define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
+define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+  dependencies:
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
 define-property@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
@@ -7287,13 +7317,6 @@ dns-txt@^2.0.2:
   dependencies:
     buffer-indexof "^1.0.0"
 
-doctrine@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
-  dependencies:
-    esutils "^2.0.2"
-    isarray "^1.0.0"
-
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -7678,13 +7701,6 @@ enhanced-resolve@^5.9.3:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-enquirer@^2.3.5:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
-  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
-  dependencies:
-    ansi-colors "^4.1.1"
-
 entities@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
@@ -7756,6 +7772,36 @@ es-abstract@^1.13.0, es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.4.
     string.prototype.trimstart "^1.0.4"
     unbox-primitive "^1.0.1"
 
+es-abstract@^1.20.4:
+  version "1.20.4"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.4.tgz#1d103f9f8d78d4cf0713edcd6d0ed1a46eed5861"
+  integrity sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.1.3"
+    get-symbol-description "^1.0.0"
+    has "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.7"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.4.3"
+    safe-regex-test "^1.0.0"
+    string.prototype.trimend "^1.0.5"
+    string.prototype.trimstart "^1.0.5"
+    unbox-primitive "^1.0.2"
+
 es-module-lexer@^0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.4.1.tgz#dda8c6a14d8f340a24e34331e0fab0cb50438e0e"
@@ -7766,6 +7812,13 @@ es-module-lexer@^0.9.0:
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
   integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
 
+es-shim-unscopables@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
+  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  dependencies:
+    has "^1.0.3"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -8027,45 +8080,44 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-airbnb-base@^14.2.1:
-  version "14.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.1.tgz#8a2eb38455dc5a312550193b319cdaeef042cd1e"
-  integrity sha512-GOrQyDtVEc1Xy20U7vsB2yAoB4nBlfH5HZJeatRXHleO+OS5Ot+MWij4Dpltw4/DyIkqUfqz1epfhVR5XWWQPA==
+eslint-config-airbnb-base@^15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz#6b09add90ac79c2f8d723a2580e07f3925afd236"
+  integrity sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==
   dependencies:
     confusing-browser-globals "^1.0.10"
     object.assign "^4.1.2"
-    object.entries "^1.1.2"
+    object.entries "^1.1.5"
+    semver "^6.3.0"
 
-eslint-config-airbnb-typescript-prettier@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-typescript-prettier/-/eslint-config-airbnb-typescript-prettier-4.2.0.tgz#54101963a3ec868c04d2f685f9ffcf04052d5cea"
-  integrity sha512-t2glck+2p/oAx0ibhZhWSU4xrJZtef6zrLH/tLNzS/JmfwYoGHWRQBT53p4lrLqk57DhE+GG9qh+6WN6IkiYvA==
+eslint-config-airbnb-typescript-prettier@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-typescript-prettier/-/eslint-config-airbnb-typescript-prettier-5.0.0.tgz#ca97823540d121aaeb64b662a2ca7eda8482c4c8"
+  integrity sha512-SVphutDwxEJedWKHF+q6FDC4+aKaOn5R8hOBxCpfWnn5qCYAChngPf86Svz78bHgMgbZfohwHPbQeETTPUN9Wg==
   dependencies:
-    "@typescript-eslint/eslint-plugin" "^4.7.0"
-    "@typescript-eslint/parser" "^4.7.0"
-    eslint-config-airbnb "^18.2.1"
+    "@typescript-eslint/eslint-plugin" "^5.6.0"
+    "@typescript-eslint/parser" "^5.6.0"
+    eslint-config-airbnb "^19.0.2"
     eslint-config-prettier "^6.15.0"
-    eslint-plugin-import "^2.22.1"
-    eslint-plugin-jsx-a11y "^6.4.1"
+    eslint-plugin-import "^2.25.3"
+    eslint-plugin-jsx-a11y "^6.5.1"
     eslint-plugin-prettier "^3.1.4"
-    eslint-plugin-react "^7.21.5"
-    eslint-plugin-react-hooks "^4.2.0"
+    eslint-plugin-react "^7.27.1"
+    eslint-plugin-react-hooks "^4.3.0"
 
-eslint-config-airbnb@^18.2.1:
-  version "18.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.2.1.tgz#b7fe2b42f9f8173e825b73c8014b592e449c98d9"
-  integrity sha512-glZNDEZ36VdlZWoxn/bUR1r/sdFKPd1mHPbqUtkctgNG4yT2DLLtJ3D+yCV+jzZCc2V1nBVkmdknOJBZ5Hc0fg==
+eslint-config-airbnb@^19.0.2:
+  version "19.0.4"
+  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz#84d4c3490ad70a0ffa571138ebcdea6ab085fdc3"
+  integrity sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==
   dependencies:
-    eslint-config-airbnb-base "^14.2.1"
+    eslint-config-airbnb-base "^15.0.0"
     object.assign "^4.1.2"
-    object.entries "^1.1.2"
+    object.entries "^1.1.5"
 
-eslint-config-prettier@6.11.0:
-  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz#f6d2238c1290d01c859a8b5c1f7d352a0b0da8b1"
-  integrity sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==
-  dependencies:
-    get-stdin "^6.0.0"
+eslint-config-prettier@8.5.0:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
+  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
 
 eslint-config-prettier@^6.15.0:
   version "6.15.0"
@@ -8074,7 +8126,7 @@ eslint-config-prettier@^6.15.0:
   dependencies:
     get-stdin "^6.0.0"
 
-eslint-import-resolver-node@^0.3.3, eslint-import-resolver-node@^0.3.6:
+eslint-import-resolver-node@^0.3.6:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"
   integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
@@ -8082,83 +8134,63 @@ eslint-import-resolver-node@^0.3.3, eslint-import-resolver-node@^0.3.6:
     debug "^3.2.7"
     resolve "^1.20.0"
 
-eslint-module-utils@^2.6.0, eslint-module-utils@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.1.tgz#b435001c9f8dd4ab7f6d0efcae4b9696d4c24b7c"
-  integrity sha512-fjoetBXQZq2tSTWZ9yWVl2KuFrTZZH3V+9iD1V1RfpDgxzJR+mPd/KZmMiA8gbPqdBzpNiEHOuT7IYEWxrH0zQ==
+eslint-module-utils@^2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz#4f3e41116aaf13a20792261e61d3a2e7e0583974"
+  integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
   dependencies:
     debug "^3.2.7"
-    find-up "^2.1.0"
-    pkg-dir "^2.0.0"
 
-eslint-plugin-import@2.22.0:
-  version "2.22.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.0.tgz#92f7736fe1fde3e2de77623c838dd992ff5ffb7e"
-  integrity sha512-66Fpf1Ln6aIS5Gr/55ts19eUuoDhAbZgnr6UxK5hbDx6l/QgQgx61AePq+BV4PP2uXQFClgMVzep5zZ94qqsxg==
-  dependencies:
-    array-includes "^3.1.1"
-    array.prototype.flat "^1.2.3"
-    contains-path "^0.1.0"
-    debug "^2.6.9"
-    doctrine "1.5.0"
-    eslint-import-resolver-node "^0.3.3"
-    eslint-module-utils "^2.6.0"
-    has "^1.0.3"
-    minimatch "^3.0.4"
-    object.values "^1.1.1"
-    read-pkg-up "^2.0.0"
-    resolve "^1.17.0"
-    tsconfig-paths "^3.9.0"
-
-eslint-plugin-import@^2.22.1:
-  version "2.25.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.25.3.tgz#a554b5f66e08fb4f6dc99221866e57cfff824766"
-  integrity sha512-RzAVbby+72IB3iOEL8clzPLzL3wpDrlwjsTBAQXgyp5SeTqqY+0bFubwuo+y/HLhNZcXV4XqTBO4LGsfyHIDXg==
+eslint-plugin-import@2.26.0, eslint-plugin-import@^2.25.3:
+  version "2.26.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"
+  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
   dependencies:
     array-includes "^3.1.4"
     array.prototype.flat "^1.2.5"
     debug "^2.6.9"
     doctrine "^2.1.0"
     eslint-import-resolver-node "^0.3.6"
-    eslint-module-utils "^2.7.1"
+    eslint-module-utils "^2.7.3"
     has "^1.0.3"
-    is-core-module "^2.8.0"
+    is-core-module "^2.8.1"
     is-glob "^4.0.3"
-    minimatch "^3.0.4"
+    minimatch "^3.1.2"
     object.values "^1.1.5"
-    resolve "^1.20.0"
-    tsconfig-paths "^3.11.0"
+    resolve "^1.22.0"
+    tsconfig-paths "^3.14.1"
 
-eslint-plugin-jsx-a11y@^6.4.1:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz#cdbf2df901040ca140b6ec14715c988889c2a6d8"
-  integrity sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==
+eslint-plugin-jsx-a11y@^6.5.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz#93736fc91b83fdc38cc8d115deedfc3091aef1ff"
+  integrity sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==
   dependencies:
-    "@babel/runtime" "^7.16.3"
+    "@babel/runtime" "^7.18.9"
     aria-query "^4.2.2"
-    array-includes "^3.1.4"
+    array-includes "^3.1.5"
     ast-types-flow "^0.0.7"
-    axe-core "^4.3.5"
+    axe-core "^4.4.3"
     axobject-query "^2.2.0"
-    damerau-levenshtein "^1.0.7"
+    damerau-levenshtein "^1.0.8"
     emoji-regex "^9.2.2"
     has "^1.0.3"
-    jsx-ast-utils "^3.2.1"
+    jsx-ast-utils "^3.3.2"
     language-tags "^1.0.5"
-    minimatch "^3.0.4"
+    minimatch "^3.1.2"
+    semver "^6.3.0"
 
-eslint-plugin-mocha@9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-mocha/-/eslint-plugin-mocha-9.0.0.tgz#b4457d066941eecb070dc06ed301c527d9c61b60"
-  integrity sha512-d7knAcQj1jPCzZf3caeBIn3BnW6ikcvfz0kSqQpwPYcVGLoJV5sz0l0OJB2LR8I7dvTDbqq1oV6ylhSgzA10zg==
+eslint-plugin-mocha@10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-mocha/-/eslint-plugin-mocha-10.1.0.tgz#69325414f875be87fb2cb00b2ef33168d4eb7c8d"
+  integrity sha512-xLqqWUF17llsogVOC+8C6/jvQ+4IoOREbN7ZCHuOHuD6cT5cDD4h7f2LgsZuzMAiwswWE21tO7ExaknHVDrSkw==
   dependencies:
     eslint-utils "^3.0.0"
-    ramda "^0.27.1"
+    rambda "^7.1.0"
 
-eslint-plugin-more@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-more/-/eslint-plugin-more-1.0.0.tgz#5cd77e7966c56de57f6626e9b8194203bd58b496"
-  integrity sha512-lZ5Y8q6S9cS6QA2NJuh1TZ+p79Y91yjOuXenbkuWR+ObfGMTtYyIo4Sc+FToWvH3tSFuoRDVvZhltPK1O5e33g==
+eslint-plugin-more@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-more/-/eslint-plugin-more-1.0.5.tgz#667bffc2a64bde2d48b98c8faa111e213b2f873f"
+  integrity sha512-zjDza5jeNBHWf8ZezyW2Llk99abndcGlSz9GIKgVOGwISx0m+f4QoZAapjSmUjKSxHvmOa7Lt68Pk8XbRzWb7w==
 
 eslint-plugin-prettier@^3.1.4:
   version "3.1.4"
@@ -8167,49 +8199,32 @@ eslint-plugin-prettier@^3.1.4:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-react-hooks@^4.2.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
-  integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
+eslint-plugin-react-hooks@^4.3.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
-eslint-plugin-react@7.20.6:
-  version "7.20.6"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.20.6.tgz#4d7845311a93c463493ccfa0a19c9c5d0fd69f60"
-  integrity sha512-kidMTE5HAEBSLu23CUDvj8dc3LdBU0ri1scwHBZjI41oDv4tjsWZKU7MQccFzH1QYPYhsnTF2ovh7JlcIcmxgg==
+eslint-plugin-react@7.31.10, eslint-plugin-react@^7.27.1:
+  version "7.31.10"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.31.10.tgz#6782c2c7fe91c09e715d536067644bbb9491419a"
+  integrity sha512-e4N/nc6AAlg4UKW/mXeYWd3R++qUano5/o+t+wnWxIf+bLsOaH3a4q74kX3nDjYym3VBN4HyO9nEn1GcAqgQOA==
   dependencies:
-    array-includes "^3.1.1"
-    array.prototype.flatmap "^1.2.3"
-    doctrine "^2.1.0"
-    has "^1.0.3"
-    jsx-ast-utils "^2.4.1"
-    object.entries "^1.1.2"
-    object.fromentries "^2.0.2"
-    object.values "^1.1.1"
-    prop-types "^15.7.2"
-    resolve "^1.17.0"
-    string.prototype.matchall "^4.0.2"
-
-eslint-plugin-react@^7.21.5:
-  version "7.27.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.27.1.tgz#469202442506616f77a854d91babaae1ec174b45"
-  integrity sha512-meyunDjMMYeWr/4EBLTV1op3iSG3mjT/pz5gti38UzfM4OPpNc2m0t2xvKCOMU5D6FSdd34BIMFOvQbW+i8GAA==
-  dependencies:
-    array-includes "^3.1.4"
-    array.prototype.flatmap "^1.2.5"
+    array-includes "^3.1.5"
+    array.prototype.flatmap "^1.3.0"
     doctrine "^2.1.0"
     estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
-    minimatch "^3.0.4"
+    minimatch "^3.1.2"
     object.entries "^1.1.5"
     object.fromentries "^2.0.5"
-    object.hasown "^1.1.0"
+    object.hasown "^1.1.1"
     object.values "^1.1.5"
-    prop-types "^15.7.2"
+    prop-types "^15.8.1"
     resolve "^2.0.0-next.3"
     semver "^6.3.0"
-    string.prototype.matchall "^4.0.6"
+    string.prototype.matchall "^4.0.7"
 
-eslint-scope@5.1.1, eslint-scope@^5.1.0, eslint-scope@^5.1.1:
+eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
@@ -8225,12 +8240,13 @@ eslint-scope@^4.0.3:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-utils@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
-  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+eslint-scope@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.1.tgz#fff34894c2f65e5226d3041ac480b4513a163642"
+  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
   dependencies:
-    eslint-visitor-keys "^1.1.0"
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
 
 eslint-utils@^3.0.0:
   version "3.0.0"
@@ -8239,81 +8255,79 @@ eslint-utils@^3.0.0:
   dependencies:
     eslint-visitor-keys "^2.0.0"
 
-eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
-  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
-
 eslint-visitor-keys@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
   integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
 
-eslint-visitor-keys@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz#eee4acea891814cda67a7d8812d9647dd0179af2"
-  integrity sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==
+eslint-visitor-keys@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
+  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
-eslint@7.7.0:
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.7.0.tgz#18beba51411927c4b64da0a8ceadefe4030d6073"
-  integrity sha512-1KUxLzos0ZVsyL81PnRN335nDtQ8/vZUD6uMtWbF+5zDtjKcsklIi78XoE0MVL93QvWTu+E5y44VyyCsOMBrIg==
+eslint@8.27.0:
+  version "8.27.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.27.0.tgz#d547e2f7239994ad1faa4bb5d84e5d809db7cf64"
+  integrity sha512-0y1bfG2ho7mty+SiILVf9PfuRA49ek4Nc60Wmmu62QlobNR+CeXa4xXIJgcuwSQgZiWaPH+5BDsctpIW0PR/wQ==
   dependencies:
-    "@babel/code-frame" "^7.0.0"
+    "@eslint/eslintrc" "^1.3.3"
+    "@humanwhocodes/config-array" "^0.11.6"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
     ajv "^6.10.0"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
-    debug "^4.0.1"
+    debug "^4.3.2"
     doctrine "^3.0.0"
-    enquirer "^2.3.5"
-    eslint-scope "^5.1.0"
-    eslint-utils "^2.1.0"
-    eslint-visitor-keys "^1.3.0"
-    espree "^7.2.0"
-    esquery "^1.2.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.1.1"
+    eslint-utils "^3.0.0"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.4.0"
+    esquery "^1.4.0"
     esutils "^2.0.2"
-    file-entry-cache "^5.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^5.0.0"
-    globals "^12.1.0"
-    ignore "^4.0.6"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.15.0"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
     import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
-    js-yaml "^3.13.1"
+    is-path-inside "^3.0.3"
+    js-sdsl "^4.1.4"
+    js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
-    lodash "^4.17.19"
-    minimatch "^3.0.4"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
     natural-compare "^1.4.0"
     optionator "^0.9.1"
-    progress "^2.0.0"
-    regexpp "^3.1.0"
-    semver "^7.2.1"
-    strip-ansi "^6.0.0"
+    regexpp "^3.2.0"
+    strip-ansi "^6.0.1"
     strip-json-comments "^3.1.0"
-    table "^5.2.3"
     text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
 
-espree@^7.2.0:
-  version "7.3.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.0.tgz#dc30437cf67947cf576121ebd780f15eeac72348"
-  integrity sha512-dksIWsvKCixn1yrEXO8UosNSxaDoSYpq9reEjZSbHLpT5hpaCAKTLBwq0RHtLrIr+c0ByiYzWT8KTMRzoRCNlw==
+espree@^9.4.0:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.1.tgz#51d6092615567a2c2cff7833445e37c28c0065bd"
+  integrity sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==
   dependencies:
-    acorn "^7.4.0"
-    acorn-jsx "^5.2.0"
-    eslint-visitor-keys "^1.3.0"
+    acorn "^8.8.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.3.0"
 
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
-  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
+esquery@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
   dependencies:
     estraverse "^5.1.0"
 
@@ -8609,18 +8623,6 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.1.1:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3"
-  integrity sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.0"
-    merge2 "^1.3.0"
-    micromatch "^4.0.2"
-    picomatch "^2.2.1"
-
 fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
@@ -8702,12 +8704,12 @@ figgy-pudding@^3.5.1:
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
   integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
 
-file-entry-cache@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
-  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
   dependencies:
-    flat-cache "^2.0.1"
+    flat-cache "^3.0.4"
 
 file-loader@4.2.0:
   version "4.2.0"
@@ -8857,7 +8859,7 @@ find-up@^1.0.0:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
-find-up@^2.0.0, find-up@^2.1.0:
+find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
   dependencies:
@@ -8890,15 +8892,6 @@ firstline@1.2.1:
   resolved "https://registry.yarnpkg.com/firstline/-/firstline-1.2.1.tgz#b88673c42009f8821fac2926e99720acee924fae"
   integrity sha1-uIZzxCAJ+IIfrCkm6ZcgrO6ST64=
 
-flat-cache@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
-  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
-  dependencies:
-    flatted "^2.0.0"
-    rimraf "2.6.3"
-    write "1.0.3"
-
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -8912,11 +8905,6 @@ flat@^5.0.2:
   resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
   integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
 
-flatted@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
-  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
-
 flatted@^3.1.0:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
@@ -9216,9 +9204,15 @@ function.prototype.name@^1.1.0:
     functions-have-names "^1.1.1"
     is-callable "^1.1.4"
 
-functional-red-black-tree@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+function.prototype.name@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
+  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+    functions-have-names "^1.2.2"
 
 functions-have-names@^1.1.1:
   version "1.1.1"
@@ -9304,6 +9298,15 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-intrinsic@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.3.tgz#063c84329ad93e83893c7f4f243ef63ffa351385"
+  integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.3"
+
 get-node-dimensions@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz#fb7b4bb57060fb4247dd51c9d690dfbec56b0823"
@@ -9400,7 +9403,7 @@ glob-base@^0.3.0:
     glob-parent "^2.0.0"
     is-glob "^2.0.0"
 
-glob-parent@5.1.2, glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@^5.1.2, glob-parent@~5.1.2:
+glob-parent@5.1.2, glob-parent@^5.1.0, glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -9420,6 +9423,13 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
 glob-promise@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/glob-promise/-/glob-promise-3.4.0.tgz#b6b8f084504216f702dc2ce8c9bc9ac8866fdb20"
@@ -9531,12 +9541,12 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^12.1.0:
-  version "12.4.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
-  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
+globals@^13.15.0:
+  version "13.17.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.17.0.tgz#902eb1e680a41da93945adbdcb5a9f361ba69bd4"
+  integrity sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==
   dependencies:
-    type-fest "^0.8.1"
+    type-fest "^0.20.2"
 
 globals@^9.18.0:
   version "9.18.0"
@@ -9549,7 +9559,7 @@ globalthis@^1.0.0, globalthis@^1.0.1:
   dependencies:
     define-properties "^1.1.3"
 
-globby@^11.0.1, globby@^11.0.2:
+globby@^11.0.1, globby@^11.0.2, globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -9561,18 +9571,6 @@ globby@^11.0.1, globby@^11.0.2:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-globby@^11.0.3, globby@^11.0.4:
-  version "11.0.4"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
-  integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==
-  dependencies:
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.1.1"
-    ignore "^5.1.4"
-    merge2 "^1.3.0"
-    slash "^3.0.0"
-
 globby@^9.2.0:
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-9.2.0.tgz#fd029a706c703d29bdd170f4b6db3a3f7a7cb63d"
@@ -9684,6 +9682,11 @@ has-bigints@^1.0.1:
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
   integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
 
+has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
 has-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
@@ -9710,6 +9713,13 @@ has-glob@^1.0.0:
   dependencies:
     is-glob "^3.0.0"
 
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
 has-symbols@^1.0.0, has-symbols@^1.0.1, has-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
@@ -10260,12 +10270,12 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
-ignore@^4.0.3, ignore@^4.0.6:
+ignore@^4.0.3:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-ignore@^5.1.4, ignore@^5.1.8:
+ignore@^5.1.8:
   version "5.1.9"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.9.tgz#9ec1a5cbe8e1446ec60d4420060d43aa6e7382fb"
   integrity sha512-2zeMQpbKz5dhZ9IwL0gbxSW5w0NK/MSAMtNuhgIHEPmaU3vPdKPL0UdvUCXs5SS4JAwsBxysK5sFMW8ocFiVjQ==
@@ -10538,6 +10548,11 @@ is-callable@^1.1.4, is-callable@^1.2.4:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
   integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
 
+is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -10552,7 +10567,7 @@ is-ci@^3.0.0:
   dependencies:
     ci-info "^3.1.1"
 
-is-core-module@^2.2.0, is-core-module@^2.8.0:
+is-core-module@^2.2.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.0.tgz#0321336c3d0925e497fd97f5d95cb114a5ccd548"
   integrity sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==
@@ -10566,6 +10581,13 @@ is-core-module@^2.8.1:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.9.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
+  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -10728,7 +10750,7 @@ is-negated-glob@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-negated-glob/-/is-negated-glob-1.0.0.tgz#6910bca5da8c95e784b5751b976cf5a10fee36d2"
   integrity sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI=
 
-is-negative-zero@^2.0.1:
+is-negative-zero@^2.0.1, is-negative-zero@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
   integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
@@ -10786,7 +10808,7 @@ is-path-cwd@^2.2.0:
   resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
   integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
 
-is-path-inside@^3.0.2:
+is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
@@ -10845,6 +10867,13 @@ is-shared-array-buffer@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz#97b0c85fbdacb59c9c446fe653b82cf2b5b7cfe6"
   integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==
 
+is-shared-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
+  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-stream@1.1.0, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -10889,7 +10918,7 @@ is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
 
-is-weakref@^1.0.1:
+is-weakref@^1.0.1, is-weakref@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
   integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
@@ -11127,6 +11156,11 @@ jquery@3.5.0:
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.0.tgz#9980b97d9e4194611c36530e7dc46a58d7340fc9"
   integrity sha512-Xb7SVYMvygPxbFMpTFQiHh1J7HClEaThguL15N/Gg37Lri/qKyhRGZYzHRyLH8Stq3Aow0LsHO2O2ci86fCrNQ==
 
+js-sdsl@^4.1.4:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.1.5.tgz#1ff1645e6b4d1b028cd3f862db88c9d887f26e2a"
+  integrity sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==
+
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
@@ -11141,7 +11175,7 @@ js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@3.13.1, js-yaml@^3.13.1:
+js-yaml@3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -11272,15 +11306,7 @@ jsonwebtoken@^8.4.0:
     ms "^2.1.1"
     semver "^5.6.0"
 
-jsx-ast-utils@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz#1114a4c1209481db06c690c2b4f488cc665f657e"
-  integrity sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==
-  dependencies:
-    array-includes "^3.1.1"
-    object.assign "^4.1.0"
-
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
+"jsx-ast-utils@^2.4.1 || ^3.0.0":
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
   integrity sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==
@@ -11288,6 +11314,14 @@ jsx-ast-utils@^2.4.1:
     array-includes "^3.1.3"
     object.assign "^4.1.2"
 
+jsx-ast-utils@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
+  integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
+  dependencies:
+    array-includes "^3.1.5"
+    object.assign "^4.1.3"
+
 junk@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1"
@@ -11475,15 +11509,6 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
-load-json-file@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^2.2.0"
-    pify "^2.0.0"
-    strip-bom "^3.0.0"
-
 load-json-file@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
@@ -11620,6 +11645,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.once@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
@@ -12326,7 +12356,7 @@ minimatch@3.0.4, minimatch@^3.0.2, minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^3.1.2:
+minimatch@^3.0.5, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -12614,6 +12644,11 @@ napi-build-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.1.tgz#1381a0f92c39d66bf19852e7873432fc2123e508"
   integrity sha512-boQj1WFgQH3v4clhu3mTNfP+vOBxorDlE8EKiMjUlLG3C4qAESnn9AxIOkFgTR2c9LtzNjPrjS60cT27ZKBhaA==
 
+natural-compare-lite@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
+  integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -13008,6 +13043,11 @@ object-inspect@^1.11.0, object-inspect@^1.9.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.1.tgz#d4bd7d7de54b9a75599f59a00bd698c1f1c6549b"
   integrity sha512-If7BjFlpkzzBeV1cqgT3OSWT3azyoxDGajR+iGnFBfVV2EWyDyWaZZW2ERDjUaY2QM8i5jI3Sj7mhsM4DDAqWA==
 
+object-inspect@^1.12.2:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
+  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
+
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -13029,7 +13069,17 @@ object.assign@^4.1.0, object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.entries@^1.1.0, object.entries@^1.1.2, object.entries@^1.1.5:
+object.assign@^4.1.3, object.assign@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.0, object.entries@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
   integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
@@ -13038,7 +13088,7 @@ object.entries@^1.1.0, object.entries@^1.1.2, object.entries@^1.1.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
-"object.fromentries@^2.0.0 || ^1.0.0", object.fromentries@^2.0.2, object.fromentries@^2.0.5:
+"object.fromentries@^2.0.0 || ^1.0.0", object.fromentries@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
   integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
@@ -13055,13 +13105,13 @@ object.getownpropertydescriptors@^2.0.3:
     define-properties "^1.1.2"
     es-abstract "^1.5.1"
 
-object.hasown@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.0.tgz#7232ed266f34d197d15cac5880232f7a4790afe5"
-  integrity sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==
+object.hasown@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.2.tgz#f919e21fad4eb38a57bc6345b3afd496515c3f92"
+  integrity sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==
   dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
 
 object.omit@^2.0.0:
   version "2.0.1"
@@ -13076,7 +13126,7 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-object.values@^1.1.0, object.values@^1.1.1, object.values@^1.1.5:
+object.values@^1.1.0, object.values@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
   integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
@@ -13624,12 +13674,6 @@ path-type@^1.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-path-type@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
-  dependencies:
-    pify "^2.0.0"
-
 path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
@@ -13762,13 +13806,6 @@ pkg-dir@^1.0.0:
   dependencies:
     find-up "^1.0.0"
 
-pkg-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
-  integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
-  dependencies:
-    find-up "^2.1.0"
-
 pkg-dir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
@@ -14070,16 +14107,21 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@2.6.0, prettier@^2.0.4:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.0.tgz#12f8f504c4d8ddb76475f441337542fa799207d4"
-  integrity sha512-m2FgJibYrBGGgQXNzfd0PuDGShJgRavjUoRCw1mZERIWVSXF0iLzLm+aOqTAbLnC3n6JzUhAA8uZnFVghHJ86A==
+prettier@2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
+  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
 
 "prettier@>=2.2.1 <=2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"
   integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==
 
+prettier@^2.0.4:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.0.tgz#12f8f504c4d8ddb76475f441337542fa799207d4"
+  integrity sha512-m2FgJibYrBGGgQXNzfd0PuDGShJgRavjUoRCw1mZERIWVSXF0iLzLm+aOqTAbLnC3n6JzUhAA8uZnFVghHJ86A==
+
 pretty-error@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
@@ -14134,7 +14176,7 @@ process@^0.11.1, process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
-progress@^2.0.0, progress@^2.0.3:
+progress@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
@@ -14177,7 +14219,7 @@ prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.0:
+prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -14409,16 +14451,16 @@ quill@1.3.7, quill@^1.3.7:
     parchment "^1.1.4"
     quill-delta "^3.6.2"
 
+rambda@^7.1.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/rambda/-/rambda-7.3.0.tgz#90e440ead53030a216093865d8d97997a80868ca"
+  integrity sha512-RFVofZYaG2TaVcxjnM0ejdVWf/59rFq1f57OGnjP3GT/bthzFw0GVr5rkP9PKbVlEuF/Y7bOVPLfiiYfxq/EWQ==
+
 ramda@^0.21.0:
   version "0.21.0"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35"
   integrity sha1-oAGr7bP/YQd9T/HVd9RN536NCjU=
 
-ramda@^0.27.1:
-  version "0.27.1"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
-  integrity sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==
-
 randomatic@^1.1.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
@@ -14800,13 +14842,6 @@ read-pkg-up@^1.0.1:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
 
-read-pkg-up@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
-  dependencies:
-    find-up "^2.0.0"
-    read-pkg "^2.0.0"
-
 read-pkg-up@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
@@ -14824,14 +14859,6 @@ read-pkg@^1.0.0:
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
-read-pkg@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
-  dependencies:
-    load-json-file "^2.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^2.0.0"
-
 read-pkg@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
@@ -15027,6 +15054,11 @@ regenerator-runtime@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
 
+regenerator-runtime@^0.13.10:
+  version "0.13.10"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee"
+  integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==
+
 regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.7, regenerator-runtime@^0.13.9:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
@@ -15057,15 +15089,7 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
-  integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-
-regexp.prototype.flags@^1.4.1:
+regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
   integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
@@ -15074,7 +15098,7 @@ regexp.prototype.flags@^1.4.1:
     define-properties "^1.1.3"
     functions-have-names "^1.2.2"
 
-regexpp@^3.1.0, regexpp@^3.2.0:
+regexpp@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
@@ -15347,7 +15371,7 @@ resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 
-resolve@^1.10.0, resolve@^1.17.0, resolve@^1.20.0, resolve@^1.9.0:
+resolve@^1.10.0, resolve@^1.20.0, resolve@^1.9.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -15364,6 +15388,15 @@ resolve@^1.12.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.3.2:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.22.0:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
@@ -15418,13 +15451,6 @@ rimraf@2.6.2:
   dependencies:
     glob "^7.0.5"
 
-rimraf@2.6.3:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
-  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@@ -15494,6 +15520,15 @@ safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1,
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
+safe-regex-test@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
+  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    is-regex "^1.1.4"
+
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -15659,7 +15694,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
+semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
   version "7.3.7"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
   integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
@@ -15925,15 +15960,6 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-slice-ansi@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
-  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
-  dependencies:
-    ansi-styles "^3.2.0"
-    astral-regex "^1.0.0"
-    is-fullwidth-code-point "^2.0.0"
-
 slide@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
@@ -16309,18 +16335,18 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
     regexp.prototype.flags "^1.4.1"
     side-channel "^1.0.4"
 
-string.prototype.matchall@^4.0.2, string.prototype.matchall@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz#5abb5dabc94c7b0ea2380f65ba610b3a544b15fa"
-  integrity sha512-6WgDX8HmQqvEd7J+G6VtAahhsQIssiZ8zl7zKh1VDMFyL3hRTJP4FTNA3RbIp2TOQ9AYNDcc7e3fH0Qbup+DBg==
+string.prototype.matchall@^4.0.7:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz#3bf85722021816dcd1bf38bb714915887ca79fd3"
+  integrity sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-    get-intrinsic "^1.1.1"
-    has-symbols "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    get-intrinsic "^1.1.3"
+    has-symbols "^1.0.3"
     internal-slot "^1.0.3"
-    regexp.prototype.flags "^1.3.1"
+    regexp.prototype.flags "^1.4.3"
     side-channel "^1.0.4"
 
 string.prototype.padend@^3.0.0:
@@ -16349,6 +16375,15 @@ string.prototype.trimend@^1.0.4:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
+string.prototype.trimend@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533"
+  integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
 string.prototype.trimstart@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
@@ -16357,6 +16392,15 @@ string.prototype.trimstart@^1.0.4:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
+string.prototype.trimstart@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4"
+  integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
 string_decoder@^1.0.0, string_decoder@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
@@ -16449,7 +16493,7 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
-strip-json-comments@3.1.1, strip-json-comments@^3.1.0:
+strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -16561,16 +16605,6 @@ tabbable@^5.2.1:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.1.tgz#e3fda7367ddbb172dcda9f871c0fdb36d1c4cd9c"
   integrity sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ==
 
-table@^5.2.3:
-  version "5.4.6"
-  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
-  integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
-  dependencies:
-    ajv "^6.10.2"
-    lodash "^4.17.14"
-    slice-ansi "^2.1.0"
-    string-width "^3.0.0"
-
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -16987,14 +17021,14 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tsconfig-paths@^3.11.0, tsconfig-paths@^3.9.0:
-  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz#19769aca6ee8f6a1a341e38c8fa45dd9fb18899b"
-  integrity sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==
+tsconfig-paths@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
+  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
   dependencies:
     "@types/json5" "^0.0.29"
     json5 "^1.0.1"
-    minimist "^1.2.0"
+    minimist "^1.2.6"
     strip-bom "^3.0.0"
 
 tslib@2.4.0, tslib@^2.0.0, tslib@^2.1.0:
@@ -17146,6 +17180,16 @@ unbox-primitive@^1.0.1:
     has-symbols "^1.0.2"
     which-boxed-primitive "^1.0.2"
 
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
 unc-path-regex@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
@@ -17522,11 +17566,6 @@ uuid@^8.3.0, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-v8-compile-cache@^2.0.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
-  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
-
 v8-to-istanbul@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.0.0.tgz#be0dae58719fc53cb97e5c7ac1d7e6d4f5b19511"
@@ -18056,13 +18095,6 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
-write@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
-  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
-  dependencies:
-    mkdirp "^0.5.1"
-
 ws@^7.4.6:
   version "7.5.6"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.6.tgz#e59fc509fb15ddfb65487ee9765c5a51dec5fe7b"