From 0082b72e08d435a28e1030a7997bcdfaa6f11749 Mon Sep 17 00:00:00 2001
From: Michael Neeley <micneeley14@gmail.com>
Date: Thu, 11 Dec 2025 08:48:08 -0500
Subject: [PATCH 1/6] adds lint checks to web shared pkg

---
 .github/workflows/lint.yml                    | 28 ++++++++----
 packages/web-shared/analytics/segment.js      |  1 +
 packages/web-shared/client/apolloClient.js    |  4 +-
 packages/web-shared/client/authLink.js        |  1 +
 packages/web-shared/client/httpLink.js        |  2 +-
 packages/web-shared/client/initCache.js       |  1 +
 .../client/introspectionToPossibleTypes.js    |  4 +-
 .../components/AddToCalendar/AddToCalendar.js |  4 +-
 .../AddToCalendar/AddToCalendar.styles.js     |  6 +--
 .../components/AddToCalendar/index.js         |  1 +
 .../components/AppHeader/AppHeader.js         |  9 ++--
 .../web-shared/components/Auth/AuthConfirm.js |  6 +--
 .../web-shared/components/Auth/AuthDetails.js |  3 +-
 .../components/Auth/AuthIdentity.js           |  2 +-
 .../components/Auth/AuthLayout/AuthLayout.js  |  7 +--
 .../Auth/AuthLayout/AuthLayout.styles.js      |  3 +-
 .../web-shared/components/Auth/AuthManager.js |  6 +--
 .../components/Auth/AuthMerge/AuthMerge.js    | 45 ++++---------------
 .../Auth/AuthMerge/AuthMerge.styles.js        |  3 +-
 .../web-shared/components/Auth/AuthWelcome.js |  4 +-
 .../BirthDateField.styles.web.js              |  3 +-
 .../Auth/BirthDateField/BirthDateField.web.js | 10 ++---
 .../Auth/GenderField/GenderField.js           |  8 +---
 .../components/Comments/AddComment.js         | 12 ++---
 .../web-shared/components/Comments/Comment.js |  1 +
 .../components/Comments/Comments.js           | 12 ++---
 .../web-shared/components/ContentChannel.js   |  5 ++-
 .../components/ContentSeriesSingle.js         | 18 ++++----
 .../web-shared/components/ContentSingle.js    | 40 ++++++++---------
 .../components/ContentSingle.styles.js        |  5 +--
 .../components/EventCalendar/EventCalendar.js | 19 ++++----
 .../components/EventCalendar/index.js         |  4 +-
 .../FeatureFeed/Features/ActionBarFeature.js  |  2 +-
 .../Features/ActionBarFeature.styles.js       |  5 +--
 .../FeatureFeed/Features/ActionListFeature.js |  5 ++-
 .../Features/ActionListFeature.styles.js      |  5 +--
 .../FeatureFeed/Features/ButtonFeature.js     | 16 ++++---
 .../FeatureFeed/Features/ChipListFeature.js   |  3 +-
 .../Features/ChipListFeature.styles.js        |  5 +--
 .../FeatureFeed/Features/EventBlockFeature.js |  9 ++--
 .../Features/EventBlockFeature.styles.js      |  3 +-
 .../FeatureFeed/Features/HeroListFeature.js   | 10 +++--
 .../Features/HeroListFeature.styles.js        |  3 +-
 .../Features/HorizontalCardListFeature.js     |  6 +--
 .../Features/HorizontalMediaListFeature.js    |  6 +--
 .../FeatureFeed/Features/HtmlFeature.js       |  3 +-
 .../FeatureFeed/Features/PrayerListFeature.js | 10 +++--
 .../Features/PrayerListFeature.styles.js      |  5 +--
 .../FeatureFeed/Features/ScriptureFeature.js  |  7 ++-
 .../Features/ScriptureFeature.styles.js       | 10 +++--
 .../Features/VerticalCardListFeature.js       |  5 ++-
 .../VerticalCardListFeature.styles.js         |  4 +-
 .../web-shared/components/FeatureFeed/Feed.js |  8 ++--
 .../FeatureFeedList/FeatureFeedList.js        |  6 +--
 .../FeatureFeedList/FeatureFeedListGrid.js    |  5 +--
 .../InteractWhenLoaded/InteractWhenLoaded.js  |  7 +--
 .../components/InteractWhenLoaded/index.js    |  2 +-
 .../web-shared/components/LivestreamSingle.js | 14 +++---
 packages/web-shared/components/Logo/Logo.js   |  5 ++-
 .../web-shared/components/Logo/Logo.styles.js |  3 +-
 packages/web-shared/components/Modal/Modal.js | 15 ++++---
 .../components/Modal/Modal.styles.js          |  3 +-
 .../components/Profile/ImageUploader.js       |  7 +--
 .../web-shared/components/Profile/Profile.js  | 34 +++++++-------
 .../components/Profile/Profile.styles.js      |  8 ++--
 .../components/Profile/ProfileButton.js       |  8 ++--
 .../components/Profile/ProfileDetails.js      |  5 +--
 .../components/Profile/canvasPreview.js       | 14 +++---
 .../components/Searchbar/Autocomplete.js      | 12 +++--
 .../components/Searchbar/Search.styles.js     |  5 +--
 .../components/Searchbar/SearchResults.js     | 13 +++---
 .../components/Searchbar/Searchbar.js         | 14 +++---
 .../components/StoreLinks/StoreLinks.js       |  5 +--
 .../components/VideoPlayer/DevVideoDetails.js | 19 +++-----
 .../components/VideoPlayer/VideoPlayer.js     |  8 ++--
 .../VideoPlayer/VideoPlayer.styles.js         |  2 +-
 .../components/Wordmark/Wordmark.js           |  3 +-
 .../components/Wordmark/Wordmark.styles.js    |  3 +-
 packages/web-shared/components/index.js       |  4 +-
 packages/web-shared/embeds/Auth.js            |  1 +
 packages/web-shared/embeds/FeatureFeed.js     |  8 ++--
 packages/web-shared/embeds/Main.js            | 10 ++---
 packages/web-shared/embeds/Search.js          | 11 +++--
 packages/web-shared/embeds/index.js           |  2 +-
 packages/web-shared/hooks/useAuthQuery.js     | 27 ++++++-----
 .../web-shared/hooks/useCompleteRegister.js   | 10 +----
 packages/web-shared/hooks/useContentItem.js   |  1 +
 packages/web-shared/hooks/useFeatureFeed.js   |  1 +
 packages/web-shared/hooks/useHTMLContent.js   |  8 ++--
 .../web-shared/hooks/useHandleActionPress.js  |  5 +--
 .../web-shared/hooks/useInteractWithNode.js   | 13 +++---
 packages/web-shared/hooks/useLink.js          |  6 ++-
 .../web-shared/hooks/useLivestreamStatus.js   | 21 ++++++---
 packages/web-shared/hooks/useValidateLogin.js |  5 +--
 .../web-shared/hooks/useValidateRegister.js   |  5 +--
 packages/web-shared/package.json              |  3 ++
 .../web-shared/providers/AnalyticsProvider.js |  8 ++--
 packages/web-shared/providers/AppProvider.js  |  9 ++--
 packages/web-shared/providers/AuthProvider.js |  4 +-
 .../providers/ContentFeedProvider.js          | 15 ++-----
 .../providers/ContentItemProvider.js          |  2 +-
 .../providers/FeatureFeedProvider.js          | 15 ++-----
 .../web-shared/providers/ModalProvider.js     |  4 +-
 .../providers/NavigationProvider.js           |  3 ++
 .../web-shared/providers/SearchProvider.js    |  1 +
 packages/web-shared/providers/index.js        |  7 +--
 packages/web-shared/ui-kit/Avatar/Avatar.js   |  3 +-
 packages/web-shared/ui-kit/Box/Box.js         |  3 +-
 packages/web-shared/ui-kit/Box/Box.styles.js  |  3 +-
 packages/web-shared/ui-kit/Button/Button.js   |  3 +-
 .../web-shared/ui-kit/Button/Button.styles.js |  4 +-
 .../ui-kit/ButtonGroup/ButtonGroup.js         |  7 +--
 .../ui-kit/ButtonGroup/ButtonGroup.styles.js  |  8 ++--
 packages/web-shared/ui-kit/Card/Card.js       |  1 +
 .../ui-kit/ContentCard/ContentCard.js         |  7 +--
 .../ui-kit/ContentCard/ContentCard.styles.js  |  4 +-
 packages/web-shared/ui-kit/Icons/Dot.js       |  5 ++-
 packages/web-shared/ui-kit/Input/Input.js     |  4 +-
 .../web-shared/ui-kit/Input/Input.styles.js   | 12 ++---
 packages/web-shared/ui-kit/Layout/Layout.js   |  3 +-
 .../web-shared/ui-kit/Layout/Layout.styles.js |  3 +-
 .../web-shared/ui-kit/ListItem/ListItem.js    |  9 ++--
 .../ui-kit/ListItem/ListItem.styles.js        |  5 +--
 packages/web-shared/ui-kit/Loader/Loader.js   |  3 +-
 .../web-shared/ui-kit/Loader/Loader.styles.js |  3 +-
 .../web-shared/ui-kit/Longform/Longform.js    |  2 +-
 .../ui-kit/Longform/Longform.styles.js        |  4 +-
 .../web-shared/ui-kit/MediaItem/LiveChip.js   |  2 +-
 .../web-shared/ui-kit/MediaItem/MediaItem.js  | 16 +++----
 .../ui-kit/MediaItem/MediaItem.styles.js      |  6 +--
 packages/web-shared/ui-kit/MediaItem/index.js |  2 +-
 .../ui-kit/PhospherIcon/PhospherIcon.js       |  8 ++--
 .../ui-kit/ProgressBar/ProgressBar.js         |  4 +-
 .../ui-kit/ProgressBar/ProgressBar.styles.js  |  3 +-
 .../ui-kit/ResourceCard/ResourceCard.js       |  7 +--
 .../ResourceCard/ResourceCard.styles.js       |  5 +--
 .../web-shared/ui-kit/ResourceCard/index.js   |  2 +-
 packages/web-shared/ui-kit/Select/Select.js   | 10 ++---
 .../web-shared/ui-kit/Select/Select.styles.js | 28 +++++-------
 packages/web-shared/ui-kit/Select/index.js    |  2 +-
 .../ui-kit/ShareButton/ShareButton.js         | 11 ++---
 .../ui-kit/ShareButton/ShareButton.styles.js  | 19 +++-----
 .../ui-kit/ShareButton/functions.js           | 12 ++---
 .../web-shared/ui-kit/ShareButton/icons.js    |  7 +--
 .../web-shared/ui-kit/ShareButton/options.js  |  2 +-
 .../ui-kit/ThemeProvider/ThemeProvider.js     |  8 +++-
 .../web-shared/ui-kit/Typography/BodyText.js  |  5 +--
 packages/web-shared/ui-kit/Typography/H1.js   |  6 +--
 packages/web-shared/ui-kit/Typography/H2.js   |  5 +--
 packages/web-shared/ui-kit/Typography/H3.js   |  5 +--
 packages/web-shared/ui-kit/Typography/H4.js   |  5 +--
 packages/web-shared/ui-kit/Typography/H5.js   |  5 +--
 packages/web-shared/ui-kit/Typography/H6.js   |  5 +--
 .../ui-kit/Typography/LargeSystemText.js      |  5 +--
 .../ui-kit/Typography/SmallBodyText.js        |  5 +--
 .../ui-kit/Typography/SmallSystemText.js      |  5 +--
 .../ui-kit/Typography/SystemText.js           |  5 +--
 .../ui-kit/Typography/_typeStyles.js          |  2 +-
 .../web-shared/ui-kit/Typography/index.js     |  2 +-
 packages/web-shared/ui-kit/_config/theme.js   |  2 +-
 .../ui-kit/_utils/__tests__/rem.test.js       |  2 +-
 packages/web-shared/ui-kit/_utils/index.js    |  2 +-
 packages/web-shared/ui-kit/index.js           | 13 +++---
 .../web-shared/utils/getContentFromURL.js     |  5 ++-
 .../web-shared/utils/parseSlugToIdAndType.js  | 14 +++---
 packages/web-shared/utils/validateEmail.js    |  3 +-
 yarn.lock                                     | 31 +++++++++++--
 167 files changed, 595 insertions(+), 623 deletions(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index cf03e17a..7b38c8fb 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -1,27 +1,39 @@
-name: Lint Web Embeds
+name: Lint Web Packages
 
 on:
   push:
     paths:
       - 'web-embeds/**'
+      - 'packages/web-shared/**'
+      - '.github/workflows/lint.yml'
+      - 'package.json'
+      - 'yarn.lock'
   pull_request:
     paths:
       - 'web-embeds/**'
+      - 'packages/web-shared/**'
+      - '.github/workflows/lint.yml'
+      - 'package.json'
+      - 'yarn.lock'
 
 jobs:
   lint:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: '>=18.17.0'
+          node-version: '18'
+          cache: 'yarn'
 
-      - name: Install Dependencies
-        run: cd web-embeds && yarn install
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
 
-      - name: Run Lint
-        run: cd web-embeds && yarn lint
+      - name: Lint web embeds
+        run: yarn workspace @apollosproject/apollos-embeds lint
+
+      - name: Lint web shared
+        run: yarn workspace @apollosproject/web-shared lint
diff --git a/packages/web-shared/analytics/segment.js b/packages/web-shared/analytics/segment.js
index 34cd0135..3d0becd4 100644
--- a/packages/web-shared/analytics/segment.js
+++ b/packages/web-shared/analytics/segment.js
@@ -1,4 +1,5 @@
 import { AnalyticsBrowser } from '@segment/analytics-next';
+
 const clientFactory = (writeKey, clientManaged = false) => {
   if (!writeKey) {
     return null;
diff --git a/packages/web-shared/client/apolloClient.js b/packages/web-shared/client/apolloClient.js
index 01c42833..ab11bcd5 100644
--- a/packages/web-shared/client/apolloClient.js
+++ b/packages/web-shared/client/apolloClient.js
@@ -1,11 +1,11 @@
 import { ApolloClient, ApolloLink } from '@apollo/client';
-import { AUTH_TOKEN_KEY, AUTH_REFRESH_TOKEN_KEY } from '../config/keys';
 
 import apollosApiLink from './apollosApiLink';
 import authLink from './authLink';
+import buildErrorLink from './buildErrorLink';
 import httpLink from './httpLink';
 import initCache from './initCache';
-import buildErrorLink from './buildErrorLink';
+import { AUTH_TOKEN_KEY, AUTH_REFRESH_TOKEN_KEY } from '../config/keys';
 
 const client = async (church_slug) => {
   let storeIsResetting = false;
diff --git a/packages/web-shared/client/authLink.js b/packages/web-shared/client/authLink.js
index dd0794d8..b8262552 100644
--- a/packages/web-shared/client/authLink.js
+++ b/packages/web-shared/client/authLink.js
@@ -1,4 +1,5 @@
 import { setContext } from '@apollo/client/link/context';
+
 import { AUTH_TOKEN_KEY } from '../config/keys';
 
 export default setContext(async (request, { headers }) => {
diff --git a/packages/web-shared/client/httpLink.js b/packages/web-shared/client/httpLink.js
index 705343a9..e083a92a 100644
--- a/packages/web-shared/client/httpLink.js
+++ b/packages/web-shared/client/httpLink.js
@@ -1,6 +1,6 @@
-import { createUploadLink } from 'apollo-upload-client';
 import { split, createHttpLink } from '@apollo/client';
 import { getMainDefinition } from '@apollo/client/utilities';
+import { createUploadLink } from 'apollo-upload-client';
 
 export const uri =
   process.env.NEXT_PUBLIC_DATA_URL || process.env.REACT_APP_DATA_URL || 'https://cdn.apollos.app';
diff --git a/packages/web-shared/client/initCache.js b/packages/web-shared/client/initCache.js
index 74bccfbe..d80fed76 100644
--- a/packages/web-shared/client/initCache.js
+++ b/packages/web-shared/client/initCache.js
@@ -1,5 +1,6 @@
 import { InMemoryCache } from '@apollo/client/core';
 import { persistCache } from 'apollo3-cache-persist';
+
 import { uri } from './httpLink';
 
 const initCache = async (initialState, { church }) => {
diff --git a/packages/web-shared/client/introspectionToPossibleTypes.js b/packages/web-shared/client/introspectionToPossibleTypes.js
index c7bd03a0..aa77213d 100644
--- a/packages/web-shared/client/introspectionToPossibleTypes.js
+++ b/packages/web-shared/client/introspectionToPossibleTypes.js
@@ -3,9 +3,7 @@ function introspectionToPossibleTypes(introspectionQueryResultData) {
 
   introspectionQueryResultData.__schema.types.forEach((supertype) => {
     if (supertype.possibleTypes) {
-      possibleTypes[supertype.name] = [
-        ...supertype.possibleTypes.map((subtype) => subtype.name),
-      ];
+      possibleTypes[supertype.name] = [...supertype.possibleTypes.map((subtype) => subtype.name)];
     }
   });
 
diff --git a/packages/web-shared/components/AddToCalendar/AddToCalendar.js b/packages/web-shared/components/AddToCalendar/AddToCalendar.js
index 7fbef21a..9b541171 100644
--- a/packages/web-shared/components/AddToCalendar/AddToCalendar.js
+++ b/packages/web-shared/components/AddToCalendar/AddToCalendar.js
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Menu } from '@headlessui/react';
 import {
   CalendarPlus,
@@ -7,9 +8,10 @@ import {
   MicrosoftOutlookLogo,
   FileArrowDown,
 } from '@phosphor-icons/react';
-import { ActionIcon, List, MenuLink } from './AddToCalendar.styles';
 import { addSeconds, parseISO } from 'date-fns';
 
+import { ActionIcon, List, MenuLink } from './AddToCalendar.styles';
+
 function convertToGoogleLink({ start, duration, location, allDay, title }) {
   const startDate = parseISO(start);
   const endDate = addSeconds(startDate, duration);
diff --git a/packages/web-shared/components/AddToCalendar/AddToCalendar.styles.js b/packages/web-shared/components/AddToCalendar/AddToCalendar.styles.js
index e9de00f0..f3e7b043 100644
--- a/packages/web-shared/components/AddToCalendar/AddToCalendar.styles.js
+++ b/packages/web-shared/components/AddToCalendar/AddToCalendar.styles.js
@@ -1,10 +1,10 @@
 import React from 'react';
+
 import { Menu } from '@headlessui/react';
-import styled from 'styled-components';
-import { withTheme } from 'styled-components';
+import { themeGet } from '@styled-system/theme-get';
 import { rgba } from 'polished';
+import styled, { withTheme } from 'styled-components';
 
-import { themeGet } from '@styled-system/theme-get';
 import { system } from '../../ui-kit/_lib/system';
 
 export const ActionIcon = withTheme(styled(Menu.Button)`
diff --git a/packages/web-shared/components/AddToCalendar/index.js b/packages/web-shared/components/AddToCalendar/index.js
index ad0a8ee8..87cf1a92 100644
--- a/packages/web-shared/components/AddToCalendar/index.js
+++ b/packages/web-shared/components/AddToCalendar/index.js
@@ -1,2 +1,3 @@
 import AddToCalendar from './AddToCalendar';
+
 export default AddToCalendar;
diff --git a/packages/web-shared/components/AppHeader/AppHeader.js b/packages/web-shared/components/AppHeader/AppHeader.js
index 850577a2..ab156a67 100644
--- a/packages/web-shared/components/AppHeader/AppHeader.js
+++ b/packages/web-shared/components/AppHeader/AppHeader.js
@@ -1,11 +1,10 @@
-import Wordmark from '../Wordmark';
-import { useCurrentChurch } from '../../hooks';
-import { Box, Avatar } from '../../ui-kit';
 import { User } from '@phosphor-icons/react';
 
-import SearchStyles from '../Searchbar/Search.styles';
-
+import { useCurrentChurch } from '../../hooks';
+import { Box, Avatar } from '../../ui-kit';
 import ProfileButton from '../Profile/ProfileButton';
+import SearchStyles from '../Searchbar/Search.styles';
+import Wordmark from '../Wordmark';
 
 function ChurchLogo(props) {
   const { currentChurch } = useCurrentChurch();
diff --git a/packages/web-shared/components/Auth/AuthConfirm.js b/packages/web-shared/components/Auth/AuthConfirm.js
index 444bc485..6ed5ac45 100644
--- a/packages/web-shared/components/Auth/AuthConfirm.js
+++ b/packages/web-shared/components/Auth/AuthConfirm.js
@@ -2,14 +2,11 @@ import React, { useEffect, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 
 import { useValidateLogin, useValidateRegister } from '../../hooks';
-// import amplitude from '../../libs/amplitude';
+import { useAnalytics } from '../../providers/AnalyticsProvider';
 import { update as updateAuth, useAuth } from '../../providers/AuthProvider';
-
 import { Box, Button, Input } from '../../ui-kit';
 import AuthLayout from './AuthLayout';
-
 import authSteps from './authSteps';
-import { useAnalytics } from '../../providers/AnalyticsProvider';
 
 const AuthConfirm = (props) => {
   const [status, setStatus] = useState('IDLE');
@@ -148,6 +145,7 @@ const AuthConfirm = (props) => {
       </Box>
       <Button
         title={`Verify${isLoading ? 'ing...' : ''}`}
+
         // disabled={!isPinReady}
         onClick={handleSignInSubmit}
       />
diff --git a/packages/web-shared/components/Auth/AuthDetails.js b/packages/web-shared/components/Auth/AuthDetails.js
index a5582b84..c2e3f24a 100644
--- a/packages/web-shared/components/Auth/AuthDetails.js
+++ b/packages/web-shared/components/Auth/AuthDetails.js
@@ -1,12 +1,11 @@
 import React, { useState, useEffect } from 'react';
 
+import AuthLayout from './AuthLayout';
 import { useForm, useUpdateProfileFields, useCurrentUser, useCompleteRegister } from '../../hooks';
 import { update as updateAuth, useAuth } from '../../providers/AuthProvider';
 import { Box, Button, Input, Select } from '../../ui-kit';
 import authSteps from '../Auth/authSteps';
 
-import AuthLayout from './AuthLayout';
-
 function upperFirst(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
diff --git a/packages/web-shared/components/Auth/AuthIdentity.js b/packages/web-shared/components/Auth/AuthIdentity.js
index 22f67a99..180adba5 100644
--- a/packages/web-shared/components/Auth/AuthIdentity.js
+++ b/packages/web-shared/components/Auth/AuthIdentity.js
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 
+import AuthLayout from './AuthLayout';
 import authSteps from './authSteps';
 import { useForm, useRequestLogin, useRequestRegister } from '../../hooks';
 import { update as updateAuth, useAuth } from '../../providers/AuthProvider';
 import { Button, Input, SmallSystemText, Box } from '../../ui-kit';
 import { validateEmail, validatePhoneNumber } from '../../utils';
-import AuthLayout from './AuthLayout';
 
 const AuthIdentity = (props) => {
   const [status, setStatus] = useState('IDLE');
diff --git a/packages/web-shared/components/Auth/AuthLayout/AuthLayout.js b/packages/web-shared/components/Auth/AuthLayout/AuthLayout.js
index 410d6940..935fdc76 100644
--- a/packages/web-shared/components/Auth/AuthLayout/AuthLayout.js
+++ b/packages/web-shared/components/Auth/AuthLayout/AuthLayout.js
@@ -1,11 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { CaretLeft, X } from '@phosphor-icons/react';
+import PropTypes from 'prop-types';
 
-import { Box, Card, Button } from '../../../ui-kit';
-import customizations from './customizations';
 import { Heading, SubHeading } from './AuthLayout.styles';
+import customizations from './customizations';
 import { update as updateAuth, useAuth } from '../../../providers/AuthProvider';
+import { Box, Card, Button } from '../../../ui-kit';
 import authSteps from '../authSteps';
 
 function AuthLayout(props = {}) {
diff --git a/packages/web-shared/components/Auth/AuthLayout/AuthLayout.styles.js b/packages/web-shared/components/Auth/AuthLayout/AuthLayout.styles.js
index 22463b97..fa0ce600 100644
--- a/packages/web-shared/components/Auth/AuthLayout/AuthLayout.styles.js
+++ b/packages/web-shared/components/Auth/AuthLayout/AuthLayout.styles.js
@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { withTheme } from 'styled-components';
-import styled from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme } from 'styled-components';
 
 import { TypeStyles, utils } from '../../../ui-kit';
 
diff --git a/packages/web-shared/components/Auth/AuthManager.js b/packages/web-shared/components/Auth/AuthManager.js
index 5ae3fecc..864331dd 100644
--- a/packages/web-shared/components/Auth/AuthManager.js
+++ b/packages/web-shared/components/Auth/AuthManager.js
@@ -1,13 +1,13 @@
 import React from 'react';
 
-import { useAuth } from '../../providers/AuthProvider';
-import { Box } from '../../ui-kit';
 import Confirm from './AuthConfirm';
 import Details from './AuthDetails';
-import Merge from './AuthMerge';
 import Identity from './AuthIdentity';
+import Merge from './AuthMerge';
 import authSteps from './authSteps';
 import Welcome from './AuthWelcome';
+import { useAuth } from '../../providers/AuthProvider';
+import { Box } from '../../ui-kit';
 
 function AuthManager(props = {}) {
   const [{ step }] = useAuth();
diff --git a/packages/web-shared/components/Auth/AuthMerge/AuthMerge.js b/packages/web-shared/components/Auth/AuthMerge/AuthMerge.js
index 3655ef6c..17b6a939 100644
--- a/packages/web-shared/components/Auth/AuthMerge/AuthMerge.js
+++ b/packages/web-shared/components/Auth/AuthMerge/AuthMerge.js
@@ -1,22 +1,10 @@
 import React, { useState, useCallback, useMemo } from 'react';
 
-import { useForm } from '../../../hooks';
+import { Heading, SubHeading } from './AuthMerge.styles';
+import { useForm, useCompleteRegister } from '../../../hooks';
 import { update as updateAuth, useAuth } from '../../../providers/AuthProvider';
-import {
-  Avatar,
-  Card,
-  Box,
-  Button,
-  Input,
-  H2,
-  H5,
-  H6,
-  SmallBodyText,
-} from '../../../ui-kit';
+import { Avatar, Card, Box, Button, Input, H2, H5, H6, SmallBodyText } from '../../../ui-kit';
 import authSteps from '../authSteps';
-import { useCompleteRegister } from '../../../hooks';
-
-import { Heading, SubHeading } from './AuthMerge.styles';
 
 function AuthMerge() {
   const [status, setStatus] = useState('IDLE');
@@ -48,10 +36,7 @@ function AuthMerge() {
   const onSuccess = ({ birthDate, gender, firstName, lastName }) => {
     setStatus('SUCCESS');
     const needsOnboarding =
-      firstName === null ||
-      lastName === null ||
-      gender === null ||
-      birthDate === null;
+      firstName === null || lastName === null || gender === null || birthDate === null;
 
     if (needsOnboarding) {
       dispatch(
@@ -81,16 +66,7 @@ function AuthMerge() {
         variables: { mergeProfileId },
         update: (
           cache,
-          {
-            data: {
-              completeRegistration: {
-                birthDate,
-                gender,
-                firstName,
-                lastName,
-              } = {},
-            } = {},
-          }
+          { data: { completeRegistration: { birthDate, gender, firstName, lastName } = {} } = {} }
         ) => {
           onSuccess({ birthDate, gender, firstName, lastName });
         },
@@ -121,8 +97,7 @@ function AuthMerge() {
       <Card p="l" display="flex" flexDirection="column" width="440px">
         <Heading>Are any of these people you?</Heading>
         <SubHeading>
-          Based on your verified phone number or email, we've matched you to an
-          existing profile.
+          Based on your verified phone number or email, we've matched you to an existing profile.
         </SubHeading>
 
         {allOptions.map((item, index) => (
@@ -136,14 +111,10 @@ function AuthMerge() {
               checked={item.id === mergeProfileId}
               onChange={onChange}
             />
-            {item.photo?.uri ? (
-              <Avatar src={item.photo?.uri} alt="avatar" mr="s" />
-            ) : null}
+            {item.photo?.uri ? <Avatar src={item.photo?.uri} alt="avatar" mr="s" /> : null}
             <Box>
               <H6>{item.firstName}</H6>
-              <SmallBodyText color="text.secondary">
-                {item.lastName}
-              </SmallBodyText>
+              <SmallBodyText color="text.secondary">{item.lastName}</SmallBodyText>
             </Box>
           </Box>
         ))}
diff --git a/packages/web-shared/components/Auth/AuthMerge/AuthMerge.styles.js b/packages/web-shared/components/Auth/AuthMerge/AuthMerge.styles.js
index 3eb1e712..0b235284 100644
--- a/packages/web-shared/components/Auth/AuthMerge/AuthMerge.styles.js
+++ b/packages/web-shared/components/Auth/AuthMerge/AuthMerge.styles.js
@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { withTheme } from 'styled-components';
-import styled, { css } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme, css } from 'styled-components';
 
 import { system, TypeStyles, utils } from '../../../ui-kit';
 
diff --git a/packages/web-shared/components/Auth/AuthWelcome.js b/packages/web-shared/components/Auth/AuthWelcome.js
index bf2f6f73..e7770f92 100644
--- a/packages/web-shared/components/Auth/AuthWelcome.js
+++ b/packages/web-shared/components/Auth/AuthWelcome.js
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { update as updateAuth, useAuth } from '../../providers/AuthProvider';
-import { Box, Button } from '../../ui-kit';
 import AuthLayout from './AuthLayout';
 import steps from './authSteps';
+import { update as updateAuth, useAuth } from '../../providers/AuthProvider';
+import { Box, Button } from '../../ui-kit';
 
 const AuthWelcome = (props) => {
   const [state, dispatch] = useAuth();
diff --git a/packages/web-shared/components/Auth/BirthDateField/BirthDateField.styles.web.js b/packages/web-shared/components/Auth/BirthDateField/BirthDateField.styles.web.js
index fa82708f..149e5bf4 100644
--- a/packages/web-shared/components/Auth/BirthDateField/BirthDateField.styles.web.js
+++ b/packages/web-shared/components/Auth/BirthDateField/BirthDateField.styles.web.js
@@ -1,7 +1,6 @@
-import styled from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
-
 import { system, utils } from 'shared/ui-kit';
+import styled from 'styled-components';
 
 const BirthDateField = styled.div`
   position: relative;
diff --git a/packages/web-shared/components/Auth/BirthDateField/BirthDateField.web.js b/packages/web-shared/components/Auth/BirthDateField/BirthDateField.web.js
index c3693b2b..5b765067 100644
--- a/packages/web-shared/components/Auth/BirthDateField/BirthDateField.web.js
+++ b/packages/web-shared/components/Auth/BirthDateField/BirthDateField.web.js
@@ -1,7 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
+import PropTypes from 'prop-types';
 import { Box, LargeSystemText } from 'shared/ui-kit';
+
 import Styled from './BirthDateField.styles.web';
 
 function BirthDateField(props = {}) {
@@ -9,12 +10,7 @@ function BirthDateField(props = {}) {
     <>
       <LargeSystemText>Birth Date</LargeSystemText>
       <Box display="flex" mt="base">
-        <Styled.Input
-          id="birthDate"
-          label="Birth Date"
-          type="date"
-          {...props}
-        />
+        <Styled.Input id="birthDate" label="Birth Date" type="date" {...props} />
         {props.error ? (
           <Box as="p" color="alert" fontSize="s" mt="s">
             {props.error}
diff --git a/packages/web-shared/components/Auth/GenderField/GenderField.js b/packages/web-shared/components/Auth/GenderField/GenderField.js
index f31f1c3b..55e6bb37 100644
--- a/packages/web-shared/components/Auth/GenderField/GenderField.js
+++ b/packages/web-shared/components/Auth/GenderField/GenderField.js
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
 import { Box, LargeSystemText, Select } from '../../../ui-kit';
@@ -8,12 +9,7 @@ function GenderField(props = {}) {
     <>
       <LargeSystemText>Gender</LargeSystemText>
       <Box display="flex" mt="base">
-        <Select
-          id="genderSelect"
-          name="gender"
-          onChange={props.onChange}
-          defaultValue=""
-        >
+        <Select id="genderSelect" name="gender" onChange={props.onChange} defaultValue="">
           <Select.Option value="" disabled>
             Select...
           </Select.Option>
diff --git a/packages/web-shared/components/Comments/AddComment.js b/packages/web-shared/components/Comments/AddComment.js
index 5f673a1f..6cb22674 100644
--- a/packages/web-shared/components/Comments/AddComment.js
+++ b/packages/web-shared/components/Comments/AddComment.js
@@ -1,13 +1,15 @@
-import { gql, useMutation } from '@apollo/client';
 import React, { useState, useRef, useEffect } from 'react';
+
+import { gql, useMutation } from '@apollo/client';
 import { Spinner, PaperPlaneTilt } from '@phosphor-icons/react';
-import styled, { withTheme } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
 import Color from 'color';
-import { TypeStyles } from '../../ui-kit/Typography';
-import { system } from '../../ui-kit/_lib/system';
-import { Avatar, Box, Button, H5 } from '../../ui-kit';
+import styled, { withTheme } from 'styled-components';
+
 import { useCurrentUser } from '../../hooks';
+import { Avatar, Box, Button, H5 } from '../../ui-kit';
+import { system } from '../../ui-kit/_lib/system';
+import { TypeStyles } from '../../ui-kit/Typography';
 
 const ADD_COMMENT = gql`
   mutation addComment($parentId: ID!, $text: String!) {
diff --git a/packages/web-shared/components/Comments/Comment.js b/packages/web-shared/components/Comments/Comment.js
index 6deb1e97..f5751af1 100644
--- a/packages/web-shared/components/Comments/Comment.js
+++ b/packages/web-shared/components/Comments/Comment.js
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Box, H5, Avatar } from '../../ui-kit';
 
 // turn line breaks into <br> tags and strip out any other html
diff --git a/packages/web-shared/components/Comments/Comments.js b/packages/web-shared/components/Comments/Comments.js
index 9d8363e3..9ee7cf62 100644
--- a/packages/web-shared/components/Comments/Comments.js
+++ b/packages/web-shared/components/Comments/Comments.js
@@ -1,15 +1,15 @@
 import React, { useRef, useState } from 'react';
-import { Box, H4, Button } from '../../ui-kit';
+
 import { X, ArrowRight, ChatsCircle } from '@phosphor-icons/react';
-import { useCurrentUser } from '../../hooks';
-import { AuthManager } from '../../components';
 
+import AddComment from './AddComment';
+import Comment from './Comment';
+import { AuthManager } from '../../components';
+import { useCurrentUser } from '../../hooks';
 import { useAuth } from '../../providers/AuthProvider';
+import { Box, H4, Button } from '../../ui-kit';
 import authSteps from '../Auth/authSteps';
 
-import Comment from './Comment';
-import AddComment from './AddComment';
-
 export const SIDEBAR_WITH = 400;
 
 const Comments = ({ visible, parent, comments, onClose }) => {
diff --git a/packages/web-shared/components/ContentChannel.js b/packages/web-shared/components/ContentChannel.js
index 7e95efbf..51c3f86e 100644
--- a/packages/web-shared/components/ContentChannel.js
+++ b/packages/web-shared/components/ContentChannel.js
@@ -1,9 +1,10 @@
 import React from 'react';
+
 import { useNavigate } from 'react-router-dom';
 
-import { getURLFromType } from '../utils';
-import { ContentCard, Box, H3, systemPropTypes, Button } from '../ui-kit';
 import { useNavigation } from '../providers/NavigationProvider';
+import { ContentCard, Box, H3, systemPropTypes, Button } from '../ui-kit';
+import { getURLFromType } from '../utils';
 
 const PAGE_SIZE = 20;
 
diff --git a/packages/web-shared/components/ContentSeriesSingle.js b/packages/web-shared/components/ContentSeriesSingle.js
index 5b23583a..9696dbd8 100644
--- a/packages/web-shared/components/ContentSeriesSingle.js
+++ b/packages/web-shared/components/ContentSeriesSingle.js
@@ -1,20 +1,18 @@
 import React, { useEffect } from 'react';
+
+import { themeGet } from '@styled-system/theme-get';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { getURLFromType } from '../utils';
-
-import { set as setModal, useModal } from '../providers/ModalProvider';
-
-import { Box, H2, Loader, Longform, H3, ContentCard, ShareButton } from '../ui-kit';
-
-import { useHTMLContent, useVideoMediaProgress } from '../hooks';
+import styled from 'styled-components';
 
-import VideoPlayer from './VideoPlayer';
 import InteractWhenLoaded from './InteractWhenLoaded';
 import TrackEventWhenLoaded from './TrackEventWhenLoaded';
-import styled from 'styled-components';
-import { themeGet } from '@styled-system/theme-get';
+import VideoPlayer from './VideoPlayer';
+import { useHTMLContent, useVideoMediaProgress } from '../hooks';
+import { set as setModal, useModal } from '../providers/ModalProvider';
 import { useNavigation } from '../providers/NavigationProvider';
+import { Box, H2, Loader, Longform, H3, ContentCard, ShareButton } from '../ui-kit';
+import { getURLFromType } from '../utils';
 
 function ContentSeriesSingle(props = {}) {
   const [state, dispatch] = useModal();
diff --git a/packages/web-shared/components/ContentSingle.js b/packages/web-shared/components/ContentSingle.js
index bc7d000c..a6025775 100644
--- a/packages/web-shared/components/ContentSingle.js
+++ b/packages/web-shared/components/ContentSingle.js
@@ -1,39 +1,34 @@
 import React, { useEffect, useState } from 'react';
+import { ChatCircleText } from '@phosphor-icons/react';
+import { format, parseISO } from 'date-fns';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { ChatCircleText } from '@phosphor-icons/react';
-
-import { getURLFromType } from '../utils';
+import styled from 'styled-components';
 
-import { format, parseISO } from 'date-fns';
-import FeatureFeed from './FeatureFeed';
-import FeatureFeedComponentMap from './FeatureFeed/FeatureFeedComponentMap';
+import { useFeatureFeed, useHTMLContent, useVideoMediaProgress } from '../hooks';
+import { useShouldUsePathRouter } from '../providers/AppProvider';
 import { set as setModal, useModal } from '../providers/ModalProvider';
-
+import { useNavigation } from '../providers/NavigationProvider';
 import {
-  Box,
-  Loader,
-  Longform,
-  H3,
-  ContentCard,
   BodyText,
-  ShareButton,
+  Box,
   Button,
+  ContentCard,
+  H3,
   Icons,
+  Loader,
+  Longform,
   PhospherIcon,
+  ShareButton,
 } from '../ui-kit';
-import { useFeatureFeed, useHTMLContent, useVideoMediaProgress } from '../hooks';
-import { Title, ParentTitle, ParentSummary } from './ContentSingle.styles';
-
+import { getURLFromType } from '../utils';
 import Comments, { SIDEBAR_WITH } from './Comments';
-
-import VideoPlayer from './VideoPlayer';
-
+import { ParentSummary, ParentTitle, Title } from './ContentSingle.styles';
+import FeatureFeed from './FeatureFeed';
+import FeatureFeedComponentMap from './FeatureFeed/FeatureFeedComponentMap';
 import InteractWhenLoaded from './InteractWhenLoaded';
 import TrackEventWhenLoaded from './TrackEventWhenLoaded';
-import styled from 'styled-components';
-import { useNavigation } from '../providers/NavigationProvider';
-import { useShouldUsePathRouter } from '../providers/AppProvider';
+import VideoPlayer from './VideoPlayer';
 
 const infoDivider = (
   <BodyText color="text.tertiary" mx="xs" display={{ xs: 'none', sm: 'block' }}>
@@ -136,6 +131,7 @@ function ContentSingle(props = {}) {
     if (canonicalLink) {
       const oldValue = canonicalLink.getAttribute('href');
       canonicalLink.setAttribute('href', canonicalUrl);
+
       // Reset when we are done.
       return () => {
         canonicalLink.setAttribute('href', oldValue);
diff --git a/packages/web-shared/components/ContentSingle.styles.js b/packages/web-shared/components/ContentSingle.styles.js
index 908e75b8..b0062e43 100644
--- a/packages/web-shared/components/ContentSingle.styles.js
+++ b/packages/web-shared/components/ContentSingle.styles.js
@@ -1,8 +1,7 @@
-import styled from 'styled-components';
-import { withTheme } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
-import { system } from '../ui-kit/_lib/system';
+import styled, { withTheme } from 'styled-components';
 
+import { system } from '../ui-kit/_lib/system';
 import { TypeStyles } from '../ui-kit/Typography';
 
 export const Title = withTheme(styled.h1`
diff --git a/packages/web-shared/components/EventCalendar/EventCalendar.js b/packages/web-shared/components/EventCalendar/EventCalendar.js
index 8473d686..c59427fa 100644
--- a/packages/web-shared/components/EventCalendar/EventCalendar.js
+++ b/packages/web-shared/components/EventCalendar/EventCalendar.js
@@ -1,8 +1,9 @@
-import React from "react";
-import {PhospherIcon, system, utils} from "../../ui-kit";
-import styled, {withTheme} from "styled-components";
-import TypeStyles from "../../ui-kit/Typography/_typeStyles";
+import React from 'react';
 
+import styled, { withTheme } from 'styled-components';
+
+import { PhospherIcon, system, utils } from '../../ui-kit';
+import TypeStyles from '../../ui-kit/Typography/_typeStyles';
 
 const BodyText = withTheme(styled.p`
   ${TypeStyles.BodyText}
@@ -35,7 +36,7 @@ const FlexBodyText = styled(BodyText)`
   align-items: center;
 `;
 
-const EventCalendar = ({ start, end, location }) =>{
+const EventCalendar = ({ start, end, location }) => {
   return (
     <>
       {location ? (
@@ -44,14 +45,14 @@ const EventCalendar = ({ start, end, location }) =>{
           {location}
         </FlexBodyText>
       ) : null}
-      {start && location ? <InfoDivider/> : null}
+      {start && location ? <InfoDivider /> : null}
       {start ? (
         <FlexBodyText color="text.secondary" mb={'xxs'}>
           <CalendarIcon name="calendar" />
           {start}
         </FlexBodyText>
       ) : null}
-      {end && start ? <InfoDivider/> : null}
+      {end && start ? <InfoDivider /> : null}
       {end ? (
         <FlexBodyText color="text.secondary" mb={'xxs'}>
           <CalendarIcon name="clock" />
@@ -60,6 +61,6 @@ const EventCalendar = ({ start, end, location }) =>{
       ) : null}
     </>
   );
-}
+};
 
-export default EventCalendar;
\ No newline at end of file
+export default EventCalendar;
diff --git a/packages/web-shared/components/EventCalendar/index.js b/packages/web-shared/components/EventCalendar/index.js
index d1e61f78..98147695 100644
--- a/packages/web-shared/components/EventCalendar/index.js
+++ b/packages/web-shared/components/EventCalendar/index.js
@@ -1,3 +1,3 @@
-import EventCalendar from "./EventCalendar";
+import EventCalendar from './EventCalendar';
 
-export default EventCalendar;
\ No newline at end of file
+export default EventCalendar;
diff --git a/packages/web-shared/components/FeatureFeed/Features/ActionBarFeature.js b/packages/web-shared/components/FeatureFeed/Features/ActionBarFeature.js
index 8dcc3537..2bbb59bf 100644
--- a/packages/web-shared/components/FeatureFeed/Features/ActionBarFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/ActionBarFeature.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { systemPropTypes, PhospherIcon } from '../../../ui-kit';
 import Styled from './ActionBarFeature.styles';
+import { systemPropTypes, PhospherIcon } from '../../../ui-kit';
 
 function ActionBarFeature(props = {}) {
   const handleActionPress = (url) => {
diff --git a/packages/web-shared/components/FeatureFeed/Features/ActionBarFeature.styles.js b/packages/web-shared/components/FeatureFeed/Features/ActionBarFeature.styles.js
index cc4bca07..2f473f95 100644
--- a/packages/web-shared/components/FeatureFeed/Features/ActionBarFeature.styles.js
+++ b/packages/web-shared/components/FeatureFeed/Features/ActionBarFeature.styles.js
@@ -1,9 +1,8 @@
-import styled from 'styled-components';
-import { withTheme } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme } from 'styled-components';
 
-import { TypeStyles } from '../../../ui-kit/Typography';
 import { system } from '../../../ui-kit/_lib/system';
+import { TypeStyles } from '../../../ui-kit/Typography';
 
 const ActionBar = withTheme(styled.div`
   display: flex;
diff --git a/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.js b/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.js
index 2adb2d0a..24b22875 100644
--- a/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.js
@@ -1,8 +1,9 @@
 import React from 'react';
-import { getURLFromType } from '../../../utils';
-import { systemPropTypes, ResourceCard, Box, H5 } from '../../../ui-kit';
+
 import Styled from './ActionListFeature.styles';
 import { useNavigation } from '../../../providers/NavigationProvider';
+import { systemPropTypes, ResourceCard, Box, H5 } from '../../../ui-kit';
+import { getURLFromType } from '../../../utils';
 
 function ActionListFeature({ feature, emptyPlaceholderText }) {
   const { navigate } = useNavigation();
diff --git a/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.styles.js b/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.styles.js
index a16d51be..ee3c0baa 100644
--- a/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.styles.js
+++ b/packages/web-shared/components/FeatureFeed/Features/ActionListFeature.styles.js
@@ -1,9 +1,8 @@
-import styled from 'styled-components';
-import { withTheme } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme } from 'styled-components';
 
-import { TypeStyles } from '../../../ui-kit/Typography';
 import { system } from '../../../ui-kit/_lib/system';
+import { TypeStyles } from '../../../ui-kit/Typography';
 
 const List = withTheme(styled.ul`
   display: flex;
diff --git a/packages/web-shared/components/FeatureFeed/Features/ButtonFeature.js b/packages/web-shared/components/FeatureFeed/Features/ButtonFeature.js
index 18cfec9b..0128b905 100644
--- a/packages/web-shared/components/FeatureFeed/Features/ButtonFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/ButtonFeature.js
@@ -1,20 +1,22 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
 
-import { getURLFromType } from '../../../utils';
+import { withTheme } from 'styled-components';
 
-import { Button, systemPropTypes } from '../../../ui-kit';
 import { useNavigation } from '../../../providers/NavigationProvider';
+import { Button, systemPropTypes } from '../../../ui-kit';
+import { getURLFromType } from '../../../utils';
 
 function ButtonFeature(props = {}) {
   const { navigate } = useNavigation();
+  const relatedNode = props.feature?.action?.relatedNode;
+
   // Event Handlers
   const handleActionPress = () => {
-    if (props.feature?.action?.relatedNode?.url) {
-      window.open(props.transformLink(props.feature?.action?.relatedNode?.url), '_blank');
-    } else {
+    if (relatedNode?.url) {
+      window.open(props.transformLink(relatedNode.url), '_blank');
+    } else if (relatedNode) {
       navigate({
-        id: getURLFromType(item.relatedNode),
+        id: getURLFromType(relatedNode),
       });
     }
   };
diff --git a/packages/web-shared/components/FeatureFeed/Features/ChipListFeature.js b/packages/web-shared/components/FeatureFeed/Features/ChipListFeature.js
index 8ec0e466..21de3b2b 100644
--- a/packages/web-shared/components/FeatureFeed/Features/ChipListFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/ChipListFeature.js
@@ -1,8 +1,9 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
-import { systemPropTypes, Box, PhospherIcon } from '../../../ui-kit';
 import Styled from './ChipListFeature.styles';
+import { systemPropTypes, Box, PhospherIcon } from '../../../ui-kit';
 
 function ChipListFeature({ feature }) {
   if (feature?.chips?.length === 0 || !feature?.chips) {
diff --git a/packages/web-shared/components/FeatureFeed/Features/ChipListFeature.styles.js b/packages/web-shared/components/FeatureFeed/Features/ChipListFeature.styles.js
index 1d4832ed..1a376355 100644
--- a/packages/web-shared/components/FeatureFeed/Features/ChipListFeature.styles.js
+++ b/packages/web-shared/components/FeatureFeed/Features/ChipListFeature.styles.js
@@ -1,9 +1,8 @@
-import styled from 'styled-components';
-import { withTheme } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme } from 'styled-components';
 
-import { TypeStyles } from '../../../ui-kit/Typography';
 import { system } from '../../../ui-kit/_lib/system';
+import { TypeStyles } from '../../../ui-kit/Typography';
 
 const Chip = withTheme(styled.a`
   ${TypeStyles.BodyText}
diff --git a/packages/web-shared/components/FeatureFeed/Features/EventBlockFeature.js b/packages/web-shared/components/FeatureFeed/Features/EventBlockFeature.js
index 732b1413..f7a86ff5 100644
--- a/packages/web-shared/components/FeatureFeed/Features/EventBlockFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/EventBlockFeature.js
@@ -1,5 +1,9 @@
 import React from 'react';
+
 import { ArrowSquareOut, MapPin, CalendarPlus, Clock } from '@phosphor-icons/react';
+import { addSeconds, isSameDay, parseISO } from 'date-fns';
+import { useTheme } from 'styled-components';
+
 import {
   Container,
   IconContainer,
@@ -8,11 +12,8 @@ import {
   Details,
   ActionIcon,
 } from './EventBlockFeature.styles';
-import { addSeconds, isSameDay, parseISO } from 'date-fns';
-
-import { useTheme } from 'styled-components';
-import AddToCalendar from '../../AddToCalendar';
 import { BodyText } from '../../../ui-kit';
+import AddToCalendar from '../../AddToCalendar';
 
 function eventTimestampLines({ start, duration, allDay }) {
   const startDate = parseISO(start);
diff --git a/packages/web-shared/components/FeatureFeed/Features/EventBlockFeature.styles.js b/packages/web-shared/components/FeatureFeed/Features/EventBlockFeature.styles.js
index f1934ac8..d95a42cf 100644
--- a/packages/web-shared/components/FeatureFeed/Features/EventBlockFeature.styles.js
+++ b/packages/web-shared/components/FeatureFeed/Features/EventBlockFeature.styles.js
@@ -1,7 +1,6 @@
-import styled from 'styled-components';
-import { withTheme } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
 import { rgba } from 'polished';
+import styled, { withTheme } from 'styled-components';
 
 import { system } from '../../../ui-kit/_lib/system';
 
diff --git a/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.js b/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.js
index 497cac4d..6ffd5af9 100644
--- a/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.js
@@ -1,13 +1,15 @@
 import React from 'react';
+
 import { withTheme } from 'styled-components';
-import { getURLFromType } from '../../../utils';
-import { open as openModal, set as setModal, useModal } from '../../../providers/ModalProvider';
-import { Box, Button, H2, H4, systemPropTypes, ContentCard } from '../../../ui-kit';
+
 import Styled from './HeroListFeature.styles';
-import { useNavigation } from '../../../providers/NavigationProvider';
 import useHandleActionPress, {
   useHandlePrimaryActionPress,
 } from '../../../hooks/useHandleActionPress';
+import { open as openModal, set as setModal, useModal } from '../../../providers/ModalProvider';
+import { useNavigation } from '../../../providers/NavigationProvider';
+import { Box, Button, H2, H4, systemPropTypes, ContentCard } from '../../../ui-kit';
+import { getURLFromType } from '../../../utils';
 
 function HeroListFeature(props = {}) {
   const [state, dispatch] = useModal();
diff --git a/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.styles.js b/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.styles.js
index 9a7ce7a8..272997e9 100644
--- a/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.styles.js
+++ b/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.styles.js
@@ -1,6 +1,5 @@
-import styled, { css } from 'styled-components';
-import { withTheme } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { css, withTheme } from 'styled-components';
 
 import { system } from '../../../ui-kit/_lib/system';
 import { TypeStyles } from '../../../ui-kit/Typography';
diff --git a/packages/web-shared/components/FeatureFeed/Features/HorizontalCardListFeature.js b/packages/web-shared/components/FeatureFeed/Features/HorizontalCardListFeature.js
index 6d48e641..af504845 100644
--- a/packages/web-shared/components/FeatureFeed/Features/HorizontalCardListFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/HorizontalCardListFeature.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import get from 'lodash/get';
 
-import { ContentCard, Box, H2, systemPropTypes, Button, ButtonGroup } from '../../../ui-kit';
 import { CaretRight } from '@phosphor-icons/react';
-
+import get from 'lodash/get';
 import Carousel from 'react-multi-carousel';
+
 import useHandleActionPress, {
   useHandlePrimaryActionPress,
 } from '../../../hooks/useHandleActionPress';
+import { ContentCard, Box, H2, systemPropTypes, Button, ButtonGroup } from '../../../ui-kit';
 
 const responsive = {
   lg: {
diff --git a/packages/web-shared/components/FeatureFeed/Features/HorizontalMediaListFeature.js b/packages/web-shared/components/FeatureFeed/Features/HorizontalMediaListFeature.js
index e8c63f97..45cf8e8f 100644
--- a/packages/web-shared/components/FeatureFeed/Features/HorizontalMediaListFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/HorizontalMediaListFeature.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import get from 'lodash/get';
 
-import { Box, H2, systemPropTypes, Button, MediaItem, ButtonGroup } from '../../../ui-kit';
-import Carousel from 'react-multi-carousel';
 import { CaretRight } from '@phosphor-icons/react';
+import get from 'lodash/get';
+import Carousel from 'react-multi-carousel';
 
 import useHandleActionPress, {
   useHandlePrimaryActionPress,
 } from '../../../hooks/useHandleActionPress';
+import { Box, H2, systemPropTypes, Button, MediaItem, ButtonGroup } from '../../../ui-kit';
 
 const SHOW_VIEW_ALL_LIMIT = 5;
 
diff --git a/packages/web-shared/components/FeatureFeed/Features/HtmlFeature.js b/packages/web-shared/components/FeatureFeed/Features/HtmlFeature.js
index 7d57dbb2..80b7a3e1 100644
--- a/packages/web-shared/components/FeatureFeed/Features/HtmlFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/HtmlFeature.js
@@ -1,8 +1,9 @@
 import React from 'react';
+
 import { withTheme } from 'styled-components';
 
-import { Longform, systemPropTypes } from '../../../ui-kit';
 import { useHTMLContent } from '../../../hooks';
+import { Longform, systemPropTypes } from '../../../ui-kit';
 
 function HtmlFeature(props = {}) {
   const parseHTMLContent = useHTMLContent();
diff --git a/packages/web-shared/components/FeatureFeed/Features/PrayerListFeature.js b/packages/web-shared/components/FeatureFeed/Features/PrayerListFeature.js
index 689ac80b..38b987ee 100644
--- a/packages/web-shared/components/FeatureFeed/Features/PrayerListFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/PrayerListFeature.js
@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
-import { systemPropTypes, Box, H3 } from '../../../ui-kit';
-import Styled from './PrayerListFeature.styles';
+
 import { Plus, X } from '@phosphor-icons/react';
 
+import Styled from './PrayerListFeature.styles';
+import { systemPropTypes, Box, H3 } from '../../../ui-kit';
+
 function PrayerListFeature(props = {}) {
   // Generate random background color
   const randomHSLA = () => `hsla(${~~(360 * Math.random())}, 70%,  72%, 0.8)`;
 
-  //Background colors for requestors with no profile picture
+  // Background colors for requestors with no profile picture
   const [backgroundColors, setBackgroundColors] = useState(props.feature?.prayers?.map(randomHSLA));
 
   const [modalState, setModalState] = useState({
@@ -81,7 +83,7 @@ function PrayerListFeature(props = {}) {
     );
   };
 
-  //Is this needed?
+  // Is this needed?
   const AddDailyPrayer = (
     <Box position="relative" display="inline-block" padding="2px 5px" onClick={openModal}>
       <Styled.Avatar>
diff --git a/packages/web-shared/components/FeatureFeed/Features/PrayerListFeature.styles.js b/packages/web-shared/components/FeatureFeed/Features/PrayerListFeature.styles.js
index 6af70850..7ce3ac79 100644
--- a/packages/web-shared/components/FeatureFeed/Features/PrayerListFeature.styles.js
+++ b/packages/web-shared/components/FeatureFeed/Features/PrayerListFeature.styles.js
@@ -1,9 +1,8 @@
-import styled from 'styled-components';
-import { withTheme } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme } from 'styled-components';
 
-import { TypeStyles } from '../../../ui-kit/Typography';
 import { system } from '../../../ui-kit/_lib/system';
+import { TypeStyles } from '../../../ui-kit/Typography';
 
 const Avatar = withTheme(styled.div`
   display: flex;
diff --git a/packages/web-shared/components/FeatureFeed/Features/ScriptureFeature.js b/packages/web-shared/components/FeatureFeed/Features/ScriptureFeature.js
index 173c7aa9..18a5b393 100644
--- a/packages/web-shared/components/FeatureFeed/Features/ScriptureFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/ScriptureFeature.js
@@ -1,8 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { systemPropTypes, Box } from '../../../ui-kit';
+
+import { ArrowsInSimple, ArrowsOutSimple } from '@phosphor-icons/react';
 import PropTypes from 'prop-types';
+
 import Styled from './ScriptureFeature.styles';
-import { ArrowsInSimple, ArrowsOutSimple } from '@phosphor-icons/react';
+import { systemPropTypes, Box } from '../../../ui-kit';
 
 function ScriptureFeature(props = {}) {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -37,6 +39,7 @@ function ScriptureFeature(props = {}) {
     // Determine if it's a range within the same chapter
     if (startChapter === endChapterOrVerse || (startVerse && endChapterOrVerse && !endVerse)) {
       isRangeWithinSingleChapter = true;
+
       // If endChapterOrVerse is not empty and endVerse is empty, it means endChapterOrVerse is actually the endVerse
       actualEndVerse = endChapterOrVerse && !endVerse ? endChapterOrVerse : endVerse;
     }
diff --git a/packages/web-shared/components/FeatureFeed/Features/ScriptureFeature.styles.js b/packages/web-shared/components/FeatureFeed/Features/ScriptureFeature.styles.js
index 4b6f524b..e08ecc4e 100644
--- a/packages/web-shared/components/FeatureFeed/Features/ScriptureFeature.styles.js
+++ b/packages/web-shared/components/FeatureFeed/Features/ScriptureFeature.styles.js
@@ -1,7 +1,7 @@
-import styled, { css, keyframes } from 'styled-components';
-import { withTheme } from 'styled-components';
-import { system } from '../../../ui-kit/_lib/system';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { css, keyframes, withTheme } from 'styled-components';
+
+import { system } from '../../../ui-kit/_lib/system';
 
 const expandAnimation = keyframes`
   from {
@@ -114,7 +114,9 @@ const ScriptureItemExpandButton = withTheme(styled.div`
   right: 0;
   margin: 16px;
   opacity: 1;
-  transition: opacity 0.3s ease, background-color 0.3s ease;
+  transition:
+    opacity 0.3s ease,
+    background-color 0.3s ease;
   &:hover {
     opacity: 0.6;
     background-color: ${themeGet('colors.base.secondary')};
diff --git a/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.js b/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.js
index 9b93176a..e3d167b1 100644
--- a/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.js
+++ b/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.js
@@ -1,11 +1,12 @@
 import React from 'react';
 
-import { ContentCard, Box, H2, systemPropTypes, Button } from '../../../ui-kit';
-import Styled from './VerticalCardListFeature.styles';
 import { CaretRight } from '@phosphor-icons/react';
+
+import Styled from './VerticalCardListFeature.styles';
 import useHandleActionPress, {
   useHandlePrimaryActionPress,
 } from '../../../hooks/useHandleActionPress';
+import { ContentCard, Box, H2, systemPropTypes, Button } from '../../../ui-kit';
 
 function VerticalCardListFeature(props = {}) {
   const handleActionPress = useHandleActionPress();
diff --git a/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.styles.js b/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.styles.js
index 909a32ae..189e07f5 100644
--- a/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.styles.js
+++ b/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.styles.js
@@ -1,6 +1,6 @@
-import styled, { css } from 'styled-components';
-import 'react-multi-carousel/lib/styles.css';
 import { themeGet } from '@styled-system/theme-get';
+import 'react-multi-carousel/lib/styles.css';
+import styled, { css } from 'styled-components';
 
 const twoCardlayout = ({ length }) => {
   if (length === 2) {
diff --git a/packages/web-shared/components/FeatureFeed/Feed.js b/packages/web-shared/components/FeatureFeed/Feed.js
index e741ff25..c72f8f82 100644
--- a/packages/web-shared/components/FeatureFeed/Feed.js
+++ b/packages/web-shared/components/FeatureFeed/Feed.js
@@ -1,17 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 
-import isNil from 'lodash/isNil';
 import compact from 'lodash/compact';
 import isFunction from 'lodash/isFunction';
+import isNil from 'lodash/isNil';
+import PropTypes from 'prop-types';
 
+import FeatureFeedComponentMap from './FeatureFeedComponentMap';
 import { useLink } from '../../hooks';
 import { Box, Loader } from '../../ui-kit';
 
-import FeatureFeedComponentMap from './FeatureFeedComponentMap';
-
 const Feed = ({ loading, data, emptyPlaceholderText }) => {
   const transformLink = useLink();
+
   // Clunky, silly workaround for an Apollo query `loading` prop problem.
   // We don't want cache updates or background refetch calls to trigger
   // the loading state when we have data... that unmounts the VideoPlayer.
diff --git a/packages/web-shared/components/FeatureFeedList/FeatureFeedList.js b/packages/web-shared/components/FeatureFeedList/FeatureFeedList.js
index 9b25172f..b50a8441 100644
--- a/packages/web-shared/components/FeatureFeedList/FeatureFeedList.js
+++ b/packages/web-shared/components/FeatureFeedList/FeatureFeedList.js
@@ -1,13 +1,13 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 import { useSearchParams } from 'react-router-dom';
 
+import Styled from './FeatureFeedList.styles';
+import FeatureFeedListGrid from './FeatureFeedListGrid';
 import { Feed } from '..';
 import { Box, Loader } from '../../ui-kit';
 
-import FeatureFeedListGrid from './FeatureFeedListGrid';
-import Styled from './FeatureFeedList.styles';
-
 const FeatureFeedList = (props) => {
   const [searchParams, setSearchParams] = useSearchParams();
 
diff --git a/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js b/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js
index a1a70e65..9f1e5434 100644
--- a/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js
+++ b/packages/web-shared/components/FeatureFeedList/FeatureFeedListGrid.js
@@ -2,11 +2,10 @@ import React from 'react';
 
 import { withTheme } from 'styled-components';
 
-import { getURLFromType } from '../../utils';
-import { Box, ContentCard, H3 } from '../../ui-kit';
-
 import { open as openModal, set as setModal, useModal } from '../../providers/ModalProvider';
 import { useNavigation } from '../../providers/NavigationProvider';
+import { Box, ContentCard, H3 } from '../../ui-kit';
+import { getURLFromType } from '../../utils';
 
 function FeatureFeedListGrid({ loading, data, emptyPlaceholderText }) {
   const { navigate, id } = useNavigation();
diff --git a/packages/web-shared/components/InteractWhenLoaded/InteractWhenLoaded.js b/packages/web-shared/components/InteractWhenLoaded/InteractWhenLoaded.js
index 9851996b..0ea2c71e 100644
--- a/packages/web-shared/components/InteractWhenLoaded/InteractWhenLoaded.js
+++ b/packages/web-shared/components/InteractWhenLoaded/InteractWhenLoaded.js
@@ -1,7 +1,8 @@
-import { useEffect } from "react";
-import PropTypes from "prop-types";
+import { useEffect } from 'react';
 
-import { useInteractWithNode } from "../../hooks";
+import PropTypes from 'prop-types';
+
+import { useInteractWithNode } from '../../hooks';
 
 const InteractWhenLoaded = ({ loading, nodeId, action, data }) => {
   const [interactWhenLoaded] = useInteractWithNode();
diff --git a/packages/web-shared/components/InteractWhenLoaded/index.js b/packages/web-shared/components/InteractWhenLoaded/index.js
index 5fa9fbf5..bc41617c 100644
--- a/packages/web-shared/components/InteractWhenLoaded/index.js
+++ b/packages/web-shared/components/InteractWhenLoaded/index.js
@@ -1,3 +1,3 @@
-import InteractWhenLoaded from "./InteractWhenLoaded";
+import InteractWhenLoaded from './InteractWhenLoaded';
 
 export default InteractWhenLoaded;
diff --git a/packages/web-shared/components/LivestreamSingle.js b/packages/web-shared/components/LivestreamSingle.js
index 8d6e3314..66cc7935 100644
--- a/packages/web-shared/components/LivestreamSingle.js
+++ b/packages/web-shared/components/LivestreamSingle.js
@@ -1,12 +1,15 @@
 import React, { useEffect } from 'react';
+
 import PropTypes from 'prop-types';
-import { useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
+import { useNavigate } from 'react-router-dom';
 
-import { getURLFromType } from '../utils';
 import FeatureFeed from './FeatureFeed';
 import FeatureFeedComponentMap from './FeatureFeed/FeatureFeedComponentMap';
-
+import TrackEventWhenLoaded from './TrackEventWhenLoaded';
+import VideoPlayer from './VideoPlayer';
+import { useVideoMediaProgress, useLivestreamStatus, useHTMLContent } from '../hooks';
+import { useNavigation } from '../providers/NavigationProvider';
 import {
   BodyText,
   Box,
@@ -18,10 +21,7 @@ import {
   Longform,
   ShareButton,
 } from '../ui-kit';
-import { useVideoMediaProgress, useLivestreamStatus, useHTMLContent } from '../hooks';
-import VideoPlayer from './VideoPlayer';
-import TrackEventWhenLoaded from './TrackEventWhenLoaded';
-import { useNavigation } from '../providers/NavigationProvider';
+import { getURLFromType } from '../utils';
 
 function LivestreamSingle(props = {}) {
   const { navigate } = useNavigation();
diff --git a/packages/web-shared/components/Logo/Logo.js b/packages/web-shared/components/Logo/Logo.js
index f9896801..f4eb0ba0 100644
--- a/packages/web-shared/components/Logo/Logo.js
+++ b/packages/web-shared/components/Logo/Logo.js
@@ -1,9 +1,10 @@
 import React from 'react';
+
+import { themeGet } from '@styled-system/theme-get';
 import PropTypes from 'prop-types';
 import { withTheme } from 'styled-components';
-import { themeGet } from '@styled-system/theme-get';
-import Styled from './Logo.styles';
 
+import Styled from './Logo.styles';
 import { Box, systemPropTypes } from '../../ui-kit';
 
 function Logo({ fill, size, padding, theme, source, ...rest }) {
diff --git a/packages/web-shared/components/Logo/Logo.styles.js b/packages/web-shared/components/Logo/Logo.styles.js
index 29d062c8..9b762fb5 100644
--- a/packages/web-shared/components/Logo/Logo.styles.js
+++ b/packages/web-shared/components/Logo/Logo.styles.js
@@ -1,6 +1,5 @@
-import { withTheme } from 'styled-components';
-import styled, { css } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme, css } from 'styled-components';
 
 import { system } from '../../ui-kit';
 
diff --git a/packages/web-shared/components/Modal/Modal.js b/packages/web-shared/components/Modal/Modal.js
index 5d426d17..39586a6f 100644
--- a/packages/web-shared/components/Modal/Modal.js
+++ b/packages/web-shared/components/Modal/Modal.js
@@ -1,18 +1,20 @@
 import React, { forwardRef, useEffect, useRef } from 'react';
-import { useCurrentChurch } from '../../hooks';
-import { systemPropTypes } from '../../ui-kit/_lib/system';
+
+import { X } from '@phosphor-icons/react';
+
 import Styled from './Modal.styles';
-import { Box } from '../../ui-kit';
 import { Searchbar } from '../../components';
-import { useNavigation } from '../../providers/NavigationProvider';
-import { X } from '@phosphor-icons/react';
-import Wordmark from '../Wordmark';
+import { useCurrentChurch } from '../../hooks';
 import {
   set as setModal,
   useModal,
   close as closeModal,
   open as openModal,
 } from '../../providers/ModalProvider';
+import { useNavigation } from '../../providers/NavigationProvider';
+import { Box } from '../../ui-kit';
+import { systemPropTypes } from '../../ui-kit/_lib/system';
+import Wordmark from '../Wordmark';
 
 function ChurchLogo(props) {
   const { currentChurch } = useCurrentChurch();
@@ -43,6 +45,7 @@ const Modal = (props = {}) => {
 
   function handleCloseModal() {
     dispatch(closeModal());
+
     // Navigate to root
     navigate();
   }
diff --git a/packages/web-shared/components/Modal/Modal.styles.js b/packages/web-shared/components/Modal/Modal.styles.js
index 01ee8589..69e0fa1d 100644
--- a/packages/web-shared/components/Modal/Modal.styles.js
+++ b/packages/web-shared/components/Modal/Modal.styles.js
@@ -1,6 +1,5 @@
-import { withTheme } from 'styled-components';
-import styled, { css, keyframes } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme, css, keyframes } from 'styled-components';
 
 import { system } from '../../ui-kit/_lib/system';
 
diff --git a/packages/web-shared/components/Profile/ImageUploader.js b/packages/web-shared/components/Profile/ImageUploader.js
index 17ff13bd..d786e151 100644
--- a/packages/web-shared/components/Profile/ImageUploader.js
+++ b/packages/web-shared/components/Profile/ImageUploader.js
@@ -1,13 +1,13 @@
 import React, { useState, useRef } from 'react';
 
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
+
 import { canvasPreview } from './canvasPreview';
+import Styled from './Profile.styles';
 import { useDebounceEffect } from './useDebounceEffect';
-import { H4, Button, Box } from '../../ui-kit';
 import { useUploadProfileImage } from '../../hooks';
 import { GET_CURRENT_USER } from '../../hooks/useCurrentUser';
-
-import Styled from './Profile.styles';
+import { H4, Button, Box } from '../../ui-kit';
 
 function centerAspectCrop(mediaWidth, mediaHeight, aspect) {
   return centerCrop(
@@ -62,6 +62,7 @@ export default function ImageUploader(props) {
             size: size,
           },
         });
+
         // Access the uploaded photo URI from the response data
         const photoURI = data.uploadProfileImage.photo.uri;
         props.handleCloseImageUploader();
diff --git a/packages/web-shared/components/Profile/Profile.js b/packages/web-shared/components/Profile/Profile.js
index 38952b3b..b4dc44f2 100644
--- a/packages/web-shared/components/Profile/Profile.js
+++ b/packages/web-shared/components/Profile/Profile.js
@@ -1,30 +1,28 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { systemPropTypes, utils } from '../../ui-kit';
-import { withTheme } from 'styled-components';
-import { AuthManager } from '../../components';
-import ProfileDetails from './ProfileDetails';
-import { Link } from 'react-router-dom';
-import Color from 'color';
-import ImageUploader from './ImageUploader';
-
-import { Button, Avatar, BodyText, Box, H4, ListItem } from '../../ui-kit';
-import Logo from '../Logo';
+import React, { useEffect, useRef, useState } from 'react';
 import {
-  UserCirclePlus,
-  ArrowRight,
   AndroidLogo,
   AppleLogo,
-  User,
+  ArrowRight,
   ArrowSquareOut,
-  X,
   Camera,
+  User,
+  UserCirclePlus,
+  X,
 } from '@phosphor-icons/react';
-import Styled from './Profile.styles';
-
-import { useCurrentUser, useCurrentChurch } from '../../hooks';
 import themeGet from '@styled-system/theme-get';
+import Color from 'color';
+import { Link } from 'react-router-dom';
+import { withTheme } from 'styled-components';
+
+import { AuthManager } from '../../components';
+import { useCurrentChurch, useCurrentUser } from '../../hooks';
 import { logout, useAuth } from '../../providers/AuthProvider';
+import { Avatar, BodyText, Box, Button, H4, ListItem, systemPropTypes, utils } from '../../ui-kit';
 import authSteps from '../Auth/authSteps';
+import Logo from '../Logo';
+import ImageUploader from './ImageUploader';
+import ProfileDetails from './ProfileDetails';
+import Styled from './Profile.styles';
 
 const Profile = ({ theme, handleCloseProfile, size, ...rest }) => {
   const { currentUser } = useCurrentUser();
diff --git a/packages/web-shared/components/Profile/Profile.styles.js b/packages/web-shared/components/Profile/Profile.styles.js
index 465e75f3..18de1af8 100644
--- a/packages/web-shared/components/Profile/Profile.styles.js
+++ b/packages/web-shared/components/Profile/Profile.styles.js
@@ -1,9 +1,9 @@
-import { withTheme } from 'styled-components';
-import styled, { css } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
-import Card from '../../ui-kit/Card';
-import { system } from '../../ui-kit/_lib/system';
 import Color from 'color';
+import styled, { withTheme, css } from 'styled-components';
+
+import { system } from '../../ui-kit/_lib/system';
+import Card from '../../ui-kit/Card';
 
 const Profile = withTheme(styled.div`
   align-items: center;
diff --git a/packages/web-shared/components/Profile/ProfileButton.js b/packages/web-shared/components/Profile/ProfileButton.js
index 0fe19c59..86d3135d 100644
--- a/packages/web-shared/components/Profile/ProfileButton.js
+++ b/packages/web-shared/components/Profile/ProfileButton.js
@@ -1,8 +1,10 @@
-import { Box, Avatar } from '../../ui-kit';
-import { User } from '@phosphor-icons/react';
-import { useCurrentUser } from '../../hooks';
 import React, { useState } from 'react';
+
+import { User } from '@phosphor-icons/react';
+
 import Profile from './Profile';
+import { useCurrentUser } from '../../hooks';
+import { Box, Avatar } from '../../ui-kit';
 
 const ProfileButton = (props) => {
   const [showProfile, setShowProfile] = useState(false);
diff --git a/packages/web-shared/components/Profile/ProfileDetails.js b/packages/web-shared/components/Profile/ProfileDetails.js
index 2db9d37f..9aaf6569 100644
--- a/packages/web-shared/components/Profile/ProfileDetails.js
+++ b/packages/web-shared/components/Profile/ProfileDetails.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+
 import PropTypes from 'prop-types';
 
 import { useForm, useUpdateProfileFields, useCurrentUser } from '../../hooks';
@@ -79,9 +80,7 @@ function ProfileDetails({ setShowDetails, ...props }) {
           title={isLoading ? 'Saving' : 'Save'}
           type="submit"
           onClick={() => handleSubmit()}
-          disabled={
-            !currentUser || !(values.firstName || values.lastName) || isLoading
-          }
+          disabled={!currentUser || !(values.firstName || values.lastName) || isLoading}
         />
       </Box>
     </Box>
diff --git a/packages/web-shared/components/Profile/canvasPreview.js b/packages/web-shared/components/Profile/canvasPreview.js
index 2baf782c..22898ad7 100644
--- a/packages/web-shared/components/Profile/canvasPreview.js
+++ b/packages/web-shared/components/Profile/canvasPreview.js
@@ -1,12 +1,6 @@
 const TO_RADIANS = Math.PI / 180;
 
-export async function canvasPreview(
-  image,
-  canvas,
-  crop,
-  scale = 1,
-  rotate = 0
-) {
+export async function canvasPreview(image, canvas, crop, scale = 1, rotate = 0) {
   const ctx = canvas.getContext('2d');
 
   if (!ctx) {
@@ -15,11 +9,13 @@ export async function canvasPreview(
 
   const scaleX = image.naturalWidth / image.width;
   const scaleY = image.naturalHeight / image.height;
+
   // devicePixelRatio slightly increases sharpness on retina devices
   // at the expense of slightly slower render times and needing to
   // size the image back down if you want to download/upload and be
   // true to the images natural size.
   const pixelRatio = window.devicePixelRatio;
+
   // const pixelRatio = 1
 
   canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
@@ -39,12 +35,16 @@ export async function canvasPreview(
 
   // 5) Move the crop origin to the canvas origin (0,0)
   ctx.translate(-cropX, -cropY);
+
   // 4) Move the origin to the center of the original position
   ctx.translate(centerX, centerY);
+
   // 3) Rotate around the origin
   ctx.rotate(rotateRads);
+
   // 2) Scale the image
   ctx.scale(scale, scale);
+
   // 1) Move the center of the image to the origin (0,0)
   ctx.translate(-centerX, -centerY);
   ctx.drawImage(
diff --git a/packages/web-shared/components/Searchbar/Autocomplete.js b/packages/web-shared/components/Searchbar/Autocomplete.js
index 24895e43..d8bf0302 100644
--- a/packages/web-shared/components/Searchbar/Autocomplete.js
+++ b/packages/web-shared/components/Searchbar/Autocomplete.js
@@ -1,16 +1,16 @@
 import React, { useEffect, useRef, useMemo } from 'react';
-import { X } from '@phosphor-icons/react';
 
-import algoliasearch from 'algoliasearch/lite';
 import { createAutocomplete } from '@algolia/autocomplete-core';
-import { getAlgoliaResults } from '@algolia/autocomplete-preset-algolia';
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
 import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
+import { getAlgoliaResults } from '@algolia/autocomplete-preset-algolia';
+import { X } from '@phosphor-icons/react';
+import algoliasearch from 'algoliasearch/lite';
 import '@algolia/autocomplete-theme-classic';
 
+import Styled from './Search.styles';
 import { useSearchState } from '../../providers/SearchProvider';
 import { getURLFromType } from '../../utils';
-import Styled from './Search.styles';
 
 const MOBILE_BREAKPOINT = 428;
 const appId = 'Z0GWPR8XBE';
@@ -126,6 +126,7 @@ export default function Autocomplete({
             block: 'start',
           });
         }
+
         // (2) Synchronize the Autocomplete state with the React state.
         setAutocompleteState(state);
       },
@@ -153,6 +154,7 @@ export default function Autocomplete({
                       hitsPerPage: 4,
                       clickAnalytics: true,
                       getRankingInfo: true,
+
                       // highlightPreTag: '<mark>',
                       // highlightPostTag: '</mark>',
                     },
@@ -184,6 +186,7 @@ export default function Autocomplete({
                       hitsPerPage: 8,
                       clickAnalytics: true,
                       getRankingInfo: true,
+
                       // highlightPreTag: '<mark>',
                       // highlightPostTag: '</mark>',
                     },
@@ -195,6 +198,7 @@ export default function Autocomplete({
                       hitsPerPage: 8,
                       clickAnalytics: true,
                       getRankingInfo: true,
+
                       // highlightPreTag: '<mark>',
                       // highlightPostTag: '</mark>',
                     },
diff --git a/packages/web-shared/components/Searchbar/Search.styles.js b/packages/web-shared/components/Searchbar/Search.styles.js
index 33014a36..0651ed63 100644
--- a/packages/web-shared/components/Searchbar/Search.styles.js
+++ b/packages/web-shared/components/Searchbar/Search.styles.js
@@ -1,10 +1,9 @@
-import { withTheme } from 'styled-components';
-import styled, { css } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme, css } from 'styled-components';
 
-import { H4, TypeStyles } from '../../ui-kit/Typography';
 import { utils } from '../../ui-kit';
 import { system } from '../../ui-kit/_lib/system';
+import { H4, TypeStyles } from '../../ui-kit/Typography';
 
 const showDropdown = ({ dropdown }) => {
   if (dropdown) {
diff --git a/packages/web-shared/components/Searchbar/SearchResults.js b/packages/web-shared/components/Searchbar/SearchResults.js
index 77f07fde..ed487685 100644
--- a/packages/web-shared/components/Searchbar/SearchResults.js
+++ b/packages/web-shared/components/Searchbar/SearchResults.js
@@ -2,16 +2,15 @@ import React, { useEffect, useState, createElement, Fragment } from 'react';
 
 import '@algolia/autocomplete-theme-classic';
 import { parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
+import { ClockCounterClockwise, MagnifyingGlass, CaretRight, X } from '@phosphor-icons/react';
 
-import { useSearchState } from '../../providers/SearchProvider';
 import { FeatureFeedProvider } from '../../providers';
-import Feed from '../FeatureFeed';
-import { ResourceCard, Box } from '../../ui-kit';
-
-import { getURLFromType } from '../../utils';
 import { open as openModal, set as setModal, useModal } from '../../providers/ModalProvider';
-import { ClockCounterClockwise, MagnifyingGlass, CaretRight, X } from '@phosphor-icons/react';
 import { useNavigation } from '../../providers/NavigationProvider';
+import { useSearchState } from '../../providers/SearchProvider';
+import { ResourceCard, Box } from '../../ui-kit';
+import { getURLFromType } from '../../utils';
+import Feed from '../FeatureFeed';
 
 function Hit({ hit }) {
   return hit?.title;
@@ -164,6 +163,7 @@ const SearchResults = ({ autocompleteState, autocomplete }) => {
     .forEach((collection) => {
       allResults.push(...collection.items.map((item) => ({ ...item, source: collection.source })));
     });
+
   // Algolia adds a _rankingInfo property to each item, which we can use to sort the results
   // We want to sort the results first by nbExactWords (desc), then proximityDistance (asc), then last by userScore (desc)
   // This is super hacky and results are not to be guaranteed, but should improve results over displaying them in the order they come back
@@ -214,6 +214,7 @@ const SearchResults = ({ autocompleteState, autocomplete }) => {
       {autocompleteState.isOpen &&
         autocompleteState.collections.map((collection, index) => {
           const { source, items } = collection;
+
           // Rendering of Query Suggestions
           if (['querySuggestionsPlugin'].includes(collection.source.sourceId)) {
             return (
diff --git a/packages/web-shared/components/Searchbar/Searchbar.js b/packages/web-shared/components/Searchbar/Searchbar.js
index 8ade023c..9d8f15b7 100644
--- a/packages/web-shared/components/Searchbar/Searchbar.js
+++ b/packages/web-shared/components/Searchbar/Searchbar.js
@@ -1,20 +1,18 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+
 import { MagnifyingGlass, ArrowLeft } from '@phosphor-icons/react';
 import { themeGet } from '@styled-system/theme-get';
+import PropTypes from 'prop-types';
 
-import { systemPropTypes } from '../../ui-kit/_lib/system';
-import { Box } from '../../ui-kit';
+import Styled from './Search.styles';
 import { useCurrentUser } from '../../hooks';
 import { useSearchState } from '../../providers/SearchProvider';
-
+import { Box } from '../../ui-kit';
+import { systemPropTypes } from '../../ui-kit/_lib/system';
+import ProfileButton from '../Profile/ProfileButton';
 import Autocomplete from '../Searchbar/Autocomplete';
 import SearchResults from '../Searchbar/SearchResults';
 
-import ProfileButton from '../Profile/ProfileButton';
-
-import Styled from './Search.styles';
-
 const MOBILE_BREAKPOINT = 428;
 
 const Searchbar = (props = {}) => {
diff --git a/packages/web-shared/components/StoreLinks/StoreLinks.js b/packages/web-shared/components/StoreLinks/StoreLinks.js
index 86503885..5aa890eb 100644
--- a/packages/web-shared/components/StoreLinks/StoreLinks.js
+++ b/packages/web-shared/components/StoreLinks/StoreLinks.js
@@ -1,8 +1,7 @@
-import { Box } from '../../ui-kit';
-import { useCurrentChurch } from '../../hooks';
-
 import downloadOnAppStore from './download-on-app-store';
 import downloadOnPlayStore from './download-on-play-store';
+import { useCurrentChurch } from '../../hooks';
+import { Box } from '../../ui-kit';
 
 const AppStoreLink = () => <div dangerouslySetInnerHTML={{ __html: downloadOnAppStore }} />;
 
diff --git a/packages/web-shared/components/VideoPlayer/DevVideoDetails.js b/packages/web-shared/components/VideoPlayer/DevVideoDetails.js
index 45f49c1d..b2063ab2 100644
--- a/packages/web-shared/components/VideoPlayer/DevVideoDetails.js
+++ b/packages/web-shared/components/VideoPlayer/DevVideoDetails.js
@@ -1,5 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
+
 import { Box, SmallBodyText } from '../../ui-kit';
 
 export default function DevVideoDetails({
@@ -11,14 +12,7 @@ export default function DevVideoDetails({
   progressTime,
 }) {
   return (
-    <Box
-      position="absolute"
-      top={0}
-      left={0}
-      p="s"
-      bg="rgba(0,0,0,0.15)"
-      pointerEvents="none"
-    >
+    <Box position="absolute" top={0} left={0} p="s" bg="rgba(0,0,0,0.15)" pointerEvents="none">
       <SmallBodyText>
         <SmallBodyText fontWeight="bold">parentNode.id:</SmallBodyText>
         {`\n${parentNode.id}`}
@@ -32,16 +26,13 @@ export default function DevVideoDetails({
         {`\n${videoMedia.id}\n`}
       </SmallBodyText>
       <SmallBodyText>
-        <SmallBodyText fontWeight="bold">paused:</SmallBodyText>{' '}
-        {paused.toString()}
+        <SmallBodyText fontWeight="bold">paused:</SmallBodyText> {paused.toString()}
       </SmallBodyText>
       <SmallBodyText>
-        <SmallBodyText fontWeight="bold">currentTime:</SmallBodyText>{' '}
-        {currentTime}
+        <SmallBodyText fontWeight="bold">currentTime:</SmallBodyText> {currentTime}
       </SmallBodyText>
       <SmallBodyText>
-        <SmallBodyText fontWeight="bold">progressTime:</SmallBodyText>{' '}
-        {progressTime}
+        <SmallBodyText fontWeight="bold">progressTime:</SmallBodyText> {progressTime}
       </SmallBodyText>
       <SmallBodyText>
         <SmallBodyText fontWeight="bold">duration:</SmallBodyText> {duration} (
diff --git a/packages/web-shared/components/VideoPlayer/VideoPlayer.js b/packages/web-shared/components/VideoPlayer/VideoPlayer.js
index 5243681d..8a2adba6 100644
--- a/packages/web-shared/components/VideoPlayer/VideoPlayer.js
+++ b/packages/web-shared/components/VideoPlayer/VideoPlayer.js
@@ -1,12 +1,13 @@
 import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
+
+import { get } from 'lodash';
 import PropTypes from 'prop-types';
 
-import { useInteractWithNode, useLivestreamStatus, useHTMLContent } from '../../hooks';
-import { Box } from '../../ui-kit';
 import { EmbededPlayer, VideoPlayer as Player } from './VideoPlayer.styles';
 import amplitude from '../../analytics/amplitude';
+import { useInteractWithNode, useLivestreamStatus, useHTMLContent } from '../../hooks';
 import { useAnalytics } from '../../providers/AnalyticsProvider';
-import { get } from 'lodash';
+import { Box } from '../../ui-kit';
 
 const PROGRESS_CHECK_INTERVAL_SECONDS = 10;
 
@@ -147,6 +148,7 @@ function VideoPlayer(props = {}) {
     // TODO: Is this needed? According to Apollos TV/Roku Segment Events: totalLength => Total length of the video, in seconds
     // Total length of the video is passed in with video source props: props.parentNode.videos[0].duration
     const newDuration = Math.floor(evt.duration, 2);
+
     // _analyticsData.totalLength = newDuration;
     setDuration(newDuration);
 
diff --git a/packages/web-shared/components/VideoPlayer/VideoPlayer.styles.js b/packages/web-shared/components/VideoPlayer/VideoPlayer.styles.js
index d18563ac..b2d69b05 100644
--- a/packages/web-shared/components/VideoPlayer/VideoPlayer.styles.js
+++ b/packages/web-shared/components/VideoPlayer/VideoPlayer.styles.js
@@ -1,6 +1,6 @@
-import styled from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
 import ReactPlayer from 'react-player';
+import styled from 'styled-components';
 
 import { system } from '../../ui-kit';
 
diff --git a/packages/web-shared/components/Wordmark/Wordmark.js b/packages/web-shared/components/Wordmark/Wordmark.js
index 6d93c1a1..6fa8e89a 100644
--- a/packages/web-shared/components/Wordmark/Wordmark.js
+++ b/packages/web-shared/components/Wordmark/Wordmark.js
@@ -1,8 +1,9 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 import { withTheme } from 'styled-components';
-import Styled from './Wordmark.styles';
 
+import Styled from './Wordmark.styles';
 import { systemPropTypes } from '../../ui-kit';
 
 function Wordmark({ size, source, href, ref }) {
diff --git a/packages/web-shared/components/Wordmark/Wordmark.styles.js b/packages/web-shared/components/Wordmark/Wordmark.styles.js
index 6e9d9e51..6bcacf95 100644
--- a/packages/web-shared/components/Wordmark/Wordmark.styles.js
+++ b/packages/web-shared/components/Wordmark/Wordmark.styles.js
@@ -1,5 +1,4 @@
-import { withTheme } from 'styled-components';
-import styled, { css } from 'styled-components';
+import styled, { withTheme, css } from 'styled-components';
 
 const DEFAULT_ICON_SIZE = '80px';
 
diff --git a/packages/web-shared/components/index.js b/packages/web-shared/components/index.js
index c24e40ac..e136aa3d 100644
--- a/packages/web-shared/components/index.js
+++ b/packages/web-shared/components/index.js
@@ -1,9 +1,9 @@
 import AuthManager from './Auth';
 import ContentChannel from './ContentChannel';
-import ContentSingle from './ContentSingle';
 import ContentSeriesSingle from './ContentSeriesSingle';
-import FeatureFeedList from './FeatureFeedList';
+import ContentSingle from './ContentSingle';
 import Feed from './FeatureFeed';
+import FeatureFeedList from './FeatureFeedList';
 import LivestreamSingle from './LivestreamSingle';
 import Logo from './Logo';
 import Modal from './Modal';
diff --git a/packages/web-shared/embeds/Auth.js b/packages/web-shared/embeds/Auth.js
index d5e088ce..b1f60670 100644
--- a/packages/web-shared/embeds/Auth.js
+++ b/packages/web-shared/embeds/Auth.js
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { AuthManager } from '../components';
 import { AUTH_TOKEN_KEY } from '../config/keys';
 
diff --git a/packages/web-shared/embeds/FeatureFeed.js b/packages/web-shared/embeds/FeatureFeed.js
index f50b599f..b28f39f2 100644
--- a/packages/web-shared/embeds/FeatureFeed.js
+++ b/packages/web-shared/embeds/FeatureFeed.js
@@ -1,12 +1,13 @@
 import React, { useEffect } from 'react';
-import { FeatureFeedProvider } from '../providers';
+
 import { FeatureFeedList, Modal } from '../components';
+import { FeatureFeedProvider } from '../providers';
+import { useAnalytics } from '../providers/AnalyticsProvider';
 import { useModalState } from '../providers/ModalProvider';
+import { useNavigation } from '../providers/NavigationProvider';
 import { Box } from '../ui-kit';
 import { parseSlugToIdAndType } from '../utils';
-import { useAnalytics } from '../providers/AnalyticsProvider';
 import { getComponentFromType } from '../utils/getContentFromURL';
-import { useNavigation } from '../providers/NavigationProvider';
 
 function RenderFeatures(props) {
   const { id } = useNavigation();
@@ -17,6 +18,7 @@ function RenderFeatures(props) {
   if (Component) {
     return Component;
   }
+
   // If not component is found, fallback to a FeatureFeed
   return (
     <Box>
diff --git a/packages/web-shared/embeds/Main.js b/packages/web-shared/embeds/Main.js
index b63dd930..7519d430 100644
--- a/packages/web-shared/embeds/Main.js
+++ b/packages/web-shared/embeds/Main.js
@@ -1,16 +1,14 @@
 import React from 'react';
-import { createPortal } from 'react-dom';
 
-import { Searchbar } from '../components';
+import { createPortal } from 'react-dom';
 
+import Styled from './Search.styles';
+import { Searchbar, FeatureFeedList, Modal } from '../components';
 import { FeatureFeedProvider } from '../providers';
-import { FeatureFeedList, Modal } from '../components';
+import NavigationProvider from '../providers/NavigationProvider';
 import { useSearchState } from '../providers/SearchProvider';
 import { Box } from '../ui-kit';
 
-import Styled from './Search.styles';
-import NavigationProvider from '../providers/NavigationProvider';
-
 function RenderEmbed(props) {
   const searchState = useSearchState();
 
diff --git a/packages/web-shared/embeds/Search.js b/packages/web-shared/embeds/Search.js
index 4ef3be04..ec5c4857 100644
--- a/packages/web-shared/embeds/Search.js
+++ b/packages/web-shared/embeds/Search.js
@@ -1,10 +1,10 @@
 import React, { useRef, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
 
-import { Searchbar } from '../components';
+import { useSearchParams } from 'react-router-dom';
 
-import { ContentItemProvider, FeatureFeedProvider, ContentFeedProvider } from '../providers';
+import Styled from './Search.styles';
 import {
+  Searchbar,
   ContentChannel,
   ContentSeriesSingle,
   ContentSingle,
@@ -12,12 +12,11 @@ import {
   LivestreamSingle,
   Modal,
 } from '../components';
+import { ContentItemProvider, FeatureFeedProvider, ContentFeedProvider } from '../providers';
 import { useModalState } from '../providers/ModalProvider';
+import { useNavigation } from '../providers/NavigationProvider';
 import { useSearchState } from '../providers/SearchProvider';
 import { Box } from '../ui-kit';
-import { useNavigation } from '../providers/NavigationProvider';
-
-import Styled from './Search.styles';
 
 function RenderFeatures(props) {
   const { id } = useNavigation();
diff --git a/packages/web-shared/embeds/index.js b/packages/web-shared/embeds/index.js
index 1d645cb5..8273ba01 100644
--- a/packages/web-shared/embeds/index.js
+++ b/packages/web-shared/embeds/index.js
@@ -1,6 +1,6 @@
 import Auth from './Auth';
 import FeatureFeed from './FeatureFeed';
-import Search from './Search';
 import Main from './Main';
+import Search from './Search';
 
 export { Auth, FeatureFeed, Search, Main };
diff --git a/packages/web-shared/hooks/useAuthQuery.js b/packages/web-shared/hooks/useAuthQuery.js
index 06975e21..66a6d9d2 100644
--- a/packages/web-shared/hooks/useAuthQuery.js
+++ b/packages/web-shared/hooks/useAuthQuery.js
@@ -1,4 +1,5 @@
 import { useCallback, useEffect } from 'react';
+
 import { useQuery } from '@apollo/client';
 
 import { useAuth, logout } from '../providers/AuthProvider';
@@ -6,17 +7,21 @@ import { useAuth, logout } from '../providers/AuthProvider';
 const useAuthQuery = (query, options = {}) => {
   const [state, dispatch] = useAuth();
   const { token, authenticated } = state;
-  const { data, error, loading, refetch: _refetch } =
-    useQuery(query, {
-      skip: !authenticated,
-      fetchPolicy: 'network-only',
-      onError: () => {
-        // eslint-disable-next-line no-console
-        console.warn('Authentication error: logging out...');
-        dispatch(logout());
-      },
-      ...options,
-    }) || {};
+  const {
+    data,
+    error,
+    loading,
+    refetch: _refetch,
+  } = useQuery(query, {
+    skip: !authenticated,
+    fetchPolicy: 'network-only',
+    onError: () => {
+      // eslint-disable-next-line no-console
+      console.warn('Authentication error: logging out...');
+      dispatch(logout());
+    },
+    ...options,
+  }) || {};
 
   // There's a bug where the query from `useQuery` is `undefined`
   // and will throw an error in the `useEffect` down below.
diff --git a/packages/web-shared/hooks/useCompleteRegister.js b/packages/web-shared/hooks/useCompleteRegister.js
index 846ff13f..aa682a5a 100644
--- a/packages/web-shared/hooks/useCompleteRegister.js
+++ b/packages/web-shared/hooks/useCompleteRegister.js
@@ -1,14 +1,8 @@
 import { gql, useMutation } from '@apollo/client';
 
 export const COMPLETE_REGISTER = gql`
-  mutation completeRegistration(
-    $mergeProfileId: ID
-    $profileInput: [UpdateProfileInput]
-  ) {
-    completeRegistration(
-      mergeProfileId: $mergeProfileId
-      profileInput: $profileInput
-    ) {
+  mutation completeRegistration($mergeProfileId: ID, $profileInput: [UpdateProfileInput]) {
+    completeRegistration(mergeProfileId: $mergeProfileId, profileInput: $profileInput) {
       id
       birthDate
       gender
diff --git a/packages/web-shared/hooks/useContentItem.js b/packages/web-shared/hooks/useContentItem.js
index 5a130726..a4ce66fe 100644
--- a/packages/web-shared/hooks/useContentItem.js
+++ b/packages/web-shared/hooks/useContentItem.js
@@ -1,4 +1,5 @@
 import { gql, useQuery } from '@apollo/client';
+
 import {
   VIDEO_MEDIA_FIELDS,
   CONTENT_NODE_FRAGMENT,
diff --git a/packages/web-shared/hooks/useFeatureFeed.js b/packages/web-shared/hooks/useFeatureFeed.js
index f6ebd77b..c1836ff8 100644
--- a/packages/web-shared/hooks/useFeatureFeed.js
+++ b/packages/web-shared/hooks/useFeatureFeed.js
@@ -1,4 +1,5 @@
 import { gql, useQuery } from '@apollo/client';
+
 import { VIDEO_MEDIA_FIELDS, CONTENT_CARD_FRAGMENT } from '../fragments';
 
 export const FEED_FEATURES = gql`
diff --git a/packages/web-shared/hooks/useHTMLContent.js b/packages/web-shared/hooks/useHTMLContent.js
index 0bca4f3e..b4276277 100644
--- a/packages/web-shared/hooks/useHTMLContent.js
+++ b/packages/web-shared/hooks/useHTMLContent.js
@@ -1,5 +1,7 @@
-import DOMPurify from 'dompurify';
 import { useCallback } from 'react';
+
+import DOMPurify from 'dompurify';
+
 import useLink from './useLink';
 
 const useHTMLContent = () => {
@@ -13,7 +15,7 @@ const useHTMLContent = () => {
       const parser = new DOMParser();
       const doc = parser.parseFromString(sanitizedHTML, 'text/html');
 
-      const transformAnchorTag = anchorTag => {
+      const transformAnchorTag = (anchorTag) => {
         if (!anchorTag) return;
 
         const link = anchorTag.getAttribute('href');
@@ -40,7 +42,7 @@ const useHTMLContent = () => {
 
       return doc.body.innerHTML;
     },
-    [transformLink],
+    [transformLink]
   );
 
   return parseHTMLContent;
diff --git a/packages/web-shared/hooks/useHandleActionPress.js b/packages/web-shared/hooks/useHandleActionPress.js
index 9367f71f..77043189 100644
--- a/packages/web-shared/hooks/useHandleActionPress.js
+++ b/packages/web-shared/hooks/useHandleActionPress.js
@@ -1,8 +1,7 @@
-import { getURLFromType } from '../utils';
-
-import { open as openModal, set as setModal, useModal } from '../providers/ModalProvider';
 import { useAnalytics } from '../providers/AnalyticsProvider';
+import { open as openModal, set as setModal, useModal } from '../providers/ModalProvider';
 import { useNavigation } from '../providers/NavigationProvider';
+import { getURLFromType } from '../utils';
 
 export const useHandleActionPress = () => {
   const [state, dispatch] = useModal();
diff --git a/packages/web-shared/hooks/useInteractWithNode.js b/packages/web-shared/hooks/useInteractWithNode.js
index 85837c40..b55ca40a 100644
--- a/packages/web-shared/hooks/useInteractWithNode.js
+++ b/packages/web-shared/hooks/useInteractWithNode.js
@@ -1,6 +1,7 @@
+import { useCallback } from 'react';
+
 import { gql, useMutation } from '@apollo/client';
 import isObject from 'lodash/isObject';
-import { useCallback } from 'react';
 
 import { useAuthState } from '../providers/AuthProvider';
 
@@ -33,12 +34,10 @@ function transformVariables(variables) {
 
   // Map the `data` object to an array of key/value pairs,
   // to conform to InteractionDataField schema
-  const transformedData = Object.entries(variables?.data).map(
-    ([field, value]) => ({
-      field,
-      value,
-    })
-  );
+  const transformedData = Object.entries(variables?.data).map(([field, value]) => ({
+    field,
+    value,
+  }));
 
   return {
     ...variables,
diff --git a/packages/web-shared/hooks/useLink.js b/packages/web-shared/hooks/useLink.js
index e69d26c3..cec8a695 100644
--- a/packages/web-shared/hooks/useLink.js
+++ b/packages/web-shared/hooks/useLink.js
@@ -1,7 +1,9 @@
 import { useCallback } from 'react';
+
 import { parse } from 'tldts';
-import { isValidUrl } from '../utils';
+
 import useCurrentUser from './useCurrentUser';
+import { isValidUrl } from '../utils';
 
 const useLink = () => {
   const { currentUser } = useCurrentUser();
@@ -34,7 +36,7 @@ const useLink = () => {
 
       return formattedUrl;
     },
-    [rockAuthToken, currentUrl, parse],
+    [rockAuthToken, currentUrl, parse]
   );
 
   return transformLink;
diff --git a/packages/web-shared/hooks/useLivestreamStatus.js b/packages/web-shared/hooks/useLivestreamStatus.js
index 8150d3ba..3c542c34 100644
--- a/packages/web-shared/hooks/useLivestreamStatus.js
+++ b/packages/web-shared/hooks/useLivestreamStatus.js
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+
 import {
   isWithinInterval,
   isBefore,
@@ -45,19 +46,25 @@ const useLivestreamStatus = (livestream) => {
     if (isBefore(now, liveStreamStart)) {
       setComingUp(true);
       timeouts.push(
-        setTimeout(() => {
-          setComingUp(false);
-          setIsLive(true);
-        }, differenceInMilliseconds(liveStreamStart, now))
+        setTimeout(
+          () => {
+            setComingUp(false);
+            setIsLive(true);
+          },
+          differenceInMilliseconds(liveStreamStart, now)
+        )
       );
     }
 
     // The current time is before the Live Stream ENDS, so we need to trigger the state to disable the label when it's no longer live
     if (isBefore(now, liveStreamEnd)) {
       timeouts.push(
-        setTimeout(() => {
-          setIsLive(false);
-        }, differenceInMilliseconds(liveStreamEnd, now))
+        setTimeout(
+          () => {
+            setIsLive(false);
+          },
+          differenceInMilliseconds(liveStreamEnd, now)
+        )
       );
     }
 
diff --git a/packages/web-shared/hooks/useValidateLogin.js b/packages/web-shared/hooks/useValidateLogin.js
index e8b73fb0..6fbbf95a 100644
--- a/packages/web-shared/hooks/useValidateLogin.js
+++ b/packages/web-shared/hooks/useValidateLogin.js
@@ -1,10 +1,7 @@
 import { gql, useMutation } from '@apollo/client';
 
 export const VALIDATE_LOGIN = gql`
-  mutation validateLogin(
-    $identity: AuthenticationIdentityInput!
-    $otp: String!
-  ) {
+  mutation validateLogin($identity: AuthenticationIdentityInput!, $otp: String!) {
     validateLogin(identity: $identity, otp: $otp) {
       person {
         firstName
diff --git a/packages/web-shared/hooks/useValidateRegister.js b/packages/web-shared/hooks/useValidateRegister.js
index eeca8766..ad993446 100644
--- a/packages/web-shared/hooks/useValidateRegister.js
+++ b/packages/web-shared/hooks/useValidateRegister.js
@@ -1,10 +1,7 @@
 import { gql, useMutation } from '@apollo/client';
 
 export const VALIDATE_REGISTER = gql`
-  mutation validateRegister(
-    $identity: AuthenticationIdentityInput!
-    $otp: String!
-  ) {
+  mutation validateRegister($identity: AuthenticationIdentityInput!, $otp: String!) {
     validateRegister(identity: $identity, otp: $otp) {
       person {
         firstName
diff --git a/packages/web-shared/package.json b/packages/web-shared/package.json
index c474a724..2ca1620a 100644
--- a/packages/web-shared/package.json
+++ b/packages/web-shared/package.json
@@ -4,6 +4,9 @@
   "main": "index.js",
   "license": "MIT",
   "private": true,
+  "scripts": {
+    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint ."
+  },
   "dependencies": {
     "@apollo/client": "^3.9.9",
     "@babel/preset-react": "^7.22.5",
diff --git a/packages/web-shared/providers/AnalyticsProvider.js b/packages/web-shared/providers/AnalyticsProvider.js
index 39351354..c18133d4 100644
--- a/packages/web-shared/providers/AnalyticsProvider.js
+++ b/packages/web-shared/providers/AnalyticsProvider.js
@@ -1,10 +1,12 @@
 import React, { createContext, useContext, useMemo, useEffect, useRef } from 'react';
+
 import { gql, useQuery } from '@apollo/client';
-import { useCurrentChurch, useCurrentUser } from '../hooks';
+import { isbot } from 'isbot';
+
+import { useAuth } from './AuthProvider';
 import amplitude from '../analytics/amplitude';
 import clientFactory from '../analytics/segment';
-import { useAuth } from './AuthProvider';
-import { isbot } from 'isbot';
+import { useCurrentChurch, useCurrentUser } from '../hooks';
 
 const Context = createContext();
 const isDev = process.env.NODE_ENV !== 'production';
diff --git a/packages/web-shared/providers/AppProvider.js b/packages/web-shared/providers/AppProvider.js
index 8742ebae..56b4c4eb 100644
--- a/packages/web-shared/providers/AppProvider.js
+++ b/packages/web-shared/providers/AppProvider.js
@@ -1,13 +1,14 @@
 import React, { useState, useEffect, createContext, useContext } from 'react';
-import PropTypes from 'prop-types';
+
 import { ApolloProvider } from '@apollo/client';
+import PropTypes from 'prop-types';
 
-import initClient from '../client';
-import { ThemeProvider } from '../ui-kit';
-import AuthProvider from './AuthProvider';
 import AnalyticsProvider from './AnalyticsProvider';
+import AuthProvider from './AuthProvider';
 import ModalProvider from './ModalProvider';
 import SearchProvider from './SearchProvider';
+import initClient from '../client';
+import { ThemeProvider } from '../ui-kit';
 
 const UseApollosIdParamContext = createContext(false);
 
diff --git a/packages/web-shared/providers/AuthProvider.js b/packages/web-shared/providers/AuthProvider.js
index cd2e82ca..225fdaf3 100644
--- a/packages/web-shared/providers/AuthProvider.js
+++ b/packages/web-shared/providers/AuthProvider.js
@@ -1,11 +1,11 @@
-import PropTypes from 'prop-types';
 import React, { createContext, useContext, useEffect, useReducer } from 'react';
 
+import { useApolloClient } from '@apollo/client';
+import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
 
 import authSteps from '../components/Auth/authSteps';
 import { ANONYMOUS_ID, AUTH_REFRESH_TOKEN_KEY, AUTH_TOKEN_KEY } from '../config/keys';
-import { useApolloClient } from '@apollo/client';
 
 const AuthStateContext = createContext();
 const AuthDispatchContext = createContext();
diff --git a/packages/web-shared/providers/ContentFeedProvider.js b/packages/web-shared/providers/ContentFeedProvider.js
index 3e00be6f..7606d287 100644
--- a/packages/web-shared/providers/ContentFeedProvider.js
+++ b/packages/web-shared/providers/ContentFeedProvider.js
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
 import { useContentFeed } from '../hooks';
@@ -7,22 +8,12 @@ function ContentFeedProvider({ Component, options, ...props }) {
   const { loading, error, content, fetchMore } = useContentFeed(options);
 
   return (
-    <Component
-      data={content}
-      loading={loading}
-      error={error}
-      fetchMore={fetchMore}
-      {...props}
-    />
+    <Component data={content} loading={loading} error={error} fetchMore={fetchMore} {...props} />
   );
 }
 
 ContentFeedProvider.propTypes = {
-  Component: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.func,
-    PropTypes.object,
-  ]),
+  Component: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.object]),
   options: PropTypes.shape({}),
 };
 
diff --git a/packages/web-shared/providers/ContentItemProvider.js b/packages/web-shared/providers/ContentItemProvider.js
index 005fd708..f554dc29 100644
--- a/packages/web-shared/providers/ContentItemProvider.js
+++ b/packages/web-shared/providers/ContentItemProvider.js
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
 import { useContentItem } from '../hooks';
@@ -6,7 +7,6 @@ import { useContentItem } from '../hooks';
 function ContentItemProvider({ Component, options }) {
   const { loading, error, item } = useContentItem(options);
 
-
   return <Component data={item} loading={loading} error={error} />;
 }
 
diff --git a/packages/web-shared/providers/FeatureFeedProvider.js b/packages/web-shared/providers/FeatureFeedProvider.js
index 53011133..81454b49 100644
--- a/packages/web-shared/providers/FeatureFeedProvider.js
+++ b/packages/web-shared/providers/FeatureFeedProvider.js
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
 import { useFeatureFeed } from '../hooks';
@@ -7,23 +8,15 @@ function FeatureFeedProvider({ Component, options, ...props }) {
   const { loading, error, features } = useFeatureFeed(options);
 
   if (!Component) {
-    console.error(
-      'FeatureFeedProvider was not given a Component to use. Cannot render.'
-    );
+    console.error('FeatureFeedProvider was not given a Component to use. Cannot render.');
     return null;
   }
 
-  return (
-    <Component data={features} loading={loading} error={error} {...props} />
-  );
+  return <Component data={features} loading={loading} error={error} {...props} />;
 }
 
 FeatureFeedProvider.propTypes = {
-  Component: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.func,
-    PropTypes.object,
-  ]).isRequired,
+  Component: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.object]).isRequired,
   options: PropTypes.shape({
     variables: PropTypes.shape({
       itemId: PropTypes.string.isRequired,
diff --git a/packages/web-shared/providers/ModalProvider.js b/packages/web-shared/providers/ModalProvider.js
index 2ebb4693..5a0b236c 100644
--- a/packages/web-shared/providers/ModalProvider.js
+++ b/packages/web-shared/providers/ModalProvider.js
@@ -1,5 +1,7 @@
-import PropTypes from 'prop-types';
 import React, { createContext, useContext, useReducer, useEffect } from 'react';
+
+import PropTypes from 'prop-types';
+
 import { getContentFromURL } from '../utils';
 
 const ModalStateContext = createContext();
diff --git a/packages/web-shared/providers/NavigationProvider.js b/packages/web-shared/providers/NavigationProvider.js
index d10eec03..9b3c8cc5 100644
--- a/packages/web-shared/providers/NavigationProvider.js
+++ b/packages/web-shared/providers/NavigationProvider.js
@@ -1,5 +1,7 @@
 import React, { createContext, useContext } from 'react';
+
 import { useSearchParams, useParams, useNavigate } from 'react-router-dom';
+
 import { useApollosIdParam, useShouldUsePathRouter } from '../providers/AppProvider';
 
 const NavigationContext = createContext({ id: null, navigate: () => {} });
@@ -24,6 +26,7 @@ const NavigationProvider = (props = {}) => {
         nativeNavigate({
           pathname: `/${type === 'content' ? 'ac' : 'af'}/${id}`,
         });
+
         // Assume that no params
       } else {
         nativeNavigate({
diff --git a/packages/web-shared/providers/SearchProvider.js b/packages/web-shared/providers/SearchProvider.js
index 1e762425..42115d97 100644
--- a/packages/web-shared/providers/SearchProvider.js
+++ b/packages/web-shared/providers/SearchProvider.js
@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useReducer } from 'react';
+
 import PropTypes from 'prop-types';
 
 const SearchStateContext = createContext();
diff --git a/packages/web-shared/providers/index.js b/packages/web-shared/providers/index.js
index cb1cdd04..854b9216 100644
--- a/packages/web-shared/providers/index.js
+++ b/packages/web-shared/providers/index.js
@@ -1,12 +1,13 @@
-import AppProvider from './AppProvider';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
 import AnalyticsProvider from './AnalyticsProvider';
+import AppProvider from './AppProvider';
 import ContentFeedProvider from './ContentFeedProvider';
 import ContentItemProvider from './ContentItemProvider';
 import FeatureFeedProvider from './FeatureFeedProvider';
 import ModalProvider from './ModalProvider';
-import SearchProvider from './SearchProvider';
 import NavigationProvider from './NavigationProvider';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import SearchProvider from './SearchProvider';
 
 export {
   AppProvider,
diff --git a/packages/web-shared/ui-kit/Avatar/Avatar.js b/packages/web-shared/ui-kit/Avatar/Avatar.js
index 6c48e9da..5d8953d1 100644
--- a/packages/web-shared/ui-kit/Avatar/Avatar.js
+++ b/packages/web-shared/ui-kit/Avatar/Avatar.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
+
 import { User } from '@phosphor-icons/react';
+import { withTheme } from 'styled-components';
 
 import { Box, systemPropTypes } from '../../ui-kit';
 
diff --git a/packages/web-shared/ui-kit/Box/Box.js b/packages/web-shared/ui-kit/Box/Box.js
index 40a2706f..fd8651b6 100644
--- a/packages/web-shared/ui-kit/Box/Box.js
+++ b/packages/web-shared/ui-kit/Box/Box.js
@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { systemPropTypes } from '../_lib/system';
-
 import Styled from './Box.styles';
+import { systemPropTypes } from '../_lib/system';
 
 function Box(props = {}) {
   return <Styled {...props} />;
diff --git a/packages/web-shared/ui-kit/Box/Box.styles.js b/packages/web-shared/ui-kit/Box/Box.styles.js
index 056cafbd..7c0682ac 100644
--- a/packages/web-shared/ui-kit/Box/Box.styles.js
+++ b/packages/web-shared/ui-kit/Box/Box.styles.js
@@ -1,6 +1,5 @@
-import styled, { css } from 'styled-components';
-import { withTheme } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { css, withTheme } from 'styled-components';
 
 import { system } from '../_lib/system';
 
diff --git a/packages/web-shared/ui-kit/Button/Button.js b/packages/web-shared/ui-kit/Button/Button.js
index a8698fcb..fa6780d1 100644
--- a/packages/web-shared/ui-kit/Button/Button.js
+++ b/packages/web-shared/ui-kit/Button/Button.js
@@ -1,8 +1,9 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
-import { systemPropTypes } from '../_lib/system';
 import Styled from './Button.styles';
+import { systemPropTypes } from '../_lib/system';
 
 // eslint-disable-next-line no-console
 const Button = ({
diff --git a/packages/web-shared/ui-kit/Button/Button.styles.js b/packages/web-shared/ui-kit/Button/Button.styles.js
index 37c0a48d..90e5b48c 100644
--- a/packages/web-shared/ui-kit/Button/Button.styles.js
+++ b/packages/web-shared/ui-kit/Button/Button.styles.js
@@ -1,9 +1,9 @@
+import { themeGet } from '@styled-system/theme-get';
 import Color from 'color';
 import styled, { css, withTheme } from 'styled-components';
-import { themeGet } from '@styled-system/theme-get';
 
-import { TypeStyles } from '../Typography';
 import { system } from '../_lib/system';
+import { TypeStyles } from '../Typography';
 
 // Button
 // --------------------------------------------------------
diff --git a/packages/web-shared/ui-kit/ButtonGroup/ButtonGroup.js b/packages/web-shared/ui-kit/ButtonGroup/ButtonGroup.js
index a8f68786..3c37e58e 100644
--- a/packages/web-shared/ui-kit/ButtonGroup/ButtonGroup.js
+++ b/packages/web-shared/ui-kit/ButtonGroup/ButtonGroup.js
@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
 
-import { systemPropTypes } from '../_lib/system';
-import { Box } from '..';
-import Styled from './ButtonGroup.styles';
 import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 
+import Styled from './ButtonGroup.styles';
+import { Box } from '..';
+import { systemPropTypes } from '../_lib/system';
+
 const ButtonGroup = ({ next, previous, goToSlide, ...rest }) => {
   const {
     carouselState: { currentSlide, slidesToShow, totalItems },
diff --git a/packages/web-shared/ui-kit/ButtonGroup/ButtonGroup.styles.js b/packages/web-shared/ui-kit/ButtonGroup/ButtonGroup.styles.js
index 9175527d..186e7d12 100644
--- a/packages/web-shared/ui-kit/ButtonGroup/ButtonGroup.styles.js
+++ b/packages/web-shared/ui-kit/ButtonGroup/ButtonGroup.styles.js
@@ -1,8 +1,8 @@
-import { withTheme } from 'styled-components';
-import styled, { css } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme, css } from 'styled-components';
 
 import { system } from '../_lib/system';
+
 const ButtonGroup = withTheme(styled.div`
   padding-top: 10px;
   display: flex;
@@ -21,9 +21,7 @@ const buttonState = ({ theme, type, disabled }) => {
     }
     &:disabled {
       opacity: 0.5;
-      background: ${type === 'secondary'
-        ? 'transparent'
-        : theme.colors.fill.system1};
+      background: ${type === 'secondary' ? 'transparent' : theme.colors.fill.system1};
       border: ${type === 'secondary' ? theme.colors.base.gray : 'transparent'};
       cursor: not-allowed;
     }
diff --git a/packages/web-shared/ui-kit/Card/Card.js b/packages/web-shared/ui-kit/Card/Card.js
index 88da639d..e1cfdc91 100644
--- a/packages/web-shared/ui-kit/Card/Card.js
+++ b/packages/web-shared/ui-kit/Card/Card.js
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { withTheme } from 'styled-components';
 
 import { Box, systemPropTypes } from '../../ui-kit';
diff --git a/packages/web-shared/ui-kit/ContentCard/ContentCard.js b/packages/web-shared/ui-kit/ContentCard/ContentCard.js
index 62790dec..009758a6 100644
--- a/packages/web-shared/ui-kit/ContentCard/ContentCard.js
+++ b/packages/web-shared/ui-kit/ContentCard/ContentCard.js
@@ -1,11 +1,12 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
+
 import { Check } from '@phosphor-icons/react';
+import { withTheme } from 'styled-components';
 
-import { SmallBodyText, Box, systemPropTypes, ProgressBar } from '../../ui-kit';
+import { BottomSlot, CompleteIndicator, Title, Summary, ChannelLabel } from './ContentCard.styles';
 import { useVideoMediaProgress } from '../../hooks';
+import { SmallBodyText, Box, systemPropTypes, ProgressBar } from '../../ui-kit';
 import { getPercentWatched } from '../../utils';
-import { BottomSlot, CompleteIndicator, Title, Summary, ChannelLabel } from './ContentCard.styles';
 
 function ContentCard({
   videoMedia,
diff --git a/packages/web-shared/ui-kit/ContentCard/ContentCard.styles.js b/packages/web-shared/ui-kit/ContentCard/ContentCard.styles.js
index 45b4e041..e05a7935 100644
--- a/packages/web-shared/ui-kit/ContentCard/ContentCard.styles.js
+++ b/packages/web-shared/ui-kit/ContentCard/ContentCard.styles.js
@@ -1,7 +1,5 @@
-import styled, { css } from 'styled-components';
-import { withTheme } from 'styled-components';
-
 import { themeGet } from '@styled-system/theme-get';
+import styled, { css, withTheme } from 'styled-components';
 
 import { system } from '../_lib/system';
 import { rem } from '../_utils';
diff --git a/packages/web-shared/ui-kit/Icons/Dot.js b/packages/web-shared/ui-kit/Icons/Dot.js
index 49f2dcdb..41935fd3 100644
--- a/packages/web-shared/ui-kit/Icons/Dot.js
+++ b/packages/web-shared/ui-kit/Icons/Dot.js
@@ -1,10 +1,11 @@
 import React from 'react';
+
+import { themeGet } from '@styled-system/theme-get';
 import PropTypes from 'prop-types';
 import { withTheme } from 'styled-components';
-import { themeGet } from '@styled-system/theme-get';
 
-import Box from '../Box';
 import { systemPropTypes } from '../_lib/system';
+import Box from '../Box';
 
 function Dot({ fill = 'white', size = 20, theme, ...rest }) {
   const themeFillValue = themeGet(`colors.${fill}`)({ theme });
diff --git a/packages/web-shared/ui-kit/Input/Input.js b/packages/web-shared/ui-kit/Input/Input.js
index 0e1a10bf..07c13d43 100644
--- a/packages/web-shared/ui-kit/Input/Input.js
+++ b/packages/web-shared/ui-kit/Input/Input.js
@@ -1,7 +1,9 @@
 import React, { useState, useRef, useEffect } from 'react';
+
 import PropTypes from 'prop-types';
-import { Box, systemPropTypes, SystemText } from '..';
+
 import Styled from './Input.styles';
+import { Box, systemPropTypes, SystemText } from '..';
 
 const Input = ({ placeholder, value, handleOnChange, ...props }) => {
   const textInputRef = useRef();
diff --git a/packages/web-shared/ui-kit/Input/Input.styles.js b/packages/web-shared/ui-kit/Input/Input.styles.js
index 2c2ce21e..c1f5d88e 100644
--- a/packages/web-shared/ui-kit/Input/Input.styles.js
+++ b/packages/web-shared/ui-kit/Input/Input.styles.js
@@ -1,10 +1,9 @@
-import { withTheme } from 'styled-components';
-import styled, { css } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
 import Color from 'color';
+import styled, { withTheme, css } from 'styled-components';
 
-import { TypeStyles } from '../Typography';
 import { system } from '../_lib/system';
+import { TypeStyles } from '../Typography';
 
 const labelColor = ({ theme, focused, hasValue, error }) => {
   if (error) {
@@ -14,9 +13,7 @@ const labelColor = ({ theme, focused, hasValue, error }) => {
   }
 
   return css`
-    color: ${focused || hasValue
-      ? theme.colors.text.action
-      : theme.colors.text.secondary};
+    color: ${focused || hasValue ? theme.colors.text.action : theme.colors.text.secondary};
   `;
 };
 
@@ -56,8 +53,7 @@ const Input = withTheme(styled.input`
   ${TypeStyles.LargeSystemText}
   padding: ${themeGet('space.s')} 0 ${themeGet('space.xxs')} 0;
   transition: all ${themeGet('timing.xl')} ease-out;
-  placeholder-text-color: ${({ theme }) =>
-    Color(theme.colors.text.secondary).alpha(0)};
+  placeholder-text-color: ${({ theme }) => Color(theme.colors.text.secondary).alpha(0)};
   caret-color: ${themeGet('colors.base.primary')};
   border-top: 0;
   border-left: 0;
diff --git a/packages/web-shared/ui-kit/Layout/Layout.js b/packages/web-shared/ui-kit/Layout/Layout.js
index 62a5cec6..708154f5 100644
--- a/packages/web-shared/ui-kit/Layout/Layout.js
+++ b/packages/web-shared/ui-kit/Layout/Layout.js
@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { systemPropTypes } from '../_lib/system';
-
 import Styled from './Layout.styles';
+import { systemPropTypes } from '../_lib/system';
 
 function Layout(props = {}) {
   return <Styled {...props} />;
diff --git a/packages/web-shared/ui-kit/Layout/Layout.styles.js b/packages/web-shared/ui-kit/Layout/Layout.styles.js
index 53dfed8c..bcac86ef 100644
--- a/packages/web-shared/ui-kit/Layout/Layout.styles.js
+++ b/packages/web-shared/ui-kit/Layout/Layout.styles.js
@@ -1,6 +1,5 @@
-import styled from 'styled-components';
-import { withTheme } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme } from 'styled-components';
 
 import { system } from '../_lib/system';
 
diff --git a/packages/web-shared/ui-kit/ListItem/ListItem.js b/packages/web-shared/ui-kit/ListItem/ListItem.js
index e40c0480..cdcf3e0f 100644
--- a/packages/web-shared/ui-kit/ListItem/ListItem.js
+++ b/packages/web-shared/ui-kit/ListItem/ListItem.js
@@ -1,10 +1,11 @@
 import React from 'react';
 
-import { systemPropTypes } from '../_lib/system';
-import { Box } from '..';
+import { useNavigate } from 'react-router-dom';
+
 import Styled from './ListItem.styles';
+import { Box } from '..';
 import { getURLFromType } from '../../utils';
-import { useNavigate } from 'react-router-dom';
+import { systemPropTypes } from '../_lib/system';
 
 function ListItem({ title, subtitle, leadingIcon, tailingIcon, node, onClick, ...props }) {
   // If item has link, redirect to URL
@@ -44,7 +45,7 @@ function ListItem({ title, subtitle, leadingIcon, tailingIcon, node, onClick, ..
     </svg>
   );
 
-  //If leadingIcon is an image with uri, add frame to image. Otherwise, use whatever is passed in. If undefined, use default clip icon
+  // If leadingIcon is an image with uri, add frame to image. Otherwise, use whatever is passed in. If undefined, use default clip icon
   const LeadingIcon = leadingIcon?.sources ? (
     <Styled.LeadingIcon>
       <Box
diff --git a/packages/web-shared/ui-kit/ListItem/ListItem.styles.js b/packages/web-shared/ui-kit/ListItem/ListItem.styles.js
index 8ab13263..b38e57ba 100644
--- a/packages/web-shared/ui-kit/ListItem/ListItem.styles.js
+++ b/packages/web-shared/ui-kit/ListItem/ListItem.styles.js
@@ -1,6 +1,5 @@
-import { withTheme } from 'styled-components';
-import styled, { css } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme, css } from 'styled-components';
 
 import { system } from '../_lib/system';
 
@@ -44,7 +43,7 @@ const Wrapper = withTheme(styled.div`
   ${system};
 `);
 
-//TODO: Find a better way to keep TailingIcon from from displaying outside of the Resource Card
+// TODO: Find a better way to keep TailingIcon from from displaying outside of the Resource Card
 const Heading = withTheme(styled.div`
   display: flex;
   flex-direction: column;
diff --git a/packages/web-shared/ui-kit/Loader/Loader.js b/packages/web-shared/ui-kit/Loader/Loader.js
index 95d7630e..2eb057c1 100644
--- a/packages/web-shared/ui-kit/Loader/Loader.js
+++ b/packages/web-shared/ui-kit/Loader/Loader.js
@@ -1,8 +1,9 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
-import { systemPropTypes } from '../_lib/system';
 import Styled from './Loader.styles';
+import { systemPropTypes } from '../_lib/system';
 
 function Loader({ text = null, ...props }) {
   return (
diff --git a/packages/web-shared/ui-kit/Loader/Loader.styles.js b/packages/web-shared/ui-kit/Loader/Loader.styles.js
index d4103d36..74dfb217 100644
--- a/packages/web-shared/ui-kit/Loader/Loader.styles.js
+++ b/packages/web-shared/ui-kit/Loader/Loader.styles.js
@@ -1,6 +1,5 @@
-import { withTheme, css } from 'styled-components';
-import styled from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme, css } from 'styled-components';
 
 import { system } from '../_lib/system';
 
diff --git a/packages/web-shared/ui-kit/Longform/Longform.js b/packages/web-shared/ui-kit/Longform/Longform.js
index 8dcd8edd..1646caf1 100644
--- a/packages/web-shared/ui-kit/Longform/Longform.js
+++ b/packages/web-shared/ui-kit/Longform/Longform.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { systemPropTypes } from '../_lib/system';
 import Styled from './Longform.styles';
+import { systemPropTypes } from '../_lib/system';
 
 function Longform(props = {}) {
   return <Styled {...props} />;
diff --git a/packages/web-shared/ui-kit/Longform/Longform.styles.js b/packages/web-shared/ui-kit/Longform/Longform.styles.js
index 101480fc..ef396354 100644
--- a/packages/web-shared/ui-kit/Longform/Longform.styles.js
+++ b/packages/web-shared/ui-kit/Longform/Longform.styles.js
@@ -1,9 +1,9 @@
-import styled from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled from 'styled-components';
 
 import { system } from '../_lib/system';
+import { utils } from '../index';
 import { TypeStyles } from '../Typography';
-import { utils } from "../index";
 
 const Longform = styled.div`
   ${TypeStyles.BodyText};
diff --git a/packages/web-shared/ui-kit/MediaItem/LiveChip.js b/packages/web-shared/ui-kit/MediaItem/LiveChip.js
index aeca10d1..83516dbe 100644
--- a/packages/web-shared/ui-kit/MediaItem/LiveChip.js
+++ b/packages/web-shared/ui-kit/MediaItem/LiveChip.js
@@ -6,8 +6,8 @@
 
 import React from 'react';
 
-import { SmallSystemText } from '../Typography';
 import { LiveChipContainer } from './MediaItem.styles';
+import { SmallSystemText } from '../Typography';
 
 export const ANIMATION_DURATION = 1300;
 
diff --git a/packages/web-shared/ui-kit/MediaItem/MediaItem.js b/packages/web-shared/ui-kit/MediaItem/MediaItem.js
index 82ce3d29..6755da23 100644
--- a/packages/web-shared/ui-kit/MediaItem/MediaItem.js
+++ b/packages/web-shared/ui-kit/MediaItem/MediaItem.js
@@ -1,15 +1,15 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
-import isNil from 'lodash/isNil';
+
 import { Check } from '@phosphor-icons/react';
-import { unit } from '../../utils';
+import isNil from 'lodash/isNil';
+import { withTheme } from 'styled-components';
 
-import { BodyText, SmallBodyText, Box, H4, systemPropTypes, ProgressBar } from '../../ui-kit';
-import { useVideoMediaProgress } from '../../hooks';
-import { getPercentWatched } from '../../utils';
-import { Title, Image, BottomSlot, CompleteIndicator, Ellipsis } from './MediaItem.styles';
 import LiveChip from './LiveChip';
-import { useLivestreamStatus } from '../../hooks';
+import { Title, Image, BottomSlot, CompleteIndicator, Ellipsis } from './MediaItem.styles';
+import { useVideoMediaProgress, useLivestreamStatus } from '../../hooks';
+import { BodyText, SmallBodyText, Box, H4, systemPropTypes, ProgressBar } from '../../ui-kit';
+import { unit, getPercentWatched } from '../../utils';
+
 function MediaItem(props = {}) {
   const { userProgress, loading: videoProgressLoading } = useVideoMediaProgress({
     variables: { id: props.videoMedia?.id },
diff --git a/packages/web-shared/ui-kit/MediaItem/MediaItem.styles.js b/packages/web-shared/ui-kit/MediaItem/MediaItem.styles.js
index a28c5cbb..4e76d09d 100644
--- a/packages/web-shared/ui-kit/MediaItem/MediaItem.styles.js
+++ b/packages/web-shared/ui-kit/MediaItem/MediaItem.styles.js
@@ -1,11 +1,9 @@
-import styled, { css } from 'styled-components';
-import { withTheme } from 'styled-components';
-
 import { themeGet } from '@styled-system/theme-get';
+import styled, { css, withTheme } from 'styled-components';
 
+import { unit } from '../../utils';
 import { system } from '../_lib/system';
 import { rem } from '../_utils';
-import { unit } from '../../utils';
 import { TypeStyles } from '../Typography';
 
 export const BottomSlot = withTheme(styled.div`
diff --git a/packages/web-shared/ui-kit/MediaItem/index.js b/packages/web-shared/ui-kit/MediaItem/index.js
index 67b28ac7..bfd6444c 100644
--- a/packages/web-shared/ui-kit/MediaItem/index.js
+++ b/packages/web-shared/ui-kit/MediaItem/index.js
@@ -1,4 +1,4 @@
-import { default as MediaItem } from './MediaItem';
 import LiveChip from './LiveChip';
+import { default as MediaItem } from './MediaItem';
 
 export { MediaItem as default, LiveChip };
diff --git a/packages/web-shared/ui-kit/PhospherIcon/PhospherIcon.js b/packages/web-shared/ui-kit/PhospherIcon/PhospherIcon.js
index 79e4b385..4405a377 100644
--- a/packages/web-shared/ui-kit/PhospherIcon/PhospherIcon.js
+++ b/packages/web-shared/ui-kit/PhospherIcon/PhospherIcon.js
@@ -1,12 +1,12 @@
-import flow from 'lodash/flow';
+import React from 'react';
+
+import * as Icon from '@phosphor-icons/react';
 import camelCase from 'lodash/camelCase';
+import flow from 'lodash/flow';
 import upperFirst from 'lodash/upperFirst';
-import React from 'react';
 
 import { systemPropTypes } from '../_lib/system';
 
-import * as Icon from '@phosphor-icons/react';
-
 const pascalCase = (string) => flow(camelCase, upperFirst)(string);
 
 const PhospherIcon = ({ name, weight, size, color }) => {
diff --git a/packages/web-shared/ui-kit/ProgressBar/ProgressBar.js b/packages/web-shared/ui-kit/ProgressBar/ProgressBar.js
index e66b25c5..baa99c53 100644
--- a/packages/web-shared/ui-kit/ProgressBar/ProgressBar.js
+++ b/packages/web-shared/ui-kit/ProgressBar/ProgressBar.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import { systemPropTypes } from '../_lib/system';
+import PropTypes from 'prop-types';
 
 import { Container, Bar } from './ProgressBar.styles';
+import { systemPropTypes } from '../_lib/system';
 
 function ProgressBar(props = {}) {
   return (
diff --git a/packages/web-shared/ui-kit/ProgressBar/ProgressBar.styles.js b/packages/web-shared/ui-kit/ProgressBar/ProgressBar.styles.js
index cc88d4bf..588bb22b 100644
--- a/packages/web-shared/ui-kit/ProgressBar/ProgressBar.styles.js
+++ b/packages/web-shared/ui-kit/ProgressBar/ProgressBar.styles.js
@@ -1,6 +1,5 @@
-import { withTheme, css } from 'styled-components';
-import styled from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme, css } from 'styled-components';
 
 import { system } from '../_lib/system';
 
diff --git a/packages/web-shared/ui-kit/ResourceCard/ResourceCard.js b/packages/web-shared/ui-kit/ResourceCard/ResourceCard.js
index 0ac9e163..4f6f1890 100644
--- a/packages/web-shared/ui-kit/ResourceCard/ResourceCard.js
+++ b/packages/web-shared/ui-kit/ResourceCard/ResourceCard.js
@@ -1,9 +1,10 @@
 import React from 'react';
+
 import { CaretRight } from '@phosphor-icons/react';
 
-import { systemPropTypes } from '../_lib/system';
-import { Box } from '..';
 import Styled from './ResourceCard.styles';
+import { Box } from '..';
+import { systemPropTypes } from '../_lib/system';
 
 function ResourceCard({ title, subtitle, leadingAsset, tailingIcon, onClick, ...props }) {
   // Default tailing icon
@@ -43,7 +44,7 @@ function ResourceCard({ title, subtitle, leadingAsset, tailingIcon, onClick, ...
     </svg>
   );
 
-  //If leadingAsset is an image with uri, add frame to image. Otherwise, use whatever is passed in. If undefined, use default clip icon
+  // If leadingAsset is an image with uri, add frame to image. Otherwise, use whatever is passed in. If undefined, use default clip icon
   const LeadingAsset = leadingAsset?.sources?.[0]?.uri ? (
     <Styled.LeadingAsset>
       <Box
diff --git a/packages/web-shared/ui-kit/ResourceCard/ResourceCard.styles.js b/packages/web-shared/ui-kit/ResourceCard/ResourceCard.styles.js
index 75e8286a..7399c280 100644
--- a/packages/web-shared/ui-kit/ResourceCard/ResourceCard.styles.js
+++ b/packages/web-shared/ui-kit/ResourceCard/ResourceCard.styles.js
@@ -1,6 +1,5 @@
-import { withTheme } from 'styled-components';
-import styled, { css } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme, css } from 'styled-components';
 
 import { system } from '../_lib/system';
 
@@ -44,7 +43,7 @@ const Wrapper = withTheme(styled.div`
   ${system};
 `);
 
-//TODO: Find a better way to keep TailingIcon from from displaying outside of the Resource Card
+// TODO: Find a better way to keep TailingIcon from from displaying outside of the Resource Card
 const Heading = withTheme(styled.div`
   display: flex;
   flex-direction: column;
diff --git a/packages/web-shared/ui-kit/ResourceCard/index.js b/packages/web-shared/ui-kit/ResourceCard/index.js
index 1b832efb..20da4cc6 100644
--- a/packages/web-shared/ui-kit/ResourceCard/index.js
+++ b/packages/web-shared/ui-kit/ResourceCard/index.js
@@ -1,3 +1,3 @@
-import ResourceCard from "./ResourceCard";
+import ResourceCard from './ResourceCard';
 
 export default ResourceCard;
diff --git a/packages/web-shared/ui-kit/Select/Select.js b/packages/web-shared/ui-kit/Select/Select.js
index f2b41357..3ee72cc3 100644
--- a/packages/web-shared/ui-kit/Select/Select.js
+++ b/packages/web-shared/ui-kit/Select/Select.js
@@ -1,7 +1,9 @@
 import React, { useState, useRef } from 'react';
+
 import PropTypes from 'prop-types';
-import { Box, systemPropTypes, SystemText } from '..';
+
 import Styled from './Select.styles';
+import { Box, systemPropTypes, SystemText } from '..';
 
 const Select = ({ label = false, placeholder, options, ...props }) => {
   const textInputRef = useRef();
@@ -59,11 +61,7 @@ const Select = ({ label = false, placeholder, options, ...props }) => {
             </option>
           ))}
         </Styled.Select>
-        {label ? (
-          <Styled.Label {...interactionStateProps}>{placeholder}</Styled.Label>
-        ) : (
-          <></>
-        )}
+        {label ? <Styled.Label {...interactionStateProps}>{placeholder}</Styled.Label> : <></>}
       </Box>
       {props.error && (
         <SystemText color="base.alert" mt="xxs">
diff --git a/packages/web-shared/ui-kit/Select/Select.styles.js b/packages/web-shared/ui-kit/Select/Select.styles.js
index 1cf86493..10bad6e8 100644
--- a/packages/web-shared/ui-kit/Select/Select.styles.js
+++ b/packages/web-shared/ui-kit/Select/Select.styles.js
@@ -1,10 +1,9 @@
-import { withTheme } from "styled-components";
-import styled, { css } from "styled-components";
-import { themeGet } from "@styled-system/theme-get";
-import Color from "color";
+import { themeGet } from '@styled-system/theme-get';
+import Color from 'color';
+import styled, { withTheme, css } from 'styled-components';
 
-import { TypeStyles } from "../Typography";
-import { system } from "../_lib/system";
+import { system } from '../_lib/system';
+import { TypeStyles } from '../Typography';
 
 const labelColor = ({ theme, focused, hasValue, error }) => {
   if (error) {
@@ -14,16 +13,14 @@ const labelColor = ({ theme, focused, hasValue, error }) => {
   }
 
   return css`
-    color: ${focused || hasValue
-      ? theme.colors.text.action
-      : theme.colors.text.secondary};
+    color: ${focused || hasValue ? theme.colors.text.action : theme.colors.text.secondary};
   `;
 };
 
 const labelStateStyle = ({ focused, hasValue }) => css`
   ${focused || hasValue ? TypeStyles.SystemText() : undefined};
   top: 50%
-  font-weight: ${focused ? 600 : "inherit"};
+  font-weight: ${focused ? 600 : 'inherit'};
 `;
 
 const Label = withTheme(styled.p`
@@ -32,7 +29,7 @@ const Label = withTheme(styled.p`
   transform: translate(0, -14px); /* // TODO Fix brittle value. */
 
   pointer-events: none;
-  transition: all ${themeGet("timing.base")} ease-out;
+  transition: all ${themeGet('timing.base')} ease-out;
   ${labelStateStyle};
   ${labelColor};
 `);
@@ -54,11 +51,10 @@ const textSelectStateStyle = ({ theme, error }) => {
 
 const Select = withTheme(styled.select`
   ${TypeStyles.LargeSystemText}
-  padding: ${themeGet("space.xs")} 0;
-  transition: all ${themeGet("timing.xl")} ease-out;
-  placeholder-text-color: ${({ theme }) =>
-    Color(theme.colors.text.secondary).alpha(0)};
-  caret-color: ${themeGet("colors.base.primary")};
+  padding: ${themeGet('space.xs')} 0;
+  transition: all ${themeGet('timing.xl')} ease-out;
+  placeholder-text-color: ${({ theme }) => Color(theme.colors.text.secondary).alpha(0)};
+  caret-color: ${themeGet('colors.base.primary')};
   border-top: 0;
   border-left: 0;
   border-right: 0;
diff --git a/packages/web-shared/ui-kit/Select/index.js b/packages/web-shared/ui-kit/Select/index.js
index adb0c5ac..17d6bdad 100644
--- a/packages/web-shared/ui-kit/Select/index.js
+++ b/packages/web-shared/ui-kit/Select/index.js
@@ -1,3 +1,3 @@
-import Select from "./Select";
+import Select from './Select';
 
 export default Select;
diff --git a/packages/web-shared/ui-kit/ShareButton/ShareButton.js b/packages/web-shared/ui-kit/ShareButton/ShareButton.js
index ed8e2b96..c5e0aff0 100644
--- a/packages/web-shared/ui-kit/ShareButton/ShareButton.js
+++ b/packages/web-shared/ui-kit/ShareButton/ShareButton.js
@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
+
+import { Share } from '@phosphor-icons/react';
 import PropTypes from 'prop-types';
 
-import { systemPropTypes } from '../_lib/system';
-import { Box, Button } from '../../ui-kit';
-import Styled from './ShareButton.styles';
-import options from './options';
 import icons from './icons';
-import { Share } from '@phosphor-icons/react';
+import options from './options';
+import Styled from './ShareButton.styles';
+import { Box, Button } from '../../ui-kit';
+import { systemPropTypes } from '../_lib/system';
 
 const ShareButton = (props = {}) => {
   // Define state variable isMessageVisible with initial value false
diff --git a/packages/web-shared/ui-kit/ShareButton/ShareButton.styles.js b/packages/web-shared/ui-kit/ShareButton/ShareButton.styles.js
index 61bd9450..0b22002d 100644
--- a/packages/web-shared/ui-kit/ShareButton/ShareButton.styles.js
+++ b/packages/web-shared/ui-kit/ShareButton/ShareButton.styles.js
@@ -1,6 +1,5 @@
-import { withTheme } from 'styled-components';
-import styled, { css } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme, css } from 'styled-components';
 
 import { system } from '../_lib/system';
 
@@ -13,8 +12,8 @@ const Option = withTheme(styled.div`
   display: flex;
   font-size: 16px;
   align-items: center;
-  padding: ${themeGet('space.xs')} ${themeGet('space.base')}
-    ${themeGet('space.xs')} ${themeGet('space.xs')};
+  padding: ${themeGet('space.xs')} ${themeGet('space.base')} ${themeGet('space.xs')}
+    ${themeGet('space.xs')};
   border-bottom: 1px solid ${themeGet('colors.neutral.gray3')};
   &:hover {
     color: ${themeGet('colors.base.secondary')};
@@ -27,8 +26,8 @@ const BorderlessOption = withTheme(styled.div`
   display: flex;
   font-size: 16px;
   align-items: center;
-  padding: ${themeGet('space.xs')} ${themeGet('space.base')}
-    ${themeGet('space.xs')} ${themeGet('space.xs')};
+  padding: ${themeGet('space.xs')} ${themeGet('space.base')} ${themeGet('space.xs')}
+    ${themeGet('space.xs')};
   &:hover {
     color: ${themeGet('colors.base.secondary')};
   }
@@ -63,9 +62,7 @@ const Wrapper = withTheme(styled.div`
     top: -11px;
     border-width: 0 11px 11px 11px;
     border-style: solid;
-    border-color: transparent transparent ${themeGet(
-      'colors.neutral.gray3'
-    )}; transparent;
+    border-color: transparent transparent ${themeGet('colors.neutral.gray3')}; transparent;
   }
 
   ::after {
@@ -75,9 +72,7 @@ const Wrapper = withTheme(styled.div`
     top: -9px;
     border-width: 0 10px 10px 10px;
     border-style: solid;
-    border-color: transparent transparent ${themeGet(
-      'colors.base.white'
-    )} transparent;
+    border-color: transparent transparent ${themeGet('colors.base.white')} transparent;
   }
 
   border: 1px solid ${themeGet('colors.neutral.gray3')};
diff --git a/packages/web-shared/ui-kit/ShareButton/functions.js b/packages/web-shared/ui-kit/ShareButton/functions.js
index c28cee20..60d22fae 100644
--- a/packages/web-shared/ui-kit/ShareButton/functions.js
+++ b/packages/web-shared/ui-kit/ShareButton/functions.js
@@ -6,22 +6,16 @@ export function shareLinkByEmail(link) {
 }
 
 export function shareLinkOnFacebook(link) {
-  const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-    link
-  )}`;
+  const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(link)}`;
   window.open(url, '_blank', 'toolbar=0,location=0,menubar=0');
 }
 
 export function shareLinkOnTwitter(link) {
-  const url = `https://twitter.com/intent/tweet?url=${encodeURIComponent(
-    link
-  )}`;
+  const url = `https://twitter.com/intent/tweet?url=${encodeURIComponent(link)}`;
   window.open(url, '_blank', 'toolbar=0,location=0,menubar=0');
 }
 
 export function shareLinkOnLinkedIn(link) {
-  const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(
-    link
-  )}`;
+  const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(link)}`;
   window.open(url, '_blank', 'toolbar=0,location=0,menubar=0');
 }
diff --git a/packages/web-shared/ui-kit/ShareButton/icons.js b/packages/web-shared/ui-kit/ShareButton/icons.js
index 3f28094c..eaa5b1e1 100644
--- a/packages/web-shared/ui-kit/ShareButton/icons.js
+++ b/packages/web-shared/ui-kit/ShareButton/icons.js
@@ -2,12 +2,7 @@ import React from 'react';
 
 const icons = {
   email: (
-    <svg
-      width="29px"
-      height="29px"
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg width="29px" height="29px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
       <circle cx="512" cy="512" r="512" style={{ fill: '#607d8b' }} />
       <path
         d="M690.7 307.8H333.3c-42.3 0-76.6 34.3-76.6 76.6v255.3c0 42.3 34.3 76.6 76.6 76.6h357.4c42.3 0 76.6-34.3 76.6-76.6V384.3c0-42.3-34.3-76.5-76.6-76.5zm-10.4 51L530.1 508.9c-9.9 10-26.1 10.1-36.1.1l-.1-.1-150.2-150.1h336.6zm36 280.9c0 14.1-11.4 25.5-25.5 25.5H333.3c-14.1 0-25.5-11.4-25.5-25.5V394.8l150.1 150.1c29.9 29.9 78.3 29.9 108.3 0l150.1-150.1v244.9z"
diff --git a/packages/web-shared/ui-kit/ShareButton/options.js b/packages/web-shared/ui-kit/ShareButton/options.js
index 8d0a9a77..69f4886b 100644
--- a/packages/web-shared/ui-kit/ShareButton/options.js
+++ b/packages/web-shared/ui-kit/ShareButton/options.js
@@ -1,10 +1,10 @@
-import icons from './icons';
 import {
   shareLinkByEmail,
   shareLinkOnFacebook,
   shareLinkOnTwitter,
   shareLinkOnLinkedIn,
 } from './functions';
+import icons from './icons';
 
 const options = [
   {
diff --git a/packages/web-shared/ui-kit/ThemeProvider/ThemeProvider.js b/packages/web-shared/ui-kit/ThemeProvider/ThemeProvider.js
index 9c213de2..41ed852b 100644
--- a/packages/web-shared/ui-kit/ThemeProvider/ThemeProvider.js
+++ b/packages/web-shared/ui-kit/ThemeProvider/ThemeProvider.js
@@ -1,18 +1,22 @@
 import React, { useEffect, useState } from 'react';
+
 import PropTypes from 'prop-types';
 import { ThemeProvider as SCThemeProvider, withTheme } from 'styled-components';
-import defaultTheme from '../_config/theme';
+
 import { useCurrentChurch } from '../../hooks';
 import { useSearch, set } from '../../providers/SearchProvider';
+import defaultTheme from '../_config/theme';
 
 function ThemeProvider({ theme = defaultTheme, ...props }) {
   const [_colorScheme, setColorScheme] = useState('light');
   const [_colorTheme, setColorTheme] = useState({
     ...defaultTheme,
+
     // TODO: Fix light theme design before enabling theme switching
     // colors: props.theme.colors[_colorScheme],
     colors: {
       ...defaultTheme.colors.light,
+
       // only these three custom colors are currently supported
       base: {
         ...defaultTheme.colors.light.base,
@@ -42,10 +46,12 @@ function ThemeProvider({ theme = defaultTheme, ...props }) {
       const customTheme = JSON.parse(currentChurch?.theme);
       setColorTheme({
         ...defaultTheme,
+
         // TODO: Fix light theme design before enabling theme switching
         // colors: props.theme.colors[_colorScheme],
         colors: {
           ...defaultTheme.colors.light,
+
           // only these three custom colors are currently supported
           base: {
             ...defaultTheme.colors.light.base,
diff --git a/packages/web-shared/ui-kit/Typography/BodyText.js b/packages/web-shared/ui-kit/Typography/BodyText.js
index ea027bb5..b3d523dc 100644
--- a/packages/web-shared/ui-kit/Typography/BodyText.js
+++ b/packages/web-shared/ui-kit/Typography/BodyText.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
-import styled from 'styled-components';
 
-import { system, systemPropTypes } from '../_lib/system';
+import styled, { withTheme } from 'styled-components';
 
 import TypeStyles from './_typeStyles';
+import { system, systemPropTypes } from '../_lib/system';
 
 const Text = withTheme(styled.p`
   ${TypeStyles.BodyText}
diff --git a/packages/web-shared/ui-kit/Typography/H1.js b/packages/web-shared/ui-kit/Typography/H1.js
index c44d6a74..30017aa9 100644
--- a/packages/web-shared/ui-kit/Typography/H1.js
+++ b/packages/web-shared/ui-kit/Typography/H1.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
-import styled from 'styled-components';
 
-import { system, systemPropTypes } from '../_lib/system';
+import styled, { withTheme } from 'styled-components';
+
 import TypeStyles from './_typeStyles';
+import { system, systemPropTypes } from '../_lib/system';
 
 const H1 = withTheme(styled.h1.attrs({
   className: 'heading-style-h1',
diff --git a/packages/web-shared/ui-kit/Typography/H2.js b/packages/web-shared/ui-kit/Typography/H2.js
index 843cdc2c..e47285c8 100644
--- a/packages/web-shared/ui-kit/Typography/H2.js
+++ b/packages/web-shared/ui-kit/Typography/H2.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
-import styled from 'styled-components';
 
-import { system, systemPropTypes } from '../_lib/system';
+import styled, { withTheme } from 'styled-components';
 
 import TypeStyles from './_typeStyles';
+import { system, systemPropTypes } from '../_lib/system';
 
 const H2 = withTheme(styled.h2.attrs({
   className: 'heading-style-h2',
diff --git a/packages/web-shared/ui-kit/Typography/H3.js b/packages/web-shared/ui-kit/Typography/H3.js
index 708dc384..0a30ccb6 100644
--- a/packages/web-shared/ui-kit/Typography/H3.js
+++ b/packages/web-shared/ui-kit/Typography/H3.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
-import styled from 'styled-components';
 
-import { system, systemPropTypes } from '../_lib/system';
+import styled, { withTheme } from 'styled-components';
 
 import TypeStyles from './_typeStyles';
+import { system, systemPropTypes } from '../_lib/system';
 
 const H3 = withTheme(styled.h3.attrs({
   className: 'heading-style-h3',
diff --git a/packages/web-shared/ui-kit/Typography/H4.js b/packages/web-shared/ui-kit/Typography/H4.js
index a72dd8c8..0fc901d9 100644
--- a/packages/web-shared/ui-kit/Typography/H4.js
+++ b/packages/web-shared/ui-kit/Typography/H4.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
-import styled from 'styled-components';
 
-import { system, systemPropTypes } from '../_lib/system';
+import styled, { withTheme } from 'styled-components';
 
 import TypeStyles from './_typeStyles';
+import { system, systemPropTypes } from '../_lib/system';
 
 const H4 = withTheme(styled.h4.attrs({
   className: 'heading-style-h4',
diff --git a/packages/web-shared/ui-kit/Typography/H5.js b/packages/web-shared/ui-kit/Typography/H5.js
index b37ecfc4..c8c91659 100644
--- a/packages/web-shared/ui-kit/Typography/H5.js
+++ b/packages/web-shared/ui-kit/Typography/H5.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
-import styled from 'styled-components';
 
-import { system, systemPropTypes } from '../_lib/system';
+import styled, { withTheme } from 'styled-components';
 
 import TypeStyles from './_typeStyles';
+import { system, systemPropTypes } from '../_lib/system';
 
 const H5 = withTheme(styled.h5.attrs({
   className: 'heading-style-h5',
diff --git a/packages/web-shared/ui-kit/Typography/H6.js b/packages/web-shared/ui-kit/Typography/H6.js
index fc01cc8f..f2e655d3 100644
--- a/packages/web-shared/ui-kit/Typography/H6.js
+++ b/packages/web-shared/ui-kit/Typography/H6.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
-import styled from 'styled-components';
 
-import { system, systemPropTypes } from '../_lib/system';
+import styled, { withTheme } from 'styled-components';
 
 import TypeStyles from './_typeStyles';
+import { system, systemPropTypes } from '../_lib/system';
 
 const H6 = withTheme(styled.h6.attrs({
   className: 'heading-style-h6',
diff --git a/packages/web-shared/ui-kit/Typography/LargeSystemText.js b/packages/web-shared/ui-kit/Typography/LargeSystemText.js
index 305a40b1..ba7083c3 100644
--- a/packages/web-shared/ui-kit/Typography/LargeSystemText.js
+++ b/packages/web-shared/ui-kit/Typography/LargeSystemText.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
-import styled from 'styled-components';
 
-import { system, systemPropTypes } from '../_lib/system';
+import styled, { withTheme } from 'styled-components';
 
 import TypeStyles from './_typeStyles';
+import { system, systemPropTypes } from '../_lib/system';
 
 const LargeSystemText = withTheme(styled.p`
   ${TypeStyles.LargeSystemText}
diff --git a/packages/web-shared/ui-kit/Typography/SmallBodyText.js b/packages/web-shared/ui-kit/Typography/SmallBodyText.js
index 4c949719..e82f0e6c 100644
--- a/packages/web-shared/ui-kit/Typography/SmallBodyText.js
+++ b/packages/web-shared/ui-kit/Typography/SmallBodyText.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
-import styled from 'styled-components';
 
-import { system, systemPropTypes } from '../_lib/system';
+import styled, { withTheme } from 'styled-components';
 
 import TypeStyles from './_typeStyles';
+import { system, systemPropTypes } from '../_lib/system';
 
 const SmallBodyText = withTheme(styled.p`
   ${TypeStyles.SmallBodyText}
diff --git a/packages/web-shared/ui-kit/Typography/SmallSystemText.js b/packages/web-shared/ui-kit/Typography/SmallSystemText.js
index 3ca42d52..b86302e0 100644
--- a/packages/web-shared/ui-kit/Typography/SmallSystemText.js
+++ b/packages/web-shared/ui-kit/Typography/SmallSystemText.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
-import styled from 'styled-components';
 
-import { system, systemPropTypes } from '../_lib/system';
+import styled, { withTheme } from 'styled-components';
 
 import TypeStyles from './_typeStyles';
+import { system, systemPropTypes } from '../_lib/system';
 
 const SmallSystemText = withTheme(styled.p`
   ${TypeStyles.SmallSystemText}
diff --git a/packages/web-shared/ui-kit/Typography/SystemText.js b/packages/web-shared/ui-kit/Typography/SystemText.js
index c4f641a9..60b478ee 100644
--- a/packages/web-shared/ui-kit/Typography/SystemText.js
+++ b/packages/web-shared/ui-kit/Typography/SystemText.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import { withTheme } from 'styled-components';
-import styled from 'styled-components';
 
-import { system, systemPropTypes } from '../_lib/system';
+import styled, { withTheme } from 'styled-components';
 
 import TypeStyles from './_typeStyles';
+import { system, systemPropTypes } from '../_lib/system';
 
 const SystemText = withTheme(styled.p`
   ${TypeStyles.SystemText}
diff --git a/packages/web-shared/ui-kit/Typography/_typeStyles.js b/packages/web-shared/ui-kit/Typography/_typeStyles.js
index a78145fa..2819a05f 100644
--- a/packages/web-shared/ui-kit/Typography/_typeStyles.js
+++ b/packages/web-shared/ui-kit/Typography/_typeStyles.js
@@ -1,5 +1,5 @@
-import { css } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import { css } from 'styled-components';
 
 import * as utils from '../_utils';
 
diff --git a/packages/web-shared/ui-kit/Typography/index.js b/packages/web-shared/ui-kit/Typography/index.js
index 693b0a21..f0404639 100644
--- a/packages/web-shared/ui-kit/Typography/index.js
+++ b/packages/web-shared/ui-kit/Typography/index.js
@@ -1,3 +1,4 @@
+import TypeStyles from './_typeStyles';
 import BodyText from './BodyText';
 import H1 from './H1';
 import H2 from './H2';
@@ -9,7 +10,6 @@ import LargeSystemText from './LargeSystemText';
 import SmallBodyText from './SmallBodyText';
 import SmallSystemText from './SmallSystemText';
 import SystemText from './SystemText';
-import TypeStyles from './_typeStyles';
 
 export {
   BodyText,
diff --git a/packages/web-shared/ui-kit/_config/theme.js b/packages/web-shared/ui-kit/_config/theme.js
index d322a4e9..e69e8304 100644
--- a/packages/web-shared/ui-kit/_config/theme.js
+++ b/packages/web-shared/ui-kit/_config/theme.js
@@ -1,5 +1,5 @@
-import { rem } from '../_utils';
 import colors from './colors';
+import { rem } from '../_utils';
 
 const theme = {
   breakpoints: {
diff --git a/packages/web-shared/ui-kit/_utils/__tests__/rem.test.js b/packages/web-shared/ui-kit/_utils/__tests__/rem.test.js
index 0c238f5d..63aefe61 100644
--- a/packages/web-shared/ui-kit/_utils/__tests__/rem.test.js
+++ b/packages/web-shared/ui-kit/_utils/__tests__/rem.test.js
@@ -1,7 +1,7 @@
 import rem from '../rem';
 
 test('it should turn a pixel value into a rem', () => {
-  //default platform is ios
+  // default platform is ios
   expect(rem('12px')).toEqual('16px');
   expect(rem('18px')).toEqual('24px');
 });
diff --git a/packages/web-shared/ui-kit/_utils/index.js b/packages/web-shared/ui-kit/_utils/index.js
index 2c3ad4ed..cc078898 100644
--- a/packages/web-shared/ui-kit/_utils/index.js
+++ b/packages/web-shared/ui-kit/_utils/index.js
@@ -1,5 +1,5 @@
+import px from './px';
 import rem from './rem';
 import stripUnit from './stripUnit';
-import px from './px';
 
 export { px, rem, stripUnit };
diff --git a/packages/web-shared/ui-kit/index.js b/packages/web-shared/ui-kit/index.js
index 5374cf20..81e48950 100644
--- a/packages/web-shared/ui-kit/index.js
+++ b/packages/web-shared/ui-kit/index.js
@@ -1,21 +1,20 @@
 import styled, { withTheme, css } from 'styled-components';
-import theme from './_config/theme';
 
+import theme from './_config/theme';
 import { system, systemPropTypes } from './_lib/system';
 import * as utils from './_utils';
 
-import ThemeProvider from './ThemeProvider';
-
 // UI Kit components
 import Avatar from './Avatar';
 import Box from './Box';
 import Button from './Button';
+import ButtonGroup from './ButtonGroup';
 import Card from './Card';
 import ContentCard from './ContentCard';
-import ButtonGroup from './ButtonGroup';
 import Icons from './Icons';
 import Input from './Input';
 import Layout from './Layout';
+import ListItem from './ListItem';
 import Loader from './Loader';
 import Longform from './Longform';
 import MediaItem, { LiveChip } from './MediaItem';
@@ -24,8 +23,7 @@ import ProgressBar from './ProgressBar';
 import ResourceCard from './ResourceCard';
 import Select from './Select';
 import ShareButton from './ShareButton';
-import ListItem from './ListItem';
-
+import ThemeProvider from './ThemeProvider';
 import {
   BodyText,
   H1,
@@ -44,6 +42,7 @@ import {
 export {
   // ====================
   ThemeProvider,
+
   // ====================
   Avatar,
   Box,
@@ -78,11 +77,13 @@ export {
   SmallSystemText,
   SystemText,
   TypeStyles,
+
   // ====================
   theme,
   system,
   systemPropTypes,
   utils,
+
   // ====================
   // Reexport to ensure that styled-components is using the same instance as the consuming app
   styled,
diff --git a/packages/web-shared/utils/getContentFromURL.js b/packages/web-shared/utils/getContentFromURL.js
index e32f2929..45628828 100644
--- a/packages/web-shared/utils/getContentFromURL.js
+++ b/packages/web-shared/utils/getContentFromURL.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { ContentItemProvider, FeatureFeedProvider, ContentFeedProvider } from '../providers';
+
+import parseSlugToIdAndType from './parseSlugToIdAndType';
 import {
   ContentSingle,
   ContentSeriesSingle,
@@ -8,7 +9,7 @@ import {
   InformationalContentSingle,
   LivestreamSingle,
 } from '../components';
-import parseSlugToIdAndType from './parseSlugToIdAndType';
+import { ContentItemProvider, FeatureFeedProvider, ContentFeedProvider } from '../providers';
 import { Box } from '../ui-kit';
 
 export function getComponentFromType({ type, id }) {
diff --git a/packages/web-shared/utils/parseSlugToIdAndType.js b/packages/web-shared/utils/parseSlugToIdAndType.js
index c8b37d53..350c4b27 100644
--- a/packages/web-shared/utils/parseSlugToIdAndType.js
+++ b/packages/web-shared/utils/parseSlugToIdAndType.js
@@ -7,24 +7,22 @@
 // a-word-from-john-VW5pdmVyc2FsQ29udGVudEl0ZW0tNjY5ZmU1ZDMtOTc1My00YThlLThmMWUtMTYwM2JjM2NjMDRl
 // mens-breakfast-VW5pdmVyc2FsQ29udGVudEl0ZW0tYTA1Mzk4YjQtNzBjZi00MjhjLWI4NWMtYWRhYjEzNDhlZTgx
 
-
-const uuidRegex = /^[A-Z](\w)+\-/
+const uuidRegex = /^[A-Z](\w)+\-/;
 
 const parseSlugToIdAndType = (url) => {
   if (!url) return null;
 
-
   const isUuid = uuidRegex.test(url);
 
   if (!isUuid) {
-    const apollosIdEncoded = url.split('-').at(-1)
+    const apollosIdEncoded = url.split('-').at(-1);
     const apollosId = atob(apollosIdEncoded);
     const [type, randomId] = apollosId?.split(/-(.*)/s) ?? [];
-    if (type && randomId) return { type, randomId}
+    if (type && randomId) return { type, randomId };
   } else {
     const [type, randomId] = url?.split(/-(.*)/s) ?? [];
-    if (type && randomId) return { type, randomId}
+    if (type && randomId) return { type, randomId };
   }
-}
+};
 
-export default parseSlugToIdAndType;
\ No newline at end of file
+export default parseSlugToIdAndType;
diff --git a/packages/web-shared/utils/validateEmail.js b/packages/web-shared/utils/validateEmail.js
index 83f4b12f..d5a66884 100644
--- a/packages/web-shared/utils/validateEmail.js
+++ b/packages/web-shared/utils/validateEmail.js
@@ -3,7 +3,8 @@ function validateEmail(email) {
     return false;
   }
 
-  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  const re =
+    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   return re.test(String(email).toLowerCase());
 }
 
diff --git a/yarn.lock b/yarn.lock
index 88025b4b..acadf7f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10976,7 +10976,16 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -11063,7 +11072,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -12258,7 +12274,16 @@ workbox-window@6.6.1:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==

From e6a15cf5a2b0e36a0813dbd454f6ad3812adf5e3 Mon Sep 17 00:00:00 2001
From: Michael Neeley <micneeley14@gmail.com>
Date: Thu, 11 Dec 2025 08:48:48 -0500
Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=A4=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/web-shared/.eslintrc.js              | 44 +++++++++++++++++++
 .../components/Searchbar/Autocomplete.js      |  4 +-
 .../components/Searchbar/SearchResults.js     |  2 +
 3 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 packages/web-shared/.eslintrc.js

diff --git a/packages/web-shared/.eslintrc.js b/packages/web-shared/.eslintrc.js
new file mode 100644
index 00000000..3692f4ed
--- /dev/null
+++ b/packages/web-shared/.eslintrc.js
@@ -0,0 +1,44 @@
+module.exports = {
+  extends: ['react-app', 'plugin:prettier/recommended'],
+  plugins: ['simple-import-sort', 'import'],
+  rules: {
+    'import/first': 'error',
+    'import/newline-after-import': 'error',
+    'import/no-duplicates': 'error',
+    'import/order': [
+      'error',
+      {
+        groups: [['external', 'builtin'], 'internal', ['sibling', 'parent'], 'index'],
+        pathGroups: [
+          {
+            pattern: '@(react|react-native)',
+            group: 'external',
+            position: 'before',
+          },
+          {
+            pattern: '@src/**',
+            group: 'internal',
+          },
+        ],
+        pathGroupsExcludedImportTypes: ['internal', 'react'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+      },
+    ],
+    'lines-around-comment': [
+      'error',
+      {
+        allowArrayStart: true,
+        allowBlockStart: true,
+        allowClassStart: true,
+        allowObjectStart: true,
+        beforeBlockComment: true,
+        beforeLineComment: true,
+      },
+    ],
+    'spaced-comment': ['error', 'always'],
+  },
+};
diff --git a/packages/web-shared/components/Searchbar/Autocomplete.js b/packages/web-shared/components/Searchbar/Autocomplete.js
index d8bf0302..e17c820d 100644
--- a/packages/web-shared/components/Searchbar/Autocomplete.js
+++ b/packages/web-shared/components/Searchbar/Autocomplete.js
@@ -18,7 +18,7 @@ const apiKey = '251ec8d76f6c62ac793c1337b39bda58';
 const searchClient = algoliasearch(appId, apiKey);
 
 // Recent Searches Index Definition
-const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
+export const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
   key: 'navbar',
   transformSource({ source }) {
     return {
@@ -109,7 +109,7 @@ export default function Autocomplete({
   const autocomplete = useMemo(() => {
     return createAutocomplete({
       openOnFocus: true,
-      plugins: [querySuggestionsPlugin],
+      plugins: [querySuggestionsPlugin, recentSearchesPlugin],
       shouldPanelOpen({ state }) {
         return state.query !== '' || state.collections?.length > 0;
       },
diff --git a/packages/web-shared/components/Searchbar/SearchResults.js b/packages/web-shared/components/Searchbar/SearchResults.js
index ed487685..b3bb7580 100644
--- a/packages/web-shared/components/Searchbar/SearchResults.js
+++ b/packages/web-shared/components/Searchbar/SearchResults.js
@@ -10,6 +10,7 @@ import { useNavigation } from '../../providers/NavigationProvider';
 import { useSearchState } from '../../providers/SearchProvider';
 import { ResourceCard, Box } from '../../ui-kit';
 import { getURLFromType } from '../../utils';
+import { recentSearchesPlugin } from './Autocomplete';
 import Feed from '../FeatureFeed';
 
 function Hit({ hit }) {
@@ -290,6 +291,7 @@ const SearchResults = ({ autocompleteState, autocomplete }) => {
           }
         })}
       {
+
         // Rendering of regular items
         autocompleteState.query !== '' ? (
           <div className="aa-Source">

From ea5cf3689969c671ea28af983a1ebe7debbd5993 Mon Sep 17 00:00:00 2001
From: Michael Neeley <micneeley14@gmail.com>
Date: Thu, 11 Dec 2025 09:05:35 -0500
Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=A4=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-shared/components/Auth/AuthConfirm.js | 12 ++--
 .../web-shared/components/ContentSingle.js    | 15 ++--
 .../web-shared/components/Profile/Profile.js  |  7 +-
 .../components/Searchbar/SearchResults.js     | 70 +++++++++----------
 .../components/Searchbar/Searchbar.js         |  2 +-
 packages/web-shared/ui-kit/index.js           |  5 --
 6 files changed, 50 insertions(+), 61 deletions(-)

diff --git a/packages/web-shared/components/Auth/AuthConfirm.js b/packages/web-shared/components/Auth/AuthConfirm.js
index 6ed5ac45..da73b888 100644
--- a/packages/web-shared/components/Auth/AuthConfirm.js
+++ b/packages/web-shared/components/Auth/AuthConfirm.js
@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react';
+
 import isEmpty from 'lodash/isEmpty';
 
+import AuthLayout from './AuthLayout';
+import authSteps from './authSteps';
 import { useValidateLogin, useValidateRegister } from '../../hooks';
 import { useAnalytics } from '../../providers/AnalyticsProvider';
 import { update as updateAuth, useAuth } from '../../providers/AuthProvider';
 import { Box, Button, Input } from '../../ui-kit';
-import AuthLayout from './AuthLayout';
-import authSteps from './authSteps';
 
 const AuthConfirm = (props) => {
   const [status, setStatus] = useState('IDLE');
@@ -143,12 +144,7 @@ const AuthConfirm = (props) => {
           error={error?.passcode}
         />
       </Box>
-      <Button
-        title={`Verify${isLoading ? 'ing...' : ''}`}
-
-        // disabled={!isPinReady}
-        onClick={handleSignInSubmit}
-      />
+      <Button title={`Verify${isLoading ? 'ing...' : ''}`} onClick={handleSignInSubmit} />
     </AuthLayout>
   );
 };
diff --git a/packages/web-shared/components/ContentSingle.js b/packages/web-shared/components/ContentSingle.js
index a6025775..2ecc14b9 100644
--- a/packages/web-shared/components/ContentSingle.js
+++ b/packages/web-shared/components/ContentSingle.js
@@ -1,10 +1,18 @@
 import React, { useEffect, useState } from 'react';
+
 import { ChatCircleText } from '@phosphor-icons/react';
 import { format, parseISO } from 'date-fns';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import styled from 'styled-components';
 
+import Comments, { SIDEBAR_WITH } from './Comments';
+import { ParentSummary, ParentTitle, Title } from './ContentSingle.styles';
+import FeatureFeed from './FeatureFeed';
+import FeatureFeedComponentMap from './FeatureFeed/FeatureFeedComponentMap';
+import InteractWhenLoaded from './InteractWhenLoaded';
+import TrackEventWhenLoaded from './TrackEventWhenLoaded';
+import VideoPlayer from './VideoPlayer';
 import { useFeatureFeed, useHTMLContent, useVideoMediaProgress } from '../hooks';
 import { useShouldUsePathRouter } from '../providers/AppProvider';
 import { set as setModal, useModal } from '../providers/ModalProvider';
@@ -22,13 +30,6 @@ import {
   ShareButton,
 } from '../ui-kit';
 import { getURLFromType } from '../utils';
-import Comments, { SIDEBAR_WITH } from './Comments';
-import { ParentSummary, ParentTitle, Title } from './ContentSingle.styles';
-import FeatureFeed from './FeatureFeed';
-import FeatureFeedComponentMap from './FeatureFeed/FeatureFeedComponentMap';
-import InteractWhenLoaded from './InteractWhenLoaded';
-import TrackEventWhenLoaded from './TrackEventWhenLoaded';
-import VideoPlayer from './VideoPlayer';
 
 const infoDivider = (
   <BodyText color="text.tertiary" mx="xs" display={{ xs: 'none', sm: 'block' }}>
diff --git a/packages/web-shared/components/Profile/Profile.js b/packages/web-shared/components/Profile/Profile.js
index b4dc44f2..d69ee5d6 100644
--- a/packages/web-shared/components/Profile/Profile.js
+++ b/packages/web-shared/components/Profile/Profile.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+
 import {
   AndroidLogo,
   AppleLogo,
@@ -14,15 +15,15 @@ import Color from 'color';
 import { Link } from 'react-router-dom';
 import { withTheme } from 'styled-components';
 
+import ImageUploader from './ImageUploader';
+import Styled from './Profile.styles';
+import ProfileDetails from './ProfileDetails';
 import { AuthManager } from '../../components';
 import { useCurrentChurch, useCurrentUser } from '../../hooks';
 import { logout, useAuth } from '../../providers/AuthProvider';
 import { Avatar, BodyText, Box, Button, H4, ListItem, systemPropTypes, utils } from '../../ui-kit';
 import authSteps from '../Auth/authSteps';
 import Logo from '../Logo';
-import ImageUploader from './ImageUploader';
-import ProfileDetails from './ProfileDetails';
-import Styled from './Profile.styles';
 
 const Profile = ({ theme, handleCloseProfile, size, ...rest }) => {
   const { currentUser } = useCurrentUser();
diff --git a/packages/web-shared/components/Searchbar/SearchResults.js b/packages/web-shared/components/Searchbar/SearchResults.js
index b3bb7580..1bae796c 100644
--- a/packages/web-shared/components/Searchbar/SearchResults.js
+++ b/packages/web-shared/components/Searchbar/SearchResults.js
@@ -4,13 +4,13 @@ import '@algolia/autocomplete-theme-classic';
 import { parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
 import { ClockCounterClockwise, MagnifyingGlass, CaretRight, X } from '@phosphor-icons/react';
 
+import { recentSearchesPlugin } from './Autocomplete';
 import { FeatureFeedProvider } from '../../providers';
 import { open as openModal, set as setModal, useModal } from '../../providers/ModalProvider';
 import { useNavigation } from '../../providers/NavigationProvider';
 import { useSearchState } from '../../providers/SearchProvider';
 import { ResourceCard, Box } from '../../ui-kit';
 import { getURLFromType } from '../../utils';
-import { recentSearchesPlugin } from './Autocomplete';
 import Feed from '../FeatureFeed';
 
 function Hit({ hit }) {
@@ -290,42 +290,38 @@ const SearchResults = ({ autocompleteState, autocomplete }) => {
             );
           }
         })}
-      {
-
-        // Rendering of regular items
-        autocompleteState.query !== '' ? (
-          <div className="aa-Source">
-            <ul className="aa-List" {...autocomplete.getListProps()}>
-              {allResults.map((item) => (
-                <Box
-                  as="li"
-                  borderRadius="0"
-                  padding="0"
-                  key={item.objectID}
-                  className="aa-Item"
-                  {...autocomplete.getItemProps({
-                    item,
-                    source: item.source,
-                  })}
-                >
-                  <ResourceCard
-                    leadingAsset={item?.coverImage}
-                    title={item?.title}
-                    subtitle={item?.summary}
-                    onClick={() => {
-                      if (item.source.sourceId === 'pages') {
-                        return handleStaticActionPress(item);
-                      }
-                      return handleActionPress(item);
-                    }}
-                    background="none"
-                  />
-                </Box>
-              ))}
-            </ul>
-          </div>
-        ) : null
-      }
+      {autocompleteState.query !== '' ? (
+        <div className="aa-Source">
+          <ul className="aa-List" {...autocomplete.getListProps()}>
+            {allResults.map((item) => (
+              <Box
+                as="li"
+                borderRadius="0"
+                padding="0"
+                key={item.objectID}
+                className="aa-Item"
+                {...autocomplete.getItemProps({
+                  item,
+                  source: item.source,
+                })}
+              >
+                <ResourceCard
+                  leadingAsset={item?.coverImage}
+                  title={item?.title}
+                  subtitle={item?.summary}
+                  onClick={() => {
+                    if (item.source.sourceId === 'pages') {
+                      return handleStaticActionPress(item);
+                    }
+                    return handleActionPress(item);
+                  }}
+                  background="none"
+                />
+              </Box>
+            ))}
+          </ul>
+        </div>
+      ) : null}
       {autocompleteState.isOpen && autocompleteState.query === '' && searchState.searchFeed ? (
         <Box className="empty-feed" margin="base">
           <FeatureFeedProvider
diff --git a/packages/web-shared/components/Searchbar/Searchbar.js b/packages/web-shared/components/Searchbar/Searchbar.js
index 9d8f15b7..3766b0fb 100644
--- a/packages/web-shared/components/Searchbar/Searchbar.js
+++ b/packages/web-shared/components/Searchbar/Searchbar.js
@@ -34,8 +34,8 @@ const Searchbar = (props = {}) => {
   const [isMobile, setIsMobile] = useState(false);
   const [scrollPosition, setScrollPosition] = useState(0);
 
+  // 0.35ch works out visually to be the width of a &nbsp;
   const textWelcome = (
-    // 0.35ch works out visually to be the width of a &nbsp;
     <strong style={{ marginRight: '0.35ch' }}>Hey{firstName !== '' ? ` ${firstName}` : ''}!</strong>
   );
 
diff --git a/packages/web-shared/ui-kit/index.js b/packages/web-shared/ui-kit/index.js
index 81e48950..5a030e38 100644
--- a/packages/web-shared/ui-kit/index.js
+++ b/packages/web-shared/ui-kit/index.js
@@ -3,8 +3,6 @@ import styled, { withTheme, css } from 'styled-components';
 import theme from './_config/theme';
 import { system, systemPropTypes } from './_lib/system';
 import * as utils from './_utils';
-
-// UI Kit components
 import Avatar from './Avatar';
 import Box from './Box';
 import Button from './Button';
@@ -40,10 +38,7 @@ import {
 } from './Typography';
 
 export {
-  // ====================
   ThemeProvider,
-
-  // ====================
   Avatar,
   Box,
   Button,

From e2b3e5b3f0162dc168940ebbde16f4bce8028f37 Mon Sep 17 00:00:00 2001
From: Michael Neeley <micneeley14@gmail.com>
Date: Thu, 11 Dec 2025 09:11:20 -0500
Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=A4=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/lint.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 7b38c8fb..9f7c18fc 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -2,6 +2,8 @@ name: Lint Web Packages
 
 on:
   push:
+    branches:
+      - main
     paths:
       - 'web-embeds/**'
       - 'packages/web-shared/**'

From 6a1e08511f8261251abdb0278d9ad5beff5d7362 Mon Sep 17 00:00:00 2001
From: Michael Neeley <micneeley14@gmail.com>
Date: Thu, 11 Dec 2025 09:15:08 -0500
Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=A4=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/web-shared/components/Searchbar/Autocomplete.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-shared/components/Searchbar/Autocomplete.js b/packages/web-shared/components/Searchbar/Autocomplete.js
index 4b950b44..8923c10c 100644
--- a/packages/web-shared/components/Searchbar/Autocomplete.js
+++ b/packages/web-shared/components/Searchbar/Autocomplete.js
@@ -4,9 +4,9 @@ import { createAutocomplete } from '@algolia/autocomplete-core';
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
 import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
 import { getAlgoliaResults } from '@algolia/autocomplete-preset-algolia';
+import { X } from '@phosphor-icons/react';
 import algoliasearch from 'algoliasearch/lite';
 import '@algolia/autocomplete-theme-classic';
-import { X } from '@phosphor-icons/react';
 
 import Styled from './Search.styles';
 import { useSearchState } from '../../providers/SearchProvider';
@@ -18,7 +18,7 @@ const apiKey = '251ec8d76f6c62ac793c1337b39bda58';
 const searchClient = algoliasearch(appId, apiKey);
 
 // Recent Searches Index Definition
-export const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
+const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
   key: 'navbar',
   transformSource({ source }) {
     return {
@@ -127,7 +127,7 @@ export default function Autocomplete({
   const autocomplete = useMemo(() => {
     return createAutocomplete({
       openOnFocus: true,
-      plugins: [querySuggestionsPlugin, recentSearchesPlugin],
+      plugins: [querySuggestionsPlugin],
       shouldPanelOpen({ state }) {
         return state.query !== '' || state.collections?.length > 0;
       },

From 922f58d1710c930bff25414f33fb90c1d6ea218c Mon Sep 17 00:00:00 2001
From: Michael Neeley <micneeley14@gmail.com>
Date: Thu, 11 Dec 2025 09:29:54 -0500
Subject: [PATCH 6/6] Update
 packages/web-shared/components/AppHeader/AppHeader.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/web-shared/components/AppHeader/AppHeader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-shared/components/AppHeader/AppHeader.js b/packages/web-shared/components/AppHeader/AppHeader.js
index ab156a67..013d61f3 100644
--- a/packages/web-shared/components/AppHeader/AppHeader.js
+++ b/packages/web-shared/components/AppHeader/AppHeader.js
@@ -1,7 +1,7 @@
 import { User } from '@phosphor-icons/react';
 
 import { useCurrentChurch } from '../../hooks';
-import { Box, Avatar } from '../../ui-kit';
+import { Box } from '../../ui-kit';
 import ProfileButton from '../Profile/ProfileButton';
 import SearchStyles from '../Searchbar/Search.styles';
 import Wordmark from '../Wordmark';