From 6babacefc3ae56191625207436fc6faaaca10445 Mon Sep 17 00:00:00 2001
From: langemike <mikevv@gmail.com>
Date: Wed, 24 Jan 2024 14:51:54 +0100
Subject: [PATCH 001/128] feat(project): dynamic gtm snippet

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>
---
 platforms/web/vite.config.ts | 54 ++++++++++++++++++++++++++----------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/platforms/web/vite.config.ts b/platforms/web/vite.config.ts
index 6b3801f7f..4ad4d3b35 100644
--- a/platforms/web/vite.config.ts
+++ b/platforms/web/vite.config.ts
@@ -1,6 +1,6 @@
 import path from 'path';
 
-import { defineConfig } from 'vite';
+import { defineConfig, HtmlTagDescriptor } from 'vite';
 import type { ConfigEnv, UserConfigExport } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 import eslintPlugin from 'vite-plugin-eslint';
@@ -26,6 +26,41 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
     process.env.NODE_ENV = 'production';
   }
 
+  const getGoogleScripts = () => {
+    const tags: HtmlTagDescriptor[] = [];
+
+    if (process.env.APP_GOOGLE_SITE_VERIFICATION_ID) {
+      tags.push({
+        tag: 'meta',
+        injectTo: 'head',
+        attrs: {
+          content: process.env.APP_GOOGLE_SITE_VERIFICATION_ID,
+          name: 'google-site-verification',
+        },
+      });
+    }
+    if (process.env.APP_GTM_TAG_ID) {
+      tags.push(
+        {
+          injectTo: 'head',
+          tag: 'script',
+          children: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+          })(window,document,'script','dataLayer','${process.env.APP_GTM_TAG_ID}');`,
+        },
+        {
+          injectTo: 'body-prepend',
+          tag: 'noscript',
+          children: `<iframe src="https://www.googletagmanager.com/ns.html?id=${process.env.APP_GTM_TAG_ID}"
+          height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+        },
+      );
+    }
+
+    return tags;
+  };
   const fileCopyTargets: Target[] = [
     {
       src: localFile,
@@ -61,20 +96,9 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
       VitePWA(),
       createHtmlPlugin({
         minify: true,
-        inject: process.env.APP_GOOGLE_SITE_VERIFICATION_ID
-          ? {
-              tags: [
-                {
-                  tag: 'meta',
-                  injectTo: 'head',
-                  attrs: {
-                    content: process.env.APP_GOOGLE_SITE_VERIFICATION_ID,
-                    name: 'google-site-verification',
-                  },
-                },
-              ],
-            }
-          : {},
+        inject: {
+          tags: getGoogleScripts(),
+        },
       }),
       viteStaticCopy({
         targets: fileCopyTargets,

From 8c0cb9ad3c0000a78182e1cf75b7de9be5632b0b Mon Sep 17 00:00:00 2001
From: Roy Schut <royschut@gmail.com>
Date: Wed, 24 Jan 2024 12:17:27 -0300
Subject: [PATCH 002/128] refactor(project): make route definitions static and
 improve url utils

---
 packages/common/src/paths.tsx                 | 28 ++++++++
 .../common/src/utils/urlFormatting.test.ts    | 50 ++++++++++++-
 packages/common/src/utils/urlFormatting.ts    | 70 +++++++++++++++++--
 .../src/components/UserMenu/UserMenu.tsx      | 26 +++++--
 .../ui-react/src/containers/Layout/Layout.tsx | 10 +--
 .../src/containers/Profiles/CreateProfile.tsx |  3 +-
 .../src/containers/Profiles/DeleteProfile.tsx |  3 +-
 .../src/containers/Profiles/EditProfile.tsx   |  5 +-
 .../ui-react/src/containers/Profiles/Form.tsx |  3 +-
 .../src/containers/Profiles/Profiles.tsx      | 19 +++--
 packages/ui-react/src/pages/User/User.tsx     | 41 ++++++++---
 .../src/containers/AppRoutes/AppRoutes.tsx    | 41 +++++++----
 12 files changed, 251 insertions(+), 48 deletions(-)
 create mode 100644 packages/common/src/paths.tsx

diff --git a/packages/common/src/paths.tsx b/packages/common/src/paths.tsx
new file mode 100644
index 000000000..2c90a7fb4
--- /dev/null
+++ b/packages/common/src/paths.tsx
@@ -0,0 +1,28 @@
+export const PATH_HOME = '/';
+
+export const PATH_MEDIA = '/m/:id/*';
+export const PATH_PLAYLIST = '/p/:id/*';
+export const PATH_LEGACY_SERIES = '/s/:id/*';
+
+export const PATH_SEARCH = '/q/*';
+export const PATH_ABOUT = '/o/about';
+
+export const PATH_USER = '/u/*';
+export const PATH_USER_ACCOUNT = '/u/my-account';
+export const PATH_USER_MY_PROFILE = '/u/my-profile/:id';
+export const PATH_USER_FAVORITES = '/u/favorites';
+export const PATH_USER_PAYMENTS = '/u/payments';
+export const PATH_USER_PROFILES = '/u/profiles';
+export const PATH_USER_PROFILES_CREATE = '/u/profiles/create';
+export const PATH_USER_PROFILES_EDIT = '/u/profiles/edit';
+export const PATH_USER_PROFILES_EDIT_PROFILE = '/u/profiles/edit/:id';
+
+// Get a nested path without the parent prefix (for nested routes)
+// I.E.: getNestedPath('/u/*', '/u/my-account') => 'my-account'
+const getNestedPath = (parentPath: string, fullPath: string) => fullPath.replace(parentPath.replace('*', ''), '');
+
+export const NESTED_PATH_USER_ACCOUNT = getNestedPath(PATH_USER, PATH_USER_ACCOUNT);
+export const NESTED_PATH_USER_MY_PROFILE = getNestedPath(PATH_USER, PATH_USER_MY_PROFILE);
+export const NESTED_PATH_USER_FAVORITES = getNestedPath(PATH_USER, PATH_USER_FAVORITES);
+export const NESTED_PATH_USER_PAYMENTS = getNestedPath(PATH_USER, PATH_USER_PAYMENTS);
+export const NESTED_PATH_USER_PROFILES = getNestedPath(PATH_USER, PATH_USER_PROFILES);
diff --git a/packages/common/src/utils/urlFormatting.test.ts b/packages/common/src/utils/urlFormatting.test.ts
index 2af8d84cf..ab41efd2d 100644
--- a/packages/common/src/utils/urlFormatting.test.ts
+++ b/packages/common/src/utils/urlFormatting.test.ts
@@ -1,7 +1,14 @@
-import { createURL } from './urlFormatting';
+import playlistFixture from '@jwp/ott-testing/fixtures/playlist.json';
+import epgChannelsFixture from '@jwp/ott-testing/fixtures/epgChannels.json';
+
+import type { Playlist, PlaylistItem } from '../../types/playlist';
+import type { EpgChannel } from '../../types/epg';
+import { NESTED_PATH_USER_ACCOUNT } from '../paths';
+
+import { createURL, liveChannelsURL, mediaURL, playlistURL, userProfileURL } from './urlFormatting';
 
 describe('createUrl', () => {
-  test('valid url from a path, query params', async () => {
+  test('valid url from a path, query params', () => {
     const url = createURL('/test', { foo: 'bar' });
 
     expect(url).toEqual('/test?foo=bar');
@@ -23,3 +30,42 @@ describe('createUrl', () => {
     expect(url).toEqual('https://app-preview.jwplayer.com/?existing-param=1&foo=bar&u=payment-method-success');
   });
 });
+
+describe('createPath, mediaURL, playlistURL and liveChannelsURL', () => {
+  test('valid media path', () => {
+    const playlist = playlistFixture as Playlist;
+    const media = playlist.playlist[0] as PlaylistItem;
+    const url = mediaURL({ media, playlistId: playlist.feedid, play: true });
+
+    expect(url).toEqual('/m/uB8aRnu6/agent-327?r=dGSUzs9o&play=1');
+  });
+  test('valid playlist path', () => {
+    const playlist = playlistFixture as Playlist;
+    const url = playlistURL(playlist.feedid || '', playlist.title);
+
+    expect(url).toEqual('/p/dGSUzs9o/all-films');
+  });
+  test('valid live channel path', () => {
+    const playlist = playlistFixture as Playlist;
+    const channels: EpgChannel[] = epgChannelsFixture;
+    const channel = channels[0];
+    const url = liveChannelsURL(playlist.feedid || '', channel.id, true);
+
+    expect(url).toEqual('/p/dGSUzs9o/?channel=channel1&play=1');
+  });
+  test('valid live channel path', () => {
+    const url = userProfileURL('testprofile123');
+
+    expect(url).toEqual('/u/my-profile/testprofile123');
+  });
+  test('valid nested user path', () => {
+    const url = NESTED_PATH_USER_ACCOUNT;
+
+    expect(url).toEqual('my-account');
+  });
+  test('valid nested user profile path', () => {
+    const url = userProfileURL('testprofile123', true);
+
+    expect(url).toEqual('my-profile/testprofile123');
+  });
+});
diff --git a/packages/common/src/utils/urlFormatting.ts b/packages/common/src/utils/urlFormatting.ts
index f14651ee4..e0e4020ef 100644
--- a/packages/common/src/utils/urlFormatting.ts
+++ b/packages/common/src/utils/urlFormatting.ts
@@ -1,4 +1,5 @@
 import type { PlaylistItem } from '../../types/playlist';
+import { NESTED_PATH_USER_MY_PROFILE, PATH_MEDIA, PATH_PLAYLIST, PATH_USER_MY_PROFILE } from '../paths';
 
 import { getLegacySeriesPlaylistIdFromEpisodeTags, getSeriesPlaylistIdFromCustomParams } from './media';
 
@@ -25,6 +26,50 @@ export const createURL = (url: string, queryParams: QueryParamsArg) => {
   return `${baseUrl}${queryString ? `?${queryString}` : ''}`;
 };
 
+type ExtractRouteParams<T extends string> = T extends `${infer _Start}:${infer Param}/${infer Rest}`
+  ? { [K in Param | keyof ExtractRouteParams<Rest>]: string }
+  : T extends `${infer _Start}:${infer Param}`
+  ? { [K in Param]: string }
+  : object;
+
+type PathParams<T extends string> = T extends `${infer _Start}*` ? ExtractRouteParams<T> & Record<string, string | undefined> : ExtractRouteParams<T>;
+
+// Creates a route path from a path string and params object
+export const createPath = <Path extends string>(originalPath: Path, pathParams?: PathParams<Path>, queryParams?: QueryParamsArg): string => {
+  const path = originalPath
+    .split('/')
+    .map((segment) => {
+      if (segment === '*') {
+        // Wild card for optional segments: add all params that are not already in the path
+        if (!pathParams) return segment;
+
+        return Object.entries(pathParams)
+          .filter(([key]) => !originalPath.includes(key))
+          .map(([_, value]) => value)
+          .join('/');
+      }
+      if (!segment.startsWith(':') || !pathParams) return segment;
+
+      // Check if param is optional, and show a warning if it's not optional and missing
+      // Then remove all special characters to get the actual param name
+      const isOptional = segment.endsWith('?');
+      const paramName = segment.replace(':', '').replace('?', '');
+      const paramValue = pathParams[paramName as keyof typeof pathParams];
+
+      if (!paramValue) {
+        if (!isOptional) console.warn('Missing param in path creation.', { path: originalPath, paramName });
+
+        return '';
+      }
+
+      return paramValue;
+    })
+    .join('/');
+
+  // Optionally add the query params
+  return queryParams ? createURL(path, queryParams) : path;
+};
+
 export const slugify = (text: string, whitespaceChar: string = '-') =>
   text
     .toString()
@@ -47,16 +92,31 @@ export const mediaURL = ({
   play?: boolean;
   episodeId?: string;
 }) => {
-  return createURL(`/m/${media.mediaid}/${slugify(media.title)}`, { r: playlistId, play: play ? '1' : null, e: episodeId });
+  return createPath(PATH_MEDIA, { id: media.mediaid, title: slugify(media.title) }, { r: playlistId, play: play ? '1' : null, e: episodeId });
+};
+
+export const playlistURL = (id: string, title?: string) => {
+  return createPath(PATH_PLAYLIST, { id, title: title ? slugify(title) : undefined });
 };
 
 export const liveChannelsURL = (playlistId: string, channelId?: string, play = false) => {
-  return createURL(`/p/${playlistId}`, {
-    channel: channelId,
-    play: play ? '1' : null,
-  });
+  return createPath(
+    PATH_PLAYLIST,
+    { id: playlistId },
+    {
+      channel: channelId,
+      play: play ? '1' : null,
+    },
+  );
+};
+
+export const userProfileURL = (profileId: string, nested = false) => {
+  const path = nested ? NESTED_PATH_USER_MY_PROFILE : PATH_USER_MY_PROFILE;
+
+  return createPath(path, { id: profileId });
 };
 
+// Legacy URLs
 export const legacySeriesURL = ({
   seriesId,
   episodeId,
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.tsx b/packages/ui-react/src/components/UserMenu/UserMenu.tsx
index ccb6027ba..b4fcfa582 100644
--- a/packages/ui-react/src/components/UserMenu/UserMenu.tsx
+++ b/packages/ui-react/src/components/UserMenu/UserMenu.tsx
@@ -9,6 +9,8 @@ import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react'
 import Favorite from '@jwp/ott-theme/assets/icons/favorite.svg?react';
 import BalanceWallet from '@jwp/ott-theme/assets/icons/balance_wallet.svg?react';
 import Exit from '@jwp/ott-theme/assets/icons/exit.svg?react';
+import { PATH_USER_ACCOUNT, PATH_USER_FAVORITES, PATH_USER_PAYMENTS, PATH_USER_PROFILES_CREATE } from '@jwp/ott-common/src/paths';
+import { userProfileURL } from '@jwp/ott-common/src/utils/urlFormatting';
 
 import MenuButton from '../MenuButton/MenuButton';
 import Icon from '../Icon/Icon';
@@ -71,7 +73,7 @@ const UserMenu = ({
           selectProfile={selectProfile}
           createButtonLabel={t('nav.add_profile')}
           switchProfilesLabel={t('nav.switch_profiles')}
-          onCreateButtonClick={() => navigate('/u/profiles/create')}
+          onCreateButtonClick={() => navigate(PATH_USER_PROFILES_CREATE)}
         />
       )}
       <li className={styles.sectionHeader}>{t('nav.settings')}</li>
@@ -80,7 +82,7 @@ const UserMenu = ({
           <MenuButton
             small={small}
             onClick={onClick}
-            to={`/u/my-profile/${currentProfile?.id ?? ''}`}
+            to={userProfileURL(currentProfile.id ?? '')}
             label={t('nav.profile')}
             tabIndex={tabIndex}
             startIcon={<ProfileCircle src={currentProfile?.avatar_url} alt={currentProfile?.name ?? ''} />}
@@ -88,12 +90,26 @@ const UserMenu = ({
         </li>
       )}
       <li>
-        <MenuButton small={small} onClick={onClick} to="/u/my-account" label={t('nav.account')} startIcon={<Icon icon={AccountCircle} />} tabIndex={tabIndex} />
+        <MenuButton
+          small={small}
+          onClick={onClick}
+          to={PATH_USER_ACCOUNT}
+          label={t('nav.account')}
+          startIcon={<Icon icon={AccountCircle} />}
+          tabIndex={tabIndex}
+        />
       </li>
 
       {favoritesEnabled && (
         <li>
-          <MenuButton small={small} onClick={onClick} to="/u/favorites" label={t('nav.favorites')} startIcon={<Icon icon={Favorite} />} tabIndex={tabIndex} />
+          <MenuButton
+            small={small}
+            onClick={onClick}
+            to={PATH_USER_FAVORITES}
+            label={t('nav.favorites')}
+            startIcon={<Icon icon={Favorite} />}
+            tabIndex={tabIndex}
+          />
         </li>
       )}
       {showPaymentsItem && (
@@ -101,7 +117,7 @@ const UserMenu = ({
           <MenuButton
             small={small}
             onClick={onClick}
-            to="/u/payments"
+            to={PATH_USER_PAYMENTS}
             label={t('nav.payments')}
             startIcon={<Icon icon={BalanceWallet} />}
             tabIndex={tabIndex}
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index 5504e0bf7..eaceefc42 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -15,6 +15,8 @@ import { IS_DEVELOPMENT_BUILD } from '@jwp/ott-common/src/utils/common';
 import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
 import useSearchQueryUpdater from '@jwp/ott-ui-react/src/hooks/useSearchQueryUpdater';
 import { useProfiles, useSelectProfile } from '@jwp/ott-hooks-react/src/useProfiles';
+import { PATH_HOME, PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
+import { playlistURL } from '@jwp/ott-common/src/utils/urlFormatting';
 
 import MarkdownComponent from '../../components/MarkdownComponent/MarkdownComponent';
 import Header from '../../components/Header/Header';
@@ -51,8 +53,8 @@ const Layout = () => {
   } = useProfiles();
 
   const selectProfile = useSelectProfile({
-    onSuccess: () => navigate('/'),
-    onError: () => navigate('/u/profiles'),
+    onSuccess: () => navigate(PATH_HOME),
+    onError: () => navigate(PATH_USER_PROFILES),
   });
 
   const { searchQuery, searchActive, userMenuOpen, languageMenuOpen } = useUIStore(
@@ -186,13 +188,13 @@ const Layout = () => {
         >
           <Button label={t('home')} to="/" variant="text" />
           {menu.map((item) => (
-            <Button key={item.contentId} label={item.label} to={`/p/${item.contentId}`} variant="text" />
+            <Button key={item.contentId} label={item.label} to={playlistURL(item.contentId)} variant="text" />
           ))}
         </Header>
         <Sidebar isOpen={sideBarOpen} onClose={() => setSideBarOpen(false)}>
           <MenuButton label={t('home')} to="/" tabIndex={sideBarOpen ? 0 : -1} />
           {menu.map((item) => (
-            <MenuButton key={item.contentId} label={item.label} to={`/p/${item.contentId}`} tabIndex={sideBarOpen ? 0 : -1} />
+            <MenuButton key={item.contentId} label={item.label} to={playlistURL(item.contentId)} tabIndex={sideBarOpen ? 0 : -1} />
           ))}
           <hr className={styles.divider} />
           {renderUserActions(sideBarOpen)}
diff --git a/packages/ui-react/src/containers/Profiles/CreateProfile.tsx b/packages/ui-react/src/containers/Profiles/CreateProfile.tsx
index 104ae133f..ffd41f9cb 100644
--- a/packages/ui-react/src/containers/Profiles/CreateProfile.tsx
+++ b/packages/ui-react/src/containers/Profiles/CreateProfile.tsx
@@ -5,6 +5,7 @@ import type { UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
 import { useCreateProfile, useProfileErrorHandler, useProfiles } from '@jwp/ott-hooks-react/src/useProfiles';
 import type { ProfileFormValues } from '@jwp/ott-common/types/profiles';
 import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import { PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
 
 import styles from '../../pages/User/User.module.scss';
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
@@ -39,7 +40,7 @@ const CreateProfile = () => {
     onSuccess: (res) => {
       const id = res?.responseData?.id;
 
-      !!id && navigate(createURL(`/u/profiles`, { success: 'true', id }));
+      !!id && navigate(createURL(PATH_USER_PROFILES, { success: 'true', id }));
     },
   });
 
diff --git a/packages/ui-react/src/containers/Profiles/DeleteProfile.tsx b/packages/ui-react/src/containers/Profiles/DeleteProfile.tsx
index 052e7690f..87e2f1a59 100644
--- a/packages/ui-react/src/containers/Profiles/DeleteProfile.tsx
+++ b/packages/ui-react/src/containers/Profiles/DeleteProfile.tsx
@@ -3,6 +3,7 @@ import { Navigate, useLocation, useNavigate, useParams } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
 import { useDeleteProfile } from '@jwp/ott-hooks-react/src/useProfiles';
+import { PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
 
 import Button from '../../components/Button/Button';
 import Dialog from '../../components/Dialog/Dialog';
@@ -28,7 +29,7 @@ const DeleteProfile = () => {
 
   const deleteProfile = useDeleteProfile({
     onMutate: closeHandler,
-    onSuccess: () => navigate('/u/profiles'),
+    onSuccess: () => navigate(PATH_USER_PROFILES),
     onError: () => setIsDeleting(false),
   });
 
diff --git a/packages/ui-react/src/containers/Profiles/EditProfile.tsx b/packages/ui-react/src/containers/Profiles/EditProfile.tsx
index a429f9d22..44eb91855 100644
--- a/packages/ui-react/src/containers/Profiles/EditProfile.tsx
+++ b/packages/ui-react/src/containers/Profiles/EditProfile.tsx
@@ -9,6 +9,7 @@ import type { UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
 import { useProfileErrorHandler, useUpdateProfile } from '@jwp/ott-hooks-react/src/useProfiles';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
 import type { ProfileFormValues } from '@jwp/ott-common/types/profiles';
+import { PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
 
 import styles from '../../pages/User/User.module.scss';
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
@@ -58,10 +59,10 @@ const EditProfile = ({ contained = false }: EditProfileProps) => {
   }, [profileDetails?.avatar_url]);
 
   if (!id || (!isFetching && !isLoading && !profileDetails)) {
-    navigate('/u/profiles');
+    navigate(PATH_USER_PROFILES);
   }
 
-  const updateProfile = useUpdateProfile({ onSuccess: () => navigate('/u/profiles') });
+  const updateProfile = useUpdateProfile({ onSuccess: () => navigate(PATH_USER_PROFILES) });
 
   const handleErrors = useProfileErrorHandler();
 
diff --git a/packages/ui-react/src/containers/Profiles/Form.tsx b/packages/ui-react/src/containers/Profiles/Form.tsx
index c5da495d5..5c52f7d1c 100644
--- a/packages/ui-react/src/containers/Profiles/Form.tsx
+++ b/packages/ui-react/src/containers/Profiles/Form.tsx
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
 import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
 import type { ProfileFormValues } from '@jwp/ott-common/types/profiles';
+import { PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
 
 import styles from '../../pages/User/User.module.scss';
 import Button from '../../components/Button/Button';
@@ -109,7 +110,7 @@ const Form = ({ initialValues, formHandler, selectedAvatar, showCancelButton = t
         </div>
         <>
           <Button type="submit" label={t('account.save')} variant="outlined" disabled={!isDirty || submitting} fullWidth={isMobile} />
-          {showCancelButton && <Button onClick={() => navigate('/u/profiles')} label={t('account.cancel')} variant="text" fullWidth={isMobile} />}
+          {showCancelButton && <Button onClick={() => navigate(PATH_USER_PROFILES)} label={t('account.cancel')} variant="text" fullWidth={isMobile} />}
         </>
       </div>
     </form>
diff --git a/packages/ui-react/src/containers/Profiles/Profiles.tsx b/packages/ui-react/src/containers/Profiles/Profiles.tsx
index 60de11665..2ef77d7c6 100644
--- a/packages/ui-react/src/containers/Profiles/Profiles.tsx
+++ b/packages/ui-react/src/containers/Profiles/Profiles.tsx
@@ -7,6 +7,7 @@ import type { Profile } from '@jwp/ott-common/types/account';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { useProfiles, useSelectProfile } from '@jwp/ott-hooks-react/src/useProfiles';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
+import { PATH_USER_PROFILES, PATH_USER_PROFILES_CREATE, PATH_USER_PROFILES_EDIT } from '@jwp/ott-common/src/paths';
 
 import ProfileBox from '../../components/ProfileBox/ProfileBox';
 import AddNewProfile from '../../components/ProfileBox/AddNewProfile';
@@ -50,7 +51,7 @@ const Profiles = ({ editMode = false }: Props) => {
 
   const selectProfile = useSelectProfile({
     onSuccess: () => navigate('/'),
-    onError: () => navigate('/u/profiles'),
+    onError: () => navigate(PATH_USER_PROFILES),
   });
 
   const createdProfileData = data?.responseData.collection.find((profile: Profile) => profile.id === createdProfileId);
@@ -80,14 +81,20 @@ const Profiles = ({ editMode = false }: Props) => {
               image={profile.avatar_url}
             />
           ))}
-          {canAddNew && <AddNewProfile onClick={() => navigate('/u/profiles/create')} />}
+          {canAddNew && <AddNewProfile onClick={() => navigate(PATH_USER_PROFILES_CREATE)} />}
         </div>
         {activeProfiles > 0 && (
           <div className={styles.buttonContainer}>
             {!editMode ? (
-              <Button onClick={() => navigate('/u/profiles/edit')} label={t('account.manage_profiles')} variant="outlined" size="large" fullWidth={isMobile} />
+              <Button
+                onClick={() => navigate(PATH_USER_PROFILES_EDIT)}
+                label={t('account.manage_profiles')}
+                variant="outlined"
+                size="large"
+                fullWidth={isMobile}
+              />
             ) : (
-              <Button onClick={() => navigate('/u/profiles')} label={t('profile.done')} variant="outlined" size="large" fullWidth={isMobile} />
+              <Button onClick={() => navigate(PATH_USER_PROFILES)} label={t('profile.done')} variant="outlined" size="large" fullWidth={isMobile} />
             )}
           </div>
         )}
@@ -97,13 +104,13 @@ const Profiles = ({ editMode = false }: Props) => {
         open={creationSuccess}
         titleOverride={t('profile.created_title')}
         message={t('profile.created_message')}
-        onClose={() => navigate('/u/profiles')}
+        onClose={() => navigate(PATH_USER_PROFILES)}
         actionsOverride={
           <div className={styles.modalActions}>
             <Button to="/u/profiles" label={t('profile.back_to_profiles')} variant="text" fullWidth={isMobile} />
             <Button
               onClick={() => {
-                navigate('/u/profiles');
+                navigate(PATH_USER_PROFILES);
                 createdProfileId && selectProfile.mutate({ id: createdProfileId, avatarUrl: createdProfileData?.avatar_url ?? '' });
               }}
               label={t('profile.watch_now')}
diff --git a/packages/ui-react/src/pages/User/User.tsx b/packages/ui-react/src/pages/User/User.tsx
index d5eab1969..84f6e90ed 100644
--- a/packages/ui-react/src/pages/User/User.tsx
+++ b/packages/ui-react/src/pages/User/User.tsx
@@ -16,6 +16,8 @@ import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react'
 import BalanceWallet from '@jwp/ott-theme/assets/icons/balance_wallet.svg?react';
 import Exit from '@jwp/ott-theme/assets/icons/exit.svg?react';
 import Favorite from '@jwp/ott-theme/assets/icons/favorite.svg?react';
+import { NESTED_PATH_USER_ACCOUNT, NESTED_PATH_USER_FAVORITES, NESTED_PATH_USER_MY_PROFILE, NESTED_PATH_USER_PAYMENTS } from '@jwp/ott-common/src/paths';
+import { userProfileURL } from '@jwp/ott-common/src/utils/urlFormatting';
 
 import AccountComponent from '../../components/Account/Account';
 import Button from '../../components/Button/Button';
@@ -90,7 +92,7 @@ const User = (): JSX.Element => {
               {accessModel === 'SVOD' && profilesEnabled && profileAndFavoritesPage && (
                 <li>
                   <Button
-                    to={`my-profile/${profile?.id}`}
+                    to={profile ? userProfileURL(profile.id, true) : undefined}
                     label={profile?.name ?? t('nav.profile')}
                     variant="text"
                     startIcon={<img className={styles.profileIcon} src={profile?.avatar_url} alt={profile?.name} />}
@@ -100,18 +102,36 @@ const User = (): JSX.Element => {
               )}
               {(!profilesEnabled || !profileAndFavoritesPage) && (
                 <li>
-                  <Button to="my-account" label={t('nav.account')} variant="text" startIcon={<Icon icon={AccountCircle} />} className={styles.button} />
+                  <Button
+                    to={NESTED_PATH_USER_ACCOUNT}
+                    label={t('nav.account')}
+                    variant="text"
+                    startIcon={<Icon icon={AccountCircle} />}
+                    className={styles.button}
+                  />
                 </li>
               )}
               {favoritesList && (!profilesEnabled || profileAndFavoritesPage) && (
                 <li>
-                  <Button to="favorites" label={t('nav.favorites')} variant="text" startIcon={<Icon icon={Favorite} />} className={styles.button} />
+                  <Button
+                    to={NESTED_PATH_USER_FAVORITES}
+                    label={t('nav.favorites')}
+                    variant="text"
+                    startIcon={<Icon icon={Favorite} />}
+                    className={styles.button}
+                  />
                 </li>
               )}
 
               {accessModel !== ACCESS_MODEL.AVOD && (!profilesEnabled || !profileAndFavoritesPage) && (
                 <li>
-                  <Button to="payments" label={t('nav.payments')} variant="text" startIcon={<Icon icon={BalanceWallet} />} className={styles.button} />
+                  <Button
+                    to={NESTED_PATH_USER_PAYMENTS}
+                    label={t('nav.payments')}
+                    variant="text"
+                    startIcon={<Icon icon={BalanceWallet} />}
+                    className={styles.button}
+                  />
                 </li>
               )}
 
@@ -127,13 +147,13 @@ const User = (): JSX.Element => {
       <div className={styles.mainColumn}>
         <Routes>
           <Route
-            path="my-account"
+            path={NESTED_PATH_USER_ACCOUNT}
             element={<AccountComponent panelClassName={styles.panel} panelHeaderClassName={styles.panelHeader} canUpdateEmail={canUpdateEmail} />}
           />
-          {profilesEnabled && <Route path="my-profile/:id" element={<EditProfile contained />} />}
+          {profilesEnabled && <Route path={NESTED_PATH_USER_MY_PROFILE} element={<EditProfile contained />} />}
           {favoritesList && (
             <Route
-              path="favorites"
+              path={NESTED_PATH_USER_FAVORITES}
               element={
                 <>
                   <PlaylistContainer type={PersonalShelf.Favorites} showEmpty>
@@ -162,8 +182,11 @@ const User = (): JSX.Element => {
               }
             />
           )}
-          <Route path="payments" element={accessModel !== ACCESS_MODEL.AVOD ? <PaymentContainer /> : <Navigate to="my-account" />} />
-          <Route path="*" element={<Navigate to="my-account" />} />
+          <Route
+            path={NESTED_PATH_USER_PAYMENTS}
+            element={accessModel !== ACCESS_MODEL.AVOD ? <PaymentContainer /> : <Navigate to={NESTED_PATH_USER_ACCOUNT} />}
+          />
+          <Route path="*" element={<Navigate to={NESTED_PATH_USER_ACCOUNT} />} />
         </Routes>
       </div>
     </div>
diff --git a/platforms/web/src/containers/AppRoutes/AppRoutes.tsx b/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
index 0898a8b26..f1c4e106e 100644
--- a/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
+++ b/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
@@ -21,6 +21,18 @@ import Layout from '@jwp/ott-ui-react/src/containers/Layout/Layout';
 import Profiles from '@jwp/ott-ui-react/src/containers/Profiles/Profiles';
 import CreateProfile from '@jwp/ott-ui-react/src/containers/Profiles/CreateProfile';
 import EditProfile from '@jwp/ott-ui-react/src/containers/Profiles/EditProfile';
+import {
+  PATH_ABOUT,
+  PATH_LEGACY_SERIES,
+  PATH_MEDIA,
+  PATH_PLAYLIST,
+  PATH_USER_PROFILES,
+  PATH_USER_PROFILES_CREATE,
+  PATH_USER_PROFILES_EDIT,
+  PATH_USER_PROFILES_EDIT_PROFILE,
+  PATH_SEARCH,
+  PATH_USER,
+} from '@jwp/ott-common/src/paths';
 
 import useNotifications from '#src/hooks/useNotifications';
 
@@ -49,26 +61,31 @@ export default function AppRoutes() {
   }
 
   const shouldManageProfiles =
-    !!user && profilesEnabled && !profile && (accessModel === 'SVOD' || accessModel === 'AUTHVOD') && !userModal && !location.pathname.includes('/u/profiles');
+    !!user &&
+    profilesEnabled &&
+    !profile &&
+    (accessModel === 'SVOD' || accessModel === 'AUTHVOD') &&
+    !userModal &&
+    !location.pathname.includes(PATH_USER_PROFILES);
 
   if (shouldManageProfiles) {
-    return <Navigate to="/u/profiles" />;
+    return <Navigate to={PATH_USER_PROFILES} />;
   }
 
   return (
     <Routes>
-      <Route path="/u/profiles" element={<Profiles />} />
-      <Route path="/u/profiles/create" element={<CreateProfile />} />
-      <Route path="/u/profiles/edit" element={<Profiles editMode />} />
-      <Route path="/u/profiles/edit/:id" element={<EditProfile />} />
+      <Route path={PATH_USER_PROFILES} element={<Profiles />} />
+      <Route path={PATH_USER_PROFILES_CREATE} element={<CreateProfile />} />
+      <Route path={PATH_USER_PROFILES_EDIT} element={<Profiles editMode />} />
+      <Route path={PATH_USER_PROFILES_EDIT_PROFILE} element={<EditProfile />} />
       <Route element={<Layout />} errorElement={<RootErrorPage />}>
         <Route index element={<Home />} />
-        <Route path="/p/:id" element={<PlaylistScreenRouter />} />
-        <Route path="/m/:id/*" element={<MediaScreenRouter />} />
-        <Route path="/s/:id/*" element={<LegacySeries />} />
-        <Route path="/q/*" element={<Search />} />
-        <Route path="/u/*" element={<User />} />
-        <Route path="/o/about" element={<About />} />
+        <Route path={PATH_PLAYLIST} element={<PlaylistScreenRouter />} />
+        <Route path={PATH_MEDIA} element={<MediaScreenRouter />} />
+        <Route path={PATH_LEGACY_SERIES} element={<LegacySeries />} />
+        <Route path={PATH_SEARCH} element={<Search />} />
+        <Route path={PATH_USER} element={<User />} />
+        <Route path={PATH_ABOUT} element={<About />} />
         <Route
           path="/*"
           element={<ErrorPage title={t('notfound_error_heading', 'Not found')} message={t('notfound_error_description', "This page doesn't exist.")} />}

From 16120021229b8c9143849678940b8bb22a2c9602 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 24 Jan 2024 16:18:21 +0100
Subject: [PATCH 003/128] refactor: refactor typings

---
 packages/common/package.json                  |  2 +-
 .../cleeng/CleengAccountService.ts            | 19 ++++++++++++---
 .../integrations/cleeng/CleengService.ts      |  1 +
 .../integrations/jwp/JWPAccountService.ts     |  1 +
 .../integrations/jwp/JWPCheckoutService.ts    |  1 +
 .../jwp/JWPSubscriptionService.ts             |  7 +++++-
 .../common/src/stores/AccountController.ts    |  1 +
 .../common/types/{account.d.ts => account.ts} |  1 +
 .../{ad-schedule.d.ts => ad-schedule.ts}      |  0
 .../common/types/{adyen.d.ts => adyen.ts}     | 12 ----------
 .../types/{checkout.d.ts => checkout.ts}      |  1 +
 packages/common/types/cleeng.d.ts             |  6 -----
 packages/common/types/cleeng.ts               |  6 +++++
 .../common/types/{config.d.ts => config.ts}   |  0
 .../{entitlement.d.ts => entitlement.ts}      |  0
 .../types/{favorite.d.ts => favorite.ts}      |  0
 ...et-customer-ip.d.ts => get-customer-ip.ts} |  0
 packages/common/types/{i18n.d.ts => i18n.ts}  |  0
 .../types/{inplayer.d.ts => inplayer.ts}      |  4 +++-
 packages/common/types/jwpltx.d.ts             |  2 +-
 .../common/types/{media.d.ts => media.ts}     |  9 ++++++-
 .../types/{pagination.d.ts => pagination.ts}  |  0
 .../types/{playlist.d.ts => playlist.ts}      |  2 ++
 .../types/{profiles.d.ts => profiles.ts}      |  0
 .../common/types/{series.d.ts => series.ts}   |  0
 packages/common/types/service.d.ts            |  9 -------
 packages/common/types/service.ts              |  9 +++++++
 .../types/{settings.d.ts => settings.ts}      |  0
 .../{subscription.d.ts => subscription.ts}    | 24 +++++++++++--------
 .../common/types/{testing.d.ts => testing.ts} |  0
 .../{watchHistory.d.ts => watchHistory.ts}    |  0
 packages/hooks-react/package.json             |  1 +
 packages/hooks-react/src/useOttAnalytics.ts   | 19 ++++++++-------
 packages/hooks-react/src/useProfiles.ts       |  1 +
 packages/hooks-react/src/useWatchHistory.ts   |  3 +--
 .../src/useWatchHistoryListener.ts            |  3 +--
 packages/hooks-react/tsconfig.json            |  1 +
 packages/ui-react/package.json                |  1 +
 .../ui-react/src/components/Player/Player.tsx |  2 +-
 .../PlayerContainer/PlayerContainer.tsx       |  2 +-
 .../{common => ui-react}/types/global.d.ts    |  2 --
 .../{common => ui-react}/types/jwplayer.d.ts  |  2 +-
 platforms/web/test-e2e/utils/steps_file.ts    |  4 ++--
 platforms/web/tsconfig.json                   |  3 ++-
 platforms/web/types/global.d.ts               |  1 -
 45 files changed, 96 insertions(+), 66 deletions(-)
 rename packages/common/types/{account.d.ts => account.ts} (98%)
 rename packages/common/types/{ad-schedule.d.ts => ad-schedule.ts} (100%)
 rename packages/common/types/{adyen.d.ts => adyen.ts} (77%)
 rename packages/common/types/{checkout.d.ts => checkout.ts} (98%)
 delete mode 100644 packages/common/types/cleeng.d.ts
 create mode 100644 packages/common/types/cleeng.ts
 rename packages/common/types/{config.d.ts => config.ts} (100%)
 rename packages/common/types/{entitlement.d.ts => entitlement.ts} (100%)
 rename packages/common/types/{favorite.d.ts => favorite.ts} (100%)
 rename packages/common/types/{get-customer-ip.d.ts => get-customer-ip.ts} (100%)
 rename packages/common/types/{i18n.d.ts => i18n.ts} (100%)
 rename packages/common/types/{inplayer.d.ts => inplayer.ts} (83%)
 rename packages/common/types/{media.d.ts => media.ts} (52%)
 rename packages/common/types/{pagination.d.ts => pagination.ts} (100%)
 rename packages/common/types/{playlist.d.ts => playlist.ts} (96%)
 rename packages/common/types/{profiles.d.ts => profiles.ts} (100%)
 rename packages/common/types/{series.d.ts => series.ts} (100%)
 delete mode 100644 packages/common/types/service.d.ts
 create mode 100644 packages/common/types/service.ts
 rename packages/common/types/{settings.d.ts => settings.ts} (100%)
 rename packages/common/types/{subscription.d.ts => subscription.ts} (75%)
 rename packages/common/types/{testing.d.ts => testing.ts} (100%)
 rename packages/common/types/{watchHistory.d.ts => watchHistory.ts} (100%)
 rename packages/{common => ui-react}/types/global.d.ts (70%)
 rename packages/{common => ui-react}/types/jwplayer.d.ts (96%)

diff --git a/packages/common/package.json b/packages/common/package.json
index c267ea47d..2e560458f 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@inplayer-org/inplayer.js": "^3.13.24",
+    "@tanstack/query-core": "^4.36.1",
     "broadcast-channel": "^7.0.0",
     "date-fns": "^2.28.0",
     "fast-xml-parser": "^4.3.2",
@@ -26,7 +27,6 @@
   },
   "devDependencies": {
     "@types/ini": "^1.3.31",
-    "@types/jwplayer": "^8.2.13",
     "@types/lodash.merge": "^4.6.6",
     "jsdom": "^22.1.0",
     "timezone-mock": "^1.3.4",
diff --git a/packages/common/src/services/integrations/cleeng/CleengAccountService.ts b/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
index 1ad66bf10..87544a4e5 100644
--- a/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
+++ b/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
@@ -34,6 +34,7 @@ import AccountService from '../AccountService';
 import { GET_CUSTOMER_IP } from '../../../modules/types';
 import type { GetCustomerIP } from '../../../../types/get-customer-ip';
 import { ACCESS_MODEL } from '../../../constants';
+import type { ServiceResponse } from '../../../../types/service';
 
 import CleengService from './CleengService';
 
@@ -65,7 +66,7 @@ export default class CleengAccountService extends AccountService {
     this.getCustomerIP = getCustomerIP;
   }
 
-  private handleErrors = (errors: ApiResponse['errors']) => {
+  private handleErrors = (errors: string[]) => {
     if (errors.length > 0) {
       throw new Error(errors[0]);
     }
@@ -265,11 +266,23 @@ export default class CleengAccountService extends AccountService {
   };
 
   resetPassword: ResetPassword = async (payload) => {
-    return this.cleengService.put('/customers/passwords', JSON.stringify({ ...payload, publisherId: this.publisherId }));
+    return this.cleengService.put(
+      '/customers/passwords',
+      JSON.stringify({
+        ...payload,
+        publisherId: this.publisherId,
+      }),
+    );
   };
 
   changePasswordWithResetToken: ChangePassword = async (payload) => {
-    return this.cleengService.patch('/customers/passwords', JSON.stringify({ ...payload, publisherId: this.publisherId }));
+    return this.cleengService.patch(
+      '/customers/passwords',
+      JSON.stringify({
+        ...payload,
+        publisherId: this.publisherId,
+      }),
+    );
   };
 
   changePasswordWithOldPassword: ChangePasswordWithOldPassword = async () => {
diff --git a/packages/common/src/services/integrations/cleeng/CleengService.ts b/packages/common/src/services/integrations/cleeng/CleengService.ts
index e855c173e..a218affc3 100644
--- a/packages/common/src/services/integrations/cleeng/CleengService.ts
+++ b/packages/common/src/services/integrations/cleeng/CleengService.ts
@@ -9,6 +9,7 @@ import type { AuthData, GetLocales } from '../../../../types/account';
 import StorageService from '../../StorageService';
 import { GET_CUSTOMER_IP } from '../../../modules/types';
 import type { GetCustomerIP } from '../../../../types/get-customer-ip';
+import type { ServiceResponse } from '../../../../types/service';
 
 const AUTH_PERSIST_KEY = 'auth';
 
diff --git a/packages/common/src/services/integrations/jwp/JWPAccountService.ts b/packages/common/src/services/integrations/jwp/JWPAccountService.ts
index 627fc368c..b1b9c68c0 100644
--- a/packages/common/src/services/integrations/jwp/JWPAccountService.ts
+++ b/packages/common/src/services/integrations/jwp/JWPAccountService.ts
@@ -39,6 +39,7 @@ import type { WatchHistoryItem } from '../../../../types/watchHistory';
 import AccountService from '../AccountService';
 import StorageService from '../../StorageService';
 import { ACCESS_MODEL } from '../../../constants';
+import type { ServiceResponse } from '../../../../types/service';
 
 enum InPlayerEnv {
   Development = 'development',
diff --git a/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts b/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts
index 2f7ab6ef0..453eac280 100644
--- a/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts
+++ b/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts
@@ -20,6 +20,7 @@ import type {
   UpdateOrder,
 } from '../../../../types/checkout';
 import CheckoutService from '../CheckoutService';
+import type { ServiceResponse } from '../../../../types/service';
 
 @injectable()
 export default class JWPCheckoutService extends CheckoutService {
diff --git a/packages/common/src/services/integrations/jwp/JWPSubscriptionService.ts b/packages/common/src/services/integrations/jwp/JWPSubscriptionService.ts
index 566d78a53..6d42b457e 100644
--- a/packages/common/src/services/integrations/jwp/JWPSubscriptionService.ts
+++ b/packages/common/src/services/integrations/jwp/JWPSubscriptionService.ts
@@ -54,12 +54,17 @@ export default class JWPSubscriptionService extends SubscriptionService {
   ): PaymentDetail => {
     const { number, exp_month, exp_year, card_name, card_type, account_id, currency } = card;
     const zeroFillExpMonth = `0${exp_month}`.slice(-2);
+
     return {
+      id: 0,
+      paymentMethodId: 0,
+      paymentGateway: 'card',
+      paymentMethod: 'card',
       customerId: account_id.toString(),
       paymentMethodSpecificParams: {
         holderName: card_name,
         variant: card_type,
-        lastCardFourDigits: number,
+        lastCardFourDigits: String(number),
         cardExpirationDate: `${zeroFillExpMonth}/${exp_year}`,
       },
       active: true,
diff --git a/packages/common/src/stores/AccountController.ts b/packages/common/src/stores/AccountController.ts
index 35448fdc2..68cdf9ea0 100644
--- a/packages/common/src/stores/AccountController.ts
+++ b/packages/common/src/stores/AccountController.ts
@@ -21,6 +21,7 @@ import type {
 } from '../../types/account';
 import { assertFeature, assertModuleMethod, getNamedModule } from '../modules/container';
 import { INTEGRATION_TYPE } from '../modules/types';
+import type { ServiceResponse } from '../../types/service';
 
 import { useWatchHistoryStore } from './WatchHistoryStore';
 import { useFavoritesStore } from './FavoritesStore';
diff --git a/packages/common/types/account.d.ts b/packages/common/types/account.ts
similarity index 98%
rename from packages/common/types/account.d.ts
rename to packages/common/types/account.ts
index 9cfbb98e5..8a53a5780 100644
--- a/packages/common/types/account.d.ts
+++ b/packages/common/types/account.ts
@@ -3,6 +3,7 @@ import type { ProfilesData } from '@inplayer-org/inplayer.js';
 import type { SerializedWatchHistoryItem } from './watchHistory';
 import type { SerializedFavorite } from './favorite';
 import type { Config } from './config';
+import type { EmptyServiceRequest, EnvironmentServiceRequest, PromiseRequest } from './service';
 
 export type AuthData = {
   jwt: string;
diff --git a/packages/common/types/ad-schedule.d.ts b/packages/common/types/ad-schedule.ts
similarity index 100%
rename from packages/common/types/ad-schedule.d.ts
rename to packages/common/types/ad-schedule.ts
diff --git a/packages/common/types/adyen.d.ts b/packages/common/types/adyen.ts
similarity index 77%
rename from packages/common/types/adyen.d.ts
rename to packages/common/types/adyen.ts
index 8e4d344d2..15006e053 100644
--- a/packages/common/types/adyen.d.ts
+++ b/packages/common/types/adyen.ts
@@ -31,14 +31,6 @@ interface AdyenEventData {
   };
 }
 
-interface AdyenConfiguration {
-  onSubmit: (data: AdyenEventData) => void;
-  onChange: (data: AdyenEventData) => void;
-  showPayButton: boolean;
-  environment: 'test' | 'live';
-  clientKey: string;
-}
-
 interface AdyenAdditionalEventData {
   isValid: boolean;
   data: {
@@ -46,10 +38,6 @@ interface AdyenAdditionalEventData {
   };
 }
 
-interface AdyenCheckoutStatic {
-  (configuration: AdyenConfiguration): AdyenCheckout;
-}
-
 // currently only card payments with Adyen are supported
 const adyenPaymentMethods = ['card'] as const;
 
diff --git a/packages/common/types/checkout.d.ts b/packages/common/types/checkout.ts
similarity index 98%
rename from packages/common/types/checkout.d.ts
rename to packages/common/types/checkout.ts
index 6c6f50032..e86602742 100644
--- a/packages/common/types/checkout.d.ts
+++ b/packages/common/types/checkout.ts
@@ -1,5 +1,6 @@
 import type { PayloadWithIPOverride } from './account';
 import type { PaymentDetail } from './subscription';
+import type { EmptyEnvironmentServiceRequest, EnvironmentServiceRequest, PromiseRequest } from './service';
 
 export type Offer = {
   id: number | null;
diff --git a/packages/common/types/cleeng.d.ts b/packages/common/types/cleeng.d.ts
deleted file mode 100644
index 742f7a7ff..000000000
--- a/packages/common/types/cleeng.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-interface ApiResponse {
-  errors: string[];
-}
-
-type CleengResponse<R> = { responseData: R } & ApiResponse;
-type CleengRequest<P, R> = (payload: P) => Promise<CleengResponse<R>>;
diff --git a/packages/common/types/cleeng.ts b/packages/common/types/cleeng.ts
new file mode 100644
index 000000000..d005c92ef
--- /dev/null
+++ b/packages/common/types/cleeng.ts
@@ -0,0 +1,6 @@
+interface ApiResponse {
+  errors: string[];
+}
+
+export type CleengResponse<R> = { responseData: R } & ApiResponse;
+export type CleengRequest<P, R> = (payload: P) => Promise<CleengResponse<R>>;
diff --git a/packages/common/types/config.d.ts b/packages/common/types/config.ts
similarity index 100%
rename from packages/common/types/config.d.ts
rename to packages/common/types/config.ts
diff --git a/packages/common/types/entitlement.d.ts b/packages/common/types/entitlement.ts
similarity index 100%
rename from packages/common/types/entitlement.d.ts
rename to packages/common/types/entitlement.ts
diff --git a/packages/common/types/favorite.d.ts b/packages/common/types/favorite.ts
similarity index 100%
rename from packages/common/types/favorite.d.ts
rename to packages/common/types/favorite.ts
diff --git a/packages/common/types/get-customer-ip.d.ts b/packages/common/types/get-customer-ip.ts
similarity index 100%
rename from packages/common/types/get-customer-ip.d.ts
rename to packages/common/types/get-customer-ip.ts
diff --git a/packages/common/types/i18n.d.ts b/packages/common/types/i18n.ts
similarity index 100%
rename from packages/common/types/i18n.d.ts
rename to packages/common/types/i18n.ts
diff --git a/packages/common/types/inplayer.d.ts b/packages/common/types/inplayer.ts
similarity index 83%
rename from packages/common/types/inplayer.d.ts
rename to packages/common/types/inplayer.ts
index 67d651e56..8e8cbf3ea 100644
--- a/packages/common/types/inplayer.d.ts
+++ b/packages/common/types/inplayer.ts
@@ -1,3 +1,5 @@
+import type { AxiosRequestConfig } from 'axios';
+
 export type InPlayerAuthData = {
   access_token: string;
   expires?: number;
@@ -13,7 +15,7 @@ export type InPlayerError = {
 };
 
 export type InPlayerResponse<T> = {
-  data: Record<T>;
+  data: T;
   status: number;
   statusText: string;
   config: AxiosRequestConfig;
diff --git a/packages/common/types/jwpltx.d.ts b/packages/common/types/jwpltx.d.ts
index 1babd5222..ab23e5ce3 100644
--- a/packages/common/types/jwpltx.d.ts
+++ b/packages/common/types/jwpltx.d.ts
@@ -1,4 +1,4 @@
-interface Jwpltx {
+export interface Jwpltx {
   ready: (
     analyticsid: string,
     hostname: string,
diff --git a/packages/common/types/media.d.ts b/packages/common/types/media.ts
similarity index 52%
rename from packages/common/types/media.d.ts
rename to packages/common/types/media.ts
index 7a2d32c30..b90452274 100644
--- a/packages/common/types/media.d.ts
+++ b/packages/common/types/media.ts
@@ -1,4 +1,11 @@
-export type GetMediaParams = { poster_width?: number; default_source_fallback?: boolean; token?: string; max_resolution?: number };
+import type { PlaylistItem } from './playlist';
+
+export type GetMediaParams = {
+  poster_width?: number;
+  default_source_fallback?: boolean;
+  token?: string;
+  max_resolution?: number;
+};
 
 export type Media = {
   description?: string;
diff --git a/packages/common/types/pagination.d.ts b/packages/common/types/pagination.ts
similarity index 100%
rename from packages/common/types/pagination.d.ts
rename to packages/common/types/pagination.ts
diff --git a/packages/common/types/playlist.d.ts b/packages/common/types/playlist.ts
similarity index 96%
rename from packages/common/types/playlist.d.ts
rename to packages/common/types/playlist.ts
index 23ef6cfbe..f4b0bdba2 100644
--- a/packages/common/types/playlist.d.ts
+++ b/packages/common/types/playlist.ts
@@ -1,3 +1,5 @@
+import type { MediaStatus } from '../src/utils/liveEvent';
+
 import type { MediaOffer } from './media';
 
 export type GetPlaylistParams = { page_limit?: string; related_media_id?: string; token?: string; search?: string };
diff --git a/packages/common/types/profiles.d.ts b/packages/common/types/profiles.ts
similarity index 100%
rename from packages/common/types/profiles.d.ts
rename to packages/common/types/profiles.ts
diff --git a/packages/common/types/series.d.ts b/packages/common/types/series.ts
similarity index 100%
rename from packages/common/types/series.d.ts
rename to packages/common/types/series.ts
diff --git a/packages/common/types/service.d.ts b/packages/common/types/service.d.ts
deleted file mode 100644
index e4de4bf36..000000000
--- a/packages/common/types/service.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-interface ApiResponse {
-  errors: string[];
-}
-
-type ServiceResponse<R> = { responseData: R } & ApiResponse;
-type PromiseRequest<P, R> = (payload: P) => Promise<R>;
-type EmptyServiceRequest<R> = () => Promise<ServiceResponse<R>>;
-type EmptyEnvironmentServiceRequest<R> = () => Promise<ServiceResponse<R>>;
-type EnvironmentServiceRequest<P, R> = (payload: P) => Promise<ServiceResponse<R>>;
diff --git a/packages/common/types/service.ts b/packages/common/types/service.ts
new file mode 100644
index 000000000..91a9bb8ce
--- /dev/null
+++ b/packages/common/types/service.ts
@@ -0,0 +1,9 @@
+interface ApiResponse {
+  errors: string[];
+}
+
+export type ServiceResponse<R> = { responseData: R } & ApiResponse;
+export type PromiseRequest<P, R> = (payload: P) => Promise<R>;
+export type EmptyServiceRequest<R> = () => Promise<ServiceResponse<R>>;
+export type EmptyEnvironmentServiceRequest<R> = () => Promise<ServiceResponse<R>>;
+export type EnvironmentServiceRequest<P, R> = (payload: P) => Promise<ServiceResponse<R>>;
diff --git a/packages/common/types/settings.d.ts b/packages/common/types/settings.ts
similarity index 100%
rename from packages/common/types/settings.d.ts
rename to packages/common/types/settings.ts
diff --git a/packages/common/types/subscription.d.ts b/packages/common/types/subscription.ts
similarity index 75%
rename from packages/common/types/subscription.d.ts
rename to packages/common/types/subscription.ts
index 6a3185c5e..6582c7b23 100644
--- a/packages/common/types/subscription.d.ts
+++ b/packages/common/types/subscription.ts
@@ -1,4 +1,8 @@
 import type { ChangeSubscriptionPlanResponse, DefaultCreditCardData, SetDefaultCard } from '@inplayer-org/inplayer.js';
+
+import type { CleengRequest } from './cleeng';
+import type { EnvironmentServiceRequest, PromiseRequest } from './service';
+
 // Subscription types
 export type Subscription = {
   subscriptionId: number | string;
@@ -22,7 +26,7 @@ export type PaymentDetail = {
   customerId: string;
   paymentGateway: string;
   paymentMethod: string;
-  paymentMethodSpecificParams: Record<PaymentMethodSpecificParam>;
+  paymentMethodSpecificParams: PaymentMethodSpecificParam;
   paymentMethodId: number;
   active: boolean;
   currency?: string;
@@ -149,13 +153,13 @@ type GetAllTransactionsResponse = Transaction[] | null;
 
 type GetActiveSubscriptionResponse = Subscription | null;
 
-type GetSubscriptions = CleengRequest<GetSubscriptionsPayload, GetSubscriptionsResponse>;
-type UpdateSubscription = CleengRequest<UpdateSubscriptionPayload, UpdateSubscriptionResponse>;
-type GetPaymentDetails = CleengRequest<GetPaymentDetailsPayload, GetPaymentDetailsResponse>;
-type GetTransactions = CleengRequest<GetTransactionsPayload, GetTransactionsResponse>;
+export type GetSubscriptions = CleengRequest<GetSubscriptionsPayload, GetSubscriptionsResponse>;
+export type UpdateSubscription = CleengRequest<UpdateSubscriptionPayload, UpdateSubscriptionResponse>;
+export type GetPaymentDetails = CleengRequest<GetPaymentDetailsPayload, GetPaymentDetailsResponse>;
+export type GetTransactions = CleengRequest<GetTransactionsPayload, GetTransactionsResponse>;
 
-type GetActiveSubscription = PromiseRequest<GetActiveSubscriptionPayload, GetActiveSubscriptionResponse>;
-type GetAllTransactions = PromiseRequest<GetAllTransactionsPayload, GetAllTransactionsResponse>;
-type GetActivePayment = PromiseRequest<GetActivePaymentPayload, GetActivePaymentResponse>;
-type ChangeSubscription = EnvironmentServiceRequest<ChangeSubscriptionPayload, ChangeSubscriptionPlanResponse>;
-type FetchReceipt = EnvironmentServiceRequest<FetchReceiptPayload, FetchReceiptResponse>;
+export type GetActiveSubscription = PromiseRequest<GetActiveSubscriptionPayload, GetActiveSubscriptionResponse>;
+export type GetAllTransactions = PromiseRequest<GetAllTransactionsPayload, GetAllTransactionsResponse>;
+export type GetActivePayment = PromiseRequest<GetActivePaymentPayload, GetActivePaymentResponse>;
+export type ChangeSubscription = EnvironmentServiceRequest<ChangeSubscriptionPayload, ChangeSubscriptionPlanResponse>;
+export type FetchReceipt = EnvironmentServiceRequest<FetchReceiptPayload, FetchReceiptResponse>;
diff --git a/packages/common/types/testing.d.ts b/packages/common/types/testing.ts
similarity index 100%
rename from packages/common/types/testing.d.ts
rename to packages/common/types/testing.ts
diff --git a/packages/common/types/watchHistory.d.ts b/packages/common/types/watchHistory.ts
similarity index 100%
rename from packages/common/types/watchHistory.d.ts
rename to packages/common/types/watchHistory.ts
diff --git a/packages/hooks-react/package.json b/packages/hooks-react/package.json
index 813b5141a..22d6b4494 100644
--- a/packages/hooks-react/package.json
+++ b/packages/hooks-react/package.json
@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@testing-library/react": "^14.0.0",
+    "@types/jwplayer": "^8.2.13",
     "vi-fetch": "^0.8.0",
     "vitest": "^0.34.6"
   },
diff --git a/packages/hooks-react/src/useOttAnalytics.ts b/packages/hooks-react/src/useOttAnalytics.ts
index 9a867ffda..c750c7fd6 100644
--- a/packages/hooks-react/src/useOttAnalytics.ts
+++ b/packages/hooks-react/src/useOttAnalytics.ts
@@ -3,6 +3,7 @@ import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import env from '@jwp/ott-common/src/env';
+import type { Jwpltx } from '@jwp/ott-common/types/jwpltx';
 
 const useOttAnalytics = (item?: PlaylistItem, feedId: string = '') => {
   const analyticsToken = useConfigStore((s) => s.config.analyticsToken);
@@ -19,21 +20,23 @@ const useOttAnalytics = (item?: PlaylistItem, feedId: string = '') => {
   const [player, setPlayer] = useState<jwplayer.JWPlayer | null>(null);
 
   useEffect(() => {
-    if (!window.jwpltx || !analyticsToken || !player || !item) {
+    const jwpltx = 'jwpltx' in window ? (window.jwpltx as Jwpltx) : undefined;
+
+    if (!jwpltx || !analyticsToken || !player || !item) {
       return;
     }
 
     const timeHandler = ({ position, duration }: jwplayer.TimeParam) => {
-      window.jwpltx.time(position, duration);
+      jwpltx.time(position, duration);
     };
 
     const seekHandler = ({ offset }: jwplayer.SeekParam) => {
       // TODO: according to JWPlayer typings, the seek param doesn't contain a `duration` property, but it actually does
-      window.jwpltx.seek(offset, player.getDuration());
+      jwpltx.seek(offset, player.getDuration());
     };
 
     const seekedHandler = () => {
-      window.jwpltx.seeked();
+      jwpltx.seeked();
     };
 
     const playlistItemHandler = () => {
@@ -43,15 +46,15 @@ const useOttAnalytics = (item?: PlaylistItem, feedId: string = '') => {
         return;
       }
 
-      window.jwpltx.ready(analyticsToken, window.location.hostname, feedId, item.mediaid, item.title, oaid, oiid, av);
+      jwpltx.ready(analyticsToken, window.location.hostname, feedId, item.mediaid, item.title, oaid, oiid, av);
     };
 
     const completeHandler = () => {
-      window.jwpltx.complete();
+      jwpltx.complete();
     };
 
     const adImpressionHandler = () => {
-      window.jwpltx.adImpression();
+      jwpltx.adImpression();
     };
 
     player.on('playlistItem', playlistItemHandler);
@@ -63,7 +66,7 @@ const useOttAnalytics = (item?: PlaylistItem, feedId: string = '') => {
 
     return () => {
       // Fire remaining seconds / minutes watched
-      window.jwpltx.remove();
+      jwpltx.remove();
       player.off('playlistItem', playlistItemHandler);
       player.off('complete', completeHandler);
       player.off('time', timeHandler);
diff --git a/packages/hooks-react/src/useProfiles.ts b/packages/hooks-react/src/useProfiles.ts
index 42e9d43ec..7d1b9d99f 100644
--- a/packages/hooks-react/src/useProfiles.ts
+++ b/packages/hooks-react/src/useProfiles.ts
@@ -10,6 +10,7 @@ import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import ProfileController from '@jwp/ott-common/src/stores/ProfileController';
 import AccountController from '@jwp/ott-common/src/stores/AccountController';
 import { logDev } from '@jwp/ott-common/src/utils/common';
+import type { ServiceResponse } from '@jwp/ott-common/types/service';
 
 export const useSelectProfile = (options?: { onSuccess: () => void; onError: () => void }) => {
   const accountController = getModule(AccountController, false);
diff --git a/packages/hooks-react/src/useWatchHistory.ts b/packages/hooks-react/src/useWatchHistory.ts
index b416817f0..7a861a69d 100644
--- a/packages/hooks-react/src/useWatchHistory.ts
+++ b/packages/hooks-react/src/useWatchHistory.ts
@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import type { JWPlayer } from '@jwp/ott-common/types/jwplayer';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useWatchHistoryStore } from '@jwp/ott-common/src/stores/WatchHistoryStore';
@@ -7,7 +6,7 @@ import { VideoProgressMinMax } from '@jwp/ott-common/src/constants';
 
 import { useWatchHistoryListener } from './useWatchHistoryListener';
 
-export const useWatchHistory = (player: JWPlayer | undefined, item: PlaylistItem, seriesItem?: PlaylistItem) => {
+export const useWatchHistory = (player: jwplayer.JWPlayer | undefined, item: PlaylistItem, seriesItem?: PlaylistItem) => {
   // config
   const { features } = useConfigStore((s) => s.config);
   const continueWatchingList = features?.continueWatchingList;
diff --git a/packages/hooks-react/src/useWatchHistoryListener.ts b/packages/hooks-react/src/useWatchHistoryListener.ts
index 2549724ed..759e87f01 100644
--- a/packages/hooks-react/src/useWatchHistoryListener.ts
+++ b/packages/hooks-react/src/useWatchHistoryListener.ts
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
-import type { JWPlayer } from '@jwp/ott-common/types/jwplayer';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import WatchHistoryController from '@jwp/ott-common/src/stores/WatchHistoryController';
@@ -31,7 +30,7 @@ const PROGRESSIVE_SAVE_INTERVAL = 300_000; // 5 minutes
  * item. When this needs to be saved, the queue is used to look up the last progress and item and save it when
  * necessary. The queue is then cleared to prevent duplicate saves and API calls.
  */
-export const useWatchHistoryListener = (player: JWPlayer | undefined, item: PlaylistItem, seriesItem?: PlaylistItem) => {
+export const useWatchHistoryListener = (player: jwplayer.JWPlayer | undefined, item: PlaylistItem, seriesItem?: PlaylistItem) => {
   const queuedWatchProgress = useRef<QueuedProgress | null>(null);
   const watchHistoryController = getModule(WatchHistoryController);
 
diff --git a/packages/hooks-react/tsconfig.json b/packages/hooks-react/tsconfig.json
index 1c7abf924..8e73fc1c1 100644
--- a/packages/hooks-react/tsconfig.json
+++ b/packages/hooks-react/tsconfig.json
@@ -9,6 +9,7 @@
   "compilerOptions": {
     "noEmit": true,
     "types": [
+      "@types/jwplayer",
       "vi-fetch/matchers",
       "vitest/globals"
     ]
diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json
index 47517e1f8..bbd67bb49 100644
--- a/packages/ui-react/package.json
+++ b/packages/ui-react/package.json
@@ -35,6 +35,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/dompurify": "^2.3.4",
+    "@types/jwplayer": "^8.2.13",
     "@types/marked": "^4.0.7",
     "@types/payment": "^2.1.4",
     "@types/react-infinite-scroller": "^1.2.3",
diff --git a/packages/ui-react/src/components/Player/Player.tsx b/packages/ui-react/src/components/Player/Player.tsx
index d66bb594c..7997af087 100644
--- a/packages/ui-react/src/components/Player/Player.tsx
+++ b/packages/ui-react/src/components/Player/Player.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { AdSchedule } from '@jwp/ott-common/types/ad-schedule';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
-import type { JWPlayer } from '@jwp/ott-common/types/jwplayer';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { deepCopy } from '@jwp/ott-common/src/utils/collection';
 import { logDev, testId } from '@jwp/ott-common/src/utils/common';
@@ -10,6 +9,7 @@ import useOttAnalytics from '@jwp/ott-hooks-react/src/useOttAnalytics';
 import { attachAnalyticsParams } from '@jwp/ott-common/src/utils/analytics';
 import env from '@jwp/ott-common/src/env';
 
+import type { JWPlayer } from '../../../types/jwplayer';
 import { addScript } from '../../utils/dom';
 
 import styles from './Player.module.scss';
diff --git a/packages/ui-react/src/containers/PlayerContainer/PlayerContainer.tsx b/packages/ui-react/src/containers/PlayerContainer/PlayerContainer.tsx
index 0ce2d698c..873e5da53 100644
--- a/packages/ui-react/src/containers/PlayerContainer/PlayerContainer.tsx
+++ b/packages/ui-react/src/containers/PlayerContainer/PlayerContainer.tsx
@@ -1,11 +1,11 @@
 import React, { useCallback, useState } from 'react';
-import type { JWPlayer } from '@jwp/ott-common/types/jwplayer';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useWatchHistory } from '@jwp/ott-hooks-react/src/useWatchHistory';
 import { usePlaylistItemCallback } from '@jwp/ott-hooks-react/src/usePlaylistItemCallback';
 import { useAds } from '@jwp/ott-hooks-react/src/useAds';
 import useProtectedMedia from '@jwp/ott-hooks-react/src/useProtectedMedia';
 
+import type { JWPlayer } from '../../../types/jwplayer';
 import Player from '../../components/Player/Player';
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 import PlayerError, { PlayerErrorState } from '../../components/PlayerError/PlayerError';
diff --git a/packages/common/types/global.d.ts b/packages/ui-react/types/global.d.ts
similarity index 70%
rename from packages/common/types/global.d.ts
rename to packages/ui-react/types/global.d.ts
index 2da10aad7..b2926646d 100644
--- a/packages/common/types/global.d.ts
+++ b/packages/ui-react/types/global.d.ts
@@ -1,8 +1,6 @@
 // noinspection JSUnusedGlobalSymbols
 interface Window {
   jwplayer?: jwplayer.JWPlayerStatic;
-  jwpltx: Jwpltx;
-  AdyenCheckout: Adyen.AdyenCheckoutStatic;
 }
 
 interface HTMLDivElement {
diff --git a/packages/common/types/jwplayer.d.ts b/packages/ui-react/types/jwplayer.d.ts
similarity index 96%
rename from packages/common/types/jwplayer.d.ts
rename to packages/ui-react/types/jwplayer.d.ts
index acf0f24a5..211b028db 100644
--- a/packages/common/types/jwplayer.d.ts
+++ b/packages/ui-react/types/jwplayer.d.ts
@@ -28,7 +28,7 @@ export type JWPlayer = jwplayer.JWPlayer & {
   off(event: keyof EventParams | jwplayer.NoParamEvent): JWPlayer;
   off(event: jwplayer.NoParamEvent, callback: () => void): JWPlayer;
   off<TEvent extends keyof EventParams>(event: TEvent, callback: jwplayer.EventCallback<EventParams[TEvent]>): JWPlayer;
-  setConfig(config: ConfigOptions);
+  setConfig(config: ConfigOptions): JWPlayer;
   setPlaylistItemCallback(callback?: (item: never) => Promise<unknown>): void;
   removePlaylistItemCallback(): void;
 };
diff --git a/platforms/web/test-e2e/utils/steps_file.ts b/platforms/web/test-e2e/utils/steps_file.ts
index 0d4a97261..170c2149c 100644
--- a/platforms/web/test-e2e/utils/steps_file.ts
+++ b/platforms/web/test-e2e/utils/steps_file.ts
@@ -363,7 +363,7 @@ const stepsObj = {
     for (let i = 0; i < tries; i++) {
       // In theory this expression can be simplified, but without the typeof's codecept throws an error when the value is undefined.
       const state = await this.executeScript(() =>
-        typeof window.jwplayer === 'undefined' || typeof window.jwplayer().getState === 'undefined' ? '' : jwplayer().getState(),
+        typeof window.jwplayer === 'undefined' || typeof window.jwplayer().getState === 'undefined' ? '' : window.jwplayer().getState(),
       );
 
       this.say(`Waiting for Player state. Expected: "${expectedState}", Current: "${state}"`);
@@ -385,7 +385,7 @@ const stepsObj = {
     this.dontSeeElement('div[class*="jwplayer"]');
     this.dontSeeElement('video');
     // eslint-disable-next-line no-console
-    assert.equal(await this.executeScript(() => (typeof jwplayer === 'undefined' ? undefined : jwplayer().getState)), undefined);
+    assert.equal(await this.executeScript(() => (typeof window.jwplayer === 'undefined' ? undefined : window.jwplayer().getState)), undefined);
   },
   isMobile: async function (this: CodeceptJS.I): Promise<boolean> {
     return await this.executeScript(() => {
diff --git a/platforms/web/tsconfig.json b/platforms/web/tsconfig.json
index 9a0686193..b63d0a57f 100644
--- a/platforms/web/tsconfig.json
+++ b/platforms/web/tsconfig.json
@@ -22,6 +22,7 @@
     "scripts",
     "test",
     "vite.config.ts",
-    "../../packages/common/types"
+    "../../packages/common/types",
+    "../../packages/ui-react/types"
   ]
 }
diff --git a/platforms/web/types/global.d.ts b/platforms/web/types/global.d.ts
index 2da10aad7..cdf5137bc 100644
--- a/platforms/web/types/global.d.ts
+++ b/platforms/web/types/global.d.ts
@@ -2,7 +2,6 @@
 interface Window {
   jwplayer?: jwplayer.JWPlayerStatic;
   jwpltx: Jwpltx;
-  AdyenCheckout: Adyen.AdyenCheckoutStatic;
 }
 
 interface HTMLDivElement {

From 588f69ac9034736ddf7804bbebaddb141fe30860 Mon Sep 17 00:00:00 2001
From: langemike <mikevv@gmail.com>
Date: Thu, 25 Jan 2024 17:14:00 +0100
Subject: [PATCH 004/128] =?UTF-8?q?fix(auth):=20capture=20error=20to=20pre?=
 =?UTF-8?q?vent=20misleading=20=E2=80=9Cwrong=20combination=E2=80=9D=20err?=
 =?UTF-8?q?or?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>
---
 packages/common/package.json                    | 1 -
 packages/common/src/stores/AccountController.ts | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/common/package.json b/packages/common/package.json
index 2e560458f..6b15d2649 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@inplayer-org/inplayer.js": "^3.13.24",
-    "@tanstack/query-core": "^4.36.1",
     "broadcast-channel": "^7.0.0",
     "date-fns": "^2.28.0",
     "fast-xml-parser": "^4.3.2",
diff --git a/packages/common/src/stores/AccountController.ts b/packages/common/src/stores/AccountController.ts
index 68cdf9ea0..a077420c4 100644
--- a/packages/common/src/stores/AccountController.ts
+++ b/packages/common/src/stores/AccountController.ts
@@ -198,8 +198,8 @@ export default class AccountController {
     if (response) {
       await this.afterLogin(response.user, response.customerConsents, accessModel);
 
-      await this.favoritesController?.restoreFavorites();
-      await this.watchHistoryController?.restoreWatchHistory();
+      await this.favoritesController?.restoreFavorites().catch(logDev);
+      await this.watchHistoryController?.restoreWatchHistory().catch(logDev);
     }
 
     useAccountStore.setState({ loading: false });

From 9d8ff150dc298880bd4cdc1323a4fc68f8d0fcba Mon Sep 17 00:00:00 2001
From: langemike <mikevv@gmail.com>
Date: Thu, 25 Jan 2024 17:16:36 +0100
Subject: [PATCH 005/128] feat(project): customizable footer through env-var

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>
---
 docs/configuration.md                              | 9 +--------
 packages/common/src/env.ts                         | 4 +++-
 packages/common/src/services/ConfigService.ts      | 4 +---
 packages/common/src/stores/ConfigStore.ts          | 4 +---
 packages/common/src/utils/common.ts                | 6 ++++++
 packages/common/src/utils/configSchema.ts          | 1 -
 packages/common/types/config.ts                    | 1 -
 packages/testing/fixtures/config.json              | 3 +--
 packages/ui-react/src/containers/Layout/Layout.tsx | 8 +++++---
 platforms/web/src/index.tsx                        | 2 ++
 10 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 506121e23..5f9ee4dce 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -160,8 +160,7 @@ Use the `styling` object to define extra styles for your application.
   "styling": {
     "backgroundColor": null,
     "highlightColor": null,
-    "headerBackground": null,
-    "footerText": "Blender Foundation"
+    "headerBackground": null
 }
 ```
 
@@ -187,12 +186,6 @@ Use this parameter to change the background color of the header. By default, the
 
 ---
 
-**styling.footerText** (optional)
-
-Text that will be placed in the footer of the site. Markdown links are supported.
-
----
-
 **features**
 
 Use the `features` object to define extra properties for your app.
diff --git a/packages/common/src/env.ts b/packages/common/src/env.ts
index 606801157..5d4066571 100644
--- a/packages/common/src/env.ts
+++ b/packages/common/src/env.ts
@@ -2,7 +2,7 @@ export type Env = {
   APP_VERSION: string;
   APP_API_BASE_URL: string;
   APP_PLAYER_ID: string;
-
+  APP_FOOTER_TEXT: string;
   APP_DEFAULT_CONFIG_SOURCE?: string;
   APP_PLAYER_LICENSE_KEY?: string;
 };
@@ -11,12 +11,14 @@ const env: Env = {
   APP_VERSION: '',
   APP_API_BASE_URL: 'https://cdn.jwplayer.com',
   APP_PLAYER_ID: 'M4qoGvUk',
+  APP_FOOTER_TEXT: '',
 };
 
 export const configureEnv = (options: Partial<Env>) => {
   env.APP_VERSION = options.APP_VERSION || env.APP_VERSION;
   env.APP_API_BASE_URL = options.APP_API_BASE_URL || env.APP_API_BASE_URL;
   env.APP_PLAYER_ID = options.APP_PLAYER_ID || env.APP_PLAYER_ID;
+  env.APP_FOOTER_TEXT = options.APP_FOOTER_TEXT || env.APP_FOOTER_TEXT;
 
   env.APP_DEFAULT_CONFIG_SOURCE ||= options.APP_DEFAULT_CONFIG_SOURCE;
   env.APP_PLAYER_LICENSE_KEY ||= options.APP_PLAYER_LICENSE_KEY;
diff --git a/packages/common/src/services/ConfigService.ts b/packages/common/src/services/ConfigService.ts
index 6c17f682e..09b2cebe0 100644
--- a/packages/common/src/services/ConfigService.ts
+++ b/packages/common/src/services/ConfigService.ts
@@ -28,9 +28,7 @@ export default class ConfigService {
     content: [],
     menu: [],
     integrations: {},
-    styling: {
-      footerText: '',
-    },
+    styling: {},
     features: {},
   };
 
diff --git a/packages/common/src/stores/ConfigStore.ts b/packages/common/src/stores/ConfigStore.ts
index 9e35334aa..854a60977 100644
--- a/packages/common/src/stores/ConfigStore.ts
+++ b/packages/common/src/stores/ConfigStore.ts
@@ -34,9 +34,7 @@ export const useConfigStore = createStore<ConfigState>('ConfigStore', () => ({
         useSandbox: true,
       },
     },
-    styling: {
-      footerText: '',
-    },
+    styling: {},
   },
   settings: {
     additionalAllowedConfigSources: [],
diff --git a/packages/common/src/utils/common.ts b/packages/common/src/utils/common.ts
index 7ee4bd418..5b3395186 100644
--- a/packages/common/src/utils/common.ts
+++ b/packages/common/src/utils/common.ts
@@ -6,6 +6,12 @@ export function debounce<T extends (...args: any[]) => void>(callback: T, wait =
   };
 }
 
+export const unicodeToChar = (text: string) => {
+  return text.replace(/\\u[\dA-F]{4}/gi, (match) => {
+    return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
+  });
+};
+
 /**
  * Parse hex color and return the RGB colors
  * @param color
diff --git a/packages/common/src/utils/configSchema.ts b/packages/common/src/utils/configSchema.ts
index af6ffc382..7ef70b950 100644
--- a/packages/common/src/utils/configSchema.ts
+++ b/packages/common/src/utils/configSchema.ts
@@ -41,7 +41,6 @@ const stylingSchema: SchemaOf<Styling> = object({
   backgroundColor: string().nullable(),
   highlightColor: string().nullable(),
   headerBackground: string().nullable(),
-  footerText: string().nullable(),
 });
 
 export const configSchema: SchemaOf<Config> = object({
diff --git a/packages/common/types/config.ts b/packages/common/types/config.ts
index b74104536..442dc85f1 100644
--- a/packages/common/types/config.ts
+++ b/packages/common/types/config.ts
@@ -59,7 +59,6 @@ export type Styling = {
   backgroundColor?: string | null;
   highlightColor?: string | null;
   headerBackground?: string | null;
-  footerText?: string | null;
 };
 
 export type Cleeng = {
diff --git a/packages/testing/fixtures/config.json b/packages/testing/fixtures/config.json
index eb4268611..0d9676d53 100644
--- a/packages/testing/fixtures/config.json
+++ b/packages/testing/fixtures/config.json
@@ -55,8 +55,7 @@
   "styling": {
     "backgroundColor": null,
     "highlightColor": null,
-    "headerBackground": null,
-    "footerText": "\u00a9 Blender Foundation | [cloud.blender.org](https://cloud.blender.org)"
+    "headerBackground": null
   },
   "description": "Blender demo site",
   "analyticsToken": "lDd_MCg4EeuMunbqcIJccw",
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index eaceefc42..417521cea 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -11,12 +11,13 @@ import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
 import ProfileController from '@jwp/ott-common/src/stores/ProfileController';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
-import { IS_DEVELOPMENT_BUILD } from '@jwp/ott-common/src/utils/common';
+import { IS_DEVELOPMENT_BUILD, unicodeToChar } from '@jwp/ott-common/src/utils/common';
 import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
 import useSearchQueryUpdater from '@jwp/ott-ui-react/src/hooks/useSearchQueryUpdater';
 import { useProfiles, useSelectProfile } from '@jwp/ott-hooks-react/src/useProfiles';
 import { PATH_HOME, PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
 import { playlistURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import env from '@jwp/ott-common/src/env';
 
 import MarkdownComponent from '../../components/MarkdownComponent/MarkdownComponent';
 import Header from '../../components/Header/Header';
@@ -27,6 +28,8 @@ import Button from '../../components/Button/Button';
 
 import styles from './Layout.module.scss';
 
+const footerText = unicodeToChar(env.APP_FOOTER_TEXT);
+
 const Layout = () => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -38,13 +41,12 @@ const Layout = () => {
   );
   const isLoggedIn = !!useAccountStore(({ user }) => user);
   const favoritesEnabled = !!config.features?.favoritesList;
-  const { menu, assets, siteName, description, styling, features } = config;
+  const { menu, assets, siteName, description, features } = config;
   const metaDescription = description || t('default_description');
 
   const profileController = getModule(ProfileController, false);
 
   const { searchPlaylist } = features || {};
-  const { footerText } = styling || {};
   const currentLanguage = useMemo(() => supportedLanguages.find(({ code }) => code === i18n.language), [i18n.language, supportedLanguages]);
 
   const {
diff --git a/platforms/web/src/index.tsx b/platforms/web/src/index.tsx
index 271237fb3..d3e9ea8ef 100644
--- a/platforms/web/src/index.tsx
+++ b/platforms/web/src/index.tsx
@@ -17,6 +17,8 @@ configureEnv({
 
   APP_DEFAULT_CONFIG_SOURCE: import.meta.env.APP_DEFAULT_CONFIG_SOURCE,
   APP_PLAYER_LICENSE_KEY: import.meta.env.APP_PLAYER_LICENSE_KEY,
+
+  APP_FOOTER_TEXT: import.meta.env.APP_FOOTER_TEXT,
 });
 
 const rootElement = document.getElementById('root');

From f98e99c0ecd4868e4efcaabc116c208f55d74d02 Mon Sep 17 00:00:00 2001
From: Roy Schut <royschut@gmail.com>
Date: Thu, 25 Jan 2024 13:17:33 -0300
Subject: [PATCH 006/128] refactor(project): add replaceable components to
 ui-react

---
 packages/ui-react/package.json                |  1 +
 packages/ui-react/src/components/Tag/Tag.tsx  |  8 ++++----
 packages/ui-react/src/modules/container.ts    |  5 +++++
 .../src/modules/createInjectableComponent.tsx | 19 ++++++++++++++++++
 platforms/web/src/modules/register.ts         | 20 +++++++++++++++++++
 5 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui-react/src/modules/container.ts
 create mode 100644 packages/ui-react/src/modules/createInjectableComponent.tsx

diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json
index bbd67bb49..e1ff5c7bb 100644
--- a/packages/ui-react/package.json
+++ b/packages/ui-react/package.json
@@ -16,6 +16,7 @@
     "date-fns": "^2.28.0",
     "dompurify": "^2.3.8",
     "i18next": "^22.4.15",
+    "inversify": "^6.0.1",
     "marked": "^4.1.1",
     "payment": "^2.4.6",
     "planby": "^0.3.0",
diff --git a/packages/ui-react/src/components/Tag/Tag.tsx b/packages/ui-react/src/components/Tag/Tag.tsx
index b40ed33df..7a945f798 100644
--- a/packages/ui-react/src/components/Tag/Tag.tsx
+++ b/packages/ui-react/src/components/Tag/Tag.tsx
@@ -1,16 +1,16 @@
-import React, { type ReactNode } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 
 import styles from './Tag.module.scss';
 
-type Props = {
+type TagProps = {
   className?: string;
   isLive?: boolean;
-  children?: ReactNode;
+  children?: React.ReactNode;
   size?: 'normal' | 'large';
 };
 
-const Tag: React.FC<Props> = ({ children, className, isLive = false, size = 'normal' }) => {
+const Tag: React.FC<TagProps> = ({ children, className, isLive = false, size = 'normal' }: TagProps) => {
   return (
     <div
       className={classNames(className, styles.tag, styles[size], {
diff --git a/packages/ui-react/src/modules/container.ts b/packages/ui-react/src/modules/container.ts
new file mode 100644
index 000000000..fb15ec2f8
--- /dev/null
+++ b/packages/ui-react/src/modules/container.ts
@@ -0,0 +1,5 @@
+import { Container } from 'inversify';
+
+const container = new Container({ defaultScope: 'Singleton', skipBaseClassChecks: true });
+
+export { container };
diff --git a/packages/ui-react/src/modules/createInjectableComponent.tsx b/packages/ui-react/src/modules/createInjectableComponent.tsx
new file mode 100644
index 000000000..f636a1bab
--- /dev/null
+++ b/packages/ui-react/src/modules/createInjectableComponent.tsx
@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+
+import { container } from './container';
+
+const createInjectableComponent = <Props extends object>(identifier: symbol, DefaultComponent: FC<Props>) => {
+  return (props: Props) => {
+    const isOverridden = container.isBound(identifier);
+
+    if (isOverridden) {
+      const OverriddenComponent = container.get<FC<Props>>(identifier);
+
+      return <OverriddenComponent {...props} />;
+    }
+
+    return <DefaultComponent {...props} />;
+  };
+};
+
+export default createInjectableComponent;
diff --git a/platforms/web/src/modules/register.ts b/platforms/web/src/modules/register.ts
index f14e8f4f7..1c0840e6c 100644
--- a/platforms/web/src/modules/register.ts
+++ b/platforms/web/src/modules/register.ts
@@ -30,3 +30,23 @@ container.bind(StorageService).to(LocalStorageService);
 
 // Currently, this is only used for e2e testing to override the customer ip from a browser cookie
 container.bind<GetCustomerIP>(GET_CUSTOMER_IP).toConstantValue(async () => getOverrideIP());
+
+/**
+ * UI Component override
+ *
+ * @example
+ * ```ts
+ * // Define in types.ts (from `ui-react` for example)
+ * const TAG_IDENTIFIER = 'TAG_IDENTIFIER';
+ *
+ * // Bind custom component
+ * container.bind(TAG_IDENTIFIER).toConstantValue(CustomTag);
+ *
+ * // Then wrap the component in a HOC, from the component file itself
+ * export default createInjectableComponent(TAG_IDENTIFIER, DefaultTag);
+ *
+ * ```
+ */
+
+// Override ui-react component
+// uiComponentContainer.bind<React.FC<TagProps>>(TAG_IDENTIFIER).toConstantValue(Tag);

From a1c6188ae0e6b634977d9ac0642bad437a31df3b Mon Sep 17 00:00:00 2001
From: langemike <mikevv@gmail.com>
Date: Fri, 26 Jan 2024 17:24:59 +0100
Subject: [PATCH 007/128] feat(project): favicons in different sizes

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>
---
 packages/theme/assets/app-icon.png            | Bin 0 -> 11622 bytes
 packages/theme/assets/favicon.ico             | Bin 0 -> 457 bytes
 platforms/web/.depcheckrc.yaml                |   1 +
 platforms/web/index.html                      |  22 +-
 platforms/web/package.json                    |   7 +-
 platforms/web/public/browserconfig.xml        |   9 -
 platforms/web/public/favicon.ico              | Bin 15086 -> 0 bytes
 .../web/public/images/apple-touch-icon.png    | Bin 1375 -> 0 bytes
 platforms/web/public/images/favicon-16x16.png | Bin 561 -> 0 bytes
 platforms/web/public/images/favicon-32x32.png | Bin 738 -> 0 bytes
 .../{ => icons}/android-chrome-144x144.png    | Bin
 .../web/public/images/icons/app-icon.png      | Bin 0 -> 11622 bytes
 .../images/icons/apple-touch-icon-114x114.png | Bin 0 -> 611 bytes
 .../images/icons/apple-touch-icon-120x120.png | Bin 0 -> 438 bytes
 .../images/icons/apple-touch-icon-144x144.png | Bin 0 -> 624 bytes
 .../images/icons/apple-touch-icon-152x152.png | Bin 0 -> 651 bytes
 .../images/icons/apple-touch-icon-180x180.png | Bin 0 -> 734 bytes
 .../images/icons/apple-touch-icon-60x60.png   | Bin 0 -> 281 bytes
 .../images/icons/apple-touch-icon-72x72.png   | Bin 0 -> 414 bytes
 .../images/icons/apple-touch-icon-76x76.png   | Bin 0 -> 385 bytes
 platforms/web/public/images/icons/favicon.ico | Bin 0 -> 457 bytes
 .../web/public/images/icons/pwa-144x144.png   | Bin 0 -> 624 bytes
 .../web/public/images/icons/pwa-160x160.png   | Bin 0 -> 682 bytes
 .../web/public/images/icons/pwa-16x16.png     | Bin 0 -> 222 bytes
 .../web/public/images/icons/pwa-196x196.png   | Bin 0 -> 793 bytes
 .../web/public/images/icons/pwa-32x32.png     | Bin 0 -> 277 bytes
 .../web/public/images/icons/pwa-64x64.png     | Bin 0 -> 378 bytes
 .../web/public/images/icons/pwa-96x96.png     | Bin 0 -> 490 bytes
 .../web/public/images/mstile-150x150.png      | Bin 1889 -> 0 bytes
 .../web/public/images/safari-pinned-tab.svg   |  21 -
 platforms/web/public/manifest.json            |   2 +-
 platforms/web/pwa-assets.config.ts            |  25 +
 yarn.lock                                     | 448 +++++++++++++++++-
 33 files changed, 486 insertions(+), 49 deletions(-)
 create mode 100644 packages/theme/assets/app-icon.png
 create mode 100644 packages/theme/assets/favicon.ico
 delete mode 100644 platforms/web/public/browserconfig.xml
 delete mode 100644 platforms/web/public/favicon.ico
 delete mode 100644 platforms/web/public/images/apple-touch-icon.png
 delete mode 100644 platforms/web/public/images/favicon-16x16.png
 delete mode 100644 platforms/web/public/images/favicon-32x32.png
 rename platforms/web/public/images/{ => icons}/android-chrome-144x144.png (100%)
 create mode 100644 platforms/web/public/images/icons/app-icon.png
 create mode 100644 platforms/web/public/images/icons/apple-touch-icon-114x114.png
 create mode 100644 platforms/web/public/images/icons/apple-touch-icon-120x120.png
 create mode 100644 platforms/web/public/images/icons/apple-touch-icon-144x144.png
 create mode 100644 platforms/web/public/images/icons/apple-touch-icon-152x152.png
 create mode 100644 platforms/web/public/images/icons/apple-touch-icon-180x180.png
 create mode 100644 platforms/web/public/images/icons/apple-touch-icon-60x60.png
 create mode 100644 platforms/web/public/images/icons/apple-touch-icon-72x72.png
 create mode 100644 platforms/web/public/images/icons/apple-touch-icon-76x76.png
 create mode 100644 platforms/web/public/images/icons/favicon.ico
 create mode 100644 platforms/web/public/images/icons/pwa-144x144.png
 create mode 100644 platforms/web/public/images/icons/pwa-160x160.png
 create mode 100644 platforms/web/public/images/icons/pwa-16x16.png
 create mode 100644 platforms/web/public/images/icons/pwa-196x196.png
 create mode 100644 platforms/web/public/images/icons/pwa-32x32.png
 create mode 100644 platforms/web/public/images/icons/pwa-64x64.png
 create mode 100644 platforms/web/public/images/icons/pwa-96x96.png
 delete mode 100644 platforms/web/public/images/mstile-150x150.png
 delete mode 100644 platforms/web/public/images/safari-pinned-tab.svg
 create mode 100644 platforms/web/pwa-assets.config.ts

diff --git a/packages/theme/assets/app-icon.png b/packages/theme/assets/app-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..968b0156035336ec7f6e1a23526e06e64ac982d7
GIT binary patch
literal 11622
zcmeHtcT|*Tx9^@JAWE|!fe#oIHBk(s5iuyt1jPo52nZHn46%U-7J8XiQHcUkqd|~R
zB1(-6h=QWP5F^Hdpfu@Y2_PL27+}iT4`zMm-gVbq_dDx+IrksukKvv7X?yQym*3u-
z)0;P~RZ-Sf1^|`y>sD_8VB#Yaloap}Uw2_Rz@kO#SAXLWK<jDF-R@Es_wd!+`BrAX
ze3>9pjxzH<{w#yJd%@|2>_U3wOjb5`b1L0;{oJNI4BvN5Cth{^PY+wy|FG82aEE30
zk=hpdNND2Vxq+tvWv7$eYrXkhjsDv`IVN}%??v%G{3Coj8NWfDOTH<flRr##^39^i
zH_!-qpu{5IT%eIZbS3irX$cD9lf;NBd{P(`!Y6wns_@BOpb-8(Zz)XD@tKpAmE{#0
zS`<3^=cPQpOVaKg+qT7pIv4B7!a!8D)6K2I!v3pjx4JZ0pddTj;$4MrVBjc6F3phb
zWkw!uZ?CXb5ht7d;dS7^Q`NDdJk^(~{s2$x4<%d7nl-CusH?80ySv+|6aqLjXh~5O
z@7S@U=XuK7yj2{4&@Au?3TkjI4*7ZtT_~RhqLR*JdH<{X`FHPnM(F|X_XP?L%;gpq
znhcRH9R@l@B?SfT>p37~I!;|~W_I}j)G^o12lb4^eoo-~tD%GCroDp<I1y_*$w8f3
zO$WP9ky}KVyA0rt$23uW-d;;M#Dv+)#SG}*VF~-0Fi)^X+Vw+;9Uq`2EnDHh!Gp_U
z3yrmH92N})4|O^Q54=8kA4%1BC^0P#9NaT}_s!T?P<X}?n(%G)F1bjQ?B(T!5m4+<
zk;F-IQMp}Qe2_ht4i~nJNJd6Rng<m@lvf=_6>5rVj@g`E2sW0wV%trd_S~v{r4Lkv
zqy07CMaePi?mI}{wO53NYh(p)_jT*a5)^v?_{0~>#=7bmseEadn@ZWUnXsm3;LXFt
zF$S=2M@B~G7ZvqvfRr|6NO2SlXZh!wNpR%mXmv(`_2NBrNO6deZy#0!h};q(9~>O4
z_hjsfV#1pC2a&T><p4%j8<T1csXwWx^K+@F4Z5<Vm4PoXn8$g1%^MwV^wx<w3BrBL
zans5RqmH0K<*I|$qzDvMkb{QMlm6M170}UAT6&B~s5vtfhJ?yN^P%!q!?1TLVv?dP
z#jUfU=*T4MU|@|tfcuT&VvF(p^P#A4aIig1A)&sZ!DIgX`6>WqdyX8*OGrpC>4*ld
z|5hib#?jHy197-X)J9#|LOR!bCoOrQub7W_GT!ATZ$L7mI{h17FMuKq=-A*TNh-0O
ziTh-Rr4`+~cR=7)a<FoW6Lg#^&j7G_G&JNJ+%GCMVsh1(P{`JoCY`mWfpEr4MXoLG
zJY|iX2C-LyghRtUjl<3UttQUPrh`$!bL2Jk*KGQ)*RPj{{k9|yc<(lC+H~)|8c>hM
zp18?ggh>V-*876<Je*xqog}OK?b3pxq0yfAm(Z@%WPKssN#o0+4t)`AWyTKm`_0Jp
zf%pWAbE>2uW=Q@<IzH0qHGZ)qX0$cjUK;$|k{iT=90%`~dvVpqfkO|%LPDB0+1fTf
zcyMyDF;F_`&6|gkJJ5PAoT05<yVh&(-n7yiN?=reF;P~xye@BVMU*cMnyv(Gc38~w
z_V!+)7VR;M`T}CCfVaO)_Ms%PS6@#rzr7+U_=Os<bAkevo>b>4Q@f{u^O?mQseivB
zI46E_0_?#kvH)^sxHn7O9t?Z)$9IgkbL915;#Uz0ApEu_@mi49k@jZ^+n8E!`Yw96
z7W?{MyvC*pe~TV?$Di4tUGv^b1uD-f!}$0((O54Vk25z@!REq^ee=Nic6fNWUGxFR
zU9$03d5cWi$2SESvs3H{8sAdn8W<WHy0i-Tqfgu#&T?cOucl4eOQ%j|hVvK6b;8FK
zH+T&T?xI0|@H$WhLwDPXf=9HCew+-NnTax|gdUe@Nu7&)!DF1@ZK1Mxq^kr?sP^t<
zdVqB7)))4gkC`yV<dl=V<`w_Qk*YmgfjXb5xJlqz)G6D*b)luVuGnQ)yf25PqodQT
zFZ0a$6?I#9yPTia75b<}D~z*eI}<chN5-9fJ6c;>{KSe7OXaSnf>vo7odMx*4zId@
z%H;#~E<>sR!@H{5yxgMS&K;T#&fh0KjL%eFfwp8*_5Ats?($7VnXTs^<`~BBSI5!o
z*RR)RB_!ygaZ!`A>KMZkzqG{pyW=!z)X4yG|E?~(8lC{{KDIbfe+;kuOdTw_9VC4`
z(#mfQvX_JNjvbx=-=&B973t-eh8gd+vq2x>8ky>!O^5HkUa`V6A|m3t=`F=%z00MQ
zOi-wEhxF(C5g85MS6fheZYujUSdlDTV_YJ+F?3Z`hW^YO;BCfz{#oxyNFtL)l@1N>
z-s&bc-|7aSnWCpKv`nR;an)C;>w&k~SKRl`!anqQ-CZ6H{-|x7LE)8rg9Am2zIu14
zX$nvevLY<aH`1zSbG0smFga*J+|VRGx_^M=f9UHMxK@XMr9u5N8K!2Y8RrJ|MBbGH
zJgxbXN(|$CSin6s57_C6F>xQn&zt~a(p2TR*Gq<w@KW>Sl5@1&ZRgIV00B<6PODvL
zynS>C@7x{r?$0Ne(7l9ZrFmY-2KG`Kr4)mv-fvK}(x@<a<Y2hLWLV9Xsev$}dIlJ(
zL+m{>N#n%tSk1ZU{@%K{xDfw-F38!zI^|M%-}R{*f%iV@C~mU0SUTLOU_T$&fxU8!
zC~JdafpCBy-P?S57}*>@|C!rdXt$U}U_SY1{9jTb?#jrN^(->u-;*G92pbE$b*8Q-
zJ9Y@s5B{H2?Y)S8mirgxWRZzn=6@?U<KFA)>LP-{&j1sq{Tov}GatE3s<3Jr+4{c%
zlDUd4#i5P7btEU{DrO4=e~IK@%ej&n3l}a_Ib}#rJu2#LzWdkn$16%^I5|1}Z*TsU
ztae_{*jOR$&8=IvYB1jEfZ<1#k=`jiF&Wqg6%`fplF-Zdh{d;ETwRv|94teXamkuY
zNu|=^&YG<Jf`YoOTeoThByGZQIHS!#B$3=RM<9f{iO>etT(cBL&N6O@H}yV&YG=y=
zU~jO*G(AlNb)oj*JsMAs?y;6K#cDxFEWS59fG{qVwm?CN22syzY8)qY#b$$xqB<S4
z<_PZYMzewo4hB3~Cl|CBv<Ypusg=|m)0{+SE6l4y(?**q8ZV>JqbY!S5c;l(O@2>T
z_c?s{TMlxNc`~1ENCRp)uBn_OxA~TAn!AAcb5c@;=A`Uje_e|4)EYj+t++SM#C2DM
z$~2ssV?&2k)6rW<gY1&As9<v*FQYFuf^rhL-ie$nw8ZF4cDlFL>)ZU#(UPa34u?II
zMAL44z8N*J%m!s}c5@`XYda-HDxJ|d`_CIGGe3^l8luG94RJt)kiT792`azB9W3k#
z{s?e~k3SDS!VOV|m2+_H;I@<0Wu=$R&0Yw0kR%?M(0qJ+cy=tPRKanDrEW6<4j+EK
z9WbmTX-2}@+8A>77CbwL>#IvHtf!~P1Sl)iXkIB^XM;>uOr}_pDTaemm`Pu@Y?(F)
z&mn!zH<W2Z4cu{*9`P-erwdidVeA=rn3=sn@;o}>=imjDjBe&+h@{h~Mr4Wmu*GG@
zZB#TQc>_v8<DZw|<BnuSeQ$LPgd1@~w&hIvvx<tnk#r}bSVDbN6y8+?(UJ6pOy?O&
zAkn~+*7P=89YY!P8{lG_-&Zp41r0q80}%01%<RP&I`O(dz6$TkS~WY#TZZDC(a~xP
zTs-@9men!eMM9kZ$2_Er&<MEaaa1{Jp?{z2gtn-66d3S!@4iOM+3DZc;ziU2j+d_z
zj*bQfOT>p5>o5zc=XIh)c$##NZOH|bKzJ1C7ux8`x;Ai&7W3TQQ)o~%8wF8<;P(tz
zB5t{Jii8Ug6}1^8`!R2$;k+R(swAsr+GZ!l2>>lqJV*TbOuENx#7_bmyqSaJ`d+ep
zyykQkN-6?>hu|gn&P}$YP-<*d6oHTXOd@yc5UK!Gu?H{YgDuWGSiX{3eT8d);D*pq
zkgYkXwubPVtdEP>-}}#+q)daH5c1=5@2Nmpp!kHAMAeKg;R2(JXqdvo<mHx$moen!
zPvqsd<mHP%oH>=8RJd4;*52NpjZ#>I7DDy@DiG|z+bTenhe8unLLVO%6NGzF$*A6*
z-rnsvn6w@T*OXr2f_Nn%VL{(1Dmpq^fjx7ix7l+-<XYE|(?vouWjUGRF-Y#6?bphe
zhfds+(D3OhVM~iECXM?+C?Gd*wY#scU~upV@+mSU7j*cax`)Dz%~7Ty;vZ%Jmk<i5
zC=`;x%uwGfP`#-S9sl$?+>8Dr3{(n3R6%Opp!(+NH019b7iV9=Y*TVWKUro1Hb0>b
zUHa14SjXr^2#3m|O}v4ARVTzs3-CaZd7Bescz9SFY>wg5{uRR`BaM$9o!*bU6VZto
zn30wkDbGL$w~)-AQ*#*o4SHWofE055Ay=B4o9llhMyEBM%uw*4Cl50Myjb9FK*mpv
zdNNL8PDFI6>3E=0dKL}&n{W^!O(d1voeK$A3T(bRr4C$U6bnUjRO&CoRV*Bs`c#Jj
z9fZCdR$uXAo~LIPO*k8+2~)Njh~B>aZa5c{MJtp9#9U1U)HR+R*<)_r=jxOdY8{vn
zH$c22n7!{MIyYhWaCDy@z0-rZyCwxBJ=y)EZTc)Et2NTQ(7C9ps-8eyU5!h%&J#{=
z0dguP?n?N_O9Vz6QP*IO<2Y>r9fS|bVQacc<ofG59id{Pxo3QQyb4&9CF!8l4hICh
zL@}F7BTjEa#h6efp5e1+&l;XR+jJMRGvSA(qTqtkb32iyj-9#^&*~BjOh}t9BFogK
znqBgDRcSpRKHQ`U+lk!F?ES~P66J&K6_`(pY6(3FKK+Ul!JMo3!w)~~5eyx9s89Vu
zMywsC$k1VNXcNQ2Y1J2GLD!PPIS~2UghGKj;9jDV{QS0lH4-w=r@|B&I4?s|cs$>S
zt)=?ZZX!p8!-!22EkZr=IN*}Qz<ZCWX_l3jmy@i!UyW-@Y^!Nnyp+}vN64<gjXkSd
z_wXSIQ*RKRIxwurvmtWUNe`E!Q%4d~3~)`zaqR&?uq<Yr#$M(}exDfKBOk*oo4p1d
zB808g9ZoV2u0^)A*)Etxs-$9chX6ICGFBU@6q$COF2T+0iE>IVP2z)1+*}H{D{;a)
z9v=O@V}vx#HYvZVs!9PSK-eK8F@tp;r?1WxsZr!=)k}|a;04kxyjpXtL{&Bu(NtUk
z&bZ((M`qIdQ9hMIB%i(5_a(=|;vhm16`svMK@@wkNvE5wL|1Yw_r}i`3FsB32VT>M
zkbfYFT8mIDqBq;HwjcE@Bv0PfmWpXqh#|^VxKC?Dk&4GB$}auSuv>2{rt{(UXSk?i
zd-I?moG-=rMHnu8D^i03Yw~pX(4pse6P@J6(;c|-%crK}oPd5ImQWN3$Ic7zJl<lY
zw$Rb`1cEW0DzZ9qF0P*9B>0dOEK`+14)I|*Y)uJG_@4Mr%j$*FsBy-}AIX?#@3obB
zrZFIAr7J@Trd}zNn3|e44iD!e?MI0ye6mon-pG1K8C*B~Dcb6c33KR?N$5q4Oj=6v
z@~ZS!28jCAK$ifArgdI}oRuqY*6YI>OC-eNG+tWN1$+v*nUa!Hf1I-ei4GwfsnvI@
zeT+r=gzhQ>oFq?KBk2;k&5?s}DWTRF?~r;&9C)0WxUa8og_t2+jbc~N?j7mt?tY0o
zOdqjg!0eh*%xsSg9}+84?+6{cI&<)%yoMDiBh)X}>gFCnxy;kk6AeyxN%VtC)MMfA
zga85}=5?dlnTL*5+s_3dDn;y-(c>jOJzkiX@(BF2S*JVPb((KJst5rjMokwbaxn41
z5v@CfDL;OS41|5?sSq|K@^vLeSZNSzq2QyUkbR%&<mm)H^?yy)9GhUp6sUM)EZJR6
zZ{<GJc-JmP2+23rhRTGGRW9@KcPP~+1=N~KjS&gLPL#;eF7!gz&<_CShERF^1Z<uo
zvrV$_#WxCj6){wP^B@}G<BuFdyar*DUQ;UX@6R#k%T{)t!HXuL*XR$Djwj0h{Bt)0
zoR^{u6!w(rLnVVeZLuBm_w)M)p7^CRDs#bsVv)C(S2^lk$0?Nk?YXE-V2)&oG=EM^
ze3m%20}uc37zHPuYVx||&YgM$>AEr+m5rW;(#gTg)zZO@Esh1Fm_8!VMDyS_d>=)k
zJ3qNh;@Q-yiv&M4qA@A8SYvV4S=2waAM%KnpW}ww?1T>51|ts0cO#|j-N?lNp^=FX
z&xt#1lr|420`VKHEsMli6GpX;MTCUX^=l+^i4)N1Jjlmt%6Y6gV67A`5Wa;3!`W=r
zCDlt^WRBo@W{p&awF$H_Xc@3#P^ZzMwY9Z%zrjoC_e8?9ip;v}_VCdGfd$H$cN29L
z!~wWx%6DW>l5c3uB*O>Grg5QgsJAL~V)9uOVxc1~SygsRBnYE}&k<bHoVfyLHmN!x
zhhQc;qcaiL{!7{3|Er1geL-Pi!vuc(JL~HdVc`Em6XU4p{relGBwv`|j=i5GuY?ln
zG^#3qY!&(bnE9$#y#0JKnaN57E<$nq{Eu{GlNpyTUHU6$9w7OzO#(UlKc&SEEW3lh
z32BrcBGQj_7OX3fa?aTdJ1i>Lw3L;tVF1<o<`)g*VO}4WMsd{QcgCD8IO-aG<g<5l
z5UpYY{#^YMi_HiCE!6Za4xHlx>o^w7;GXTqGsA3}4@oC5dDQ5%4kc*^2=7M8FRTVu
zS#R$_Ji*^QOmh31Gb=d!Fc0>*q_EC*Zvm3x*Vj^{0C25L-g+;vDrmD4)YjH&PkqFM
z#huEOhA}`Jfu0CqzkhA52h<i@IVrKTP6PMiWng3A;Cic_>MUG<H6_*$Um&Lk%q^s|
zCW>v#O=vtUo3ZLjOTP(6^E}^aT@pj5!?|mEOww~$XNY|dRXLXT;Jb|H{1V2GHo&Uw
z?ae+(0es`3d~-JUEWyQO>jta>6iP|%QjnG?(UHziAepr!>F1xZVwRevD#JRh3Zj9j
z9#d0nkgsK>bg*$S@6X7nXd(5liGm#|b}du5g{VmjsQnrD<ylUGd(z1=Yb^3%ugA;C
z!-&A0*i)mg_(tQ26D1Zbm2Gxc1}l88Rg$YKiv;0p46Pnfg0C`^cnFw<%WJ~Y$Uq(3
zP{NX3rtyu%wND!+`-Fw{&OC;=^SyZBjh&us7vfz7)7r~l3my(l2dcP+*^X{|-z*s>
z{TetlGB(t;Y^&p0&uPiS^p|>5pfYJRRDN0XkFRJ1AZs<f)T9;L_Do7w?|=K~f&y^$
zi$~ky>-+X0AohBi+CRSJ4GW8(8P!iSpBTH|i~XJR9cd<{F7Y%Q9PcafCf%LiFQ%G8
z&gV$w3aqEvFKJcTtZ#tc?vTf$RxGjXsfx2NO#HfSVP4degd`5fM9VqU&em7QGx~t8
zp5C*VX9ytfcD}L>ZL^i7-M+LxIQVWtV&XC)Tg&QKx6kxktZ|IE?1$~H#HMNn2(Q%q
zQlcus?8K`R3r_9YFvS3J)Nid6^j4(BKBTnUGbbM#vlMXJB6VTihs76?eMNk6|0_YF
zcz$~8X9!(%jE<A7X9X<sSZ{ikc4U?Dx_gC%9v~?hAL%pIOp(<miItmkrM|X9XWC-1
zO?P|4<KM8h9Ca-a?L^*LTG`NW`3pPEvK`<Yd&$@hOHd+?$3W73PULr3k<U1EJ4lE7
zdN~VGXl=Nn+8(FXyRhn<!*(?FTx9`pHS15ls@#aM7g&P2y;QBtS=kAkmp=g-ti!b4
zd_=x&IrdGOuyKL8_|?oh+1HZ1sdR*FBMC%x0SuSODsCW2CviPYs|n8uVktafVQ0c*
z_-!OMVV3Hh$hC=q8%u8~<!GXDaE}K;K1N;MHYUV8CXsesZhrorS(?^=DueYcL}++l
zot?^9)qgUamc$uXiMi^^KivLI*B%cbVXv$7l9N35KsMwYMX%X|^_lD0*~oe9Wiv?~
z6O7^)f|1Klo1Jj$*ehn@6_P5_WwMO6YQF0)2py_%LI;#8?BEm~!md}fBNenzhz&z@
zA-P#jvYIS;@~mvAj9!q^*x0CyOr?x;*MAkkFMOj6E@)EN@OVjje&|%(9TfR1vOCUW
zJFIxTcf~l;r**Ax#5?mR*LoVaz(Zg7(fQ?K=|A2II?n6D(X7WA#+cNWy~g}0jDO9O
zj<Ga1qv7XH>lr|`)VwIc){kjN+(I}iaGl~@N9!~}6RV8Bf1h+*8<YL9WynH*QkjCO
zLw$`SDeyg4M@~B)J$Ue-`*CKpJnEz_M4d8r#>DlNzkS&{;5mdmr$f$xu=%@x#nxh4
zv5!7t;2xybsHwg_?mj1FE*2eq#Up39*fe-27QcLzWH%kOuA?{&xn8c5u##mSJp3yu
zTb9O3Cz_z=$6iI~H*jPFXZ^6rl%JdX95ruQ&8oDZ^490i?ZR^hwYl@$eSLk0FAK*e
zWBIcSL0wN@pU&vsB|B-nC7I8%v0qn~hpSRMg>L>*e}8{nS=@~2V6$Z-&Ea||DIsAk
z(9SzPGh&0WTk+EO6^4_+X8R(K`o_j1i_j0ZI!0bY<hOEQ?+fe~V;KS?h53LWTwY(l
zEj(j7d~X*a4@9KI+JV`t|3y3gk4o@6Ch5R(!Yrl-(+$IEn1~r9FS~0I^x=;h-12mm
zhCJxCcXiTtbhs(+RuZ?xdpAtz22b1Lm)3!Sfdi$Orz%1JLX*ikxw(tumD7_ZA~$s?
zoxzV5*Lg}h(^hdL2+2xP=FvOt7mJ=4mn=2F3p;PtUsolq6S!5Vj{9~fA_${wv0yUz
zc|Ug3-DI8@@K*0<L`$!!iZMGXS=pQ<KO}mi1U}Xld(QJt9=CdM+)CE^dQVJl$PGUi
z@i;v;{;aj_MyYSj{Bmp`TpFvBX2^?6`uMT}zR?iJTI&oZ9&gLzO<RI!k}Iy^`NXpR
z=*RQ}QwUO4fq$*8{@=tJN~B$@z*WWTVO3*mgTW#(?tcLh_{>FbgP*?-)bzJ2aHEI`
z-MH}r9;1FRSPv)sKc32av6GzsKO&4zr=XI5`u8zXp!>JxN`Is2un4VxyMcZ><&%*A
c#ULP4+duwWZd+)d8qv)4R-0C5Tk?+o2Rv{PcmMzZ

literal 0
HcmV?d00001

diff --git a/packages/theme/assets/favicon.ico b/packages/theme/assets/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..a7d669098ce81a06c468f5eef5265ae92a858283
GIT binary patch
literal 457
zcmV;)0XF^s0096205C8B009690J8xA02TlM0EtjeM-2)Z3IG5A4M|8uQUCw|FaQ7m
zFbDzw007uvZqNV#010qNS#tmY1Lyz%1Ly&@ds1rv00Cu5L_t(|ob8v(jl>`fK#^;p
z28y5!nn)ScK@k){7p{N{4Y&eU8fzn@d<L?RWF_7)8kh&R!3Z&#OeXIIhH=rR{}TT)
zIRGf7^Z=An%|Za+z0bpN&eb~c@2s^sXYaik058>A+Ymea&^L|NbOr#PzhQ7n$$LMj
z(1Z{ngc##RA#u9shDnPdql82ei06f*luD`cZypnZ&qt*c5jp3il=WJ}g>ueBWUXbb
zuMxaMh>0;S%d!^sSD}>BSRn=xjWMs-p^^~7npn>Z#UgeOhm4BsKH{bwqU!p;L&$qy
ze?pEG3L$8%D^&&xZQF^5ua1=q9sBUxzLo1jA%qt-XoyHeYwh%cZM4=zRNKPx80TEh
znfIwXDJ6b*G^B)-5)rr8LN5^U{6OD#GR7=>@FVFQzD9P38)KSnj)31Iv1S`M1$)-%
zQH@9`Yo5$y54oLW2=J}E?*r=2o5^G{`G@=fY5NKH>%ZqO00000NkvXXu0mjf^8>x)

literal 0
HcmV?d00001

diff --git a/platforms/web/.depcheckrc.yaml b/platforms/web/.depcheckrc.yaml
index a883e1be8..0293a8f70 100644
--- a/platforms/web/.depcheckrc.yaml
+++ b/platforms/web/.depcheckrc.yaml
@@ -21,6 +21,7 @@ ignores: [
   '@babel/plugin-proposal-decorators', # Used to build with decorators for ioc resolution
   'babel-plugin-transform-typescript-metadata', # Used to build with decorators for ioc resolution
   '@babel/core', # Required peer dependency for babel plugins above
+  'sharp', # Requirement for @vite-pwa/assets-generator
 
   'eslint-plugin-react', # Installed by eslint config
   'eslint-plugin-react-hooks', # Installed by eslint config
diff --git a/platforms/web/index.html b/platforms/web/index.html
index ddda3a29f..7b9728ae5 100644
--- a/platforms/web/index.html
+++ b/platforms/web/index.html
@@ -9,9 +9,23 @@
   <meta name="twitter:card" content="summary" data-react-helmet="true"  />
   <meta property="og:title" content="JW OTT Webapp" data-react-helmet="true" >
   <meta property="og:description" content="JW OTT Webapp is an open-source, dynamically generated video website." data-react-helmet="true">
-  <meta property="og:image" content="/images/icon-256x256.png" data-react-helmet="true">
+  <meta property="og:image" content="/images/icons/app-icon.png" data-react-helmet="true">
 
-  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+  <link rel="icon" href="/images/icons/favicon.ico" type="image/x-icon" sizes="any">
+  <link rel="icon" type="image/png" sizes="196x196" href="/images/icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="160x160" href="/images/icons/favicon-64x64.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="64x64" href="/images/icons/favicon-64x64.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-180x180.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-152x152.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-144x144.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-120x120.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-114x114.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-76x76.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-72x72.png">
+  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-60x60.png">
 
   <!-- Pre-connect JW Player origins -->
   <link rel="preconnect" href="https://content.jwplatform.com"/>
@@ -20,13 +34,9 @@
 
   <!-- Safari web app -->
   <meta name="apple-mobile-web-app-capable" content="yes">
-  <link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon.png">
 
   <!-- Chrome, Firefox OS and Opera -->
   <meta name="theme-color" content="#000000">
-  <!-- Windows Phone -->
-  <meta name="msapplication-navbutton-color" content="#000000">
-  <meta name="msapplication-config" content="/browserconfig.xml">
   <!-- iOS Safari -->
   <meta name="apple-mobile-web-app-status-bar-style" content="#000000">
 
diff --git a/platforms/web/package.json b/platforms/web/package.json
index b56b735d0..ae952b895 100644
--- a/platforms/web/package.json
+++ b/platforms/web/package.json
@@ -22,7 +22,8 @@
     "serve-report:desktop": "cd test-e2e && allure serve \"./output/desktop\"",
     "codecept-serve:mobile": "yarn codecept:mobile ; yarn serve-report:mobile",
     "codecept-serve:desktop": "yarn codecept:desktop ; yarn serve-report:desktop",
-    "load-content-types": "npx ts-node ./scripts/content-types/load-content-types"
+    "load-content-types": "npx ts-node ./scripts/content-types/load-content-types",
+    "generate-pwa-assets": "pwa-assets-generator"
   },
   "dependencies": {
     "@codeceptjs/allure-legacy": "^1.0.2",
@@ -50,6 +51,7 @@
     "@types/react-dom": "^18.2.7",
     "@types/react-helmet": "^6.1.2",
     "@types/reflect-metadata": "^0.1.0",
+    "@vite-pwa/assets-generator": "^0.2.3",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.33.0",
     "allure-commandline": "^2.17.2",
@@ -63,6 +65,7 @@
     "react-app-polyfill": "^3.0.0",
     "reflect-metadata": "^0.1.13",
     "sass": "^1.49.10",
+    "sharp": "^0.33.2",
     "stylelint": "^15.11.0",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.0",
@@ -71,9 +74,9 @@
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-pwa": "^0.14.0",
-    "vite-plugin-svgr": "4.2.0",
     "vite-plugin-static-copy": "^0.17.0",
     "vite-plugin-stylelint": "^4.3.0",
+    "vite-plugin-svgr": "4.2.0",
     "vitest": "^0.34.6",
     "workbox-build": "^6.5.4",
     "workbox-window": "^6.5.4"
diff --git a/platforms/web/public/browserconfig.xml b/platforms/web/public/browserconfig.xml
deleted file mode 100644
index 35157e2c3..000000000
--- a/platforms/web/public/browserconfig.xml
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="/images/mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>
diff --git a/platforms/web/public/favicon.ico b/platforms/web/public/favicon.ico
deleted file mode 100644
index f3f6f774e7ea015ae82f7c81b3ca767dd4086e6f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 15086
zcmeHOYfMx}6u!Jfi~<Hte4(505KUB+*hJ%_s8NhB6qMo<qXje?V~I~RuF(|zVPY^E
z|EP&Hh7?Fie8d>F^p8IP4F%g&jEGXB&<IF@f?7_`H+9I;_3qxg+}*pIGRe1dUo+=B
zGjr$8oO4!D{FDGCK3?J6q7=p`$`^{FSS+8;!xg2DuZ44t``Lkt@-06Q$IoyPC4+(M
zB1Qk3sr)AJ^-@MRgS;3&Gq<l8K@6D^`QTTEH}kgT*1}wK7|<b#QO>Zv?+eGx%sHKr
z$N1X^`J;`i7}Y+?9sGM3fB7(fUl`{D9DQ$Y(%feO0Rc2_+&GGgiqeee=x7=-VuWTH
z?tDMP!^7#ujT`jx<x8rsuh)czh6Xx%^r&0;`}z6Ngb5R9@#4jll9EEHsi}6r^^A-R
zdj9-5=}pjCtzO7ly?QmxnKOrm4<D{uPmGE6>(^6FO%1iTw^LVFmnyouyXnJ+5A^Zl
zM_qXT{=LIGA+xo$m2Ta-MboEG*QEpWe)Z}VRaaNj-o1Ni%a$#oozd2w0%V>#b&B4;
zeM@)l+|l*EoIZV;nwy(x(V|7V^fvlE^Y`~BtJNyTz>+0PG;_Ip`7+hk)>33-q~<b4
zbC>lcCnpR3>(;H)%mw_PJbB_3{8z17HNaov_ZQ<;_PbHJC)*$MHs1L`g9aI<hbQ@8
zxNt$tTj$T8r}+4I!gr*<{oqOd;4M>KT^$`ec8n|*OTTn5i$C<hH@T{+igxVSK_f?w
zbV(00`OCh*8sq-``?PlLS{gQNm@YlMfxpzFt*woUi;H!=<KDy{dSE?x?%X-e>q>9o
zkM-o;yLV~Lnl&_Z=upjL$ZY<2haWw9MA_Ndy4H|#-ZhJVPfrg$d-hE1v#<}6eDvmK
z@PG5>4dv(O)08PwsK09pPx8lpqo}Be=FOXD*c!r<{Kt<UuX}!XHl94m-x(KI?*E_p
z!!G4Yn;BWgmG;Nn(b(8XGiS~;o&TOad#IzMgI26qp_vPwh3)0`?c20``Ep@Lnmczc
zc@nVUY~Q|}unvFt@F8Jt(Auwq2M?x0hYnFwQ<GS)ynFYK%s^*nCp~`rn39r`G;^0a
zVh=cb_H5d<YZv9_=6W254<DwjTenh7Obo%6DR~X#KIf<O_P&E3)!R8b;#cOw{JWTY
zCZp3wb@+jKhcdqNLH@rmXT+Q!MKYj+FZi+%>rlZ!%!zFZ<CCu$KQX-VokrW%Fc7bS
zm=lre@f)ltWyk{*#fsbyKLg2#7O;M*MC9DAWjN<{Zbi=RjyNp~<4Z<woK`rW*e8F!
zl)|WGIGT@*yw}9CzF~wgk{AsPBkR{vR~yR&haXLlE%`OF>~<67OCAHchVh4e=jP3u
zY15`nsz3}!fBJLCkRdc<#td4pV1XS<OG~B6TQxs(<_yiBKfkx^!i5VdF)@)QPo7Lc
zK|v0=A?5?VChQ9zJa}M-%F0UN_kiz14dvzKcI8kPY_0qE@29}PKvfR#CF9v?)20cV
zEPN}rKx~XN*gh|hBO)Sb>C&Zw1N>)d{ezf>D_5?#WnYH2g|Ed?>;dG%NA8Y&A>`k?
zcdy^_VFPd__Qfdqv9Ym)_h943jk;`_M#+zhixV~|_&u&)zb@jCf`fxq$CMmvM#_gB
zU8a_n7BOZL5)vHxh214z@_7CFHNmzK5)$&+ws5C>^aWypmMvSRI>)&~K72?O6%``(
z3H8gq{#<U9{7I805&Hk>)2Fm=-#!{MW{g9*l8aID;d6ow5buGWdCDmHkm-u=NUQuy
zmoDkjOSZ4GJS;3s_(>hj|2uc?q>_>n!W`?YKE3zHjvXt$tymkVm7O|uD&hNm@!~}~
zaNqzPJb2I$pf32&Zr;4<G+qL>*|TTQ($%Y14aLcmCkfvUHQjBm%Q1#=W)y7e_p)QN
zZ3^F;*dD*J?080{2^_HJO=Tc~LlMIhebK>k${5&p`}0A7)db57WI{IV6fjFz7`=9i
zKt8cgxqRtQhNgGe<~i7>@)@u>=q)RsSGD8X&JWJMhqw>lEA}9mYtz!w=-RbwR9ILj
zP*6}H{E68A;F(dQMoIZ1$A1YBUl0EgfcP`a(fA$%IL^w-68E-k+eSx@9HG&pNB7o&
z_yxr6YHbJXb#3=cD8F*$%0A_1&6*|lmY>rdYjkJj^YZfO#fuk$`+wt_wU);k6u#Kw
z$B*}k&(Ko-#EBE)o0p!RPNAWpeRR`Oe&WQ5cKsyVcf*Daee{Q)7xDkthvOR$z#j?7
zbD85>W@e@sC$c{5XLE9L#6B8pKS#hfclYkyb~<6Ng0+wqfP<9H`R_Kzw%4^B!`7DN
SVjX{Qxm+v%xSFhNAN>bQqU`Db

diff --git a/platforms/web/public/images/apple-touch-icon.png b/platforms/web/public/images/apple-touch-icon.png
deleted file mode 100644
index ded9c521d6ca9505f54727a94ab66df6af5fef35..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1375
zcmeAS@N?(olHy`uVBq!ia0vp^6F`^)NH84I-J1fWSkfJR9T^xl_H+M9WCijSl0AZa
z85pY67#JE_7#My5g&JNkFq9fFFuY1&V6d9Oz#v{QXIG#NP=YDR+ueoXe|!I#{Xiaj
ziKnkC`%?~9Zc&zvbzyx#vspY{978H@y}fhSdvc%*`-k_N)3+_{+hXY|oIFvD&C~7X
z>_&4}p)x_vy%S1qx;i$R|78>`5sqbXWGNLCbzK=@$$QkuRQHqWMUnJbdg-(Dv;CHz
zzufB9lD=u)bD3`{`|m$Jcg|A&9N+Ul=jLtp+-VRtLy1>GppnC6fd?~(ivp9N#w7+O
z!43zOE|UfamPfMBL{B|>l&r!SyQ=seC$GZqd2d{9M=3T7%#p~<mEaE4*tlPQ(;KVJ
z7uAv~#GL2;D|&xdXS0W2>RzeZPj}q9E%;TuFX`>HmN3hB`!V?Skxa3}vkd=N&iiPU
z&FA^s{{{n#6?=%`<H^%fS##8FuJ(M3R5-q|f}!@iy$^@f+#Pc!&u;jUy!PG(hoEy|
z4DVj+b}8`xxxYtz?tyD_PCa!#5+QN@$xO!kbJG&#95VMkW<FDyJx$!up=cM&7xT`U
z_TCH4zA^{xk`X&0!mAN$tYmw@XF8M1<|_WcgZd>63|HkBDTsJHShb^wz3ui}PLStc
z$SYZUGMrem_+94f%hNQK8yA(O?ORu8zj`t2IfVmZ8x}9zGCTXx5`GpH(Ptt1f1ENj
zy};e1`S#4c^skGLF)}_oGilFsUHcwprYE&G^H<Me28wND-+q01slEg|i$&j)eQQ3v
zQ2%(_>deWb;oQL`%lF-J<7mkIymZ^A^2b26f!5nhLSIDh{@K)U<4<mH|F7m-(hqo>
zP6kehe)cItjq^nNlOvnM`_!`M-gOc(sr>x&bo-+%SD*fysN0sBer)z`=BTVLuf*qj
z<{vW&6)|=?xbT+x<6B|5f(l22<L|9DbroWmwQlu`EBihdv$Nik-}dt4AIs*nyZ!fl
zUU_BgY-(aQU3$Ot*>xMod#_H#-Q^TCpYUqE_WMt-^V@|z=KlV%q4~7tG=7Z>;ZcWQ
z2ApMH@@4m`wjTvM8r)*n@0er$qv6Vd)m?df#WR75UshcBHCfqRf5qR*w=Cg(b`yS2
ze$AcUXLq5wP<A=D-~z#ab3(uA>VT46D67z)DK;hS{|_e@g)%0H|B0OS=0C$Pz8RZ@
zjx-5v@;ShNELoaO<Hj-u%~r9Aa^8tt3-+X^aQA4(dp&3n-4y&%a6*iZYe`@rk3ng5
zMWvwj-xq6bxz=cx***W>^Zb2*h)f4#!0po-$&EFskuM$2Jgj-&G@*NH(IQcXs#7&R
zLC<X6GQYDfUvTiJ@H^?=HCsDs`wKG+O84?i6nwMi<i5j4*%Ego7S&E!(iPeB?D^m3
z{=Banu4idp@t>^fzRkFdxtMR|w=)~8-bp2g%YWJ#?e3f_J89Z|ujjGcuX9z`n{N4g
z|IIg+U$V3Ky5hnuUQT+#``Gt%_C<LH0bm|e0%be}CP{5*&T|ANL64F@OwtP_-S_U_
z?++{@R7+eVN>UO_QmvAUQh^kMk%5t+u7QQFfoX`Lp_P%Lm4S)2fq|8QLAD9cJ`@eP
z`6-!cmAExXWo}^tY6!0ii6{w5ELSKf%1_J8NmVGREJ#(zEGS84V5pe$_!AFDVVH)-
zDgV=FJf8+JFe`KGC36ca3wuu%VHQ?!X)rmQ!mPYGMB(&}D<_VeIU;j}{d9xJ0xvy=
YSK@*tpPWpm0<B>1boFyt=akR{0GYK$r~m)}

diff --git a/platforms/web/public/images/favicon-16x16.png b/platforms/web/public/images/favicon-16x16.png
deleted file mode 100644
index 5b39072b229704d92a672ad08ca0036f6c6e5a8c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 561
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6SkfJR9T^xl_H+M9WCijSl0AZa
z85pY67#JE_7#My5g&JNkFq9fFFuY1&V6d9Oz#v{QXIG#NP=YDR+ueoXe|!I#{Xiaj
ziKnkC`%?~9Zc&aMC#04Fg|2zJIEHAPuRXs}k0nur^}+l9>6<b-TAWO*Y#7$M2Y9=b
z$T_@pG`Zc8@nYLohN|8=XP-^2H#VfG&x}tzbmoNB_FdoSRKK^JQ!yp&%88lvFH|Ji
zJ1x2YB_(yu33WGG>Fh2neynJl&F+Z{oz}2UO_qN5lqKIw)oia;UEZGVUe<z)2M3bw
zw*Crb-YHwVylQPExAXILKIxondbTB>o}9HWpSxh|gOl@8&qNDN*fXQ++8rg2gS$kh
z=Kfaly5830^ilVPoUg9<#TVOGhOF9lvft-?o_2-s{9o}Cp9Ts<tk}d1^r32rYeY#(
zVo9o1a#1RfVlXl=GSoG&&^0g(F*LL?GPE+V&^9ozGB8*(CG8Z7hTQy=%(P0}8t$IF
zR|eD&UKJ8i5|mi3P*9YgmYI{PP*Pcts*qVwlFYzRG3W6o9*)8=4UJR&r_Xpk4Pszc
z=GIH*7FHJao-D#Ftl-jMayW%qd2@)u=^Iy09657D<_P=g29E_^dJM0`1xr3TnN9^-
O!QkoY=d#Wzp$P!ak<4}g

diff --git a/platforms/web/public/images/favicon-32x32.png b/platforms/web/public/images/favicon-32x32.png
deleted file mode 100644
index 49c99170fd97eb76b8b69b6bd357d5b500659302..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 738
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE0wix1Z>k4UEa{HEjtmSN`?>!lvVtU&J%W50
z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+10f+@+{-G$+Qd;gjJKpuOE
zr>`sfQw~;cQH~uaq?R%;Ft&TTIEHu}UpjTaK69eXG5hP&!q_#HJ5L5QzY1XM?h|T0
z*uOK3xzpnhYtrV9BMNMjMJ8_AxZ#Dvk%S48JhWt^f_zt9`c=4o;q$8NyY78`S2_Lr
zr+w$2?|VP_{atQ>wD~rRjs`xOQy3%gY**^%`xR+YkG8#KI=I(mo}P?{lf}kn_tTSf
zW<B}Ou=vcST)_!x)2IC7P~5ij;mIK0CXTwKJuA*L8S3-3o-g{g_fb%fW^wq`M@t=!
z78Sg&xv=a^>{gDild`;dFCEL>vASQhNzBNQ<wxX`mei^@Oe`19OK~Q#ykS^XB%Ii7
zA)J+=%fzsU$7o4z<XoGyZ%pnvMW_8=GjwvL=M-Gr;>^Qn<jLm|V6yUpz=X6u^Un=E
zjH#!@-uOoC+?lm|Dwok20j0%y9cp4T1)27|VqETW^Wu`b_X@W8@4LFQ-}YU|hEGQJ
zj=rb$3?kVho=cc3C{BLbxW1|(?l8|4U6o1`kHZh+Zyws7z@}lz8e{qC`JI%`OPQDB
zQbc2XCT=R-_$*@4WAS@#cbd#6f2{<@l4^--L`h0wNvc(HQ7VvPFfuSQ)HSfsH82e^
zG_*1@v@)>JHZZU<FjzAs?G%cJ-29Zxv`X9>?w-6?2GkH<6%tVrlvu7%P?VpRnUkte
zQdy9ykXcZY%)n4F=kX^Vj>0evjZ^-o&v-r!VqjM0)=TCVRu=Z2EW#|T;L>1nIE7hx
tbBMy}8&^&oIdeqj2>a;<j|E<O46nomOFlW7P6b-Q;OXk;vd$@?2>{dFAl3i?

diff --git a/platforms/web/public/images/android-chrome-144x144.png b/platforms/web/public/images/icons/android-chrome-144x144.png
similarity index 100%
rename from platforms/web/public/images/android-chrome-144x144.png
rename to platforms/web/public/images/icons/android-chrome-144x144.png
diff --git a/platforms/web/public/images/icons/app-icon.png b/platforms/web/public/images/icons/app-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..968b0156035336ec7f6e1a23526e06e64ac982d7
GIT binary patch
literal 11622
zcmeHtcT|*Tx9^@JAWE|!fe#oIHBk(s5iuyt1jPo52nZHn46%U-7J8XiQHcUkqd|~R
zB1(-6h=QWP5F^Hdpfu@Y2_PL27+}iT4`zMm-gVbq_dDx+IrksukKvv7X?yQym*3u-
z)0;P~RZ-Sf1^|`y>sD_8VB#Yaloap}Uw2_Rz@kO#SAXLWK<jDF-R@Es_wd!+`BrAX
ze3>9pjxzH<{w#yJd%@|2>_U3wOjb5`b1L0;{oJNI4BvN5Cth{^PY+wy|FG82aEE30
zk=hpdNND2Vxq+tvWv7$eYrXkhjsDv`IVN}%??v%G{3Coj8NWfDOTH<flRr##^39^i
zH_!-qpu{5IT%eIZbS3irX$cD9lf;NBd{P(`!Y6wns_@BOpb-8(Zz)XD@tKpAmE{#0
zS`<3^=cPQpOVaKg+qT7pIv4B7!a!8D)6K2I!v3pjx4JZ0pddTj;$4MrVBjc6F3phb
zWkw!uZ?CXb5ht7d;dS7^Q`NDdJk^(~{s2$x4<%d7nl-CusH?80ySv+|6aqLjXh~5O
z@7S@U=XuK7yj2{4&@Au?3TkjI4*7ZtT_~RhqLR*JdH<{X`FHPnM(F|X_XP?L%;gpq
znhcRH9R@l@B?SfT>p37~I!;|~W_I}j)G^o12lb4^eoo-~tD%GCroDp<I1y_*$w8f3
zO$WP9ky}KVyA0rt$23uW-d;;M#Dv+)#SG}*VF~-0Fi)^X+Vw+;9Uq`2EnDHh!Gp_U
z3yrmH92N})4|O^Q54=8kA4%1BC^0P#9NaT}_s!T?P<X}?n(%G)F1bjQ?B(T!5m4+<
zk;F-IQMp}Qe2_ht4i~nJNJd6Rng<m@lvf=_6>5rVj@g`E2sW0wV%trd_S~v{r4Lkv
zqy07CMaePi?mI}{wO53NYh(p)_jT*a5)^v?_{0~>#=7bmseEadn@ZWUnXsm3;LXFt
zF$S=2M@B~G7ZvqvfRr|6NO2SlXZh!wNpR%mXmv(`_2NBrNO6deZy#0!h};q(9~>O4
z_hjsfV#1pC2a&T><p4%j8<T1csXwWx^K+@F4Z5<Vm4PoXn8$g1%^MwV^wx<w3BrBL
zans5RqmH0K<*I|$qzDvMkb{QMlm6M170}UAT6&B~s5vtfhJ?yN^P%!q!?1TLVv?dP
z#jUfU=*T4MU|@|tfcuT&VvF(p^P#A4aIig1A)&sZ!DIgX`6>WqdyX8*OGrpC>4*ld
z|5hib#?jHy197-X)J9#|LOR!bCoOrQub7W_GT!ATZ$L7mI{h17FMuKq=-A*TNh-0O
ziTh-Rr4`+~cR=7)a<FoW6Lg#^&j7G_G&JNJ+%GCMVsh1(P{`JoCY`mWfpEr4MXoLG
zJY|iX2C-LyghRtUjl<3UttQUPrh`$!bL2Jk*KGQ)*RPj{{k9|yc<(lC+H~)|8c>hM
zp18?ggh>V-*876<Je*xqog}OK?b3pxq0yfAm(Z@%WPKssN#o0+4t)`AWyTKm`_0Jp
zf%pWAbE>2uW=Q@<IzH0qHGZ)qX0$cjUK;$|k{iT=90%`~dvVpqfkO|%LPDB0+1fTf
zcyMyDF;F_`&6|gkJJ5PAoT05<yVh&(-n7yiN?=reF;P~xye@BVMU*cMnyv(Gc38~w
z_V!+)7VR;M`T}CCfVaO)_Ms%PS6@#rzr7+U_=Os<bAkevo>b>4Q@f{u^O?mQseivB
zI46E_0_?#kvH)^sxHn7O9t?Z)$9IgkbL915;#Uz0ApEu_@mi49k@jZ^+n8E!`Yw96
z7W?{MyvC*pe~TV?$Di4tUGv^b1uD-f!}$0((O54Vk25z@!REq^ee=Nic6fNWUGxFR
zU9$03d5cWi$2SESvs3H{8sAdn8W<WHy0i-Tqfgu#&T?cOucl4eOQ%j|hVvK6b;8FK
zH+T&T?xI0|@H$WhLwDPXf=9HCew+-NnTax|gdUe@Nu7&)!DF1@ZK1Mxq^kr?sP^t<
zdVqB7)))4gkC`yV<dl=V<`w_Qk*YmgfjXb5xJlqz)G6D*b)luVuGnQ)yf25PqodQT
zFZ0a$6?I#9yPTia75b<}D~z*eI}<chN5-9fJ6c;>{KSe7OXaSnf>vo7odMx*4zId@
z%H;#~E<>sR!@H{5yxgMS&K;T#&fh0KjL%eFfwp8*_5Ats?($7VnXTs^<`~BBSI5!o
z*RR)RB_!ygaZ!`A>KMZkzqG{pyW=!z)X4yG|E?~(8lC{{KDIbfe+;kuOdTw_9VC4`
z(#mfQvX_JNjvbx=-=&B973t-eh8gd+vq2x>8ky>!O^5HkUa`V6A|m3t=`F=%z00MQ
zOi-wEhxF(C5g85MS6fheZYujUSdlDTV_YJ+F?3Z`hW^YO;BCfz{#oxyNFtL)l@1N>
z-s&bc-|7aSnWCpKv`nR;an)C;>w&k~SKRl`!anqQ-CZ6H{-|x7LE)8rg9Am2zIu14
zX$nvevLY<aH`1zSbG0smFga*J+|VRGx_^M=f9UHMxK@XMr9u5N8K!2Y8RrJ|MBbGH
zJgxbXN(|$CSin6s57_C6F>xQn&zt~a(p2TR*Gq<w@KW>Sl5@1&ZRgIV00B<6PODvL
zynS>C@7x{r?$0Ne(7l9ZrFmY-2KG`Kr4)mv-fvK}(x@<a<Y2hLWLV9Xsev$}dIlJ(
zL+m{>N#n%tSk1ZU{@%K{xDfw-F38!zI^|M%-}R{*f%iV@C~mU0SUTLOU_T$&fxU8!
zC~JdafpCBy-P?S57}*>@|C!rdXt$U}U_SY1{9jTb?#jrN^(->u-;*G92pbE$b*8Q-
zJ9Y@s5B{H2?Y)S8mirgxWRZzn=6@?U<KFA)>LP-{&j1sq{Tov}GatE3s<3Jr+4{c%
zlDUd4#i5P7btEU{DrO4=e~IK@%ej&n3l}a_Ib}#rJu2#LzWdkn$16%^I5|1}Z*TsU
ztae_{*jOR$&8=IvYB1jEfZ<1#k=`jiF&Wqg6%`fplF-Zdh{d;ETwRv|94teXamkuY
zNu|=^&YG<Jf`YoOTeoThByGZQIHS!#B$3=RM<9f{iO>etT(cBL&N6O@H}yV&YG=y=
zU~jO*G(AlNb)oj*JsMAs?y;6K#cDxFEWS59fG{qVwm?CN22syzY8)qY#b$$xqB<S4
z<_PZYMzewo4hB3~Cl|CBv<Ypusg=|m)0{+SE6l4y(?**q8ZV>JqbY!S5c;l(O@2>T
z_c?s{TMlxNc`~1ENCRp)uBn_OxA~TAn!AAcb5c@;=A`Uje_e|4)EYj+t++SM#C2DM
z$~2ssV?&2k)6rW<gY1&As9<v*FQYFuf^rhL-ie$nw8ZF4cDlFL>)ZU#(UPa34u?II
zMAL44z8N*J%m!s}c5@`XYda-HDxJ|d`_CIGGe3^l8luG94RJt)kiT792`azB9W3k#
z{s?e~k3SDS!VOV|m2+_H;I@<0Wu=$R&0Yw0kR%?M(0qJ+cy=tPRKanDrEW6<4j+EK
z9WbmTX-2}@+8A>77CbwL>#IvHtf!~P1Sl)iXkIB^XM;>uOr}_pDTaemm`Pu@Y?(F)
z&mn!zH<W2Z4cu{*9`P-erwdidVeA=rn3=sn@;o}>=imjDjBe&+h@{h~Mr4Wmu*GG@
zZB#TQc>_v8<DZw|<BnuSeQ$LPgd1@~w&hIvvx<tnk#r}bSVDbN6y8+?(UJ6pOy?O&
zAkn~+*7P=89YY!P8{lG_-&Zp41r0q80}%01%<RP&I`O(dz6$TkS~WY#TZZDC(a~xP
zTs-@9men!eMM9kZ$2_Er&<MEaaa1{Jp?{z2gtn-66d3S!@4iOM+3DZc;ziU2j+d_z
zj*bQfOT>p5>o5zc=XIh)c$##NZOH|bKzJ1C7ux8`x;Ai&7W3TQQ)o~%8wF8<;P(tz
zB5t{Jii8Ug6}1^8`!R2$;k+R(swAsr+GZ!l2>>lqJV*TbOuENx#7_bmyqSaJ`d+ep
zyykQkN-6?>hu|gn&P}$YP-<*d6oHTXOd@yc5UK!Gu?H{YgDuWGSiX{3eT8d);D*pq
zkgYkXwubPVtdEP>-}}#+q)daH5c1=5@2Nmpp!kHAMAeKg;R2(JXqdvo<mHx$moen!
zPvqsd<mHP%oH>=8RJd4;*52NpjZ#>I7DDy@DiG|z+bTenhe8unLLVO%6NGzF$*A6*
z-rnsvn6w@T*OXr2f_Nn%VL{(1Dmpq^fjx7ix7l+-<XYE|(?vouWjUGRF-Y#6?bphe
zhfds+(D3OhVM~iECXM?+C?Gd*wY#scU~upV@+mSU7j*cax`)Dz%~7Ty;vZ%Jmk<i5
zC=`;x%uwGfP`#-S9sl$?+>8Dr3{(n3R6%Opp!(+NH019b7iV9=Y*TVWKUro1Hb0>b
zUHa14SjXr^2#3m|O}v4ARVTzs3-CaZd7Bescz9SFY>wg5{uRR`BaM$9o!*bU6VZto
zn30wkDbGL$w~)-AQ*#*o4SHWofE055Ay=B4o9llhMyEBM%uw*4Cl50Myjb9FK*mpv
zdNNL8PDFI6>3E=0dKL}&n{W^!O(d1voeK$A3T(bRr4C$U6bnUjRO&CoRV*Bs`c#Jj
z9fZCdR$uXAo~LIPO*k8+2~)Njh~B>aZa5c{MJtp9#9U1U)HR+R*<)_r=jxOdY8{vn
zH$c22n7!{MIyYhWaCDy@z0-rZyCwxBJ=y)EZTc)Et2NTQ(7C9ps-8eyU5!h%&J#{=
z0dguP?n?N_O9Vz6QP*IO<2Y>r9fS|bVQacc<ofG59id{Pxo3QQyb4&9CF!8l4hICh
zL@}F7BTjEa#h6efp5e1+&l;XR+jJMRGvSA(qTqtkb32iyj-9#^&*~BjOh}t9BFogK
znqBgDRcSpRKHQ`U+lk!F?ES~P66J&K6_`(pY6(3FKK+Ul!JMo3!w)~~5eyx9s89Vu
zMywsC$k1VNXcNQ2Y1J2GLD!PPIS~2UghGKj;9jDV{QS0lH4-w=r@|B&I4?s|cs$>S
zt)=?ZZX!p8!-!22EkZr=IN*}Qz<ZCWX_l3jmy@i!UyW-@Y^!Nnyp+}vN64<gjXkSd
z_wXSIQ*RKRIxwurvmtWUNe`E!Q%4d~3~)`zaqR&?uq<Yr#$M(}exDfKBOk*oo4p1d
zB808g9ZoV2u0^)A*)Etxs-$9chX6ICGFBU@6q$COF2T+0iE>IVP2z)1+*}H{D{;a)
z9v=O@V}vx#HYvZVs!9PSK-eK8F@tp;r?1WxsZr!=)k}|a;04kxyjpXtL{&Bu(NtUk
z&bZ((M`qIdQ9hMIB%i(5_a(=|;vhm16`svMK@@wkNvE5wL|1Yw_r}i`3FsB32VT>M
zkbfYFT8mIDqBq;HwjcE@Bv0PfmWpXqh#|^VxKC?Dk&4GB$}auSuv>2{rt{(UXSk?i
zd-I?moG-=rMHnu8D^i03Yw~pX(4pse6P@J6(;c|-%crK}oPd5ImQWN3$Ic7zJl<lY
zw$Rb`1cEW0DzZ9qF0P*9B>0dOEK`+14)I|*Y)uJG_@4Mr%j$*FsBy-}AIX?#@3obB
zrZFIAr7J@Trd}zNn3|e44iD!e?MI0ye6mon-pG1K8C*B~Dcb6c33KR?N$5q4Oj=6v
z@~ZS!28jCAK$ifArgdI}oRuqY*6YI>OC-eNG+tWN1$+v*nUa!Hf1I-ei4GwfsnvI@
zeT+r=gzhQ>oFq?KBk2;k&5?s}DWTRF?~r;&9C)0WxUa8og_t2+jbc~N?j7mt?tY0o
zOdqjg!0eh*%xsSg9}+84?+6{cI&<)%yoMDiBh)X}>gFCnxy;kk6AeyxN%VtC)MMfA
zga85}=5?dlnTL*5+s_3dDn;y-(c>jOJzkiX@(BF2S*JVPb((KJst5rjMokwbaxn41
z5v@CfDL;OS41|5?sSq|K@^vLeSZNSzq2QyUkbR%&<mm)H^?yy)9GhUp6sUM)EZJR6
zZ{<GJc-JmP2+23rhRTGGRW9@KcPP~+1=N~KjS&gLPL#;eF7!gz&<_CShERF^1Z<uo
zvrV$_#WxCj6){wP^B@}G<BuFdyar*DUQ;UX@6R#k%T{)t!HXuL*XR$Djwj0h{Bt)0
zoR^{u6!w(rLnVVeZLuBm_w)M)p7^CRDs#bsVv)C(S2^lk$0?Nk?YXE-V2)&oG=EM^
ze3m%20}uc37zHPuYVx||&YgM$>AEr+m5rW;(#gTg)zZO@Esh1Fm_8!VMDyS_d>=)k
zJ3qNh;@Q-yiv&M4qA@A8SYvV4S=2waAM%KnpW}ww?1T>51|ts0cO#|j-N?lNp^=FX
z&xt#1lr|420`VKHEsMli6GpX;MTCUX^=l+^i4)N1Jjlmt%6Y6gV67A`5Wa;3!`W=r
zCDlt^WRBo@W{p&awF$H_Xc@3#P^ZzMwY9Z%zrjoC_e8?9ip;v}_VCdGfd$H$cN29L
z!~wWx%6DW>l5c3uB*O>Grg5QgsJAL~V)9uOVxc1~SygsRBnYE}&k<bHoVfyLHmN!x
zhhQc;qcaiL{!7{3|Er1geL-Pi!vuc(JL~HdVc`Em6XU4p{relGBwv`|j=i5GuY?ln
zG^#3qY!&(bnE9$#y#0JKnaN57E<$nq{Eu{GlNpyTUHU6$9w7OzO#(UlKc&SEEW3lh
z32BrcBGQj_7OX3fa?aTdJ1i>Lw3L;tVF1<o<`)g*VO}4WMsd{QcgCD8IO-aG<g<5l
z5UpYY{#^YMi_HiCE!6Za4xHlx>o^w7;GXTqGsA3}4@oC5dDQ5%4kc*^2=7M8FRTVu
zS#R$_Ji*^QOmh31Gb=d!Fc0>*q_EC*Zvm3x*Vj^{0C25L-g+;vDrmD4)YjH&PkqFM
z#huEOhA}`Jfu0CqzkhA52h<i@IVrKTP6PMiWng3A;Cic_>MUG<H6_*$Um&Lk%q^s|
zCW>v#O=vtUo3ZLjOTP(6^E}^aT@pj5!?|mEOww~$XNY|dRXLXT;Jb|H{1V2GHo&Uw
z?ae+(0es`3d~-JUEWyQO>jta>6iP|%QjnG?(UHziAepr!>F1xZVwRevD#JRh3Zj9j
z9#d0nkgsK>bg*$S@6X7nXd(5liGm#|b}du5g{VmjsQnrD<ylUGd(z1=Yb^3%ugA;C
z!-&A0*i)mg_(tQ26D1Zbm2Gxc1}l88Rg$YKiv;0p46Pnfg0C`^cnFw<%WJ~Y$Uq(3
zP{NX3rtyu%wND!+`-Fw{&OC;=^SyZBjh&us7vfz7)7r~l3my(l2dcP+*^X{|-z*s>
z{TetlGB(t;Y^&p0&uPiS^p|>5pfYJRRDN0XkFRJ1AZs<f)T9;L_Do7w?|=K~f&y^$
zi$~ky>-+X0AohBi+CRSJ4GW8(8P!iSpBTH|i~XJR9cd<{F7Y%Q9PcafCf%LiFQ%G8
z&gV$w3aqEvFKJcTtZ#tc?vTf$RxGjXsfx2NO#HfSVP4degd`5fM9VqU&em7QGx~t8
zp5C*VX9ytfcD}L>ZL^i7-M+LxIQVWtV&XC)Tg&QKx6kxktZ|IE?1$~H#HMNn2(Q%q
zQlcus?8K`R3r_9YFvS3J)Nid6^j4(BKBTnUGbbM#vlMXJB6VTihs76?eMNk6|0_YF
zcz$~8X9!(%jE<A7X9X<sSZ{ikc4U?Dx_gC%9v~?hAL%pIOp(<miItmkrM|X9XWC-1
zO?P|4<KM8h9Ca-a?L^*LTG`NW`3pPEvK`<Yd&$@hOHd+?$3W73PULr3k<U1EJ4lE7
zdN~VGXl=Nn+8(FXyRhn<!*(?FTx9`pHS15ls@#aM7g&P2y;QBtS=kAkmp=g-ti!b4
zd_=x&IrdGOuyKL8_|?oh+1HZ1sdR*FBMC%x0SuSODsCW2CviPYs|n8uVktafVQ0c*
z_-!OMVV3Hh$hC=q8%u8~<!GXDaE}K;K1N;MHYUV8CXsesZhrorS(?^=DueYcL}++l
zot?^9)qgUamc$uXiMi^^KivLI*B%cbVXv$7l9N35KsMwYMX%X|^_lD0*~oe9Wiv?~
z6O7^)f|1Klo1Jj$*ehn@6_P5_WwMO6YQF0)2py_%LI;#8?BEm~!md}fBNenzhz&z@
zA-P#jvYIS;@~mvAj9!q^*x0CyOr?x;*MAkkFMOj6E@)EN@OVjje&|%(9TfR1vOCUW
zJFIxTcf~l;r**Ax#5?mR*LoVaz(Zg7(fQ?K=|A2II?n6D(X7WA#+cNWy~g}0jDO9O
zj<Ga1qv7XH>lr|`)VwIc){kjN+(I}iaGl~@N9!~}6RV8Bf1h+*8<YL9WynH*QkjCO
zLw$`SDeyg4M@~B)J$Ue-`*CKpJnEz_M4d8r#>DlNzkS&{;5mdmr$f$xu=%@x#nxh4
zv5!7t;2xybsHwg_?mj1FE*2eq#Up39*fe-27QcLzWH%kOuA?{&xn8c5u##mSJp3yu
zTb9O3Cz_z=$6iI~H*jPFXZ^6rl%JdX95ruQ&8oDZ^490i?ZR^hwYl@$eSLk0FAK*e
zWBIcSL0wN@pU&vsB|B-nC7I8%v0qn~hpSRMg>L>*e}8{nS=@~2V6$Z-&Ea||DIsAk
z(9SzPGh&0WTk+EO6^4_+X8R(K`o_j1i_j0ZI!0bY<hOEQ?+fe~V;KS?h53LWTwY(l
zEj(j7d~X*a4@9KI+JV`t|3y3gk4o@6Ch5R(!Yrl-(+$IEn1~r9FS~0I^x=;h-12mm
zhCJxCcXiTtbhs(+RuZ?xdpAtz22b1Lm)3!Sfdi$Orz%1JLX*ikxw(tumD7_ZA~$s?
zoxzV5*Lg}h(^hdL2+2xP=FvOt7mJ=4mn=2F3p;PtUsolq6S!5Vj{9~fA_${wv0yUz
zc|Ug3-DI8@@K*0<L`$!!iZMGXS=pQ<KO}mi1U}Xld(QJt9=CdM+)CE^dQVJl$PGUi
z@i;v;{;aj_MyYSj{Bmp`TpFvBX2^?6`uMT}zR?iJTI&oZ9&gLzO<RI!k}Iy^`NXpR
z=*RQ}QwUO4fq$*8{@=tJN~B$@z*WWTVO3*mgTW#(?tcLh_{>FbgP*?-)bzJ2aHEI`
z-MH}r9;1FRSPv)sKc32av6GzsKO&4zr=XI5`u8zXp!>JxN`Is2un4VxyMcZ><&%*A
c#ULP4+duwWZd+)d8qv)4R-0C5Tk?+o2Rv{PcmMzZ

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/apple-touch-icon-114x114.png b/platforms/web/public/images/icons/apple-touch-icon-114x114.png
new file mode 100644
index 0000000000000000000000000000000000000000..fea21cf72c6110f8bc550a688240ce0e2d22e012
GIT binary patch
literal 611
zcmV-p0-XJcP)<h;3K|Lk000e1NJLTq0043T0043b0{{R3xC3=h0000XP)t-s00030
z|NjF6105Y5`uh6r?(UbDmuqWlPft&-uCCJ3(yHfGHvj+t32;bRa{vGX=l}o%=mE8R
zQfmMJ0q99YK~#9!?U~VX#2^SoRiaV<|APx=cVC()X|A?2<xU<=PEZ5|=S(J($z(E_
zOr|*s5ZwX7{#-vWP~IOZ=S)G%3@%p>QO!zbNIZH2h(D8p%Esi|Xn^=TX>2FYstk@P
zKURuDr6IE!=_@^O($5y5>UCy{>tx8rY!g<;MiQ@M!R*Z7`1d0zkgCbhA<KGXGNd7Y
zn%7WP-blP4q~yS`63Lre!mkpFLi#O{a!DI<Lm)Y`k;+h<l^pluu31tX(#uox7>YzT
zXc_tu7TIhq13v;I8+71DaO45)`OyUA%a1OXbPDnVU5S)!x|O^X*+Rp9`oc8i5p>sC
z`3?!okbQ@pfD~XiyrYqdd;$*ZTl1QQVZG}$GmrzXnPR0TKO>RKQwS2NJZs^O&YAR=
z1Pn6VIIP32LBZ~q{}&n7*M0sd5?D~vBO_tThV5J9zo*E#qF}6)v{Mxsryf;tdMv5X
zGg4RQZbyyyP_KLFuBbXwJWd*b(z?_YNYe+({(ZgyFjZ{}u1`k~Qq0<N4W$}S+aBs>
zg(%iU`gRa^puQ_z&ou|ElNZ9BrdQ~=@&(eJG`Mc{_D-Tt>k@7L{1N1nUSfa4UR#M4
xJ94*oH~~56-MU|B7CV#4WHOmdCX;EMz5uC38$X_hS=s;q002ovPDHLkV1fjA5Xt}m

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/apple-touch-icon-120x120.png b/platforms/web/public/images/icons/apple-touch-icon-120x120.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0435bad25df439eb51b59a97e0cf4480e062b90
GIT binary patch
literal 438
zcmV;n0ZIOeP)<h;3K|Lk000e1NJLTq004LZ004Lh0{{R34!XwR0000UP)t-s0002~
z{{GR?(IX=xH8nNu?d_<jsE3D#w6wHYSy_~5_E7);010qNS#tmY1Lyz%1Ly&@ds1rv
z00BNpL_t(|+U=R!j>8}fM8hqZ|Nr47t-4QLc2LK))XsS(Iw2TC?BftZ2qA<JLI@s(
z!mf4XM#9F1w&p}6SJ>MUl?Iy2eZDOdxKANt;=cENkX7r@*lVcqc88%;F4rqop15Ai
zR=|PAObFK(M8zjlY!XW>vBbY=zXpkCMy)~OIiLiIQ|m$EdB%<)F|6i`!6-W&#88y^
zh-Z|Q81Yn(An|`u<|tlAnX7oJOOW{Qqr+9aT4hJ^I<C!aJN5UcOelBxh=FYFA%@PU
zk2x0MI|y0a%Qs#2a?JHM@6_t_?<BFr62B-8E26^Ukh1ZuUTxf}F(z)z*1*VkQ^FFv
z83G1tO?2u;8-@v7Av%M+kB}gB`1UR=wLihu3VZepWp|9VcpP4Qqj=HaZI0rD+m;tX
g2qA<JLWoU%0QCwGRE~!Mv;Y7A07*qoM6N<$f>*J`ZvX%Q

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/apple-touch-icon-144x144.png b/platforms/web/public/images/icons/apple-touch-icon-144x144.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4f8134fdf8919bec1ce638e4101b0ba18cbbb6e
GIT binary patch
literal 624
zcmV-$0+0QPP)<h;3K|Lk000e1NJLTq0058x0058(0{{R3(3ld60000UP)t-s00030
z|Nr~@`xzM-L_|dE>+74Fo28|tfPjFzySu4vb`1ak010qNS#tmY1Lyz%1Ly&@ds1rv
z00H<(L_t(|+U=UrlENSiMGJ&B{QnPcDLT5db|lfu;_f~A3Uf?S3YcXfgb+dqA%qY@
z2qEM#N!Ooj4!+NzntVE23?Sm>P?Ee41Q9|Ovri2B2NI)rOl>quxels>^Sii<Pn|m3
zvbMHCngD3~v8ypa`;d}APj9KgH-$)QqH}_+C%Miqwv5G~xD`&V^B*OYa6%G{MYINF
z#`c`W*@QBMI)s!$6k<_-oKQ-WrA)HU6(RBLjiC{$`>Y}}2_44($Ho#T)XorVnn>tS
zvQ{@%$f1N53fAhz3$^N&iG*5p_g*3l5xSI8nn<X>x^b_Lhe|S&P+xVA6zZz(u|nbb
zO~v>Kt!a*@tamvYC)BxM4_$|3vX%Om_tdTz#}FaQt95`-^z4Tex?{8*KCnXGJ+;D4
z9a+;fCs)@Y2q^T@$rTczB2!&9IIkLT7gmWkXcVFlg+5j&QV1XvWWoL`trPukzk2?+
z4;dCBiPi{d>qP+>)z+k7YqdD`g0&M$09-q_Og}fb<{?nW*O9TZ7`sKTL*L_Y`?NWu
z^&u`H-Y)51`JM@Gj;14A%B%@%U4v)w=@q@}%Dd$1Hq_HMxJb#EF1@_DPb+6n?i%9r
zGS;)v3#4W1xe)MOIKPl|bfy0D2$c>-3K2pGA%qY@2qA=!zrq(a-y09A9s_{@0000<
KMNUMnLSTZKHxumu

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/apple-touch-icon-152x152.png b/platforms/web/public/images/icons/apple-touch-icon-152x152.png
new file mode 100644
index 0000000000000000000000000000000000000000..da6969084cf106339a1dda05c720d58ea2431c90
GIT binary patch
literal 651
zcmeAS@N?(olHy`uVBq!ia0vp^GeDSw8A$5OTo49QiUB?$u0Z<#|NlRK{wyjgx^Usb
zx^?U1<m8?|e;yqjt*58g+}s@Pviv$w5odu%WHAE+^9vAW+*%!!&A`AU;OXKRQgQ3;
ztebg96nI>3ZvX%P0b9nZEkV{dI&D4nrZ3quaZbes<`c(&2Ef4qWfl2m0YkU>JEG1;
z1{Nh(UQJjl{CLOLg<=wp-Z$l(S(DA)&3l>l@yo7#>2VKBx9Fu!d=>g^M?jXZe~`b|
z41W!mjfQ8;PR_}nCb-G!-m;Tni!Gyt{?0$+xx?p~-PMf$OW(hgS;}4U#y_#cG;<@{
z#{YWH6xj?r9N$=O+_gHQqcqs?b<(YnGrOj36M60JwSVD_JMUXIExr+uoYJ@?VqcEX
z$t<a);NBUmajrQlE^c!0?wP|{l@z@8o#}DCtksbZo}NB>{`1nUIsszQ=b1`3t_&*^
ziT1v*y@Pi%@6l;mv-aJ1^ya!)^g40h(3~~Km-Jp6hCRG4vbgr>)gvoj%c*W$=Nhf~
zs>AXZUvRqdp&Pwh?EFG{cGgc8i;nhM(f!f<(IvrT`B;wbyB6(}M6!?0&^_AIC~-sq
z<bI!+HJT<Z21nxNcivIk5S4Kv`NWTnI_tkIQ=YwgNq8a8#$P*sW+w3lre~{d^nLx>
z#L8Xr(9ebgCsSTNJ6ZQ}&9ZYl57zxL*MI!1(b%;0cX4}ss%o!r=<C>Bt+%aoydO+k
zEc7{Ec3XK<smbqS(O-XG3i{o9C2ZM)k9*hdpYUX#x_6_toAiFMjoUl-?ovpaZnXW1
j^Ll+Yc&suo{AjOXkQI_GinFx)2om;m^>bP0l+XkK)Y~V;

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/apple-touch-icon-180x180.png b/platforms/web/public/images/icons/apple-touch-icon-180x180.png
new file mode 100644
index 0000000000000000000000000000000000000000..d646448edc7b4e7e48551a5c9d1ee416201ebaa8
GIT binary patch
literal 734
zcmeAS@N?(olHy`uVBq!ia0vp^TR@nD8Ax&oe*=;XasfUeu0Z<#|Nnpf{PFPcm^pK1
zOG}H1iOJ!^hohsTA3l8em(?x_sDiV=BeIx*f%ydpGj6R8%4T3-O7nDa45_&FcFx<p
zB?deUC)H2>-v5Dd;of<ExAT&+)Gzrg{Tn)Ir8!?h!FFDdb#Sm?{)9MzrGM;GPWEdo
ze-*OQb4?6i>iUx_V_Oo-a_30@KXBfE&S%w?n|}+vQs4J)zH)61#~Nqup6fA}a^2+H
zmVVFXsDI+7`S80&z2&BTzB~EVAKE%xx)cA{HdBE0mgwEhPFCq(_4wrC=03>?T+^>=
zSyqtOIdSXK&EjXI*X^&ke<kyDkdo}zrHdo16njlBc_@R4zf($9Bsyk3|F&n|myf><
z?MwHIZduZA)a`%T_179cPw&ECm%=+eW=v$e6#mnH%0#hC)3>Q8n=U;)-RtR6-Ia!w
z%rB=+^bC+No|q>Y88$gjQc`TP++B~JrN@mf#q7#lp1Jh!>UQJ3%fD$ZS>L-vSy_GJ
zyVEBkm+ba?``Kgr(z(;SzwG8tk$O3A^_$4D{&l|j(`t9U{$kWv@?X|*%QU&2DVwIr
z?XuW9Rc?)XgcpB!-kT+?+qZ>XT6C*D@^12rXBUE^qRww#@wD=#caK<TaN)-ApPmPH
z&Ul(y`qkro<<4}yt!uuQto|TV=$PrhWTKl?<~AE3RVA9adLBdLmq~ZU#pd#qf1bMH
zylZvn_DR1oiqDnpzq?rab^pD!TCeX~v2{GX{_D{{)ocBh<u}DsFZ5T`@ZDFre*XLZ
zkm?-O)sLT^7La<VcWI45f!`t9;Mm*U-&g-Q)>XG<_D>n#nzR$U%NEF2a#}CnQSTkT
zqV{junusauN?-kcsde-81h=T*Uw=1$vALAD*W>%&)6-E?%7e;(49^V|HiRXlodzWz
MPgg&ebxsLQ03NAXJOBUy

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/apple-touch-icon-60x60.png b/platforms/web/public/images/icons/apple-touch-icon-60x60.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d2928468d22bb8744ee057d3dadb99688d0a8a1
GIT binary patch
literal 281
zcmeAS@N?(olHy`uVBq!ia0vp^HXzKw3=&b&bO2I{0X`wFK>FXmf3mW&7cXAS%gd{;
zuTM)$^YHNK>+9RHWy{N#FJnbo^MHyt3p^r=85o#ffH33M>Y!|(;5<(k$B>F!Z>Kr(
zF)MPoK385)^q={9$;D-|%O-7_!JD5wk4xx-Mc1Mqp3@obma9AYoR>8Syv7~zvs2>O
zO;u<9qil;e_lTYLaXvZEXS4c~P`)V>8XY+$k8w(7%$hL$p0Lq^?Q?SeAI~W|ZLO}Q
z6MXxs=eD9n`RiqKKTJz}$1CZ0WA}t3F&_^v{P!q3>D+g&x0j8WlfMed%4hto=~6nw
ZY`l|gx^nUDcR-gic)I$ztaD0e0s#8aZma+R

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/apple-touch-icon-72x72.png b/platforms/web/public/images/icons/apple-touch-icon-72x72.png
new file mode 100644
index 0000000000000000000000000000000000000000..add4b8485389c98f9b3ed9fdd4a9e4c164046867
GIT binary patch
literal 414
zcmV;P0b%}$P)<h;3K|Lk000e1NJLTq002k;002k`0{{R3VlzW^0000aP)t-s0002~
z{{90411l>lOiWA|7#Qp8>&VE+d3kxy&(DH_f~u;jWoLjJ00009a7bBm000B%000B%
z0kwNlYXATNAW1|)RCwC$mdh5yAP7VipV9yS-(ogRBIG!!J?+BTnp_bE)R?8Er6psC
zfKP9}rD*}>1SqTfhGZe7pnxi`l~S^<auDxY<@`8a0kTBZMkl0|jJMXcVhpNn>=jT9
zNNGa61JNvy`4WicMMP6T!IR#9<DgdI&8w}9f!L%@IUfpQR1ky0K{gf%^#H`E+-Lm}
z$nII60^$+lCxNa*<|!z-DM#Cl`8h}`+5?bmBOJuW7JCE)sjY^AlHUB#JZcP@Ga>2U
zhX2n&*p;n=Y#zU9$z<*BZ#K?uSj@3b+?c?37Ecx>Rz5VOC<oL?6+p%6w2bo13GW;P
z-~a57>!era*q(b8uR6tW`zSy8Wb1VD8S=L8UAVNgwDc{#0K%XQ**^*Ne*gdg07*qo
IM6N<$f;6DEbN~PV

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/apple-touch-icon-76x76.png b/platforms/web/public/images/icons/apple-touch-icon-76x76.png
new file mode 100644
index 0000000000000000000000000000000000000000..26c2d48379bfeb9b159f17bd7df97b80cdb17a8c
GIT binary patch
literal 385
zcmV-{0e=38P)<h;3K|Lk000e1NJLTq002w?002w~0{{R3@JXQ=0000dP)t-s00030
z|NphMwfg${4h|03*w|WHTBW6>A|fJ$goJT%apmRZjEs!SuJ>pF000SaNLh0L00Za%
z00Za&wR=))00031Nkl<Zc-rlk+YW;;2tWmTp_l*v-l<u#c%cgod)UT_Z`LE0Qt7fd
zj^q3&LBZI>IjYDkyApvCN@83M0DCWQ=}!=#NwHOcqMP6jP=#9=Vo+u)LKbczpf>mD
zvJcCGrL0CalmU$jP%Q&0!A!PRf2(GZZC6ZIvR#L4CEGssE)#RIJvi!YB->}sNOqru
z*#xv2td_=gx@IdtE~$ygkgdu|TKqFIs=;gvV)h@(x60yT*tm!dlH7zzva;@{IVs5N
z{wsBKOrY#T*9UkI^>OSCry+y7P1ptxUS7~Jjq}4V0-isc01pFntLQ45KCR?-hO+6=
f#}9;#<NN~;e9{cS5>1#300000NkvXXu0mjfbF!r5

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/favicon.ico b/platforms/web/public/images/icons/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..a7d669098ce81a06c468f5eef5265ae92a858283
GIT binary patch
literal 457
zcmV;)0XF^s0096205C8B009690J8xA02TlM0EtjeM-2)Z3IG5A4M|8uQUCw|FaQ7m
zFbDzw007uvZqNV#010qNS#tmY1Lyz%1Ly&@ds1rv00Cu5L_t(|ob8v(jl>`fK#^;p
z28y5!nn)ScK@k){7p{N{4Y&eU8fzn@d<L?RWF_7)8kh&R!3Z&#OeXIIhH=rR{}TT)
zIRGf7^Z=An%|Za+z0bpN&eb~c@2s^sXYaik058>A+Ymea&^L|NbOr#PzhQ7n$$LMj
z(1Z{ngc##RA#u9shDnPdql82ei06f*luD`cZypnZ&qt*c5jp3il=WJ}g>ueBWUXbb
zuMxaMh>0;S%d!^sSD}>BSRn=xjWMs-p^^~7npn>Z#UgeOhm4BsKH{bwqU!p;L&$qy
ze?pEG3L$8%D^&&xZQF^5ua1=q9sBUxzLo1jA%qt-XoyHeYwh%cZM4=zRNKPx80TEh
znfIwXDJ6b*G^B)-5)rr8LN5^U{6OD#GR7=>@FVFQzD9P38)KSnj)31Iv1S`M1$)-%
zQH@9`Yo5$y54oLW2=J}E?*r=2o5^G{`G@=fY5NKH>%ZqO00000NkvXXu0mjf^8>x)

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/pwa-144x144.png b/platforms/web/public/images/icons/pwa-144x144.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4f8134fdf8919bec1ce638e4101b0ba18cbbb6e
GIT binary patch
literal 624
zcmV-$0+0QPP)<h;3K|Lk000e1NJLTq0058x0058(0{{R3(3ld60000UP)t-s00030
z|Nr~@`xzM-L_|dE>+74Fo28|tfPjFzySu4vb`1ak010qNS#tmY1Lyz%1Ly&@ds1rv
z00H<(L_t(|+U=UrlENSiMGJ&B{QnPcDLT5db|lfu;_f~A3Uf?S3YcXfgb+dqA%qY@
z2qEM#N!Ooj4!+NzntVE23?Sm>P?Ee41Q9|Ovri2B2NI)rOl>quxels>^Sii<Pn|m3
zvbMHCngD3~v8ypa`;d}APj9KgH-$)QqH}_+C%Miqwv5G~xD`&V^B*OYa6%G{MYINF
z#`c`W*@QBMI)s!$6k<_-oKQ-WrA)HU6(RBLjiC{$`>Y}}2_44($Ho#T)XorVnn>tS
zvQ{@%$f1N53fAhz3$^N&iG*5p_g*3l5xSI8nn<X>x^b_Lhe|S&P+xVA6zZz(u|nbb
zO~v>Kt!a*@tamvYC)BxM4_$|3vX%Om_tdTz#}FaQt95`-^z4Tex?{8*KCnXGJ+;D4
z9a+;fCs)@Y2q^T@$rTczB2!&9IIkLT7gmWkXcVFlg+5j&QV1XvWWoL`trPukzk2?+
z4;dCBiPi{d>qP+>)z+k7YqdD`g0&M$09-q_Og}fb<{?nW*O9TZ7`sKTL*L_Y`?NWu
z^&u`H-Y)51`JM@Gj;14A%B%@%U4v)w=@q@}%Dd$1Hq_HMxJb#EF1@_DPb+6n?i%9r
zGS;)v3#4W1xe)MOIKPl|bfy0D2$c>-3K2pGA%qY@2qA=!zrq(a-y09A9s_{@0000<
KMNUMnLSTZKHxumu

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/pwa-160x160.png b/platforms/web/public/images/icons/pwa-160x160.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d3facfb15e1fc7e29dca0b65083b0094de0d970
GIT binary patch
literal 682
zcmeAS@N?(olHy`uVBq!ia0vp^3qY8I8A$FCoGuTf6a#!hT!Hle|Nnpe`ekHfq@<+u
z{{8!#H*X3H3%k0y&YnFxCnslT%p+c)BF+Mj$YKTt<`*E$xV1Vcn}LBz-_yl0q~g}w
z*{|~sEAY5A@BI9ae-BH5`PwX2HHmAr%j>HxO$`%L`aqV#!GZlp<7e#tI5lwRlQ%Ij
zKFpI&YBA<K`sKQ`Lv7Z@pQrW<?5vx9SLNuhwIL#rZJxEOFUIcKl-jdN^Su1g1>DS<
ztK)@|YWaAJ8**pZc0YA_(sJSHkJg``b51Ch+*Piz-FxRtQqR<{YyK})W%=ws@mbBO
zs)<{#6eUe$o!hgZ`GM6zXO9UA9F81LAN0AiHt$S$GCkF)>ACdb4GA+eJ)FCk1kW6e
zGKuD%C#veYzm#SDp{CMvN~$wNV{b(UeB9)!)?KgRwl|-pTk)&vmJJE@+d8<vrJZIv
zxGyJC>BeN;ZkE%xlFY<(ZeH5(XRYuW&b?b7n4Xd5FT5SR!)JqO|8-yEUgL+GI<0c|
zUMXF3?9*)4SGUjWbR^vG3kaLAarv}+pO&xfR`ZLU&g!}3jY`-@J!OxcEYF~VCnaub
zO^e&zi&?K;;9S^{@a6cqCdc~)EIzyC7dZ<w3A8-Oab!L?@z}icq9QM6pPbue<9P6y
z(P=@E-1CoJ12|1A)Q)CtF*dpJ_|6-5n}e5>s#Lu$1#`@NlI8k#hVQnmQ>&tyKRL`V
z$_<`(yZhgdvU4rdL^Ks6dhg}?zkmO&J37v6!EuG-d)H_0Fe!Sdx^L%4r?)FV%$}{c
z$0m=*w)pO^OrOQZtba~tJ5LtZoHb)H&^hcJzpl;gwueVKh|!?Fk70|G!rw^;1H(Xk
MPgg&ebxsLQ0Lp?d1^@s6

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/pwa-16x16.png b/platforms/web/public/images/icons/pwa-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..7fa16950e615c97cb51cf45f8f70cb15044b0708
GIT binary patch
literal 222
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbL!Zh%jSE08WPFHcEHF)}g|7Z+z|
zXMg|xeMm@%fPg?jL4mBS?50hd7A#n>diCn<+qdVN9-j-;z**oCS<Jw|`~rj-w^j#b
z0|mo9T^vIyZq4oU<~yLk;o>NBF#dggOs`39)+N1PVISHiDE@Nh6i?+0vkWW~?A)-d
zqPyUPTF@om6}B#0zAEn)I3sExy#K<js##ycuFgJdV4Tiu_lkM_M~1WRj7NMgEtm(i
Og2B_(&t;ucLK6V(c}x@l

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/pwa-196x196.png b/platforms/web/public/images/icons/pwa-196x196.png
new file mode 100644
index 0000000000000000000000000000000000000000..66ad4f87abe6b3c382bbd83c8a411bb34bc1d1d1
GIT binary patch
literal 793
zcmeAS@N?(olHy`uVBq!ia0vp^M?jc^8AyJwsEY(rasfUeu0Z<#|Np;#|9<-PX+lE6
z{Q2{3Y-}njDo&g@Atxu77pU?YsDiV=BeIx*f%ydpGj6R8%4T3-TIlKG7*cWT?VQ_X
zOB4hcrgk6r|Gyw4ZPUzl-=@3C=DS0m&9SUx^k&&OF-{C<1`3!lTlac}_10^9R%$NU
zH7l^xBr5KD!3MeGye)Bee{TLi+f?S2R8y??o6_sc9)8exTPMdGyi{nXwS=kL`sgb6
z-19|Fx=WXA58fAKubZ-W_kAD7><JQkTRsNXPBU%ss`k=<B&BkFgG{Q%mo={+d%Z~y
zcyhPOcydJ0^b?1!ZOP%78r+f2c{4~!+f&55vx!B>V~?wnVk3}N022E8$^V;NuJLL~
zc&>3Y<jYatm~9f<S+W0!oPJO0uW1&C<{6&VD`d+Lt=h4)WmenTBP$i(KfERsyLih<
zRgtP4?4A1(wgMHbn-X*VgOcK_hj}V0Qhh2_{Q8@{V`Nv%@r<c%tDd~$is>KEm<t~?
z4DTGS_2T(fuwRHd{b@*2PEV1h;jb+P8ixPwl&Ke{vOUeewXx5iX|FGX{@&1vNjv_`
zdgbmUAXM_XN{jRE4o(q|MgD$HW}7S)Fn2mDo|Uz^+|euTt#QO)t!mSys)=uvx-W&F
zO%tl(nkE#L9Xm~E<C*;|b8dg>{+RigSyW|$0~05dm{IQ^DE2<QCvID=muimrg}hID
zuUxFsF1|lO_daXRu9Y_0a}F5KT0WsHNpQ)k3B9^ce=d9{H_7LA?vlqIn(gObsV=VJ
zjxY9)NRfLv)xCF%?Dv#+9P8bG6ti}lTs-(XTr&Uf@7d8gT%CM5oS&YD7@j>|eD4_7
z<$0T=vSdtG``ius6B@KoJN-wu(N;0esLn9ng*!bq<W%pQ|Ht;QuV9^q!Ss^vXEwK9
zG*sVqRQmtYBVOKnOofGO4>^1HsGaEUw!dY-jgr2AoSM_@F&ES&t8Ok@3X<}4^>bP0
Hl+XkKLJm=n

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/pwa-32x32.png b/platforms/web/public/images/icons/pwa-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..7c9fc84e1813c7e898b5c5d6a520e1585b2044a2
GIT binary patch
literal 277
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dy>H$6>u0WcFh2_MF6Ne8U_VV%y
z3=I7D@87Cbs}vO#@7%fb;>C;B*4Ct?q$xjat^$>E7I;J!GcYi}0Aa?h)j`=n!6}|D
zjv*Dd?oK)=bXbAI#ZXD<$^ZS^rB*BQmR99{d(g2jG9|2Gf8dXwA7)>ArZM-sPM5sb
zibI>jZ`s_=5@Zv2ee25geXSL&RqGS(y<@ceY&nm6f`-0qhnCPa2GKaCP3!M3NaNbW
zyj$`RtDfL5h8+y&Vh*TvT<&l6y3FxQW5tZJH9I@+S#dqR{r=Gn-bI%ST;7EGU*J|-
W&7yvDgLN&?eGHzielF{r5}E*Mym96L

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/pwa-64x64.png b/platforms/web/public/images/icons/pwa-64x64.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad30124bcd7f4c3ad4407f328c09140841b2b698
GIT binary patch
literal 378
zcmV-=0fqjFP)<h;3K|Lk000e1NJLTq002M$002M;0{{R3owtGP0000dP)t-s0002~
z{{9361fHIri;IhTdU|qlaz8&mYHDh$tE(U&Anon#*x1+xG-Ad8000SaNLh0L00Za%
z00Za&wR=))0002_Nkl<Zc-rlj+YW;u42FB)SbYEI9lB(TSdzNNtMM7V(DGaVf(2l)
zSX>|@k0l_H1M_iC2>TI|=;L!kBQ2}%-*Ag*rwpVsu?JplASl?x_^AyG&_y638_NKU
zNfiiSDiA^V8-bibRWu3^Bn+ZS+z`N)2$WE}0OD3?jJ+q&B}Oam3LsVip8y_ix&*M2
zOQ03<WYB`ogDS2n)a!gU3lwDz+{@tb?&q}tB;s0)`z`vvUmAn4@776U(OaI<L{SyU
z`@GYea_t<KH$5=xiJ4*D9JY3Mo_QttLm5Yv?=zX#=Va8GJPDlavp_~81s>mGEfxzG
YFQd;2b7C7j&Hw-a07*qoM6N<$f=Gy)0ssI2

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/icons/pwa-96x96.png b/platforms/web/public/images/icons/pwa-96x96.png
new file mode 100644
index 0000000000000000000000000000000000000000..a24a2b4c470374b06420740b7ff4a3b7d0cde380
GIT binary patch
literal 490
zcmV<G0Tup<P)<h;3K|Lk000e1NJLTq003YB003YJ0{{R3)kcR30000aP)t-s00030
z|NjI81o`>-eSLjcSXgXqY_G4cq@<*~ySvcP&?hG+6|EOw00009a7bBm000B%000B%
z0kwNlYXATNY)M2xRCwC$nA?iQAPhxK)O!2>|DD)}fjQV%5(8%->sh<lRpTWD$8j9T
zafG0lF9|U6B_xkGpDz)_#JW|C4jKXUjR6}qimjAVUr_$is4Fz~^C44{BAyJRQ1={=
z5mbPVL1>_k9iXz^8$b%;1Q-%PVVjU3YXq0IAiKa&fc6Q{R4`^4LrVd~ggb>!Kt&{P
zs)#Z{oC-FCHo@E}3O5vL!SAMpb^;3VJlaPROhv!eiZg<nIog&2O3{XCf;nfCZGxDF
zX@cbm>(DHs)6c_lJG0Pee6!s;h-}F_QH$cm6m6w|tr927HCyLSBxu8QN89W*Y603G
zThNb=rv%md0<yhAnF}uE9c?RU^4E|Tx6Dc<C&?4c?v<^E>8|)mNS`H_|HUI}o+|Fg
ziv9UJDtIvoFI|HC;zc91{=w7dKHIf4r0ai;a82Ukjc5JCKLv>4D-tY5<$)2xKYyw9
gH*Cjo9LG7v52*bUEEO>yZ2$lO07*qoM6N<$g66i<J^%m!

literal 0
HcmV?d00001

diff --git a/platforms/web/public/images/mstile-150x150.png b/platforms/web/public/images/mstile-150x150.png
deleted file mode 100644
index c45e8430514e918d64b0a7e4f1af7590ef8be88d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1889
zcmbVNdr;De7XG=e*{bO#Y82p_@03N*ED;}RsHlsjnL%-VfY@R_k*+T)D=nX}>nk%K
z?cELA)-<G4GR+D_MI#>-CT59fDzX>Nv~+c8_OCm0@64T@IcLs%-<faDKi@eg?{JXc
zHl1BM003<B$6-SNKtum?Zv9ft47H*V>hk4DFT583aM`-+QCezjM!|*P0U*N~0J5?H
z;FFrldItcfkpM6k2>`AY0I(ye>VB}By72`$&<_i2US{_{R3mMMKi)@MzEw-t_$#s4
z&ItgvZ1Kl>g{Hk)7*8xTJ_hSn{XW{2qXqY|h{x};M3hHDex+4f<0+uqI^bc+@iRw2
zpoxmG??BG9y@T1l6BVo8`CN&WRzW^zUs%91?_AE{-q`qhOUZHU&AS906XJ%V$ur{p
z<FH6cCNV=?g_#gv8$ZKs6QkD@{rnQA6t7}S|GyD)#(Pq;p89w?fv-EHvVzQ0F8n+j
ztpr!w-GUAZnU}z1k1I<i=BYLNth&>4s@JP$MytD1gtL}uD6(nol#C?4!7m|QKj_xw
zuu6MXi@}NWtW-(RydhZLWs1L&uRtZAj?3dp&y5z4;mv~Q{289RPgU4tK$wa<9QbUz
ze#ooIhFX4q+!>Fj4t&f)FN{VXrfXM_^pb2u$Dg}A8g}bTM2Gm^KD6yTQ7X7i5&_SI
zj>^KsIuM_-oCVIG3HqjZfA^#`9gzktpvY#A$Wl<Hm_r7+M)qV&bMtPQico<Omv%QH
zP1&m4TyUOo@DR7L=3fq`H2k}_gc{61sUOcxza@VIH?rXvzMxs$+H|i&@`xpk;wVPI
z*1kt6%ML<;{Vn&xDV8JEqAH^-WG%KdSf5HphxXEM7RwJ?iGB(wKUfC8Y)8~T+628d
z(n-hWKa%e3d)7%uR%cFLvW>I}Ou)m1dp(2~neMNvF}QK(rOmq9t_KC|ZUdtDr{V;Y
zcMaC2=<xj|^Q~+@zVq~pb0>XF2WrYkr2^z{A0zv#J{ior4<NKVp&kRfI(ELyTz4q}
zeSxfX_%~oLyCwCSyKz-_h_|frFj2jg^kjqw-H_(2S@WPEP73UI>YfR<&Cq#i)LiFq
z-zH=##x(l0)bPp_tGHI~a)fM>dZ(sLbspRUvvv?ACtTrPaAsOG^ujD{M8Wa9BVyv2
zsMl99I7GRO$x)r{=sGm{AuUsBizcv^0`=$?^R1p9Mu{RAXACZ!GQ7yl-&S7;q4+A1
z<I(6>%laN-WJFQd03Y+3e%C=|+95C?RAO)~1XfVtqWOt*>(s&o)na;E(4zUn$u<R!
z!vC33Apc$*7$@J|TsJ87y5CFxPH8&^j>*h$PW>T)2c6m9$Ezpnu2r@UkI+LQRD)Bi
z+c#rh^hRHhyR?)jsGyalmT9=BI0pSx4qPJ$OJ)g5vveZM2}XfDS-1WJllsFtTnH&z
z(hlQQpSxdR1Q%up|I?{|%ZKt6RzRYONaJh8+nIWKBR>3W%>cdgw>Yxq7<0!(C+Bvk
zaI~L2S{dF8`-N3WVxcw!D{1Bn1F&BjDv2!Yos!Fv9?!}&;)8$S;eL0n;oUl&Ol0eo
z1eT1MQ^$Pd%HL9MQKV{9JLAnhug^}2{;w9Y`xV;GJ>7UcxHOct^Zg79N&Um<eKy;$
zPc`vE=+i#{qxMZV-CQPWKn&+2SZ_vOU=fk&qXy>+HOhHF7HWeq^c9C=-qqv+ZX7di
zDO)2|<C0G(VvD9C;r6MP&W0(ITyP?OPB-}&=|{|<R?%dBt9|(QMPxVA0yH0lZ^-)K
zOWt$p>dQ}yo^AsXE+O8FdApGXr&`O8<VeIPM@gHIy8Mbs@Ki!aw_vzOXd8bqVgk~9
zw7vUGeSlwz-`q|VMp>jesH-n%M`2c&&2_mJ+6Nw#jeXSHU&^R{0~fBk&#w|)t1!6C
z{5{$S^i<murtJ`K>71FM;q$Twf>VlU%!#2T{*$|nH|Yo7JF!LJsUcRgFFV<wg(Lt!
zoW{U5HV#7N)DKtg&9vVcpP98>lf3-6(q)5)EgYw%D6hV|^eJNZ(S3g{rE#-a`(bXj
z){ce8#BbV$YE#&_zi}u3Psu%%XRyZnjVyF{yZT93F?<M&=qLu&l|rYg3*d-!M16~N
z`4;IMibA<MqFj+^dnD2oiPVwBpZyO(d}1^$CjEa4GCQ6>Rtt`0gc2AbQK@E0^u!oi
z9Mz1Go<udHB{3)fkX9vI)Z3aIW^3DbNYw8y4*@hSbP*I?kOe5P#7GllhRxdhBwEvg
q7iuPwjPwZl1yF&uC<}Kz00GSH*v?q=b}mzo0Q`M|unpdk7ybnB%w3HD

diff --git a/platforms/web/public/images/safari-pinned-tab.svg b/platforms/web/public/images/safari-pinned-tab.svg
deleted file mode 100644
index 989d8d365..000000000
--- a/platforms/web/public/images/safari-pinned-tab.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="151.000000pt" height="151.000000pt" viewBox="0 0 151.000000 151.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,151.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M211 1252 c-14 -2 -35 -11 -48 -19 -52 -34 -53 -43 -53 -454 l0 -382
-40 -39 41 -38 164 0 165 0 0 -30 0 -30 235 0 235 0 0 30 0 30 159 0 c148 0
-160 1 192 23 59 40 59 37 59 445 0 412 0 416 -63 449 -29 16 -80 17 -567 18
--294 0 -546 -2 -559 -3z m1100 -67 c9 -5 20 -19 26 -30 5 -12 9 -165 9 -377
--1 -335 -2 -357 -20 -377 -19 -21 -24 -21 -571 -21 -544 0 -552 0 -571 21 -17
-19 -18 43 -19 372 0 194 3 364 8 378 4 15 18 31 29 36 30 13 1088 11 1109 -2z"/>
-<path d="M600 791 l0 -209 190 105 c105 58 189 107 188 108 -6 6 -369 205
--373 205 -3 0 -5 -94 -5 -209z"/>
-</g>
-</svg>
diff --git a/platforms/web/public/manifest.json b/platforms/web/public/manifest.json
index 49df15e3b..988e1ebac 100644
--- a/platforms/web/public/manifest.json
+++ b/platforms/web/public/manifest.json
@@ -11,7 +11,7 @@
   "prefer_related_applications": false,
   "icons": [
     {
-      "src": "images/android-chrome-144x144.png",
+      "src": "images/icons/pwa-144x144.png",
       "sizes": "144x144"
     }
   ]
diff --git a/platforms/web/pwa-assets.config.ts b/platforms/web/pwa-assets.config.ts
new file mode 100644
index 000000000..cfc70ce93
--- /dev/null
+++ b/platforms/web/pwa-assets.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig, defaultAssetName, type Preset, type AssetType, type ResolvedAssetSize } from '@vite-pwa/assets-generator/config';
+
+export const ottPresetNoPadding: Preset = {
+  transparent: {
+    sizes: [196, 160, 144, 96, 64, 32],
+    favicons: [[48, 'favicon.ico']],
+    padding: 0,
+  },
+  maskable: {
+    sizes: [],
+    padding: 0,
+  },
+  apple: {
+    sizes: [180, 152, 144, 120, 114, 76, 72, 60],
+    padding: 0,
+  },
+};
+
+export default defineConfig({
+  images: './public/images/icons/app-icon.png', // Source image
+  preset: ottPresetNoPadding,
+  headLinkOptions: {
+    basePath: '/images/icons/',
+  },
+});
diff --git a/yarn.lock b/yarn.lock
index d22683c82..c7032284a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -33,6 +33,11 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@antfu/utils@^0.7.6":
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.7.7.tgz#26ea493a831b4f3a85475e7157be02fb4eab51fb"
+  integrity sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==
+
 "@apideck/better-ajv-errors@^0.3.1":
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz#957d4c28e886a64a8141f7522783be65733ff097"
@@ -1146,6 +1151,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@canvas/image-data@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@canvas/image-data/-/image-data-1.0.0.tgz#3bd2cd856e13fc9e2c25feff360a4056857b0367"
+  integrity sha512-BxOqI5LgsIQP1odU5KMwV9yoijleOPzHL18/YvNqF9KFSGF2K/DLlYAbDQsWqd/1nbaFuSkYD/191dpMtNh4vw==
+
 "@codeceptjs/allure-legacy@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@codeceptjs/allure-legacy/-/allure-legacy-1.0.2.tgz#aec363916826be724ae72aa3031cacdd2cb08b27"
@@ -1362,6 +1372,13 @@
     reflect-metadata "0.1.13"
     uuid "9.0.0"
 
+"@emnapi/runtime@^0.45.0":
+  version "0.45.0"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-0.45.0.tgz#e754de04c683263f34fd0c7f32adfe718bbe4ddd"
+  integrity sha512-Txumi3td7J4A/xTTwlssKieHKTGl3j4A1tglBx72auZ49YK7ePY6XZricgIg9mnZT4xPfA+UPCUdnhRuEFDL+w==
+  dependencies:
+    tslib "^2.4.0"
+
 "@emotion/babel-plugin@^11.11.0":
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
@@ -1749,6 +1766,119 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@img/sharp-darwin-arm64@0.33.2":
+  version "0.33.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.2.tgz#0a52a82c2169112794dac2c71bfba9e90f7c5bd1"
+  integrity sha512-itHBs1rPmsmGF9p4qRe++CzCgd+kFYktnsoR1sbIAfsRMrJZau0Tt1AH9KVnufc2/tU02Gf6Ibujx+15qRE03w==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-arm64" "1.0.1"
+
+"@img/sharp-darwin-x64@0.33.2":
+  version "0.33.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.2.tgz#982e26bb9d38a81f75915c4032539aed621d1c21"
+  integrity sha512-/rK/69Rrp9x5kaWBjVN07KixZanRr+W1OiyKdXcbjQD6KbW+obaTeBBtLUAtbBsnlTTmWthw99xqoOS7SsySDg==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-x64" "1.0.1"
+
+"@img/sharp-libvips-darwin-arm64@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.1.tgz#81e83ffc2c497b3100e2f253766490f8fad479cd"
+  integrity sha512-kQyrSNd6lmBV7O0BUiyu/OEw9yeNGFbQhbxswS1i6rMDwBBSX+e+rPzu3S+MwAiGU3HdLze3PanQ4Xkfemgzcw==
+
+"@img/sharp-libvips-darwin-x64@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.1.tgz#fc1fcd9d78a178819eefe2c1a1662067a83ab1d6"
+  integrity sha512-eVU/JYLPVjhhrd8Tk6gosl5pVlvsqiFlt50wotCvdkFGf+mDNBJxMh+bvav+Wt3EBnNZWq8Sp2I7XfSjm8siog==
+
+"@img/sharp-libvips-linux-arm64@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.1.tgz#26eb8c556a9b0db95f343fc444abc3effb67ebcf"
+  integrity sha512-bnGG+MJjdX70mAQcSLxgeJco11G+MxTz+ebxlz8Y3dxyeb3Nkl7LgLI0mXupoO+u1wRNx/iRj5yHtzA4sde1yA==
+
+"@img/sharp-libvips-linux-arm@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.1.tgz#2a377b959ff7dd6528deee486c25461296a4fa8b"
+  integrity sha512-FtdMvR4R99FTsD53IA3LxYGghQ82t3yt0ZQ93WMZ2xV3dqrb0E8zq4VHaTOuLEAuA83oDawHV3fd+BsAPadHIQ==
+
+"@img/sharp-libvips-linux-s390x@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.1.tgz#af28ac9ba929204467ecdf843330d791e9421e10"
+  integrity sha512-3+rzfAR1YpMOeA2zZNp+aYEzGNWK4zF3+sdMxuCS3ey9HhDbJ66w6hDSHDMoap32DueFwhhs3vwooAB2MaK4XQ==
+
+"@img/sharp-libvips-linux-x64@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.1.tgz#4273d182aa51912e655e1214ea47983d7c1f7f8d"
+  integrity sha512-3NR1mxFsaSgMMzz1bAnnKbSAI+lHXVTqAHgc1bgzjHuXjo4hlscpUxc0vFSAPKI3yuzdzcZOkq7nDPrP2F8Jgw==
+
+"@img/sharp-libvips-linuxmusl-arm64@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.1.tgz#d150c92151cea2e8d120ad168b9c358d09c77ce8"
+  integrity sha512-5aBRcjHDG/T6jwC3Edl3lP8nl9U2Yo8+oTl5drd1dh9Z1EBfzUKAJFUDTDisDjUwc7N4AjnPGfCA3jl3hY8uDg==
+
+"@img/sharp-libvips-linuxmusl-x64@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.1.tgz#e297c1a4252c670d93b0f9e51fca40a7a5b6acfd"
+  integrity sha512-dcT7inI9DBFK6ovfeWRe3hG30h51cBAP5JXlZfx6pzc/Mnf9HFCQDLtYf4MCBjxaaTfjCCjkBxcy3XzOAo5txw==
+
+"@img/sharp-linux-arm64@0.33.2":
+  version "0.33.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.2.tgz#af3409f801a9bee1d11d0c7e971dcd6180f80022"
+  integrity sha512-pz0NNo882vVfqJ0yNInuG9YH71smP4gRSdeL09ukC2YLE6ZyZePAlWKEHgAzJGTiOh8Qkaov6mMIMlEhmLdKew==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm64" "1.0.1"
+
+"@img/sharp-linux-arm@0.33.2":
+  version "0.33.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.2.tgz#181f7466e6ac074042a38bfb679eb82505e17083"
+  integrity sha512-Fndk/4Zq3vAc4G/qyfXASbS3HBZbKrlnKZLEJzPLrXoJuipFNNwTes71+Ki1hwYW5lch26niRYoZFAtZVf3EGA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm" "1.0.1"
+
+"@img/sharp-linux-s390x@0.33.2":
+  version "0.33.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.2.tgz#9c171f49211f96fba84410b3e237b301286fa00f"
+  integrity sha512-MBoInDXDppMfhSzbMmOQtGfloVAflS2rP1qPcUIiITMi36Mm5YR7r0ASND99razjQUpHTzjrU1flO76hKvP5RA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-s390x" "1.0.1"
+
+"@img/sharp-linux-x64@0.33.2":
+  version "0.33.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.2.tgz#b956dfc092adc58c2bf0fae2077e6f01a8b2d5d7"
+  integrity sha512-xUT82H5IbXewKkeF5aiooajoO1tQV4PnKfS/OZtb5DDdxS/FCI/uXTVZ35GQ97RZXsycojz/AJ0asoz6p2/H/A==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-x64" "1.0.1"
+
+"@img/sharp-linuxmusl-arm64@0.33.2":
+  version "0.33.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.2.tgz#10e0ec5a79d1234c6a71df44c9f3b0bef0bc0f15"
+  integrity sha512-F+0z8JCu/UnMzg8IYW1TMeiViIWBVg7IWP6nE0p5S5EPQxlLd76c8jYemG21X99UzFwgkRo5yz2DS+zbrnxZeA==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-arm64" "1.0.1"
+
+"@img/sharp-linuxmusl-x64@0.33.2":
+  version "0.33.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.2.tgz#29e0030c24aa27c38201b1fc84e3d172899fcbe0"
+  integrity sha512-+ZLE3SQmSL+Fn1gmSaM8uFusW5Y3J9VOf+wMGNnTtJUMUxFhv+P4UPaYEYT8tqnyYVaOVGgMN/zsOxn9pSsO2A==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-x64" "1.0.1"
+
+"@img/sharp-wasm32@0.33.2":
+  version "0.33.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.33.2.tgz#38d7c740a22de83a60ad1e6bcfce17462b0d4230"
+  integrity sha512-fLbTaESVKuQcpm8ffgBD7jLb/CQLcATju/jxtTXR1XCLwbOQt+OL5zPHSDMmp2JZIeq82e18yE0Vv7zh6+6BfQ==
+  dependencies:
+    "@emnapi/runtime" "^0.45.0"
+
+"@img/sharp-win32-ia32@0.33.2":
+  version "0.33.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.2.tgz#09456314e223f68e5417c283b45c399635c16202"
+  integrity sha512-okBpql96hIGuZ4lN3+nsAjGeggxKm7hIRu9zyec0lnfB8E7Z6p95BuRZzDDXZOl2e8UmR4RhYt631i7mfmKU8g==
+
+"@img/sharp-win32-x64@0.33.2":
+  version "0.33.2"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.2.tgz#148e96dfd6e68747da41a311b9ee4559bb1b1471"
+  integrity sha512-E4magOks77DK47FwHUIGH0RYWSgRBfGdK56kIHSVeB9uIS4pPFr4N2kIVsXdQQo4LzOsENKV5KAhRlRL7eMAdg==
+
 "@inplayer-org/inplayer.js@^3.13.24":
   version "3.13.24"
   resolved "https://registry.yarnpkg.com/@inplayer-org/inplayer.js/-/inplayer.js-3.13.24.tgz#83c1fa7cd475b38b411a36641992c256a0d5d4d5"
@@ -2574,6 +2704,18 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
+"@vite-pwa/assets-generator@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@vite-pwa/assets-generator/-/assets-generator-0.2.3.tgz#cae0a853d0172e30e1083493a3e1ac5413fb04ef"
+  integrity sha512-tfCQamgaIv13bPUQ/tLkzXz2PqxgjYbJdQ/yTPEw9SF/pYGEvSy6pR0ABIsAIeRaOlhoiHnX77CtGcfEeGKIiw==
+  dependencies:
+    cac "^6.7.14"
+    colorette "^2.0.20"
+    consola "^3.2.3"
+    sharp "^0.32.6"
+    sharp-ico "^0.1.5"
+    unconfig "^0.3.11"
+
 "@vitejs/plugin-react@^4.0.4":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.2.0.tgz#d71352b1a443c09c7aae8f278dd071ab3d9d8490"
@@ -2751,6 +2893,11 @@ acorn@^8.10.0, acorn@^8.4.1, acorn@^8.8.2, acorn@^8.9.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
   integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
 
+acorn@^8.11.3:
+  version "8.11.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
+  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -3103,6 +3250,11 @@ axios@^0.26.0:
   dependencies:
     follow-redirects "^1.14.8"
 
+b4a@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/b4a/-/b4a-1.6.4.tgz#ef1c1422cae5ce6535ec191baeed7567443f36c9"
+  integrity sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==
+
 babel-plugin-macros@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
@@ -3705,11 +3857,27 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-string@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
+  dependencies:
+    color-convert "^2.0.1"
+    color-string "^1.9.0"
+
 colord@^2.9.3:
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
@@ -3828,6 +3996,11 @@ consola@^2.15.3:
   resolved "https://registry.yarnpkg.com/consola/-/consola-2.15.3.tgz#2e11f98d6a4be71ff72e0bdf07bd23e12cb61550"
   integrity sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==
 
+consola@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/consola/-/consola-3.2.3.tgz#0741857aa88cfa0d6fd53f1cff0375136e98502f"
+  integrity sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==
+
 conventional-changelog-angular@^5.0.11:
   version "5.0.13"
   resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.13.tgz#896885d63b914a70d4934b59d2fe7bde1832b28c"
@@ -4157,11 +4330,35 @@ decimal.js@^10.4.3:
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
   integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
 
+decode-bmp@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/decode-bmp/-/decode-bmp-0.2.1.tgz#cec3e0197ec3b6c60f02220f50e8757030ff2427"
+  integrity sha512-NiOaGe+GN0KJqi2STf24hfMkFitDUaIoUU3eKvP/wAbLe8o6FuW5n/x7MHPR0HKvBokp6MQY/j7w8lewEeVCIA==
+  dependencies:
+    "@canvas/image-data" "^1.0.0"
+    to-data-view "^1.1.0"
+
+decode-ico@*:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/decode-ico/-/decode-ico-0.4.1.tgz#e0f7373081532c7b8495bd51fb225d354e14de25"
+  integrity sha512-69NZfbKIzux1vBOd31al3XnMnH+2mqDhEgLdpygErm4d60N+UwA5Sq5WFjmEDQzumgB9fElojGwWG0vybVfFmA==
+  dependencies:
+    "@canvas/image-data" "^1.0.0"
+    decode-bmp "^0.2.0"
+    to-data-view "^1.1.0"
+
 decode-uri-component@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
   integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
 
+decompress-response@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
+  integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==
+  dependencies:
+    mimic-response "^3.1.0"
+
 deep-eql@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-3.0.1.tgz#dfc9404400ad1c8fe023e7da1df1c147c4b444df"
@@ -4200,6 +4397,11 @@ deep-equal@^2.0.5:
     which-collection "^1.0.1"
     which-typed-array "^1.1.13"
 
+deep-extend@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
+  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
+
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
@@ -4245,6 +4447,11 @@ define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0, de
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+defu@^6.1.2:
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.4.tgz#4e0c9cf9ff68fe5f3d7f2765cc1a012dfdcb0479"
+  integrity sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -4294,6 +4501,11 @@ detect-file@^1.0.0:
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
   integrity sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==
 
+detect-libc@^2.0.0, detect-libc@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.2.tgz#8ccf2ba9315350e1241b88d0ac3b0e1fbd99605d"
+  integrity sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==
+
 detect-node@^2.0.4, detect-node@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
@@ -4976,6 +5188,11 @@ execa@8.0.1:
     signal-exit "^4.1.0"
     strip-final-newline "^3.0.0"
 
+expand-template@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
+  integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==
+
 expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
@@ -5024,7 +5241,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-fifo@^1.1.0:
+fast-fifo@^1.1.0, fast-fifo@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
   integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
@@ -5427,6 +5644,11 @@ git-raw-commits@^2.0.0:
     split2 "^3.0.0"
     through2 "^4.0.0"
 
+github-from-package@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
+  integrity sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==
+
 glob-parent@^5.1.2, glob-parent@^6.0.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -5845,6 +6067,11 @@ i18next@^23.5.1:
   dependencies:
     "@babel/runtime" "^7.23.2"
 
+ico-endec@*:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/ico-endec/-/ico-endec-0.1.6.tgz#9b320cc3ed0a0c779f54e998a8db49002abd7c6e"
+  integrity sha512-ZdLU38ZoED3g1j3iEyzcQj+wAkY2xfWNkymszfJPoxucIUhK7NayQ+/C4Kv0nDFMIsbtbEHldv3V8PU494/ueQ==
+
 iconv-lite@0.6.3, iconv-lite@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
@@ -5940,7 +6167,7 @@ inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-ini@^1.3.4, ini@^1.3.5:
+ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
@@ -6017,6 +6244,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-async-function@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
@@ -6426,6 +6658,11 @@ jest-worker@^26.2.1:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
+jiti@^1.20.0:
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
+  integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
+
 joi@17.6.0:
   version "17.6.0"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.6.0.tgz#0bb54f2f006c09a96e75ce687957bd04290054b2"
@@ -7115,6 +7352,11 @@ mimic-fn@^4.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
   integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
 
+mimic-response@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
+  integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
+
 min-indent@^1.0.0, min-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -7162,12 +7404,12 @@ minimist@1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
-minimist@^1.1.0, minimist@^1.2.5, minimist@^1.2.6:
+minimist@^1.1.0, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
-mkdirp-classic@^0.5.2:
+mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
   integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
@@ -7192,6 +7434,16 @@ mlly@^1.2.0, mlly@^1.4.0:
     pkg-types "^1.0.3"
     ufo "^1.3.0"
 
+mlly@^1.4.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.5.0.tgz#8428a4617d54cc083d3009030ac79739a0e5447a"
+  integrity sha512-NPVQvAY1xr1QoVeG0cy8yUYC7FQcOx6evl/RjT1wL5FvzPnzOysoqB/jmx/DhssT2dYa8nxECLAaFI/+gVLhDQ==
+  dependencies:
+    acorn "^8.11.3"
+    pathe "^1.1.2"
+    pkg-types "^1.0.3"
+    ufo "^1.3.2"
+
 mocha@10.2.0:
   version "10.2.0"
   resolved "https://registry.yarnpkg.com/mocha/-/mocha-10.2.0.tgz#1fd4a7c32ba5ac372e03a17eef435bd00e5c68b8"
@@ -7306,6 +7558,11 @@ nanoid@^3.3.6, nanoid@^3.3.7:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
+napi-build-utils@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806"
+  integrity sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==
+
 natural-compare-lite@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
@@ -7344,6 +7601,18 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-abi@^3.3.0:
+  version "3.54.0"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.54.0.tgz#f6386f7548817acac6434c6cba02999c9aebcc69"
+  integrity sha512-p7eGEiQil0YUV3ItH4/tBb781L5impVmmx2E9FRKF7d18XXzp4PGT2tdYMFY6wQqgxD0IwNZOiSJ0/K0fSi/OA==
+  dependencies:
+    semver "^7.3.5"
+
+node-addon-api@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-6.1.0.tgz#ac8470034e58e67d0c6f1204a18ae6995d9c0d76"
+  integrity sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==
+
 node-fetch@2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
@@ -7817,6 +8086,11 @@ pathe@^1.1.0, pathe@^1.1.1:
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.1.tgz#1dd31d382b974ba69809adc9a7a347e65d84829a"
   integrity sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==
 
+pathe@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
+  integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
+
 pathval@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"
@@ -8046,6 +8320,24 @@ preact@10.13.2:
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.13.2.tgz#2c40c73d57248b57234c4ae6cd9ab9d8186ebc0a"
   integrity sha512-q44QFLhOhty2Bd0Y46fnYW0gD/cbVM9dUVtNTDKPcdXSMA7jfY+Jpd6rk3GB0lcQss0z5s/6CmVP0Z/hV+g6pw==
 
+prebuild-install@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
+  integrity sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==
+  dependencies:
+    detect-libc "^2.0.0"
+    expand-template "^2.0.3"
+    github-from-package "0.0.0"
+    minimist "^1.2.3"
+    mkdirp-classic "^0.5.3"
+    napi-build-utils "^1.0.1"
+    node-abi "^3.3.0"
+    pump "^3.0.0"
+    rc "^1.2.7"
+    simple-get "^4.0.0"
+    tar-fs "^2.0.0"
+    tunnel-agent "^0.6.0"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -8264,6 +8556,16 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
+rc@^1.2.7:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
+  dependencies:
+    deep-extend "^0.6.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
 react-app-polyfill@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz#95221e0a9bd259e5ca6b177c7bb1cb6768f68fd7"
@@ -8805,7 +9107,7 @@ safe-array-concat@^1.0.1:
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
-safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -8893,7 +9195,7 @@ semver@^6.0.0, semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.2.1, semver@^7.3.4, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4:
+semver@^7.2.1, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
@@ -8933,6 +9235,58 @@ set-function-name@^2.0.0, set-function-name@^2.0.1:
     functions-have-names "^1.2.3"
     has-property-descriptors "^1.0.0"
 
+sharp-ico@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/sharp-ico/-/sharp-ico-0.1.5.tgz#5d263558adfb00903313db9403e20dc66ffcfa5b"
+  integrity sha512-a3jODQl82NPp1d5OYb0wY+oFaPk7AvyxipIowCHk7pBsZCWgbe0yAkU2OOXdoH0ENyANhyOQbs9xkAiRHcF02Q==
+  dependencies:
+    decode-ico "*"
+    ico-endec "*"
+    sharp "*"
+
+sharp@*, sharp@^0.33.2:
+  version "0.33.2"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.33.2.tgz#fcd52f2c70effa8a02160b1bfd989a3de55f2dfb"
+  integrity sha512-WlYOPyyPDiiM07j/UO+E720ju6gtNtHjEGg5vovUk1Lgxyjm2LFO+37Nt/UI3MMh2l6hxTWQWi7qk3cXJTutcQ==
+  dependencies:
+    color "^4.2.3"
+    detect-libc "^2.0.2"
+    semver "^7.5.4"
+  optionalDependencies:
+    "@img/sharp-darwin-arm64" "0.33.2"
+    "@img/sharp-darwin-x64" "0.33.2"
+    "@img/sharp-libvips-darwin-arm64" "1.0.1"
+    "@img/sharp-libvips-darwin-x64" "1.0.1"
+    "@img/sharp-libvips-linux-arm" "1.0.1"
+    "@img/sharp-libvips-linux-arm64" "1.0.1"
+    "@img/sharp-libvips-linux-s390x" "1.0.1"
+    "@img/sharp-libvips-linux-x64" "1.0.1"
+    "@img/sharp-libvips-linuxmusl-arm64" "1.0.1"
+    "@img/sharp-libvips-linuxmusl-x64" "1.0.1"
+    "@img/sharp-linux-arm" "0.33.2"
+    "@img/sharp-linux-arm64" "0.33.2"
+    "@img/sharp-linux-s390x" "0.33.2"
+    "@img/sharp-linux-x64" "0.33.2"
+    "@img/sharp-linuxmusl-arm64" "0.33.2"
+    "@img/sharp-linuxmusl-x64" "0.33.2"
+    "@img/sharp-wasm32" "0.33.2"
+    "@img/sharp-win32-ia32" "0.33.2"
+    "@img/sharp-win32-x64" "0.33.2"
+
+sharp@^0.32.6:
+  version "0.32.6"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.6.tgz#6ad30c0b7cd910df65d5f355f774aa4fce45732a"
+  integrity sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==
+  dependencies:
+    color "^4.2.3"
+    detect-libc "^2.0.2"
+    node-addon-api "^6.1.0"
+    prebuild-install "^7.1.1"
+    semver "^7.5.4"
+    simple-get "^4.0.1"
+    tar-fs "^3.0.4"
+    tunnel-agent "^0.6.0"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -8998,6 +9352,27 @@ signal-exit@^4.0.1, signal-exit@^4.1.0:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
+simple-concat@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
+  integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
+
+simple-get@^4.0.0, simple-get@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.1.tgz#4a39db549287c979d352112fa03fd99fd6bc3543"
+  integrity sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==
+  dependencies:
+    decompress-response "^6.0.0"
+    once "^1.3.1"
+    simple-concat "^1.0.0"
+
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -9181,6 +9556,14 @@ streamx@^2.12.0, streamx@^2.12.5, streamx@^2.13.2, streamx@^2.14.0:
     fast-fifo "^1.1.0"
     queue-tick "^1.0.1"
 
+streamx@^2.15.0:
+  version "2.15.6"
+  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.15.6.tgz#28bf36997ebc7bf6c08f9eba958735231b833887"
+  integrity sha512-q+vQL4AAz+FdfT137VF69Cc/APqUbxy+MDOImRrMvchJpigHj9GksgDU2LYbO9rx7RX6osWgxJB2WxhYv4SZAw==
+  dependencies:
+    fast-fifo "^1.1.0"
+    queue-tick "^1.0.1"
+
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
@@ -9353,6 +9736,11 @@ strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+strip-json-comments@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
+
 strip-literal@^1.0.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/strip-literal/-/strip-literal-1.3.0.tgz#db3942c2ec1699e6836ad230090b84bb458e3a07"
@@ -9545,7 +9933,7 @@ table@^6.0.9, table@^6.8.1:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tar-fs@2.1.1:
+tar-fs@2.1.1, tar-fs@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
   integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==
@@ -9555,6 +9943,15 @@ tar-fs@2.1.1:
     pump "^3.0.0"
     tar-stream "^2.1.4"
 
+tar-fs@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-3.0.4.tgz#a21dc60a2d5d9f55e0089ccd78124f1d3771dbbf"
+  integrity sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==
+  dependencies:
+    mkdirp-classic "^0.5.2"
+    pump "^3.0.0"
+    tar-stream "^3.1.5"
+
 tar-stream@^2.1.4:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
@@ -9566,6 +9963,15 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
+tar-stream@^3.1.5:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-3.1.7.tgz#24b3fb5eabada19fe7338ed6d26e5f7c482e792b"
+  integrity sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==
+  dependencies:
+    b4a "^1.6.4"
+    fast-fifo "^1.2.0"
+    streamx "^2.15.0"
+
 teex@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/teex/-/teex-1.0.1.tgz#b8fa7245ef8e8effa8078281946c85ab780a0b12"
@@ -9674,6 +10080,11 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
+to-data-view@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/to-data-view/-/to-data-view-1.1.0.tgz#08d6492b0b8deb9b29bdf1f61c23eadfa8994d00"
+  integrity sha512-1eAdufMg6mwgmlojAx3QeMnzB/BTVp7Tbndi3U7ftcT2zCZadjxkkmLmd97zmaxWi+sgGcgWrokmpEoy0Dn0vQ==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -9787,7 +10198,7 @@ tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3, tslib@^2.3.0:
+tslib@^2.0.3, tslib@^2.3.0, tslib@^2.4.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
@@ -9799,6 +10210,13 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  integrity sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==
+  dependencies:
+    safe-buffer "^5.0.1"
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -9924,7 +10342,7 @@ typescript@^5.0.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
   integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
 
-ufo@^1.3.0:
+ufo@^1.3.0, ufo@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.3.2.tgz#c7d719d0628a1c80c006d2240e0d169f6e3c0496"
   integrity sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==
@@ -9957,6 +10375,16 @@ unbzip2-stream@1.4.3:
     buffer "^5.2.1"
     through "^2.3.8"
 
+unconfig@^0.3.11:
+  version "0.3.11"
+  resolved "https://registry.yarnpkg.com/unconfig/-/unconfig-0.3.11.tgz#455e6c8e3fdedeccd393f51fcabeb205ebaf2908"
+  integrity sha512-bV/nqePAKv71v3HdVUn6UefbsDKQWRX+bJIkiSm0+twIds6WiD2bJLWWT3i214+J/B4edufZpG2w7Y63Vbwxow==
+  dependencies:
+    "@antfu/utils" "^0.7.6"
+    defu "^6.1.2"
+    jiti "^1.20.0"
+    mlly "^1.4.2"
+
 underscore.string@~3.3.4:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-3.3.6.tgz#ad8cf23d7423cb3b53b898476117588f4e2f9159"

From 1e3607d354218c6c853e4588fd10e5ad48bf1118 Mon Sep 17 00:00:00 2001
From: langemike <mikevv@gmail.com>
Date: Fri, 26 Jan 2024 17:26:59 +0100
Subject: [PATCH 008/128] chore(project): dynamic manifest.json

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>
---
 platforms/web/index.html                      |   8 ++--
 platforms/web/package.json                    |   3 +-
 .../images/icons/android-chrome-144x144.png   | Bin 1352 -> 0 bytes
 platforms/web/public/manifest.json            |  18 ---------
 platforms/web/types/global.d.ts               |   6 +++
 platforms/web/vite.config.ts                  |  35 +++++++++++++++++-
 6 files changed, 46 insertions(+), 24 deletions(-)
 delete mode 100644 platforms/web/public/images/icons/android-chrome-144x144.png
 delete mode 100644 platforms/web/public/manifest.json

diff --git a/platforms/web/index.html b/platforms/web/index.html
index 7b9728ae5..47456259a 100644
--- a/platforms/web/index.html
+++ b/platforms/web/index.html
@@ -2,13 +2,13 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title>JW OTT Webapp</title>
+  <title><% name %></title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-  <meta name="description" content="JW OTT Webapp is an open-source, dynamically generated video website." data-react-helmet="true" />
+  <meta name="description" content="<% description %>" data-react-helmet="true" />
   <meta name="twitter:card" content="summary" data-react-helmet="true"  />
-  <meta property="og:title" content="JW OTT Webapp" data-react-helmet="true" >
-  <meta property="og:description" content="JW OTT Webapp is an open-source, dynamically generated video website." data-react-helmet="true">
+  <meta property="og:title" content="<% name %>" data-react-helmet="true" >
+  <meta property="og:description" content="<% description %>" data-react-helmet="true">
   <meta property="og:image" content="/images/icons/app-icon.png" data-react-helmet="true">
 
   <link rel="icon" href="/images/icons/favicon.ico" type="image/x-icon" sizes="any">
diff --git a/platforms/web/package.json b/platforms/web/package.json
index ae952b895..80b28d68f 100644
--- a/platforms/web/package.json
+++ b/platforms/web/package.json
@@ -92,6 +92,7 @@
   },
   "optionalDependencies": {
     "gh-pages": "^3.2.3",
-    "lighthouse": "^9.6.7"
+    "lighthouse": "^9.6.7",
+    "sharp": "^0.33.2"
   }
 }
diff --git a/platforms/web/public/images/icons/android-chrome-144x144.png b/platforms/web/public/images/icons/android-chrome-144x144.png
deleted file mode 100644
index 886942aea4c22e8809fe65785c567ed14a509a71..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1352
zcmZ`(e>4+%6#s6+W`xDmleFeX%g=4<$?!DhgeA-}KZ_VSFN`K^s=bk=BvxKxWhkYb
z^wd+lMt;>^TYl6WKUZG*g;Y#Wc-EWu{(67BKkogUd++(2d+t5=a|?p@>{^2~LjnNS
z`1w+38Z2HlgvNmm2T8mJv=YeyWB`6StM^x|wkF2J`O*Ra;Mf4b%L8CZlj6MxAOjD;
zR15&5G62@GL@mMYnga9ybr%JE6P%T|X(Bk=FTe->2BEEo*6r=Jbp`-7<3}OWvqok{
z_xpwfo5MeU%BZNQFzul&$6c{I{S<-S`rhG5wZN(nfyE;EVr;c%A2qPw8?{n%p-|3$
zrbeNMH|fcC->y~!>2;guHP?$K*(vufOie~rxV1e`nO*ky$m&`7Ama8eD!IJ_Hl0x=
z=MRG1^<5YpYqN(K9l}X+fe!v8S^q##HAMeF-*LmnqR{KZGiEEB1zwySu{=E6^<q=M
z?PD}YERlS9K142J-h9jK%QOVzD%tej&ACKs`PYT{=*V|F(Anej_R_343=v%Yw9jP^
z8V*FQvrgUE*<$O|hzZcQ{DamKOU{B7ZI?V2#KF-&UjZe{jB@z<2BLB@Qlj9W7q*O)
zk&CL6cFvE)w(-@F&sBslVP2At6J^CowEnOu^twl_6!!J(05q)3($<(ybbt7{#$d07
zc%mOaj_R@XDt6FD+^tiAWC*6))ENOfY#ndEL?JhnmZhXIjWlzM33=T%!QtA{djwgO
zSft!?Dq4ZLNr_fAOCzI}_(%HBK_I?PwhzLGz5IldC)*bCCq_MNppf!JS>2hG#<9qB
zDF8*T+1*zITl>c*Xgt8ET9{nSKc?b=!Nz7oyL~=#7_@QFvE^{PQvfzfX8+u!G`Xj-
z46Zel_|Z-B%wbSRSquTfb+0{d=3t$J*XHu((I*DpMRcSMUh5Uyl@DCyrk{HXgVu*M
ziNZa*DVT>u?#q(y1Soma<a9xU&7$8LfN1@Jp;Eew+aFE4v^|QvXkn7vmUGQnU0P{o
zqC4jJ$y|7lXL{v$o$IJo=VqNR1B_5Z|0Xg5>9Vh0ZKXthhx^cQf5Zd((g1~9noSAc
z0udk;s{4(X^SohZ^>)W!?CPunCtj59JzB+mx<wC}Id)%RY&{|6&)@ou@#0ylRw?ug
zBl_U^ONg!H8Mn*Av3lW85fQ)d52q#+BHh0YhJ>vimOc&Hc<qM!p&Lhci~C$+sspX1
zE~xcJAB#|Y&IpjrK{GD%-<XP<-4cQrXAH6y-r14bg>wsBh@_TEzpm?9Zogwnd;aZQ
z{?|&hnIKussnmI(95!+D9lf1t&MVm&)Sh2^S2q;2dow#e_=v=l=(<rF<i{gTd<!U;
zudFvp4AH50)e+D>wk_i@{dH%Z3ib+HlbrhpBO~}iz7>Zaj~mLE9`~rZ6XL918z!rq
z=}9jjecxi`l5d&mZnUythMSp6tw@`5^A|SUYcfLzoYGe0#Mp0Kuv1_9wUF%TeR^8;
z=VHjW9BS?22DOE6Y*~tQRapdFfBV1EGWcf?{_ItS(KdPlA<$;vPQkM@zrdR96UL5@
zWiv@}=}Zj(BA!Ta!0&LtZ>JLoBqD)?ceTUgNq9VRBKg>V2+67ONeS8iPvEu=bZ7_+
z4n2%bi_OHa(o++X4lyz8Y!(xf#A3$*kR_U!(?_I*;&4v_WpckaGyt>IbBxn7wlt=m
zGl3anD7<Z*@i5Cfbc}3BA?=cPnRmfuJYTWDBbZu;V$XSPFV(aFem;9Bx4dHbe*+&0
BLID5(

diff --git a/platforms/web/public/manifest.json b/platforms/web/public/manifest.json
deleted file mode 100644
index 988e1ebac..000000000
--- a/platforms/web/public/manifest.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "JW OTT Webapp",
-  "display": "standalone",
-  "start_url": "/",
-  "short_name": "JW OTT",
-  "theme_color": "#DD0000",
-  "description": "JW OTT Webapp is an open-source, dynamically generated video website.",
-  "orientation": "any",
-  "background_color": "#000",
-  "related_applications": [],
-  "prefer_related_applications": false,
-  "icons": [
-    {
-      "src": "images/icons/pwa-144x144.png",
-      "sizes": "144x144"
-    }
-  ]
-}
diff --git a/platforms/web/types/global.d.ts b/platforms/web/types/global.d.ts
index cdf5137bc..e324effa9 100644
--- a/platforms/web/types/global.d.ts
+++ b/platforms/web/types/global.d.ts
@@ -7,3 +7,9 @@ interface Window {
 interface HTMLDivElement {
   inert: boolean;
 }
+
+type OTTConfig = {
+  name: string;
+  shortname: string;
+  description: string;
+};
diff --git a/platforms/web/vite.config.ts b/platforms/web/vite.config.ts
index 4ad4d3b35..c39dd9dc7 100644
--- a/platforms/web/vite.config.ts
+++ b/platforms/web/vite.config.ts
@@ -20,6 +20,12 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
 
   const localFile = initSettings(mode);
 
+  const app: OTTConfig = {
+    name: process.env.APP_NAME || 'JW OTT Webapp',
+    shortname: process.env.APP_SHORT_NAME || 'JW OTT',
+    description: process.env.APP_DESCRIPTION || 'JW OTT Webapp is an open-source, dynamically generated video website.',
+  };
+
   // Make sure to builds are always production type,
   // otherwise modes other than 'production' get built in dev
   if (command === 'build') {
@@ -93,11 +99,38 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
       eslintPlugin({ emitError: mode === 'production' || mode === 'demo' || mode === 'preview' }), // Move linting to pre-build to match dashboard
       StylelintPlugin(),
       svgr(),
-      VitePWA(),
+      VitePWA({
+        manifestFilename: 'manifest.json',
+        manifest: {
+          name: app.name,
+          description: app.description,
+          short_name: app.shortname,
+          display: 'standalone',
+          start_url: '/',
+          theme_color: '#DD0000',
+          orientation: 'any',
+          background_color: '#000',
+          related_applications: [],
+          prefer_related_applications: false,
+          icons: [
+            {
+              src: 'images/icons/pwa-192x192.png',
+              sizes: '192x192',
+              type: 'image/png',
+            },
+            {
+              src: 'images/icons/pwa-512x512.png',
+              sizes: '512x512',
+              type: 'image/png',
+            },
+          ],
+        },
+      }),
       createHtmlPlugin({
         minify: true,
         inject: {
           tags: getGoogleScripts(),
+          data: app,
         },
       }),
       viteStaticCopy({

From bcfb08b99e94e5434e59934d08198fc69aac1e25 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 30 Jan 2024 11:36:23 +0100
Subject: [PATCH 009/128] chore: update depcheck

---
 packages/common/.depcheckrc.yaml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/common/.depcheckrc.yaml b/packages/common/.depcheckrc.yaml
index bb6560f17..a149870a7 100644
--- a/packages/common/.depcheckrc.yaml
+++ b/packages/common/.depcheckrc.yaml
@@ -3,4 +3,7 @@ ignores: [
   '@typescript-eslint/parser',
   '@typescript-eslint/eslint-plugin',
   'eslint-plugin-import',
+
+  # Installed by inplayer SDK (only used for typings)
+  'axios'
 ]

From bb593e97ce2635d9c33c1d027da51075509a7462 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Thu, 25 Jan 2024 09:29:33 -0300
Subject: [PATCH 010/128] fix(player): inlineplayer not supporting tvod

---
 .../src/containers/InlinePlayer/InlinePlayer.tsx | 16 ++++++++++------
 .../src/pages/LegacySeries/LegacySeries.tsx      |  7 ++++---
 .../mediaScreens/MediaEvent/MediaEvent.tsx       |  7 ++++---
 .../mediaScreens/MediaMovie/MediaMovie.tsx       |  7 ++++---
 .../mediaScreens/MediaSeries/MediaSeries.tsx     |  8 +++++---
 platforms/web/public/locales/en/video.json       |  1 +
 platforms/web/public/locales/es/video.json       |  1 +
 7 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/packages/ui-react/src/containers/InlinePlayer/InlinePlayer.tsx b/packages/ui-react/src/containers/InlinePlayer/InlinePlayer.tsx
index 97667ae25..4ebb70d35 100644
--- a/packages/ui-react/src/containers/InlinePlayer/InlinePlayer.tsx
+++ b/packages/ui-react/src/containers/InlinePlayer/InlinePlayer.tsx
@@ -26,9 +26,10 @@ type Props = {
   liveFromBeginning?: boolean;
   startWatchingButton: React.ReactNode;
   isLoggedIn: boolean;
-  paywall: boolean;
+  isEntitled: boolean;
   playable?: boolean;
   autostart?: boolean;
+  hasMediaOffers?: boolean;
 };
 
 const InlinePlayer: React.FC<Props> = ({
@@ -43,9 +44,10 @@ const InlinePlayer: React.FC<Props> = ({
   liveFromBeginning,
   startWatchingButton,
   isLoggedIn,
-  paywall,
+  isEntitled,
   autostart,
   playable = true,
+  hasMediaOffers,
 }: Props) => {
   const siteName = useConfigStore((s) => s.config.siteName);
   const { t } = useTranslation();
@@ -56,15 +58,17 @@ const InlinePlayer: React.FC<Props> = ({
     navigate(modalURLFromLocation(location, 'login'));
   };
 
+  const buyLabel = hasMediaOffers ? t('video:buy_to_start_watching') : t('video:sign_up_to_start_watching');
+
   return (
     <div className={styles.inlinePlayer}>
-      <Fade open={!playable || paywall}>
+      <Fade open={!playable || !isEntitled}>
         <div className={styles.paywall}>
           <Image className={styles.poster} image={item.backgroundImage} alt={item.title} width={1280} />
-          {paywall && (
+          {!isEntitled && (
             <>
               <Icon icon={Lock} className={styles.lock} />
-              <h2 className={styles.title}>{t('video:sign_up_to_start_watching')}</h2>
+              <h2 className={styles.title}>{buyLabel}</h2>
               <span className={styles.text}>{t('account:choose_offer.watch_this_on_platform', { siteName })}</span>
               {startWatchingButton}
               {!isLoggedIn && <Button onClick={loginButtonClickHandler} label={t('common:sign_in')} />}
@@ -72,7 +76,7 @@ const InlinePlayer: React.FC<Props> = ({
           )}
         </div>
       </Fade>
-      {!paywall && playable && (
+      {isEntitled && playable && (
         <PlayerContainer
           item={item}
           seriesItem={seriesItem}
diff --git a/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx b/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx
index 03beca389..8fed6a372 100644
--- a/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx
+++ b/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx
@@ -7,7 +7,6 @@ import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useWatchHistoryStore } from '@jwp/ott-common/src/stores/WatchHistoryStore';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import { isLocked } from '@jwp/ott-common/src/utils/entitlements';
 import { formatPlaylistMetaString, formatSeriesMetaString, formatVideoMetaString } from '@jwp/ott-common/src/utils/formatting';
 import { legacySeriesURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import useEntitlement from '@jwp/ott-hooks-react/src/useEntitlement';
@@ -75,7 +74,8 @@ const LegacySeries = () => {
 
   // User, entitlement
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
-  const { isEntitled } = useEntitlement(episode);
+  const { isEntitled, mediaOffers } = useEntitlement(episode);
+  const hasMediaOffers = !!mediaOffers.length;
   const isLoggedIn = !!user;
   const hasSubscription = !!subscription;
 
@@ -211,7 +211,8 @@ const LegacySeries = () => {
               onComplete={handleComplete}
               feedId={feedId ?? undefined}
               startWatchingButton={startWatchingButton}
-              paywall={isLocked(accessModel, isLoggedIn, hasSubscription, episode || firstEpisode)}
+              isEntitled={isEntitled}
+              hasMediaOffers={hasMediaOffers}
               autostart={play || undefined}
             />
           ) : (
diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx
index 9ad0af568..ed4cb7086 100644
--- a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx
@@ -7,7 +7,6 @@ import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { MediaStatus } from '@jwp/ott-common/src/utils/liveEvent';
-import { isLocked } from '@jwp/ott-common/src/utils/entitlements';
 import { formatLiveEventMetaString } from '@jwp/ott-common/src/utils/formatting';
 import { mediaURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { generateMovieJSONLD } from '@jwp/ott-common/src/utils/structuredData';
@@ -61,7 +60,8 @@ const MediaEvent: ScreenComponent<PlaylistItem> = ({ data: media, isLoading }) =
 
   // User, entitlement
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
-  const { isEntitled } = useEntitlement(media);
+  const { isEntitled, mediaOffers } = useEntitlement(media);
+  const hasMediaOffers = !!mediaOffers.length;
 
   // Handlers
   const goBack = () => media && navigate(mediaURL({ media, playlistId, play: false }));
@@ -168,7 +168,8 @@ const MediaEvent: ScreenComponent<PlaylistItem> = ({ data: media, isLoading }) =
               onComplete={handleComplete}
               feedId={playlistId ?? undefined}
               startWatchingButton={startWatchingButton}
-              paywall={isLocked(accessModel, isLoggedIn, hasSubscription, media)}
+              isEntitled={isEntitled}
+              hasMediaOffers={hasMediaOffers}
               autostart={liveEvent.isPlayable && (play || undefined)}
               playable={liveEvent.isPlayable}
             />
diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx
index b69586005..b24535841 100644
--- a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx
@@ -6,7 +6,6 @@ import { shallow } from '@jwp/ott-common/src/utils/compare';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import { isLocked } from '@jwp/ott-common/src/utils/entitlements';
 import { formatVideoMetaString } from '@jwp/ott-common/src/utils/formatting';
 import { mediaURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { generateMovieJSONLD } from '@jwp/ott-common/src/utils/structuredData';
@@ -55,7 +54,8 @@ const MediaMovie: ScreenComponent<PlaylistItem> = ({ data, isLoading }) => {
 
   // User, entitlement
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
-  const { isEntitled } = useEntitlement(data);
+  const { isEntitled, mediaOffers } = useEntitlement(data);
+  const hasMediaOffers = !!mediaOffers.length;
 
   // Handlers
   const goBack = () => data && navigate(mediaURL({ media: data, playlistId: feedId, play: false }));
@@ -152,7 +152,8 @@ const MediaMovie: ScreenComponent<PlaylistItem> = ({ data, isLoading }) => {
               onComplete={handleComplete}
               feedId={feedId ?? undefined}
               startWatchingButton={startWatchingButton}
-              paywall={isLocked(accessModel, isLoggedIn, hasSubscription, data)}
+              isEntitled={isEntitled}
+              hasMediaOffers={hasMediaOffers}
               autostart={play || undefined}
             />
           ) : (
diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx
index 144546d27..8718a703f 100644
--- a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx
@@ -9,7 +9,6 @@ import { useWatchHistoryStore } from '@jwp/ott-common/src/stores/WatchHistorySto
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { generateEpisodeJSONLD } from '@jwp/ott-common/src/utils/structuredData';
-import { isLocked } from '@jwp/ott-common/src/utils/entitlements';
 import { getEpisodesInSeason, getFiltersFromSeries } from '@jwp/ott-common/src/utils/series';
 import { formatSeriesMetaString, formatVideoMetaString } from '@jwp/ott-common/src/utils/formatting';
 import { buildLegacySeriesUrlFromMediaItem, mediaURL } from '@jwp/ott-common/src/utils/urlFormatting';
@@ -106,7 +105,9 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
 
   // User, entitlement
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
-  const { isEntitled } = useEntitlement(episode);
+  const { isEntitled, mediaOffers } = useEntitlement(episode);
+  const hasMediaOffers = !!mediaOffers.length;
+
   const isLoggedIn = !!user;
   const hasSubscription = !!subscription;
 
@@ -278,7 +279,8 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
               feedId={feedId ?? undefined}
               onPlay={handleInlinePlay}
               startWatchingButton={startWatchingButton}
-              paywall={isLocked(accessModel, isLoggedIn, hasSubscription, episode || firstEpisode)}
+              isEntitled={isEntitled}
+              hasMediaOffers={hasMediaOffers}
               autostart={play || undefined}
             />
           ) : (
diff --git a/platforms/web/public/locales/en/video.json b/platforms/web/public/locales/en/video.json
index 56dc8c259..a679209ef 100644
--- a/platforms/web/public/locales/en/video.json
+++ b/platforms/web/public/locales/en/video.json
@@ -2,6 +2,7 @@
   "add_to_favorites": "Add to favorites",
   "all_seasons": "All seasons",
   "buy": "Buy",
+  "buy_to_start_watching": "Buy to start watching!",
   "complete_your_subscription": "Complete your subscription",
   "continue_watching": "Continue watching",
   "copied_url": "Copied url",
diff --git a/platforms/web/public/locales/es/video.json b/platforms/web/public/locales/es/video.json
index a656b0d03..6114ef3de 100644
--- a/platforms/web/public/locales/es/video.json
+++ b/platforms/web/public/locales/es/video.json
@@ -2,6 +2,7 @@
   "add_to_favorites": "Agregar a favoritos",
   "all_seasons": "Todas las temporadas",
   "buy": "Comprar",
+  "buy_to_start_watching": "Compra para empezar a mirar!",
   "complete_your_subscription": "Completa tu suscripción",
   "continue_watching": "Continuar viendo",
   "copied_url": "URL copiada",

From 7de84ae37f174c04bdea26af1818721dfe9956d8 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Thu, 25 Jan 2024 10:15:34 -0300
Subject: [PATCH 011/128] fix(user): tvod subscription not reloaded after login
 for authvod/avod

---
 .../common/src/stores/AccountController.ts    | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/common/src/stores/AccountController.ts b/packages/common/src/stores/AccountController.ts
index a077420c4..0164bd42e 100644
--- a/packages/common/src/stores/AccountController.ts
+++ b/packages/common/src/stores/AccountController.ts
@@ -1,7 +1,7 @@
 import i18next from 'i18next';
 import { inject, injectable } from 'inversify';
 
-import { ACCESS_MODEL, DEFAULT_FEATURES } from '../constants';
+import { DEFAULT_FEATURES } from '../constants';
 import { logDev } from '../utils/common';
 import type { IntegrationType } from '../../types/config';
 import CheckoutService from '../services/integrations/CheckoutService';
@@ -166,12 +166,12 @@ export default class AccountController {
   };
 
   getAccount = async () => {
-    const { config, accessModel } = useConfigStore.getState();
+    const { config } = useConfigStore.getState();
 
     try {
       const response = await this.accountService.getUser({ config });
       if (response) {
-        await this.afterLogin(response.user, response.customerConsents, accessModel);
+        await this.afterLogin(response.user, response.customerConsents);
       }
 
       useAccountStore.setState({ loading: false });
@@ -189,14 +189,14 @@ export default class AccountController {
   };
 
   login = async (email: string, password: string, referrer: string) => {
-    const { config, accessModel } = useConfigStore.getState();
+    const { config } = useConfigStore.getState();
 
     useAccountStore.setState({ loading: true });
 
     const response = await this.accountService.login({ config, email, password, referrer });
 
     if (response) {
-      await this.afterLogin(response.user, response.customerConsents, accessModel);
+      await this.afterLogin(response.user, response.customerConsents);
 
       await this.favoritesController?.restoreFavorites().catch(logDev);
       await this.watchHistoryController?.restoreWatchHistory().catch(logDev);
@@ -214,14 +214,14 @@ export default class AccountController {
   };
 
   register = async (email: string, password: string, referrer: string, consents: CustomerConsent[]) => {
-    const { config, accessModel } = useConfigStore.getState();
+    const { config } = useConfigStore.getState();
 
     useAccountStore.setState({ loading: true });
     const response = await this.accountService.register({ config, email, password, consents, referrer });
 
     if (response) {
       const { user, customerConsents } = response;
-      await this.afterLogin(user, customerConsents, accessModel);
+      await this.afterLogin(user, customerConsents);
     }
 
     await this.updatePersonalShelves();
@@ -294,14 +294,13 @@ export default class AccountController {
 
   updateCaptureAnswers = async (capture: Capture): Promise<Capture> => {
     const { getAccountInfo } = useAccountStore.getState();
-    const { accessModel } = useConfigStore.getState();
     const { customer, customerConsents } = getAccountInfo();
 
     const response = await this.accountService.updateCaptureAnswers({ customer, ...capture });
 
     if (response.errors.length > 0) throw new Error(response.errors[0]);
 
-    await this.afterLogin(response.responseData as Customer, customerConsents, accessModel, false);
+    await this.afterLogin(response.responseData as Customer, customerConsents, false);
 
     return response.responseData;
   };
@@ -509,14 +508,14 @@ export default class AccountController {
     return this.features;
   }
 
-  private async afterLogin(user: Customer, customerConsents: CustomerConsent[] | null, accessModel: string, shouldSubscriptionReload: boolean = true) {
+  private async afterLogin(user: Customer, customerConsents: CustomerConsent[] | null, shouldReloadSubscription = true) {
     useAccountStore.setState({
       user,
       customerConsents,
     });
 
     await Promise.allSettled([
-      accessModel === ACCESS_MODEL.SVOD && shouldSubscriptionReload ? this.reloadActiveSubscription() : Promise.resolve(),
+      shouldReloadSubscription ? this.reloadActiveSubscription() : Promise.resolve(), // For every accessModal there could be TVOD items, so we always reload the subscription
       this.getPublisherConsents(),
     ]);
 

From 3c021a92c1aa5925f64ecbc2c7bbf1934d52bfa2 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Thu, 25 Jan 2024 11:01:24 -0300
Subject: [PATCH 012/128] refactor(payment): fix hasTVODOffers not properly
 defined

---
 packages/hooks-react/src/useOffers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/hooks-react/src/useOffers.ts b/packages/hooks-react/src/useOffers.ts
index 25da82389..53c9f6697 100644
--- a/packages/hooks-react/src/useOffers.ts
+++ b/packages/hooks-react/src/useOffers.ts
@@ -39,7 +39,7 @@ const useOffers = () => {
     const defaultOfferId = (!isLoading && offers[offers.length - 1]?.offerId) || '';
 
     return {
-      hasTVODOffers: offers.some((offer: Offer) => !isSVODOffer(offer)),
+      hasTVODOffers: allOffers?.some((offer: Offer) => !isSVODOffer(offer)),
       hasMultipleOfferTypes,
       isLoading,
       hasPremierOffer,

From 7b483b90d2bf8cf8d71740a8a2fe2a5df25a4e3e Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Thu, 25 Jan 2024 11:03:29 -0300
Subject: [PATCH 013/128] docs(project): update url signing link

---
 docs/features/video-protection.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/features/video-protection.md b/docs/features/video-protection.md
index 28c9927d1..71d181287 100644
--- a/docs/features/video-protection.md
+++ b/docs/features/video-protection.md
@@ -11,7 +11,7 @@ This article outlines how such an authorization service should work.
 
 ## Signed URLs
 
-With [URL signing](https://support.jwplayer.com/articles/how-to-enable-url-token-signing) enabled on the JW property, a video client can only access the media URLs from JW backends when it has a valid JWT token:
+With [URL signing](https://docs.jwplayer.com/platform/reference/protect-your-content-with-signed-urls) enabled on the JW property, a video client can only access the media URLs from JW backends when it has a valid JWT token:
 
 ```
 GET media/PEEzDfdA?token=<tokenA>

From d63b0562e74c624bae0690048467442595928fe2 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Thu, 25 Jan 2024 14:44:47 -0300
Subject: [PATCH 014/128] fix(payment): subscription offer panel shown for
 authvod+tvod

---
 packages/hooks-react/src/useOffers.ts               | 13 +++++++++----
 .../containers/AccountModal/forms/ChooseOffer.tsx   |  4 ++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/hooks-react/src/useOffers.ts b/packages/hooks-react/src/useOffers.ts
index 53c9f6697..580dfad9a 100644
--- a/packages/hooks-react/src/useOffers.ts
+++ b/packages/hooks-react/src/useOffers.ts
@@ -28,10 +28,16 @@ const useOffers = () => {
 
   const { data: allOffers, isLoading } = useQuery(['offers', offerIds.join('-')], () => checkoutController.getOffers({ offerIds }));
 
+  const hasMultipleOfferTypes = (allOffers || []).some((offer: Offer) => (offerType === 'tvod' ? isSVODOffer(offer) : !isSVODOffer(offer)));
+
+  const updateOfferType = useMemo(
+    () => (!hasPremierOffer && hasMultipleOfferTypes ? (type: OfferType) => setOfferType(type) : undefined),
+    [hasMultipleOfferTypes, hasPremierOffer],
+  );
+
   // The `offerQueries` variable mutates on each render which prevents the useMemo to work properly.
   return useMemo(() => {
     const offers = (allOffers || []).filter((offer: Offer) => (offerType === 'tvod' ? !isSVODOffer(offer) : isSVODOffer(offer)));
-    const hasMultipleOfferTypes = (allOffers || []).some((offer: Offer) => (offerType === 'tvod' ? isSVODOffer(offer) : !isSVODOffer(offer)));
 
     const offersDict = (!isLoading && Object.fromEntries(offers.map((offer: Offer) => [offer.offerId, offer]))) || {};
     // we need to get the offerIds from the offer responses since it contains different offerIds based on the customers'
@@ -45,12 +51,11 @@ const useOffers = () => {
       hasPremierOffer,
       defaultOfferId,
       offerType,
-      setOfferType,
+      setOfferType: updateOfferType,
       offers,
       offersDict,
-      isTvodRequested: hasTvodOffer,
     };
-  }, [allOffers, isLoading, hasPremierOffer, offerType, hasTvodOffer]);
+  }, [allOffers, isLoading, hasMultipleOfferTypes, hasPremierOffer, offerType, updateOfferType]);
 };
 
 export default useOffers;
diff --git a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
index 8b5bdcaeb..dc998cda6 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
@@ -41,7 +41,7 @@ const ChooseOffer = () => {
   const location = useLocation();
   const { t } = useTranslation('account');
   const { setOffer } = useCheckoutStore(({ setOffer }) => ({ setOffer }), shallow);
-  const { isLoading, offerType, setOfferType, offers, offersDict, defaultOfferId, hasMultipleOfferTypes, hasPremierOffer, isTvodRequested } = useOffers();
+  const { isLoading, offerType, setOfferType, offers, offersDict, defaultOfferId } = useOffers();
   const { subscription } = useAccountStore.getState();
   const [offerSwitches, updateOffer] = useCheckoutStore((state) => [state.offerSwitches, state.updateOffer]);
   const isOfferSwitch = useQueryParam('u') === 'upgrade-subscription';
@@ -137,7 +137,7 @@ const ChooseOffer = () => {
       submitting={submitting}
       offers={availableOffers}
       offerType={offerType}
-      setOfferType={isTvodRequested || (hasMultipleOfferTypes && !hasPremierOffer) ? setOfferType : undefined}
+      setOfferType={setOfferType}
     />
   );
 };

From 626fa6be6dccacac719fca96cbfaef3a02fe3672 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Thu, 25 Jan 2024 15:17:01 -0300
Subject: [PATCH 015/128] refactor(payment): simplify useOffers hook

---
 packages/common/src/utils/offers.ts           |  7 ++++
 packages/hooks-react/src/useOffers.ts         | 35 ++++++-------------
 .../AccountModal/forms/PersonalDetails.tsx    |  6 ++--
 3 files changed, 20 insertions(+), 28 deletions(-)
 create mode 100644 packages/common/src/utils/offers.ts

diff --git a/packages/common/src/utils/offers.ts b/packages/common/src/utils/offers.ts
new file mode 100644
index 000000000..0fc8d4a34
--- /dev/null
+++ b/packages/common/src/utils/offers.ts
@@ -0,0 +1,7 @@
+import type { MediaOffer } from '../../types/media';
+
+export const mergeOfferIds = (mediaOffers: MediaOffer[] = [], svodOfferIds: string[] = []) => {
+  const mediaOfferIds = mediaOffers.map(({ offerId }) => offerId);
+
+  return [...mediaOfferIds, ...svodOfferIds];
+};
diff --git a/packages/hooks-react/src/useOffers.ts b/packages/hooks-react/src/useOffers.ts
index 580dfad9a..2b29385fa 100644
--- a/packages/hooks-react/src/useOffers.ts
+++ b/packages/hooks-react/src/useOffers.ts
@@ -1,40 +1,27 @@
 import { useQuery } from 'react-query';
 import { useMemo, useState } from 'react';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
+import { mergeOfferIds } from '@jwp/ott-common/src/utils/offers';
 import type { OfferType } from '@jwp/ott-common/types/account';
 import type { Offer } from '@jwp/ott-common/types/checkout';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
-import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
 import { isSVODOffer } from '@jwp/ott-common/src/utils/subscription';
-import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
 
 const useOffers = () => {
   const checkoutController = getModule(CheckoutController);
+  const svodOfferIds = checkoutController.getSubscriptionOfferIds();
+  const { requestedMediaOffers: mediaOffers } = useCheckoutStore(({ requestedMediaOffers }) => ({ requestedMediaOffers }), shallow);
+  const hasPremierOffers = mediaOffers?.some((offer) => offer.premier);
+  const hasMultipleOfferTypes = !hasPremierOffers && !!mediaOffers?.length && !!svodOfferIds.length;
+  const offerIds: string[] = mergeOfferIds(mediaOffers || [], svodOfferIds);
 
-  const { accessModel } = useConfigStore();
-  const offers = checkoutController.getSubscriptionOfferIds();
-
-  const { requestedMediaOffers } = useCheckoutStore(({ requestedMediaOffers }) => ({ requestedMediaOffers }), shallow);
-  const hasTvodOffer = (requestedMediaOffers || []).some((offer) => offer.offerId);
-  const hasPremierOffer = (requestedMediaOffers || []).some((offer) => offer.premier);
-  const isPPV = hasTvodOffer || hasPremierOffer;
-  const [offerType, setOfferType] = useState<OfferType>(accessModel === ACCESS_MODEL.SVOD && !isPPV ? 'svod' : 'tvod');
-
-  const offerIds: string[] = useMemo(() => {
-    return [...(requestedMediaOffers || []).map(({ offerId }) => offerId), ...offers].filter(Boolean);
-  }, [requestedMediaOffers, offers]);
+  const [offerType, setOfferType] = useState<OfferType>(hasPremierOffers || !svodOfferIds ? 'tvod' : 'svod');
+  const updateOfferType = useMemo(() => (hasMultipleOfferTypes ? (type: OfferType) => setOfferType(type) : undefined), [hasMultipleOfferTypes]);
 
   const { data: allOffers, isLoading } = useQuery(['offers', offerIds.join('-')], () => checkoutController.getOffers({ offerIds }));
 
-  const hasMultipleOfferTypes = (allOffers || []).some((offer: Offer) => (offerType === 'tvod' ? isSVODOffer(offer) : !isSVODOffer(offer)));
-
-  const updateOfferType = useMemo(
-    () => (!hasPremierOffer && hasMultipleOfferTypes ? (type: OfferType) => setOfferType(type) : undefined),
-    [hasMultipleOfferTypes, hasPremierOffer],
-  );
-
   // The `offerQueries` variable mutates on each render which prevents the useMemo to work properly.
   return useMemo(() => {
     const offers = (allOffers || []).filter((offer: Offer) => (offerType === 'tvod' ? !isSVODOffer(offer) : isSVODOffer(offer)));
@@ -45,17 +32,15 @@ const useOffers = () => {
     const defaultOfferId = (!isLoading && offers[offers.length - 1]?.offerId) || '';
 
     return {
-      hasTVODOffers: allOffers?.some((offer: Offer) => !isSVODOffer(offer)),
-      hasMultipleOfferTypes,
+      hasMediaOffers: allOffers?.some((offer: Offer) => !isSVODOffer(offer)),
       isLoading,
-      hasPremierOffer,
       defaultOfferId,
       offerType,
       setOfferType: updateOfferType,
       offers,
       offersDict,
     };
-  }, [allOffers, isLoading, hasMultipleOfferTypes, hasPremierOffer, offerType, updateOfferType]);
+  }, [allOffers, isLoading, offerType, updateOfferType]);
 };
 
 export default useOffers;
diff --git a/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx b/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx
index 86292bb61..d37e5e524 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx
@@ -27,7 +27,7 @@ const PersonalDetails = () => {
   const { t } = useTranslation('account');
   const accessModel = useConfigStore((s) => s.accessModel);
   const { data, isLoading } = useQuery('captureStatus', accountController.getCaptureStatus);
-  const { hasTVODOffers } = useOffers();
+  const { hasMediaOffers } = useOffers();
   const [questionValues, setQuestionValues] = useState<Record<string, string>>({});
   const [questionErrors, setQuestionErrors] = useState<Record<string, string>>({});
 
@@ -38,10 +38,10 @@ const PersonalDetails = () => {
   );
 
   const nextStep = useCallback(() => {
-    const hasOffers = accessModel === ACCESS_MODEL.SVOD || (accessModel === ACCESS_MODEL.AUTHVOD && hasTVODOffers);
+    const hasOffers = accessModel === ACCESS_MODEL.SVOD || (accessModel === ACCESS_MODEL.AUTHVOD && hasMediaOffers);
 
     navigate(modalURLFromLocation(location, hasOffers ? 'choose-offer' : 'welcome'), { replace: true });
-  }, [navigate, location, accessModel, hasTVODOffers]);
+  }, [navigate, location, accessModel, hasMediaOffers]);
 
   useEffect(() => {
     if (data && (!data.isCaptureEnabled || !data.shouldCaptureBeDisplayed)) nextStep();

From 7bba6a2272eac6c4cd3948daeb0adc5a50a7b210 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Fri, 26 Jan 2024 13:03:23 -0300
Subject: [PATCH 016/128] refactor(user): prevent unnecessary subscription
 calls

---
 packages/common/src/stores/AccountController.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/common/src/stores/AccountController.ts b/packages/common/src/stores/AccountController.ts
index 0164bd42e..bdb3e0ade 100644
--- a/packages/common/src/stores/AccountController.ts
+++ b/packages/common/src/stores/AccountController.ts
@@ -514,8 +514,11 @@ export default class AccountController {
       customerConsents,
     });
 
+    const { accessModel } = useConfigStore.getState();
+
     await Promise.allSettled([
-      shouldReloadSubscription ? this.reloadActiveSubscription() : Promise.resolve(), // For every accessModal there could be TVOD items, so we always reload the subscription
+      shouldReloadSubscription && accessModel === 'SVOD' ? this.reloadActiveSubscription() : Promise.resolve(),
+      shouldReloadSubscription && accessModel !== 'SVOD' ? this.refreshEntitlements?.() : Promise.resolve(), // For non-SVOD platforms, there could be TVOD items
       this.getPublisherConsents(),
     ]);
 

From 5dc0a18190fd8cc642efad0909eeada902120139 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Tue, 30 Jan 2024 12:33:03 -0300
Subject: [PATCH 017/128] refactor(user): let reloadSubscriptions handle all
 access modals

---
 .../common/src/stores/AccountController.ts    | 23 ++++++++++---------
 packages/hooks-react/src/useCheckAccess.ts    |  2 +-
 .../FinalizePayment/FinalizePayment.tsx       |  2 +-
 .../AccountModal/forms/Checkout.tsx           |  2 +-
 .../AccountModal/forms/ChooseOffer.tsx        |  2 +-
 .../AdyenInitialPayment.tsx                   |  2 +-
 .../AdyenPaymentDetails.tsx                   |  4 ++--
 platforms/web/src/hooks/useNotifications.ts   |  4 ++--
 8 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/common/src/stores/AccountController.ts b/packages/common/src/stores/AccountController.ts
index bdb3e0ade..b1846cbc1 100644
--- a/packages/common/src/stores/AccountController.ts
+++ b/packages/common/src/stores/AccountController.ts
@@ -357,7 +357,7 @@ export default class AccountController {
 
     if (response.errors.length > 0) throw new Error(response.errors[0]);
 
-    await this.reloadActiveSubscription({ delay: 2000 });
+    await this.reloadSubscriptions({ delay: 2000 });
 
     return response?.responseData;
   };
@@ -409,22 +409,30 @@ export default class AccountController {
     return !!responseData?.accessGranted;
   };
 
-  reloadActiveSubscription = async ({ delay }: { delay: number } = { delay: 0 }): Promise<unknown> => {
+  reloadSubscriptions = async ({ delay }: { delay: number } = { delay: 0 }): Promise<unknown> => {
     useAccountStore.setState({ loading: true });
 
     const { getAccountInfo } = useAccountStore.getState();
     const { customerId } = getAccountInfo();
+    const { accessModel } = useConfigStore.getState();
 
     // The subscription data takes a few seconds to load after it's purchased,
     // so here's a delay mechanism to give it time to process
     if (delay > 0) {
       return new Promise((resolve: (value?: unknown) => void) => {
         setTimeout(() => {
-          this.reloadActiveSubscription().finally(resolve);
+          this.reloadSubscriptions().finally(resolve);
         }, delay);
       });
     }
 
+    // For non-SVOD platforms, there could be TVOD items, so we only reload entitlements
+    if (accessModel !== 'SVOD') {
+      await this.refreshEntitlements?.();
+
+      return useAccountStore.setState({ loading: true });
+    }
+
     const [activeSubscription, transactions, activePayment] = await Promise.all([
       this.subscriptionService.getActiveSubscription({ customerId }),
       this.subscriptionService.getAllTransactions({ customerId }),
@@ -514,14 +522,7 @@ export default class AccountController {
       customerConsents,
     });
 
-    const { accessModel } = useConfigStore.getState();
-
-    await Promise.allSettled([
-      shouldReloadSubscription && accessModel === 'SVOD' ? this.reloadActiveSubscription() : Promise.resolve(),
-      shouldReloadSubscription && accessModel !== 'SVOD' ? this.refreshEntitlements?.() : Promise.resolve(), // For non-SVOD platforms, there could be TVOD items
-      this.getPublisherConsents(),
-    ]);
-
+    await Promise.allSettled([shouldReloadSubscription ? this.reloadSubscriptions() : Promise.resolve(), this.getPublisherConsents()]);
     useAccountStore.setState({ loading: false });
   }
 
diff --git a/packages/hooks-react/src/useCheckAccess.ts b/packages/hooks-react/src/useCheckAccess.ts
index 6b682ae89..1eeea8452 100644
--- a/packages/hooks-react/src/useCheckAccess.ts
+++ b/packages/hooks-react/src/useCheckAccess.ts
@@ -31,7 +31,7 @@ const useCheckAccess = () => {
         const hasAccess = await accountController.checkEntitlements(offerId);
 
         if (hasAccess) {
-          await accountController.reloadActiveSubscription();
+          await accountController.reloadSubscriptions();
           callback?.(true);
         } else if (--iterations === 0) {
           window.clearInterval(intervalRef.current);
diff --git a/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx b/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
index 95671e06e..59e1318e1 100644
--- a/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
+++ b/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
@@ -39,7 +39,7 @@ const FinalizePayment = () => {
 
     try {
       await checkoutController.finalizeAdyenPayment({ redirectResult: decodeURI(redirectResult) }, orderId);
-      await accountController.reloadActiveSubscription({ delay: 2000 });
+      await accountController.reloadSubscriptions({ delay: 2000 });
 
       navigate(paymentSuccessUrl);
     } catch (error: unknown) {
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
index 44cf94e85..95a818886 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
@@ -151,7 +151,7 @@ const Checkout = () => {
       setUpdatingOrder(true);
       setPaymentError(undefined);
       await checkoutController.paymentWithoutDetails();
-      await accountController.reloadActiveSubscription({ delay: 1000 });
+      await accountController.reloadSubscriptions({ delay: 1000 });
       navigate(paymentSuccessUrl, { replace: true });
     } catch (error: unknown) {
       if (error instanceof Error) {
diff --git a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
index dc998cda6..a38f0dcd8 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
@@ -73,7 +73,7 @@ const ChooseOffer = () => {
         try {
           await checkoutController.switchSubscription(targetOfferId, determineSwitchDirection(subscription));
           // switching a subscription takes a bit longer to process
-          await accountController.reloadActiveSubscription({ delay: 7500 });
+          await accountController.reloadSubscriptions({ delay: 7500 });
 
           const isPendingSwitch = !!useAccountStore.getState().pendingOffer;
 
diff --git a/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx b/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx
index db857176b..2a4869343 100644
--- a/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx
+++ b/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx
@@ -71,7 +71,7 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, setPayment
           handleAction(result.action);
         }
 
-        await accountController.reloadActiveSubscription({ delay: 2000 });
+        await accountController.reloadSubscriptions({ delay: 2000 });
 
         navigate(paymentSuccessUrl, { replace: true });
       } catch (error: unknown) {
diff --git a/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx b/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
index 7508c0c5f..0142e4ee7 100644
--- a/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
+++ b/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
@@ -40,7 +40,7 @@ export default function AdyenPaymentDetails({ setProcessing, type, setPaymentErr
       setProcessing(true);
 
       await checkoutController.finalizeAdyenPaymentDetails({ redirectResult: decodeURI(redirectResult) }, paymentMethodId);
-      await accountController.reloadActiveSubscription({ delay: 2000 });
+      await accountController.reloadSubscriptions({ delay: 2000 });
 
       setProcessing(false);
       navigate(modalURLFromLocation(location, 'payment-method-success'));
@@ -97,7 +97,7 @@ export default function AdyenPaymentDetails({ setProcessing, type, setPaymentErr
           handleAction(result.action);
         }
 
-        await accountController.reloadActiveSubscription({ delay: 2000 });
+        await accountController.reloadSubscriptions({ delay: 2000 });
 
         navigate(paymentSuccessUrl, { replace: true });
       } catch (error: unknown) {
diff --git a/platforms/web/src/hooks/useNotifications.ts b/platforms/web/src/hooks/useNotifications.ts
index 626e8689a..b75626a5d 100644
--- a/platforms/web/src/hooks/useNotifications.ts
+++ b/platforms/web/src/hooks/useNotifications.ts
@@ -45,10 +45,10 @@ export default function useNotifications(uuid: string = '') {
               navigate(modalURLFromLocation(location, null));
               break;
             case NotificationsTypes.SUBSCRIBE_SUCCESS:
-              await accountController.reloadActiveSubscription();
+              await accountController.reloadSubscriptions();
               break;
             case NotificationsTypes.ACCESS_REVOKED:
-              await accountController.reloadActiveSubscription();
+              await accountController.reloadSubscriptions();
               break;
             case NotificationsTypes.CARD_REQUIRES_ACTION:
             case NotificationsTypes.SUBSCRIBE_REQUIRES_ACTION:

From 710694dd3f4a94471e9d054eaf242bd59e511757 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 30 Jan 2024 21:38:53 +0100
Subject: [PATCH 018/128] refactor: Cleeng and Inplayer account typings

---
 .../common/src/services/FavoriteService.ts    |  63 ++++--
 .../src/services/WatchHistoryService.ts       |  76 +++++--
 .../services/integrations/AccountService.ts   |  27 ++-
 .../services/integrations/ProfileService.ts   |   2 +-
 .../cleeng/CleengAccountService.ts            | 142 ++++++++-----
 .../integrations/cleeng/CleengService.ts      |  22 +-
 .../cleeng/formatters/consents.ts             |  16 ++
 .../cleeng/formatters/customer.ts             |  15 ++
 .../integrations/cleeng/types/account.ts      |  21 ++
 .../services/integrations/cleeng/types/api.ts |   3 +
 .../integrations/cleeng/types/models.ts       |  47 +++++
 .../integrations/jwp/JWPAccountService.ts     | 191 +++++++++---------
 .../integrations/jwp/JWPProfileService.ts     |  57 ++----
 .../common/src/stores/AccountController.ts    | 128 ++++--------
 packages/common/src/stores/AccountStore.ts    |   4 +-
 packages/common/src/stores/AppController.ts   |  10 +-
 .../common/src/stores/CheckoutController.ts   |   3 +-
 .../common/src/stores/FavoritesController.ts  |  53 +----
 .../common/src/stores/ProfileController.ts    |   6 +-
 packages/common/src/stores/ProfileStore.ts    |   2 +-
 .../src/stores/WatchHistoryController.ts      |  50 +----
 packages/common/src/utils/collection.ts       |  12 +-
 packages/common/types/account.ts              | 168 +++++----------
 packages/common/types/inplayer.ts             |   9 -
 packages/common/types/profiles.ts             |  38 +++-
 packages/hooks-react/src/useProfiles.ts       |  34 ++--
 packages/testing/fixtures/customer.json       |  18 +-
 .../src/components/Account/Account.test.tsx   |   4 +-
 .../src/components/Account/Account.tsx        |   6 +-
 .../ui-react/src/components/Header/Header.tsx |   2 +-
 .../RegistrationForm/RegistrationForm.tsx     |   4 +-
 .../UserMenu/ProfilesMenu/ProfilesMenu.tsx    |   2 +-
 .../src/components/UserMenu/UserMenu.tsx      |   2 +-
 .../AccountModal/forms/Registration.tsx       |   2 +-
 .../ui-react/src/containers/Layout/Layout.tsx |   2 +-
 .../src/containers/Profiles/CreateProfile.tsx |   2 +-
 .../src/containers/Profiles/EditProfile.tsx   |   8 +-
 .../src/containers/Profiles/Profiles.tsx      |   8 +-
 .../ui-react/src/pages/User/User.test.tsx     |   2 +-
 .../src/containers/AppRoutes/AppRoutes.tsx    |   2 +-
 platforms/web/src/hooks/useNotifications.ts   |   4 +-
 41 files changed, 650 insertions(+), 617 deletions(-)
 create mode 100644 packages/common/src/services/integrations/cleeng/formatters/consents.ts
 create mode 100644 packages/common/src/services/integrations/cleeng/formatters/customer.ts
 create mode 100644 packages/common/src/services/integrations/cleeng/types/account.ts
 create mode 100644 packages/common/src/services/integrations/cleeng/types/api.ts
 create mode 100644 packages/common/src/services/integrations/cleeng/types/models.ts

diff --git a/packages/common/src/services/FavoriteService.ts b/packages/common/src/services/FavoriteService.ts
index 205ebaab0..ccff461ec 100644
--- a/packages/common/src/services/FavoriteService.ts
+++ b/packages/common/src/services/FavoriteService.ts
@@ -1,12 +1,22 @@
-import { injectable } from 'inversify';
+import { inject, injectable } from 'inversify';
+import { object, array, string } from 'yup';
 
 import { MAX_WATCHLIST_ITEMS_COUNT } from '../constants';
 import type { Favorite, SerializedFavorite } from '../../types/favorite';
 import type { PlaylistItem } from '../../types/playlist';
 import type { Customer } from '../../types/account';
+import { getNamedModule } from '../modules/container';
+import { INTEGRATION_TYPE } from '../modules/types';
 
 import ApiService from './ApiService';
 import StorageService from './StorageService';
+import AccountService from './integrations/AccountService';
+
+const schema = array(
+  object().shape({
+    mediaid: string(),
+  }),
+);
 
 @injectable()
 export default class FavoriteService {
@@ -15,31 +25,60 @@ export default class FavoriteService {
 
   private readonly apiService;
   private readonly storageService;
+  private readonly accountService;
 
-  constructor(apiService: ApiService, storageService: StorageService) {
+  constructor(@inject(INTEGRATION_TYPE) integrationType: string, apiService: ApiService, storageService: StorageService) {
     this.apiService = apiService;
     this.storageService = storageService;
+    this.accountService = getNamedModule(AccountService, integrationType, false);
   }
 
-  getFavorites = async (user: Customer | null, favoritesList: string) => {
-    const savedItems = user ? user.externalData?.favorites : await this.storageService.getItem<Favorite[]>(this.PERSIST_KEY_FAVORITES, true);
+  private validateFavorites(favorites: unknown) {
+    if (schema.validateSync(favorites)) {
+      return favorites as SerializedFavorite[];
+    }
+
+    return [];
+  }
+
+  private async getFavoritesFromAccount(user: Customer) {
+    const favorites = await this.accountService?.getFavorites({ user });
+
+    return this.validateFavorites(favorites);
+  }
 
-    if (savedItems?.length) {
-      const playlistItems = await this.apiService.getMediaByWatchlist(
-        favoritesList,
-        savedItems.map(({ mediaid }) => mediaid),
-      );
+  private async getFavoritesFromStorage() {
+    const favorites = await this.storageService.getItem(this.PERSIST_KEY_FAVORITES, true);
 
-      return (playlistItems || []).map((item) => this.createFavorite(item));
+    return this.validateFavorites(favorites);
+  }
+
+  getFavorites = async (user: Customer | null, favoritesList: string) => {
+    const savedItems = user ? await this.getFavoritesFromAccount(user) : await this.getFavoritesFromStorage();
+    const mediaIds = savedItems.map(({ mediaid }) => mediaid);
+
+    if (!mediaIds) {
+      return [];
     }
+
+    const playlistItems = await this.apiService.getMediaByWatchlist(favoritesList, mediaIds);
+
+    return (playlistItems || []).map((item) => this.createFavorite(item));
   };
 
   serializeFavorites = (favorites: Favorite[]): SerializedFavorite[] => {
     return favorites.map(({ mediaid }) => ({ mediaid }));
   };
 
-  persistFavorites = (favorites: Favorite[]) => {
-    this.storageService.setItem(this.PERSIST_KEY_FAVORITES, JSON.stringify(this.serializeFavorites(favorites)));
+  persistFavorites = async (favorites: Favorite[], user: Customer | null) => {
+    if (user) {
+      return this.accountService?.updateFavorites({
+        favorites: this.serializeFavorites(favorites),
+        user,
+      });
+    } else {
+      await this.storageService.setItem(this.PERSIST_KEY_FAVORITES, JSON.stringify(this.serializeFavorites(favorites)));
+    }
   };
 
   getMaxFavoritesCount = () => {
diff --git a/packages/common/src/services/WatchHistoryService.ts b/packages/common/src/services/WatchHistoryService.ts
index 29c619275..215f62e2c 100644
--- a/packages/common/src/services/WatchHistoryService.ts
+++ b/packages/common/src/services/WatchHistoryService.ts
@@ -1,23 +1,36 @@
-import { injectable } from 'inversify';
+import { inject, injectable } from 'inversify';
+import { array, number, object, string } from 'yup';
 
 import type { PlaylistItem } from '../../types/playlist';
 import type { SerializedWatchHistoryItem, WatchHistoryItem } from '../../types/watchHistory';
 import type { Customer } from '../../types/account';
+import { getNamedModule } from '../modules/container';
+import { INTEGRATION_TYPE } from '../modules/types';
 
 import ApiService from './ApiService';
 import StorageService from './StorageService';
+import AccountService from './integrations/AccountService';
+
+const schema = array(
+  object().shape({
+    mediaid: string(),
+    progress: number(),
+  }),
+);
 
 @injectable()
 export default class WatchHistoryService {
   private PERSIST_KEY_WATCH_HISTORY = 'history';
   private MAX_WATCH_HISTORY_COUNT = 48;
 
-  private readonly apiService: ApiService;
-  private readonly storageService: StorageService;
+  private readonly apiService;
+  private readonly storageService;
+  private readonly accountService;
 
-  constructor(apiService: ApiService, storageService: StorageService) {
+  constructor(@inject(INTEGRATION_TYPE) integrationType: string, apiService: ApiService, storageService: StorageService) {
     this.apiService = apiService;
     this.storageService = storageService;
+    this.accountService = getNamedModule(AccountService, integrationType);
   }
 
   // Retrieve watch history media items info using a provided watch list
@@ -47,27 +60,49 @@ export default class WatchHistoryService {
     return seriesItemsDict;
   };
 
+  private validateWatchHistory(history: unknown) {
+    if (schema.validateSync(history)) {
+      return history as SerializedWatchHistoryItem[];
+    }
+
+    return [];
+  }
+
+  private async getWatchHistoryFromAccount(user: Customer) {
+    const history = await this.accountService.getWatchHistory({ user });
+
+    return this.validateWatchHistory(history);
+  }
+
+  private async getWatchHistoryFromStorage() {
+    const history = await this.storageService.getItem(this.PERSIST_KEY_WATCH_HISTORY, true);
+
+    return this.validateWatchHistory(history);
+  }
+
   getWatchHistory = async (user: Customer | null, continueWatchingList: string) => {
-    const savedItems = user ? user.externalData?.history : await this.storageService.getItem<WatchHistoryItem[]>(this.PERSIST_KEY_WATCH_HISTORY, true);
+    const savedItems = user ? await this.getWatchHistoryFromAccount(user) : await this.getWatchHistoryFromStorage();
 
-    if (savedItems?.length) {
-      // When item is an episode of the new flow -> show the card as a series one, but keep episode to redirect in a right way
-      const ids = savedItems.map(({ mediaid }) => mediaid);
+    // When item is an episode of the new flow -> show the card as a series one, but keep episode to redirect in a right way
+    const ids = savedItems.map(({ mediaid }) => mediaid);
 
-      const watchHistoryItems = await this.getWatchHistoryItems(continueWatchingList, ids);
-      const seriesItems = await this.getWatchHistorySeriesItems(continueWatchingList, ids);
+    if (!ids.length) {
+      return [];
+    }
 
-      const watchHistory = savedItems.map((item) => {
+    const watchHistoryItems = await this.getWatchHistoryItems(continueWatchingList, ids);
+    const seriesItems = await this.getWatchHistorySeriesItems(continueWatchingList, ids);
+
+    return savedItems
+      .map((item) => {
         const parentSeries = seriesItems?.[item.mediaid];
         const historyItem = watchHistoryItems[item.mediaid];
 
         if (historyItem) {
           return this.createWatchHistoryItem(parentSeries || historyItem, item.mediaid, parentSeries?.mediaid, item.progress);
         }
-      });
-
-      return watchHistory;
-    }
+      })
+      .filter((item): item is WatchHistoryItem => Boolean(item));
   };
 
   serializeWatchHistory = (watchHistory: WatchHistoryItem[]): SerializedWatchHistoryItem[] =>
@@ -76,8 +111,15 @@ export default class WatchHistoryService {
       progress,
     }));
 
-  persistWatchHistory = (watchHistory: WatchHistoryItem[]) => {
-    this.storageService.setItem(this.PERSIST_KEY_WATCH_HISTORY, JSON.stringify(this.serializeWatchHistory(watchHistory)));
+  persistWatchHistory = async (watchHistory: WatchHistoryItem[], user: Customer | null) => {
+    if (user) {
+      await this.accountService?.updateWatchHistory({
+        history: this.serializeWatchHistory(watchHistory),
+        user,
+      });
+    } else {
+      await this.storageService.setItem(this.PERSIST_KEY_WATCH_HISTORY, JSON.stringify(this.serializeWatchHistory(watchHistory)));
+    }
   };
 
   /** Use mediaid of originally watched movie / episode.
diff --git a/packages/common/src/services/integrations/AccountService.ts b/packages/common/src/services/integrations/AccountService.ts
index f6c795f3c..b72475b3d 100644
--- a/packages/common/src/services/integrations/AccountService.ts
+++ b/packages/common/src/services/integrations/AccountService.ts
@@ -1,10 +1,7 @@
 import type { AccessModel, Config } from '../../../types/config';
 import type {
-  AuthData,
   ChangePassword,
   ChangePasswordWithOldPassword,
-  Customer,
-  CustomerConsent,
   DeleteAccount,
   ExportAccountData,
   GetCaptureStatus,
@@ -16,9 +13,15 @@ import type {
   ResetPassword,
   GetSocialURLs,
   UpdateCaptureAnswers,
-  UpdateCustomer,
   UpdateCustomerConsents,
-  UpdatePersonalShelves,
+  Logout,
+  GetAuthData,
+  UpdateCustomer,
+  UpdateWatchHistory,
+  UpdateFavorites,
+  GetWatchHistory,
+  GetFavorites,
+  GetUser,
 } from '../../../types/account';
 
 export type AccountServiceFeatures = {
@@ -47,15 +50,15 @@ export default abstract class AccountService {
 
   abstract initialize: (config: Config, url: string, logoutCallback: () => Promise<void>) => Promise<void>;
 
-  abstract getAuthData: () => Promise<AuthData | null>;
+  abstract getAuthData: GetAuthData;
 
   abstract login: Login;
 
   abstract register: Register;
 
-  abstract logout: () => Promise<void>;
+  abstract logout: Logout;
 
-  abstract getUser: ({ config }: { config: Config }) => Promise<{ user: Customer; customerConsents: CustomerConsent[] }>;
+  abstract getUser: GetUser;
 
   abstract getPublisherConsents: GetPublisherConsents;
 
@@ -75,7 +78,13 @@ export default abstract class AccountService {
 
   abstract updateCustomer: UpdateCustomer;
 
-  abstract updatePersonalShelves: UpdatePersonalShelves;
+  abstract updateWatchHistory: UpdateWatchHistory;
+
+  abstract updateFavorites: UpdateFavorites;
+
+  abstract getWatchHistory: GetWatchHistory;
+
+  abstract getFavorites: GetFavorites;
 
   abstract subscribeToNotifications: NotificationsData;
 
diff --git a/packages/common/src/services/integrations/ProfileService.ts b/packages/common/src/services/integrations/ProfileService.ts
index b0ed2fc0a..dac065623 100644
--- a/packages/common/src/services/integrations/ProfileService.ts
+++ b/packages/common/src/services/integrations/ProfileService.ts
@@ -1,4 +1,4 @@
-import type { CreateProfile, DeleteProfile, EnterProfile, GetProfileDetails, ListProfiles, UpdateProfile } from '../../../types/account';
+import type { CreateProfile, DeleteProfile, EnterProfile, GetProfileDetails, ListProfiles, UpdateProfile } from '../../../types/profiles';
 
 export default abstract class ProfileService {
   abstract listProfiles: ListProfiles;
diff --git a/packages/common/src/services/integrations/cleeng/CleengAccountService.ts b/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
index 87544a4e5..40c55a285 100644
--- a/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
+++ b/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
@@ -4,17 +4,12 @@ import { inject, injectable } from 'inversify';
 import type { AccessModel, Config } from '../../../../types/config';
 import type {
   AuthData,
-  Capture,
   ChangePassword,
   ChangePasswordWithOldPassword,
   GetCaptureStatus,
   GetCaptureStatusResponse,
-  GetCustomer,
   GetCustomerConsents,
-  GetCustomerConsentsResponse,
-  GetLocales,
   GetPublisherConsents,
-  GetPublisherConsentsResponse,
   JwtDetails,
   Login,
   LoginPayload,
@@ -28,15 +23,29 @@ import type {
   UpdateCustomerConsents,
   UpdateCustomerConsentsPayload,
   UpdateCustomerPayload,
-  UpdatePersonalShelves,
+  UpdateFavorites,
+  UpdateWatchHistory,
 } from '../../../../types/account';
 import AccountService from '../AccountService';
 import { GET_CUSTOMER_IP } from '../../../modules/types';
 import type { GetCustomerIP } from '../../../../types/get-customer-ip';
 import { ACCESS_MODEL } from '../../../constants';
 import type { ServiceResponse } from '../../../../types/service';
+import type { SerializedWatchHistoryItem } from '../../../../types/watchHistory';
+import type { SerializedFavorite } from '../../../../types/favorite';
 
 import CleengService from './CleengService';
+import type {
+  GetCustomerResponse,
+  GetCustomerConsentsResponse,
+  GetPublisherConsentsResponse,
+  UpdateConsentsResponse,
+  UpdateCustomerResponse,
+  AuthResponse,
+} from './types/account';
+import { formatCustomer } from './formatters/customer';
+import { formatPublisherConsent } from './formatters/consents';
+import type { Response } from './types/api';
 
 @injectable()
 export default class CleengAccountService extends AccountService {
@@ -44,6 +53,8 @@ export default class CleengAccountService extends AccountService {
   private readonly getCustomerIP;
   private publisherId = '';
 
+  private externalData: Record<string, unknown> = {};
+
   accessModel: AccessModel = ACCESS_MODEL.AUTHVOD;
   svodOfferIds: string[] = [];
   sandbox = false;
@@ -77,11 +88,18 @@ export default class CleengAccountService extends AccountService {
     return decodedToken.customerId;
   };
 
-  private getCustomer: GetCustomer = async (payload) => {
-    return this.cleengService.get(`/customers/${payload.customerId}`, { authenticate: true });
+  private getCustomer = async ({ customerId }: { customerId: string }) => {
+    const { responseData, errors } = await this.cleengService.get<GetCustomerResponse>(`/customers/${customerId}`, {
+      authenticate: true,
+    });
+
+    this.handleErrors(errors);
+    this.externalData = responseData.externalData || {};
+
+    return formatCustomer(responseData);
   };
 
-  private getLocales: GetLocales = async () => {
+  private getLocales = async () => {
     return this.cleengService.getLocales();
   };
 
@@ -115,14 +133,12 @@ export default class CleengAccountService extends AccountService {
 
   getCustomerConsents: GetCustomerConsents = async (payload) => {
     const { customer } = payload;
-    const response: ServiceResponse<GetCustomerConsentsResponse> = await this.cleengService.get(`/customers/${customer?.id}/consents`, {
+    const response = await this.cleengService.get<GetCustomerConsentsResponse>(`/customers/${customer?.id}/consents`, {
       authenticate: true,
     });
     this.handleErrors(response.errors);
 
-    return {
-      consents: response?.responseData?.consents || [],
-    };
+    return response?.responseData?.consents || [];
   };
 
   updateCustomerConsents: UpdateCustomerConsents = async (payload) => {
@@ -133,7 +149,7 @@ export default class CleengAccountService extends AccountService {
       consents: payload.consents,
     };
 
-    const response: ServiceResponse<never> = await this.cleengService.put(`/customers/${customer?.id}/consents`, JSON.stringify(params), {
+    const response = await this.cleengService.put<UpdateConsentsResponse>(`/customers/${customer?.id}/consents`, JSON.stringify(params), {
       authenticate: true,
     });
     this.handleErrors(response.errors);
@@ -141,7 +157,7 @@ export default class CleengAccountService extends AccountService {
     return await this.getCustomerConsents(payload);
   };
 
-  login: Login = async ({ config, email, password }) => {
+  login: Login = async ({ email, password }) => {
     const payload: LoginPayload = {
       email,
       password,
@@ -149,12 +165,12 @@ export default class CleengAccountService extends AccountService {
       customerIP: await this.getCustomerIP(),
     };
 
-    const { responseData: auth, errors }: ServiceResponse<AuthData> = await this.cleengService.post('/auths', JSON.stringify(payload));
+    const { responseData: auth, errors } = await this.cleengService.post<AuthResponse>('/auths', JSON.stringify(payload));
     this.handleErrors(errors);
 
     await this.cleengService.setTokens({ accessToken: auth.jwt, refreshToken: auth.refreshToken });
 
-    const { user, customerConsents } = await this.getUser({ config });
+    const { user, customerConsents } = await this.getUser();
 
     return {
       user,
@@ -163,7 +179,7 @@ export default class CleengAccountService extends AccountService {
     };
   };
 
-  register: Register = async ({ config, email, password, consents }) => {
+  register: Register = async ({ email, password, consents }) => {
     const localesResponse = await this.getLocales();
 
     this.handleErrors(localesResponse.errors);
@@ -183,9 +199,9 @@ export default class CleengAccountService extends AccountService {
 
     await this.cleengService.setTokens({ accessToken: auth.jwt, refreshToken: auth.refreshToken });
 
-    const { user, customerConsents } = await this.getUser({ config });
+    const { user, customerConsents } = await this.getUser();
 
-    await this.updateCustomerConsents({ config, consents, customer: user }).catch(() => {
+    await this.updateCustomerConsents({ consents, customer: user }).catch(() => {
       // error caught while updating the consents, but continue the registration process
     });
 
@@ -201,22 +217,14 @@ export default class CleengAccountService extends AccountService {
     await this.cleengService.clearTokens();
   };
 
-  getUser = async ({ config }: { config: Config }) => {
+  getUser = async () => {
     const authData = await this.getAuthData();
 
     if (!authData) throw new Error('Not logged in');
 
     const customerId = this.getCustomerIdFromAuthData(authData);
-    const { responseData: user, errors } = await this.getCustomer({ customerId });
-
-    this.handleErrors(errors);
-
-    const consentsPayload = {
-      config,
-      customer: user,
-    };
-
-    const { consents } = await this.getCustomerConsents(consentsPayload);
+    const user = await this.getCustomer({ customerId });
+    const consents = await this.getCustomerConsents({ customer: user });
 
     return {
       user,
@@ -224,15 +232,12 @@ export default class CleengAccountService extends AccountService {
     };
   };
 
-  getPublisherConsents: GetPublisherConsents = async (config) => {
-    const { cleeng } = config.integrations;
-    const response: ServiceResponse<GetPublisherConsentsResponse> = await this.cleengService.get(`/publishers/${cleeng?.id}/consents`);
+  getPublisherConsents: GetPublisherConsents = async () => {
+    const response = await this.cleengService.get<GetPublisherConsentsResponse>(`/publishers/${this.publisherId}/consents`);
 
     this.handleErrors(response.errors);
 
-    return {
-      consents: response?.responseData?.consents || [],
-    };
+    return (response.responseData?.consents || []).map(formatPublisherConsent);
   };
 
   getCaptureStatus: GetCaptureStatus = async ({ customer }) => {
@@ -242,7 +247,7 @@ export default class CleengAccountService extends AccountService {
 
     this.handleErrors(response.errors);
 
-    return response;
+    return response.responseData;
   };
 
   updateCaptureAnswers: UpdateCaptureAnswers = async ({ customer, ...payload }) => {
@@ -251,45 +256,40 @@ export default class CleengAccountService extends AccountService {
       ...payload,
     };
 
-    const response: ServiceResponse<Capture> = await this.cleengService.put(`/customers/${customer.id}/capture`, JSON.stringify(params), {
+    const response = await this.cleengService.put<UpdateConsentsResponse>(`/customers/${customer.id}/capture`, JSON.stringify(params), {
       authenticate: true,
     });
     this.handleErrors(response.errors);
 
-    const { responseData, errors } = await this.getCustomer({ customerId: customer.id });
-    this.handleErrors(errors);
-
-    return {
-      errors: [],
-      responseData,
-    };
+    return this.getCustomer({ customerId: customer.id });
   };
 
   resetPassword: ResetPassword = async (payload) => {
-    return this.cleengService.put(
+    const response = await this.cleengService.put<Response<unknown>>(
       '/customers/passwords',
       JSON.stringify({
         ...payload,
         publisherId: this.publisherId,
       }),
     );
+
+    this.handleErrors(response.errors);
   };
 
   changePasswordWithResetToken: ChangePassword = async (payload) => {
-    return this.cleengService.patch(
+    const response = await this.cleengService.patch<Response<unknown>>(
       '/customers/passwords',
       JSON.stringify({
         ...payload,
         publisherId: this.publisherId,
       }),
     );
+
+    this.handleErrors(response.errors);
   };
 
   changePasswordWithOldPassword: ChangePasswordWithOldPassword = async () => {
-    return {
-      errors: [],
-      responseData: {},
-    };
+    // Cleeng doesn't support this feature
   };
 
   updateCustomer: UpdateCustomer = async (payload) => {
@@ -298,15 +298,47 @@ export default class CleengAccountService extends AccountService {
       id,
       ...rest,
     };
+
     // enable keepalive to ensure data is persisted when closing the browser/tab
-    return this.cleengService.patch(`/customers/${id}`, JSON.stringify(params), {
+    const { responseData, errors } = await this.cleengService.patch<UpdateCustomerResponse>(`/customers/${id}`, JSON.stringify(params), {
       authenticate: true,
       keepalive: true,
     });
+
+    this.handleErrors(errors);
+    this.externalData = responseData.externalData || {};
+
+    return formatCustomer(responseData);
+  };
+
+  updateWatchHistory: UpdateWatchHistory = async ({ user, history }) => {
+    const payload = { id: user.id, externalData: { ...this.externalData, history } };
+    const { errors, responseData } = await this.cleengService.patch<UpdateCustomerResponse>(`/customers/${user.id}`, JSON.stringify(payload), {
+      authenticate: true,
+      keepalive: true,
+    });
+
+    this.handleErrors(errors);
+    this.externalData = responseData.externalData || {};
+  };
+
+  updateFavorites: UpdateFavorites = async ({ user, favorites }) => {
+    const payload = { id: user.id, externalData: { ...this.externalData, favorites } };
+    const { errors, responseData } = await this.cleengService.patch<UpdateCustomerResponse>(`/customers/${user.id}`, JSON.stringify(payload), {
+      authenticate: true,
+      keepalive: true,
+    });
+
+    this.handleErrors(errors);
+    this.externalData = responseData.externalData || {};
+  };
+
+  getWatchHistory = async () => {
+    return (this.externalData['history'] || []) as SerializedWatchHistoryItem[];
   };
 
-  updatePersonalShelves: UpdatePersonalShelves = async (payload) => {
-    return await this.updateCustomer(payload);
+  getFavorites = async () => {
+    return (this.externalData['favorites'] || []) as SerializedFavorite[];
   };
 
   subscribeToNotifications: NotificationsData = async () => {
diff --git a/packages/common/src/services/integrations/cleeng/CleengService.ts b/packages/common/src/services/integrations/cleeng/CleengService.ts
index a218affc3..34d0ba298 100644
--- a/packages/common/src/services/integrations/cleeng/CleengService.ts
+++ b/packages/common/src/services/integrations/cleeng/CleengService.ts
@@ -5,11 +5,13 @@ import { BroadcastChannel } from 'broadcast-channel';
 
 import { IS_DEVELOPMENT_BUILD, logDev } from '../../../utils/common';
 import { PromiseQueue } from '../../../utils/promiseQueue';
-import type { AuthData, GetLocales } from '../../../../types/account';
+import type { AuthData } from '../../../../types/account';
 import StorageService from '../../StorageService';
 import { GET_CUSTOMER_IP } from '../../../modules/types';
 import type { GetCustomerIP } from '../../../../types/get-customer-ip';
-import type { ServiceResponse } from '../../../../types/service';
+
+import type { GetLocalesResponse } from './types/account';
+import type { Response } from './types/api';
 
 const AUTH_PERSIST_KEY = 'auth';
 
@@ -120,7 +122,7 @@ export default class CleengService {
    */
   private getNewTokens: (tokens: Tokens) => Promise<Tokens | null> = async ({ refreshToken }) => {
     try {
-      const { responseData: newTokens } = await this.post<Promise<ServiceResponse<AuthData>>>('/auths/refresh_token', JSON.stringify({ refreshToken }));
+      const { responseData: newTokens } = await this.post<Response<AuthData>>('/auths/refresh_token', JSON.stringify({ refreshToken }));
 
       return {
         accessToken: newTokens.jwt,
@@ -357,19 +359,19 @@ export default class CleengService {
     return accessToken;
   };
 
-  getLocales: GetLocales = async () => {
+  getLocales = async () => {
     const customerIP = await this.getCustomerIP();
 
-    return this.get(`/locales${customerIP ? '?customerIP=' + customerIP : ''}`);
+    return this.get<GetLocalesResponse>(`/locales${customerIP ? '?customerIP=' + customerIP : ''}`);
   };
 
-  get = <T>(path: string, options?: RequestOptions) => this.performRequest(path, 'GET', undefined, options) as T;
+  get = <T>(path: string, options?: RequestOptions) => this.performRequest(path, 'GET', undefined, options) as Promise<T>;
 
-  patch = <T>(path: string, body?: string, options?: RequestOptions) => this.performRequest(path, 'PATCH', body, options) as T;
+  patch = <T>(path: string, body?: string, options?: RequestOptions) => this.performRequest(path, 'PATCH', body, options) as Promise<T>;
 
-  put = <T>(path: string, body?: string, options?: RequestOptions) => this.performRequest(path, 'PUT', body, options) as T;
+  put = <T>(path: string, body?: string, options?: RequestOptions) => this.performRequest(path, 'PUT', body, options) as Promise<T>;
 
-  post = <T>(path: string, body?: string, options?: RequestOptions) => this.performRequest(path, 'POST', body, options) as T;
+  post = <T>(path: string, body?: string, options?: RequestOptions) => this.performRequest(path, 'POST', body, options) as Promise<T>;
 
-  remove = <T>(path: string, options?: RequestOptions) => this.performRequest(path, 'DELETE', undefined, options) as T;
+  remove = <T>(path: string, options?: RequestOptions) => this.performRequest(path, 'DELETE', undefined, options) as Promise<T>;
 }
diff --git a/packages/common/src/services/integrations/cleeng/formatters/consents.ts b/packages/common/src/services/integrations/cleeng/formatters/consents.ts
new file mode 100644
index 000000000..910c9908f
--- /dev/null
+++ b/packages/common/src/services/integrations/cleeng/formatters/consents.ts
@@ -0,0 +1,16 @@
+import type { PublisherConsent } from '../types/models';
+import type { CustomFormField } from '../../../../../types/account';
+
+export const formatPublisherConsent = (consent: PublisherConsent): CustomFormField => {
+  return {
+    type: 'checkbox',
+    name: consent.name,
+    label: consent.label,
+    defaultValue: '',
+    required: consent.required,
+    placeholder: consent.placeholder,
+    options: {},
+    enabledByDefault: false,
+    version: consent.version,
+  };
+};
diff --git a/packages/common/src/services/integrations/cleeng/formatters/customer.ts b/packages/common/src/services/integrations/cleeng/formatters/customer.ts
new file mode 100644
index 000000000..3a206a2bb
--- /dev/null
+++ b/packages/common/src/services/integrations/cleeng/formatters/customer.ts
@@ -0,0 +1,15 @@
+import type { CleengCustomer } from '../types/models';
+import type { Customer } from '../../../../../types/account';
+
+export const formatCustomer = (customer: CleengCustomer): Customer => {
+  return {
+    id: customer.id,
+    email: customer.email,
+    country: customer.country,
+    firstName: customer.firstName,
+    lastName: customer.lastName,
+    fullName: `${customer.firstName} ${customer.lastName}`,
+    // map `externalData` to `metadata` (NOTE; The Cleeng API returns parsed values)
+    metadata: customer.externalData || {},
+  };
+};
diff --git a/packages/common/src/services/integrations/cleeng/types/account.ts b/packages/common/src/services/integrations/cleeng/types/account.ts
new file mode 100644
index 000000000..956015ecf
--- /dev/null
+++ b/packages/common/src/services/integrations/cleeng/types/account.ts
@@ -0,0 +1,21 @@
+import type { AuthData } from '../../../../../types/account';
+
+import type { Response } from './api';
+import type { CleengCustomer, LocalesData, PublisherConsent, CustomerConsent, UpdateConfirmation } from './models';
+
+// Cleeng typings for the account endpoints
+
+// Auth
+export type AuthResponse = Response<AuthData>;
+
+// Customer
+export type GetCustomerResponse = Response<CleengCustomer>;
+export type UpdateCustomerResponse = Response<CleengCustomer>;
+
+// Consents
+export type UpdateConsentsResponse = Response<UpdateConfirmation>;
+export type GetPublisherConsentsResponse = Response<{ consents: PublisherConsent[] }>;
+export type GetCustomerConsentsResponse = Response<{ consents: CustomerConsent[] }>;
+
+// Locales
+export type GetLocalesResponse = Response<LocalesData>;
diff --git a/packages/common/src/services/integrations/cleeng/types/api.ts b/packages/common/src/services/integrations/cleeng/types/api.ts
new file mode 100644
index 000000000..3c5a198e6
--- /dev/null
+++ b/packages/common/src/services/integrations/cleeng/types/api.ts
@@ -0,0 +1,3 @@
+// Cleeng typings for generic API response structures
+
+export type Response<R> = { responseData: R; errors: string[] };
diff --git a/packages/common/src/services/integrations/cleeng/types/models.ts b/packages/common/src/services/integrations/cleeng/types/models.ts
new file mode 100644
index 000000000..f5e50c82b
--- /dev/null
+++ b/packages/common/src/services/integrations/cleeng/types/models.ts
@@ -0,0 +1,47 @@
+// Cleeng typings for API models
+
+export interface CleengCustomer {
+  id: string;
+  email: string;
+  country: string;
+  regDate: string;
+  lastLoginDate?: string;
+  lastUserIp: string;
+  firstName?: string;
+  lastName?: string;
+  externalId?: string;
+  externalData?: Record<string, unknown>;
+}
+
+export interface UpdateConfirmation {
+  success: boolean;
+}
+
+export interface LocalesData {
+  country: string;
+  currency: string;
+  locale: string;
+  ipAddress: string;
+}
+
+export interface PublisherConsent {
+  name: string;
+  label: string;
+  placeholder: string;
+  required: boolean;
+  version: string;
+  value: string;
+}
+
+export interface CustomerConsent {
+  customerId: string;
+  date: number;
+  label: string;
+  name: string;
+  needsUpdate: boolean;
+  newestVersion: string;
+  required: boolean;
+  state: 'accepted' | 'declined';
+  value: string | boolean;
+  version: string;
+}
diff --git a/packages/common/src/services/integrations/jwp/JWPAccountService.ts b/packages/common/src/services/integrations/jwp/JWPAccountService.ts
index b1b9c68c0..40718cabc 100644
--- a/packages/common/src/services/integrations/jwp/JWPAccountService.ts
+++ b/packages/common/src/services/integrations/jwp/JWPAccountService.ts
@@ -4,22 +4,19 @@ import i18next from 'i18next';
 import { injectable } from 'inversify';
 
 import { formatConsentsToRegisterFields } from '../../../utils/collection';
-import { getCommonResponseData, isCommonError } from '../../../utils/api';
+import { isCommonError } from '../../../utils/api';
 import type {
   AuthData,
-  Capture,
   ChangePassword,
   ChangePasswordWithOldPassword,
-  Consent,
+  CustomFormField,
   Customer,
   CustomerConsent,
   CustomRegisterFieldVariant,
   DeleteAccount,
   ExportAccountData,
-  ExternalData,
   GetCaptureStatus,
   GetCustomerConsents,
-  GetCustomerConsentsResponse,
   GetPublisherConsents,
   Login,
   NotificationsData,
@@ -27,19 +24,19 @@ import type {
   ResetPassword,
   GetSocialURLs,
   UpdateCaptureAnswers,
-  UpdateCustomer,
   UpdateCustomerArgs,
   UpdateCustomerConsents,
-  UpdatePersonalShelves,
+  UpdateFavorites,
+  UpdateWatchHistory,
+  UpdateCustomer,
 } from '../../../../types/account';
 import type { AccessModel, Config } from '../../../../types/config';
 import type { InPlayerAuthData } from '../../../../types/inplayer';
-import type { Favorite } from '../../../../types/favorite';
-import type { WatchHistoryItem } from '../../../../types/watchHistory';
+import type { SerializedFavorite } from '../../../../types/favorite';
+import type { SerializedWatchHistoryItem } from '../../../../types/watchHistory';
 import AccountService from '../AccountService';
 import StorageService from '../../StorageService';
 import { ACCESS_MODEL } from '../../../constants';
-import type { ServiceResponse } from '../../../../types/service';
 
 enum InPlayerEnv {
   Development = 'development',
@@ -76,7 +73,7 @@ export default class JWPAccountService extends AccountService {
     this.storageService = storageService;
   }
 
-  private getCustomerExternalData = async (): Promise<ExternalData> => {
+  private getCustomerExternalData = async () => {
     const [favoritesData, historyData] = await Promise.all([InPlayer.Account.getFavorites(), await InPlayer.Account.getWatchHistory({})]);
 
     const favorites = favoritesData.data?.collection?.map((favorite: FavoritesData) => {
@@ -101,17 +98,17 @@ export default class JWPAccountService extends AccountService {
     }
   };
 
-  private formatFavorite = (favorite: FavoritesData): Favorite => {
+  private formatFavorite = (favorite: FavoritesData): SerializedFavorite => {
     return {
       mediaid: favorite.media_id,
-    } as Favorite;
+    };
   };
 
-  private formatHistoryItem = (history: WatchHistory): WatchHistoryItem => {
+  private formatHistoryItem = (history: WatchHistory): SerializedWatchHistoryItem => {
     return {
       mediaid: history.media_id,
       progress: history.progress,
-    } as WatchHistoryItem;
+    };
   };
 
   private formatAccount = (account: AccountData): Customer => {
@@ -135,6 +132,11 @@ export default class JWPAccountService extends AccountService {
     };
   };
 
+  private async getAccountMetadata(account: AccountData) {
+    const shelves = await this.getCustomerExternalData();
+    return { ...account.metadata, ...shelves };
+  }
+
   private formatAuth(auth: InPlayerAuthData): AuthData {
     const { access_token: jwt } = auth;
     return {
@@ -203,7 +205,7 @@ export default class JWPAccountService extends AccountService {
         // we exclude these fields because we already have them by default
         .filter((field) => !['email_confirmation', 'first_name', 'surname'].includes(field.name) && ![terms].includes(field))
         .map(
-          (field): Consent => ({
+          (field): CustomFormField => ({
             type: field.type as CustomRegisterFieldVariant,
             isCustomRegisterField: true,
             name: field.name,
@@ -211,6 +213,7 @@ export default class JWPAccountService extends AccountService {
             placeholder: field.placeholder,
             required: field.required,
             options: field.options,
+            defaultValue: '',
             version: '1',
             ...(field.type === 'checkbox'
               ? {
@@ -222,9 +225,7 @@ export default class JWPAccountService extends AccountService {
           }),
         );
 
-      const consents = terms ? [this.getTermsConsent(terms), ...result] : result;
-
-      return { consents };
+      return terms ? [this.getTermsConsent(terms), ...result] : result;
     } catch {
       throw new Error('Failed to fetch publisher consents.');
     }
@@ -239,9 +240,8 @@ export default class JWPAccountService extends AccountService {
       }
 
       const { customer } = payload;
-      const consents: GetCustomerConsentsResponse = this.parseJson(customer.metadata?.consents as string, []);
 
-      return consents;
+      return this.parseJson(customer.metadata?.consents as string, []);
     } catch {
       throw new Error('Unable to fetch Customer consents.');
     }
@@ -264,30 +264,25 @@ export default class JWPAccountService extends AccountService {
 
       const { data } = await InPlayer.Account.updateAccount(params);
 
-      return {
-        consents: this.parseJson(data?.metadata?.consents as string, []),
-      };
+      return this.parseJson(data?.metadata?.consents as string, []);
     } catch {
       throw new Error('Unable to update Customer consents');
     }
   };
 
   updateCaptureAnswers: UpdateCaptureAnswers = async ({ customer, ...newAnswers }) => {
-    return (await this.updateCustomer({ ...customer, ...newAnswers })) as ServiceResponse<Capture>;
+    return this.updateCustomer({ ...customer, ...newAnswers });
   };
 
   changePasswordWithOldPassword: ChangePasswordWithOldPassword = async (payload) => {
     const { oldPassword, newPassword, newPasswordConfirmation } = payload;
+
     try {
       await InPlayer.Account.changePassword({
         oldPassword,
         password: newPassword,
         passwordConfirmation: newPasswordConfirmation,
       });
-      return {
-        errors: [],
-        responseData: {},
-      };
     } catch (error: unknown) {
       if (isCommonError(error)) {
         throw new Error(error.response.data.message);
@@ -303,26 +298,22 @@ export default class JWPAccountService extends AccountService {
         merchantUuid: this.clientId,
         brandingId: 0,
       });
-      return {
-        errors: [],
-        responseData: {},
-      };
     } catch {
       throw new Error('Failed to reset password.');
     }
   };
 
-  login: Login = async ({ config, email, password, referrer }) => {
+  login: Login = async ({ email, password, referrer }) => {
     try {
       const { data } = await InPlayer.Account.signInV2({
         email,
         password,
         referrer,
-        clientId: config.integrations.jwp?.clientId || '',
+        clientId: this.clientId || '',
       });
 
       const user = this.formatAccount(data.account);
-      user.externalData = await this.getCustomerExternalData();
+      user.metadata = await this.getAccountMetadata(data.account);
 
       return {
         auth: this.formatAuth(data),
@@ -334,7 +325,7 @@ export default class JWPAccountService extends AccountService {
     }
   };
 
-  register: Register = async ({ config, email, password, referrer, consents }) => {
+  register: Register = async ({ email, password, referrer, consents }) => {
     try {
       const { data } = await InPlayer.Account.signUpV2({
         email,
@@ -349,11 +340,11 @@ export default class JWPAccountService extends AccountService {
           consents: JSON.stringify(consents),
         },
         type: 'consumer',
-        clientId: config.integrations.jwp?.clientId || '',
+        clientId: this.clientId || '',
       });
 
       const user = this.formatAccount(data.account);
-      user.externalData = await this.getCustomerExternalData();
+      user.metadata = await this.getAccountMetadata(data.account);
 
       return {
         auth: this.formatAuth(data),
@@ -382,7 +373,7 @@ export default class JWPAccountService extends AccountService {
       const { data } = await InPlayer.Account.getAccountInfo();
 
       const user = this.formatAccount(data);
-      user.externalData = await this.getCustomerExternalData();
+      user.metadata = await this.getAccountMetadata(data);
 
       return {
         user,
@@ -397,10 +388,7 @@ export default class JWPAccountService extends AccountService {
     try {
       const response = await InPlayer.Account.updateAccount(this.formatUpdateAccount(customer));
 
-      return {
-        errors: [],
-        responseData: this.formatAccount(response.data),
-      };
+      return this.formatAccount(response.data);
     } catch {
       throw new Error('Failed to update user data.');
     }
@@ -425,22 +413,19 @@ export default class JWPAccountService extends AccountService {
 
   getCaptureStatus: GetCaptureStatus = async ({ customer }) => {
     return {
-      errors: [],
-      responseData: {
-        isCaptureEnabled: true,
-        shouldCaptureBeDisplayed: true,
-        settings: [
-          {
-            answer: {
-              firstName: customer.firstName || null,
-              lastName: customer.lastName || null,
-            },
-            enabled: true,
-            key: 'firstNameLastName',
-            required: true,
+      isCaptureEnabled: true,
+      shouldCaptureBeDisplayed: true,
+      settings: [
+        {
+          answer: {
+            firstName: customer.firstName || null,
+            lastName: customer.lastName || null,
           },
-        ],
-      },
+          enabled: true,
+          key: 'firstNameLastName',
+          required: true,
+        },
+      ],
     };
   };
 
@@ -455,10 +440,6 @@ export default class JWPAccountService extends AccountService {
         },
         resetPasswordToken,
       );
-      return {
-        errors: [],
-        responseData: {},
-      };
     } catch (error: unknown) {
       if (isCommonError(error)) {
         throw new Error(error.response.data.message);
@@ -467,7 +448,7 @@ export default class JWPAccountService extends AccountService {
     }
   };
 
-  getTermsConsent = ({ label: termsUrl }: RegisterField): Consent => {
+  getTermsConsent = ({ label: termsUrl }: RegisterField): CustomFormField => {
     const termsLink = `<a href="${termsUrl || JW_TERMS_URL}" target="_blank">${i18next.t('account:registration.terms_and_conditions')}</a>`;
 
     // t('account:registration.terms_consent_jwplayer')
@@ -477,6 +458,7 @@ export default class JWPAccountService extends AccountService {
       isCustomRegisterField: true,
       required: true,
       name: 'terms',
+      defaultValue: '',
       label: termsUrl
         ? i18next.t('account:registration.terms_consent', { termsLink })
         : i18next.t('account:registration.terms_consent_jwplayer', { termsLink }),
@@ -487,44 +469,49 @@ export default class JWPAccountService extends AccountService {
     };
   };
 
-  updatePersonalShelves: UpdatePersonalShelves = async (payload) => {
-    const { favorites, history } = payload.externalData;
+  updateWatchHistory: UpdateWatchHistory = async ({ history }) => {
     const externalData = await this.getCustomerExternalData();
-    const currentFavoriteIds = externalData?.favorites?.map((e) => e.mediaid);
-    const payloadFavoriteIds = favorites?.map((e) => e.mediaid);
-    const currentWatchHistoryIds = externalData?.history?.map((e) => e.mediaid);
+    const savedHistory = externalData.history?.map((e) => e.mediaid) || [];
 
-    try {
-      history?.forEach(async (history) => {
-        if (
-          !currentWatchHistoryIds?.includes(history.mediaid) ||
-          externalData?.history?.some((e) => e.mediaid == history.mediaid && e.progress != history.progress)
-        ) {
-          await InPlayer.Account.updateWatchHistory(history.mediaid, history.progress);
+    await Promise.allSettled(
+      history.map(({ mediaid, progress }) => {
+        if (!savedHistory.includes(mediaid) || externalData.history?.some((e) => e.mediaid == mediaid && e.progress != progress)) {
+          return InPlayer.Account.updateWatchHistory(mediaid, progress);
         }
-      });
+      }),
+    );
+  };
 
-      if (payloadFavoriteIds && payloadFavoriteIds.length > (currentFavoriteIds?.length || 0)) {
-        payloadFavoriteIds.forEach(async (mediaId) => {
-          if (!currentFavoriteIds?.includes(mediaId)) {
-            await InPlayer.Account.addToFavorites(mediaId);
-          }
-        });
-      } else {
-        currentFavoriteIds?.forEach(async (mediaid) => {
-          if (!payloadFavoriteIds?.includes(mediaid)) {
-            await InPlayer.Account.deleteFromFavorites(mediaid);
-          }
-        });
-      }
+  updateFavorites: UpdateFavorites = async ({ favorites }) => {
+    const externalData = await this.getCustomerExternalData();
+    const currentFavoriteIds = externalData?.favorites?.map((e) => e.mediaid) || [];
+    const payloadFavoriteIds = favorites.map((e) => e.mediaid);
 
-      return {
-        errors: [],
-        responseData: {},
-      };
-    } catch {
-      throw new Error('Failed to update external data');
-    }
+    // save new favorites
+    await Promise.allSettled(
+      payloadFavoriteIds.map((mediaId) => {
+        return !currentFavoriteIds.includes(mediaId) ? InPlayer.Account.addToFavorites(mediaId) : Promise.resolve();
+      }),
+    );
+
+    // delete removed favorites
+    await Promise.allSettled(
+      currentFavoriteIds.map((mediaId) => {
+        return !payloadFavoriteIds.includes(mediaId) ? InPlayer.Account.deleteFromFavorites(mediaId) : Promise.resolve();
+      }),
+    );
+  };
+
+  getFavorites = async () => {
+    const favoritesData = await InPlayer.Account.getFavorites();
+
+    return favoritesData.data?.collection?.map(this.formatFavorite) || [];
+  };
+
+  getWatchHistory = async () => {
+    const watchHistoryData = await InPlayer.Account.getWatchHistory({});
+
+    return watchHistoryData.data?.collection?.map(this.formatHistoryItem) || [];
   };
 
   subscribeToNotifications: NotificationsData = async ({ uuid, onMessage }) => {
@@ -545,7 +532,8 @@ export default class JWPAccountService extends AccountService {
     // password is sent as undefined because it is now optional on BE
     try {
       const response = await InPlayer.Account.exportData({ password: undefined, brandingId: 0 });
-      return getCommonResponseData(response);
+
+      return response.data;
     } catch {
       throw new Error('Failed to export account data');
     }
@@ -554,16 +542,17 @@ export default class JWPAccountService extends AccountService {
   deleteAccount: DeleteAccount = async ({ password }) => {
     try {
       const response = await InPlayer.Account.deleteAccount({ password, brandingId: 0 });
-      return getCommonResponseData(response);
+
+      return response.data;
     } catch {
       throw new Error('Failed to delete account');
     }
   };
 
-  getSocialUrls: GetSocialURLs = async ({ config, redirectUrl }) => {
+  getSocialUrls: GetSocialURLs = async ({ redirectUrl }) => {
     const socialState = this.storageService.base64Encode(
       JSON.stringify({
-        client_id: config.integrations.jwp?.clientId || '',
+        client_id: this.clientId || '',
         redirect: redirectUrl,
       }),
     );
diff --git a/packages/common/src/services/integrations/jwp/JWPProfileService.ts b/packages/common/src/services/integrations/jwp/JWPProfileService.ts
index 132ebe379..5ed0a36ae 100644
--- a/packages/common/src/services/integrations/jwp/JWPProfileService.ts
+++ b/packages/common/src/services/integrations/jwp/JWPProfileService.ts
@@ -2,9 +2,9 @@ import InPlayer from '@inplayer-org/inplayer.js';
 import { injectable } from 'inversify';
 import defaultAvatar from '@jwp/ott-theme/assets/profiles/default_avatar.png';
 
-import type { CreateProfile, DeleteProfile, EnterProfile, GetProfileDetails, ListProfiles, UpdateProfile } from '../../../../types/account';
 import ProfileService from '../ProfileService';
 import StorageService from '../../StorageService';
+import type { CreateProfile, DeleteProfile, EnterProfile, GetProfileDetails, ListProfiles, UpdateProfile } from '../../../../types/profiles';
 
 @injectable()
 export default class JWPProfileService extends ProfileService {
@@ -18,46 +18,38 @@ export default class JWPProfileService extends ProfileService {
   listProfiles: ListProfiles = async () => {
     try {
       const response = await InPlayer.Account.getProfiles();
+
       return {
-        responseData: {
-          canManageProfiles: true,
-          collection:
-            response.data.map((profile) => ({
-              ...profile,
-              avatar_url: profile?.avatar_url || defaultAvatar,
-            })) ?? [],
-        },
-        errors: [],
+        canManageProfiles: true,
+        collection:
+          response.data.map((profile) => ({
+            ...profile,
+            avatar_url: profile?.avatar_url || defaultAvatar,
+          })) ?? [],
       };
     } catch {
       console.error('Unable to list profiles.');
       return {
-        responseData: {
-          canManageProfiles: false,
-          collection: [],
-        },
-        errors: ['Unable to list profiles.'],
+        canManageProfiles: false,
+        collection: [],
       };
     }
   };
 
   createProfile: CreateProfile = async (payload) => {
     const response = await InPlayer.Account.createProfile(payload.name, payload.adult, payload.avatar_url, payload.pin);
-    return {
-      responseData: response.data,
-      errors: [],
-    };
+
+    return response.data;
   };
 
   updateProfile: UpdateProfile = async (payload) => {
     if (!payload.id) {
       throw new Error('Profile id is required.');
     }
+
     const response = await InPlayer.Account.updateProfile(payload.id, payload.name, payload.avatar_url, payload.adult);
-    return {
-      responseData: response.data,
-      errors: [],
-    };
+
+    return response.data;
   };
 
   enterProfile: EnterProfile = async ({ id, pin }) => {
@@ -76,10 +68,7 @@ export default class JWPProfileService extends ProfileService {
         await this.storageService.setItem('inplayer_token', tokenData, false);
       }
 
-      return {
-        responseData: profile,
-        errors: [],
-      };
+      return profile;
     } catch {
       throw new Error('Unable to enter profile.');
     }
@@ -88,10 +77,8 @@ export default class JWPProfileService extends ProfileService {
   getProfileDetails: GetProfileDetails = async ({ id }) => {
     try {
       const response = await InPlayer.Account.getProfileDetails(id);
-      return {
-        responseData: response.data,
-        errors: [],
-      };
+
+      return response.data;
     } catch {
       throw new Error('Unable to get profile details.');
     }
@@ -100,12 +87,10 @@ export default class JWPProfileService extends ProfileService {
   deleteProfile: DeleteProfile = async ({ id }) => {
     try {
       await InPlayer.Account.deleteProfile(id);
+
       return {
-        responseData: {
-          message: 'Profile deleted successfully',
-          code: 200,
-        },
-        errors: [],
+        message: 'Profile deleted successfully',
+        code: 200,
       };
     } catch {
       throw new Error('Unable to delete profile.');
diff --git a/packages/common/src/stores/AccountController.ts b/packages/common/src/stores/AccountController.ts
index b1846cbc1..acb77d08f 100644
--- a/packages/common/src/stores/AccountController.ts
+++ b/packages/common/src/stores/AccountController.ts
@@ -15,16 +15,12 @@ import type {
   EmailConfirmPasswordInput,
   FirstLastNameInput,
   GetCaptureStatusResponse,
-  GetCustomerConsentsResponse,
-  GetPublisherConsentsResponse,
   SubscribeToNotificationsPayload,
 } from '../../types/account';
 import { assertFeature, assertModuleMethod, getNamedModule } from '../modules/container';
 import { INTEGRATION_TYPE } from '../modules/types';
 import type { ServiceResponse } from '../../types/service';
 
-import { useWatchHistoryStore } from './WatchHistoryStore';
-import { useFavoritesStore } from './FavoritesStore';
 import { useAccountStore } from './AccountStore';
 import { useConfigStore } from './ConfigStore';
 import { useProfileStore } from './ProfileStore';
@@ -37,9 +33,9 @@ export default class AccountController {
   private readonly checkoutService: CheckoutService;
   private readonly accountService: AccountService;
   private readonly subscriptionService: SubscriptionService;
+  private readonly profileController: ProfileController;
   private readonly favoritesController: FavoritesController;
   private readonly watchHistoryController: WatchHistoryController;
-  private readonly profileController?: ProfileController;
   private readonly features: AccountServiceFeatures;
 
   // temporary callback for refreshing the query cache until we've updated to react-query v4 or v5
@@ -49,13 +45,13 @@ export default class AccountController {
     @inject(INTEGRATION_TYPE) integrationType: IntegrationType,
     favoritesController: FavoritesController,
     watchHistoryController: WatchHistoryController,
-    profileController?: ProfileController,
+    profileController: ProfileController,
   ) {
     this.checkoutService = getNamedModule(CheckoutService, integrationType);
     this.accountService = getNamedModule(AccountService, integrationType);
     this.subscriptionService = getNamedModule(SubscriptionService, integrationType);
 
-    // @TODO refactor?
+    // @TODO: Controllers shouldn't be depending on other controllers, but we've agreed to keep this as is for now
     this.favoritesController = favoritesController;
     this.watchHistoryController = watchHistoryController;
     this.profileController = profileController;
@@ -69,8 +65,8 @@ export default class AccountController {
 
       if (authData) {
         await this.getAccount();
-        await this.watchHistoryController?.restoreWatchHistory();
-        await this.favoritesController?.restoreFavorites();
+        await this.watchHistoryController.restoreWatchHistory();
+        await this.favoritesController.restoreFavorites();
       }
     } catch (error: unknown) {
       logDev('Failed to get user', error);
@@ -104,26 +100,6 @@ export default class AccountController {
     return this.accountService.sandbox;
   }
 
-  updatePersonalShelves = async () => {
-    const { watchHistory } = useWatchHistoryStore.getState();
-    const { favorites } = useFavoritesStore.getState();
-    const { getAccountInfo } = useAccountStore.getState();
-
-    const { customer } = getAccountInfo();
-
-    if (!watchHistory && !favorites) return;
-
-    const personalShelfData = {
-      history: this.watchHistoryController?.serializeWatchHistory(watchHistory),
-      favorites: this.favoritesController?.serializeFavorites(favorites),
-    };
-
-    return this.accountService?.updatePersonalShelves({
-      id: customer.id,
-      externalData: personalShelfData,
-    });
-  };
-
   updateUser = async (values: FirstLastNameInput | EmailConfirmPasswordInput): Promise<ServiceResponse<Customer>> => {
     useAccountStore.setState({ loading: true });
 
@@ -152,17 +128,15 @@ export default class AccountController {
       payload = { ...values, email: user.email };
     }
 
-    const response = await this.accountService.updateCustomer({ ...payload, id: user.id.toString() });
+    const updatedUser = await this.accountService.updateCustomer({ ...payload, id: user.id.toString() });
 
-    if (!response) {
+    if (!updatedUser) {
       throw new Error('Unknown error');
     }
 
-    if (response.errors?.length === 0) {
-      useAccountStore.setState({ user: response.responseData });
-    }
+    useAccountStore.setState({ user: updatedUser });
 
-    return response;
+    return { errors: [], responseData: updatedUser };
   };
 
   getAccount = async () => {
@@ -172,6 +146,8 @@ export default class AccountController {
       const response = await this.accountService.getUser({ config });
       if (response) {
         await this.afterLogin(response.user, response.customerConsents);
+        await this.favoritesController.restoreFavorites().catch(logDev);
+        await this.watchHistoryController.restoreWatchHistory().catch(logDev);
       }
 
       useAccountStore.setState({ loading: false });
@@ -189,17 +165,12 @@ export default class AccountController {
   };
 
   login = async (email: string, password: string, referrer: string) => {
-    const { config } = useConfigStore.getState();
-
     useAccountStore.setState({ loading: true });
 
-    const response = await this.accountService.login({ config, email, password, referrer });
+    const response = await this.accountService.login({ email, password, referrer });
 
     if (response) {
       await this.afterLogin(response.user, response.customerConsents);
-
-      await this.favoritesController?.restoreFavorites().catch(logDev);
-      await this.watchHistoryController?.restoreWatchHistory().catch(logDev);
     }
 
     useAccountStore.setState({ loading: false });
@@ -214,37 +185,35 @@ export default class AccountController {
   };
 
   register = async (email: string, password: string, referrer: string, consents: CustomerConsent[]) => {
-    const { config } = useConfigStore.getState();
-
     useAccountStore.setState({ loading: true });
-    const response = await this.accountService.register({ config, email, password, consents, referrer });
+    const response = await this.accountService.register({ email, password, consents, referrer });
 
     if (response) {
       const { user, customerConsents } = response;
       await this.afterLogin(user, customerConsents);
     }
 
-    await this.updatePersonalShelves();
+    // this stores the locally stored favorites and watch history into the users account
+    await this.favoritesController.persistFavorites();
+    await this.watchHistoryController.persistWatchHistory();
   };
 
   updateConsents = async (customerConsents: CustomerConsent[]): Promise<ServiceResponse<CustomerConsent[]>> => {
     const { getAccountInfo } = useAccountStore.getState();
-    const { config } = useConfigStore.getState();
     const { customer } = getAccountInfo();
 
     useAccountStore.setState({ loading: true });
 
     try {
-      const response = await this.accountService?.updateCustomerConsents({
-        config,
+      const updatedConsents = await this.accountService?.updateCustomerConsents({
         customer,
         consents: customerConsents,
       });
 
-      if (response?.consents) {
-        useAccountStore.setState({ customerConsents: response.consents });
+      if (updatedConsents) {
+        useAccountStore.setState({ customerConsents: updatedConsents });
         return {
-          responseData: response.consents,
+          responseData: updatedConsents,
           errors: [],
         };
       }
@@ -259,85 +228,69 @@ export default class AccountController {
 
   // TODO: Decide if it's worth keeping this or just leave combined with getUser
   // noinspection JSUnusedGlobalSymbols
-  getCustomerConsents = async (): Promise<GetCustomerConsentsResponse> => {
+  getCustomerConsents = async () => {
     const { getAccountInfo } = useAccountStore.getState();
-    const { config } = useConfigStore.getState();
     const { customer } = getAccountInfo();
 
-    const response = await this.accountService.getCustomerConsents({ config, customer });
+    const consents = await this.accountService.getCustomerConsents({ customer });
 
-    if (response?.consents) {
-      useAccountStore.setState({ customerConsents: response.consents });
+    if (consents) {
+      useAccountStore.setState({ customerConsents: consents });
     }
 
-    return response;
+    return consents;
   };
 
-  getPublisherConsents = async (): Promise<GetPublisherConsentsResponse> => {
+  getPublisherConsents = async () => {
     const { config } = useConfigStore.getState();
 
-    const response = await this.accountService.getPublisherConsents(config);
+    const consents = await this.accountService.getPublisherConsents(config);
 
-    useAccountStore.setState({ publisherConsents: response.consents });
+    useAccountStore.setState({ publisherConsents: consents });
 
-    return response;
+    return consents;
   };
 
   getCaptureStatus = async (): Promise<GetCaptureStatusResponse> => {
     const { getAccountInfo } = useAccountStore.getState();
     const { customer } = getAccountInfo();
 
-    const { responseData } = await this.accountService.getCaptureStatus({ customer });
-
-    return responseData;
+    return this.accountService.getCaptureStatus({ customer });
   };
 
   updateCaptureAnswers = async (capture: Capture): Promise<Capture> => {
     const { getAccountInfo } = useAccountStore.getState();
     const { customer, customerConsents } = getAccountInfo();
 
-    const response = await this.accountService.updateCaptureAnswers({ customer, ...capture });
-
-    if (response.errors.length > 0) throw new Error(response.errors[0]);
+    const updatedCustomer = await this.accountService.updateCaptureAnswers({ customer, ...capture });
 
-    await this.afterLogin(response.responseData as Customer, customerConsents, false);
+    await this.afterLogin(updatedCustomer, customerConsents, false);
 
-    return response.responseData;
+    return updatedCustomer;
   };
 
   resetPassword = async (email: string, resetUrl: string) => {
-    const response = await this.accountService.resetPassword({
+    await this.accountService.resetPassword({
       customerEmail: email,
       resetUrl,
     });
-
-    if (response.errors.length > 0) throw new Error(response.errors[0]);
-
-    return response.responseData;
   };
 
   changePasswordWithOldPassword = async (oldPassword: string, newPassword: string, newPasswordConfirmation: string) => {
-    const response = await this.accountService.changePasswordWithOldPassword({
+    await this.accountService.changePasswordWithOldPassword({
       oldPassword,
       newPassword,
       newPasswordConfirmation,
     });
-    if (response?.errors?.length > 0) throw new Error(response.errors[0]);
-
-    return response?.responseData;
   };
 
   changePasswordWithToken = async (customerEmail: string, newPassword: string, resetPasswordToken: string, newPasswordConfirmation: string) => {
-    const response = await this.accountService.changePasswordWithResetToken({
+    await this.accountService.changePasswordWithResetToken({
       customerEmail,
       newPassword,
       resetPasswordToken,
       newPasswordConfirmation,
     });
-
-    if (response?.errors?.length > 0) throw new Error(response.errors[0]);
-
-    return response?.responseData;
   };
 
   updateSubscription = async (status: 'active' | 'cancelled'): Promise<unknown> => {
@@ -478,13 +431,12 @@ export default class AccountController {
   };
 
   getSocialLoginUrls = (redirectUrl: string) => {
-    const { config } = useConfigStore.getState();
     const { hasSocialURLs } = this.getFeatures();
 
     assertModuleMethod(this.accountService.getSocialUrls, 'getSocialUrls is not available in account service');
     assertFeature(hasSocialURLs, 'Social logins');
 
-    return this.accountService.getSocialUrls({ config, redirectUrl });
+    return this.accountService.getSocialUrls({ redirectUrl });
   };
 
   deleteAccountData = async (password: string) => {
@@ -554,9 +506,9 @@ export default class AccountController {
       selectingProfileAvatar: null,
     });
 
-    this.profileController?.unpersistProfile();
+    this.profileController.unpersistProfile();
 
-    await this.favoritesController?.restoreFavorites();
-    await this.watchHistoryController?.restoreWatchHistory();
+    await this.favoritesController.restoreFavorites().catch(logDev);
+    await this.watchHistoryController.restoreWatchHistory().catch(logDev);
   };
 }
diff --git a/packages/common/src/stores/AccountStore.ts b/packages/common/src/stores/AccountStore.ts
index f16a86513..bbd8c15a3 100644
--- a/packages/common/src/stores/AccountStore.ts
+++ b/packages/common/src/stores/AccountStore.ts
@@ -1,4 +1,4 @@
-import type { Consent, Customer, CustomerConsent } from '../../types/account';
+import type { CustomFormField, Customer, CustomerConsent } from '../../types/account';
 import type { Offer } from '../../types/checkout';
 import type { PaymentDetail, Subscription, Transaction } from '../../types/subscription';
 
@@ -11,7 +11,7 @@ type AccountStore = {
   transactions: Transaction[] | null;
   activePayment: PaymentDetail | null;
   customerConsents: CustomerConsent[] | null;
-  publisherConsents: Consent[] | null;
+  publisherConsents: CustomFormField[] | null;
   pendingOffer: Offer | null;
   setLoading: (loading: boolean) => void;
   getAccountInfo: () => { customerId: string; customer: Customer; customerConsents: CustomerConsent[] | null };
diff --git a/packages/common/src/stores/AppController.ts b/packages/common/src/stores/AppController.ts
index 87feb43f6..886fcfff3 100644
--- a/packages/common/src/stores/AppController.ts
+++ b/packages/common/src/stores/AppController.ts
@@ -78,6 +78,11 @@ export default class AppController {
     // update settings in the config store
     useConfigStore.setState({ settings });
 
+    // when an integration is set, we initialize the AccountController
+    if (integrationType) {
+      await getModule(AccountController).initialize(url, refreshEntitlements);
+    }
+
     if (config.features?.continueWatchingList && config.content.some((el) => el.type === PersonalShelf.ContinueWatching)) {
       await getModule(WatchHistoryController).initialize();
     }
@@ -86,11 +91,6 @@ export default class AppController {
       await getModule(FavoritesController).initialize();
     }
 
-    // when an integration is set, we initialize the AccountController
-    if (integrationType) {
-      await getModule(AccountController).initialize(url, refreshEntitlements);
-    }
-
     return { config, settings, configSource };
   };
 
diff --git a/packages/common/src/stores/CheckoutController.ts b/packages/common/src/stores/CheckoutController.ts
index 8f4e54a51..d3b6132ab 100644
--- a/packages/common/src/stores/CheckoutController.ts
+++ b/packages/common/src/stores/CheckoutController.ts
@@ -49,12 +49,13 @@ export default class CheckoutController {
   createOrder = async (offer: Offer, paymentMethodId?: number): Promise<void> => {
     const { getAccountInfo } = useAccountStore.getState();
     const { customer } = getAccountInfo();
+    const customerIP = typeof customer?.lastUserIp === 'string' && customer.lastUserIp ? customer.lastUserIp : '';
 
     const createOrderArgs: CreateOrderArgs = {
       offer,
       customerId: customer.id,
       country: customer?.country || '',
-      customerIP: customer?.lastUserIp || '',
+      customerIP,
       paymentMethodId,
     };
 
diff --git a/packages/common/src/stores/FavoritesController.ts b/packages/common/src/stores/FavoritesController.ts
index f428e1698..bbe425007 100644
--- a/packages/common/src/stores/FavoritesController.ts
+++ b/packages/common/src/stores/FavoritesController.ts
@@ -1,14 +1,8 @@
 import i18next from 'i18next';
-import { inject, injectable } from 'inversify';
+import { injectable } from 'inversify';
 
 import FavoriteService from '../services/FavoriteService';
-import AccountService from '../services/integrations/AccountService';
 import type { PlaylistItem } from '../../types/playlist';
-import type { Favorite, SerializedFavorite } from '../../types/favorite';
-import type { Customer } from '../../types/account';
-import type { IntegrationType } from '../../types/config';
-import { getNamedModule } from '../modules/container';
-import { INTEGRATION_TYPE } from '../modules/types';
 
 import { useAccountStore } from './AccountStore';
 import { useFavoritesStore } from './FavoritesStore';
@@ -17,26 +11,14 @@ import { useConfigStore } from './ConfigStore';
 @injectable()
 export default class FavoritesController {
   private readonly favoritesService: FavoriteService;
-  private readonly accountService?: AccountService;
 
-  constructor(@inject(INTEGRATION_TYPE) integrationType: IntegrationType, favoritesService: FavoriteService) {
+  constructor(favoritesService: FavoriteService) {
     this.favoritesService = favoritesService;
-    this.accountService = getNamedModule(AccountService, integrationType, false);
   }
 
-  private updateUserFavorites(favorites: Favorite[]) {
-    const { user } = useAccountStore.getState();
-
-    if (user) {
-      useAccountStore.setState((state) => ({
-        ...state,
-        user: {
-          ...(state.user as Customer),
-          externalData: { ...state.user?.externalData, favorites: this.serializeFavorites(favorites) },
-        },
-      }));
-    }
-  }
+  initialize = async () => {
+    await this.restoreFavorites();
+  };
 
   restoreFavorites = async () => {
     const { user } = useAccountStore.getState();
@@ -45,11 +27,8 @@ export default class FavoritesController {
     if (!favoritesList) {
       return;
     }
-    const favorites = await this.favoritesService.getFavorites(user, favoritesList);
 
-    if (!favorites) {
-      return;
-    }
+    const favorites = await this.favoritesService.getFavorites(user, favoritesList);
 
     useFavoritesStore.setState({ favorites, favoritesPlaylistId: favoritesList });
   };
@@ -58,19 +37,7 @@ export default class FavoritesController {
     const { favorites } = useFavoritesStore.getState();
     const { user } = useAccountStore.getState();
 
-    if (user?.id && user?.externalData) {
-      return this.accountService?.updatePersonalShelves({ id: user.id, externalData: user.externalData });
-    }
-
-    this.favoritesService.persistFavorites(favorites);
-  };
-
-  serializeFavorites = (favorites: Favorite[]): SerializedFavorite[] => {
-    return this.favoritesService.serializeFavorites(favorites);
-  };
-
-  initialize = async () => {
-    await this.restoreFavorites();
+    await this.favoritesService.persistFavorites(favorites, user);
   };
 
   saveItem = async (item: PlaylistItem) => {
@@ -79,7 +46,6 @@ export default class FavoritesController {
     if (!favorites.some(({ mediaid }) => mediaid === item.mediaid)) {
       const items = [this.favoritesService.createFavorite(item)].concat(favorites);
       useFavoritesStore.setState({ favorites: items });
-      this.updateUserFavorites(items);
       await this.persistFavorites();
     }
   };
@@ -89,7 +55,6 @@ export default class FavoritesController {
 
     const items = favorites.filter(({ mediaid }) => mediaid !== item.mediaid);
     useFavoritesStore.setState({ favorites: items });
-    this.updateUserFavorites(items);
 
     await this.persistFavorites();
   };
@@ -101,9 +66,9 @@ export default class FavoritesController {
       return;
     }
 
-    const isFavorited = hasItem(item);
+    const isFavorite = hasItem(item);
 
-    if (isFavorited) {
+    if (isFavorite) {
       await this.removeItem(item);
 
       return;
diff --git a/packages/common/src/stores/ProfileController.ts b/packages/common/src/stores/ProfileController.ts
index 22586458f..95fba83aa 100644
--- a/packages/common/src/stores/ProfileController.ts
+++ b/packages/common/src/stores/ProfileController.ts
@@ -2,12 +2,12 @@ import { inject, injectable } from 'inversify';
 import type { ProfilesData } from '@inplayer-org/inplayer.js';
 import * as yup from 'yup';
 
-import type { EnterProfilePayload, ProfileDetailsPayload, ProfilePayload } from '../../types/account';
 import ProfileService from '../services/integrations/ProfileService';
 import type { IntegrationType } from '../../types/config';
 import { assertModuleMethod, getNamedModule } from '../modules/container';
 import StorageService from '../services/StorageService';
 import { INTEGRATION_TYPE } from '../modules/types';
+import type { EnterProfilePayload, ProfileDetailsPayload, ProfilePayload } from '../../types/profiles';
 
 import { useProfileStore } from './ProfileStore';
 
@@ -68,9 +68,7 @@ export default class ProfileController {
   enterProfile = async ({ id, pin }: EnterProfilePayload) => {
     assertModuleMethod(this.profileService?.enterProfile, 'enterProfile is not available in profile service');
 
-    const response = await this.profileService.enterProfile({ id, pin });
-
-    const profile = response?.responseData;
+    const profile = await this.profileService.enterProfile({ id, pin });
 
     if (!profile) {
       throw new Error('Unable to enter profile');
diff --git a/packages/common/src/stores/ProfileStore.ts b/packages/common/src/stores/ProfileStore.ts
index c55528a5e..9b4bd2b48 100644
--- a/packages/common/src/stores/ProfileStore.ts
+++ b/packages/common/src/stores/ProfileStore.ts
@@ -1,6 +1,6 @@
 import defaultAvatar from '@jwp/ott-theme/assets/profiles/default_avatar.png';
 
-import type { Profile } from '../../types/account';
+import type { Profile } from '../../types/profiles';
 
 import { createStore } from './utils';
 
diff --git a/packages/common/src/stores/WatchHistoryController.ts b/packages/common/src/stores/WatchHistoryController.ts
index 28791c8e0..a62a63145 100644
--- a/packages/common/src/stores/WatchHistoryController.ts
+++ b/packages/common/src/stores/WatchHistoryController.ts
@@ -1,13 +1,8 @@
-import { inject, injectable } from 'inversify';
+import { injectable } from 'inversify';
 
 import WatchHistoryService from '../services/WatchHistoryService';
-import AccountService from '../services/integrations/AccountService';
 import type { PlaylistItem } from '../../types/playlist';
-import type { SerializedWatchHistoryItem, WatchHistoryItem } from '../../types/watchHistory';
-import type { Customer } from '../../types/account';
-import type { IntegrationType } from '../../types/config';
-import { getNamedModule } from '../modules/container';
-import { INTEGRATION_TYPE } from '../modules/types';
+import type { WatchHistoryItem } from '../../types/watchHistory';
 
 import { useAccountStore } from './AccountStore';
 import { useConfigStore } from './ConfigStore';
@@ -16,29 +11,9 @@ import { useWatchHistoryStore } from './WatchHistoryStore';
 @injectable()
 export default class WatchHistoryController {
   private readonly watchHistoryService: WatchHistoryService;
-  private readonly accountService?: AccountService;
 
-  constructor(@inject(INTEGRATION_TYPE) integrationType: IntegrationType, watchHistoryService: WatchHistoryService) {
+  constructor(watchHistoryService: WatchHistoryService) {
     this.watchHistoryService = watchHistoryService;
-    this.accountService = getNamedModule(AccountService, integrationType, false);
-  }
-
-  serializeWatchHistory = (watchHistory: WatchHistoryItem[]): SerializedWatchHistoryItem[] => {
-    return this.watchHistoryService.serializeWatchHistory(watchHistory);
-  };
-
-  private updateUserWatchHistory(watchHistory: WatchHistoryItem[]) {
-    const { user } = useAccountStore.getState();
-
-    if (user) {
-      useAccountStore.setState((state) => ({
-        ...state,
-        user: {
-          ...(state.user as Customer),
-          externalData: { ...state.user?.externalData, history: this.serializeWatchHistory(watchHistory) },
-        },
-      }));
-    }
   }
 
   initialize = async () => {
@@ -55,24 +30,18 @@ export default class WatchHistoryController {
 
     const watchHistory = await this.watchHistoryService.getWatchHistory(user, continueWatchingList);
 
-    if (watchHistory?.length) {
-      useWatchHistoryStore.setState({
-        watchHistory: watchHistory.filter((item): item is WatchHistoryItem => !!item?.mediaid),
-        playlistItemsLoaded: true,
-        continueWatchingPlaylistId: continueWatchingList,
-      });
-    }
+    useWatchHistoryStore.setState({
+      watchHistory: watchHistory.filter((item): item is WatchHistoryItem => !!item?.mediaid),
+      playlistItemsLoaded: true,
+      continueWatchingPlaylistId: continueWatchingList,
+    });
   };
 
   persistWatchHistory = async () => {
     const { watchHistory } = useWatchHistoryStore.getState();
     const { user } = useAccountStore.getState();
 
-    if (user?.id && user?.externalData) {
-      return this.accountService?.updatePersonalShelves({ id: user.id, externalData: user.externalData });
-    }
-
-    this.watchHistoryService.persistWatchHistory(watchHistory);
+    await this.watchHistoryService.persistWatchHistory(watchHistory, user);
   };
 
   /**
@@ -92,7 +61,6 @@ export default class WatchHistoryController {
 
     if (updatedHistory) {
       useWatchHistoryStore.setState({ watchHistory: updatedHistory });
-      this.updateUserWatchHistory(updatedHistory);
       await this.persistWatchHistory();
     }
   };
diff --git a/packages/common/src/utils/collection.ts b/packages/common/src/utils/collection.ts
index f8edb5178..a12804783 100644
--- a/packages/common/src/utils/collection.ts
+++ b/packages/common/src/utils/collection.ts
@@ -1,4 +1,4 @@
-import type { Consent, CustomerConsent } from '../../types/account';
+import type { CustomFormField, CustomerConsent } from '../../types/account';
 import type { Config } from '../../types/config';
 import type { GenericFormValues } from '../../types/form';
 import type { Playlist, PlaylistItem } from '../../types/playlist';
@@ -57,7 +57,7 @@ const generatePlaylistPlaceholder = (playlistLength: number = 15): Playlist => (
   ),
 });
 
-const formatConsentValues = (publisherConsents: Consent[] | null = [], customerConsents: CustomerConsent[] | null = []) => {
+const formatConsentValues = (publisherConsents: CustomFormField[] | null = [], customerConsents: CustomerConsent[] | null = []) => {
   if (!publisherConsents || !customerConsents) {
     return {};
   }
@@ -76,7 +76,7 @@ const formatConsentValues = (publisherConsents: Consent[] | null = [], customerC
   return values;
 };
 
-const formatConsents = (publisherConsents: Consent[] | null = [], customerConsents: CustomerConsent[] | null = []) => {
+const formatConsents = (publisherConsents: CustomFormField[] | null = [], customerConsents: CustomerConsent[] | null = []) => {
   if (!publisherConsents || !customerConsents) {
     return {};
   }
@@ -90,7 +90,7 @@ const formatConsents = (publisherConsents: Consent[] | null = [], customerConsen
   return values;
 };
 
-const extractConsentValues = (consents?: Consent[]) => {
+const extractConsentValues = (consents?: CustomFormField[]) => {
   const values: Record<string, string | boolean> = {};
 
   if (!consents) {
@@ -104,7 +104,7 @@ const extractConsentValues = (consents?: Consent[]) => {
   return values;
 };
 
-const formatConsentsFromValues = (publisherConsents: Consent[] | null, values?: GenericFormValues) => {
+const formatConsentsFromValues = (publisherConsents: CustomFormField[] | null, values?: GenericFormValues) => {
   const consents: CustomerConsent[] = [];
 
   if (!publisherConsents || !values) return consents;
@@ -121,7 +121,7 @@ const formatConsentsFromValues = (publisherConsents: Consent[] | null, values?:
   return consents;
 };
 
-const checkConsentsFromValues = (publisherConsents: Consent[], consents: Record<string, string | boolean>) => {
+const checkConsentsFromValues = (publisherConsents: CustomFormField[], consents: Record<string, string | boolean>) => {
   const customerConsents: CustomerConsent[] = [];
   const consentsErrors: string[] = [];
 
diff --git a/packages/common/types/account.ts b/packages/common/types/account.ts
index 8a53a5780..a01c28179 100644
--- a/packages/common/types/account.ts
+++ b/packages/common/types/account.ts
@@ -1,9 +1,7 @@
-import type { ProfilesData } from '@inplayer-org/inplayer.js';
-
+import type { Config } from './config';
+import type { PromiseRequest } from './service';
 import type { SerializedWatchHistoryItem } from './watchHistory';
 import type { SerializedFavorite } from './favorite';
-import type { Config } from './config';
-import type { EmptyServiceRequest, EnvironmentServiceRequest, PromiseRequest } from './service';
 
 export type AuthData = {
   jwt: string;
@@ -21,7 +19,6 @@ export type PayloadWithIPOverride = {
 };
 
 export type LoginArgs = {
-  config: Config;
   email: string;
   password: string;
   referrer: string;
@@ -76,6 +73,15 @@ export type ChooseOfferFormData = {
   offerId?: string;
 };
 
+export type GetUserArgs = {
+  config: Config;
+};
+
+export type GetUserPayload = {
+  user: Customer;
+  customerConsents: CustomerConsent[];
+};
+
 export type RegisterPayload = PayloadWithIPOverride & {
   email: string;
   password: string;
@@ -90,15 +96,6 @@ export type RegisterPayload = PayloadWithIPOverride & {
   externalData?: string;
 };
 
-export type RegisterArgs = {
-  config: Config;
-  user: RegisterPayload;
-};
-export type CaptureFirstNameLastName = {
-  firstName: string;
-  lastName: string;
-};
-
 export type CleengCaptureField = {
   key: string;
   enabled: boolean;
@@ -129,18 +126,6 @@ export type PersonalDetailsFormData = {
   country: string;
 };
 
-export type GetPublisherConsentsPayload = {
-  publisherId: string;
-};
-
-export type GetPublisherConsentsResponse = {
-  consents: Consent[];
-};
-
-export type GetCustomerConsentsPayload = {
-  customerId: string;
-};
-
 export type GetCustomerConsentsResponse = {
   consents: CustomerConsent[];
 };
@@ -164,22 +149,12 @@ export type ChangePasswordWithOldPasswordPayload = {
   newPasswordConfirmation: string;
 };
 
-export type GetCustomerPayload = {
-  customerId: string;
-};
-
 export type UpdateCustomerPayload = {
   id?: string;
   email?: string;
   confirmationPassword?: string;
   firstName?: string;
   lastName?: string;
-  externalData?: ExternalData;
-};
-
-export type ExternalData = {
-  history?: SerializedWatchHistoryItem[];
-  favorites?: SerializedFavorite[];
 };
 
 export type UpdateCustomerConsentsPayload = {
@@ -190,17 +165,12 @@ export type UpdateCustomerConsentsPayload = {
 export type Customer = {
   id: string;
   email: string;
-  country: string;
-  regDate: string;
-  lastLoginDate?: string;
-  lastUserIp: string;
   firstName?: string;
-  metadata?: Record<string, unknown>;
+  country?: string;
+  metadata: Record<string, unknown>;
   lastName?: string;
   fullName?: string;
-  uuid?: string;
-  externalId?: string;
-  externalData?: ExternalData;
+  [key: string]: unknown;
 };
 
 export type UpdateCustomerArgs = {
@@ -209,15 +179,14 @@ export type UpdateCustomerArgs = {
   confirmationPassword?: string | undefined;
   firstName?: string | undefined;
   lastName?: string | undefined;
-  externalData?: ExternalData | undefined;
   metadata?: Record<string, unknown>;
   fullName?: string;
 };
 
 export type CustomRegisterFieldVariant = 'input' | 'select' | 'country' | 'us_state' | 'radio' | 'checkbox' | 'datepicker';
 
-export interface Consent {
-  type?: CustomRegisterFieldVariant;
+export interface CustomFormField {
+  type: CustomRegisterFieldVariant;
   isCustomRegisterField?: boolean;
   enabledByDefault?: boolean;
   defaultValue?: string;
@@ -243,28 +212,14 @@ export type CustomerConsent = {
 };
 
 export type CustomerConsentArgs = {
-  config: Config;
-  customerId?: string;
-  customer?: Customer;
+  customer: Customer;
 };
 
 export type UpdateCustomerConsentsArgs = {
-  config: Config;
   customer: Customer;
   consents: CustomerConsent[];
 };
 
-export type LocalesData = {
-  country: string;
-  currency: string;
-  locale: string;
-  ipAddress: string;
-};
-
-export type GetCaptureStatusPayload = {
-  customerId: string;
-};
-
 export type GetCaptureStatusResponse = {
   isCaptureEnabled: boolean;
   shouldCaptureBeDisplayed: boolean;
@@ -303,38 +258,6 @@ export type UpdateCaptureAnswersPayload = {
   customerId: string;
 } & Capture;
 
-export type UpdatePersonalShelvesArgs = {
-  id: string;
-  externalData: {
-    history?: SerializedWatchHistoryItem[];
-    favorites?: SerializedFavorite[];
-  };
-};
-
-export type Profile = ProfilesData;
-
-export type ProfilePayload = {
-  id?: string;
-  name: string;
-  adult: boolean;
-  avatar_url?: string;
-  pin?: number;
-};
-
-export type EnterProfilePayload = {
-  id: string;
-  pin?: number;
-};
-
-export type ProfileDetailsPayload = {
-  id: string;
-};
-
-export type ListProfilesResponse = {
-  canManageProfiles: boolean;
-  collection: ProfilesData[];
-};
-
 export type FirstLastNameInput = {
   firstName: string;
   lastName: string;
@@ -362,7 +285,6 @@ export type SubscribeToNotificationsPayload = {
 };
 
 export type GetSocialURLsPayload = {
-  config: Config;
   redirectUrl: string;
 };
 
@@ -377,27 +299,43 @@ export type SocialURLs =
       google: string;
     };
 
+export type UpdateWatchHistoryArgs = {
+  user: Customer;
+  history: SerializedWatchHistoryItem[];
+};
+
+export type UpdateFavoritesArgs = {
+  user: Customer;
+  favorites: SerializedFavorite[];
+};
+
+export type GetFavoritesArgs = {
+  user: Customer;
+};
+
+export type GetWatchHistoryArgs = {
+  user: Customer;
+};
+
+export type GetAuthData = () => Promise<AuthData | null>;
 export type Login = PromiseRequest<LoginArgs, AuthResponse>;
 export type Register = PromiseRequest<RegistrationArgs, AuthResponse>;
-export type GetCustomer = EnvironmentServiceRequest<GetCustomerPayload, Customer>;
-export type UpdateCustomer = EnvironmentServiceRequest<UpdateCustomerArgs, Customer>;
-export type GetPublisherConsents = PromiseRequest<Config, GetPublisherConsentsResponse>;
-export type GetCustomerConsents = PromiseRequest<CustomerConsentArgs, GetCustomerConsentsResponse>;
-export type UpdateCustomerConsents = PromiseRequest<UpdateCustomerConsentsArgs, GetCustomerConsentsResponse>;
-export type GetCaptureStatus = EnvironmentServiceRequest<GetCaptureStatusArgs, GetCaptureStatusResponse>;
-export type UpdateCaptureAnswers = EnvironmentServiceRequest<UpdateCaptureStatusArgs, Capture>;
-export type ResetPassword = EnvironmentServiceRequest<ResetPasswordPayload, Record<string, unknown>>;
-export type ChangePassword = EnvironmentServiceRequest<ChangePasswordWithTokenPayload, unknown>;
-export type ChangePasswordWithOldPassword = EnvironmentServiceRequest<ChangePasswordWithOldPasswordPayload, unknown>;
-export type UpdatePersonalShelves = EnvironmentServiceRequest<UpdatePersonalShelvesArgs, Customer | Record<string, unknown>>;
-export type GetLocales = EmptyServiceRequest<LocalesData>;
-export type ExportAccountData = EnvironmentServiceRequest<undefined, CommonAccountResponse>;
+export type GetUser = PromiseRequest<GetUserArgs, GetUserPayload>;
+export type Logout = () => Promise<void>;
+export type UpdateCustomer = PromiseRequest<UpdateCustomerArgs, Customer>;
+export type GetPublisherConsents = PromiseRequest<Config, CustomFormField[]>;
+export type GetCustomerConsents = PromiseRequest<CustomerConsentArgs, CustomerConsent[]>;
+export type UpdateCustomerConsents = PromiseRequest<UpdateCustomerConsentsArgs, CustomerConsent[]>;
+export type GetCaptureStatus = PromiseRequest<GetCaptureStatusArgs, GetCaptureStatusResponse>;
+export type UpdateCaptureAnswers = PromiseRequest<UpdateCaptureStatusArgs, Customer>;
+export type ResetPassword = PromiseRequest<ResetPasswordPayload, void>;
+export type ChangePassword = PromiseRequest<ChangePasswordWithTokenPayload, void>;
+export type ChangePasswordWithOldPassword = PromiseRequest<ChangePasswordWithOldPasswordPayload, void>;
 export type GetSocialURLs = PromiseRequest<GetSocialURLsPayload, SocialURLs[]>;
 export type NotificationsData = PromiseRequest<SubscribeToNotificationsPayload, boolean>;
-export type DeleteAccount = EnvironmentServiceRequest<DeleteAccountPayload, CommonAccountResponse>;
-export type ListProfiles = EnvironmentServiceRequest<undefined, ListProfilesResponse>;
-export type CreateProfile = EnvironmentServiceRequest<ProfilePayload, ProfilesData>;
-export type UpdateProfile = EnvironmentServiceRequest<ProfilePayload, ProfilesData>;
-export type EnterProfile = EnvironmentServiceRequest<EnterProfilePayload, ProfilesData>;
-export type GetProfileDetails = EnvironmentServiceRequest<ProfileDetailsPayload, ProfilesData>;
-export type DeleteProfile = EnvironmentServiceRequest<ProfileDetailsPayload, CommonAccountResponse>;
+export type UpdateWatchHistory = PromiseRequest<UpdateWatchHistoryArgs, void>;
+export type UpdateFavorites = PromiseRequest<UpdateFavoritesArgs, void>;
+export type GetWatchHistory = PromiseRequest<GetWatchHistoryArgs, SerializedWatchHistoryItem[]>;
+export type GetFavorites = PromiseRequest<GetFavoritesArgs, SerializedFavorite[]>;
+export type ExportAccountData = PromiseRequest<undefined, CommonAccountResponse>;
+export type DeleteAccount = PromiseRequest<DeleteAccountPayload, CommonAccountResponse>;
diff --git a/packages/common/types/inplayer.ts b/packages/common/types/inplayer.ts
index 8e8cbf3ea..75b30a0da 100644
--- a/packages/common/types/inplayer.ts
+++ b/packages/common/types/inplayer.ts
@@ -1,5 +1,3 @@
-import type { AxiosRequestConfig } from 'axios';
-
 export type InPlayerAuthData = {
   access_token: string;
   expires?: number;
@@ -13,10 +11,3 @@ export type InPlayerError = {
     };
   };
 };
-
-export type InPlayerResponse<T> = {
-  data: T;
-  status: number;
-  statusText: string;
-  config: AxiosRequestConfig;
-};
diff --git a/packages/common/types/profiles.ts b/packages/common/types/profiles.ts
index 87e35f070..58bcfbedb 100644
--- a/packages/common/types/profiles.ts
+++ b/packages/common/types/profiles.ts
@@ -1,8 +1,42 @@
-import type { ProfilePayload } from './account';
+import type { ProfilesData } from '@inplayer-org/inplayer.js';
 
-export type ProfileFormValues = Omit<ProfilePayload, 'adult'> & { adult: string };
+import type { PromiseRequest } from './service';
+import type { CommonAccountResponse } from './account';
+
+export type Profile = ProfilesData;
+
+export type ProfilePayload = {
+  id?: string;
+  name: string;
+  adult: boolean;
+  avatar_url?: string;
+  pin?: number;
+};
+
+export type EnterProfilePayload = {
+  id: string;
+  pin?: number;
+};
+
+export type ProfileDetailsPayload = {
+  id: string;
+};
+
+export type ListProfilesResponse = {
+  canManageProfiles: boolean;
+  collection: ProfilesData[];
+};
 
 export type ProfileFormSubmitError = {
   code: number;
   message: string;
 };
+
+export type ProfileFormValues = Omit<ProfilePayload, 'adult'> & { adult: string };
+
+export type ListProfiles = PromiseRequest<undefined, ListProfilesResponse>;
+export type CreateProfile = PromiseRequest<ProfilePayload, ProfilesData>;
+export type UpdateProfile = PromiseRequest<ProfilePayload, ProfilesData>;
+export type EnterProfile = PromiseRequest<EnterProfilePayload, ProfilesData>;
+export type GetProfileDetails = PromiseRequest<ProfileDetailsPayload, ProfilesData>;
+export type DeleteProfile = PromiseRequest<ProfileDetailsPayload, CommonAccountResponse>;
diff --git a/packages/hooks-react/src/useProfiles.ts b/packages/hooks-react/src/useProfiles.ts
index 7d1b9d99f..a16cc4222 100644
--- a/packages/hooks-react/src/useProfiles.ts
+++ b/packages/hooks-react/src/useProfiles.ts
@@ -2,15 +2,14 @@ import type { ProfilesData } from '@inplayer-org/inplayer.js';
 import { useMutation, useQuery, type UseMutationOptions, type UseQueryOptions } from 'react-query';
 import { useTranslation } from 'react-i18next';
 import type { GenericFormErrors } from '@jwp/ott-common/types/form';
-import type { CommonAccountResponse, ListProfilesResponse, ProfileDetailsPayload, ProfilePayload } from '@jwp/ott-common/types/account';
-import type { ProfileFormSubmitError, ProfileFormValues } from '@jwp/ott-common/types/profiles';
+import type { CommonAccountResponse } from '@jwp/ott-common/types/account';
+import type { ListProfilesResponse, ProfileDetailsPayload, ProfileFormSubmitError, ProfileFormValues, ProfilePayload } from '@jwp/ott-common/types/profiles';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import ProfileController from '@jwp/ott-common/src/stores/ProfileController';
 import AccountController from '@jwp/ott-common/src/stores/AccountController';
 import { logDev } from '@jwp/ott-common/src/utils/common';
-import type { ServiceResponse } from '@jwp/ott-common/types/service';
 
 export const useSelectProfile = (options?: { onSuccess: () => void; onError: () => void }) => {
   const accountController = getModule(AccountController, false);
@@ -33,12 +32,12 @@ export const useSelectProfile = (options?: { onSuccess: () => void; onError: ()
   });
 };
 
-export const useCreateProfile = (options?: UseMutationOptions<ServiceResponse<ProfilesData> | undefined, unknown, ProfilePayload, unknown>) => {
+export const useCreateProfile = (options?: UseMutationOptions<ProfilesData | undefined, unknown, ProfilePayload, unknown>) => {
   const { query: listProfiles } = useProfiles();
 
   const profileController = getModule(ProfileController, false);
 
-  return useMutation<ServiceResponse<ProfilesData> | undefined, unknown, ProfilePayload, unknown>(async (data) => profileController?.createProfile(data), {
+  return useMutation<ProfilesData | undefined, unknown, ProfilePayload, unknown>(async (data) => profileController?.createProfile(data), {
     ...options,
     onSuccess: (data, variables, context) => {
       listProfiles.refetch();
@@ -48,7 +47,7 @@ export const useCreateProfile = (options?: UseMutationOptions<ServiceResponse<Pr
   });
 };
 
-export const useUpdateProfile = (options?: UseMutationOptions<ServiceResponse<ProfilesData> | undefined, unknown, ProfilePayload, unknown>) => {
+export const useUpdateProfile = (options?: UseMutationOptions<ProfilesData | undefined, unknown, ProfilePayload, unknown>) => {
   const { query: listProfiles } = useProfiles();
 
   const profileController = getModule(ProfileController, false);
@@ -63,22 +62,19 @@ export const useUpdateProfile = (options?: UseMutationOptions<ServiceResponse<Pr
   });
 };
 
-export const useDeleteProfile = (options?: UseMutationOptions<ServiceResponse<CommonAccountResponse> | undefined, unknown, ProfileDetailsPayload, unknown>) => {
+export const useDeleteProfile = (options?: UseMutationOptions<CommonAccountResponse | undefined, unknown, ProfileDetailsPayload, unknown>) => {
   const { query: listProfiles } = useProfiles();
 
   const profileController = getModule(ProfileController, false);
 
-  return useMutation<ServiceResponse<CommonAccountResponse> | undefined, unknown, ProfileDetailsPayload, unknown>(
-    async (id) => profileController?.deleteProfile(id),
-    {
-      ...options,
-      onSuccess: (...args) => {
-        listProfiles.refetch();
+  return useMutation<CommonAccountResponse | undefined, unknown, ProfileDetailsPayload, unknown>(async (id) => profileController?.deleteProfile(id), {
+    ...options,
+    onSuccess: (...args) => {
+      listProfiles.refetch();
 
-        options?.onSuccess?.(...args);
-      },
+      options?.onSuccess?.(...args);
     },
-  );
+  });
 };
 
 export const isProfileFormSubmitError = (e: unknown): e is ProfileFormSubmitError => {
@@ -97,9 +93,7 @@ export const useProfileErrorHandler = () => {
   };
 };
 
-export const useProfiles = (
-  options?: UseQueryOptions<ServiceResponse<ListProfilesResponse> | undefined, unknown, ServiceResponse<ListProfilesResponse> | undefined, string[]>,
-) => {
+export const useProfiles = (options?: UseQueryOptions<ListProfilesResponse | undefined, unknown, ListProfilesResponse | undefined, string[]>) => {
   const { user } = useAccountStore();
   const isLoggedIn = !!user;
 
@@ -114,6 +108,6 @@ export const useProfiles = (
 
   return {
     query,
-    profilesEnabled: !!query.data?.responseData.canManageProfiles,
+    profilesEnabled: !!query.data?.canManageProfiles,
   };
 };
diff --git a/packages/testing/fixtures/customer.json b/packages/testing/fixtures/customer.json
index 7225a2de9..f20d481ff 100644
--- a/packages/testing/fixtures/customer.json
+++ b/packages/testing/fixtures/customer.json
@@ -8,35 +8,23 @@
   "lastLoginDate": "2021-07-26 16:54:38",
   "lastUserIp": "123.123.123.123",
   "externalId": "",
-  "externalData": {
+  "metadata": {
     "history": [
       {
-        "tags": "Movie,Drama",
-        "title": "The Omega Code",
         "mediaid": "YzUqQnrx",
-        "duration": 5968,
         "progress": 0.3710328907847994
       },
       {
-        "tags": "Trailer",
-        "title": "The Omega Code Official Trailer",
         "mediaid": "k6K5ugEC",
-        "duration": 113,
         "progress": 0.448087431693989
       }
     ],
     "favorites": [
       {
-        "tags": "Movie",
-        "title": "Megiddo The Omega Code 2",
-        "mediaid": "2v7rOqOE",
-        "duration": 6341
+        "mediaid": "2v7rOqOE"
       },
       {
-        "tags": "Laurie Crouch,Matt Crouch,Ron Luce,Episode,The State of Faith,seriesId_740sLvW8",
-        "title": "Praise | State Of Faith: China | March 25, 2021",
-        "mediaid": "5cMy3jIp",
-        "duration": 3376
+        "mediaid": "5cMy3jIp"
       }
     ]
   }
diff --git a/packages/ui-react/src/components/Account/Account.test.tsx b/packages/ui-react/src/components/Account/Account.test.tsx
index 54e257d3a..afff78e6b 100644
--- a/packages/ui-react/src/components/Account/Account.test.tsx
+++ b/packages/ui-react/src/components/Account/Account.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Consent } from '@jwp/ott-common/types/account';
+import type { CustomFormField } from '@jwp/ott-common/types/account';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import AccountController from '@jwp/ott-common/src/stores/AccountController';
 import customer from '@jwp/ott-testing/fixtures/customer.json';
@@ -19,7 +19,7 @@ describe('<Account>', () => {
   test('renders and matches snapshot', () => {
     useAccountStore.setState({
       user: customer,
-      publisherConsents: Array.of({ name: 'marketing', label: 'Receive Marketing Emails' } as Consent),
+      publisherConsents: Array.of({ name: 'marketing', label: 'Receive Marketing Emails' } as CustomFormField),
     });
 
     const { container } = renderWithRouter(<Account panelClassName={'panel-class'} panelHeaderClassName={'header-class'} canUpdateEmail={true} />);
diff --git a/packages/ui-react/src/components/Account/Account.tsx b/packages/ui-react/src/components/Account/Account.tsx
index 064bb1c71..4bd3a2507 100644
--- a/packages/ui-react/src/components/Account/Account.tsx
+++ b/packages/ui-react/src/components/Account/Account.tsx
@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 import DOMPurify from 'dompurify';
 import { useMutation } from 'react-query';
-import type { Consent } from '@jwp/ott-common/types/account';
+import type { CustomFormField } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import AccountController from '@jwp/ott-common/src/stores/AccountController';
@@ -75,8 +75,8 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
   const shouldAddPassword = (isSocialLogin && !customer?.metadata?.has_password) || false;
 
   const [termsConsents, nonTermsConsents] = useMemo(() => {
-    const terms: Consent[] = [];
-    const nonTerms: Consent[] = [];
+    const terms: CustomFormField[] = [];
+    const nonTerms: CustomFormField[] = [];
 
     publisherConsents?.forEach((consent) => {
       if (!consent?.type || consent?.type === 'checkbox') {
diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
index 01d4f0bb5..d11a7e668 100644
--- a/packages/ui-react/src/components/Header/Header.tsx
+++ b/packages/ui-react/src/components/Header/Header.tsx
@@ -1,13 +1,13 @@
 import React, { type ReactNode, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import type { Profile } from '@jwp/ott-common/types/account';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
 import type { LanguageDefinition } from '@jwp/ott-common/types/i18n';
 import Menu from '@jwp/ott-theme/assets/icons/menu.svg?react';
 import SearchIcon from '@jwp/ott-theme/assets/icons/search.svg?react';
 import CloseIcon from '@jwp/ott-theme/assets/icons/close.svg?react';
 import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react';
+import type { Profile } from '@jwp/ott-common/types/profiles';
 
 import SearchBar, { type Props as SearchBarProps } from '../SearchBar/SearchBar';
 import Logo from '../Logo/Logo';
diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
index 43500403d..04b93d487 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import DOMPurify from 'dompurify';
 import type { FormErrors } from '@jwp/ott-common/types/form';
-import type { Consent, RegistrationFormData } from '@jwp/ott-common/types/account';
+import type { CustomFormField, RegistrationFormData } from '@jwp/ott-common/types/account';
 import { testId } from '@jwp/ott-common/src/utils/common';
 import useToggle from '@jwp/ott-hooks-react/src/useToggle';
 import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
@@ -34,7 +34,7 @@ type Props = {
   consentErrors: string[];
   submitting: boolean;
   canSubmit: boolean;
-  publisherConsents?: Consent[];
+  publisherConsents?: CustomFormField[];
 };
 
 const RegistrationForm: React.FC<Props> = ({
diff --git a/packages/ui-react/src/components/UserMenu/ProfilesMenu/ProfilesMenu.tsx b/packages/ui-react/src/components/UserMenu/ProfilesMenu/ProfilesMenu.tsx
index 40c7ba4f1..ef7f6402c 100644
--- a/packages/ui-react/src/components/UserMenu/ProfilesMenu/ProfilesMenu.tsx
+++ b/packages/ui-react/src/components/UserMenu/ProfilesMenu/ProfilesMenu.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { UseMutateFunction } from 'react-query';
-import type { Profile } from '@jwp/ott-common/types/account';
 import Plus from '@jwp/ott-theme/assets/icons/plus.svg?react';
+import type { Profile } from '@jwp/ott-common/types/profiles';
 
 import styles from '../UserMenu.module.scss';
 import LoadingOverlay from '../../LoadingOverlay/LoadingOverlay';
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.tsx b/packages/ui-react/src/components/UserMenu/UserMenu.tsx
index b4fcfa582..b21ca739c 100644
--- a/packages/ui-react/src/components/UserMenu/UserMenu.tsx
+++ b/packages/ui-react/src/components/UserMenu/UserMenu.tsx
@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-import type { Profile } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import AccountController from '@jwp/ott-common/src/stores/AccountController';
 import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react';
@@ -11,6 +10,7 @@ import BalanceWallet from '@jwp/ott-theme/assets/icons/balance_wallet.svg?react'
 import Exit from '@jwp/ott-theme/assets/icons/exit.svg?react';
 import { PATH_USER_ACCOUNT, PATH_USER_FAVORITES, PATH_USER_PAYMENTS, PATH_USER_PROFILES_CREATE } from '@jwp/ott-common/src/paths';
 import { userProfileURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import type { Profile } from '@jwp/ott-common/types/profiles';
 
 import MenuButton from '../MenuButton/MenuButton';
 import Icon from '../Icon/Icon';
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
index 87ce42a84..befb43fdf 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
@@ -25,7 +25,7 @@ const Registration = () => {
   const appConfigId = useConfigStore(({ config }) => config.id);
   const { data, isLoading: publisherConsentsLoading } = useQuery(['consents', appConfigId], accountController.getPublisherConsents);
 
-  const publisherConsents = useMemo(() => data?.consents || [], [data]);
+  const publisherConsents = useMemo(() => data || [], [data]);
 
   const queryClient = useQueryClient();
 
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index 417521cea..657da5091 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -50,7 +50,7 @@ const Layout = () => {
   const currentLanguage = useMemo(() => supportedLanguages.find(({ code }) => code === i18n.language), [i18n.language, supportedLanguages]);
 
   const {
-    query: { data: { responseData: { collection: profiles = [] } = {} } = {} },
+    query: { data: { collection: profiles = [] } = {} },
     profilesEnabled,
   } = useProfiles();
 
diff --git a/packages/ui-react/src/containers/Profiles/CreateProfile.tsx b/packages/ui-react/src/containers/Profiles/CreateProfile.tsx
index ffd41f9cb..8e751a934 100644
--- a/packages/ui-react/src/containers/Profiles/CreateProfile.tsx
+++ b/packages/ui-react/src/containers/Profiles/CreateProfile.tsx
@@ -38,7 +38,7 @@ const CreateProfile = () => {
 
   const createProfile = useCreateProfile({
     onSuccess: (res) => {
-      const id = res?.responseData?.id;
+      const id = res?.id;
 
       !!id && navigate(createURL(PATH_USER_PROFILES, { success: 'true', id }));
     },
diff --git a/packages/ui-react/src/containers/Profiles/EditProfile.tsx b/packages/ui-react/src/containers/Profiles/EditProfile.tsx
index 44eb91855..f4e671085 100644
--- a/packages/ui-react/src/containers/Profiles/EditProfile.tsx
+++ b/packages/ui-react/src/containers/Profiles/EditProfile.tsx
@@ -36,12 +36,14 @@ const EditProfile = ({ contained = false }: EditProfileProps) => {
   const breakpoint: Breakpoint = useBreakpoint();
   const isMobile = breakpoint === Breakpoint.xs;
 
-  const { data, isLoading, isFetching } = useQuery(['getProfileDetails'], () => profileController.getProfileDetails({ id: id || '' }), {
+  const {
+    data: profileDetails,
+    isLoading,
+    isFetching,
+  } = useQuery(['getProfileDetails'], () => profileController.getProfileDetails({ id: id || '' }), {
     staleTime: 0,
   });
 
-  const profileDetails = data?.responseData;
-
   const initialValues = useMemo(() => {
     return {
       id: profileDetails?.id || '',
diff --git a/packages/ui-react/src/containers/Profiles/Profiles.tsx b/packages/ui-react/src/containers/Profiles/Profiles.tsx
index 2ef77d7c6..58baf0b06 100644
--- a/packages/ui-react/src/containers/Profiles/Profiles.tsx
+++ b/packages/ui-react/src/containers/Profiles/Profiles.tsx
@@ -3,11 +3,11 @@ import { useNavigate } from 'react-router';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
-import type { Profile } from '@jwp/ott-common/types/account';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { useProfiles, useSelectProfile } from '@jwp/ott-hooks-react/src/useProfiles';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
 import { PATH_USER_PROFILES, PATH_USER_PROFILES_CREATE, PATH_USER_PROFILES_EDIT } from '@jwp/ott-common/src/paths';
+import type { Profile } from '@jwp/ott-common/types/profiles';
 
 import ProfileBox from '../../components/ProfileBox/ProfileBox';
 import AddNewProfile from '../../components/ProfileBox/AddNewProfile';
@@ -40,7 +40,7 @@ const Profiles = ({ editMode = false }: Props) => {
     profilesEnabled,
   } = useProfiles();
 
-  const activeProfiles = data?.responseData.collection.length || 0;
+  const activeProfiles = data?.collection.length || 0;
   const canAddNew = activeProfiles < MAX_PROFILES;
 
   useEffect(() => {
@@ -54,7 +54,7 @@ const Profiles = ({ editMode = false }: Props) => {
     onError: () => navigate(PATH_USER_PROFILES),
   });
 
-  const createdProfileData = data?.responseData.collection.find((profile: Profile) => profile.id === createdProfileId);
+  const createdProfileData = data?.collection.find((profile: Profile) => profile.id === createdProfileId);
 
   if (loading || isLoading || isFetching) return <LoadingOverlay />;
 
@@ -70,7 +70,7 @@ const Profiles = ({ editMode = false }: Props) => {
           <h2 className={styles.heading}>{t('account.who_is_watching')}</h2>
         )}
         <div className={styles.flex}>
-          {data?.responseData.collection?.map((profile: Profile) => (
+          {data?.collection?.map((profile: Profile) => (
             <ProfileBox
               editMode={editMode}
               onEdit={() => navigate(`/u/profiles/edit/${profile.id}`)}
diff --git a/packages/ui-react/src/pages/User/User.test.tsx b/packages/ui-react/src/pages/User/User.test.tsx
index 73c36552a..2c77edfbf 100644
--- a/packages/ui-react/src/pages/User/User.test.tsx
+++ b/packages/ui-react/src/pages/User/User.test.tsx
@@ -27,8 +27,8 @@ const data = {
     country: 'us',
     firstName: 'User',
     lastName: 'Person',
-    regDate: 'Jan 1, 2000',
     lastUserIp: '192.0.0.1',
+    metadata: {},
   },
   subscription: {
     subscriptionId: 90210,
diff --git a/platforms/web/src/containers/AppRoutes/AppRoutes.tsx b/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
index f1c4e106e..c8c851617 100644
--- a/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
+++ b/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
@@ -50,7 +50,7 @@ export default function AppRoutes() {
   const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user }));
 
   // listen to websocket notifications
-  useNotifications(userData.user?.uuid);
+  useNotifications();
 
   if (userData.user && !userData.loading && window.location.href.includes('#token')) {
     return <Navigate to="/" />; // component instead of hook to prevent extra re-renders
diff --git a/platforms/web/src/hooks/useNotifications.ts b/platforms/web/src/hooks/useNotifications.ts
index b75626a5d..69dc695ff 100644
--- a/platforms/web/src/hooks/useNotifications.ts
+++ b/platforms/web/src/hooks/useNotifications.ts
@@ -5,6 +5,7 @@ import AccountController from '@jwp/ott-common/src/stores/AccountController';
 import { queryClient } from '@jwp/ott-ui-react/src/containers/QueryProvider/QueryProvider';
 import { simultaneousLoginWarningKey } from '@jwp/ott-common/src/constants';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
+import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 
 enum NotificationsTypes {
   ACCESS_REVOKED = 'access.revoked',
@@ -18,9 +19,10 @@ enum NotificationsTypes {
   ACCOUNT_LOGOUT = 'account.logout',
 }
 
-export default function useNotifications(uuid: string = '') {
+export default function useNotifications() {
   const navigate = useNavigate();
   const location = useLocation();
+  const uuid = useAccountStore((s) => (typeof s.user?.uuid === 'string' ? s.user.uuid : undefined));
 
   const accountController = getModule(AccountController);
   const { hasNotifications } = accountController?.getFeatures() || {};

From 65032674e0ca75e129e5d6fca35e54fc6b690f3d Mon Sep 17 00:00:00 2001
From: langemike <mikevv@gmail.com>
Date: Mon, 5 Feb 2024 15:29:56 +0100
Subject: [PATCH 019/128] fix(project): show footer when custom footer is
 provided

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>
---
 packages/ui-react/src/containers/Layout/Layout.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index 657da5091..b2ab4513a 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -28,8 +28,6 @@ import Button from '../../components/Button/Button';
 
 import styles from './Layout.module.scss';
 
-const footerText = unicodeToChar(env.APP_FOOTER_TEXT);
-
 const Layout = () => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -43,6 +41,7 @@ const Layout = () => {
   const favoritesEnabled = !!config.features?.favoritesList;
   const { menu, assets, siteName, description, features } = config;
   const metaDescription = description || t('default_description');
+  const footerText = unicodeToChar(env.APP_FOOTER_TEXT);
 
   const profileController = getModule(ProfileController, false);
 

From b299bb752d2dcbf9095d63f3b6e8fdb04ef0cb3a Mon Sep 17 00:00:00 2001
From: Roy Schut <royschut@gmail.com>
Date: Mon, 5 Feb 2024 11:42:43 -0300
Subject: [PATCH 020/128] fix/checkout bugs

---
 .../src/services/integrations/cleeng/CleengCheckoutService.ts | 4 +++-
 packages/common/src/stores/CheckoutController.ts              | 2 --
 packages/common/types/checkout.ts                             | 1 -
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/common/src/services/integrations/cleeng/CleengCheckoutService.ts b/packages/common/src/services/integrations/cleeng/CleengCheckoutService.ts
index 1386611d0..c0dcd4e9c 100644
--- a/packages/common/src/services/integrations/cleeng/CleengCheckoutService.ts
+++ b/packages/common/src/services/integrations/cleeng/CleengCheckoutService.ts
@@ -64,12 +64,14 @@ export default class CleengCheckoutService extends CheckoutService {
 
     if (locales.errors.length > 0) throw new Error(locales.errors[0]);
 
+    const customerIP = locales.responseData.ipAddress;
+
     const createOrderPayload: CreateOrderPayload = {
       offerId: payload.offer.offerId,
       customerId: payload.customerId,
       country: payload.country,
       currency: locales?.responseData?.currency || 'EUR',
-      customerIP: payload.customerIP,
+      customerIP,
       paymentMethodId: payload.paymentMethodId,
     };
 
diff --git a/packages/common/src/stores/CheckoutController.ts b/packages/common/src/stores/CheckoutController.ts
index d3b6132ab..61b64c53a 100644
--- a/packages/common/src/stores/CheckoutController.ts
+++ b/packages/common/src/stores/CheckoutController.ts
@@ -49,13 +49,11 @@ export default class CheckoutController {
   createOrder = async (offer: Offer, paymentMethodId?: number): Promise<void> => {
     const { getAccountInfo } = useAccountStore.getState();
     const { customer } = getAccountInfo();
-    const customerIP = typeof customer?.lastUserIp === 'string' && customer.lastUserIp ? customer.lastUserIp : '';
 
     const createOrderArgs: CreateOrderArgs = {
       offer,
       customerId: customer.id,
       country: customer?.country || '',
-      customerIP,
       paymentMethodId,
     };
 
diff --git a/packages/common/types/checkout.ts b/packages/common/types/checkout.ts
index e86602742..5cd012272 100644
--- a/packages/common/types/checkout.ts
+++ b/packages/common/types/checkout.ts
@@ -209,7 +209,6 @@ export type CreateOrderArgs = {
   offer: Offer;
   customerId: string;
   country: string;
-  customerIP: string;
   paymentMethodId?: number;
   couponCode?: string;
 };

From a2885eb34598b413e4b81f9cdbb542bbbd849a64 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 5 Feb 2024 15:31:09 +0100
Subject: [PATCH 021/128] fix(account): delete account error

---
 .../src/services/integrations/jwp/JWPAccountService.ts   | 9 +++++++--
 .../components/DeleteAccountModal/DeleteAccountModal.tsx | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/common/src/services/integrations/jwp/JWPAccountService.ts b/packages/common/src/services/integrations/jwp/JWPAccountService.ts
index 40718cabc..379dbb19d 100644
--- a/packages/common/src/services/integrations/jwp/JWPAccountService.ts
+++ b/packages/common/src/services/integrations/jwp/JWPAccountService.ts
@@ -361,8 +361,13 @@ export default class JWPAccountService extends AccountService {
 
   logout = async () => {
     try {
-      InPlayer.Notifications.unsubscribe();
-      await InPlayer.Account.signOut();
+      if (InPlayer.Notifications.isSubscribed()) {
+        InPlayer.Notifications.unsubscribe();
+      }
+
+      if (InPlayer.Account.isAuthenticated()) {
+        await InPlayer.Account.signOut();
+      }
     } catch {
       throw new Error('Failed to sign out.');
     }
diff --git a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
index 9d93242bb..053f5d3db 100644
--- a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
+++ b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
@@ -24,8 +24,8 @@ const DeleteAccountModal = () => {
 
   const deleteAccount = useMutation(accountController.deleteAccountData, {
     onSuccess: async () => {
-      await accountController.logout();
       navigate('/');
+      await accountController.logout();
     },
     onError: () => {
       setEnteredPassword('');

From dbecda4575b8bc9ab1634b23006350523f625bf2 Mon Sep 17 00:00:00 2001
From: Roy Schut <royschut@gmail.com>
Date: Thu, 1 Feb 2024 10:24:55 -0300
Subject: [PATCH 022/128] refactor: move controllers and refactor form logic

---
 packages/common/src/FormValidationError.ts    |  11 +
 .../AccountController.ts                      |  62 ++--
 .../{stores => controllers}/AppController.ts  |   4 +-
 .../CheckoutController.ts                     |  78 +++--
 .../EpgController.test.ts                     |   0
 .../{stores => controllers}/EpgController.ts  |   0
 .../FavoritesController.ts                    |   7 +-
 .../ProfileController.ts                      |   3 +-
 .../WatchHistoryController.ts                 |   7 +-
 .../modules/functions/getIntegrationType.ts   |   2 +-
 packages/common/src/modules/register.ts       |  14 +-
 packages/common/types/account.ts              |   6 -
 packages/common/types/checkout.ts             |   7 +
 packages/hooks-react/src/useBootstrapApp.ts   |   2 +-
 packages/hooks-react/src/useCheckAccess.ts    |   4 +-
 packages/hooks-react/src/useCheckout.ts       |  94 ++++++
 .../hooks-react/src/useContentProtection.ts   |   2 +-
 packages/hooks-react/src/useEntitlement.ts    |   2 +-
 packages/hooks-react/src/useForm.ts           |  57 +++-
 .../hooks-react/src/useLiveChannels.test.ts   |   2 +-
 packages/hooks-react/src/useLiveChannels.ts   |   2 +-
 packages/hooks-react/src/useOffers.ts         |   5 +-
 packages/hooks-react/src/useProfiles.ts       |   6 +-
 .../hooks-react/src/useSocialLoginUrls.ts     |   2 +-
 .../hooks-react/src/useSubscriptionChange.ts  |   4 +-
 .../src/useWatchHistoryListener.ts            |   2 +-
 .../src/components/Account/Account.test.tsx   |   2 +-
 .../src/components/Account/Account.tsx        |  11 +-
 .../CheckoutForm/CheckoutForm.test.tsx        |   6 +-
 .../components/CheckoutForm/CheckoutForm.tsx  |  21 +-
 .../__snapshots__/CheckoutForm.test.tsx.snap  | 130 +++++++-
 .../ChooseOfferForm/ChooseOfferForm.tsx       |   3 +-
 .../DeleteAccountModal/DeleteAccountModal.tsx |  18 +-
 .../DeleteAccountPasswordWarning.tsx          |   2 +-
 .../EditCardPaymentForm.tsx                   |  57 ++--
 .../FinalizePayment/FinalizePayment.tsx       |   4 +-
 .../src/components/Header/Header.test.tsx     |   2 +-
 .../NoPaymentRequired.test.tsx                |   2 +-
 .../NoPaymentRequired/NoPaymentRequired.tsx   |   2 +-
 .../src/components/PayPal/PayPal.test.tsx     |   2 +-
 .../ui-react/src/components/PayPal/PayPal.tsx |   2 +-
 .../PaymentForm/PaymentForm.module.scss       |   6 +-
 .../components/PaymentForm/PaymentForm.tsx    | 149 ++++-----
 .../RegistrationForm.test.tsx                 |   1 +
 .../RegistrationForm/RegistrationForm.tsx     |   2 +-
 .../src/components/UserMenu/UserMenu.test.tsx |   2 +-
 .../src/components/UserMenu/UserMenu.tsx      |   2 +-
 .../AccountModal/AccountModal.test.tsx        |   2 +-
 .../AccountModal/forms/CancelSubscription.tsx |   2 +-
 .../AccountModal/forms/Checkout.tsx           | 299 ++++++------------
 .../AccountModal/forms/ChooseOffer.tsx        |  24 +-
 .../AccountModal/forms/EditPassword.tsx       |  17 +-
 .../containers/AccountModal/forms/Login.tsx   |  52 +--
 .../AccountModal/forms/PersonalDetails.tsx    |   7 +-
 .../AccountModal/forms/Registration.tsx       |  91 ++----
 .../AccountModal/forms/RenewSubscription.tsx  |   2 +-
 .../AccountModal/forms/ResetPassword.tsx      |  14 +-
 .../AdyenInitialPayment.tsx                   |  31 +-
 .../AdyenPaymentDetails.tsx                   |   4 +-
 .../src/containers/Cinema/Cinema.test.tsx     |   2 +-
 .../FavoriteButton/FavoriteButton.tsx         |   2 +-
 .../src/containers/Layout/Layout.test.tsx     |   4 +-
 .../ui-react/src/containers/Layout/Layout.tsx |   2 +-
 .../PaymentContainer/PaymentContainer.tsx     |   2 +-
 .../src/containers/Profiles/EditProfile.tsx   |   2 +-
 .../ui-react/src/containers/Profiles/Form.tsx |  26 +-
 .../UpdatePaymentMethod.tsx                   |   4 +-
 .../ui-react/src/pages/User/User.test.tsx     |   9 +-
 packages/ui-react/src/pages/User/User.tsx     |   6 +-
 platforms/web/public/locales/en/error.json    |   4 +-
 platforms/web/public/locales/es/error.json    |   4 +-
 platforms/web/src/hooks/useNotifications.ts   |   2 +-
 72 files changed, 818 insertions(+), 607 deletions(-)
 create mode 100644 packages/common/src/FormValidationError.ts
 rename packages/common/src/{stores => controllers}/AccountController.ts (88%)
 rename packages/common/src/{stores => controllers}/AppController.ts (98%)
 rename packages/common/src/{stores => controllers}/CheckoutController.ts (85%)
 rename packages/common/src/{stores => controllers}/EpgController.test.ts (100%)
 rename packages/common/src/{stores => controllers}/EpgController.ts (100%)
 rename packages/common/src/{stores => controllers}/FavoritesController.ts (93%)
 rename packages/common/src/{stores => controllers}/ProfileController.ts (98%)
 rename packages/common/src/{stores => controllers}/WatchHistoryController.ts (92%)
 create mode 100644 packages/hooks-react/src/useCheckout.ts

diff --git a/packages/common/src/FormValidationError.ts b/packages/common/src/FormValidationError.ts
new file mode 100644
index 000000000..8f7c310c7
--- /dev/null
+++ b/packages/common/src/FormValidationError.ts
@@ -0,0 +1,11 @@
+type FormValidationErrors = Record<string, string[]>;
+
+export class FormValidationError extends Error {
+  public errors: FormValidationErrors;
+
+  constructor(errors: FormValidationErrors) {
+    super(Object.values(errors)[0][0]);
+
+    this.errors = errors;
+  }
+}
diff --git a/packages/common/src/stores/AccountController.ts b/packages/common/src/controllers/AccountController.ts
similarity index 88%
rename from packages/common/src/stores/AccountController.ts
rename to packages/common/src/controllers/AccountController.ts
index acb77d08f..b02b27711 100644
--- a/packages/common/src/stores/AccountController.ts
+++ b/packages/common/src/controllers/AccountController.ts
@@ -20,12 +20,13 @@ import type {
 import { assertFeature, assertModuleMethod, getNamedModule } from '../modules/container';
 import { INTEGRATION_TYPE } from '../modules/types';
 import type { ServiceResponse } from '../../types/service';
+import { useAccountStore } from '../stores/AccountStore';
+import { useConfigStore } from '../stores/ConfigStore';
+import { useProfileStore } from '../stores/ProfileStore';
+import { FormValidationError } from '../FormValidationError';
 
-import { useAccountStore } from './AccountStore';
-import { useConfigStore } from './ConfigStore';
-import { useProfileStore } from './ProfileStore';
-import ProfileController from './ProfileController';
 import WatchHistoryController from './WatchHistoryController';
+import ProfileController from './ProfileController';
 import FavoritesController from './FavoritesController';
 
 @injectable()
@@ -167,13 +168,25 @@ export default class AccountController {
   login = async (email: string, password: string, referrer: string) => {
     useAccountStore.setState({ loading: true });
 
-    const response = await this.accountService.login({ email, password, referrer });
+    try {
+      const response = await this.accountService.login({ email, password, referrer });
+
+      if (!response) throw new Error("Couldn't login");
 
-    if (response) {
       await this.afterLogin(response.user, response.customerConsents);
+      await this.favoritesController?.restoreFavorites().catch(logDev);
+      await this.watchHistoryController?.restoreWatchHistory().catch(logDev);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        if (error.message.toLowerCase().includes('invalid param email')) {
+          throw new FormValidationError({ email: [i18next.t('account:login.wrong_email')] });
+        } else {
+          throw new FormValidationError({ email: [i18next.t('account:login.wrong_combination')] });
+        }
+      }
     }
 
-    useAccountStore.setState({ loading: false });
+    return useAccountStore.setState({ loading: false });
   };
 
   logout = async () => {
@@ -184,18 +197,30 @@ export default class AccountController {
     await this.refreshEntitlements?.();
   };
 
-  register = async (email: string, password: string, referrer: string, consents: CustomerConsent[]) => {
-    useAccountStore.setState({ loading: true });
-    const response = await this.accountService.register({ email, password, consents, referrer });
+  register = async (email: string, password: string, referrer: string, consentsValues: CustomerConsent[]) => {
+    try {
+      const response = await this.accountService.register({ email, password, consents: consentsValues, referrer });
 
-    if (response) {
-      const { user, customerConsents } = response;
-      await this.afterLogin(user, customerConsents);
+      if (response) {
+        const { user, customerConsents } = response;
+        await this.afterLogin(user, customerConsents);
+      }
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        const errorMessage = error.message.toLowerCase();
+
+        if (errorMessage.includes('customer already exists') || errorMessage.includes('account already exists')) {
+          throw new FormValidationError({ form: [i18next.t('account:registration.user_exists')] });
+        } else if (errorMessage.includes('invalid param password')) {
+          throw new FormValidationError({ password: [i18next.t('account:registration.invalid_password')] });
+        } else {
+          // in case the endpoint fails
+          throw new FormValidationError({ password: [i18next.t('account:registration.failed_to_create')] });
+        }
+      }
     }
 
-    // this stores the locally stored favorites and watch history into the users account
-    await this.favoritesController.persistFavorites();
-    await this.watchHistoryController.persistWatchHistory();
+    return;
   };
 
   updateConsents = async (customerConsents: CustomerConsent[]): Promise<ServiceResponse<CustomerConsent[]>> => {
@@ -244,11 +269,10 @@ export default class AccountController {
   getPublisherConsents = async () => {
     const { config } = useConfigStore.getState();
 
+    useAccountStore.setState({ loading: true });
     const consents = await this.accountService.getPublisherConsents(config);
 
-    useAccountStore.setState({ publisherConsents: consents });
-
-    return consents;
+    useAccountStore.setState({ publisherConsents: consents, loading: false });
   };
 
   getCaptureStatus = async (): Promise<GetCaptureStatusResponse> => {
diff --git a/packages/common/src/stores/AppController.ts b/packages/common/src/controllers/AppController.ts
similarity index 98%
rename from packages/common/src/stores/AppController.ts
rename to packages/common/src/controllers/AppController.ts
index 886fcfff3..c4db83831 100644
--- a/packages/common/src/stores/AppController.ts
+++ b/packages/common/src/controllers/AppController.ts
@@ -9,11 +9,11 @@ import StorageService from '../services/StorageService';
 import type { Config } from '../../types/config';
 import type { CalculateIntegrationType } from '../../types/calculate-integration-type';
 import { DETERMINE_INTEGRATION_TYPE } from '../modules/types';
+import { useConfigStore } from '../stores/ConfigStore';
 
-import AccountController from './AccountController';
 import WatchHistoryController from './WatchHistoryController';
 import FavoritesController from './FavoritesController';
-import { useConfigStore } from './ConfigStore';
+import AccountController from './AccountController';
 
 @injectable()
 export default class AppController {
diff --git a/packages/common/src/stores/CheckoutController.ts b/packages/common/src/controllers/CheckoutController.ts
similarity index 85%
rename from packages/common/src/stores/CheckoutController.ts
rename to packages/common/src/controllers/CheckoutController.ts
index 61b64c53a..66c58ccac 100644
--- a/packages/common/src/stores/CheckoutController.ts
+++ b/packages/common/src/controllers/CheckoutController.ts
@@ -1,4 +1,5 @@
 import { inject, injectable } from 'inversify';
+import i18next from 'i18next';
 
 import type {
   AddAdyenPaymentDetailsResponse,
@@ -12,8 +13,8 @@ import type {
   InitialAdyenPayment,
   Offer,
   Order,
+  Payment,
   PaymentMethod,
-  PaymentWithPayPalResponse,
   SwitchOffer,
   UpdateOrderPayload,
 } from '../../types/checkout';
@@ -24,9 +25,9 @@ import { assertModuleMethod, getNamedModule } from '../modules/container';
 import { GET_CUSTOMER_IP, INTEGRATION_TYPE } from '../modules/types';
 import type { GetCustomerIP } from '../../types/get-customer-ip';
 import AccountService from '../services/integrations/AccountService';
-
-import { useCheckoutStore } from './CheckoutStore';
-import { useAccountStore } from './AccountStore';
+import { useCheckoutStore } from '../stores/CheckoutStore';
+import { useAccountStore } from '../stores/AccountStore';
+import { FormValidationError } from '../FormValidationError';
 
 @injectable()
 export default class CheckoutController {
@@ -46,10 +47,13 @@ export default class CheckoutController {
     return this.accountService.svodOfferIds;
   };
 
-  createOrder = async (offer: Offer, paymentMethodId?: number): Promise<void> => {
+  createOrder = async (offer: Offer): Promise<void> => {
     const { getAccountInfo } = useAccountStore.getState();
     const { customer } = getAccountInfo();
 
+    const paymentMethods = await this.getPaymentMethods();
+    const paymentMethodId = paymentMethods[0]?.id;
+
     const createOrderArgs: CreateOrderArgs = {
       offer,
       customerId: customer.id,
@@ -75,19 +79,30 @@ export default class CheckoutController {
       couponCode,
     };
 
-    const response = await this.checkoutService.updateOrder(updateOrderPayload);
-    if (response.errors.length > 0) {
-      // clear the order when the order doesn't exist on the server
-      if (response.errors[0].includes(`Order with ${order.id} not found`)) {
-        useCheckoutStore.getState().setOrder(null);
+    try {
+      const response = await this.checkoutService.updateOrder(updateOrderPayload);
+
+      if (response.errors.length > 0) {
+        // clear the order when the order doesn't exist on the server
+        if (response.errors[0].includes(`Order with ${order.id} not found`)) {
+          useCheckoutStore.getState().setOrder(null);
+        }
+
+        throw new FormValidationError({ order: [response.errors[0]] });
       }
 
-      throw new Error(response.errors[0]);
-    }
+      if (response.responseData?.order) {
+        useCheckoutStore.getState().setOrder(response.responseData?.order);
+      }
+    } catch (error: unknown) {
+      if (error instanceof FormValidationError) {
+        throw error;
+      }
 
-    if (response.responseData?.order) {
-      useCheckoutStore.getState().setOrder(response.responseData?.order);
+      throw new FormValidationError({ couponCode: [i18next.t('account:checkout.coupon_not_valid')] });
     }
+
+    return;
   };
 
   getPaymentMethods = async (): Promise<PaymentMethod[]> => {
@@ -104,7 +119,8 @@ export default class CheckoutController {
     return response.responseData?.paymentMethods;
   };
 
-  paymentWithoutDetails = async (): Promise<unknown> => {
+  //
+  paymentWithoutDetails = async (): Promise<Payment> => {
     const { order } = useCheckoutStore.getState();
 
     if (!order) throw new Error('No order created');
@@ -117,7 +133,7 @@ export default class CheckoutController {
     return response.responseData;
   };
 
-  directPostCardPayment = async (cardPaymentPayload: CardPaymentData, referrer: string, returnUrl: string): Promise<unknown> => {
+  directPostCardPayment = async ({ cardPaymentPayload, referrer, returnUrl }: { cardPaymentPayload: CardPaymentData; referrer: string; returnUrl: string }) => {
     const { order } = useCheckoutStore.getState();
 
     if (!order) throw new Error('No order created');
@@ -138,7 +154,9 @@ export default class CheckoutController {
       returnUrl: returnUrl,
     });
 
-    if (response.errors.length > 0) throw new Error(response.errors[0]);
+    if (response.errors.length > 0) {
+      throw new Error(response.errors[0]);
+    }
 
     return response.responseData;
   };
@@ -173,18 +191,26 @@ export default class CheckoutController {
       paymentData,
     });
 
-    if (response.errors.length > 0) throw new Error(response.errors[0]);
+    if (response.errors.length > 0) {
+      throw new Error(response.errors[0]);
+    }
 
     return response.responseData;
   };
 
-  paypalPayment = async (
-    successUrl: string,
-    waitingUrl: string,
-    cancelUrl: string,
-    errorUrl: string,
-    couponCode: string = '',
-  ): Promise<PaymentWithPayPalResponse> => {
+  paypalPayment = async ({
+    successUrl,
+    waitingUrl,
+    cancelUrl,
+    errorUrl,
+    couponCode = '',
+  }: {
+    successUrl: string;
+    waitingUrl: string;
+    cancelUrl: string;
+    errorUrl: string;
+    couponCode: string;
+  }): Promise<string> => {
     const { order } = useCheckoutStore.getState();
 
     if (!order) throw new Error('No order created');
@@ -200,7 +226,7 @@ export default class CheckoutController {
 
     if (response.errors.length > 0) throw new Error(response.errors[0]);
 
-    return response.responseData;
+    return response.responseData.redirectUrl;
   };
 
   getSubscriptionSwitches = async (): Promise<unknown> => {
diff --git a/packages/common/src/stores/EpgController.test.ts b/packages/common/src/controllers/EpgController.test.ts
similarity index 100%
rename from packages/common/src/stores/EpgController.test.ts
rename to packages/common/src/controllers/EpgController.test.ts
diff --git a/packages/common/src/stores/EpgController.ts b/packages/common/src/controllers/EpgController.ts
similarity index 100%
rename from packages/common/src/stores/EpgController.ts
rename to packages/common/src/controllers/EpgController.ts
diff --git a/packages/common/src/stores/FavoritesController.ts b/packages/common/src/controllers/FavoritesController.ts
similarity index 93%
rename from packages/common/src/stores/FavoritesController.ts
rename to packages/common/src/controllers/FavoritesController.ts
index bbe425007..8f8639adb 100644
--- a/packages/common/src/stores/FavoritesController.ts
+++ b/packages/common/src/controllers/FavoritesController.ts
@@ -3,10 +3,9 @@ import { injectable } from 'inversify';
 
 import FavoriteService from '../services/FavoriteService';
 import type { PlaylistItem } from '../../types/playlist';
-
-import { useAccountStore } from './AccountStore';
-import { useFavoritesStore } from './FavoritesStore';
-import { useConfigStore } from './ConfigStore';
+import { useAccountStore } from '../stores/AccountStore';
+import { useFavoritesStore } from '../stores/FavoritesStore';
+import { useConfigStore } from '../stores/ConfigStore';
 
 @injectable()
 export default class FavoritesController {
diff --git a/packages/common/src/stores/ProfileController.ts b/packages/common/src/controllers/ProfileController.ts
similarity index 98%
rename from packages/common/src/stores/ProfileController.ts
rename to packages/common/src/controllers/ProfileController.ts
index 95fba83aa..c73948433 100644
--- a/packages/common/src/stores/ProfileController.ts
+++ b/packages/common/src/controllers/ProfileController.ts
@@ -8,8 +8,7 @@ import { assertModuleMethod, getNamedModule } from '../modules/container';
 import StorageService from '../services/StorageService';
 import { INTEGRATION_TYPE } from '../modules/types';
 import type { EnterProfilePayload, ProfileDetailsPayload, ProfilePayload } from '../../types/profiles';
-
-import { useProfileStore } from './ProfileStore';
+import { useProfileStore } from '../stores/ProfileStore';
 
 const PERSIST_PROFILE = 'profile';
 
diff --git a/packages/common/src/stores/WatchHistoryController.ts b/packages/common/src/controllers/WatchHistoryController.ts
similarity index 92%
rename from packages/common/src/stores/WatchHistoryController.ts
rename to packages/common/src/controllers/WatchHistoryController.ts
index a62a63145..708914ec1 100644
--- a/packages/common/src/stores/WatchHistoryController.ts
+++ b/packages/common/src/controllers/WatchHistoryController.ts
@@ -3,10 +3,9 @@ import { injectable } from 'inversify';
 import WatchHistoryService from '../services/WatchHistoryService';
 import type { PlaylistItem } from '../../types/playlist';
 import type { WatchHistoryItem } from '../../types/watchHistory';
-
-import { useAccountStore } from './AccountStore';
-import { useConfigStore } from './ConfigStore';
-import { useWatchHistoryStore } from './WatchHistoryStore';
+import { useAccountStore } from '../stores/AccountStore';
+import { useConfigStore } from '../stores/ConfigStore';
+import { useWatchHistoryStore } from '../stores/WatchHistoryStore';
 
 @injectable()
 export default class WatchHistoryController {
diff --git a/packages/common/src/modules/functions/getIntegrationType.ts b/packages/common/src/modules/functions/getIntegrationType.ts
index d387b6b04..8b3b88678 100644
--- a/packages/common/src/modules/functions/getIntegrationType.ts
+++ b/packages/common/src/modules/functions/getIntegrationType.ts
@@ -1,6 +1,6 @@
 import type { interfaces } from 'inversify';
 
-import AppController from '../../stores/AppController';
+import AppController from '../../controllers/AppController';
 
 /**
  * This function is used to get the integration type from the AppController and is mainly used for getting named
diff --git a/packages/common/src/modules/register.ts b/packages/common/src/modules/register.ts
index 8eb29b055..e26533416 100644
--- a/packages/common/src/modules/register.ts
+++ b/packages/common/src/modules/register.ts
@@ -13,13 +13,13 @@ import FavoriteService from '../services/FavoriteService';
 import ConfigService from '../services/ConfigService';
 import SettingsService from '../services/SettingsService';
 
-import WatchHistoryController from '../stores/WatchHistoryController';
-import CheckoutController from '../stores/CheckoutController';
-import AccountController from '../stores/AccountController';
-import ProfileController from '../stores/ProfileController';
-import FavoritesController from '../stores/FavoritesController';
-import AppController from '../stores/AppController';
-import EpgController from '../stores/EpgController';
+import WatchHistoryController from '../controllers/WatchHistoryController';
+import CheckoutController from '../controllers/CheckoutController';
+import AccountController from '../controllers/AccountController';
+import ProfileController from '../controllers/ProfileController';
+import FavoritesController from '../controllers/FavoritesController';
+import AppController from '../controllers/AppController';
+import EpgController from '../controllers/EpgController';
 
 // Epg services
 import EpgService from '../services/EpgService';
diff --git a/packages/common/types/account.ts b/packages/common/types/account.ts
index a01c28179..603467fce 100644
--- a/packages/common/types/account.ts
+++ b/packages/common/types/account.ts
@@ -67,12 +67,6 @@ export type EditPasswordFormData = {
   resetPasswordToken?: string;
 };
 
-export type OfferType = 'svod' | 'tvod';
-
-export type ChooseOfferFormData = {
-  offerId?: string;
-};
-
 export type GetUserArgs = {
   config: Config;
 };
diff --git a/packages/common/types/checkout.ts b/packages/common/types/checkout.ts
index 5cd012272..f70db624a 100644
--- a/packages/common/types/checkout.ts
+++ b/packages/common/types/checkout.ts
@@ -44,6 +44,12 @@ export type Offer = {
   planSwitchEnabled?: boolean;
 };
 
+export type OfferType = 'svod' | 'tvod';
+
+export type ChooseOfferFormData = {
+  offerId?: string;
+};
+
 export type OrderOffer = {
   title: string;
   description: string | null;
@@ -90,6 +96,7 @@ export type PaymentMethod = {
   id: number;
   methodName: 'card' | 'paypal';
   provider?: 'stripe' | 'adyen';
+  paymentGateway?: 'adyen' | 'paypal'; // @todo: merge with provider
   logoUrl: string;
 };
 
diff --git a/packages/hooks-react/src/useBootstrapApp.ts b/packages/hooks-react/src/useBootstrapApp.ts
index 491e03f19..a542ea2ad 100644
--- a/packages/hooks-react/src/useBootstrapApp.ts
+++ b/packages/hooks-react/src/useBootstrapApp.ts
@@ -2,7 +2,7 @@ import { useQuery, useQueryClient } from 'react-query';
 import type { Config } from '@jwp/ott-common/types/config';
 import type { Settings } from '@jwp/ott-common/types/settings';
 import { getModule } from '@jwp/ott-common/src/modules/container';
-import AppController from '@jwp/ott-common/src/stores/AppController';
+import AppController from '@jwp/ott-common/src/controllers/AppController';
 import type { AppError } from '@jwp/ott-common/src/utils/error';
 import { CACHE_TIME, STALE_TIME } from '@jwp/ott-common/src/constants';
 
diff --git a/packages/hooks-react/src/useCheckAccess.ts b/packages/hooks-react/src/useCheckAccess.ts
index 1eeea8452..1926bb15a 100644
--- a/packages/hooks-react/src/useCheckAccess.ts
+++ b/packages/hooks-react/src/useCheckAccess.ts
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getModule } from '@jwp/ott-common/src/modules/container';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
-import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
 
 type IntervalCheckAccessPayload = {
   interval?: number;
diff --git a/packages/hooks-react/src/useCheckout.ts b/packages/hooks-react/src/useCheckout.ts
new file mode 100644
index 000000000..e493e3f56
--- /dev/null
+++ b/packages/hooks-react/src/useCheckout.ts
@@ -0,0 +1,94 @@
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
+import type { FormValidationError } from '@jwp/ott-common/src/FormValidationError';
+import { getModule } from '@jwp/ott-common/src/modules/container';
+import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
+import { isSVODOffer } from '@jwp/ott-common/src/utils/subscription';
+import type { CardPaymentData, Offer, OfferType, Payment } from '@jwp/ott-common/types/checkout';
+import { useEffect } from 'react';
+import { useMutation } from 'react-query';
+
+type Props = {
+  onUpdateOrderSuccess?: () => void;
+  onSubmitPaymentWithoutDetailsSuccess: () => void;
+  onSubmitPaypalPaymentSuccess: (redirectUrl: string) => void;
+  onSubmitStripePaymentSuccess: () => void;
+};
+
+const useCheckout = ({ onUpdateOrderSuccess, onSubmitPaymentWithoutDetailsSuccess, onSubmitPaypalPaymentSuccess, onSubmitStripePaymentSuccess }: Props) => {
+  const accountController = getModule(AccountController);
+  const checkoutController = getModule(CheckoutController);
+
+  const { order, offer, paymentMethods, setOrder } = useCheckoutStore(({ order, offer, paymentMethods, setOrder }) => ({
+    order,
+    offer,
+    paymentMethods,
+    setOrder,
+  }));
+
+  const offerType: OfferType = offer && !isSVODOffer(offer) ? 'tvod' : 'svod';
+
+  const createOrder = useMutation<void, FormValidationError, { offer: Offer }>({
+    mutationKey: ['createOrder'],
+    mutationFn: async ({ offer }) => !!offer && checkoutController.createOrder(offer),
+  });
+
+  const updateOrder = useMutation<void, string, { paymentMethodId: number; couponCode: string }>({
+    mutationKey: ['updateOrder'],
+    mutationFn: async ({ paymentMethodId, couponCode }) => {
+      if (!order || !paymentMethodId) return;
+
+      return await checkoutController.updateOrder(order, paymentMethodId, couponCode);
+    },
+    onSuccess: onUpdateOrderSuccess,
+  });
+
+  const submitPaymentWithoutDetails = useMutation<Payment, Error>({
+    mutationKey: ['submitPaymentWithoutDetails'],
+    mutationFn: checkoutController.paymentWithoutDetails,
+    onSuccess: async () => {
+      await accountController.reloadSubscriptions({ delay: 1000 });
+      onSubmitPaymentWithoutDetailsSuccess();
+    },
+  });
+
+  const submitPaymentPaypal = useMutation<string, Error, { successUrl: string; waitingUrl: string; cancelUrl: string; errorUrl: string; couponCode: string }>({
+    mutationKey: ['submitPaymentPaypal'],
+    mutationFn: checkoutController.paypalPayment,
+    onSuccess: onSubmitPaypalPaymentSuccess,
+  });
+
+  const submitPaymentStripe = useMutation<boolean, Error, { cardPaymentPayload: CardPaymentData; referrer: string; returnUrl: string }>({
+    mutationKey: ['submitPaymentStripe'],
+    mutationFn: checkoutController.directPostCardPayment,
+    onSuccess: onSubmitStripePaymentSuccess,
+  });
+
+  useEffect(() => {
+    if (offer && !order && !createOrder.isLoading) {
+      createOrder.mutate({ offer });
+    }
+  }, [offer, order, createOrder]);
+
+  // Clear the order when unmounted
+  useEffect(() => {
+    return () => setOrder(null);
+  }, [setOrder]);
+
+  const isSubmitting =
+    createOrder.isLoading || updateOrder.isLoading || submitPaymentWithoutDetails.isLoading || submitPaymentPaypal.isLoading || submitPaymentStripe.isLoading;
+
+  return {
+    offer,
+    offerType,
+    paymentMethods,
+    order,
+    isSubmitting,
+    updateOrder,
+    submitPaymentWithoutDetails,
+    submitPaymentPaypal,
+    submitPaymentStripe,
+  };
+};
+
+export default useCheckout;
diff --git a/packages/hooks-react/src/useContentProtection.ts b/packages/hooks-react/src/useContentProtection.ts
index 8a8e040fb..a3598af93 100644
--- a/packages/hooks-react/src/useContentProtection.ts
+++ b/packages/hooks-react/src/useContentProtection.ts
@@ -5,7 +5,7 @@ import type { EntitlementType } from '@jwp/ott-common/types/entitlement';
 import GenericEntitlementService from '@jwp/ott-common/src/services/GenericEntitlementService';
 import JWPEntitlementService from '@jwp/ott-common/src/services/JWPEntitlementService';
 import { getModule } from '@jwp/ott-common/src/modules/container';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { isTruthyCustomParamValue } from '@jwp/ott-common/src/utils/common';
 
diff --git a/packages/hooks-react/src/useEntitlement.ts b/packages/hooks-react/src/useEntitlement.ts
index 9a5e5f3ed..caef0a950 100644
--- a/packages/hooks-react/src/useEntitlement.ts
+++ b/packages/hooks-react/src/useEntitlement.ts
@@ -5,7 +5,7 @@ import type { MediaOffer } from '@jwp/ott-common/types/media';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
+import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
 import { isLocked } from '@jwp/ott-common/src/utils/entitlements';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 
diff --git a/packages/hooks-react/src/useForm.ts b/packages/hooks-react/src/useForm.ts
index 01ef3e373..40890e13b 100644
--- a/packages/hooks-react/src/useForm.ts
+++ b/packages/hooks-react/src/useForm.ts
@@ -1,6 +1,8 @@
 import { useCallback, useState } from 'react';
-import { type AnySchema, ValidationError } from 'yup';
+import { type AnySchema, ValidationError, SchemaOf } from 'yup';
 import type { FormErrors, GenericFormValues, UseFormBlurHandler, UseFormChangeHandler, UseFormSubmitHandler } from '@jwp/ott-common/types/form';
+import { FormValidationError } from '@jwp/ott-common/src/FormValidationError';
+import { useTranslation } from 'react-i18next';
 
 export type UseFormReturnValue<T> = {
   values: T;
@@ -9,7 +11,7 @@ export type UseFormReturnValue<T> = {
   handleChange: UseFormChangeHandler;
   handleBlur: UseFormBlurHandler;
   handleSubmit: UseFormSubmitHandler;
-  setValue: (key: keyof T, value: string) => void;
+  setValue: (key: keyof T, value: T[keyof T]) => void;
   setErrors: (errors: FormErrors<T>) => void;
   setSubmitting: (submitting: boolean) => void;
   reset: () => void;
@@ -24,12 +26,22 @@ type UseFormMethods<T> = {
 
 export type UseFormOnSubmitHandler<T> = (values: T, formMethods: UseFormMethods<T>) => void;
 
-export default function useForm<T extends GenericFormValues>(
-  initialValues: T,
-  onSubmit: UseFormOnSubmitHandler<T>,
-  validationSchema?: AnySchema,
-  validateOnBlur: boolean = false,
-): UseFormReturnValue<T> {
+export default function useForm<T extends GenericFormValues>({
+  initialValues,
+  validationSchema,
+  validateOnBlur = false,
+  onSubmit,
+  onSubmitSuccess,
+  onSubmitError,
+}: {
+  initialValues: T;
+  validationSchema?: SchemaOf<T>;
+  validateOnBlur?: boolean;
+  onSubmit: UseFormOnSubmitHandler<T>;
+  onSubmitSuccess?: (values: T) => void;
+  onSubmitError?: ({ error, resetValue }: { error: unknown; resetValue: (key: keyof T) => void }) => void;
+}): UseFormReturnValue<T> {
+  const { t } = useTranslation('error');
   const [touched, setTouched] = useState<Record<keyof T, boolean>>(
     Object.fromEntries((Object.keys(initialValues) as Array<keyof T>).map((key) => [key, false])) as Record<keyof T, boolean>,
   );
@@ -109,7 +121,7 @@ export default function useForm<T extends GenericFormValues>(
     return false;
   };
 
-  const handleSubmit: UseFormSubmitHandler = (event) => {
+  const handleSubmit: UseFormSubmitHandler = async (event) => {
     event.preventDefault();
 
     if (!onSubmit || submitting) return;
@@ -125,7 +137,32 @@ export default function useForm<T extends GenericFormValues>(
     // start submitting
     setSubmitting(true);
 
-    onSubmit(values, { setValue, setErrors, setSubmitting, validate });
+    try {
+      await onSubmit(values, { setValue, setErrors, setSubmitting, validate });
+      onSubmitSuccess?.(values);
+    } catch (error: unknown) {
+      const newErrors: Record<string, string> = {};
+
+      if (error instanceof FormValidationError) {
+        Object.entries(error.errors).forEach(([key, [value]]) => {
+          if (key && value && !newErrors[key]) {
+            newErrors[key] = value;
+          }
+        });
+      } else if (error instanceof Error) {
+        newErrors.form = error.message;
+      } else {
+        newErrors.form = t('unknown_error');
+      }
+      setErrors(newErrors as FormErrors<T>);
+
+      onSubmitError?.({
+        error,
+        resetValue: (key: keyof T) => setValue(key, ''),
+      });
+    }
+
+    setSubmitting(false);
   };
 
   return { values, errors, handleChange, handleBlur, handleSubmit, submitting, setValue, setErrors, setSubmitting, reset };
diff --git a/packages/hooks-react/src/useLiveChannels.test.ts b/packages/hooks-react/src/useLiveChannels.test.ts
index e7faa7fec..e53b04f23 100644
--- a/packages/hooks-react/src/useLiveChannels.test.ts
+++ b/packages/hooks-react/src/useLiveChannels.test.ts
@@ -6,7 +6,7 @@ import livePlaylistFixture from '@jwp/ott-testing/fixtures/livePlaylist.json';
 import epgChannelsFixture from '@jwp/ott-testing/fixtures/epgChannels.json';
 import epgChannelsUpdateFixture from '@jwp/ott-testing/fixtures/epgChannelsUpdate.json';
 import { mockService } from '@jwp/ott-common/test/mockService';
-import EpgController from '@jwp/ott-common/src/stores/EpgController';
+import EpgController from '@jwp/ott-common/src/controllers/EpgController';
 
 import { queryClientWrapper, waitForWithFakeTimers } from './testUtils';
 import useLiveChannels from './useLiveChannels';
diff --git a/packages/hooks-react/src/useLiveChannels.ts b/packages/hooks-react/src/useLiveChannels.ts
index 0268375fc..6257a24de 100644
--- a/packages/hooks-react/src/useLiveChannels.ts
+++ b/packages/hooks-react/src/useLiveChannels.ts
@@ -5,7 +5,7 @@ import type { EpgChannel, EpgProgram } from '@jwp/ott-common/types/epg';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { getLiveProgram, programIsLive } from '@jwp/ott-common/src/utils/epg';
 import { LIVE_CHANNELS_REFETCH_INTERVAL } from '@jwp/ott-common/src/constants';
-import EpgController from '@jwp/ott-common/src/stores/EpgController';
+import EpgController from '@jwp/ott-common/src/controllers/EpgController';
 
 /**
  * This hook fetches the schedules for the given list of playlist items and manages the current channel and program.
diff --git a/packages/hooks-react/src/useOffers.ts b/packages/hooks-react/src/useOffers.ts
index 2b29385fa..3b3edb8c3 100644
--- a/packages/hooks-react/src/useOffers.ts
+++ b/packages/hooks-react/src/useOffers.ts
@@ -2,11 +2,10 @@ import { useQuery } from 'react-query';
 import { useMemo, useState } from 'react';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 import { mergeOfferIds } from '@jwp/ott-common/src/utils/offers';
-import type { OfferType } from '@jwp/ott-common/types/account';
-import type { Offer } from '@jwp/ott-common/types/checkout';
+import type { Offer, OfferType } from '@jwp/ott-common/types/checkout';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
-import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
+import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
 import { isSVODOffer } from '@jwp/ott-common/src/utils/subscription';
 
 const useOffers = () => {
diff --git a/packages/hooks-react/src/useProfiles.ts b/packages/hooks-react/src/useProfiles.ts
index a16cc4222..aef289e6f 100644
--- a/packages/hooks-react/src/useProfiles.ts
+++ b/packages/hooks-react/src/useProfiles.ts
@@ -7,8 +7,8 @@ import type { ListProfilesResponse, ProfileDetailsPayload, ProfileFormSubmitErro
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import ProfileController from '@jwp/ott-common/src/stores/ProfileController';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import ProfileController from '@jwp/ott-common/src/controllers/ProfileController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { logDev } from '@jwp/ott-common/src/utils/common';
 
 export const useSelectProfile = (options?: { onSuccess: () => void; onError: () => void }) => {
@@ -101,7 +101,7 @@ export const useProfiles = (options?: UseQueryOptions<ListProfilesResponse | und
 
   const profilesEnabled = profileController.isEnabled();
 
-  const query = useQuery(['listProfiles'], () => profileController.listProfiles(), {
+  const query = useQuery(['listProfiles', user?.id || ''], () => profileController.listProfiles(), {
     ...options,
     enabled: isLoggedIn && profilesEnabled,
   });
diff --git a/packages/hooks-react/src/useSocialLoginUrls.ts b/packages/hooks-react/src/useSocialLoginUrls.ts
index 1843415d7..5c3d59a02 100644
--- a/packages/hooks-react/src/useSocialLoginUrls.ts
+++ b/packages/hooks-react/src/useSocialLoginUrls.ts
@@ -1,6 +1,6 @@
 import { useQuery } from 'react-query';
 import { getModule } from '@jwp/ott-common/src/modules/container';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 
 export type SocialLoginURLs = Record<string, string>;
 
diff --git a/packages/hooks-react/src/useSubscriptionChange.ts b/packages/hooks-react/src/useSubscriptionChange.ts
index e648d2315..772397ef4 100644
--- a/packages/hooks-react/src/useSubscriptionChange.ts
+++ b/packages/hooks-react/src/useSubscriptionChange.ts
@@ -2,8 +2,8 @@ import { useMutation } from 'react-query';
 import type { Customer } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
-import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
 
 export const useSubscriptionChange = (
   isUpgradeOffer: boolean,
diff --git a/packages/hooks-react/src/useWatchHistoryListener.ts b/packages/hooks-react/src/useWatchHistoryListener.ts
index 759e87f01..ef2d15e9c 100644
--- a/packages/hooks-react/src/useWatchHistoryListener.ts
+++ b/packages/hooks-react/src/useWatchHistoryListener.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
-import WatchHistoryController from '@jwp/ott-common/src/stores/WatchHistoryController';
+import WatchHistoryController from '@jwp/ott-common/src/controllers/WatchHistoryController';
 
 import useEventCallback from './useEventCallback';
 
diff --git a/packages/ui-react/src/components/Account/Account.test.tsx b/packages/ui-react/src/components/Account/Account.test.tsx
index afff78e6b..801927a48 100644
--- a/packages/ui-react/src/components/Account/Account.test.tsx
+++ b/packages/ui-react/src/components/Account/Account.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { CustomFormField } from '@jwp/ott-common/types/account';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import customer from '@jwp/ott-testing/fixtures/customer.json';
 import { mockService } from '@jwp/ott-common/test/mockService';
 import { DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
diff --git a/packages/ui-react/src/components/Account/Account.tsx b/packages/ui-react/src/components/Account/Account.tsx
index 4bd3a2507..ed715b695 100644
--- a/packages/ui-react/src/components/Account/Account.tsx
+++ b/packages/ui-react/src/components/Account/Account.tsx
@@ -7,7 +7,7 @@ import { useMutation } from 'react-query';
 import type { CustomFormField } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { isTruthy, isTruthyCustomParamValue, logDev, testId } from '@jwp/ott-common/src/utils/common';
 import { formatConsents, formatConsentsFromValues, formatConsentsToRegisterFields, formatConsentValues } from '@jwp/ott-common/src/utils/collection';
 import useToggle from '@jwp/ott-hooks-react/src/useToggle';
@@ -74,6 +74,15 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
   const isSocialLogin = (registerSource && registerSource !== 'inplayer') || false;
   const shouldAddPassword = (isSocialLogin && !customer?.metadata?.has_password) || false;
 
+  // load consents (move to `useConsents` hook?)
+  useEffect(() => {
+    if (!publisherConsents) {
+      accountController.getPublisherConsents();
+
+      return;
+    }
+  }, [accountController, publisherConsents]);
+
   const [termsConsents, nonTermsConsents] = useMemo(() => {
     const terms: CustomFormField[] = [];
     const nonTerms: CustomFormField[] = [];
diff --git a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.test.tsx b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.test.tsx
index 88060d339..2f6c1d366 100644
--- a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.test.tsx
+++ b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.test.tsx
@@ -4,6 +4,8 @@ import type { Offer, Order } from '@jwp/ott-common/types/checkout';
 import offer from '@jwp/ott-testing/fixtures/monthlyOffer.json';
 import order from '@jwp/ott-testing/fixtures/order.json';
 
+import PaymentForm from '../PaymentForm/PaymentForm';
+
 import CheckoutForm from './CheckoutForm';
 
 describe('<CheckoutForm>', () => {
@@ -25,7 +27,9 @@ describe('<CheckoutForm>', () => {
         offer={offer as Offer}
         offerType={'svod'}
         submitting={false}
-      />,
+      >
+        <PaymentForm onPaymentFormSubmit={vi.fn()} />
+      </CheckoutForm>,
     );
 
     expect(container).toMatchSnapshot();
diff --git a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx
index e69ad5385..63a2013b0 100644
--- a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx
+++ b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-import type { OfferType } from '@jwp/ott-common/types/account';
-import type { Offer, Order, PaymentMethod } from '@jwp/ott-common/types/checkout';
+import type { Offer, OfferType, Order, PaymentMethod } from '@jwp/ott-common/types/checkout';
 import { formatPrice } from '@jwp/ott-common/src/utils/formatting';
 import Close from '@jwp/ott-theme/assets/icons/close.svg?react';
 import PayPal from '@jwp/ott-theme/assets/icons/paypal.svg?react';
@@ -18,7 +17,7 @@ import Icon from '../Icon/Icon';
 import styles from './CheckoutForm.module.scss';
 
 type Props = {
-  paymentMethodId?: number;
+  paymentMethodId?: string;
   onBackButtonClick: () => void;
   paymentMethods?: PaymentMethod[];
   onPaymentMethodChange: React.ChangeEventHandler<HTMLInputElement>;
@@ -34,7 +33,7 @@ type Props = {
   order: Order;
   offer: Offer;
   offerType: OfferType;
-  renderPaymentMethod?: () => JSX.Element | null;
+  children: ReactNode;
   submitting: boolean;
 };
 
@@ -55,7 +54,7 @@ const CheckoutForm: React.FC<Props> = ({
   onCloseCouponFormClick,
   onCouponFormSubmit,
   onRedeemCouponButtonClick,
-  renderPaymentMethod,
+  children,
   submitting,
 }) => {
   const { t } = useTranslation('account');
@@ -181,10 +180,10 @@ const CheckoutForm: React.FC<Props> = ({
               <input
                 className={styles.radio}
                 type="radio"
-                name="paymentMethod"
+                name="paymentMethodId"
                 value={cardPaymentMethod.id}
                 id="card"
-                checked={paymentMethodId === cardPaymentMethod.id}
+                checked={paymentMethodId === cardPaymentMethod.id.toString()}
                 onChange={onPaymentMethodChange}
               />
               <label className={styles.paymentMethodLabel} htmlFor="card">
@@ -197,10 +196,10 @@ const CheckoutForm: React.FC<Props> = ({
               <input
                 className={styles.radio}
                 type="radio"
-                name="paymentMethod"
+                name="paymentMethodId"
                 value={paypalPaymentMethod.id}
                 id="paypal"
-                checked={paymentMethodId === paypalPaymentMethod.id}
+                checked={paymentMethodId === paypalPaymentMethod.id.toString()}
                 onChange={onPaymentMethodChange}
               />
               <label className={styles.paymentMethodLabel} htmlFor="paypal">
@@ -210,7 +209,7 @@ const CheckoutForm: React.FC<Props> = ({
           ) : null}
         </div>
       ) : null}
-      <div className={styles.paymentDetails}>{renderPaymentMethod ? renderPaymentMethod() : null}</div>
+      {children ? <div>{children}</div> : null}
       {submitting && <LoadingOverlay transparentBackground inline />}
     </div>
   );
diff --git a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
index ca44a7a17..e145b77b0 100644
--- a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
+++ b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
@@ -91,7 +91,135 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
     <div
       class="_paymentMethods_abc9bc"
     />
-    <div />
+    <div>
+      <div
+        class="_paymentForm_65d7c4"
+      >
+        <form
+          data-testid="payment_form"
+          novalidate=""
+        >
+          <div>
+            <div
+              class="_textField_e16c1b"
+            >
+              <label
+                class="_label_e16c1b"
+                for="text-field_1235_cardholdername"
+              >
+                checkout.card_holder_name
+              </label>
+              <div
+                class="_container_e16c1b"
+              >
+                <input
+                  class="_input_e16c1b"
+                  id="text-field_1235_cardholdername"
+                  name="cardholderName"
+                  placeholder="checkout.credit_card_name"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div>
+            <div
+              class="_textField_e16c1b directPostCreditCardNumber"
+            >
+              <label
+                class="_label_e16c1b"
+                for="text-field_1235_cardnumber"
+              >
+                Card number
+              </label>
+              <div
+                class="_container_e16c1b"
+              >
+                <input
+                  class="_input_e16c1b"
+                  id="text-field_1235_cardnumber"
+                  name="cardNumber"
+                  pattern="\\\\d*"
+                  placeholder="1234 5678 9012 3456"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="_columns_65d7c4"
+          >
+            <div>
+              <div
+                class="_textField_e16c1b directPostExpiryDate"
+              >
+                <label
+                  class="_label_e16c1b"
+                  for="text-field_1235_cardexpiry"
+                >
+                  Expiry date
+                </label>
+                <div
+                  class="_container_e16c1b"
+                >
+                  <input
+                    class="_input_e16c1b"
+                    id="text-field_1235_cardexpiry"
+                    name="cardExpiry"
+                    pattern="\\\\d*"
+                    placeholder="MM/YY"
+                    required=""
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+            <div>
+              <div
+                class="_textField_e16c1b directPostSecurityCode"
+              >
+                <label
+                  class="_label_e16c1b"
+                  for="text-field_1235_cardcvc"
+                >
+                  payment.security_code
+                </label>
+                <div
+                  class="_container_e16c1b"
+                >
+                  <input
+                    aria-label="payment.security_code"
+                    class="_input_e16c1b"
+                    id="text-field_1235_cardcvc"
+                    name="cardCVC"
+                    pattern="\\\\d*"
+                    placeholder="###"
+                    required=""
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <button
+              class="_button_f8f296 _primary_f8f296 _fullWidth_f8f296 _large_f8f296"
+              type="submit"
+            >
+              <span>
+                checkout.continue
+              </span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx
index 5ae067d4b..fc97c6058 100644
--- a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx
+++ b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-import type { ChooseOfferFormData, OfferType } from '@jwp/ott-common/types/account';
 import type { FormErrors } from '@jwp/ott-common/types/form';
-import type { Offer } from '@jwp/ott-common/types/checkout';
+import type { Offer, ChooseOfferFormData, OfferType } from '@jwp/ott-common/types/checkout';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { getOfferPrice, isSVODOffer } from '@jwp/ott-common/src/utils/subscription';
 import { testId } from '@jwp/ott-common/src/utils/common';
diff --git a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
index 053f5d3db..4025919df 100644
--- a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
+++ b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
@@ -1,11 +1,11 @@
 import { useTranslation } from 'react-i18next';
-import { object, type SchemaOf, string } from 'yup';
+import { object, string } from 'yup';
 import { useLocation, useNavigate } from 'react-router';
 import { useCallback, useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
 import type { DeleteAccountFormData } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
 
 import PasswordField from '../PasswordField/PasswordField';
@@ -35,24 +35,20 @@ const DeleteAccountModal = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const validationSchema: SchemaOf<DeleteAccountFormData> = object().shape({
-    password: string().required(t('login.field_required')),
-  });
-  const initialValues: DeleteAccountFormData = { password: '' };
   const {
     handleSubmit,
     handleChange,
     values,
     errors,
     reset: resetForm,
-  } = useForm(
-    initialValues,
-    () => {
+  } = useForm<DeleteAccountFormData>({
+    initialValues: { password: '' },
+    validationSchema: object().shape({ password: string().required(t('login.field_required')) }),
+    onSubmit: (values) => {
       setEnteredPassword(values.password);
       navigate(modalURLFromLocation(location, 'delete-account-confirmation'), { replace: true });
     },
-    validationSchema,
-  );
+  });
 
   useEffect(() => {
     if (!location.search.includes('delete-account-confirmation') && enteredPassword) {
diff --git a/packages/ui-react/src/components/DeleteAccountPasswordWarning/DeleteAccountPasswordWarning.tsx b/packages/ui-react/src/components/DeleteAccountPasswordWarning/DeleteAccountPasswordWarning.tsx
index 9dad15769..3d1d2bebd 100644
--- a/packages/ui-react/src/components/DeleteAccountPasswordWarning/DeleteAccountPasswordWarning.tsx
+++ b/packages/ui-react/src/components/DeleteAccountPasswordWarning/DeleteAccountPasswordWarning.tsx
@@ -3,7 +3,7 @@ import { useLocation, useNavigate } from 'react-router';
 import { useCallback, useState } from 'react';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 
 import Button from '../Button/Button';
 import FormFeedback from '../FormFeedback/FormFeedback';
diff --git a/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx b/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
index aa0561687..66e422b83 100644
--- a/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
+++ b/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
@@ -6,7 +6,7 @@ import { useMutation } from 'react-query';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
 
 import Button from '../Button/Button';
@@ -17,6 +17,15 @@ import TextField from '../TextField/TextField';
 
 import styles from './EditCardPaymentForm.module.scss';
 
+type EditCardPaymentFormData = {
+  cardholderName: string;
+  cardNumber: string;
+  cardExpiry: string;
+  cardCVC: string;
+  cardExpMonth: string;
+  cardExpYear: string;
+};
+
 type Props = {
   onCancel: () => void;
   setUpdatingCardDetails: (e: boolean) => void;
@@ -28,9 +37,33 @@ const EditCardPaymentForm: React.FC<Props> = ({ onCancel, setUpdatingCardDetails
   const { t } = useTranslation('account');
   const updateCard = useMutation(accountController.updateCardDetails);
   const { activePayment } = useAccountStore(({ activePayment }) => ({ activePayment }), shallow);
-  const paymentData = useForm(
-    { cardholderName: '', cardNumber: '', cardExpiry: '', cardCVC: '', cardExpMonth: '', cardExpYear: '' },
-    async () => {
+
+  const paymentData = useForm<EditCardPaymentFormData>({
+    initialValues: { cardholderName: '', cardNumber: '', cardExpiry: '', cardCVC: '', cardExpMonth: '', cardExpYear: '' },
+    validationSchema: object().shape({
+      cardholderName: string().required(),
+      cardNumber: string()
+        .required()
+        .test('card number validation', t('checkout.invalid_card_number'), (value) => {
+          return Payment.fns.validateCardNumber(value as string);
+        }),
+      cardExpiry: string()
+        .required()
+        .test('card expiry validation', t('checkout.invalid_card_expiry'), (value) => {
+          return Payment.fns.validateCardExpiry(value as string);
+        }),
+      cardCVC: string()
+        .required()
+        .test('cvc validation', t('checkout.invalid_cvc_number'), (value) => {
+          const issuer = Payment.fns.cardType(paymentData?.values?.cardNumber);
+
+          return Payment.fns.validateCardCVC(value as string, issuer);
+        }),
+      cardExpMonth: string().required(),
+      cardExpYear: string().required(),
+    }),
+    validateOnBlur: true,
+    onSubmit: async () => {
       setUpdatingCardDetails(true);
       updateCard.mutate(
         {
@@ -46,21 +79,7 @@ const EditCardPaymentForm: React.FC<Props> = ({ onCancel, setUpdatingCardDetails
         },
       );
     },
-    object().shape({
-      cardNumber: string().test('card number validation', t('checkout.invalid_card_number'), (value) => {
-        return Payment.fns.validateCardNumber(value as string);
-      }),
-      cardExpiry: string().test('card expiry validation', t('checkout.invalid_card_expiry'), (value) => {
-        return Payment.fns.validateCardExpiry(value as string);
-      }),
-      cardCVC: string().test('cvc validation', t('checkout.invalid_cvc_number'), (value) => {
-        const issuer = Payment.fns.cardType(paymentData?.values?.cardNumber);
-        return Payment.fns.validateCardCVC(value as string, issuer);
-      }),
-    }),
-
-    true,
-  );
+  });
 
   useEffect(() => {
     if (paymentData.values.cardExpiry) {
diff --git a/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx b/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
index 59e1318e1..18c7f2118 100644
--- a/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
+++ b/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
@@ -4,8 +4,8 @@ import { useLocation, useNavigate } from 'react-router';
 import { useSearchParams } from 'react-router-dom';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
-import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
 import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
 import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
 
diff --git a/packages/ui-react/src/components/Header/Header.test.tsx b/packages/ui-react/src/components/Header/Header.test.tsx
index 0f0d40d08..82046af6e 100644
--- a/packages/ui-react/src/components/Header/Header.test.tsx
+++ b/packages/ui-react/src/components/Header/Header.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { mockService } from '@jwp/ott-common/test/mockService';
 import { DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
 
diff --git a/packages/ui-react/src/components/NoPaymentRequired/NoPaymentRequired.test.tsx b/packages/ui-react/src/components/NoPaymentRequired/NoPaymentRequired.test.tsx
index a8322402d..44a50daf7 100644
--- a/packages/ui-react/src/components/NoPaymentRequired/NoPaymentRequired.test.tsx
+++ b/packages/ui-react/src/components/NoPaymentRequired/NoPaymentRequired.test.tsx
@@ -5,7 +5,7 @@ import NoPaymentRequired from './NoPaymentRequired';
 
 describe('<NoPaymentRequired>', () => {
   test('renders and matches snapshot', () => {
-    const { container } = render(<NoPaymentRequired />);
+    const { container } = render(<NoPaymentRequired error={null} onSubmit={vi.fn()} />);
 
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/ui-react/src/components/NoPaymentRequired/NoPaymentRequired.tsx b/packages/ui-react/src/components/NoPaymentRequired/NoPaymentRequired.tsx
index be6686422..a0eaf2ada 100644
--- a/packages/ui-react/src/components/NoPaymentRequired/NoPaymentRequired.tsx
+++ b/packages/ui-react/src/components/NoPaymentRequired/NoPaymentRequired.tsx
@@ -8,7 +8,7 @@ import styles from './NoPaymentRequired.module.scss';
 
 type Props = {
   onSubmit?: () => void;
-  error?: string;
+  error: string | null;
 };
 
 const NoPaymentRequired: React.FC<Props> = ({ onSubmit, error }) => {
diff --git a/packages/ui-react/src/components/PayPal/PayPal.test.tsx b/packages/ui-react/src/components/PayPal/PayPal.test.tsx
index fc93514b7..ac2b12f2b 100644
--- a/packages/ui-react/src/components/PayPal/PayPal.test.tsx
+++ b/packages/ui-react/src/components/PayPal/PayPal.test.tsx
@@ -5,7 +5,7 @@ import PayPal from './PayPal';
 
 describe('<PayPal>', () => {
   test('renders and matches snapshot', () => {
-    const { container } = render(<PayPal />);
+    const { container } = render(<PayPal onSubmit={vi.fn()} error={null} />);
 
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/ui-react/src/components/PayPal/PayPal.tsx b/packages/ui-react/src/components/PayPal/PayPal.tsx
index ee88d4036..3b99a234a 100644
--- a/packages/ui-react/src/components/PayPal/PayPal.tsx
+++ b/packages/ui-react/src/components/PayPal/PayPal.tsx
@@ -8,7 +8,7 @@ import styles from './PayPal.module.scss';
 
 type Props = {
   onSubmit?: () => void;
-  error?: string;
+  error: string | null;
 };
 
 const PayPal: React.FC<Props> = ({ onSubmit, error }) => {
diff --git a/packages/ui-react/src/components/PaymentForm/PaymentForm.module.scss b/packages/ui-react/src/components/PaymentForm/PaymentForm.module.scss
index 6c31fcad8..11e772bfb 100644
--- a/packages/ui-react/src/components/PaymentForm/PaymentForm.module.scss
+++ b/packages/ui-react/src/components/PaymentForm/PaymentForm.module.scss
@@ -8,4 +8,8 @@
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin-bottom: 15px;
-}
\ No newline at end of file
+}
+
+.formError { 
+    margin-top: 5px;
+}
diff --git a/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx b/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
index 310aac00f..d92043ff6 100644
--- a/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
+++ b/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
@@ -1,121 +1,108 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
 import Payment from 'payment';
 import { object, string } from 'yup';
-import { getModule } from '@jwp/ott-common/src/modules/container';
-import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
-import useCheckAccess from '@jwp/ott-hooks-react/src/useCheckAccess';
-import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import { testId } from '@jwp/ott-common/src/utils/common';
 
 import Button from '../Button/Button';
 import CreditCardCVCField from '../CreditCardCVCField/CreditCardCVCField';
 import CreditCardExpiryField from '../CreditCardExpiryField/CreditCardExpiryField';
 import CreditCardNumberField from '../CreditCardNumberField/CreditCardNumberField';
 import TextField from '../TextField/TextField';
-import { modalURLFromLocation } from '../../utils/location';
+import FormFeedback from '../FormFeedback/FormFeedback';
 
 import styles from './PaymentForm.module.scss';
 
-type Props = {
-  couponCode?: string;
-  setUpdatingOrder: (value: boolean) => void;
+export type PaymentFormData = {
+  cardholderName: string;
+  cardNumber: string;
+  cardExpiry: string;
+  cardCVC: string;
+  cardExpMonth: string;
+  cardExpYear: string;
 };
 
-const PaymentForm: React.FC<Props> = ({ couponCode, setUpdatingOrder }) => {
-  const checkoutController = getModule(CheckoutController);
+type Props = {
+  onPaymentFormSubmit: (values: PaymentFormData) => void;
+};
 
+const PaymentForm: React.FC<Props> = ({ onPaymentFormSubmit }) => {
   const { t } = useTranslation('account');
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { intervalCheckAccess } = useCheckAccess();
 
-  const paymentData = useForm(
-    { cardholderName: '', cardNumber: '', cardExpiry: '', cardCVC: '', cardExpMonth: '', cardExpYear: '' },
-    async () => {
-      setUpdatingOrder(true);
+  const { values, errors, setValue, handleChange, handleBlur, handleSubmit } = useForm<PaymentFormData>({
+    initialValues: { cardholderName: '', cardNumber: '', cardExpiry: '', cardCVC: '', cardExpMonth: '', cardExpYear: '' },
+    validationSchema: object()
+      .required()
+      .shape({
+        cardholderName: string().required(),
+        cardNumber: string()
+          .required()
+          .test('card number validation', t('checkout.invalid_card_number'), (value) => Payment.fns.validateCardNumber(value as string)),
+        cardExpiry: string()
+          .required()
+          .test('card expiry validation', t('checkout.invalid_card_expiry'), (value) => Payment.fns.validateCardExpiry(value as string)),
+        cardCVC: string()
+          .required()
+          .test('cvc validation', t('checkout.invalid_cvc_number'), (value, context) => {
+            const issuer = Payment.fns.cardType(context.parent.cardNumber);
 
-      const referrer = window.location.href;
-      const returnUrl = createURL(window.location.href, { u: 'waiting-for-payment' });
-
-      await checkoutController.directPostCardPayment({ couponCode, ...paymentData.values }, referrer, returnUrl);
-
-      intervalCheckAccess({
-        interval: 15000,
-        callback: (hasAccess) => hasAccess && navigate(modalURLFromLocation(location, 'welcome')),
-      });
-    },
-    object().shape({
-      cardNumber: string().test('card number validation', t('checkout.invalid_card_number'), (value) => {
-        return Payment.fns.validateCardNumber(value as string);
-      }),
-      cardExpiry: string().test('card expiry validation', t('checkout.invalid_card_expiry'), (value) => {
-        return Payment.fns.validateCardExpiry(value as string);
+            return Payment.fns.validateCardCVC(value as string, issuer);
+          }),
+        cardExpMonth: string().required(),
+        cardExpYear: string().required(),
       }),
-      cardCVC: string().test('cvc validation', t('checkout.invalid_cvc_number'), (value) => {
-        const issuer = Payment.fns.cardType(paymentData?.values?.cardNumber);
-        return Payment.fns.validateCardCVC(value as string, issuer);
-      }),
-    }),
-    true,
-  );
+    validateOnBlur: true,
+    onSubmit: onPaymentFormSubmit,
+  });
 
   useEffect(() => {
-    if (paymentData.values.cardExpiry) {
-      const expiry = Payment.fns.cardExpiryVal(paymentData.values.cardExpiry);
+    if (values.cardExpiry) {
+      const expiry = Payment.fns.cardExpiryVal(values.cardExpiry);
       if (expiry.month) {
-        paymentData.setValue('cardExpMonth', expiry.month.toString());
+        setValue('cardExpMonth', expiry.month.toString());
       }
       if (expiry.year) {
-        paymentData.setValue('cardExpYear', expiry.year.toString());
+        setValue('cardExpYear', expiry.year.toString());
       }
     }
     //eslint-disable-next-line
-  }, [paymentData.values.cardExpiry]);
+  }, [values.cardExpiry]);
 
   return (
     <div className={styles.paymentForm}>
-      <div>
-        <TextField
-          label={t('checkout.card_holder_name')}
-          name="cardholderName"
-          value={paymentData?.values?.cardholderName}
-          onChange={paymentData?.handleChange}
-          onBlur={paymentData?.handleBlur}
-          placeholder={t('checkout.credit_card_name')}
-          required
-        />
-      </div>
-      <div>
-        <CreditCardNumberField
-          value={paymentData?.values?.cardNumber?.toString()}
-          error={paymentData?.errors?.cardNumber}
-          onBlur={paymentData?.handleBlur}
-          onChange={paymentData?.handleChange}
-        />
-      </div>
-      <div className={styles.columns}>
+      <form onSubmit={handleSubmit} data-testid={testId('payment_form')} noValidate>
+        {errors.form ? (
+          <div className={styles.formError}>
+            <FormFeedback variant="error">{errors.form}</FormFeedback>
+          </div>
+        ) : null}
         <div>
-          <CreditCardExpiryField
-            value={paymentData?.values?.cardExpiry}
-            onBlur={paymentData?.handleBlur}
-            onChange={paymentData?.handleChange}
-            error={paymentData?.errors?.cardExpiry}
+          <TextField
+            label={t('checkout.card_holder_name')}
+            name="cardholderName"
+            value={values.cardholderName}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            placeholder={t('checkout.credit_card_name')}
+            required
           />
         </div>
         <div>
-          <CreditCardCVCField
-            value={paymentData?.values?.cardCVC}
-            onBlur={paymentData?.handleBlur}
-            onChange={paymentData?.handleChange}
-            error={paymentData?.errors?.cardCVC}
-          />
+          <CreditCardNumberField value={values.cardNumber.toString()} error={errors.cardNumber} onBlur={handleBlur} onChange={handleChange} />
+        </div>
+        <div className={styles.columns}>
+          <div>
+            <CreditCardExpiryField value={values.cardExpiry} onBlur={handleBlur} onChange={handleChange} error={errors.cardExpiry} />
+          </div>
+          <div>
+            <CreditCardCVCField value={values.cardCVC} onBlur={handleBlur} onChange={handleChange} error={errors.cardCVC} />
+          </div>
+        </div>
+        <div>
+          <Button label={t('checkout.continue')} variant="contained" color="primary" type="submit" size="large" fullWidth />
         </div>
-      </div>
-      <div>
-        <Button label={t('checkout.continue')} variant="contained" color="primary" onClick={paymentData.handleSubmit as () => void} size="large" fullWidth />
-      </div>
+      </form>
     </div>
   );
 };
diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
index 782ea6d69..c52ba9dfc 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
@@ -8,6 +8,7 @@ describe('<RegistrationForm>', () => {
   test('renders and matches snapshot', () => {
     const { container } = renderWithRouter(
       <RegistrationForm
+        publisherConsents={null}
         onSubmit={vi.fn()}
         onChange={vi.fn()}
         onBlur={vi.fn()}
diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
index 04b93d487..0cc735d0e 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
@@ -34,7 +34,7 @@ type Props = {
   consentErrors: string[];
   submitting: boolean;
   canSubmit: boolean;
-  publisherConsents?: CustomFormField[];
+  publisherConsents: CustomFormField[] | null;
 };
 
 const RegistrationForm: React.FC<Props> = ({
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.test.tsx b/packages/ui-react/src/components/UserMenu/UserMenu.test.tsx
index 6eedb656e..8ac1fcc28 100644
--- a/packages/ui-react/src/components/UserMenu/UserMenu.test.tsx
+++ b/packages/ui-react/src/components/UserMenu/UserMenu.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { mockService } from '@jwp/ott-common/test/mockService';
 import { DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
 
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.tsx b/packages/ui-react/src/components/UserMenu/UserMenu.tsx
index b21ca739c..d0879f27e 100644
--- a/packages/ui-react/src/components/UserMenu/UserMenu.tsx
+++ b/packages/ui-react/src/components/UserMenu/UserMenu.tsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import { getModule } from '@jwp/ott-common/src/modules/container';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react';
 import Favorite from '@jwp/ott-theme/assets/icons/favorite.svg?react';
 import BalanceWallet from '@jwp/ott-theme/assets/icons/balance_wallet.svg?react';
diff --git a/packages/ui-react/src/containers/AccountModal/AccountModal.test.tsx b/packages/ui-react/src/containers/AccountModal/AccountModal.test.tsx
index 17a6f5118..0fc8c32ea 100644
--- a/packages/ui-react/src/containers/AccountModal/AccountModal.test.tsx
+++ b/packages/ui-react/src/containers/AccountModal/AccountModal.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { mockService } from '@jwp/ott-common/test/mockService';
 import { DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
 
diff --git a/packages/ui-react/src/containers/AccountModal/forms/CancelSubscription.tsx b/packages/ui-react/src/containers/AccountModal/forms/CancelSubscription.tsx
index 67830f104..626ba2482 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/CancelSubscription.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/CancelSubscription.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { formatLocalizedDate } from '@jwp/ott-common/src/utils/formatting';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
index 95a818886..525f6dfd6 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
@@ -1,218 +1,88 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router';
-import { useTranslation } from 'react-i18next';
-import { shallow } from '@jwp/ott-common/src/utils/compare';
-import { getModule } from '@jwp/ott-common/src/modules/container';
-import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
-import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
-import { isSVODOffer } from '@jwp/ott-common/src/utils/subscription';
+import useCheckout from '@jwp/ott-hooks-react/src/useCheckout';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import { FormValidationError } from '@jwp/ott-common/src/FormValidationError';
 
 import CheckoutForm from '../../../components/CheckoutForm/CheckoutForm';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
 import PayPal from '../../../components/PayPal/PayPal';
 import NoPaymentRequired from '../../../components/NoPaymentRequired/NoPaymentRequired';
-import PaymentForm from '../../../components/PaymentForm/PaymentForm';
+import PaymentForm, { PaymentFormData } from '../../../components/PaymentForm/PaymentForm';
 import AdyenInitialPayment from '../../AdyenInitialPayment/AdyenInitialPayment';
 
 const Checkout = () => {
-  const accountController = getModule(AccountController);
-  const checkoutController = getModule(CheckoutController);
-
   const location = useLocation();
-  const { t } = useTranslation('account');
   const navigate = useNavigate();
-  const [paymentError, setPaymentError] = useState<string | undefined>(undefined);
-  const [updatingOrder, setUpdatingOrder] = useState(false);
-  const [couponFormOpen, setCouponFormOpen] = useState(false);
-  const [couponCodeApplied, setCouponCodeApplied] = useState(false);
-  const [paymentMethodId, setPaymentMethodId] = useState<number | undefined>(undefined);
-
-  const { order, offer, paymentMethods, setOrder } = useCheckoutStore(
-    ({ order, offer, paymentMethods, setOrder }) => ({
-      order,
-      offer,
-      paymentMethods,
-      setOrder,
-    }),
-    shallow,
-  );
+  const [adyenUpdating, setAdyenUpdating] = useState(false); // @todo: integrate AdyenInitialPayment into useCheckout
 
-  const offerType = offer && !isSVODOffer(offer) ? 'tvod' : 'svod';
-
-  const paymentSuccessUrl = useMemo(() => {
-    return modalURLFromLocation(location, offerType === 'svod' ? 'welcome' : null);
-  }, [location, offerType]);
-
-  const couponCodeForm = useForm({ couponCode: '' }, async (values, { setSubmitting, setErrors }) => {
-    setUpdatingOrder(true);
-    setCouponCodeApplied(false);
-
-    if (values.couponCode && order) {
-      try {
-        await checkoutController.updateOrder(order, paymentMethodId, values.couponCode);
-        setCouponCodeApplied(true);
-      } catch (error: unknown) {
-        if (error instanceof Error) {
-          if (error.message.includes(`Order with id ${order.id} not found`)) {
-            navigate(modalURLFromLocation(location, 'choose-offer'), { replace: true });
-          } else {
-            setErrors({ couponCode: t('checkout.coupon_not_valid') });
-          }
-        }
+  const [couponFormOpen, setCouponFormOpen] = useState(false);
+  const [showCouponCodeSuccess, setShowCouponCodeSuccess] = useState(false);
+
+  const chooseOfferUrl = modalURLFromLocation(location, 'choose-offer');
+  const welcomeUrl = modalURLFromLocation(location, 'welcome');
+  const closeModalUrl = modalURLFromLocation(location, null);
+
+  const backButtonClickHandler = () => navigate(chooseOfferUrl);
+
+  const { offer, offerType, paymentMethods, order, isSubmitting, updateOrder, submitPaymentWithoutDetails, submitPaymentPaypal, submitPaymentStripe } =
+    useCheckout({
+      onUpdateOrderSuccess: () => setShowCouponCodeSuccess(true),
+      onSubmitPaymentWithoutDetailsSuccess: () => navigate(offerType === 'svod' ? welcomeUrl : closeModalUrl, { replace: true }),
+      onSubmitPaypalPaymentSuccess: (paypalUrl: string) => {
+        window.location.href = paypalUrl;
+      },
+      onSubmitStripePaymentSuccess: () => navigate(modalURLFromLocation(location, 'waiting-for-payment'), { replace: true }),
+    });
+
+  const {
+    values: { couponCode, paymentMethodId },
+    setValue,
+    submitting: couponFormSubmitting,
+    errors,
+    handleChange,
+    handleSubmit,
+  } = useForm({
+    initialValues: { couponCode: '', paymentMethodId: paymentMethods?.[0]?.id?.toString() || '' },
+    onSubmit: async ({ couponCode, paymentMethodId }) => {
+      setShowCouponCodeSuccess(false);
+
+      return await updateOrder.mutateAsync({ couponCode, paymentMethodId: parseInt(paymentMethodId) });
+    },
+    onSubmitSuccess: ({ couponCode }): void => setShowCouponCodeSuccess(!!couponCode),
+    onSubmitError: ({ error }) => {
+      if (error instanceof FormValidationError && error.errors.order?.includes(`not found`)) {
+        navigate(modalURLFromLocation(location, 'choose-offer'), { replace: true });
       }
-    }
-
-    setUpdatingOrder(false);
-    setSubmitting(false);
+    },
   });
 
-  const handleCouponFormSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
-    e.preventDefault();
-    setUpdatingOrder(true);
-    setCouponCodeApplied(false);
-    couponCodeForm.setErrors({ couponCode: undefined });
-    if (couponCodeForm.values.couponCode && order) {
-      try {
-        await checkoutController.updateOrder(order, paymentMethodId, couponCodeForm.values.couponCode);
-        setCouponCodeApplied(true);
-      } catch (error: unknown) {
-        if (error instanceof Error) {
-          if (error.message.includes(`Order with id ${order.id} not found`)) {
-            navigate(modalURLFromLocation(location, 'choose-offer'), { replace: true });
-          } else {
-            couponCodeForm.setErrors({ couponCode: t('checkout.coupon_not_valid') });
-          }
-        }
-      }
-    }
+  const handlePaymentMethodChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    handleChange(event);
 
-    setUpdatingOrder(false);
-    couponCodeForm.setSubmitting(false);
+    // Always send payment method to backend
+    updateOrder.mutateAsync({ couponCode, paymentMethodId: parseInt(event.target.value) });
   };
 
   useEffect(() => {
-    async function createNewOrder() {
-      if (offer) {
-        setUpdatingOrder(true);
-        setCouponCodeApplied(false);
-        const methods = await checkoutController.getPaymentMethods();
-
-        setPaymentMethodId(methods[0]?.id);
-
-        await checkoutController.createOrder(offer, methods[0]?.id);
-
-        setUpdatingOrder(false);
-      }
-    }
-
     if (!offer) {
-      return navigate(modalURLFromLocation(location, 'choose-offer'), { replace: true });
+      return navigate(chooseOfferUrl, { replace: true });
     }
+  }, [navigate, chooseOfferUrl, offer]);
 
-    // noinspection JSIgnoredPromiseFromCall
-    createNewOrder();
-  }, [location, navigate, offer, checkoutController]);
-
-  // clear the order after closing the checkout modal
+  // Pre-select first payment method
   useEffect(() => {
-    return () => setOrder(null);
-  }, [setOrder]);
-
-  const backButtonClickHandler = () => {
-    navigate(modalURLFromLocation(location, 'choose-offer'));
-  };
-
-  const handlePaymentMethodChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const toPaymentMethodId = parseInt(event.target.value);
-
-    setPaymentMethodId(toPaymentMethodId);
-    setPaymentError(undefined);
-
-    if (order && toPaymentMethodId) {
-      setUpdatingOrder(true);
-      setCouponCodeApplied(false);
-      checkoutController
-        .updateOrder(order, toPaymentMethodId, couponCodeForm.values.couponCode)
-        .catch((error: Error) => {
-          if (error.message.includes(`Order with id ${order.id}} not found`)) {
-            navigate(modalURLFromLocation(location, 'choose-offer'));
-          }
-        })
-        .finally(() => setUpdatingOrder(false));
-    }
-  };
-
-  const handleNoPaymentRequiredSubmit = async () => {
-    try {
-      setUpdatingOrder(true);
-      setPaymentError(undefined);
-      await checkoutController.paymentWithoutDetails();
-      await accountController.reloadSubscriptions({ delay: 1000 });
-      navigate(paymentSuccessUrl, { replace: true });
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        setPaymentError(error.message);
-      }
-    }
-
-    setUpdatingOrder(false);
-  };
-
-  const handlePayPalSubmit = async () => {
-    try {
-      setPaymentError(undefined);
-      setUpdatingOrder(true);
-      const cancelUrl = createURL(window.location.href, { u: 'payment-cancelled' });
-      const waitingUrl = createURL(window.location.href, { u: 'waiting-for-payment' });
-      const errorUrl = createURL(window.location.href, { u: 'payment-error' });
-      const successUrl = `${window.location.origin}${paymentSuccessUrl}`;
-
-      const response = await checkoutController.paypalPayment(successUrl, waitingUrl, cancelUrl, errorUrl, couponCodeForm.values.couponCode);
-
-      if (response.redirectUrl) {
-        window.location.href = response.redirectUrl;
-      }
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        setPaymentError(error.message);
-      }
-    }
-    setUpdatingOrder(false);
-  };
-
-  const renderPaymentMethod = () => {
-    const paymentMethod = paymentMethods?.find((method) => method.id === paymentMethodId);
-
-    if (!order || !offer) return null;
+    if (!paymentMethods?.length) return;
 
-    if (!order.requiredPaymentDetails) {
-      return <NoPaymentRequired onSubmit={handleNoPaymentRequiredSubmit} error={paymentError} />;
-    }
-
-    if (paymentMethod?.methodName === 'card') {
-      if (paymentMethod?.provider === 'stripe') {
-        return <PaymentForm couponCode={couponCodeForm.values.couponCode} setUpdatingOrder={setUpdatingOrder} />;
-      }
+    setValue('paymentMethodId', paymentMethods[0].id.toString());
+  }, [paymentMethods, setValue]);
 
-      return (
-        <AdyenInitialPayment
-          paymentSuccessUrl={paymentSuccessUrl}
-          setUpdatingOrder={setUpdatingOrder}
-          setPaymentError={setPaymentError}
-          orderId={order.id}
-          type="card"
-        />
-      );
-    } else if (paymentMethod?.methodName === 'paypal') {
-      return <PayPal onSubmit={handlePayPalSubmit} error={paymentError} />;
-    }
-
-    return null;
-  };
+  // clear after closing the checkout modal
+  useEffect(() => {
+    return () => setShowCouponCodeSuccess(false);
+  }, []);
 
   // loading state
   if (!offer || !order || !paymentMethods || !offerType) {
@@ -223,6 +93,19 @@ const Checkout = () => {
     );
   }
 
+  const cancelUrl = createURL(window.location.href, { u: 'payment-cancelled' });
+  const waitingUrl = createURL(window.location.href, { u: 'waiting-for-payment' });
+  const errorUrl = createURL(window.location.href, { u: 'payment-error' });
+  const successUrl = offerType === 'svod' ? welcomeUrl : closeModalUrl;
+  const successUrlWithOrigin = `${window.location.origin}${successUrl}`;
+  const referrer = window.location.href;
+
+  const paymentMethod = paymentMethods?.find((method) => method.id === parseInt(paymentMethodId));
+  const noPaymentRequired = !order?.requiredPaymentDetails;
+  const isStripePayment = paymentMethod?.methodName === 'card' && paymentMethod?.provider === 'stripe';
+  const isAdyenPayment = paymentMethod?.methodName === 'card' && paymentMethod?.paymentGateway === 'adyen'; // @todo: conversion from controller?
+  const isPayPalPayment = paymentMethod?.methodName === 'paypal';
+
   return (
     <CheckoutForm
       order={order}
@@ -232,18 +115,42 @@ const Checkout = () => {
       paymentMethods={paymentMethods}
       paymentMethodId={paymentMethodId}
       onPaymentMethodChange={handlePaymentMethodChange}
-      onCouponFormSubmit={handleCouponFormSubmit}
-      onCouponInputChange={couponCodeForm.handleChange}
+      onCouponFormSubmit={handleSubmit}
+      onCouponInputChange={handleChange}
       onRedeemCouponButtonClick={() => setCouponFormOpen(true)}
       onCloseCouponFormClick={() => setCouponFormOpen(false)}
-      couponInputValue={couponCodeForm.values.couponCode}
+      couponInputValue={couponCode}
       couponFormOpen={couponFormOpen}
-      couponFormApplied={couponCodeApplied}
-      couponFormSubmitting={couponCodeForm.submitting}
-      couponFormError={couponCodeForm.errors.couponCode}
-      renderPaymentMethod={renderPaymentMethod}
-      submitting={updatingOrder}
-    />
+      couponFormApplied={showCouponCodeSuccess}
+      couponFormSubmitting={couponFormSubmitting}
+      couponFormError={errors.couponCode}
+      submitting={isSubmitting || adyenUpdating}
+    >
+      {noPaymentRequired && <NoPaymentRequired onSubmit={submitPaymentWithoutDetails.mutateAsync} error={submitPaymentWithoutDetails.error?.message || null} />}
+      {isStripePayment && (
+        <PaymentForm
+          onPaymentFormSubmit={async (cardPaymentPayload: PaymentFormData) =>
+            await submitPaymentStripe.mutateAsync({ cardPaymentPayload, referrer, returnUrl: waitingUrl })
+          }
+        />
+      )}
+      {isAdyenPayment && (
+        <>
+          <AdyenInitialPayment
+            paymentSuccessUrl={offerType === 'svod' ? welcomeUrl : closeModalUrl}
+            setUpdatingOrder={setAdyenUpdating}
+            orderId={order.id}
+            type="card"
+          />
+        </>
+      )}
+      {isPayPalPayment && (
+        <PayPal
+          onSubmit={() => submitPaymentPaypal.mutate({ successUrl: successUrlWithOrigin, waitingUrl, cancelUrl, errorUrl, couponCode })}
+          error={submitPaymentPaypal.error?.message || null}
+        />
+      )}
+    </CheckoutForm>
   );
 };
 
diff --git a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
index a38f0dcd8..edcc593ca 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
@@ -1,15 +1,15 @@
 import React, { useCallback, useEffect } from 'react';
-import { mixed, object, type SchemaOf } from 'yup';
+import { mixed, object } from 'yup';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 import type { Subscription } from '@jwp/ott-common/types/subscription';
-import type { ChooseOfferFormData } from '@jwp/ott-common/types/account';
+import type { ChooseOfferFormData } from '@jwp/ott-common/types/checkout';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { logDev } from '@jwp/ott-common/src/utils/common';
 import useOffers from '@jwp/ott-hooks-react/src/useOffers';
@@ -48,14 +48,6 @@ const ChooseOffer = () => {
   const availableOffers = isOfferSwitch ? offerSwitches : offers;
   const offerId = availableOffers[0]?.offerId || '';
 
-  const validationSchema: SchemaOf<ChooseOfferFormData> = object().shape({
-    offerId: mixed<string>().required(t('choose_offer.field_required')),
-  });
-
-  const initialValues: ChooseOfferFormData = {
-    offerId: defaultOfferId,
-  };
-
   const updateAccountModal = useEventCallback((modal: keyof AccountModals) => {
     navigate(modalURLFromLocation(location, modal));
   });
@@ -106,14 +98,18 @@ const ChooseOffer = () => {
     ],
   );
 
-  const { handleSubmit, handleChange, setValue, values, errors, submitting } = useForm(initialValues, chooseOfferSubmitHandler, validationSchema);
+  const { handleSubmit, handleChange, setValue, values, errors, submitting } = useForm<ChooseOfferFormData>({
+    initialValues: { offerId: defaultOfferId },
+    validationSchema: object().shape({ offerId: mixed<string>().required(t('choose_offer.field_required')) }),
+    onSubmit: chooseOfferSubmitHandler,
+  });
 
   useEffect(() => {
     if (!isOfferSwitch) setValue('offerId', defaultOfferId);
 
     // Update offerId if the user is switching offers to ensure the correct offer is checked in the ChooseOfferForm
     // Initially, a defaultOfferId is set, but when switching offers, we need to use the id of the target offer
-    if (isOfferSwitch && values.offerId === initialValues.offerId) {
+    if (isOfferSwitch && values.offerId === defaultOfferId) {
       setValue('offerId', offerId);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx b/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
index c14ec2126..cd1d6be96 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import type { EditPasswordFormData } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
@@ -63,19 +63,20 @@ const ResetPassword = ({ type }: { type?: 'add' }) => {
     setSubmitting(false);
   };
 
-  const passwordForm = useForm(
-    { password: '', passwordConfirmation: '' },
-    passwordSubmitHandler,
-    object().shape({
+  const passwordForm = useForm<EditPasswordFormData>({
+    initialValues: { password: '', passwordConfirmation: '' },
+    validationSchema: object().shape({
       email: string(),
       oldPassword: string(),
       password: string()
         .matches(/^(?=.*[a-z])(?=.*[0-9]).{8,}$/, t('registration.invalid_password'))
         .required(t('login.field_required')),
-      passwordConfirmation: string(),
+      passwordConfirmation: string().required(),
+      resetPasswordToken: string(),
     }),
-    true,
-  );
+    validateOnBlur: true,
+    onSubmit: passwordSubmitHandler,
+  });
 
   const resendEmailClickHandler = async () => {
     try {
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Login.tsx b/packages/ui-react/src/containers/AccountModal/forms/Login.tsx
index 8674163ee..9764c212f 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Login.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Login.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
-import { object, string, type SchemaOf } from 'yup';
+import { object, string } from 'yup';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router';
-import { useQueryClient } from 'react-query';
-import type { LoginFormData } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
-import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import useSocialLoginUrls from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
+import type { LoginFormData } from '@jwp/ott-common/types/account';
 
 import LoginForm from '../../../components/LoginForm/LoginForm';
 
@@ -27,46 +26,27 @@ const Login: React.FC<Props> = ({ messageKey }: Props) => {
 
   const socialLoginURLs = useSocialLoginUrls(window.location.href.split('?')[0]);
 
-  const queryClient = useQueryClient();
-
-  const loginSubmitHandler: UseFormOnSubmitHandler<LoginFormData> = async (formData, { setErrors, setSubmitting, setValue }) => {
-    try {
-      await accountController.login(formData.email, formData.password, window.location.href);
-      await queryClient.invalidateQueries(['listProfiles']);
-
-      // close modal
-      navigate(modalURLFromLocation(location, null));
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        if (error.message.toLowerCase().includes('invalid param email')) {
-          setErrors({ email: t('login.wrong_email') });
-        } else {
-          setErrors({ form: t('login.wrong_combination') });
-        }
-        setValue('password', '');
-      }
-    }
-
-    setSubmitting(false);
-  };
-
-  const validationSchema: SchemaOf<LoginFormData> = object().shape({
-    email: string().email(t('login.field_is_not_valid_email')).required(t('login.field_required')),
-    password: string().required(t('login.field_required')),
+  const { values, errors, submitting, handleSubmit, handleChange } = useForm<LoginFormData>({
+    initialValues: { email: '', password: '' },
+    validationSchema: object().shape({
+      email: string().email(t('login.field_is_not_valid_email')).required(t('login.field_required')),
+      password: string().required(t('login.field_required')),
+    }),
+    onSubmit: ({ email, password }) => accountController.login(email, password, window.location.href),
+    onSubmitSuccess: () => navigate(modalURLFromLocation(location, null)),
+    onSubmitError: ({ resetValue }) => resetValue('password'),
   });
-  const initialValues: LoginFormData = { email: '', password: '' };
-  const { handleSubmit, handleChange, values, errors, submitting } = useForm(initialValues, loginSubmitHandler, validationSchema);
 
   return (
     <LoginForm
-      messageKey={messageKey}
-      onSubmit={handleSubmit}
-      onChange={handleChange}
       values={values}
       errors={errors}
       submitting={submitting}
       siteName={siteName}
       socialLoginURLs={socialLoginURLs}
+      messageKey={messageKey}
+      onSubmit={handleSubmit}
+      onChange={handleChange}
     />
   );
 };
diff --git a/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx b/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx
index d37e5e524..1e6e62db9 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx
@@ -6,7 +6,7 @@ import { useQuery } from 'react-query';
 import type { CaptureCustomAnswer, CleengCaptureQuestionField, PersonalDetailsFormData } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
 import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
@@ -134,7 +134,10 @@ const PersonalDetails = () => {
     setSubmitting(false);
   };
 
-  const { setValue, handleSubmit, handleChange, values, errors, submitting } = useForm<PersonalDetailsFormData>(initialValues, PersonalDetailSubmitHandler);
+  const { setValue, handleSubmit, handleChange, values, errors, submitting } = useForm<PersonalDetailsFormData>({
+    initialValues,
+    onSubmit: PersonalDetailSubmitHandler,
+  });
 
   if (isLoading) {
     return (
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
index befb43fdf..fc5bdb1a7 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
@@ -1,15 +1,14 @@
-import React, { useEffect, useMemo, useState, type ChangeEventHandler } from 'react';
-import { object, string, type SchemaOf } from 'yup';
+import React, { useEffect, useState, type ChangeEventHandler } from 'react';
+import { object, string } from 'yup';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router';
-import { useQuery, useQueryClient } from 'react-query';
 import type { RegistrationFormData } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
-import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
-import { checkConsentsFromValues, extractConsentValues } from '@jwp/ott-common/src/utils/collection';
-import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import { checkConsentsFromValues, extractConsentValues, formatConsentsFromValues } from '@jwp/ott-common/src/utils/collection';
+import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
+import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 
 import RegistrationForm from '../../../components/RegistrationForm/RegistrationForm';
 
@@ -19,15 +18,11 @@ const Registration = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { t } = useTranslation('account');
+
   const [consentValues, setConsentValues] = useState<Record<string, string | boolean>>({});
   const [consentErrors, setConsentErrors] = useState<string[]>([]);
 
-  const appConfigId = useConfigStore(({ config }) => config.id);
-  const { data, isLoading: publisherConsentsLoading } = useQuery(['consents', appConfigId], accountController.getPublisherConsents);
-
-  const publisherConsents = useMemo(() => data || [], [data]);
-
-  const queryClient = useQueryClient();
+  const { publisherConsents, loading } = useAccountStore(({ publisherConsents, loading }) => ({ publisherConsents, loading }));
 
   const handleChangeConsent: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = ({ currentTarget }) => {
     if (!currentTarget) return;
@@ -45,62 +40,43 @@ const Registration = () => {
   };
 
   useEffect(() => {
-    if (publisherConsents) {
-      setConsentValues(extractConsentValues(publisherConsents));
+    if (!publisherConsents) {
+      accountController.getPublisherConsents();
+
+      return;
     }
-  }, [publisherConsents]);
 
-  const registrationSubmitHandler: UseFormOnSubmitHandler<RegistrationFormData> = async ({ email, password }, { setErrors, setSubmitting, setValue }) => {
-    try {
-      const { consentsErrors, customerConsents } = checkConsentsFromValues(publisherConsents, consentValues);
+    setConsentValues(extractConsentValues(publisherConsents));
+  }, [accountController, publisherConsents]);
+
+  const { handleSubmit, handleChange, handleBlur, values, errors, submitting } = useForm<RegistrationFormData>({
+    initialValues: { email: '', password: '' },
+    validationSchema: object().shape({
+      email: string().email(t('registration.field_is_not_valid_email')).required(t('registration.field_required')),
+      password: string()
+        .matches(/^(?=.*[a-z])(?=.*[0-9]).{8,}$/, t('registration.invalid_password'))
+        .required(t('registration.field_required')),
+    }),
+    validateOnBlur: true,
+    onSubmit: async ({ email, password }) => {
+      const { consentsErrors } = checkConsentsFromValues(publisherConsents || [], consentValues);
 
       if (consentsErrors.length) {
         setConsentErrors(consentsErrors);
-        setSubmitting(false);
-        return;
+        throw new Error('Consents error');
       }
 
-      await accountController.register(email, password, window.location.href, customerConsents);
-      await queryClient.invalidateQueries(['listProfiles']);
-
-      navigate(modalURLFromLocation(location, 'personal-details'));
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        const errorMessage = error.message.toLowerCase();
-        if (errorMessage.includes('customer already exists') || errorMessage.includes('account already exists')) {
-          setErrors({ form: t('registration.user_exists') });
-        } else if (errorMessage.includes('invalid param password')) {
-          setErrors({ password: t('registration.invalid_password') });
-        } else {
-          // in case the endpoint fails
-          setErrors({ password: t('registration.failed_to_create') });
-        }
-        setValue('password', '');
-      }
-    }
-
-    setSubmitting(false);
-  };
-
-  const validationSchema: SchemaOf<RegistrationFormData> = object().shape({
-    email: string().email(t('registration.field_is_not_valid_email')).required(t('registration.field_required')),
-    password: string()
-      .matches(/^(?=.*[a-z])(?=.*[0-9]).{8,}$/, t('registration.invalid_password'))
-      .required(t('registration.field_required')),
+      await accountController.register(email, password, window.location.href, formatConsentsFromValues(publisherConsents, consentValues));
+    },
+    onSubmitSuccess: () => navigate(modalURLFromLocation(location, 'personal-details')),
+    onSubmitError: ({ resetValue }) => resetValue('password'),
   });
 
-  const initialRegistrationValues: RegistrationFormData = { email: '', password: '' };
-  const { handleSubmit, handleChange, handleBlur, values, errors, submitting } = useForm(
-    initialRegistrationValues,
-    registrationSubmitHandler,
-    validationSchema,
-    true,
-  );
-
   return (
     <RegistrationForm
       onSubmit={handleSubmit}
       onChange={handleChange}
+      onConsentChange={handleChangeConsent}
       onBlur={handleBlur}
       values={values}
       errors={errors}
@@ -108,8 +84,7 @@ const Registration = () => {
       submitting={submitting}
       consentValues={consentValues}
       publisherConsents={publisherConsents}
-      loading={publisherConsentsLoading}
-      onConsentChange={handleChangeConsent}
+      loading={loading}
       canSubmit={!!values.email && !!values.password}
     />
   );
diff --git a/packages/ui-react/src/containers/AccountModal/forms/RenewSubscription.tsx b/packages/ui-react/src/containers/AccountModal/forms/RenewSubscription.tsx
index 4eba0930c..40a596dd5 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/RenewSubscription.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/RenewSubscription.tsx
@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from 'react-router';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
diff --git a/packages/ui-react/src/containers/AccountModal/forms/ResetPassword.tsx b/packages/ui-react/src/containers/AccountModal/forms/ResetPassword.tsx
index cae72aa36..434de9e0d 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/ResetPassword.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/ResetPassword.tsx
@@ -6,7 +6,7 @@ import { shallow } from '@jwp/ott-common/src/utils/compare';
 import type { ForgotPasswordFormData } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { logDev } from '@jwp/ott-common/src/utils/common';
 import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
@@ -91,14 +91,14 @@ const ResetPassword: React.FC<Prop> = ({ type }: Prop) => {
     setSubmitting(false);
   };
 
-  const emailForm = useForm(
-    { email: '' },
-    emailSubmitHandler,
-    object().shape({
+  const emailForm = useForm<ForgotPasswordFormData>({
+    initialValues: { email: '' },
+    validationSchema: object().shape({
       email: string().email(t('login.field_is_not_valid_email')).required(t('login.field_required')),
     }),
-    true,
-  );
+    validateOnBlur: true,
+    onSubmit: emailSubmitHandler,
+  });
 
   return (
     <React.Fragment>
diff --git a/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx b/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx
index 2a4869343..bf836224b 100644
--- a/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx
+++ b/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx
@@ -4,27 +4,30 @@ import type DropinElement from '@adyen/adyen-web/dist/types/components/Dropin/Dr
 import { useNavigate } from 'react-router';
 import type { AdyenPaymentSession } from '@jwp/ott-common/types/checkout';
 import { getModule } from '@jwp/ott-common/src/modules/container';
-import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { ADYEN_LIVE_CLIENT_KEY, ADYEN_TEST_CLIENT_KEY } from '@jwp/ott-common/src/constants';
+import { useTranslation } from 'react-i18next';
 
 import Adyen from '../../components/Adyen/Adyen';
 
 type Props = {
   setUpdatingOrder: (loading: boolean) => void;
-  setPaymentError: (errorMessage?: string) => void;
   type: AdyenPaymentMethodType;
   paymentSuccessUrl: string;
   orderId?: number;
 };
 
-export default function AdyenInitialPayment({ setUpdatingOrder, type, setPaymentError, paymentSuccessUrl, orderId }: Props) {
+export default function AdyenInitialPayment({ setUpdatingOrder, type, paymentSuccessUrl, orderId }: Props) {
   const accountController = getModule(AccountController);
   const checkoutController = getModule(CheckoutController);
 
+  const [error, setError] = useState<string>();
   const [session, setSession] = useState<AdyenPaymentSession>();
 
+  const { t } = useTranslation('error');
+
   const isSandbox = accountController.getSandbox();
   const navigate = useNavigate();
 
@@ -38,7 +41,7 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, setPayment
         setSession(session);
       } catch (error: unknown) {
         if (error instanceof Error) {
-          setPaymentError(error.message);
+          setError(error.message);
         }
       }
 
@@ -46,7 +49,7 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, setPayment
     };
 
     createSession();
-  }, [setUpdatingOrder, setPaymentError, checkoutController]);
+  }, [setUpdatingOrder, checkoutController]);
 
   const onSubmit = useCallback(
     async (state: AdyenEventData, handleAction: DropinElement['handleAction']) => {
@@ -54,10 +57,10 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, setPayment
 
       try {
         setUpdatingOrder(true);
-        setPaymentError(undefined);
+        setError(undefined);
 
         if (orderId === undefined) {
-          setPaymentError('Order is unknown');
+          setError(t('adyen_order_unknown'));
           return;
         }
 
@@ -76,13 +79,13 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, setPayment
         navigate(paymentSuccessUrl, { replace: true });
       } catch (error: unknown) {
         if (error instanceof Error) {
-          setPaymentError(error.message);
+          setError(error.message);
         }
       }
 
       setUpdatingOrder(false);
     },
-    [navigate, orderId, paymentSuccessUrl, setPaymentError, setUpdatingOrder, accountController, checkoutController],
+    [navigate, orderId, paymentSuccessUrl, t, setUpdatingOrder, accountController, checkoutController],
   );
 
   const adyenConfiguration: CoreOptions = useMemo(
@@ -107,16 +110,16 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, setPayment
           navigate(paymentSuccessUrl, { replace: true });
         } catch (error: unknown) {
           if (error instanceof Error) {
-            setPaymentError(error.message);
+            setError(error.message);
             setUpdatingOrder(false);
           }
         }
       },
       onSubmit: (state: AdyenEventData, component: DropinElement) => onSubmit(state, component.handleAction),
-      onError: (error: Error) => setPaymentError(error.message),
+      onError: (error: Error) => setError(error.message),
     }),
-    [onSubmit, paymentSuccessUrl, isSandbox, session, orderId, navigate, setPaymentError, setUpdatingOrder, checkoutController],
+    [onSubmit, paymentSuccessUrl, isSandbox, session, orderId, navigate, setError, setUpdatingOrder, checkoutController],
   );
 
-  return <Adyen configuration={adyenConfiguration} type={type} />;
+  return <Adyen configuration={adyenConfiguration} type={type} error={error} />;
 }
diff --git a/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx b/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
index 0142e4ee7..5df910469 100644
--- a/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
+++ b/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
@@ -4,8 +4,8 @@ import type DropinElement from '@adyen/adyen-web/dist/types/components/Dropin/Dr
 import { useLocation, useNavigate } from 'react-router-dom';
 import type { AdyenPaymentSession } from '@jwp/ott-common/types/checkout';
 import { getModule } from '@jwp/ott-common/src/modules/container';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
-import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { ADYEN_LIVE_CLIENT_KEY, ADYEN_TEST_CLIENT_KEY } from '@jwp/ott-common/src/constants';
 import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
diff --git a/packages/ui-react/src/containers/Cinema/Cinema.test.tsx b/packages/ui-react/src/containers/Cinema/Cinema.test.tsx
index 24aef3fc8..501362bce 100644
--- a/packages/ui-react/src/containers/Cinema/Cinema.test.tsx
+++ b/packages/ui-react/src/containers/Cinema/Cinema.test.tsx
@@ -5,7 +5,7 @@ import { mockService } from '@jwp/ott-common/test/mockService';
 import ApiService from '@jwp/ott-common/src/services/ApiService';
 import GenericEntitlementService from '@jwp/ott-common/src/services/GenericEntitlementService';
 import JWPEntitlementService from '@jwp/ott-common/src/services/JWPEntitlementService';
-import WatchHistoryController from '@jwp/ott-common/src/stores/WatchHistoryController';
+import WatchHistoryController from '@jwp/ott-common/src/controllers/WatchHistoryController';
 
 import { renderWithRouter } from '../../../test/utils';
 
diff --git a/packages/ui-react/src/containers/FavoriteButton/FavoriteButton.tsx b/packages/ui-react/src/containers/FavoriteButton/FavoriteButton.tsx
index 583dc0aa9..c524fc951 100644
--- a/packages/ui-react/src/containers/FavoriteButton/FavoriteButton.tsx
+++ b/packages/ui-react/src/containers/FavoriteButton/FavoriteButton.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useFavoritesStore } from '@jwp/ott-common/src/stores/FavoritesStore';
-import FavoritesController from '@jwp/ott-common/src/stores/FavoritesController';
+import FavoritesController from '@jwp/ott-common/src/controllers/FavoritesController';
 import Favorite from '@jwp/ott-theme/assets/icons/favorite.svg?react';
 import FavoriteBorder from '@jwp/ott-theme/assets/icons/favorite_border.svg?react';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
diff --git a/packages/ui-react/src/containers/Layout/Layout.test.tsx b/packages/ui-react/src/containers/Layout/Layout.test.tsx
index 0b4c736ec..6468c7d97 100644
--- a/packages/ui-react/src/containers/Layout/Layout.test.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import ProfileController from '@jwp/ott-common/src/stores/ProfileController';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import ProfileController from '@jwp/ott-common/src/controllers/ProfileController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { mockService } from '@jwp/ott-common/test/mockService';
 import { DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
 
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index b2ab4513a..2a4a67aad 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -9,7 +9,7 @@ import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
-import ProfileController from '@jwp/ott-common/src/stores/ProfileController';
+import ProfileController from '@jwp/ott-common/src/controllers/ProfileController';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { IS_DEVELOPMENT_BUILD, unicodeToChar } from '@jwp/ott-common/src/utils/common';
 import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
diff --git a/packages/ui-react/src/containers/PaymentContainer/PaymentContainer.tsx b/packages/ui-react/src/containers/PaymentContainer/PaymentContainer.tsx
index 0607c1c91..0b9640c62 100644
--- a/packages/ui-react/src/containers/PaymentContainer/PaymentContainer.tsx
+++ b/packages/ui-react/src/containers/PaymentContainer/PaymentContainer.tsx
@@ -5,7 +5,7 @@ import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import useOffers from '@jwp/ott-hooks-react/src/useOffers';
 import { useSubscriptionChange } from '@jwp/ott-hooks-react/src/useSubscriptionChange';
 
diff --git a/packages/ui-react/src/containers/Profiles/EditProfile.tsx b/packages/ui-react/src/containers/Profiles/EditProfile.tsx
index f4e671085..009ae2eed 100644
--- a/packages/ui-react/src/containers/Profiles/EditProfile.tsx
+++ b/packages/ui-react/src/containers/Profiles/EditProfile.tsx
@@ -4,7 +4,7 @@ import { useLocation, useNavigate, useParams } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import { getModule } from '@jwp/ott-common/src/modules/container';
-import ProfileController from '@jwp/ott-common/src/stores/ProfileController';
+import ProfileController from '@jwp/ott-common/src/controllers/ProfileController';
 import type { UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
 import { useProfileErrorHandler, useUpdateProfile } from '@jwp/ott-hooks-react/src/useProfiles';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
diff --git a/packages/ui-react/src/containers/Profiles/Form.tsx b/packages/ui-react/src/containers/Profiles/Form.tsx
index 5c52f7d1c..b9f5a677d 100644
--- a/packages/ui-react/src/containers/Profiles/Form.tsx
+++ b/packages/ui-react/src/containers/Profiles/Form.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { object, string, type SchemaOf } from 'yup';
+import { number, object, string } from 'yup';
 import { useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
@@ -41,16 +41,22 @@ const Form = ({ initialValues, formHandler, selectedAvatar, showCancelButton = t
     { label: t('profile.kids'), value: 'false' },
   ];
 
-  const validationSchema: SchemaOf<{ name: string }> = object().shape({
-    name: string()
-      .trim()
-      .required(t('profile.validation.name.required'))
-      .min(3, t('profile.validation.name.too_short', { charactersCount: 3 }))
-      .max(30, t('profile.validation.name.too_long', { charactersCount: 30 }))
-      .matches(/^[a-zA-Z0-9\s]*$/, t('profile.validation.name.invalid_characters')),
+  const { handleSubmit, handleChange, values, errors, submitting, setValue } = useForm<ProfileFormValues>({
+    initialValues,
+    validationSchema: object().shape({
+      id: string(),
+      name: string()
+        .trim()
+        .required(t('profile.validation.name.required'))
+        .min(3, t('profile.validation.name.too_short', { charactersCount: 3 }))
+        .max(30, t('profile.validation.name.too_long', { charactersCount: 30 }))
+        .matches(/^[a-zA-Z0-9\s]*$/, t('profile.validation.name.invalid_characters')),
+      adult: string().required(),
+      avatar_url: string(),
+      pin: number(),
+    }),
+    onSubmit: formHandler,
   });
-
-  const { handleSubmit, handleChange, values, errors, submitting, setValue } = useForm(initialValues, formHandler, validationSchema);
   const isDirty = Object.entries(values).some(([k, v]) => v !== initialValues[k as keyof typeof initialValues]);
   useEffect(() => {
     setValue('avatar_url', selectedAvatar?.value || profile?.avatar_url || '');
diff --git a/packages/ui-react/src/containers/UpdatePaymentMethod/UpdatePaymentMethod.tsx b/packages/ui-react/src/containers/UpdatePaymentMethod/UpdatePaymentMethod.tsx
index f2571360d..90138ad4c 100644
--- a/packages/ui-react/src/containers/UpdatePaymentMethod/UpdatePaymentMethod.tsx
+++ b/packages/ui-react/src/containers/UpdatePaymentMethod/UpdatePaymentMethod.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
+import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
 import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
 
@@ -87,7 +87,7 @@ const UpdatePaymentMethod = ({ onCloseButtonClick }: Props) => {
         />
       );
     } else if (paymentMethod?.methodName === 'paypal') {
-      return <PayPal onSubmit={handlePayPalSubmit} error={paymentError} />;
+      return <PayPal onSubmit={handlePayPalSubmit} error={paymentError || null} />;
     }
 
     return null;
diff --git a/packages/ui-react/src/pages/User/User.test.tsx b/packages/ui-react/src/pages/User/User.test.tsx
index 2c77edfbf..33d164115 100644
--- a/packages/ui-react/src/pages/User/User.test.tsx
+++ b/packages/ui-react/src/pages/User/User.test.tsx
@@ -5,12 +5,12 @@ import type { PaymentDetail, Subscription, Transaction } from '@jwp/ott-common/t
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useFavoritesStore } from '@jwp/ott-common/src/stores/FavoritesStore';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { mockService } from '@jwp/ott-common/test/mockService';
 import ApiService from '@jwp/ott-common/src/services/ApiService';
-import FavoritesController from '@jwp/ott-common/src/stores/FavoritesController';
-import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
-import ProfileController from '@jwp/ott-common/src/stores/ProfileController';
+import FavoritesController from '@jwp/ott-common/src/controllers/FavoritesController';
+import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
+import ProfileController from '@jwp/ott-common/src/controllers/ProfileController';
 import { ACCESS_MODEL, DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
 import { Route, Routes } from 'react-router-dom';
 import React from 'react';
@@ -79,6 +79,7 @@ describe('User Component tests', () => {
     mockService(ApiService, {});
     mockService(AccountController, {
       logout: vi.fn(),
+      getPublisherConsents: vi.fn().mockResolvedValue([]),
       getFeatures: vi.fn(() => ({
         ...DEFAULT_FEATURES,
         canUpdateEmail: false,
diff --git a/packages/ui-react/src/pages/User/User.tsx b/packages/ui-react/src/pages/User/User.tsx
index 84f6e90ed..89840061d 100644
--- a/packages/ui-react/src/pages/User/User.tsx
+++ b/packages/ui-react/src/pages/User/User.tsx
@@ -5,9 +5,9 @@ import { shallow } from '@jwp/ott-common/src/utils/compare';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
-import FavoritesController from '@jwp/ott-common/src/stores/FavoritesController';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
-import CheckoutController from '@jwp/ott-common/src/stores/CheckoutController';
+import FavoritesController from '@jwp/ott-common/src/controllers/FavoritesController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
 import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
 import { ACCESS_MODEL, PersonalShelf } from '@jwp/ott-common/src/constants';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
diff --git a/platforms/web/public/locales/en/error.json b/platforms/web/public/locales/en/error.json
index f79876fcc..27e1b470e 100644
--- a/platforms/web/public/locales/en/error.json
+++ b/platforms/web/public/locales/en/error.json
@@ -9,5 +9,7 @@
   "notfound_error_heading": "Not found",
   "playlist_not_found": "Playlist not found",
   "settings_invalid": "Invalid or missing settings",
-  "video_not_found": "Video not found"
+  "video_not_found": "Video not found",
+  "unknown_error": "Unknown error",
+  "adyen_order_unknown": "Order is unknown"
 }
diff --git a/platforms/web/public/locales/es/error.json b/platforms/web/public/locales/es/error.json
index 7b2ecf5ab..b1027f794 100644
--- a/platforms/web/public/locales/es/error.json
+++ b/platforms/web/public/locales/es/error.json
@@ -9,5 +9,7 @@
   "notfound_error_heading": "No encontrado",
   "playlist_not_found": "Lista de reproducción no encontrada",
   "settings_invalid": "Ajustes inválidos o faltantes",
-  "video_not_found": "Video no encontrado"
+  "video_not_found": "Video no encontrado",
+  "unknown_error": "Error desconocido",
+  "adyen_order_unknown": "El orden es desconocido"
 }
diff --git a/platforms/web/src/hooks/useNotifications.ts b/platforms/web/src/hooks/useNotifications.ts
index 69dc695ff..e92dbacf9 100644
--- a/platforms/web/src/hooks/useNotifications.ts
+++ b/platforms/web/src/hooks/useNotifications.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import { getModule } from '@jwp/ott-common/src/modules/container';
-import AccountController from '@jwp/ott-common/src/stores/AccountController';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { queryClient } from '@jwp/ott-ui-react/src/containers/QueryProvider/QueryProvider';
 import { simultaneousLoginWarningKey } from '@jwp/ott-common/src/constants';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';

From 3deabfc766a75c12ab122a775376449e316ff232 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 6 Feb 2024 21:26:15 +0100
Subject: [PATCH 023/128] fix: favorites and history validation error

---
 packages/common/src/services/FavoriteService.ts     | 2 +-
 packages/common/src/services/WatchHistoryService.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/common/src/services/FavoriteService.ts b/packages/common/src/services/FavoriteService.ts
index ccff461ec..b7f752b22 100644
--- a/packages/common/src/services/FavoriteService.ts
+++ b/packages/common/src/services/FavoriteService.ts
@@ -34,7 +34,7 @@ export default class FavoriteService {
   }
 
   private validateFavorites(favorites: unknown) {
-    if (schema.validateSync(favorites)) {
+    if (favorites && schema.validateSync(favorites)) {
       return favorites as SerializedFavorite[];
     }
 
diff --git a/packages/common/src/services/WatchHistoryService.ts b/packages/common/src/services/WatchHistoryService.ts
index 215f62e2c..7e6636b28 100644
--- a/packages/common/src/services/WatchHistoryService.ts
+++ b/packages/common/src/services/WatchHistoryService.ts
@@ -61,7 +61,7 @@ export default class WatchHistoryService {
   };
 
   private validateWatchHistory(history: unknown) {
-    if (schema.validateSync(history)) {
+    if (history && schema.validateSync(history)) {
       return history as SerializedWatchHistoryItem[];
     }
 

From ca71f29298ea6c4af2f5c2b6c4f6379d68385df0 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Tue, 6 Feb 2024 12:28:51 -0300
Subject: [PATCH 024/128] fix(payment): redirect after incorrect couponcode
 entry

---
 .../ui-react/src/containers/AccountModal/forms/Checkout.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
index 525f6dfd6..843782474 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
@@ -53,7 +53,7 @@ const Checkout = () => {
     },
     onSubmitSuccess: ({ couponCode }): void => setShowCouponCodeSuccess(!!couponCode),
     onSubmitError: ({ error }) => {
-      if (error instanceof FormValidationError && error.errors.order?.includes(`not found`)) {
+      if (error instanceof FormValidationError && error.errors.order?.includes(`Order with id ${order?.id} not found`)) {
         navigate(modalURLFromLocation(location, 'choose-offer'), { replace: true });
       }
     },

From d01d1b71aba628feeb4510cb9b0b9d4132af3cb7 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Tue, 6 Feb 2024 13:08:07 -0300
Subject: [PATCH 025/128] fix(payment): tvod offer not showing in AuthVOD
 platform

---
 packages/hooks-react/src/useOffers.ts                           | 2 +-
 .../ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/hooks-react/src/useOffers.ts b/packages/hooks-react/src/useOffers.ts
index 3b3edb8c3..a29bbc855 100644
--- a/packages/hooks-react/src/useOffers.ts
+++ b/packages/hooks-react/src/useOffers.ts
@@ -16,7 +16,7 @@ const useOffers = () => {
   const hasMultipleOfferTypes = !hasPremierOffers && !!mediaOffers?.length && !!svodOfferIds.length;
   const offerIds: string[] = mergeOfferIds(mediaOffers || [], svodOfferIds);
 
-  const [offerType, setOfferType] = useState<OfferType>(hasPremierOffers || !svodOfferIds ? 'tvod' : 'svod');
+  const [offerType, setOfferType] = useState<OfferType>(hasPremierOffers || !svodOfferIds.length ? 'tvod' : 'svod');
   const updateOfferType = useMemo(() => (hasMultipleOfferTypes ? (type: OfferType) => setOfferType(type) : undefined), [hasMultipleOfferTypes]);
 
   const { data: allOffers, isLoading } = useQuery(['offers', offerIds.join('-')], () => checkoutController.getOffers({ offerIds }));
diff --git a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
index edcc593ca..78ffdea68 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
@@ -105,7 +105,7 @@ const ChooseOffer = () => {
   });
 
   useEffect(() => {
-    if (!isOfferSwitch) setValue('offerId', defaultOfferId);
+    if (!isOfferSwitch && !isLoading) setValue('offerId', defaultOfferId);
 
     // Update offerId if the user is switching offers to ensure the correct offer is checked in the ChooseOfferForm
     // Initially, a defaultOfferId is set, but when switching offers, we need to use the id of the target offer

From c97c59b7268d540ee37cdb0bb41beb72d8946a7e Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Tue, 6 Feb 2024 14:09:40 -0300
Subject: [PATCH 026/128] fix(payment): incorrect couponCode success message

---
 .../ui-react/src/containers/AccountModal/forms/Checkout.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
index 843782474..9bfe801e4 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
@@ -29,7 +29,7 @@ const Checkout = () => {
 
   const { offer, offerType, paymentMethods, order, isSubmitting, updateOrder, submitPaymentWithoutDetails, submitPaymentPaypal, submitPaymentStripe } =
     useCheckout({
-      onUpdateOrderSuccess: () => setShowCouponCodeSuccess(true),
+      onUpdateOrderSuccess: () => !!couponCode && setShowCouponCodeSuccess(true),
       onSubmitPaymentWithoutDetailsSuccess: () => navigate(offerType === 'svod' ? welcomeUrl : closeModalUrl, { replace: true }),
       onSubmitPaypalPaymentSuccess: (paypalUrl: string) => {
         window.location.href = paypalUrl;

From 320fe4402f7338816825471de52c21aedb95a144 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 7 Feb 2024 08:37:26 +0100
Subject: [PATCH 027/128] fix: root error screen for unexpected errors

---
 packages/hooks-react/src/useBootstrapApp.ts        |  2 +-
 .../DemoConfigDialog/DemoConfigDialog.tsx          |  8 ++++++--
 platforms/web/src/containers/Root/Root.tsx         | 14 ++++++++++----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/hooks-react/src/useBootstrapApp.ts b/packages/hooks-react/src/useBootstrapApp.ts
index a542ea2ad..a1a2874bc 100644
--- a/packages/hooks-react/src/useBootstrapApp.ts
+++ b/packages/hooks-react/src/useBootstrapApp.ts
@@ -20,7 +20,7 @@ export const useBootstrapApp = (url: string, onReady: OnReadyCallback) => {
   const queryClient = useQueryClient();
   const refreshEntitlements = () => queryClient.invalidateQueries({ queryKey: ['entitlements'] });
 
-  const { data, isLoading, error, isSuccess, refetch } = useQuery<Resources, AppError>(
+  const { data, isLoading, error, isSuccess, refetch } = useQuery<Resources, Error | AppError>(
     'config-init',
     () => applicationController.initializeApp(url, refreshEntitlements),
     {
diff --git a/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx b/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx
index 0f71a7a32..69a55e671 100644
--- a/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx
+++ b/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx
@@ -11,6 +11,7 @@ import ConfirmationDialog from '@jwp/ott-ui-react/src/components/ConfirmationDia
 import LoadingOverlay from '@jwp/ott-ui-react/src/components/LoadingOverlay/LoadingOverlay';
 import DevStackTrace from '@jwp/ott-ui-react/src/components/DevStackTrace/DevStackTrace';
 import type { BootstrapData } from '@jwp/ott-hooks-react/src/useBootstrapApp';
+import { AppError } from '@jwp/ott-common/src/utils/error';
 
 import styles from './DemoConfigDialog.module.scss';
 
@@ -53,6 +54,9 @@ const DemoConfigDialog = ({ query }: { query: BootstrapData }) => {
 
   const [state, setState] = useState<State>(initialState);
 
+  const errorTitle = error && error instanceof AppError ? error.payload.title : '';
+  const errorDescription = error && error instanceof AppError ? error.payload.description : '';
+
   const configNavigate = async (configSource: string | undefined) => {
     setState((s) => ({ ...s, configSource: configSource, error: undefined }));
 
@@ -160,8 +164,8 @@ const DemoConfigDialog = ({ query }: { query: BootstrapData }) => {
       {!isSuccess && (
         <div className={styles.configModal}>
           <ErrorPage
-            title={error?.payload?.title || t('app_config_not_found')}
-            message={error?.payload?.description || ''}
+            title={errorTitle || t('app_config_not_found')}
+            message={errorDescription}
             learnMoreLabel={t('app_config_learn_more')}
             helpLink={'https://docs.jwplayer.com/platform/docs/ott-create-an-app-config'}
             error={typeof state.error === 'string' ? undefined : state.error}
diff --git a/platforms/web/src/containers/Root/Root.tsx b/platforms/web/src/containers/Root/Root.tsx
index 0496e50b6..582a1382d 100644
--- a/platforms/web/src/containers/Root/Root.tsx
+++ b/platforms/web/src/containers/Root/Root.tsx
@@ -8,6 +8,7 @@ import { type BootstrapData, type OnReadyCallback, useBootstrapApp } from '@jwp/
 import { setThemingVariables } from '@jwp/ott-ui-react/src/utils/theming';
 import { addScript } from '@jwp/ott-ui-react/src/utils/dom';
 import type { Config } from '@jwp/ott-common/types/config';
+import { AppError } from '@jwp/ott-common/src/utils/error';
 
 import DemoConfigDialog from '../../components/DemoConfigDialog/DemoConfigDialog';
 import AppRoutes from '../AppRoutes/AppRoutes';
@@ -17,6 +18,13 @@ import { useTrackConfigKeyChange } from '#src/hooks/useTrackConfigKeyChange';
 
 const IS_DEMO_OR_PREVIEW = IS_DEMO_MODE || IS_PREVIEW_MODE;
 
+const renderError = (error: Error | AppError) => {
+  if (error instanceof AppError) {
+    return <ErrorPage title={error.payload.title} message={error.payload.description} helpLink={error.payload.helpLink} error={error} />;
+  }
+  return <ErrorPage error={error} />;
+};
+
 const ProdContentLoader = ({ query }: { query: BootstrapData }) => {
   const { isLoading, error } = query;
 
@@ -25,7 +33,7 @@ const ProdContentLoader = ({ query }: { query: BootstrapData }) => {
   }
 
   if (error) {
-    return <ErrorPage title={error.payload.title} message={error.payload.description} helpLink={error.payload.helpLink} />;
+    return renderError(error);
   }
 
   return null;
@@ -44,9 +52,7 @@ const DemoContentLoader = ({ query }: { query: BootstrapData }) => {
   return (
     <>
       {/* Show the error page when error except in demo mode (the demo mode shows its own error) */}
-      {!IS_DEMO_OR_PREVIEW && error && (
-        <ErrorPage title={error?.payload?.title} message={error?.payload?.description} error={error} helpLink={error?.payload?.helpLink} />
-      )}
+      {!IS_DEMO_OR_PREVIEW && error && renderError(error)}
       {IS_DEMO_OR_PREVIEW && <DemoConfigDialog query={query} />}
       {/* Config select control to improve testing experience */}
       {(IS_DEVELOPMENT_BUILD || IS_PREVIEW_MODE) && <DevConfigSelector selectedConfig={configSource} />}

From ca3d38e2ad82235a84cb658da0174095c2eed10e Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Wed, 7 Feb 2024 10:00:19 +0100
Subject: [PATCH 028/128] fix(project): undouble serieIds to prevent crash

---
 packages/common/src/services/WatchHistoryService.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/common/src/services/WatchHistoryService.ts b/packages/common/src/services/WatchHistoryService.ts
index 7e6636b28..adc8f34c9 100644
--- a/packages/common/src/services/WatchHistoryService.ts
+++ b/packages/common/src/services/WatchHistoryService.ts
@@ -47,8 +47,9 @@ export default class WatchHistoryService {
     const seriesIds = Object.keys(mediaWithSeries || {})
       .map((key) => mediaWithSeries?.[key]?.[0]?.series_id)
       .filter(Boolean) as string[];
+    const uniqueSerieIds = [...new Set(seriesIds)];
 
-    const seriesItems = await this.apiService.getMediaByWatchlist(continueWatchingList, seriesIds);
+    const seriesItems = await this.apiService.getMediaByWatchlist(continueWatchingList, uniqueSerieIds);
     const seriesItemsDict = Object.keys(mediaWithSeries || {}).reduce((acc, key) => {
       const seriesItemId = mediaWithSeries?.[key]?.[0]?.series_id;
       if (seriesItemId) {

From 86b461fc9df4b92401055b8c56d8e9d5aec13c99 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 7 Feb 2024 09:52:58 +0100
Subject: [PATCH 029/128] fix: hide start watching button in avod platform

---
 .../StartWatchingButton/StartWatchingButton.tsx           | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/ui-react/src/containers/StartWatchingButton/StartWatchingButton.tsx b/packages/ui-react/src/containers/StartWatchingButton/StartWatchingButton.tsx
index e2acb9f79..4bec0458c 100644
--- a/packages/ui-react/src/containers/StartWatchingButton/StartWatchingButton.tsx
+++ b/packages/ui-react/src/containers/StartWatchingButton/StartWatchingButton.tsx
@@ -9,6 +9,8 @@ import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
 import useEntitlement from '@jwp/ott-hooks-react/src/useEntitlement';
 import Play from '@jwp/ott-theme/assets/icons/play.svg?react';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
+import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
 
 import Button from '../../components/Button/Button';
 import Icon from '../../components/Icon/Icon';
@@ -29,6 +31,7 @@ const StartWatchingButton: React.VFC<Props> = ({ item, playUrl, disabled = false
   const breakpoint = useBreakpoint();
 
   // account
+  const accessModel = useConfigStore((state) => state.accessModel);
   const user = useAccountStore((state) => state.user);
   const isLoggedIn = !!user;
 
@@ -70,6 +73,11 @@ const StartWatchingButton: React.VFC<Props> = ({ item, playUrl, disabled = false
     return () => setRequestedMediaOffers(null);
   }, [mediaOffers, setRequestedMediaOffers]);
 
+  // the user can't purchase access in an AVOD platform due to missing configuration, so we hide the button
+  if (accessModel === ACCESS_MODEL.AVOD && !isEntitled) {
+    return null;
+  }
+
   return (
     <Button
       color="primary"

From b700fbb7ea31cde67740bab99246a0b705058c55 Mon Sep 17 00:00:00 2001
From: langemike <mikevv@gmail.com>
Date: Thu, 8 Feb 2024 09:23:09 +0100
Subject: [PATCH 030/128] fix: e2e test optimisations and small fixes

---
 .../common/src/controllers/AccountController.ts  |  2 +-
 .../src/containers/Layout/Layout.module.scss     |  4 ++--
 .../src/pages/LegacySeries/LegacySeries.tsx      |  2 +-
 .../mediaScreens/MediaSeries/MediaSeries.tsx     |  2 +-
 platforms/web/.env                               |  1 +
 .../web/test-e2e/tests/inline_layout_test.ts     |  2 +-
 .../test-e2e/tests/payments/subscription_test.ts | 16 ++++++++++------
 platforms/web/test/types.ts                      |  1 +
 8 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/common/src/controllers/AccountController.ts b/packages/common/src/controllers/AccountController.ts
index b02b27711..c17004d89 100644
--- a/packages/common/src/controllers/AccountController.ts
+++ b/packages/common/src/controllers/AccountController.ts
@@ -181,7 +181,7 @@ export default class AccountController {
         if (error.message.toLowerCase().includes('invalid param email')) {
           throw new FormValidationError({ email: [i18next.t('account:login.wrong_email')] });
         } else {
-          throw new FormValidationError({ email: [i18next.t('account:login.wrong_combination')] });
+          throw new FormValidationError({ form: [i18next.t('account:login.wrong_combination')] });
         }
       }
     }
diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss
index a279f359e..230e9d3b0 100644
--- a/packages/ui-react/src/containers/Layout/Layout.module.scss
+++ b/packages/ui-react/src/containers/Layout/Layout.module.scss
@@ -11,14 +11,14 @@
   flex: 1;
 }
 
-div.footer {
+.footer {
   padding: 20px 40px;
   line-height: 18px;
   letter-spacing: 0.15px;
   text-align: center;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
 
-  > div > a,
+  a,
   a:visited,
   a:active,
   a:hover {
diff --git a/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx b/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx
index 8fed6a372..fb5dec05e 100644
--- a/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx
+++ b/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx
@@ -74,7 +74,7 @@ const LegacySeries = () => {
 
   // User, entitlement
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
-  const { isEntitled, mediaOffers } = useEntitlement(episode);
+  const { isEntitled, mediaOffers } = useEntitlement(episode || firstEpisode);
   const hasMediaOffers = !!mediaOffers.length;
   const isLoggedIn = !!user;
   const hasSubscription = !!subscription;
diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx
index 8718a703f..e95a91a85 100644
--- a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx
@@ -105,7 +105,7 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
 
   // User, entitlement
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
-  const { isEntitled, mediaOffers } = useEntitlement(episode);
+  const { isEntitled, mediaOffers } = useEntitlement(episode || firstEpisode);
   const hasMediaOffers = !!mediaOffers.length;
 
   const isLoggedIn = !!user;
diff --git a/platforms/web/.env b/platforms/web/.env
index aa4aa1497..9093ba1ec 100644
--- a/platforms/web/.env
+++ b/platforms/web/.env
@@ -3,6 +3,7 @@ APP_PLAYER_ID=M4qoGvUk
 
 
 ### Web-only env vars (not sent to common/src/env configureEnv())
+APP_FOOTER_TEXT=\u00a9 JW Player | [jwplayer.com](https://www.jwplayer.com/)
 
 # the default language that the app should load when the language couldn't be detected
 APP_DEFAULT_LANGUAGE=en
diff --git a/platforms/web/test-e2e/tests/inline_layout_test.ts b/platforms/web/test-e2e/tests/inline_layout_test.ts
index 423715e26..601558f11 100644
--- a/platforms/web/test-e2e/tests/inline_layout_test.ts
+++ b/platforms/web/test-e2e/tests/inline_layout_test.ts
@@ -50,7 +50,7 @@ Scenario('I can see the series inline player layout', async ({ I }) => {
   I.see(constants.minecraftAnimationWorkshopDescription);
   I.see('Favorite');
   I.see('Share');
-  I.seeTextEquals('Minecraft Animation Workshop', 'h2');
+  I.seeTextEquals('Minecraft Animation Workshop', 'h1');
   I.see('Season 1', locate({ css: 'select' }).inside(videoListLocator));
   I.see('S1:E2', locate({ css: 'a[aria-label="Basics Of Blender"]' }).inside(videoListLocator));
   I.see('S1:E3', locate({ css: 'a[aria-label="Using Mineways"]' }).inside(videoListLocator));
diff --git a/platforms/web/test-e2e/tests/payments/subscription_test.ts b/platforms/web/test-e2e/tests/payments/subscription_test.ts
index f62c3e3b3..ffa3fe8b2 100644
--- a/platforms/web/test-e2e/tests/payments/subscription_test.ts
+++ b/platforms/web/test-e2e/tests/payments/subscription_test.ts
@@ -13,6 +13,7 @@ const jwProps: ProviderProps = {
   creditCard: constants.creditCard.inplayer,
   applicableTax: 0,
   canRenewSubscription: false,
+  canOpenReceipts: false,
   fieldWrapper: '',
   hasInlineOfferSwitch: true,
 };
@@ -25,6 +26,7 @@ const cleengProps: ProviderProps = {
   creditCard: constants.creditCard.cleeng,
   applicableTax: 21,
   canRenewSubscription: true,
+  canOpenReceipts: false, // Cleeng returns an error on Sandbox making this test flaky
   fieldWrapper: 'iframe',
   hasInlineOfferSwitch: false,
 };
@@ -204,13 +206,15 @@ function runTestSuite(props: ProviderProps, providerName: string) {
 
       I.scrollPageToBottom();
 
-      // Open the invoice which is opened in a new tab
-      I.click('Show receipt');
-      I.switchToNextTab();
+      if (props.canOpenReceipts) {
+        // Open the invoice which is opened in a new tab
+        I.click('Show receipt');
+        I.switchToNextTab();
 
-      // Assert invoice functionality by validating the presence of the purchase button
-      I.seeElement('.purchase-button');
-      I.closeCurrentTab();
+        // Assert invoice functionality by validating the presence of the purchase button
+        I.seeElement('.purchase-button');
+        I.closeCurrentTab();
+      }
     }
   });
 }
diff --git a/platforms/web/test/types.ts b/platforms/web/test/types.ts
index b86ca280c..5eb66a16f 100644
--- a/platforms/web/test/types.ts
+++ b/platforms/web/test/types.ts
@@ -21,6 +21,7 @@ export type ProviderProps = {
   creditCard: string;
   applicableTax: number;
   canRenewSubscription: boolean;
+  canOpenReceipts?: boolean;
   shouldMakePayment?: boolean;
   locale?: string | undefined;
   fieldWrapper?: string;

From ac444bddef87fdf789fa139dcc386c57eaf7d879 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Fri, 9 Feb 2024 21:35:15 +0100
Subject: [PATCH 031/128] refactor: revisit login and register try catch flow

---
 .../src/controllers/AccountController.ts      | 31 ++++++++++---------
 .../common/src/services/FavoriteService.ts    | 11 +++++--
 .../src/services/WatchHistoryService.ts       | 31 ++++++++++++-------
 3 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/packages/common/src/controllers/AccountController.ts b/packages/common/src/controllers/AccountController.ts
index c17004d89..b0a3f7871 100644
--- a/packages/common/src/controllers/AccountController.ts
+++ b/packages/common/src/controllers/AccountController.ts
@@ -171,22 +171,23 @@ export default class AccountController {
     try {
       const response = await this.accountService.login({ email, password, referrer });
 
-      if (!response) throw new Error("Couldn't login");
+      if (response) {
+        await this.afterLogin(response.user, response.customerConsents);
+        await this.favoritesController?.restoreFavorites();
+        await this.watchHistoryController?.restoreWatchHistory();
 
-      await this.afterLogin(response.user, response.customerConsents);
-      await this.favoritesController?.restoreFavorites().catch(logDev);
-      await this.watchHistoryController?.restoreWatchHistory().catch(logDev);
+        return;
+      }
     } catch (error: unknown) {
-      if (error instanceof Error) {
-        if (error.message.toLowerCase().includes('invalid param email')) {
-          throw new FormValidationError({ email: [i18next.t('account:login.wrong_email')] });
-        } else {
-          throw new FormValidationError({ form: [i18next.t('account:login.wrong_combination')] });
-        }
+      if (error instanceof Error && error.message.toLowerCase().includes('invalid param email')) {
+        throw new FormValidationError({ email: [i18next.t('account:login.wrong_email')] });
       }
+    } finally {
+      useAccountStore.setState({ loading: false });
     }
 
-    return useAccountStore.setState({ loading: false });
+    // consider any unknown response as a wrong combinations error (we could specify this even more)
+    throw new FormValidationError({ form: [i18next.t('account:login.wrong_combination')] });
   };
 
   logout = async () => {
@@ -204,6 +205,8 @@ export default class AccountController {
       if (response) {
         const { user, customerConsents } = response;
         await this.afterLogin(user, customerConsents);
+
+        return;
       }
     } catch (error: unknown) {
       if (error instanceof Error) {
@@ -213,14 +216,12 @@ export default class AccountController {
           throw new FormValidationError({ form: [i18next.t('account:registration.user_exists')] });
         } else if (errorMessage.includes('invalid param password')) {
           throw new FormValidationError({ password: [i18next.t('account:registration.invalid_password')] });
-        } else {
-          // in case the endpoint fails
-          throw new FormValidationError({ password: [i18next.t('account:registration.failed_to_create')] });
         }
       }
     }
 
-    return;
+    // in case the endpoint fails
+    throw new FormValidationError({ form: [i18next.t('account:registration.failed_to_create')] });
   };
 
   updateConsents = async (customerConsents: CustomerConsent[]): Promise<ServiceResponse<CustomerConsent[]>> => {
diff --git a/packages/common/src/services/FavoriteService.ts b/packages/common/src/services/FavoriteService.ts
index b7f752b22..e2319b07c 100644
--- a/packages/common/src/services/FavoriteService.ts
+++ b/packages/common/src/services/FavoriteService.ts
@@ -7,6 +7,7 @@ import type { PlaylistItem } from '../../types/playlist';
 import type { Customer } from '../../types/account';
 import { getNamedModule } from '../modules/container';
 import { INTEGRATION_TYPE } from '../modules/types';
+import { logDev } from '../utils/common';
 
 import ApiService from './ApiService';
 import StorageService from './StorageService';
@@ -61,9 +62,15 @@ export default class FavoriteService {
       return [];
     }
 
-    const playlistItems = await this.apiService.getMediaByWatchlist(favoritesList, mediaIds);
+    try {
+      const playlistItems = await this.apiService.getMediaByWatchlist(favoritesList, mediaIds);
 
-    return (playlistItems || []).map((item) => this.createFavorite(item));
+      return (playlistItems || []).map((item) => this.createFavorite(item));
+    } catch (error: unknown) {
+      logDev('Failed to get favorites', error);
+    }
+
+    return [];
   };
 
   serializeFavorites = (favorites: Favorite[]): SerializedFavorite[] => {
diff --git a/packages/common/src/services/WatchHistoryService.ts b/packages/common/src/services/WatchHistoryService.ts
index adc8f34c9..e5df748d3 100644
--- a/packages/common/src/services/WatchHistoryService.ts
+++ b/packages/common/src/services/WatchHistoryService.ts
@@ -6,6 +6,7 @@ import type { SerializedWatchHistoryItem, WatchHistoryItem } from '../../types/w
 import type { Customer } from '../../types/account';
 import { getNamedModule } from '../modules/container';
 import { INTEGRATION_TYPE } from '../modules/types';
+import { logDev } from '../utils/common';
 
 import ApiService from './ApiService';
 import StorageService from './StorageService';
@@ -91,19 +92,25 @@ export default class WatchHistoryService {
       return [];
     }
 
-    const watchHistoryItems = await this.getWatchHistoryItems(continueWatchingList, ids);
-    const seriesItems = await this.getWatchHistorySeriesItems(continueWatchingList, ids);
-
-    return savedItems
-      .map((item) => {
-        const parentSeries = seriesItems?.[item.mediaid];
-        const historyItem = watchHistoryItems[item.mediaid];
+    try {
+      const watchHistoryItems = await this.getWatchHistoryItems(continueWatchingList, ids);
+      const seriesItems = await this.getWatchHistorySeriesItems(continueWatchingList, ids);
+
+      return savedItems
+        .map((item) => {
+          const parentSeries = seriesItems?.[item.mediaid];
+          const historyItem = watchHistoryItems[item.mediaid];
+
+          if (historyItem) {
+            return this.createWatchHistoryItem(parentSeries || historyItem, item.mediaid, parentSeries?.mediaid, item.progress);
+          }
+        })
+        .filter((item): item is WatchHistoryItem => Boolean(item));
+    } catch (error: unknown) {
+      logDev('Failed to get watch history items', error);
+    }
 
-        if (historyItem) {
-          return this.createWatchHistoryItem(parentSeries || historyItem, item.mediaid, parentSeries?.mediaid, item.progress);
-        }
-      })
-      .filter((item): item is WatchHistoryItem => Boolean(item));
+    return [];
   };
 
   serializeWatchHistory = (watchHistory: WatchHistoryItem[]): SerializedWatchHistoryItem[] =>

From 24dde0b090aaba9f905f7b75b6a21420701497c1 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Fri, 9 Feb 2024 21:35:56 +0100
Subject: [PATCH 032/128] refactor: move form validation error and pass all
 errors

---
 packages/common/src/controllers/AccountController.ts            | 2 +-
 packages/common/src/controllers/CheckoutController.ts           | 2 +-
 packages/common/src/{ => errors}/FormValidationError.ts         | 2 +-
 packages/hooks-react/src/useCheckout.ts                         | 2 +-
 packages/hooks-react/src/useForm.ts                             | 2 +-
 .../ui-react/src/containers/AccountModal/forms/Checkout.tsx     | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)
 rename packages/common/src/{ => errors}/FormValidationError.ts (81%)

diff --git a/packages/common/src/controllers/AccountController.ts b/packages/common/src/controllers/AccountController.ts
index b0a3f7871..c20bf8c99 100644
--- a/packages/common/src/controllers/AccountController.ts
+++ b/packages/common/src/controllers/AccountController.ts
@@ -23,7 +23,7 @@ import type { ServiceResponse } from '../../types/service';
 import { useAccountStore } from '../stores/AccountStore';
 import { useConfigStore } from '../stores/ConfigStore';
 import { useProfileStore } from '../stores/ProfileStore';
-import { FormValidationError } from '../FormValidationError';
+import { FormValidationError } from '../errors/FormValidationError';
 
 import WatchHistoryController from './WatchHistoryController';
 import ProfileController from './ProfileController';
diff --git a/packages/common/src/controllers/CheckoutController.ts b/packages/common/src/controllers/CheckoutController.ts
index 66c58ccac..d3995295c 100644
--- a/packages/common/src/controllers/CheckoutController.ts
+++ b/packages/common/src/controllers/CheckoutController.ts
@@ -27,7 +27,7 @@ import type { GetCustomerIP } from '../../types/get-customer-ip';
 import AccountService from '../services/integrations/AccountService';
 import { useCheckoutStore } from '../stores/CheckoutStore';
 import { useAccountStore } from '../stores/AccountStore';
-import { FormValidationError } from '../FormValidationError';
+import { FormValidationError } from '../errors/FormValidationError';
 
 @injectable()
 export default class CheckoutController {
diff --git a/packages/common/src/FormValidationError.ts b/packages/common/src/errors/FormValidationError.ts
similarity index 81%
rename from packages/common/src/FormValidationError.ts
rename to packages/common/src/errors/FormValidationError.ts
index 8f7c310c7..a3d6a5805 100644
--- a/packages/common/src/FormValidationError.ts
+++ b/packages/common/src/errors/FormValidationError.ts
@@ -4,7 +4,7 @@ export class FormValidationError extends Error {
   public errors: FormValidationErrors;
 
   constructor(errors: FormValidationErrors) {
-    super(Object.values(errors)[0][0]);
+    super(Object.values(errors).flat().join(';'));
 
     this.errors = errors;
   }
diff --git a/packages/hooks-react/src/useCheckout.ts b/packages/hooks-react/src/useCheckout.ts
index e493e3f56..8bf6132c8 100644
--- a/packages/hooks-react/src/useCheckout.ts
+++ b/packages/hooks-react/src/useCheckout.ts
@@ -1,6 +1,6 @@
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
-import type { FormValidationError } from '@jwp/ott-common/src/FormValidationError';
+import type { FormValidationError } from '@jwp/ott-common/src/errors/FormValidationError';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
 import { isSVODOffer } from '@jwp/ott-common/src/utils/subscription';
diff --git a/packages/hooks-react/src/useForm.ts b/packages/hooks-react/src/useForm.ts
index 40890e13b..fd5ef87c0 100644
--- a/packages/hooks-react/src/useForm.ts
+++ b/packages/hooks-react/src/useForm.ts
@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import { type AnySchema, ValidationError, SchemaOf } from 'yup';
 import type { FormErrors, GenericFormValues, UseFormBlurHandler, UseFormChangeHandler, UseFormSubmitHandler } from '@jwp/ott-common/types/form';
-import { FormValidationError } from '@jwp/ott-common/src/FormValidationError';
+import { FormValidationError } from '@jwp/ott-common/src/errors/FormValidationError';
 import { useTranslation } from 'react-i18next';
 
 export type UseFormReturnValue<T> = {
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
index 9bfe801e4..df495ccd9 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
@@ -4,7 +4,7 @@ import useCheckout from '@jwp/ott-hooks-react/src/useCheckout';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
-import { FormValidationError } from '@jwp/ott-common/src/FormValidationError';
+import { FormValidationError } from '@jwp/ott-common/src/errors/FormValidationError';
 
 import CheckoutForm from '../../../components/CheckoutForm/CheckoutForm';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';

From 9266111fb9e58841bd793dc1a409fb1c22475e09 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Fri, 9 Feb 2024 21:41:00 +0100
Subject: [PATCH 033/128] refactor: add loading state for publisher consents

---
 packages/common/src/controllers/AccountController.ts      | 4 ++--
 packages/common/src/stores/AccountStore.ts                | 2 ++
 .../src/containers/AccountModal/forms/Registration.tsx    | 8 ++++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/common/src/controllers/AccountController.ts b/packages/common/src/controllers/AccountController.ts
index c20bf8c99..e5b72fe0d 100644
--- a/packages/common/src/controllers/AccountController.ts
+++ b/packages/common/src/controllers/AccountController.ts
@@ -270,10 +270,10 @@ export default class AccountController {
   getPublisherConsents = async () => {
     const { config } = useConfigStore.getState();
 
-    useAccountStore.setState({ loading: true });
+    useAccountStore.setState({ publisherConsentsLoading: true });
     const consents = await this.accountService.getPublisherConsents(config);
 
-    useAccountStore.setState({ publisherConsents: consents, loading: false });
+    useAccountStore.setState({ publisherConsents: consents, publisherConsentsLoading: false });
   };
 
   getCaptureStatus = async (): Promise<GetCaptureStatusResponse> => {
diff --git a/packages/common/src/stores/AccountStore.ts b/packages/common/src/stores/AccountStore.ts
index bbd8c15a3..3521537a7 100644
--- a/packages/common/src/stores/AccountStore.ts
+++ b/packages/common/src/stores/AccountStore.ts
@@ -12,6 +12,7 @@ type AccountStore = {
   activePayment: PaymentDetail | null;
   customerConsents: CustomerConsent[] | null;
   publisherConsents: CustomFormField[] | null;
+  publisherConsentsLoading: boolean;
   pendingOffer: Offer | null;
   setLoading: (loading: boolean) => void;
   getAccountInfo: () => { customerId: string; customer: Customer; customerConsents: CustomerConsent[] | null };
@@ -25,6 +26,7 @@ export const useAccountStore = createStore<AccountStore>('AccountStore', (set, g
   activePayment: null,
   customerConsents: null,
   publisherConsents: null,
+  publisherConsentsLoading: false,
   pendingOffer: null,
   setLoading: (loading: boolean) => set({ loading }),
   getAccountInfo: () => {
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
index fc5bdb1a7..73266fe25 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
@@ -22,7 +22,11 @@ const Registration = () => {
   const [consentValues, setConsentValues] = useState<Record<string, string | boolean>>({});
   const [consentErrors, setConsentErrors] = useState<string[]>([]);
 
-  const { publisherConsents, loading } = useAccountStore(({ publisherConsents, loading }) => ({ publisherConsents, loading }));
+  const { publisherConsents, publisherConsentsLoading, loading } = useAccountStore(({ publisherConsents, publisherConsentsLoading, loading }) => ({
+    publisherConsents,
+    publisherConsentsLoading,
+    loading,
+  }));
 
   const handleChangeConsent: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = ({ currentTarget }) => {
     if (!currentTarget) return;
@@ -84,7 +88,7 @@ const Registration = () => {
       submitting={submitting}
       consentValues={consentValues}
       publisherConsents={publisherConsents}
-      loading={loading}
+      loading={loading || publisherConsentsLoading}
       canSubmit={!!values.email && !!values.password}
     />
   );

From 0837944dc4d022ecfe95d6e3f30959d943be9e99 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Fri, 9 Feb 2024 21:46:21 +0100
Subject: [PATCH 034/128] fix: set wrong loading state in early return

---
 packages/common/src/controllers/AccountController.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/common/src/controllers/AccountController.ts b/packages/common/src/controllers/AccountController.ts
index e5b72fe0d..7a7c64b46 100644
--- a/packages/common/src/controllers/AccountController.ts
+++ b/packages/common/src/controllers/AccountController.ts
@@ -408,7 +408,7 @@ export default class AccountController {
     if (accessModel !== 'SVOD') {
       await this.refreshEntitlements?.();
 
-      return useAccountStore.setState({ loading: true });
+      return useAccountStore.setState({ loading: false });
     }
 
     const [activeSubscription, transactions, activePayment] = await Promise.all([

From bf3e5b575624580a38301968a63023748bd9a6df Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Fri, 9 Feb 2024 22:04:02 +0100
Subject: [PATCH 035/128] fix: update order error handling

---
 .../src/controllers/CheckoutController.ts     | 40 +++++++++----------
 1 file changed, 18 insertions(+), 22 deletions(-)

diff --git a/packages/common/src/controllers/CheckoutController.ts b/packages/common/src/controllers/CheckoutController.ts
index d3995295c..d93a9f7d5 100644
--- a/packages/common/src/controllers/CheckoutController.ts
+++ b/packages/common/src/controllers/CheckoutController.ts
@@ -16,7 +16,6 @@ import type {
   Payment,
   PaymentMethod,
   SwitchOffer,
-  UpdateOrderPayload,
 } from '../../types/checkout';
 import CheckoutService from '../services/integrations/CheckoutService';
 import SubscriptionService from '../services/integrations/SubscriptionService';
@@ -73,36 +72,33 @@ export default class CheckoutController {
   };
 
   updateOrder = async (order: Order, paymentMethodId?: number, couponCode?: string | null): Promise<void> => {
-    const updateOrderPayload: UpdateOrderPayload = {
-      order,
-      paymentMethodId,
-      couponCode,
-    };
+    let response;
 
     try {
-      const response = await this.checkoutService.updateOrder(updateOrderPayload);
-
-      if (response.errors.length > 0) {
-        // clear the order when the order doesn't exist on the server
-        if (response.errors[0].includes(`Order with ${order.id} not found`)) {
-          useCheckoutStore.getState().setOrder(null);
-        }
+      response = await this.checkoutService.updateOrder({ order, paymentMethodId, couponCode });
+    } catch (error: unknown) {
+      // TODO: we currently (falsely) assume that the only error caught is because the coupon is not valid, but there
+      //  could be a network failure as well (JWPCheckoutService)
+      throw new FormValidationError({ couponCode: [i18next.t('account:checkout.coupon_not_valid')] });
+    }
 
-        throw new FormValidationError({ order: [response.errors[0]] });
+    if (response.errors.length > 0) {
+      // clear the order when the order doesn't exist on the server
+      if (response.errors[0].includes(`Order with ${order.id} not found`)) {
+        useCheckoutStore.getState().setOrder(null);
       }
 
-      if (response.responseData?.order) {
-        useCheckoutStore.getState().setOrder(response.responseData?.order);
-      }
-    } catch (error: unknown) {
-      if (error instanceof FormValidationError) {
-        throw error;
+      // TODO: this handles the `Coupon ${couponCode} not found` message (CleengCheckoutService)
+      if (response.errors[0].includes(`not found`)) {
+        throw new FormValidationError({ couponCode: [i18next.t('account:checkout.coupon_not_valid')] });
       }
 
-      throw new FormValidationError({ couponCode: [i18next.t('account:checkout.coupon_not_valid')] });
+      throw new FormValidationError({ form: response.errors });
     }
 
-    return;
+    if (response.responseData.order) {
+      useCheckoutStore.getState().setOrder(response.responseData?.order);
+    }
   };
 
   getPaymentMethods = async (): Promise<PaymentMethod[]> => {

From 7119a79a9ea3c1fef34c5138408ded36f8c7e4aa Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Fri, 9 Feb 2024 22:22:43 +0100
Subject: [PATCH 036/128] refactor: simplify path constants

---
 packages/common/src/paths.tsx                 | 32 +++++++++----------
 .../common/src/utils/urlFormatting.test.ts    |  4 +--
 packages/common/src/utils/urlFormatting.ts    |  4 +--
 packages/ui-react/src/pages/User/User.tsx     | 25 +++++++++------
 4 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/packages/common/src/paths.tsx b/packages/common/src/paths.tsx
index 2c90a7fb4..c0cf2530d 100644
--- a/packages/common/src/paths.tsx
+++ b/packages/common/src/paths.tsx
@@ -7,22 +7,20 @@ export const PATH_LEGACY_SERIES = '/s/:id/*';
 export const PATH_SEARCH = '/q/*';
 export const PATH_ABOUT = '/o/about';
 
-export const PATH_USER = '/u/*';
-export const PATH_USER_ACCOUNT = '/u/my-account';
-export const PATH_USER_MY_PROFILE = '/u/my-profile/:id';
-export const PATH_USER_FAVORITES = '/u/favorites';
-export const PATH_USER_PAYMENTS = '/u/payments';
-export const PATH_USER_PROFILES = '/u/profiles';
-export const PATH_USER_PROFILES_CREATE = '/u/profiles/create';
-export const PATH_USER_PROFILES_EDIT = '/u/profiles/edit';
-export const PATH_USER_PROFILES_EDIT_PROFILE = '/u/profiles/edit/:id';
+export const PATH_USER_BASE = '/u';
+export const PATH_USER = `${PATH_USER_BASE}/*`;
 
-// Get a nested path without the parent prefix (for nested routes)
-// I.E.: getNestedPath('/u/*', '/u/my-account') => 'my-account'
-const getNestedPath = (parentPath: string, fullPath: string) => fullPath.replace(parentPath.replace('*', ''), '');
+export const RELATIVE_PATH_USER_ACCOUNT = 'my-account';
+export const RELATIVE_PATH_USER_MY_PROFILE = 'my-profile/:id';
+export const RELATIVE_PATH_USER_FAVORITES = 'favorites';
+export const RELATIVE_PATH_USER_PAYMENTS = 'payments';
+export const RELATIVE_PATH_USER_PROFILES = 'profiles';
 
-export const NESTED_PATH_USER_ACCOUNT = getNestedPath(PATH_USER, PATH_USER_ACCOUNT);
-export const NESTED_PATH_USER_MY_PROFILE = getNestedPath(PATH_USER, PATH_USER_MY_PROFILE);
-export const NESTED_PATH_USER_FAVORITES = getNestedPath(PATH_USER, PATH_USER_FAVORITES);
-export const NESTED_PATH_USER_PAYMENTS = getNestedPath(PATH_USER, PATH_USER_PAYMENTS);
-export const NESTED_PATH_USER_PROFILES = getNestedPath(PATH_USER, PATH_USER_PROFILES);
+export const PATH_USER_ACCOUNT = `${PATH_USER_BASE}/${RELATIVE_PATH_USER_ACCOUNT}`;
+export const PATH_USER_MY_PROFILE = `${PATH_USER_BASE}/${RELATIVE_PATH_USER_MY_PROFILE}`;
+export const PATH_USER_FAVORITES = `${PATH_USER_BASE}/${RELATIVE_PATH_USER_FAVORITES}`;
+export const PATH_USER_PAYMENTS = `${PATH_USER_BASE}/${RELATIVE_PATH_USER_PAYMENTS}`;
+export const PATH_USER_PROFILES = `${PATH_USER_BASE}/${RELATIVE_PATH_USER_PROFILES}`;
+export const PATH_USER_PROFILES_CREATE = `${PATH_USER_BASE}/${RELATIVE_PATH_USER_PROFILES}/create`;
+export const PATH_USER_PROFILES_EDIT = `${PATH_USER_BASE}/${RELATIVE_PATH_USER_PROFILES}/edit`;
+export const PATH_USER_PROFILES_EDIT_PROFILE = `${PATH_USER_BASE}/${RELATIVE_PATH_USER_PROFILES}/edit/:id`;
diff --git a/packages/common/src/utils/urlFormatting.test.ts b/packages/common/src/utils/urlFormatting.test.ts
index ab41efd2d..22b439c48 100644
--- a/packages/common/src/utils/urlFormatting.test.ts
+++ b/packages/common/src/utils/urlFormatting.test.ts
@@ -3,7 +3,7 @@ import epgChannelsFixture from '@jwp/ott-testing/fixtures/epgChannels.json';
 
 import type { Playlist, PlaylistItem } from '../../types/playlist';
 import type { EpgChannel } from '../../types/epg';
-import { NESTED_PATH_USER_ACCOUNT } from '../paths';
+import { RELATIVE_PATH_USER_ACCOUNT } from '../paths';
 
 import { createURL, liveChannelsURL, mediaURL, playlistURL, userProfileURL } from './urlFormatting';
 
@@ -59,7 +59,7 @@ describe('createPath, mediaURL, playlistURL and liveChannelsURL', () => {
     expect(url).toEqual('/u/my-profile/testprofile123');
   });
   test('valid nested user path', () => {
-    const url = NESTED_PATH_USER_ACCOUNT;
+    const url = RELATIVE_PATH_USER_ACCOUNT;
 
     expect(url).toEqual('my-account');
   });
diff --git a/packages/common/src/utils/urlFormatting.ts b/packages/common/src/utils/urlFormatting.ts
index e0e4020ef..4ce11e919 100644
--- a/packages/common/src/utils/urlFormatting.ts
+++ b/packages/common/src/utils/urlFormatting.ts
@@ -1,5 +1,5 @@
 import type { PlaylistItem } from '../../types/playlist';
-import { NESTED_PATH_USER_MY_PROFILE, PATH_MEDIA, PATH_PLAYLIST, PATH_USER_MY_PROFILE } from '../paths';
+import { RELATIVE_PATH_USER_MY_PROFILE, PATH_MEDIA, PATH_PLAYLIST, PATH_USER_MY_PROFILE } from '../paths';
 
 import { getLegacySeriesPlaylistIdFromEpisodeTags, getSeriesPlaylistIdFromCustomParams } from './media';
 
@@ -111,7 +111,7 @@ export const liveChannelsURL = (playlistId: string, channelId?: string, play = f
 };
 
 export const userProfileURL = (profileId: string, nested = false) => {
-  const path = nested ? NESTED_PATH_USER_MY_PROFILE : PATH_USER_MY_PROFILE;
+  const path = nested ? RELATIVE_PATH_USER_MY_PROFILE : PATH_USER_MY_PROFILE;
 
   return createPath(path, { id: profileId });
 };
diff --git a/packages/ui-react/src/pages/User/User.tsx b/packages/ui-react/src/pages/User/User.tsx
index 89840061d..48c67d0ea 100644
--- a/packages/ui-react/src/pages/User/User.tsx
+++ b/packages/ui-react/src/pages/User/User.tsx
@@ -16,7 +16,12 @@ import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react'
 import BalanceWallet from '@jwp/ott-theme/assets/icons/balance_wallet.svg?react';
 import Exit from '@jwp/ott-theme/assets/icons/exit.svg?react';
 import Favorite from '@jwp/ott-theme/assets/icons/favorite.svg?react';
-import { NESTED_PATH_USER_ACCOUNT, NESTED_PATH_USER_FAVORITES, NESTED_PATH_USER_MY_PROFILE, NESTED_PATH_USER_PAYMENTS } from '@jwp/ott-common/src/paths';
+import {
+  RELATIVE_PATH_USER_ACCOUNT,
+  RELATIVE_PATH_USER_FAVORITES,
+  RELATIVE_PATH_USER_MY_PROFILE,
+  RELATIVE_PATH_USER_PAYMENTS,
+} from '@jwp/ott-common/src/paths';
 import { userProfileURL } from '@jwp/ott-common/src/utils/urlFormatting';
 
 import AccountComponent from '../../components/Account/Account';
@@ -103,7 +108,7 @@ const User = (): JSX.Element => {
               {(!profilesEnabled || !profileAndFavoritesPage) && (
                 <li>
                   <Button
-                    to={NESTED_PATH_USER_ACCOUNT}
+                    to={RELATIVE_PATH_USER_ACCOUNT}
                     label={t('nav.account')}
                     variant="text"
                     startIcon={<Icon icon={AccountCircle} />}
@@ -114,7 +119,7 @@ const User = (): JSX.Element => {
               {favoritesList && (!profilesEnabled || profileAndFavoritesPage) && (
                 <li>
                   <Button
-                    to={NESTED_PATH_USER_FAVORITES}
+                    to={RELATIVE_PATH_USER_FAVORITES}
                     label={t('nav.favorites')}
                     variant="text"
                     startIcon={<Icon icon={Favorite} />}
@@ -126,7 +131,7 @@ const User = (): JSX.Element => {
               {accessModel !== ACCESS_MODEL.AVOD && (!profilesEnabled || !profileAndFavoritesPage) && (
                 <li>
                   <Button
-                    to={NESTED_PATH_USER_PAYMENTS}
+                    to={RELATIVE_PATH_USER_PAYMENTS}
                     label={t('nav.payments')}
                     variant="text"
                     startIcon={<Icon icon={BalanceWallet} />}
@@ -147,13 +152,13 @@ const User = (): JSX.Element => {
       <div className={styles.mainColumn}>
         <Routes>
           <Route
-            path={NESTED_PATH_USER_ACCOUNT}
+            path={RELATIVE_PATH_USER_ACCOUNT}
             element={<AccountComponent panelClassName={styles.panel} panelHeaderClassName={styles.panelHeader} canUpdateEmail={canUpdateEmail} />}
           />
-          {profilesEnabled && <Route path={NESTED_PATH_USER_MY_PROFILE} element={<EditProfile contained />} />}
+          {profilesEnabled && <Route path={RELATIVE_PATH_USER_MY_PROFILE} element={<EditProfile contained />} />}
           {favoritesList && (
             <Route
-              path={NESTED_PATH_USER_FAVORITES}
+              path={RELATIVE_PATH_USER_FAVORITES}
               element={
                 <>
                   <PlaylistContainer type={PersonalShelf.Favorites} showEmpty>
@@ -183,10 +188,10 @@ const User = (): JSX.Element => {
             />
           )}
           <Route
-            path={NESTED_PATH_USER_PAYMENTS}
-            element={accessModel !== ACCESS_MODEL.AVOD ? <PaymentContainer /> : <Navigate to={NESTED_PATH_USER_ACCOUNT} />}
+            path={RELATIVE_PATH_USER_PAYMENTS}
+            element={accessModel !== ACCESS_MODEL.AVOD ? <PaymentContainer /> : <Navigate to={RELATIVE_PATH_USER_ACCOUNT} />}
           />
-          <Route path="*" element={<Navigate to={NESTED_PATH_USER_ACCOUNT} />} />
+          <Route path="*" element={<Navigate to={RELATIVE_PATH_USER_ACCOUNT} />} />
         </Routes>
       </div>
     </div>

From ff28a07ec756763e3e98dbf5758e08edf66a89bc Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Fri, 9 Feb 2024 22:23:20 +0100
Subject: [PATCH 037/128] refactor: use keyed object in submit paypal method

---
 packages/common/src/controllers/CheckoutController.ts     | 6 ++++--
 packages/hooks-react/src/useCheckout.ts                   | 8 ++++++--
 .../src/containers/AccountModal/forms/Checkout.tsx        | 4 ++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/common/src/controllers/CheckoutController.ts b/packages/common/src/controllers/CheckoutController.ts
index d93a9f7d5..d9801546f 100644
--- a/packages/common/src/controllers/CheckoutController.ts
+++ b/packages/common/src/controllers/CheckoutController.ts
@@ -206,7 +206,7 @@ export default class CheckoutController {
     cancelUrl: string;
     errorUrl: string;
     couponCode: string;
-  }): Promise<string> => {
+  }): Promise<{ redirectUrl: string }> => {
     const { order } = useCheckoutStore.getState();
 
     if (!order) throw new Error('No order created');
@@ -222,7 +222,9 @@ export default class CheckoutController {
 
     if (response.errors.length > 0) throw new Error(response.errors[0]);
 
-    return response.responseData.redirectUrl;
+    return {
+      redirectUrl: response.responseData.redirectUrl,
+    };
   };
 
   getSubscriptionSwitches = async (): Promise<unknown> => {
diff --git a/packages/hooks-react/src/useCheckout.ts b/packages/hooks-react/src/useCheckout.ts
index 8bf6132c8..af93f6080 100644
--- a/packages/hooks-react/src/useCheckout.ts
+++ b/packages/hooks-react/src/useCheckout.ts
@@ -11,7 +11,7 @@ import { useMutation } from 'react-query';
 type Props = {
   onUpdateOrderSuccess?: () => void;
   onSubmitPaymentWithoutDetailsSuccess: () => void;
-  onSubmitPaypalPaymentSuccess: (redirectUrl: string) => void;
+  onSubmitPaypalPaymentSuccess: (response: { redirectUrl: string }) => void;
   onSubmitStripePaymentSuccess: () => void;
 };
 
@@ -52,7 +52,11 @@ const useCheckout = ({ onUpdateOrderSuccess, onSubmitPaymentWithoutDetailsSucces
     },
   });
 
-  const submitPaymentPaypal = useMutation<string, Error, { successUrl: string; waitingUrl: string; cancelUrl: string; errorUrl: string; couponCode: string }>({
+  const submitPaymentPaypal = useMutation<
+    { redirectUrl: string },
+    Error,
+    { successUrl: string; waitingUrl: string; cancelUrl: string; errorUrl: string; couponCode: string }
+  >({
     mutationKey: ['submitPaymentPaypal'],
     mutationFn: checkoutController.paypalPayment,
     onSuccess: onSubmitPaypalPaymentSuccess,
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
index df495ccd9..80143c64f 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
@@ -31,8 +31,8 @@ const Checkout = () => {
     useCheckout({
       onUpdateOrderSuccess: () => !!couponCode && setShowCouponCodeSuccess(true),
       onSubmitPaymentWithoutDetailsSuccess: () => navigate(offerType === 'svod' ? welcomeUrl : closeModalUrl, { replace: true }),
-      onSubmitPaypalPaymentSuccess: (paypalUrl: string) => {
-        window.location.href = paypalUrl;
+      onSubmitPaypalPaymentSuccess: ({ redirectUrl }) => {
+        window.location.href = redirectUrl;
       },
       onSubmitStripePaymentSuccess: () => navigate(modalURLFromLocation(location, 'waiting-for-payment'), { replace: true }),
     });

From 5e1e84a2afb0a1b1c8b97921a862144598ffb72b Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 12 Feb 2024 11:05:08 +0100
Subject: [PATCH 038/128] chore: revert config footer text removal

---
 packages/common/src/services/ConfigService.ts      | 4 +++-
 packages/common/src/utils/configSchema.ts          | 1 +
 packages/common/types/config.ts                    | 4 ++++
 packages/ui-react/src/containers/Layout/Layout.tsx | 5 +++--
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/common/src/services/ConfigService.ts b/packages/common/src/services/ConfigService.ts
index 09b2cebe0..6c17f682e 100644
--- a/packages/common/src/services/ConfigService.ts
+++ b/packages/common/src/services/ConfigService.ts
@@ -28,7 +28,9 @@ export default class ConfigService {
     content: [],
     menu: [],
     integrations: {},
-    styling: {},
+    styling: {
+      footerText: '',
+    },
     features: {},
   };
 
diff --git a/packages/common/src/utils/configSchema.ts b/packages/common/src/utils/configSchema.ts
index 7ef70b950..af6ffc382 100644
--- a/packages/common/src/utils/configSchema.ts
+++ b/packages/common/src/utils/configSchema.ts
@@ -41,6 +41,7 @@ const stylingSchema: SchemaOf<Styling> = object({
   backgroundColor: string().nullable(),
   highlightColor: string().nullable(),
   headerBackground: string().nullable(),
+  footerText: string().nullable(),
 });
 
 export const configSchema: SchemaOf<Config> = object({
diff --git a/packages/common/types/config.ts b/packages/common/types/config.ts
index 442dc85f1..7e60bfee8 100644
--- a/packages/common/types/config.ts
+++ b/packages/common/types/config.ts
@@ -59,6 +59,10 @@ export type Styling = {
   backgroundColor?: string | null;
   highlightColor?: string | null;
   headerBackground?: string | null;
+  /**
+   * @deprecated the footerText is present in the config, but can't be updated in the JWP Dashboard
+   */
+  footerText?: string | null;
 };
 
 export type Cleeng = {
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index 2a4a67aad..afa2a7d64 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -39,9 +39,10 @@ const Layout = () => {
   );
   const isLoggedIn = !!useAccountStore(({ user }) => user);
   const favoritesEnabled = !!config.features?.favoritesList;
-  const { menu, assets, siteName, description, features } = config;
+  const { menu, assets, siteName, description, features, styling } = config;
   const metaDescription = description || t('default_description');
-  const footerText = unicodeToChar(env.APP_FOOTER_TEXT);
+  const { footerText: configFooterText } = styling || {};
+  const footerText = configFooterText || unicodeToChar(env.APP_FOOTER_TEXT);
 
   const profileController = getModule(ProfileController, false);
 

From dd8d484c8f3d9e0405e7e2eab1ee44d18b7ac76d Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 20 Feb 2024 09:46:36 +0100
Subject: [PATCH 039/128] refactor: render error to component

---
 platforms/web/src/containers/Root/Root.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/platforms/web/src/containers/Root/Root.tsx b/platforms/web/src/containers/Root/Root.tsx
index 582a1382d..0b46529d4 100644
--- a/platforms/web/src/containers/Root/Root.tsx
+++ b/platforms/web/src/containers/Root/Root.tsx
@@ -18,7 +18,7 @@ import { useTrackConfigKeyChange } from '#src/hooks/useTrackConfigKeyChange';
 
 const IS_DEMO_OR_PREVIEW = IS_DEMO_MODE || IS_PREVIEW_MODE;
 
-const renderError = (error: Error | AppError) => {
+const BootstrapError = ({ error }: { error: Error | AppError }) => {
   if (error instanceof AppError) {
     return <ErrorPage title={error.payload.title} message={error.payload.description} helpLink={error.payload.helpLink} error={error} />;
   }
@@ -33,7 +33,7 @@ const ProdContentLoader = ({ query }: { query: BootstrapData }) => {
   }
 
   if (error) {
-    return renderError(error);
+    return <BootstrapError error={error} />;
   }
 
   return null;
@@ -52,7 +52,7 @@ const DemoContentLoader = ({ query }: { query: BootstrapData }) => {
   return (
     <>
       {/* Show the error page when error except in demo mode (the demo mode shows its own error) */}
-      {!IS_DEMO_OR_PREVIEW && error && renderError(error)}
+      {!IS_DEMO_OR_PREVIEW && error && <BootstrapError error={error} />}
       {IS_DEMO_OR_PREVIEW && <DemoConfigDialog query={query} />}
       {/* Config select control to improve testing experience */}
       {(IS_DEVELOPMENT_BUILD || IS_PREVIEW_MODE) && <DevConfigSelector selectedConfig={configSource} />}

From 3fdb220ef988383e6af80b72efb7c7d27e6bccb7 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 20 Feb 2024 10:14:46 +0100
Subject: [PATCH 040/128] fix: restore personal shelves after registration

---
 .../src/controllers/AccountController.ts      | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/common/src/controllers/AccountController.ts b/packages/common/src/controllers/AccountController.ts
index 7a7c64b46..36dae7e8d 100644
--- a/packages/common/src/controllers/AccountController.ts
+++ b/packages/common/src/controllers/AccountController.ts
@@ -66,8 +66,6 @@ export default class AccountController {
 
       if (authData) {
         await this.getAccount();
-        await this.watchHistoryController.restoreWatchHistory();
-        await this.favoritesController.restoreFavorites();
       }
     } catch (error: unknown) {
       logDev('Failed to get user', error);
@@ -145,10 +143,9 @@ export default class AccountController {
 
     try {
       const response = await this.accountService.getUser({ config });
+
       if (response) {
         await this.afterLogin(response.user, response.customerConsents);
-        await this.favoritesController.restoreFavorites().catch(logDev);
-        await this.watchHistoryController.restoreWatchHistory().catch(logDev);
       }
 
       useAccountStore.setState({ loading: false });
@@ -289,7 +286,10 @@ export default class AccountController {
 
     const updatedCustomer = await this.accountService.updateCaptureAnswers({ customer, ...capture });
 
-    await this.afterLogin(updatedCustomer, customerConsents, false);
+    useAccountStore.setState({
+      user: updatedCustomer,
+      customerConsents,
+    });
 
     return updatedCustomer;
   };
@@ -499,7 +499,12 @@ export default class AccountController {
       customerConsents,
     });
 
-    await Promise.allSettled([shouldReloadSubscription ? this.reloadSubscriptions() : Promise.resolve(), this.getPublisherConsents()]);
+    await Promise.allSettled([
+      shouldReloadSubscription ? this.reloadSubscriptions() : Promise.resolve(),
+      this.getPublisherConsents(),
+      this.favoritesController.restoreFavorites(),
+      this.watchHistoryController.restoreWatchHistory(),
+    ]);
     useAccountStore.setState({ loading: false });
   }
 
@@ -533,7 +538,7 @@ export default class AccountController {
 
     this.profileController.unpersistProfile();
 
-    await this.favoritesController.restoreFavorites().catch(logDev);
-    await this.watchHistoryController.restoreWatchHistory().catch(logDev);
+    await this.favoritesController.restoreFavorites();
+    await this.watchHistoryController.restoreWatchHistory();
   };
 }

From 2741eac5331657ed6156a9e5fba1906c8623227b Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 20 Feb 2024 14:03:57 +0100
Subject: [PATCH 041/128] fix: personal shelves restoration

---
 .../common/src/controllers/AccountController.ts   | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/common/src/controllers/AccountController.ts b/packages/common/src/controllers/AccountController.ts
index 36dae7e8d..bc51b6c59 100644
--- a/packages/common/src/controllers/AccountController.ts
+++ b/packages/common/src/controllers/AccountController.ts
@@ -170,9 +170,6 @@ export default class AccountController {
 
       if (response) {
         await this.afterLogin(response.user, response.customerConsents);
-        await this.favoritesController?.restoreFavorites();
-        await this.watchHistoryController?.restoreWatchHistory();
-
         return;
       }
     } catch (error: unknown) {
@@ -201,7 +198,7 @@ export default class AccountController {
 
       if (response) {
         const { user, customerConsents } = response;
-        await this.afterLogin(user, customerConsents);
+        await this.afterLogin(user, customerConsents, true);
 
         return;
       }
@@ -493,18 +490,20 @@ export default class AccountController {
     return this.features;
   }
 
-  private async afterLogin(user: Customer, customerConsents: CustomerConsent[] | null, shouldReloadSubscription = true) {
+  private async afterLogin(user: Customer, customerConsents: CustomerConsent[] | null, registration = false) {
     useAccountStore.setState({
       user,
       customerConsents,
     });
 
     await Promise.allSettled([
-      shouldReloadSubscription ? this.reloadSubscriptions() : Promise.resolve(),
+      this.reloadSubscriptions(),
       this.getPublisherConsents(),
-      this.favoritesController.restoreFavorites(),
-      this.watchHistoryController.restoreWatchHistory(),
+      // after registration, transfer the personal shelves to the account
+      registration ? this.favoritesController.persistFavorites() : this.favoritesController.restoreFavorites(),
+      registration ? this.watchHistoryController.persistWatchHistory() : this.watchHistoryController.restoreWatchHistory(),
     ]);
+
     useAccountStore.setState({ loading: false });
   }
 

From cc02259ddb8faeed27813ddce850b5653fe1d0d3 Mon Sep 17 00:00:00 2001
From: langemike <mikevv@gmail.com>
Date: Wed, 24 Jan 2024 13:15:23 +0100
Subject: [PATCH 042/128] feat(a11y): many accessibility optimisations

fix(a11y): prevent double ids on inputs by requiring a name

feat(a11y): apply aria-modal attribute and move header landmark (#48)

feat(a11y): update button role and html structure of account and player pages (#47)

feat(a11y): add correct text markups and aria attributes (#46)

feat(home): add (geo) error message when all playlists are empty

feat(a11y): add form error announcement

feat(a11y): add solid header background color to ensure accessibility

feat(a11y): implement aria-invalid and aria-described by to inputs on error

feat(project): add google fonts from env vars

feat: keyboard accessible LayoutGrid

feat: optimize featured shelf slider for accessibility

feat(a11y): accessible sidebar & <main> landmark

feat(a11y): enhance dialog and modals accessibility

fix(a11y): alt text for images for EPG

fix(a11y): empty alt for image because of adjacent text alternative

fix(a11y): fix arrow keys for offer radio buttons

fix(a11y): skiplink first element

feat(a11y): improve html structure for VideoListItem

fix(e2e): cardgrid card navigation

feat(a11y): apply lang attribute to custom fields

feat(a11y): accessible focus outline
---
 packages/common/src/constants.ts              |   2 +-
 packages/common/src/env.ts                    |  10 +
 packages/common/src/utils/common.ts           |  24 +
 packages/hooks-react/src/usePlaylists.ts      |  73 +++
 packages/testing/fixtures/favorites.json      | 417 ++++++++++++++
 .../src/components/Account/Account.tsx        |  38 +-
 .../__snapshots__/Account.test.tsx.snap       |  52 +-
 .../src/components/Button/Button.module.scss  |  16 +-
 .../ui-react/src/components/Button/Button.tsx |   2 +-
 .../Button/__snapshots__/Button.test.tsx.snap |   1 +
 .../CancelSubscriptionForm.tsx                |   1 +
 .../CancelSubscriptionForm.test.tsx.snap      |   2 +
 .../src/components/Card/Card.module.scss      |   7 +-
 .../ui-react/src/components/Card/Card.tsx     |  23 +-
 .../src/components/CardGrid/CardGrid.tsx      |  40 +-
 .../__snapshots__/CardGrid.test.tsx.snap      |  36 +-
 .../src/components/Checkbox/Checkbox.tsx      |  20 +-
 .../__snapshots__/Checkbox.test.tsx.snap      |   1 +
 .../CheckoutForm/CheckoutForm.module.scss     |  13 +-
 .../components/CheckoutForm/CheckoutForm.tsx  |   2 +-
 .../__snapshots__/CheckoutForm.test.tsx.snap  |  47 +-
 .../ChooseOfferForm.module.scss               |  15 +-
 .../ChooseOfferForm/ChooseOfferForm.test.tsx  |  16 +-
 .../ChooseOfferForm/ChooseOfferForm.tsx       |  96 ++--
 .../ChooseOfferForm.test.tsx.snap             |   9 +-
 .../CollapsibleText/CollapsibleText.tsx       |  11 +-
 .../CollapsibleText.test.tsx.snap             |   4 +-
 .../ConfirmationDialog/ConfirmationDialog.tsx |   6 +-
 .../ConfirmationForm.test.tsx.snap            |   1 +
 .../CreditCardCVCField.test.tsx.snap          |   3 +
 .../CreditCardExpiryField.test.tsx.snap       |   3 +
 .../CreditCardNumberField.test.tsx.snap       |   3 +
 .../CustomRegisterField.tsx                   |  20 +-
 .../CustomRegisterField.test.tsx.snap         |  20 +-
 .../src/components/DateField/DateField.tsx    |  15 +-
 .../DeleteAccountModal/DeleteAccountModal.tsx |  21 +-
 .../DevConfigSelector/DevConfigSelector.tsx   |   1 +
 .../ui-react/src/components/Dialog/Dialog.tsx |  15 +-
 .../Dialog/__snapshots__/Dialog.test.tsx.snap |   6 +-
 .../DialogBackButton/DialogBackButton.tsx     |   5 +-
 .../DialogBackButton.test.tsx.snap            |   2 +-
 .../src/components/Dropdown/Dropdown.tsx      |  20 +-
 .../EditCardPaymentForm.tsx                   |  12 +-
 .../EditPasswordForm.test.tsx.snap            |  12 +
 packages/ui-react/src/components/Epg/Epg.tsx  |   8 +-
 .../components/EpgChannel/EpgChannelItem.tsx  |   6 +-
 .../EpgProgramItem/EpgProgramItem.tsx         |   3 +-
 .../src/components/ErrorPage/ErrorPage.tsx    |  38 +-
 .../__snapshots__/ErrorPage.test.tsx.snap     |  16 +-
 .../components/Favorites/Favorites.test.tsx   |  17 +-
 .../src/components/Favorites/Favorites.tsx    |  15 +-
 .../__snapshots__/Favorites.test.tsx.snap     | 177 +++++-
 .../Filter/__snapshots__/Filter.test.tsx.snap |   4 +
 .../FinalizePayment/FinalizePayment.tsx       |   3 +
 .../ForgotPasswordForm.test.tsx.snap          |   3 +
 .../ui-react/src/components/Form/Form.tsx     |   1 +
 .../src/components/Form/FormSection.tsx       |   1 -
 .../FormFeedback/FormFeedback.module.scss     |  12 +
 .../components/FormFeedback/FormFeedback.tsx  |  20 +-
 .../__snapshots__/FormFeedback.test.tsx.snap  |   1 +
 .../src/components/Header/Header.test.tsx     |   1 +
 .../ui-react/src/components/Header/Header.tsx |  22 +-
 .../Header/__snapshots__/Header.test.tsx.snap |  18 +-
 .../src/components/HelperText/HelperText.tsx  |  12 +-
 .../__snapshots__/HelperText.test.tsx.snap    |   2 +
 .../IconButton/IconButton.module.scss         |   1 +
 .../LayoutGrid/LayoutGrid.module.scss         |   8 +
 .../src/components/LayoutGrid/LayoutGrid.tsx  | 153 +++++
 .../src/components/LoginForm/LoginForm.tsx    |   2 +-
 .../__snapshots__/LoginForm.test.tsx.snap     |   6 +
 .../MarkdownComponent/MarkdownComponent.tsx   |   5 +-
 .../src/components/MenuButton/MenuButton.tsx  |   3 +-
 .../__snapshots__/MenuButton.test.tsx.snap    |   1 -
 .../src/components/Modal/Modal.test.tsx       |   5 +-
 .../ui-react/src/components/Modal/Modal.tsx   |  25 +-
 .../NoPaymentRequired.test.tsx.snap           |   1 +
 .../__snapshots__/PasswordField.test.tsx.snap |   6 +
 .../PayPal/__snapshots__/PayPal.test.tsx.snap |   1 +
 .../src/components/Payment/Payment.tsx        |  17 +-
 .../__snapshots__/Payment.test.tsx.snap       |  51 +-
 .../__snapshots__/PaymentFailed.test.tsx.snap |   1 +
 .../PaymentMethodForm.module.scss             |  13 +-
 .../PaymentMethodForm/PaymentMethodForm.tsx   |   8 +-
 .../PersonalDetailsForm.test.tsx.snap         | 113 +++-
 .../components/Popover/Popover.module.scss    |   2 +-
 .../__snapshots__/Popover.test.tsx.snap       |   1 -
 .../src/components/Radio/Radio.module.scss    |   5 +-
 .../ui-react/src/components/Radio/Radio.tsx   |  25 +-
 .../Radio/__snapshots__/Radio.test.tsx.snap   |  13 +-
 .../RegistrationForm/RegistrationForm.tsx     |  49 +-
 .../RegistrationForm.test.tsx.snap            |   8 +
 .../RenewSubscriptionForm.tsx                 |   1 +
 .../RenewSubscriptionForm.test.tsx.snap       |   2 +
 .../ResetPasswordForm/ResetPasswordForm.tsx   |   2 +-
 .../ResetPasswordForm.test.tsx.snap           |   2 +
 .../__snapshots__/ShareButton.test.tsx.snap   |   1 +
 .../src/components/Shelf/Shelf.module.scss    |   4 +-
 .../ui-react/src/components/Shelf/Shelf.tsx   |   8 +-
 .../Shelf/__snapshots__/Shelf.test.tsx.snap   | 540 +++++++++---------
 .../components/Sidebar/Sidebar.module.scss    |   3 +
 .../src/components/Sidebar/Sidebar.test.tsx   |  12 +-
 .../src/components/Sidebar/Sidebar.tsx        |  19 +-
 .../__snapshots__/Sidebar.test.tsx.snap       |  55 +-
 .../SubscriptionCancelled.test.tsx.snap       |   1 +
 .../SubscriptionRenewed.test.tsx.snap         |   1 +
 .../TextField/TextField.module.scss           |   6 +
 .../components/TextField/TextField.test.tsx   |  18 +-
 .../src/components/TextField/TextField.tsx    |  53 +-
 .../__snapshots__/TextField.test.tsx.snap     |  73 +++
 .../src/components/TileDock/TileDock.tsx      |   8 +-
 .../UpgradeSubscription.tsx                   |  10 +-
 .../__snapshots__/UserMenu.test.tsx.snap      |   3 -
 .../VideoDetails/VideoDetails.module.scss     |   5 +-
 .../VideoDetails/VideoDetails.test.tsx        |   3 +-
 .../components/VideoDetails/VideoDetails.tsx  |   7 +-
 .../__snapshots__/VideoDetails.test.tsx.snap  |  10 +-
 .../VideoLayout/VideoLayout.module.scss       |   6 +-
 .../components/VideoLayout/VideoLayout.tsx    |   3 +-
 .../VideoList/VideoList.module.scss           |  13 +-
 .../src/components/VideoList/VideoList.tsx    |  32 +-
 .../VideoListItem/VideoListItem.module.scss   |  36 +-
 .../VideoListItem/VideoListItem.tsx           |  41 +-
 .../WaitingForPayment/WaitingForPayment.tsx   |   9 +-
 .../__snapshots__/Welcome.test.tsx.snap       |   1 +
 .../AccountModal/forms/CancelSubscription.tsx |  13 +-
 .../AccountModal/forms/Checkout.tsx           |  10 +-
 .../AccountModal/forms/ChooseOffer.tsx        |   1 -
 .../AccountModal/forms/EditPassword.tsx       |   6 +-
 .../containers/AccountModal/forms/Login.tsx   |   8 +-
 .../AccountModal/forms/Registration.tsx       |  14 +-
 .../AccountModal/forms/RenewSubscription.tsx  |   3 +
 .../AccountModal/forms/ResetPassword.tsx      |   4 +-
 .../AdyenInitialPayment.tsx                   |  14 +-
 .../AdyenPaymentDetails.tsx                   |   8 +-
 .../AnnoucementProvider.tsx                   |  45 ++
 .../src/containers/Layout/Layout.module.scss  |   4 +-
 .../ui-react/src/containers/Layout/Layout.tsx |  42 +-
 .../Layout/__snapshots__/Layout.test.tsx.snap | 113 ++--
 .../PlaylistContainer/PlaylistContainer.tsx   |  57 --
 .../ShelfList/ShelfList.module.scss           |   8 -
 .../src/containers/ShelfList/ShelfList.tsx    | 102 ++--
 .../containers/TrailerModal/TrailerModal.tsx  |   8 +-
 .../ui-react/src/pages/Home/Home.test.tsx     |  10 +-
 .../Home/__snapshots__/Home.test.tsx.snap     | 248 ++++----
 .../ScreenRouting/PlaylistScreenRouter.tsx    |   4 +
 .../PlaylistGrid/PlaylistGrid.tsx             |  13 +-
 .../PlaylistLiveChannels.tsx                  |   2 +-
 .../src/pages/Search/Search.module.scss       |   6 +-
 packages/ui-react/src/pages/Search/Search.tsx |   4 +-
 packages/ui-react/src/pages/User/User.tsx     |  27 +-
 .../User/__snapshots__/User.test.tsx.snap     | 154 +++--
 .../ui-react/src/styles/accessibility.scss    |  32 ++
 packages/ui-react/src/utils/theming.ts        |  25 +-
 packages/ui-react/test/utils.tsx              |   5 +-
 platforms/web/public/locales/en/account.json  |  21 +-
 platforms/web/public/locales/en/common.json   |   2 +-
 platforms/web/public/locales/en/error.json    |   4 +-
 platforms/web/public/locales/en/user.json     |   6 +-
 platforms/web/public/locales/en/video.json    |   1 +
 platforms/web/public/locales/es/account.json  |  21 +-
 platforms/web/public/locales/es/common.json   |   2 +-
 platforms/web/public/locales/es/error.json    |   4 +-
 platforms/web/public/locales/es/user.json     |   6 +-
 platforms/web/public/locales/es/video.json    |   1 +
 .../web/scripts/build-tools/buildTools.ts     | 148 +++++
 platforms/web/scripts/build-tools/settings.ts |  17 -
 platforms/web/src/App.tsx                     |   5 +-
 .../DemoConfigDialog.test.tsx.snap            |  23 +-
 platforms/web/src/index.tsx                   |   2 +
 platforms/web/src/styles/main.scss            |   4 +
 platforms/web/test-e2e/tests/account_test.ts  |  14 +-
 .../web/test-e2e/tests/live_channel_test.ts   |   4 +-
 .../tests/payments/subscription_test.ts       |   6 +-
 .../web/test-e2e/tests/video_detail_test.ts   |   2 +-
 platforms/web/test-e2e/utils/steps_file.ts    |  17 +-
 platforms/web/vite.config.ts                  |  94 +--
 176 files changed, 3128 insertions(+), 1300 deletions(-)
 create mode 100644 packages/hooks-react/src/usePlaylists.ts
 create mode 100644 packages/testing/fixtures/favorites.json
 create mode 100644 packages/ui-react/src/components/LayoutGrid/LayoutGrid.module.scss
 create mode 100644 packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
 create mode 100644 packages/ui-react/src/containers/AnnouncementProvider/AnnoucementProvider.tsx
 delete mode 100644 packages/ui-react/src/containers/PlaylistContainer/PlaylistContainer.tsx
 create mode 100644 platforms/web/scripts/build-tools/buildTools.ts
 delete mode 100644 platforms/web/scripts/build-tools/settings.ts

diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
index 08b199752..06c8c0ee1 100644
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@@ -60,7 +60,7 @@ export const CACHE_TIME = 60 * 1000 * 20; // 20 minutes
 
 export const STALE_TIME = 60 * 1000 * 20;
 
-export const CARD_ASPECT_RATIOS = ['2:1', '16:9', '5:3', '4:3', '1:1', '9:13', '2:3', '9:16'] as const;
+export const CARD_ASPECT_RATIOS = ['1:1', '2:1', '2:3', '4:3', '5:3', '16:9', '9:13', '9:16'] as const;
 
 export const DEFAULT_FEATURES = {
   canUpdateEmail: false,
diff --git a/packages/common/src/env.ts b/packages/common/src/env.ts
index 5d4066571..50c854c56 100644
--- a/packages/common/src/env.ts
+++ b/packages/common/src/env.ts
@@ -3,8 +3,13 @@ export type Env = {
   APP_API_BASE_URL: string;
   APP_PLAYER_ID: string;
   APP_FOOTER_TEXT: string;
+  APP_DEFAULT_LANGUAGE: string;
+
   APP_DEFAULT_CONFIG_SOURCE?: string;
   APP_PLAYER_LICENSE_KEY?: string;
+
+  APP_BODY_FONT?: string;
+  APP_BODY_ALT_FONT?: string;
 };
 
 const env: Env = {
@@ -12,6 +17,7 @@ const env: Env = {
   APP_API_BASE_URL: 'https://cdn.jwplayer.com',
   APP_PLAYER_ID: 'M4qoGvUk',
   APP_FOOTER_TEXT: '',
+  APP_DEFAULT_LANGUAGE: 'en',
 };
 
 export const configureEnv = (options: Partial<Env>) => {
@@ -19,9 +25,13 @@ export const configureEnv = (options: Partial<Env>) => {
   env.APP_API_BASE_URL = options.APP_API_BASE_URL || env.APP_API_BASE_URL;
   env.APP_PLAYER_ID = options.APP_PLAYER_ID || env.APP_PLAYER_ID;
   env.APP_FOOTER_TEXT = options.APP_FOOTER_TEXT || env.APP_FOOTER_TEXT;
+  env.APP_DEFAULT_LANGUAGE = options.APP_DEFAULT_LANGUAGE || env.APP_DEFAULT_LANGUAGE;
 
   env.APP_DEFAULT_CONFIG_SOURCE ||= options.APP_DEFAULT_CONFIG_SOURCE;
   env.APP_PLAYER_LICENSE_KEY ||= options.APP_PLAYER_LICENSE_KEY;
+
+  env.APP_BODY_FONT = options.APP_BODY_FONT || env.APP_BODY_FONT;
+  env.APP_BODY_ALT_FONT = options.APP_BODY_ALT_FONT || env.APP_BODY_ALT_FONT;
 };
 
 export default env;
diff --git a/packages/common/src/utils/common.ts b/packages/common/src/utils/common.ts
index 5b3395186..f3666cb2c 100644
--- a/packages/common/src/utils/common.ts
+++ b/packages/common/src/utils/common.ts
@@ -5,6 +5,30 @@ export function debounce<T extends (...args: any[]) => void>(callback: T, wait =
     timeout = setTimeout(() => callback(...args), wait);
   };
 }
+export function throttle<T extends (...args: any[]) => unknown>(func: T, limit: number): (...args: Parameters<T>) => void {
+  let lastFunc: NodeJS.Timeout | undefined;
+  let lastRan: number | undefined;
+
+  return function (this: ThisParameterType<T>, ...args: Parameters<T>): void {
+    const timeSinceLastRan = lastRan ? Date.now() - lastRan : limit;
+
+    if (timeSinceLastRan >= limit) {
+      func.apply(this, args);
+      lastRan = Date.now();
+    } else if (!lastFunc) {
+      lastFunc = setTimeout(() => {
+        if (lastRan) {
+          const timeSinceLastRan = Date.now() - lastRan;
+          if (timeSinceLastRan >= limit) {
+            func.apply(this, args);
+            lastRan = Date.now();
+          }
+        }
+        lastFunc = undefined;
+      }, limit - timeSinceLastRan);
+    }
+  };
+}
 
 export const unicodeToChar = (text: string) => {
   return text.replace(/\\u[\dA-F]{4}/gi, (match) => {
diff --git a/packages/hooks-react/src/usePlaylists.ts b/packages/hooks-react/src/usePlaylists.ts
new file mode 100644
index 000000000..c430e816f
--- /dev/null
+++ b/packages/hooks-react/src/usePlaylists.ts
@@ -0,0 +1,73 @@
+import { PersonalShelf, PersonalShelves, PLAYLIST_LIMIT } from '@jwp/ott-common/src/constants';
+import ApiService from '@jwp/ott-common/src/services/ApiService';
+import { getModule } from '@jwp/ott-common/src/modules/container';
+import { useFavoritesStore } from '@jwp/ott-common/src/stores/FavoritesStore';
+import { useWatchHistoryStore } from '@jwp/ott-common/src/stores/WatchHistoryStore';
+import { generatePlaylistPlaceholder } from '@jwp/ott-common/src/utils/collection';
+import { isTruthyCustomParamValue } from '@jwp/ott-common/src/utils/common';
+import { isScheduledOrLiveMedia } from '@jwp/ott-common/src/utils/liveEvent';
+import type { Content } from '@jwp/ott-common/types/config';
+import type { Playlist } from '@jwp/ott-common/types/playlist';
+import { useQueries, useQueryClient } from 'react-query';
+
+const placeholderData = generatePlaylistPlaceholder(30);
+
+type UsePlaylistResult = {
+  data: Playlist | undefined;
+  isLoading: boolean;
+  isSuccess?: boolean;
+  error?: unknown;
+}[];
+
+const usePlaylists = (content: Content[], rowsToLoad: number | undefined = undefined) => {
+  const page_limit = PLAYLIST_LIMIT.toString();
+  const queryClient = useQueryClient();
+  const apiService = getModule(ApiService);
+
+  const favorites = useFavoritesStore((state) => state.getPlaylist());
+  const watchHistory = useWatchHistoryStore((state) => state.getPlaylist());
+
+  const playlistQueries = useQueries(
+    content.map(({ contentId, type }, index) => ({
+      enabled: !!contentId && (!rowsToLoad || rowsToLoad > index) && !PersonalShelves.some((pType) => pType === type),
+      queryKey: ['playlist', contentId],
+      queryFn: async () => {
+        const playlist = await apiService.getPlaylistById(contentId, { page_limit });
+
+        // This pre-caches all playlist items and makes navigating a lot faster.
+        playlist?.playlist?.forEach((playlistItem) => {
+          queryClient.setQueryData(['media', playlistItem.mediaid], playlistItem);
+        });
+
+        return playlist;
+      },
+      placeholderData: !!contentId && placeholderData,
+      refetchInterval: (data: Playlist | undefined) => {
+        if (!data) return false;
+
+        const autoRefetch = isTruthyCustomParamValue(data.refetch) || data.playlist.some(isScheduledOrLiveMedia);
+
+        return autoRefetch ? 1000 * 30 : false;
+      },
+      retry: false,
+    })),
+  );
+
+  const result: UsePlaylistResult = content.map(({ type }, index) => {
+    if (type === PersonalShelf.Favorites) return { data: favorites, isLoading: false, isSuccess: true };
+    if (type === PersonalShelf.ContinueWatching) return { data: watchHistory, isLoading: false, isSuccess: true };
+
+    const { data, isLoading, isSuccess, error } = playlistQueries[index];
+
+    return {
+      data,
+      isLoading,
+      isSuccess,
+      error,
+    };
+  });
+
+  return result;
+};
+
+export default usePlaylists;
diff --git a/packages/testing/fixtures/favorites.json b/packages/testing/fixtures/favorites.json
new file mode 100644
index 000000000..ab2c6a930
--- /dev/null
+++ b/packages/testing/fixtures/favorites.json
@@ -0,0 +1,417 @@
+{
+  "feedid": "KKOhckQL",
+  "title": "Favorites",
+  "playlist": [
+    {
+      "title": "SVOD 002: Caminandes 1 llama drama",
+      "mediaid": "1TJAvj2S",
+      "link": "https://cdn.jwplayer.com/previews/1TJAvj2S",
+      "image": "https://cdn.jwplayer.com/v2/media/1TJAvj2S/poster.jpg?width=720",
+      "images": [
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/1TJAvj2S/poster.jpg?width=320",
+          "width": 320,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/1TJAvj2S/poster.jpg?width=480",
+          "width": 480,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/1TJAvj2S/poster.jpg?width=640",
+          "width": 640,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/1TJAvj2S/poster.jpg?width=720",
+          "width": 720,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/1TJAvj2S/poster.jpg?width=1280",
+          "width": 1280,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/1TJAvj2S/poster.jpg?width=1920",
+          "width": 1920,
+          "type": "image/jpeg"
+        }
+      ],
+      "feedid": "bdH6HTUi",
+      "duration": 90,
+      "pubdate": 1703166863,
+      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla ligula, sollicitudin id felis eu, consequat aliquam ante. Suspendisse lacinia felis a quam laoreet, non tristique quam efficitur. Morbi ultrices, nibh et fringilla aliquet, ligula tortor porta libero, ut elementum nibh nisl vel odio. Praesent ornare luctus arcu nec condimentum. Vestibulum fringilla egestas neque, feugiat sollicitudin eros aliquet non. In enim augue, sodales eget dignissim eget, sagittis sit amet eros. Nulla tristique nisi iaculis dui egestas mollis. Aenean libero odio, vestibulum quis sodales pulvinar, consequat ut nisl.",
+      "tags": "svod",
+      "recommendations": "https://cdn.jwplayer.com/v2/playlists/bdH6HTUi?related_media_id=1TJAvj2S",
+      "sources": [
+        {
+          "file": "https://cdn.jwplayer.com/manifests/1TJAvj2S.m3u8",
+          "type": "application/vnd.apple.mpegurl"
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/1TJAvj2S-xAdPQ1TN.m4a",
+          "type": "audio/mp4",
+          "label": "AAC Audio",
+          "bitrate": 113513,
+          "filesize": 1277026
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/1TJAvj2S-1Yfbe0HO.mp4",
+          "type": "video/mp4",
+          "height": 180,
+          "width": 320,
+          "label": "180p",
+          "bitrate": 241872,
+          "filesize": 2721071,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/1TJAvj2S-JjxC7ylo.mp4",
+          "type": "video/mp4",
+          "height": 270,
+          "width": 480,
+          "label": "270p",
+          "bitrate": 356443,
+          "filesize": 4009992,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/1TJAvj2S-kqEB96Md.mp4",
+          "type": "video/mp4",
+          "height": 360,
+          "width": 640,
+          "label": "360p",
+          "bitrate": 401068,
+          "filesize": 4512018,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/1TJAvj2S-MskLmv79.mp4",
+          "type": "video/mp4",
+          "height": 406,
+          "width": 720,
+          "label": "406p",
+          "bitrate": 466271,
+          "filesize": 5245549,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/1TJAvj2S-MCyoQl96.mp4",
+          "type": "video/mp4",
+          "height": 540,
+          "width": 960,
+          "label": "540p",
+          "bitrate": 713837,
+          "filesize": 8030667,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/1TJAvj2S-yYzmiSbt.mp4",
+          "type": "video/mp4",
+          "height": 720,
+          "width": 1280,
+          "label": "720p",
+          "bitrate": 1088928,
+          "filesize": 12250450,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/1TJAvj2S-H4t30RCN.mp4",
+          "type": "video/mp4",
+          "height": 1080,
+          "width": 1920,
+          "label": "1080p",
+          "bitrate": 2391552,
+          "filesize": 26904961,
+          "framerate": 24
+        }
+      ],
+      "tracks": [
+        {
+          "file": "https://cdn.jwplayer.com/strips/1TJAvj2S-120.vtt",
+          "kind": "thumbnails"
+        }
+      ],
+      "variations": {},
+      "cardImage": "https://cdn.jwplayer.com/v2/media/1TJAvj2S/images/card.webp?poster_fallback=1",
+      "channelLogoImage": "https://cdn.jwplayer.com/v2/media/1TJAvj2S/images/channel_logo.webp?poster_fallback=1",
+      "backgroundImage": "https://cdn.jwplayer.com/v2/media/1TJAvj2S/images/background.webp?poster_fallback=1"
+    },
+    {
+      "title": "SVOD 003: Caminandes 2 gran dillama",
+      "mediaid": "rnibIt0n",
+      "link": "https://cdn.jwplayer.com/previews/rnibIt0n",
+      "image": "https://cdn.jwplayer.com/v2/media/rnibIt0n/poster.jpg?width=720",
+      "images": [
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/rnibIt0n/poster.jpg?width=320",
+          "width": 320,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/rnibIt0n/poster.jpg?width=480",
+          "width": 480,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/rnibIt0n/poster.jpg?width=640",
+          "width": 640,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/rnibIt0n/poster.jpg?width=720",
+          "width": 720,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/rnibIt0n/poster.jpg?width=1280",
+          "width": 1280,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/rnibIt0n/poster.jpg?width=1920",
+          "width": 1920,
+          "type": "image/jpeg"
+        }
+      ],
+      "feedid": "bdH6HTUi",
+      "duration": 146,
+      "pubdate": 1703166863,
+      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla ligula, sollicitudin id felis eu, consequat aliquam ante. Suspendisse lacinia felis a quam laoreet, non tristique quam efficitur. Morbi ultrices, nibh et fringilla aliquet, ligula tortor porta libero, ut elementum nibh nisl vel odio. Praesent ornare luctus arcu nec condimentum. Vestibulum fringilla egestas neque, feugiat sollicitudin eros aliquet non. In enim augue, sodales eget dignissim eget, sagittis sit amet eros. Nulla tristique nisi iaculis dui egestas mollis. Aenean libero odio, vestibulum quis sodales pulvinar, consequat ut nisl.",
+      "tags": "svod",
+      "recommendations": "https://cdn.jwplayer.com/v2/playlists/bdH6HTUi?related_media_id=rnibIt0n",
+      "sources": [
+        {
+          "file": "https://cdn.jwplayer.com/manifests/rnibIt0n.m3u8",
+          "type": "application/vnd.apple.mpegurl"
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/rnibIt0n-xAdPQ1TN.m4a",
+          "type": "audio/mp4",
+          "label": "AAC Audio",
+          "bitrate": 113503,
+          "filesize": 2071433
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/rnibIt0n-1Yfbe0HO.mp4",
+          "type": "video/mp4",
+          "height": 180,
+          "width": 320,
+          "label": "180p",
+          "bitrate": 342175,
+          "filesize": 6244705,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/rnibIt0n-JjxC7ylo.mp4",
+          "type": "video/mp4",
+          "height": 270,
+          "width": 480,
+          "label": "270p",
+          "bitrate": 501738,
+          "filesize": 9156729,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/rnibIt0n-kqEB96Md.mp4",
+          "type": "video/mp4",
+          "height": 360,
+          "width": 640,
+          "label": "360p",
+          "bitrate": 579321,
+          "filesize": 10572609,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/rnibIt0n-MskLmv79.mp4",
+          "type": "video/mp4",
+          "height": 406,
+          "width": 720,
+          "label": "406p",
+          "bitrate": 673083,
+          "filesize": 12283769,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/rnibIt0n-MCyoQl96.mp4",
+          "type": "video/mp4",
+          "height": 540,
+          "width": 960,
+          "label": "540p",
+          "bitrate": 984717,
+          "filesize": 17971095,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/rnibIt0n-yYzmiSbt.mp4",
+          "type": "video/mp4",
+          "height": 720,
+          "width": 1280,
+          "label": "720p",
+          "bitrate": 1527270,
+          "filesize": 27872694,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/rnibIt0n-H4t30RCN.mp4",
+          "type": "video/mp4",
+          "height": 1080,
+          "width": 1920,
+          "label": "1080p",
+          "bitrate": 3309652,
+          "filesize": 60401155,
+          "framerate": 24
+        }
+      ],
+      "tracks": [
+        {
+          "file": "https://cdn.jwplayer.com/strips/rnibIt0n-120.vtt",
+          "kind": "thumbnails"
+        }
+      ],
+      "variations": {},
+      "genre": "Animation",
+      "cardImage": "https://cdn.jwplayer.com/v2/media/rnibIt0n/images/card.webp?poster_fallback=1",
+      "channelLogoImage": "https://cdn.jwplayer.com/v2/media/rnibIt0n/images/channel_logo.webp?poster_fallback=1",
+      "backgroundImage": "https://cdn.jwplayer.com/v2/media/rnibIt0n/images/background.webp?poster_fallback=1"
+    },
+    {
+      "title": "SVOD 001: Tears of Steel",
+      "mediaid": "MaCvdQdE",
+      "link": "https://cdn.jwplayer.com/previews/MaCvdQdE",
+      "image": "https://cdn.jwplayer.com/v2/media/MaCvdQdE/poster.jpg?width=720",
+      "images": [
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/MaCvdQdE/poster.jpg?width=320",
+          "width": 320,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/MaCvdQdE/poster.jpg?width=480",
+          "width": 480,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/MaCvdQdE/poster.jpg?width=640",
+          "width": 640,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/MaCvdQdE/poster.jpg?width=720",
+          "width": 720,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/MaCvdQdE/poster.jpg?width=1280",
+          "width": 1280,
+          "type": "image/jpeg"
+        },
+        {
+          "src": "https://cdn.jwplayer.com/v2/media/MaCvdQdE/poster.jpg?width=1920",
+          "width": 1920,
+          "type": "image/jpeg"
+        }
+      ],
+      "feedid": "E2uaFiUM",
+      "duration": 734,
+      "pubdate": 1703166863,
+      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla ligula, sollicitudin id felis eu, consequat aliquam ante. Suspendisse lacinia felis a quam laoreet, non tristique quam efficitur. Morbi ultrices, nibh et fringilla aliquet, ligula tortor porta libero, ut elementum nibh nisl vel odio. Praesent ornare luctus arcu nec condimentum. Vestibulum fringilla egestas neque, feugiat sollicitudin eros aliquet non. In enim augue, sodales eget dignissim eget, sagittis sit amet eros. Nulla tristique nisi iaculis dui egestas mollis. Aenean libero odio, vestibulum quis sodales pulvinar, consequat ut nisl.",
+      "tags": "svod",
+      "sources": [
+        {
+          "file": "https://cdn.jwplayer.com/manifests/MaCvdQdE.m3u8",
+          "type": "application/vnd.apple.mpegurl"
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/MaCvdQdE-xAdPQ1TN.m4a",
+          "type": "audio/mp4",
+          "label": "AAC Audio",
+          "bitrate": 113413,
+          "filesize": 10405724
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/MaCvdQdE-1Yfbe0HO.mp4",
+          "type": "video/mp4",
+          "height": 134,
+          "width": 320,
+          "label": "180p",
+          "bitrate": 388986,
+          "filesize": 35689542,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/MaCvdQdE-JjxC7ylo.mp4",
+          "type": "video/mp4",
+          "height": 200,
+          "width": 480,
+          "label": "270p",
+          "bitrate": 575378,
+          "filesize": 52790944,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/MaCvdQdE-kqEB96Md.mp4",
+          "type": "video/mp4",
+          "height": 266,
+          "width": 640,
+          "label": "360p",
+          "bitrate": 617338,
+          "filesize": 56640812,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/MaCvdQdE-MskLmv79.mp4",
+          "type": "video/mp4",
+          "height": 300,
+          "width": 720,
+          "label": "406p",
+          "bitrate": 715724,
+          "filesize": 65667691,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/MaCvdQdE-MCyoQl96.mp4",
+          "type": "video/mp4",
+          "height": 400,
+          "width": 960,
+          "label": "540p",
+          "bitrate": 1029707,
+          "filesize": 94475629,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/MaCvdQdE-yYzmiSbt.mp4",
+          "type": "video/mp4",
+          "height": 534,
+          "width": 1280,
+          "label": "720p",
+          "bitrate": 1570612,
+          "filesize": 144103685,
+          "framerate": 24
+        },
+        {
+          "file": "https://cdn.jwplayer.com/videos/MaCvdQdE-H4t30RCN.mp4",
+          "type": "video/mp4",
+          "height": 800,
+          "width": 1920,
+          "label": "1080p",
+          "bitrate": 3081227,
+          "filesize": 282702650,
+          "framerate": 24
+        }
+      ],
+      "tracks": [
+        {
+          "file": "https://cdn.jwplayer.com/strips/MaCvdQdE-120.vtt",
+          "kind": "thumbnails"
+        }
+      ],
+      "variations": {},
+      "cardImage": "https://cdn.jwplayer.com/v2/media/MaCvdQdE/images/card.webp?poster_fallback=1",
+      "channelLogoImage": "https://cdn.jwplayer.com/v2/media/MaCvdQdE/images/channel_logo.webp?poster_fallback=1",
+      "backgroundImage": "https://cdn.jwplayer.com/v2/media/MaCvdQdE/images/background.webp?poster_fallback=1"
+    }
+  ]
+}
diff --git a/packages/ui-react/src/components/Account/Account.tsx b/packages/ui-react/src/components/Account/Account.tsx
index ed715b695..71c4c2c2f 100644
--- a/packages/ui-react/src/components/Account/Account.tsx
+++ b/packages/ui-react/src/components/Account/Account.tsx
@@ -13,6 +13,7 @@ import { formatConsents, formatConsentsFromValues, formatConsentsToRegisterField
 import useToggle from '@jwp/ott-hooks-react/src/useToggle';
 import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
 import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
+import env from '@jwp/ott-common/src/env';
 
 import type { FormSectionContentArgs, FormSectionProps } from '../Form/FormSection';
 import Alert from '../Alert/Alert';
@@ -25,6 +26,7 @@ import HelperText from '../HelperText/HelperText';
 import CustomRegisterField from '../CustomRegisterField/CustomRegisterField';
 import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
+import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 
 import styles from './Account.module.scss';
 
@@ -45,13 +47,15 @@ interface FormErrors {
 const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }: Props): JSX.Element => {
   const accountController = getModule(AccountController);
 
-  const { t } = useTranslation('user');
+  const { t, i18n } = useTranslation('user');
+  const announce = useAriaAnnouncer();
   const navigate = useNavigate();
   const location = useLocation();
   const [viewPassword, toggleViewPassword] = useToggle();
   const exportData = useMutation(accountController.exportAccountData);
   const [isAlertVisible, setIsAlertVisible] = useState(false);
   const exportDataMessage = exportData.isSuccess ? t('account.export_data_success') : t('account.export_data_error');
+  const htmlLang = i18n.language !== env.APP_DEFAULT_LANGUAGE ? env.APP_DEFAULT_LANGUAGE : undefined;
 
   useEffect(() => {
     if (exportData.isSuccess || exportData.isError) {
@@ -203,15 +207,17 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
 
   return (
     <>
+      <h1 className={styles.hideUntilFocus}>{t('nav.account')}</h1>
+
       <Form initialValues={initialValues}>
         {[
           formSection({
             label: t('account.about_you'),
             editButton: t('account.edit_information'),
-            onSubmit: (values) => {
+            onSubmit: async (values) => {
               const consents = formatConsentsFromValues(publisherConsents, { ...values.metadata, ...values.consentsValues });
 
-              return accountController.updateUser({
+              const response = await accountController.updateUser({
                 firstName: values.firstName || '',
                 lastName: values.lastName || '',
                 metadata: {
@@ -220,6 +226,10 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                   consents: JSON.stringify(consents),
                 },
               });
+
+              announce(t('account.update_success', { section: t('account.about_you') }), 'success');
+
+              return response;
             },
             content: (section) => (
               <>
@@ -233,6 +243,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                   helperText={section.errors?.firstName}
                   disabled={section.isBusy}
                   editing={section.isEditing}
+                  lang={htmlLang}
                 />
                 <TextField
                   name="lastName"
@@ -243,17 +254,23 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                   helperText={section.errors?.lastName}
                   disabled={section.isBusy}
                   editing={section.isEditing}
+                  lang={htmlLang}
                 />
               </>
             ),
           }),
           formSection({
             label: t('account.email'),
-            onSubmit: (values) =>
-              accountController.updateUser({
+            onSubmit: async (values) => {
+              const response = await accountController.updateUser({
                 email: values.email || '',
                 confirmationPassword: values.confirmationPassword,
-              }),
+              });
+
+              announce(t('account.update_success', { section: t('account.email') }), 'success');
+
+              return response;
+            },
             canSave: (values) => !!(values.email && values.confirmationPassword),
             editButton: t('account.edit_account'),
             readOnly: !canUpdateEmail,
@@ -304,7 +321,13 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
           formSection({
             label: t('account.terms_and_tracking'),
             saveButton: t('account.update_consents'),
-            onSubmit: (values) => accountController.updateConsents(formatConsentsFromValues(publisherConsents, values.consentsValues)),
+            onSubmit: async (values) => {
+              const response = await accountController.updateConsents(formatConsentsFromValues(publisherConsents, values.consentsValues));
+
+              announce(t('account.update_success', { section: t('account.terms_and_tracking') }), 'success');
+
+              return response;
+            },
             content: (section) => (
               <>
                 {termsConsents?.map((consent, index) => (
@@ -315,6 +338,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                     onChange={section.onChange}
                     label={formatConsentLabel(consent.label)}
                     disabled={consent.required || section.isBusy}
+                    lang={htmlLang}
                   />
                 ))}
               </>
diff --git a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
index 175e6fe0c..6578f12f2 100644
--- a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
+++ b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -2,6 +2,11 @@
 
 exports[`<Account> > renders and matches snapshot 1`] = `
 <div>
+  <h1
+    class="_hideUntilFocus_c968f7"
+  >
+    nav.account
+  </h1>
   <section
     aria-labelledby="account_about_you_1235"
     class="panel-class"
@@ -33,9 +38,18 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         >
           account.firstname
         </label>
-        <p>
-          John
-        </p>
+        <input
+          aria-describedby="helper_text_1235_firstname"
+          aria-invalid="false"
+          aria-required="false"
+          class="_input_e16c1b"
+          id="text-field_1235_firstname"
+          lang="en"
+          name="firstName"
+          readonly=""
+          type="text"
+          value="John"
+        />
       </div>
       <div
         class="_textField_e16c1b"
@@ -46,9 +60,18 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         >
           account.lastname
         </label>
-        <p>
-          Doe
-        </p>
+        <input
+          aria-describedby="helper_text_1235_lastname"
+          aria-invalid="false"
+          aria-required="false"
+          class="_input_e16c1b"
+          id="text-field_1235_lastname"
+          lang="en"
+          name="lastName"
+          readonly=""
+          type="text"
+          value="Doe"
+        />
       </div>
     </form>
     <div
@@ -90,9 +113,18 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         >
           account.email
         </label>
-        <p>
-          email@domain.com
-        </p>
+        <input
+          aria-describedby="helper_text_1235_email"
+          aria-invalid="false"
+          aria-required="true"
+          class="_input_e16c1b"
+          id="text-field_1235_email"
+          name="email"
+          readonly=""
+          required=""
+          type="text"
+          value="email@domain.com"
+        />
       </div>
     </form>
     <div
@@ -162,6 +194,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
           class="_row_531f07"
         >
           <input
+            aria-describedby="helper_text_1235_consentsvalues_marketing"
             id="check-box_1235_consentsvalues_marketing"
             name="consentsValues.marketing"
             type="checkbox"
@@ -169,6 +202,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
           />
           <label
             for="check-box_1235_consentsvalues_marketing"
+            lang="en"
           >
             Receive Marketing Emails
           </label>
diff --git a/packages/ui-react/src/components/Button/Button.module.scss b/packages/ui-react/src/components/Button/Button.module.scss
index 429a2530e..40577575a 100644
--- a/packages/ui-react/src/components/Button/Button.module.scss
+++ b/packages/ui-react/src/components/Button/Button.module.scss
@@ -1,5 +1,6 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
+@use '@jwp/ott-ui-react/src/styles/accessibility';
 @use '@jwp/ott-ui-react/src/styles/mixins/responsive';
 
 $small-button-height: 28px;
@@ -31,15 +32,7 @@ $large-button-height: 40px;
       &:hover,
       &:focus {
         z-index: 1;
-        transform: scale(1.1);
-      }
-
-      &:focus:not(:focus-visible):not(:hover) {
-        transform: scale(1);
-      }
-
-      &:focus-visible {
-        transform: scale(1.1);
+        transform: scale(1.05);
       }
     }
   }
@@ -65,6 +58,10 @@ $large-button-height: 40px;
   &.primary {
     color: var(--highlight-contrast-color, theme.$btn-primary-color);
     background-color: var(--highlight-color, theme.$btn-primary-bg);
+
+    &:focus {
+      @include accessibility.accessibleOutlineContrast;
+    }
   }
 
   &.outlined {
@@ -76,6 +73,7 @@ $large-button-height: 40px;
         color: var(--highlight-contrast-color, theme.$btn-primary-color);
         background-color: var(--highlight-color, theme.$btn-primary-bg);
         border-color: var(--highlight-color, theme.$btn-primary-bg);
+        outline: none;
       }
     }
   }
diff --git a/packages/ui-react/src/components/Button/Button.tsx b/packages/ui-react/src/components/Button/Button.tsx
index fc4bf0c72..842e92934 100644
--- a/packages/ui-react/src/components/Button/Button.tsx
+++ b/packages/ui-react/src/components/Button/Button.tsx
@@ -42,7 +42,7 @@ const Button: React.FC<Props> = ({
   size = 'medium',
   disabled,
   busy,
-  type,
+  type = 'button',
   to,
   as = 'button',
   onClick,
diff --git a/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap
index 766a87a85..aa5e13b5a 100644
--- a/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`<Button> > renders and matches snapshot 1`] = `
 <div>
   <button
     class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
+    type="button"
   >
     <span>
       aa
diff --git a/packages/ui-react/src/components/CancelSubscriptionForm/CancelSubscriptionForm.tsx b/packages/ui-react/src/components/CancelSubscriptionForm/CancelSubscriptionForm.tsx
index aae94d0a2..37a4edd74 100644
--- a/packages/ui-react/src/components/CancelSubscriptionForm/CancelSubscriptionForm.tsx
+++ b/packages/ui-react/src/components/CancelSubscriptionForm/CancelSubscriptionForm.tsx
@@ -29,6 +29,7 @@ const CancelSubscriptionForm: React.FC<Props> = ({ onConfirm, onCancel, error, s
         onClick={onConfirm}
         fullWidth
         disabled={submitting}
+        type="submit"
       />
       <Button label={t('cancel_subscription.no_thanks')} variant="outlined" onClick={onCancel} fullWidth />
     </div>
diff --git a/packages/ui-react/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap b/packages/ui-react/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap
index e741084ab..e1f960683 100644
--- a/packages/ui-react/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap
+++ b/packages/ui-react/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`<CancelSubscriptionForm> > renders and matches snapshot 1`] = `
     <button
       aria-disabled="false"
       class="_button_f8f296 _confirmButton_dba43b _primary_f8f296 _fullWidth_f8f296"
+      type="submit"
     >
       <span>
         cancel_subscription.unsubscribe
@@ -21,6 +22,7 @@ exports[`<CancelSubscriptionForm> > renders and matches snapshot 1`] = `
     </button>
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="button"
     >
       <span>
         cancel_subscription.no_thanks
diff --git a/packages/ui-react/src/components/Card/Card.module.scss b/packages/ui-react/src/components/Card/Card.module.scss
index f66e142b1..4780938d0 100644
--- a/packages/ui-react/src/components/Card/Card.module.scss
+++ b/packages/ui-react/src/components/Card/Card.module.scss
@@ -17,7 +17,8 @@
     &:hover {
       position: relative;
       z-index: 1;
-      outline: none;
+      outline: none !important;
+      box-shadow: none !important;
       transform: scale(1.05);
 
       & .poster {
@@ -35,7 +36,7 @@
       line-height: 36px;
       white-space: nowrap;
       text-overflow: ellipsis;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.12), 0 1px 10px rgba(0, 0, 0, 0.2);
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
 
       @include responsive.mobile-only {
         font-size: 24px;
@@ -54,7 +55,7 @@
     .meta {
       justify-content: space-between;
       padding: 16px;
-      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
     }
 
     &:hover {
diff --git a/packages/ui-react/src/components/Card/Card.tsx b/packages/ui-react/src/components/Card/Card.tsx
index cc0cf065e..b97c69ca7 100644
--- a/packages/ui-react/src/components/Card/Card.tsx
+++ b/packages/ui-react/src/components/Card/Card.tsx
@@ -9,17 +9,21 @@ import { MediaStatus } from '@jwp/ott-common/src/utils/liveEvent';
 import Lock from '@jwp/ott-theme/assets/icons/lock.svg?react';
 import Today from '@jwp/ott-theme/assets/icons/today.svg?react';
 import { testId } from '@jwp/ott-common/src/utils/common';
+import type { PosterAspectRatio } from '@jwp/ott-common/src/utils/collection';
 
 import Image from '../Image/Image';
 import Icon from '../Icon/Icon';
 
 import styles from './Card.module.scss';
 
+type ReplaceColon<T> = T extends `${infer Left}:${infer Right}` ? `${Left}${Right}` : T;
+type PosterAspectRatioClass = ReplaceColon<PosterAspectRatio>;
+
 type CardProps = {
   item: PlaylistItem;
   onHover?: () => void;
   progress?: number;
-  posterAspect?: string;
+  posterAspect?: PosterAspectRatio;
   featured?: boolean;
   disabled?: boolean;
   loading?: boolean;
@@ -27,6 +31,8 @@ type CardProps = {
   isLocked?: boolean;
   currentLabel?: string;
   url: string;
+  headingLevel?: number;
+  tabIndex?: number;
 };
 
 function Card({
@@ -40,7 +46,9 @@ function Card({
   isCurrent = false,
   isLocked = true,
   currentLabel,
+  headingLevel = 3,
   url,
+  tabIndex = 0,
 }: CardProps): JSX.Element {
   const { title, duration, episodeNumber, seasonNumber, cardImage: image, mediaStatus, scheduledStart } = item;
   const {
@@ -54,7 +62,8 @@ function Card({
     [styles.featured]: featured,
     [styles.disabled]: disabled,
   });
-  const posterClassNames = classNames(styles.poster, styles[`aspect${posterAspect.replace(':', '')}`], {
+  const aspectRatioClass = posterAspect ? styles[`aspect${posterAspect.replace(':', '') as PosterAspectRatioClass}`] : undefined;
+  const posterClassNames = classNames(styles.poster, aspectRatioClass, {
     [styles.current]: isCurrent,
   });
   const posterImageClassNames = classNames(styles.posterImage, {
@@ -69,7 +78,7 @@ function Card({
     if (loading || disabled || !title) return null;
 
     if (isSeriesItem) {
-      return <div className={styles.tag}>Series</div>;
+      return <div className={styles.tag}>{t('video:series')}</div>;
     } else if (episodeNumber) {
       return <div className={styles.tag}>{formatSeriesMetaString(seasonNumber, episodeNumber)}</div>;
     } else if (duration) {
@@ -86,6 +95,8 @@ function Card({
     }
   };
 
+  const heading = React.createElement(`h${headingLevel}`, { className: classNames(styles.title, { [styles.loading]: loading }) }, title);
+
   return (
     <Link
       role="button"
@@ -93,12 +104,12 @@ function Card({
       className={cardClassName}
       onClick={disabled ? (e) => e.preventDefault() : undefined}
       onMouseEnter={onHover}
-      tabIndex={disabled ? -1 : 0}
+      tabIndex={disabled ? -1 : tabIndex}
       data-testid={testId(title)}
     >
       {!featured && !disabled && (
         <div className={styles.titleContainer}>
-          <h3 className={classNames(styles.title, { [styles.loading]: loading })}>{title}</h3>
+          {heading}
           {!!scheduledStart && (
             <div className={classNames(styles.scheduledStart, { [styles.loading]: loading })}>{formatLocalizedDateTime(scheduledStart, language)}</div>
           )}
@@ -108,7 +119,7 @@ function Card({
         <Image className={posterImageClassNames} image={image} width={featured ? 640 : 320} onLoad={() => setImageLoaded(true)} alt="" />
         {!loading && (
           <div className={styles.meta}>
-            {featured && !disabled && <h3 className={classNames(styles.title, { [styles.loading]: loading })}>{title}</h3>}
+            {featured && !disabled && heading}
             <div className={styles.tags}>
               {isLocked && (
                 <div className={classNames(styles.tag, styles.lock)} aria-label={t('card_lock')}>
diff --git a/packages/ui-react/src/components/CardGrid/CardGrid.tsx b/packages/ui-react/src/components/CardGrid/CardGrid.tsx
index 25b597496..81d237e29 100644
--- a/packages/ui-react/src/components/CardGrid/CardGrid.tsx
+++ b/packages/ui-react/src/components/CardGrid/CardGrid.tsx
@@ -9,12 +9,15 @@ import useBreakpoint, { Breakpoint, type Breakpoints } from '@jwp/ott-ui-react/s
 
 import Card from '../Card/Card';
 import InfiniteScrollLoader from '../InfiniteScrollLoader/InfiniteScrollLoader';
+import LayoutGrid from '../LayoutGrid/LayoutGrid';
 
 import styles from './CardGrid.module.scss';
 
 const INITIAL_ROW_COUNT = 6;
 const LOAD_ROWS_COUNT = 4;
 
+type VisibleTiles = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+
 const defaultCols: Breakpoints = {
   [Breakpoint.xs]: 2,
   [Breakpoint.sm]: 2,
@@ -34,6 +37,7 @@ type CardGridProps = {
   isLoggedIn: boolean;
   hasSubscription: boolean;
   hasMore?: boolean;
+  headingLevel?: number;
   loadMore?: () => void;
   onCardHover?: (item: PlaylistItem) => void;
   getUrl: (item: PlaylistItem) => string;
@@ -53,10 +57,11 @@ function CardGrid({
   getUrl,
   loadMore,
   onCardHover,
+  headingLevel,
 }: CardGridProps) {
   const breakpoint: Breakpoint = useBreakpoint();
   const posterAspect = parseAspectRatio(playlist.cardImageAspectRatio || playlist.shelfImageAspectRatio);
-  const visibleTiles = cols[breakpoint] + parseTilesDelta(posterAspect);
+  const visibleTiles = (cols[breakpoint] + parseTilesDelta(posterAspect)) as VisibleTiles;
   const [rowCount, setRowCount] = useState(INITIAL_ROW_COUNT);
 
   const defaultLoadMore = () => setRowCount((current) => current + LOAD_ROWS_COUNT);
@@ -67,35 +72,28 @@ function CardGrid({
     setRowCount(INITIAL_ROW_COUNT);
   }, [playlist.feedid]);
 
-  const renderTile = (playlistItem: PlaylistItem) => {
-    const { mediaid } = playlistItem;
-
-    return (
-      <div className={styles.cell} key={mediaid} role="row">
-        <div role="cell">
+  return (
+    <InfiniteScroll pageStart={0} loadMore={loadMore ?? defaultLoadMore} hasMore={hasMore ?? defaultHasMore} loader={<InfiniteScrollLoader key="loader" />}>
+      <LayoutGrid
+        className={classNames(styles.container, styles[`cols-${visibleTiles}`])}
+        data={loadMore ? playlist.playlist : playlist.playlist.slice(0, rowCount * visibleTiles)}
+        columnCount={visibleTiles}
+        renderCell={(playlistItem: PlaylistItem, tabIndex: number) => (
           <Card
-            progress={watchHistory ? watchHistory[mediaid] : undefined}
+            tabIndex={tabIndex}
+            progress={watchHistory ? watchHistory[playlistItem.mediaid] : undefined}
             url={getUrl(playlistItem)}
             onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
             loading={isLoading}
-            isCurrent={currentCardItem && currentCardItem.mediaid === mediaid}
+            isCurrent={currentCardItem && currentCardItem.mediaid === playlistItem.mediaid}
             currentLabel={currentCardLabel}
             isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, playlistItem)}
             posterAspect={posterAspect}
             item={playlistItem}
+            headingLevel={headingLevel}
           />
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <InfiniteScroll pageStart={0} loadMore={loadMore ?? defaultLoadMore} hasMore={hasMore ?? defaultHasMore} loader={<InfiniteScrollLoader key="loader" />}>
-      <div className={classNames(styles.container, styles[`cols-${visibleTiles}`])} role="grid">
-        {/* When loadMore is present -> we get accumulated data (playlist.playlist) from the outside (we do it for series)
-            When not -> we hide some cards visually to save some computing resources spent on rendering */}
-        {(loadMore ? playlist.playlist : playlist.playlist.slice(0, rowCount * visibleTiles)).map(renderTile)}
-      </div>
+        )}
+      />
     </InfiniteScroll>
   );
 }
diff --git a/packages/ui-react/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap b/packages/ui-react/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap
index 6866aa887..7eb8d1a4d 100644
--- a/packages/ui-react/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap
+++ b/packages/ui-react/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap
@@ -4,15 +4,21 @@ exports[`<CardGrid> > renders and matches snapshot 1`] = `
 <div>
   <div>
     <div
+      aria-rowcount="1"
       class="_container_7175d1 _cols-5_7175d1"
       role="grid"
     >
       <div
-        class="_cell_7175d1"
+        aria-rowindex="0"
+        class="_row_19b484"
         role="row"
       >
         <div
-          role="cell"
+          aria-colindex="0"
+          class="_cell_19b484"
+          id="layout_grid_0-0"
+          role="gridcell"
+          style="width: 20%;"
         >
           <a
             class="_card_d75732"
@@ -49,20 +55,19 @@ exports[`<CardGrid> > renders and matches snapshot 1`] = `
             </div>
           </a>
         </div>
-      </div>
-      <div
-        class="_cell_7175d1"
-        role="row"
-      >
         <div
-          role="cell"
+          aria-colindex="1"
+          class="_cell_19b484"
+          id="layout_grid_0-1"
+          role="gridcell"
+          style="width: 20%;"
         >
           <a
             class="_card_d75732"
             data-testid="Big Buck Bunny"
             href="/m/awWEFyPu"
             role="button"
-            tabindex="0"
+            tabindex="-1"
           >
             <div
               class="_titleContainer_d75732"
@@ -92,20 +97,19 @@ exports[`<CardGrid> > renders and matches snapshot 1`] = `
             </div>
           </a>
         </div>
-      </div>
-      <div
-        class="_cell_7175d1"
-        role="row"
-      >
         <div
-          role="cell"
+          aria-colindex="2"
+          class="_cell_19b484"
+          id="layout_grid_0-2"
+          role="gridcell"
+          style="width: 20%;"
         >
           <a
             class="_card_d75732"
             data-testid="Elephants Dream"
             href="/m/eFPH2tVG"
             role="button"
-            tabindex="0"
+            tabindex="-1"
           >
             <div
               class="_titleContainer_d75732"
diff --git a/packages/ui-react/src/components/Checkbox/Checkbox.tsx b/packages/ui-react/src/components/Checkbox/Checkbox.tsx
index 4f3db3a60..c482bc8ed 100644
--- a/packages/ui-react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/ui-react/src/components/Checkbox/Checkbox.tsx
@@ -18,11 +18,13 @@ type Props = {
   helperText?: string;
   disabled?: boolean;
   required?: boolean;
+  lang?: string;
 };
 
-const Checkbox: React.FC<Props> = ({ label, name, onChange, header, checked, value, helperText, disabled, error, required, ...rest }: Props) => {
+const Checkbox: React.FC<Props> = ({ label, name, onChange, header, checked, value, helperText, disabled, error, required, lang, ...rest }: Props) => {
   const { t } = useTranslation('common');
   const id = useOpaqueId('check-box', name);
+  const helperTextId = useOpaqueId('helper_text', name);
 
   return (
     <div className={classNames(styles.checkbox, { [styles.error]: error })} {...rest}>
@@ -33,13 +35,23 @@ const Checkbox: React.FC<Props> = ({ label, name, onChange, header, checked, val
         </div>
       ) : null}
       <div className={styles.row}>
-        <input name={name} type="checkbox" id={id} value={value} onChange={onChange} checked={checked} aria-required={required} disabled={disabled} />
-        <label htmlFor={id}>
+        <input
+          name={name}
+          type="checkbox"
+          id={id}
+          value={value}
+          onChange={onChange}
+          checked={checked}
+          disabled={disabled}
+          aria-required={required}
+          aria-describedby={helperTextId}
+        />
+        <label htmlFor={id} lang={lang}>
           {required ? '* ' : ''}
           {label}
         </label>
       </div>
-      <HelperText error={error} className={error ? styles.helperTextError : undefined}>
+      <HelperText id={helperTextId} error={error} className={error ? styles.helperTextError : undefined}>
         {helperText}
       </HelperText>
     </div>
diff --git a/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 0f3be46a4..530343328 100644
--- a/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`<Checkbox> > renders and matches snapshot 1`] = `
       class="_row_531f07"
     >
       <input
+        aria-describedby="helper_text_1235_name"
         id="check-box_1235_name"
         name="name"
         type="checkbox"
diff --git a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.module.scss b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.module.scss
index 603581af0..757ce4d25 100644
--- a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.module.scss
+++ b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.module.scss
@@ -1,5 +1,6 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
+@use '@jwp/ott-ui-react/src/styles/accessibility';
 
 .backButton {
   position: absolute;
@@ -143,6 +144,11 @@
 .paymentMethod {
   flex: 1;
   margin: 0 4px;
+
+  &:focus-within .paymentMethodLabel {
+    @include accessibility.accessibleOutlineContrast;
+    transform: scale(1.03);
+  }
 }
 
 .radio {
@@ -154,13 +160,6 @@
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
 
-  :focus,
-  :active {
-    + .paymentMethodLabel {
-      border-color: variables.$white;
-    }
-  }
-
   &:checked + .paymentMethodLabel {
     color: variables.$black;
     background-color: variables.$white;
diff --git a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx
index 63a2013b0..14fa521c7 100644
--- a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx
+++ b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx
@@ -89,7 +89,6 @@ const CheckoutForm: React.FC<Props> = ({
   const orderTitle = offerType === 'svod' ? (offer.period === 'month' ? t('checkout.monthly') : t('checkout.yearly')) : offer.offerTitle;
   return (
     <div>
-      <DialogBackButton onClick={onBackButtonClick} />
       <h1 className={styles.title}>{t('checkout.payment_method')}</h1>
       <div className={styles.order}>
         <div className={styles.orderInfo}>
@@ -211,6 +210,7 @@ const CheckoutForm: React.FC<Props> = ({
       ) : null}
       {children ? <div>{children}</div> : null}
       {submitting && <LoadingOverlay transparentBackground inline />}
+      <DialogBackButton onClick={onBackButtonClick} />
     </div>
   );
 };
diff --git a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
index e145b77b0..7111ff503 100644
--- a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
+++ b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
@@ -3,23 +3,6 @@
 exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
 <div>
   <div>
-    <div
-      aria-label="Go back"
-      class="_iconButton_0fef65 _dialogBackButton_248199"
-      role="button"
-      tabindex="0"
-    >
-      <svg
-        aria-hidden="true"
-        class="_icon_585b29"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
-        />
-      </svg>
-    </div>
     <h1
       class="_title_abc9bc"
     >
@@ -54,6 +37,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
     >
       <button
         class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+        type="button"
       >
         <span>
           checkout.redeem_coupon
@@ -113,6 +97,9 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                 class="_container_e16c1b"
               >
                 <input
+                  aria-describedby="helper_text_1235_cardholdername"
+                  aria-invalid="false"
+                  aria-required="true"
                   class="_input_e16c1b"
                   id="text-field_1235_cardholdername"
                   name="cardholderName"
@@ -138,6 +125,9 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                 class="_container_e16c1b"
               >
                 <input
+                  aria-describedby="helper_text_1235_cardnumber"
+                  aria-invalid="false"
+                  aria-required="true"
                   class="_input_e16c1b"
                   id="text-field_1235_cardnumber"
                   name="cardNumber"
@@ -167,6 +157,9 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                   class="_container_e16c1b"
                 >
                   <input
+                    aria-describedby="helper_text_1235_cardexpiry"
+                    aria-invalid="false"
+                    aria-required="true"
                     class="_input_e16c1b"
                     id="text-field_1235_cardexpiry"
                     name="cardExpiry"
@@ -193,7 +186,10 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                   class="_container_e16c1b"
                 >
                   <input
+                    aria-describedby="helper_text_1235_cardcvc"
+                    aria-invalid="false"
                     aria-label="payment.security_code"
+                    aria-required="true"
                     class="_input_e16c1b"
                     id="text-field_1235_cardcvc"
                     name="cardCVC"
@@ -220,6 +216,23 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
         </form>
       </div>
     </div>
+    <div
+      aria-label="common:back"
+      class="_iconButton_0fef65 _dialogBackButton_248199"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        aria-hidden="true"
+        class="_icon_585b29"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+        />
+      </svg>
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.module.scss b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.module.scss
index b30409b27..7bce23ecf 100644
--- a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.module.scss
+++ b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.module.scss
@@ -1,5 +1,6 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
+@use '@jwp/ott-ui-react/src/styles/accessibility';
 @use '@jwp/ott-ui-react/src/styles/mixins/responsive';
 
 .title {
@@ -36,6 +37,11 @@
 .offer {
   flex: 1;
   margin: 0 4px;
+
+  &:focus-within .label {
+    @include accessibility.accessibleOutlineContrast;
+    transform: scale(1.03);
+  }
 }
 
 .radio {
@@ -47,13 +53,6 @@
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
 
-  :focus,
-  :active {
-    + .label {
-      border-color: variables.$white;
-    }
-  }
-
   &:checked + .label {
     color: variables.$black;
     background-color: variables.$white;
@@ -70,7 +69,7 @@
   border: 1px solid rgba(variables.$white, 0.34);
   border-radius: 4px;
   cursor: pointer;
-  transition: border 0.2s ease, background 0.2s ease, transform 0.3s ease-out;
+  transition: border 0.2s ease, background 0.2s ease, transform 0.2s ease-out;
 }
 
 .offerGroupLabel {
diff --git a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx
index c48ab7cd1..20e811680 100644
--- a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx
+++ b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx
@@ -46,7 +46,7 @@ describe('<OffersForm>', () => {
   });
 
   test('checks the monthly offer correctly', () => {
-    const { getByLabelText } = render(
+    const { getByTestId } = render(
       <ChooseOfferForm
         values={{ offerId: 'S916977979_NL' }}
         errors={{}}
@@ -59,11 +59,11 @@ describe('<OffersForm>', () => {
       />,
     );
 
-    expect(getByLabelText('choose_offer.monthly_subscription')).toBeChecked();
+    expect(getByTestId('choose_offer.monthly')).toBeChecked();
   });
 
   test('checks the yearly offer correctly', () => {
-    const { getByLabelText } = render(
+    const { getByTestId } = render(
       <ChooseOfferForm
         values={{ offerId: 'S345569153_NL' }}
         errors={{}}
@@ -76,11 +76,11 @@ describe('<OffersForm>', () => {
       />,
     );
 
-    expect(getByLabelText('choose_offer.yearly_subscription')).toBeChecked();
+    expect(getByTestId('choose_offer.yearly')).toBeChecked();
   });
 
   test('checks the tvod offer correctly', () => {
-    const { getByLabelText } = render(
+    const { getByTestId } = render(
       <ChooseOfferForm
         values={{ offerId: 'R892134629_NL' }}
         errors={{}}
@@ -93,12 +93,12 @@ describe('<OffersForm>', () => {
       />,
     );
 
-    expect(getByLabelText('One Time - TVOD offer')).toBeChecked();
+    expect(getByTestId('One Time - TVOD offer')).toBeChecked();
   });
 
   test('calls the onChange callback when changing the offer', () => {
     const onChange = vi.fn();
-    const { getByLabelText } = render(
+    const { getByTestId } = render(
       <ChooseOfferForm
         values={{ offerId: 'S916977979_NL' }}
         errors={{}}
@@ -111,7 +111,7 @@ describe('<OffersForm>', () => {
       />,
     );
 
-    fireEvent.click(getByLabelText('choose_offer.yearly_subscription'));
+    fireEvent.click(getByTestId('choose_offer.yearly'));
 
     expect(onChange).toBeCalled();
   });
diff --git a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx
index fc97c6058..4b80b7678 100644
--- a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx
+++ b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx
@@ -30,26 +30,10 @@ type Props = {
 
 type OfferBoxProps = {
   offer: Offer;
-  title: string;
-  ariaLabel: string;
-  secondBenefit?: string;
-  periodString?: string;
-};
-
-type OfferBox = ({ offer, title, ariaLabel, secondBenefit, periodString }: OfferBoxProps) => JSX.Element;
+  selected: boolean;
+} & Pick<Props, 'onChange'>;
 
-const ChooseOfferForm: React.FC<Props> = ({
-  values,
-  errors,
-  onChange,
-  onSubmit,
-  submitting,
-  offers,
-  onBackButtonClickHandler,
-  offerType,
-  setOfferType,
-}: Props) => {
-  const siteName = useConfigStore((s) => s.config.siteName);
+const OfferBox: React.FC<OfferBoxProps> = ({ offer, selected, onChange }: OfferBoxProps) => {
   const { t } = useTranslation('account');
 
   const getFreeTrialText = (offer: Offer) => {
@@ -68,8 +52,8 @@ const ChooseOfferForm: React.FC<Props> = ({
     return null;
   };
 
-  const OfferBox: OfferBox = ({ offer, title, ariaLabel, secondBenefit, periodString }) => (
-    <div className={styles.offer}>
+  const renderOption = ({ title, periodString, secondBenefit }: { title: string; periodString?: string; secondBenefit?: string }) => (
+    <div className={styles.offer} role="option">
       <input
         className={styles.radio}
         onChange={onChange}
@@ -77,8 +61,8 @@ const ChooseOfferForm: React.FC<Props> = ({
         name={'offerId'}
         value={offer.offerId}
         id={offer.offerId}
-        checked={values.offerId === offer.offerId}
-        aria-label={ariaLabel}
+        checked={selected}
+        data-testid={testId(title)}
       />
       <label className={styles.label} htmlFor={offer.offerId}>
         <h2 className={styles.offerTitle}>{title}</h2>
@@ -107,36 +91,38 @@ const ChooseOfferForm: React.FC<Props> = ({
     </div>
   );
 
-  const renderOfferBox = (offer: Offer) => {
-    if (isSVODOffer(offer)) {
-      const isMonthly = offer.period === 'month';
+  if (isSVODOffer(offer)) {
+    const isMonthly = offer.period === 'month';
 
-      return (
-        <OfferBox
-          offer={offer}
-          key={offer.offerId}
-          title={isMonthly ? t('choose_offer.monthly') : t('choose_offer.yearly')}
-          ariaLabel={isMonthly ? t('choose_offer.monthly_subscription') : t('choose_offer.yearly_subscription')}
-          secondBenefit={t('choose_offer.benefits.cancel_anytime')}
-          periodString={isMonthly ? t('periods.month') : t('periods.year')}
-        />
-      );
-    }
+    return renderOption({
+      title: isMonthly ? t('choose_offer.monthly') : t('choose_offer.yearly'),
+      secondBenefit: t('choose_offer.benefits.cancel_anytime'),
+      periodString: isMonthly ? t('periods.month') : t('periods.year'),
+    });
+  }
 
-    return (
-      <OfferBox
-        offer={offer}
-        key={offer.offerId}
-        title={offer.offerTitle}
-        ariaLabel={offer.offerTitle}
-        secondBenefit={
-          !!offer.durationPeriod && !!offer.durationAmount
-            ? t('choose_offer.tvod_access', { period: offer.durationPeriod, count: offer.durationAmount })
-            : undefined
-        }
-      />
-    );
-  };
+  return renderOption({
+    title: offer.offerTitle,
+    secondBenefit:
+      !!offer.durationPeriod && !!offer.durationAmount
+        ? t('choose_offer.tvod_access', { period: offer.durationPeriod, count: offer.durationAmount })
+        : undefined,
+  });
+};
+
+const ChooseOfferForm: React.FC<Props> = ({
+  values,
+  errors,
+  onChange,
+  onSubmit,
+  submitting,
+  offers,
+  onBackButtonClickHandler,
+  offerType,
+  setOfferType,
+}: Props) => {
+  const siteName = useConfigStore((s) => s.config.siteName);
+  const { t } = useTranslation('account');
 
   return (
     <form onSubmit={onSubmit} data-testid={testId('choose-offer-form')} noValidate>
@@ -172,7 +158,13 @@ const ChooseOfferForm: React.FC<Props> = ({
           </label>
         </div>
       )}
-      {<div className={styles.offers}>{!offers.length ? <p>{t('choose_offer.no_pricing_available')}</p> : offers.map(renderOfferBox)}</div>}
+      <div className={styles.offers}>
+        {!offers.length ? (
+          <p>{t('choose_offer.no_pricing_available')}</p>
+        ) : (
+          offers.map((offer) => <OfferBox key={offer.offerId} offer={offer} selected={values.offerId === offer.offerId} onChange={onChange} />)
+        )}
+      </div>
       {submitting && <LoadingOverlay transparentBackground inline />}
       <Button label={t('choose_offer.continue')} disabled={submitting || !offers.length} variant="contained" color="primary" type="submit" fullWidth />
     </form>
diff --git a/packages/ui-react/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap b/packages/ui-react/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap
index 515f8dd9d..e9fe99a27 100644
--- a/packages/ui-react/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap
+++ b/packages/ui-react/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap
@@ -52,11 +52,12 @@ exports[`<OffersForm> > renders and matches snapshot 1`] = `
     >
       <div
         class="_offer_f7961f"
+        role="option"
       >
         <input
-          aria-label="choose_offer.monthly_subscription"
           checked=""
           class="_radio_f7961f"
+          data-testid="choose_offer.monthly"
           id="S916977979_NL"
           name="offerId"
           type="radio"
@@ -137,10 +138,11 @@ exports[`<OffersForm> > renders and matches snapshot 1`] = `
       </div>
       <div
         class="_offer_f7961f"
+        role="option"
       >
         <input
-          aria-label="choose_offer.yearly_subscription"
           class="_radio_f7961f"
+          data-testid="choose_offer.yearly"
           id="S345569153_NL"
           name="offerId"
           type="radio"
@@ -285,11 +287,12 @@ exports[`<OffersForm> > renders and matches snapshot 2`] = `
     >
       <div
         class="_offer_f7961f"
+        role="option"
       >
         <input
-          aria-label="One Time - TVOD offer"
           checked=""
           class="_radio_f7961f"
+          data-testid="One Time - TVOD offer"
           id="R892134629_NL"
           name="offerId"
           type="radio"
diff --git a/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx b/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx
index 11ccd5081..3cd73db23 100644
--- a/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx
+++ b/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx
@@ -33,15 +33,20 @@ const CollapsibleText: React.FC<Props> = ({ text, className, maxHeight = 'none'
 
   return (
     <div className={classNames(styles.collapsibleText)}>
-      <div
+      <p
         ref={divRef}
         className={classNames(styles.textContainer, className, { [styles.collapsed]: !expanded && doesFlowOver })}
         style={{ maxHeight: expanded ? divRef.current.scrollHeight : maxHeight }}
       >
         {text}
-      </div>
+      </p>
       {doesFlowOver && (
-        <IconButton aria-label={ariaLabel} className={classNames(styles.chevron, { [styles.expanded]: expanded })} onClick={() => setExpanded(!expanded)}>
+        <IconButton
+          aria-label={ariaLabel}
+          aria-expanded={expanded}
+          className={classNames(styles.chevron, { [styles.expanded]: expanded })}
+          onClick={() => setExpanded(!expanded)}
+        >
           <Icon icon={ChevronRight} />
         </IconButton>
       )}
diff --git a/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap b/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap
index 52373ad11..72e97167b 100644
--- a/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap
+++ b/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap
@@ -5,12 +5,12 @@ exports[`<CollapsibleText> > renders and matches snapshot 1`] = `
   <div
     class="_collapsibleText_561522"
   >
-    <div
+    <p
       class="_textContainer_561522"
       style="max-height: none;"
     >
       Test...
-    </div>
+    </p>
   </div>
 </div>
 `;
diff --git a/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.tsx b/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.tsx
index 48a8587cd..99ec44957 100644
--- a/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.tsx
+++ b/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.tsx
@@ -19,11 +19,13 @@ const ConfirmationDialog: React.FC<Props> = ({ open, title, body, onConfirm, onC
   const { t } = useTranslation('common');
 
   return (
-    <Dialog open={open} onClose={onClose} role="dialog" aria-labbeledby="confirmation-heading">
+    <Dialog open={open} onClose={onClose} role="alertdialog" aria-describedby="confirmation-body" aria-labelledby="confirmation-heading">
       <h2 className={styles.title} id="confirmation-heading">
         {title}
       </h2>
-      <p className={styles.body}>{body}</p>
+      <p id="confirmation-body" className={styles.body}>
+        {body}
+      </p>
       <Button
         className={styles.confirmButton}
         label={t('confirmation_dialog.confirm')}
diff --git a/packages/ui-react/src/components/ConfirmationForm/__snapshots__/ConfirmationForm.test.tsx.snap b/packages/ui-react/src/components/ConfirmationForm/__snapshots__/ConfirmationForm.test.tsx.snap
index 02933e23c..2a213e8f9 100644
--- a/packages/ui-react/src/components/ConfirmationForm/__snapshots__/ConfirmationForm.test.tsx.snap
+++ b/packages/ui-react/src/components/ConfirmationForm/__snapshots__/ConfirmationForm.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`<ConfirmationForm> > renders and matches snapshot 1`] = `
     </p>
     <button
       class="_button_f8f296 _button_64b7a0 _primary_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="button"
     >
       <span>
         reset.back_login
diff --git a/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap b/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
index 97e945f11..907b37482 100644
--- a/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
+++ b/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
@@ -15,7 +15,10 @@ exports[`<CreditCardCVCField> > renders and matches snapshot 1`] = `
       class="_container_e16c1b"
     >
       <input
+        aria-describedby="helper_text_1235_cardcvc"
+        aria-invalid="false"
         aria-label="payment.security_code"
+        aria-required="true"
         class="_input_e16c1b"
         id="text-field_1235_cardcvc"
         name="cardCVC"
diff --git a/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap b/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
index b1a19a7d1..8a88f1e31 100644
--- a/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
+++ b/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
@@ -15,6 +15,9 @@ exports[`<CreditCardExpiryField> > renders and matches snapshot 1`] = `
       class="_container_e16c1b"
     >
       <input
+        aria-describedby="helper_text_1235_cardexpiry"
+        aria-invalid="false"
+        aria-required="true"
         class="_input_e16c1b"
         id="text-field_1235_cardexpiry"
         name="cardExpiry"
diff --git a/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap b/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
index 31283bb50..0e1412821 100644
--- a/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
+++ b/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
@@ -15,6 +15,9 @@ exports[`<CreditCardNumberField> > renders and matches snapshot 1`] = `
       class="_container_e16c1b"
     >
       <input
+        aria-describedby="helper_text_1235_cardnumber"
+        aria-invalid="false"
+        aria-required="true"
         class="_input_e16c1b"
         id="text-field_1235_cardnumber"
         name="cardNumber"
diff --git a/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx b/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx
index 3a3933e9d..204cd417b 100644
--- a/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx
+++ b/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx
@@ -23,9 +23,11 @@ export type CustomRegisterFieldCommonProps = {
   disabled: boolean;
   required: boolean;
   options: RegisterFieldOptions;
+  editing: boolean;
+  lang: string;
 }>;
 
-const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value = '', options, ...props }) => {
+const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value = '', options, editing, lang, ...props }) => {
   const { t, i18n } = useTranslation();
 
   const optionsList = useMemo(() => {
@@ -49,15 +51,25 @@ const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value =
     case 'input':
       return <TextField {...props} value={value as string} testId={testId(`crf-${type}`)} />;
     case 'radio':
-      return <Radio {...props} values={optionsList} value={value as string} header={props.label} data-testid={testId(`crf-${type}`)} />;
+      return <Radio {...props} values={optionsList} value={value as string} header={props.label} data-testid={testId(`crf-${type}`)} lang={lang} />;
     case 'select':
     case 'country':
     case 'us_state':
-      return <Dropdown {...props} options={optionsList} value={value as string} defaultLabel={props.placeholder} fullWidth testId={testId(`crf-${type}`)} />;
+      return (
+        <Dropdown
+          {...props}
+          options={optionsList}
+          value={value as string}
+          defaultLabel={props.placeholder}
+          fullWidth
+          testId={testId(`crf-${type}`)}
+          lang={lang}
+        />
+      );
     case 'datepicker':
       return <DateField {...props} value={value as string} testId={testId(`crf-${type}`)} />;
     default:
-      return <Checkbox {...props} checked={isTruthyCustomParamValue(value)} data-testid={testId(`crf-${type}`)} />;
+      return <Checkbox {...props} checked={isTruthyCustomParamValue(value)} data-testid={testId(`crf-${type}`)} lang={lang} />;
   }
 };
 
diff --git a/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap b/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
index 00f287fd4..e9a7dba46 100644
--- a/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
+++ b/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Checkbox> 1`] = `
       class="_row_531f07"
     >
       <input
+        aria-describedby="helper_text_1235_name"
         id="check-box_1235_name"
         name="name"
         type="checkbox"
@@ -44,6 +45,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="co
       class="_dropdown_bb73c6 _fullWidth_bb73c6"
     >
       <select
+        aria-describedby="helper_text_1235_name"
         aria-required="false"
         class="_select_bb73c6"
         id="1235"
@@ -93,6 +95,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
       class="_container_eb6974"
     >
       <input
+        aria-describedby="helper_text_1235_name"
         class="_hiddenInput_eb6974"
         id="text-field_1235_name-hidden"
         name="name"
@@ -141,6 +144,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="ra
       class="_row_531f07"
     >
       <input
+        aria-describedby="helper_text_1235_name"
         id="check-box_1235_name"
         name="name"
         type="checkbox"
@@ -175,6 +179,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="se
       class="_dropdown_bb73c6 _fullWidth_bb73c6"
     >
       <select
+        aria-describedby="helper_text_1235_name"
         aria-required="false"
         class="_select_bb73c6"
         id="1235"
@@ -204,6 +209,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="us
       class="_dropdown_bb73c6 _fullWidth_bb73c6"
     >
       <select
+        aria-describedby="helper_text_1235_name"
         aria-required="false"
         class="_select_bb73c6"
         id="1235"
@@ -239,15 +245,20 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Radio> 1`] = `
     data-testid="crf-radio"
     label="label"
   >
-    <div
+    <label
       class="_header_d50e6e"
       data-testid="radio-header"
+      for="radio_1235_name"
     >
-      label
       <span>
+        label
+      </span>
+      <span
+        class="_note_d50e6e"
+      >
         optional
       </span>
-    </div>
+    </label>
   </div>
 </div>
 `;
@@ -271,6 +282,9 @@ exports[`<CustomRegisterField> > renders and matches snapshot <TextField> 1`] =
       class="_container_e16c1b"
     >
       <input
+        aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
+        aria-required="false"
         class="_input_e16c1b"
         id="text-field_1235_name"
         name="name"
diff --git a/packages/ui-react/src/components/DateField/DateField.tsx b/packages/ui-react/src/components/DateField/DateField.tsx
index 123dcb5c1..b86d25770 100644
--- a/packages/ui-react/src/components/DateField/DateField.tsx
+++ b/packages/ui-react/src/components/DateField/DateField.tsx
@@ -51,6 +51,7 @@ const DateField: React.FC<Props> = ({
   });
 
   const id = useOpaqueId('text-field', name);
+  const helperTextId = useOpaqueId('helper_text', name);
 
   const hiddenInputRef = useRef<HTMLInputElement>(null);
 
@@ -148,7 +149,15 @@ const DateField: React.FC<Props> = ({
       </label>
       <div className={styles.container}>
         {/* don't be tempted to make it type="hidden", onChange will practically be ignored that way */}
-        <input ref={hiddenInputRef} id={`${id}-hidden`} className={styles.hiddenInput} name={name} onChange={onChange} />
+        <input
+          ref={hiddenInputRef}
+          id={`${id}-hidden`}
+          className={styles.hiddenInput}
+          name={name}
+          onChange={onChange}
+          aria-invalid={error}
+          aria-describedby={helperTextId}
+        />
         <input
           className={styles.input}
           name="date"
@@ -191,7 +200,9 @@ const DateField: React.FC<Props> = ({
           id={`${id}-year`}
         />
       </div>
-      <HelperText error={error}>{helperText}</HelperText>
+      <HelperText id={helperTextId} error={error}>
+        {helperText}
+      </HelperText>
     </div>
   );
 };
diff --git a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
index 4025919df..36a5ba79d 100644
--- a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
+++ b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
@@ -1,17 +1,18 @@
-import { useTranslation } from 'react-i18next';
-import { object, string } from 'yup';
-import { useLocation, useNavigate } from 'react-router';
-import { useCallback, useEffect, useState } from 'react';
-import { useMutation } from 'react-query';
-import type { DeleteAccountFormData } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import type { DeleteAccountFormData } from '@jwp/ott-common/types/account';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation } from 'react-query';
+import { useLocation, useNavigate } from 'react-router';
+import { object, string } from 'yup';
 
-import PasswordField from '../PasswordField/PasswordField';
-import Button from '../Button/Button';
-import Alert from '../Alert/Alert';
+import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 import { modalURLFromLocation } from '../../utils/location';
+import Alert from '../Alert/Alert';
+import Button from '../Button/Button';
+import PasswordField from '../PasswordField/PasswordField';
 
 import styles from './DeleteAccountModal.module.scss';
 
@@ -19,6 +20,7 @@ const DeleteAccountModal = () => {
   const accountController = getModule(AccountController);
 
   const { t } = useTranslation('user');
+  const announce = useAriaAnnouncer();
 
   const [enteredPassword, setEnteredPassword] = useState<string>('');
 
@@ -26,6 +28,7 @@ const DeleteAccountModal = () => {
     onSuccess: async () => {
       navigate('/');
       await accountController.logout();
+      announce(t('account.delete_account.success'), 'success');
     },
     onError: () => {
       setEnteredPassword('');
diff --git a/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx b/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx
index 3cc2175b1..795579841 100644
--- a/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx
+++ b/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx
@@ -31,6 +31,7 @@ const DevConfigSelector = ({ selectedConfig }: Props) => {
       value={selectedConfig || ''}
       onChange={onChange}
       required={true}
+      aria-hidden={true}
     />
   );
 };
diff --git a/packages/ui-react/src/components/Dialog/Dialog.tsx b/packages/ui-react/src/components/Dialog/Dialog.tsx
index c0d10dbdf..e319ab9f8 100644
--- a/packages/ui-react/src/components/Dialog/Dialog.tsx
+++ b/packages/ui-react/src/components/Dialog/Dialog.tsx
@@ -1,4 +1,4 @@
-import React, { AriaAttributes } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 
 import Modal from '../Modal/Modal';
@@ -7,21 +7,20 @@ import ModalCloseButton from '../ModalCloseButton/ModalCloseButton';
 
 import styles from './Dialog.module.scss';
 
-type Props = Pick<AriaAttributes, 'aria-labelledby' | 'aria-label'> & {
+type Props = {
   open: boolean;
   onClose: () => void;
   size?: 'small' | 'large';
   children: React.ReactNode;
   role: React.AriaRole;
-  'aria-labelledby'?: string; // non-optional
-};
+} & React.AriaAttributes;
 
-const Dialog: React.FC<Props> = ({ open, onClose, size = 'small', children, role, ...rest }: Props) => {
+const Dialog: React.FC<Props> = ({ open, onClose, children, size = 'small', role = 'dialog', ...ariaAttributes }: Props) => {
   return (
-    <Modal open={open} onClose={onClose} AnimationComponent={Slide} role={role} {...rest}>
-      <div className={classNames(styles.dialog, styles[size])}>
-        <ModalCloseButton onClick={onClose} />
+    <Modal open={open} onClose={onClose} AnimationComponent={Slide}>
+      <div className={classNames(styles.dialog, styles[size])} role={role} {...ariaAttributes}>
         {children}
+        <ModalCloseButton onClick={onClose} />
       </div>
     </Modal>
   );
diff --git a/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
index 0660c23a3..194e1af50 100644
--- a/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -17,21 +17,24 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
   >
     <div
       class="_modal_6c6c55"
-      role="dialog"
     >
       <div
         class="_backdrop_6c6c55"
         data-testid="backdrop"
       />
       <div
+        aria-modal="true"
         class="_container_6c6c55"
+        data-testid="container"
       >
         <div
           style="transition: transform 0.2s ease, opacity 0.2s ease; transform: translate(0, -15px); opacity: 0; z-index: 15;"
         >
           <div
             class="_dialog_00d559 _small_00d559"
+            role="dialog"
           >
+            Dialog contents
             <div
               aria-label="close_modal"
               class="_iconButton_0fef65 _modalCloseButton_b92d69"
@@ -53,7 +56,6 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
                 />
               </svg>
             </div>
-            Dialog contents
           </div>
         </div>
       </div>
diff --git a/packages/ui-react/src/components/DialogBackButton/DialogBackButton.tsx b/packages/ui-react/src/components/DialogBackButton/DialogBackButton.tsx
index cf80ef02e..49a568989 100644
--- a/packages/ui-react/src/components/DialogBackButton/DialogBackButton.tsx
+++ b/packages/ui-react/src/components/DialogBackButton/DialogBackButton.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ArrowLeft from '@jwp/ott-theme/assets/icons/arrow_left.svg?react';
+import { useTranslation } from 'react-i18next';
 
 import Icon from '../Icon/Icon';
 import IconButton from '../IconButton/IconButton';
@@ -11,8 +12,10 @@ type Props = {
 };
 
 const DialogBackButton: React.FC<Props> = ({ onClick }: Props) => {
+  const { t } = useTranslation();
+
   return (
-    <IconButton onClick={onClick} className={styles.dialogBackButton} aria-label="Go back">
+    <IconButton onClick={onClick} className={styles.dialogBackButton} aria-label={t('common:back')}>
       <Icon icon={ArrowLeft} />
     </IconButton>
   );
diff --git a/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap b/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
index 9059f0ab4..99e39c033 100644
--- a/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
+++ b/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
 <div>
   <div
-    aria-label="Go back"
+    aria-label="common:back"
     class="_iconButton_0fef65 _dialogBackButton_248199"
     role="button"
     tabindex="0"
diff --git a/packages/ui-react/src/components/Dropdown/Dropdown.tsx b/packages/ui-react/src/components/Dropdown/Dropdown.tsx
index 09747ac3c..25476e59c 100644
--- a/packages/ui-react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/ui-react/src/components/Dropdown/Dropdown.tsx
@@ -22,6 +22,7 @@ type Props = {
   required?: boolean;
   onChange: React.ChangeEventHandler;
   testId?: string;
+  lang?: string;
 };
 
 const Dropdown: React.FC<Props & React.AriaAttributes> = ({
@@ -39,10 +40,12 @@ const Dropdown: React.FC<Props & React.AriaAttributes> = ({
   required = false,
   size = 'medium',
   testId,
+  lang,
   ...rest
 }: Props & React.AriaAttributes) => {
   const { t } = useTranslation('common');
   const id = useOpaqueId();
+  const helperTextId = useOpaqueId('helper_text', name);
 
   return (
     <div className={classNames(styles.container, { [styles.fullWidth]: fullWidth, [styles.error]: error }, styles[size], className)} data-testid={testId}>
@@ -53,7 +56,18 @@ const Dropdown: React.FC<Props & React.AriaAttributes> = ({
         </label>
       )}
       <div className={classNames(styles.dropdown, { [styles.fullWidth]: fullWidth })}>
-        <select id={id} className={styles.select} name={name} value={value} onChange={onChange} aria-required={required} {...rest}>
+        <select
+          id={id}
+          className={styles.select}
+          name={name}
+          value={value}
+          onChange={onChange}
+          aria-required={required}
+          aria-invalid={error}
+          aria-describedby={helperTextId}
+          lang={lang}
+          {...rest}
+        >
           {defaultLabel && (
             <option className={classNames(styles.option, optionsStyle)} value="" disabled={required}>
               {defaultLabel}
@@ -71,7 +85,9 @@ const Dropdown: React.FC<Props & React.AriaAttributes> = ({
             ))}
         </select>
       </div>
-      <HelperText error={error}>{helperText}</HelperText>
+      <HelperText id={helperTextId} error={error}>
+        {helperText}
+      </HelperText>
     </div>
   );
 };
diff --git a/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx b/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
index 66e422b83..9881a4afc 100644
--- a/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
+++ b/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
@@ -14,6 +14,7 @@ import CreditCardCVCField from '../CreditCardCVCField/CreditCardCVCField';
 import CreditCardExpiryField from '../CreditCardExpiryField/CreditCardExpiryField';
 import CreditCardNumberField from '../CreditCardNumberField/CreditCardNumberField';
 import TextField from '../TextField/TextField';
+import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 
 import styles from './EditCardPaymentForm.module.scss';
 
@@ -33,9 +34,10 @@ type Props = {
 
 const EditCardPaymentForm: React.FC<Props> = ({ onCancel, setUpdatingCardDetails }) => {
   const accountController = getModule(AccountController);
+  const announce = useAriaAnnouncer();
 
   const { t } = useTranslation('account');
-  const updateCard = useMutation(accountController.updateCardDetails);
+  const { mutate: mutateCardDetails, isLoading } = useMutation(accountController.updateCardDetails);
   const { activePayment } = useAccountStore(({ activePayment }) => ({ activePayment }), shallow);
 
   const paymentData = useForm<EditCardPaymentFormData>({
@@ -65,7 +67,7 @@ const EditCardPaymentForm: React.FC<Props> = ({ onCancel, setUpdatingCardDetails
     validateOnBlur: true,
     onSubmit: async () => {
       setUpdatingCardDetails(true);
-      updateCard.mutate(
+      mutateCardDetails(
         {
           cardName: paymentData.values.cardholderName,
           cardNumber: paymentData.values.cardNumber.replace(/\s+/g, ''),
@@ -76,6 +78,9 @@ const EditCardPaymentForm: React.FC<Props> = ({ onCancel, setUpdatingCardDetails
         },
         {
           onSettled: () => onCancel(),
+          onSuccess: () => {
+            announce(t('checkout.card_details_updated'), 'success');
+          },
         },
       );
     },
@@ -135,10 +140,11 @@ const EditCardPaymentForm: React.FC<Props> = ({ onCancel, setUpdatingCardDetails
       </div>
       <div>
         <Button
-          disabled={updateCard.isLoading}
+          disabled={isLoading}
           label={t('checkout.save')}
           variant="contained"
           onClick={paymentData.handleSubmit as () => void}
+          type="submit"
           color="primary"
           size="large"
           fullWidth
diff --git a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
index 79d1e0641..25401e974 100644
--- a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
@@ -24,12 +24,16 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_password"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_password"
           name="password"
           placeholder="reset.password"
           required=""
           type="password"
+          value=""
         />
         <div
           class="_control_e16c1b"
@@ -54,7 +58,9 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         </div>
       </div>
       <div
+        aria-live="polite"
         class="_helperText_da58e0"
+        id="helper_text_1235_password_1235"
       >
         reset.password_helper_text
       </div>
@@ -72,12 +78,16 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_passwordconfirmation"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_passwordconfirmation"
           name="passwordConfirmation"
           placeholder="reset.repeat_new_password"
           required=""
           type="password"
+          value=""
         />
         <div
           class="_control_e16c1b"
@@ -102,7 +112,9 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         </div>
       </div>
       <div
+        aria-live="polite"
         class="_helperText_da58e0"
+        id="helper_text_1235_passwordconfirmation_1235"
       >
         reset.password_helper_text
       </div>
diff --git a/packages/ui-react/src/components/Epg/Epg.tsx b/packages/ui-react/src/components/Epg/Epg.tsx
index 0f74e0002..e8052f673 100644
--- a/packages/ui-react/src/components/Epg/Epg.tsx
+++ b/packages/ui-react/src/components/Epg/Epg.tsx
@@ -23,12 +23,12 @@ type Props = {
   channels: EpgChannel[];
   onChannelClick: (channelId: string) => void;
   onProgramClick: (programId: string, channelId: string) => void;
-  channel: EpgChannel | undefined;
+  selectedChannel: EpgChannel | undefined;
   program: EpgProgram | undefined;
   config: Config;
 };
 
-export default function Epg({ channels, onChannelClick, onProgramClick, channel, program, config }: Props) {
+export default function Epg({ channels, selectedChannel, onChannelClick, onProgramClick, program, config }: Props) {
   const breakpoint = useBreakpoint();
   const { t } = useTranslation('common');
 
@@ -48,6 +48,7 @@ export default function Epg({ channels, onChannelClick, onProgramClick, channel,
     backgroundColor,
   });
   const catchupHoursDict = useMemo(() => Object.fromEntries(channels.map((channel) => [channel.id, channel.catchupHours])), [channels]);
+  const titlesDict = useMemo(() => Object.fromEntries(channels.map((channel) => [channel.id, channel.title])), [channels]);
 
   return (
     <div className={styles.epg}>
@@ -74,7 +75,8 @@ export default function Epg({ channels, onChannelClick, onProgramClick, channel,
                 onChannelClick(toChannel.uuid);
                 onScrollToNow();
               }}
-              isActive={channel?.id === epgChannel.uuid}
+              title={titlesDict[epgChannel.uuid] || ''}
+              isActive={selectedChannel?.id === epgChannel.uuid}
             />
           )}
           renderProgram={({ program: programItem, isBaseTimeFormat }) => {
diff --git a/packages/ui-react/src/components/EpgChannel/EpgChannelItem.tsx b/packages/ui-react/src/components/EpgChannel/EpgChannelItem.tsx
index a3f2349df..d423abb43 100644
--- a/packages/ui-react/src/components/EpgChannel/EpgChannelItem.tsx
+++ b/packages/ui-react/src/components/EpgChannel/EpgChannelItem.tsx
@@ -13,9 +13,10 @@ type Props = {
   sidebarWidth: number;
   onClick?: (channel: Channel) => void;
   isActive: boolean;
+  title: string;
 };
 
-const EpgChannelItem: React.VFC<Props> = ({ channel, channelItemWidth, sidebarWidth, onClick, isActive }) => {
+const EpgChannelItem: React.VFC<Props> = ({ channel, channelItemWidth, sidebarWidth, onClick, isActive, title }) => {
   const { position, uuid, channelLogoImage } = channel;
   const style = { top: position.top, height: position.height, width: sidebarWidth };
 
@@ -26,8 +27,9 @@ const EpgChannelItem: React.VFC<Props> = ({ channel, channelItemWidth, sidebarWi
         style={{ width: channelItemWidth }}
         onClick={() => onClick && onClick(channel)}
         data-testid={testId(uuid)}
+        role="button"
       >
-        <Image className={styles.epgChannelLogo} image={channelLogoImage} alt="Logo" width={320} />
+        <Image className={styles.epgChannelLogo} image={channelLogoImage} alt={title} width={320} />
       </div>
     </div>
   );
diff --git a/packages/ui-react/src/components/EpgProgramItem/EpgProgramItem.tsx b/packages/ui-react/src/components/EpgProgramItem/EpgProgramItem.tsx
index e632253f9..6c5b01a90 100644
--- a/packages/ui-react/src/components/EpgProgramItem/EpgProgramItem.tsx
+++ b/packages/ui-react/src/components/EpgProgramItem/EpgProgramItem.tsx
@@ -36,6 +36,7 @@ const ProgramItem: React.VFC<Props> = ({ program, onClick, isActive, compact, di
 
   const showImage = !compact && isMinWidth;
   const showLiveTagInImage = !compact && isMinWidth && isLive;
+  const alt = ''; // intentionally empty for a11y, because adjacent text alternative
 
   return (
     <div className={styles.epgProgramBox} style={position} onClick={() => onClick && onClick(program)}>
@@ -48,7 +49,7 @@ const ProgramItem: React.VFC<Props> = ({ program, onClick, isActive, compact, di
         style={{ width: styles.width }}
         data-testid={testId(program.data.id)}
       >
-        {showImage && <img className={styles.epgProgramImage} src={image} alt="Preview" />}
+        {showImage && <img className={styles.epgProgramImage} src={image} alt={alt} />}
         {showLiveTagInImage && <div className={styles.epgLiveTag}>{t('live')}</div>}
         <div className={styles.epgProgramContent}>
           {compact && isLive && <div className={styles.epgLiveTag}>{t('live')}</div>}
diff --git a/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx b/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx
index 7de42e1fd..75959b14d 100644
--- a/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx
+++ b/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx
@@ -37,27 +37,23 @@ export const ErrorPageWithoutTranslation = ({ title, children, message, learnMor
     <div className={styles.errorPage}>
       <div className={styles.box}>
         <img className={styles.image} src={logo || '/images/logo.png'} alt={'Logo'} />
-        <header>
-          <h1 className={styles.title}>{title || 'An error occurred'}</h1>
-        </header>
-        <main className={styles.main}>
-          <>
-            <p className={styles.message}>{message || 'Try refreshing this page or come back later.'}</p>
-            {children}
-            {(IS_DEVELOPMENT_BUILD || IS_DEMO_MODE || IS_PREVIEW_MODE) && helpLink && (
-              <div className={styles.links}>
-                <a href={helpLink} target={'_blank'} rel={'noreferrer'}>
-                  {learnMoreLabel || 'Learn More'}
-                </a>
-                {(IS_DEVELOPMENT_BUILD || IS_PREVIEW_MODE) && error?.stack && (
-                  <span className={styles.stack}>
-                    <DevStackTrace error={error} />
-                  </span>
-                )}
-              </div>
-            )}
-          </>
-        </main>
+        <h1 className={styles.title}>{title || 'An error occurred'}</h1>
+        <div className={styles.main}>
+          <p className={styles.message}>{message || 'Try refreshing this page or come back later.'}</p>
+          {children}
+          {(IS_DEVELOPMENT_BUILD || IS_DEMO_MODE || IS_PREVIEW_MODE) && helpLink && (
+            <div className={styles.links}>
+              <a href={helpLink} target={'_blank'} rel={'noreferrer'}>
+                {learnMoreLabel || 'Learn More'}
+              </a>
+              {(IS_DEVELOPMENT_BUILD || IS_PREVIEW_MODE) && error?.stack && (
+                <span className={styles.stack}>
+                  <DevStackTrace error={error} />
+                </span>
+              )}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/packages/ui-react/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap b/packages/ui-react/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap
index 249b11354..bcfb0f4e3 100644
--- a/packages/ui-react/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap
+++ b/packages/ui-react/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap
@@ -13,14 +13,12 @@ exports[`<ErrorPage> > renders and matches snapshot 1`] = `
         class="_image_8c5621"
         src="/images/logo.png"
       />
-      <header>
-        <h1
-          class="_title_8c5621"
-        >
-          This is the title
-        </h1>
-      </header>
-      <main
+      <h1
+        class="_title_8c5621"
+      >
+        This is the title
+      </h1>
+      <div
         class="_main_8c5621"
       >
         <p
@@ -29,7 +27,7 @@ exports[`<ErrorPage> > renders and matches snapshot 1`] = `
           generic_error_description
         </p>
         This is the content
-      </main>
+      </div>
     </div>
   </div>
 </div>
diff --git a/packages/ui-react/src/components/Favorites/Favorites.test.tsx b/packages/ui-react/src/components/Favorites/Favorites.test.tsx
index 99eac2f9f..d7a8f2f02 100644
--- a/packages/ui-react/src/components/Favorites/Favorites.test.tsx
+++ b/packages/ui-react/src/components/Favorites/Favorites.test.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import ApiService from '@jwp/ott-common/src/services/ApiService';
-import { PersonalShelf } from '@jwp/ott-common/src/constants';
 import { mockService } from '@jwp/ott-common/test/mockService';
+import favorites from '@jwp/ott-testing/fixtures/favorites.json';
 
 import { renderWithRouter } from '../../../test/utils';
-import PlaylistContainer from '../../containers/PlaylistContainer/PlaylistContainer';
 
 import Favorites from './Favorites';
 
@@ -16,19 +15,7 @@ describe('<Favorites>', () => {
 
   test('renders and matches snapshot', () => {
     const { container } = renderWithRouter(
-      <PlaylistContainer type={PersonalShelf.Favorites}>
-        {({ playlist, error, isLoading }) => (
-          <Favorites
-            playlist={playlist}
-            error={error}
-            isLoading={isLoading}
-            onCardHover={() => null}
-            onClearFavoritesClick={() => null}
-            hasSubscription={true}
-            accessModel={'SVOD'}
-          />
-        )}
-      </PlaylistContainer>,
+      <Favorites playlist={favorites} onCardHover={() => null} onClearFavoritesClick={() => null} hasSubscription={true} accessModel={'SVOD'} />,
     );
 
     expect(container).toMatchSnapshot();
diff --git a/packages/ui-react/src/components/Favorites/Favorites.tsx b/packages/ui-react/src/components/Favorites/Favorites.tsx
index 318a156fb..4d991ba59 100644
--- a/packages/ui-react/src/components/Favorites/Favorites.tsx
+++ b/packages/ui-react/src/components/Favorites/Favorites.tsx
@@ -7,15 +7,11 @@ import { Breakpoint, type Breakpoints } from '@jwp/ott-ui-react/src/hooks/useBre
 
 import Button from '../Button/Button';
 import CardGrid from '../CardGrid/CardGrid';
-import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
-import ErrorPage from '../ErrorPage/ErrorPage';
 
 import styles from './Favorites.module.scss';
 
 type Props = {
   playlist: Playlist;
-  error: unknown;
-  isLoading: boolean;
   accessModel: AccessModel;
   hasSubscription: boolean;
   onCardHover?: (item: PlaylistItem) => void;
@@ -30,15 +26,8 @@ const cols: Breakpoints = {
   [Breakpoint.xl]: 3,
 };
 
-const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, onCardHover, onClearFavoritesClick }: Props): JSX.Element => {
+const Favorites = ({ playlist, accessModel, hasSubscription, onCardHover, onClearFavoritesClick }: Props): JSX.Element => {
   const { t } = useTranslation('user');
-
-  if (isLoading) return <LoadingOverlay />;
-
-  if (error || !playlist) {
-    return <ErrorPage title={t('favorites.not_found')} />;
-  }
-
   const getURL = (playlistItem: PlaylistItem) => mediaURL({ media: playlistItem, playlistId: playlistItem.feedid });
 
   return (
@@ -53,7 +42,7 @@ const Favorites = ({ playlist, error, isLoading, accessModel, hasSubscription, o
           playlist={playlist}
           onCardHover={onCardHover}
           cols={cols}
-          isLoading={isLoading}
+          isLoading={false}
           accessModel={accessModel}
           isLoggedIn={true}
           hasSubscription={hasSubscription}
diff --git a/packages/ui-react/src/components/Favorites/__snapshots__/Favorites.test.tsx.snap b/packages/ui-react/src/components/Favorites/__snapshots__/Favorites.test.tsx.snap
index ea9ddee8c..f3cef5d83 100644
--- a/packages/ui-react/src/components/Favorites/__snapshots__/Favorites.test.tsx.snap
+++ b/packages/ui-react/src/components/Favorites/__snapshots__/Favorites.test.tsx.snap
@@ -1,3 +1,178 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<Favorites> > renders and matches snapshot 1`] = `<div />`;
+exports[`<Favorites> > renders and matches snapshot 1`] = `
+<div>
+  <div>
+    <div
+      class="_header_546956"
+    >
+      <h1>
+        favorites.title
+      </h1>
+      <button
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+        type="button"
+      >
+        <span>
+          favorites.clear
+        </span>
+      </button>
+    </div>
+    <div>
+      <div
+        aria-rowcount="1"
+        class="_container_7175d1 _cols-3_7175d1"
+        role="grid"
+      >
+        <div
+          aria-rowindex="0"
+          class="_row_19b484"
+          role="row"
+        >
+          <div
+            aria-colindex="0"
+            class="_cell_19b484"
+            id="layout_grid_0-0"
+            role="gridcell"
+            style="width: 33%;"
+          >
+            <a
+              class="_card_d75732"
+              data-testid="SVOD 002: Caminandes 1 llama drama"
+              href="/m/1TJAvj2S/svod-002-caminandes-1-llama-drama?r=bdH6HTUi"
+              role="button"
+              tabindex="0"
+            >
+              <div
+                class="_titleContainer_d75732"
+              >
+                <h3
+                  class="_title_d75732"
+                >
+                  SVOD 002: Caminandes 1 llama drama
+                </h3>
+              </div>
+              <div
+                class="_poster_d75732 _aspect169_d75732"
+              >
+                <img
+                  alt=""
+                  class="_posterImage_d75732 _image_4c41c3"
+                  src="https://cdn.jwplayer.com/v2/media/1TJAvj2S/images/card.webp?poster_fallback=1&width=320"
+                />
+                <div
+                  class="_meta_d75732"
+                >
+                  <div
+                    class="_tags_d75732"
+                  >
+                    <div
+                      class="_tag_d75732"
+                    >
+                      2 min
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </div>
+          <div
+            aria-colindex="1"
+            class="_cell_19b484"
+            id="layout_grid_0-1"
+            role="gridcell"
+            style="width: 33%;"
+          >
+            <a
+              class="_card_d75732"
+              data-testid="SVOD 003: Caminandes 2 gran dillama"
+              href="/m/rnibIt0n/svod-003-caminandes-2-gran-dillama?r=bdH6HTUi"
+              role="button"
+              tabindex="-1"
+            >
+              <div
+                class="_titleContainer_d75732"
+              >
+                <h3
+                  class="_title_d75732"
+                >
+                  SVOD 003: Caminandes 2 gran dillama
+                </h3>
+              </div>
+              <div
+                class="_poster_d75732 _aspect169_d75732"
+              >
+                <img
+                  alt=""
+                  class="_posterImage_d75732 _image_4c41c3"
+                  src="https://cdn.jwplayer.com/v2/media/rnibIt0n/images/card.webp?poster_fallback=1&width=320"
+                />
+                <div
+                  class="_meta_d75732"
+                >
+                  <div
+                    class="_tags_d75732"
+                  >
+                    <div
+                      class="_tag_d75732"
+                    >
+                      3 min
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </div>
+          <div
+            aria-colindex="2"
+            class="_cell_19b484"
+            id="layout_grid_0-2"
+            role="gridcell"
+            style="width: 33%;"
+          >
+            <a
+              class="_card_d75732"
+              data-testid="SVOD 001: Tears of Steel"
+              href="/m/MaCvdQdE/svod-001-tears-of-steel?r=E2uaFiUM"
+              role="button"
+              tabindex="-1"
+            >
+              <div
+                class="_titleContainer_d75732"
+              >
+                <h3
+                  class="_title_d75732"
+                >
+                  SVOD 001: Tears of Steel
+                </h3>
+              </div>
+              <div
+                class="_poster_d75732 _aspect169_d75732"
+              >
+                <img
+                  alt=""
+                  class="_posterImage_d75732 _image_4c41c3"
+                  src="https://cdn.jwplayer.com/v2/media/MaCvdQdE/images/card.webp?poster_fallback=1&width=320"
+                />
+                <div
+                  class="_meta_d75732"
+                >
+                  <div
+                    class="_tags_d75732"
+                  >
+                    <div
+                      class="_tag_d75732"
+                    >
+                      13 min
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/ui-react/src/components/Filter/__snapshots__/Filter.test.tsx.snap b/packages/ui-react/src/components/Filter/__snapshots__/Filter.test.tsx.snap
index 6bf873a36..8fc29d1be 100644
--- a/packages/ui-react/src/components/Filter/__snapshots__/Filter.test.tsx.snap
+++ b/packages/ui-react/src/components/Filter/__snapshots__/Filter.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`<Filter> > renders Filter 1`] = `
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296"
       role="option"
+      type="button"
     >
       <span>
         x
@@ -18,6 +19,7 @@ exports[`<Filter> > renders Filter 1`] = `
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296"
       role="option"
+      type="button"
     >
       <span>
         y
@@ -26,6 +28,7 @@ exports[`<Filter> > renders Filter 1`] = `
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296"
       role="option"
+      type="button"
     >
       <span>
         z
@@ -34,6 +37,7 @@ exports[`<Filter> > renders Filter 1`] = `
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296"
       role="option"
+      type="button"
     >
       <span>
         bb
diff --git a/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx b/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
index 18c7f2118..32878c32c 100644
--- a/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
+++ b/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
@@ -12,6 +12,7 @@ import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
 import Button from '../Button/Button';
 import Spinner from '../Spinner/Spinner';
 import { modalURLFromLocation } from '../../utils/location';
+import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 
 import styles from './FinalizePayment.module.scss';
 
@@ -20,6 +21,7 @@ const FinalizePayment = () => {
   const checkoutController = getModule(CheckoutController);
 
   const { t } = useTranslation('account');
+  const announce = useAriaAnnouncer();
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -41,6 +43,7 @@ const FinalizePayment = () => {
       await checkoutController.finalizeAdyenPayment({ redirectResult: decodeURI(redirectResult) }, orderId);
       await accountController.reloadSubscriptions({ delay: 2000 });
 
+      announce(t('checkout.payment_success'), 'success');
       navigate(paymentSuccessUrl);
     } catch (error: unknown) {
       if (error instanceof Error) {
diff --git a/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap b/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
index cb942a60e..c9d190dc7 100644
--- a/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
@@ -29,6 +29,9 @@ exports[`<ForgotPasswordForm> > renders and matches snapshot type forgot 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_email"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_email"
           name="email"
diff --git a/packages/ui-react/src/components/Form/Form.tsx b/packages/ui-react/src/components/Form/Form.tsx
index 92e273cd9..c2c3591b1 100644
--- a/packages/ui-react/src/components/Form/Form.tsx
+++ b/packages/ui-react/src/components/Form/Form.tsx
@@ -44,6 +44,7 @@ function Form<TData extends GenericFormValues>({ isLoading, initialValues, onRes
           values: initialValues,
           isDirty: false,
           activeSectionId: undefined,
+          success: false,
           errors: undefined,
         };
       });
diff --git a/packages/ui-react/src/components/Form/FormSection.tsx b/packages/ui-react/src/components/Form/FormSection.tsx
index 12ce4eb10..29217f810 100644
--- a/packages/ui-react/src/components/Form/FormSection.tsx
+++ b/packages/ui-react/src/components/Form/FormSection.tsx
@@ -134,7 +134,6 @@ export function FormSection<TData extends GenericFormValues>({
     function onEdit() {
       if (!isEditing) {
         onCancel();
-
         setFormState((s) => {
           return {
             ...s,
diff --git a/packages/ui-react/src/components/FormFeedback/FormFeedback.module.scss b/packages/ui-react/src/components/FormFeedback/FormFeedback.module.scss
index 501a4dc41..e0c37c571 100644
--- a/packages/ui-react/src/components/FormFeedback/FormFeedback.module.scss
+++ b/packages/ui-react/src/components/FormFeedback/FormFeedback.module.scss
@@ -1,5 +1,6 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
+@use '@jwp/ott-ui-react/src/styles/accessibility';
 
 .formFeedback {
   margin-bottom: 24px;
@@ -30,3 +31,14 @@
   color: theme.$form-feedback-success-color;
   background-color: theme.$form-feedback-success-bg-color;
 }
+
+.hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+}
diff --git a/packages/ui-react/src/components/FormFeedback/FormFeedback.tsx b/packages/ui-react/src/components/FormFeedback/FormFeedback.tsx
index c46ee2d57..8d0c4d945 100644
--- a/packages/ui-react/src/components/FormFeedback/FormFeedback.tsx
+++ b/packages/ui-react/src/components/FormFeedback/FormFeedback.tsx
@@ -4,18 +4,34 @@ import classNames from 'classnames';
 import styles from './FormFeedback.module.scss';
 
 type Props = {
+  visible?: boolean;
   children?: React.ReactNode;
   variant: 'info' | 'success' | 'warning' | 'error';
 };
 
-const FormFeedback: React.FC<Props> = ({ children, variant = 'error' }: Props) => {
+const variantAriaMap = {
+  info: 'polite',
+  success: 'assertive',
+  warning: 'polite',
+  error: 'assertive',
+} as const;
+
+const FormFeedback: React.FC<Props> = ({ children, variant = 'error', visible = true }: Props) => {
   const className = classNames(styles.formFeedback, {
     [styles.error]: variant === 'error',
     [styles.warning]: variant === 'warning',
     [styles.success]: variant === 'success',
     [styles.info]: variant === 'info',
+    [styles.hidden]: !visible,
   });
-  return <div className={className}>{children}</div>;
+
+  const ariaLive = variantAriaMap[variant];
+
+  return (
+    <div aria-live={ariaLive} className={className}>
+      {children}
+    </div>
+  );
 };
 
 export default FormFeedback;
diff --git a/packages/ui-react/src/components/FormFeedback/__snapshots__/FormFeedback.test.tsx.snap b/packages/ui-react/src/components/FormFeedback/__snapshots__/FormFeedback.test.tsx.snap
index f485c63c9..26ef8fc82 100644
--- a/packages/ui-react/src/components/FormFeedback/__snapshots__/FormFeedback.test.tsx.snap
+++ b/packages/ui-react/src/components/FormFeedback/__snapshots__/FormFeedback.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`<FormFeedback> > renders and matches snapshot 1`] = `
 <div>
   <div
+    aria-live="assertive"
     class="_formFeedback_99f247 _error_99f247"
   >
     Form feedback
diff --git a/packages/ui-react/src/components/Header/Header.test.tsx b/packages/ui-react/src/components/Header/Header.test.tsx
index 82046af6e..973ed40b1 100644
--- a/packages/ui-react/src/components/Header/Header.test.tsx
+++ b/packages/ui-react/src/components/Header/Header.test.tsx
@@ -33,6 +33,7 @@ describe('<Header />', () => {
         onCloseSearchButtonClick={vi.fn()}
         onLoginButtonClick={vi.fn()}
         userMenuOpen={false}
+        sideBarOpen={false}
         openUserMenu={vi.fn()}
         closeUserMenu={vi.fn()}
         openLanguageMenu={vi.fn()}
diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
index d11a7e668..ec8b79fa1 100644
--- a/packages/ui-react/src/components/Header/Header.tsx
+++ b/packages/ui-react/src/components/Header/Header.tsx
@@ -41,6 +41,7 @@ type Props = {
   closeLanguageMenu: () => void;
   children?: ReactNode;
   isLoggedIn: boolean;
+  sideBarOpen: boolean;
   userMenuOpen: boolean;
   languageMenuOpen: boolean;
   canLogin: boolean;
@@ -48,7 +49,6 @@ type Props = {
   supportedLanguages: LanguageDefinition[];
   currentLanguage: LanguageDefinition | undefined;
   onLanguageClick: (code: string) => void;
-
   favoritesEnabled?: boolean;
 
   profilesData?: {
@@ -73,6 +73,7 @@ const Header: React.FC<Props> = ({
   onCloseSearchButtonClick,
   onSignUpButtonClick,
   isLoggedIn,
+  sideBarOpen,
   userMenuOpen,
   languageMenuOpen,
   openUserMenu,
@@ -197,22 +198,27 @@ const Header: React.FC<Props> = ({
   return (
     <header className={headerClassName}>
       <div className={styles.container}>
+        <a href="#content" className={styles.skipToContent}>
+          {t('skip_to_content')}
+        </a>
         <div className={styles.menu}>
-          <IconButton className={styles.iconButton} aria-label={t('open_menu')} onClick={onMenuButtonClick}>
+          <IconButton
+            className={styles.iconButton}
+            aria-label={sideBarOpen ? t('close_menu') : t('open_menu')}
+            aria-controls="sidebar"
+            aria-haspopup="true"
+            aria-expanded={sideBarOpen}
+            onClick={onMenuButtonClick}
+          >
             <Icon icon={Menu} />
           </IconButton>
         </div>
-        <a href="#content" className={styles.skipToContent}>
-          {t('skip_to_content')}
-        </a>
         {logoSrc && (
           <div className={styles.brand}>
             <Logo src={logoSrc} onLoad={() => setLogoLoaded(true)} />
           </div>
         )}
-        <nav className={styles.nav} aria-label="menu">
-          {logoLoaded || !logoSrc ? children : null}
-        </nav>
+        <nav className={styles.nav}>{logoLoaded || !logoSrc ? children : null}</nav>
         <div className={styles.actions}>
           {renderSearch()}
           {renderLanguageDropdown()}
diff --git a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
index 6c5a5cb03..c22e2094a 100644
--- a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -8,10 +8,19 @@ exports[`<Header /> > renders header 1`] = `
     <div
       class="_container_f4f7a7"
     >
+      <a
+        class="_skipToContent_f4f7a7"
+        href="#content"
+      >
+        skip_to_content
+      </a>
       <div
         class="_menu_f4f7a7"
       >
         <div
+          aria-controls="sidebar"
+          aria-expanded="false"
+          aria-haspopup="true"
           aria-label="open_menu"
           class="_iconButton_0fef65 _iconButton_f4f7a7"
           role="button"
@@ -33,14 +42,7 @@ exports[`<Header /> > renders header 1`] = `
           </svg>
         </div>
       </div>
-      <a
-        class="_skipToContent_f4f7a7"
-        href="#content"
-      >
-        skip_to_content
-      </a>
       <nav
-        aria-label="menu"
         class="_nav_f4f7a7"
       >
         a
@@ -70,6 +72,7 @@ exports[`<Header /> > renders header 1`] = `
         >
           <button
             class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+            type="button"
           >
             <span>
               sign_in
@@ -77,6 +80,7 @@ exports[`<Header /> > renders header 1`] = `
           </button>
           <button
             class="_button_f8f296 _primary_f8f296"
+            type="button"
           >
             <span>
               sign_up
diff --git a/packages/ui-react/src/components/HelperText/HelperText.tsx b/packages/ui-react/src/components/HelperText/HelperText.tsx
index a52ec8e68..416aea1a0 100644
--- a/packages/ui-react/src/components/HelperText/HelperText.tsx
+++ b/packages/ui-react/src/components/HelperText/HelperText.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
 
 import styles from './HelperText.module.scss';
 
@@ -7,10 +8,17 @@ type Props = {
   children: React.ReactNode;
   className?: string;
   error?: boolean;
+  id?: string;
 };
 
-const HelperText: React.FC<Props> = ({ children, className, error }: Props) => {
-  return children ? <div className={classNames(styles.helperText, { [styles.error]: error }, className)}>{children}</div> : null;
+const HelperText: React.FC<Props> = ({ children, className, error, id }: Props) => {
+  const fallbackId = useOpaqueId((id && id) || 'helper_text');
+
+  return children ? (
+    <div id={fallbackId} aria-live={error ? 'assertive' : 'polite'} className={classNames(styles.helperText, { [styles.error]: error }, className)}>
+      {children}
+    </div>
+  ) : null;
 };
 
 export default HelperText;
diff --git a/packages/ui-react/src/components/HelperText/__snapshots__/HelperText.test.tsx.snap b/packages/ui-react/src/components/HelperText/__snapshots__/HelperText.test.tsx.snap
index d31e88106..bee577bb2 100644
--- a/packages/ui-react/src/components/HelperText/__snapshots__/HelperText.test.tsx.snap
+++ b/packages/ui-react/src/components/HelperText/__snapshots__/HelperText.test.tsx.snap
@@ -3,7 +3,9 @@
 exports[`<HelperText> > renders and matches snapshot 1`] = `
 <div>
   <div
+    aria-live="assertive"
     class="_helperText_da58e0 _error_da58e0"
+    id="helper_text_1235"
   >
     Hello world!
   </div>
diff --git a/packages/ui-react/src/components/IconButton/IconButton.module.scss b/packages/ui-react/src/components/IconButton/IconButton.module.scss
index 97a0f4221..b30ac672e 100644
--- a/packages/ui-react/src/components/IconButton/IconButton.module.scss
+++ b/packages/ui-react/src/components/IconButton/IconButton.module.scss
@@ -7,6 +7,7 @@
   align-items: center;
   width: 40px;
   height: 40px;
+  border-radius: 4px;
   outline: var(--highlight-color, white) none;
 
   cursor: pointer;
diff --git a/packages/ui-react/src/components/LayoutGrid/LayoutGrid.module.scss b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.module.scss
new file mode 100644
index 000000000..92beb167f
--- /dev/null
+++ b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.module.scss
@@ -0,0 +1,8 @@
+.row {
+  display: flex;  
+}
+
+.cell {
+  display: inline-block;
+  padding: 4px;
+}
diff --git a/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
new file mode 100644
index 000000000..b34b604a0
--- /dev/null
+++ b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
@@ -0,0 +1,153 @@
+// Keyboard-accessible grid layout, with focus management
+
+import { throttle } from '@jwp/ott-common/src/utils/common';
+import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+import styles from './LayoutGrid.module.scss';
+
+type Props<Item> = {
+  className?: string;
+  columnCount: number;
+  data: Item[];
+  renderCell: (item: Item, tabIndex: number) => JSX.Element;
+};
+
+const scrollIntoViewThrottled = throttle(function (focusedElement: HTMLElement) {
+  focusedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+}, 300);
+
+const LayoutGrid = <Item extends object>({ className, columnCount, data, renderCell }: Props<Item>) => {
+  const [focused, setFocused] = useState(false);
+  const [currentRowIndex, setCurrentRowIndex] = useState(0);
+  const [currentColumnIndex, setCurrentColumnIndex] = useState(0);
+  const gridRef = useRef<HTMLDivElement>(null);
+  const rowCount = Math.ceil(data.length / columnCount);
+
+  const handleKeyDown = useEventCallback((event: KeyboardEvent) => {
+    if (event instanceof KeyboardEvent === false) return;
+
+    const { key, ctrlKey } = event;
+
+    if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(key)) return;
+
+    event.preventDefault();
+
+    const isOnFirstColumn = currentColumnIndex === 0;
+    const isOnLastColumn = currentColumnIndex === columnCount - 1;
+    const isOnFirstRow = currentRowIndex === 0;
+    const isOnLastRow = currentRowIndex === rowCount - 1;
+    const maxRightLastRow = (data.length % columnCount || columnCount) - 1; // Never go beyond last item
+    const maxRight = isOnLastRow ? maxRightLastRow : columnCount - 1;
+
+    switch (key) {
+      case 'ArrowLeft':
+        if (isOnFirstColumn && !isOnFirstRow) {
+          // Move to last of previous row
+          setCurrentColumnIndex(columnCount - 1);
+          setCurrentRowIndex((current) => Math.max(current - 1, 0));
+
+          return;
+        }
+        return setCurrentColumnIndex((current) => Math.max(current - 1, 0));
+      case 'ArrowRight':
+        if (isOnLastColumn && !isOnLastRow) {
+          // Move to first of next row
+          setCurrentColumnIndex(0);
+          setCurrentRowIndex((current) => Math.min(current + 1, rowCount - 1));
+
+          return;
+        }
+        return setCurrentColumnIndex((current) => Math.min(current + 1, maxRight));
+      case 'ArrowUp':
+        return setCurrentRowIndex((current) => Math.max(current - 1, 0));
+      case 'ArrowDown':
+        return setCurrentRowIndex((current) => Math.min(current + 1, rowCount - 1));
+      case 'Home':
+        if (ctrlKey) {
+          setCurrentRowIndex(0);
+        }
+        return setCurrentColumnIndex(0);
+      case 'End':
+        if (ctrlKey) {
+          setCurrentRowIndex(maxRight);
+          setCurrentColumnIndex(maxRightLastRow);
+
+          return;
+        }
+        return setCurrentColumnIndex(rowCount - 1);
+      case 'PageUp':
+        return setCurrentRowIndex((current) => Math.max(current - 1, 0));
+      case 'PageDown':
+        return setCurrentRowIndex((current) => Math.min(current + 1, rowCount - 1));
+      default:
+        return;
+    }
+  });
+
+  const originalScrollBehavior = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (focused) {
+      document.addEventListener('keydown', handleKeyDown);
+
+      // Prevent immediate page scrolling when out-of-viewport element gets focus
+      originalScrollBehavior.current = document.documentElement.style.scrollBehavior;
+      document.documentElement.style.scrollBehavior = 'smooth';
+    }
+
+    return () => {
+      document.documentElement.style.scrollBehavior = originalScrollBehavior.current || '';
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [focused, handleKeyDown, columnCount, rowCount]);
+
+  // Set DOM focus to a focusable element within the currently focusable grid cell
+  useLayoutEffect(() => {
+    if (!focused) return;
+
+    const gridCell = document.getElementById(`layout_grid_${currentRowIndex}-${currentColumnIndex}`) as HTMLDivElement | null;
+    const focusableElement = gridCell?.querySelector('button, a, input, [tabindex]:not([tabindex="-1"])') as HTMLElement | null;
+    const elementToFocus = focusableElement || gridCell;
+
+    if (!elementToFocus) return;
+
+    elementToFocus.focus();
+    scrollIntoViewThrottled(elementToFocus);
+  }, [focused, currentRowIndex, currentColumnIndex]);
+
+  // When the window size changes, correct indexes if necessary
+  useEffect(() => {
+    const maxRightLastRow = (data.length % columnCount || columnCount) - 1; // Never go beyond last item
+
+    if (currentColumnIndex > columnCount - 1) {
+      setCurrentColumnIndex(columnCount - 1);
+    }
+    if (currentRowIndex === rowCount - 1 && currentColumnIndex > maxRightLastRow) {
+      setCurrentColumnIndex(maxRightLastRow);
+    }
+  }, [currentColumnIndex, currentRowIndex, columnCount, rowCount, data.length]);
+
+  return (
+    <div role="grid" ref={gridRef} aria-rowcount={rowCount} className={className} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}>
+      {Array.from({ length: rowCount }).map((_, rowIndex) => (
+        <div role="row" key={rowIndex} aria-rowindex={rowIndex} className={styles.row}>
+          {data.slice(rowIndex * columnCount, rowIndex * columnCount + columnCount).map((item, columnIndex) => (
+            <div
+              role="gridcell"
+              id={`layout_grid_${rowIndex}-${columnIndex}`}
+              key={columnIndex}
+              aria-colindex={columnIndex}
+              className={styles.cell}
+              style={{ width: `${Math.round(100 / columnCount)}%` }}
+            >
+              {renderCell(item, currentRowIndex === rowIndex && currentColumnIndex === columnIndex ? 0 : -1)}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default LayoutGrid;
diff --git a/packages/ui-react/src/components/LoginForm/LoginForm.tsx b/packages/ui-react/src/components/LoginForm/LoginForm.tsx
index a98e30e27..b594c673d 100644
--- a/packages/ui-react/src/components/LoginForm/LoginForm.tsx
+++ b/packages/ui-react/src/components/LoginForm/LoginForm.tsx
@@ -54,10 +54,10 @@ const LoginForm: React.FC<Props> = ({ onSubmit, onChange, socialLoginURLs, value
           <FormFeedback variant="warning">{getTranslatedErrorMessage(messageKey)}</FormFeedback>
         </div>
       )}
+      {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
 
       <SocialButtonsList socialLoginURLs={socialLoginURLs} />
       <h2 className={styles.title}>{t('login.sign_in')}</h2>
-      {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <TextField
         value={values.email}
         onChange={onChange}
diff --git a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
index 75912f56d..6be761d51 100644
--- a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
+++ b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
@@ -44,6 +44,9 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_email"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_email"
           name="email"
@@ -68,6 +71,9 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_password"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_password"
           name="password"
diff --git a/packages/ui-react/src/components/MarkdownComponent/MarkdownComponent.tsx b/packages/ui-react/src/components/MarkdownComponent/MarkdownComponent.tsx
index 37f704e79..71bbed2bb 100644
--- a/packages/ui-react/src/components/MarkdownComponent/MarkdownComponent.tsx
+++ b/packages/ui-react/src/components/MarkdownComponent/MarkdownComponent.tsx
@@ -23,9 +23,10 @@ type Props = {
   markdownString: string;
   className?: string;
   inline?: boolean;
+  tag?: string;
 };
 
-const MarkdownComponent: React.FC<Props> = ({ markdownString, className, inline = false }) => {
+const MarkdownComponent: React.FC<Props> = ({ markdownString, className, tag = 'div', inline = false }) => {
   const sanitizedHTMLString = useMemo(() => {
     const parseDelegate = inline ? marked.parseInline : marked.parse;
     const dirtyHTMLString = parseDelegate(markdownString);
@@ -33,7 +34,7 @@ const MarkdownComponent: React.FC<Props> = ({ markdownString, className, inline
     return DOMPurify.sanitize(dirtyHTMLString, { ADD_ATTR: ['target'] });
   }, [inline, markdownString]);
 
-  return <div className={classNames(styles.markdown, className)} dangerouslySetInnerHTML={{ __html: sanitizedHTMLString }} />;
+  return React.createElement(tag, { dangerouslySetInnerHTML: { __html: sanitizedHTMLString }, className: classNames(styles.markdown, className) });
 };
 
 export default MarkdownComponent;
diff --git a/packages/ui-react/src/components/MenuButton/MenuButton.tsx b/packages/ui-react/src/components/MenuButton/MenuButton.tsx
index 4970a62a1..7e8fb942d 100644
--- a/packages/ui-react/src/components/MenuButton/MenuButton.tsx
+++ b/packages/ui-react/src/components/MenuButton/MenuButton.tsx
@@ -26,7 +26,6 @@ const MenuButton: React.FC<Props> = ({ label, to, onClick, onBlur, onFocus, tabI
         onBlur={onBlur}
         onFocus={onFocus}
         onClick={onClick}
-        aria-label={label}
         className={({ isActive }) => getClassName(isActive || active)}
         to={to}
         tabIndex={tabIndex}
@@ -39,7 +38,7 @@ const MenuButton: React.FC<Props> = ({ label, to, onClick, onBlur, onFocus, tabI
   }
 
   return (
-    <div onBlur={onBlur} onFocus={onFocus} aria-label={label} className={getClassName(active)} onClick={onClick} tabIndex={tabIndex}>
+    <div onBlur={onBlur} onFocus={onFocus} className={getClassName(active)} onClick={onClick} tabIndex={tabIndex}>
       {icon}
       <span className={styles.label}>{label}</span>
     </div>
diff --git a/packages/ui-react/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap b/packages/ui-react/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap
index 4fa16ae00..61a522aae 100644
--- a/packages/ui-react/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap
+++ b/packages/ui-react/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`<MenuButton> > renders and matches snapshot 1`] = `
 <div>
   <div
-    aria-label="Label"
     class="_menuButton_91706b"
     tabindex="0"
   >
diff --git a/packages/ui-react/src/components/Modal/Modal.test.tsx b/packages/ui-react/src/components/Modal/Modal.test.tsx
index 93f2d9eb4..409083f3e 100644
--- a/packages/ui-react/src/components/Modal/Modal.test.tsx
+++ b/packages/ui-react/src/components/Modal/Modal.test.tsx
@@ -23,7 +23,7 @@ describe('<Modal>', () => {
     expect(onClose).toBeCalledTimes(1);
   });
 
-  test('should add aria-hidden and inert attributes on the root div when open', () => {
+  test('Should add inert attribute on the root div when open', () => {
     const onClose = vi.fn();
     const { getByTestId, rerender } = render(
       <div id="root" data-testid="root">
@@ -31,7 +31,7 @@ describe('<Modal>', () => {
       </div>,
     );
 
-    expect(getByTestId('root')).toHaveAttribute('aria-hidden', 'true');
+    expect(getByTestId('container')).toHaveAttribute('aria-modal', 'true');
     expect(getByTestId('root')).toHaveProperty('inert', true);
 
     rerender(
@@ -40,7 +40,6 @@ describe('<Modal>', () => {
       </div>,
     );
 
-    expect(getByTestId('root')).not.toHaveAttribute('aria-hidden', 'true');
     expect(getByTestId('root')).toHaveProperty('inert', false);
   });
 
diff --git a/packages/ui-react/src/components/Modal/Modal.tsx b/packages/ui-react/src/components/Modal/Modal.tsx
index 7bcd9b510..b2026808b 100644
--- a/packages/ui-react/src/components/Modal/Modal.tsx
+++ b/packages/ui-react/src/components/Modal/Modal.tsx
@@ -13,10 +13,9 @@ type Props = {
   AnimationComponent?: React.JSXElementConstructor<{ open?: boolean; duration?: number; delay?: number; children: React.ReactNode }>;
   open: boolean;
   onClose?: () => void;
-  role?: string;
-};
+} & React.AriaAttributes;
 
-const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent = Grow, role }: Props) => {
+const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent = Grow, ...ariaAtributes }: Props) => {
   const [visible, setVisible] = useState(open);
   const lastFocus = useRef<HTMLElement>() as React.MutableRefObject<HTMLElement>;
   const modalRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
@@ -44,23 +43,25 @@ const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent =
       // make sure main content is hidden for screen readers and inert
       if (appView) {
         appView.inert = true;
-        appView.setAttribute('aria-hidden', 'true');
       }
 
       // prevent scrolling under the modal
       document.body.style.marginRight = `${scrollbarSize()}px`;
       document.body.style.overflowY = 'hidden';
 
-      // focus the first element in the modal
-      if (modalRef.current) {
-        const interactiveElement = modalRef.current.querySelectorAll('a, button, [tabindex="0"]')[0] as HTMLElement | null;
+      // focus the first element in the modal, after a short delay to allow the modal to be rendered
+      setTimeout(() => {
+        if (modalRef.current) {
+          const interactiveElement = modalRef.current.querySelectorAll(
+            'div[role="dialog"] input, div[role="dialog"] a, div[role="dialog"] button, div[role="dialog"] [tabindex]',
+          )[0] as HTMLElement | null;
 
-        if (interactiveElement) interactiveElement.focus();
-      }
+          if (interactiveElement) interactiveElement.focus();
+        }
+      }, 10);
     } else {
       if (appView) {
         appView.inert = false;
-        appView.removeAttribute('aria-hidden');
       }
 
       document.body.style.removeProperty('margin-right');
@@ -77,9 +78,9 @@ const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent =
 
   return ReactDOM.createPortal(
     <Fade open={open} duration={300} onCloseAnimationEnd={() => setVisible(false)}>
-      <div className={styles.modal} onKeyDown={keyDownEventHandler} ref={modalRef} role={role}>
+      <div className={styles.modal} onKeyDown={keyDownEventHandler} ref={modalRef}>
         <div className={styles.backdrop} onClick={onClose} data-testid={testId('backdrop')} />
-        <div className={styles.container}>
+        <div className={styles.container} data-testid={testId('container')} aria-modal="true" {...ariaAtributes}>
           <AnimationComponent open={open} duration={200}>
             {children}
           </AnimationComponent>
diff --git a/packages/ui-react/src/components/NoPaymentRequired/__snapshots__/NoPaymentRequired.test.tsx.snap b/packages/ui-react/src/components/NoPaymentRequired/__snapshots__/NoPaymentRequired.test.tsx.snap
index fffb3019d..cd840c58d 100644
--- a/packages/ui-react/src/components/NoPaymentRequired/__snapshots__/NoPaymentRequired.test.tsx.snap
+++ b/packages/ui-react/src/components/NoPaymentRequired/__snapshots__/NoPaymentRequired.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`<NoPaymentRequired> > renders and matches snapshot 1`] = `
     </p>
     <button
       class="_button_f8f296 _primary_f8f296 _fullWidth_f8f296 _large_f8f296"
+      type="button"
     >
       <span>
         checkout.continue
diff --git a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap b/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
index 8f679856b..271ac62a7 100644
--- a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
+++ b/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
@@ -15,12 +15,16 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
       class="_container_e16c1b"
     >
       <input
+        aria-describedby="helper_text_1235_password"
+        aria-invalid="false"
+        aria-required="true"
         class="_input_e16c1b"
         id="text-field_1235_password"
         name="password"
         placeholder="Placeholder"
         required=""
         type="password"
+        value=""
       />
       <div
         class="_control_e16c1b"
@@ -45,7 +49,9 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
+      aria-live="polite"
       class="_helperText_da58e0"
+      id="helper_text_1235_password_1235"
     >
       reset.password_helper_text
     </div>
diff --git a/packages/ui-react/src/components/PayPal/__snapshots__/PayPal.test.tsx.snap b/packages/ui-react/src/components/PayPal/__snapshots__/PayPal.test.tsx.snap
index 686c39b95..db3abeb15 100644
--- a/packages/ui-react/src/components/PayPal/__snapshots__/PayPal.test.tsx.snap
+++ b/packages/ui-react/src/components/PayPal/__snapshots__/PayPal.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`<PayPal> > renders and matches snapshot 1`] = `
     </p>
     <button
       class="_button_f8f296 _primary_f8f296 _fullWidth_f8f296 _large_f8f296"
+      type="button"
     >
       <span>
         checkout.continue
diff --git a/packages/ui-react/src/components/Payment/Payment.tsx b/packages/ui-react/src/components/Payment/Payment.tsx
index 1ee6aff0c..de4af6a34 100644
--- a/packages/ui-react/src/components/Payment/Payment.tsx
+++ b/packages/ui-react/src/components/Payment/Payment.tsx
@@ -292,12 +292,25 @@ const Payment = ({
             <div key={activePaymentDetail.id}>
               <TextField
                 label={t('user:payment.card_number')}
+                name="cardNumber"
                 value={`•••• •••• •••• ${activePaymentDetail.paymentMethodSpecificParams.lastCardFourDigits || ''}`}
+                aria-label={t('user:payment.card_number_hidden', { number: activePaymentDetail.paymentMethodSpecificParams.lastCardFourDigits })}
                 editing={false}
               />
               <div className={styles.cardDetails}>
-                <TextField label={t('user:payment.expiry_date')} value={activePaymentDetail.paymentMethodSpecificParams.cardExpirationDate} editing={false} />
-                <TextField label={t('user:payment.security_code')} value={'******'} editing={false} />
+                <TextField
+                  label={t('user:payment.expiry_date')}
+                  name="cardExpiry"
+                  value={activePaymentDetail.paymentMethodSpecificParams.cardExpirationDate}
+                  editing={false}
+                />
+                <TextField
+                  label={t('user:payment.security_code')}
+                  name="cardSecurityCode"
+                  value={'******'}
+                  editing={false}
+                  aria-label={t('user:payment.security_code_hidden')}
+                />
               </div>
               <Button label={t('account:payment.edit_card')} variant="outlined" onClick={onEditCardDetailsClick} />
             </div>
diff --git a/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap b/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
index dfcba11ba..6a20f57b2 100644
--- a/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
+++ b/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
@@ -23,13 +23,22 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
       >
         <label
           class="_label_e16c1b"
-          for="text-field_1235"
+          for="text-field_1235_cardnumber"
         >
           user:payment.card_number
         </label>
-        <p>
-          •••• •••• •••• 0002
-        </p>
+        <input
+          aria-describedby="helper_text_1235_cardnumber"
+          aria-invalid="false"
+          aria-label="user:payment.card_number_hidden"
+          aria-required="false"
+          class="_input_e16c1b"
+          id="text-field_1235_cardnumber"
+          name="cardNumber"
+          readonly=""
+          type="text"
+          value="•••• •••• •••• 0002"
+        />
       </div>
       <div
         class="_cardDetails_c57ff5"
@@ -39,30 +48,48 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
         >
           <label
             class="_label_e16c1b"
-            for="text-field_1235"
+            for="text-field_1235_cardexpiry"
           >
             user:payment.expiry_date
           </label>
-          <p>
-            03/2030
-          </p>
+          <input
+            aria-describedby="helper_text_1235_cardexpiry"
+            aria-invalid="false"
+            aria-required="false"
+            class="_input_e16c1b"
+            id="text-field_1235_cardexpiry"
+            name="cardExpiry"
+            readonly=""
+            type="text"
+            value="03/2030"
+          />
         </div>
         <div
           class="_textField_e16c1b"
         >
           <label
             class="_label_e16c1b"
-            for="text-field_1235"
+            for="text-field_1235_cardsecuritycode"
           >
             user:payment.security_code
           </label>
-          <p>
-            ******
-          </p>
+          <input
+            aria-describedby="helper_text_1235_cardsecuritycode"
+            aria-invalid="false"
+            aria-label="user:payment.security_code_hidden"
+            aria-required="false"
+            class="_input_e16c1b"
+            id="text-field_1235_cardsecuritycode"
+            name="cardSecurityCode"
+            readonly=""
+            type="text"
+            value="******"
+          />
         </div>
       </div>
       <button
         class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+        type="button"
       >
         <span>
           account:payment.edit_card
diff --git a/packages/ui-react/src/components/PaymentFailed/__snapshots__/PaymentFailed.test.tsx.snap b/packages/ui-react/src/components/PaymentFailed/__snapshots__/PaymentFailed.test.tsx.snap
index 0420ab1a1..39895c02c 100644
--- a/packages/ui-react/src/components/PaymentFailed/__snapshots__/PaymentFailed.test.tsx.snap
+++ b/packages/ui-react/src/components/PaymentFailed/__snapshots__/PaymentFailed.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`<PaymentFailed> > renders and matches snapshot 1`] = `
     <div>
       <button
         class="_button_f8f296 _primary_f8f296 _fullWidth_f8f296 _large_f8f296"
+        type="button"
       >
         <span>
           checkout.close
diff --git a/packages/ui-react/src/components/PaymentMethodForm/PaymentMethodForm.module.scss b/packages/ui-react/src/components/PaymentMethodForm/PaymentMethodForm.module.scss
index 19bb1121b..c34f81dfd 100644
--- a/packages/ui-react/src/components/PaymentMethodForm/PaymentMethodForm.module.scss
+++ b/packages/ui-react/src/components/PaymentMethodForm/PaymentMethodForm.module.scss
@@ -1,5 +1,6 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
+@use '@jwp/ott-ui-react/src/styles/accessibility';
 @use '@jwp/ott-ui-react/src/styles/mixins/responsive';
 
 
@@ -23,6 +24,11 @@
 .paymentMethod {
   flex: 1;
   margin: 6px 4px;
+
+  &:focus-within .paymentMethodLabel {
+    @include accessibility.accessibleOutline;
+    transform: scale(1.05);
+  }
 }
 
 .radio {
@@ -34,13 +40,6 @@
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
 
-  :focus,
-  :active {
-    + .paymentMethodLabel {
-      border-color: variables.$white;
-    }
-  }
-
   &:checked + .paymentMethodLabel {
     color: variables.$black;
     background-color: variables.$white;
diff --git a/packages/ui-react/src/components/PaymentMethodForm/PaymentMethodForm.tsx b/packages/ui-react/src/components/PaymentMethodForm/PaymentMethodForm.tsx
index d1b6cd085..1cb8cefd7 100644
--- a/packages/ui-react/src/components/PaymentMethodForm/PaymentMethodForm.tsx
+++ b/packages/ui-react/src/components/PaymentMethodForm/PaymentMethodForm.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { PaymentMethod } from '@jwp/ott-common/types/checkout';
 import CreditCard from '@jwp/ott-theme/assets/icons/creditcard.svg?react';
@@ -7,6 +7,7 @@ import PayPal from '@jwp/ott-theme/assets/icons/paypal.svg?react';
 import Button from '../Button/Button';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import Icon from '../Icon/Icon';
+import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 
 import styles from './PaymentMethodForm.module.scss';
 
@@ -30,11 +31,16 @@ const PaymentMethodForm: React.FC<Props> = ({
   updateSuccess,
 }) => {
   const { t } = useTranslation('account');
+  const announce = useAriaAnnouncer();
   // t('payment.longer_than_usual');
 
   const cardPaymentMethod = paymentMethods?.find((method) => method.methodName === 'card');
   const paypalPaymentMethod = paymentMethods?.find((method) => method.methodName === 'paypal');
 
+  useEffect(() => {
+    updateSuccess && announce(t('checkout.payment_success'), 'success');
+  }, [updateSuccess, announce, t]);
+
   return (
     <>
       <h1 className={styles.title}>{t('payment.update_payment_details')}</h1>
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
index aae29ec1b..7d704f8c6 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
+++ b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       personal_details.title
     </h2>
     <div
+      aria-live="assertive"
       class="_formFeedback_99f247 _error_99f247"
     >
       This is a form error
@@ -29,6 +30,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_firstname"
+          aria-invalid="true"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_firstname"
           name="firstName"
@@ -39,7 +43,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
+        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
+        id="helper_text_1235_firstname_1235"
       >
         this is wrong
       </div>
@@ -57,6 +63,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_lastname"
+          aria-invalid="true"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_lastname"
           name="lastName"
@@ -67,7 +76,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
+        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
+        id="helper_text_1235_lastname_1235"
       >
         also this
       </div>
@@ -88,6 +99,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_companyname"
+          aria-invalid="false"
+          aria-required="false"
           class="_input_e16c1b"
           id="text-field_1235_companyname"
           name="companyName"
@@ -97,7 +111,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
+        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
+        id="helper_text_1235_companyname_1235"
       >
         So much errors
       </div>
@@ -115,6 +131,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_address"
+          aria-invalid="true"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_address"
           name="address"
@@ -125,7 +144,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
+        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
+        id="helper_text_1235_address_1235"
       >
         Do you know where you live
       </div>
@@ -146,6 +167,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_address2"
+          aria-invalid="false"
+          aria-required="false"
           class="_input_e16c1b"
           id="text-field_1235_address2"
           name="address2"
@@ -155,7 +179,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
+        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
+        id="helper_text_1235_address2_1235"
       >
         Come on
       </div>
@@ -173,6 +199,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_city"
+          aria-invalid="true"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_city"
           name="city"
@@ -183,7 +212,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
+        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
+        id="helper_text_1235_city_1235"
       >
         stop it
       </div>
@@ -201,6 +232,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_state"
+          aria-invalid="true"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_state"
           name="state"
@@ -211,7 +245,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
+        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
+        id="helper_text_1235_state_1235"
       >
         Confusion
       </div>
@@ -229,6 +265,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_postcode"
+          aria-invalid="true"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_postcode"
           name="postCode"
@@ -239,7 +278,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
+        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
+        id="helper_text_1235_postcode_1235"
       >
         Post Code should be 5 centimeters
       </div>
@@ -257,6 +298,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_phonenumber"
+          aria-invalid="true"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_phonenumber"
           name="phoneNumber"
@@ -267,7 +311,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
+        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
+        id="helper_text_1235_phonenumber_1235"
       >
         Invalid
       </div>
@@ -286,6 +332,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         class="_container_eb6974"
       >
         <input
+          aria-describedby="helper_text_1235_birthdate"
+          aria-invalid="true"
           class="_hiddenInput_eb6974"
           id="text-field_1235_birthdate-hidden"
           name="birthDate"
@@ -321,7 +369,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
+        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
+        id="helper_text_1235_birthdate_1235"
       >
         February 30th? Really?
       </div>
@@ -339,6 +389,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         class="_dropdown_bb73c6 _fullWidth_bb73c6"
       >
         <select
+          aria-describedby="helper_text_1235_key1"
+          aria-invalid="true"
           aria-required="true"
           class="_select_bb73c6"
           id="1235"
@@ -372,21 +424,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         </select>
       </div>
       <div
+        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
+        id="helper_text_1235_key1_1235"
       >
         question 1 is invalid
       </div>
     </div>
     <div>
-      <div
+      <label
         class="_header_d50e6e"
         data-testid="radio-header"
+        for="radio_1235_key2"
       >
-        Is this a question?
         <span>
+          Is this a question?
+        </span>
+        <span
+          class="_note_d50e6e"
+        >
           optional
         </span>
-      </div>
+      </label>
       <div
         class="_radio_d50e6e"
       >
@@ -419,7 +478,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         </label>
       </div>
       <div
+        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
+        id="helper_text_1235"
       >
         Invalid answer
       </div>
@@ -436,6 +497,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         class="_row_531f07"
       >
         <input
+          aria-describedby="helper_text_1235_ccc"
           aria-required="true"
           checked=""
           id="check-box_1235_ccc"
@@ -451,7 +513,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         </label>
       </div>
       <div
+        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0 _helperTextError_531f07"
+        id="helper_text_1235_ccc_1235"
       >
         No way Jose
       </div>
@@ -493,6 +557,9 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_firstname"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_firstname"
           name="firstName"
@@ -516,6 +583,9 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_lastname"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_lastname"
           name="lastName"
@@ -542,6 +612,9 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_companyname"
+          aria-invalid="false"
+          aria-required="false"
           class="_input_e16c1b"
           id="text-field_1235_companyname"
           name="companyName"
@@ -564,6 +637,9 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_address"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_address"
           name="address"
@@ -590,6 +666,9 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_address2"
+          aria-invalid="false"
+          aria-required="false"
           class="_input_e16c1b"
           id="text-field_1235_address2"
           name="address2"
@@ -612,6 +691,9 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_city"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_city"
           name="city"
@@ -635,6 +717,9 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_state"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_state"
           name="state"
@@ -658,6 +743,9 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_postcode"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_postcode"
           name="postCode"
@@ -681,6 +769,9 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_phonenumber"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_phonenumber"
           name="phoneNumber"
@@ -705,6 +796,8 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         class="_container_eb6974"
       >
         <input
+          aria-describedby="helper_text_1235_birthdate"
+          aria-invalid="false"
           class="_hiddenInput_eb6974"
           id="text-field_1235_birthdate-hidden"
           name="birthDate"
@@ -753,6 +846,8 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         class="_dropdown_bb73c6 _fullWidth_bb73c6"
       >
         <select
+          aria-describedby="helper_text_1235_key1"
+          aria-invalid="false"
           aria-required="true"
           class="_select_bb73c6"
           id="1235"
@@ -787,15 +882,20 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div>
-      <div
+      <label
         class="_header_d50e6e"
         data-testid="radio-header"
+        for="radio_1235_key2"
       >
-        Is this a question?
         <span>
+          Is this a question?
+        </span>
+        <span
+          class="_note_d50e6e"
+        >
           optional
         </span>
-      </div>
+      </label>
       <div
         class="_radio_d50e6e"
       >
@@ -840,6 +940,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         class="_row_531f07"
       >
         <input
+          aria-describedby="helper_text_1235_ccc"
           aria-required="true"
           checked=""
           id="check-box_1235_ccc"
diff --git a/packages/ui-react/src/components/Popover/Popover.module.scss b/packages/ui-react/src/components/Popover/Popover.module.scss
index 085c0141b..adf5febe4 100644
--- a/packages/ui-react/src/components/Popover/Popover.module.scss
+++ b/packages/ui-react/src/components/Popover/Popover.module.scss
@@ -7,8 +7,8 @@
   right: 5px;
   z-index: variables.$header-z-index;
   min-width: 180px;
-  overflow: hidden;
   border-radius: 5px 5px;
+
   > div {
     z-index: variables.$header-z-index;
   }
diff --git a/packages/ui-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap b/packages/ui-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap
index 6bc73497d..00a1c0249 100644
--- a/packages/ui-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap
+++ b/packages/ui-react/src/components/Popover/__snapshots__/Popover.test.tsx.snap
@@ -10,7 +10,6 @@ exports[`<Popover> > renders and matches snapshot 1`] = `
     >
       <a
         aria-current="page"
-        aria-label="Home"
         class="_menuButton_91706b _active_91706b"
         href="/"
         tabindex="0"
diff --git a/packages/ui-react/src/components/Radio/Radio.module.scss b/packages/ui-react/src/components/Radio/Radio.module.scss
index 5f2f29b3c..e28160388 100644
--- a/packages/ui-react/src/components/Radio/Radio.module.scss
+++ b/packages/ui-react/src/components/Radio/Radio.module.scss
@@ -2,12 +2,13 @@
 @use '@jwp/ott-ui-react/src/styles/theme';
 
 .header {
+  display: flex;
   margin-bottom: 8px;
   font-weight: var(--body-font-weight-bold);
   text-align: left;
 
-  > span {
-    float: right;
+  > span.note {
+    margin-left: auto;
     color: rgba(variables.$white, 0.7);
     font-weight: normal;
   }
diff --git a/packages/ui-react/src/components/Radio/Radio.tsx b/packages/ui-react/src/components/Radio/Radio.tsx
index 19e56b919..9e7c06739 100644
--- a/packages/ui-react/src/components/Radio/Radio.tsx
+++ b/packages/ui-react/src/components/Radio/Radio.tsx
@@ -15,23 +15,34 @@ type Props = {
   helperText?: string;
   error?: boolean;
   required?: boolean;
+  disabled?: boolean;
+  lang?: string;
 };
 
-const Radio: React.FC<Props> = ({ name, onChange, header, value, values, helperText, error, required, ...rest }: Props) => {
+const Radio: React.FC<Props> = ({ name, onChange, header, value, values, helperText, error, required, disabled, lang, ...rest }: Props) => {
   const { t } = useTranslation('common');
   const id = useOpaqueId('radio', name);
 
   return (
     <div className={error ? styles.error : undefined} {...rest}>
       {header || !required ? (
-        <div className={styles.header} data-testid="radio-header">
-          {header}
-          {!required ? <span>{t('optional')}</span> : null}
-        </div>
+        <label className={styles.header} htmlFor={id} data-testid="radio-header">
+          <span lang={lang}>{header}</span>
+          {!required ? <span className={styles.note}>{t('optional')}</span> : null}
+        </label>
       ) : null}
       {values.map(({ value: optionValue, label: optionLabel }, index) => (
-        <div className={styles.radio} key={index}>
-          <input value={optionValue} name={name} type="radio" id={id + index} onChange={onChange} checked={value === optionValue} required={required} />
+        <div className={styles.radio} key={index} lang={lang}>
+          <input
+            value={optionValue}
+            name={name}
+            type="radio"
+            id={id + index}
+            onChange={onChange}
+            checked={value === optionValue}
+            required={required}
+            disabled={disabled}
+          />
           <label htmlFor={id + index}>{optionLabel}</label>
         </div>
       ))}
diff --git a/packages/ui-react/src/components/Radio/__snapshots__/Radio.test.tsx.snap b/packages/ui-react/src/components/Radio/__snapshots__/Radio.test.tsx.snap
index ab2c77003..04d47fcc6 100644
--- a/packages/ui-react/src/components/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/packages/ui-react/src/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -3,15 +3,20 @@
 exports[`<Radio> > renders and matches snapshot 1`] = `
 <div>
   <div>
-    <div
+    <label
       class="_header_d50e6e"
       data-testid="radio-header"
+      for="radio_1235_radio"
     >
-      Choose a Value
       <span>
+        Choose a Value
+      </span>
+      <span
+        class="_note_d50e6e"
+      >
         optional
       </span>
-    </div>
+    </label>
     <div
       class="_radio_d50e6e"
     >
@@ -59,7 +64,9 @@ exports[`<Radio> > renders and matches snapshot 1`] = `
       </label>
     </div>
     <div
+      aria-live="polite"
       class="_helperText_da58e0"
+      id="helper_text_1235"
     >
       This is required!
     </div>
diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
index 0cc735d0e..47e366089 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
@@ -8,6 +8,7 @@ import { testId } from '@jwp/ott-common/src/utils/common';
 import useToggle from '@jwp/ott-hooks-react/src/useToggle';
 import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
 import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
+import env from '@jwp/ott-common/src/env';
 
 import TextField from '../TextField/TextField';
 import Button from '../Button/Button';
@@ -53,10 +54,11 @@ const RegistrationForm: React.FC<Props> = ({
 }: Props) => {
   const [viewPassword, toggleViewPassword] = useToggle();
 
-  const { t } = useTranslation('account');
+  const { t, i18n } = useTranslation('account');
   const location = useLocation();
 
   const ref = useRef<HTMLDivElement>(null);
+  const htmlLang = i18n.language !== env.APP_DEFAULT_LANGUAGE ? env.APP_DEFAULT_LANGUAGE : undefined;
 
   const formatConsentLabel = (label: string): string | JSX.Element => {
     const sanitizedLabel = DOMPurify.sanitize(label);
@@ -76,14 +78,6 @@ const RegistrationForm: React.FC<Props> = ({
     }
   }, [errors.form]);
 
-  if (loading) {
-    return (
-      <div style={{ height: 400 }}>
-        <LoadingOverlay inline />
-      </div>
-    );
-  }
-
   return (
     <form onSubmit={onSubmit} data-testid={testId('registration-form')} noValidate>
       <h2 className={styles.title}>{t('registration.sign_up')}</h2>
@@ -124,21 +118,26 @@ const RegistrationForm: React.FC<Props> = ({
       />
       {publisherConsents && (
         <div className={styles.customFields} data-testid="custom-reg-fields">
-          {publisherConsents.map((consent) => (
-            <CustomRegisterField
-              key={consent.name}
-              type={consent.type}
-              name={consent.name}
-              options={consent.options}
-              label={formatConsentLabel(consent.label)}
-              placeholder={consent.placeholder}
-              value={consentValues[consent.name] || ''}
-              required={consent.required}
-              error={consentErrors?.includes(consent.name)}
-              helperText={consentErrors?.includes(consent.name) ? t('registration.consent_required') : undefined}
-              onChange={onConsentChange}
-            />
-          ))}
+          {publisherConsents.map((consent) => {
+            const consentError = consentErrors.find((error) => error === consent.name);
+
+            return (
+              <CustomRegisterField
+                key={consent.name}
+                type={consent.type}
+                name={consent.name}
+                options={consent.options}
+                label={formatConsentLabel(consent.label)}
+                placeholder={consent.placeholder}
+                value={consentValues[consent.name] || ''}
+                required={consent.required}
+                error={!!consentError}
+                helperText={consentError ? t(`registration.field_${consent.type}_required`) : undefined}
+                onChange={onConsentChange}
+                lang={htmlLang}
+              />
+            );
+          })}
         </div>
       )}
       <Button
@@ -154,7 +153,7 @@ const RegistrationForm: React.FC<Props> = ({
       <p className={styles.bottom}>
         {t('registration.already_account')} <Link to={modalURLFromLocation(location, 'login')}>{t('login.sign_in')}</Link>
       </p>
-      {submitting && <LoadingOverlay transparentBackground inline />}
+      {(loading || submitting) && <LoadingOverlay transparentBackground inline />}
     </form>
   );
 };
diff --git a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
index 0a7c746b3..42720916a 100644
--- a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
+++ b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -25,6 +25,9 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_email"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_email"
           name="email"
@@ -48,6 +51,9 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
         class="_container_e16c1b"
       >
         <input
+          aria-describedby="helper_text_1235_password"
+          aria-invalid="false"
+          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_password"
           name="password"
@@ -79,7 +85,9 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
         </div>
       </div>
       <div
+        aria-live="polite"
         class="_helperText_da58e0"
+        id="helper_text_1235_password_1235"
       >
         registration.password_helper_text
       </div>
diff --git a/packages/ui-react/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx b/packages/ui-react/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx
index ee9a33df2..f86ae2bb8 100644
--- a/packages/ui-react/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx
+++ b/packages/ui-react/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx
@@ -44,6 +44,7 @@ const RenewSubscriptionForm: React.FC<Props> = ({ subscription, customer, error,
         onClick={onConfirm}
         fullWidth
         disabled={submitting}
+        type="submit"
       />
       <Button label={t('renew_subscription.no_thanks')} onClick={onClose} fullWidth />
     </div>
diff --git a/packages/ui-react/src/components/RenewSubscriptionForm/__snapshots__/RenewSubscriptionForm.test.tsx.snap b/packages/ui-react/src/components/RenewSubscriptionForm/__snapshots__/RenewSubscriptionForm.test.tsx.snap
index 291ac895d..5941dbf5a 100644
--- a/packages/ui-react/src/components/RenewSubscriptionForm/__snapshots__/RenewSubscriptionForm.test.tsx.snap
+++ b/packages/ui-react/src/components/RenewSubscriptionForm/__snapshots__/RenewSubscriptionForm.test.tsx.snap
@@ -37,6 +37,7 @@ exports[`<RenewSubscriptionForm> > renders and matches snapshot 1`] = `
     <button
       aria-disabled="false"
       class="_button_f8f296 _confirmButton_a290fe _primary_f8f296 _fullWidth_f8f296"
+      type="submit"
     >
       <span>
         renew_subscription.renew_subscription
@@ -44,6 +45,7 @@ exports[`<RenewSubscriptionForm> > renders and matches snapshot 1`] = `
     </button>
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="button"
     >
       <span>
         renew_subscription.no_thanks
diff --git a/packages/ui-react/src/components/ResetPasswordForm/ResetPasswordForm.tsx b/packages/ui-react/src/components/ResetPasswordForm/ResetPasswordForm.tsx
index 65c256708..eb9edbc2c 100644
--- a/packages/ui-react/src/components/ResetPasswordForm/ResetPasswordForm.tsx
+++ b/packages/ui-react/src/components/ResetPasswordForm/ResetPasswordForm.tsx
@@ -19,7 +19,7 @@ const ResetPasswordForm: React.FC<Props> = ({ onCancel, onReset, submitting }: P
         {t('reset.reset_password')}
       </h1>
       <p className={styles.text}>{t('reset.text')}</p>
-      <Button onClick={onReset} className={styles.button} fullWidth color="primary" label={t('reset.yes')} disabled={submitting} />
+      <Button onClick={onReset} className={styles.button} fullWidth color="primary" label={t('reset.yes')} type="submit" disabled={submitting} />
       <Button onClick={onCancel} fullWidth label={t('reset.no')} />
     </div>
   );
diff --git a/packages/ui-react/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap b/packages/ui-react/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap
index 4d40a9fe3..ab39771b3 100644
--- a/packages/ui-react/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`<ResetPassword> > renders and matches snapshot 1`] = `
     <button
       aria-disabled="false"
       class="_button_f8f296 _button_1976d9 _primary_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="submit"
     >
       <span>
         reset.yes
@@ -27,6 +28,7 @@ exports[`<ResetPassword> > renders and matches snapshot 1`] = `
     </button>
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="button"
     >
       <span>
         reset.no
diff --git a/packages/ui-react/src/components/ShareButton/__snapshots__/ShareButton.test.tsx.snap b/packages/ui-react/src/components/ShareButton/__snapshots__/ShareButton.test.tsx.snap
index 59de0d733..f19a1a915 100644
--- a/packages/ui-react/src/components/ShareButton/__snapshots__/ShareButton.test.tsx.snap
+++ b/packages/ui-react/src/components/ShareButton/__snapshots__/ShareButton.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`<ShareButton> > renders and matches snapshot 1`] = `
 <div>
   <button
     class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+    type="button"
   >
     <div
       class="_startIcon_f8f296"
diff --git a/packages/ui-react/src/components/Shelf/Shelf.module.scss b/packages/ui-react/src/components/Shelf/Shelf.module.scss
index f841fbd52..0d9ba318e 100644
--- a/packages/ui-react/src/components/Shelf/Shelf.module.scss
+++ b/packages/ui-react/src/components/Shelf/Shelf.module.scss
@@ -3,7 +3,9 @@
   color: var(--primary-color);
   font-family: var(--body-alt-font-family);
 
-  &:hover {
+  &:hover,
+  &:focus-within
+  {
     .chevron {
       opacity: 1;
       &.disabled {
diff --git a/packages/ui-react/src/components/Shelf/Shelf.tsx b/packages/ui-react/src/components/Shelf/Shelf.tsx
index e15aa2986..fd143edc0 100644
--- a/packages/ui-react/src/components/Shelf/Shelf.tsx
+++ b/packages/ui-react/src/components/Shelf/Shelf.tsx
@@ -9,6 +9,7 @@ import { PersonalShelf } from '@jwp/ott-common/src/constants';
 import ChevronLeft from '@jwp/ott-theme/assets/icons/chevron_left.svg?react';
 import ChevronRight from '@jwp/ott-theme/assets/icons/chevron_right.svg?react';
 import useBreakpoint, { Breakpoint, type Breakpoints } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
+import type { PosterAspectRatio } from '@jwp/ott-common/src/utils/collection';
 
 import TileDock from '../TileDock/TileDock';
 import Card from '../Card/Card';
@@ -46,7 +47,7 @@ export type ShelfProps = {
   accessModel: AccessModel;
   isLoggedIn: boolean;
   hasSubscription: boolean;
-  posterAspect?: string;
+  posterAspect?: PosterAspectRatio;
   visibleTilesDelta?: number;
 };
 
@@ -73,6 +74,7 @@ const Shelf = ({
   const renderTile = useCallback(
     (item: PlaylistItem, isInView: boolean) => {
       const url = mediaURL({ media: item, playlistId: playlist.feedid, play: type === PersonalShelf.ContinueWatching });
+
       return (
         <Card
           key={item.mediaid}
@@ -137,8 +139,8 @@ const Shelf = ({
   if (error || !playlist?.playlist) return <h2 className={styles.error}>Could not load items</h2>;
 
   return (
-    <div className={classNames(styles.shelf, { [styles.featured]: featured })}>
-      {!featured ? <h2 className={classNames(styles.title, { [styles.loading]: loading })}>{title || playlist.title}</h2> : null}
+    <div className={classNames(styles.shelf)}>
+      {!featured ? <h2 className={classNames(styles.title)}>{title || playlist.title}</h2> : null}
       <TileDock<PlaylistItem>
         items={playlist.playlist}
         tilesToShow={tilesToShow}
diff --git a/packages/ui-react/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap b/packages/ui-react/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap
index 440edaf70..2861231c8 100644
--- a/packages/ui-react/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap
+++ b/packages/ui-react/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap
@@ -3,206 +3,210 @@
 exports[`Shelf Component tests > Featured shelf 1`] = `
 <div>
   <div
-    class="_shelf_81910b undefined"
+    class="_shelf_81910b"
   >
-    <div>
+    <div
+      class="_tileDock_22abb0"
+    >
       <div
-        class="_tileDock_22abb0"
+        class="_leftControl_22abb0"
       >
         <div
-          class="_leftControl_22abb0"
+          aria-label="slide_left"
+          class="_chevron_81910b _disabled_81910b"
+          role="button"
+          tabindex="-1"
         >
-          <div
-            aria-label="slide_left"
-            class="_chevron_81910b _disabled_81910b"
-            role="button"
-            tabindex="-1"
+          <svg
+            aria-hidden="true"
+            class="_icon_585b29"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              class="_icon_585b29"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
-              />
-            </svg>
-          </div>
+            <path
+              d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+            />
+          </svg>
         </div>
-        <ul
-          style="transform: translate3d(-200%, 0, 0); margin-left: -4px; margin-right: -4px;"
+      </div>
+      <ul
+        style="transform: translate3d(-200%, 0, 0); margin-left: -4px; margin-right: -4px;"
+      >
+        <li
+          aria-hidden="true"
+          class="_notInView_22abb0"
+          style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
         >
-          <li
-            class="_notInView_22abb0"
-            style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
+          <a
+            class="_card_d75732 _featured_d75732 _disabled_d75732"
+            data-testid="Third movie"
+            href="/m/12332123/third-movie"
+            role="button"
+            tabindex="-1"
           >
-            <a
-              class="_card_d75732 _featured_d75732 _disabled_d75732"
-              data-testid="Third movie"
-              href="/m/12332123/third-movie"
-              role="button"
-              tabindex="-1"
+            <div
+              class="_poster_d75732 _aspect169_d75732"
             >
               <div
-                class="_poster_d75732 _aspect169_d75732"
+                class="_meta_d75732"
               >
                 <div
-                  class="_meta_d75732"
-                >
-                  <div
-                    class="_tags_d75732"
-                  />
-                </div>
+                  class="_tags_d75732"
+                />
               </div>
-            </a>
-          </li>
-          <li
-            class="_notInView_22abb0"
-            style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
+            </div>
+          </a>
+        </li>
+        <li
+          aria-hidden="true"
+          class="_notInView_22abb0"
+          style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
+        >
+          <a
+            class="_card_d75732 _featured_d75732 _disabled_d75732"
+            data-testid="Last playlist item"
+            href="/m/ddeeddee/last-playlist-item"
+            role="button"
+            tabindex="-1"
           >
-            <a
-              class="_card_d75732 _featured_d75732 _disabled_d75732"
-              data-testid="Last playlist item"
-              href="/m/ddeeddee/last-playlist-item"
-              role="button"
-              tabindex="-1"
+            <div
+              class="_poster_d75732 _aspect169_d75732"
             >
               <div
-                class="_poster_d75732 _aspect169_d75732"
+                class="_meta_d75732"
               >
                 <div
-                  class="_meta_d75732"
-                >
-                  <div
-                    class="_tags_d75732"
-                  />
-                </div>
+                  class="_tags_d75732"
+                />
               </div>
-            </a>
-          </li>
-          <li
-            class=""
-            style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+            </div>
+          </a>
+        </li>
+        <li
+          aria-hidden="false"
+          class=""
+          style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+        >
+          <a
+            class="_card_d75732 _featured_d75732"
+            data-testid="Movie 1"
+            href="/m/1234abcd/movie-1"
+            role="button"
+            tabindex="0"
           >
-            <a
-              class="_card_d75732 _featured_d75732"
-              data-testid="Movie 1"
-              href="/m/1234abcd/movie-1"
-              role="button"
-              tabindex="0"
+            <div
+              class="_poster_d75732 _aspect169_d75732"
             >
               <div
-                class="_poster_d75732 _aspect169_d75732"
+                class="_meta_d75732"
               >
+                <h3
+                  class="_title_d75732"
+                >
+                  Movie 1
+                </h3>
                 <div
-                  class="_meta_d75732"
+                  class="_tags_d75732"
                 >
-                  <h3
-                    class="_title_d75732"
-                  >
-                    Movie 1
-                  </h3>
                   <div
-                    class="_tags_d75732"
+                    class="_tag_d75732"
                   >
-                    <div
-                      class="_tag_d75732"
-                    >
-                      1 min
-                    </div>
+                    1 min
                   </div>
                 </div>
               </div>
-            </a>
-          </li>
-          <li
-            class="_notInView_22abb0"
-            style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
+            </div>
+          </a>
+        </li>
+        <li
+          aria-hidden="true"
+          class="_notInView_22abb0"
+          style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
+        >
+          <a
+            class="_card_d75732 _featured_d75732 _disabled_d75732"
+            data-testid="Movie 2"
+            href="/m/aaaaaaaa/movie-2"
+            role="button"
+            tabindex="-1"
           >
-            <a
-              class="_card_d75732 _featured_d75732 _disabled_d75732"
-              data-testid="Movie 2"
-              href="/m/aaaaaaaa/movie-2"
-              role="button"
-              tabindex="-1"
+            <div
+              class="_poster_d75732 _aspect169_d75732"
             >
               <div
-                class="_poster_d75732 _aspect169_d75732"
+                class="_meta_d75732"
               >
                 <div
-                  class="_meta_d75732"
-                >
-                  <div
-                    class="_tags_d75732"
-                  />
-                </div>
+                  class="_tags_d75732"
+                />
               </div>
-            </a>
-          </li>
-          <li
-            class="_notInView_22abb0"
-            style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
+            </div>
+          </a>
+        </li>
+        <li
+          aria-hidden="true"
+          class="_notInView_22abb0"
+          style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
+        >
+          <a
+            class="_card_d75732 _featured_d75732 _disabled_d75732"
+            data-testid="Third movie"
+            href="/m/12332123/third-movie"
+            role="button"
+            tabindex="-1"
           >
-            <a
-              class="_card_d75732 _featured_d75732 _disabled_d75732"
-              data-testid="Third movie"
-              href="/m/12332123/third-movie"
-              role="button"
-              tabindex="-1"
+            <div
+              class="_poster_d75732 _aspect169_d75732"
             >
               <div
-                class="_poster_d75732 _aspect169_d75732"
+                class="_meta_d75732"
               >
                 <div
-                  class="_meta_d75732"
-                >
-                  <div
-                    class="_tags_d75732"
-                  />
-                </div>
+                  class="_tags_d75732"
+                />
               </div>
-            </a>
-          </li>
-        </ul>
+            </div>
+          </a>
+        </li>
+      </ul>
+      <div
+        class="_rightControl_22abb0"
+      >
         <div
-          class="_rightControl_22abb0"
+          aria-label="slide_right"
+          class="_chevron_81910b"
+          role="button"
+          tabindex="0"
         >
-          <div
-            aria-label="slide_right"
-            class="_chevron_81910b"
-            role="button"
-            tabindex="0"
+          <svg
+            aria-hidden="true"
+            class="_icon_585b29"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              class="_icon_585b29"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
-              />
-            </svg>
-          </div>
+            <path
+              d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+            />
+          </svg>
         </div>
       </div>
-      <div
-        class="_dots_22abb0"
-      >
-        <span
-          class="_dot_81910b _active_81910b"
-        />
-        <span
-          class="_dot_81910b"
-        />
-        <span
-          class="_dot_81910b"
-        />
-        <span
-          class="_dot_81910b"
-        />
-      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="_dots_22abb0"
+    >
+      <span
+        class="_dot_81910b _active_81910b"
+      />
+      <span
+        class="_dot_81910b"
+      />
+      <span
+        class="_dot_81910b"
+      />
+      <span
+        class="_dot_81910b"
+      />
     </div>
   </div>
 </div>
@@ -218,171 +222,173 @@ exports[`Shelf Component tests > Regular shelf 1`] = `
     >
       Test Shelf
     </h2>
-    <div>
-      <div
-        class="_tileDock_22abb0"
+    <div
+      class="_tileDock_22abb0"
+    >
+      <ul
+        style="transform: translate3d(0%, 0, 0); margin-left: -4px; margin-right: -4px;"
       >
-        <ul
-          style="transform: translate3d(0%, 0, 0); margin-left: -4px; margin-right: -4px;"
+        <li
+          aria-hidden="false"
+          class=""
+          style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
         >
-          <li
-            class=""
-            style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+          <a
+            class="_card_d75732"
+            data-testid="Movie 1"
+            href="/m/1234abcd/movie-1"
+            role="button"
+            tabindex="0"
           >
-            <a
-              class="_card_d75732"
-              data-testid="Movie 1"
-              href="/m/1234abcd/movie-1"
-              role="button"
-              tabindex="0"
+            <div
+              class="_titleContainer_d75732"
             >
-              <div
-                class="_titleContainer_d75732"
+              <h3
+                class="_title_d75732"
               >
-                <h3
-                  class="_title_d75732"
-                >
-                  Movie 1
-                </h3>
-              </div>
+                Movie 1
+              </h3>
+            </div>
+            <div
+              class="_poster_d75732 _aspect169_d75732"
+            >
               <div
-                class="_poster_d75732 _aspect169_d75732"
+                class="_meta_d75732"
               >
                 <div
-                  class="_meta_d75732"
+                  class="_tags_d75732"
                 >
                   <div
-                    class="_tags_d75732"
+                    class="_tag_d75732"
                   >
-                    <div
-                      class="_tag_d75732"
-                    >
-                      1 min
-                    </div>
+                    1 min
                   </div>
                 </div>
               </div>
-            </a>
-          </li>
-          <li
-            class=""
-            style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+            </div>
+          </a>
+        </li>
+        <li
+          aria-hidden="false"
+          class=""
+          style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+        >
+          <a
+            class="_card_d75732"
+            data-testid="Movie 2"
+            href="/m/aaaaaaaa/movie-2"
+            role="button"
+            tabindex="0"
           >
-            <a
-              class="_card_d75732"
-              data-testid="Movie 2"
-              href="/m/aaaaaaaa/movie-2"
-              role="button"
-              tabindex="0"
+            <div
+              class="_titleContainer_d75732"
             >
-              <div
-                class="_titleContainer_d75732"
+              <h3
+                class="_title_d75732"
               >
-                <h3
-                  class="_title_d75732"
-                >
-                  Movie 2
-                </h3>
-              </div>
+                Movie 2
+              </h3>
+            </div>
+            <div
+              class="_poster_d75732 _aspect169_d75732"
+            >
               <div
-                class="_poster_d75732 _aspect169_d75732"
+                class="_meta_d75732"
               >
                 <div
-                  class="_meta_d75732"
+                  class="_tags_d75732"
                 >
                   <div
-                    class="_tags_d75732"
+                    class="_tag_d75732"
                   >
-                    <div
-                      class="_tag_d75732"
-                    >
-                      1 min
-                    </div>
+                    1 min
                   </div>
                 </div>
               </div>
-            </a>
-          </li>
-          <li
-            class=""
-            style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+            </div>
+          </a>
+        </li>
+        <li
+          aria-hidden="false"
+          class=""
+          style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+        >
+          <a
+            class="_card_d75732"
+            data-testid="Third movie"
+            href="/m/12332123/third-movie"
+            role="button"
+            tabindex="0"
           >
-            <a
-              class="_card_d75732"
-              data-testid="Third movie"
-              href="/m/12332123/third-movie"
-              role="button"
-              tabindex="0"
+            <div
+              class="_titleContainer_d75732"
             >
-              <div
-                class="_titleContainer_d75732"
+              <h3
+                class="_title_d75732"
               >
-                <h3
-                  class="_title_d75732"
-                >
-                  Third movie
-                </h3>
-              </div>
+                Third movie
+              </h3>
+            </div>
+            <div
+              class="_poster_d75732 _aspect169_d75732"
+            >
               <div
-                class="_poster_d75732 _aspect169_d75732"
+                class="_meta_d75732"
               >
                 <div
-                  class="_meta_d75732"
+                  class="_tags_d75732"
                 >
                   <div
-                    class="_tags_d75732"
+                    class="_tag_d75732"
                   >
-                    <div
-                      class="_tag_d75732"
-                    >
-                      1 min
-                    </div>
+                    1 min
                   </div>
                 </div>
               </div>
-            </a>
-          </li>
-          <li
-            class=""
-            style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+            </div>
+          </a>
+        </li>
+        <li
+          aria-hidden="false"
+          class=""
+          style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+        >
+          <a
+            class="_card_d75732"
+            data-testid="Last playlist item"
+            href="/m/ddeeddee/last-playlist-item"
+            role="button"
+            tabindex="0"
           >
-            <a
-              class="_card_d75732"
-              data-testid="Last playlist item"
-              href="/m/ddeeddee/last-playlist-item"
-              role="button"
-              tabindex="0"
+            <div
+              class="_titleContainer_d75732"
             >
-              <div
-                class="_titleContainer_d75732"
+              <h3
+                class="_title_d75732"
               >
-                <h3
-                  class="_title_d75732"
-                >
-                  Last playlist item
-                </h3>
-              </div>
+                Last playlist item
+              </h3>
+            </div>
+            <div
+              class="_poster_d75732 _aspect169_d75732"
+            >
               <div
-                class="_poster_d75732 _aspect169_d75732"
+                class="_meta_d75732"
               >
                 <div
-                  class="_meta_d75732"
+                  class="_tags_d75732"
                 >
                   <div
-                    class="_tags_d75732"
+                    class="_tag_d75732"
                   >
-                    <div
-                      class="_tag_d75732"
-                    >
-                      21 min
-                    </div>
+                    21 min
                   </div>
                 </div>
               </div>
-            </a>
-          </li>
-        </ul>
-      </div>
+            </div>
+          </a>
+        </li>
+      </ul>
     </div>
   </div>
 </div>
diff --git a/packages/ui-react/src/components/Sidebar/Sidebar.module.scss b/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
index a3340550d..25f04c19d 100644
--- a/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
+++ b/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
@@ -43,7 +43,10 @@
 .group {
   display: flex;
   flex-direction: column;
+  max-height: 100%;
   padding: variables.$base-spacing 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 //
diff --git a/packages/ui-react/src/components/Sidebar/Sidebar.test.tsx b/packages/ui-react/src/components/Sidebar/Sidebar.test.tsx
index 33b2648ad..018a9c66f 100644
--- a/packages/ui-react/src/components/Sidebar/Sidebar.test.tsx
+++ b/packages/ui-react/src/components/Sidebar/Sidebar.test.tsx
@@ -8,7 +8,7 @@ import Sidebar from './Sidebar';
 describe('<SideBar />', () => {
   const playlistMenuItems = [<Button key="key" label="Home" to="/" />];
 
-  test('renders sideBar', () => {
+  test('renders sideBar opened', () => {
     const { container } = renderWithRouter(
       <Sidebar isOpen={true} onClose={vi.fn()}>
         {playlistMenuItems}
@@ -17,4 +17,14 @@ describe('<SideBar />', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  test('renders sideBar closed', () => {
+    const { container } = renderWithRouter(
+      <Sidebar isOpen={false} onClose={vi.fn()}>
+        {playlistMenuItems}
+      </Sidebar>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/packages/ui-react/src/components/Sidebar/Sidebar.tsx b/packages/ui-react/src/components/Sidebar/Sidebar.tsx
index f6ae44504..196a8dbb8 100644
--- a/packages/ui-react/src/components/Sidebar/Sidebar.tsx
+++ b/packages/ui-react/src/components/Sidebar/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, type ReactNode } from 'react';
+import React, { Fragment, useEffect, useRef, type ReactNode } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import Close from '@jwp/ott-theme/assets/icons/close.svg?react';
@@ -16,6 +16,18 @@ type SidebarProps = {
 
 const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, children }) => {
   const { t } = useTranslation('menu');
+  const lastFocusedElementRef = useRef<HTMLElement | null>(null);
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const htmlAttributes = { inert: !isOpen ? '' : undefined }; // inert is not yet officially supported in react. see: https://github.com/facebook/react/pull/24730
+
+  useEffect(() => {
+    if (isOpen) {
+      lastFocusedElementRef.current = document.activeElement as HTMLElement;
+      sidebarRef.current?.querySelectorAll('a')[0]?.focus({ preventScroll: true });
+    } else {
+      lastFocusedElementRef.current?.focus({ preventScroll: true });
+    }
+  }, [isOpen]);
 
   return (
     <Fragment>
@@ -26,12 +38,15 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, children }) => {
         onClick={onClose}
       />
       <div
+        ref={sidebarRef}
         className={classNames(styles.sidebar, {
           [styles.open]: isOpen,
         })}
+        id="sidebar"
+        {...htmlAttributes}
       >
         <div className={styles.heading}>
-          <IconButton onClick={onClose} aria-label={t('close_menu')} tabIndex={isOpen ? 0 : -1}>
+          <IconButton onClick={onClose} aria-label={t('close_menu')}>
             <Icon icon={Close} />
           </IconButton>
         </div>
diff --git a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
index d85bd20b2..33b7ab28a 100644
--- a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
+++ b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
@@ -1,12 +1,65 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<SideBar /> > renders sideBar 1`] = `
+exports[`<SideBar /> > renders sideBar closed 1`] = `
+<div>
+  <div
+    class="_backdrop_577f70"
+  />
+  <div
+    class="_sidebar_577f70"
+    id="sidebar"
+    inert=""
+  >
+    <div
+      class="_heading_577f70"
+    >
+      <div
+        aria-label="close_menu"
+        class="_iconButton_0fef65"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          class="_icon_585b29"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+          />
+          <path
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
+        </svg>
+      </div>
+    </div>
+    <nav
+      class="_group_577f70"
+    >
+      <a
+        aria-current="page"
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
+        href="/"
+      >
+        <span>
+          Home
+        </span>
+      </a>
+    </nav>
+  </div>
+</div>
+`;
+
+exports[`<SideBar /> > renders sideBar opened 1`] = `
 <div>
   <div
     class="_backdrop_577f70 _visible_577f70"
   />
   <div
     class="_sidebar_577f70 _open_577f70"
+    id="sidebar"
   >
     <div
       class="_heading_577f70"
diff --git a/packages/ui-react/src/components/SubscriptionCancelled/__snapshots__/SubscriptionCancelled.test.tsx.snap b/packages/ui-react/src/components/SubscriptionCancelled/__snapshots__/SubscriptionCancelled.test.tsx.snap
index 8299839a8..d7888cca3 100644
--- a/packages/ui-react/src/components/SubscriptionCancelled/__snapshots__/SubscriptionCancelled.test.tsx.snap
+++ b/packages/ui-react/src/components/SubscriptionCancelled/__snapshots__/SubscriptionCancelled.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`<SubscriptionCancelled> > renders and matches snapshot 1`] = `
     </p>
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="button"
     >
       <span>
         subscription_cancelled.return_to_profile
diff --git a/packages/ui-react/src/components/SubscriptionRenewed/__snapshots__/SubscriptionRenewed.test.tsx.snap b/packages/ui-react/src/components/SubscriptionRenewed/__snapshots__/SubscriptionRenewed.test.tsx.snap
index 79e21177a..e6833244b 100644
--- a/packages/ui-react/src/components/SubscriptionRenewed/__snapshots__/SubscriptionRenewed.test.tsx.snap
+++ b/packages/ui-react/src/components/SubscriptionRenewed/__snapshots__/SubscriptionRenewed.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`<SubscriptionRenewed> > renders and matches snapshot 1`] = `
     </p>
     <button
       class="_button_f8f296 _default_f8f296 _outlined_f8f296 _fullWidth_f8f296"
+      type="button"
     >
       <span>
         subscription_renewed.back_to_profile
diff --git a/packages/ui-react/src/components/TextField/TextField.module.scss b/packages/ui-react/src/components/TextField/TextField.module.scss
index 423782061..a78d12e6a 100644
--- a/packages/ui-react/src/components/TextField/TextField.module.scss
+++ b/packages/ui-react/src/components/TextField/TextField.module.scss
@@ -87,4 +87,10 @@
       display: none;
     }
   }
+
+  &[readonly] {
+    min-height: auto;
+    margin: 1em 0;
+    padding: 0;
+  }
 }
diff --git a/packages/ui-react/src/components/TextField/TextField.test.tsx b/packages/ui-react/src/components/TextField/TextField.test.tsx
index 7fd937bef..5eb034913 100644
--- a/packages/ui-react/src/components/TextField/TextField.test.tsx
+++ b/packages/ui-react/src/components/TextField/TextField.test.tsx
@@ -10,15 +10,29 @@ describe('<TextField>', () => {
     expect(container).toMatchSnapshot();
   });
 
+  test('renders and matches readonly snapshot', () => {
+    const { container } = render(<TextField label="Label" placeholder="Placeholder" name="name" value="" onChange={vi.fn()} readOnly={true} />);
+
+    expect(container).toMatchSnapshot();
+  });
+
   test('renders and matches multiline snapshot', () => {
     const { container } = render(<TextField label="Label" placeholder="Placeholder" name="name" value="" onChange={vi.fn()} multiline={true} />);
 
     expect(container).toMatchSnapshot();
   });
 
+  test('renders and matches multiline readonly snapshot', () => {
+    const { container } = render(
+      <TextField label="Label" placeholder="Placeholder" name="name" value="" onChange={vi.fn()} multiline={true} readOnly={true} />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
   test('triggers an onChange event when the input value changes', () => {
     const onChange = vi.fn();
-    const { getByPlaceholderText } = render(<TextField value="" onChange={onChange} placeholder="Enter your name" />);
+    const { getByPlaceholderText } = render(<TextField name="name" value="" onChange={onChange} placeholder="Enter your name" />);
 
     fireEvent.change(getByPlaceholderText('Enter your name'), { target: { value: 'John Doe' } });
 
@@ -26,7 +40,7 @@ describe('<TextField>', () => {
   });
 
   test('shows the helper text below the input', () => {
-    const { queryByText } = render(<TextField value="" onChange={vi.fn()} helperText="Assertive text" />);
+    const { queryByText } = render(<TextField name="name" value="" onChange={vi.fn()} helperText="Assertive text" />);
 
     expect(queryByText('Assertive text')).toBeDefined();
   });
diff --git a/packages/ui-react/src/components/TextField/TextField.tsx b/packages/ui-react/src/components/TextField/TextField.tsx
index 6fa1a0dbf..43ce716d8 100644
--- a/packages/ui-react/src/components/TextField/TextField.tsx
+++ b/packages/ui-react/src/components/TextField/TextField.tsx
@@ -8,14 +8,15 @@ import HelperText from '../HelperText/HelperText';
 
 import styles from './TextField.module.scss';
 
-type InputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'id' | 'ref' | 'className'>;
-type TextAreaProps = Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'id' | 'ref' | 'className'>;
+type InputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'id' | 'ref' | 'className' | 'name'>;
+type TextAreaProps = Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'id' | 'ref' | 'className' | 'name'>;
 
 type InputOrTextAreaProps =
   | ({ multiline?: never; inputRef?: RefObject<HTMLInputElement>; textAreaRef?: never } & InputProps)
   | ({ multiline: true; inputRef?: never; textAreaRef?: RefObject<HTMLTextAreaElement> } & TextAreaProps);
 
 type Props = {
+  name: string;
   className?: string;
   label?: ReactNode;
   helperText?: React.ReactNode;
@@ -28,6 +29,7 @@ type Props = {
 } & InputOrTextAreaProps;
 
 const TextField: React.FC<Props> = ({
+  name,
   className,
   label,
   error,
@@ -41,7 +43,9 @@ const TextField: React.FC<Props> = ({
   multiline,
   ...inputProps
 }: Props) => {
-  const id = useOpaqueId('text-field', inputProps.name);
+  const id = useOpaqueId('text-field', name);
+  const helperTextId = useOpaqueId('helper_text', name);
+
   const { t } = useTranslation('common');
 
   const isInputOrTextArea = (item: unknown): item is InputOrTextAreaProps => !!item && typeof item === 'object';
@@ -58,6 +62,37 @@ const TextField: React.FC<Props> = ({
     className,
   );
 
+  const renderInput = () => {
+    const { required, disabled, value, ...otherInputProps } = inputProps;
+
+    // Default to 'text' if 'type' property is absent, which occurs in textareas.
+    const inputType = 'type' in otherInputProps ? otherInputProps.type : 'text';
+
+    const ariaAttributes = {
+      'aria-required': !!required,
+      'aria-invalid': Boolean(required && error && value !== ''),
+      'aria-describedby': helperTextId,
+    } as const;
+
+    const commonProps = {
+      id,
+      name,
+      value,
+      disabled,
+      className: styles.input,
+      readOnly: !editing,
+      required: !!required,
+      ...ariaAttributes,
+      ...otherInputProps,
+    };
+
+    return isTextArea(inputProps) ? (
+      <textarea {...(commonProps as TextAreaProps)} rows={3} ref={textAreaRef} />
+    ) : (
+      <input {...(commonProps as InputProps)} type={inputType} ref={inputRef} />
+    );
+  };
+
   return (
     <div className={textFieldClassName} data-testid={getTestId(testId)}>
       <label htmlFor={id} className={styles.label}>
@@ -67,17 +102,15 @@ const TextField: React.FC<Props> = ({
       {editing ? (
         <div className={styles.container}>
           {leftControl ? <div className={styles.control}>{leftControl}</div> : null}
-          {isTextArea(inputProps) ? (
-            <textarea id={id} className={styles.input} rows={3} ref={textAreaRef} {...inputProps} />
-          ) : (
-            <input id={id} className={styles.input} type={'text'} ref={inputRef} {...inputProps} />
-          )}
+          {renderInput()}
           {rightControl ? <div className={styles.control}>{rightControl}</div> : null}
         </div>
       ) : (
-        <p>{inputProps.value}</p>
+        renderInput()
       )}
-      <HelperText error={error}>{helperText}</HelperText>
+      <HelperText id={helperTextId} error={error}>
+        {helperText}
+      </HelperText>
     </div>
   );
 };
diff --git a/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
index 64d59ec34..48449b4cd 100644
--- a/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
@@ -1,5 +1,38 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`<TextField> > renders and matches multiline readonly snapshot 1`] = `
+<div>
+  <div
+    class="_textField_e16c1b"
+  >
+    <label
+      class="_label_e16c1b"
+      for="text-field_1235_name"
+    >
+      Label
+      <span>
+        optional
+      </span>
+    </label>
+    <div
+      class="_container_e16c1b"
+    >
+      <textarea
+        aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
+        aria-required="false"
+        class="_input_e16c1b"
+        id="text-field_1235_name"
+        name="name"
+        placeholder="Placeholder"
+        readonly=""
+        rows="3"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<TextField> > renders and matches multiline snapshot 1`] = `
 <div>
   <div
@@ -18,6 +51,9 @@ exports[`<TextField> > renders and matches multiline snapshot 1`] = `
       class="_container_e16c1b"
     >
       <textarea
+        aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
+        aria-required="false"
         class="_input_e16c1b"
         id="text-field_1235_name"
         name="name"
@@ -29,6 +65,40 @@ exports[`<TextField> > renders and matches multiline snapshot 1`] = `
 </div>
 `;
 
+exports[`<TextField> > renders and matches readonly snapshot 1`] = `
+<div>
+  <div
+    class="_textField_e16c1b"
+  >
+    <label
+      class="_label_e16c1b"
+      for="text-field_1235_name"
+    >
+      Label
+      <span>
+        optional
+      </span>
+    </label>
+    <div
+      class="_container_e16c1b"
+    >
+      <input
+        aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
+        aria-required="false"
+        class="_input_e16c1b"
+        id="text-field_1235_name"
+        name="name"
+        placeholder="Placeholder"
+        readonly=""
+        type="text"
+        value=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<TextField> > renders and matches snapshot 1`] = `
 <div>
   <div
@@ -47,6 +117,9 @@ exports[`<TextField> > renders and matches snapshot 1`] = `
       class="_container_e16c1b"
     >
       <input
+        aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
+        aria-required="false"
         class="_input_e16c1b"
         id="text-field_1235_name"
         name="name"
diff --git a/packages/ui-react/src/components/TileDock/TileDock.tsx b/packages/ui-react/src/components/TileDock/TileDock.tsx
index 885501148..f2b7df218 100644
--- a/packages/ui-react/src/components/TileDock/TileDock.tsx
+++ b/packages/ui-react/src/components/TileDock/TileDock.tsx
@@ -235,8 +235,9 @@ function TileDock<T>({
     if (showDots && isMultiPage && !!renderPaginationDots) {
       const length = pages;
 
+      // Using aria-hidden="true" due to virtualization issues, making pagination purely visual for now. This is a temporary fix pending a more accessible solution.
       return (
-        <div className={styles.dots}>
+        <div aria-hidden="true" className={styles.dots}>
           {Array.from({ length }, (_, pageIndex) => {
             return renderPaginationDots(index, pageIndex);
           })}
@@ -246,7 +247,7 @@ function TileDock<T>({
   };
 
   return (
-    <div>
+    <React.Fragment>
       <div className={styles.tileDock}>
         {showLeftControl && !!renderLeftControl && <div className={styles.leftControl}>{renderLeftControl(() => slide('left'))}</div>}
         <ul ref={frameRef} style={ulStyle} onTouchStart={handleTouchStart} onTransitionEnd={handleTransitionEnd}>
@@ -267,6 +268,7 @@ function TileDock<T>({
             return (
               <li
                 key={tile.key}
+                aria-hidden={!isInView}
                 className={classNames({ [styles.notInView]: !isInView })}
                 style={{
                   width: `${tileWidth}%`,
@@ -295,7 +297,7 @@ function TileDock<T>({
         {showRightControl && !!renderRightControl && <div className={styles.rightControl}>{renderRightControl(() => slide('right'))}</div>}
       </div>
       {paginationDots()}
-    </div>
+    </React.Fragment>
   );
 }
 
diff --git a/packages/ui-react/src/components/UpgradeSubscription/UpgradeSubscription.tsx b/packages/ui-react/src/components/UpgradeSubscription/UpgradeSubscription.tsx
index 0e2675068..44e389736 100644
--- a/packages/ui-react/src/components/UpgradeSubscription/UpgradeSubscription.tsx
+++ b/packages/ui-react/src/components/UpgradeSubscription/UpgradeSubscription.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '../Button/Button';
+import { AriaAnnouncerVariant, useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 
 import styles from './UpgradeSubscription.module.scss';
 
@@ -12,6 +13,7 @@ type Props = {
 
 const UpgradeSubscription: React.FC<Props> = ({ type, onCloseButtonClick }: Props) => {
   const { t } = useTranslation('account');
+  const announce = useAriaAnnouncer();
 
   // these comments exist for extracting dynamic i18n keys
   // t('account:checkout.upgrade_success');
@@ -23,6 +25,12 @@ const UpgradeSubscription: React.FC<Props> = ({ type, onCloseButtonClick }: Prop
   const title = t(`checkout.upgrade_${type}`);
   const message = t(`checkout.upgrade_${type}_message`);
 
+  useEffect(() => {
+    const typeToAnnounce = { error: 'error', success: 'succes', pending: 'info' }[type] as AriaAnnouncerVariant;
+
+    announce(message, typeToAnnounce);
+  }, [announce, message, type]);
+
   return (
     <div>
       <h2 className={styles.title}>{title}</h2>
diff --git a/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap b/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
index 1e00d12f9..8082ff88e 100644
--- a/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
+++ b/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
@@ -12,7 +12,6 @@ exports[`<UserMenu> > renders and matches snapshot 1`] = `
     </li>
     <li>
       <a
-        aria-label="nav.account"
         class="_menuButton_91706b"
         href="/u/my-account"
         tabindex="0"
@@ -38,7 +37,6 @@ exports[`<UserMenu> > renders and matches snapshot 1`] = `
     </li>
     <li>
       <a
-        aria-label="nav.payments"
         class="_menuButton_91706b"
         href="/u/payments"
         tabindex="0"
@@ -69,7 +67,6 @@ exports[`<UserMenu> > renders and matches snapshot 1`] = `
     </li>
     <li>
       <div
-        aria-label="nav.logout"
         class="_menuButton_91706b"
         tabindex="0"
       >
diff --git a/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss b/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
index 645d4ff4d..88809e784 100644
--- a/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
+++ b/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
@@ -7,7 +7,7 @@
   color: var(--primary-color);
   font-family: var(--body-font-family);
   font-weight: 400;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
 }
 
 .mainPadding {
@@ -37,7 +37,7 @@
 
 .info {
   position: relative;
-  width: 70%;
+  width: 50%;
   max-width: 650px;
   min-height: 440px;
 
@@ -101,6 +101,7 @@
 
 .description {
   min-height: 21px;
+  margin-top: 0;
   margin-bottom: 24px;
   font-size: 18px;
   line-height: 20px;
diff --git a/packages/ui-react/src/components/VideoDetails/VideoDetails.test.tsx b/packages/ui-react/src/components/VideoDetails/VideoDetails.test.tsx
index 651377082..6ad69ea15 100644
--- a/packages/ui-react/src/components/VideoDetails/VideoDetails.test.tsx
+++ b/packages/ui-react/src/components/VideoDetails/VideoDetails.test.tsx
@@ -41,6 +41,7 @@ describe('<VideoDetails>', () => {
       </VideoDetails>,
     );
 
-    expect(getByAltText('Test video')).toHaveAttribute('src', 'http://image.jpg?width=1280');
+    const image = getByAltText(''); // Image alt is intentionally empty for a11y;
+    expect(image).toHaveAttribute('src', 'http://image.jpg?width=1280');
   });
 });
diff --git a/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx b/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx
index 15b3f783f..8d3a130dc 100644
--- a/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx
+++ b/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx
@@ -35,12 +35,13 @@ const VideoDetails: React.VFC<Props> = ({
 }) => {
   const breakpoint: Breakpoint = useBreakpoint();
   const isMobile = breakpoint === Breakpoint.xs;
+  const alt = ''; // intentionally empty for a11y, because adjacent text alternative
 
   return (
     <div data-testid={testId('cinema-layout')}>
-      <div className={styles.video} data-testid={testId('video-details')}>
+      <header className={styles.video} data-testid={testId('video-details')}>
         <div className={classNames(styles.main, styles.mainPadding)}>
-          <Image className={styles.poster} image={image} alt={title} width={1280} />
+          <Image className={styles.poster} image={image} alt={alt} width={1280} />
           <div className={styles.info}>
             <h1 className={styles.title}>{title}</h1>
             <div className={styles.metaContainer}>
@@ -57,7 +58,7 @@ const VideoDetails: React.VFC<Props> = ({
             </div>
           </div>
         </div>
-      </div>
+      </header>
       {children}
     </div>
   );
diff --git a/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap b/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
index aa05faef8..65aa5f824 100644
--- a/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
+++ b/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`<VideoDetails> > renders and matches snapshot 1`] = `
   <div
     data-testid="cinema-layout"
   >
-    <div
+    <header
       class="_video_d0c133"
       data-testid="video-details"
     >
@@ -13,7 +13,7 @@ exports[`<VideoDetails> > renders and matches snapshot 1`] = `
         class="_main_d0c133 _mainPadding_d0c133"
       >
         <img
-          alt="Test video"
+          alt=""
           class="_poster_d0c133 _image_4c41c3"
           src="http://image.jpg?width=1280"
         />
@@ -44,12 +44,12 @@ exports[`<VideoDetails> > renders and matches snapshot 1`] = `
           <div
             class="_collapsibleText_561522"
           >
-            <div
+            <p
               class="_textContainer_561522 _description_d0c133"
               style="max-height: none;"
             >
               Video description
-            </div>
+            </p>
           </div>
           <div
             class="_buttonBar_d0c133"
@@ -69,7 +69,7 @@ exports[`<VideoDetails> > renders and matches snapshot 1`] = `
           </div>
         </div>
       </div>
-    </div>
+    </header>
     <div>
       Related Videos
     </div>
diff --git a/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss b/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss
index b75ada51e..d8dcf6abd 100644
--- a/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss
+++ b/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss
@@ -68,10 +68,6 @@
 .relatedVideosList {
   grid-area: related;
   position: relative;
-
-  @include responsive.desktop-only() {
-    padding-left: 24px;
-  }
 }
 
 .relatedVideos {
@@ -125,7 +121,7 @@
 }
 
 .relatedVideosListTitle {
-  padding-bottom: 16px;
+  margin-left: 24px;
   font-family: var(--body-alt-font-family);
   font-weight: var(--body-font-weight-bold);
   font-size: 20px;
diff --git a/packages/ui-react/src/components/VideoLayout/VideoLayout.tsx b/packages/ui-react/src/components/VideoLayout/VideoLayout.tsx
index 29df2c79b..e39c42b2b 100644
--- a/packages/ui-react/src/components/VideoLayout/VideoLayout.tsx
+++ b/packages/ui-react/src/components/VideoLayout/VideoLayout.tsx
@@ -139,7 +139,6 @@ const VideoLayout: React.FC<Props> = ({
     ) : (
       <div className={styles.relatedVideosList}>
         <VideoList
-          className={styles.videoList}
           header={
             <>
               {title && <h2 className={styles.relatedVideosListTitle}>{relatedTitle}</h2>}
@@ -166,7 +165,6 @@ const VideoLayout: React.FC<Props> = ({
     return (
       <div className={styles.videoInlineLayout} data-testid={testId('inline-layout')}>
         <div className={styles.player}>{player}</div>
-        {renderRelatedVideos(isTablet)}
         <div className={styles.videoDetailsInline}>
           <VideoDetailsInline
             title={secondaryMetadata || title}
@@ -178,6 +176,7 @@ const VideoLayout: React.FC<Props> = ({
             trailerButton={trailerButton}
           />
         </div>
+        {renderRelatedVideos(isTablet)}
         {children}
       </div>
     );
diff --git a/packages/ui-react/src/components/VideoList/VideoList.module.scss b/packages/ui-react/src/components/VideoList/VideoList.module.scss
index 3838fb1c1..b50f97ff3 100644
--- a/packages/ui-react/src/components/VideoList/VideoList.module.scss
+++ b/packages/ui-react/src/components/VideoList/VideoList.module.scss
@@ -5,16 +5,19 @@
 
 .container {
   height: 100%;
-
-  @include responsive.desktop-only() {
-    overflow: hidden;
-  }
 }
 
 .content {
+  
   @include responsive.desktop-only() {
     height: 100%;
-    padding-right: 24px;
+    padding: 16px 24px;
     overflow-y: scroll;
   }
 }
+
+.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
diff --git a/packages/ui-react/src/components/VideoList/VideoList.tsx b/packages/ui-react/src/components/VideoList/VideoList.tsx
index f580ec4fb..ef0293d32 100644
--- a/packages/ui-react/src/components/VideoList/VideoList.tsx
+++ b/packages/ui-react/src/components/VideoList/VideoList.tsx
@@ -51,19 +51,27 @@ function VideoList({
     <div className={classNames(styles.container, !!className && className)} data-testid={testId('video-list')}>
       {!!header && header}
       <div className={styles.content}>
-        <InfiniteScroll pageStart={0} loadMore={loadMore ?? defaultLoadMore} hasMore={hasMore ?? false} loader={<InfiniteScrollLoader key="loader" />}>
+        <InfiniteScroll
+          element="ul"
+          pageStart={0}
+          loadMore={loadMore ?? defaultLoadMore}
+          hasMore={hasMore ?? false}
+          className={styles.list}
+          loader={<InfiniteScrollLoader key="loader" />}
+        >
           {playlist?.playlist?.map((playlistItem: PlaylistItem) => (
-            <VideoListItem
-              url={getUrl(playlistItem)}
-              key={playlistItem.mediaid}
-              progress={watchHistory ? watchHistory[playlistItem.mediaid] : undefined}
-              onHover={() => onListItemHover && onListItemHover(playlistItem)}
-              loading={isLoading}
-              isActive={activeMediaId === playlistItem.mediaid}
-              activeLabel={activeLabel}
-              isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, playlistItem)}
-              item={playlistItem}
-            />
+            <li key={playlistItem.mediaid}>
+              <VideoListItem
+                url={getUrl(playlistItem)}
+                progress={watchHistory ? watchHistory[playlistItem.mediaid] : undefined}
+                onHover={() => onListItemHover && onListItemHover(playlistItem)}
+                loading={isLoading}
+                isActive={activeMediaId === playlistItem.mediaid}
+                activeLabel={activeLabel}
+                isLocked={isLocked(accessModel, isLoggedIn, hasSubscription, playlistItem)}
+                item={playlistItem}
+              />
+            </li>
           ))}
         </InfiniteScroll>
       </div>
diff --git a/packages/ui-react/src/components/VideoListItem/VideoListItem.module.scss b/packages/ui-react/src/components/VideoListItem/VideoListItem.module.scss
index 1d8e629cb..0532cc9b3 100644
--- a/packages/ui-react/src/components/VideoListItem/VideoListItem.module.scss
+++ b/packages/ui-react/src/components/VideoListItem/VideoListItem.module.scss
@@ -7,6 +7,7 @@
 .listItem {
   position: relative;
   display: flex;
+  flex-direction: row-reverse;
   justify-content: flex-start;
   margin-bottom: variables.$base-spacing;
   color: inherit;
@@ -19,8 +20,13 @@
     &:hover {
       position: relative;
       z-index: 1;
-      outline: none;
+      outline: none !important;
+      box-shadow: none !important;
       transform: scale(1.05);
+
+      & .poster {
+        box-shadow: 0 0 0 3px var(--highlight-color, variables.$white), 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%), 0 4px 5px rgb(0 0 0 / 20%);
+      }
     }
   }
 }
@@ -92,7 +98,7 @@
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
 }
 
-.metadata {
+.titleContainer {
   flex: 1;
   overflow: hidden;
 }
@@ -114,13 +120,14 @@
   display: flex;
 }
 
-svg.lock {
-  width: 24px;
-  height: 24px;
-  padding: 5px 5px;
-  color: var(--card-color);
-  background-color: rgba(variables.$black, 0.6);
-  border-radius: 4px;
+.lock {
+  margin-right: calc(#{variables.$base-spacing} / 2);
+  padding: 2px 6px;
+
+  > svg {
+    width: 14px;
+    height: 21px;
+  }
 }
 
 svg.scheduled {
@@ -130,17 +137,22 @@ svg.scheduled {
 }
 
 .tag {
-  margin-left: 4px;
+  display: flex;
+  align-items: center;
   padding: 2px 6px;
+  color: var(--card-color);
+  font-family: var(--body-font-family);
+  font-weight: 600;
   font-size: 14px;
+  white-space: nowrap;
+  background-color: rgba(variables.$black, 0.6);
+  border-radius: 4px;
 }
 
 .live {
   background-color: variables.$red;
 }
 
-
-
 .progressContainer {
   position: absolute;
   right: 0;
diff --git a/packages/ui-react/src/components/VideoListItem/VideoListItem.tsx b/packages/ui-react/src/components/VideoListItem/VideoListItem.tsx
index 69c88a9b7..e975f0011 100644
--- a/packages/ui-react/src/components/VideoListItem/VideoListItem.tsx
+++ b/packages/ui-react/src/components/VideoListItem/VideoListItem.tsx
@@ -6,11 +6,11 @@ import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { formatDurationTag, formatLocalizedDateTime, formatSeriesMetaString } from '@jwp/ott-common/src/utils/formatting';
 import { isLiveChannel, isSeries } from '@jwp/ott-common/src/utils/media';
 import { MediaStatus } from '@jwp/ott-common/src/utils/liveEvent';
+import { testId } from '@jwp/ott-common/src/utils/common';
 import Lock from '@jwp/ott-theme/assets/icons/lock.svg?react';
 import Today from '@jwp/ott-theme/assets/icons/today.svg?react';
 
 import Image from '../Image/Image';
-import Tag from '../Tag/Tag';
 import Icon from '../Icon/Icon';
 
 import styles from './VideoListItem.module.scss';
@@ -42,47 +42,50 @@ function VideoListItem({ onHover, progress, activeLabel, item, url, loading = fa
   const isLive = mediaStatus === MediaStatus.LIVE || isLiveChannel(item);
   const isScheduled = mediaStatus === MediaStatus.SCHEDULED;
 
-  const renderTagLabel = () => {
+  const renderTag = () => {
     if (loading || !title) return null;
 
     if (isSeriesItem) {
-      return t('series');
-    } else if (seasonNumber && episodeNumber) {
-      return formatSeriesMetaString(seasonNumber, episodeNumber);
+      return <div className={styles.tag}>{t('video:series')}</div>;
+    } else if (episodeNumber) {
+      return <div className={styles.tag}>{formatSeriesMetaString(seasonNumber, episodeNumber)}</div>;
     } else if (duration) {
-      return formatDurationTag(duration);
+      return <div className={styles.tag}>{formatDurationTag(duration)}</div>;
     } else if (isLive) {
-      return t('live');
+      return <div className={classNames(styles.tag, styles.live)}>{t('live')}</div>;
     } else if (isScheduled) {
       return (
-        <>
+        <div className={styles.tag}>
           <Icon icon={Today} className={styles.scheduled} />
           {t('scheduled')}
-        </>
+        </div>
       );
     }
   };
 
   return (
-    <Link to={url} className={styles.listItem} onMouseEnter={onHover} aria-label={title} tabIndex={0}>
+    <Link role="button" to={url} className={styles.listItem} onMouseEnter={onHover} tabIndex={0} data-testid={testId(title)}>
+      <div className={styles.titleContainer}>
+        <h3 className={styles.title}>{title}</h3>
+        {!!scheduledStart && <div className={styles.scheduledStart}>{formatLocalizedDateTime(scheduledStart, language)}</div>}
+      </div>
       <div className={styles.poster}>
-        <Image className={posterImageClassNames} image={image} alt={title} onLoad={() => setImageLoaded(true)} width={320} />
-        {isActive && <div className={styles.activeLabel}>{activeLabel}</div>}
+        <Image className={posterImageClassNames} image={image} onLoad={() => setImageLoaded(true)} width={320} alt="" />
         <div className={styles.tags}>
-          {isLocked && <Icon icon={Lock} className={styles.lock} />}
-          <Tag className={classNames(styles.tag, { [styles.live]: isLive })}>{renderTagLabel()}</Tag>
+          {isLocked && (
+            <div className={classNames(styles.tag, styles.lock)} aria-label={t('card_lock')}>
+              <Icon icon={Lock} />
+            </div>
+          )}
+          {renderTag()}
         </div>
-
+        {isActive && <div className={styles.activeLabel}>{activeLabel}</div>}
         {progress ? (
           <div className={styles.progressContainer}>
             <div className={styles.progressBar} style={{ width: `${Math.round(progress * 100)}%` }} />
           </div>
         ) : null}
       </div>
-      <div className={styles.metadata}>
-        {!!scheduledStart && <div className={styles.scheduledStart}>{formatLocalizedDateTime(scheduledStart, language)}</div>}
-        <div className={styles.title}>{title}</div>
-      </div>
     </Link>
   );
 }
diff --git a/packages/ui-react/src/components/WaitingForPayment/WaitingForPayment.tsx b/packages/ui-react/src/components/WaitingForPayment/WaitingForPayment.tsx
index 5ba04a833..2432e6a07 100644
--- a/packages/ui-react/src/components/WaitingForPayment/WaitingForPayment.tsx
+++ b/packages/ui-react/src/components/WaitingForPayment/WaitingForPayment.tsx
@@ -5,6 +5,7 @@ import useCheckAccess from '@jwp/ott-hooks-react/src/useCheckAccess';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 
 import Spinner from '../Spinner/Spinner';
+import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 
 import styles from './WaitingForPayment.module.scss';
 
@@ -12,13 +13,19 @@ const WaitingForPayment = () => {
   const { t } = useTranslation('account');
   const location = useLocation();
   const navigate = useNavigate();
+  const announce = useAriaAnnouncer();
   const { intervalCheckAccess, errorMessage } = useCheckAccess();
 
   useEffect(() => {
     intervalCheckAccess({
       interval: 3000,
       iterations: 5,
-      callback: (hasAccess) => hasAccess && navigate(modalURLFromLocation(location, 'welcome')),
+      callback: (hasAccess) => {
+        if (!hasAccess) return;
+
+        announce(t('checkout.payment_success'), 'success');
+        navigate(modalURLFromLocation(location, 'welcome'));
+      },
     });
     //eslint-disable-next-line
   }, []);
diff --git a/packages/ui-react/src/components/Welcome/__snapshots__/Welcome.test.tsx.snap b/packages/ui-react/src/components/Welcome/__snapshots__/Welcome.test.tsx.snap
index 17bcb69b2..3b93dde6e 100644
--- a/packages/ui-react/src/components/Welcome/__snapshots__/Welcome.test.tsx.snap
+++ b/packages/ui-react/src/components/Welcome/__snapshots__/Welcome.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`<Welcome> > renders and matches snapshot 1`] = `
     </p>
     <button
       class="_button_f8f296 _primary_f8f296 _fullWidth_f8f296 _large_f8f296"
+      type="button"
     >
       <span>
         checkout.start_watching
diff --git a/packages/ui-react/src/containers/AccountModal/forms/CancelSubscription.tsx b/packages/ui-react/src/containers/AccountModal/forms/CancelSubscription.tsx
index 626ba2482..f4f6b3828 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/CancelSubscription.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/CancelSubscription.tsx
@@ -1,26 +1,29 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { format, fromUnixTime } from 'date-fns';
 import { useLocation, useNavigate } from 'react-router';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
-import { formatLocalizedDate } from '@jwp/ott-common/src/utils/formatting';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 
 import CancelSubscriptionForm from '../../../components/CancelSubscriptionForm/CancelSubscriptionForm';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
 import SubscriptionCancelled from '../../../components/SubscriptionCancelled/SubscriptionCancelled';
+import { useAriaAnnouncer } from '../../AnnouncementProvider/AnnoucementProvider';
 
 const CancelSubscription = () => {
   const accountController = getModule(AccountController);
 
   const { t, i18n } = useTranslation('account');
+  const announce = useAriaAnnouncer();
   const navigate = useNavigate();
   const location = useLocation();
   const subscription = useAccountStore((s) => s.subscription);
   const [cancelled, setCancelled] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const expirationDate = subscription?.expiresAt ? fromUnixTime(subscription.expiresAt) : null;
 
   const cancelSubscriptionConfirmHandler = async () => {
     setSubmitting(true);
@@ -28,6 +31,12 @@ const CancelSubscription = () => {
 
     try {
       await accountController.updateSubscription('cancelled');
+
+      if (expirationDate) {
+        const formattedDate = format(expirationDate, 'P', { locale: { code: i18n.language } });
+        announce(t('subscription_cancelled.message', { date: formattedDate }), 'success');
+      }
+
       setCancelled(true);
     } catch (error: unknown) {
       setError(t('cancel_subscription.unknown_error_occurred'));
@@ -45,7 +54,7 @@ const CancelSubscription = () => {
   return (
     <React.Fragment>
       {cancelled ? (
-        <SubscriptionCancelled expiresDate={formatLocalizedDate(new Date(subscription.expiresAt * 1000), i18n.language)} onClose={closeHandler} />
+        <SubscriptionCancelled expiresDate={expirationDate ? format(expirationDate, 'P', { locale: { code: i18n.language } }) : ''} onClose={closeHandler} />
       ) : (
         <CancelSubscriptionForm onConfirm={cancelSubscriptionConfirmHandler} onCancel={closeHandler} submitting={submitting} error={error} />
       )}
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
index 80143c64f..b5b1eefb4 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
@@ -5,6 +5,7 @@ import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { FormValidationError } from '@jwp/ott-common/src/errors/FormValidationError';
+import { useTranslation } from 'react-i18next';
 
 import CheckoutForm from '../../../components/CheckoutForm/CheckoutForm';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
@@ -12,6 +13,7 @@ import PayPal from '../../../components/PayPal/PayPal';
 import NoPaymentRequired from '../../../components/NoPaymentRequired/NoPaymentRequired';
 import PaymentForm, { PaymentFormData } from '../../../components/PaymentForm/PaymentForm';
 import AdyenInitialPayment from '../../AdyenInitialPayment/AdyenInitialPayment';
+import { useAriaAnnouncer } from '../../AnnouncementProvider/AnnoucementProvider';
 
 const Checkout = () => {
   const location = useLocation();
@@ -20,6 +22,8 @@ const Checkout = () => {
 
   const [couponFormOpen, setCouponFormOpen] = useState(false);
   const [showCouponCodeSuccess, setShowCouponCodeSuccess] = useState(false);
+  const { t } = useTranslation('account');
+  const announce = useAriaAnnouncer();
 
   const chooseOfferUrl = modalURLFromLocation(location, 'choose-offer');
   const welcomeUrl = modalURLFromLocation(location, 'welcome');
@@ -30,7 +34,11 @@ const Checkout = () => {
   const { offer, offerType, paymentMethods, order, isSubmitting, updateOrder, submitPaymentWithoutDetails, submitPaymentPaypal, submitPaymentStripe } =
     useCheckout({
       onUpdateOrderSuccess: () => !!couponCode && setShowCouponCodeSuccess(true),
-      onSubmitPaymentWithoutDetailsSuccess: () => navigate(offerType === 'svod' ? welcomeUrl : closeModalUrl, { replace: true }),
+      onSubmitPaymentWithoutDetailsSuccess: () => {
+        announce(t('checkout.payment_success'), 'success');
+
+        return navigate(offerType === 'svod' ? welcomeUrl : closeModalUrl, { replace: true });
+      },
       onSubmitPaypalPaymentSuccess: ({ redirectUrl }) => {
         window.location.href = redirectUrl;
       },
diff --git a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
index 78ffdea68..8a69bbb0d 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
@@ -68,7 +68,6 @@ const ChooseOffer = () => {
           await accountController.reloadSubscriptions({ delay: 7500 });
 
           const isPendingSwitch = !!useAccountStore.getState().pendingOffer;
-
           updateAccountModal(isPendingSwitch ? 'upgrade-subscription-pending' : 'upgrade-subscription-success');
         } catch (error: unknown) {
           logDev('Error occurred while upgrading subscription', error);
diff --git a/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx b/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
index cd1d6be96..46dea4b20 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
@@ -11,11 +11,13 @@ import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
 
 import EditPasswordForm from '../../../components/EditPasswordForm/EditPasswordForm';
+import { useAriaAnnouncer } from '../../AnnouncementProvider/AnnoucementProvider';
 
 const ResetPassword = ({ type }: { type?: 'add' }) => {
   const accountController = getModule(AccountController);
 
   const { t } = useTranslation('account');
+  const announce = useAriaAnnouncer();
   const location = useLocation();
   const navigate = useNavigate();
   const resetPasswordTokenParam = useQueryParam('resetPasswordToken');
@@ -45,6 +47,8 @@ const ResetPassword = ({ type }: { type?: 'add' }) => {
         }
         await accountController.changePasswordWithToken(emailParam || '', password, resetToken, passwordConfirmation);
       }
+
+      announce(t('reset.reset_password_succesful'), 'success');
       await accountController.logout();
       navigate(modalURLFromLocation(location, 'login'));
     } catch (error: unknown) {
@@ -70,7 +74,7 @@ const ResetPassword = ({ type }: { type?: 'add' }) => {
       oldPassword: string(),
       password: string()
         .matches(/^(?=.*[a-z])(?=.*[0-9]).{8,}$/, t('registration.invalid_password'))
-        .required(t('login.field_required')),
+        .required(t('login.field_required', { field: t('login.password') })),
       passwordConfirmation: string().required(),
       resetPasswordToken: string(),
     }),
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Login.tsx b/packages/ui-react/src/containers/AccountModal/forms/Login.tsx
index 9764c212f..bc68e3f14 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Login.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Login.tsx
@@ -11,6 +11,7 @@ import useSocialLoginUrls from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
 import type { LoginFormData } from '@jwp/ott-common/types/account';
 
 import LoginForm from '../../../components/LoginForm/LoginForm';
+import { useAriaAnnouncer } from '../../AnnouncementProvider/AnnoucementProvider';
 
 type Props = {
   messageKey: string | null;
@@ -23,6 +24,7 @@ const Login: React.FC<Props> = ({ messageKey }: Props) => {
   const navigate = useNavigate();
   const location = useLocation();
   const { t } = useTranslation('account');
+  const announce = useAriaAnnouncer();
 
   const socialLoginURLs = useSocialLoginUrls(window.location.href.split('?')[0]);
 
@@ -33,7 +35,11 @@ const Login: React.FC<Props> = ({ messageKey }: Props) => {
       password: string().required(t('login.field_required')),
     }),
     onSubmit: ({ email, password }) => accountController.login(email, password, window.location.href),
-    onSubmitSuccess: () => navigate(modalURLFromLocation(location, null)),
+    onSubmitSuccess: () => {
+      announce(t('login.sign_in_success'), 'success');
+
+      navigate(modalURLFromLocation(location, null));
+    },
     onSubmitError: ({ resetValue }) => resetValue('password'),
   });
 
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
index 73266fe25..3e9e853bb 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
@@ -11,6 +11,7 @@ import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 
 import RegistrationForm from '../../../components/RegistrationForm/RegistrationForm';
+import { useAriaAnnouncer } from '../../AnnouncementProvider/AnnoucementProvider';
 
 const Registration = () => {
   const accountController = getModule(AccountController);
@@ -18,7 +19,7 @@ const Registration = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { t } = useTranslation('account');
-
+  const announce = useAriaAnnouncer();
   const [consentValues, setConsentValues] = useState<Record<string, string | boolean>>({});
   const [consentErrors, setConsentErrors] = useState<string[]>([]);
 
@@ -56,9 +57,11 @@ const Registration = () => {
   const { handleSubmit, handleChange, handleBlur, values, errors, submitting } = useForm<RegistrationFormData>({
     initialValues: { email: '', password: '' },
     validationSchema: object().shape({
-      email: string().email(t('registration.field_is_not_valid_email')).required(t('registration.field_required')),
+      email: string()
+        .email(t('registration.field_is_not_valid_email'))
+        .required(t('registration.field_required', { field: t('registration.email') })),
       password: string()
-        .matches(/^(?=.*[a-z])(?=.*[0-9]).{8,}$/, t('registration.invalid_password'))
+        .matches(/^(?=.*[a-z])(?=.*[0-9]).{8,}$/, t('registration.invalid_password', { field: t('registration.password') }))
         .required(t('registration.field_required')),
     }),
     validateOnBlur: true,
@@ -72,7 +75,10 @@ const Registration = () => {
 
       await accountController.register(email, password, window.location.href, formatConsentsFromValues(publisherConsents, consentValues));
     },
-    onSubmitSuccess: () => navigate(modalURLFromLocation(location, 'personal-details')),
+    onSubmitSuccess: () => {
+      announce(t('registration.success'), 'success');
+      navigate(modalURLFromLocation(location, 'personal-details'));
+    },
     onSubmitError: ({ resetValue }) => resetValue('password'),
   });
 
diff --git a/packages/ui-react/src/containers/AccountModal/forms/RenewSubscription.tsx b/packages/ui-react/src/containers/AccountModal/forms/RenewSubscription.tsx
index 40a596dd5..b55802717 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/RenewSubscription.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/RenewSubscription.tsx
@@ -10,6 +10,7 @@ import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
 import RenewSubscriptionForm from '../../../components/RenewSubscriptionForm/RenewSubscriptionForm';
 import SubscriptionRenewed from '../../../components/SubscriptionRenewed/SubscriptionRenewed';
+import { useAriaAnnouncer } from '../../AnnouncementProvider/AnnoucementProvider';
 
 const RenewSubscription = () => {
   const accountController = getModule(AccountController);
@@ -17,6 +18,7 @@ const RenewSubscription = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { t } = useTranslation('account');
+  const announce = useAriaAnnouncer();
   const { subscription, user } = useAccountStore(({ subscription, user }) => ({ subscription, user }), shallow);
   const [renewed, setRenewed] = useState(false);
   const [submitting, setSubmitting] = useState(false);
@@ -28,6 +30,7 @@ const RenewSubscription = () => {
 
     try {
       await accountController.updateSubscription('active');
+      announce(t('renew_subscription.success'), 'success');
       setRenewed(true);
     } catch (error: unknown) {
       setError(t('renew_subscription.unknown_error_occurred'));
diff --git a/packages/ui-react/src/containers/AccountModal/forms/ResetPassword.tsx b/packages/ui-react/src/containers/AccountModal/forms/ResetPassword.tsx
index 434de9e0d..6a2ee0d99 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/ResetPassword.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/ResetPassword.tsx
@@ -94,7 +94,9 @@ const ResetPassword: React.FC<Prop> = ({ type }: Prop) => {
   const emailForm = useForm<ForgotPasswordFormData>({
     initialValues: { email: '' },
     validationSchema: object().shape({
-      email: string().email(t('login.field_is_not_valid_email')).required(t('login.field_required')),
+      email: string()
+        .email(t('login.field_is_not_valid_email'))
+        .required(t('login.field_required', { field: t('login.email') })),
     }),
     validateOnBlur: true,
     onSubmit: emailSubmitHandler,
diff --git a/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx b/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx
index bf836224b..5ac43a7f2 100644
--- a/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx
+++ b/packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx
@@ -11,6 +11,7 @@ import { ADYEN_LIVE_CLIENT_KEY, ADYEN_TEST_CLIENT_KEY } from '@jwp/ott-common/sr
 import { useTranslation } from 'react-i18next';
 
 import Adyen from '../../components/Adyen/Adyen';
+import { useAriaAnnouncer } from '../AnnouncementProvider/AnnoucementProvider';
 
 type Props = {
   setUpdatingOrder: (loading: boolean) => void;
@@ -22,12 +23,12 @@ type Props = {
 export default function AdyenInitialPayment({ setUpdatingOrder, type, paymentSuccessUrl, orderId }: Props) {
   const accountController = getModule(AccountController);
   const checkoutController = getModule(CheckoutController);
+  const { t } = useTranslation(['account', 'error']);
+  const announce = useAriaAnnouncer();
 
   const [error, setError] = useState<string>();
   const [session, setSession] = useState<AdyenPaymentSession>();
 
-  const { t } = useTranslation('error');
-
   const isSandbox = accountController.getSandbox();
   const navigate = useNavigate();
 
@@ -60,7 +61,7 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, paymentSuc
         setError(undefined);
 
         if (orderId === undefined) {
-          setError(t('adyen_order_unknown'));
+          setError(t('error:adyen_order_unknown'));
           return;
         }
 
@@ -75,7 +76,7 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, paymentSuc
         }
 
         await accountController.reloadSubscriptions({ delay: 2000 });
-
+        announce(t('account:checkout.payment_success'), 'success');
         navigate(paymentSuccessUrl, { replace: true });
       } catch (error: unknown) {
         if (error instanceof Error) {
@@ -85,7 +86,7 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, paymentSuc
 
       setUpdatingOrder(false);
     },
-    [navigate, orderId, paymentSuccessUrl, t, setUpdatingOrder, accountController, checkoutController],
+    [setUpdatingOrder, orderId, checkoutController, accountController, announce, t, navigate, paymentSuccessUrl],
   );
 
   const adyenConfiguration: CoreOptions = useMemo(
@@ -107,6 +108,7 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, paymentSuc
           const data = state.data.details as number | undefined;
           await checkoutController.finalizeAdyenPayment(orderId, data);
 
+          announce(t('account:checkout.payment_success'), 'success');
           navigate(paymentSuccessUrl, { replace: true });
         } catch (error: unknown) {
           if (error instanceof Error) {
@@ -118,7 +120,7 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, paymentSuc
       onSubmit: (state: AdyenEventData, component: DropinElement) => onSubmit(state, component.handleAction),
       onError: (error: Error) => setError(error.message),
     }),
-    [onSubmit, paymentSuccessUrl, isSandbox, session, orderId, navigate, setError, setUpdatingOrder, checkoutController],
+    [session, isSandbox, setUpdatingOrder, checkoutController, orderId, announce, t, navigate, paymentSuccessUrl, onSubmit],
   );
 
   return <Adyen configuration={adyenConfiguration} type={type} error={error} />;
diff --git a/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx b/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
index 5df910469..5b85c7e49 100644
--- a/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
+++ b/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
@@ -11,8 +11,10 @@ import { ADYEN_LIVE_CLIENT_KEY, ADYEN_TEST_CLIENT_KEY } from '@jwp/ott-common/sr
 import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
 import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
 import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import { useTranslation } from 'react-i18next';
 
 import Adyen from '../../components/Adyen/Adyen';
+import { useAriaAnnouncer } from '../AnnouncementProvider/AnnoucementProvider';
 
 type Props = {
   setProcessing: (loading: boolean) => void;
@@ -27,6 +29,8 @@ export default function AdyenPaymentDetails({ setProcessing, type, setPaymentErr
   const checkoutController = getModule(CheckoutController);
 
   const isSandbox = accountController.getSandbox();
+  const { t } = useTranslation('account');
+  const announce = useAriaAnnouncer();
   const navigate = useNavigate();
   const location = useLocation();
   const [session, setSession] = useState<AdyenPaymentSession>();
@@ -43,7 +47,9 @@ export default function AdyenPaymentDetails({ setProcessing, type, setPaymentErr
       await accountController.reloadSubscriptions({ delay: 2000 });
 
       setProcessing(false);
-      navigate(modalURLFromLocation(location, 'payment-method-success'));
+
+      announce(t('checkout.payment_success'), 'success');
+      navigate(paymentSuccessUrl);
     } catch (error: unknown) {
       setProcessing(false);
 
diff --git a/packages/ui-react/src/containers/AnnouncementProvider/AnnoucementProvider.tsx b/packages/ui-react/src/containers/AnnouncementProvider/AnnoucementProvider.tsx
new file mode 100644
index 000000000..5215f7e13
--- /dev/null
+++ b/packages/ui-react/src/containers/AnnouncementProvider/AnnoucementProvider.tsx
@@ -0,0 +1,45 @@
+import { secondsToMilliseconds } from 'date-fns';
+import { PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import FormFeedback from '../../components/FormFeedback/FormFeedback';
+
+export type AriaAnnouncerVariant = 'success' | 'error' | 'warning' | 'info';
+type Announcement = { message: string; variant: AriaAnnouncerVariant };
+type AnnounceFn = (message: string, variant: AriaAnnouncerVariant, duration?: number) => void;
+type ContextValue = { announce: AnnounceFn };
+
+const AriaAnnouncerContext = createContext<ContextValue | undefined>(undefined);
+
+export const useAriaAnnouncer = () => {
+  const announce = useContext(AriaAnnouncerContext);
+
+  if (!announce) throw new Error('Announcer context is not defined');
+
+  return announce.announce;
+};
+
+export const AriaAnnouncerProvider = ({ children }: PropsWithChildren) => {
+  const [announcement, setAnnouncement] = useState<Announcement | null>(null);
+
+  const announce = useCallback((message: string, variant: AriaAnnouncerVariant, duration = secondsToMilliseconds(10)) => {
+    setAnnouncement({ message, variant });
+
+    setTimeout(() => {
+      setAnnouncement(null);
+    }, duration);
+  }, []);
+
+  return (
+    <AriaAnnouncerContext.Provider value={{ announce }}>
+      {announcement &&
+        createPortal(
+          <FormFeedback variant={announcement.variant} visible={false}>
+            {announcement.message}
+          </FormFeedback>,
+          document.body,
+        )}
+      {children}
+    </AriaAnnouncerContext.Provider>
+  );
+};
diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss
index 230e9d3b0..365676e93 100644
--- a/packages/ui-react/src/containers/Layout/Layout.module.scss
+++ b/packages/ui-react/src/containers/Layout/Layout.module.scss
@@ -7,7 +7,7 @@
   flex-direction: column;
 }
 
-.main {
+.container {
   flex: 1;
 }
 
@@ -47,6 +47,6 @@ div.testFixMargin {
   }
 }
 
-.content {
+.main {
   height: 100%;
 }
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index afa2a7d64..17ddd5e69 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -141,6 +141,8 @@ const Layout = () => {
     );
   };
 
+  const containerProps = { inert: sideBarOpen ? '' : undefined }; // inert is not yet officially supported in react
+
   return (
     <div className={styles.layout}>
       <Helmet>
@@ -151,7 +153,7 @@ const Layout = () => {
         <meta name="twitter:title" content={siteName} />
         <meta name="twitter:description" content={metaDescription} />
       </Helmet>
-      <div className={styles.main}>
+      <div className={styles.container} {...containerProps}>
         <Header
           onMenuButtonClick={() => setSideBarOpen(true)}
           logoSrc={banner}
@@ -171,6 +173,7 @@ const Layout = () => {
           supportedLanguages={supportedLanguages}
           currentLanguage={currentLanguage}
           isLoggedIn={isLoggedIn}
+          sideBarOpen={sideBarOpen}
           userMenuOpen={userMenuOpen}
           languageMenuOpen={languageMenuOpen}
           openUserMenu={openUserMenu}
@@ -193,26 +196,27 @@ const Layout = () => {
             <Button key={item.contentId} label={item.label} to={playlistURL(item.contentId)} variant="text" />
           ))}
         </Header>
-        <Sidebar isOpen={sideBarOpen} onClose={() => setSideBarOpen(false)}>
-          <MenuButton label={t('home')} to="/" tabIndex={sideBarOpen ? 0 : -1} />
-          {menu.map((item) => (
-            <MenuButton key={item.contentId} label={item.label} to={playlistURL(item.contentId)} tabIndex={sideBarOpen ? 0 : -1} />
-          ))}
-          <hr className={styles.divider} />
-          {renderUserActions(sideBarOpen)}
-        </Sidebar>
-        <div id="content" className={styles.content} tabIndex={-1}>
+        <main id="content" className={styles.main} tabIndex={-1}>
           <Outlet />
-        </div>
+        </main>
+        {!!footerText && (
+          <MarkdownComponent
+            // The extra style below is just to fix the footer on mobile when the dev selector is shown
+            className={classNames(styles.footer, { [styles.testFixMargin]: IS_DEVELOPMENT_BUILD })}
+            markdownString={footerText}
+            tag="footer"
+            inline
+          />
+        )}
       </div>
-      {!!footerText && (
-        <MarkdownComponent
-          // The extra style below is just to fix the footer on mobile when the dev selector is shown
-          className={classNames(styles.footer, { [styles.testFixMargin]: IS_DEVELOPMENT_BUILD })}
-          markdownString={footerText}
-          inline
-        />
-      )}
+      <Sidebar isOpen={sideBarOpen} onClose={() => setSideBarOpen(false)}>
+        <MenuButton label={t('home')} to="/" tabIndex={sideBarOpen ? 0 : -1} />
+        {menu.map((item) => (
+          <MenuButton key={item.contentId} label={item.label} to={playlistURL(item.contentId)} tabIndex={sideBarOpen ? 0 : -1} />
+        ))}
+        <hr className={styles.divider} />
+        {renderUserActions(sideBarOpen)}
+      </Sidebar>
     </div>
   );
 };
diff --git a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
index bb956f62e..5f3784dc7 100644
--- a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<Layout /> > renders layout 1`] = `
     class="_layout_c71437"
   >
     <div
-      class="_main_c71437"
+      class="_container_c71437"
     >
       <header
         class="_header_f4f7a7 _static_f4f7a7"
@@ -14,10 +14,19 @@ exports[`<Layout /> > renders layout 1`] = `
         <div
           class="_container_f4f7a7"
         >
+          <a
+            class="_skipToContent_f4f7a7"
+            href="#content"
+          >
+            skip_to_content
+          </a>
           <div
             class="_menu_f4f7a7"
           >
             <div
+              aria-controls="sidebar"
+              aria-expanded="false"
+              aria-haspopup="true"
               aria-label="open_menu"
               class="_iconButton_0fef65 _iconButton_f4f7a7"
               role="button"
@@ -39,14 +48,7 @@ exports[`<Layout /> > renders layout 1`] = `
               </svg>
             </div>
           </div>
-          <a
-            class="_skipToContent_f4f7a7"
-            href="#content"
-          >
-            skip_to_content
-          </a>
           <nav
-            aria-label="menu"
             class="_nav_f4f7a7"
           >
             <a
@@ -64,61 +66,62 @@ exports[`<Layout /> > renders layout 1`] = `
           />
         </div>
       </header>
-      <div
-        class="_backdrop_577f70"
+      <main
+        class="_main_c71437"
+        id="content"
+        tabindex="-1"
       />
+    </div>
+    <div
+      class="_backdrop_577f70"
+    />
+    <div
+      class="_sidebar_577f70"
+      id="sidebar"
+      inert=""
+    >
       <div
-        class="_sidebar_577f70"
+        class="_heading_577f70"
       >
         <div
-          class="_heading_577f70"
+          aria-label="close_menu"
+          class="_iconButton_0fef65"
+          role="button"
+          tabindex="0"
         >
-          <div
-            aria-label="close_menu"
-            class="_iconButton_0fef65"
-            role="button"
-            tabindex="-1"
+          <svg
+            aria-hidden="true"
+            class="_icon_585b29"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              class="_icon_585b29"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-              />
-            </svg>
-          </div>
+            <path
+              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </svg>
         </div>
-        <nav
-          class="_group_577f70"
-        >
-          <a
-            aria-current="page"
-            aria-label="home"
-            class="_menuButton_91706b _active_91706b"
-            href="/"
-            tabindex="-1"
-          >
-            <span>
-              home
-            </span>
-          </a>
-          <hr
-            class="_divider_c71437"
-          />
-        </nav>
       </div>
-      <div
-        class="_content_c71437"
-        id="content"
-        tabindex="-1"
-      />
+      <nav
+        class="_group_577f70"
+      >
+        <a
+          aria-current="page"
+          class="_menuButton_91706b _active_91706b"
+          href="/"
+          tabindex="-1"
+        >
+          <span>
+            home
+          </span>
+        </a>
+        <hr
+          class="_divider_c71437"
+        />
+      </nav>
     </div>
   </div>
 </div>
diff --git a/packages/ui-react/src/containers/PlaylistContainer/PlaylistContainer.tsx b/packages/ui-react/src/containers/PlaylistContainer/PlaylistContainer.tsx
deleted file mode 100644
index de945ced3..000000000
--- a/packages/ui-react/src/containers/PlaylistContainer/PlaylistContainer.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { useEffect } from 'react';
-import type { Playlist, PlaylistItem } from '@jwp/ott-common/types/playlist';
-import type { ContentType } from '@jwp/ott-common/types/config';
-import { useWatchHistoryStore } from '@jwp/ott-common/src/stores/WatchHistoryStore';
-import { useFavoritesStore } from '@jwp/ott-common/src/stores/FavoritesStore';
-import { PersonalShelf, PersonalShelves, PLAYLIST_LIMIT } from '@jwp/ott-common/src/constants';
-import usePlaylist from '@jwp/ott-hooks-react/src/usePlaylist';
-
-type ChildrenParams = {
-  playlist: Playlist;
-  isLoading: boolean;
-  error: unknown;
-  style?: React.CSSProperties;
-};
-
-type Props = {
-  playlistId?: string;
-  type: ContentType;
-  relatedItem?: PlaylistItem;
-  onPlaylistUpdate?: (playlist: Playlist) => void;
-  children: (childrenParams: ChildrenParams) => JSX.Element;
-  style?: React.CSSProperties;
-  showEmpty?: boolean;
-};
-
-const PlaylistContainer = ({ playlistId, type, onPlaylistUpdate, style, children, showEmpty = false }: Props): JSX.Element | null => {
-  const isAlternativeShelf = PersonalShelves.some((shelfType) => shelfType === type);
-  const {
-    isLoading,
-    error,
-    data: fetchedPlaylist = { title: '', playlist: [] },
-  } = usePlaylist(playlistId, { page_limit: PLAYLIST_LIMIT.toString() }, !isAlternativeShelf, true);
-
-  let playlist = fetchedPlaylist;
-
-  const favoritesPlaylist = useFavoritesStore((state) => state.getPlaylist());
-  const watchHistoryPlaylist = useWatchHistoryStore((state) => state.getPlaylist());
-
-  useEffect(() => {
-    if (playlist && onPlaylistUpdate) onPlaylistUpdate(playlist);
-  }, [playlist, onPlaylistUpdate]);
-
-  if (type === PersonalShelf.Favorites) playlist = favoritesPlaylist;
-  if (type === PersonalShelf.ContinueWatching) playlist = watchHistoryPlaylist;
-
-  if (!playlistId && !type) {
-    throw new Error('Playlist without contentId and type was set in the content config section. Please check the config validity');
-  }
-
-  if (!playlist.playlist.length && !showEmpty) {
-    return null;
-  }
-
-  return children({ playlist, isLoading, error, style });
-};
-
-export default PlaylistContainer;
diff --git a/packages/ui-react/src/containers/ShelfList/ShelfList.module.scss b/packages/ui-react/src/containers/ShelfList/ShelfList.module.scss
index cdf686140..f36391772 100644
--- a/packages/ui-react/src/containers/ShelfList/ShelfList.module.scss
+++ b/packages/ui-react/src/containers/ShelfList/ShelfList.module.scss
@@ -7,14 +7,6 @@
   overflow-x: hidden;
 }
 
-.list {
-  overflow: visible !important;
-
-  > div {
-    overflow: visible !important;
-  }
-}
-
 .shelfContainer {
   position: relative;
   padding: 12px 56px;
diff --git a/packages/ui-react/src/containers/ShelfList/ShelfList.tsx b/packages/ui-react/src/containers/ShelfList/ShelfList.tsx
index 5d9ad24a6..e4d3f822d 100644
--- a/packages/ui-react/src/containers/ShelfList/ShelfList.tsx
+++ b/packages/ui-react/src/containers/ShelfList/ShelfList.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 import InfiniteScroll from 'react-infinite-scroller';
 import type { Content } from '@jwp/ott-common/types/config';
@@ -10,15 +11,16 @@ import { slugify } from '@jwp/ott-common/src/utils/urlFormatting';
 import { parseAspectRatio, parseTilesDelta } from '@jwp/ott-common/src/utils/collection';
 import { testId } from '@jwp/ott-common/src/utils/common';
 import { PersonalShelf } from '@jwp/ott-common/src/constants';
+import usePlaylists from '@jwp/ott-hooks-react/src/usePlaylists';
 
-import ShelfComponent from '../../components/Shelf/Shelf';
+import Shelf from '../../components/Shelf/Shelf';
 import InfiniteScrollLoader from '../../components/InfiniteScrollLoader/InfiniteScrollLoader';
-import PlaylistContainer from '../PlaylistContainer/PlaylistContainer';
+import ErrorPage from '../../components/ErrorPage/ErrorPage';
 
 import styles from './ShelfList.module.scss';
 
-const INITIAL_ROW_COUNT = 6;
-const LOAD_ROWS_COUNT = 4;
+const INITIAL_ROWS_TO_LOAD = 6;
+const ROWS_TO_LOAD_STEP = 4;
 
 type Props = {
   rows: Content[];
@@ -26,63 +28,73 @@ type Props = {
 
 const ShelfList = ({ rows }: Props) => {
   const { accessModel } = useConfigStore(({ accessModel }) => ({ accessModel }), shallow);
-  const [rowCount, setRowCount] = useState(INITIAL_ROW_COUNT);
+  const [rowsToLoad, setRowsToLoad] = useState(INITIAL_ROWS_TO_LOAD);
+  const { t } = useTranslation('error');
 
   const watchHistoryDictionary = useWatchHistoryStore((state) => state.getDictionaryWithSeries());
 
   // User
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
 
+  // Todo: move to more common package?
+
+  const playlists = usePlaylists(rows, rowsToLoad);
+
   useEffect(() => {
     // reset row count when the page changes
-    return () => setRowCount(INITIAL_ROW_COUNT);
+    return () => setRowsToLoad(INITIAL_ROWS_TO_LOAD);
   }, [rows]);
 
+  // If all playlists are empty (most probably due to geo restrictions), we show an empty shelves error
+  const allPlaylistsEmpty = playlists.every(({ data, isSuccess }) => isSuccess && !data?.playlist?.length);
+
+  if (allPlaylistsEmpty) {
+    return <ErrorPage title={t('empty_shelves_heading')} message={t('empty_shelves_description')} />;
+  }
+
   return (
-    <div className={styles.home}>
+    <div className={styles.shelfList}>
       <InfiniteScroll
-        pageStart={0}
         style={{ overflow: 'hidden' }}
-        loadMore={() => setRowCount((current) => current + LOAD_ROWS_COUNT)}
-        hasMore={rowCount < rows.length}
+        loadMore={() => setRowsToLoad((current) => current + ROWS_TO_LOAD_STEP)}
+        hasMore={rowsToLoad < rows.length}
         role="grid"
         loader={<InfiniteScrollLoader key="loader" />}
       >
-        {rows.slice(0, rowCount).map((row, index) => (
-          <PlaylistContainer type={row.type} playlistId={row.contentId} key={`${row.contentId || row.type}_${index}`}>
-            {({ playlist, error, isLoading, style }) => {
-              const title = row?.title || playlist.title;
-              const posterAspect = parseAspectRatio(playlist.cardImageAspectRatio || playlist.shelfImageAspectRatio);
-              const visibleTilesDelta = parseTilesDelta(posterAspect);
-
-              return (
-                <div
-                  style={style}
-                  role="row"
-                  className={classNames(styles.shelfContainer, { [styles.featured]: row.featured })}
-                  data-testid={testId(`shelf-${row.featured ? 'featured' : row.type !== 'playlist' ? row.type : slugify(title)}`)}
-                >
-                  <div role="cell">
-                    <ShelfComponent
-                      loading={isLoading}
-                      error={error}
-                      type={row.type}
-                      playlist={playlist}
-                      watchHistory={row.type === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
-                      title={title}
-                      featured={row.featured === true}
-                      accessModel={accessModel}
-                      isLoggedIn={!!user}
-                      hasSubscription={!!subscription}
-                      posterAspect={posterAspect}
-                      visibleTilesDelta={visibleTilesDelta}
-                    />
-                  </div>
-                </div>
-              );
-            }}
-          </PlaylistContainer>
-        ))}
+        {rows.slice(0, rowsToLoad).map(({ type, featured, title }, index) => {
+          const { data: playlist, isLoading, error } = playlists[index];
+
+          if (!playlist?.playlist?.length) return null;
+
+          const posterAspect = parseAspectRatio(playlist.cardImageAspectRatio || playlist.shelfImageAspectRatio);
+          const visibleTilesDelta = parseTilesDelta(posterAspect);
+
+          return (
+            <div
+              key={`${index}_${playlist.id}`}
+              role="row"
+              className={classNames(styles.shelfContainer, { [styles.featured]: featured })}
+              data-testid={testId(`shelf-${featured ? 'featured' : type === 'playlist' ? slugify(title || playlist?.title) : type}`)}
+            >
+              <div role="cell">
+                <Shelf
+                  loading={isLoading}
+                  error={error}
+                  type={type}
+                  playlist={playlist}
+                  watchHistory={type === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
+                  title={title || playlist?.title}
+                  featured={featured}
+                  accessModel={accessModel}
+                  isLoggedIn={!!user}
+                  hasSubscription={!!subscription}
+                  posterAspect={posterAspect}
+                  visibleTilesDelta={visibleTilesDelta}
+                />
+              </div>
+            </div>
+          );
+        })}
       </InfiniteScroll>
     </div>
   );
diff --git a/packages/ui-react/src/containers/TrailerModal/TrailerModal.tsx b/packages/ui-react/src/containers/TrailerModal/TrailerModal.tsx
index 0a24e8711..5523c2d5e 100644
--- a/packages/ui-react/src/containers/TrailerModal/TrailerModal.tsx
+++ b/packages/ui-react/src/containers/TrailerModal/TrailerModal.tsx
@@ -27,8 +27,8 @@ const TrailerModal: React.FC<Props> = ({ item, open, title, onClose }) => {
   if (!item) return null;
 
   return (
-    <Modal open={open} onClose={onClose} role="dialog">
-      <div className={styles.container}>
+    <Modal open={open} onClose={onClose}>
+      <div className={styles.container} role="dialog" aria-labelledby="trailer-modal-title">
         <Player
           item={item}
           onPlay={handlePlay}
@@ -40,7 +40,9 @@ const TrailerModal: React.FC<Props> = ({ item, open, title, onClose }) => {
         />
         <Fade open={!isPlaying || userActive}>
           <div className={styles.playerOverlay}>
-            <div className={styles.title}>{title}</div>
+            <h1 id="trailer-modal-title" className={styles.title}>
+              {title}
+            </h1>
           </div>
           <ModalCloseButton onClick={onClose} />
         </Fade>
diff --git a/packages/ui-react/src/pages/Home/Home.test.tsx b/packages/ui-react/src/pages/Home/Home.test.tsx
index f45ab6a8d..bba69ce89 100644
--- a/packages/ui-react/src/pages/Home/Home.test.tsx
+++ b/packages/ui-react/src/pages/Home/Home.test.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-import type { UseQueryResult } from 'react-query';
-import type { Playlist } from '@jwp/ott-common/types/playlist';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 
 import { renderWithRouter } from '../../../test/utils';
@@ -31,9 +29,9 @@ describe('Home Component tests', () => {
       },
     });
 
-    vi.mock('@jwp/ott-hooks-react/src/usePlaylist.ts', () => ({
-      default: (): UseQueryResult<Playlist | undefined> => {
-        return {
+    vi.mock('@jwp/ott-hooks-react/src/usePlaylists.ts', () => ({
+      default: () => {
+        const mockResult = {
           dataUpdatedAt: 0,
           error: null,
           errorUpdatedAt: 0,
@@ -89,6 +87,8 @@ describe('Home Component tests', () => {
             ],
           },
         };
+
+        return [mockResult, mockResult];
       },
     }));
 
diff --git a/packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap b/packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap
index ddee02a25..b2590a3f2 100644
--- a/packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap
+++ b/packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap
@@ -7,7 +7,9 @@ exports[`Home Component tests > Home test 1`] = `
   >
     home
   </h1>
-  <div>
+  <div
+    class="_shelfList_a0651b"
+  >
     <div
       role="grid"
       style="overflow: hidden;"
@@ -28,93 +30,93 @@ exports[`Home Component tests > Home test 1`] = `
             >
               This is a playlist
             </h2>
-            <div>
-              <div
-                class="_tileDock_22abb0"
+            <div
+              class="_tileDock_22abb0"
+            >
+              <ul
+                style="transform: translate3d(0%, 0, 0); margin-left: -4px; margin-right: -4px;"
               >
-                <ul
-                  style="transform: translate3d(0%, 0, 0); margin-left: -4px; margin-right: -4px;"
+                <li
+                  aria-hidden="false"
+                  class=""
+                  style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
                 >
-                  <li
-                    class=""
-                    style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+                  <a
+                    class="_card_d75732"
+                    data-testid="My video"
+                    href="/m/abcddabc/my-video"
+                    role="button"
+                    tabindex="0"
                   >
-                    <a
-                      class="_card_d75732"
-                      data-testid="My video"
-                      href="/m/abcddabc/my-video"
-                      role="button"
-                      tabindex="0"
+                    <div
+                      class="_titleContainer_d75732"
                     >
-                      <div
-                        class="_titleContainer_d75732"
+                      <h3
+                        class="_title_d75732"
                       >
-                        <h3
-                          class="_title_d75732"
-                        >
-                          My video
-                        </h3>
-                      </div>
+                        My video
+                      </h3>
+                    </div>
+                    <div
+                      class="_poster_d75732 _aspect169_d75732"
+                    >
                       <div
-                        class="_poster_d75732 _aspect169_d75732"
+                        class="_meta_d75732"
                       >
                         <div
-                          class="_meta_d75732"
+                          class="_tags_d75732"
                         >
                           <div
-                            class="_tags_d75732"
+                            class="_tag_d75732"
                           >
-                            <div
-                              class="_tag_d75732"
-                            >
-                              6 min
-                            </div>
+                            6 min
                           </div>
                         </div>
                       </div>
-                    </a>
-                  </li>
-                  <li
-                    class=""
-                    style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+                    </div>
+                  </a>
+                </li>
+                <li
+                  aria-hidden="false"
+                  class=""
+                  style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+                >
+                  <a
+                    class="_card_d75732"
+                    data-testid="Other Vids"
+                    href="/m/zzzaaazz/other-vids"
+                    role="button"
+                    tabindex="0"
                   >
-                    <a
-                      class="_card_d75732"
-                      data-testid="Other Vids"
-                      href="/m/zzzaaazz/other-vids"
-                      role="button"
-                      tabindex="0"
+                    <div
+                      class="_titleContainer_d75732"
                     >
-                      <div
-                        class="_titleContainer_d75732"
+                      <h3
+                        class="_title_d75732"
                       >
-                        <h3
-                          class="_title_d75732"
-                        >
-                          Other Vids
-                        </h3>
-                      </div>
+                        Other Vids
+                      </h3>
+                    </div>
+                    <div
+                      class="_poster_d75732 _aspect169_d75732"
+                    >
                       <div
-                        class="_poster_d75732 _aspect169_d75732"
+                        class="_meta_d75732"
                       >
                         <div
-                          class="_meta_d75732"
+                          class="_tags_d75732"
                         >
                           <div
-                            class="_tags_d75732"
+                            class="_tag_d75732"
                           >
-                            <div
-                              class="_tag_d75732"
-                            >
-                              6 min
-                            </div>
+                            6 min
                           </div>
                         </div>
                       </div>
-                    </a>
-                  </li>
-                </ul>
-              </div>
+                    </div>
+                  </a>
+                </li>
+              </ul>
             </div>
           </div>
         </div>
@@ -135,93 +137,93 @@ exports[`Home Component tests > Home test 1`] = `
             >
               Second Playlist
             </h2>
-            <div>
-              <div
-                class="_tileDock_22abb0"
+            <div
+              class="_tileDock_22abb0"
+            >
+              <ul
+                style="transform: translate3d(0%, 0, 0); margin-left: -4px; margin-right: -4px;"
               >
-                <ul
-                  style="transform: translate3d(0%, 0, 0); margin-left: -4px; margin-right: -4px;"
+                <li
+                  aria-hidden="false"
+                  class=""
+                  style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
                 >
-                  <li
-                    class=""
-                    style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+                  <a
+                    class="_card_d75732"
+                    data-testid="My video"
+                    href="/m/abcddabc/my-video"
+                    role="button"
+                    tabindex="0"
                   >
-                    <a
-                      class="_card_d75732"
-                      data-testid="My video"
-                      href="/m/abcddabc/my-video"
-                      role="button"
-                      tabindex="0"
+                    <div
+                      class="_titleContainer_d75732"
                     >
-                      <div
-                        class="_titleContainer_d75732"
+                      <h3
+                        class="_title_d75732"
                       >
-                        <h3
-                          class="_title_d75732"
-                        >
-                          My video
-                        </h3>
-                      </div>
+                        My video
+                      </h3>
+                    </div>
+                    <div
+                      class="_poster_d75732 _aspect169_d75732"
+                    >
                       <div
-                        class="_poster_d75732 _aspect169_d75732"
+                        class="_meta_d75732"
                       >
                         <div
-                          class="_meta_d75732"
+                          class="_tags_d75732"
                         >
                           <div
-                            class="_tags_d75732"
+                            class="_tag_d75732"
                           >
-                            <div
-                              class="_tag_d75732"
-                            >
-                              6 min
-                            </div>
+                            6 min
                           </div>
                         </div>
                       </div>
-                    </a>
-                  </li>
-                  <li
-                    class=""
-                    style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+                    </div>
+                  </a>
+                </li>
+                <li
+                  aria-hidden="false"
+                  class=""
+                  style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+                >
+                  <a
+                    class="_card_d75732"
+                    data-testid="Other Vids"
+                    href="/m/zzzaaazz/other-vids"
+                    role="button"
+                    tabindex="0"
                   >
-                    <a
-                      class="_card_d75732"
-                      data-testid="Other Vids"
-                      href="/m/zzzaaazz/other-vids"
-                      role="button"
-                      tabindex="0"
+                    <div
+                      class="_titleContainer_d75732"
                     >
-                      <div
-                        class="_titleContainer_d75732"
+                      <h3
+                        class="_title_d75732"
                       >
-                        <h3
-                          class="_title_d75732"
-                        >
-                          Other Vids
-                        </h3>
-                      </div>
+                        Other Vids
+                      </h3>
+                    </div>
+                    <div
+                      class="_poster_d75732 _aspect169_d75732"
+                    >
                       <div
-                        class="_poster_d75732 _aspect169_d75732"
+                        class="_meta_d75732"
                       >
                         <div
-                          class="_meta_d75732"
+                          class="_tags_d75732"
                         >
                           <div
-                            class="_tags_d75732"
+                            class="_tag_d75732"
                           >
-                            <div
-                              class="_tag_d75732"
-                            >
-                              6 min
-                            </div>
+                            6 min
                           </div>
                         </div>
                       </div>
-                    </a>
-                  </li>
-                </ul>
-              </div>
+                    </div>
+                  </a>
+                </li>
+              </ul>
             </div>
           </div>
         </div>
diff --git a/packages/ui-react/src/pages/ScreenRouting/PlaylistScreenRouter.tsx b/packages/ui-react/src/pages/ScreenRouting/PlaylistScreenRouter.tsx
index 2ff83c24f..12aa38ac2 100644
--- a/packages/ui-react/src/pages/ScreenRouting/PlaylistScreenRouter.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/PlaylistScreenRouter.tsx
@@ -33,6 +33,10 @@ const PlaylistScreenRouter = () => {
     return <ErrorPage title={t('playlist_not_found')} />;
   }
 
+  if (data.playlist.length === 0) {
+    return <ErrorPage title={t('empty_shelves_heading')} message={t('empty_shelves_description')} />;
+  }
+
   const PlaylistScreen = playlistScreenMap.getScreen(data);
 
   return <PlaylistScreen data={data} isLoading={isFetching} />;
diff --git a/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx b/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx
index ad372ebd0..1797c7267 100644
--- a/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistGrid/PlaylistGrid.tsx
@@ -41,11 +41,11 @@ const PlaylistGrid: ScreenComponent<Playlist> = ({ data, isLoading }) => {
         <meta property="og:title" content={pageTitle} />
         <meta name="twitter:title" content={pageTitle} />
       </Helmet>
-      <header className={styles.header}>
-        <h1>{data.title}</h1>
-        {shouldShowFilter && <Filter name="genre" value={filter} defaultLabel="All" options={categories} setValue={setFilter} />}
-      </header>
-      <main className={styles.main}>
+      <div className={styles.main}>
+        <header className={styles.header}>
+          <h1>{data.title}</h1>
+          {shouldShowFilter && <Filter name="genre" value={filter} defaultLabel="All" options={categories} setValue={setFilter} />}
+        </header>
         <CardGrid
           getUrl={getUrl}
           playlist={filteredPlaylist}
@@ -53,8 +53,9 @@ const PlaylistGrid: ScreenComponent<Playlist> = ({ data, isLoading }) => {
           isLoggedIn={!!user}
           hasSubscription={!!subscription}
           isLoading={isLoading}
+          headingLevel={2}
         />
-      </main>
+      </div>
     </div>
   );
 };
diff --git a/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx b/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx
index b0dbbfbd1..3908f79be 100644
--- a/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx
@@ -215,7 +215,7 @@ const PlaylistLiveChannels: ScreenComponent<Playlist> = ({ data: { feedid, playl
             channels={channels}
             onChannelClick={handleChannelClick}
             onProgramClick={handleProgramClick}
-            channel={channel}
+            selectedChannel={channel}
             program={program}
             config={config}
           />
diff --git a/packages/ui-react/src/pages/Search/Search.module.scss b/packages/ui-react/src/pages/Search/Search.module.scss
index 401d2bee6..72722d6c0 100644
--- a/packages/ui-react/src/pages/Search/Search.module.scss
+++ b/packages/ui-react/src/pages/Search/Search.module.scss
@@ -8,7 +8,7 @@
   font-family: var(--body-alt-font-family);
   text-align: center;
 
-  > main {
+  > div {
     margin-top: 6px;
   }
 
@@ -25,10 +25,6 @@
   }
 }
 
-.main {
-  margin: -8px;
-}
-
 .header {
   display: flex;
   align-items: center;
diff --git a/packages/ui-react/src/pages/Search/Search.tsx b/packages/ui-react/src/pages/Search/Search.tsx
index 31dbe966c..4d757ae07 100644
--- a/packages/ui-react/src/pages/Search/Search.tsx
+++ b/packages/ui-react/src/pages/Search/Search.tsx
@@ -90,9 +90,7 @@ const Search = () => {
       <header className={styles.header}>
         <h2>{t('heading')}</h2>
       </header>
-      <main className={styles.main}>
-        <CardGrid getUrl={getURL} playlist={playlist} isLoading={firstRender} accessModel={accessModel} isLoggedIn={!!user} hasSubscription={!!subscription} />
-      </main>
+      <CardGrid getUrl={getURL} playlist={playlist} isLoading={firstRender} accessModel={accessModel} isLoggedIn={!!user} hasSubscription={!!subscription} />
     </div>
   );
 };
diff --git a/packages/ui-react/src/pages/User/User.tsx b/packages/ui-react/src/pages/User/User.tsx
index 48c67d0ea..dc8170ec5 100644
--- a/packages/ui-react/src/pages/User/User.tsx
+++ b/packages/ui-react/src/pages/User/User.tsx
@@ -9,7 +9,7 @@ import FavoritesController from '@jwp/ott-common/src/controllers/FavoritesContro
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
 import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
-import { ACCESS_MODEL, PersonalShelf } from '@jwp/ott-common/src/constants';
+import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
 import { useProfiles } from '@jwp/ott-hooks-react/src/useProfiles';
 import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react';
@@ -23,6 +23,7 @@ import {
   RELATIVE_PATH_USER_PAYMENTS,
 } from '@jwp/ott-common/src/paths';
 import { userProfileURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import { useFavoritesStore } from '@jwp/ott-common/src/stores/FavoritesStore';
 
 import AccountComponent from '../../components/Account/Account';
 import Button from '../../components/Button/Button';
@@ -30,7 +31,6 @@ import ConfirmationDialog from '../../components/ConfirmationDialog/Confirmation
 import Favorites from '../../components/Favorites/Favorites';
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 import PaymentContainer from '../../containers/PaymentContainer/PaymentContainer';
-import PlaylistContainer from '../../containers/PlaylistContainer/PlaylistContainer';
 import EditProfile from '../../containers/Profiles/EditProfile';
 import Icon from '../../components/Icon/Icon';
 
@@ -58,6 +58,7 @@ const User = (): JSX.Element => {
   const { user: customer, subscription, loading } = useAccountStore();
   const { canUpdateEmail, canRenewSubscription } = accountController.getFeatures();
   const { profile } = useProfileStore();
+  const favorites = useFavoritesStore((state) => state.getPlaylist());
 
   const { profilesEnabled } = useProfiles();
 
@@ -91,7 +92,7 @@ const User = (): JSX.Element => {
   return (
     <div className={styles.user}>
       {isLargeScreen && (
-        <div className={styles.leftColumn}>
+        <nav className={styles.leftColumn}>
           <div className={styles.panel}>
             <ul>
               {accessModel === 'SVOD' && profilesEnabled && profileAndFavoritesPage && (
@@ -147,7 +148,7 @@ const User = (): JSX.Element => {
               )}
             </ul>
           </div>
-        </div>
+        </nav>
       )}
       <div className={styles.mainColumn}>
         <Routes>
@@ -161,18 +162,12 @@ const User = (): JSX.Element => {
               path={RELATIVE_PATH_USER_FAVORITES}
               element={
                 <>
-                  <PlaylistContainer type={PersonalShelf.Favorites} showEmpty>
-                    {({ playlist, error, isLoading }) => (
-                      <Favorites
-                        playlist={playlist}
-                        error={error}
-                        isLoading={isLoading}
-                        onClearFavoritesClick={() => setClearFavoritesOpen(true)}
-                        accessModel={accessModel}
-                        hasSubscription={!!subscription}
-                      />
-                    )}
-                  </PlaylistContainer>
+                  <Favorites
+                    playlist={favorites}
+                    onClearFavoritesClick={() => setClearFavoritesOpen(true)}
+                    accessModel={accessModel}
+                    hasSubscription={!!subscription}
+                  />
                   <ConfirmationDialog
                     open={clearFavoritesOpen}
                     title={t('favorites.clear_favorites_title')}
diff --git a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
index 175c7552a..94a72fb1c 100644
--- a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
+++ b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`User Component tests > Account Page 1`] = `
   <div
     class="_user_e9c5ca"
   >
-    <div
+    <nav
       class="_leftColumn_e9c5ca"
     >
       <div
@@ -66,6 +66,7 @@ exports[`User Component tests > Account Page 1`] = `
           >
             <button
               class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296"
+              type="button"
             >
               <div
                 class="_startIcon_f8f296"
@@ -88,10 +89,15 @@ exports[`User Component tests > Account Page 1`] = `
           </li>
         </ul>
       </div>
-    </div>
+    </nav>
     <div
       class="_mainColumn_e9c5ca"
     >
+      <h1
+        class="_hideUntilFocus_c968f7"
+      >
+        nav.account
+      </h1>
       <section
         aria-labelledby="account_about_you_1235"
         class="_panel_e9c5ca"
@@ -123,9 +129,18 @@ exports[`User Component tests > Account Page 1`] = `
             >
               account.firstname
             </label>
-            <p>
-              User
-            </p>
+            <input
+              aria-describedby="helper_text_1235_firstname"
+              aria-invalid="false"
+              aria-required="false"
+              class="_input_e16c1b"
+              id="text-field_1235_firstname"
+              lang="en"
+              name="firstName"
+              readonly=""
+              type="text"
+              value="User"
+            />
           </div>
           <div
             class="_textField_e16c1b"
@@ -136,9 +151,18 @@ exports[`User Component tests > Account Page 1`] = `
             >
               account.lastname
             </label>
-            <p>
-              Person
-            </p>
+            <input
+              aria-describedby="helper_text_1235_lastname"
+              aria-invalid="false"
+              aria-required="false"
+              class="_input_e16c1b"
+              id="text-field_1235_lastname"
+              lang="en"
+              name="lastName"
+              readonly=""
+              type="text"
+              value="Person"
+            />
           </div>
         </form>
         <div
@@ -180,9 +204,18 @@ exports[`User Component tests > Account Page 1`] = `
             >
               account.email
             </label>
-            <p>
-              user@jwplayer.com
-            </p>
+            <input
+              aria-describedby="helper_text_1235_email"
+              aria-invalid="false"
+              aria-required="true"
+              class="_input_e16c1b"
+              id="text-field_1235_email"
+              name="email"
+              readonly=""
+              required=""
+              type="text"
+              value="user@jwplayer.com"
+            />
           </div>
         </form>
         <div
@@ -250,7 +283,7 @@ exports[`User Component tests > Favorites Page 1`] = `
   <div
     class="_user_e9c5ca"
   >
-    <div
+    <nav
       class="_leftColumn_e9c5ca"
     >
       <div
@@ -335,6 +368,7 @@ exports[`User Component tests > Favorites Page 1`] = `
           >
             <button
               class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296"
+              type="button"
             >
               <div
                 class="_startIcon_f8f296"
@@ -357,7 +391,7 @@ exports[`User Component tests > Favorites Page 1`] = `
           </li>
         </ul>
       </div>
-    </div>
+    </nav>
     <div
       class="_mainColumn_e9c5ca"
     >
@@ -370,6 +404,7 @@ exports[`User Component tests > Favorites Page 1`] = `
           </h1>
           <button
             class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+            type="button"
           >
             <span>
               favorites.clear
@@ -378,15 +413,21 @@ exports[`User Component tests > Favorites Page 1`] = `
         </div>
         <div>
           <div
+            aria-rowcount="1"
             class="_container_7175d1 _cols-3_7175d1"
             role="grid"
           >
             <div
-              class="_cell_7175d1"
+              aria-rowindex="0"
+              class="_row_19b484"
               role="row"
             >
               <div
-                role="cell"
+                aria-colindex="0"
+                class="_cell_19b484"
+                id="layout_grid_0-0"
+                role="gridcell"
+                style="width: 33%;"
               >
                 <a
                   class="_card_d75732"
@@ -423,20 +464,19 @@ exports[`User Component tests > Favorites Page 1`] = `
                   </div>
                 </a>
               </div>
-            </div>
-            <div
-              class="_cell_7175d1"
-              role="row"
-            >
               <div
-                role="cell"
+                aria-colindex="1"
+                class="_cell_19b484"
+                id="layout_grid_0-1"
+                role="gridcell"
+                style="width: 33%;"
               >
                 <a
                   class="_card_d75732"
                   data-testid="Big Buck Bunny"
                   href="/m/aaabbbcd/big-buck-bunny?r=bbbdddff"
                   role="button"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   <div
                     class="_titleContainer_d75732"
@@ -466,20 +506,19 @@ exports[`User Component tests > Favorites Page 1`] = `
                   </div>
                 </a>
               </div>
-            </div>
-            <div
-              class="_cell_7175d1"
-              role="row"
-            >
               <div
-                role="cell"
+                aria-colindex="2"
+                class="_cell_19b484"
+                id="layout_grid_0-2"
+                role="gridcell"
+                style="width: 33%;"
               >
                 <a
                   class="_card_d75732"
                   data-testid="My last favorite"
                   href="/m/ggaaccvv/my-last-favorite?r=bbbbbbbb"
                   role="button"
-                  tabindex="0"
+                  tabindex="-1"
                 >
                   <div
                     class="_titleContainer_d75732"
@@ -523,7 +562,7 @@ exports[`User Component tests > Payments Page 1`] = `
   <div
     class="_user_e9c5ca"
   >
-    <div
+    <nav
       class="_leftColumn_e9c5ca"
     >
       <div
@@ -584,6 +623,7 @@ exports[`User Component tests > Payments Page 1`] = `
           >
             <button
               class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296"
+              type="button"
             >
               <div
                 class="_startIcon_f8f296"
@@ -606,7 +646,7 @@ exports[`User Component tests > Payments Page 1`] = `
           </li>
         </ul>
       </div>
-    </div>
+    </nav>
     <div
       class="_mainColumn_e9c5ca"
     >
@@ -655,6 +695,7 @@ exports[`User Component tests > Payments Page 1`] = `
           aria-disabled="false"
           class="_button_f8f296 _upgradeSubscription_c57ff5 _primary_f8f296 _outlined_f8f296"
           data-testid="change-subscription-button"
+          type="button"
         >
           <span>
             user:payment.change_subscription
@@ -680,13 +721,22 @@ exports[`User Component tests > Payments Page 1`] = `
           >
             <label
               class="_label_e16c1b"
-              for="text-field_1235"
+              for="text-field_1235_cardnumber"
             >
               user:payment.card_number
             </label>
-            <p>
-              •••• •••• •••• 9888
-            </p>
+            <input
+              aria-describedby="helper_text_1235_cardnumber"
+              aria-invalid="false"
+              aria-label="user:payment.card_number_hidden"
+              aria-required="false"
+              class="_input_e16c1b"
+              id="text-field_1235_cardnumber"
+              name="cardNumber"
+              readonly=""
+              type="text"
+              value="•••• •••• •••• 9888"
+            />
           </div>
           <div
             class="_cardDetails_c57ff5"
@@ -696,30 +746,48 @@ exports[`User Component tests > Payments Page 1`] = `
             >
               <label
                 class="_label_e16c1b"
-                for="text-field_1235"
+                for="text-field_1235_cardexpiry"
               >
                 user:payment.expiry_date
               </label>
-              <p>
-                03/30
-              </p>
+              <input
+                aria-describedby="helper_text_1235_cardexpiry"
+                aria-invalid="false"
+                aria-required="false"
+                class="_input_e16c1b"
+                id="text-field_1235_cardexpiry"
+                name="cardExpiry"
+                readonly=""
+                type="text"
+                value="03/30"
+              />
             </div>
             <div
               class="_textField_e16c1b"
             >
               <label
                 class="_label_e16c1b"
-                for="text-field_1235"
+                for="text-field_1235_cardsecuritycode"
               >
                 user:payment.security_code
               </label>
-              <p>
-                ******
-              </p>
+              <input
+                aria-describedby="helper_text_1235_cardsecuritycode"
+                aria-invalid="false"
+                aria-label="user:payment.security_code_hidden"
+                aria-required="false"
+                class="_input_e16c1b"
+                id="text-field_1235_cardsecuritycode"
+                name="cardSecurityCode"
+                readonly=""
+                type="text"
+                value="******"
+              />
             </div>
           </div>
           <button
             class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+            type="button"
           >
             <span>
               account:payment.edit_card
diff --git a/packages/ui-react/src/styles/accessibility.scss b/packages/ui-react/src/styles/accessibility.scss
index bf3f4384d..10e8f0577 100644
--- a/packages/ui-react/src/styles/accessibility.scss
+++ b/packages/ui-react/src/styles/accessibility.scss
@@ -22,6 +22,17 @@ $focus-box-shadow: 0 0 1px 5px var(--highlight-color, variables.$white),
   }
 }
 
+.hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+}
+
 .hideUntilFocus {
   position: absolute;
   width: 0;
@@ -36,3 +47,24 @@ $focus-box-shadow: 0 0 1px 5px var(--highlight-color, variables.$white),
     clip: auto;
   }
 }
+
+@mixin accessibleOutline {
+  outline: 2px solid var(--highlight-color, #fff);
+  box-shadow: 0 0 2px 3px var(--highlight-contrast-color, #000);
+}
+@mixin accessibleOutlineContrast {
+  outline: 2px solid var(--highlight-contrast-color, #fff);
+  box-shadow: 0 0 2px 3px var(--highlight-color, #000);
+}
+
+/* Clearly visible focus rectangle (WCAG guidelines). */
+@media (hover: hover) and (pointer: fine) {
+  a,
+  [role='button'],
+  button,
+  input {
+    &:focus {
+      @include accessibleOutline;
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ui-react/src/utils/theming.ts b/packages/ui-react/src/utils/theming.ts
index ef786e088..5a928ceec 100644
--- a/packages/ui-react/src/utils/theming.ts
+++ b/packages/ui-react/src/utils/theming.ts
@@ -1,22 +1,29 @@
 import type { Config } from '@jwp/ott-common/types/config';
 import { calculateContrastColor } from '@jwp/ott-common/src/utils/common';
+import env from '@jwp/ott-common/src/env';
 
 export const setThemingVariables = (config: Config) => {
   const root = document.querySelector(':root') as HTMLElement;
   const { backgroundColor, highlightColor, headerBackground } = config.styling || {};
+  const bodyFont = env.APP_BODY_FONT;
+  const bodyAltFont = env.APP_BODY_ALT_FONT;
 
-  if (root && backgroundColor) {
+  if (!root) return;
+
+  root.style.setProperty('--highlight-color', highlightColor || '#fff');
+  root.style.setProperty('--highlight-contrast-color', highlightColor ? calculateContrastColor(highlightColor) : '#000');
+
+  root.style.setProperty('--header-background', headerBackground || 'rgba(0, 0, 0, 0.85)');
+  root.style.setProperty('--header-contrast-color', headerBackground ? calculateContrastColor(headerBackground) : '#fff');
+
+  if (backgroundColor) {
     root.style.setProperty('--body-background-color', backgroundColor);
     root.style.setProperty('--background-contrast-color', calculateContrastColor(backgroundColor));
   }
-
-  if (root && highlightColor) {
-    root.style.setProperty('--highlight-color', highlightColor);
-    root.style.setProperty('--highlight-contrast-color', calculateContrastColor(highlightColor));
+  if (bodyFont) {
+    root.style.setProperty('--body-font-family', bodyFont);
   }
-
-  if (root && headerBackground) {
-    root.style.setProperty('--header-background', headerBackground);
-    root.style.setProperty('--header-contrast-color', calculateContrastColor(headerBackground));
+  if (bodyAltFont) {
+    root.style.setProperty('--body-alt-font-family', bodyAltFont);
   }
 };
diff --git a/packages/ui-react/test/utils.tsx b/packages/ui-react/test/utils.tsx
index eb6cae8d0..ce732f7ad 100644
--- a/packages/ui-react/test/utils.tsx
+++ b/packages/ui-react/test/utils.tsx
@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { render, act, type RenderOptions } from '@testing-library/react';
 
 import QueryProvider from '../src/containers/QueryProvider/QueryProvider';
+import { AriaAnnouncerProvider } from '../src/containers/AnnouncementProvider/AnnoucementProvider';
 
 interface WrapperProps {
   children?: ReactNode;
@@ -27,7 +28,9 @@ export const createWrapper = () => {
 
 export const wrapper = ({ children }: WrapperProps) => (
   <QueryProvider>
-    <Router>{children as ReactElement}</Router>
+    <AriaAnnouncerProvider>
+      <Router>{children as ReactElement}</Router>
+    </AriaAnnouncerProvider>
   </QueryProvider>
 );
 
diff --git a/platforms/web/public/locales/en/account.json b/platforms/web/public/locales/en/account.json
index addf5d352..d7847ab72 100644
--- a/platforms/web/public/locales/en/account.json
+++ b/platforms/web/public/locales/en/account.json
@@ -25,11 +25,13 @@
     "invalid_card_expiry": "Invalid card expiry",
     "invalid_card_number": "Invalid card number",
     "invalid_cvc_number": "Invalid CVC number",
+    "card_details_updated": "Your card details have been updated",
     "monthly": "Monthly subscription",
     "no_payment_needed": "No payment needed",
     "payment_cancelled": "Payment cancelled",
     "payment_cancelled_message": "You have cancelled the payment",
     "payment_error": "Payment failed",
+    "payment_success": "Payment was successfully sent",
     "payment_method": "Payment method",
     "payment_method_fee": "Payment method fee",
     "paypal": "PayPal",
@@ -61,13 +63,14 @@
       "watch_on_all_devices": "Watch on all devices"
     },
     "continue": "Continue",
-    "field_required": "This field is required",
+    "field_required": "This field is required, please select an option",
     "monthly": "Monthly",
     "monthly_subscription": "Monthly subscription",
     "no_pricing_available": "There are no pricing options available at the moment.",
     "offer_not_found": "Offer not found, please try reloading the page",
     "one_time_only": "This video",
     "subscription": "Subscription",
+    "subscription_update_success": "Your subscription has been updated",
     "title": "Choose plan",
     "tvod_access_one": "{{count}} {{period}} access",
     "tvod_access_other": "{{count}} {{period}} access",
@@ -79,7 +82,7 @@
     "email": "Email",
     "facebook": "Sign in with Facebook",
     "field_is_not_valid_email": "Please re-enter your email details and try again.",
-    "field_required": "This field is required",
+    "field_required": "This field is required, please fill in a valid {{field}}",
     "forgot_password": "Forgot password?",
     "google": "Sign in with Google",
     "hide_password": "Hide password",
@@ -87,6 +90,7 @@
     "password": "Password",
     "sign_in": "Sign in",
     "sign_up": "Sign up",
+    "sign_in_success": "Sign in successful",
     "simultaneous_logins": "The maximum number of active sessions for this account has been reached. Signing in here will sign you out from another session or device.",
     "twitter": "Sign in with Twitter",
     "unexpected_error": "An unexpected error occurred.",
@@ -134,13 +138,20 @@
   },
   "registration": {
     "already_account": "Already have an account?",
-    "consent_required": "This field is required",
+    "consent_required": "This field is required, please fill in {{field}} to continue.",
     "continue": "Continue",
     "email": "Email",
     "email_updates": "Yes, I want to receive {{siteName}} updates by email.",
     "failed_to_create": "An error occurred. Please try again later.",
     "field_is_not_valid_email": "Please re-enter your email details",
     "field_required": "This field is required",
+    "field_select_required": "Please select an option",
+    "field_input_required": "Please fill in this field",
+    "field_radio_required": "Please select an option",
+    "field_country_required": "Please select a country",
+    "field_us_state_required": "Please select a state",
+    "field_datepicker_required": "Please select a date",
+    "field_checkbox_required": "Please check this box",
     "hide_password": "Hide password",
     "invalid_password": "Use a minimum of 8 characters (case sensitive) with at least one number",
     "password": "Password",
@@ -153,6 +164,8 @@
       "weak": "Weak"
     },
     "sign_up": "Sign up",
+    "success": "Registration successful",
+    "account_delete_success": "Your account has been deleted",
     "terms_and_conditions": "Terms and Conditions",
     "terms_consent": "I accept the {{termsLink}}.",
     "terms_consent_jwplayer": "I accept the {{termsLink}} of JW Player.",
@@ -163,6 +176,7 @@
     "explanation": "By clicking the button below you can renew your plan.",
     "next_billing_date_on": "Next billing date will be {{date}}",
     "no_thanks": "No, thanks",
+    "success": "Your subscription has been renewed",
     "renew_subscription": "Renew subscription",
     "renew_your_subscription": "Renew your subscription",
     "unknown_error_occurred": "An unknown error occurred!"
@@ -190,6 +204,7 @@
     "password_reset": "Password reset",
     "password_reset_text": "",
     "password_strength": "Although your password meets the criteria for a strong password, it includes elements that are not advisable, such as prohibited phrases or repeated words. Please modify it to ensure account safety.",
+    "password_reset_success": "Password reset successful",
     "passwords_do_not_match": "Passwords do not match",
     "repeat_new_password": "Repeat new password",
     "reset_password": "Edit Password",
diff --git a/platforms/web/public/locales/en/common.json b/platforms/web/public/locales/en/common.json
index e917c625f..7ce5d4d44 100644
--- a/platforms/web/public/locales/en/common.json
+++ b/platforms/web/public/locales/en/common.json
@@ -6,7 +6,7 @@
   },
   "back": "Back",
   "card_lock": "Item locked",
-  "close_modal": "Close",
+  "close_modal": "Close panel",
   "confirmation_dialog": {
     "close": "Cancel",
     "confirm": "Yes"
diff --git a/platforms/web/public/locales/en/error.json b/platforms/web/public/locales/en/error.json
index 27e1b470e..470d99cc6 100644
--- a/platforms/web/public/locales/en/error.json
+++ b/platforms/web/public/locales/en/error.json
@@ -11,5 +11,7 @@
   "settings_invalid": "Invalid or missing settings",
   "video_not_found": "Video not found",
   "unknown_error": "Unknown error",
-  "adyen_order_unknown": "Order is unknown"
+  "adyen_order_unknown": "Order is unknown",
+  "empty_shelves_heading": "No content available",
+  "empty_shelves_description": "We apologize, but there is no content available in your region."
 }
diff --git a/platforms/web/public/locales/en/user.json b/platforms/web/public/locales/en/user.json
index 6b9844ef8..9b043a5aa 100644
--- a/platforms/web/public/locales/en/user.json
+++ b/platforms/web/public/locales/en/user.json
@@ -31,6 +31,7 @@
     "edit_information": "Edit information",
     "edit_password": "Edit password",
     "email": "Email",
+    "update_success": "Your {{section}} has been successfully updated.",
     "errors": {
       "email_exists": "Email already exists!",
       "email_update_not_supported": "Email update not supported",
@@ -66,11 +67,10 @@
     "clear_favorites_body": "You are about to clear all of your favorite videos. Are you sure?",
     "clear_favorites_title": "Clear favorites?",
     "no_favorites": "Your favorites are empty",
-    "not_found": "Favorites not found!",
     "title": "Favorites"
   },
   "login": {
-    "field_required": "This field is required"
+    "field_required": "This field is required, please fill in a valid {{field}}."
   },
   "name": "Name",
   "nav": {
@@ -90,6 +90,7 @@
     "billing_history": "Billing history",
     "cancel_subscription": "Cancel subscription",
     "card_number": "Card number",
+    "card_number_hidden": "Credit card number ending with {{number}}",
     "change_plan": "Change Plan",
     "change_plan_error": "There was a problem saving your subscription plan change.",
     "change_subscription": "Change subscription",
@@ -117,6 +118,7 @@
     "price_paid_with_card": "Price paid with card",
     "renew_subscription": "Renew subscription",
     "security_code": "Security code",
+    "security_code_hidden": "Security code hidden",
     "show_all": "Show all",
     "show_receipt": "Show receipt",
     "subscription_details": "Subscription details",
diff --git a/platforms/web/public/locales/en/video.json b/platforms/web/public/locales/en/video.json
index a679209ef..c01d5750f 100644
--- a/platforms/web/public/locales/en/video.json
+++ b/platforms/web/public/locales/en/video.json
@@ -20,6 +20,7 @@
   "remove_from_favorites": "Remove from favorites",
   "season": "season",
   "season_number_filter_template": "Season {{seasonNumber}}",
+  "series": "Series",
   "series_error": "An error occurred while requesting series",
   "share": "Share",
   "share_video": "Share this video",
diff --git a/platforms/web/public/locales/es/account.json b/platforms/web/public/locales/es/account.json
index e9c5e98f4..9769cd963 100644
--- a/platforms/web/public/locales/es/account.json
+++ b/platforms/web/public/locales/es/account.json
@@ -27,11 +27,13 @@
     "invalid_card_expiry": "Fecha de vencimiento Invalido para la tarjeta",
     "invalid_card_number": "Número de tarjeta inválido",
     "invalid_cvc_number": "Número de CVC inválido",
+    "card_details_updated": "Detalles de la tarjeta actualizados",
     "monthly": "Suscripción mensual",
     "no_payment_needed": "No se necesita pago",
     "payment_cancelled": "Pago cancelado",
     "payment_cancelled_message": "Has cancelado el pago",
     "payment_error": "Error en el pago",
+    "payment_success": "Pago fue enviado con éxito",
     "payment_method": "Método de pago",
     "payment_method_fee": "Tarifa del método de pago",
     "paypal": "PayPal",
@@ -66,13 +68,14 @@
       "watch_on_all_devices": "Ver en todos los dispositivos"
     },
     "continue": "Continuar",
-    "field_required": "Este campo es obligatorio",
+    "field_required": "Este campo es obligatorio, selecciona una opción",
     "monthly": "Mensual",
     "monthly_subscription": "Suscripción mensual",
     "no_pricing_available": "No hay opciones de precios disponibles en este momento.",
     "offer_not_found": "Oferta no encontrada, por favor intenta volver a cargar la página",
     "one_time_only": "Este video",
     "subscription": "Suscripción",
+    "subscription_update_success": "Suscripción actualizada",
     "title": "Elige un plan",
     "tvod_access_one": "Acceso de {{count}} {{period}}",
     "tvod_access_many": "",
@@ -85,7 +88,7 @@
     "email": "Correo electrónico",
     "facebook": "Inicia sesión con Facebook",
     "field_is_not_valid_email": "Por favor, vuelve a ingresar tus datos de correo electrónico y prueba nuevamente.",
-    "field_required": "Este campo es obligatorio",
+    "field_required": "Este campo es obligatorio, por favor ingresa un {{field}} válido.",
     "forgot_password": "¿Olvidaste tu contraseña?",
     "google": "Inicia sesión con Google",
     "hide_password": "Ocultar contraseña",
@@ -93,6 +96,7 @@
     "password": "Contraseña",
     "sign_in": "Iniciar sesión",
     "sign_up": "Registrarse",
+    "sign_in_success": "Has iniciado sesión correctamente.",
     "simultaneous_logins": "Se ha alcanzado el número máximo de sesiones activas para esta cuenta. Iniciar sesión aquí lo cerrará en otra sesión o dispositivo.",
     "twitter": "Inicia sesión con Twitter",
     "unexpected_error": "Ocurrió un error inesperado.",
@@ -144,13 +148,20 @@
   },
   "registration": {
     "already_account": "¿Ya tienes una cuenta?",
-    "consent_required": "Este campo es obligatorio",
+    "consent_required": "Este campo es obligatorio, por favor completa {{field}} para continuar.",
     "continue": "Continuar",
     "email": "Correo electrónico",
     "email_updates": "Sí, deseo recibir actualizaciones de {{siteName}} por correo electrónico.",
     "failed_to_create": "Ocurrió un error. Por favor, inténtalo de nuevo más tarde.",
     "field_is_not_valid_email": "Por favor, vuelve a ingresar tus datos de correo electrónico",
     "field_required": "Este campo es obligatorio",
+    "field_select_required": "Por favor, selecciona una opción",
+    "field_input_required": "Por favor, ingresa un valor",
+    "field_radio_required": "Por favor, selecciona una opción",
+    "field_country_required": "Por favor, selecciona un país",
+    "field_us_state_required": "Por favor, selecciona un estado",
+    "field_datepicker_required": "Por favor, selecciona una fecha",
+    "field_checkbox_required": "Por favor, marca la casilla para continuar",
     "hide_password": "Ocultar contraseña",
     "invalid_password": "Utiliza un mínimo de 8 caracteres (distingue entre mayúsculas y minúsculas) con al menos un número",
     "password": "Contraseña",
@@ -163,6 +174,8 @@
       "weak": "Débil"
     },
     "sign_up": "Registrarse",
+    "success": "¡Cuenta creada!",
+    "account_delete_success": "Tu cuenta ha sido eliminada",
     "terms_and_conditions": "Términos y condiciones",
     "terms_consent": "Acepto los {{termsLink}}.",
     "terms_consent_jwplayer": "Acepto los {{termsLink}} de JW Player.",
@@ -173,6 +186,7 @@
     "explanation": "Al hacer clic en el botón de abajo, puedes renovar tu plan.",
     "next_billing_date_on": "La próxima fecha de facturación será el {{date}}",
     "no_thanks": "No, gracias",
+    "success": "¡Suscripción renovada!",
     "renew_subscription": "Renovar suscripción",
     "renew_your_subscription": "Renueva tu suscripción",
     "unknown_error_occurred": "¡Ocurrió un error desconocido!"
@@ -199,6 +213,7 @@
     "password_helper_text": "Utiliza un mínimo de 8 caracteres (distingue entre mayúsculas y minúsculas) con al menos un número",
     "password_reset": "Restablecimiento de contraseña",
     "password_reset_text": "",
+    "password_reset_success": "Contraseña restablecida",
     "password_strength": "Aunque tu contraseña cumple con los criterios de una contraseña segura, incluye elementos que no son recomendables, como frases prohibidas o palabras repetidas. Por favor, modifícala para garantizar la seguridad de tu cuenta.",
     "passwords_do_not_match": "Las contraseñas no coinciden",
     "repeat_new_password": "Repetir nueva contraseña",
diff --git a/platforms/web/public/locales/es/common.json b/platforms/web/public/locales/es/common.json
index 45c5af95c..14b14d3a2 100644
--- a/platforms/web/public/locales/es/common.json
+++ b/platforms/web/public/locales/es/common.json
@@ -6,7 +6,7 @@
   },
   "back": "Atrás",
   "card_lock": "Elemento bloqueado",
-  "close_modal": "Cerrar",
+  "close_modal": "Cerrar panel",
   "confirmation_dialog": {
     "close": "Cancelar",
     "confirm": "Sí"
diff --git a/platforms/web/public/locales/es/error.json b/platforms/web/public/locales/es/error.json
index b1027f794..092e7fb80 100644
--- a/platforms/web/public/locales/es/error.json
+++ b/platforms/web/public/locales/es/error.json
@@ -11,5 +11,7 @@
   "settings_invalid": "Ajustes inválidos o faltantes",
   "video_not_found": "Video no encontrado",
   "unknown_error": "Error desconocido",
-  "adyen_order_unknown": "El orden es desconocido"
+  "adyen_order_unknown": "El orden es desconocido",
+  "empty_shelves_heading": "No hay contenido disponible",
+  "empty_shelves_description": "Nos disculpamos, pero no hay contenido disponible en su región."
 }
diff --git a/platforms/web/public/locales/es/user.json b/platforms/web/public/locales/es/user.json
index 1081c26c7..3ff65a5ab 100644
--- a/platforms/web/public/locales/es/user.json
+++ b/platforms/web/public/locales/es/user.json
@@ -31,6 +31,7 @@
     "edit_information": "Editar información",
     "edit_password": "Editar contraseña",
     "email": "Correo electrónico",
+    "update_success": "Tu {{section}} ha sido actualizado con éxito.",
     "errors": {
       "email_exists": "¡El correo electrónico ya existe!",
       "email_update_not_supported": "No se admite la actualización del correo electrónico",
@@ -66,11 +67,10 @@
     "clear_favorites_body": "Estás a punto de borrar todos tus videos favoritos. ¿Estás seguro?",
     "clear_favorites_title": "¿Borrar favoritos?",
     "no_favorites": "Tus favoritos están vacíos",
-    "not_found": "¡Favoritos no encontrados!",
     "title": "Favoritos"
   },
   "login": {
-    "field_required": ""
+    "field_required": "Este campo es obligatorio, por favor ingresa un {{field}} válido."
   },
   "name": "Nombre",
   "nav": {
@@ -90,6 +90,7 @@
     "billing_history": "Historial de facturación",
     "cancel_subscription": "Cancelar suscripción",
     "card_number": "Número de tarjeta",
+    "card_number_hidden": "Número de tarjeta de crédito que termina en {{number}}",
     "change_plan": "Cambiar De Plan",
     "change_plan_error": "Hubo un problema al guardar los cambios en el plan de tu suscripción.",
     "change_subscription": "Cambiar suscripción",
@@ -118,6 +119,7 @@
     "price_paid_with_card": "Precio pagado con tarjeta",
     "renew_subscription": "Renovar suscripción",
     "security_code": "Código de seguridad",
+    "security_code_hidden": "Código de seguridad oculto",
     "show_all": "Mostrar todo",
     "show_receipt": "Mostrar recibo",
     "subscription_details": "Detalles de la suscripción",
diff --git a/platforms/web/public/locales/es/video.json b/platforms/web/public/locales/es/video.json
index 6114ef3de..59416b236 100644
--- a/platforms/web/public/locales/es/video.json
+++ b/platforms/web/public/locales/es/video.json
@@ -21,6 +21,7 @@
   "season": "temporada",
   "season_number_filter_template": "Temporada {{seasonNumber}}",
   "series_error": "Se produjo un error al solicitar la serie",
+  "series": "Serie",
   "share": "Compartir",
   "share_video": "Compartir este video",
   "sign_up_to_start_watching": "¡Regístrate para comenzar a ver!",
diff --git a/platforms/web/scripts/build-tools/buildTools.ts b/platforms/web/scripts/build-tools/buildTools.ts
new file mode 100644
index 000000000..f5f1eb904
--- /dev/null
+++ b/platforms/web/scripts/build-tools/buildTools.ts
@@ -0,0 +1,148 @@
+import fs from 'fs';
+
+import type { HtmlTagDescriptor } from 'vite';
+import type { Target } from 'vite-plugin-static-copy';
+
+const initSettings = (mode: string) => {
+  const localFile = `ini/.webapp.${mode}.ini`;
+  const templateFile = `ini/templates/.webapp.${mode}.ini`;
+
+  // The build ONLY uses .ini files in /ini to include in the build output.
+  // All .ini files in the directory are git ignored to customer specific values out of source control.
+  // However, this script will automatically create a .ini file for the current mode if it doesn't exist
+  // by copying the corresponding mode file from the ini/templates directory.
+  if (!fs.existsSync(localFile) && fs.existsSync(templateFile)) {
+    fs.copyFileSync(templateFile, localFile);
+  }
+
+  return localFile;
+};
+
+export const getFileCopyTargets = (mode: string): Target[] => {
+  const localFile = initSettings(mode);
+  const fileCopyTargets: Target[] = [
+    {
+      src: localFile,
+      dest: '',
+      rename: '.webapp.ini',
+    },
+  ];
+
+  // These files are only needed in dev / test / demo, so don't include in prod builds
+  if (mode !== 'prod') {
+    fileCopyTargets.push({
+      src: '../../packages/testing/epg/*',
+      dest: 'epg',
+    });
+  }
+
+  return fileCopyTargets;
+};
+
+export const getGoogleVerificationTag = (env: Record<string, string>): HtmlTagDescriptor[] => {
+  if (!env.APP_GOOGLE_SITE_VERIFICATION_ID) return [];
+
+  return [
+    {
+      tag: 'meta',
+      injectTo: 'head',
+      attrs: {
+        content: process.env.APP_GOOGLE_SITE_VERIFICATION_ID,
+        name: 'google-site-verification',
+      },
+    },
+  ];
+};
+
+// @todo: move to common?
+type ExternalFont = {
+  resource: 'google' | 'system';
+  fontFamily: string;
+};
+
+export const extractExternalFonts = (fontEnvVar: string = ''): ExternalFont[] => {
+  if (!fontEnvVar) return [];
+
+  return fontEnvVar.split(',').map((font) => {
+    const [resource, fontFamily] = font.split(':');
+
+    return { resource, fontFamily } as ExternalFont;
+  });
+};
+
+export const getGoogleFontTags = (fonts: ExternalFont[]): HtmlTagDescriptor[] => {
+  if (fonts.length === 0) return [];
+
+  // Currently only supporting google fonts
+  const uniqueFonts = makeFontsUnique(fonts);
+  const googleFonts = uniqueFonts.filter(({ resource }) => resource === 'google').map(({ fontFamily }) => fontFamily);
+
+  return createGoogleFontTags(googleFonts);
+};
+
+const makeFontsUnique = (arr: ExternalFont[]) => {
+  const seen = new Set();
+
+  return arr.filter((item) => {
+    const key = item.fontFamily;
+    return seen.has(key) ? false : seen.add(key);
+  });
+};
+
+const createGoogleFontTags = (fontFamily: string[]) => {
+  // Replace spaces with + for google font api
+  const families = fontFamily.map((font) => `family=${font.replace(/\s/g, '+')}`).join('&');
+
+  return [
+    {
+      tag: 'link',
+      injectTo: 'head',
+      attrs: {
+        rel: 'preconnect',
+        href: 'https://fonts.googleapis.com',
+      },
+    },
+    {
+      tag: 'link',
+      injectTo: 'head',
+      attrs: {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+      },
+    },
+    {
+      tag: 'link',
+      injectTo: 'head',
+      attrs: {
+        href: `https://fonts.googleapis.com/css2?${families}&display=swap`,
+        rel: 'stylesheet',
+      },
+    },
+  ] as HtmlTagDescriptor[];
+};
+
+export const getGtmTags = (env: Record<string, string>) => {
+  const tags: HtmlTagDescriptor[] = [];
+
+  if (env.APP_GTM_TAG_ID) {
+    tags.push(
+      {
+        injectTo: 'head',
+        tag: 'script',
+        children: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+        })(window,document,'script','dataLayer','${env.APP_GTM_TAG_ID}');`,
+      },
+      {
+        injectTo: 'body-prepend',
+        tag: 'noscript',
+        children: `<iframe src="https://www.googletagmanager.com/ns.html?id=${env.APP_GTM_TAG_ID}"
+        height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+      },
+    );
+  }
+
+  return tags;
+};
diff --git a/platforms/web/scripts/build-tools/settings.ts b/platforms/web/scripts/build-tools/settings.ts
deleted file mode 100644
index 898586995..000000000
--- a/platforms/web/scripts/build-tools/settings.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/* eslint-disable no-console */
-import fs from 'fs';
-
-export const initSettings = (mode: string) => {
-  const localFile = `ini/.webapp.${mode}.ini`;
-  const templateFile = `ini/templates/.webapp.${mode}.ini`;
-
-  // The build ONLY uses .ini files in /ini to include in the build output.
-  // All .ini files in the directory are git ignored to customer specific values out of source control.
-  // However, this script will automatically create a .ini file for the current mode if it doesn't exist
-  // by copying the corresponding mode file from the ini/templates directory.
-  if (!fs.existsSync(localFile) && fs.existsSync(templateFile)) {
-    fs.copyFileSync(templateFile, localFile);
-  }
-
-  return localFile;
-};
diff --git a/platforms/web/src/App.tsx b/platforms/web/src/App.tsx
index 3322afb7b..9a351909f 100644
--- a/platforms/web/src/App.tsx
+++ b/platforms/web/src/App.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
 import QueryProvider from '@jwp/ott-ui-react/src/containers/QueryProvider/QueryProvider';
 import { ErrorPageWithoutTranslation } from '@jwp/ott-ui-react/src/components/ErrorPage/ErrorPage';
 import LoadingOverlay from '@jwp/ott-ui-react/src/components/LoadingOverlay/LoadingOverlay';
+import { AriaAnnouncerProvider } from '@jwp/ott-ui-react/src/containers/AnnouncementProvider/AnnoucementProvider';
 
 import initI18n from './i18n/config';
 import Root from './containers/Root/Root';
@@ -42,7 +43,9 @@ export default function App() {
   return (
     <QueryProvider>
       <BrowserRouter>
-        <Root />
+        <AriaAnnouncerProvider>
+          <Root />
+        </AriaAnnouncerProvider>
       </BrowserRouter>
     </QueryProvider>
   );
diff --git a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
index 565ebc701..a7c66345b 100644
--- a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
+++ b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`<DemoConfigDialog> > renders and matches snapshot 1`] = `
     </div>
     <button
       class="_button_e29948 _default_e29948 _text_e29948"
+      type="button"
     >
       <span>
         click_to_unselect_config
@@ -35,14 +36,12 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
           class="_image_d73633"
           src="/images/logo.png"
         />
-        <header>
-          <h1
-            class="_title_d73633"
-          >
-            app_config_not_found
-          </h1>
-        </header>
-        <main
+        <h1
+          class="_title_d73633"
+        >
+          app_config_not_found
+        </h1>
+        <div
           class="_main_d73633"
         >
           <p
@@ -65,6 +64,9 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
                 class="_container_25c745"
               >
                 <input
+                  aria-describedby="helper_text_1235_app-config"
+                  aria-invalid="true"
+                  aria-required="true"
                   autocapitalize="none"
                   class="_input_25c745"
                   id="text-field_1235_app-config"
@@ -77,7 +79,9 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
                 />
               </div>
               <div
+                aria-live="assertive"
                 class="_helperText_edc1c5 _error_edc1c5"
+                id="helper_text_1235_app-config_1235"
               >
                 <span>
                   smth
@@ -104,6 +108,7 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
               <button
                 aria-disabled="false"
                 class="_button_e29948 _default_e29948 _outlined_e29948"
+                type="button"
               >
                 <span>
                   cancel_config_id
@@ -135,7 +140,7 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
               </a>
             </span>
           </div>
-        </main>
+        </div>
       </div>
     </div>
   </div>
diff --git a/platforms/web/src/index.tsx b/platforms/web/src/index.tsx
index d3e9ea8ef..4921fc8ee 100644
--- a/platforms/web/src/index.tsx
+++ b/platforms/web/src/index.tsx
@@ -19,6 +19,8 @@ configureEnv({
   APP_PLAYER_LICENSE_KEY: import.meta.env.APP_PLAYER_LICENSE_KEY,
 
   APP_FOOTER_TEXT: import.meta.env.APP_FOOTER_TEXT,
+  APP_BODY_FONT: import.meta.env.APP_BODY_FONT,
+  APP_BODY_ALT_FONT: import.meta.env.APP_BODY_ALT_FONT,
 });
 
 const rootElement = document.getElementById('root');
diff --git a/platforms/web/src/styles/main.scss b/platforms/web/src/styles/main.scss
index bc912684b..7763448e6 100644
--- a/platforms/web/src/styles/main.scss
+++ b/platforms/web/src/styles/main.scss
@@ -75,3 +75,7 @@ h6 {
     font-size: 18px;
   }
 }
+
+input {
+  font-family: var(--body-font-family);
+}
\ No newline at end of file
diff --git a/platforms/web/test-e2e/tests/account_test.ts b/platforms/web/test-e2e/tests/account_test.ts
index d57590650..075c2d53f 100644
--- a/platforms/web/test-e2e/tests/account_test.ts
+++ b/platforms/web/test-e2e/tests/account_test.ts
@@ -43,7 +43,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string, res
     I.click('Account');
 
     I.see('Email');
-    I.see(loginContext.email);
+    I.seeInField('input[name="email"][readonly]', loginContext.email);
 
     if (canEditEmail) {
       I.see(editAccount);
@@ -54,9 +54,9 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string, res
 
     I.see('Profile info');
     I.see('First name');
-    I.see(firstName);
+    I.seeInField('input[name="firstName"][readonly]', firstName);
     I.see('Last name');
-    I.see(lastName);
+    I.seeInField('input[name="lastName"][readonly]', lastName);
     I.see('Edit information');
 
     I.see('Legal & Marketing');
@@ -315,7 +315,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string, res
     I.see('Cancel');
 
     const fieldsWithPaths = fields.map((f) => {
-      return { ...f, xpath: `//input[@name='${f.name}']` };
+      return { ...f, xpath: `//input[@name='${f.name}'][not(@readonly)]` };
     });
 
     for (const field of fieldsWithPaths) {
@@ -340,7 +340,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string, res
       I.dontSee(field.xpath);
 
       if (field.newValue && field.name !== passwordField) {
-        I.see(field.newValue);
+        I.seeInField(`input[name="${field.name}"][readonly]`, field.newValue);
       }
     });
 
@@ -362,7 +362,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string, res
     I.see('Cancel');
 
     const fieldsWithPaths = fields.map((f) => {
-      return { ...f, xpath: `//input[@name='${f.name}']` };
+      return { ...f, xpath: `//input[@name='${f.name}'][not(@readonly)]` };
     });
 
     for (const field of fieldsWithPaths) {
@@ -399,7 +399,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string, res
     fieldsWithPaths.forEach((field) => {
       I.dontSee(field.xpath);
       if (field.name !== passwordField) {
-        I.see(field.startingValue);
+        I.seeInField(`input[name="${field.name}"][readonly]`, field.startingValue);
       }
     });
 
diff --git a/platforms/web/test-e2e/tests/live_channel_test.ts b/platforms/web/test-e2e/tests/live_channel_test.ts
index ad922a1f7..5364e7be4 100644
--- a/platforms/web/test-e2e/tests/live_channel_test.ts
+++ b/platforms/web/test-e2e/tests/live_channel_test.ts
@@ -237,12 +237,12 @@ Scenario('I can navigate through the epg', async ({ I }) => {
 
 Scenario('I can see the channel logo for Channel 1', async ({ I }) => {
   await I.openVideoCard('Channel 1');
-  await I.seeEpgChannelLogoImage('Uh7zcqVm', 'https://cdn.jwplayer.com/v2/media/Uh7zcqVm/images/channel_logo.webp?poster_fallback=1&width=320');
+  await I.seeEpgChannelLogoImage('Uh7zcqVm', 'https://cdn.jwplayer.com/v2/media/Uh7zcqVm/images/channel_logo.webp?poster_fallback=1&width=320', 'Channel 1');
 });
 
 Scenario('I can see the channel logo for Channel 2', async ({ I }) => {
   await I.openVideoCard('Channel 2');
-  await I.seeEpgChannelLogoImage('Z2evecey', 'https://cdn.jwplayer.com/v2/media/Z2evecey/images/channel_logo.webp?poster_fallback=1&width=320');
+  await I.seeEpgChannelLogoImage('Z2evecey', 'https://cdn.jwplayer.com/v2/media/Z2evecey/images/channel_logo.webp?poster_fallback=1&width=320', 'Channel 2');
 });
 
 Scenario('I can see the background image for Channel 3', async ({ I }) => {
diff --git a/platforms/web/test-e2e/tests/payments/subscription_test.ts b/platforms/web/test-e2e/tests/payments/subscription_test.ts
index ffa3fe8b2..1df037a4e 100644
--- a/platforms/web/test-e2e/tests/payments/subscription_test.ts
+++ b/platforms/web/test-e2e/tests/payments/subscription_test.ts
@@ -39,7 +39,7 @@ function runTestSuite(props: ProviderProps, providerName: string) {
 
   const today = new Date();
 
-  const cardInfo = Array.of('Card number', '•••• •••• •••• 1111', 'Expiry date', '03/2030', 'Security code', '******');
+  const cardInfo = Array.of(['Card number', '•••• •••• •••• 1111'], ['Expiry date', '03/2030'], ['Security code', '******']);
 
   Feature(`payments - ${providerName}`).retry(Number(process.env.TEST_RETRY_COUNT) || 0);
 
@@ -177,7 +177,7 @@ function runTestSuite(props: ProviderProps, providerName: string) {
 
     await finishAndCheckSubscription(I, addYear(today), today, props.yearlyOffer.price, props.hasInlineOfferSwitch);
 
-    cardInfo.forEach((s) => I.waitForText(s));
+    cardInfo.forEach(([label, value]) => I.seeInField(label, value));
   });
 
   Scenario(`I can cancel my subscription - ${providerName}`, async ({ I }) => {
@@ -186,7 +186,7 @@ function runTestSuite(props: ProviderProps, providerName: string) {
     cancelPlan(I, addYear(today), props.canRenewSubscription, providerName);
 
     // Still see payment info
-    cardInfo.forEach((s) => I.waitForText(s));
+    cardInfo.forEach(([label, value]) => I.seeInField(label, value));
   });
 
   Scenario(`I can renew my subscription - ${providerName}`, async ({ I }) => {
diff --git a/platforms/web/test-e2e/tests/video_detail_test.ts b/platforms/web/test-e2e/tests/video_detail_test.ts
index 35d43bc42..41a8a690f 100644
--- a/platforms/web/test-e2e/tests/video_detail_test.ts
+++ b/platforms/web/test-e2e/tests/video_detail_test.ts
@@ -103,7 +103,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     await I.checkPlayerClosed();
     I.waitForText('Email', normalTimeout);
     I.see('Password');
-    I.click('div[aria-label=Close]');
+    I.click('div[aria-label="Close panel"]');
 
     I.click('Trailer');
     await I.waitForPlayerPlaying(`${constants.elephantsDreamTitle} - Trailer`);
diff --git a/platforms/web/test-e2e/utils/steps_file.ts b/platforms/web/test-e2e/utils/steps_file.ts
index 170c2149c..e7fe0ae68 100644
--- a/platforms/web/test-e2e/utils/steps_file.ts
+++ b/platforms/web/test-e2e/utils/steps_file.ts
@@ -284,7 +284,7 @@ const stepsObj = {
     this.click('div[aria-label="Open user menu"]');
   },
   clickCloseButton: function (this: CodeceptJS.I) {
-    this.click('div[aria-label="Close"]');
+    this.click('div[aria-label="Close panel"]');
   },
   seeAll: function (this: CodeceptJS.I, allStrings: string[]) {
     allStrings.forEach((s) => this.see(s));
@@ -454,8 +454,8 @@ const stepsObj = {
     const imgSrc = await this.grabAttributeFrom(imageLocator, 'src');
     assert.equal(imgSrc, src, "img element src attribute doesn't match");
   },
-  seeEpgChannelLogoImage: async function (this: CodeceptJS.I, channelId: string, src: string) {
-    const imageLocator = locate({ css: `div[data-testid="${channelId}"] img[alt="Logo"]` });
+  seeEpgChannelLogoImage: async function (this: CodeceptJS.I, channelId: string, src: string, alt: string) {
+    const imageLocator = locate({ css: `div[data-testid="${channelId}"] img[alt="${alt}"]` });
     const imgSrc = await this.grabAttributeFrom(imageLocator, 'src');
     assert.equal(imgSrc, src, "img element src attribute doesn't match");
   },
@@ -468,6 +468,7 @@ const stepsObj = {
   ) {
     const cardLocator = `//a[@data-testid="${name}"]`;
     const shelfLocator = shelf ? makeShelfXpath(shelf) : undefined;
+    const gridCellLocator = locate(cardLocator).inside('//div[@role="gridcell"]');
 
     this.scrollPageToTop();
     this.wait(1);
@@ -487,11 +488,12 @@ const stepsObj = {
     const isMobile = await this.isMobile();
     // Easy way to limit to 10 swipes
     for (let i = 0; i < 10; i++) {
-      const [isElementVisible, tabindex] = await within(shelfLocator || 'body', async () => {
+      const [isWithinGridCell, isElementVisible, tabindex] = await within(shelfLocator || 'body', async () => {
+        const isWithinGridCell = (await this.grabNumberOfVisibleElements(gridCellLocator)) >= 1;
         const isElementVisible = (await this.grabNumberOfVisibleElements(cardLocator)) >= 1;
         const tabindex = isElementVisible ? Number(await this.grabAttributeFrom(cardLocator, 'tabindex')) : -1;
 
-        return [isElementVisible, tabindex];
+        return [isWithinGridCell, isElementVisible, tabindex];
       });
 
       // If the item isn't virtualized yet, throw an error (we need more information)
@@ -499,6 +501,11 @@ const stepsObj = {
         throw `Can't find item with locator: "${cardLocator}". Try specifying which shelf to look in.`;
       }
 
+      // CardGrid component uses keyboard or regular mouse (click) navigation
+      if (isWithinGridCell) {
+        break;
+      }
+
       if (tabindex >= 0) {
         break;
       }
diff --git a/platforms/web/vite.config.ts b/platforms/web/vite.config.ts
index c39dd9dc7..8ff7fdb75 100644
--- a/platforms/web/vite.config.ts
+++ b/platforms/web/vite.config.ts
@@ -1,6 +1,6 @@
 import path from 'path';
 
-import { defineConfig, HtmlTagDescriptor } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import type { ConfigEnv, UserConfigExport } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 import eslintPlugin from 'vite-plugin-eslint';
@@ -8,93 +8,43 @@ import StylelintPlugin from 'vite-plugin-stylelint';
 import { VitePWA } from 'vite-plugin-pwa';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import svgr from 'vite-plugin-svgr';
-import { viteStaticCopy, type Target } from 'vite-plugin-static-copy';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
 
-import { initSettings } from './scripts/build-tools/settings';
+import { extractExternalFonts, getFileCopyTargets, getGoogleFontTags, getGoogleVerificationTag, getGtmTags } from './scripts/build-tools/buildTools';
 
 export default ({ mode, command }: ConfigEnv): UserConfigExport => {
+  const envPrefix = 'APP_';
+  const env = loadEnv(mode, process.cwd(), envPrefix);
+
   // Shorten default mode names to dev / prod
   // Also differentiates from build type (production / development)
   mode = mode === 'development' ? 'dev' : mode;
   mode = mode === 'production' ? 'prod' : mode;
 
-  const localFile = initSettings(mode);
-
-  const app: OTTConfig = {
-    name: process.env.APP_NAME || 'JW OTT Webapp',
-    shortname: process.env.APP_SHORT_NAME || 'JW OTT',
-    description: process.env.APP_DESCRIPTION || 'JW OTT Webapp is an open-source, dynamically generated video website.',
-  };
-
   // Make sure to builds are always production type,
   // otherwise modes other than 'production' get built in dev
   if (command === 'build') {
     process.env.NODE_ENV = 'production';
   }
 
-  const getGoogleScripts = () => {
-    const tags: HtmlTagDescriptor[] = [];
-
-    if (process.env.APP_GOOGLE_SITE_VERIFICATION_ID) {
-      tags.push({
-        tag: 'meta',
-        injectTo: 'head',
-        attrs: {
-          content: process.env.APP_GOOGLE_SITE_VERIFICATION_ID,
-          name: 'google-site-verification',
-        },
-      });
-    }
-    if (process.env.APP_GTM_TAG_ID) {
-      tags.push(
-        {
-          injectTo: 'head',
-          tag: 'script',
-          children: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-          })(window,document,'script','dataLayer','${process.env.APP_GTM_TAG_ID}');`,
-        },
-        {
-          injectTo: 'body-prepend',
-          tag: 'noscript',
-          children: `<iframe src="https://www.googletagmanager.com/ns.html?id=${process.env.APP_GTM_TAG_ID}"
-          height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
-        },
-      );
-    }
-
-    return tags;
+  const app: OTTConfig = {
+    name: process.env.APP_NAME || 'JW OTT Webapp',
+    shortname: process.env.APP_SHORT_NAME || 'JW OTT',
+    description: process.env.APP_DESCRIPTION || 'JW OTT Webapp is an open-source, dynamically generated video website.',
   };
-  const fileCopyTargets: Target[] = [
-    {
-      src: localFile,
-      dest: '',
-      rename: '.webapp.ini',
-    },
-  ];
 
-  // These files are only needed in dev / test / demo, so don't include in prod builds
-  if (mode !== 'prod') {
-    fileCopyTargets.push({
-      src: '../../packages/testing/epg/*',
-      dest: 'epg',
-    });
-  }
+  const bodyFonts = extractExternalFonts(env.APP_BODY_FONT_FAMILY);
+  const bodyAltFonts = extractExternalFonts(env.APP_BODY_ALT_FONT_FAMILY);
+
+  const fontTags = getGoogleFontTags([bodyFonts, bodyAltFonts].flat());
+  const bodyFontsString = bodyFonts.map((font) => font.fontFamily).join(', ');
+  const bodyAltFontsString = bodyAltFonts.map((font) => font.fontFamily).join(', ');
 
   return defineConfig({
     plugins: [
       react({
         // This is needed to do decorator transforms for ioc resolution to work for classes
-        babel: {
-          plugins: [
-            // Seems like this one isn't needed anymore, but leaving in case we run into a bug later
-            // 'babel-plugin-parameter-decorator',
-            'babel-plugin-transform-typescript-metadata',
-            ['@babel/plugin-proposal-decorators', { legacy: true }],
-          ],
-        },
+        babel: { plugins: ['babel-plugin-transform-typescript-metadata', ['@babel/plugin-proposal-decorators', { legacy: true }]] },
       }),
       eslintPlugin({ emitError: mode === 'production' || mode === 'demo' || mode === 'preview' }), // Move linting to pre-build to match dashboard
       StylelintPlugin(),
@@ -129,21 +79,21 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
       createHtmlPlugin({
         minify: true,
         inject: {
-          tags: getGoogleScripts(),
+          tags: [getGoogleVerificationTag(env), fontTags, getGtmTags(env)].flat(),
           data: app,
         },
       }),
-      viteStaticCopy({
-        targets: fileCopyTargets,
-      }),
+      viteStaticCopy({ targets: getFileCopyTargets(mode) }),
     ],
     define: {
       'import.meta.env.APP_VERSION': JSON.stringify(process.env.npm_package_version),
       __mode__: JSON.stringify(mode),
       __dev__: process.env.NODE_ENV !== 'production',
+      'import.meta.env.APP_BODY_FONT': JSON.stringify(bodyFontsString),
+      'import.meta.env.APP_BODY_ALT_FONT': JSON.stringify(bodyAltFontsString),
     },
     publicDir: './public',
-    envPrefix: 'APP_',
+    envPrefix,
     server: {
       port: 8080,
     },

From 8a5ad8644ecfc0355aef9c150c68b43d2c9d0bd7 Mon Sep 17 00:00:00 2001
From: langemike <mikevv@gmail.com>
Date: Mon, 5 Feb 2024 15:30:21 +0100
Subject: [PATCH 043/128]  fix(project): create missing pwa icons

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>
---
 platforms/web/public/images/icons/pwa-192x192.png | Bin 0 -> 818 bytes
 platforms/web/pwa-assets.config.ts                |   2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 platforms/web/public/images/icons/pwa-192x192.png

diff --git a/platforms/web/public/images/icons/pwa-192x192.png b/platforms/web/public/images/icons/pwa-192x192.png
new file mode 100644
index 0000000000000000000000000000000000000000..494454ff90455a4c75667f3a6d2543c294e1f182
GIT binary patch
literal 818
zcmeAS@N?(olHy`uVBq!ia0vp^2SAvE8Azrw%`pX1asfUeu0Z<#|Nnpf{CW8Bp{S^6
zaB%R76)PGV8nUvo4jecz{paH{pbE|ckH}&M2Idza%(%5WD4T(SX_u#qV@SoVw{zYW
zJyzghIBdS>Keze8vZBjN%8v#q&A9!w<kn06GqX67EngHd0u4b17gVp^F*|fSlYOV#
z+IQ*i-~D)R!5g>r`P}nbTvzke3;y1yx8;-lm-GJKtFL=P@BM!?W!<Nhg@vvQ|F5^V
z%1^gmeMMpCV#Vgy`(2%cj^@8$x;{Vb)zpy5a$gH=f^Vfgh!tS{aPR*FJNxqGj~{t5
z?Yw*I!#dZ=yZvvR*UL!y{h~di<o})L{TkefHzl%s8a;0`^oKD8O0g`xFLV27&oyfW
z(GwgB4Gc_BVndt5s@2>p)EInN*7-YR<~F`APU!RQZwU9+k>>oeWr2QSV&l360%zNp
zY(<V-%+Y*cvgl^mfs>0ZrMWv6-;7J>ezt3q1Apsg;Y%V+lQ=Vl8b4pO={;~WW1a_4
zYSSi%`kR&#XD4&^xPQ)JI()kOCkvbU5=quy3Rg;5kJ&k2=In9%ShD%T3mdEH2RchL
zXL~%j5|t#^IC=HXNS3NM$5`ig%5SVTvNvo!ko#(7cbe)E|F6%OF74^s*kH3cb<WJm
z&&7O;7yBvh&Q`xLowxAjn=RK~GfFd_E%ymiUhr+&`7{=h`<tUUe(d_z{Z8WNx+9Yv
zoER8c1RTJ`ga4u&Wzr9u3Y_z9Zc|dzZd9?Y7tB`=y?Jidk=vc!y$<&#r+DsBjD0(M
zNAgvLK9%?>c`x>|7In%mYkB;NHL<GNzvNf>^e+`!Sp{>fPIpULJhuzJcEJ9><{XyW
z-^KO(qO=~x-?jIux$}Se(&|-fUsYLDve<lMzVY?Gdh0ENFs``8|Mxl^&G%Z(q4nv{
zokc<OcCgJB<fy8A6yp8QI??2YbKdWdvw{}8@^;^MUw-iy7bD9(4TEi~5?HpdvQ59e
mFD`90o5cxM<b(%gi#_4qo2YT}tMs(*AQ?|rKbLh*2~7Y!y>3eY

literal 0
HcmV?d00001

diff --git a/platforms/web/pwa-assets.config.ts b/platforms/web/pwa-assets.config.ts
index cfc70ce93..2c2180c12 100644
--- a/platforms/web/pwa-assets.config.ts
+++ b/platforms/web/pwa-assets.config.ts
@@ -2,7 +2,7 @@ import { defineConfig, defaultAssetName, type Preset, type AssetType, type Resol
 
 export const ottPresetNoPadding: Preset = {
   transparent: {
-    sizes: [196, 160, 144, 96, 64, 32],
+    sizes: [196, 192, 160, 144, 96, 64, 32, 16],
     favicons: [[48, 'favicon.ico']],
     padding: 0,
   },

From 6444282c6c2adedb93980904ba968c8d5bf2680d Mon Sep 17 00:00:00 2001
From: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com>
Date: Mon, 5 Feb 2024 16:18:13 +0100
Subject: [PATCH 044/128] feat(a11y): update font colors for contrast and
 adjust active state in header (#76)

---
 packages/ui-react/src/components/Button/Button.tsx        | 3 +++
 .../components/Button/__snapshots__/Button.test.tsx.snap  | 2 +-
 .../ui-react/src/components/Header/Header.module.scss     | 2 +-
 .../Sidebar/__snapshots__/Sidebar.test.tsx.snap           | 4 ++--
 .../ui-react/src/components/UserMenu/UserMenu.module.scss | 3 ++-
 .../ui-react/src/containers/Layout/Layout.module.scss     | 7 +++++++
 packages/ui-react/src/containers/Layout/Layout.tsx        | 4 ++--
 .../containers/Layout/__snapshots__/Layout.test.tsx.snap  | 2 +-
 .../src/pages/User/__snapshots__/User.test.tsx.snap       | 6 +++---
 packages/ui-react/src/styles/_theme.scss                  | 8 ++++----
 platforms/web/test-e2e/tests/register_test.ts             | 2 +-
 platforms/web/test-e2e/utils/login.ts                     | 2 +-
 12 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/packages/ui-react/src/components/Button/Button.tsx b/packages/ui-react/src/components/Button/Button.tsx
index 842e92934..32067f2d8 100644
--- a/packages/ui-react/src/components/Button/Button.tsx
+++ b/packages/ui-react/src/components/Button/Button.tsx
@@ -29,6 +29,7 @@ type Props = {
   busy?: boolean;
   id?: string;
   as?: 'button' | 'a';
+  activeClassname?: string;
 } & React.AriaAttributes;
 
 const Button: React.FC<Props> = ({
@@ -47,11 +48,13 @@ const Button: React.FC<Props> = ({
   as = 'button',
   onClick,
   className,
+  activeClassname = '',
   ...rest
 }: Props) => {
   const buttonClassName = (isActive: boolean) =>
     classNames(styles.button, className, styles[color], styles[variant], {
       [styles.active]: isActive,
+      [activeClassname]: isActive,
       [styles.fullWidth]: fullWidth,
       [styles.large]: size === 'large',
       [styles.small]: size === 'small',
diff --git a/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap
index aa5e13b5a..3f70eab55 100644
--- a/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Button> > renders and matches snapshot 1`] = `
 <div>
   <button
-    class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
+    class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296 "
     type="button"
   >
     <span>
diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
index a21a924cb..4c2865d1a 100644
--- a/packages/ui-react/src/components/Header/Header.module.scss
+++ b/packages/ui-react/src/components/Header/Header.module.scss
@@ -81,7 +81,7 @@
     height: 36px;
     min-height: 36px;
     margin: 0 6px;
-    padding: 0 calc(#{variables.$base-spacing} / 2);
+    padding: calc(#{variables.$header-height} / 2.5) calc(#{variables.$base-spacing} / 2);
     font-weight: var(--body-font-weight-bold);
     font-size: 18px;
   }
diff --git a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
index 33b7ab28a..f80e0d91b 100644
--- a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
+++ b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`<SideBar /> > renders sideBar closed 1`] = `
     >
       <a
         aria-current="page"
-        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296 "
         href="/"
       >
         <span>
@@ -91,7 +91,7 @@ exports[`<SideBar /> > renders sideBar opened 1`] = `
     >
       <a
         aria-current="page"
-        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296 "
         href="/"
       >
         <span>
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.module.scss b/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
index 6cd8c3bf4..a44762fe5 100644
--- a/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
+++ b/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
@@ -32,10 +32,11 @@
 .sectionHeader {
   width: 100%;
   padding: 0 0 12px 24px;
-  color: variables.$slate-gray;
+  color: variables.$white;
   font-weight: 700;
   font-size: 12px;
   text-transform: uppercase;
+  opacity: 0.7;
 }
 
 .profileButton {
diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss
index 365676e93..ed88ccf92 100644
--- a/packages/ui-react/src/containers/Layout/Layout.module.scss
+++ b/packages/ui-react/src/containers/Layout/Layout.module.scss
@@ -50,3 +50,10 @@ div.testFixMargin {
 .main {
   height: 100%;
 }
+
+.headerButton {
+  &:not(:focus) {
+    border-bottom: 2px variables.$white solid;
+    border-radius: 0;
+  }
+}
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index 17ddd5e69..de70e0042 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -191,9 +191,9 @@ const Layout = () => {
             isSelectingProfile: selectProfile.isLoading,
           }}
         >
-          <Button label={t('home')} to="/" variant="text" />
+          <Button activeClassname={styles.headerButton} label={t('home')} to="/" variant="text" />
           {menu.map((item) => (
-            <Button key={item.contentId} label={item.label} to={playlistURL(item.contentId)} variant="text" />
+            <Button activeClassname={styles.headerButton} key={item.contentId} label={item.label} to={playlistURL(item.contentId)} variant="text" />
           ))}
         </Header>
         <main id="content" className={styles.main} tabIndex={-1}>
diff --git a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
index 5f3784dc7..d13b82d60 100644
--- a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`<Layout /> > renders layout 1`] = `
           >
             <a
               aria-current="page"
-              class="_button_f8f296 _default_f8f296 _text_f8f296 _active_f8f296"
+              class="_button_f8f296 _default_f8f296 _text_f8f296 _active_f8f296 _headerButton_c71437"
               href="/"
             >
               <span>
diff --git a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
index 94a72fb1c..e33c3b9df 100644
--- a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
+++ b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`User Component tests > Account Page 1`] = `
           <li>
             <a
               aria-current="page"
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296"
+              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296 "
               href="/u/my-account"
             >
               <div
@@ -317,7 +317,7 @@ exports[`User Component tests > Favorites Page 1`] = `
           <li>
             <a
               aria-current="page"
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296"
+              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296 "
               href="/u/favorites"
             >
               <div
@@ -596,7 +596,7 @@ exports[`User Component tests > Payments Page 1`] = `
           <li>
             <a
               aria-current="page"
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296"
+              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296 "
               href="/u/payments"
             >
               <div
diff --git a/packages/ui-react/src/styles/_theme.scss b/packages/ui-react/src/styles/_theme.scss
index c27957667..9b72fae6c 100644
--- a/packages/ui-react/src/styles/_theme.scss
+++ b/packages/ui-react/src/styles/_theme.scss
@@ -59,8 +59,8 @@ $card-loading-bg-color: $secondary-color !default;
 
 // FormFeedback
 
-$form-feedback-error-bg-color: #ff0c3e !default;
-$form-feedback-error-color: variables.$white !default;
+$form-feedback-error-bg-color: #FF3535 !default;
+$form-feedback-error-color: variables.$black !default;
 $form-feedback-warning-bg-color: variables.$orange !default;
 $form-feedback-warning-color: variables.$white !default;
 $form-feedback-success-bg-color: variables.$green !default;
@@ -86,13 +86,13 @@ $text-field-hover-bg-color: rgba(variables.$white, 0.08) !default;
 $text-field-active-color: variables.$white !default;
 $text-field-active-border-color: variables.$white !default;
 $text-field-placeholder-color: rgba(variables.$white, 0.7) !default;
-$text-field-error-color: #ff0c3e !default;
+$text-field-error-color: #FF3535 !default;
 
 // Input
 
 $input-resting-border-color: rgba(variables.$white, 0.34) !default;
 $input-hover-border-color: rgba(variables.$white, 0.7) !default;
-$input-field-error-color: #ff0c3e !default;
+$input-field-error-color: #FF3535 !default;
 
 // Toggle
 
diff --git a/platforms/web/test-e2e/tests/register_test.ts b/platforms/web/test-e2e/tests/register_test.ts
index 3199ef619..db1817960 100644
--- a/platforms/web/test-e2e/tests/register_test.ts
+++ b/platforms/web/test-e2e/tests/register_test.ts
@@ -124,7 +124,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
       return;
     }
 
-    I.seeCssPropertiesOnElements('input[name="terms"]', { 'border-color': '#ff0c3e' });
+    I.seeCssPropertiesOnElements('input[name="terms"]', { 'border-color': '#FF3535' });
   });
 
   Scenario(`I get warned for duplicate users - ${providerName}`, async ({ I }) => {
diff --git a/platforms/web/test-e2e/utils/login.ts b/platforms/web/test-e2e/utils/login.ts
index 0f5985710..016d40a15 100644
--- a/platforms/web/test-e2e/utils/login.ts
+++ b/platforms/web/test-e2e/utils/login.ts
@@ -28,7 +28,7 @@ export function checkField(I: CodeceptJS.I, field, error: string | boolean = fal
   // If error === true, there's an error, but no associated message
   if (error && error !== true) {
     I.see(error, `[data-testid=login-${field}-input]`);
-    I.seeCssPropertiesOnElements(`[data-testid="login-${field}-input"] [class*=helperText]`, { color: '#ff0c3e' });
+    I.seeCssPropertiesOnElements(`[data-testid="login-${field}-input"] [class*=helperText]`, { color: '#FF3535' });
   } else {
     I.dontSeeElement(`[class*=helperText] [data-testid="${field}-input"]`);
   }

From b3ccaffe4ea1249d7ad5a80cfe6e8e20a94ef3b7 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 5 Feb 2024 16:24:12 +0100
Subject: [PATCH 045/128] fix(a11y): prevent duplicate global a11y selectors

---
 .../components/Account/Account.module.scss    |  2 -
 .../src/components/Account/Account.tsx        |  2 +-
 .../__snapshots__/Account.test.tsx.snap       |  2 +-
 .../FormFeedback/FormFeedback.module.scss     | 11 ---
 .../components/FormFeedback/FormFeedback.tsx  |  2 +-
 .../User/__snapshots__/User.test.tsx.snap     |  2 +-
 .../ui-react/src/styles/accessibility.scss    | 71 ++++++++++---------
 platforms/web/src/styles/main.scss            |  4 +-
 8 files changed, 44 insertions(+), 52 deletions(-)

diff --git a/packages/ui-react/src/components/Account/Account.module.scss b/packages/ui-react/src/components/Account/Account.module.scss
index 0be33221b..2dedd6b99 100644
--- a/packages/ui-react/src/components/Account/Account.module.scss
+++ b/packages/ui-react/src/components/Account/Account.module.scss
@@ -1,5 +1,3 @@
-@use '@jwp/ott-ui-react/src/styles/accessibility';
-
 .textWithButtonContainer {
   display: flex;
   flex-direction: column;
diff --git a/packages/ui-react/src/components/Account/Account.tsx b/packages/ui-react/src/components/Account/Account.tsx
index 71c4c2c2f..a6f633bbc 100644
--- a/packages/ui-react/src/components/Account/Account.tsx
+++ b/packages/ui-react/src/components/Account/Account.tsx
@@ -207,7 +207,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
 
   return (
     <>
-      <h1 className={styles.hideUntilFocus}>{t('nav.account')}</h1>
+      <h1 className="hideUntilFocus">{t('nav.account')}</h1>
 
       <Form initialValues={initialValues}>
         {[
diff --git a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
index 6578f12f2..b4b8a4e61 100644
--- a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
+++ b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Account> > renders and matches snapshot 1`] = `
 <div>
   <h1
-    class="_hideUntilFocus_c968f7"
+    class="hideUntilFocus"
   >
     nav.account
   </h1>
diff --git a/packages/ui-react/src/components/FormFeedback/FormFeedback.module.scss b/packages/ui-react/src/components/FormFeedback/FormFeedback.module.scss
index e0c37c571..76b26bb9f 100644
--- a/packages/ui-react/src/components/FormFeedback/FormFeedback.module.scss
+++ b/packages/ui-react/src/components/FormFeedback/FormFeedback.module.scss
@@ -31,14 +31,3 @@
   color: theme.$form-feedback-success-color;
   background-color: theme.$form-feedback-success-bg-color;
 }
-
-.hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-}
diff --git a/packages/ui-react/src/components/FormFeedback/FormFeedback.tsx b/packages/ui-react/src/components/FormFeedback/FormFeedback.tsx
index 8d0c4d945..757116e51 100644
--- a/packages/ui-react/src/components/FormFeedback/FormFeedback.tsx
+++ b/packages/ui-react/src/components/FormFeedback/FormFeedback.tsx
@@ -22,7 +22,7 @@ const FormFeedback: React.FC<Props> = ({ children, variant = 'error', visible =
     [styles.warning]: variant === 'warning',
     [styles.success]: variant === 'success',
     [styles.info]: variant === 'info',
-    [styles.hidden]: !visible,
+    hidden: !visible,
   });
 
   const ariaLive = variantAriaMap[variant];
diff --git a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
index e33c3b9df..d1fd7a5d5 100644
--- a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
+++ b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
@@ -94,7 +94,7 @@ exports[`User Component tests > Account Page 1`] = `
       class="_mainColumn_e9c5ca"
     >
       <h1
-        class="_hideUntilFocus_c968f7"
+        class="hideUntilFocus"
       >
         nav.account
       </h1>
diff --git a/packages/ui-react/src/styles/accessibility.scss b/packages/ui-react/src/styles/accessibility.scss
index 10e8f0577..52760bbf6 100644
--- a/packages/ui-react/src/styles/accessibility.scss
+++ b/packages/ui-react/src/styles/accessibility.scss
@@ -22,49 +22,52 @@ $focus-box-shadow: 0 0 1px 5px var(--highlight-color, variables.$white),
   }
 }
 
-.hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-}
-
-.hideUntilFocus {
-  position: absolute;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-
-  &:focus {
-    position: static;
-    height: auto;
-    overflow: visible;
-    clip: auto;
-  }
-}
-
 @mixin accessibleOutline {
   outline: 2px solid var(--highlight-color, #fff);
   box-shadow: 0 0 2px 3px var(--highlight-contrast-color, #000);
 }
+
 @mixin accessibleOutlineContrast {
   outline: 2px solid var(--highlight-contrast-color, #fff);
   box-shadow: 0 0 2px 3px var(--highlight-color, #000);
 }
 
-/* Clearly visible focus rectangle (WCAG guidelines). */
-@media (hover: hover) and (pointer: fine) {
-  a,
-  [role='button'],
-  button,
-  input {
+@mixin globalClassNames {
+  /* Clearly visible focus rectangle (WCAG guidelines). */
+  @media (hover: hover) and (pointer: fine) {
+    a,
+    [role='button'],
+    button,
+    input {
+      &:focus {
+        @include accessibleOutline;
+      }
+    }
+  }
+
+  .hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+  }
+
+  .hideUntilFocus {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+
     &:focus {
-      @include accessibleOutline;
+      position: static;
+      height: auto;
+      overflow: visible;
+      clip: auto;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/platforms/web/src/styles/main.scss b/platforms/web/src/styles/main.scss
index 7763448e6..d1c89e698 100644
--- a/platforms/web/src/styles/main.scss
+++ b/platforms/web/src/styles/main.scss
@@ -18,6 +18,8 @@
   --card-tag-bg: #{theme.$card-tag-bg};
 }
 
+@include accessibility.globalClassNames;
+
 body {
   margin: 0;
   padding: 0;
@@ -78,4 +80,4 @@ h6 {
 
 input {
   font-family: var(--body-font-family);
-}
\ No newline at end of file
+}

From 91dc66cd6b6bdbae3b48c0454fe1da335acc9f91 Mon Sep 17 00:00:00 2001
From: langemike <mikevv@gmail.com>
Date: Mon, 5 Feb 2024 16:35:31 +0100
Subject: [PATCH 046/128] fix(a11y): shelf item navigation with screen reader

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>
---
 .../src/components/Shelf/Shelf.module.scss    |   5 +-
 .../ui-react/src/components/Shelf/Shelf.tsx   |   2 +-
 .../Shelf/__snapshots__/Shelf.test.tsx.snap   |  18 ++
 .../src/components/TileDock/TileDock.tsx      |   3 +
 .../src/containers/ShelfList/ShelfList.tsx    |  37 ++-
 .../Home/__snapshots__/Home.test.tsx.snap     | 289 +++++++++---------
 6 files changed, 185 insertions(+), 169 deletions(-)

diff --git a/packages/ui-react/src/components/Shelf/Shelf.module.scss b/packages/ui-react/src/components/Shelf/Shelf.module.scss
index 0d9ba318e..f802ec4b2 100644
--- a/packages/ui-react/src/components/Shelf/Shelf.module.scss
+++ b/packages/ui-react/src/components/Shelf/Shelf.module.scss
@@ -32,12 +32,11 @@
   padding: 12px 0;
   outline-color: var(--highlight-color, white);
   cursor: pointer;
-  opacity: 0;
   transition: transform 0.3s ease-out, opacity 0.3s ease-out;
 
   > svg {
-    width: 30px;
-    height: 30px;
+    // Use scale because width and height properties causes layout shifting issues on screen readers
+    transform: scale(1.1);
   }
   &.disabled {
     cursor: default;
diff --git a/packages/ui-react/src/components/Shelf/Shelf.tsx b/packages/ui-react/src/components/Shelf/Shelf.tsx
index fd143edc0..9d0ae6c08 100644
--- a/packages/ui-react/src/components/Shelf/Shelf.tsx
+++ b/packages/ui-react/src/components/Shelf/Shelf.tsx
@@ -146,7 +146,7 @@ const Shelf = ({
         tilesToShow={tilesToShow}
         wrapWithEmptyTiles={featured && playlist.playlist.length === 1}
         cycleMode={'restart'}
-        showControls={!matchMedia('(hover: none)').matches && !loading}
+        showControls={!loading}
         showDots={featured}
         transitionTime={'0.3s'}
         spacing={8}
diff --git a/packages/ui-react/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap b/packages/ui-react/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap
index 2861231c8..fa7bf230d 100644
--- a/packages/ui-react/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap
+++ b/packages/ui-react/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap
@@ -34,6 +34,8 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
       >
         <li
           aria-hidden="true"
+          aria-posinset="3"
+          aria-setsize="4"
           class="_notInView_22abb0"
           style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
         >
@@ -59,6 +61,8 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
         </li>
         <li
           aria-hidden="true"
+          aria-posinset="4"
+          aria-setsize="4"
           class="_notInView_22abb0"
           style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
         >
@@ -84,6 +88,8 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
         </li>
         <li
           aria-hidden="false"
+          aria-posinset="1"
+          aria-setsize="4"
           class=""
           style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
         >
@@ -120,6 +126,8 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
         </li>
         <li
           aria-hidden="true"
+          aria-posinset="2"
+          aria-setsize="4"
           class="_notInView_22abb0"
           style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
         >
@@ -145,6 +153,8 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
         </li>
         <li
           aria-hidden="true"
+          aria-posinset="3"
+          aria-setsize="4"
           class="_notInView_22abb0"
           style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
         >
@@ -230,6 +240,8 @@ exports[`Shelf Component tests > Regular shelf 1`] = `
       >
         <li
           aria-hidden="false"
+          aria-posinset="1"
+          aria-setsize="4"
           class=""
           style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
         >
@@ -270,6 +282,8 @@ exports[`Shelf Component tests > Regular shelf 1`] = `
         </li>
         <li
           aria-hidden="false"
+          aria-posinset="2"
+          aria-setsize="4"
           class=""
           style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
         >
@@ -310,6 +324,8 @@ exports[`Shelf Component tests > Regular shelf 1`] = `
         </li>
         <li
           aria-hidden="false"
+          aria-posinset="3"
+          aria-setsize="4"
           class=""
           style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
         >
@@ -350,6 +366,8 @@ exports[`Shelf Component tests > Regular shelf 1`] = `
         </li>
         <li
           aria-hidden="false"
+          aria-posinset="4"
+          aria-setsize="4"
           class=""
           style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
         >
diff --git a/packages/ui-react/src/components/TileDock/TileDock.tsx b/packages/ui-react/src/components/TileDock/TileDock.tsx
index f2b7df218..328f17533 100644
--- a/packages/ui-react/src/components/TileDock/TileDock.tsx
+++ b/packages/ui-react/src/components/TileDock/TileDock.tsx
@@ -263,11 +263,14 @@ function TileDock<T>({
             />
           ) : null}
           {tileList.map((tile: Tile<T>, listIndex) => {
+            const posInSet = items.findIndex((item) => item === tile.item); // TODO optimize this for performances
             const isInView = !isMultiPage || (listIndex > tilesToShow - slideOffset && listIndex < tilesToShow * 2 + 1 - slideOffset);
 
             return (
               <li
                 key={tile.key}
+                aria-setsize={items.length}
+                aria-posinset={posInSet + 1}
                 aria-hidden={!isInView}
                 className={classNames({ [styles.notInView]: !isInView })}
                 style={{
diff --git a/packages/ui-react/src/containers/ShelfList/ShelfList.tsx b/packages/ui-react/src/containers/ShelfList/ShelfList.tsx
index e4d3f822d..ec67216bd 100644
--- a/packages/ui-react/src/containers/ShelfList/ShelfList.tsx
+++ b/packages/ui-react/src/containers/ShelfList/ShelfList.tsx
@@ -58,7 +58,6 @@ const ShelfList = ({ rows }: Props) => {
         style={{ overflow: 'hidden' }}
         loadMore={() => setRowsToLoad((current) => current + ROWS_TO_LOAD_STEP)}
         hasMore={rowsToLoad < rows.length}
-        role="grid"
         loader={<InfiniteScrollLoader key="loader" />}
       >
         {rows.slice(0, rowsToLoad).map(({ type, featured, title }, index) => {
@@ -70,29 +69,27 @@ const ShelfList = ({ rows }: Props) => {
           const visibleTilesDelta = parseTilesDelta(posterAspect);
 
           return (
-            <div
+            <section
               key={`${index}_${playlist.id}`}
-              role="row"
               className={classNames(styles.shelfContainer, { [styles.featured]: featured })}
               data-testid={testId(`shelf-${featured ? 'featured' : type === 'playlist' ? slugify(title || playlist?.title) : type}`)}
+              aria-label={title || playlist?.title}
             >
-              <div role="cell">
-                <Shelf
-                  loading={isLoading}
-                  error={error}
-                  type={type}
-                  playlist={playlist}
-                  watchHistory={type === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
-                  title={title || playlist?.title}
-                  featured={featured}
-                  accessModel={accessModel}
-                  isLoggedIn={!!user}
-                  hasSubscription={!!subscription}
-                  posterAspect={posterAspect}
-                  visibleTilesDelta={visibleTilesDelta}
-                />
-              </div>
-            </div>
+              <Shelf
+                loading={isLoading}
+                error={error}
+                type={type}
+                playlist={playlist}
+                watchHistory={type === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
+                title={title || playlist?.title}
+                featured={featured}
+                accessModel={accessModel}
+                isLoggedIn={!!user}
+                hasSubscription={!!subscription}
+                posterAspect={posterAspect}
+                visibleTilesDelta={visibleTilesDelta}
+              />
+            </section>
           );
         })}
       </InfiniteScroll>
diff --git a/packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap b/packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap
index b2590a3f2..4bdf0665d 100644
--- a/packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap
+++ b/packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap
@@ -11,223 +11,222 @@ exports[`Home Component tests > Home test 1`] = `
     class="_shelfList_a0651b"
   >
     <div
-      role="grid"
       style="overflow: hidden;"
     >
-      <div
+      <section
+        aria-label="This is a playlist"
         class="_shelfContainer_a0651b"
         data-testid="shelf-this-is-a-playlist"
-        role="row"
       >
         <div
-          role="cell"
+          class="_shelf_81910b"
         >
+          <h2
+            class="_title_81910b"
+          >
+            This is a playlist
+          </h2>
           <div
-            class="_shelf_81910b"
+            class="_tileDock_22abb0"
           >
-            <h2
-              class="_title_81910b"
-            >
-              This is a playlist
-            </h2>
-            <div
-              class="_tileDock_22abb0"
+            <ul
+              style="transform: translate3d(0%, 0, 0); margin-left: -4px; margin-right: -4px;"
             >
-              <ul
-                style="transform: translate3d(0%, 0, 0); margin-left: -4px; margin-right: -4px;"
+              <li
+                aria-hidden="false"
+                aria-posinset="1"
+                aria-setsize="2"
+                class=""
+                style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
               >
-                <li
-                  aria-hidden="false"
-                  class=""
-                  style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+                <a
+                  class="_card_d75732"
+                  data-testid="My video"
+                  href="/m/abcddabc/my-video"
+                  role="button"
+                  tabindex="0"
                 >
-                  <a
-                    class="_card_d75732"
-                    data-testid="My video"
-                    href="/m/abcddabc/my-video"
-                    role="button"
-                    tabindex="0"
+                  <div
+                    class="_titleContainer_d75732"
                   >
-                    <div
-                      class="_titleContainer_d75732"
+                    <h3
+                      class="_title_d75732"
                     >
-                      <h3
-                        class="_title_d75732"
-                      >
-                        My video
-                      </h3>
-                    </div>
+                      My video
+                    </h3>
+                  </div>
+                  <div
+                    class="_poster_d75732 _aspect169_d75732"
+                  >
                     <div
-                      class="_poster_d75732 _aspect169_d75732"
+                      class="_meta_d75732"
                     >
                       <div
-                        class="_meta_d75732"
+                        class="_tags_d75732"
                       >
                         <div
-                          class="_tags_d75732"
+                          class="_tag_d75732"
                         >
-                          <div
-                            class="_tag_d75732"
-                          >
-                            6 min
-                          </div>
+                          6 min
                         </div>
                       </div>
                     </div>
-                  </a>
-                </li>
-                <li
-                  aria-hidden="false"
-                  class=""
-                  style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+                  </div>
+                </a>
+              </li>
+              <li
+                aria-hidden="false"
+                aria-posinset="2"
+                aria-setsize="2"
+                class=""
+                style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+              >
+                <a
+                  class="_card_d75732"
+                  data-testid="Other Vids"
+                  href="/m/zzzaaazz/other-vids"
+                  role="button"
+                  tabindex="0"
                 >
-                  <a
-                    class="_card_d75732"
-                    data-testid="Other Vids"
-                    href="/m/zzzaaazz/other-vids"
-                    role="button"
-                    tabindex="0"
+                  <div
+                    class="_titleContainer_d75732"
                   >
-                    <div
-                      class="_titleContainer_d75732"
+                    <h3
+                      class="_title_d75732"
                     >
-                      <h3
-                        class="_title_d75732"
-                      >
-                        Other Vids
-                      </h3>
-                    </div>
+                      Other Vids
+                    </h3>
+                  </div>
+                  <div
+                    class="_poster_d75732 _aspect169_d75732"
+                  >
                     <div
-                      class="_poster_d75732 _aspect169_d75732"
+                      class="_meta_d75732"
                     >
                       <div
-                        class="_meta_d75732"
+                        class="_tags_d75732"
                       >
                         <div
-                          class="_tags_d75732"
+                          class="_tag_d75732"
                         >
-                          <div
-                            class="_tag_d75732"
-                          >
-                            6 min
-                          </div>
+                          6 min
                         </div>
                       </div>
                     </div>
-                  </a>
-                </li>
-              </ul>
-            </div>
+                  </div>
+                </a>
+              </li>
+            </ul>
           </div>
         </div>
-      </div>
-      <div
+      </section>
+      <section
+        aria-label="Second Playlist"
         class="_shelfContainer_a0651b"
         data-testid="shelf-second-playlist"
-        role="row"
       >
         <div
-          role="cell"
+          class="_shelf_81910b"
         >
+          <h2
+            class="_title_81910b"
+          >
+            Second Playlist
+          </h2>
           <div
-            class="_shelf_81910b"
+            class="_tileDock_22abb0"
           >
-            <h2
-              class="_title_81910b"
-            >
-              Second Playlist
-            </h2>
-            <div
-              class="_tileDock_22abb0"
+            <ul
+              style="transform: translate3d(0%, 0, 0); margin-left: -4px; margin-right: -4px;"
             >
-              <ul
-                style="transform: translate3d(0%, 0, 0); margin-left: -4px; margin-right: -4px;"
+              <li
+                aria-hidden="false"
+                aria-posinset="1"
+                aria-setsize="2"
+                class=""
+                style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
               >
-                <li
-                  aria-hidden="false"
-                  class=""
-                  style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+                <a
+                  class="_card_d75732"
+                  data-testid="My video"
+                  href="/m/abcddabc/my-video"
+                  role="button"
+                  tabindex="0"
                 >
-                  <a
-                    class="_card_d75732"
-                    data-testid="My video"
-                    href="/m/abcddabc/my-video"
-                    role="button"
-                    tabindex="0"
+                  <div
+                    class="_titleContainer_d75732"
                   >
-                    <div
-                      class="_titleContainer_d75732"
+                    <h3
+                      class="_title_d75732"
                     >
-                      <h3
-                        class="_title_d75732"
-                      >
-                        My video
-                      </h3>
-                    </div>
+                      My video
+                    </h3>
+                  </div>
+                  <div
+                    class="_poster_d75732 _aspect169_d75732"
+                  >
                     <div
-                      class="_poster_d75732 _aspect169_d75732"
+                      class="_meta_d75732"
                     >
                       <div
-                        class="_meta_d75732"
+                        class="_tags_d75732"
                       >
                         <div
-                          class="_tags_d75732"
+                          class="_tag_d75732"
                         >
-                          <div
-                            class="_tag_d75732"
-                          >
-                            6 min
-                          </div>
+                          6 min
                         </div>
                       </div>
                     </div>
-                  </a>
-                </li>
-                <li
-                  aria-hidden="false"
-                  class=""
-                  style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+                  </div>
+                </a>
+              </li>
+              <li
+                aria-hidden="false"
+                aria-posinset="2"
+                aria-setsize="2"
+                class=""
+                style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+              >
+                <a
+                  class="_card_d75732"
+                  data-testid="Other Vids"
+                  href="/m/zzzaaazz/other-vids"
+                  role="button"
+                  tabindex="0"
                 >
-                  <a
-                    class="_card_d75732"
-                    data-testid="Other Vids"
-                    href="/m/zzzaaazz/other-vids"
-                    role="button"
-                    tabindex="0"
+                  <div
+                    class="_titleContainer_d75732"
                   >
-                    <div
-                      class="_titleContainer_d75732"
+                    <h3
+                      class="_title_d75732"
                     >
-                      <h3
-                        class="_title_d75732"
-                      >
-                        Other Vids
-                      </h3>
-                    </div>
+                      Other Vids
+                    </h3>
+                  </div>
+                  <div
+                    class="_poster_d75732 _aspect169_d75732"
+                  >
                     <div
-                      class="_poster_d75732 _aspect169_d75732"
+                      class="_meta_d75732"
                     >
                       <div
-                        class="_meta_d75732"
+                        class="_tags_d75732"
                       >
                         <div
-                          class="_tags_d75732"
+                          class="_tag_d75732"
                         >
-                          <div
-                            class="_tag_d75732"
-                          >
-                            6 min
-                          </div>
+                          6 min
                         </div>
                       </div>
                     </div>
-                  </a>
-                </li>
-              </ul>
-            </div>
+                  </div>
+                </a>
+              </li>
+            </ul>
           </div>
         </div>
-      </div>
+      </section>
     </div>
   </div>
 </div>

From 92c267589cbbb2c057f66c01fc69c8887c2810b5 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 6 Feb 2024 17:23:50 +0100
Subject: [PATCH 047/128] chore: update snapshots

---
 .../components/Account/__snapshots__/Account.test.tsx.snap    | 4 +---
 .../ui-react/src/pages/User/__snapshots__/User.test.tsx.snap  | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
index b4b8a4e61..430ceeb81 100644
--- a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
+++ b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -24,9 +24,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       class="_flexBox_1c1c63"
       novalidate=""
     >
-      <h1
-        class="_hideUntilFocus_c968f7"
-      >
+      <h1>
         nav.account
       </h1>
       <div
diff --git a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
index d1fd7a5d5..97f041e3a 100644
--- a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
+++ b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
@@ -115,9 +115,7 @@ exports[`User Component tests > Account Page 1`] = `
           class="_flexBox_1c1c63"
           novalidate=""
         >
-          <h1
-            class="_hideUntilFocus_c968f7"
-          >
+          <h1>
             nav.account
           </h1>
           <div

From ddcfc91973548d6cdacc084dd6b88bb3453c6d36 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 5 Feb 2024 19:35:11 +0100
Subject: [PATCH 048/128] fix: language menu icon not centered

---
 packages/ui-react/src/components/Header/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
index ec8b79fa1..461af7254 100644
--- a/packages/ui-react/src/components/Header/Header.tsx
+++ b/packages/ui-react/src/components/Header/Header.tsx
@@ -182,7 +182,7 @@ const Header: React.FC<Props> = ({
 
     return (
       <LanguageMenu
-        className={styles.actionButton}
+        className={classNames(styles.iconButton, styles.actionButton)}
         openLanguageMenu={openLanguageMenu}
         closeLanguageMenu={closeLanguageMenu}
         languageMenuOpen={languageMenuOpen}

From 5fe1665ad30e08dd7eed234c93243da7df748cce Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 5 Feb 2024 19:43:37 +0100
Subject: [PATCH 049/128] fix(a11y): remove outline when user is not tabbing

---
 .../ui-react/src/styles/accessibility.scss    | 16 ++++++++++-----
 platforms/web/src/index.tsx                   |  4 ++++
 platforms/web/src/utils/accessibility.ts      | 20 +++++++++++++++++++
 3 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 platforms/web/src/utils/accessibility.ts

diff --git a/packages/ui-react/src/styles/accessibility.scss b/packages/ui-react/src/styles/accessibility.scss
index 52760bbf6..73b2c46a4 100644
--- a/packages/ui-react/src/styles/accessibility.scss
+++ b/packages/ui-react/src/styles/accessibility.scss
@@ -4,7 +4,7 @@
 // Instead, we apply styles to the focus state first, which solves the purpose, but unwantedly also for the active state
 // We fix this for non-Safari browsers afterwards by resetting to default and then re-applying using focus-visible
 $focus-box-shadow: 0 0 1px 5px var(--highlight-color, variables.$white),
-  0 0 12px 6px rgb(0 0 0 / 80%);
+0 0 12px 6px rgb(0 0 0 / 80%);
 
 @mixin focus-visible($value: $focus-box-shadow, $default-value: none) {
   @media (hover: hover) and (pointer: fine) {
@@ -12,9 +12,11 @@ $focus-box-shadow: 0 0 1px 5px var(--highlight-color, variables.$white),
       &:focus {
         @content ($value);
       }
+
       &:focus:not(:focus-visible) {
         @content ($default-value);
       }
+
       &:focus-visible {
         @content ($value);
       }
@@ -23,13 +25,17 @@ $focus-box-shadow: 0 0 1px 5px var(--highlight-color, variables.$white),
 }
 
 @mixin accessibleOutline {
-  outline: 2px solid var(--highlight-color, #fff);
-  box-shadow: 0 0 2px 3px var(--highlight-contrast-color, #000);
+  body.is-tabbing & {
+    outline: 2px solid var(--highlight-color, #fff);
+    box-shadow: 0 0 2px 3px var(--highlight-contrast-color, #000);
+  }
 }
 
 @mixin accessibleOutlineContrast {
-  outline: 2px solid var(--highlight-contrast-color, #fff);
-  box-shadow: 0 0 2px 3px var(--highlight-color, #000);
+  body.is-tabbing & {
+    outline: 2px solid var(--highlight-contrast-color, #fff);
+    box-shadow: 0 0 2px 3px var(--highlight-color, #000);
+  }
 }
 
 @mixin globalClassNames {
diff --git a/platforms/web/src/index.tsx b/platforms/web/src/index.tsx
index 4921fc8ee..cd59da4f7 100644
--- a/platforms/web/src/index.tsx
+++ b/platforms/web/src/index.tsx
@@ -8,6 +8,8 @@ import './modules/register';
 
 import App from './App';
 
+import { attachAccessibilityListener } from '#src/utils/accessibility';
+
 // Collect env vars
 configureEnv({
   APP_VERSION: import.meta.env.APP_VERSION,
@@ -23,6 +25,8 @@ configureEnv({
   APP_BODY_ALT_FONT: import.meta.env.APP_BODY_ALT_FONT,
 });
 
+attachAccessibilityListener();
+
 const rootElement = document.getElementById('root');
 
 if (rootElement) {
diff --git a/platforms/web/src/utils/accessibility.ts b/platforms/web/src/utils/accessibility.ts
new file mode 100644
index 000000000..92f2dd778
--- /dev/null
+++ b/platforms/web/src/utils/accessibility.ts
@@ -0,0 +1,20 @@
+export const attachAccessibilityListener = () => {
+  let isTabbing = false;
+
+  // when the user presses the Tab key, we add a `is-tabbing` className to the body element, so we can enable outline
+  // focus for keyboard users
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Tab' && !isTabbing) {
+      isTabbing = true;
+      document.body.classList.add('is-tabbing');
+    }
+  });
+
+  // remove the `is-tabbing` className when the user uses a mouse again to interact with elements
+  document.addEventListener('mousedown', () => {
+    if (isTabbing) {
+      isTabbing = false;
+      document.body.classList.remove('is-tabbing');
+    }
+  });
+};

From aef1415229901704af0e15b57fd3a0d42040cbe7 Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Tue, 6 Feb 2024 17:50:57 +0100
Subject: [PATCH 050/128] fix(a11y): format date call caused an error to be
 raised

---
 .../AccountModal/forms/CancelSubscription.tsx         | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/ui-react/src/containers/AccountModal/forms/CancelSubscription.tsx b/packages/ui-react/src/containers/AccountModal/forms/CancelSubscription.tsx
index f4f6b3828..9f3f77c48 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/CancelSubscription.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/CancelSubscription.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { format, fromUnixTime } from 'date-fns';
 import { useLocation, useNavigate } from 'react-router';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
+import { formatLocalizedDate } from '@jwp/ott-common/src/utils/formatting';
 
 import CancelSubscriptionForm from '../../../components/CancelSubscriptionForm/CancelSubscriptionForm';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
@@ -23,7 +23,7 @@ const CancelSubscription = () => {
   const [cancelled, setCancelled] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const expirationDate = subscription?.expiresAt ? fromUnixTime(subscription.expiresAt) : null;
+  const expirationDateFormatted = subscription?.expiresAt ? formatLocalizedDate(new Date(subscription.expiresAt * 1000), i18n.language) : '';
 
   const cancelSubscriptionConfirmHandler = async () => {
     setSubmitting(true);
@@ -32,9 +32,8 @@ const CancelSubscription = () => {
     try {
       await accountController.updateSubscription('cancelled');
 
-      if (expirationDate) {
-        const formattedDate = format(expirationDate, 'P', { locale: { code: i18n.language } });
-        announce(t('subscription_cancelled.message', { date: formattedDate }), 'success');
+      if (expirationDateFormatted) {
+        announce(t('subscription_cancelled.message', { date: expirationDateFormatted }), 'success');
       }
 
       setCancelled(true);
@@ -54,7 +53,7 @@ const CancelSubscription = () => {
   return (
     <React.Fragment>
       {cancelled ? (
-        <SubscriptionCancelled expiresDate={expirationDate ? format(expirationDate, 'P', { locale: { code: i18n.language } }) : ''} onClose={closeHandler} />
+        <SubscriptionCancelled expiresDate={expirationDateFormatted} onClose={closeHandler} />
       ) : (
         <CancelSubscriptionForm onConfirm={cancelSubscriptionConfirmHandler} onCancel={closeHandler} submitting={submitting} error={error} />
       )}

From ea4af42e23ddefce292a0784c8a0db9b98e4895d Mon Sep 17 00:00:00 2001
From: Melissa 't Hart <melissa@videodock.com>
Date: Tue, 6 Feb 2024 17:36:53 +0100
Subject: [PATCH 051/128] fix(menu): ensure logo does not exceed width of the
 header

---
 packages/ui-react/src/components/Logo/Logo.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui-react/src/components/Logo/Logo.module.scss b/packages/ui-react/src/components/Logo/Logo.module.scss
index 0d73cc819..5fbd32329 100644
--- a/packages/ui-react/src/components/Logo/Logo.module.scss
+++ b/packages/ui-react/src/components/Logo/Logo.module.scss
@@ -8,6 +8,7 @@
 
 .logo {
   width: auto;
+  max-width: 100%;
   max-height: variables.$header-height - 10px;
   vertical-align: middle;
   cursor: pointer;

From e50807b3b4a770f566c04961b340c0de8a96e752 Mon Sep 17 00:00:00 2001
From: Melissa 't Hart <melissa@videodock.com>
Date: Wed, 7 Feb 2024 13:48:07 +0100
Subject: [PATCH 052/128] refactor(a11y): remove double account header and add
 translations

---
 packages/ui-react/src/components/Account/Account.tsx           | 1 -
 .../src/components/Account/__snapshots__/Account.test.tsx.snap | 3 ---
 .../ui-react/src/pages/User/__snapshots__/User.test.tsx.snap   | 3 ---
 platforms/web/public/locales/en/menu.json                      | 1 +
 platforms/web/public/locales/es/menu.json                      | 1 +
 5 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/ui-react/src/components/Account/Account.tsx b/packages/ui-react/src/components/Account/Account.tsx
index a6f633bbc..06c928205 100644
--- a/packages/ui-react/src/components/Account/Account.tsx
+++ b/packages/ui-react/src/components/Account/Account.tsx
@@ -233,7 +233,6 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
             },
             content: (section) => (
               <>
-                <h1 className={styles.hideUntilFocus}>{t('nav.account')}</h1>
                 <TextField
                   name="firstName"
                   label={t('account.firstname')}
diff --git a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
index 430ceeb81..8d19e2e73 100644
--- a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
+++ b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -24,9 +24,6 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       class="_flexBox_1c1c63"
       novalidate=""
     >
-      <h1>
-        nav.account
-      </h1>
       <div
         class="_textField_e16c1b"
       >
diff --git a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
index 97f041e3a..5a601f0a0 100644
--- a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
+++ b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
@@ -115,9 +115,6 @@ exports[`User Component tests > Account Page 1`] = `
           class="_flexBox_1c1c63"
           novalidate=""
         >
-          <h1>
-            nav.account
-          </h1>
           <div
             class="_textField_e16c1b"
           >
diff --git a/platforms/web/public/locales/en/menu.json b/platforms/web/public/locales/en/menu.json
index ba8d60fed..2777f33b5 100644
--- a/platforms/web/public/locales/en/menu.json
+++ b/platforms/web/public/locales/en/menu.json
@@ -4,6 +4,7 @@
   "open_user_menu": "Open user menu",
   "profile_icon": "Profile icon",
   "select_language": "Select language",
+  "language_menu": "Open language menu",
   "sign_in": "Sign in",
   "sign_up": "Sign up",
   "skip_to_content": "Skip to content"
diff --git a/platforms/web/public/locales/es/menu.json b/platforms/web/public/locales/es/menu.json
index 59f91ff03..c0b647070 100644
--- a/platforms/web/public/locales/es/menu.json
+++ b/platforms/web/public/locales/es/menu.json
@@ -4,6 +4,7 @@
   "open_user_menu": "Abrir menú de usuario",
   "profile_icon": "Icono de perfil",
   "select_language": "Seleccionar idioma",
+  "language_menu": "Abrir menú de idioma",
   "sign_in": "Iniciar sesión",
   "sign_up": "Registrarse",
   "skip_to_content": "Saltar al contenido"

From b4c323026bc713519fcd6e1ac8efbb68dc8f8fff Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Wed, 7 Feb 2024 12:10:03 +0100
Subject: [PATCH 053/128] fix(a11y): constrast enhancement for search field

---
 .../ui-react/src/components/SearchBar/SearchBar.module.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-react/src/components/SearchBar/SearchBar.module.scss b/packages/ui-react/src/components/SearchBar/SearchBar.module.scss
index a819adadf..bd0d66c37 100644
--- a/packages/ui-react/src/components/SearchBar/SearchBar.module.scss
+++ b/packages/ui-react/src/components/SearchBar/SearchBar.module.scss
@@ -22,7 +22,7 @@
   font-weight: var(--body-font-weight-bold);
   font-size: 16px;
 
-  background: rgba(variables.$black, 0.54);
+  background: variables.$black;
 
   border: 1px solid rgba(variables.$white, 0.32);
   border-radius: 4px;

From 1d2f25f04dc06463a0a37aa4c6fddabab455cdcf Mon Sep 17 00:00:00 2001
From: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com>
Date: Thu, 8 Feb 2024 08:31:56 +0100
Subject: [PATCH 054/128] feat: underline for active header item and add
 lineair gradient

---
 .../src/components/Button/Button.module.scss  |  2 +-
 .../src/components/Header/Header.module.scss  |  2 +-
 .../IconButton/IconButton.module.scss         |  2 +-
 .../VideoDetails/VideoDetails.module.scss     | 10 +++++++++
 .../components/VideoDetails/VideoDetails.tsx  |  1 +
 .../__snapshots__/VideoDetails.test.tsx.snap  |  3 +++
 .../src/containers/Layout/Layout.module.scss  | 22 +++++++++++++++----
 packages/ui-react/src/utils/theming.ts        |  6 +++--
 packages/ui-react/stylelint.config.js         |  8 +++++++
 9 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/packages/ui-react/src/components/Button/Button.module.scss b/packages/ui-react/src/components/Button/Button.module.scss
index 40577575a..477b3196a 100644
--- a/packages/ui-react/src/components/Button/Button.module.scss
+++ b/packages/ui-react/src/components/Button/Button.module.scss
@@ -80,7 +80,7 @@ $large-button-height: 40px;
 
   &.text {
     background: none;
-    opacity: 0.7;
+    opacity: 0.9;
 
     &:not(.disabled) {
       &.active,
diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
index 4c2865d1a..a21a924cb 100644
--- a/packages/ui-react/src/components/Header/Header.module.scss
+++ b/packages/ui-react/src/components/Header/Header.module.scss
@@ -81,7 +81,7 @@
     height: 36px;
     min-height: 36px;
     margin: 0 6px;
-    padding: calc(#{variables.$header-height} / 2.5) calc(#{variables.$base-spacing} / 2);
+    padding: 0 calc(#{variables.$base-spacing} / 2);
     font-weight: var(--body-font-weight-bold);
     font-size: 18px;
   }
diff --git a/packages/ui-react/src/components/IconButton/IconButton.module.scss b/packages/ui-react/src/components/IconButton/IconButton.module.scss
index b30ac672e..96235b923 100644
--- a/packages/ui-react/src/components/IconButton/IconButton.module.scss
+++ b/packages/ui-react/src/components/IconButton/IconButton.module.scss
@@ -11,7 +11,7 @@
   outline: var(--highlight-color, white) none;
 
   cursor: pointer;
-  opacity: 0.7;
+  opacity: 0.9;
   transition: transform 0.1s ease;
 
   &:hover,
diff --git a/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss b/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
index 88809e784..a9d9ce5b9 100644
--- a/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
+++ b/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
@@ -173,6 +173,16 @@
   }
 }
 
+.posterFade {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 120px;
+  background: linear-gradient(0deg, transparent, var(--body-background-color, variables.$white));
+}
+
 .playIcon {
   position: absolute;
   top: calc(50% - 60px);
diff --git a/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx b/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx
index 8d3a130dc..5cd9f853f 100644
--- a/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx
+++ b/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx
@@ -42,6 +42,7 @@ const VideoDetails: React.VFC<Props> = ({
       <header className={styles.video} data-testid={testId('video-details')}>
         <div className={classNames(styles.main, styles.mainPadding)}>
           <Image className={styles.poster} image={image} alt={alt} width={1280} />
+          <div className={styles.posterFade} />
           <div className={styles.info}>
             <h1 className={styles.title}>{title}</h1>
             <div className={styles.metaContainer}>
diff --git a/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap b/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
index 65aa5f824..5a92ca533 100644
--- a/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
+++ b/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
@@ -17,6 +17,9 @@ exports[`<VideoDetails> > renders and matches snapshot 1`] = `
           class="_poster_d0c133 _image_4c41c3"
           src="http://image.jpg?width=1280"
         />
+        <div
+          class="_posterFade_d0c133"
+        />
         <div
           class="_info_d0c133"
         >
diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss
index ed88ccf92..06aac380b 100644
--- a/packages/ui-react/src/containers/Layout/Layout.module.scss
+++ b/packages/ui-react/src/containers/Layout/Layout.module.scss
@@ -52,8 +52,22 @@ div.testFixMargin {
 }
 
 .headerButton {
-  &:not(:focus) {
-    border-bottom: 2px variables.$white solid;
-    border-radius: 0;
-  }
+    overflow: visible;
+
+    &::after {
+      position: absolute;
+      bottom: calc(((variables.$header-height - 36px) / 2) * -1);
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background-color: variables.$white;
+      content: '';
+    }
+    body:global(.is-tabbing) & {
+      &:focus {
+        &::after {
+          display: none;
+        }
+      }
+    }
 }
diff --git a/packages/ui-react/src/utils/theming.ts b/packages/ui-react/src/utils/theming.ts
index 5a928ceec..58631fe26 100644
--- a/packages/ui-react/src/utils/theming.ts
+++ b/packages/ui-react/src/utils/theming.ts
@@ -13,8 +13,10 @@ export const setThemingVariables = (config: Config) => {
   root.style.setProperty('--highlight-color', highlightColor || '#fff');
   root.style.setProperty('--highlight-contrast-color', highlightColor ? calculateContrastColor(highlightColor) : '#000');
 
-  root.style.setProperty('--header-background', headerBackground || 'rgba(0, 0, 0, 0.85)');
-  root.style.setProperty('--header-contrast-color', headerBackground ? calculateContrastColor(headerBackground) : '#fff');
+  if (headerBackground) {
+    root.style.setProperty('--header-background', headerBackground);
+    root.style.setProperty('--header-contrast-color', calculateContrastColor(headerBackground));
+  }
 
   if (backgroundColor) {
     root.style.setProperty('--body-background-color', backgroundColor);
diff --git a/packages/ui-react/stylelint.config.js b/packages/ui-react/stylelint.config.js
index 67e3aa538..97df9f71a 100644
--- a/packages/ui-react/stylelint.config.js
+++ b/packages/ui-react/stylelint.config.js
@@ -1,3 +1,11 @@
 module.exports = {
   extends: ['stylelint-config-jwp'],
+  rules: {
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['global'],
+      },
+    ],
+  },
 };

From 1791b4ca91e161250e354ae96e1d32f0b7bf30c9 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 7 Feb 2024 15:58:24 +0100
Subject: [PATCH 055/128] fix: enter key not closing the account modal

---
 packages/ui-react/src/components/IconButton/IconButton.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/ui-react/src/components/IconButton/IconButton.tsx b/packages/ui-react/src/components/IconButton/IconButton.tsx
index 1fdf9361f..3b687eac9 100644
--- a/packages/ui-react/src/components/IconButton/IconButton.tsx
+++ b/packages/ui-react/src/components/IconButton/IconButton.tsx
@@ -18,7 +18,12 @@ const IconButton: React.FC<Props> = ({ children, onClick, tabIndex = 0, classNam
       onClick={onClick}
       role="button"
       tabIndex={tabIndex}
-      onKeyDown={(event: React.KeyboardEvent) => (event.key === 'Enter' || event.key === ' ') && tabIndex >= 0 && onClick && onClick()}
+      onKeyDown={(event: React.KeyboardEvent) => {
+        if ((event.key === 'Enter' || event.key === ' ') && tabIndex >= 0 && onClick) {
+          onClick();
+          event.preventDefault(); // prevent click being called when this component unmounts
+        }
+      }}
       {...ariaProps}
     >
       {children}

From a0cca10419b9a74b4761d5701e242db2c4e8d562 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 7 Feb 2024 16:06:35 +0100
Subject: [PATCH 056/128] fix: logo and header layout issues

---
 packages/ui-react/src/components/Header/Header.module.scss | 3 +++
 packages/ui-react/src/components/Logo/Logo.module.scss     | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
index a21a924cb..c14b438ae 100644
--- a/packages/ui-react/src/components/Header/Header.module.scss
+++ b/packages/ui-react/src/components/Header/Header.module.scss
@@ -226,11 +226,14 @@
   }
 
   .brand {
+    margin-right: 0;
+    margin-left: 0;
     text-align: center;
   }
 
   .menu,
   .actions {
+    justify-content: flex-end;
     width: 80px;
   }
 }
diff --git a/packages/ui-react/src/components/Logo/Logo.module.scss b/packages/ui-react/src/components/Logo/Logo.module.scss
index 5fbd32329..58b08fac8 100644
--- a/packages/ui-react/src/components/Logo/Logo.module.scss
+++ b/packages/ui-react/src/components/Logo/Logo.module.scss
@@ -9,7 +9,8 @@
 .logo {
   width: auto;
   max-width: 100%;
-  max-height: variables.$header-height - 10px;
+  height: auto;
+  max-height: variables.$header-height - 20px;
   vertical-align: middle;
   cursor: pointer;
 }

From 7a14497224bc8d159bda1ac3238cc0eb566b5437 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 7 Feb 2024 16:28:40 +0100
Subject: [PATCH 057/128] fix(a11y): close search bar when pressing escape

---
 packages/ui-react/src/components/Header/Header.tsx   | 12 ++----------
 .../ui-react/src/components/SearchBar/SearchBar.tsx  |  4 +++-
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
index 461af7254..e3ded9202 100644
--- a/packages/ui-react/src/components/Header/Header.tsx
+++ b/packages/ui-react/src/components/Header/Header.tsx
@@ -103,16 +103,8 @@ const Header: React.FC<Props> = ({
 
     return searchActive ? (
       <div className={styles.searchContainer}>
-        <SearchBar {...searchBarProps} />
-        <IconButton
-          className={styles.iconButton}
-          aria-label="Close search"
-          onClick={() => {
-            if (onCloseSearchButtonClick) {
-              onCloseSearchButtonClick();
-            }
-          }}
-        >
+        <SearchBar {...searchBarProps} onClose={onCloseSearchButtonClick} />
+        <IconButton className={styles.iconButton} aria-label="Close search" onClick={onCloseSearchButtonClick}>
           <Icon icon={CloseIcon} />
         </IconButton>
       </div>
diff --git a/packages/ui-react/src/components/SearchBar/SearchBar.tsx b/packages/ui-react/src/components/SearchBar/SearchBar.tsx
index ef0e8c5fe..89c9b6d22 100644
--- a/packages/ui-react/src/components/SearchBar/SearchBar.tsx
+++ b/packages/ui-react/src/components/SearchBar/SearchBar.tsx
@@ -12,10 +12,11 @@ export type Props = {
   query?: string;
   onQueryChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onClearButtonClick?: () => void;
+  onClose?: () => void;
   inputRef?: React.MutableRefObject<HTMLInputElement>;
 };
 
-const SearchBar: React.FC<Props> = ({ query, onQueryChange, onClearButtonClick, inputRef }: Props) => {
+const SearchBar: React.FC<Props> = ({ query, onQueryChange, onClearButtonClick, onClose, inputRef }: Props) => {
   const { t } = useTranslation('search');
 
   return (
@@ -26,6 +27,7 @@ const SearchBar: React.FC<Props> = ({ query, onQueryChange, onClearButtonClick,
         type="text"
         value={query}
         onChange={onQueryChange}
+        onKeyDown={(event) => event.key === 'Escape' && onClose?.()}
         aria-label={t('search_bar.search_label')}
         placeholder={t('search_bar.search_placeholder')}
         ref={inputRef}

From c4d09c52494b20e0d8e31fb4595f898729817255 Mon Sep 17 00:00:00 2001
From: langemike <mikevv@gmail.com>
Date: Thu, 8 Feb 2024 09:24:03 +0100
Subject: [PATCH 058/128] fix: e2e tests for a11y

---
 .../web/test-e2e/tests/inline_layout_test.ts  | 22 +++++++++----------
 .../web/test-e2e/tests/live_channel_test.ts   | 16 +++++++++-----
 .../web/test-e2e/tests/login/account_test.ts  |  2 +-
 .../web/test-e2e/tests/login/home_test.ts     |  2 +-
 platforms/web/test-e2e/tests/register_test.ts |  2 +-
 platforms/web/test-e2e/utils/constants.ts     |  2 +-
 platforms/web/test-e2e/utils/login.ts         |  4 ++--
 platforms/web/test-e2e/utils/steps_file.ts    |  7 +-----
 8 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/platforms/web/test-e2e/tests/inline_layout_test.ts b/platforms/web/test-e2e/tests/inline_layout_test.ts
index 601558f11..609d32266 100644
--- a/platforms/web/test-e2e/tests/inline_layout_test.ts
+++ b/platforms/web/test-e2e/tests/inline_layout_test.ts
@@ -25,15 +25,15 @@ Scenario('I can see the movie inline player layout', async ({ I }) => {
   I.see('Favorite');
   I.see('Share');
   I.seeTextEquals('Related Films', 'h2');
-  I.see('Caminandes 1: Llama Drama', locate({ css: 'a[aria-label="Caminandes 1: Llama Drama"]' }).inside(videoListLocator));
-  I.see('Caminandes 2: Gran Dillama', locate({ css: 'a[aria-label="Caminandes 2: Gran Dillama"]' }).inside(videoListLocator));
+  I.see('Caminandes 1: Llama Drama', locate({ css: 'a[data-testid="Caminandes 1: Llama Drama"]' }).inside(videoListLocator));
+  I.see('Caminandes 2: Gran Dillama', locate({ css: 'a[data-testid="Caminandes 2: Gran Dillama"]' }).inside(videoListLocator));
 });
 
 Scenario('I switch to another video in the movie screen', async ({ I }) => {
   await I.openVideoCard(constants.bigBuckBunnyTitle, ShelfId.allFilms);
   I.see(constants.bigBuckBunnyTitle);
 
-  I.click('Caminandes 1: Llama Drama', locate({ css: 'a[aria-label="Caminandes 1: Llama Drama"]' }).inside(videoListLocator));
+  I.click('Caminandes 1: Llama Drama', locate({ css: 'a[data-testid="Caminandes 1: Llama Drama"]' }).inside(videoListLocator));
   I.see('Caminandes 1: Llama Drama');
 });
 
@@ -52,8 +52,8 @@ Scenario('I can see the series inline player layout', async ({ I }) => {
   I.see('Share');
   I.seeTextEquals('Minecraft Animation Workshop', 'h1');
   I.see('Season 1', locate({ css: 'select' }).inside(videoListLocator));
-  I.see('S1:E2', locate({ css: 'a[aria-label="Basics Of Blender"]' }).inside(videoListLocator));
-  I.see('S1:E3', locate({ css: 'a[aria-label="Using Mineways"]' }).inside(videoListLocator));
+  I.see('S1:E2', locate({ css: 'a[data-testid="Basics Of Blender"]' }).inside(videoListLocator));
+  I.see('S1:E3', locate({ css: 'a[data-testid="Using Mineways"]' }).inside(videoListLocator));
 });
 
 Scenario('I can start the inline player', async ({ I }) => {
@@ -63,21 +63,21 @@ Scenario('I can start the inline player', async ({ I }) => {
 
 Scenario('I switch to the episode in the video list', async ({ I }) => {
   await I.openVideoCard(constants.minecraftAnimationWorkshopTitle, ShelfId.allCourses, true);
-  I.waitForElement('a[aria-label="Welcome"]', 3);
-  I.click('S1:E1', locate({ css: 'a[aria-label="Welcome"]' }).inside(videoListLocator));
+  I.waitForElement('a[data-testid="Welcome"]', 3);
+  I.click('S1:E1', locate({ css: 'a[data-testid="Welcome"]' }).inside(videoListLocator));
   I.see('S1:E1 - Welcome');
 });
 
 Scenario('I switch to another season in the video list', async ({ I }) => {
   await I.openVideoCard(constants.minecraftAnimationWorkshopTitle, ShelfId.allCourses, true);
-  I.waitForElement('a[aria-label="Welcome"]', 3);
-  I.click('S1:E1', locate({ css: 'a[aria-label="Welcome"]' }).inside(videoListLocator));
+  I.waitForElement('a[data-testid="Welcome"]', 3);
+  I.click('S1:E1', locate({ css: 'a[data-testid="Welcome"]' }).inside(videoListLocator));
 
   I.see('Season 1/4 - Episode 1/6');
   I.selectOption({ css: 'select[name="season"]' }, 'Season 2');
 
-  I.waitForElement('a[aria-label="Choosing a skin (Cycles Render)"]', 3);
-  I.click(locate({ css: 'a[aria-label="Choosing a skin (Cycles Render)"]' }).inside(videoListLocator));
+  I.waitForElement('a[data-testid="Choosing a skin (Cycles Render)"]', 3);
+  I.click(locate({ css: 'a[data-testid="Choosing a skin (Cycles Render)"]' }).inside(videoListLocator));
 
   I.dontSee('Season 1/4 - Episode 1/6');
   I.see('Season 2/4 - Episode 1/4');
diff --git a/platforms/web/test-e2e/tests/live_channel_test.ts b/platforms/web/test-e2e/tests/live_channel_test.ts
index 5364e7be4..660839599 100644
--- a/platforms/web/test-e2e/tests/live_channel_test.ts
+++ b/platforms/web/test-e2e/tests/live_channel_test.ts
@@ -36,9 +36,7 @@ Before(async ({ I }) => {
   I.useConfig(testConfigs.basicNoAuth);
 });
 
-const videoDetailsLocator = locate({ css: 'div[data-testid="video-details"]' });
-const shelfContainerLocator = locate({ css: 'div[role="row"]' });
-const shelfLocator = locate({ css: 'div[role="cell"]' }).inside(shelfContainerLocator);
+const videoDetailsLocator = locate({ css: 'header[data-testid="video-details"]' });
 const epgContainerLocator = locate({ css: 'div[data-testid="container"]' });
 
 const makeEpgProgramLocator = (id: string) => locate({ css: `div[data-testid*="${id}"]` }).inside(epgContainerLocator);
@@ -58,7 +56,7 @@ Scenario('I can navigate to live channels from the live channels shelf', async (
   await I.scrollToShelf(ShelfId.liveChannels);
 
   for (let i = 1; i <= liveChannelsCount; i++) {
-    I.see(`Channel ${i}`, shelfLocator);
+    I.see(`Channel ${i}`, { xpath: `//section[@data-testid="shelf-${ShelfId.liveChannels}"]` });
   }
 
   I.see('Live Channels');
@@ -247,12 +245,18 @@ Scenario('I can see the channel logo for Channel 2', async ({ I }) => {
 
 Scenario('I can see the background image for Channel 3', async ({ I }) => {
   await I.openVideoCard('Channel 3');
-  await I.seeVideoDetailsBackgroundImage('Channel 3', 'https://cdn.jwplayer.com/v2/media/wewsVyR7/images/background.webp?poster_fallback=1&width=1280');
+  I.seeAttributesOnElements('header[data-testid="video-details"] img', {
+    alt: '', // Intentionally empty
+    src: 'https://cdn.jwplayer.com/v2/media/wewsVyR7/images/background.webp?poster_fallback=1&width=1280',
+  });
 });
 
 Scenario('I can see the background image for Channel 4', async ({ I }) => {
   await I.openVideoCard('Channel 4');
-  await I.seeVideoDetailsBackgroundImage('Channel 4', 'https://cdn.jwplayer.com/v2/media/kH7LozaK/images/background.webp?poster_fallback=1&width=1280');
+  I.seeAttributesOnElements('header[data-testid="video-details"] img', {
+    alt: '', // Intentionally empty
+    src: 'https://cdn.jwplayer.com/v2/media/kH7LozaK/images/background.webp?poster_fallback=1&width=1280',
+  });
 });
 
 async function isSelectedProgram(I: CodeceptJS.I, locator: CodeceptJS.Locator, channel: string, isLive: boolean) {
diff --git a/platforms/web/test-e2e/tests/login/account_test.ts b/platforms/web/test-e2e/tests/login/account_test.ts
index b2308ba4c..67ce94bf2 100644
--- a/platforms/web/test-e2e/tests/login/account_test.ts
+++ b/platforms/web/test-e2e/tests/login/account_test.ts
@@ -111,7 +111,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     I.submitForm();
 
     I.see(incorrectLogin);
-    I.seeCssPropertiesOnElements(formFeedback, { 'background-color': 'rgb(255, 12, 62)' });
+    I.seeCssPropertiesOnElements(formFeedback, { 'background-color': 'rgb(255, 53, 53)' });
 
     checkField(I, 'email', true);
     checkField(I, 'password', true);
diff --git a/platforms/web/test-e2e/tests/login/home_test.ts b/platforms/web/test-e2e/tests/login/home_test.ts
index 30951b13b..8dc6f00bb 100644
--- a/platforms/web/test-e2e/tests/login/home_test.ts
+++ b/platforms/web/test-e2e/tests/login/home_test.ts
@@ -67,7 +67,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     loginContext = await I.registerOrLogin(loginContext);
 
     await I.openMainMenu();
-    I.click('Log out');
+    I.click('text=Log out');
 
     await I.openSignInMenu();
 
diff --git a/platforms/web/test-e2e/tests/register_test.ts b/platforms/web/test-e2e/tests/register_test.ts
index db1817960..d34a6c3fc 100644
--- a/platforms/web/test-e2e/tests/register_test.ts
+++ b/platforms/web/test-e2e/tests/register_test.ts
@@ -85,7 +85,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
 
     I.fillField('password', '1234');
     I.pressKey('Tab');
-    checkColor('rgb(255, 12, 62)');
+    checkColor('rgb(255, 53, 53)');
 
     I.fillField('password', 'Test1234');
     checkColor('rgb(255, 255, 255)');
diff --git a/platforms/web/test-e2e/utils/constants.ts b/platforms/web/test-e2e/utils/constants.ts
index 4519e2243..fa0f4be5a 100644
--- a/platforms/web/test-e2e/utils/constants.ts
+++ b/platforms/web/test-e2e/utils/constants.ts
@@ -15,7 +15,7 @@ export enum ShelfId {
 }
 
 export const makeShelfXpath = (shelf: ShelfId) => {
-  return `//div[@data-testid="shelf-${shelf}"]`;
+  return `//section[@data-testid="shelf-${shelf}"]`;
 };
 
 export default {
diff --git a/platforms/web/test-e2e/utils/login.ts b/platforms/web/test-e2e/utils/login.ts
index 016d40a15..ce47998c7 100644
--- a/platforms/web/test-e2e/utils/login.ts
+++ b/platforms/web/test-e2e/utils/login.ts
@@ -22,8 +22,8 @@ export function fillAndCheckField(I: CodeceptJS.I, field, value, error: string |
 
 export function checkField(I: CodeceptJS.I, field, error: string | boolean = false) {
   const hoverColor = 'rgba(255, 255, 255, 0.7)';
-  const activeColor = error ? 'rgb(255, 12, 62)' : 'rgb(255, 255, 255)';
-  const restingColor = error ? 'rgb(255, 12, 62)' : 'rgba(255, 255, 255, 0.34)';
+  const activeColor = error ? 'rgb(255, 53, 53)' : 'rgb(255, 255, 255)';
+  const restingColor = error ? 'rgb(255, 53, 53)' : 'rgba(255, 255, 255, 0.34)';
 
   // If error === true, there's an error, but no associated message
   if (error && error !== true) {
diff --git a/platforms/web/test-e2e/utils/steps_file.ts b/platforms/web/test-e2e/utils/steps_file.ts
index e7fe0ae68..f289f3bbd 100644
--- a/platforms/web/test-e2e/utils/steps_file.ts
+++ b/platforms/web/test-e2e/utils/steps_file.ts
@@ -42,7 +42,7 @@ const stepsObj = {
   logout: async function (this: CodeceptJS.I) {
     await this.openMainMenu();
 
-    this.click('div[aria-label="Log out"]');
+    this.click('text=Log out');
   },
   // This function will register the user on the first call and return the context
   // then assuming context is passed in the next time, will log that same user back in
@@ -449,11 +449,6 @@ const stepsObj = {
       }`);
     });
   },
-  seeVideoDetailsBackgroundImage: async function (this: CodeceptJS.I, name: string, src: string) {
-    const imageLocator = locate({ css: `div[data-testid="video-details"] img[alt="${name}"]` });
-    const imgSrc = await this.grabAttributeFrom(imageLocator, 'src');
-    assert.equal(imgSrc, src, "img element src attribute doesn't match");
-  },
   seeEpgChannelLogoImage: async function (this: CodeceptJS.I, channelId: string, src: string, alt: string) {
     const imageLocator = locate({ css: `div[data-testid="${channelId}"] img[alt="${alt}"]` });
     const imgSrc = await this.grabAttributeFrom(imageLocator, 'src');

From 361c58a53cb6ae56b84cb6751c7b4ad3d64c702b Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 21 Feb 2024 11:06:51 +0100
Subject: [PATCH 059/128] fix: related videos title layout issue

---
 .../src/components/Filter/Filter.module.scss  |  5 ++++
 .../VideoLayout/VideoLayout.module.scss       | 23 +++++++++++++------
 .../components/VideoLayout/VideoLayout.tsx    |  4 ++--
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/ui-react/src/components/Filter/Filter.module.scss b/packages/ui-react/src/components/Filter/Filter.module.scss
index ae40c41e0..cfa30d2c7 100644
--- a/packages/ui-react/src/components/Filter/Filter.module.scss
+++ b/packages/ui-react/src/components/Filter/Filter.module.scss
@@ -14,6 +14,11 @@
 
 .dropDown {
   margin-bottom: 0;
+
+  label {
+    // hide the label and optional label
+    display: none;
+  }
 }
 
 .filterDropDown {
diff --git a/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss b/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss
index d8dcf6abd..dfe935df2 100644
--- a/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss
+++ b/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss
@@ -68,11 +68,22 @@
 .relatedVideosList {
   grid-area: related;
   position: relative;
+
+  .relatedVideosListHeader {
+    display: flex;
+    flex-direction: column;
+    gap: variables.$base-spacing;
+    margin-bottom: variables.$base-spacing;
+    padding-left: #{variables.$base-spacing * 1.5};
+
+    @include responsive.mobile-only() {
+      padding-left: 0;
+    }
+  }
 }
 
 .relatedVideos {
-  padding: 37px 56px 0;
-  padding-bottom: 16px;
+  padding: 37px 56px variables.$base-spacing;
 
   @include responsive.desktop-small-only() {
     padding: 34px;
@@ -83,7 +94,7 @@
   }
 
   @include responsive.mobile-only() {
-    padding: 16px;
+    padding: variables.$base-spacing;
   }
 }
 
@@ -92,14 +103,14 @@
   display: flex;
   align-items: center;
   height: 100%;
-  padding-bottom: 16px;
+  padding-bottom: variables.$base-spacing;
 
   &.inlineLayout {
     flex-direction: column;
     align-items: initial;
     width: 100%;
     grid-area: related;
-    padding-bottom: 0;
+    gap: variables.$base-spacing;
 
     > h3 {
       font-size: 20px;
@@ -121,7 +132,6 @@
 }
 
 .relatedVideosListTitle {
-  margin-left: 24px;
   font-family: var(--body-alt-font-family);
   font-weight: var(--body-font-weight-bold);
   font-size: 20px;
@@ -136,7 +146,6 @@
 }
 
 .filtersInline {
-  margin-bottom: variables.$base-spacing;
   padding-bottom: variables.$base-spacing;
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }
diff --git a/packages/ui-react/src/components/VideoLayout/VideoLayout.tsx b/packages/ui-react/src/components/VideoLayout/VideoLayout.tsx
index e39c42b2b..5fe5b5f98 100644
--- a/packages/ui-react/src/components/VideoLayout/VideoLayout.tsx
+++ b/packages/ui-react/src/components/VideoLayout/VideoLayout.tsx
@@ -140,10 +140,10 @@ const VideoLayout: React.FC<Props> = ({
       <div className={styles.relatedVideosList}>
         <VideoList
           header={
-            <>
+            <div className={styles.relatedVideosListHeader}>
               {title && <h2 className={styles.relatedVideosListTitle}>{relatedTitle}</h2>}
               {hasFilters && renderFilters(true)}
-            </>
+            </div>
           }
           activeMediaId={item?.mediaid}
           activeLabel={activeLabel}

From bf79d108356418c80cfe7a9ddc2496977ae9bb17 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 21 Feb 2024 11:22:25 +0100
Subject: [PATCH 060/128] fix: footer overlap fix

---
 .../ui-react/src/containers/Layout/Layout.module.scss | 11 +----------
 packages/ui-react/src/containers/Layout/Layout.tsx    |  4 ++--
 .../Layout/__snapshots__/Layout.test.tsx.snap         |  8 ++------
 3 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss
index 06aac380b..75626e1ef 100644
--- a/packages/ui-react/src/containers/Layout/Layout.module.scss
+++ b/packages/ui-react/src/containers/Layout/Layout.module.scss
@@ -1,16 +1,6 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 
-.layout {
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-}
-
-.container {
-  flex: 1;
-}
-
 .footer {
   padding: 20px 40px;
   line-height: 18px;
@@ -63,6 +53,7 @@ div.testFixMargin {
       background-color: variables.$white;
       content: '';
     }
+
     body:global(.is-tabbing) & {
       &:focus {
         &::after {
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index de70e0042..231f44022 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -144,7 +144,7 @@ const Layout = () => {
   const containerProps = { inert: sideBarOpen ? '' : undefined }; // inert is not yet officially supported in react
 
   return (
-    <div className={styles.layout}>
+    <div>
       <Helmet>
         <title>{siteName}</title>
         <meta name="description" content={metaDescription} />
@@ -153,7 +153,7 @@ const Layout = () => {
         <meta name="twitter:title" content={siteName} />
         <meta name="twitter:description" content={metaDescription} />
       </Helmet>
-      <div className={styles.container} {...containerProps}>
+      <div {...containerProps}>
         <Header
           onMenuButtonClick={() => setSideBarOpen(true)}
           logoSrc={banner}
diff --git a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
index d13b82d60..22f3c63d6 100644
--- a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
@@ -2,12 +2,8 @@
 
 exports[`<Layout /> > renders layout 1`] = `
 <div>
-  <div
-    class="_layout_c71437"
-  >
-    <div
-      class="_container_c71437"
-    >
+  <div>
+    <div>
       <header
         class="_header_f4f7a7 _static_f4f7a7"
       >

From 2ded57b41bbac7a08f5c1d0eeccb149fdcde3242 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 21 Feb 2024 12:43:44 +0100
Subject: [PATCH 061/128] fix: click not working in layout grid

---
 .../src/components/LayoutGrid/LayoutGrid.tsx  | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
index b34b604a0..6fd346f90 100644
--- a/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
+++ b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
@@ -129,7 +129,24 @@ const LayoutGrid = <Item extends object>({ className, columnCount, data, renderC
   }, [currentColumnIndex, currentRowIndex, columnCount, rowCount, data.length]);
 
   return (
-    <div role="grid" ref={gridRef} aria-rowcount={rowCount} className={className} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}>
+    <div
+      role="grid"
+      ref={gridRef}
+      aria-rowcount={rowCount}
+      className={className}
+      onFocus={(event) => {
+        // only update the focused state when the `relatedTarget` is not a child of this element
+        if (!event.relatedTarget || !gridRef.current?.contains(event.relatedTarget)) {
+          setFocused(true);
+        }
+      }}
+      onBlur={(event) => {
+        // only update the focused state when the `relatedTarget` is not a child of this element
+        if (!event.relatedTarget || !gridRef.current?.contains(event.relatedTarget)) {
+          setFocused(false);
+        }
+      }}
+    >
       {Array.from({ length: rowCount }).map((_, rowIndex) => (
         <div role="row" key={rowIndex} aria-rowindex={rowIndex} className={styles.row}>
           {data.slice(rowIndex * columnCount, rowIndex * columnCount + columnCount).map((item, columnIndex) => (

From 85c2aaf824b5fbcbc6ebeea051b14fa66926091e Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Thu, 22 Feb 2024 11:45:35 +0100
Subject: [PATCH 062/128] refactor: remove reactive focus from layout grid

---
 .../src/components/LayoutGrid/LayoutGrid.tsx  | 117 ++++++------------
 1 file changed, 39 insertions(+), 78 deletions(-)

diff --git a/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
index 6fd346f90..6001b5f58 100644
--- a/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
+++ b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
@@ -1,8 +1,6 @@
-// Keyboard-accessible grid layout, with focus management
-
 import { throttle } from '@jwp/ott-common/src/utils/common';
 import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import styles from './LayoutGrid.module.scss';
 
@@ -17,16 +15,28 @@ const scrollIntoViewThrottled = throttle(function (focusedElement: HTMLElement)
   focusedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
 }, 300);
 
+// Keyboard-accessible grid layout, with focus management
 const LayoutGrid = <Item extends object>({ className, columnCount, data, renderCell }: Props<Item>) => {
-  const [focused, setFocused] = useState(false);
   const [currentRowIndex, setCurrentRowIndex] = useState(0);
   const [currentColumnIndex, setCurrentColumnIndex] = useState(0);
   const gridRef = useRef<HTMLDivElement>(null);
   const rowCount = Math.ceil(data.length / columnCount);
 
-  const handleKeyDown = useEventCallback((event: KeyboardEvent) => {
-    if (event instanceof KeyboardEvent === false) return;
+  const focusGridCell = (rowIndex: number, columnIndex: number) => {
+    const gridCell = document.getElementById(`layout_grid_${rowIndex}-${columnIndex}`) as HTMLDivElement | null;
+    const focusableElement = gridCell?.querySelector('button, a, input, [tabindex]:not([tabindex="-1"])') as HTMLElement | null;
+    const elementToFocus = focusableElement || gridCell;
+
+    setCurrentRowIndex(rowIndex);
+    setCurrentColumnIndex(columnIndex);
+
+    if (!elementToFocus) return;
 
+    elementToFocus.focus({ preventScroll: true });
+    scrollIntoViewThrottled(elementToFocus);
+  };
+
+  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
     const { key, ctrlKey } = event;
 
     if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(key)) return;
@@ -44,109 +54,60 @@ const LayoutGrid = <Item extends object>({ className, columnCount, data, renderC
       case 'ArrowLeft':
         if (isOnFirstColumn && !isOnFirstRow) {
           // Move to last of previous row
-          setCurrentColumnIndex(columnCount - 1);
-          setCurrentRowIndex((current) => Math.max(current - 1, 0));
-
-          return;
+          return focusGridCell(Math.max(currentRowIndex - 1, 0), columnCount - 1);
         }
-        return setCurrentColumnIndex((current) => Math.max(current - 1, 0));
+        return focusGridCell(currentRowIndex, Math.max(currentColumnIndex - 1, 0));
       case 'ArrowRight':
         if (isOnLastColumn && !isOnLastRow) {
           // Move to first of next row
-          setCurrentColumnIndex(0);
-          setCurrentRowIndex((current) => Math.min(current + 1, rowCount - 1));
-
-          return;
+          return focusGridCell(Math.min(currentRowIndex + 1, rowCount - 1), 0);
         }
-        return setCurrentColumnIndex((current) => Math.min(current + 1, maxRight));
+        return focusGridCell(currentRowIndex, Math.min(currentColumnIndex + 1, maxRight));
       case 'ArrowUp':
-        return setCurrentRowIndex((current) => Math.max(current - 1, 0));
+        return focusGridCell(Math.max(currentRowIndex - 1, 0), currentColumnIndex);
       case 'ArrowDown':
-        return setCurrentRowIndex((current) => Math.min(current + 1, rowCount - 1));
+        return focusGridCell(Math.min(currentRowIndex + 1, rowCount - 1), currentColumnIndex);
       case 'Home':
         if (ctrlKey) {
-          setCurrentRowIndex(0);
+          focusGridCell(0, currentColumnIndex);
         }
-        return setCurrentColumnIndex(0);
+        return focusGridCell(currentRowIndex, 0);
       case 'End':
         if (ctrlKey) {
-          setCurrentRowIndex(maxRight);
-          setCurrentColumnIndex(maxRightLastRow);
-
-          return;
+          return focusGridCell(maxRight, maxRightLastRow);
         }
-        return setCurrentColumnIndex(rowCount - 1);
+        return focusGridCell(currentRowIndex, rowCount - 1);
       case 'PageUp':
-        return setCurrentRowIndex((current) => Math.max(current - 1, 0));
+        return focusGridCell(Math.max(currentRowIndex - 1, 0), currentColumnIndex);
       case 'PageDown':
-        return setCurrentRowIndex((current) => Math.min(current + 1, rowCount - 1));
+        return focusGridCell(Math.min(currentRowIndex + 1, rowCount - 1), currentColumnIndex);
       default:
         return;
     }
   });
 
-  const originalScrollBehavior = useRef<string | null>(null);
-
+  // When the window size changes, correct indexes if necessary
   useEffect(() => {
-    if (focused) {
-      document.addEventListener('keydown', handleKeyDown);
-
-      // Prevent immediate page scrolling when out-of-viewport element gets focus
-      originalScrollBehavior.current = document.documentElement.style.scrollBehavior;
-      document.documentElement.style.scrollBehavior = 'smooth';
+    // the focused element is not within the grid element
+    if (!gridRef.current?.contains(document.activeElement)) {
+      return;
     }
 
-    return () => {
-      document.documentElement.style.scrollBehavior = originalScrollBehavior.current || '';
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [focused, handleKeyDown, columnCount, rowCount]);
-
-  // Set DOM focus to a focusable element within the currently focusable grid cell
-  useLayoutEffect(() => {
-    if (!focused) return;
-
-    const gridCell = document.getElementById(`layout_grid_${currentRowIndex}-${currentColumnIndex}`) as HTMLDivElement | null;
-    const focusableElement = gridCell?.querySelector('button, a, input, [tabindex]:not([tabindex="-1"])') as HTMLElement | null;
-    const elementToFocus = focusableElement || gridCell;
-
-    if (!elementToFocus) return;
-
-    elementToFocus.focus();
-    scrollIntoViewThrottled(elementToFocus);
-  }, [focused, currentRowIndex, currentColumnIndex]);
-
-  // When the window size changes, correct indexes if necessary
-  useEffect(() => {
     const maxRightLastRow = (data.length % columnCount || columnCount) - 1; // Never go beyond last item
 
     if (currentColumnIndex > columnCount - 1) {
-      setCurrentColumnIndex(columnCount - 1);
+      return focusGridCell(currentRowIndex, columnCount - 1);
     }
+
     if (currentRowIndex === rowCount - 1 && currentColumnIndex > maxRightLastRow) {
-      setCurrentColumnIndex(maxRightLastRow);
+      return focusGridCell(currentRowIndex, maxRightLastRow);
     }
-  }, [currentColumnIndex, currentRowIndex, columnCount, rowCount, data.length]);
+    // this logic should only react when the column count changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columnCount]);
 
   return (
-    <div
-      role="grid"
-      ref={gridRef}
-      aria-rowcount={rowCount}
-      className={className}
-      onFocus={(event) => {
-        // only update the focused state when the `relatedTarget` is not a child of this element
-        if (!event.relatedTarget || !gridRef.current?.contains(event.relatedTarget)) {
-          setFocused(true);
-        }
-      }}
-      onBlur={(event) => {
-        // only update the focused state when the `relatedTarget` is not a child of this element
-        if (!event.relatedTarget || !gridRef.current?.contains(event.relatedTarget)) {
-          setFocused(false);
-        }
-      }}
-    >
+    <div role="grid" ref={gridRef} aria-rowcount={rowCount} className={className} onKeyDown={handleKeyDown}>
       {Array.from({ length: rowCount }).map((_, rowIndex) => (
         <div role="row" key={rowIndex} aria-rowindex={rowIndex} className={styles.row}>
           {data.slice(rowIndex * columnCount, rowIndex * columnCount + columnCount).map((item, columnIndex) => (

From a6305efbe94b0261786a2adcb76a6530aff3e4cc Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Thu, 22 Feb 2024 12:18:56 +0100
Subject: [PATCH 063/128] fix: layout grid home and page down problem

---
 .../src/components/LayoutGrid/LayoutGrid.tsx  | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
index 6001b5f58..1b98ebe43 100644
--- a/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
+++ b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
@@ -43,44 +43,48 @@ const LayoutGrid = <Item extends object>({ className, columnCount, data, renderC
 
     event.preventDefault();
 
+    const maxRow = rowCount - 1;
     const isOnFirstColumn = currentColumnIndex === 0;
     const isOnLastColumn = currentColumnIndex === columnCount - 1;
     const isOnFirstRow = currentRowIndex === 0;
-    const isOnLastRow = currentRowIndex === rowCount - 1;
+    const isOnLastRow = currentRowIndex === maxRow;
     const maxRightLastRow = (data.length % columnCount || columnCount) - 1; // Never go beyond last item
     const maxRight = isOnLastRow ? maxRightLastRow : columnCount - 1;
 
+    const nextRowIndex = Math.min(currentRowIndex + 1, maxRow);
+    const previousRowIndex = Math.max(currentRowIndex - 1, 0);
+
     switch (key) {
       case 'ArrowLeft':
         if (isOnFirstColumn && !isOnFirstRow) {
           // Move to last of previous row
-          return focusGridCell(Math.max(currentRowIndex - 1, 0), columnCount - 1);
+          return focusGridCell(previousRowIndex, columnCount - 1);
         }
         return focusGridCell(currentRowIndex, Math.max(currentColumnIndex - 1, 0));
       case 'ArrowRight':
         if (isOnLastColumn && !isOnLastRow) {
           // Move to first of next row
-          return focusGridCell(Math.min(currentRowIndex + 1, rowCount - 1), 0);
+          return focusGridCell(nextRowIndex, 0);
         }
         return focusGridCell(currentRowIndex, Math.min(currentColumnIndex + 1, maxRight));
       case 'ArrowUp':
-        return focusGridCell(Math.max(currentRowIndex - 1, 0), currentColumnIndex);
+        return focusGridCell(previousRowIndex, currentColumnIndex);
       case 'ArrowDown':
-        return focusGridCell(Math.min(currentRowIndex + 1, rowCount - 1), currentColumnIndex);
+        return focusGridCell(nextRowIndex, currentColumnIndex);
       case 'Home':
         if (ctrlKey) {
-          focusGridCell(0, currentColumnIndex);
+          return focusGridCell(0, 0);
         }
         return focusGridCell(currentRowIndex, 0);
       case 'End':
         if (ctrlKey) {
           return focusGridCell(maxRight, maxRightLastRow);
         }
-        return focusGridCell(currentRowIndex, rowCount - 1);
+        return focusGridCell(currentRowIndex, maxRow);
       case 'PageUp':
-        return focusGridCell(Math.max(currentRowIndex - 1, 0), currentColumnIndex);
+        return focusGridCell(previousRowIndex, currentColumnIndex);
       case 'PageDown':
-        return focusGridCell(Math.min(currentRowIndex + 1, rowCount - 1), currentColumnIndex);
+        return focusGridCell(nextRowIndex, nextRowIndex === maxRow ? Math.min(maxRightLastRow, currentColumnIndex) : currentColumnIndex);
       default:
         return;
     }

From 6a291a77f51626c46c082f268f454ff00cde9310 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Thu, 22 Feb 2024 12:33:32 +0100
Subject: [PATCH 064/128] fix: layout grid arrow down and end problem

---
 packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
index 1b98ebe43..385a9abab 100644
--- a/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
+++ b/packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
@@ -70,7 +70,7 @@ const LayoutGrid = <Item extends object>({ className, columnCount, data, renderC
       case 'ArrowUp':
         return focusGridCell(previousRowIndex, currentColumnIndex);
       case 'ArrowDown':
-        return focusGridCell(nextRowIndex, currentColumnIndex);
+        return focusGridCell(nextRowIndex, nextRowIndex === maxRow ? Math.min(currentColumnIndex, maxRightLastRow) : currentColumnIndex);
       case 'Home':
         if (ctrlKey) {
           return focusGridCell(0, 0);
@@ -78,9 +78,9 @@ const LayoutGrid = <Item extends object>({ className, columnCount, data, renderC
         return focusGridCell(currentRowIndex, 0);
       case 'End':
         if (ctrlKey) {
-          return focusGridCell(maxRight, maxRightLastRow);
+          return focusGridCell(maxRow, maxRightLastRow);
         }
-        return focusGridCell(currentRowIndex, maxRow);
+        return focusGridCell(currentRowIndex, maxRight);
       case 'PageUp':
         return focusGridCell(previousRowIndex, currentColumnIndex);
       case 'PageDown':

From 69eff3c1e9763d2b80e1669809323ee9c1de5f63 Mon Sep 17 00:00:00 2001
From: Anton Lantukh <alantukh@jwplayer.com>
Date: Thu, 14 Mar 2024 10:33:42 +0100
Subject: [PATCH 065/128] fix(project): fix live stream duration check for ott
 plugin (#460)

---
 platforms/web/public/jwpltx.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/platforms/web/public/jwpltx.js b/platforms/web/public/jwpltx.js
index f66fbd828..ab4b7af89 100644
--- a/platforms/web/public/jwpltx.js
+++ b/platforms/web/public/jwpltx.js
@@ -155,8 +155,9 @@ window.jwpltx = window.jwpltx || {};
       return;
     }
 
-    // 0 or negative vd means live stream
-    if (vd < 1) {
+    // 0 or negative vd - Live Stream with DVR
+    // Infinity -> Live Stream without DVR
+    if (vd < 1 || vd === Infinity) {
       // Initial tick means play() event
       if (!uri.pw) {
         uri.vd = 0;

From 82b5967dcf9415aba21e8f6c7bdaabd57f1589af Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Fri, 15 Mar 2024 13:26:14 +0100
Subject: [PATCH 066/128] feat: accessibility improvements and bug fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: add pr deployment previews workflows

* fix(payment): redirect to wrong media after payment

* chore: add version number to footer text

Co-authored-by: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com>

* fix: show error on email field when invalid

* fix(project): favicons & preconnect jwapp.com

* fix: broken checkbox in personal details form

* fix: hide disabled questions in personal details screen

* fix: improve consents required form error

* fix: show error when delete account fails

* fix: hide optional label in season select dropdown

* fix: shelf margin and grid loading state

* chore: add default config and set demo mode on for build (#127)

* feat: Render favicons dynamically

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>

* refactor(payment): improve choose offer flow

* fix(payment): ui not updating after paypal payment

* refactor: add strict util for modal urls from window location

* feat(a11y): add auto focus to play/pause button of players

* fix(menu): prevent text to go on two lines in buttons

* fix(a11y): ensure wcag compliance with 1.5 line-height for texts (#109)

* feat(a11y): apply the autocomplete attribute to input fields(#115)

* feat(a11y): apply correct aria attributes and improve searchbar (#117)

* feat(a11y): video meta data items separated (#116)

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>

* fix(a11y): only set focus programmatically on keyboard navigation

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>

* feat(a11y): form validation improvements for screen readers

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>

* fix(a11y): apply aria-hidden to checkbox asterisk (#121)

* feat(a11y): slide chevron buttons hitarea increased

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>

* fix(a11y): usermenu item count & correct html structure

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>

* fix(a11y): roles and aria-attributes regarding modals (#125)

* feat(a11y): slider navigation optimized

* chore: fix react warning

* fix(payment): layout of invoices on mobile

* fix(a11y): optimize footer for accessibility

* feat(a11y): improve accessibility of sidebar

* feat(a11y): optimize profile menu

* fix(a11y): improve screenreader focus on start watching button

* fix(a11y): videoplayer focus (iOS) & restoration

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>

* fix: active state of language menu and apply aria-current

* fix(search): prevent keyboard from persisting in searchbar on submit

* fix(a11y): ensure correct focus on first sidebar menu item

* fix(user): update question value while typing

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>

* fix(videodetail): don’t render empty duration metadata

* fix(user): error when updating customer

* fix(project): checkbox values for customer consents

* fix(menu): ensure sidebar is scrollable

* refactor(menu): apply dynamic viewport height for sidebar

* fix(project): overall styling of the hub page

* fix(payment): fix new subscription not showing in UI

* fix: cinema not covering full viewport height

* fix(videodetail): page behind player too wide

* fix(videodetail): buttons not aligning properly

* feat: align sidebar backdrop with modal

* fix(a11y): add selected state to season filters

* fix(a11y): add role to make lock icon readable

refactor(tests): update snapshots

* fix(a11y): add aria-pressed to password icon and underline to footer links

* fix: video metadata styling with status icon for live events

* chore: format package files

* fix(player): back button not working

* fix(player): title overlay fade animation

* chore(project): maintenance 2024-q1

* chore: enable verbatimModuleSyntax

* chore: use cjs for lighthouse config

* chore: add comment to s3 workflow

* refactor: extract metadata utils

* chore: cleanup translations

---------

Co-authored-by: Vincent Couzij <vincent@videodock.com>
Co-authored-by: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com>
Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>
Co-authored-by: langemike <mikevv@gmail.com>
Co-authored-by: Roy Schut <roy@videodock.com>
Co-authored-by: Roy Schut <royschut@gmail.com>
Co-authored-by: Melissa 't Hart <melissa@videodock.com>
---
 ...eb-test-deploy-preview-and-lighthouse.yml} |    4 +-
 .../workflows/web-test-deploy-preview-aws.yml |   84 +
 .syncpackrc.json                              |   79 +-
 configs/eslint-config-jwp/package.json        |    4 +-
 configs/eslint-config-jwp/typescript.js       |    4 -
 configs/postcss-config-jwp/package.json       |    4 +-
 package.json                                  |   27 +-
 packages/common/package.json                  |    8 +-
 .../src/controllers/AccountController.ts      |   14 +-
 .../src/controllers/CheckoutController.ts     |   61 +-
 .../cleeng/CleengAccountService.ts            |    5 +-
 .../integrations/jwp/JWPAccountService.ts     |   41 +-
 .../integrations/jwp/JWPCheckoutService.ts    |    2 +-
 packages/common/src/stores/CheckoutStore.ts   |   26 +-
 packages/common/src/utils/formatting.ts       |   50 +-
 packages/common/src/utils/media.ts            |    2 +-
 packages/common/src/utils/metadata.ts         |   37 +
 packages/common/src/utils/offers.ts           |   10 +-
 packages/common/src/utils/subscription.ts     |   11 +-
 packages/common/types/checkout.ts             |    3 +-
 packages/hooks-react/package.json             |    6 +-
 packages/hooks-react/src/useCheckAccess.ts    |    2 +-
 packages/hooks-react/src/useCheckout.ts       |   28 +-
 packages/hooks-react/src/useForm.ts           |   37 +-
 packages/hooks-react/src/useOffers.ts         |   87 +-
 packages/theme/assets/icons/plus.svg          |    2 +-
 packages/ui-react/package.json                |   10 +-
 .../src/components/Account/Account.tsx        |   24 +-
 .../__snapshots__/Account.test.tsx.snap       |    9 +-
 .../src/components/Adyen/AdyenForm.scss       |    4 +-
 .../src/components/Animation/Fade/Fade.tsx    |    1 +
 .../src/components/Animation/Grow/Grow.tsx    |    4 +-
 .../Button/__snapshots__/Button.test.tsx.snap |    2 +-
 .../src/components/Card/Card.module.scss      |   26 +-
 .../ui-react/src/components/Card/Card.tsx     |    4 +-
 .../Card/__snapshots__/Card.test.tsx.snap     |    1 +
 .../src/components/Checkbox/Checkbox.tsx      |    2 +-
 .../__snapshots__/Checkbox.test.tsx.snap      |    3 +
 .../CheckoutForm/CheckoutForm.module.scss     |    3 +-
 .../components/CheckoutForm/CheckoutForm.tsx  |    2 +-
 .../__snapshots__/CheckoutForm.test.tsx.snap  |   14 +-
 .../ChooseOfferForm/ChooseOfferForm.test.tsx  |   43 +-
 .../ChooseOfferForm/ChooseOfferForm.tsx       |   60 +-
 .../ChooseOfferForm.test.tsx.snap             |   20 +-
 .../CollapsibleText/CollapsibleText.tsx       |    2 +
 .../CollapsibleText.test.tsx.snap             |    1 +
 .../ConfirmationDialog/ConfirmationDialog.tsx |   10 +-
 .../CreditCardCVCField/CreditCardCVCField.tsx |    1 +
 .../CreditCardCVCField.test.tsx.snap          |    4 +-
 .../CreditCardExpiryField.tsx                 |    1 +
 .../CreditCardExpiryField.test.tsx.snap       |    4 +-
 .../CreditCardNumberField.tsx                 |    1 +
 .../CreditCardNumberField.test.tsx.snap       |    4 +-
 .../CustomRegisterField.test.tsx.snap         |   10 +-
 .../DateField/DateField.module.scss           |    2 +-
 .../src/components/DateField/DateField.tsx    |    3 +
 .../DeleteAccountModal.module.scss            |   61 +-
 .../DeleteAccountModal/DeleteAccountModal.tsx |  121 +-
 .../DeleteAccountPasswordWarning.module.scss  |    4 +-
 .../src/components/Dialog/Dialog.test.tsx     |   17 +
 .../ui-react/src/components/Dialog/Dialog.tsx |    3 +-
 .../Dialog/__snapshots__/Dialog.test.tsx.snap |    6 +-
 .../components/Dropdown/Dropdown.module.scss  |    2 +-
 .../src/components/Dropdown/Dropdown.tsx      |    6 +-
 .../EditCardPaymentForm.tsx                   |    1 +
 .../EditPasswordForm.module.scss              |    2 +-
 .../EditPasswordForm/EditPasswordForm.tsx     |    9 +-
 .../EditPasswordForm.test.tsx.snap            |   10 +-
 .../EpgProgramItem/EpgProgramItem.module.scss |    6 +-
 .../src/components/ErrorPage/ErrorPage.tsx    |    3 +-
 .../__snapshots__/ErrorPage.test.tsx.snap     |    2 +-
 .../ui-react/src/components/Filter/Filter.tsx |    6 +-
 .../Filter/__snapshots__/Filter.test.tsx.snap |    4 +
 .../src/components/Footer/Footer.module.scss  |   36 +
 .../src/components/Footer/Footer.test.tsx     |   23 +
 .../ui-react/src/components/Footer/Footer.tsx |   24 +
 .../Footer/__snapshots__/Footer.test.tsx.snap |   78 +
 .../ForgotPasswordForm/ForgotPasswordForm.tsx |    3 +-
 .../ForgotPasswordForm.test.tsx.snap          |    2 +-
 .../src/components/Form/FormSection.tsx       |   10 +-
 .../src/components/Header/Header.module.scss  |   12 +-
 .../src/components/Header/Header.test.tsx     |    4 +-
 .../ui-react/src/components/Header/Header.tsx |   60 +-
 .../Header/__snapshots__/Header.test.tsx.snap |    2 +
 .../src/components/HelperText/HelperText.tsx  |    4 +-
 .../__snapshots__/HelperText.test.tsx.snap    |    1 -
 .../src/components/Hero/Hero.module.scss      |   60 +-
 .../ui-react/src/components/Hero/Hero.tsx     |   16 +-
 .../ui-react/src/components/Icon/Icon.tsx     |    2 +-
 .../src/components/IconButton/IconButton.tsx  |    2 +-
 .../LanguageMenu/LanguageMenu.module.scss     |    2 +
 .../components/LanguageMenu/LanguageMenu.tsx  |    7 +-
 .../__snapshots__/LanguageMenu.test.tsx.snap  |    1 +
 .../src/components/LoginForm/LoginForm.tsx    |   17 +-
 .../__snapshots__/LoginForm.test.tsx.snap     |    5 +-
 .../src/components/MenuButton/MenuButton.tsx  |    6 +-
 .../__snapshots__/MenuButton.test.tsx.snap    |    1 +
 .../src/components/Modal/Modal.module.scss    |    2 +-
 .../src/components/Modal/Modal.test.tsx       |    1 -
 .../ui-react/src/components/Modal/Modal.tsx   |   35 +-
 .../OfferSwitch/OfferSwitch.module.scss       |    2 +-
 .../src/components/Panel/Panel.module.scss    |    2 +-
 .../PasswordField/PasswordField.tsx           |   10 +-
 .../__snapshots__/PasswordField.test.tsx.snap |    5 +-
 .../PasswordStrength/PasswordStrength.tsx     |    4 +-
 .../PasswordStrength.test.tsx.snap            |    5 +
 .../components/Payment/Payment.module.scss    |   28 +-
 .../src/components/Payment/Payment.tsx        |   13 +-
 .../__snapshots__/Payment.test.tsx.snap       |   12 +-
 .../components/PaymentForm/PaymentForm.tsx    |    1 +
 .../PersonalDetailsForm.tsx                   |   56 +-
 .../PersonalDetailsForm.test.tsx.snap         |  103 +-
 .../ui-react/src/components/Player/Player.tsx |   11 +-
 .../components/ProfilesMenu/ProfilesMenu.tsx  |   68 +
 .../Radio/__snapshots__/Radio.test.tsx.snap   |    1 -
 .../RegistrationForm.test.tsx                 |    1 -
 .../RegistrationForm/RegistrationForm.tsx     |   24 +-
 .../RegistrationForm.test.tsx.snap            |    8 +-
 .../RenewSubscriptionForm.module.scss         |    6 +-
 .../ResetPasswordForm/ResetPasswordForm.tsx   |    6 +-
 .../ResetPasswordForm.test.tsx.snap           |    6 +-
 .../SearchBar/SearchBar.module.scss           |   10 +-
 .../src/components/SearchBar/SearchBar.tsx    |   40 +-
 .../__snapshots__/SearchBar.test.tsx.snap     |   55 +-
 .../src/components/Shelf/Shelf.module.scss    |   11 +-
 .../ui-react/src/components/Shelf/Shelf.tsx   |   11 +-
 .../Shelf/__snapshots__/Shelf.test.tsx.snap   |   28 +-
 .../components/Sidebar/Sidebar.module.scss    |   15 +-
 .../src/components/Sidebar/Sidebar.tsx        |   51 +-
 .../__snapshots__/Sidebar.test.tsx.snap       |    4 +-
 .../StatusIcon/StatusIcon.module.scss         |   13 +
 .../src/components/StatusIcon/StatusIcon.tsx  |   10 +-
 .../src/components/TextField/TextField.tsx    |    3 +-
 .../__snapshots__/TextField.test.tsx.snap     |    4 -
 .../components/TileDock/TileDock.module.scss  |    9 +-
 .../src/components/TileDock/TileDock.tsx      |    8 +-
 .../UpgradeSubscription.tsx                   |    2 +-
 .../UserMenu/ProfilesMenu/ProfilesMenu.tsx    |   67 -
 .../components/UserMenu/UserMenu.module.scss  |   47 +-
 .../src/components/UserMenu/UserMenu.tsx      |  142 +-
 .../__snapshots__/UserMenu.test.tsx.snap      |   20 +-
 .../VideoDetails/VideoDetails.module.scss     |   44 +-
 .../components/VideoDetails/VideoDetails.tsx  |    2 +-
 .../__snapshots__/VideoDetails.test.tsx.snap  |    2 +
 .../VideoDetailsInline.module.scss            |   21 +-
 .../VideoLayout/VideoLayout.module.scss       |    4 +-
 .../VideoMetaData/VideoMetaData.module.scss   |    3 +
 .../VideoMetaData/VideoMetaData.test.tsx      |   13 +
 .../VideoMetaData/VideoMetaData.tsx           |   27 +
 .../__snapshots__/VideoMetaData.test.tsx.snap |   29 +
 .../WaitingForPayment/WaitingForPayment.tsx   |    3 +
 .../AccountModal/forms/Checkout.tsx           |   28 +-
 .../AccountModal/forms/ChooseOffer.tsx        |  150 +-
 .../AccountModal/forms/EditPassword.tsx       |    3 +-
 .../containers/AccountModal/forms/Login.tsx   |    9 +-
 .../AccountModal/forms/PersonalDetails.tsx    |   12 +-
 .../AccountModal/forms/Registration.tsx       |    8 +-
 .../AdyenPaymentDetails.tsx                   |    5 +-
 .../AnnoucementProvider.tsx                   |    2 +-
 .../src/containers/Cinema/Cinema.module.scss  |   23 +-
 .../src/containers/Cinema/Cinema.test.tsx     |   17 +-
 .../ui-react/src/containers/Cinema/Cinema.tsx |   52 +-
 .../Cinema/__snapshots__/Cinema.test.tsx.snap |  109 +-
 .../FavoriteButton/FavoriteButton.tsx         |    3 +-
 .../InlinePlayer/InlinePlayer.module.scss     |    6 +-
 .../src/containers/Layout/Layout.module.scss  |   26 +-
 .../ui-react/src/containers/Layout/Layout.tsx |   46 +-
 .../Layout/__snapshots__/Layout.test.tsx.snap |   31 +-
 .../PaymentContainer/PaymentContainer.tsx     |   23 +-
 .../ui-react/src/containers/Profiles/Form.tsx |    8 +-
 .../ShelfList/ShelfList.module.scss           |    2 +-
 .../StartWatchingButton.tsx                   |    4 +-
 .../containers/TrailerModal/TrailerModal.tsx  |    4 +-
 .../UpdatePaymentMethod.tsx                   |   10 +-
 .../src/modules/createInjectableComponent.tsx |    2 +-
 .../Home/__snapshots__/Home.test.tsx.snap     |    8 -
 .../src/pages/LegacySeries/LegacySeries.tsx   |   14 +-
 .../src/pages/Loading/Loading.module.scss     |    2 +-
 .../mediaScreens/MediaEvent/MediaEvent.tsx    |   15 +-
 .../mediaScreens/MediaHub/MediaHub.tsx        |    1 +
 .../mediaScreens/MediaMovie/MediaMovie.tsx    |   15 +-
 .../mediaScreens/MediaSeries/MediaSeries.tsx  |   10 +-
 .../PlaylistLiveChannels.tsx                  |    6 +-
 packages/ui-react/src/pages/Search/Search.tsx |   14 +-
 .../ui-react/src/pages/User/User.module.scss  |    6 +-
 packages/ui-react/src/pages/User/User.tsx     |   10 +-
 .../User/__snapshots__/User.test.tsx.snap     |   22 +-
 packages/ui-react/src/styles/_variables.scss  |    1 +
 packages/ui-react/src/utils/location.test.ts  |   15 +-
 packages/ui-react/src/utils/location.ts       |    5 +
 platforms/web/.env                            |    6 +-
 platforms/web/.eslintrc.cjs                   |    6 +
 platforms/web/.eslintrc.js                    |    3 -
 platforms/web/index.html                      |   16 +-
 .../web/{lighthouserc.js => lighthouserc.cjs} |    0
 platforms/web/package.json                    |   48 +-
 platforms/web/public/locales/en/account.json  |   25 +-
 platforms/web/public/locales/en/common.json   |    7 +-
 platforms/web/public/locales/en/error.json    |   12 +-
 platforms/web/public/locales/en/menu.json     |    3 +-
 platforms/web/public/locales/en/user.json     |   12 +-
 platforms/web/public/locales/en/video.json    |    2 -
 platforms/web/public/locales/es/account.json  |   25 +-
 platforms/web/public/locales/es/common.json   |    7 +-
 platforms/web/public/locales/es/error.json    |   12 +-
 platforms/web/public/locales/es/menu.json     |    3 +-
 platforms/web/public/locales/es/user.json     |   12 +-
 platforms/web/public/locales/es/video.json    |    4 +-
 platforms/web/pwa-assets.config.ts            |   12 +-
 .../web/scripts/build-tools/buildTools.ts     |   10 +
 .../DemoConfigDialog.test.tsx.snap            |    8 +-
 platforms/web/src/hooks/useNotifications.ts   |   16 +-
 ...ylelint.config.js => stylelint.config.cjs} |    0
 ...decept.desktop.js => codecept.desktop.cjs} |    0
 ...codecept.mobile.js => codecept.mobile.cjs} |    0
 .../web/test-e2e/tests/favorites_test.ts      |   10 +-
 platforms/web/test-e2e/tests/home_test.ts     |    6 +-
 .../web/test-e2e/tests/login/account_test.ts  |    5 +-
 platforms/web/test-e2e/tests/register_test.ts |    7 +-
 platforms/web/test-e2e/tests/search_test.ts   |    2 +-
 .../web/test-e2e/tests/video_detail_test.ts   |    2 +-
 platforms/web/test-e2e/utils/login.ts         |   10 +-
 .../web/test-e2e/utils/password_utils.ts      |    2 +-
 platforms/web/test-e2e/utils/steps_file.ts    |    2 +-
 platforms/web/vite.config.ts                  |   18 +-
 tsconfig.base.json                            |    2 +-
 yarn.lock                                     | 3829 +++++++++--------
 227 files changed, 4143 insertions(+), 3390 deletions(-)
 rename .github/workflows/{web-test-preview-and-lighthouse.yml => web-test-deploy-preview-and-lighthouse.yml} (94%)
 create mode 100644 .github/workflows/web-test-deploy-preview-aws.yml
 create mode 100644 packages/common/src/utils/metadata.ts
 create mode 100644 packages/ui-react/src/components/Footer/Footer.module.scss
 create mode 100644 packages/ui-react/src/components/Footer/Footer.test.tsx
 create mode 100644 packages/ui-react/src/components/Footer/Footer.tsx
 create mode 100644 packages/ui-react/src/components/Footer/__snapshots__/Footer.test.tsx.snap
 create mode 100644 packages/ui-react/src/components/ProfilesMenu/ProfilesMenu.tsx
 create mode 100644 packages/ui-react/src/components/StatusIcon/StatusIcon.module.scss
 delete mode 100644 packages/ui-react/src/components/UserMenu/ProfilesMenu/ProfilesMenu.tsx
 create mode 100644 packages/ui-react/src/components/VideoMetaData/VideoMetaData.module.scss
 create mode 100644 packages/ui-react/src/components/VideoMetaData/VideoMetaData.test.tsx
 create mode 100644 packages/ui-react/src/components/VideoMetaData/VideoMetaData.tsx
 create mode 100644 packages/ui-react/src/components/VideoMetaData/__snapshots__/VideoMetaData.test.tsx.snap
 create mode 100644 platforms/web/.eslintrc.cjs
 delete mode 100644 platforms/web/.eslintrc.js
 rename platforms/web/{lighthouserc.js => lighthouserc.cjs} (100%)
 rename platforms/web/{stylelint.config.js => stylelint.config.cjs} (100%)
 rename platforms/web/test-e2e/{codecept.desktop.js => codecept.desktop.cjs} (100%)
 rename platforms/web/test-e2e/{codecept.mobile.js => codecept.mobile.cjs} (100%)

diff --git a/.github/workflows/web-test-preview-and-lighthouse.yml b/.github/workflows/web-test-deploy-preview-and-lighthouse.yml
similarity index 94%
rename from .github/workflows/web-test-preview-and-lighthouse.yml
rename to .github/workflows/web-test-deploy-preview-and-lighthouse.yml
index 480f56c91..dd984638c 100644
--- a/.github/workflows/web-test-preview-and-lighthouse.yml
+++ b/.github/workflows/web-test-deploy-preview-and-lighthouse.yml
@@ -1,4 +1,4 @@
-name: Web - Test - Deploy Preview and Lighthouse Test
+name: Web - Test - PR Deploy Preview and Lighthouse Test
 
 on:
   pull_request:
@@ -36,4 +36,4 @@ jobs:
       - name: Install Lighthouse CI
         run: sudo yarn global add @lhci/cli@0.12.x
       - name: Run Lighthouse CI
-        run: lhci autorun --collect.url=${{ needs.build_and_preview.outputs.output1 }}?app-config=gnnuzabk --config=./lighthouserc.js
+        run: lhci autorun --collect.url=${{ needs.build_and_preview.outputs.output1 }}?app-config=gnnuzabk --config=./lighthouserc.cjs
diff --git a/.github/workflows/web-test-deploy-preview-aws.yml b/.github/workflows/web-test-deploy-preview-aws.yml
new file mode 100644
index 000000000..3f788b9be
--- /dev/null
+++ b/.github/workflows/web-test-deploy-preview-aws.yml
@@ -0,0 +1,84 @@
+# Example workflow to deploy the web platform to an AWS S3 bucket on pull requests
+# This workflow is disabled for the OTT Web App
+#
+# See
+# - https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html
+# - https://docs.aws.amazon.com/AmazonS3/latest/userguide/example-policies-s3.html#iam-policy-ex0
+#
+# Create an environment named `Deployment Previews` or change the environment.name below
+#
+# Environment variables:
+# - DEPLOYMENT_PREVIEWS   - Set this any value to enable this workflow
+# - AWS_ACCESS_KEY_ID     - The AWS access key id
+# - AWS_REGION            - The AWS region where the bucket is created. Example `us-west-1`
+# - CLOUDFRONT_ID         - Optionally define the AWS Cloudfront ID to invalidate the cache after the build
+#
+# Environment secrets:
+# - AWS_SECRET_ACCESS_KEY - The AWS secret access key
+
+name: Web - Test - PR Deploy Preview
+run-name: Deploy Preview - PR ${{ github.event.pull_request.number || '0' }}
+
+on:
+  pull_request:
+
+defaults:
+  run:
+    working-directory: ./platforms/web
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    environment:
+      name: Deployment Previews
+      url: ${{ format('https://pr-{0}.{1}?app-config={2}', github.event.pull_request.number || '0' , vars.PREVIEW_DOMAIN, vars.PREVIEW_DEFAULT_CONFIG) }}
+    if:  ${{ vars.DEPLOYMENT_PREVIEWS != '' }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Install packages
+        run: yarn install --frozen-lockfile
+      - name: Build
+        run: |
+          yarn build
+        env:
+          MODE: demo
+          APP_GTM_TAG_ID: ${{ vars.APP_GTM_TAG_ID }}
+          APP_FOOTER_TEXT: ${{ vars.APP_FOOTER_TEXT }}
+          APP_BODY_FONT_FAMILY: ${{ vars.APP_BODY_FONT_FAMILY }}
+          APP_BODY_ALT_FONT_FAMILY: ${{ vars.APP_BODY_ALT_FONT_FAMILY }}
+          APP_DEFAULT_CONFIG_SOURCE: ${{ vars.APP_DEFAULT_CONFIG_SOURCE }}
+          APP_PLAYER_LICENSE_KEY: ${{ vars.APP_PLAYER_LICENSE_KEY }}
+      - uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ vars.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ vars.AWS_REGION }}
+      - name: Copy dist files to S3 Bucket
+        run: |
+          aws s3 sync build/public s3://$BUCKET/$DIR --cache-control max-age=60 --delete
+        env:
+          BUCKET: ${{ vars.BUCKET }}
+          DIR: ${{ github.event.pull_request.number || '0' }}
+      - name: Set different cache control for index.html
+        run: |
+          aws s3 cp build/public/index.html s3://$BUCKET/$DIR/index.html --cache-control max-age=0,no-cache
+        env:
+          BUCKET: ${{ vars.BUCKET }}
+          DIR: ${{ github.event.pull_request.number || '0' }}
+      - name: Set different cache control for files in assets folder
+        run: |
+          aws s3 cp build/public/assets s3://$BUCKET/$DIR/assets --cache-control max-age=31536000 --recursive
+        env:
+          BUCKET: ${{ vars.BUCKET }}
+          DIR: ${{ github.event.pull_request.number || '0' }}
+      - name: Invalidate cloudfront distribution
+        if: ${{ vars.CLOUDFRONT_ID }}
+        run: aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_ID --paths "/$DIR/images/*" "/$DIR/*.*"
+        env:
+          CLOUDFRONT_ID: ${{ vars.CLOUDFRONT_ID }}
+          DIR: ${{ github.event.pull_request.number || '0' }}
diff --git a/.syncpackrc.json b/.syncpackrc.json
index c16bac2c8..5de916305 100644
--- a/.syncpackrc.json
+++ b/.syncpackrc.json
@@ -1,37 +1,88 @@
 {
   "$schema": "https://unpkg.com/syncpack@11.2.1/dist/schema.json",
+  "sortFirst": [
+    "name",
+    "description",
+    "version",
+    "private",
+    "license",
+    "repository",
+    "author",
+    "main",
+    "exports",
+    "engines",
+    "workspaces",
+    "scripts"
+  ],
   "semverGroups": [
     {
-      "dependencies": ["codeceptjs", "codeceptjs**", "react-router", "react-router-dom"],
-      "packages": ["**"],
+      "dependencies": [
+        "codeceptjs",
+        "codeceptjs**",
+        "react-router",
+        "react-router-dom",
+        "typescript"
+      ],
+      "packages": [
+        "**"
+      ],
       "isIgnored": true
     },
     {
       "range": "^",
-      "dependencies": ["**"],
-      "packages": ["**"],
-      "dependencyTypes": ["prod", "dev", "peer", "resolutions"]
+      "dependencies": [
+        "**"
+      ],
+      "packages": [
+        "**"
+      ],
+      "dependencyTypes": [
+        "prod",
+        "dev",
+        "peer"
+      ]
     }
   ],
   "versionGroups": [
     {
       "label": "Ensure semver ranges for locally developed packages satisfy the local version",
-      "dependencies": ["@jwp/**", "**-config-jwp"],
-      "dependencyTypes": ["peer"],
-      "packages": ["**"],
+      "dependencies": [
+        "@jwp/**",
+        "**-config-jwp"
+      ],
+      "dependencyTypes": [
+        "peer"
+      ],
+      "packages": [
+        "**"
+      ],
       "pinVersion": "*"
     },
     {
       "label": "Ensure local packages are installed as peerDependency",
-      "dependencies": ["@jwp/**", "**-config-jwp"],
-      "dependencyTypes": ["dev", "prod"],
-      "packages": ["**"],
+      "dependencies": [
+        "@jwp/**",
+        "**-config-jwp"
+      ],
+      "dependencyTypes": [
+        "dev",
+        "prod"
+      ],
+      "packages": [
+        "**"
+      ],
       "isBanned": true
     },
     {
-      "dependencies": ["@types/**"],
-      "dependencyTypes": ["!dev"],
-      "packages": ["**"],
+      "dependencies": [
+        "@types/**"
+      ],
+      "dependencyTypes": [
+        "!dev"
+      ],
+      "packages": [
+        "**"
+      ],
       "isBanned": true,
       "label": "@types packages should only be under devDependencies"
     }
diff --git a/configs/eslint-config-jwp/package.json b/configs/eslint-config-jwp/package.json
index 50921c306..ef0e5c49a 100644
--- a/configs/eslint-config-jwp/package.json
+++ b/configs/eslint-config-jwp/package.json
@@ -7,8 +7,8 @@
     "test": "exit 0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "confusing-browser-globals": "^1.0.10",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-react": "^7.24.0",
diff --git a/configs/eslint-config-jwp/typescript.js b/configs/eslint-config-jwp/typescript.js
index cc4b40fca..5ffa0dede 100644
--- a/configs/eslint-config-jwp/typescript.js
+++ b/configs/eslint-config-jwp/typescript.js
@@ -77,10 +77,6 @@ module.exports = {
     {
       files: ['*.ts', '*.tsx'],
       rules: {
-        // TypeScript 4.0 adds 'any' or 'unknown' type annotation on catch clause variables.
-        // We need to make sure error is of the type we are expecting
-        '@typescript-eslint/no-implicit-any-catch': 'error',
-
         // These are handled by TS
         '@typescript-eslint/no-explicit-any': ['warn', { ignoreRestArgs: true }],
         '@typescript-eslint/explicit-module-boundary-types': 'off',
diff --git a/configs/postcss-config-jwp/package.json b/configs/postcss-config-jwp/package.json
index 884171b26..82252eb78 100644
--- a/configs/postcss-config-jwp/package.json
+++ b/configs/postcss-config-jwp/package.json
@@ -8,10 +8,10 @@
     "test": "exit 0"
   },
   "devDependencies": {
-    "stylelint": "^15.11.0",
     "postcss": "^8.4.31",
     "postcss-import": "^14.0.2",
-    "postcss-scss": "^4.0.4"
+    "postcss-scss": "^4.0.4",
+    "stylelint": "^15.11.0"
   },
   "peerDependencies": {
     "stylelint-config-jwp": "*"
diff --git a/package.json b/package.json
index 407b59ca6..cac289ea3 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@jwp/ott",
   "version": "5.1.1",
+  "private": true,
   "license": "Apache-2.0",
-  "main": "index.js",
   "repository": "https://github.com/jwplayer/ott-web-app.git",
   "author": "JW Player",
-  "private": true,
+  "main": "index.js",
   "engines": {
     "node": ">=18.13.0"
   },
@@ -21,16 +21,16 @@
     "format:eslint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\" --fix",
     "format:prettier": "prettier --write \"{**/*,*}.{js,ts,jsx,tsx}\"",
     "format:stylelint": "stylelint --fix '**/*.{css,scss}'",
-    "pre-commit": "yarn depcheck && lint-staged",
-    "prepare": "husky install",
+    "i18next": "i18next 'platforms/*/src/**/*.{ts,tsx}' 'packages/*/src/**/*.{ts,tsx}' && node ./scripts/i18next/generate.js",
+    "i18next-diff": "npx ts-node ./scripts/i18next/diff-translations",
+    "i18next-update": "npx ts-node ./scripts/i18next/update-translations.ts && yarn i18next",
     "lint": "run-p -c lint:*",
     "lint:eslint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
     "lint:prettier": "prettier --check \"{**/*,*}.{js,ts,jsx,tsx}\"",
-    "lint:ts": "tsc --pretty --noEmit -p ./scripts && yarn workspaces run lint:ts",
     "lint:stylelint": "stylelint '**/*.{css,scss}'",
-    "i18next": "i18next 'platforms/*/src/**/*.{ts,tsx}' 'packages/*/src/**/*.{ts,tsx}' && node ./scripts/i18next/generate.js",
-    "i18next-diff": "npx ts-node ./scripts/i18next/diff-translations",
-    "i18next-update": "npx ts-node ./scripts/i18next/update-translations.ts && yarn i18next",
+    "lint:ts": "tsc --pretty --noEmit -p ./scripts && yarn workspaces run lint:ts",
+    "pre-commit": "yarn depcheck && lint-staged",
+    "prepare": "husky install",
     "test": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run",
     "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest"
   },
@@ -40,7 +40,7 @@
     "@types/node": "^18.15.3",
     "csv-parse": "^5.4.0",
     "depcheck": "^1.4.3",
-    "eslint": "^7.31.0",
+    "eslint": "^8.57.0",
     "husky": "^6.0.0",
     "i18next-parser": "^8.0.0",
     "lint-staged": "^15.1.0",
@@ -48,18 +48,17 @@
     "prettier": "^2.8.8",
     "read": "^2.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.3.4",
-    "vitest": "^0.34.6"
+    "typescript": "5.3.3",
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
     "eslint-config-jwp": "*"
   },
   "resolutions": {
-    "glob-parent": "^5.1.2",
     "codeceptjs/**/ansi-regex": "^4.1.1",
     "codeceptjs/**/minimatch": "^3.0.5",
     "flat": "^5.0.1",
-    "json5": "^2.2.2",
-    "vite": "^4.4.8"
+    "glob-parent": "^5.1.2",
+    "json5": "^2.2.2"
   }
 }
diff --git a/packages/common/package.json b/packages/common/package.json
index 6b15d2649..97e8e714d 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@jwp/ott-common",
   "version": "4.30.0",
-  "main": "./src",
   "private": true,
+  "main": "./src",
   "scripts": {
     "lint:ts": "tsc --pretty --noEmit -p ./",
     "test": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run",
-    "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest",
-    "test-update": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run --update"
+    "test-update": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run --update",
+    "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest"
   },
   "dependencies": {
     "@inplayer-org/inplayer.js": "^3.13.24",
@@ -30,7 +30,7 @@
     "jsdom": "^22.1.0",
     "timezone-mock": "^1.3.4",
     "vi-fetch": "^0.8.0",
-    "vitest": "^0.34.6"
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
     "@jwp/ott-testing": "*",
diff --git a/packages/common/src/controllers/AccountController.ts b/packages/common/src/controllers/AccountController.ts
index bc51b6c59..5ee095675 100644
--- a/packages/common/src/controllers/AccountController.ts
+++ b/packages/common/src/controllers/AccountController.ts
@@ -208,6 +208,8 @@ export default class AccountController {
 
         if (errorMessage.includes('customer already exists') || errorMessage.includes('account already exists')) {
           throw new FormValidationError({ form: [i18next.t('account:registration.user_exists')] });
+        } else if (errorMessage.includes('please enter a valid e-mail address')) {
+          throw new FormValidationError({ email: [i18next.t('account:registration.field_is_not_valid_email')] });
         } else if (errorMessage.includes('invalid param password')) {
           throw new FormValidationError({ password: [i18next.t('account:registration.invalid_password')] });
         }
@@ -467,7 +469,17 @@ export default class AccountController {
     assertModuleMethod(this.accountService.deleteAccount, 'deleteAccount is not available in account service');
     assertFeature(canDeleteAccount, 'Delete account');
 
-    return this.accountService.deleteAccount({ password });
+    try {
+      await this.accountService.deleteAccount({ password });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message.toLowerCase() : '';
+
+      if (message.includes('invalid credentials')) {
+        throw new FormValidationError({ form: [i18next.t('user:account.delete_account.invalid_credentials')] });
+      }
+
+      throw new FormValidationError({ form: [i18next.t('user:account.delete_account.error')] });
+    }
   };
 
   getReceipt = async (transactionId: string) => {
diff --git a/packages/common/src/controllers/CheckoutController.ts b/packages/common/src/controllers/CheckoutController.ts
index d9801546f..63362677e 100644
--- a/packages/common/src/controllers/CheckoutController.ts
+++ b/packages/common/src/controllers/CheckoutController.ts
@@ -15,7 +15,6 @@ import type {
   Order,
   Payment,
   PaymentMethod,
-  SwitchOffer,
 } from '../../types/checkout';
 import CheckoutService from '../services/integrations/CheckoutService';
 import SubscriptionService from '../services/integrations/SubscriptionService';
@@ -27,6 +26,7 @@ import AccountService from '../services/integrations/AccountService';
 import { useCheckoutStore } from '../stores/CheckoutStore';
 import { useAccountStore } from '../stores/AccountStore';
 import { FormValidationError } from '../errors/FormValidationError';
+import { determineSwitchDirection } from '../utils/subscription';
 
 @injectable()
 export default class CheckoutController {
@@ -42,11 +42,30 @@ export default class CheckoutController {
     this.subscriptionService = getNamedModule(SubscriptionService, integrationType);
   }
 
-  getSubscriptionOfferIds = () => {
-    return this.accountService.svodOfferIds;
+  initialiseOffers = async () => {
+    const requestedMediaOffers = useCheckoutStore.getState().requestedMediaOffers;
+    const mediaOffers = requestedMediaOffers ? await this.getOffers({ offerIds: requestedMediaOffers.map(({ offerId }) => offerId) }) : [];
+    useCheckoutStore.setState({ mediaOffers });
+
+    if (!useCheckoutStore.getState().subscriptionOffers.length && this.accountService.svodOfferIds) {
+      const subscriptionOffers = await this.getOffers({ offerIds: this.accountService.svodOfferIds });
+      useCheckoutStore.setState({ subscriptionOffers });
+    }
+
+    if (!useCheckoutStore.getState().switchSubscriptionOffers.length) {
+      const subscriptionSwitches = await this.getSubscriptionSwitches();
+      const switchSubscriptionOffers = subscriptionSwitches ? await this.getOffers({ offerIds: subscriptionSwitches }) : [];
+      useCheckoutStore.setState({ switchSubscriptionOffers });
+    }
+  };
+
+  getSubscriptionOfferIds = () => this.accountService.svodOfferIds;
+
+  chooseOffer = async (selectedOffer: Offer) => {
+    useCheckoutStore.setState({ selectedOffer });
   };
 
-  createOrder = async (offer: Offer): Promise<void> => {
+  initialiseOrder = async (offer: Offer): Promise<void> => {
     const { getAccountInfo } = useAccountStore.getState();
     const { customer } = getAccountInfo();
 
@@ -227,7 +246,7 @@ export default class CheckoutController {
     };
   };
 
-  getSubscriptionSwitches = async (): Promise<unknown> => {
+  getSubscriptionSwitches = async (): Promise<string[] | null> => {
     const { getAccountInfo } = useAccountStore.getState();
 
     const { customerId } = getAccountInfo();
@@ -237,46 +256,38 @@ export default class CheckoutController {
 
     const { subscription } = useAccountStore.getState();
 
-    if (!subscription) return;
+    if (!subscription) return null;
 
     const response = await this.checkoutService.getSubscriptionSwitches({
       customerId: customerId,
       offerId: subscription.offerId,
     });
 
-    if (!response.responseData.available.length) return;
-
-    // create variable for `getOffer` to ensure it's typed in `Array#map` scope
-    const getOfferDelegate = this.checkoutService.getOffer;
-    const switchOffers = response.responseData.available.map((offer: SwitchOffer) => getOfferDelegate({ offerId: offer.toOfferId }));
-    const offers = await Promise.all(switchOffers);
+    if (!response.responseData.available.length) return null;
 
-    // Sort offers for proper ordering in "Choose Offer" modal when applicable
-    const offerSwitches = offers.sort((a, b) => a?.responseData.offerPrice - b?.responseData.offerPrice).map((item) => item.responseData);
-    useCheckoutStore.setState({ offerSwitches });
+    return response.responseData.available.map(({ toOfferId }) => toOfferId);
   };
 
-  switchSubscription = async (toOfferId: string, switchDirection: 'upgrade' | 'downgrade'): Promise<unknown> => {
+  switchSubscription = async () => {
+    const selectedOffer = useCheckoutStore.getState().selectedOffer;
+    const subscription = useAccountStore.getState().subscription;
     const { getAccountInfo } = useAccountStore.getState();
-
     const { customerId } = getAccountInfo();
 
+    if (!selectedOffer || !subscription) throw new Error('No offer selected');
+
     assertModuleMethod(this.checkoutService.switchSubscription, 'switchSubscription is not available in checkout service');
 
-    const { subscription } = useAccountStore.getState();
-    if (!subscription) return;
+    const switchDirection: 'upgrade' | 'downgrade' = determineSwitchDirection(subscription);
 
-    const SwitchSubscriptionPayload = {
-      toOfferId,
+    const switchSubscriptionPayload = {
+      toOfferId: selectedOffer.offerId,
       customerId: customerId,
       offerId: subscription.offerId,
       switchDirection: switchDirection,
     };
 
-    await this.checkoutService.switchSubscription(SwitchSubscriptionPayload);
-
-    // clear current offers
-    useCheckoutStore.setState({ offerSwitches: [] });
+    await this.checkoutService.switchSubscription(switchSubscriptionPayload);
   };
 
   changeSubscription = async ({ accessFeeId, subscriptionId }: { accessFeeId: string; subscriptionId: string }) => {
diff --git a/packages/common/src/services/integrations/cleeng/CleengAccountService.ts b/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
index 40c55a285..7ff3dfe27 100644
--- a/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
+++ b/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
@@ -199,10 +199,11 @@ export default class CleengAccountService extends AccountService {
 
     await this.cleengService.setTokens({ accessToken: auth.jwt, refreshToken: auth.refreshToken });
 
-    const { user, customerConsents } = await this.getUser();
+    const { user } = await this.getUser();
 
-    await this.updateCustomerConsents({ consents, customer: user }).catch(() => {
+    const customerConsents = await this.updateCustomerConsents({ consents, customer: user }).catch(() => {
       // error caught while updating the consents, but continue the registration process
+      return [];
     });
 
     return {
diff --git a/packages/common/src/services/integrations/jwp/JWPAccountService.ts b/packages/common/src/services/integrations/jwp/JWPAccountService.ts
index 379dbb19d..d0b8b865e 100644
--- a/packages/common/src/services/integrations/jwp/JWPAccountService.ts
+++ b/packages/common/src/services/integrations/jwp/JWPAccountService.ts
@@ -73,23 +73,6 @@ export default class JWPAccountService extends AccountService {
     this.storageService = storageService;
   }
 
-  private getCustomerExternalData = async () => {
-    const [favoritesData, historyData] = await Promise.all([InPlayer.Account.getFavorites(), await InPlayer.Account.getWatchHistory({})]);
-
-    const favorites = favoritesData.data?.collection?.map((favorite: FavoritesData) => {
-      return this.formatFavorite(favorite);
-    });
-
-    const history = historyData.data?.collection?.map((history: WatchHistory) => {
-      return this.formatHistoryItem(history);
-    });
-
-    return {
-      favorites,
-      history,
-    };
-  };
-
   private parseJson = (value: string, fallback = {}) => {
     try {
       return JSON.parse(value);
@@ -132,11 +115,6 @@ export default class JWPAccountService extends AccountService {
     };
   };
 
-  private async getAccountMetadata(account: AccountData) {
-    const shelves = await this.getCustomerExternalData();
-    return { ...account.metadata, ...shelves };
-  }
-
   private formatAuth(auth: InPlayerAuthData): AuthData {
     const { access_token: jwt } = auth;
     return {
@@ -313,7 +291,6 @@ export default class JWPAccountService extends AccountService {
       });
 
       const user = this.formatAccount(data.account);
-      user.metadata = await this.getAccountMetadata(data.account);
 
       return {
         auth: this.formatAuth(data),
@@ -344,7 +321,6 @@ export default class JWPAccountService extends AccountService {
       });
 
       const user = this.formatAccount(data.account);
-      user.metadata = await this.getAccountMetadata(data.account);
 
       return {
         auth: this.formatAuth(data),
@@ -378,7 +354,6 @@ export default class JWPAccountService extends AccountService {
       const { data } = await InPlayer.Account.getAccountInfo();
 
       const user = this.formatAccount(data);
-      user.metadata = await this.getAccountMetadata(data);
 
       return {
         user,
@@ -475,12 +450,12 @@ export default class JWPAccountService extends AccountService {
   };
 
   updateWatchHistory: UpdateWatchHistory = async ({ history }) => {
-    const externalData = await this.getCustomerExternalData();
-    const savedHistory = externalData.history?.map((e) => e.mediaid) || [];
+    const current = await this.getWatchHistory();
+    const savedHistory = current.map((e) => e.mediaid) || [];
 
     await Promise.allSettled(
       history.map(({ mediaid, progress }) => {
-        if (!savedHistory.includes(mediaid) || externalData.history?.some((e) => e.mediaid == mediaid && e.progress != progress)) {
+        if (!savedHistory.includes(mediaid) || current.some((e) => e.mediaid == mediaid && e.progress != progress)) {
           return InPlayer.Account.updateWatchHistory(mediaid, progress);
         }
       }),
@@ -488,8 +463,8 @@ export default class JWPAccountService extends AccountService {
   };
 
   updateFavorites: UpdateFavorites = async ({ favorites }) => {
-    const externalData = await this.getCustomerExternalData();
-    const currentFavoriteIds = externalData?.favorites?.map((e) => e.mediaid) || [];
+    const current = await this.getFavorites();
+    const currentFavoriteIds = current.map((e) => e.mediaid) || [];
     const payloadFavoriteIds = favorites.map((e) => e.mediaid);
 
     // save new favorites
@@ -549,7 +524,11 @@ export default class JWPAccountService extends AccountService {
       const response = await InPlayer.Account.deleteAccount({ password, brandingId: 0 });
 
       return response.data;
-    } catch {
+    } catch (error: unknown) {
+      if (isCommonError(error)) {
+        throw new Error(error.response.data.message || 'Failed to delete account');
+      }
+
       throw new Error('Failed to delete account');
     }
   };
diff --git a/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts b/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts
index 453eac280..006071ce1 100644
--- a/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts
+++ b/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts
@@ -1,7 +1,7 @@
 import InPlayer, { type AccessFee, type MerchantPaymentMethod } from '@inplayer-org/inplayer.js';
 import { injectable } from 'inversify';
 
-import { isSVODOffer } from '../../../utils/subscription';
+import { isSVODOffer } from '../../../utils/offers';
 import type {
   CardPaymentData,
   CreateOrder,
diff --git a/packages/common/src/stores/CheckoutStore.ts b/packages/common/src/stores/CheckoutStore.ts
index 273a56441..0fa3fddaf 100644
--- a/packages/common/src/stores/CheckoutStore.ts
+++ b/packages/common/src/stores/CheckoutStore.ts
@@ -4,27 +4,29 @@ import type { MediaOffer } from '../../types/media';
 import { createStore } from './utils';
 
 type CheckoutStore = {
-  offer: Offer | null;
+  requestedMediaOffers: MediaOffer[];
+  mediaOffers: Offer[];
+  subscriptionOffers: Offer[];
+  switchSubscriptionOffers: Offer[];
+  selectedOffer: Offer | null;
+  defaultOfferId: string | null;
   order: Order | null;
   paymentMethods: PaymentMethod[] | null;
-  requestedMediaOffers: MediaOffer[] | null;
-  offerSwitches: Offer[];
-  updateOffer: (offer: Offer | null) => void;
-  setOffer: (offer: Offer | null) => void;
+  setRequestedMediaOffers: (requestedMediaOffers: MediaOffer[]) => void;
   setOrder: (order: Order | null) => void;
   setPaymentMethods: (paymentMethods: PaymentMethod[] | null) => void;
-  setRequestedMediaOffers: (requestedMediaOffers: MediaOffer[] | null) => void;
 };
 
 export const useCheckoutStore = createStore<CheckoutStore>('CheckoutStore', (set) => ({
-  offer: null,
+  requestedMediaOffers: [],
+  mediaOffers: [],
+  subscriptionOffers: [],
+  switchSubscriptionOffers: [],
+  selectedOffer: null,
+  defaultOfferId: null,
   order: null,
   paymentMethods: null,
-  requestedMediaOffers: null,
-  offerSwitches: [],
-  updateOffer: (offer) => set({ offer: offer }),
-  setOffer: (offer) => set({ offer }),
+  setRequestedMediaOffers: (requestedMediaOffers) => set({ requestedMediaOffers }),
   setOrder: (order) => set({ order }),
   setPaymentMethods: (paymentMethods) => set({ paymentMethods }),
-  setRequestedMediaOffers: (requestedMediaOffers) => set({ requestedMediaOffers }),
 }));
diff --git a/packages/common/src/utils/formatting.ts b/packages/common/src/utils/formatting.ts
index c18e434f9..83a8cb06a 100644
--- a/packages/common/src/utils/formatting.ts
+++ b/packages/common/src/utils/formatting.ts
@@ -1,7 +1,5 @@
-import type { Playlist, PlaylistItem } from '../../types/playlist';
-
-export const formatDurationTag = (seconds: number): string | null => {
-  if (!seconds) return null;
+export const formatDurationTag = (seconds: number) => {
+  if (!seconds) return '';
 
   const minutes = Math.ceil(seconds / 60);
 
@@ -15,17 +13,17 @@ export const formatDurationTag = (seconds: number): string | null => {
  * Hours are only shown if at least 1
  * Minutes get rounded
  *
- * @returns string, such as '2h 24m' or '31m'
+ * @returns string, such as '2hrs 24min' or '31min'
  */
 
-export const formatDuration = (duration: number): string | null => {
-  if (!duration) return null;
+export const formatDuration = (duration: number) => {
+  if (!duration) return '';
 
   const hours = Math.floor(duration / 3600);
   const minutes = Math.round((duration - hours * 3600) / 60);
 
-  const hoursString = hours ? `${hours}h ` : '';
-  const minutesString = minutes ? `${minutes}m ` : '';
+  const hoursString = hours ? `${hours}hrs ` : '';
+  const minutesString = minutes ? `${minutes}min ` : '';
 
   return `${hoursString}${minutesString}`;
 };
@@ -37,28 +35,6 @@ export const formatPrice = (price: number, currency: string, country?: string) =
   }).format(price);
 };
 
-export const formatVideoMetaString = (item: PlaylistItem, episodesLabel?: string) => {
-  const metaData = [];
-
-  if (item.pubdate) metaData.push(new Date(item.pubdate * 1000).getFullYear());
-  if (!episodesLabel && item.duration) metaData.push(formatDuration(item.duration));
-  if (episodesLabel) metaData.push(episodesLabel);
-  if (item.genre) metaData.push(item.genre);
-  if (item.rating) metaData.push(item.rating);
-
-  return metaData.join(' • ');
-};
-
-export const formatPlaylistMetaString = (item: Playlist, episodesLabel?: string) => {
-  const metaData = [];
-
-  if (episodesLabel) metaData.push(episodesLabel);
-  if (item.genre) metaData.push(item.genre);
-  if (item.rating) metaData.push(item.rating);
-
-  return metaData.join(' • ');
-};
-
 export const formatSeriesMetaString = (seasonNumber?: string, episodeNumber?: string) => {
   if (!seasonNumber && !episodeNumber) {
     return '';
@@ -67,18 +43,6 @@ export const formatSeriesMetaString = (seasonNumber?: string, episodeNumber?: st
   return seasonNumber && seasonNumber !== '0' ? `S${seasonNumber}:E${episodeNumber}` : `E${episodeNumber}`;
 };
 
-export const formatLiveEventMetaString = (media: PlaylistItem, locale: string) => {
-  const metaData = [];
-  const scheduled = formatVideoSchedule(locale, media.scheduledStart, media.scheduledEnd);
-
-  if (scheduled) metaData.push(scheduled);
-  if (media.duration) metaData.push(formatDuration(media.duration));
-  if (media.genre) metaData.push(media.genre);
-  if (media.rating) metaData.push(media.rating);
-
-  return metaData.join(' • ');
-};
-
 export const formatVideoSchedule = (locale: string, scheduledStart?: Date, scheduledEnd?: Date) => {
   if (!scheduledStart) {
     return '';
diff --git a/packages/common/src/utils/media.ts b/packages/common/src/utils/media.ts
index 024ee6038..cc0fa17bc 100644
--- a/packages/common/src/utils/media.ts
+++ b/packages/common/src/utils/media.ts
@@ -1,5 +1,5 @@
-import { CONTENT_TYPE } from '../constants';
 import type { Playlist, PlaylistItem } from '../../types/playlist';
+import { CONTENT_TYPE } from '../constants';
 
 type RequiredProperties<T, P extends keyof T> = T & Required<Pick<T, P>>;
 
diff --git a/packages/common/src/utils/metadata.ts b/packages/common/src/utils/metadata.ts
new file mode 100644
index 000000000..3d7c12d90
--- /dev/null
+++ b/packages/common/src/utils/metadata.ts
@@ -0,0 +1,37 @@
+import type { Playlist, PlaylistItem } from '../../types/playlist';
+
+import { formatDuration, formatVideoSchedule } from './formatting';
+
+export const createVideoMetadata = (media: PlaylistItem, episodesLabel?: string) => {
+  const metaData = [];
+  const duration = formatDuration(media.duration);
+
+  if (media.pubdate) metaData.push(String(new Date(media.pubdate * 1000).getFullYear()));
+  if (!episodesLabel && duration) metaData.push(duration);
+  if (episodesLabel) metaData.push(episodesLabel);
+  if (media.genre) metaData.push(media.genre);
+  if (media.rating) metaData.push(media.rating);
+
+  return metaData;
+};
+export const createPlaylistMetadata = (playlist: Playlist, episodesLabel?: string) => {
+  const metaData = [];
+
+  if (episodesLabel) metaData.push(episodesLabel);
+  if (playlist.genre) metaData.push(playlist.genre as string);
+  if (playlist.rating) metaData.push(playlist.rating as string);
+
+  return metaData;
+};
+export const createLiveEventMetadata = (media: PlaylistItem, locale: string) => {
+  const metaData = [];
+  const scheduled = formatVideoSchedule(locale, media.scheduledStart, media.scheduledEnd);
+  const duration = formatDuration(media.duration);
+
+  if (scheduled) metaData.push(scheduled);
+  if (duration) metaData.push(duration);
+  if (media.genre) metaData.push(media.genre);
+  if (media.rating) metaData.push(media.rating);
+
+  return metaData;
+};
diff --git a/packages/common/src/utils/offers.ts b/packages/common/src/utils/offers.ts
index 0fc8d4a34..d87001355 100644
--- a/packages/common/src/utils/offers.ts
+++ b/packages/common/src/utils/offers.ts
@@ -1,7 +1,7 @@
-import type { MediaOffer } from '../../types/media';
+import type { Offer, Order } from '../../types/checkout';
 
-export const mergeOfferIds = (mediaOffers: MediaOffer[] = [], svodOfferIds: string[] = []) => {
-  const mediaOfferIds = mediaOffers.map(({ offerId }) => offerId);
+import { formatPrice } from './formatting';
 
-  return [...mediaOfferIds, ...svodOfferIds];
-};
+export const getOfferPrice = (offer: Offer) => formatPrice(offer.customerPriceInclTax, offer.customerCurrency, offer.customerCountry);
+
+export const isSVODOffer = (offer: Offer | Order) => offer.offerId?.[0] === 'S';
diff --git a/packages/common/src/utils/subscription.ts b/packages/common/src/utils/subscription.ts
index d87001355..41b038541 100644
--- a/packages/common/src/utils/subscription.ts
+++ b/packages/common/src/utils/subscription.ts
@@ -1,7 +1,10 @@
-import type { Offer, Order } from '../../types/checkout';
+import type { Subscription } from '../../types/subscription';
 
-import { formatPrice } from './formatting';
+export const determineSwitchDirection = (subscription: Subscription | null) => {
+  const currentPeriod = subscription?.period;
 
-export const getOfferPrice = (offer: Offer) => formatPrice(offer.customerPriceInclTax, offer.customerCurrency, offer.customerCountry);
+  if (currentPeriod === 'month') return 'upgrade';
+  if (currentPeriod === 'year') return 'downgrade';
 
-export const isSVODOffer = (offer: Offer | Order) => offer.offerId?.[0] === 'S';
+  return 'upgrade'; // Default to 'upgrade' if the period is not 'month' or 'year'
+};
diff --git a/packages/common/types/checkout.ts b/packages/common/types/checkout.ts
index f70db624a..89210f117 100644
--- a/packages/common/types/checkout.ts
+++ b/packages/common/types/checkout.ts
@@ -47,7 +47,8 @@ export type Offer = {
 export type OfferType = 'svod' | 'tvod';
 
 export type ChooseOfferFormData = {
-  offerId?: string;
+  selectedOfferType?: OfferType;
+  selectedOfferId?: string;
 };
 
 export type OrderOffer = {
diff --git a/packages/hooks-react/package.json b/packages/hooks-react/package.json
index 22d6b4494..39761a0cc 100644
--- a/packages/hooks-react/package.json
+++ b/packages/hooks-react/package.json
@@ -5,8 +5,8 @@
   "scripts": {
     "lint:ts": "tsc --pretty --noEmit -p ./",
     "test": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run",
-    "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest",
-    "test-update": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run --update"
+    "test-update": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run --update",
+    "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest"
   },
   "dependencies": {
     "@inplayer-org/inplayer.js": "^3.13.24",
@@ -24,7 +24,7 @@
     "@testing-library/react": "^14.0.0",
     "@types/jwplayer": "^8.2.13",
     "vi-fetch": "^0.8.0",
-    "vitest": "^0.34.6"
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
     "@jwp/ott-common": "*",
diff --git a/packages/hooks-react/src/useCheckAccess.ts b/packages/hooks-react/src/useCheckAccess.ts
index 1926bb15a..4c55dca48 100644
--- a/packages/hooks-react/src/useCheckAccess.ts
+++ b/packages/hooks-react/src/useCheckAccess.ts
@@ -31,7 +31,7 @@ const useCheckAccess = () => {
         const hasAccess = await accountController.checkEntitlements(offerId);
 
         if (hasAccess) {
-          await accountController.reloadSubscriptions();
+          await accountController.reloadSubscriptions({ delay: 2000 }); // Delay needed for backend processing (Cleeng API returns empty subscription, even after accessGranted from entitlements call
           callback?.(true);
         } else if (--iterations === 0) {
           window.clearInterval(intervalRef.current);
diff --git a/packages/hooks-react/src/useCheckout.ts b/packages/hooks-react/src/useCheckout.ts
index af93f6080..29614f08b 100644
--- a/packages/hooks-react/src/useCheckout.ts
+++ b/packages/hooks-react/src/useCheckout.ts
@@ -3,7 +3,7 @@ import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutControll
 import type { FormValidationError } from '@jwp/ott-common/src/errors/FormValidationError';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
-import { isSVODOffer } from '@jwp/ott-common/src/utils/subscription';
+import { isSVODOffer } from '@jwp/ott-common/src/utils/offers';
 import type { CardPaymentData, Offer, OfferType, Payment } from '@jwp/ott-common/types/checkout';
 import { useEffect } from 'react';
 import { useMutation } from 'react-query';
@@ -19,18 +19,18 @@ const useCheckout = ({ onUpdateOrderSuccess, onSubmitPaymentWithoutDetailsSucces
   const accountController = getModule(AccountController);
   const checkoutController = getModule(CheckoutController);
 
-  const { order, offer, paymentMethods, setOrder } = useCheckoutStore(({ order, offer, paymentMethods, setOrder }) => ({
+  const { order, selectedOffer, paymentMethods, setOrder } = useCheckoutStore(({ order, selectedOffer, paymentMethods, setOrder }) => ({
     order,
-    offer,
+    selectedOffer,
     paymentMethods,
     setOrder,
   }));
 
-  const offerType: OfferType = offer && !isSVODOffer(offer) ? 'tvod' : 'svod';
+  const offerType: OfferType = selectedOffer && isSVODOffer(selectedOffer) ? 'svod' : 'tvod';
 
-  const createOrder = useMutation<void, FormValidationError, { offer: Offer }>({
-    mutationKey: ['createOrder'],
-    mutationFn: async ({ offer }) => !!offer && checkoutController.createOrder(offer),
+  const initialiseOrder = useMutation<void, FormValidationError, { offer: Offer }>({
+    mutationKey: ['initialiseOrder'],
+    mutationFn: async ({ offer }) => !!offer && checkoutController.initialiseOrder(offer),
   });
 
   const updateOrder = useMutation<void, string, { paymentMethodId: number; couponCode: string }>({
@@ -69,10 +69,10 @@ const useCheckout = ({ onUpdateOrderSuccess, onSubmitPaymentWithoutDetailsSucces
   });
 
   useEffect(() => {
-    if (offer && !order && !createOrder.isLoading) {
-      createOrder.mutate({ offer });
+    if (selectedOffer && !order && !initialiseOrder.isLoading && !initialiseOrder.isError) {
+      initialiseOrder.mutate({ offer: selectedOffer });
     }
-  }, [offer, order, createOrder]);
+  }, [selectedOffer, order, initialiseOrder]);
 
   // Clear the order when unmounted
   useEffect(() => {
@@ -80,10 +80,14 @@ const useCheckout = ({ onUpdateOrderSuccess, onSubmitPaymentWithoutDetailsSucces
   }, [setOrder]);
 
   const isSubmitting =
-    createOrder.isLoading || updateOrder.isLoading || submitPaymentWithoutDetails.isLoading || submitPaymentPaypal.isLoading || submitPaymentStripe.isLoading;
+    initialiseOrder.isLoading ||
+    updateOrder.isLoading ||
+    submitPaymentWithoutDetails.isLoading ||
+    submitPaymentPaypal.isLoading ||
+    submitPaymentStripe.isLoading;
 
   return {
-    offer,
+    selectedOffer,
     offerType,
     paymentMethods,
     order,
diff --git a/packages/hooks-react/src/useForm.ts b/packages/hooks-react/src/useForm.ts
index fd5ef87c0..3908b67ad 100644
--- a/packages/hooks-react/src/useForm.ts
+++ b/packages/hooks-react/src/useForm.ts
@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { type AnySchema, ValidationError, SchemaOf } from 'yup';
+import { type AnySchema, ValidationError, type SchemaOf } from 'yup';
 import type { FormErrors, GenericFormValues, UseFormBlurHandler, UseFormChangeHandler, UseFormSubmitHandler } from '@jwp/ott-common/types/form';
 import { FormValidationError } from '@jwp/ott-common/src/errors/FormValidationError';
 import { useTranslation } from 'react-i18next';
@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 export type UseFormReturnValue<T> = {
   values: T;
   errors: FormErrors<T>;
+  validationSchemaError: boolean;
   submitting: boolean;
   handleChange: UseFormChangeHandler;
   handleBlur: UseFormBlurHandler;
@@ -14,6 +15,7 @@ export type UseFormReturnValue<T> = {
   setValue: (key: keyof T, value: T[keyof T]) => void;
   setErrors: (errors: FormErrors<T>) => void;
   setSubmitting: (submitting: boolean) => void;
+  setValidationSchemaError: (error: boolean) => void;
   reset: () => void;
 };
 
@@ -21,6 +23,7 @@ type UseFormMethods<T> = {
   setValue: (key: keyof T, value: string | boolean) => void;
   setErrors: (errors: FormErrors<T>) => void;
   setSubmitting: (submitting: boolean) => void;
+  setValidationSchemaError: (error: boolean) => void;
   validate: (validationSchema: AnySchema) => boolean;
 };
 
@@ -48,10 +51,12 @@ export default function useForm<T extends GenericFormValues>({
   const [values, setValues] = useState<T>(initialValues);
   const [submitting, setSubmitting] = useState(false);
   const [errors, setErrors] = useState<FormErrors<T>>({});
+  const [validationSchemaError, setValidationSchemaError] = useState(false);
 
   const reset = useCallback(() => {
     setValues(initialValues);
     setErrors({});
+    setValidationSchemaError(false);
     setSubmitting(false);
     setTouched(Object.fromEntries((Object.keys(initialValues) as Array<keyof T>).map((key) => [key, false])) as Record<keyof T, boolean>);
   }, [initialValues]);
@@ -68,6 +73,7 @@ export default function useForm<T extends GenericFormValues>({
       if (error instanceof ValidationError) {
         const errorMessage = error.errors[0];
         setErrors((errors) => ({ ...errors, [name]: errorMessage }));
+        setValidationSchemaError(true);
       }
     }
   };
@@ -114,6 +120,12 @@ export default function useForm<T extends GenericFormValues>({
           }
         }
 
+        if (error.inner.every((error) => error.type === 'required')) {
+          newErrors.form = t('validation_form_error.required');
+        } else {
+          newErrors.form = t('validation_form_error.other');
+        }
+
         setErrors(newErrors as FormErrors<T>);
       }
     }
@@ -128,9 +140,11 @@ export default function useForm<T extends GenericFormValues>({
 
     // reset errors before submitting
     setErrors({});
+    setValidationSchemaError(false);
 
     // validate values with schema
     if (validationSchema && !validate(validationSchema)) {
+      setValidationSchemaError(true);
       return;
     }
 
@@ -138,15 +152,15 @@ export default function useForm<T extends GenericFormValues>({
     setSubmitting(true);
 
     try {
-      await onSubmit(values, { setValue, setErrors, setSubmitting, validate });
+      await onSubmit(values, { setValue, setErrors, setSubmitting, setValidationSchemaError, validate });
       onSubmitSuccess?.(values);
     } catch (error: unknown) {
       const newErrors: Record<string, string> = {};
 
       if (error instanceof FormValidationError) {
-        Object.entries(error.errors).forEach(([key, [value]]) => {
+        Object.entries(error.errors).forEach(([key, value]) => {
           if (key && value && !newErrors[key]) {
-            newErrors[key] = value;
+            newErrors[key] = value.join(',');
           }
         });
       } else if (error instanceof Error) {
@@ -165,5 +179,18 @@ export default function useForm<T extends GenericFormValues>({
     setSubmitting(false);
   };
 
-  return { values, errors, handleChange, handleBlur, handleSubmit, submitting, setValue, setErrors, setSubmitting, reset };
+  return {
+    values,
+    errors,
+    validationSchemaError,
+    handleChange,
+    handleBlur,
+    handleSubmit,
+    submitting,
+    setValue,
+    setErrors,
+    setSubmitting,
+    setValidationSchemaError,
+    reset,
+  };
 }
diff --git a/packages/hooks-react/src/useOffers.ts b/packages/hooks-react/src/useOffers.ts
index a29bbc855..b62ef8865 100644
--- a/packages/hooks-react/src/useOffers.ts
+++ b/packages/hooks-react/src/useOffers.ts
@@ -1,45 +1,62 @@
-import { useQuery } from 'react-query';
-import { useMemo, useState } from 'react';
+import { useMutation } from 'react-query';
+import { useEffect } from 'react';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
-import { mergeOfferIds } from '@jwp/ott-common/src/utils/offers';
-import type { Offer, OfferType } from '@jwp/ott-common/types/checkout';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
 import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
-import { isSVODOffer } from '@jwp/ott-common/src/utils/subscription';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import type { OfferType } from '@jwp/ott-common/types/checkout';
 
 const useOffers = () => {
   const checkoutController = getModule(CheckoutController);
-  const svodOfferIds = checkoutController.getSubscriptionOfferIds();
-  const { requestedMediaOffers: mediaOffers } = useCheckoutStore(({ requestedMediaOffers }) => ({ requestedMediaOffers }), shallow);
-  const hasPremierOffers = mediaOffers?.some((offer) => offer.premier);
-  const hasMultipleOfferTypes = !hasPremierOffers && !!mediaOffers?.length && !!svodOfferIds.length;
-  const offerIds: string[] = mergeOfferIds(mediaOffers || [], svodOfferIds);
-
-  const [offerType, setOfferType] = useState<OfferType>(hasPremierOffers || !svodOfferIds.length ? 'tvod' : 'svod');
-  const updateOfferType = useMemo(() => (hasMultipleOfferTypes ? (type: OfferType) => setOfferType(type) : undefined), [hasMultipleOfferTypes]);
-
-  const { data: allOffers, isLoading } = useQuery(['offers', offerIds.join('-')], () => checkoutController.getOffers({ offerIds }));
-
-  // The `offerQueries` variable mutates on each render which prevents the useMemo to work properly.
-  return useMemo(() => {
-    const offers = (allOffers || []).filter((offer: Offer) => (offerType === 'tvod' ? !isSVODOffer(offer) : isSVODOffer(offer)));
-
-    const offersDict = (!isLoading && Object.fromEntries(offers.map((offer: Offer) => [offer.offerId, offer]))) || {};
-    // we need to get the offerIds from the offer responses since it contains different offerIds based on the customers'
-    // location. E.g. if an offer is configured as `S12345678` it becomes `S12345678_US` in the US.
-    const defaultOfferId = (!isLoading && offers[offers.length - 1]?.offerId) || '';
-
-    return {
-      hasMediaOffers: allOffers?.some((offer: Offer) => !isSVODOffer(offer)),
-      isLoading,
-      defaultOfferId,
-      offerType,
-      setOfferType: updateOfferType,
-      offers,
-      offersDict,
-    };
-  }, [allOffers, isLoading, offerType, updateOfferType]);
+  const accountController = getModule(AccountController);
+
+  const { mediaOffers, subscriptionOffers, switchSubscriptionOffers, requestedMediaOffers } = useCheckoutStore(
+    ({ mediaOffers, subscriptionOffers, switchSubscriptionOffers, requestedMediaOffers }) => ({
+      mediaOffers,
+      subscriptionOffers,
+      switchSubscriptionOffers,
+      requestedMediaOffers,
+    }),
+    shallow,
+  );
+
+  const { mutate: initialise, isLoading: isInitialisationLoading } = useMutation<void>({
+    mutationKey: ['initialiseOffers', requestedMediaOffers],
+    mutationFn: checkoutController.initialiseOffers,
+  });
+
+  const chooseOffer = useMutation({
+    mutationKey: ['chooseOffer'],
+    mutationFn: checkoutController.chooseOffer,
+  });
+
+  const switchSubscription = useMutation({
+    mutationKey: ['switchSubscription'],
+    mutationFn: checkoutController.switchSubscription,
+    onSuccess: () => accountController.reloadSubscriptions({ delay: 7500 }), // @todo: Is there a better way to wait?
+  });
+
+  useEffect(() => {
+    initialise();
+  }, [requestedMediaOffers, initialise]);
+
+  const hasMediaOffers = mediaOffers.length > 0;
+  const hasSubscriptionOffers = subscriptionOffers.length > 0;
+  const hasPremierOffers = requestedMediaOffers.some((mediaOffer) => mediaOffer.premier);
+  const hasMultipleOfferTypes = (subscriptionOffers.length > 0 || switchSubscriptionOffers.length > 0) && hasMediaOffers && !hasPremierOffers;
+  const defaultOfferType: OfferType = hasPremierOffers || !hasSubscriptionOffers ? 'tvod' : 'svod';
+
+  return {
+    isLoading: isInitialisationLoading || chooseOffer.isLoading,
+    mediaOffers,
+    subscriptionOffers,
+    switchSubscriptionOffers,
+    chooseOffer,
+    switchSubscription,
+    hasMultipleOfferTypes,
+    defaultOfferType,
+  };
 };
 
 export default useOffers;
diff --git a/packages/theme/assets/icons/plus.svg b/packages/theme/assets/icons/plus.svg
index 6c0815ef9..7500579b9 100644
--- a/packages/theme/assets/icons/plus.svg
+++ b/packages/theme/assets/icons/plus.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
     <path
       d="M8.99992 5.66665H5.66658V8.99998C5.66658 9.36665 5.36658 9.66665 4.99992 9.66665C4.63325 9.66665 4.33325 9.36665 4.33325 8.99998V5.66665H0.999919C0.633252 5.66665 0.333252 5.36665 0.333252 4.99998C0.333252 4.63331 0.633252 4.33331 0.999919 4.33331H4.33325V0.99998C4.33325 0.633313 4.63325 0.333313 4.99992 0.333313C5.36658 0.333313 5.66658 0.633313 5.66658 0.99998V4.33331H8.99992C9.36658 4.33331 9.66658 4.63331 9.66658 4.99998C9.66658 5.36665 9.36658 5.66665 8.99992 5.66665Z"
       fill="#ffffff"
diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json
index e1ff5c7bb..af981242b 100644
--- a/packages/ui-react/package.json
+++ b/packages/ui-react/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@jwp/ott-ui-react",
   "version": "4.30.0",
-  "main": "./src",
   "private": true,
+  "main": "./src",
   "scripts": {
     "lint:ts": "tsc --pretty --noEmit -p ./",
     "test": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run",
-    "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest",
-    "test-update": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run --update"
+    "test-update": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run --update",
+    "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest"
   },
   "dependencies": {
     "@adyen/adyen-web": "^5.42.1",
@@ -44,8 +44,8 @@
     "sass": "^1.49.10",
     "typescript-plugin-css-modules": "^5.0.2",
     "vi-fetch": "^0.8.0",
-    "vite-plugin-svgr": "4.2.0",
-    "vitest": "^0.34.6"
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
     "@jwp/ott-common": "*",
diff --git a/packages/ui-react/src/components/Account/Account.tsx b/packages/ui-react/src/components/Account/Account.tsx
index 06c928205..94b61e2c7 100644
--- a/packages/ui-react/src/components/Account/Account.tsx
+++ b/packages/ui-react/src/components/Account/Account.tsx
@@ -22,7 +22,7 @@ import Form from '../Form/Form';
 import IconButton from '../IconButton/IconButton';
 import TextField from '../TextField/TextField';
 import Checkbox from '../Checkbox/Checkbox';
-import HelperText from '../HelperText/HelperText';
+import FormFeedback from '../FormFeedback/FormFeedback';
 import CustomRegisterField from '../CustomRegisterField/CustomRegisterField';
 import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
@@ -136,23 +136,29 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
       .forEach((error) => {
         switch (error.trim()) {
           case 'Invalid param email':
+            formErrors.form = t('account.errors.validation_error');
             formErrors.email = t('account.errors.invalid_param_email');
             break;
           case 'Customer email already exists':
+            formErrors.form = t('account.errors.validation_error');
             formErrors.email = t('account.errors.email_exists');
             break;
           case 'Please enter a valid e-mail address.':
+            formErrors.form = t('account.errors.validation_error');
             formErrors.email = t('account.errors.please_enter_valid_email');
             break;
           case 'Invalid confirmationPassword': {
+            formErrors.form = t('account.errors.validation_error');
             formErrors.confirmationPassword = t('account.errors.invalid_password');
             break;
           }
           case 'firstName can have max 50 characters.': {
+            formErrors.form = t('account.errors.validation_error');
             formErrors.firstName = t('account.errors.first_name_too_long');
             break;
           }
           case 'lastName can have max 50 characters.': {
+            formErrors.form = t('account.errors.validation_error');
             formErrors.lastName = t('account.errors.last_name_too_long');
             break;
           }
@@ -160,6 +166,10 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
             formErrors.form = t('account.errors.email_update_not_supported');
             break;
           }
+          case 'Wrong email/password combination': {
+            formErrors.form = t('account.errors.wrong_combination');
+            break;
+          }
           default: {
             formErrors.form = t('account.errors.unknown_error');
             logDev('Unknown error', error);
@@ -185,8 +195,8 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
         // Render the section content, but also add a warning text if there's a form level error
         return (
           <>
+            {formErrors?.form ? <FormFeedback variant="error">{formErrors.form}</FormFeedback> : null}
             {props.content?.({ ...args, errors: formErrors })}
-            <HelperText error={!!formErrors?.form}>{formErrors?.form}</HelperText>
           </>
         );
       },
@@ -242,6 +252,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                   helperText={section.errors?.firstName}
                   disabled={section.isBusy}
                   editing={section.isEditing}
+                  autoComplete="given-name"
                   lang={htmlLang}
                 />
                 <TextField
@@ -253,6 +264,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                   helperText={section.errors?.lastName}
                   disabled={section.isBusy}
                   editing={section.isEditing}
+                  autoComplete="family-name"
                   lang={htmlLang}
                 />
               </>
@@ -261,6 +273,9 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
           formSection({
             label: t('account.email'),
             onSubmit: async (values) => {
+              if (!values.email || !values.confirmationPassword) {
+                throw new Error('Wrong email/password combination');
+              }
               const response = await accountController.updateUser({
                 email: values.email || '',
                 confirmationPassword: values.confirmationPassword,
@@ -270,7 +285,6 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
 
               return response;
             },
-            canSave: (values) => !!(values.email && values.confirmationPassword),
             editButton: t('account.edit_account'),
             readOnly: !canUpdateEmail,
             content: (section) => (
@@ -284,6 +298,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                   helperText={section.errors?.email}
                   disabled={section.isBusy}
                   editing={section.isEditing}
+                  autoComplete="email"
                   required
                 />
                 {section.isEditing && (
@@ -296,8 +311,9 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                     helperText={section.errors?.confirmationPassword}
                     type={viewPassword ? 'text' : 'password'}
                     disabled={section.isBusy}
+                    autoComplete="current-password"
                     rightControl={
-                      <IconButton aria-label={viewPassword ? t('account.hide_password') : t('account.view_password')} onClick={() => toggleViewPassword()}>
+                      <IconButton aria-label={t('account.view_password')} onClick={() => toggleViewPassword()} aria-pressed={viewPassword}>
                         <Icon icon={viewPassword ? Visibility : VisibilityOff} />
                       </IconButton>
                     }
diff --git a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
index 8d19e2e73..624a6df72 100644
--- a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
+++ b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_firstname"
           aria-invalid="false"
-          aria-required="false"
+          autocomplete="given-name"
           class="_input_e16c1b"
           id="text-field_1235_firstname"
           lang="en"
@@ -58,7 +58,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_lastname"
           aria-invalid="false"
-          aria-required="false"
+          autocomplete="family-name"
           class="_input_e16c1b"
           id="text-field_1235_lastname"
           lang="en"
@@ -111,7 +111,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
-          aria-required="true"
+          autocomplete="email"
           class="_input_e16c1b"
           id="text-field_1235_email"
           name="email"
@@ -199,6 +199,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
             for="check-box_1235_consentsvalues_marketing"
             lang="en"
           >
+            <span
+              aria-hidden="true"
+            />
             Receive Marketing Emails
           </label>
         </div>
diff --git a/packages/ui-react/src/components/Adyen/AdyenForm.scss b/packages/ui-react/src/components/Adyen/AdyenForm.scss
index f87f5056b..acd3d5a40 100644
--- a/packages/ui-react/src/components/Adyen/AdyenForm.scss
+++ b/packages/ui-react/src/components/Adyen/AdyenForm.scss
@@ -6,7 +6,7 @@
     color: variables.$white;
     font-family: var(--body-font-family);
     font-size: 16px;
-    line-height: 18px;
+    line-height: variables.$base-line-height;
   }
 
   .adyen-checkout__error-text {
@@ -20,6 +20,6 @@
     color: variables.$white;
     font-family: var(--body-font-family);
     font-size: 16px;
-    line-height: 18px;
+    line-height: variables.$base-line-height;
   }
 }
diff --git a/packages/ui-react/src/components/Animation/Fade/Fade.tsx b/packages/ui-react/src/components/Animation/Fade/Fade.tsx
index 0d19247a2..14a7ab9f2 100644
--- a/packages/ui-react/src/components/Animation/Fade/Fade.tsx
+++ b/packages/ui-react/src/components/Animation/Fade/Fade.tsx
@@ -20,6 +20,7 @@ const Fade: React.FC<Props> = ({ className, open = true, duration = 250, delay =
   const createStyle = (status: Status): CSSProperties => ({
     transition,
     opacity: status === 'opening' || status === 'open' ? 1 : 0,
+    willChange: 'opacity',
   });
 
   return (
diff --git a/packages/ui-react/src/components/Animation/Grow/Grow.tsx b/packages/ui-react/src/components/Animation/Grow/Grow.tsx
index 1fa2a745b..1f524ca35 100644
--- a/packages/ui-react/src/components/Animation/Grow/Grow.tsx
+++ b/packages/ui-react/src/components/Animation/Grow/Grow.tsx
@@ -9,9 +9,10 @@ type Props = {
   onOpenAnimationEnd?: () => void;
   onCloseAnimationEnd?: () => void;
   children: ReactNode;
+  className?: string;
 };
 
-const Grow = ({ open = true, duration = 250, delay = 0, onOpenAnimationEnd, onCloseAnimationEnd, children }: Props): JSX.Element | null => {
+const Grow = ({ open = true, duration = 250, delay = 0, onOpenAnimationEnd, onCloseAnimationEnd, children, className }: Props): JSX.Element | null => {
   const seconds = duration / 1000;
   const transition = `transform ${seconds}s ease-out`; // todo: -webkit-transform;
   const createStyle = (status: Status): CSSProperties => ({
@@ -27,6 +28,7 @@ const Grow = ({ open = true, duration = 250, delay = 0, onOpenAnimationEnd, onCl
       delay={delay}
       onOpenAnimationEnd={onOpenAnimationEnd}
       onCloseAnimationEnd={onCloseAnimationEnd}
+      className={className}
     >
       {children}
     </Animation>
diff --git a/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap
index 3f70eab55..aa5e13b5a 100644
--- a/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Button> > renders and matches snapshot 1`] = `
 <div>
   <button
-    class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296 "
+    class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
     type="button"
   >
     <span>
diff --git a/packages/ui-react/src/components/Card/Card.module.scss b/packages/ui-react/src/components/Card/Card.module.scss
index 4780938d0..4d41729dd 100644
--- a/packages/ui-react/src/components/Card/Card.module.scss
+++ b/packages/ui-react/src/components/Card/Card.module.scss
@@ -29,18 +29,17 @@
 
   &.featured {
     .title {
-      height: 1.1em;
+      height: variables.$base-line-height;
       padding-right: 8px;
       font-family: var(--body-font-family);
       font-size: 34px;
-      line-height: 36px;
+      line-height: variables.$base-line-height;
       white-space: nowrap;
       text-overflow: ellipsis;
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
 
       @include responsive.mobile-only {
         font-size: 24px;
-        line-height: 26px;
       }
     }
 
@@ -126,7 +125,7 @@
   font-weight: var(--body-font-weight-bold);
 
   font-size: 18px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
 }
 
 $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16), (9, 13));
@@ -145,21 +144,26 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16), (9, 13));
 }
 
 .title {
-  height: 2.4em;
+  height: calc(variables.$base-line-height * 2);
   overflow: hidden;
   color: var(--card-color);
   font-family: var(--body-alt-font-family);
   font-weight: var(--body-font-weight-bold);
   font-size: 1em;
-  line-height: 1.2em;
+  line-height: variables.$base-line-height;
   text-align: left;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
 
   &.loading {
-    width: 30%;
-    height: 16px;
-    background-color: theme.$card-loading-bg-color;
-    border-radius: 5px;
+    &::before {
+      content: '';
+      position: relative;
+      display: inline-block;
+      width: 45%;
+      height: 1.2em;
+      background-color: theme.$card-loading-bg-color;
+      border-radius: 5px;
+    }
   }
 
   @include responsive.mobile-only {
@@ -169,7 +173,7 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16), (9, 13));
 
 .scheduledStart {
   font-size: 0.88em;
-  line-height: 1em;
+  line-height: variables.$base-line-height;
 
   @include responsive.mobile-only {
     font-size: 12px;
diff --git a/packages/ui-react/src/components/Card/Card.tsx b/packages/ui-react/src/components/Card/Card.tsx
index b97c69ca7..1d9b7d497 100644
--- a/packages/ui-react/src/components/Card/Card.tsx
+++ b/packages/ui-react/src/components/Card/Card.tsx
@@ -95,7 +95,7 @@ function Card({
     }
   };
 
-  const heading = React.createElement(`h${headingLevel}`, { className: classNames(styles.title, { [styles.loading]: loading }) }, title);
+  const heading = React.createElement(`h${headingLevel}`, { className: classNames(styles.title, { [styles.loading]: loading }) }, loading ? '' : title);
 
   return (
     <Link
@@ -122,7 +122,7 @@ function Card({
             {featured && !disabled && heading}
             <div className={styles.tags}>
               {isLocked && (
-                <div className={classNames(styles.tag, styles.lock)} aria-label={t('card_lock')}>
+                <div className={classNames(styles.tag, styles.lock)} aria-label={t('card_lock')} role="img">
                   <Icon icon={Lock} />
                 </div>
               )}
diff --git a/packages/ui-react/src/components/Card/__snapshots__/Card.test.tsx.snap b/packages/ui-react/src/components/Card/__snapshots__/Card.test.tsx.snap
index 1d08e59d4..d3652d307 100644
--- a/packages/ui-react/src/components/Card/__snapshots__/Card.test.tsx.snap
+++ b/packages/ui-react/src/components/Card/__snapshots__/Card.test.tsx.snap
@@ -35,6 +35,7 @@ exports[`<Card> > should render anchor tag 1`] = `
           <div
             aria-label="card_lock"
             class="_tag_d75732 _lock_d75732"
+            role="img"
           >
             <svg
               aria-hidden="true"
diff --git a/packages/ui-react/src/components/Checkbox/Checkbox.tsx b/packages/ui-react/src/components/Checkbox/Checkbox.tsx
index c482bc8ed..2b07b3933 100644
--- a/packages/ui-react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/ui-react/src/components/Checkbox/Checkbox.tsx
@@ -47,7 +47,7 @@ const Checkbox: React.FC<Props> = ({ label, name, onChange, header, checked, val
           aria-describedby={helperTextId}
         />
         <label htmlFor={id} lang={lang}>
-          {required ? '* ' : ''}
+          <span aria-hidden="true">{required ? '* ' : ''}</span>
           {label}
         </label>
       </div>
diff --git a/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 530343328..dbf01ce28 100644
--- a/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -18,6 +18,9 @@ exports[`<Checkbox> > renders and matches snapshot 1`] = `
       <label
         for="check-box_1235_name"
       >
+        <span
+          aria-hidden="true"
+        />
         label
       </label>
     </div>
diff --git a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.module.scss b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.module.scss
index 757ce4d25..2ae34cbe4 100644
--- a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.module.scss
+++ b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.module.scss
@@ -1,6 +1,7 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 @use '@jwp/ott-ui-react/src/styles/accessibility';
+@use '@jwp/ott-ui-react/src/styles/mixins/typography';
 
 .backButton {
   position: absolute;
@@ -108,7 +109,7 @@
   .couponCell {
     padding-top: 8px;
     padding-bottom: 8px;
-    line-height: 1em;
+    line-height: variables.$base-line-height;
 
     & > small {
       font-size: 14px;
diff --git a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx
index 14fa521c7..a4733cf33 100644
--- a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx
+++ b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import type { Offer, OfferType, Order, PaymentMethod } from '@jwp/ott-common/types/checkout';
diff --git a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
index 7111ff503..ebbee84cb 100644
--- a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
+++ b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
@@ -99,7 +99,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                 <input
                   aria-describedby="helper_text_1235_cardholdername"
                   aria-invalid="false"
-                  aria-required="true"
+                  autocomplete="cc-name"
                   class="_input_e16c1b"
                   id="text-field_1235_cardholdername"
                   name="cardholderName"
@@ -127,11 +127,11 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                 <input
                   aria-describedby="helper_text_1235_cardnumber"
                   aria-invalid="false"
-                  aria-required="true"
+                  autocomplete="cc-number"
                   class="_input_e16c1b"
                   id="text-field_1235_cardnumber"
                   name="cardNumber"
-                  pattern="\\\\d*"
+                  pattern="\\d*"
                   placeholder="1234 5678 9012 3456"
                   required=""
                   type="text"
@@ -159,11 +159,11 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                   <input
                     aria-describedby="helper_text_1235_cardexpiry"
                     aria-invalid="false"
-                    aria-required="true"
+                    autocomplete="cc-exp"
                     class="_input_e16c1b"
                     id="text-field_1235_cardexpiry"
                     name="cardExpiry"
-                    pattern="\\\\d*"
+                    pattern="\\d*"
                     placeholder="MM/YY"
                     required=""
                     type="text"
@@ -189,11 +189,11 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                     aria-describedby="helper_text_1235_cardcvc"
                     aria-invalid="false"
                     aria-label="payment.security_code"
-                    aria-required="true"
+                    autocomplete="cc-csc"
                     class="_input_e16c1b"
                     id="text-field_1235_cardcvc"
                     name="cardCVC"
-                    pattern="\\\\d*"
+                    pattern="\\d*"
                     placeholder="###"
                     required=""
                     type="text"
diff --git a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx
index 20e811680..a380b65a3 100644
--- a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx
+++ b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.test.tsx
@@ -14,14 +14,13 @@ describe('<OffersForm>', () => {
   test('renders and matches snapshot', () => {
     const { container } = render(
       <ChooseOfferForm
-        values={{ offerId: 'S916977979_NL' }}
+        values={{ selectedOfferId: 'S916977979_NL', selectedOfferType: 'svod' }}
         errors={{}}
         onChange={vi.fn()}
         onSubmit={vi.fn()}
         submitting={false}
         offers={svodOffers}
-        offerType={'svod'}
-        setOfferType={vi.fn()}
+        showOfferTypeSwitch
       />,
     );
 
@@ -31,14 +30,13 @@ describe('<OffersForm>', () => {
   test('renders and matches snapshot', () => {
     const { container } = render(
       <ChooseOfferForm
-        values={{ offerId: 'R892134629_NL' }}
+        values={{ selectedOfferId: 'R892134629_NL', selectedOfferType: 'tvod' }}
         errors={{}}
         onChange={vi.fn()}
         onSubmit={vi.fn()}
         submitting={false}
         offers={tvodOffers}
-        offerType={'tvod'}
-        setOfferType={vi.fn()}
+        showOfferTypeSwitch
       />,
     );
 
@@ -48,70 +46,66 @@ describe('<OffersForm>', () => {
   test('checks the monthly offer correctly', () => {
     const { getByTestId } = render(
       <ChooseOfferForm
-        values={{ offerId: 'S916977979_NL' }}
+        values={{ selectedOfferId: 'S916977979_NL', selectedOfferType: 'svod' }}
         errors={{}}
         onChange={vi.fn()}
         onSubmit={vi.fn()}
         submitting={false}
         offers={svodOffers}
-        offerType={'svod'}
-        setOfferType={vi.fn()}
+        showOfferTypeSwitch
       />,
     );
 
-    expect(getByTestId('choose_offer.monthly')).toBeChecked();
+    expect(getByTestId('S916977979_NL')).toBeChecked();
   });
 
   test('checks the yearly offer correctly', () => {
     const { getByTestId } = render(
       <ChooseOfferForm
-        values={{ offerId: 'S345569153_NL' }}
+        values={{ selectedOfferId: 'S345569153_NL', selectedOfferType: 'svod' }}
         errors={{}}
         onChange={vi.fn()}
         onSubmit={vi.fn()}
         submitting={false}
         offers={svodOffers}
-        offerType={'svod'}
-        setOfferType={vi.fn()}
+        showOfferTypeSwitch
       />,
     );
 
-    expect(getByTestId('choose_offer.yearly')).toBeChecked();
+    expect(getByTestId('S345569153_NL')).toBeChecked();
   });
 
   test('checks the tvod offer correctly', () => {
     const { getByTestId } = render(
       <ChooseOfferForm
-        values={{ offerId: 'R892134629_NL' }}
+        values={{ selectedOfferId: 'R892134629_NL', selectedOfferType: 'tvod' }}
         errors={{}}
         onChange={vi.fn()}
         onSubmit={vi.fn()}
         submitting={false}
         offers={tvodOffers}
-        offerType={'tvod'}
-        setOfferType={vi.fn()}
+        showOfferTypeSwitch
       />,
     );
 
-    expect(getByTestId('One Time - TVOD offer')).toBeChecked();
+    expect(getByTestId('R892134629_NL')).toBeChecked();
   });
 
   test('calls the onChange callback when changing the offer', () => {
     const onChange = vi.fn();
     const { getByTestId } = render(
       <ChooseOfferForm
-        values={{ offerId: 'S916977979_NL' }}
+        values={{ selectedOfferId: 'S916977979_NL', selectedOfferType: 'svod' }}
         errors={{}}
         onChange={onChange}
         onSubmit={vi.fn()}
         submitting={false}
         offers={svodOffers}
-        offerType={'svod'}
-        setOfferType={vi.fn()}
+        showOfferTypeSwitch
       />,
     );
 
-    fireEvent.click(getByTestId('choose_offer.yearly'));
+    fireEvent.click(getByTestId('S345569153_NL'));
 
     expect(onChange).toBeCalled();
   });
@@ -120,14 +114,13 @@ describe('<OffersForm>', () => {
     const onSubmit = vi.fn();
     const { getByTestId } = render(
       <ChooseOfferForm
-        values={{ offerId: 'S916977979_NL' }}
+        values={{ selectedOfferId: 'S916977979_NL', selectedOfferType: 'svod' }}
         errors={{}}
         onChange={vi.fn()}
         onSubmit={onSubmit}
         submitting={false}
         offers={svodOffers}
-        offerType={'svod'}
-        setOfferType={vi.fn()}
+        showOfferTypeSwitch
       />,
     );
 
diff --git a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx
index 4b80b7678..a1766a602 100644
--- a/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx
+++ b/packages/ui-react/src/components/ChooseOfferForm/ChooseOfferForm.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import type { FormErrors } from '@jwp/ott-common/types/form';
-import type { Offer, ChooseOfferFormData, OfferType } from '@jwp/ott-common/types/checkout';
+import type { Offer, ChooseOfferFormData } from '@jwp/ott-common/types/checkout';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
-import { getOfferPrice, isSVODOffer } from '@jwp/ott-common/src/utils/subscription';
+import { getOfferPrice, isSVODOffer } from '@jwp/ott-common/src/utils/offers';
 import { testId } from '@jwp/ott-common/src/utils/common';
 import CheckCircle from '@jwp/ott-theme/assets/icons/check_circle.svg?react';
 
@@ -16,18 +16,6 @@ import Icon from '../Icon/Icon';
 
 import styles from './ChooseOfferForm.module.scss';
 
-type Props = {
-  values: ChooseOfferFormData;
-  errors: FormErrors<ChooseOfferFormData>;
-  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onSubmit: React.FormEventHandler<HTMLFormElement>;
-  onBackButtonClickHandler?: () => void;
-  offers: Offer[];
-  submitting: boolean;
-  offerType: OfferType;
-  setOfferType?: (offerType: OfferType) => void;
-};
-
 type OfferBoxProps = {
   offer: Offer;
   selected: boolean;
@@ -58,11 +46,11 @@ const OfferBox: React.FC<OfferBoxProps> = ({ offer, selected, onChange }: OfferB
         className={styles.radio}
         onChange={onChange}
         type="radio"
-        name={'offerId'}
+        name={'selectedOfferId'}
         value={offer.offerId}
         id={offer.offerId}
         checked={selected}
-        data-testid={testId(title)}
+        data-testid={testId(offer.offerId)}
       />
       <label className={styles.label} htmlFor={offer.offerId}>
         <h2 className={styles.offerTitle}>{title}</h2>
@@ -110,19 +98,21 @@ const OfferBox: React.FC<OfferBoxProps> = ({ offer, selected, onChange }: OfferB
   });
 };
 
-const ChooseOfferForm: React.FC<Props> = ({
-  values,
-  errors,
-  onChange,
-  onSubmit,
-  submitting,
-  offers,
-  onBackButtonClickHandler,
-  offerType,
-  setOfferType,
-}: Props) => {
+type Props = {
+  values: ChooseOfferFormData;
+  errors: FormErrors<ChooseOfferFormData>;
+  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onSubmit: React.FormEventHandler<HTMLFormElement>;
+  onBackButtonClickHandler?: () => void;
+  offers: Offer[];
+  showOfferTypeSwitch: boolean;
+  submitting: boolean;
+};
+
+const ChooseOfferForm: React.FC<Props> = ({ values, errors, submitting, offers, showOfferTypeSwitch, onChange, onSubmit, onBackButtonClickHandler }: Props) => {
   const siteName = useConfigStore((s) => s.config.siteName);
   const { t } = useTranslation('account');
+  const { selectedOfferType, selectedOfferId } = values;
 
   return (
     <form onSubmit={onSubmit} data-testid={testId('choose-offer-form')} noValidate>
@@ -130,28 +120,28 @@ const ChooseOfferForm: React.FC<Props> = ({
       <h1 className={styles.title}>{t('choose_offer.title')}</h1>
       <p className={styles.subtitle}>{t('choose_offer.watch_this_on_platform', { siteName })}</p>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
-      {setOfferType && (
+      {showOfferTypeSwitch && (
         <div className={styles.offerGroupSwitch}>
           <input
             className={styles.radio}
-            onChange={() => setOfferType('svod')}
+            onChange={onChange}
             type="radio"
-            name="offerType"
+            name="selectedOfferType"
             id="svod"
             value="svod"
-            checked={offerType === 'svod'}
+            checked={selectedOfferType === 'svod'}
           />
           <label className={classNames(styles.label, styles.offerGroupLabel)} htmlFor="svod">
             {t('choose_offer.subscription')}
           </label>
           <input
             className={styles.radio}
-            onChange={() => setOfferType('tvod')}
+            onChange={onChange}
             type="radio"
-            name="offerType"
+            name="selectedOfferType"
             id="tvod"
             value="tvod"
-            checked={offerType === 'tvod'}
+            checked={selectedOfferType === 'tvod'}
           />
           <label className={classNames(styles.label, styles.offerGroupLabel)} htmlFor="tvod">
             {t('choose_offer.one_time_only')}
@@ -162,7 +152,7 @@ const ChooseOfferForm: React.FC<Props> = ({
         {!offers.length ? (
           <p>{t('choose_offer.no_pricing_available')}</p>
         ) : (
-          offers.map((offer) => <OfferBox key={offer.offerId} offer={offer} selected={values.offerId === offer.offerId} onChange={onChange} />)
+          offers.map((offer) => <OfferBox key={offer.offerId} offer={offer} selected={selectedOfferId === offer.offerId} onChange={onChange} />)
         )}
       </div>
       {submitting && <LoadingOverlay transparentBackground inline />}
diff --git a/packages/ui-react/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap b/packages/ui-react/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap
index e9fe99a27..426417862 100644
--- a/packages/ui-react/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap
+++ b/packages/ui-react/src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`<OffersForm> > renders and matches snapshot 1`] = `
         checked=""
         class="_radio_f7961f"
         id="svod"
-        name="offerType"
+        name="selectedOfferType"
         type="radio"
         value="svod"
       />
@@ -36,7 +36,7 @@ exports[`<OffersForm> > renders and matches snapshot 1`] = `
       <input
         class="_radio_f7961f"
         id="tvod"
-        name="offerType"
+        name="selectedOfferType"
         type="radio"
         value="tvod"
       />
@@ -57,9 +57,9 @@ exports[`<OffersForm> > renders and matches snapshot 1`] = `
         <input
           checked=""
           class="_radio_f7961f"
-          data-testid="choose_offer.monthly"
+          data-testid="S916977979_NL"
           id="S916977979_NL"
-          name="offerId"
+          name="selectedOfferId"
           type="radio"
           value="S916977979_NL"
         />
@@ -142,9 +142,9 @@ exports[`<OffersForm> > renders and matches snapshot 1`] = `
       >
         <input
           class="_radio_f7961f"
-          data-testid="choose_offer.yearly"
+          data-testid="S345569153_NL"
           id="S345569153_NL"
-          name="offerId"
+          name="selectedOfferId"
           type="radio"
           value="S345569153_NL"
         />
@@ -257,7 +257,7 @@ exports[`<OffersForm> > renders and matches snapshot 2`] = `
       <input
         class="_radio_f7961f"
         id="svod"
-        name="offerType"
+        name="selectedOfferType"
         type="radio"
         value="svod"
       />
@@ -271,7 +271,7 @@ exports[`<OffersForm> > renders and matches snapshot 2`] = `
         checked=""
         class="_radio_f7961f"
         id="tvod"
-        name="offerType"
+        name="selectedOfferType"
         type="radio"
         value="tvod"
       />
@@ -292,9 +292,9 @@ exports[`<OffersForm> > renders and matches snapshot 2`] = `
         <input
           checked=""
           class="_radio_f7961f"
-          data-testid="One Time - TVOD offer"
+          data-testid="R892134629_NL"
           id="R892134629_NL"
-          name="offerId"
+          name="selectedOfferId"
           type="radio"
           value="R892134629_NL"
         />
diff --git a/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx b/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx
index 3cd73db23..8656584af 100644
--- a/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx
+++ b/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx
@@ -35,6 +35,7 @@ const CollapsibleText: React.FC<Props> = ({ text, className, maxHeight = 'none'
     <div className={classNames(styles.collapsibleText)}>
       <p
         ref={divRef}
+        id="collapsible-content"
         className={classNames(styles.textContainer, className, { [styles.collapsed]: !expanded && doesFlowOver })}
         style={{ maxHeight: expanded ? divRef.current.scrollHeight : maxHeight }}
       >
@@ -44,6 +45,7 @@ const CollapsibleText: React.FC<Props> = ({ text, className, maxHeight = 'none'
         <IconButton
           aria-label={ariaLabel}
           aria-expanded={expanded}
+          aria-controls="collapsible-content"
           className={classNames(styles.chevron, { [styles.expanded]: expanded })}
           onClick={() => setExpanded(!expanded)}
         >
diff --git a/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap b/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap
index 72e97167b..101afed39 100644
--- a/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap
+++ b/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`<CollapsibleText> > renders and matches snapshot 1`] = `
   >
     <p
       class="_textContainer_561522"
+      id="collapsible-content"
       style="max-height: none;"
     >
       Test...
diff --git a/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.tsx b/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.tsx
index 99ec44957..eed259ccd 100644
--- a/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.tsx
+++ b/packages/ui-react/src/components/ConfirmationDialog/ConfirmationDialog.tsx
@@ -19,13 +19,9 @@ const ConfirmationDialog: React.FC<Props> = ({ open, title, body, onConfirm, onC
   const { t } = useTranslation('common');
 
   return (
-    <Dialog open={open} onClose={onClose} role="alertdialog" aria-describedby="confirmation-body" aria-labelledby="confirmation-heading">
-      <h2 className={styles.title} id="confirmation-heading">
-        {title}
-      </h2>
-      <p id="confirmation-body" className={styles.body}>
-        {body}
-      </p>
+    <Dialog open={open} onClose={onClose} role="alertdialog">
+      <h2 className={styles.title}>{title}</h2>
+      <p className={styles.body}>{body}</p>
       <Button
         className={styles.confirmButton}
         label={t('confirmation_dialog.confirm')}
diff --git a/packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.tsx b/packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.tsx
index 576fdfe7c..4be56f464 100644
--- a/packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.tsx
+++ b/packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.tsx
@@ -33,6 +33,7 @@ const CreditCardCVCField: React.FC<Props> = ({ value, onChange, error, ...props
       onChange={formatCVC}
       pattern="\d*"
       placeholder="###"
+      autoComplete="cc-csc"
       required
     />
   );
diff --git a/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap b/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
index 907b37482..b8a970262 100644
--- a/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
+++ b/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
@@ -18,11 +18,11 @@ exports[`<CreditCardCVCField> > renders and matches snapshot 1`] = `
         aria-describedby="helper_text_1235_cardcvc"
         aria-invalid="false"
         aria-label="payment.security_code"
-        aria-required="true"
+        autocomplete="cc-csc"
         class="_input_e16c1b"
         id="text-field_1235_cardcvc"
         name="cardCVC"
-        pattern="\\\\d*"
+        pattern="\\d*"
         placeholder="###"
         required=""
         type="text"
diff --git a/packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.tsx b/packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.tsx
index 784035037..37c74b881 100644
--- a/packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.tsx
+++ b/packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.tsx
@@ -45,6 +45,7 @@ const CreditCardExpiryField: React.FC<Props> = ({ value, onChange, error, ...pro
       type="text"
       pattern="\d*"
       placeholder="MM/YY"
+      autoComplete="cc-exp"
       required
     />
   );
diff --git a/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap b/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
index 8a88f1e31..04274f67f 100644
--- a/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
+++ b/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
@@ -17,11 +17,11 @@ exports[`<CreditCardExpiryField> > renders and matches snapshot 1`] = `
       <input
         aria-describedby="helper_text_1235_cardexpiry"
         aria-invalid="false"
-        aria-required="true"
+        autocomplete="cc-exp"
         class="_input_e16c1b"
         id="text-field_1235_cardexpiry"
         name="cardExpiry"
-        pattern="\\\\d*"
+        pattern="\\d*"
         placeholder="MM/YY"
         required=""
         type="text"
diff --git a/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.tsx b/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.tsx
index db9f5dca5..fb9957c79 100644
--- a/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.tsx
+++ b/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.tsx
@@ -73,6 +73,7 @@ const CreditCardNumberField: React.FC<Props> = ({ value, error, onChange, onBlur
       type="text"
       placeholder="1234 5678 9012 3456"
       rightControl={cardIssuer}
+      autoComplete="cc-number"
       required
     />
   );
diff --git a/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap b/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
index 0e1412821..471171761 100644
--- a/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
+++ b/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
@@ -17,11 +17,11 @@ exports[`<CreditCardNumberField> > renders and matches snapshot 1`] = `
       <input
         aria-describedby="helper_text_1235_cardnumber"
         aria-invalid="false"
-        aria-required="true"
+        autocomplete="cc-number"
         class="_input_e16c1b"
         id="text-field_1235_cardnumber"
         name="cardNumber"
-        pattern="\\\\d*"
+        pattern="\\d*"
         placeholder="1234 5678 9012 3456"
         required=""
         type="text"
diff --git a/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap b/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
index e9a7dba46..d514ad065 100644
--- a/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
+++ b/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
@@ -19,6 +19,9 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Checkbox> 1`] = `
       <label
         for="check-box_1235_name"
       >
+        <span
+          aria-hidden="true"
+        />
         label
       </label>
     </div>
@@ -101,6 +104,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
         name="name"
       />
       <input
+        autocomplete="bday-day"
         class="_input_eb6974"
         id="text-field_1235_name-date"
         maxlength="2"
@@ -111,6 +115,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
       />
        / 
       <input
+        autocomplete="bday-month"
         class="_input_eb6974"
         id="text-field_1235_name-month"
         maxlength="2"
@@ -121,6 +126,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
       />
        / 
       <input
+        autocomplete="bday-year"
         class="_input_eb6974"
         id="text-field_1235_name-year"
         maxlength="4"
@@ -153,6 +159,9 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="ra
       <label
         for="check-box_1235_name"
       >
+        <span
+          aria-hidden="true"
+        />
         label
       </label>
     </div>
@@ -284,7 +293,6 @@ exports[`<CustomRegisterField> > renders and matches snapshot <TextField> 1`] =
       <input
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        aria-required="false"
         class="_input_e16c1b"
         id="text-field_1235_name"
         name="name"
diff --git a/packages/ui-react/src/components/DateField/DateField.module.scss b/packages/ui-react/src/components/DateField/DateField.module.scss
index fb8fd062d..c4e91652f 100644
--- a/packages/ui-react/src/components/DateField/DateField.module.scss
+++ b/packages/ui-react/src/components/DateField/DateField.module.scss
@@ -72,7 +72,7 @@
   padding: 14px 16px;
   color: inherit;
   font-size: 16px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   text-align: center;
   background: transparent;
   border: none;
diff --git a/packages/ui-react/src/components/DateField/DateField.tsx b/packages/ui-react/src/components/DateField/DateField.tsx
index b86d25770..41b7e6130 100644
--- a/packages/ui-react/src/components/DateField/DateField.tsx
+++ b/packages/ui-react/src/components/DateField/DateField.tsx
@@ -170,6 +170,7 @@ const DateField: React.FC<Props> = ({
           maxLength={2}
           type="number"
           id={`${id}-date`}
+          autoComplete="bday-day"
         />
         {' / '}
         <input
@@ -184,6 +185,7 @@ const DateField: React.FC<Props> = ({
           maxLength={2}
           type="number"
           id={`${id}-month`}
+          autoComplete="bday-month"
         />
         {' / '}
         <input
@@ -198,6 +200,7 @@ const DateField: React.FC<Props> = ({
           maxLength={4}
           type="number"
           id={`${id}-year`}
+          autoComplete="bday-year"
         />
       </div>
       <HelperText id={helperTextId} error={error}>
diff --git a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.module.scss b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.module.scss
index 2ae1c746f..6c81b92b0 100644
--- a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.module.scss
+++ b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.module.scss
@@ -1,63 +1,44 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 
-.formContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-  align-items: center;
-  padding: 30px;
+.heading {
+  margin: 24px 0;
+  font-weight: var(--body-font-weight-bold);
+  font-size: 26px;
 }
 
-.formContainerSmall {
-  gap: 20px;
+.paragraph {
+  margin: 0 0 variables.$base-spacing;
 }
 
-.innerContainer {
+.disclaimer {
   display: flex;
   flex-direction: column;
   gap: 16px;
   align-items: center;
-}
 
-.passwordButtonsContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
+  p {
+    width: 100%;
+    margin: 0;
+    color: variables.$gray-white;
+    font-size: 14px;
+    line-height: 20px;
+  }
 }
 
-.buttonsContainer {
+.buttons {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   align-items: center;
   width: 100%;
+  margin-top: 24px;
   gap: 16px;
-}
-
-.heading {
-  width: 50%;
-  margin-bottom: 20px;
-  color: variables.$gray-white;
-  font-weight: 400;
-  font-size: 20px;
-  line-height: 28px;
-  text-align: center;
-}
-
-.paragraph {
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  color: variables.$gray-white;
-  font-size: 14px;
-  line-height: 20px;
-  text-align: left;
-}
 
-.button {
-  margin: auto;
+  &.stacked {
+    flex-direction: column;
+    justify-content: initial;
+    gap: 8px;
+  }
 }
 
 .warningBox {
diff --git a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
index 36a5ba79d..6d8a33fd6 100644
--- a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
+++ b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
@@ -7,12 +7,15 @@ import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
 import { useLocation, useNavigate } from 'react-router';
 import { object, string } from 'yup';
+import { FormValidationError } from '@jwp/ott-common/src/errors/FormValidationError';
+import classNames from 'classnames';
 
 import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 import { modalURLFromLocation } from '../../utils/location';
-import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
 import PasswordField from '../PasswordField/PasswordField';
+import useQueryParam from '../../hooks/useQueryParam';
+import FormFeedback from '../FormFeedback/FormFeedback';
 
 import styles from './DeleteAccountModal.module.scss';
 
@@ -21,20 +24,10 @@ const DeleteAccountModal = () => {
 
   const { t } = useTranslation('user');
   const announce = useAriaAnnouncer();
+  const u = useQueryParam('u');
 
   const [enteredPassword, setEnteredPassword] = useState<string>('');
 
-  const deleteAccount = useMutation(accountController.deleteAccountData, {
-    onSuccess: async () => {
-      navigate('/');
-      await accountController.logout();
-      announce(t('account.delete_account.success'), 'success');
-    },
-    onError: () => {
-      setEnteredPassword('');
-    },
-  });
-
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -43,6 +36,7 @@ const DeleteAccountModal = () => {
     handleChange,
     values,
     errors,
+    setErrors,
     reset: resetForm,
   } = useForm<DeleteAccountFormData>({
     initialValues: { password: '' },
@@ -53,73 +47,82 @@ const DeleteAccountModal = () => {
     },
   });
 
-  useEffect(() => {
-    if (!location.search.includes('delete-account-confirmation') && enteredPassword) {
-      // handle back button
+  const deleteAccount = useMutation(accountController.deleteAccountData, {
+    onSuccess: async () => {
+      navigate('/');
+      await accountController.logout();
+      announce(t('account.delete_account.success'), 'success');
+    },
+    onError: (error: unknown) => {
+      if (error instanceof FormValidationError) {
+        setErrors(error.errors);
+        navigate(modalURLFromLocation(location, 'delete-account'), { replace: true });
+      }
       setEnteredPassword('');
-      resetForm();
-    }
-    if (location.search.includes('delete-account-confirmation') && !enteredPassword) {
+    },
+  });
+
+  useEffect(() => {
+    // when the user navigates directly to the confirmation step
+    if (u === 'delete-account-confirmation' && !enteredPassword) {
       navigate(modalURLFromLocation(location, 'delete-account'), { replace: true });
     }
-  }, [location, location.search, navigate, enteredPassword, deleteAccount, resetForm]);
-
-  const handleError = useCallback(() => {
-    deleteAccount.reset();
-    resetForm();
-    setEnteredPassword('');
-    navigate(modalURLFromLocation(location, 'delete-account'), { replace: true });
-  }, [location, navigate, setEnteredPassword, deleteAccount, resetForm]);
+  }, [location, u, navigate, enteredPassword, deleteAccount, resetForm]);
 
   const handleCancel = useCallback(() => {
     navigate(modalURLFromLocation(location, null), { replace: true });
   }, [location, navigate]);
 
-  if (deleteAccount.isError) {
-    return <Alert open isSuccess={false} onClose={handleError} message={t('account.delete_account.error')} />;
+  // step 2: delete account confirmation
+  if (enteredPassword) {
+    return (
+      <div>
+        <h2 className={styles.heading}>{t('account.delete_account.title')}</h2>
+        <div className={styles.disclaimer}>
+          <p>{t('account.delete_account.modal.text_data_erasure')}</p>
+          <p>{t('account.delete_account.modal.text_revoked_access')}</p>
+          <div className={styles.warningBox}>
+            <p>{t('account.delete_account.modal.warning')}</p>
+          </div>
+          <p>
+            {t('account.delete_account.modal.text_cant_be_undone')} <br />
+            {t('account.delete_account.modal.text_contacts')}
+          </p>
+        </div>
+        <div className={styles.buttons}>
+          <Button disabled={deleteAccount.isLoading} variant="text" label={t('account.cancel')} onClick={handleCancel} />
+          <Button
+            disabled={deleteAccount.isLoading}
+            variant="delete"
+            label={t('account.delete_account.title')}
+            onClick={() => {
+              deleteAccount.mutate(enteredPassword);
+            }}
+          />
+        </div>
+      </div>
+    );
   }
 
-  return enteredPassword ? (
-    <div className={styles.formContainer}>
+  // step 1: enter your password
+  return (
+    <form onSubmit={handleSubmit}>
       <h2 className={styles.heading}>{t('account.delete_account.title')}</h2>
-      <div className={styles.innerContainer}>
-        <p className={styles.paragraph}>{t('account.delete_account.modal.text_data_erasure')}</p>
-        <p className={styles.paragraph}>{t('account.delete_account.modal.text_revoked_access')}</p>
-        <div className={styles.warningBox}>
-          <p className={styles.paragraph}>{t('account.delete_account.modal.warning')}</p>
-        </div>
-        <p className={styles.paragraph}>
-          {t('account.delete_account.modal.text_cant_be_undone')} <br />
-          {t('account.delete_account.modal.text_contacts')}
-        </p>
-      </div>
-      <div className={styles.buttonsContainer}>
-        <Button disabled={deleteAccount.isLoading} variant="text" label={t('account.cancel')} onClick={handleCancel} />
-        <Button
-          disabled={deleteAccount.isLoading}
-          variant="delete"
-          label={t('account.delete_account.title')}
-          onClick={() => {
-            deleteAccount.mutate(enteredPassword);
-          }}
-        />
-      </div>
-    </div>
-  ) : (
-    <form onSubmit={handleSubmit} className={`${styles.formContainer} ${styles.formContainerSmall}`}>
-      <h2 className={styles.heading}>{t('account.delete_account.modal.title')}</h2>
+      <p className={styles.paragraph}>{t('account.delete_account.modal.description')}</p>
+      {errors.form && <FormFeedback variant="error">{errors.form}</FormFeedback>}
       <PasswordField
         value={values.password}
         onChange={handleChange}
         label={t('account.password')}
         placeholder={t('account.delete_account.modal.placeholder')}
         error={!!errors.password || !!errors.form}
+        helperText={errors.password}
         name="password"
         showHelperText={false}
       />
-      <div className={styles.passwordButtonsContainer}>
-        <Button type="submit" className={styles.button} color="primary" fullWidth label={t('account.continue')} />
-        <Button type="button" onClick={handleCancel} className={styles.button} variant="text" fullWidth label={t('account.cancel')} />
+      <div className={classNames(styles.buttons, styles.stacked)}>
+        <Button type="submit" color="primary" label={t('account.continue')} fullWidth />
+        <Button type="button" onClick={handleCancel} variant="text" label={t('account.cancel')} fullWidth />
       </div>
     </form>
   );
diff --git a/packages/ui-react/src/components/DeleteAccountPasswordWarning/DeleteAccountPasswordWarning.module.scss b/packages/ui-react/src/components/DeleteAccountPasswordWarning/DeleteAccountPasswordWarning.module.scss
index 38a3e3c39..b79be9c5f 100644
--- a/packages/ui-react/src/components/DeleteAccountPasswordWarning/DeleteAccountPasswordWarning.module.scss
+++ b/packages/ui-react/src/components/DeleteAccountPasswordWarning/DeleteAccountPasswordWarning.module.scss
@@ -35,7 +35,7 @@
   color: variables.$gray-white;
   font-weight: 400;
   font-size: 30px;
-  line-height: 28px;
+  line-height: variables.$base-line-height;
   text-align: center;
 }
 
@@ -45,7 +45,7 @@
   padding: 0;
   color: variables.$gray-white;
   font-size: 16px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   text-align: left;
 }
 
diff --git a/packages/ui-react/src/components/Dialog/Dialog.test.tsx b/packages/ui-react/src/components/Dialog/Dialog.test.tsx
index b51699128..862221de8 100644
--- a/packages/ui-react/src/components/Dialog/Dialog.test.tsx
+++ b/packages/ui-react/src/components/Dialog/Dialog.test.tsx
@@ -17,4 +17,21 @@ describe('<Dialog>', () => {
 
     expect(baseElement).toMatchSnapshot();
   });
+
+  test('Should ensure Dialog is properly marked as a modal and has role "dialog"', () => {
+    const { getByTestId } = render(
+      <>
+        <span>Some content</span>
+        <Dialog onClose={vi.fn()} open={true} role="dialog" data-testid="dialog">
+          Dialog contents
+        </Dialog>
+        <span>Some other content</span>
+      </>,
+    );
+
+    const dialogElement = getByTestId('dialog');
+
+    expect(dialogElement).toHaveAttribute('aria-modal', 'true');
+    expect(dialogElement).toHaveAttribute('role', 'dialog');
+  });
 });
diff --git a/packages/ui-react/src/components/Dialog/Dialog.tsx b/packages/ui-react/src/components/Dialog/Dialog.tsx
index e319ab9f8..fdfa6d6f2 100644
--- a/packages/ui-react/src/components/Dialog/Dialog.tsx
+++ b/packages/ui-react/src/components/Dialog/Dialog.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import { testId } from '@jwp/ott-common/src/utils/common';
 
 import Modal from '../Modal/Modal';
 import Slide from '../Animation/Slide/Slide';
@@ -18,7 +19,7 @@ type Props = {
 const Dialog: React.FC<Props> = ({ open, onClose, children, size = 'small', role = 'dialog', ...ariaAttributes }: Props) => {
   return (
     <Modal open={open} onClose={onClose} AnimationComponent={Slide}>
-      <div className={classNames(styles.dialog, styles[size])} role={role} {...ariaAttributes}>
+      <div className={classNames(styles.dialog, styles[size])} aria-modal="true" role={role} data-testid={testId('dialog')} {...ariaAttributes}>
         {children}
         <ModalCloseButton onClick={onClose} />
       </div>
diff --git a/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
index 194e1af50..a46295ebc 100644
--- a/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
     </span>
   </div>
   <div
-    style="transition: opacity 0.3s ease-in-out; opacity: 0;"
+    style="transition: opacity 0.3s ease-in-out; opacity: 0; will-change: opacity;"
   >
     <div
       class="_modal_6c6c55"
@@ -23,15 +23,15 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
         data-testid="backdrop"
       />
       <div
-        aria-modal="true"
         class="_container_6c6c55"
-        data-testid="container"
       >
         <div
           style="transition: transform 0.2s ease, opacity 0.2s ease; transform: translate(0, -15px); opacity: 0; z-index: 15;"
         >
           <div
+            aria-modal="true"
             class="_dialog_00d559 _small_00d559"
+            data-testid="dialog"
             role="dialog"
           >
             Dialog contents
diff --git a/packages/ui-react/src/components/Dropdown/Dropdown.module.scss b/packages/ui-react/src/components/Dropdown/Dropdown.module.scss
index 852139f1e..3dc8a7ce7 100644
--- a/packages/ui-react/src/components/Dropdown/Dropdown.module.scss
+++ b/packages/ui-react/src/components/Dropdown/Dropdown.module.scss
@@ -86,7 +86,7 @@ $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
     font-family: inherit;
     font-weight: theme.$body-font-weight-bold;
     font-size: 1rem;
-    line-height: 1em;
+    line-height: variables.$base-line-height;
     text-overflow: ellipsis;
     background: none;
     border: none;
diff --git a/packages/ui-react/src/components/Dropdown/Dropdown.tsx b/packages/ui-react/src/components/Dropdown/Dropdown.tsx
index 25476e59c..b70dfb45e 100644
--- a/packages/ui-react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/ui-react/src/components/Dropdown/Dropdown.tsx
@@ -20,6 +20,7 @@ type Props = {
   error?: boolean;
   helperText?: string;
   required?: boolean;
+  hideOptional?: boolean;
   onChange: React.ChangeEventHandler;
   testId?: string;
   lang?: string;
@@ -40,6 +41,7 @@ const Dropdown: React.FC<Props & React.AriaAttributes> = ({
   required = false,
   size = 'medium',
   testId,
+  hideOptional,
   lang,
   ...rest
 }: Props & React.AriaAttributes) => {
@@ -49,10 +51,10 @@ const Dropdown: React.FC<Props & React.AriaAttributes> = ({
 
   return (
     <div className={classNames(styles.container, { [styles.fullWidth]: fullWidth, [styles.error]: error }, styles[size], className)} data-testid={testId}>
-      {(label || !required) && (
+      {(label || (!required && !hideOptional)) && (
         <label htmlFor={id} className={styles.label}>
           {label}
-          {!required ? <span>{t('optional')}</span> : null}
+          {!required && !hideOptional ? <span>{t('optional')}</span> : null}
         </label>
       )}
       <div className={classNames(styles.dropdown, { [styles.fullWidth]: fullWidth })}>
diff --git a/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx b/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
index 9881a4afc..369610415 100644
--- a/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
+++ b/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
@@ -109,6 +109,7 @@ const EditCardPaymentForm: React.FC<Props> = ({ onCancel, setUpdatingCardDetails
           onChange={paymentData?.handleChange}
           onBlur={paymentData?.handleBlur}
           placeholder={t('checkout.credit_card_name')}
+          autoComplete="cc-name"
           required
         />
       </div>
diff --git a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.module.scss b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.module.scss
index 944938020..4cefefb11 100644
--- a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.module.scss
+++ b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.module.scss
@@ -27,7 +27,7 @@
   padding-bottom: 20px;
   color: variables.$gray-white;
   font-size: 17px;
-  line-height: 21px;
+  line-height: variables.$base-line-height;
   text-align: left;
 }
 
diff --git a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
index 58214e75e..5aa41f030 100644
--- a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
+++ b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
@@ -20,6 +20,7 @@ type Props = {
   error?: string;
   errors: FormErrors<EditPasswordFormData>;
   value: EditPasswordFormData;
+  validationError?: boolean;
   submitting: boolean;
   showOldPasswordField?: boolean;
   showResetTokenField?: boolean;
@@ -36,13 +37,18 @@ const EditPasswordForm: React.FC<Props> = ({
   value,
   errors,
   submitting,
+  validationError,
   email,
   onResendEmailClick,
 }: Props) => {
   const { t } = useTranslation(['account', 'user']);
   return (
     <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate className={styles.forgotPasswordForm}>
-      {errors.form && <FormFeedback variant="error">{errors.form}</FormFeedback>}
+      {errors.form && (
+        <FormFeedback variant="error" visible={!validationError}>
+          {errors.form}
+        </FormFeedback>
+      )}
       <h2 className={styles.title}>{showOldPasswordField && showResetTokenField ? t('user:account.add_password') : t('reset.password_reset')}</h2>
       {showOldPasswordField && showResetTokenField && (
         <p className={styles.paragraph}>
@@ -76,6 +82,7 @@ const EditPasswordForm: React.FC<Props> = ({
           placeholder={t('reset.reset_password_token')}
           name="resetPasswordToken"
           type="text"
+          autoComplete=""
           required
         />
       )}
diff --git a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
index 25401e974..6158f4261 100644
--- a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
@@ -26,7 +26,6 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
-          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_password"
           name="password"
@@ -40,6 +39,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         >
           <div
             aria-label="reset.view_password"
+            aria-pressed="false"
             class="_iconButton_0fef65"
             role="button"
             tabindex="0"
@@ -58,9 +58,8 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         </div>
       </div>
       <div
-        aria-live="polite"
         class="_helperText_da58e0"
-        id="helper_text_1235_password_1235"
+        id="helper_text_1235_password"
       >
         reset.password_helper_text
       </div>
@@ -80,7 +79,6 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_passwordconfirmation"
           aria-invalid="false"
-          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_passwordconfirmation"
           name="passwordConfirmation"
@@ -94,6 +92,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         >
           <div
             aria-label="reset.view_password"
+            aria-pressed="false"
             class="_iconButton_0fef65"
             role="button"
             tabindex="0"
@@ -112,9 +111,8 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         </div>
       </div>
       <div
-        aria-live="polite"
         class="_helperText_da58e0"
-        id="helper_text_1235_passwordconfirmation_1235"
+        id="helper_text_1235_passwordconfirmation"
       >
         reset.password_helper_text
       </div>
diff --git a/packages/ui-react/src/components/EpgProgramItem/EpgProgramItem.module.scss b/packages/ui-react/src/components/EpgProgramItem/EpgProgramItem.module.scss
index 910c8d171..70c9d79f9 100644
--- a/packages/ui-react/src/components/EpgProgramItem/EpgProgramItem.module.scss
+++ b/packages/ui-react/src/components/EpgProgramItem/EpgProgramItem.module.scss
@@ -97,14 +97,13 @@
   font-family: var(--body-font-family);
   font-weight: theme.$body-font-weight-bold;
   font-size: 16px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   white-space: nowrap;
   text-overflow: ellipsis;
 
   @include responsive.mobile-only {
     margin: auto 0;
     font-size: 14px;
-    line-height: 16px;
   }
 }
 
@@ -113,14 +112,13 @@
   color: theme.$epg-text-color;
   font-family: var(--body-font-family);
   font-size: 14px;
-  line-height: 16px;
+  line-height: variables.$base-line-height;
   white-space: nowrap;
   text-overflow: ellipsis;
 
   @include responsive.mobile-only {
     margin-top: auto;
     font-size: 12px;
-    line-height: 14px;
   }
 }
 
diff --git a/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx b/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx
index 75959b14d..94911cbb3 100644
--- a/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx
+++ b/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx
@@ -32,11 +32,12 @@ const ErrorPage = ({ title, message, learnMoreLabel, ...rest }: Props) => {
 
 export const ErrorPageWithoutTranslation = ({ title, children, message, learnMoreLabel, error, helpLink }: Props) => {
   const logo = useConfigStore((s) => s.config?.assets?.banner);
+  const alt = ''; // intentionally empty for a11y, because adjacent text alternative
 
   return (
     <div className={styles.errorPage}>
       <div className={styles.box}>
-        <img className={styles.image} src={logo || '/images/logo.png'} alt={'Logo'} />
+        <img className={styles.image} src={logo || '/images/logo.png'} alt={alt} />
         <h1 className={styles.title}>{title || 'An error occurred'}</h1>
         <div className={styles.main}>
           <p className={styles.message}>{message || 'Try refreshing this page or come back later.'}</p>
diff --git a/packages/ui-react/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap b/packages/ui-react/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap
index bcfb0f4e3..7dea1eabe 100644
--- a/packages/ui-react/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap
+++ b/packages/ui-react/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<ErrorPage> > renders and matches snapshot 1`] = `
       class="_box_8c5621"
     >
       <img
-        alt="Logo"
+        alt=""
         class="_image_8c5621"
         src="/images/logo.png"
       />
diff --git a/packages/ui-react/src/components/Filter/Filter.tsx b/packages/ui-react/src/components/Filter/Filter.tsx
index b7f590129..ffe24f0db 100644
--- a/packages/ui-react/src/components/Filter/Filter.tsx
+++ b/packages/ui-react/src/components/Filter/Filter.tsx
@@ -41,10 +41,11 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, force
           {options.map((option) => {
             const optionLabel = typeof option === 'string' ? option : option.label;
             const optionValue = typeof option === 'string' ? option : option.value;
+            const active = value === optionValue;
 
-            return <Button label={optionLabel} onClick={() => setValue(optionValue)} key={optionValue} active={value === optionValue} role="option" />;
+            return <Button label={optionLabel} onClick={() => setValue(optionValue)} key={optionValue} active={active} role="option" aria-selected={active} />;
           })}
-          <Button label={defaultLabel} onClick={() => setValue('')} active={value === ''} key={defaultLabel} role="option" />
+          <Button label={defaultLabel} onClick={() => setValue('')} active={value === ''} key={defaultLabel} role="option" aria-selected={value === ''} />
         </div>
       ) : (
         <div className={styles.filterDropDown}>
@@ -57,6 +58,7 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, force
             value={value}
             onChange={handleChange}
             aria-label={t('filter_videos_by', { name })}
+            hideOptional
           />
         </div>
       )}
diff --git a/packages/ui-react/src/components/Filter/__snapshots__/Filter.test.tsx.snap b/packages/ui-react/src/components/Filter/__snapshots__/Filter.test.tsx.snap
index 8fc29d1be..84b56601a 100644
--- a/packages/ui-react/src/components/Filter/__snapshots__/Filter.test.tsx.snap
+++ b/packages/ui-react/src/components/Filter/__snapshots__/Filter.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`<Filter> > renders Filter 1`] = `
     role="listbox"
   >
     <button
+      aria-selected="false"
       class="_button_f8f296 _default_f8f296 _outlined_f8f296"
       role="option"
       type="button"
@@ -17,6 +18,7 @@ exports[`<Filter> > renders Filter 1`] = `
       </span>
     </button>
     <button
+      aria-selected="false"
       class="_button_f8f296 _default_f8f296 _outlined_f8f296"
       role="option"
       type="button"
@@ -26,6 +28,7 @@ exports[`<Filter> > renders Filter 1`] = `
       </span>
     </button>
     <button
+      aria-selected="false"
       class="_button_f8f296 _default_f8f296 _outlined_f8f296"
       role="option"
       type="button"
@@ -35,6 +38,7 @@ exports[`<Filter> > renders Filter 1`] = `
       </span>
     </button>
     <button
+      aria-selected="false"
       class="_button_f8f296 _default_f8f296 _outlined_f8f296"
       role="option"
       type="button"
diff --git a/packages/ui-react/src/components/Footer/Footer.module.scss b/packages/ui-react/src/components/Footer/Footer.module.scss
new file mode 100644
index 000000000..186f2a31f
--- /dev/null
+++ b/packages/ui-react/src/components/Footer/Footer.module.scss
@@ -0,0 +1,36 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+
+.footer {
+  padding: 20px 40px;
+  line-height: variables.$base-line-height;
+  letter-spacing: 0.15px;
+  text-align: center;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
+
+  a,
+  a:visited,
+  a:active,
+  a:hover {
+    color: variables.$white;
+    text-decoration: underline;
+  }
+}
+
+.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  li {
+    display: inline-block;
+    padding: 0 3px;
+
+    &:not(:last-child)::after {
+      content: ' | ';
+    }
+  }
+}
+
+.testFixMargin {
+  margin-bottom: 50px;
+}
diff --git a/packages/ui-react/src/components/Footer/Footer.test.tsx b/packages/ui-react/src/components/Footer/Footer.test.tsx
new file mode 100644
index 000000000..29e02b613
--- /dev/null
+++ b/packages/ui-react/src/components/Footer/Footer.test.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Footer from './Footer';
+
+describe('<Footer>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<Footer text="Simple" />);
+
+    expect(container).toMatchSnapshot();
+  });
+  test('renders and matches snapshot without links', () => {
+    const { container } = render(<Footer text="Text one | Text two" />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders and matches snapshot with two links', () => {
+    const { container } = render(<Footer text="Two links | [jwplayer.com](https://www.jwplayer.com/) | [jwplayer.com](https://www.jwplayer.com/)" />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/ui-react/src/components/Footer/Footer.tsx b/packages/ui-react/src/components/Footer/Footer.tsx
new file mode 100644
index 000000000..8d9ad39bd
--- /dev/null
+++ b/packages/ui-react/src/components/Footer/Footer.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import classNames from 'classnames';
+import { IS_DEVELOPMENT_BUILD } from '@jwp/ott-common/src/utils/common';
+
+import MarkdownComponent from '../MarkdownComponent/MarkdownComponent';
+
+import styles from './Footer.module.scss';
+
+type Props = {
+  text: string;
+};
+
+const Footer: React.FC<Props> = ({ text }) => {
+  const chunks = text.split('|').map((chuck) => chuck.trim());
+  const footerContent = chunks.map((value, index) => <MarkdownComponent key={index} markdownString={value} inline tag={chunks.length > 1 ? 'li' : 'div'} />);
+  const wrapper = chunks.length > 1 ? <ul className={styles.list}>{footerContent}</ul> : footerContent;
+
+  return (
+    // The extra style below is just to fix the footer on mobile when the dev selector is shown
+    <footer className={classNames(styles.footer, { [styles.testFixMargin]: IS_DEVELOPMENT_BUILD })}>{wrapper}</footer>
+  );
+};
+
+export default Footer;
diff --git a/packages/ui-react/src/components/Footer/__snapshots__/Footer.test.tsx.snap b/packages/ui-react/src/components/Footer/__snapshots__/Footer.test.tsx.snap
new file mode 100644
index 000000000..59e1a8529
--- /dev/null
+++ b/packages/ui-react/src/components/Footer/__snapshots__/Footer.test.tsx.snap
@@ -0,0 +1,78 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Footer> > renders and matches snapshot 1`] = `
+<div>
+  <footer
+    class="_footer_33bf66 _testFixMargin_33bf66"
+  >
+    <div
+      class="_markdown_e219e2"
+    >
+      Simple
+    </div>
+  </footer>
+</div>
+`;
+
+exports[`<Footer> > renders and matches snapshot with two links 1`] = `
+<div>
+  <footer
+    class="_footer_33bf66 _testFixMargin_33bf66"
+  >
+    <ul
+      class="_list_33bf66"
+    >
+      <li
+        class="_markdown_e219e2"
+      >
+        Two links
+      </li>
+      <li
+        class="_markdown_e219e2"
+      >
+        <a
+          href="https://www.jwplayer.com/"
+          rel="noopener"
+          target="_blank"
+        >
+          jwplayer.com
+        </a>
+      </li>
+      <li
+        class="_markdown_e219e2"
+      >
+        <a
+          href="https://www.jwplayer.com/"
+          rel="noopener"
+          target="_blank"
+        >
+          jwplayer.com
+        </a>
+      </li>
+    </ul>
+  </footer>
+</div>
+`;
+
+exports[`<Footer> > renders and matches snapshot without links 1`] = `
+<div>
+  <footer
+    class="_footer_33bf66 _testFixMargin_33bf66"
+  >
+    <ul
+      class="_list_33bf66"
+    >
+      <li
+        class="_markdown_e219e2"
+      >
+        Text one
+      </li>
+      <li
+        class="_markdown_e219e2"
+      >
+        Text two
+      </li>
+    </ul>
+  </footer>
+</div>
+`;
diff --git a/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx b/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
index ae3c69613..47d950cf9 100644
--- a/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
+++ b/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
@@ -36,9 +36,10 @@ const ForgotPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors
         placeholder={t('reset.email')}
         error={!!errors.email || !!errors.form}
         helperText={errors.email}
-        required
         name="email"
         type="email"
+        autoComplete="email"
+        required
       />
       <Button type="submit" className={styles.button} fullWidth color="primary" disabled={submitting} label={t('reset.email_me')} />
     </form>
diff --git a/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap b/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
index c9d190dc7..d7350f90a 100644
--- a/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<ForgotPasswordForm> > renders and matches snapshot type forgot 1`] = `
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
-          aria-required="true"
+          autocomplete="email"
           class="_input_e16c1b"
           id="text-field_1235_email"
           name="email"
diff --git a/packages/ui-react/src/components/Form/FormSection.tsx b/packages/ui-react/src/components/Form/FormSection.tsx
index 29217f810..eb4daf399 100644
--- a/packages/ui-react/src/components/Form/FormSection.tsx
+++ b/packages/ui-react/src/components/Form/FormSection.tsx
@@ -23,7 +23,6 @@ export interface FormSectionProps<TData extends GenericFormValues, TErrors> {
   editButton?: string | ReactElement;
   saveButton?: string;
   cancelButton?: string;
-  canSave?: (values: TData) => boolean;
   onSubmit?: (values: TData) => Promise<{ errors?: string[] }>;
   content?: (args: FormSectionContentArgs<TData, TErrors>) => ReactNode;
   children?: never;
@@ -37,14 +36,13 @@ export function FormSection<TData extends GenericFormValues>({
   editButton,
   saveButton,
   cancelButton,
-  canSave,
   onSubmit,
   content,
   readOnly = false,
 }: FormSectionProps<TData, string[]>): ReactElement<FormSectionProps<TData, string[]>> | null {
   const sectionId = useOpaqueId(label);
   const {
-    formState: { values, activeSectionId, isDirty, errors: formErrors, isBusy },
+    formState: { values, activeSectionId, errors: formErrors, isBusy },
     setFormState,
     isLoading,
     onCancel,
@@ -80,7 +78,6 @@ export function FormSection<TData extends GenericFormValues>({
         return {
           ...oldState,
           values: newValues,
-          isDirty: true,
           activeSectionId: sectionId,
         };
       });
@@ -122,7 +119,6 @@ export function FormSection<TData extends GenericFormValues>({
         return {
           ...s,
           activeSectionId: undefined,
-          isDirty: false,
           isBusy: false,
         };
       });
@@ -166,9 +162,7 @@ export function FormSection<TData extends GenericFormValues>({
         <div className={styles.controls}>
           {isEditing ? (
             <>
-              {saveButton && (
-                <Button label={saveButton} type="submit" onClick={handleSubmit} disabled={!isDirty || isLoading || (canSave && !canSave(values))} />
-              )}
+              {saveButton && <Button label={saveButton} type="submit" onClick={handleSubmit} disabled={isLoading} />}
               {cancelButton && <Button label={cancelButton} type="reset" variant="text" onClick={onCancel} />}
             </>
           ) : (
diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
index c14b438ae..eb66f4de2 100644
--- a/packages/ui-react/src/components/Header/Header.module.scss
+++ b/packages/ui-react/src/components/Header/Header.module.scss
@@ -171,22 +171,12 @@
   }
 }
 
-.userMenuButton {
-  margin-left: 8px;
-}
-
 .brandCentered {
   .brand {
     text-align: center;
   }
 }
-.profile {
-  display: flex;
-  align-items: center;
-  h2 {
-    cursor: pointer;
-  }
-}
+
 //
 // mediaQueries
 // --------------------------------
diff --git a/packages/ui-react/src/components/Header/Header.test.tsx b/packages/ui-react/src/components/Header/Header.test.tsx
index 973ed40b1..2cd961f57 100644
--- a/packages/ui-react/src/components/Header/Header.test.tsx
+++ b/packages/ui-react/src/components/Header/Header.test.tsx
@@ -34,8 +34,8 @@ describe('<Header />', () => {
         onLoginButtonClick={vi.fn()}
         userMenuOpen={false}
         sideBarOpen={false}
-        openUserMenu={vi.fn()}
-        closeUserMenu={vi.fn()}
+        openUserPanel={vi.fn()}
+        closeUserPanel={vi.fn()}
         openLanguageMenu={vi.fn()}
         closeLanguageMenu={vi.fn()}
         isLoggedIn={false}
diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
index e3ded9202..c3f592f56 100644
--- a/packages/ui-react/src/components/Header/Header.tsx
+++ b/packages/ui-react/src/components/Header/Header.tsx
@@ -13,6 +13,7 @@ import SearchBar, { type Props as SearchBarProps } from '../SearchBar/SearchBar'
 import Logo from '../Logo/Logo';
 import Button from '../Button/Button';
 import UserMenu from '../UserMenu/UserMenu';
+import ProfilesMenu from '../ProfilesMenu/ProfilesMenu';
 import IconButton from '../IconButton/IconButton';
 import LanguageMenu from '../LanguageMenu/LanguageMenu';
 import Panel from '../Panel/Panel';
@@ -35,8 +36,8 @@ type Props = {
   onCloseSearchButtonClick?: () => void;
   onLoginButtonClick?: () => void;
   onSignUpButtonClick?: () => void;
-  openUserMenu: () => void;
-  closeUserMenu: () => void;
+  openUserPanel: () => void;
+  closeUserPanel: () => void;
   openLanguageMenu: () => void;
   closeLanguageMenu: () => void;
   children?: ReactNode;
@@ -76,8 +77,8 @@ const Header: React.FC<Props> = ({
   sideBarOpen,
   userMenuOpen,
   languageMenuOpen,
-  openUserMenu,
-  closeUserMenu,
+  openUserPanel,
+  closeUserPanel,
   openLanguageMenu,
   closeLanguageMenu,
   canLogin = false,
@@ -131,10 +132,11 @@ const Header: React.FC<Props> = ({
         <IconButton
           className={classNames(styles.iconButton, styles.actionButton)}
           aria-label={t('open_user_menu')}
-          aria-controls="user_menu_panel"
+          aria-controls="menu_panel"
           aria-expanded={userMenuOpen}
-          onClick={openUserMenu}
-          onBlur={closeUserMenu}
+          aria-haspopup="menu"
+          onClick={openUserPanel}
+          onBlur={closeUserPanel}
         >
           {profilesEnabled && currentProfile ? (
             <ProfileCircle src={currentProfile.avatar_url} alt={currentProfile.name || t('profile_icon')} />
@@ -142,29 +144,35 @@ const Header: React.FC<Props> = ({
             <Icon icon={AccountCircle} />
           )}
         </IconButton>
-        <Popover isOpen={userMenuOpen} onClose={closeUserMenu}>
-          <Panel id="user_menu_panel">
-            <UserMenu
-              focusable={userMenuOpen}
-              onClick={closeUserMenu}
-              onFocus={openUserMenu}
-              onBlur={closeUserMenu}
-              showPaymentsItem={showPaymentsMenuItem}
-              currentProfile={currentProfile}
-              profilesEnabled={profilesEnabled}
-              profiles={profiles}
-              selectProfile={selectProfile}
-              isSelectingProfile={!!isSelectingProfile}
-              favoritesEnabled={favoritesEnabled}
-              small
-            />
+        <Popover isOpen={userMenuOpen} onClose={closeUserPanel}>
+          <Panel id="menu_panel">
+            <div onFocus={openUserPanel} onBlur={closeUserPanel}>
+              {profilesEnabled && (
+                <ProfilesMenu
+                  onButtonClick={closeUserPanel}
+                  profiles={profiles ?? []}
+                  currentProfile={currentProfile}
+                  selectingProfile={!!isSelectingProfile}
+                  selectProfile={selectProfile}
+                  small
+                />
+              )}
+              <UserMenu
+                focusable={userMenuOpen}
+                onButtonClick={closeUserPanel}
+                showPaymentsItem={showPaymentsMenuItem}
+                currentProfile={currentProfile}
+                favoritesEnabled={favoritesEnabled}
+                small
+              />
+            </div>
           </Panel>
         </Popover>
       </React.Fragment>
     ) : (
       <div className={styles.buttonContainer}>
-        <Button onClick={onLoginButtonClick} label={t('sign_in')} />
-        <Button variant="contained" color="primary" onClick={onSignUpButtonClick} label={t('sign_up')} />
+        <Button onClick={onLoginButtonClick} label={t('sign_in')} aria-haspopup="dialog" />
+        <Button variant="contained" color="primary" onClick={onSignUpButtonClick} label={t('sign_up')} aria-haspopup="dialog" />
       </div>
     );
   };
@@ -200,7 +208,7 @@ const Header: React.FC<Props> = ({
             aria-controls="sidebar"
             aria-haspopup="true"
             aria-expanded={sideBarOpen}
-            onClick={onMenuButtonClick}
+            onClick={() => onMenuButtonClick()}
           >
             <Icon icon={Menu} />
           </IconButton>
diff --git a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
index c22e2094a..baeb35dd9 100644
--- a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -71,6 +71,7 @@ exports[`<Header /> > renders header 1`] = `
           class="_buttonContainer_f4f7a7"
         >
           <button
+            aria-haspopup="dialog"
             class="_button_f8f296 _default_f8f296 _outlined_f8f296"
             type="button"
           >
@@ -79,6 +80,7 @@ exports[`<Header /> > renders header 1`] = `
             </span>
           </button>
           <button
+            aria-haspopup="dialog"
             class="_button_f8f296 _primary_f8f296"
             type="button"
           >
diff --git a/packages/ui-react/src/components/HelperText/HelperText.tsx b/packages/ui-react/src/components/HelperText/HelperText.tsx
index 416aea1a0..43563ac38 100644
--- a/packages/ui-react/src/components/HelperText/HelperText.tsx
+++ b/packages/ui-react/src/components/HelperText/HelperText.tsx
@@ -12,10 +12,10 @@ type Props = {
 };
 
 const HelperText: React.FC<Props> = ({ children, className, error, id }: Props) => {
-  const fallbackId = useOpaqueId((id && id) || 'helper_text');
+  const helperId = useOpaqueId('helper_text', undefined, id);
 
   return children ? (
-    <div id={fallbackId} aria-live={error ? 'assertive' : 'polite'} className={classNames(styles.helperText, { [styles.error]: error }, className)}>
+    <div id={helperId} className={classNames(styles.helperText, { [styles.error]: error }, className)}>
       {children}
     </div>
   ) : null;
diff --git a/packages/ui-react/src/components/HelperText/__snapshots__/HelperText.test.tsx.snap b/packages/ui-react/src/components/HelperText/__snapshots__/HelperText.test.tsx.snap
index bee577bb2..92d3863c0 100644
--- a/packages/ui-react/src/components/HelperText/__snapshots__/HelperText.test.tsx.snap
+++ b/packages/ui-react/src/components/HelperText/__snapshots__/HelperText.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`<HelperText> > renders and matches snapshot 1`] = `
 <div>
   <div
-    aria-live="assertive"
     class="_helperText_da58e0 _error_da58e0"
     id="helper_text_1235"
   >
diff --git a/packages/ui-react/src/components/Hero/Hero.module.scss b/packages/ui-react/src/components/Hero/Hero.module.scss
index 8eef6c51d..637d67845 100644
--- a/packages/ui-react/src/components/Hero/Hero.module.scss
+++ b/packages/ui-react/src/components/Hero/Hero.module.scss
@@ -4,20 +4,49 @@
 @use '@jwp/ott-ui-react/src/styles/mixins/typography';
 
 .hero {
-  height: 40vh;
+  display: flex;
+  max-width: 100vw;
+  min-height: 40vh;
+  color: var(--primary-color);
+  font-family: var(--body-font-family);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
 }
 
-.content {
-  max-width: 60vw;
+.heroPadding {
   padding: 37px 56px 0;
 
+    @include responsive.desktop-small-only() {
+      padding: 34px 36px 36px;
+    }
+
+    @include responsive.tablet-only() {
+      padding: 34px 24px 24px;
+    }
+
+    @include responsive.mobile-only() {
+      padding: 16px;
+  }
+}
+
+.info {
+  position: relative;
+  width: 50%;
+  max-width: 650px;
+  min-height: 440px;
+
+  @include responsive.desktop-small-only() {
+    min-height: 335px;
+  }
+
   @include responsive.tablet-only() {
-    padding: 32px;
+    width: 350px;
+    min-height: 335px;
   }
 
   @include responsive.mobile-only() {
-    max-width: none;
-    padding: 16px;
+    width: 100%;
+    min-height: 380px;
+    padding-top: 225px;
   }
 }
 
@@ -25,7 +54,14 @@
   @include typography.video-title-base;
 }
 
-.image {
+.description {
+  font-family: var(--body-font-family);
+  font-size: 18px;
+  line-height: variables.$base-line-height;
+  letter-spacing: 0.15px;
+}
+
+.poster {
   position: absolute;
   top: 0;
   right: 0;
@@ -47,3 +83,13 @@
     height: calc(180vw / 16 * 9);
   }
 }
+
+.posterFade {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: -1;
+  height: 120px;
+  background: linear-gradient(0deg, transparent, var(--body-background-color, variables.$white));
+}
diff --git a/packages/ui-react/src/components/Hero/Hero.tsx b/packages/ui-react/src/components/Hero/Hero.tsx
index 7f7d43a96..ca64f38d6 100644
--- a/packages/ui-react/src/components/Hero/Hero.tsx
+++ b/packages/ui-react/src/components/Hero/Hero.tsx
@@ -1,5 +1,8 @@
+import classNames from 'classnames';
 import React from 'react';
 
+import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
+import CollapsibleText from '../CollapsibleText/CollapsibleText';
 import Image from '../Image/Image';
 
 import styles from './Hero.module.scss';
@@ -11,12 +14,17 @@ type Props = {
 };
 
 const Hero = ({ title, description, image }: Props) => {
+  const breakpoint: Breakpoint = useBreakpoint();
+  const isMobile = breakpoint === Breakpoint.xs;
+  const alt = ''; // intentionally empty for a11y, because adjacent text alternative
+
   return (
-    <div className={styles.hero}>
-      <Image className={styles.image} image={image} width={1280} alt="" />
-      <div className={styles.content}>
+    <div className={classNames(styles.hero, styles.heroPadding)}>
+      <Image className={styles.poster} image={image} width={1280} alt={alt} />
+      <div className={styles.posterFade} />
+      <div className={styles.info}>
         <h1 className={styles.title}>{title}</h1>
-        <p>{description}</p>
+        <CollapsibleText text={description} className={styles.description} maxHeight={isMobile ? 60 : 'none'} />
       </div>
     </div>
   );
diff --git a/packages/ui-react/src/components/Icon/Icon.tsx b/packages/ui-react/src/components/Icon/Icon.tsx
index 3d52d96ce..2bc8fcc19 100644
--- a/packages/ui-react/src/components/Icon/Icon.tsx
+++ b/packages/ui-react/src/components/Icon/Icon.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { FC, SVGProps } from 'react';
+import React, { type FC, type SVGProps } from 'react';
 
 import styles from './Icon.module.scss';
 
diff --git a/packages/ui-react/src/components/IconButton/IconButton.tsx b/packages/ui-react/src/components/IconButton/IconButton.tsx
index 3b687eac9..fa5d6b8e4 100644
--- a/packages/ui-react/src/components/IconButton/IconButton.tsx
+++ b/packages/ui-react/src/components/IconButton/IconButton.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { AriaAttributes } from 'react';
+import React, { type AriaAttributes } from 'react';
 
 import styles from './IconButton.module.scss';
 
diff --git a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.module.scss b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.module.scss
index 5989c0859..32c6c21a1 100644
--- a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.module.scss
+++ b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.module.scss
@@ -27,6 +27,8 @@
 }
 
 .menuItemActive {
+  background: rgba(variables.$white, 0.08);
+
   > a {
     font-weight: bold;
   }
diff --git a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
index 08385597a..2a11f724a 100644
--- a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
+++ b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
@@ -47,6 +47,7 @@ const LanguageMenu = ({ onClick, className, languages, currentLanguage, language
         data-testid={testId('language-menu-button')}
         aria-controls="language-panel"
         aria-expanded={languageMenuOpen}
+        aria-haspopup="menu"
         className={classNames(styles.iconButton, className)}
         aria-label={t('language_menu')}
         onClick={handleMenuToggle}
@@ -58,11 +59,11 @@ const LanguageMenu = ({ onClick, className, languages, currentLanguage, language
         <Panel id="language-panel">
           <ul className={styles.menuItems}>
             {languages.map(({ code, displayName }) => {
-              const menuItemClassname = classNames(styles.menuItem, { [styles.menuItemActive]: currentLanguage?.code === code });
-
+              const isActive = currentLanguage?.code === code;
+              const menuItemClassname = classNames(styles.menuItem, { [styles.menuItemActive]: isActive });
               return (
                 <li key={code} className={menuItemClassname} onClick={(event) => handleLanguageSelect(event, code)}>
-                  <Link onFocus={openLanguageMenu} onBlur={closeLanguageMenu} href="#">
+                  <Link onFocus={openLanguageMenu} onBlur={closeLanguageMenu} href="#" aria-current={isActive}>
                     {displayName}
                   </Link>
                 </li>
diff --git a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
index d34107d34..e098530c3 100644
--- a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
+++ b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
   <div
     aria-controls="language-panel"
     aria-expanded="false"
+    aria-haspopup="menu"
     aria-label="language_menu"
     class="_iconButton_0fef65"
     data-testid="language-menu-button"
diff --git a/packages/ui-react/src/components/LoginForm/LoginForm.tsx b/packages/ui-react/src/components/LoginForm/LoginForm.tsx
index b594c673d..3e36ab5bb 100644
--- a/packages/ui-react/src/components/LoginForm/LoginForm.tsx
+++ b/packages/ui-react/src/components/LoginForm/LoginForm.tsx
@@ -28,13 +28,14 @@ type Props = {
   error?: string;
   errors: FormErrors<LoginFormData>;
   values: LoginFormData;
+  validationError?: boolean;
   submitting: boolean;
   socialLoginURLs: SocialLoginURLs | null;
   siteName?: string;
   messageKey: string | null;
 };
 
-const LoginForm: React.FC<Props> = ({ onSubmit, onChange, socialLoginURLs, values, errors, submitting, siteName, messageKey }: Props) => {
+const LoginForm: React.FC<Props> = ({ onSubmit, onChange, socialLoginURLs, values, errors, validationError, submitting, siteName, messageKey }: Props) => {
   const [viewPassword, toggleViewPassword] = useToggle();
   const { t } = useTranslation('account');
   const location = useLocation();
@@ -54,7 +55,11 @@ const LoginForm: React.FC<Props> = ({ onSubmit, onChange, socialLoginURLs, value
           <FormFeedback variant="warning">{getTranslatedErrorMessage(messageKey)}</FormFeedback>
         </div>
       )}
-      {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
+      {errors.form ? (
+        <FormFeedback variant="error" visible={!validationError}>
+          {errors.form}
+        </FormFeedback>
+      ) : null}
 
       <SocialButtonsList socialLoginURLs={socialLoginURLs} />
       <h2 className={styles.title}>{t('login.sign_in')}</h2>
@@ -63,29 +68,31 @@ const LoginForm: React.FC<Props> = ({ onSubmit, onChange, socialLoginURLs, value
         onChange={onChange}
         label={t('login.email')}
         placeholder={t('login.email')}
-        error={!!errors.email || !!errors.form}
+        error={!!errors.email}
         helperText={errors.email}
         name="email"
         type="email"
         required
         testId="login-email-input"
+        autoComplete="email"
       />
       <TextField
         value={values.password}
         onChange={onChange}
         label={t('login.password')}
         placeholder={t('login.password')}
-        error={!!errors.password || !!errors.form}
+        error={!!errors.password}
         helperText={errors.password}
         name="password"
         type={viewPassword ? 'text' : 'password'}
         rightControl={
-          <IconButton aria-label={viewPassword ? t('login.hide_password') : t('login.view_password')} onClick={() => toggleViewPassword()}>
+          <IconButton aria-label={t('login.view_password')} onClick={() => toggleViewPassword()} aria-pressed={viewPassword}>
             <Icon icon={viewPassword ? Visibility : VisibilityOff} />
           </IconButton>
         }
         required
         testId="login-password-input"
+        autoComplete="current-password"
       />
       {submitting && <LoadingOverlay transparentBackground inline />}
       <Link className={styles.link} to={modalURLFromLocation(location, 'forgot-password')}>
diff --git a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
index 6be761d51..ccb3a2978 100644
--- a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
+++ b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
-          aria-required="true"
+          autocomplete="email"
           class="_input_e16c1b"
           id="text-field_1235_email"
           name="email"
@@ -73,7 +73,7 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
-          aria-required="true"
+          autocomplete="current-password"
           class="_input_e16c1b"
           id="text-field_1235_password"
           name="password"
@@ -87,6 +87,7 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
         >
           <div
             aria-label="login.view_password"
+            aria-pressed="false"
             class="_iconButton_0fef65"
             role="button"
             tabindex="0"
diff --git a/packages/ui-react/src/components/MenuButton/MenuButton.tsx b/packages/ui-react/src/components/MenuButton/MenuButton.tsx
index 7e8fb942d..1a69d0072 100644
--- a/packages/ui-react/src/components/MenuButton/MenuButton.tsx
+++ b/packages/ui-react/src/components/MenuButton/MenuButton.tsx
@@ -14,9 +14,9 @@ type Props = {
   active?: boolean;
   startIcon?: React.ReactElement;
   small?: boolean;
-};
+} & React.AriaAttributes;
 
-const MenuButton: React.FC<Props> = ({ label, to, onClick, onBlur, onFocus, tabIndex = 0, active = false, startIcon, small = false }: Props) => {
+const MenuButton: React.FC<Props> = ({ label, to, onClick, onBlur, onFocus, tabIndex = 0, active = false, startIcon, small = false, ...rest }: Props) => {
   const icon = startIcon ? <div className={styles.startIcon}>{startIcon}</div> : null;
   const getClassName = (isActive: boolean) => classNames(styles.menuButton, { [styles.small]: small }, { [styles.active]: isActive });
 
@@ -38,7 +38,7 @@ const MenuButton: React.FC<Props> = ({ label, to, onClick, onBlur, onFocus, tabI
   }
 
   return (
-    <div onBlur={onBlur} onFocus={onFocus} className={getClassName(active)} onClick={onClick} tabIndex={tabIndex}>
+    <div role="button" onBlur={onBlur} onFocus={onFocus} className={getClassName(active)} onClick={onClick} tabIndex={tabIndex} {...rest}>
       {icon}
       <span className={styles.label}>{label}</span>
     </div>
diff --git a/packages/ui-react/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap b/packages/ui-react/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap
index 61a522aae..708c0ac7c 100644
--- a/packages/ui-react/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap
+++ b/packages/ui-react/src/components/MenuButton/__snapshots__/MenuButton.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`<MenuButton> > renders and matches snapshot 1`] = `
 <div>
   <div
     class="_menuButton_91706b"
+    role="button"
     tabindex="0"
   >
     <span>
diff --git a/packages/ui-react/src/components/Modal/Modal.module.scss b/packages/ui-react/src/components/Modal/Modal.module.scss
index 55d3f09e4..5302dff8b 100644
--- a/packages/ui-react/src/components/Modal/Modal.module.scss
+++ b/packages/ui-react/src/components/Modal/Modal.module.scss
@@ -8,7 +8,7 @@
   left: 0;
   z-index: variables.$modals-z-index;
   width: 100vw;
-  height: calc(100vh - calc(100vh - 100%));
+  height: 100dvh;
 }
 
 .backdrop {
diff --git a/packages/ui-react/src/components/Modal/Modal.test.tsx b/packages/ui-react/src/components/Modal/Modal.test.tsx
index 409083f3e..43a04029e 100644
--- a/packages/ui-react/src/components/Modal/Modal.test.tsx
+++ b/packages/ui-react/src/components/Modal/Modal.test.tsx
@@ -31,7 +31,6 @@ describe('<Modal>', () => {
       </div>,
     );
 
-    expect(getByTestId('container')).toHaveAttribute('aria-modal', 'true');
     expect(getByTestId('root')).toHaveProperty('inert', true);
 
     rerender(
diff --git a/packages/ui-react/src/components/Modal/Modal.tsx b/packages/ui-react/src/components/Modal/Modal.tsx
index b2026808b..2bb2c3000 100644
--- a/packages/ui-react/src/components/Modal/Modal.tsx
+++ b/packages/ui-react/src/components/Modal/Modal.tsx
@@ -10,12 +10,13 @@ import styles from './Modal.module.scss';
 
 type Props = {
   children?: React.ReactNode;
-  AnimationComponent?: React.JSXElementConstructor<{ open?: boolean; duration?: number; delay?: number; children: React.ReactNode }>;
+  AnimationComponent?: React.JSXElementConstructor<{ open?: boolean; duration?: number; delay?: number; children: React.ReactNode; className?: string }>;
   open: boolean;
   onClose?: () => void;
+  animationContainerClassName?: string;
 } & React.AriaAttributes;
 
-const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent = Grow, ...ariaAtributes }: Props) => {
+const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent = Grow, animationContainerClassName, ...ariaAtributes }: Props) => {
   const [visible, setVisible] = useState(open);
   const lastFocus = useRef<HTMLElement>() as React.MutableRefObject<HTMLElement>;
   const modalRef = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
@@ -48,17 +49,6 @@ const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent =
       // prevent scrolling under the modal
       document.body.style.marginRight = `${scrollbarSize()}px`;
       document.body.style.overflowY = 'hidden';
-
-      // focus the first element in the modal, after a short delay to allow the modal to be rendered
-      setTimeout(() => {
-        if (modalRef.current) {
-          const interactiveElement = modalRef.current.querySelectorAll(
-            'div[role="dialog"] input, div[role="dialog"] a, div[role="dialog"] button, div[role="dialog"] [tabindex]',
-          )[0] as HTMLElement | null;
-
-          if (interactiveElement) interactiveElement.focus();
-        }
-      }, 10);
     } else {
       if (appView) {
         appView.inert = false;
@@ -66,13 +56,26 @@ const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent =
 
       document.body.style.removeProperty('margin-right');
       document.body.style.removeProperty('overflow-y');
+    }
+  }, [open]);
 
+  useEffect(() => {
+    if (visible) {
+      // focus the first element in the modal
+      if (modalRef.current) {
+        const interactiveElement = modalRef.current.querySelectorAll(
+          'div[role="dialog"] input, div[role="dialog"] a, div[role="dialog"] button, div[role="dialog"] [tabindex]',
+        )[0] as HTMLElement | null;
+
+        if (interactiveElement) interactiveElement.focus();
+      }
+    } else {
       // restore last focussed element
       if (lastFocus.current) {
         lastFocus.current.focus();
       }
     }
-  }, [open]);
+  }, [visible]);
 
   if (!open && !visible) return null;
 
@@ -80,8 +83,8 @@ const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent =
     <Fade open={open} duration={300} onCloseAnimationEnd={() => setVisible(false)}>
       <div className={styles.modal} onKeyDown={keyDownEventHandler} ref={modalRef}>
         <div className={styles.backdrop} onClick={onClose} data-testid={testId('backdrop')} />
-        <div className={styles.container} data-testid={testId('container')} aria-modal="true" {...ariaAtributes}>
-          <AnimationComponent open={open} duration={200}>
+        <div className={styles.container} {...ariaAtributes}>
+          <AnimationComponent open={open} duration={200} className={animationContainerClassName}>
             {children}
           </AnimationComponent>
         </div>
diff --git a/packages/ui-react/src/components/OfferSwitch/OfferSwitch.module.scss b/packages/ui-react/src/components/OfferSwitch/OfferSwitch.module.scss
index c3c651f93..43326e202 100644
--- a/packages/ui-react/src/components/OfferSwitch/OfferSwitch.module.scss
+++ b/packages/ui-react/src/components/OfferSwitch/OfferSwitch.module.scss
@@ -54,7 +54,7 @@
 .price {
   margin-left: auto;
   font-size: 20px;
-  line-height: 28px;
+  line-height: variables.$base-line-height;
 }
 
 .paymentFrequency {
diff --git a/packages/ui-react/src/components/Panel/Panel.module.scss b/packages/ui-react/src/components/Panel/Panel.module.scss
index 5b357f448..201d6db70 100644
--- a/packages/ui-react/src/components/Panel/Panel.module.scss
+++ b/packages/ui-react/src/components/Panel/Panel.module.scss
@@ -8,7 +8,7 @@
   font-weight: normal;
   font-size: 16px;
   font-style: normal;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.15px;
   background: theme.$modal-bg;
   box-shadow: theme.$panel-box-shadow;
diff --git a/packages/ui-react/src/components/PasswordField/PasswordField.tsx b/packages/ui-react/src/components/PasswordField/PasswordField.tsx
index 5687a0ab7..0a430ee44 100644
--- a/packages/ui-react/src/components/PasswordField/PasswordField.tsx
+++ b/packages/ui-react/src/components/PasswordField/PasswordField.tsx
@@ -16,13 +16,14 @@ type Props = {
   value?: string;
   label?: string;
   placeholder?: string;
+  helperText?: React.ReactNode;
   name: string;
   required?: boolean;
   showToggleView?: boolean;
   showHelperText?: boolean;
 };
 
-const PasswordField: React.FC<Props> = ({ value, showToggleView = true, showHelperText = true, ...props }: Props) => {
+const PasswordField: React.FC<Props> = ({ value, showToggleView = true, helperText, showHelperText = true, ...props }: Props) => {
   const { t } = useTranslation('account');
   const [viewPassword, toggleViewPassword] = useToggle();
 
@@ -30,17 +31,18 @@ const PasswordField: React.FC<Props> = ({ value, showToggleView = true, showHelp
     <TextField
       {...props}
       helperText={
-        showHelperText ? (
+        helperText ||
+        (showHelperText ? (
           <React.Fragment>
             <PasswordStrength password={value || ''} />
             {t('reset.password_helper_text')}
           </React.Fragment>
-        ) : null
+        ) : null)
       }
       type={viewPassword ? 'text' : 'password'}
       rightControl={
         showToggleView ? (
-          <IconButton aria-label={viewPassword ? t('reset.hide_password') : t('reset.view_password')} onClick={() => toggleViewPassword()}>
+          <IconButton aria-label={t('reset.view_password')} onClick={() => toggleViewPassword()} aria-pressed={viewPassword}>
             <Icon icon={viewPassword ? Visibility : VisibilityOff} />
           </IconButton>
         ) : null
diff --git a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap b/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
index 271ac62a7..0bc26227d 100644
--- a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
+++ b/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
@@ -17,7 +17,6 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
       <input
         aria-describedby="helper_text_1235_password"
         aria-invalid="false"
-        aria-required="true"
         class="_input_e16c1b"
         id="text-field_1235_password"
         name="password"
@@ -31,6 +30,7 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
       >
         <div
           aria-label="reset.view_password"
+          aria-pressed="false"
           class="_iconButton_0fef65"
           role="button"
           tabindex="0"
@@ -49,9 +49,8 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      aria-live="polite"
       class="_helperText_da58e0"
-      id="helper_text_1235_password_1235"
+      id="helper_text_1235_password"
     >
       reset.password_helper_text
     </div>
diff --git a/packages/ui-react/src/components/PasswordStrength/PasswordStrength.tsx b/packages/ui-react/src/components/PasswordStrength/PasswordStrength.tsx
index 0ec0237b3..9a3c5abff 100644
--- a/packages/ui-react/src/components/PasswordStrength/PasswordStrength.tsx
+++ b/packages/ui-react/src/components/PasswordStrength/PasswordStrength.tsx
@@ -50,8 +50,8 @@ const PasswordStrength: React.FC<Props> = ({ password }: Props) => {
     <div className={styles.passwordStrength} data-strength={strength}>
       <div className={styles.passwordStrengthBar}>
         <div className={styles.passwordStrengthFill} />
-      </div>{' '}
-      <span className={styles.label}>{labels[strength]}</span>
+      </div>
+      <span className="hidden">{t('registration.password_strength_prefix')}</span> <span className={styles.label}>{labels[strength]}</span>
     </div>
   );
 };
diff --git a/packages/ui-react/src/components/PasswordStrength/__snapshots__/PasswordStrength.test.tsx.snap b/packages/ui-react/src/components/PasswordStrength/__snapshots__/PasswordStrength.test.tsx.snap
index fbc2089d9..951228cca 100644
--- a/packages/ui-react/src/components/PasswordStrength/__snapshots__/PasswordStrength.test.tsx.snap
+++ b/packages/ui-react/src/components/PasswordStrength/__snapshots__/PasswordStrength.test.tsx.snap
@@ -13,6 +13,11 @@ exports[`<PasswordStrength> > renders and matches snapshot 1`] = `
         class="_passwordStrengthFill_857746"
       />
     </div>
+    <span
+      class="hidden"
+    >
+      registration.password_strength_prefix
+    </span>
      
     <span
       class="_label_857746"
diff --git a/packages/ui-react/src/components/Payment/Payment.module.scss b/packages/ui-react/src/components/Payment/Payment.module.scss
index 5de543cd6..02c500d3a 100644
--- a/packages/ui-react/src/components/Payment/Payment.module.scss
+++ b/packages/ui-react/src/components/Payment/Payment.module.scss
@@ -10,15 +10,19 @@
   padding: calc(#{variables.$base-spacing} / 2) variables.$base-spacing;
 
   font-size: 14px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
   background: theme.$panel-bg;
   border-radius: 4px;
 
   > strong {
-    line-height: 16px;
     letter-spacing: 0.25px;
   }
+
+  @include responsive.mobile-only() {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 
 .transactionItem {
@@ -40,22 +44,32 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
   > div {
     margin-left: variables.$base-spacing;
+
+    @include responsive.mobile-only() {
+      margin-left: 0;
+    }
+  }
+
+  @include responsive.mobile-only() {
+    justify-content: space-between;
+    width: 100%;
   }
 }
 
-.transationPrice {
+.transactionPrice {
   font-size: 1.25em;
 }
 
 .price {
   font-size: 14px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
+
   > strong {
     font-weight: var(--body-font-weight-bold);
     font-size: 24px;
-    line-height: 26px;
   }
 }
 
@@ -101,3 +115,7 @@
 .changePlanCancelButton {
   margin-left: auto;
 }
+
+.editCard {
+  margin: 0 0 8px;
+}
diff --git a/packages/ui-react/src/components/Payment/Payment.tsx b/packages/ui-react/src/components/Payment/Payment.tsx
index de4af6a34..b209a7058 100644
--- a/packages/ui-react/src/components/Payment/Payment.tsx
+++ b/packages/ui-react/src/components/Payment/Payment.tsx
@@ -11,6 +11,7 @@ import ExternalLink from '@jwp/ott-theme/assets/icons/external_link.svg?react';
 import PayPal from '@jwp/ott-theme/assets/icons/paypal.svg?react';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
 import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
+import classNames from 'classnames';
 
 import IconButton from '../IconButton/IconButton';
 import Alert from '../Alert/Alert';
@@ -296,6 +297,7 @@ const Payment = ({
                 value={`•••• •••• •••• ${activePaymentDetail.paymentMethodSpecificParams.lastCardFourDigits || ''}`}
                 aria-label={t('user:payment.card_number_hidden', { number: activePaymentDetail.paymentMethodSpecificParams.lastCardFourDigits })}
                 editing={false}
+                autoComplete="cc-number"
               />
               <div className={styles.cardDetails}>
                 <TextField
@@ -303,6 +305,7 @@ const Payment = ({
                   name="cardExpiry"
                   value={activePaymentDetail.paymentMethodSpecificParams.cardExpirationDate}
                   editing={false}
+                  autoComplete="cc-exp"
                 />
                 <TextField
                   label={t('user:payment.security_code')}
@@ -310,9 +313,15 @@ const Payment = ({
                   value={'******'}
                   editing={false}
                   aria-label={t('user:payment.security_code_hidden')}
+                  autoComplete="cc-csc"
                 />
               </div>
-              <Button label={t('account:payment.edit_card')} variant="outlined" onClick={onEditCardDetailsClick} />
+              <Button
+                className={classNames({ [styles.editCard]: canUpdatePaymentMethod })}
+                label={t('account:payment.edit_card')}
+                variant="outlined"
+                onClick={onEditCardDetailsClick}
+              />
             </div>
           )
         ) : (
@@ -338,7 +347,7 @@ const Payment = ({
                   <span>{transaction.transactionId}</span>
                 </p>
                 <div className={styles.transactionDetails}>
-                  <div className={styles.transationPrice}>
+                  <div className={styles.transactionPrice}>
                     {!isGrantedSubscription &&
                       t('user:payment.price_paid_with', {
                         price: formatPrice(parseFloat(transaction.transactionPriceInclTax), transaction.transactionCurrency, transaction.customerCountry),
diff --git a/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap b/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
index 6a20f57b2..57c66f0d5 100644
--- a/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
+++ b/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
           aria-describedby="helper_text_1235_cardnumber"
           aria-invalid="false"
           aria-label="user:payment.card_number_hidden"
-          aria-required="false"
+          autocomplete="cc-number"
           class="_input_e16c1b"
           id="text-field_1235_cardnumber"
           name="cardNumber"
@@ -55,7 +55,7 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
           <input
             aria-describedby="helper_text_1235_cardexpiry"
             aria-invalid="false"
-            aria-required="false"
+            autocomplete="cc-exp"
             class="_input_e16c1b"
             id="text-field_1235_cardexpiry"
             name="cardExpiry"
@@ -77,7 +77,7 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
             aria-describedby="helper_text_1235_cardsecuritycode"
             aria-invalid="false"
             aria-label="user:payment.security_code_hidden"
-            aria-required="false"
+            autocomplete="cc-csc"
             class="_input_e16c1b"
             id="text-field_1235_cardsecuritycode"
             name="cardSecurityCode"
@@ -127,7 +127,7 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
         class="_transactionDetails_c57ff5"
       >
         <div
-          class="_transationPrice_c57ff5"
+          class="_transactionPrice_c57ff5"
         >
           user:payment.price_paid_with
         </div>
@@ -153,7 +153,7 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
         class="_transactionDetails_c57ff5"
       >
         <div
-          class="_transationPrice_c57ff5"
+          class="_transactionPrice_c57ff5"
         >
           user:payment.price_paid_with
         </div>
@@ -179,7 +179,7 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
         class="_transactionDetails_c57ff5"
       >
         <div
-          class="_transationPrice_c57ff5"
+          class="_transactionPrice_c57ff5"
         >
           user:payment.price_paid_with
         </div>
diff --git a/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx b/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
index d92043ff6..9d8092101 100644
--- a/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
+++ b/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
@@ -85,6 +85,7 @@ const PaymentForm: React.FC<Props> = ({ onPaymentFormSubmit }) => {
             onChange={handleChange}
             onBlur={handleBlur}
             placeholder={t('checkout.credit_card_name')}
+            autoComplete="cc-name"
             required
           />
         </div>
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
index acffd987c..871b6effc 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
+++ b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -21,6 +21,7 @@ type Props = {
   setValue: (key: keyof PersonalDetailsFormData, value: string) => void;
   error?: string;
   errors: FormErrors<PersonalDetailsFormData>;
+  validationError?: boolean;
   values: PersonalDetailsFormData;
   submitting: boolean;
   fields: Record<string, CleengCaptureField>;
@@ -34,6 +35,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
   onSubmit,
   onChange,
   setValue,
+  validationError,
   values,
   errors,
   submitting,
@@ -44,7 +46,11 @@ const PersonalDetailsForm: React.FC<Props> = ({
   questionErrors,
 }: Props) => {
   const { t } = useTranslation('account');
-  const renderQuestion = ({ value, key, question, required }: CleengCaptureQuestionField) => {
+  const renderQuestion = ({ value, key, question, required, enabled }: CleengCaptureQuestionField) => {
+    if (!enabled) {
+      return null;
+    }
+
     const values = value?.split(';').map((question) => {
       const [value, label = value] = question.split(':');
 
@@ -60,13 +66,19 @@ const PersonalDetailsForm: React.FC<Props> = ({
       key,
     };
 
-    const optionsKeys = Object.keys(values);
+    // The rendered field is determined by the given available options for each question:
+    // TextField <- when there is exactly 1 option and the value is empty (e.g. "")
+    // Checkbox  <- when there is exactly 1 option and the value is not empty (e.g. "accepted")
+    // Radio     <- when there are exactly 2 options
+    // Dropdown  <- when there are more than 2 options
 
-    if (optionsKeys.length === 1) {
+    if (values.length === 1 && values[0].value === '') {
+      return <TextField value={questionValues[key]} label={question} {...props} />;
+    } else if (values.length === 1) {
       return <Checkbox checked={!!questionValues[key]} value={values[0].value} header={question} label={values[0].label} {...props} />;
-    } else if (optionsKeys.length === 2) {
+    } else if (values.length === 2) {
       return <Radio values={values} value={questionValues[key]} header={question} {...props} />;
-    } else if (optionsKeys.length > 2) {
+    } else if (values.length > 2) {
       return <Dropdown options={values} value={questionValues[key]} label={question} defaultLabel={t('personal_details.select_answer')} {...props} fullWidth />;
     }
 
@@ -76,7 +88,11 @@ const PersonalDetailsForm: React.FC<Props> = ({
   return (
     <form onSubmit={onSubmit} data-testid={testId('personal_details-form')} noValidate>
       <h2 className={styles.title}>{t('personal_details.title')}</h2>
-      {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
+      {errors.form ? (
+        <FormFeedback variant="error" visible={!validationError}>
+          {errors.form}
+        </FormFeedback>
+      ) : null}
       {fields.firstNameLastName?.enabled ? (
         <React.Fragment>
           <TextField
@@ -84,20 +100,22 @@ const PersonalDetailsForm: React.FC<Props> = ({
             onChange={onChange}
             label={t('personal_details.fist_name')}
             placeholder={t('personal_details.fist_name')}
-            error={!!errors.firstName || !!errors.form}
+            error={!!errors.firstName}
             helperText={errors.firstName}
             required={fields.firstNameLastName.required}
             name="firstName"
+            autoComplete="given-name"
           />
           <TextField
             value={values.lastName}
             onChange={onChange}
             label={t('personal_details.last_name')}
             placeholder={t('personal_details.last_name')}
-            error={!!errors.lastName || !!errors.form}
+            error={!!errors.lastName}
             helperText={errors.lastName}
             required={fields.firstNameLastName.required}
             name="lastName"
+            autoComplete="family-name"
           />
         </React.Fragment>
       ) : null}
@@ -107,10 +125,11 @@ const PersonalDetailsForm: React.FC<Props> = ({
           onChange={onChange}
           label={t('personal_details.company_name')}
           placeholder={t('personal_details.company_name')}
-          error={!!errors.companyName || !!errors.form}
+          error={!!errors.companyName}
           helperText={errors.companyName}
           required={fields.companyName.required}
           name="companyName"
+          autoComplete="organization"
         />
       ) : null}
       {fields.address?.enabled ? (
@@ -120,49 +139,54 @@ const PersonalDetailsForm: React.FC<Props> = ({
             onChange={onChange}
             label={t('personal_details.address')}
             placeholder={t('personal_details.address')}
-            error={!!errors.address || !!errors.form}
+            error={!!errors.address}
             helperText={errors.address}
             required={fields.address.required}
             name="address"
+            autoComplete="address-line1"
           />
           <TextField
             value={values.address2}
             onChange={onChange}
             label={t('personal_details.address2')}
             placeholder={t('personal_details.address2')}
-            error={!!errors.address2 || !!errors.form}
+            error={!!errors.address2}
             helperText={errors.address2}
             name="address2"
+            autoComplete="address-line2"
           />
           <TextField
             value={values.city}
             onChange={onChange}
             label={t('personal_details.city')}
             placeholder={t('personal_details.city')}
-            error={!!errors.city || !!errors.form}
+            error={!!errors.city}
             helperText={errors.city}
             required={fields.address.required}
             name="city"
+            autoComplete="address-level2"
           />
           <TextField
             value={values.state}
             onChange={onChange}
             label={t('personal_details.state')}
             placeholder={t('personal_details.state')}
-            error={!!errors.state || !!errors.form}
+            error={!!errors.state}
             helperText={errors.state}
             required={fields.address.required}
             name="state"
+            autoComplete="address-level1"
           />
           <TextField
             value={values.postCode}
             onChange={onChange}
             label={t('personal_details.post_code')}
             placeholder={t('personal_details.post_code')}
-            error={!!errors.postCode || !!errors.form}
+            error={!!errors.postCode}
             helperText={errors.postCode}
             required={fields.address.required}
             name="postCode"
+            autoComplete="postal-code"
           />
         </React.Fragment>
       ) : null}
@@ -172,7 +196,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           onChange={onChange}
           label={t('personal_details.phone_number')}
           placeholder={t('personal_details.phone_number')}
-          error={!!errors.phoneNumber || !!errors.form}
+          error={!!errors.phoneNumber}
           helperText={errors.phoneNumber}
           required={fields.phoneNumber.required}
           name="phoneNumber"
@@ -183,7 +207,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           value={values.birthDate}
           onChange={(event) => setValue('birthDate', event.currentTarget.value)}
           label={t('personal_details.birth_date')}
-          error={!!errors.birthDate || !!errors.form}
+          error={!!errors.birthDate}
           helperText={errors.birthDate}
           required={fields.birthDate.required}
           name="birthDate"
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
index 7d704f8c6..fe029a7ed 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
+++ b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -31,8 +31,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_firstname"
-          aria-invalid="true"
-          aria-required="true"
+          aria-invalid="false"
+          autocomplete="given-name"
           class="_input_e16c1b"
           id="text-field_1235_firstname"
           name="firstName"
@@ -43,9 +43,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
-        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_firstname_1235"
+        id="helper_text_1235_firstname"
       >
         this is wrong
       </div>
@@ -64,8 +63,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_lastname"
-          aria-invalid="true"
-          aria-required="true"
+          aria-invalid="false"
+          autocomplete="family-name"
           class="_input_e16c1b"
           id="text-field_1235_lastname"
           name="lastName"
@@ -76,9 +75,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
-        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_lastname_1235"
+        id="helper_text_1235_lastname"
       >
         also this
       </div>
@@ -101,7 +99,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         <input
           aria-describedby="helper_text_1235_companyname"
           aria-invalid="false"
-          aria-required="false"
+          autocomplete="organization"
           class="_input_e16c1b"
           id="text-field_1235_companyname"
           name="companyName"
@@ -111,9 +109,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
-        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_companyname_1235"
+        id="helper_text_1235_companyname"
       >
         So much errors
       </div>
@@ -132,8 +129,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_address"
-          aria-invalid="true"
-          aria-required="true"
+          aria-invalid="false"
+          autocomplete="address-line1"
           class="_input_e16c1b"
           id="text-field_1235_address"
           name="address"
@@ -144,9 +141,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
-        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_address_1235"
+        id="helper_text_1235_address"
       >
         Do you know where you live
       </div>
@@ -169,7 +165,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         <input
           aria-describedby="helper_text_1235_address2"
           aria-invalid="false"
-          aria-required="false"
+          autocomplete="address-line2"
           class="_input_e16c1b"
           id="text-field_1235_address2"
           name="address2"
@@ -179,9 +175,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
-        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_address2_1235"
+        id="helper_text_1235_address2"
       >
         Come on
       </div>
@@ -200,8 +195,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_city"
-          aria-invalid="true"
-          aria-required="true"
+          aria-invalid="false"
+          autocomplete="address-level2"
           class="_input_e16c1b"
           id="text-field_1235_city"
           name="city"
@@ -212,9 +207,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
-        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_city_1235"
+        id="helper_text_1235_city"
       >
         stop it
       </div>
@@ -233,8 +227,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_state"
-          aria-invalid="true"
-          aria-required="true"
+          aria-invalid="false"
+          autocomplete="address-level1"
           class="_input_e16c1b"
           id="text-field_1235_state"
           name="state"
@@ -245,9 +239,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
-        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_state_1235"
+        id="helper_text_1235_state"
       >
         Confusion
       </div>
@@ -266,8 +259,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_postcode"
-          aria-invalid="true"
-          aria-required="true"
+          aria-invalid="false"
+          autocomplete="postal-code"
           class="_input_e16c1b"
           id="text-field_1235_postcode"
           name="postCode"
@@ -278,9 +271,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
-        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_postcode_1235"
+        id="helper_text_1235_postcode"
       >
         Post Code should be 5 centimeters
       </div>
@@ -299,8 +291,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_phonenumber"
-          aria-invalid="true"
-          aria-required="true"
+          aria-invalid="false"
           class="_input_e16c1b"
           id="text-field_1235_phonenumber"
           name="phoneNumber"
@@ -311,9 +302,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
-        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_phonenumber_1235"
+        id="helper_text_1235_phonenumber"
       >
         Invalid
       </div>
@@ -339,6 +329,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           name="birthDate"
         />
         <input
+          autocomplete="bday-day"
           class="_input_eb6974"
           id="text-field_1235_birthdate-date"
           maxlength="2"
@@ -349,6 +340,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
          / 
         <input
+          autocomplete="bday-month"
           class="_input_eb6974"
           id="text-field_1235_birthdate-month"
           maxlength="2"
@@ -359,6 +351,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
          / 
         <input
+          autocomplete="bday-year"
           class="_input_eb6974"
           id="text-field_1235_birthdate-year"
           maxlength="4"
@@ -369,9 +362,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         />
       </div>
       <div
-        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_birthdate_1235"
+        id="helper_text_1235_birthdate"
       >
         February 30th? Really?
       </div>
@@ -424,9 +416,8 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         </select>
       </div>
       <div
-        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_key1_1235"
+        id="helper_text_1235_key1"
       >
         question 1 is invalid
       </div>
@@ -478,7 +469,6 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         </label>
       </div>
       <div
-        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0"
         id="helper_text_1235"
       >
@@ -508,14 +498,17 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         <label
           for="check-box_1235_ccc"
         >
-          * 
+          <span
+            aria-hidden="true"
+          >
+            * 
+          </span>
           CheckMe
         </label>
       </div>
       <div
-        aria-live="assertive"
         class="_helperText_da58e0 _error_da58e0 _helperTextError_531f07"
-        id="helper_text_1235_ccc_1235"
+        id="helper_text_1235_ccc"
       >
         No way Jose
       </div>
@@ -559,7 +552,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         <input
           aria-describedby="helper_text_1235_firstname"
           aria-invalid="false"
-          aria-required="true"
+          autocomplete="given-name"
           class="_input_e16c1b"
           id="text-field_1235_firstname"
           name="firstName"
@@ -585,7 +578,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         <input
           aria-describedby="helper_text_1235_lastname"
           aria-invalid="false"
-          aria-required="true"
+          autocomplete="family-name"
           class="_input_e16c1b"
           id="text-field_1235_lastname"
           name="lastName"
@@ -614,7 +607,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         <input
           aria-describedby="helper_text_1235_companyname"
           aria-invalid="false"
-          aria-required="false"
+          autocomplete="organization"
           class="_input_e16c1b"
           id="text-field_1235_companyname"
           name="companyName"
@@ -639,7 +632,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         <input
           aria-describedby="helper_text_1235_address"
           aria-invalid="false"
-          aria-required="true"
+          autocomplete="address-line1"
           class="_input_e16c1b"
           id="text-field_1235_address"
           name="address"
@@ -668,7 +661,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         <input
           aria-describedby="helper_text_1235_address2"
           aria-invalid="false"
-          aria-required="false"
+          autocomplete="address-line2"
           class="_input_e16c1b"
           id="text-field_1235_address2"
           name="address2"
@@ -693,7 +686,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         <input
           aria-describedby="helper_text_1235_city"
           aria-invalid="false"
-          aria-required="true"
+          autocomplete="address-level2"
           class="_input_e16c1b"
           id="text-field_1235_city"
           name="city"
@@ -719,7 +712,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         <input
           aria-describedby="helper_text_1235_state"
           aria-invalid="false"
-          aria-required="true"
+          autocomplete="address-level1"
           class="_input_e16c1b"
           id="text-field_1235_state"
           name="state"
@@ -745,7 +738,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         <input
           aria-describedby="helper_text_1235_postcode"
           aria-invalid="false"
-          aria-required="true"
+          autocomplete="postal-code"
           class="_input_e16c1b"
           id="text-field_1235_postcode"
           name="postCode"
@@ -771,7 +764,6 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         <input
           aria-describedby="helper_text_1235_phonenumber"
           aria-invalid="false"
-          aria-required="true"
           class="_input_e16c1b"
           id="text-field_1235_phonenumber"
           name="phoneNumber"
@@ -803,6 +795,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
           name="birthDate"
         />
         <input
+          autocomplete="bday-day"
           class="_input_eb6974"
           id="text-field_1235_birthdate-date"
           maxlength="2"
@@ -813,6 +806,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         />
          / 
         <input
+          autocomplete="bday-month"
           class="_input_eb6974"
           id="text-field_1235_birthdate-month"
           maxlength="2"
@@ -823,6 +817,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         />
          / 
         <input
+          autocomplete="bday-year"
           class="_input_eb6974"
           id="text-field_1235_birthdate-year"
           maxlength="4"
@@ -951,7 +946,11 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         <label
           for="check-box_1235_ccc"
         >
-          * 
+          <span
+            aria-hidden="true"
+          >
+            * 
+          </span>
           CheckMe
         </label>
       </div>
diff --git a/packages/ui-react/src/components/Player/Player.tsx b/packages/ui-react/src/components/Player/Player.tsx
index 7997af087..bd5447a1d 100644
--- a/packages/ui-react/src/components/Player/Player.tsx
+++ b/packages/ui-react/src/components/Player/Player.tsx
@@ -72,7 +72,16 @@ const Player: React.FC<Props> = ({
   const handleComplete = useEventCallback(onComplete);
   const handleUserActive = useEventCallback(onUserActive);
   const handleUserInactive = useEventCallback(onUserInActive);
-  const handleFirstFrame = useEventCallback(onFirstFrame);
+  const handleFirstFrame = useEventCallback(() => {
+    // a11y: auto focus to play/pause button
+    const playerContainer = playerRef.current?.getContainer();
+    const playPauseButton = playerContainer?.querySelector(
+      '.jw-controlbar [aria-label="Play"], .jw-button-container [aria-label="Pause"]',
+    ) as HTMLDivElement | null;
+    playPauseButton?.focus();
+
+    onFirstFrame?.();
+  });
   const handleRemove = useEventCallback(onRemove);
   const handlePlaylistItem = useEventCallback(onPlaylistItem);
   const handlePlaylistItemCallback = useEventCallback(onPlaylistItemCallback);
diff --git a/packages/ui-react/src/components/ProfilesMenu/ProfilesMenu.tsx b/packages/ui-react/src/components/ProfilesMenu/ProfilesMenu.tsx
new file mode 100644
index 000000000..4c6ecc5f5
--- /dev/null
+++ b/packages/ui-react/src/components/ProfilesMenu/ProfilesMenu.tsx
@@ -0,0 +1,68 @@
+import Plus from '@jwp/ott-theme/assets/icons/plus.svg?react';
+import type { Profile } from '@jwp/ott-common/types/profiles';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { PATH_USER_PROFILES_CREATE } from '@jwp/ott-common/src/paths';
+
+import styles from '../UserMenu/UserMenu.module.scss'; // TODO inherit styling
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
+import MenuButton from '../MenuButton/MenuButton';
+import Icon from '../Icon/Icon';
+import ProfileCircle from '../ProfileCircle/ProfileCircle';
+
+type ProfilesMenuProps = {
+  profiles: Profile[];
+  currentProfile?: Profile | null;
+  small?: boolean;
+  selectingProfile: boolean;
+  selectProfile?: ({ avatarUrl, id }: { avatarUrl: string; id: string }) => void;
+  onButtonClick?: () => void;
+};
+
+const ProfilesMenu = ({ profiles, currentProfile, small, selectingProfile, selectProfile, onButtonClick }: ProfilesMenuProps) => {
+  const { t } = useTranslation('user');
+  const navigate = useNavigate();
+
+  const onProfileSelectClick = (profile: Profile) => {
+    onButtonClick?.();
+    selectProfile?.({ id: profile.id, avatarUrl: profile.avatar_url });
+  };
+
+  const onProfileCreateClick = () => {
+    onButtonClick?.();
+    navigate(PATH_USER_PROFILES_CREATE);
+  };
+
+  return (
+    <>
+      <h2 className={styles.sectionHeader}>{t('nav.switch_profiles')}</h2>
+      <ul className={styles.menuItems}>
+        {selectingProfile ? (
+          <li aria-hidden="true">
+            <LoadingOverlay inline />
+          </li>
+        ) : (
+          profiles.map((profile) => (
+            <li key={profile.id}>
+              <MenuButton
+                active={profile.id === currentProfile?.id}
+                aria-current={profile.id === currentProfile?.id ? true : undefined}
+                small={small}
+                onClick={() => onProfileSelectClick(profile)}
+                label={profile.name}
+                startIcon={<ProfileCircle src={profile.avatar_url} alt={profile.name} />}
+              />
+            </li>
+          ))
+        )}
+        {profiles.length < 4 && (
+          <li>
+            <MenuButton small={small} onClick={onProfileCreateClick} startIcon={<Icon icon={Plus} />} label={t('nav.add_profile')} />
+          </li>
+        )}
+      </ul>
+    </>
+  );
+};
+
+export default ProfilesMenu;
diff --git a/packages/ui-react/src/components/Radio/__snapshots__/Radio.test.tsx.snap b/packages/ui-react/src/components/Radio/__snapshots__/Radio.test.tsx.snap
index 04d47fcc6..664396820 100644
--- a/packages/ui-react/src/components/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/packages/ui-react/src/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -64,7 +64,6 @@ exports[`<Radio> > renders and matches snapshot 1`] = `
       </label>
     </div>
     <div
-      aria-live="polite"
       class="_helperText_da58e0"
       id="helper_text_1235"
     >
diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
index c52ba9dfc..30e894e3d 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
@@ -18,7 +18,6 @@ describe('<RegistrationForm>', () => {
         consentErrors={[]}
         consentValues={{}}
         loading={false}
-        canSubmit={true}
         onConsentChange={vi.fn()}
       />,
     );
diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
index 47e366089..1f56b636d 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
@@ -34,7 +34,7 @@ type Props = {
   consentValues: Record<string, string | boolean>;
   consentErrors: string[];
   submitting: boolean;
-  canSubmit: boolean;
+  validationError?: boolean;
   publisherConsents: CustomFormField[] | null;
 };
 
@@ -45,8 +45,8 @@ const RegistrationForm: React.FC<Props> = ({
   values,
   errors,
   submitting,
+  validationError,
   loading,
-  canSubmit,
   publisherConsents,
   consentValues,
   onConsentChange,
@@ -81,17 +81,24 @@ const RegistrationForm: React.FC<Props> = ({
   return (
     <form onSubmit={onSubmit} data-testid={testId('registration-form')} noValidate>
       <h2 className={styles.title}>{t('registration.sign_up')}</h2>
-      <div ref={ref}>{errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}</div>
+      <div ref={ref}>
+        {errors.form ? (
+          <FormFeedback variant="error" visible={!validationError}>
+            {errors.form}
+          </FormFeedback>
+        ) : null}
+      </div>
       <TextField
         value={values.email}
         onChange={onChange}
         onBlur={onBlur}
         label={t('registration.email')}
         placeholder={t('registration.email')}
-        error={!!errors.email || !!errors.form}
+        error={!!errors.email}
         helperText={errors.email}
         name="email"
         type="email"
+        autoComplete="email"
         required
       />
       <TextField
@@ -100,7 +107,7 @@ const RegistrationForm: React.FC<Props> = ({
         onBlur={onBlur}
         label={t('registration.password')}
         placeholder={t('registration.password')}
-        error={!!errors.password || !!errors.form}
+        error={!!errors.password}
         helperText={
           <React.Fragment>
             <PasswordStrength password={values.password} />
@@ -110,10 +117,11 @@ const RegistrationForm: React.FC<Props> = ({
         name="password"
         type={viewPassword ? 'text' : 'password'}
         rightControl={
-          <IconButton aria-label={viewPassword ? t('registration.hide_password') : t('registration.view_password')} onClick={() => toggleViewPassword()}>
+          <IconButton aria-label={t('registration.view_password')} onClick={() => toggleViewPassword()} aria-pressed={viewPassword}>
             <Icon icon={viewPassword ? Visibility : VisibilityOff} />
           </IconButton>
         }
+        autoComplete="new-password"
         required
       />
       {publisherConsents && (
@@ -132,7 +140,7 @@ const RegistrationForm: React.FC<Props> = ({
                 value={consentValues[consent.name] || ''}
                 required={consent.required}
                 error={!!consentError}
-                helperText={consentError ? t(`registration.field_${consent.type}_required`) : undefined}
+                helperText={consentErrors?.includes(consent.name) ? t('registration.consent_required', { field: consent.name }) : undefined}
                 onChange={onConsentChange}
                 lang={htmlLang}
               />
@@ -147,7 +155,7 @@ const RegistrationForm: React.FC<Props> = ({
         variant="contained"
         color="primary"
         size="large"
-        disabled={submitting || !canSubmit}
+        disabled={submitting}
         fullWidth
       />
       <p className={styles.bottom}>
diff --git a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
index 42720916a..709bd50c3 100644
--- a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
+++ b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
-          aria-required="true"
+          autocomplete="email"
           class="_input_e16c1b"
           id="text-field_1235_email"
           name="email"
@@ -53,7 +53,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
-          aria-required="true"
+          autocomplete="new-password"
           class="_input_e16c1b"
           id="text-field_1235_password"
           name="password"
@@ -67,6 +67,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
         >
           <div
             aria-label="registration.view_password"
+            aria-pressed="false"
             class="_iconButton_0fef65"
             role="button"
             tabindex="0"
@@ -85,9 +86,8 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
         </div>
       </div>
       <div
-        aria-live="polite"
         class="_helperText_da58e0"
-        id="helper_text_1235_password_1235"
+        id="helper_text_1235_password"
       >
         registration.password_helper_text
       </div>
diff --git a/packages/ui-react/src/components/RenewSubscriptionForm/RenewSubscriptionForm.module.scss b/packages/ui-react/src/components/RenewSubscriptionForm/RenewSubscriptionForm.module.scss
index 11829532b..f04919fd9 100644
--- a/packages/ui-react/src/components/RenewSubscriptionForm/RenewSubscriptionForm.module.scss
+++ b/packages/ui-react/src/components/RenewSubscriptionForm/RenewSubscriptionForm.module.scss
@@ -19,25 +19,23 @@
   padding: calc(#{variables.$base-spacing} / 2) variables.$base-spacing;
 
   font-size: 14px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
   background: theme.$panel-bg;
   border-radius: 4px;
 
   > strong {
-    line-height: 16px;
     letter-spacing: 0.25px;
   }
 }
 
 .price {
   font-size: 14px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
 
   > strong {
     font-weight: var(--body-font-weight-bold);
     font-size: 24px;
-    line-height: 26px;
   }
 }
 
diff --git a/packages/ui-react/src/components/ResetPasswordForm/ResetPasswordForm.tsx b/packages/ui-react/src/components/ResetPasswordForm/ResetPasswordForm.tsx
index eb9edbc2c..1d5ce9fe7 100644
--- a/packages/ui-react/src/components/ResetPasswordForm/ResetPasswordForm.tsx
+++ b/packages/ui-react/src/components/ResetPasswordForm/ResetPasswordForm.tsx
@@ -14,10 +14,8 @@ type Props = {
 const ResetPasswordForm: React.FC<Props> = ({ onCancel, onReset, submitting }: Props) => {
   const { t } = useTranslation('account');
   return (
-    <div className={styles.resetPassword} role="dialog" aria-labelledby="reset_password">
-      <h1 id="reset_password" className={styles.title}>
-        {t('reset.reset_password')}
-      </h1>
+    <div>
+      <h1 className={styles.title}>{t('reset.reset_password')}</h1>
       <p className={styles.text}>{t('reset.text')}</p>
       <Button onClick={onReset} className={styles.button} fullWidth color="primary" label={t('reset.yes')} type="submit" disabled={submitting} />
       <Button onClick={onCancel} fullWidth label={t('reset.no')} />
diff --git a/packages/ui-react/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap b/packages/ui-react/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap
index ab39771b3..c498d1ecb 100644
--- a/packages/ui-react/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap
@@ -2,13 +2,9 @@
 
 exports[`<ResetPassword> > renders and matches snapshot 1`] = `
 <div>
-  <div
-    aria-labelledby="reset_password"
-    role="dialog"
-  >
+  <div>
     <h1
       class="_title_1976d9"
-      id="reset_password"
     >
       reset.reset_password
     </h1>
diff --git a/packages/ui-react/src/components/SearchBar/SearchBar.module.scss b/packages/ui-react/src/components/SearchBar/SearchBar.module.scss
index bd0d66c37..5946ad028 100644
--- a/packages/ui-react/src/components/SearchBar/SearchBar.module.scss
+++ b/packages/ui-react/src/components/SearchBar/SearchBar.module.scss
@@ -3,7 +3,10 @@
 
 .searchBar {
   position: relative;
-  height: variables.$search-height;
+}
+
+.searchForm {
+    height: variables.$search-height;
 }
 
 .icon {
@@ -34,6 +37,10 @@
     opacity: 0.5;
   }
 
+  &::-webkit-search-cancel-button{
+    display: none;
+  }
+
   &:focus,
   &:active {
     border-color: variables.$white;
@@ -43,7 +50,6 @@
 
 .clearButton {
   position: absolute;
-  top: -2px;
   right: 0;
 
   > svg {
diff --git a/packages/ui-react/src/components/SearchBar/SearchBar.tsx b/packages/ui-react/src/components/SearchBar/SearchBar.tsx
index 89c9b6d22..a297820ff 100644
--- a/packages/ui-react/src/components/SearchBar/SearchBar.tsx
+++ b/packages/ui-react/src/components/SearchBar/SearchBar.tsx
@@ -18,25 +18,35 @@ export type Props = {
 
 const SearchBar: React.FC<Props> = ({ query, onQueryChange, onClearButtonClick, onClose, inputRef }: Props) => {
   const { t } = useTranslation('search');
+  const handleSubmit = (event: React.ChangeEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    inputRef?.current.focus(); // Force hide mobile keyboard
+    (document.querySelector('#content') as HTMLElement)?.focus();
+  };
 
   return (
     <div className={styles.searchBar}>
       <Icon icon={Search} className={styles.icon} />
-      <input
-        className={styles.input}
-        type="text"
-        value={query}
-        onChange={onQueryChange}
-        onKeyDown={(event) => event.key === 'Escape' && onClose?.()}
-        aria-label={t('search_bar.search_label')}
-        placeholder={t('search_bar.search_placeholder')}
-        ref={inputRef}
-      />
-      {query ? (
-        <IconButton className={styles.clearButton} aria-label={t('search_bar.clear_search_label')} onClick={onClearButtonClick}>
-          <Icon icon={Cancel} />
-        </IconButton>
-      ) : null}
+      <form className={styles.searchForm} role="search" onSubmit={handleSubmit}>
+        <label htmlFor="searchbar-input" className="hidden">
+          {t('search_bar.search_label')}
+        </label>
+        <input
+          className={styles.input}
+          id="searchbar-input"
+          type="search"
+          value={query}
+          onChange={onQueryChange}
+          onKeyDown={(event) => event.key === 'Escape' && onClose?.()}
+          placeholder={t('search_bar.search_placeholder')}
+          ref={inputRef}
+        />
+        {query ? (
+          <IconButton className={styles.clearButton} aria-label={t('search_bar.clear_search_label')} onClick={onClearButtonClick}>
+            <Icon icon={Cancel} />
+          </IconButton>
+        ) : null}
+      </form>
     </div>
   );
 };
diff --git a/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap b/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
index a6c9b4433..6ad2ca4f9 100644
--- a/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
+++ b/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
@@ -15,30 +15,41 @@ exports[`<SearchBar> > renders and matches snapshot 1`] = `
         d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
       />
     </svg>
-    <input
-      aria-label="search_bar.search_label"
-      class="_input_3bb1d7"
-      placeholder="search_bar.search_placeholder"
-      type="text"
-      value="My search query"
-    />
-    <div
-      aria-label="search_bar.clear_search_label"
-      class="_iconButton_0fef65 _clearButton_3bb1d7"
-      role="button"
-      tabindex="0"
+    <form
+      class="_searchForm_3bb1d7"
+      role="search"
     >
-      <svg
-        aria-hidden="true"
-        class="_icon_585b29"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
+      <label
+        class="hidden"
+        for="searchbar-input"
       >
-        <path
-          d="M9 1C4.58 1 1 4.58 1 9s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm4 10.87L11.87 13 9 10.13 6.13 13 5 11.87 7.87 9 5 6.13 6.13 5 9 7.87 11.87 5 13 6.13 10.13 9 13 11.87z"
-        />
-      </svg>
-    </div>
+        search_bar.search_label
+      </label>
+      <input
+        class="_input_3bb1d7"
+        id="searchbar-input"
+        placeholder="search_bar.search_placeholder"
+        type="search"
+        value="My search query"
+      />
+      <div
+        aria-label="search_bar.clear_search_label"
+        class="_iconButton_0fef65 _clearButton_3bb1d7"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          class="_icon_585b29"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9 1C4.58 1 1 4.58 1 9s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm4 10.87L11.87 13 9 10.13 6.13 13 5 11.87 7.87 9 5 6.13 6.13 5 9 7.87 11.87 5 13 6.13 10.13 9 13 11.87z"
+          />
+        </svg>
+      </div>
+    </form>
   </div>
 </div>
 `;
diff --git a/packages/ui-react/src/components/Shelf/Shelf.module.scss b/packages/ui-react/src/components/Shelf/Shelf.module.scss
index f802ec4b2..5a3473242 100644
--- a/packages/ui-react/src/components/Shelf/Shelf.module.scss
+++ b/packages/ui-react/src/components/Shelf/Shelf.module.scss
@@ -29,14 +29,19 @@
 }
 
 .chevron {
-  padding: 12px 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  width: 44px;
+  height: 44px;
   outline-color: var(--highlight-color, white);
   cursor: pointer;
   transition: transform 0.3s ease-out, opacity 0.3s ease-out;
 
   > svg {
-    // Use scale because width and height properties causes layout shifting issues on screen readers
-    transform: scale(1.1);
+    width: 30px;
+    height: 30px;
   }
   &.disabled {
     cursor: default;
diff --git a/packages/ui-react/src/components/Shelf/Shelf.tsx b/packages/ui-react/src/components/Shelf/Shelf.tsx
index 9d0ae6c08..eb89179b4 100644
--- a/packages/ui-react/src/components/Shelf/Shelf.tsx
+++ b/packages/ui-react/src/components/Shelf/Shelf.tsx
@@ -99,7 +99,7 @@ const Shelf = ({
         className={styles.chevron}
         role="button"
         tabIndex={0}
-        aria-label={t('slide_right')}
+        aria-label={t('slide_next')}
         onKeyDown={(event: React.KeyboardEvent) => (event.key === 'Enter' || event.key === ' ') && handleSlide(doSlide)}
         onClick={() => handleSlide(doSlide)}
       >
@@ -117,7 +117,7 @@ const Shelf = ({
         })}
         role="button"
         tabIndex={didSlideBefore ? 0 : -1}
-        aria-label={t('slide_left')}
+        aria-label={t('slide_previous')}
         onKeyDown={(event: React.KeyboardEvent) => (event.key === 'Enter' || event.key === ' ') && handleSlide(doSlide)}
         onClick={() => handleSlide(doSlide)}
       >
@@ -131,6 +131,12 @@ const Shelf = ({
     <span key={pageIndex} className={classNames(styles.dot, { [styles.active]: index === pageIndex })} />
   );
 
+  const renderPageIndicator = (pageIndex: number, pages: number) => (
+    <div aria-live="polite" className="hidden">
+      {t('slide_indicator', { page: pageIndex + 1, pages })}
+    </div>
+  );
+
   const handleSlide = (doSlide: () => void): void => {
     setDidSlideBefore(true);
     doSlide();
@@ -153,6 +159,7 @@ const Shelf = ({
         renderLeftControl={renderLeftControl}
         renderRightControl={renderRightControl}
         renderPaginationDots={renderPaginationDots}
+        renderPageIndicator={renderPageIndicator}
         renderTile={renderTile}
       />
     </div>
diff --git a/packages/ui-react/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap b/packages/ui-react/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap
index fa7bf230d..a2ed26d6c 100644
--- a/packages/ui-react/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap
+++ b/packages/ui-react/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
         class="_leftControl_22abb0"
       >
         <div
-          aria-label="slide_left"
+          aria-label="slide_previous"
           class="_chevron_81910b _disabled_81910b"
           role="button"
           tabindex="-1"
@@ -34,8 +34,6 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
       >
         <li
           aria-hidden="true"
-          aria-posinset="3"
-          aria-setsize="4"
           class="_notInView_22abb0"
           style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
         >
@@ -61,8 +59,6 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
         </li>
         <li
           aria-hidden="true"
-          aria-posinset="4"
-          aria-setsize="4"
           class="_notInView_22abb0"
           style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
         >
@@ -88,8 +84,6 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
         </li>
         <li
           aria-hidden="false"
-          aria-posinset="1"
-          aria-setsize="4"
           class=""
           style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
         >
@@ -126,8 +120,6 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
         </li>
         <li
           aria-hidden="true"
-          aria-posinset="2"
-          aria-setsize="4"
           class="_notInView_22abb0"
           style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
         >
@@ -153,8 +145,6 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
         </li>
         <li
           aria-hidden="true"
-          aria-posinset="3"
-          aria-setsize="4"
           class="_notInView_22abb0"
           style="width: 100%; padding-left: 4px; padding-right: 4px; box-sizing: border-box; transition: opacity .2s ease-in 0s;"
         >
@@ -183,7 +173,7 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
         class="_rightControl_22abb0"
       >
         <div
-          aria-label="slide_right"
+          aria-label="slide_next"
           class="_chevron_81910b"
           role="button"
           tabindex="0"
@@ -218,6 +208,12 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
         class="_dot_81910b"
       />
     </div>
+    <div
+      aria-live="polite"
+      class="hidden"
+    >
+      slide_indicator
+    </div>
   </div>
 </div>
 `;
@@ -240,8 +236,6 @@ exports[`Shelf Component tests > Regular shelf 1`] = `
       >
         <li
           aria-hidden="false"
-          aria-posinset="1"
-          aria-setsize="4"
           class=""
           style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
         >
@@ -282,8 +276,6 @@ exports[`Shelf Component tests > Regular shelf 1`] = `
         </li>
         <li
           aria-hidden="false"
-          aria-posinset="2"
-          aria-setsize="4"
           class=""
           style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
         >
@@ -324,8 +316,6 @@ exports[`Shelf Component tests > Regular shelf 1`] = `
         </li>
         <li
           aria-hidden="false"
-          aria-posinset="3"
-          aria-setsize="4"
           class=""
           style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
         >
@@ -366,8 +356,6 @@ exports[`Shelf Component tests > Regular shelf 1`] = `
         </li>
         <li
           aria-hidden="false"
-          aria-posinset="4"
-          aria-setsize="4"
           class=""
           style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
         >
diff --git a/packages/ui-react/src/components/Sidebar/Sidebar.module.scss b/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
index 25f04c19d..7bc53c321 100644
--- a/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
+++ b/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
@@ -14,7 +14,7 @@
   display: none;
   width: 100%;
   height: 100%;
-  background: rgba(variables.$black, 0.4);
+  background: theme.$modal-backdrop-bg;
   transition: all 0.3s ease;
 }
 
@@ -29,10 +29,18 @@
   display: none;
   width: 270px;
   max-width: 90vw;
-  height: 100vh;
+  height: 100dvh;
+  overflow-y: auto;
   background-color: var(--body-background-color);
   transform: translateX(-100%);
   transition: transform 0.3s cubic-bezier(0.52, 0.51, 0.2, 1);
+
+  ul {
+    margin: 0;
+    padding: 0 0 calc(#{variables.$base-spacing} / 2) 0;
+    list-style-type: none;
+    border-bottom: 1px solid rgba(variables.$white, 0.12);
+  }
 }
 
 .heading {
@@ -45,7 +53,6 @@
   flex-direction: column;
   max-height: 100%;
   padding: variables.$base-spacing 0;
-  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -65,9 +72,11 @@
   .backdrop {
     display: inline-block;
     visibility: hidden;
+    opacity: 0;
 
     &.visible {
       visibility: visible;
+      opacity: 1;
     }
   }
 }
diff --git a/packages/ui-react/src/components/Sidebar/Sidebar.tsx b/packages/ui-react/src/components/Sidebar/Sidebar.tsx
index 196a8dbb8..be697c743 100644
--- a/packages/ui-react/src/components/Sidebar/Sidebar.tsx
+++ b/packages/ui-react/src/components/Sidebar/Sidebar.tsx
@@ -1,10 +1,11 @@
-import React, { Fragment, useEffect, useRef, type ReactNode } from 'react';
+import React, { Fragment, useEffect, useRef, useState, type ReactNode } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import Close from '@jwp/ott-theme/assets/icons/close.svg?react';
 
 import IconButton from '../IconButton/IconButton';
 import Icon from '../Icon/Icon';
+import scrollbarSize from '../../utils/dom';
 
 import styles from './Sidebar.module.scss';
 
@@ -18,16 +19,62 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, children }) => {
   const { t } = useTranslation('menu');
   const lastFocusedElementRef = useRef<HTMLElement | null>(null);
   const sidebarRef = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+
   const htmlAttributes = { inert: !isOpen ? '' : undefined }; // inert is not yet officially supported in react. see: https://github.com/facebook/react/pull/24730
 
   useEffect(() => {
     if (isOpen) {
+      // Before inert on the body is applied in Layout, we need to set this ref
       lastFocusedElementRef.current = document.activeElement as HTMLElement;
+
+      // When opened, adjust the margin-right to accommodate for the scrollbar width to prevent UI shifts in background
+      document.body.style.marginRight = `${scrollbarSize()}px`;
+      document.body.style.overflowY = 'hidden';
+
+      // Scroll the sidebar to the top if the user has previously scrolled down in the sidebar
+      if (sidebarRef.current) {
+        sidebarRef.current.scrollTop = 0;
+      }
+    } else {
+      document.body.style.removeProperty('margin-right');
+      document.body.style.removeProperty('overflow-y');
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleEscKey = (event: KeyboardEvent) => {
+      if (isOpen && event.key === 'Escape') {
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEscKey);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscKey);
+    };
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    const sidebarElement = sidebarRef.current;
+    const handleTransitionEnd = () => {
+      setVisible(isOpen);
+    };
+
+    sidebarElement?.addEventListener('transitionend', handleTransitionEnd);
+
+    return () => {
+      sidebarElement?.removeEventListener('transitionend', handleTransitionEnd);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (visible) {
       sidebarRef.current?.querySelectorAll('a')[0]?.focus({ preventScroll: true });
     } else {
       lastFocusedElementRef.current?.focus({ preventScroll: true });
     }
-  }, [isOpen]);
+  }, [visible]);
 
   return (
     <Fragment>
diff --git a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
index f80e0d91b..33b7ab28a 100644
--- a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
+++ b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`<SideBar /> > renders sideBar closed 1`] = `
     >
       <a
         aria-current="page"
-        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296 "
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
         href="/"
       >
         <span>
@@ -91,7 +91,7 @@ exports[`<SideBar /> > renders sideBar opened 1`] = `
     >
       <a
         aria-current="page"
-        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296 "
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
         href="/"
       >
         <span>
diff --git a/packages/ui-react/src/components/StatusIcon/StatusIcon.module.scss b/packages/ui-react/src/components/StatusIcon/StatusIcon.module.scss
new file mode 100644
index 000000000..666af8769
--- /dev/null
+++ b/packages/ui-react/src/components/StatusIcon/StatusIcon.module.scss
@@ -0,0 +1,13 @@
+@use '@jwp/ott-ui-react/src/styles/mixins/responsive';
+
+.icon {
+  margin-right: 8px;
+
+  @include responsive.mobile-only() {
+    padding: 2px 4px;
+  }
+
+  @include responsive.mobile-and-small-tablet() {
+    font-size: 14px;
+  }
+}
diff --git a/packages/ui-react/src/components/StatusIcon/StatusIcon.tsx b/packages/ui-react/src/components/StatusIcon/StatusIcon.tsx
index 0de7ebc30..82fb2b610 100644
--- a/packages/ui-react/src/components/StatusIcon/StatusIcon.tsx
+++ b/packages/ui-react/src/components/StatusIcon/StatusIcon.tsx
@@ -5,6 +5,8 @@ import Today from '@jwp/ott-theme/assets/icons/today.svg?react';
 import Tag from '../Tag/Tag';
 import Icon from '../Icon/Icon';
 
+import styles from './StatusIcon.module.scss';
+
 type Props = {
   mediaStatus?: MediaStatus;
 };
@@ -13,9 +15,13 @@ export default function StatusIcon({ mediaStatus }: Props) {
   const { t } = useTranslation('video');
 
   if (mediaStatus === MediaStatus.SCHEDULED || mediaStatus === MediaStatus.VOD) {
-    return <Icon icon={Today} />;
+    return <Icon icon={Today} className={styles.icon} />;
   } else if (mediaStatus === MediaStatus.LIVE) {
-    return <Tag isLive>{t('live')}</Tag>;
+    return (
+      <Tag isLive className={styles.icon}>
+        {t('live')}
+      </Tag>
+    );
   }
 
   return null;
diff --git a/packages/ui-react/src/components/TextField/TextField.tsx b/packages/ui-react/src/components/TextField/TextField.tsx
index 43ce716d8..1b5787a6f 100644
--- a/packages/ui-react/src/components/TextField/TextField.tsx
+++ b/packages/ui-react/src/components/TextField/TextField.tsx
@@ -69,8 +69,7 @@ const TextField: React.FC<Props> = ({
     const inputType = 'type' in otherInputProps ? otherInputProps.type : 'text';
 
     const ariaAttributes = {
-      'aria-required': !!required,
-      'aria-invalid': Boolean(required && error && value !== ''),
+      'aria-invalid': Boolean(error && !value),
       'aria-describedby': helperTextId,
     } as const;
 
diff --git a/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
index 48449b4cd..baef0b215 100644
--- a/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
@@ -20,7 +20,6 @@ exports[`<TextField> > renders and matches multiline readonly snapshot 1`] = `
       <textarea
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        aria-required="false"
         class="_input_e16c1b"
         id="text-field_1235_name"
         name="name"
@@ -53,7 +52,6 @@ exports[`<TextField> > renders and matches multiline snapshot 1`] = `
       <textarea
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        aria-required="false"
         class="_input_e16c1b"
         id="text-field_1235_name"
         name="name"
@@ -85,7 +83,6 @@ exports[`<TextField> > renders and matches readonly snapshot 1`] = `
       <input
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        aria-required="false"
         class="_input_e16c1b"
         id="text-field_1235_name"
         name="name"
@@ -119,7 +116,6 @@ exports[`<TextField> > renders and matches snapshot 1`] = `
       <input
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        aria-required="false"
         class="_input_e16c1b"
         id="text-field_1235_name"
         name="name"
diff --git a/packages/ui-react/src/components/TileDock/TileDock.module.scss b/packages/ui-react/src/components/TileDock/TileDock.module.scss
index f702b0891..73f0ace7a 100644
--- a/packages/ui-react/src/components/TileDock/TileDock.module.scss
+++ b/packages/ui-react/src/components/TileDock/TileDock.module.scss
@@ -9,6 +9,7 @@
 .tileDock li {
   display: inline-block;
   white-space: normal;
+  vertical-align: top;
   list-style-type: none;
 }
 .notInView {
@@ -19,15 +20,15 @@
 }
 .tileDock .leftControl {
   position: absolute;
-  top: calc(50% + 25px);
-  left: 0;
+  top: calc(50% + 22px);
+  left: 1px;
   z-index: 1;
   transform: translateY(-100%);
 }
 .tileDock .rightControl {
   position: absolute;
-  top: calc(50% + 25px);
-  right: 0;
+  top: calc(50% + 22px);
+  right: 1px;
   z-index: 1;
   transform: translateY(-100%);
 }
diff --git a/packages/ui-react/src/components/TileDock/TileDock.tsx b/packages/ui-react/src/components/TileDock/TileDock.tsx
index 328f17533..252e1b06b 100644
--- a/packages/ui-react/src/components/TileDock/TileDock.tsx
+++ b/packages/ui-react/src/components/TileDock/TileDock.tsx
@@ -23,6 +23,7 @@ export type TileDockProps<T> = {
   renderLeftControl?: (handleClick: () => void) => ReactNode;
   renderRightControl?: (handleClick: () => void) => ReactNode;
   renderPaginationDots?: (index: number, pageIndex: number) => ReactNode;
+  renderPageIndicator?: (pageIndex: number, pages: number) => ReactNode;
 };
 
 type Tile<T> = {
@@ -74,6 +75,7 @@ function TileDock<T>({
   renderLeftControl,
   renderRightControl,
   renderPaginationDots,
+  renderPageIndicator,
 }: TileDockProps<T>) {
   const [index, setIndex] = useState(0);
   const [slideToIndex, setSlideToIndex] = useState(0);
@@ -254,6 +256,7 @@ function TileDock<T>({
           {wrapWithEmptyTiles ? (
             <li
               className={styles.emptyTile}
+              aria-hidden="true"
               style={{
                 width: `${tileWidth}%`,
                 paddingLeft: spacing / 2,
@@ -263,14 +266,11 @@ function TileDock<T>({
             />
           ) : null}
           {tileList.map((tile: Tile<T>, listIndex) => {
-            const posInSet = items.findIndex((item) => item === tile.item); // TODO optimize this for performances
             const isInView = !isMultiPage || (listIndex > tilesToShow - slideOffset && listIndex < tilesToShow * 2 + 1 - slideOffset);
 
             return (
               <li
                 key={tile.key}
-                aria-setsize={items.length}
-                aria-posinset={posInSet + 1}
                 aria-hidden={!isInView}
                 className={classNames({ [styles.notInView]: !isInView })}
                 style={{
@@ -288,6 +288,7 @@ function TileDock<T>({
           {wrapWithEmptyTiles ? (
             <li
               className={styles.emptyTile}
+              aria-hidden="true"
               style={{
                 width: `${tileWidth}%`,
                 paddingLeft: spacing / 2,
@@ -300,6 +301,7 @@ function TileDock<T>({
         {showRightControl && !!renderRightControl && <div className={styles.rightControl}>{renderRightControl(() => slide('right'))}</div>}
       </div>
       {paginationDots()}
+      {isMultiPage && renderPageIndicator && renderPageIndicator(Math.ceil(index / tilesToShow), Math.ceil(pages))}
     </React.Fragment>
   );
 }
diff --git a/packages/ui-react/src/components/UpgradeSubscription/UpgradeSubscription.tsx b/packages/ui-react/src/components/UpgradeSubscription/UpgradeSubscription.tsx
index 44e389736..0a5eb4f73 100644
--- a/packages/ui-react/src/components/UpgradeSubscription/UpgradeSubscription.tsx
+++ b/packages/ui-react/src/components/UpgradeSubscription/UpgradeSubscription.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '../Button/Button';
-import { AriaAnnouncerVariant, useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
+import { type AriaAnnouncerVariant, useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 
 import styles from './UpgradeSubscription.module.scss';
 
diff --git a/packages/ui-react/src/components/UserMenu/ProfilesMenu/ProfilesMenu.tsx b/packages/ui-react/src/components/UserMenu/ProfilesMenu/ProfilesMenu.tsx
deleted file mode 100644
index ef7f6402c..000000000
--- a/packages/ui-react/src/components/UserMenu/ProfilesMenu/ProfilesMenu.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import classNames from 'classnames';
-import type { UseMutateFunction } from 'react-query';
-import Plus from '@jwp/ott-theme/assets/icons/plus.svg?react';
-import type { Profile } from '@jwp/ott-common/types/profiles';
-
-import styles from '../UserMenu.module.scss';
-import LoadingOverlay from '../../LoadingOverlay/LoadingOverlay';
-import MenuButton from '../../MenuButton/MenuButton';
-import Icon from '../../Icon/Icon';
-import ProfileCircle from '../../ProfileCircle/ProfileCircle';
-
-type ProfilesMenuProps = {
-  profiles: Profile[];
-  currentProfile?: Profile | null;
-  small?: boolean;
-  selectingProfile: boolean;
-  selectProfile: UseMutateFunction<unknown, unknown, { id: string; avatarUrl: string }, unknown>;
-  createButtonLabel?: string;
-  switchProfilesLabel?: string;
-  onCreateButtonClick: () => void;
-};
-
-const ProfilesMenu = ({
-  profiles,
-  currentProfile,
-  small,
-  selectingProfile,
-  selectProfile,
-  createButtonLabel,
-  switchProfilesLabel,
-  onCreateButtonClick,
-}: ProfilesMenuProps) => (
-  <>
-    <li className={styles.sectionHeader}>{switchProfilesLabel}</li>
-    {selectingProfile ? (
-      <li>
-        <LoadingOverlay inline />
-      </li>
-    ) : (
-      profiles?.map((profile) => (
-        <li key={profile.id}>
-          <MenuButton
-            active={profile.id === currentProfile?.id}
-            small={small}
-            onClick={() => selectProfile({ id: profile.id, avatarUrl: profile.avatar_url })}
-            label={profile.name}
-            startIcon={<ProfileCircle src={profile.avatar_url} alt={profile.name} />}
-          />
-        </li>
-      ))
-    )}
-    {(profiles?.length || 0) < 4 && (
-      <li>
-        <MenuButton small={small} onClick={onCreateButtonClick} startIcon={<Icon icon={Plus} />} label={createButtonLabel} />
-      </li>
-    )}
-    <li>
-      <hr
-        className={classNames(styles.divider, {
-          [styles.small]: small,
-        })}
-      />
-    </li>
-  </>
-);
-
-export default ProfilesMenu;
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.module.scss b/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
index a44762fe5..9c8daf45c 100644
--- a/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
+++ b/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
@@ -1,6 +1,21 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 
+@mixin divider-before($marginY, $marginX, $background-opacity) {
+  position: relative;
+  margin-top: $marginY;
+
+  &::before {
+    position: absolute;
+    top: calc(#{$marginY} * -0.5);
+    right: $marginX;
+    left: $marginX;
+    height: 1px;
+    background-color: rgba(variables.$white, $background-opacity);
+    content: '';
+  }
+}
+
 .menuItems {
   width: auto;
   margin: 0;
@@ -18,43 +33,23 @@
 }
 
 .divider {
-  vertical-align: baseline;
-  background: transparent;
-  border: 0;
-  border-top: 1px solid rgba(variables.$white, 0.12);
+  @include divider-before(variables.$base-spacing, 0, 0.12);
 
   &.small {
-    margin: variables.$base-spacing;
-    border-top: 1px solid rgba(255, 255, 255, 0.32);
+    @include divider-before(variables.$base-spacing, variables.$base-spacing, 0.32);
   }
 }
 
 .sectionHeader {
   width: 100%;
-  padding: 0 0 12px 24px;
+  padding: 12px 0 12px 24px;
   color: variables.$white;
   font-weight: 700;
   font-size: 12px;
   text-transform: uppercase;
   opacity: 0.7;
-}
-
-.profileButton {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 6px 18px;
-  gap: 12px;
-  color: variables.$white;
-  font-size: 16px;
-  transition: all 0.1s ease-out;
-}
 
-.profileButton:hover {
-  background: rgba(variables.$white, 0.12);
-}
-
-.profileButton:active {
-  background: rgba(variables.$white, 0.24);
+  .menuItems + & {
+    @include divider-before(variables.$base-spacing, variables.$base-spacing, 0.32);
+  }
 }
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.tsx b/packages/ui-react/src/components/UserMenu/UserMenu.tsx
index d0879f27e..8cfc147ab 100644
--- a/packages/ui-react/src/components/UserMenu/UserMenu.tsx
+++ b/packages/ui-react/src/components/UserMenu/UserMenu.tsx
@@ -8,129 +8,97 @@ import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react'
 import Favorite from '@jwp/ott-theme/assets/icons/favorite.svg?react';
 import BalanceWallet from '@jwp/ott-theme/assets/icons/balance_wallet.svg?react';
 import Exit from '@jwp/ott-theme/assets/icons/exit.svg?react';
-import { PATH_USER_ACCOUNT, PATH_USER_FAVORITES, PATH_USER_PAYMENTS, PATH_USER_PROFILES_CREATE } from '@jwp/ott-common/src/paths';
 import { userProfileURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import { PATH_USER_ACCOUNT, PATH_USER_FAVORITES, PATH_USER_PAYMENTS } from '@jwp/ott-common/src/paths';
 import type { Profile } from '@jwp/ott-common/types/profiles';
 
 import MenuButton from '../MenuButton/MenuButton';
 import Icon from '../Icon/Icon';
 import ProfileCircle from '../ProfileCircle/ProfileCircle';
 
-import ProfilesMenu from './ProfilesMenu/ProfilesMenu';
 import styles from './UserMenu.module.scss';
 
 type Props = {
   small?: boolean;
   focusable: boolean;
   showPaymentsItem: boolean;
-  onClick?: () => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
+  onButtonClick?: () => void;
+  titleId?: string;
   currentProfile?: Profile | null;
-  profilesEnabled?: boolean;
-  profiles?: Profile[];
-  isSelectingProfile?: boolean;
-  selectProfile?: ({ id, avatarUrl }: { id: string; avatarUrl: string }) => void;
   favoritesEnabled?: boolean;
 };
 
-const UserMenu = ({
-  showPaymentsItem,
-  small = false,
-  onClick,
-  onFocus,
-  onBlur,
-  currentProfile,
-  profilesEnabled,
-  profiles,
-  isSelectingProfile,
-  selectProfile,
-  favoritesEnabled,
-  focusable,
-}: Props) => {
+const UserMenu = ({ showPaymentsItem, small = false, onButtonClick, currentProfile, favoritesEnabled, focusable, titleId }: Props) => {
   const { t } = useTranslation('user');
   const navigate = useNavigate();
   const accountController = getModule(AccountController);
   const tabIndex = focusable ? 0 : -1;
 
   const onLogout = useCallback(async () => {
-    if (onClick) {
-      onClick();
+    if (onButtonClick) {
+      onButtonClick();
     }
 
     await accountController.logout();
     navigate('/', { replace: true });
-  }, [onClick, navigate, accountController]);
+  }, [onButtonClick, navigate, accountController]);
 
   return (
-    <ul onFocus={onFocus} onBlur={onBlur} className={styles.menuItems}>
-      {profilesEnabled && selectProfile && (
-        <ProfilesMenu
-          profiles={profiles ?? []}
-          currentProfile={currentProfile}
-          small={small}
-          selectingProfile={!!isSelectingProfile}
-          selectProfile={selectProfile}
-          createButtonLabel={t('nav.add_profile')}
-          switchProfilesLabel={t('nav.switch_profiles')}
-          onCreateButtonClick={() => navigate(PATH_USER_PROFILES_CREATE)}
-        />
-      )}
-      <li className={styles.sectionHeader}>{t('nav.settings')}</li>
-      {profilesEnabled && currentProfile && (
+    <>
+      <h2 className={styles.sectionHeader} id={titleId}>
+        {t('nav.settings')}
+      </h2>
+      <ul className={styles.menuItems}>
+        {currentProfile && (
+          <li>
+            <MenuButton
+              small={small}
+              onClick={onButtonClick}
+              to={userProfileURL(currentProfile.id ?? '')}
+              label={t('nav.profile')}
+              startIcon={<ProfileCircle src={currentProfile?.avatar_url} alt={currentProfile?.name ?? ''} />}
+            />
+          </li>
+        )}
         <li>
           <MenuButton
             small={small}
-            onClick={onClick}
-            to={userProfileURL(currentProfile.id ?? '')}
-            label={t('nav.profile')}
+            onClick={onButtonClick}
+            to={PATH_USER_ACCOUNT}
+            label={t('nav.account')}
+            startIcon={<Icon icon={AccountCircle} />}
             tabIndex={tabIndex}
-            startIcon={<ProfileCircle src={currentProfile?.avatar_url} alt={currentProfile?.name ?? ''} />}
           />
         </li>
-      )}
-      <li>
-        <MenuButton
-          small={small}
-          onClick={onClick}
-          to={PATH_USER_ACCOUNT}
-          label={t('nav.account')}
-          startIcon={<Icon icon={AccountCircle} />}
-          tabIndex={tabIndex}
-        />
-      </li>
-
-      {favoritesEnabled && (
-        <li>
-          <MenuButton
-            small={small}
-            onClick={onClick}
-            to={PATH_USER_FAVORITES}
-            label={t('nav.favorites')}
-            startIcon={<Icon icon={Favorite} />}
-            tabIndex={tabIndex}
-          />
-        </li>
-      )}
-      {showPaymentsItem && (
-        <li>
-          <MenuButton
-            small={small}
-            onClick={onClick}
-            to={PATH_USER_PAYMENTS}
-            label={t('nav.payments')}
-            startIcon={<Icon icon={BalanceWallet} />}
-            tabIndex={tabIndex}
-          />
+        {favoritesEnabled && (
+          <li>
+            <MenuButton
+              small={small}
+              onClick={onButtonClick}
+              to={PATH_USER_FAVORITES}
+              label={t('nav.favorites')}
+              startIcon={<Icon icon={Favorite} />}
+              tabIndex={tabIndex}
+            />
+          </li>
+        )}
+        {showPaymentsItem && (
+          <li>
+            <MenuButton
+              small={small}
+              onClick={onButtonClick}
+              to={PATH_USER_PAYMENTS}
+              label={t('nav.payments')}
+              startIcon={<Icon icon={BalanceWallet} />}
+              tabIndex={tabIndex}
+            />
+          </li>
+        )}
+        <li className={classNames(styles.divider, { [styles.small]: small })}>
+          <MenuButton small={small} onClick={onLogout} label={t('nav.logout')} startIcon={<Icon icon={Exit} />} tabIndex={tabIndex} />
         </li>
-      )}
-      <li>
-        <hr className={classNames(styles.divider, { [styles.small]: small })} />
-      </li>
-      <li>
-        <MenuButton small={small} onClick={onLogout} label={t('nav.logout')} startIcon={<Icon icon={Exit} />} tabIndex={tabIndex} />
-      </li>
-    </ul>
+      </ul>
+    </>
   );
 };
 
diff --git a/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap b/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
index 8082ff88e..b971d187b 100644
--- a/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
+++ b/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`<UserMenu> > renders and matches snapshot 1`] = `
 <div>
+  <h2
+    class="_sectionHeader_457528"
+  >
+    nav.settings
+  </h2>
   <ul
     class="_menuItems_457528"
   >
-    <li
-      class="_sectionHeader_457528"
-    >
-      nav.settings
-    </li>
     <li>
       <a
         class="_menuButton_91706b"
@@ -60,14 +60,12 @@ exports[`<UserMenu> > renders and matches snapshot 1`] = `
         </span>
       </a>
     </li>
-    <li>
-      <hr
-        class="_divider_457528"
-      />
-    </li>
-    <li>
+    <li
+      class="_divider_457528"
+    >
       <div
         class="_menuButton_91706b"
+        role="button"
         tabindex="0"
       >
         <div
diff --git a/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss b/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
index a9d9ce5b9..4d406e36f 100644
--- a/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
+++ b/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
@@ -72,15 +72,10 @@
   align-items: center;
   margin-bottom: 8px;
   font-size: 16px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.15px;
 
-  > :first-child {
-    margin-right: 8px;
-  }
-
   @include responsive.mobile-only() {
-    order: 2;
     font-size: 14px;
   }
 }
@@ -89,7 +84,7 @@
   margin-top: 24px;
   margin-bottom: 8px;
   font-size: 20px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.5px;
 
   @include responsive.mobile-only() {
@@ -104,40 +99,35 @@
   margin-top: 0;
   margin-bottom: 24px;
   font-size: 18px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.5px;
 }
 
 .buttonBar {
   display: flex;
+  flex-wrap: wrap;
   justify-content: flex-start;
   align-items: center;
   width: 100%;
-  margin: 0 -6px;
 
   > button {
     justify-content: center;
-    margin: 6px;
-  }
-
-  @include responsive.mobile-and-tablet() {
-    flex-wrap: wrap;
-
-    > button {
+    
+    &:not(:last-child) {
+      margin-right: 12px;
+    }
+    
+    @include responsive.mobile-and-tablet() {
       flex: 1;
-      padding: 0 12px;
-
+      margin: 6px 6px 6px 0;
+      
       &:first-child {
         flex-basis: 100%;
+        margin: 0 0 6px 0;
+      }
+      &:last-child {
+        margin-right: 0;
       }
-    }
-  }
-
-  @include responsive.mobile-only() {
-    flex-wrap: wrap;
-
-    > button:first-child {
-      margin-bottom: 8px;
     }
   }
 }
@@ -176,9 +166,9 @@
 .posterFade {
   position: absolute;
   top: 0;
+  right: 0;
   left: 0;
   z-index: -1;
-  width: 100%;
   height: 120px;
   background: linear-gradient(0deg, transparent, var(--body-background-color, variables.$white));
 }
diff --git a/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx b/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx
index 5cd9f853f..804e0f2a5 100644
--- a/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx
+++ b/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx
@@ -39,7 +39,7 @@ const VideoDetails: React.VFC<Props> = ({
 
   return (
     <div data-testid={testId('cinema-layout')}>
-      <header className={styles.video} data-testid={testId('video-details')}>
+      <header className={styles.video} data-testid={testId('video-details')} id="video-details">
         <div className={classNames(styles.main, styles.mainPadding)}>
           <Image className={styles.poster} image={image} alt={alt} width={1280} />
           <div className={styles.posterFade} />
diff --git a/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap b/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
index 5a92ca533..f83a99a5e 100644
--- a/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
+++ b/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`<VideoDetails> > renders and matches snapshot 1`] = `
     <header
       class="_video_d0c133"
       data-testid="video-details"
+      id="video-details"
     >
       <div
         class="_main_d0c133 _mainPadding_d0c133"
@@ -49,6 +50,7 @@ exports[`<VideoDetails> > renders and matches snapshot 1`] = `
           >
             <p
               class="_textContainer_561522 _description_d0c133"
+              id="collapsible-content"
               style="max-height: none;"
             >
               Video description
diff --git a/packages/ui-react/src/components/VideoDetailsInline/VideoDetailsInline.module.scss b/packages/ui-react/src/components/VideoDetailsInline/VideoDetailsInline.module.scss
index 9175821d4..dc7511e4a 100644
--- a/packages/ui-react/src/components/VideoDetailsInline/VideoDetailsInline.module.scss
+++ b/packages/ui-react/src/components/VideoDetailsInline/VideoDetailsInline.module.scss
@@ -76,30 +76,15 @@ div.title {
   margin-right: auto;
   margin-bottom: 0;
   font-size: 16px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.15px;
-
-  > :first-child {
-    display: inline-block;
-    margin-right: 8px;
-
-    @include responsive.mobile-only() {
-      margin: 2px 4px 0 0;
-      padding: 2px 4px;
-    }
-  }
-
-  @include responsive.mobile-and-small-tablet() {
-    margin-bottom: variables.$base-spacing;
-    font-size: 14px;
-  }
 }
 
 .secondaryMetadata {
   margin-top: 24px;
   margin-bottom: 8px;
   font-size: 20px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.5px;
 
   @include responsive.mobile-only() {
@@ -112,6 +97,6 @@ div.title {
   min-height: 21px;
   margin-bottom: 24px;
   font-size: 18px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.5px;
 }
diff --git a/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss b/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss
index dfe935df2..521aa848f 100644
--- a/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss
+++ b/packages/ui-react/src/components/VideoLayout/VideoLayout.module.scss
@@ -127,7 +127,7 @@
   font-family: var(--body-alt-font-family);
   font-weight: var(--body-font-weight-bold);
   font-size: 24px;
-  line-height: 26px;
+  line-height: variables.$base-line-height;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
 }
 
@@ -135,7 +135,7 @@
   font-family: var(--body-alt-font-family);
   font-weight: var(--body-font-weight-bold);
   font-size: 20px;
-  line-height: 22px;
+  line-height: variables.$base-line-height;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
 }
 
diff --git a/packages/ui-react/src/components/VideoMetaData/VideoMetaData.module.scss b/packages/ui-react/src/components/VideoMetaData/VideoMetaData.module.scss
new file mode 100644
index 000000000..8798923da
--- /dev/null
+++ b/packages/ui-react/src/components/VideoMetaData/VideoMetaData.module.scss
@@ -0,0 +1,3 @@
+.separator {
+  margin: 0 4px;
+}
diff --git a/packages/ui-react/src/components/VideoMetaData/VideoMetaData.test.tsx b/packages/ui-react/src/components/VideoMetaData/VideoMetaData.test.tsx
new file mode 100644
index 000000000..387d9e165
--- /dev/null
+++ b/packages/ui-react/src/components/VideoMetaData/VideoMetaData.test.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import VideoMetaData from './VideoMetaData';
+
+describe('<VideoMetaData>', () => {
+  test('renders and matches snapshot', () => {
+    const attributes = ['2023', 'Comedy', 'something'];
+    const { container } = render(<VideoMetaData attributes={attributes} separator="|" />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/ui-react/src/components/VideoMetaData/VideoMetaData.tsx b/packages/ui-react/src/components/VideoMetaData/VideoMetaData.tsx
new file mode 100644
index 000000000..d9d296112
--- /dev/null
+++ b/packages/ui-react/src/components/VideoMetaData/VideoMetaData.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import styles from './VideoMetaData.module.scss';
+
+type Props = {
+  attributes: string[];
+  separator?: string;
+};
+
+const VideoMetaData: React.FC<Props> = ({ attributes, separator = '•' }: Props) => {
+  return (
+    <div>
+      {attributes.map((value, index) => (
+        <React.Fragment key={value}>
+          <span>{value}</span>
+          {index < attributes.length - 1 && (
+            <span className={styles.separator} aria-hidden="true">
+              {separator}
+            </span>
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default VideoMetaData;
diff --git a/packages/ui-react/src/components/VideoMetaData/__snapshots__/VideoMetaData.test.tsx.snap b/packages/ui-react/src/components/VideoMetaData/__snapshots__/VideoMetaData.test.tsx.snap
new file mode 100644
index 000000000..62ea6d0ad
--- /dev/null
+++ b/packages/ui-react/src/components/VideoMetaData/__snapshots__/VideoMetaData.test.tsx.snap
@@ -0,0 +1,29 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<VideoMetaData> > renders and matches snapshot 1`] = `
+<div>
+  <div>
+    <span>
+      2023
+    </span>
+    <span
+      aria-hidden="true"
+      class="_separator_1267df"
+    >
+      |
+    </span>
+    <span>
+      Comedy
+    </span>
+    <span
+      aria-hidden="true"
+      class="_separator_1267df"
+    >
+      |
+    </span>
+    <span>
+      something
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/ui-react/src/components/WaitingForPayment/WaitingForPayment.tsx b/packages/ui-react/src/components/WaitingForPayment/WaitingForPayment.tsx
index 2432e6a07..9e40b7319 100644
--- a/packages/ui-react/src/components/WaitingForPayment/WaitingForPayment.tsx
+++ b/packages/ui-react/src/components/WaitingForPayment/WaitingForPayment.tsx
@@ -6,11 +6,13 @@ import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 
 import Spinner from '../Spinner/Spinner';
 import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
+import useQueryParam from '../../hooks/useQueryParam';
 
 import styles from './WaitingForPayment.module.scss';
 
 const WaitingForPayment = () => {
   const { t } = useTranslation('account');
+  const offerId = useQueryParam('offerId') || undefined;
   const location = useLocation();
   const navigate = useNavigate();
   const announce = useAriaAnnouncer();
@@ -20,6 +22,7 @@ const WaitingForPayment = () => {
     intervalCheckAccess({
       interval: 3000,
       iterations: 5,
+      offerId,
       callback: (hasAccess) => {
         if (!hasAccess) return;
 
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
index b5b1eefb4..df73a5cba 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import useCheckout from '@jwp/ott-hooks-react/src/useCheckout';
-import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
+import { modalURLFromLocation, modalURLFromWindowLocation } from '@jwp/ott-ui-react/src/utils/location';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
-import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { FormValidationError } from '@jwp/ott-common/src/errors/FormValidationError';
 import { useTranslation } from 'react-i18next';
 
@@ -11,7 +10,7 @@ import CheckoutForm from '../../../components/CheckoutForm/CheckoutForm';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
 import PayPal from '../../../components/PayPal/PayPal';
 import NoPaymentRequired from '../../../components/NoPaymentRequired/NoPaymentRequired';
-import PaymentForm, { PaymentFormData } from '../../../components/PaymentForm/PaymentForm';
+import PaymentForm, { type PaymentFormData } from '../../../components/PaymentForm/PaymentForm';
 import AdyenInitialPayment from '../../AdyenInitialPayment/AdyenInitialPayment';
 import { useAriaAnnouncer } from '../../AnnouncementProvider/AnnoucementProvider';
 
@@ -31,7 +30,7 @@ const Checkout = () => {
 
   const backButtonClickHandler = () => navigate(chooseOfferUrl);
 
-  const { offer, offerType, paymentMethods, order, isSubmitting, updateOrder, submitPaymentWithoutDetails, submitPaymentPaypal, submitPaymentStripe } =
+  const { selectedOffer, offerType, paymentMethods, order, isSubmitting, updateOrder, submitPaymentWithoutDetails, submitPaymentPaypal, submitPaymentStripe } =
     useCheckout({
       onUpdateOrderSuccess: () => !!couponCode && setShowCouponCodeSuccess(true),
       onSubmitPaymentWithoutDetailsSuccess: () => {
@@ -75,10 +74,10 @@ const Checkout = () => {
   };
 
   useEffect(() => {
-    if (!offer) {
+    if (!selectedOffer) {
       return navigate(chooseOfferUrl, { replace: true });
     }
-  }, [navigate, chooseOfferUrl, offer]);
+  }, [navigate, chooseOfferUrl, selectedOffer]);
 
   // Pre-select first payment method
   useEffect(() => {
@@ -93,7 +92,7 @@ const Checkout = () => {
   }, []);
 
   // loading state
-  if (!offer || !order || !paymentMethods || !offerType) {
+  if (!selectedOffer || !order || !paymentMethods || !offerType) {
     return (
       <div style={{ height: 300 }}>
         <LoadingOverlay inline />
@@ -101,23 +100,22 @@ const Checkout = () => {
     );
   }
 
-  const cancelUrl = createURL(window.location.href, { u: 'payment-cancelled' });
-  const waitingUrl = createURL(window.location.href, { u: 'waiting-for-payment' });
-  const errorUrl = createURL(window.location.href, { u: 'payment-error' });
-  const successUrl = offerType === 'svod' ? welcomeUrl : closeModalUrl;
-  const successUrlWithOrigin = `${window.location.origin}${successUrl}`;
+  const cancelUrl = modalURLFromWindowLocation('payment-cancelled');
+  const waitingUrl = modalURLFromWindowLocation('waiting-for-payment', { offerId: selectedOffer?.offerId });
+  const errorUrl = modalURLFromWindowLocation('payment-error');
+  const successUrlPaypal = offerType === 'svod' ? waitingUrl : closeModalUrl;
   const referrer = window.location.href;
 
   const paymentMethod = paymentMethods?.find((method) => method.id === parseInt(paymentMethodId));
   const noPaymentRequired = !order?.requiredPaymentDetails;
   const isStripePayment = paymentMethod?.methodName === 'card' && paymentMethod?.provider === 'stripe';
-  const isAdyenPayment = paymentMethod?.methodName === 'card' && paymentMethod?.paymentGateway === 'adyen'; // @todo: conversion from controller?
+  const isAdyenPayment = paymentMethod?.methodName === 'card' && paymentMethod?.paymentGateway === 'adyen';
   const isPayPalPayment = paymentMethod?.methodName === 'paypal';
 
   return (
     <CheckoutForm
       order={order}
-      offer={offer}
+      offer={selectedOffer}
       offerType={offerType}
       onBackButtonClick={backButtonClickHandler}
       paymentMethods={paymentMethods}
@@ -154,7 +152,7 @@ const Checkout = () => {
       )}
       {isPayPalPayment && (
         <PayPal
-          onSubmit={() => submitPaymentPaypal.mutate({ successUrl: successUrlWithOrigin, waitingUrl, cancelUrl, errorUrl, couponCode })}
+          onSubmit={() => submitPaymentPaypal.mutate({ successUrl: successUrlPaypal, waitingUrl, cancelUrl, errorUrl, couponCode })}
           error={submitPaymentPaypal.error?.message || null}
         />
       )}
diff --git a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
index 8a69bbb0d..e1730074e 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/ChooseOffer.tsx
@@ -1,118 +1,75 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { mixed, object } from 'yup';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router';
-import { shallow } from '@jwp/ott-common/src/utils/compare';
-import type { Subscription } from '@jwp/ott-common/types/subscription';
-import type { ChooseOfferFormData } from '@jwp/ott-common/types/checkout';
-import { getModule } from '@jwp/ott-common/src/modules/container';
-import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
-import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
-import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import type { ChooseOfferFormData, OfferType } from '@jwp/ott-common/types/checkout';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
-import { logDev } from '@jwp/ott-common/src/utils/common';
 import useOffers from '@jwp/ott-hooks-react/src/useOffers';
-import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
-import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
-import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
+import useForm from '@jwp/ott-hooks-react/src/useForm';
+import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 
 import ChooseOfferForm from '../../../components/ChooseOfferForm/ChooseOfferForm';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
-import type { AccountModals } from '../AccountModal';
-
-const determineSwitchDirection = (subscription: Subscription | null) => {
-  const currentPeriod = subscription?.period;
-
-  if (currentPeriod === 'month') {
-    return 'upgrade';
-  } else if (currentPeriod === 'year') {
-    return 'downgrade';
-  } else {
-    return 'upgrade'; // Default to 'upgrade' if the period is not 'month' or 'year'
-  }
-};
+import useQueryParam from '../../../hooks/useQueryParam';
 
 const ChooseOffer = () => {
-  const checkoutController = getModule(CheckoutController);
-  const accountController = getModule(AccountController);
-
   const navigate = useNavigate();
   const location = useLocation();
   const { t } = useTranslation('account');
-  const { setOffer } = useCheckoutStore(({ setOffer }) => ({ setOffer }), shallow);
-  const { isLoading, offerType, setOfferType, offers, offersDict, defaultOfferId } = useOffers();
-  const { subscription } = useAccountStore.getState();
-  const [offerSwitches, updateOffer] = useCheckoutStore((state) => [state.offerSwitches, state.updateOffer]);
-  const isOfferSwitch = useQueryParam('u') === 'upgrade-subscription';
-  const availableOffers = isOfferSwitch ? offerSwitches : offers;
-  const offerId = availableOffers[0]?.offerId || '';
-
-  const updateAccountModal = useEventCallback((modal: keyof AccountModals) => {
-    navigate(modalURLFromLocation(location, modal));
-  });
+  const isSwitch = useQueryParam('u') === 'upgrade-subscription';
+  const isPendingOffer = useAccountStore(({ pendingOffer }) => ({ isPendingOffer: !!pendingOffer }));
+
+  const { isLoading, mediaOffers, subscriptionOffers, switchSubscriptionOffers, defaultOfferType, hasMultipleOfferTypes, chooseOffer, switchSubscription } =
+    useOffers();
+
+  const checkoutUrl = modalURLFromLocation(location, 'checkout');
+  const upgradePendingUrl = modalURLFromLocation(location, 'upgrade-subscription-pending');
+  const upgradeSuccessUrl = modalURLFromLocation(location, 'upgrade-subscription-success');
+  const upgradeErrorUrl = modalURLFromLocation(location, 'upgrade-subscription-error');
+
+  const { values, errors, submitting, setValue, handleSubmit, handleChange } = useForm<ChooseOfferFormData>({
+    initialValues: { selectedOfferType: defaultOfferType, selectedOfferId: undefined },
+    validationSchema: object().shape({
+      selectedOfferId: mixed<string>().required(t('choose_offer.field_required')),
+      selectedOfferType: mixed<OfferType>().required(t('choose_offer.field_required')),
+    }),
+    onSubmit: async ({ selectedOfferType, selectedOfferId }) => {
+      if (!selectedOfferType || !selectedOfferId) return;
 
-  const chooseOfferSubmitHandler: UseFormOnSubmitHandler<ChooseOfferFormData> = useCallback(
-    async ({ offerId }, { setSubmitting, setErrors }) => {
-      const offer = offerId && offersDict[offerId];
-
-      if (!offer) return setErrors({ form: t('choose_offer.offer_not_found') });
-
-      if (isOfferSwitch) {
-        const targetOffer = offerSwitches.find((offer) => offer.offerId === offerId);
-        const targetOfferId = targetOffer?.offerId || '';
-
-        try {
-          await checkoutController.switchSubscription(targetOfferId, determineSwitchDirection(subscription));
-          // switching a subscription takes a bit longer to process
-          await accountController.reloadSubscriptions({ delay: 7500 });
-
-          const isPendingSwitch = !!useAccountStore.getState().pendingOffer;
-          updateAccountModal(isPendingSwitch ? 'upgrade-subscription-pending' : 'upgrade-subscription-success');
-        } catch (error: unknown) {
-          logDev('Error occurred while upgrading subscription', error);
-          updateAccountModal('upgrade-subscription-error');
-        }
-      } else {
-        const selectedOffer = availableOffers?.find((offer) => offer.offerId === offerId) || null;
-
-        setOffer(selectedOffer);
-        updateOffer(selectedOffer);
-        setSubmitting(false);
-        updateAccountModal('checkout');
+      const offer = visibleOffers.find((offer) => offer.offerId === selectedOfferId);
+
+      if (!offer) return;
+
+      await chooseOffer.mutateAsync(offer);
+
+      if (isSwitch) {
+        return await switchSubscription.mutateAsync();
       }
     },
-    [
-      availableOffers,
-      isOfferSwitch,
-      offerSwitches,
-      offersDict,
-      setOffer,
-      subscription,
-      t,
-      updateAccountModal,
-      updateOffer,
-      checkoutController,
-      accountController,
-    ],
-  );
+    onSubmitSuccess: async () => {
+      if (isSwitch && isPendingOffer) return navigate(upgradePendingUrl);
+      if (isSwitch) return navigate(upgradeSuccessUrl);
 
-  const { handleSubmit, handleChange, setValue, values, errors, submitting } = useForm<ChooseOfferFormData>({
-    initialValues: { offerId: defaultOfferId },
-    validationSchema: object().shape({ offerId: mixed<string>().required(t('choose_offer.field_required')) }),
-    onSubmit: chooseOfferSubmitHandler,
+      navigate(checkoutUrl);
+    },
+    onSubmitError: () => navigate(upgradeErrorUrl),
   });
 
+  const visibleOffers = values.selectedOfferType === 'tvod' ? mediaOffers : isSwitch ? switchSubscriptionOffers : subscriptionOffers;
+
+  useEffect(() => {
+    if (isLoading || !visibleOffers.length) return;
+
+    const offerId = visibleOffers[visibleOffers.length - 1]?.offerId;
+
+    setValue('selectedOfferId', offerId);
+  }, [visibleOffers, values.selectedOfferType, setValue, isLoading]);
+
   useEffect(() => {
-    if (!isOfferSwitch && !isLoading) setValue('offerId', defaultOfferId);
+    if (isLoading || !defaultOfferType) return;
 
-    // Update offerId if the user is switching offers to ensure the correct offer is checked in the ChooseOfferForm
-    // Initially, a defaultOfferId is set, but when switching offers, we need to use the id of the target offer
-    if (isOfferSwitch && values.offerId === defaultOfferId) {
-      setValue('offerId', offerId);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setValue, defaultOfferId, availableOffers]);
+    setValue('selectedOfferType', defaultOfferType);
+  }, [isLoading, defaultOfferType, setValue]);
 
   // loading state
   if (isLoading) {
@@ -130,9 +87,8 @@ const ChooseOffer = () => {
       values={values}
       errors={errors}
       submitting={submitting}
-      offers={availableOffers}
-      offerType={offerType}
-      setOfferType={setOfferType}
+      offers={visibleOffers}
+      showOfferTypeSwitch={hasMultipleOfferTypes}
     />
   );
 };
diff --git a/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx b/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
index 46dea4b20..50321cc8a 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
@@ -48,7 +48,7 @@ const ResetPassword = ({ type }: { type?: 'add' }) => {
         await accountController.changePasswordWithToken(emailParam || '', password, resetToken, passwordConfirmation);
       }
 
-      announce(t('reset.reset_password_succesful'), 'success');
+      announce(t('reset.password_reset_success'), 'success');
       await accountController.logout();
       navigate(modalURLFromLocation(location, 'login'));
     } catch (error: unknown) {
@@ -100,6 +100,7 @@ const ResetPassword = ({ type }: { type?: 'add' }) => {
       onBlur={passwordForm.handleBlur}
       errors={passwordForm.errors}
       onSubmit={passwordForm.handleSubmit}
+      validationError={passwordForm.validationSchemaError}
       showOldPasswordField={!!(user && !resetPasswordTokenParam)}
       showResetTokenField={type === 'add' || (!user && !resetPasswordTokenParam)}
       email={emailParam || email}
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Login.tsx b/packages/ui-react/src/containers/AccountModal/forms/Login.tsx
index bc68e3f14..d477bf5e0 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Login.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Login.tsx
@@ -28,11 +28,13 @@ const Login: React.FC<Props> = ({ messageKey }: Props) => {
 
   const socialLoginURLs = useSocialLoginUrls(window.location.href.split('?')[0]);
 
-  const { values, errors, submitting, handleSubmit, handleChange } = useForm<LoginFormData>({
+  const { values, errors, submitting, validationSchemaError, handleSubmit, handleChange } = useForm<LoginFormData>({
     initialValues: { email: '', password: '' },
     validationSchema: object().shape({
-      email: string().email(t('login.field_is_not_valid_email')).required(t('login.field_required')),
-      password: string().required(t('login.field_required')),
+      email: string()
+        .email(t('login.field_is_not_valid_email'))
+        .required(t('login.field_required', { field: t('login.email') })),
+      password: string().required(t('login.field_required', { field: t('login.password') })),
     }),
     onSubmit: ({ email, password }) => accountController.login(email, password, window.location.href),
     onSubmitSuccess: () => {
@@ -46,6 +48,7 @@ const Login: React.FC<Props> = ({ messageKey }: Props) => {
   return (
     <LoginForm
       values={values}
+      validationError={validationSchemaError}
       errors={errors}
       submitting={submitting}
       siteName={siteName}
diff --git a/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx b/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx
index 1e6e62db9..d48a3cbca 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx
@@ -27,7 +27,8 @@ const PersonalDetails = () => {
   const { t } = useTranslation('account');
   const accessModel = useConfigStore((s) => s.accessModel);
   const { data, isLoading } = useQuery('captureStatus', accountController.getCaptureStatus);
-  const { hasMediaOffers } = useOffers();
+  const { mediaOffers } = useOffers();
+  const hasMediaOffers = mediaOffers.length > 0;
   const [questionValues, setQuestionValues] = useState<Record<string, string>>({});
   const [questionErrors, setQuestionErrors] = useState<Record<string, string>>({});
 
@@ -71,7 +72,10 @@ const PersonalDetails = () => {
     setQuestionValues((current) => ({ ...current, [event.target.name]: value }));
   };
 
-  const PersonalDetailSubmitHandler: UseFormOnSubmitHandler<PersonalDetailsFormData> = async (formData, { setErrors, setSubmitting, validate }) => {
+  const PersonalDetailSubmitHandler: UseFormOnSubmitHandler<PersonalDetailsFormData> = async (
+    formData,
+    { setErrors, setSubmitting, setValidationSchemaError, validate },
+  ) => {
     const requiredMessage = t('personal_details.this_field_is_required');
     const schema = object().shape({
       firstName: yupConditional(!!fields.firstNameLastName?.required, requiredMessage),
@@ -103,6 +107,7 @@ const PersonalDetails = () => {
     // we have validation errors
     if (!validate(schema) || Object.keys(errors).length) {
       setSubmitting(false);
+      setValidationSchemaError(true);
       return;
     }
 
@@ -134,7 +139,7 @@ const PersonalDetails = () => {
     setSubmitting(false);
   };
 
-  const { setValue, handleSubmit, handleChange, values, errors, submitting } = useForm<PersonalDetailsFormData>({
+  const { setValue, handleSubmit, handleChange, values, errors, validationSchemaError, submitting } = useForm<PersonalDetailsFormData>({
     initialValues,
     onSubmit: PersonalDetailSubmitHandler,
   });
@@ -159,6 +164,7 @@ const PersonalDetails = () => {
       setValue={setValue}
       values={values}
       errors={errors}
+      validationError={validationSchemaError}
       submitting={submitting}
     />
   );
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
index 3e9e853bb..ba403fbae 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
@@ -54,7 +54,7 @@ const Registration = () => {
     setConsentValues(extractConsentValues(publisherConsents));
   }, [accountController, publisherConsents]);
 
-  const { handleSubmit, handleChange, handleBlur, values, errors, submitting } = useForm<RegistrationFormData>({
+  const { handleSubmit, handleChange, handleBlur, values, errors, validationSchemaError, submitting } = useForm<RegistrationFormData>({
     initialValues: { email: '', password: '' },
     validationSchema: object().shape({
       email: string()
@@ -62,7 +62,7 @@ const Registration = () => {
         .required(t('registration.field_required', { field: t('registration.email') })),
       password: string()
         .matches(/^(?=.*[a-z])(?=.*[0-9]).{8,}$/, t('registration.invalid_password', { field: t('registration.password') }))
-        .required(t('registration.field_required')),
+        .required(t('registration.field_required', { field: t('registration.password') })),
     }),
     validateOnBlur: true,
     onSubmit: async ({ email, password }) => {
@@ -70,7 +70,7 @@ const Registration = () => {
 
       if (consentsErrors.length) {
         setConsentErrors(consentsErrors);
-        throw new Error('Consents error');
+        throw new Error(t('registration.consents_error'));
       }
 
       await accountController.register(email, password, window.location.href, formatConsentsFromValues(publisherConsents, consentValues));
@@ -91,11 +91,11 @@ const Registration = () => {
       values={values}
       errors={errors}
       consentErrors={consentErrors}
+      validationError={validationSchemaError}
       submitting={submitting}
       consentValues={consentValues}
       publisherConsents={publisherConsents}
       loading={loading || publisherConsentsLoading}
-      canSubmit={!!values.email && !!values.password}
     />
   );
 };
diff --git a/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx b/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
index 5b85c7e49..6e0d25569 100644
--- a/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
+++ b/packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx
@@ -6,11 +6,10 @@ import type { AdyenPaymentSession } from '@jwp/ott-common/types/checkout';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
-import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
+import { modalURLFromLocation, modalURLFromWindowLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { ADYEN_LIVE_CLIENT_KEY, ADYEN_TEST_CLIENT_KEY } from '@jwp/ott-common/src/constants';
 import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
 import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
-import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { useTranslation } from 'react-i18next';
 
 import Adyen from '../../components/Adyen/Adyen';
@@ -96,7 +95,7 @@ export default function AdyenPaymentDetails({ setProcessing, type, setPaymentErr
         setProcessing(true);
         setPaymentError(undefined);
 
-        const returnUrl = createURL(window.location.href, { u: 'payment-method', paymentMethodId: `${paymentMethodId}` });
+        const returnUrl = modalURLFromWindowLocation('payment-method', { paymentMethodId: `${paymentMethodId}` });
         const result = await checkoutController.addAdyenPaymentDetails(state.data.paymentMethod, paymentMethodId, returnUrl);
 
         if ('action' in result) {
diff --git a/packages/ui-react/src/containers/AnnouncementProvider/AnnoucementProvider.tsx b/packages/ui-react/src/containers/AnnouncementProvider/AnnoucementProvider.tsx
index 5215f7e13..8c91dbced 100644
--- a/packages/ui-react/src/containers/AnnouncementProvider/AnnoucementProvider.tsx
+++ b/packages/ui-react/src/containers/AnnouncementProvider/AnnoucementProvider.tsx
@@ -1,5 +1,5 @@
 import { secondsToMilliseconds } from 'date-fns';
-import { PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
+import { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import FormFeedback from '../../components/FormFeedback/FormFeedback';
diff --git a/packages/ui-react/src/containers/Cinema/Cinema.module.scss b/packages/ui-react/src/containers/Cinema/Cinema.module.scss
index 68602af84..78be65563 100644
--- a/packages/ui-react/src/containers/Cinema/Cinema.module.scss
+++ b/packages/ui-react/src/containers/Cinema/Cinema.module.scss
@@ -3,26 +3,28 @@
 @use '@jwp/ott-ui-react/src/styles/mixins/responsive';
 @use '@jwp/ott-ui-react/src/styles/mixins/typography';
 
-.fade {
-  position: relative;
-  // make sure the fade animation happens on top of page elements
-  z-index: variables.$player-z-index;
+.cinemaContainer {
+  width: 100%;
+  height: 100%;
 }
 
 .cinema {
-  position: fixed;
-  top: 0;
-  left: 0;
   width: 100vw;
   height: calc(100vh - calc(100vh - 100%));
   overflow: hidden;
   background-color: variables.$black;
 }
 
+.overlayFade {
+  position: relative; // make opacity transition work
+  z-index: 1; // ensure overlay is placed above the player
+}
+
 .playerOverlay {
   position: absolute;
   top: 0;
   left: 0;
+  z-index: 1;
   width: 100%;
   min-height: 100px;
   padding: 24px 56px;
@@ -66,13 +68,14 @@
 }
 
 .primaryMetadata {
+  display: flex;
+  align-items: center;
   margin-bottom: 8px;
   font-size: 16px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.15px;
 
   @include responsive.mobile-only() {
-    order: 2;
     font-size: 14px;
   }
 }
@@ -81,7 +84,7 @@
   margin-top: 4px;
   margin-bottom: 8px;
   font-size: 20px;
-  line-height: 20px;
+  line-height: variables.$base-line-height;
   letter-spacing: 0.5px;
 
   @include responsive.mobile-only() {
diff --git a/packages/ui-react/src/containers/Cinema/Cinema.test.tsx b/packages/ui-react/src/containers/Cinema/Cinema.test.tsx
index 501362bce..5219bbb63 100644
--- a/packages/ui-react/src/containers/Cinema/Cinema.test.tsx
+++ b/packages/ui-react/src/containers/Cinema/Cinema.test.tsx
@@ -19,7 +19,7 @@ describe('<Cinema>', () => {
     mockService(WatchHistoryController, {});
   });
 
-  test('renders and matches snapshot', () => {
+  test('renders and matches snapshot', async () => {
     const item = {
       description: 'Test item description',
       duration: 354,
@@ -38,10 +38,19 @@ describe('<Cinema>', () => {
       tracks: [],
     } as PlaylistItem;
 
-    const { container } = renderWithRouter(
-      <Cinema item={item} onPlay={() => null} onPause={() => null} open={true} title={item.title} primaryMetadata="Primary metadata" />,
+    const { baseElement } = renderWithRouter(
+      <Cinema
+        item={item}
+        onPlay={() => null}
+        onPause={() => null}
+        open
+        title={item.title}
+        primaryMetadata="Primary metadata"
+        onClose={vi.fn()}
+        onNext={vi.fn()}
+      />,
     );
 
-    expect(container).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 });
diff --git a/packages/ui-react/src/containers/Cinema/Cinema.tsx b/packages/ui-react/src/containers/Cinema/Cinema.tsx
index 5311c0a3d..e6ca7b7b3 100644
--- a/packages/ui-react/src/containers/Cinema/Cinema.tsx
+++ b/packages/ui-react/src/containers/Cinema/Cinema.tsx
@@ -7,6 +7,7 @@ import IconButton from '../../components/IconButton/IconButton';
 import PlayerContainer from '../PlayerContainer/PlayerContainer';
 import Fade from '../../components/Animation/Fade/Fade';
 import Icon from '../../components/Icon/Icon';
+import Modal from '../../components/Modal/Modal';
 
 import styles from './Cinema.module.scss';
 
@@ -48,7 +49,8 @@ const Cinema: React.FC<Props> = ({
   const { t } = useTranslation();
 
   // state
-  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [overlayHasFocus, setOverlayHasFocus] = useState(false);
   const [userActive, setUserActive] = useState(true);
 
   const handlePlay = useCallback(() => {
@@ -74,19 +76,28 @@ const Cinema: React.FC<Props> = ({
 
   // effects
   useEffect(() => {
-    if (open) {
-      setUserActive(true);
-      document.body.style.overflowY = 'hidden';
-    }
-
-    return () => {
-      document.body.style.overflowY = '';
-    };
+    if (open) setUserActive(true);
   }, [open]);
 
   return (
-    <Fade open={open} className={styles.fade}>
-      <div className={styles.cinema}>
+    <Modal open={open} animationContainerClassName={styles.cinemaContainer} onClose={onClose}>
+      <div className={styles.cinema} aria-modal="true" role="dialog" aria-label={t('videoplayer')}>
+        <Fade className={styles.overlayFade} open={!isPlaying || userActive || overlayHasFocus} keepMounted>
+          <div className={styles.playerOverlay} onFocus={() => setOverlayHasFocus(true)} onBlur={() => setOverlayHasFocus(false)}>
+            <div className={styles.playerContent}>
+              <IconButton aria-label={t('common:back')} onClick={onClose} className={styles.backButton}>
+                <Icon icon={ArrowLeft} />
+              </IconButton>
+              <div>
+                <h1 className={styles.title}>{title}</h1>
+                <div className={styles.metaContainer}>
+                  {secondaryMetadata && <div className={styles.secondaryMetadata}>{secondaryMetadata}</div>}
+                  <div className={styles.primaryMetadata}>{primaryMetadata}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Fade>
         <PlayerContainer
           item={item}
           seriesItem={seriesItem}
@@ -102,25 +113,8 @@ const Cinema: React.FC<Props> = ({
           liveFromBeginning={liveFromBeginning}
           liveStartDateTime={liveStartDateTime}
         />
-
-        <Fade open={!isPlaying || userActive}>
-          <div className={styles.playerOverlay}>
-            <div className={styles.playerContent}>
-              <IconButton aria-label={t('common:back')} onClick={onClose} className={styles.backButton}>
-                <Icon icon={ArrowLeft} />
-              </IconButton>
-              <div>
-                <h1 className={styles.title}>{title}</h1>
-                <div className={styles.metaContainer}>
-                  {secondaryMetadata && <div className={styles.secondaryMetadata}>{secondaryMetadata}</div>}
-                  <div className={styles.primaryMetadata}>{primaryMetadata}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </Fade>
       </div>
-    </Fade>
+    </Modal>
   );
 };
 
diff --git a/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap b/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
index a9d2638a2..e929cf9ac 100644
--- a/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
+++ b/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
@@ -1,72 +1,95 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Cinema> > renders and matches snapshot 1`] = `
-<div>
+<body
+  style="margin-right: 0px; overflow-y: hidden;"
+>
+  <div />
   <div
-    class="_fade_555f3c"
-    style="transition: opacity 0.25s ease-in-out; opacity: 0;"
+    style="transition: opacity 0.3s ease-in-out; opacity: 0; will-change: opacity;"
   >
     <div
-      class="_cinema_555f3c"
+      class="_modal_6c6c55"
     >
       <div
-        class="_loadingOverlay_eb61cb _inline_eb61cb"
-      >
-        <div
-          class="_buffer_d122df"
-        >
-          <div />
-          <div />
-          <div />
-          <div />
-        </div>
-      </div>
+        class="_backdrop_6c6c55"
+        data-testid="backdrop"
+      />
       <div
-        style="transition: opacity 0.25s ease-in-out; opacity: 0;"
+        class="_container_6c6c55"
       >
         <div
-          class="_playerOverlay_555f3c"
+          class="_cinemaContainer_555f3c"
+          style="transition: transform 0.2s ease-out; transform: scale(0.7);"
         >
           <div
-            class="_playerContent_555f3c"
+            aria-label="videoplayer"
+            aria-modal="true"
+            class="_cinema_555f3c"
+            role="dialog"
           >
             <div
-              aria-label="common:back"
-              class="_iconButton_0fef65 _backButton_555f3c"
-              role="button"
-              tabindex="0"
+              class="_overlayFade_555f3c"
+              style="transition: opacity 0.25s ease-in-out; opacity: 0; will-change: opacity;"
             >
-              <svg
-                aria-hidden="true"
-                class="_icon_585b29"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
-                />
-              </svg>
-            </div>
-            <div>
-              <h1
-                class="_title_555f3c"
-              >
-                Test item title
-              </h1>
               <div
-                class="_metaContainer_555f3c"
+                class="_playerOverlay_555f3c"
               >
                 <div
-                  class="_primaryMetadata_555f3c"
+                  class="_playerContent_555f3c"
                 >
-                  Primary metadata
+                  <div
+                    aria-label="common:back"
+                    class="_iconButton_0fef65 _backButton_555f3c"
+                    role="button"
+                    tabindex="0"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="_icon_585b29"
+                      viewBox="0 0 24 24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+                      />
+                    </svg>
+                  </div>
+                  <div>
+                    <h1
+                      class="_title_555f3c"
+                    >
+                      Test item title
+                    </h1>
+                    <div
+                      class="_metaContainer_555f3c"
+                    >
+                      <div
+                        class="_primaryMetadata_555f3c"
+                      >
+                        Primary metadata
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
+            <div
+              class="_loadingOverlay_eb61cb _inline_eb61cb"
+            >
+              <div
+                class="_buffer_d122df"
+              >
+                <div />
+                <div />
+                <div />
+                <div />
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</body>
 `;
diff --git a/packages/ui-react/src/containers/FavoriteButton/FavoriteButton.tsx b/packages/ui-react/src/containers/FavoriteButton/FavoriteButton.tsx
index c524fc951..6b9277f9c 100644
--- a/packages/ui-react/src/containers/FavoriteButton/FavoriteButton.tsx
+++ b/packages/ui-react/src/containers/FavoriteButton/FavoriteButton.tsx
@@ -40,9 +40,10 @@ const FavoriteButton: React.VFC<Props> = ({ item }) => {
     <>
       <Button
         label={t('video:favorite')}
-        aria-label={isFavorite ? t('video:remove_from_favorites') : t('video:add_to_favorites')}
+        aria-label={t('video:favorite')}
         startIcon={isFavorite ? <Icon icon={Favorite} /> : <Icon icon={FavoriteBorder} />}
         onClick={onFavoriteButtonClick}
+        aria-pressed={isFavorite}
         color={isFavorite ? 'primary' : 'default'}
         fullWidth={breakpoint < Breakpoint.md}
       />
diff --git a/packages/ui-react/src/containers/InlinePlayer/InlinePlayer.module.scss b/packages/ui-react/src/containers/InlinePlayer/InlinePlayer.module.scss
index b15529973..e81f88088 100644
--- a/packages/ui-react/src/containers/InlinePlayer/InlinePlayer.module.scss
+++ b/packages/ui-react/src/containers/InlinePlayer/InlinePlayer.module.scss
@@ -1,6 +1,7 @@
 @use '@jwp/ott-ui-react/src/styles/theme';
 @use '@jwp/ott-ui-react/src/styles/mixins/typography';
 @use '@jwp/ott-ui-react/src/styles/mixins/responsive';
+@use '@jwp/ott-ui-react/src/styles/variables';
 
 .inlinePlayer {
   position: absolute;
@@ -73,7 +74,7 @@
 
   @include responsive.mobile-only {
     font-size: 16px;
-    line-height: 1em;
+    line-height: variables.$base-line-height;
   }
 }
 
@@ -83,12 +84,11 @@
   margin-bottom: 16px;
   font-family: var(--body-alt-font-family);
   font-size: 16px;
-  line-height: 1.2em;
+  line-height: variables.$base-line-height;
   text-align: center;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
 
   @include responsive.mobile-only {
     font-size: 14px;
-    line-height: 1em;
   }
 }
diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss
index 75626e1ef..c38ad5eea 100644
--- a/packages/ui-react/src/containers/Layout/Layout.module.scss
+++ b/packages/ui-react/src/containers/Layout/Layout.module.scss
@@ -1,30 +1,8 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 
-.footer {
-  padding: 20px 40px;
-  line-height: 18px;
-  letter-spacing: 0.15px;
-  text-align: center;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
-
-  a,
-  a:visited,
-  a:active,
-  a:hover {
-    color: variables.$white;
-    text-decoration: none;
-  }
-}
-
-div.testFixMargin {
-  margin-bottom: 50px;
-}
-
-.divider {
-  width: 100%;
-  border: none;
-  border-top: 1px solid rgba(variables.$white, 0.12);
+.layout {
+  position: relative;
 }
 
 .buttonContainer {
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index 231f44022..a9d8bbbc3 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -3,7 +3,6 @@ import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useLocation, useNavigate } from 'react-router';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
-import classNames from 'classnames';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
@@ -11,20 +10,21 @@ import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
 import ProfileController from '@jwp/ott-common/src/controllers/ProfileController';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
-import { IS_DEVELOPMENT_BUILD, unicodeToChar } from '@jwp/ott-common/src/utils/common';
+import { unicodeToChar } from '@jwp/ott-common/src/utils/common';
 import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
 import useSearchQueryUpdater from '@jwp/ott-ui-react/src/hooks/useSearchQueryUpdater';
 import { useProfiles, useSelectProfile } from '@jwp/ott-hooks-react/src/useProfiles';
+import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
 import { PATH_HOME, PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
 import { playlistURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import env from '@jwp/ott-common/src/env';
 
-import MarkdownComponent from '../../components/MarkdownComponent/MarkdownComponent';
 import Header from '../../components/Header/Header';
 import Sidebar from '../../components/Sidebar/Sidebar';
 import MenuButton from '../../components/MenuButton/MenuButton';
 import UserMenu from '../../components/UserMenu/UserMenu';
 import Button from '../../components/Button/Button';
+import Footer from '../../components/Footer/Footer';
 
 import styles from './Layout.module.scss';
 
@@ -37,6 +37,7 @@ const Layout = () => {
     ({ config, accessModel, supportedLanguages }) => ({ config, accessModel, supportedLanguages }),
     shallow,
   );
+  const userMenuTitleId = useOpaqueId('usermenu-title');
   const isLoggedIn = !!useAccountStore(({ user }) => user);
   const favoritesEnabled = !!config.features?.favoritesList;
   const { menu, assets, siteName, description, features, styling } = config;
@@ -123,8 +124,8 @@ const Layout = () => {
   };
 
   // useCallbacks are used here to fix a bug in the Popover when using a Reactive onClose callback
-  const openUserMenu = useCallback(() => useUIStore.setState({ userMenuOpen: true }), []);
-  const closeUserMenu = useCallback(() => useUIStore.setState({ userMenuOpen: false }), []);
+  const openUserPanel = useCallback(() => useUIStore.setState({ userMenuOpen: true }), []);
+  const closeUserPanel = useCallback(() => useUIStore.setState({ userMenuOpen: false }), []);
   const openLanguageMenu = useCallback(() => useUIStore.setState({ languageMenuOpen: true }), []);
   const closeLanguageMenu = useCallback(() => useUIStore.setState({ languageMenuOpen: false }), []);
 
@@ -132,7 +133,9 @@ const Layout = () => {
     if (!canLogin) return null;
 
     return isLoggedIn ? (
-      <UserMenu focusable={sideBarOpen} favoritesEnabled={favoritesEnabled} showPaymentsItem />
+      <section aria-labelledby={userMenuTitleId}>
+        <UserMenu focusable={sideBarOpen} favoritesEnabled={favoritesEnabled} titleId={userMenuTitleId} showPaymentsItem />
+      </section>
     ) : (
       <div className={styles.buttonContainer}>
         <Button tabIndex={sideBarOpen ? 0 : -1} onClick={loginButtonClickHandler} label={t('sign_in')} fullWidth />
@@ -144,7 +147,7 @@ const Layout = () => {
   const containerProps = { inert: sideBarOpen ? '' : undefined }; // inert is not yet officially supported in react
 
   return (
-    <div>
+    <div className={styles.layout}>
       <Helmet>
         <title>{siteName}</title>
         <meta name="description" content={metaDescription} />
@@ -176,8 +179,8 @@ const Layout = () => {
           sideBarOpen={sideBarOpen}
           userMenuOpen={userMenuOpen}
           languageMenuOpen={languageMenuOpen}
-          openUserMenu={openUserMenu}
-          closeUserMenu={closeUserMenu}
+          openUserPanel={openUserPanel}
+          closeUserPanel={closeUserPanel}
           openLanguageMenu={openLanguageMenu}
           closeLanguageMenu={closeLanguageMenu}
           canLogin={canLogin}
@@ -199,22 +202,19 @@ const Layout = () => {
         <main id="content" className={styles.main} tabIndex={-1}>
           <Outlet />
         </main>
-        {!!footerText && (
-          <MarkdownComponent
-            // The extra style below is just to fix the footer on mobile when the dev selector is shown
-            className={classNames(styles.footer, { [styles.testFixMargin]: IS_DEVELOPMENT_BUILD })}
-            markdownString={footerText}
-            tag="footer"
-            inline
-          />
-        )}
+        {!!footerText && <Footer text={footerText} />}
       </div>
       <Sidebar isOpen={sideBarOpen} onClose={() => setSideBarOpen(false)}>
-        <MenuButton label={t('home')} to="/" tabIndex={sideBarOpen ? 0 : -1} />
-        {menu.map((item) => (
-          <MenuButton key={item.contentId} label={item.label} to={playlistURL(item.contentId)} tabIndex={sideBarOpen ? 0 : -1} />
-        ))}
-        <hr className={styles.divider} />
+        <ul>
+          <li>
+            <MenuButton label={t('home')} to="/" />
+          </li>
+          {menu.map((item) => (
+            <li key={item.contentId}>
+              <MenuButton label={item.label} to={playlistURL(item.contentId)} />
+            </li>
+          ))}
+        </ul>
         {renderUserActions(sideBarOpen)}
       </Sidebar>
     </div>
diff --git a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
index 22f3c63d6..1bef0cce5 100644
--- a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
@@ -2,7 +2,9 @@
 
 exports[`<Layout /> > renders layout 1`] = `
 <div>
-  <div>
+  <div
+    class="_layout_c71437"
+  >
     <div>
       <header
         class="_header_f4f7a7 _static_f4f7a7"
@@ -104,19 +106,20 @@ exports[`<Layout /> > renders layout 1`] = `
       <nav
         class="_group_577f70"
       >
-        <a
-          aria-current="page"
-          class="_menuButton_91706b _active_91706b"
-          href="/"
-          tabindex="-1"
-        >
-          <span>
-            home
-          </span>
-        </a>
-        <hr
-          class="_divider_c71437"
-        />
+        <ul>
+          <li>
+            <a
+              aria-current="page"
+              class="_menuButton_91706b _active_91706b"
+              href="/"
+              tabindex="0"
+            >
+              <span>
+                home
+              </span>
+            </a>
+          </li>
+        </ul>
       </nav>
     </div>
   </div>
diff --git a/packages/ui-react/src/containers/PaymentContainer/PaymentContainer.tsx b/packages/ui-react/src/containers/PaymentContainer/PaymentContainer.tsx
index 0b9640c62..2da4c87a2 100644
--- a/packages/ui-react/src/containers/PaymentContainer/PaymentContainer.tsx
+++ b/packages/ui-react/src/containers/PaymentContainer/PaymentContainer.tsx
@@ -3,7 +3,6 @@ import { useLocation, useNavigate } from 'react-router';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import useOffers from '@jwp/ott-hooks-react/src/useOffers';
@@ -25,7 +24,7 @@ import { modalURLFromLocation } from '../../utils/location';
  * @returns {void}
  *
  */
-export const processBillingReceipt = (receipt: Blob | string, transactionId: string) => {
+const processBillingReceipt = (receipt: Blob | string, transactionId: string) => {
   if (receipt instanceof Blob) {
     const url = window.URL.createObjectURL(new Blob([receipt]));
     const link = document.createElement('a');
@@ -48,29 +47,21 @@ export const processBillingReceipt = (receipt: Blob | string, transactionId: str
 const PaymentContainer = () => {
   const accountController = getModule(AccountController);
 
-  const { accessModel } = useConfigStore(
-    (s) => ({
-      accessModel: s.accessModel,
-      favoritesList: s.config.features?.favoritesList,
-    }),
-    shallow,
-  );
   const navigate = useNavigate();
 
+  const { accessModel } = useConfigStore(({ accessModel }) => ({ accessModel }), shallow);
   const { user: customer, subscription: activeSubscription, transactions, activePayment, pendingOffer, loading } = useAccountStore();
   const { canUpdatePaymentMethod, canShowReceipts, canRenewSubscription } = accountController.getFeatures();
+  const { subscriptionOffers, switchSubscriptionOffers } = useOffers();
 
   const [showAllTransactions, setShowAllTransactions] = useState(false);
   const [isLoadingReceipt, setIsLoadingReceipt] = useState(false);
   const [selectedOfferId, setSelectedOfferId] = useState<string | null>(activeSubscription?.accessFeeId ?? null);
   const [isUpgradeOffer, setIsUpgradeOffer] = useState<boolean | undefined>(undefined);
 
-  const { offerSwitches } = useCheckoutStore();
   const location = useLocation();
 
-  const handleUpgradeSubscriptionClick = async () => {
-    navigate(modalURLFromLocation(location, 'upgrade-subscription'));
-  };
+  const handleUpgradeSubscriptionClick = async () => navigate(modalURLFromLocation(location, 'upgrade-subscription'));
 
   const handleShowReceiptClick = async (transactionId: string) => {
     setIsLoadingReceipt(true);
@@ -87,8 +78,6 @@ const PaymentContainer = () => {
     setIsLoadingReceipt(false);
   };
 
-  const { offers } = useOffers();
-
   const changeSubscriptionPlan = useSubscriptionChange(isUpgradeOffer ?? false, selectedOfferId, customer, activeSubscription?.subscriptionId);
 
   const onChangePlanClick = async () => {
@@ -122,10 +111,10 @@ const PaymentContainer = () => {
       canUpdatePaymentMethod={canUpdatePaymentMethod}
       canRenewSubscription={canRenewSubscription}
       onUpgradeSubscriptionClick={handleUpgradeSubscriptionClick}
-      offerSwitchesAvailable={!!offerSwitches.length}
+      offerSwitchesAvailable={switchSubscriptionOffers.length > 0}
       canShowReceipts={canShowReceipts}
       onShowReceiptClick={handleShowReceiptClick}
-      offers={offers}
+      offers={subscriptionOffers}
       pendingDowngradeOfferId={pendingDowngradeOfferId}
       changeSubscriptionPlan={changeSubscriptionPlan}
       onChangePlanClick={onChangePlanClick}
diff --git a/packages/ui-react/src/containers/Profiles/Form.tsx b/packages/ui-react/src/containers/Profiles/Form.tsx
index b9f5a677d..212986202 100644
--- a/packages/ui-react/src/containers/Profiles/Form.tsx
+++ b/packages/ui-react/src/containers/Profiles/Form.tsx
@@ -57,7 +57,6 @@ const Form = ({ initialValues, formHandler, selectedAvatar, showCancelButton = t
     }),
     onSubmit: formHandler,
   });
-  const isDirty = Object.entries(values).some(([k, v]) => v !== initialValues[k as keyof typeof initialValues]);
   useEffect(() => {
     setValue('avatar_url', selectedAvatar?.value || profile?.avatar_url || '');
   }, [profile?.avatar_url, selectedAvatar?.value, setValue]);
@@ -74,14 +73,13 @@ const Form = ({ initialValues, formHandler, selectedAvatar, showCancelButton = t
         <div className={profileStyles.formFields}>
           {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
           {submitting && <LoadingOverlay />}
-          <h2 className={profileStyles.nameHeading}>{t('name')}</h2>
           <TextField
             required
             name="name"
             label={t('profile.name')}
             value={values?.name}
             onChange={handleChange}
-            error={!!errors.name || !!errors.form}
+            error={!!errors.name}
             helperText={errors.name}
           />
           {showContentRating && (
@@ -99,7 +97,7 @@ const Form = ({ initialValues, formHandler, selectedAvatar, showCancelButton = t
         </div>
         <hr className={profileStyles.divider} />
         <div className={classNames(styles.panelHeader, profileStyles.noBottomBorder)}>
-          <h2>{t('profile.avatar')}</h2>
+          <h3>{t('profile.avatar')}</h3>
           <div className={profileStyles.avatarsContainer}>
             {AVATARS.map((avatarUrl) => (
               <ProfileBox
@@ -115,7 +113,7 @@ const Form = ({ initialValues, formHandler, selectedAvatar, showCancelButton = t
           </div>
         </div>
         <>
-          <Button type="submit" label={t('account.save')} variant="outlined" disabled={!isDirty || submitting} fullWidth={isMobile} />
+          <Button type="submit" label={t('account.save')} variant="outlined" disabled={submitting} fullWidth={isMobile} />
           {showCancelButton && <Button onClick={() => navigate(PATH_USER_PROFILES)} label={t('account.cancel')} variant="text" fullWidth={isMobile} />}
         </>
       </div>
diff --git a/packages/ui-react/src/containers/ShelfList/ShelfList.module.scss b/packages/ui-react/src/containers/ShelfList/ShelfList.module.scss
index f36391772..b3c93c60b 100644
--- a/packages/ui-react/src/containers/ShelfList/ShelfList.module.scss
+++ b/packages/ui-react/src/containers/ShelfList/ShelfList.module.scss
@@ -24,7 +24,7 @@
   }
 
   @include responsive.tablet-only() {
-    padding: 0 calc(#{variables.$base-spacing} * 2);
+    padding: 24px calc(#{variables.$base-spacing} * 2);
 
     &.featured {
       padding: 24px 10%;
diff --git a/packages/ui-react/src/containers/StartWatchingButton/StartWatchingButton.tsx b/packages/ui-react/src/containers/StartWatchingButton/StartWatchingButton.tsx
index 4bec0458c..b8fd0d329 100644
--- a/packages/ui-react/src/containers/StartWatchingButton/StartWatchingButton.tsx
+++ b/packages/ui-react/src/containers/StartWatchingButton/StartWatchingButton.tsx
@@ -68,9 +68,9 @@ const StartWatchingButton: React.VFC<Props> = ({ item, playUrl, disabled = false
 
   useEffect(() => {
     // set the TVOD mediaOffers in the checkout store
-    setRequestedMediaOffers(mediaOffers.length ? mediaOffers : null);
+    setRequestedMediaOffers(mediaOffers);
 
-    return () => setRequestedMediaOffers(null);
+    return () => setRequestedMediaOffers([]);
   }, [mediaOffers, setRequestedMediaOffers]);
 
   // the user can't purchase access in an AVOD platform due to missing configuration, so we hide the button
diff --git a/packages/ui-react/src/containers/TrailerModal/TrailerModal.tsx b/packages/ui-react/src/containers/TrailerModal/TrailerModal.tsx
index 5523c2d5e..d825d9441 100644
--- a/packages/ui-react/src/containers/TrailerModal/TrailerModal.tsx
+++ b/packages/ui-react/src/containers/TrailerModal/TrailerModal.tsx
@@ -28,7 +28,7 @@ const TrailerModal: React.FC<Props> = ({ item, open, title, onClose }) => {
 
   return (
     <Modal open={open} onClose={onClose}>
-      <div className={styles.container} role="dialog" aria-labelledby="trailer-modal-title">
+      <div className={styles.container} role="dialog" aria-modal="true" aria-labelledby="trailer-modal-title">
         <Player
           item={item}
           onPlay={handlePlay}
@@ -38,7 +38,7 @@ const TrailerModal: React.FC<Props> = ({ item, open, title, onClose }) => {
           onUserInActive={handleUserInactive}
           autostart
         />
-        <Fade open={!isPlaying || userActive}>
+        <Fade open={!isPlaying || userActive} keepMounted>
           <div className={styles.playerOverlay}>
             <h1 id="trailer-modal-title" className={styles.title}>
               {title}
diff --git a/packages/ui-react/src/containers/UpdatePaymentMethod/UpdatePaymentMethod.tsx b/packages/ui-react/src/containers/UpdatePaymentMethod/UpdatePaymentMethod.tsx
index 90138ad4c..15e5c9408 100644
--- a/packages/ui-react/src/containers/UpdatePaymentMethod/UpdatePaymentMethod.tsx
+++ b/packages/ui-react/src/containers/UpdatePaymentMethod/UpdatePaymentMethod.tsx
@@ -3,13 +3,13 @@ import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
-import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
 
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 import PaymentMethodForm from '../../components/PaymentMethodForm/PaymentMethodForm';
 import PayPal from '../../components/PayPal/PayPal';
 import AdyenPaymentDetails from '../AdyenPaymentDetails/AdyenPaymentDetails';
+import { modalURLFromWindowLocation } from '../../utils/location';
 
 type Props = {
   onCloseButtonClick: () => void;
@@ -48,10 +48,10 @@ const UpdatePaymentMethod = ({ onCloseButtonClick }: Props) => {
     try {
       setPaymentError(undefined);
 
-      const successUrl = createURL(window.location.href, { u: 'payment-method-success' });
-      const waitingUrl = createURL(window.location.href, { u: 'waiting-for-payment' });
-      const cancelUrl = createURL(window.location.href, { u: 'paypal-cancelled' }); // @todo: This route doesn't exist
-      const errorUrl = createURL(window.location.href, { u: 'paypal-error' }); // @todo: This route doesn't exist
+      const successUrl = modalURLFromWindowLocation('payment-method-success');
+      const waitingUrl = modalURLFromWindowLocation('waiting-for-payment');
+      const cancelUrl = modalURLFromWindowLocation('payment-cancelled');
+      const errorUrl = modalURLFromWindowLocation('payment-error');
 
       const response = await checkoutController.updatePayPalPaymentMethod(
         successUrl,
diff --git a/packages/ui-react/src/modules/createInjectableComponent.tsx b/packages/ui-react/src/modules/createInjectableComponent.tsx
index f636a1bab..f8ff1a1b6 100644
--- a/packages/ui-react/src/modules/createInjectableComponent.tsx
+++ b/packages/ui-react/src/modules/createInjectableComponent.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 import { container } from './container';
 
diff --git a/packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap b/packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap
index 4bdf0665d..ab576efc0 100644
--- a/packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap
+++ b/packages/ui-react/src/pages/Home/__snapshots__/Home.test.tsx.snap
@@ -34,8 +34,6 @@ exports[`Home Component tests > Home test 1`] = `
             >
               <li
                 aria-hidden="false"
-                aria-posinset="1"
-                aria-setsize="2"
                 class=""
                 style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
               >
@@ -76,8 +74,6 @@ exports[`Home Component tests > Home test 1`] = `
               </li>
               <li
                 aria-hidden="false"
-                aria-posinset="2"
-                aria-setsize="2"
                 class=""
                 style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
               >
@@ -141,8 +137,6 @@ exports[`Home Component tests > Home test 1`] = `
             >
               <li
                 aria-hidden="false"
-                aria-posinset="1"
-                aria-setsize="2"
                 class=""
                 style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
               >
@@ -183,8 +177,6 @@ exports[`Home Component tests > Home test 1`] = `
               </li>
               <li
                 aria-hidden="false"
-                aria-posinset="2"
-                aria-setsize="2"
                 class=""
                 style="width: 20%; padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
               >
diff --git a/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx b/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx
index fb5dec05e..03bff477b 100644
--- a/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx
+++ b/packages/ui-react/src/pages/LegacySeries/LegacySeries.tsx
@@ -7,7 +7,8 @@ import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useWatchHistoryStore } from '@jwp/ott-common/src/stores/WatchHistoryStore';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import { formatPlaylistMetaString, formatSeriesMetaString, formatVideoMetaString } from '@jwp/ott-common/src/utils/formatting';
+import { createPlaylistMetadata, createVideoMetadata } from '@jwp/ott-common/src/utils/metadata';
+import { formatSeriesMetaString } from '@jwp/ott-common/src/utils/formatting';
 import { legacySeriesURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import useEntitlement from '@jwp/ott-hooks-react/src/useEntitlement';
 import useMedia from '@jwp/ott-hooks-react/src/useMedia';
@@ -27,6 +28,7 @@ import FavoriteButton from '../../containers/FavoriteButton/FavoriteButton';
 import Button from '../../components/Button/Button';
 import Loading from '../Loading/Loading';
 import Icon from '../../components/Icon/Icon';
+import VideoMetaData from '../../components/VideoMetaData/VideoMetaData';
 
 import { filterSeries, generateLegacyEpisodeJSONLD, getEpisodesInSeason, getFiltersFromSeries, getNextItem } from './utils';
 
@@ -92,6 +94,7 @@ const LegacySeries = () => {
   // Effects
   useEffect(() => {
     (document.scrollingElement || document.body).scroll({ top: 0 });
+    (document.querySelector('#video-details button') as HTMLElement)?.focus();
   }, [episode]);
 
   useEffect(() => {
@@ -114,9 +117,11 @@ const LegacySeries = () => {
   const canonicalUrl = `${window.location.origin}${legacySeriesURL({ episodeId: episode?.mediaid, seriesId })}`;
   const backgroundImage = (selectedItem.backgroundImage as string) || undefined;
 
-  const primaryMetadata = episode
-    ? formatVideoMetaString(episode, t('video:total_episodes', { count: seriesPlaylist?.playlist?.length }))
-    : formatPlaylistMetaString(seriesPlaylist, t('video:total_episodes', { count: seriesPlaylist?.playlist?.length }));
+  const primaryMetadata = episode ? (
+    <VideoMetaData attributes={createVideoMetadata(episode, t('video:total_episodes', { count: seriesPlaylist?.playlist?.length }))} />
+  ) : (
+    <VideoMetaData attributes={createPlaylistMetadata(seriesPlaylist, t('video:total_episodes', { count: seriesPlaylist?.playlist?.length }))} />
+  );
   const secondaryMetadata = episodeMetadata && episode && (
     <>
       <strong>{formatSeriesMetaString(episodeMetadata.seasonNumber, episodeMetadata.episodeNumber)}</strong> - {episode.title}
@@ -128,6 +133,7 @@ const LegacySeries = () => {
   const shareButton = <ShareButton title={selectedItem?.title} description={pageDescription} url={canonicalUrl} />;
   const startWatchingButton = (
     <StartWatchingButton
+      key={episodeId} // necessary to fix autofocus on TalkBack
       item={episode || firstEpisode}
       playUrl={legacySeriesURL({ episodeId: episode?.mediaid || firstEpisode?.mediaid, seriesId, play: true, playlistId: feedId })}
     />
diff --git a/packages/ui-react/src/pages/Loading/Loading.module.scss b/packages/ui-react/src/pages/Loading/Loading.module.scss
index e5b702655..9a4e274c9 100644
--- a/packages/ui-react/src/pages/Loading/Loading.module.scss
+++ b/packages/ui-react/src/pages/Loading/Loading.module.scss
@@ -2,5 +2,5 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  height: 100dvh;
 }
diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx
index ed4cb7086..d6da6c8f2 100644
--- a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaEvent/MediaEvent.tsx
@@ -7,7 +7,7 @@ import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { MediaStatus } from '@jwp/ott-common/src/utils/liveEvent';
-import { formatLiveEventMetaString } from '@jwp/ott-common/src/utils/formatting';
+import { createLiveEventMetadata } from '@jwp/ott-common/src/utils/metadata';
 import { mediaURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { generateMovieJSONLD } from '@jwp/ott-common/src/utils/structuredData';
 import useMedia from '@jwp/ott-hooks-react/src/useMedia';
@@ -28,6 +28,7 @@ import FavoriteButton from '../../../../containers/FavoriteButton/FavoriteButton
 import Button from '../../../../components/Button/Button';
 import InlinePlayer from '../../../../containers/InlinePlayer/InlinePlayer';
 import StatusIcon from '../../../../components/StatusIcon/StatusIcon';
+import VideoMetaData from '../../../../components/VideoMetaData/VideoMetaData';
 import Icon from '../../../../components/Icon/Icon';
 
 const MediaEvent: ScreenComponent<PlaylistItem> = ({ data: media, isLoading }) => {
@@ -83,6 +84,7 @@ const MediaEvent: ScreenComponent<PlaylistItem> = ({ data: media, isLoading }) =
   // Effects
   useEffect(() => {
     (document.scrollingElement || document.body).scroll({ top: 0 });
+    (document.querySelector('#video-details button') as HTMLElement)?.focus();
   }, [id]);
 
   // UI
@@ -92,12 +94,19 @@ const MediaEvent: ScreenComponent<PlaylistItem> = ({ data: media, isLoading }) =
   const primaryMetadata = (
     <>
       <StatusIcon mediaStatus={media.mediaStatus} />
-      {formatLiveEventMetaString(media, i18n.language)}
+      <VideoMetaData attributes={createLiveEventMetadata(media, i18n.language)} />
     </>
   );
 
   const shareButton = <ShareButton title={media.title} description={media.description} url={canonicalUrl} />;
-  const startWatchingButton = <StartWatchingButton item={media} playUrl={mediaURL({ media, playlistId, play: true })} disabled={!liveEvent.isPlayable} />;
+  const startWatchingButton = (
+    <StartWatchingButton
+      key={id} // necessary to fix autofocus on TalkBack
+      item={media}
+      playUrl={mediaURL({ media, playlistId, play: true })}
+      disabled={!liveEvent.isPlayable}
+    />
+  );
 
   const favoriteButton = isFavoritesEnabled && <FavoriteButton item={media} />;
   const trailerButton = (!!trailerItem || isTrailerLoading) && (
diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaHub/MediaHub.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaHub/MediaHub.tsx
index d5bb98735..d685454eb 100644
--- a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaHub/MediaHub.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaHub/MediaHub.tsx
@@ -19,6 +19,7 @@ const MediaHub: ScreenComponent<PlaylistItem> = ({ data }) => {
   // Effects
   useEffect(() => {
     (document.scrollingElement || document.body).scroll({ top: 0 });
+    (document.querySelector('#video-details button') as HTMLElement)?.focus();
   }, [data]);
 
   return (
diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx
index b24535841..dd3d5df03 100644
--- a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaMovie/MediaMovie.tsx
@@ -6,7 +6,7 @@ import { shallow } from '@jwp/ott-common/src/utils/compare';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import { formatVideoMetaString } from '@jwp/ott-common/src/utils/formatting';
+import { createVideoMetadata } from '@jwp/ott-common/src/utils/metadata';
 import { mediaURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { generateMovieJSONLD } from '@jwp/ott-common/src/utils/structuredData';
 import useMedia from '@jwp/ott-hooks-react/src/useMedia';
@@ -26,6 +26,7 @@ import FavoriteButton from '../../../../containers/FavoriteButton/FavoriteButton
 import Button from '../../../../components/Button/Button';
 import InlinePlayer from '../../../../containers/InlinePlayer/InlinePlayer';
 import Icon from '../../../../components/Icon/Icon';
+import VideoMetaData from '../../../../components/VideoMetaData/VideoMetaData';
 
 const MediaMovie: ScreenComponent<PlaylistItem> = ({ data, isLoading }) => {
   const { t } = useTranslation('video');
@@ -70,18 +71,24 @@ const MediaMovie: ScreenComponent<PlaylistItem> = ({ data, isLoading }) => {
     return nextItem && navigate(mediaURL({ media: nextItem, playlistId: features?.recommendationsPlaylist, play: true }));
   }, [id, playlist, navigate, features?.recommendationsPlaylist]);
 
-  // Effects
   useEffect(() => {
     (document.scrollingElement || document.body).scroll({ top: 0 });
+    (document.querySelector('#video-details button') as HTMLElement)?.focus();
   }, [id]);
 
   // UI
   const pageTitle = `${data.title} - ${siteName}`;
   const canonicalUrl = data ? `${window.location.origin}${mediaURL({ media: data })}` : window.location.href;
 
-  const primaryMetadata = formatVideoMetaString(data);
+  const primaryMetadata = <VideoMetaData attributes={createVideoMetadata(data)} />;
   const shareButton = <ShareButton title={data.title} description={data.description} url={canonicalUrl} />;
-  const startWatchingButton = <StartWatchingButton item={data} playUrl={mediaURL({ media: data, playlistId: feedId, play: true })} />;
+  const startWatchingButton = (
+    <StartWatchingButton
+      key={id} // necessary to fix autofocus on TalkBack
+      item={data}
+      playUrl={mediaURL({ media: data, playlistId: feedId, play: true })}
+    />
+  );
 
   const favoriteButton = isFavoritesEnabled && <FavoriteButton item={data} />;
   const trailerButton = (!!trailerItem || isTrailerLoading) && (
diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx
index e95a91a85..46beef251 100644
--- a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaSeries/MediaSeries.tsx
@@ -10,7 +10,8 @@ import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { generateEpisodeJSONLD } from '@jwp/ott-common/src/utils/structuredData';
 import { getEpisodesInSeason, getFiltersFromSeries } from '@jwp/ott-common/src/utils/series';
-import { formatSeriesMetaString, formatVideoMetaString } from '@jwp/ott-common/src/utils/formatting';
+import { createVideoMetadata } from '@jwp/ott-common/src/utils/metadata';
+import { formatSeriesMetaString } from '@jwp/ott-common/src/utils/formatting';
 import { buildLegacySeriesUrlFromMediaItem, mediaURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { VideoProgressMinMax } from '@jwp/ott-common/src/constants';
 import useEntitlement from '@jwp/ott-hooks-react/src/useEntitlement';
@@ -34,6 +35,7 @@ import FavoriteButton from '../../../../containers/FavoriteButton/FavoriteButton
 import Button from '../../../../components/Button/Button';
 import Loading from '../../../Loading/Loading';
 import Icon from '../../../../components/Icon/Icon';
+import VideoMetaData from '../../../../components/VideoMetaData/VideoMetaData';
 import { createURLFromLocation } from '../../../../utils/location';
 
 const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
@@ -134,6 +136,7 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
   // Effects
   useEffect(() => {
     (document.scrollingElement || document.body).scroll({ top: 0 });
+    (document.querySelector('#video-details button') as HTMLElement)?.focus();
   }, [episode]);
 
   useEffect(() => {
@@ -162,13 +165,14 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
   const startWatchingButton = useMemo(
     () => (
       <StartWatchingButton
+        key={episodeId} // necessary to fix autofocus on TalkBack
         item={episode || firstEpisode}
         onClick={() => {
           setSearchParams({ ...searchParams, e: (episode || firstEpisode).mediaid, r: feedId || '', play: '1' }, { replace: true });
         }}
       />
     ),
-    [episode, firstEpisode, feedId, searchParams, setSearchParams],
+    [episodeId, episode, firstEpisode, setSearchParams, searchParams, feedId],
   );
 
   // UI
@@ -188,7 +192,7 @@ const MediaSeries: ScreenComponent<PlaylistItem> = ({ data: seriesMedia }) => {
   const pageTitle = `${selectedItem.title} - ${siteName}`;
   const canonicalUrl = `${window.location.origin}${mediaURL({ media: seriesMedia, episodeId: episode?.mediaid })}`;
 
-  const primaryMetadata = formatVideoMetaString(selectedItem, t('video:total_episodes', { count: series.episode_count }));
+  const primaryMetadata = <VideoMetaData attributes={createVideoMetadata(selectedItem, t('video:total_episodes', { count: series.episode_count }))} />;
   const secondaryMetadata = episodeMetadata && episode && (
     <>
       <strong>{formatSeriesMetaString(episodeMetadata.seasonNumber, episodeMetadata.episodeNumber)}</strong> - {episode.title}
diff --git a/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx b/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx
index 3908f79be..b129f7519 100644
--- a/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/playlistScreens/PlaylistLiveChannels/PlaylistLiveChannels.tsx
@@ -24,6 +24,7 @@ import Tag from '../../../../components/Tag/Tag';
 import Loading from '../../../Loading/Loading';
 import VideoDetails from '../../../../components/VideoDetails/VideoDetails';
 import Icon from '../../../../components/Icon/Icon';
+import VideoMetaData from '../../../../components/VideoMetaData/VideoMetaData';
 
 import styles from './PlaylistLiveChannels.module.scss';
 
@@ -87,15 +88,14 @@ const PlaylistLiveChannels: ScreenComponent<Playlist> = ({ data: { feedid, playl
     const endTime = new Date(program.endTime);
     const durationInSeconds = differenceInSeconds(endTime, startTime);
     const duration = formatDurationTag(durationInSeconds);
+    const attributes = [t('on_channel', { name: channel.title }), duration].filter(Boolean);
 
     return (
       <>
         <Tag className={styles.tag} isLive={isLive}>
           {isLive ? t('common:live') : `${format(startTime, 'p')} - ${format(endTime, 'p')}`}
         </Tag>
-        {t('on_channel', { name: channel.title })}
-        {' • '}
-        {duration}
+        <VideoMetaData attributes={attributes} />
       </>
     );
   }, [channel, isLive, program, t]);
diff --git a/packages/ui-react/src/pages/Search/Search.tsx b/packages/ui-react/src/pages/Search/Search.tsx
index 4d757ae07..81366cb42 100644
--- a/packages/ui-react/src/pages/Search/Search.tsx
+++ b/packages/ui-react/src/pages/Search/Search.tsx
@@ -11,6 +11,7 @@ import { mediaURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import useFirstRender from '@jwp/ott-hooks-react/src/useFirstRender';
 import useSearchQueryUpdater from '@jwp/ott-ui-react/src/hooks/useSearchQueryUpdater';
 import usePlaylist from '@jwp/ott-hooks-react/src/usePlaylist';
+import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
 
 import CardGrid from '../../components/CardGrid/CardGrid';
 import ErrorPage from '../../components/ErrorPage/ErrorPage';
@@ -21,6 +22,7 @@ const Search = () => {
   const { t } = useTranslation('search');
   const { config, accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
   const { siteName, features } = config;
+  const headingId = useOpaqueId('search_heading');
 
   const firstRender = useFirstRender();
   const searchQuery = useUIStore((state) => state.searchQuery);
@@ -88,9 +90,17 @@ const Search = () => {
         </title>
       </Helmet>
       <header className={styles.header}>
-        <h2>{t('heading')}</h2>
+        <h2 id={headingId}>{t('heading')}</h2>
       </header>
-      <CardGrid getUrl={getURL} playlist={playlist} isLoading={firstRender} accessModel={accessModel} isLoggedIn={!!user} hasSubscription={!!subscription} />
+      <CardGrid
+        aria-labelledby={headingId}
+        getUrl={getURL}
+        playlist={playlist}
+        isLoading={firstRender}
+        accessModel={accessModel}
+        isLoggedIn={!!user}
+        hasSubscription={!!subscription}
+      />
     </div>
   );
 };
diff --git a/packages/ui-react/src/pages/User/User.module.scss b/packages/ui-react/src/pages/User/User.module.scss
index e7aa1fe42..e98f6e1c9 100644
--- a/packages/ui-react/src/pages/User/User.module.scss
+++ b/packages/ui-react/src/pages/User/User.module.scss
@@ -38,7 +38,8 @@
 }
 
 .button span {
-  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .logoutLi {
@@ -78,7 +79,8 @@
   padding-bottom: variables.$base-spacing;
   border-bottom: theme.$panel-header-border-bottom;
 
-  > h2 {
+  > h2,
+  > h3 {
     font-weight: var(--body-font-weight-bold);
     font-size: 24px;
     line-height: 26px;
diff --git a/packages/ui-react/src/pages/User/User.tsx b/packages/ui-react/src/pages/User/User.tsx
index dc8170ec5..97cbfd14d 100644
--- a/packages/ui-react/src/pages/User/User.tsx
+++ b/packages/ui-react/src/pages/User/User.tsx
@@ -7,7 +7,6 @@ import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import FavoritesController from '@jwp/ott-common/src/controllers/FavoritesController';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
-import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
 import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
 import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
@@ -39,7 +38,6 @@ import styles from './User.module.scss';
 const User = (): JSX.Element => {
   const favoritesController = getModule(FavoritesController);
   const accountController = getModule(AccountController);
-  const checkoutController = getModule(CheckoutController);
 
   const { accessModel, favoritesList } = useConfigStore(
     (s) => ({
@@ -56,7 +54,7 @@ const User = (): JSX.Element => {
 
   const isLargeScreen = breakpoint > Breakpoint.md;
   const { user: customer, subscription, loading } = useAccountStore();
-  const { canUpdateEmail, canRenewSubscription } = accountController.getFeatures();
+  const { canUpdateEmail } = accountController.getFeatures();
   const { profile } = useProfileStore();
   const favorites = useFavoritesStore((state) => state.getPlaylist());
 
@@ -69,12 +67,6 @@ const User = (): JSX.Element => {
     await accountController.logout();
   }, [accountController]);
 
-  useEffect(() => {
-    if (accessModel !== ACCESS_MODEL.AVOD && canRenewSubscription) {
-      checkoutController.getSubscriptionSwitches();
-    }
-  }, [accessModel, checkoutController, canRenewSubscription]);
-
   useEffect(() => {
     if (!loading && !customer) {
       navigate('/', { replace: true });
diff --git a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
index 5a601f0a0..033dbb54c 100644
--- a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
+++ b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`User Component tests > Account Page 1`] = `
           <li>
             <a
               aria-current="page"
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296 "
+              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296"
               href="/u/my-account"
             >
               <div
@@ -127,7 +127,7 @@ exports[`User Component tests > Account Page 1`] = `
             <input
               aria-describedby="helper_text_1235_firstname"
               aria-invalid="false"
-              aria-required="false"
+              autocomplete="given-name"
               class="_input_e16c1b"
               id="text-field_1235_firstname"
               lang="en"
@@ -149,7 +149,7 @@ exports[`User Component tests > Account Page 1`] = `
             <input
               aria-describedby="helper_text_1235_lastname"
               aria-invalid="false"
-              aria-required="false"
+              autocomplete="family-name"
               class="_input_e16c1b"
               id="text-field_1235_lastname"
               lang="en"
@@ -202,7 +202,7 @@ exports[`User Component tests > Account Page 1`] = `
             <input
               aria-describedby="helper_text_1235_email"
               aria-invalid="false"
-              aria-required="true"
+              autocomplete="email"
               class="_input_e16c1b"
               id="text-field_1235_email"
               name="email"
@@ -312,7 +312,7 @@ exports[`User Component tests > Favorites Page 1`] = `
           <li>
             <a
               aria-current="page"
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296 "
+              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296"
               href="/u/favorites"
             >
               <div
@@ -591,7 +591,7 @@ exports[`User Component tests > Payments Page 1`] = `
           <li>
             <a
               aria-current="page"
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296 "
+              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296"
               href="/u/payments"
             >
               <div
@@ -724,7 +724,7 @@ exports[`User Component tests > Payments Page 1`] = `
               aria-describedby="helper_text_1235_cardnumber"
               aria-invalid="false"
               aria-label="user:payment.card_number_hidden"
-              aria-required="false"
+              autocomplete="cc-number"
               class="_input_e16c1b"
               id="text-field_1235_cardnumber"
               name="cardNumber"
@@ -748,7 +748,7 @@ exports[`User Component tests > Payments Page 1`] = `
               <input
                 aria-describedby="helper_text_1235_cardexpiry"
                 aria-invalid="false"
-                aria-required="false"
+                autocomplete="cc-exp"
                 class="_input_e16c1b"
                 id="text-field_1235_cardexpiry"
                 name="cardExpiry"
@@ -770,7 +770,7 @@ exports[`User Component tests > Payments Page 1`] = `
                 aria-describedby="helper_text_1235_cardsecuritycode"
                 aria-invalid="false"
                 aria-label="user:payment.security_code_hidden"
-                aria-required="false"
+                autocomplete="cc-csc"
                 class="_input_e16c1b"
                 id="text-field_1235_cardsecuritycode"
                 name="cardSecurityCode"
@@ -823,7 +823,7 @@ exports[`User Component tests > Payments Page 1`] = `
             class="_transactionDetails_c57ff5"
           >
             <div
-              class="_transationPrice_c57ff5"
+              class="_transactionPrice_c57ff5"
             >
               user:payment.price_paid_with
             </div>
@@ -849,7 +849,7 @@ exports[`User Component tests > Payments Page 1`] = `
             class="_transactionDetails_c57ff5"
           >
             <div
-              class="_transationPrice_c57ff5"
+              class="_transactionPrice_c57ff5"
             >
               user:payment.price_paid_with
             </div>
diff --git a/packages/ui-react/src/styles/_variables.scss b/packages/ui-react/src/styles/_variables.scss
index 64cada840..a15886c11 100644
--- a/packages/ui-react/src/styles/_variables.scss
+++ b/packages/ui-react/src/styles/_variables.scss
@@ -35,6 +35,7 @@ $body-font-size: 16px !default;
 $base-spacing: 16px !default;
 $base-spacing-mobile: 8px !default;
 $base-spacing-heading: 20px !default;
+$base-line-height: 1.5em !default;
 
 $container-width-mobile: 100% !default;
 $container-width-tablet: 685px !default;
diff --git a/packages/ui-react/src/utils/location.test.ts b/packages/ui-react/src/utils/location.test.ts
index 95d77ee61..443c78366 100644
--- a/packages/ui-react/src/utils/location.test.ts
+++ b/packages/ui-react/src/utils/location.test.ts
@@ -1,6 +1,6 @@
 import type { Location } from 'react-router-dom';
 
-import { createURLFromLocation, modalURLFromLocation } from './location';
+import { createURLFromLocation, modalURLFromLocation, modalURLFromWindowLocation } from './location';
 
 describe('url from location', () => {
   test('valid url from a location', async () => {
@@ -115,4 +115,17 @@ describe('modal urls from location', () => {
 
     expect(url).toEqual('/test?test-param=1&u=login&foo=bar');
   });
+
+  describe('modal urls from window.location', () => {
+    test('valid modal url from window.location', async () => {
+      const url = modalURLFromWindowLocation('login');
+
+      expect(url).toEqual('http://localhost:3000/?u=login');
+    });
+    test('valid modal url from window.location with query params', async () => {
+      const url = modalURLFromWindowLocation('waiting-for-payment', { offerId: '123' });
+
+      expect(url).toEqual('http://localhost:3000/?u=waiting-for-payment&offerId=123');
+    });
+  });
 });
diff --git a/packages/ui-react/src/utils/location.ts b/packages/ui-react/src/utils/location.ts
index 260694cd5..b40718100 100644
--- a/packages/ui-react/src/utils/location.ts
+++ b/packages/ui-react/src/utils/location.ts
@@ -10,3 +10,8 @@ export const createURLFromLocation = (location: Location, queryParams: QueryPara
 export const modalURLFromLocation = (location: Location, u: keyof AccountModals | null, queryParams?: QueryParamsArg) => {
   return createURL(`${location.pathname}${location.search || ''}`, { u, ...queryParams });
 };
+
+// Create a full modal url including hostname, mostly for external use (e.g paypal successUrl)
+export const modalURLFromWindowLocation = (u: keyof AccountModals, queryParams?: QueryParamsArg) => {
+  return createURL(window.location.href, { u, ...queryParams });
+};
diff --git a/platforms/web/.env b/platforms/web/.env
index 9093ba1ec..eb0bc9bd0 100644
--- a/platforms/web/.env
+++ b/platforms/web/.env
@@ -1,12 +1,12 @@
 APP_API_BASE_URL=https://cdn.jwplayer.com
 APP_PLAYER_ID=M4qoGvUk
 
-
 ### Web-only env vars (not sent to common/src/env configureEnv())
-APP_FOOTER_TEXT=\u00a9 JW Player | [jwplayer.com](https://www.jwplayer.com/)
+APP_VERSION=$npm_package_version
+APP_FOOTER_TEXT=\u00a9 JW Player | [jwplayer.com](https://www.jwplayer.com/) | v${APP_VERSION}
 
 # the default language that the app should load when the language couldn't be detected
 APP_DEFAULT_LANGUAGE=en
 
 # a comma separated list of languages that are enabled (this only works for languages that are enabled in the app)
-APP_ENABLED_LANGUAGES=en,es
\ No newline at end of file
+APP_ENABLED_LANGUAGES=en,es
diff --git a/platforms/web/.eslintrc.cjs b/platforms/web/.eslintrc.cjs
new file mode 100644
index 000000000..7d249c9fc
--- /dev/null
+++ b/platforms/web/.eslintrc.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['jwp/react'],
+  env: {
+    node: true, // Enables recognition of Node.js global variables and scoping rules
+  },
+};
diff --git a/platforms/web/.eslintrc.js b/platforms/web/.eslintrc.js
deleted file mode 100644
index 641a9bf64..000000000
--- a/platforms/web/.eslintrc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['jwp/react'],
-};
diff --git a/platforms/web/index.html b/platforms/web/index.html
index 47456259a..80c86865f 100644
--- a/platforms/web/index.html
+++ b/platforms/web/index.html
@@ -12,25 +12,11 @@
   <meta property="og:image" content="/images/icons/app-icon.png" data-react-helmet="true">
 
   <link rel="icon" href="/images/icons/favicon.ico" type="image/x-icon" sizes="any">
-  <link rel="icon" type="image/png" sizes="196x196" href="/images/icons/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="160x160" href="/images/icons/favicon-64x64.png">
-  <link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png">
-  <link rel="icon" type="image/png" sizes="64x64" href="/images/icons/favicon-64x64.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png">
-  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-180x180.png">
-  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-152x152.png">
-  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-144x144.png">
-  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-120x120.png">
-  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-114x114.png">
-  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-76x76.png">
-  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-72x72.png">
-  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-60x60.png">
+  <%- favicons %>
 
   <!-- Pre-connect JW Player origins -->
   <link rel="preconnect" href="https://content.jwplatform.com"/>
   <link rel="preconnect" href="https://cdn.jwplayer.com"/>
-  <link rel="preconnect" href="https://jwpapp.com"/>
 
   <!-- Safari web app -->
   <meta name="apple-mobile-web-app-capable" content="yes">
diff --git a/platforms/web/lighthouserc.js b/platforms/web/lighthouserc.cjs
similarity index 100%
rename from platforms/web/lighthouserc.js
rename to platforms/web/lighthouserc.cjs
diff --git a/platforms/web/package.json b/platforms/web/package.json
index 80b28d68f..c32f17148 100644
--- a/platforms/web/package.json
+++ b/platforms/web/package.json
@@ -1,29 +1,29 @@
 {
   "name": "@jwp/ott-web",
   "version": "4.30.0",
-  "main": "index.js",
-  "author": "JW Player",
   "private": true,
+  "author": "JW Player",
+  "main": "index.js",
   "engines": {
     "node": ">=18.13.0"
   },
   "scripts": {
-    "start": "vite",
-    "start:test": "vite build --mode test && vite preview --port 8080",
     "build": "vite build --mode ${MODE:=prod} && sh scripts/compressIni.sh build/public/.webapp.ini",
+    "codecept-serve:desktop": "yarn codecept:desktop ; yarn serve-report:desktop",
+    "codecept-serve:mobile": "yarn codecept:mobile ; yarn serve-report:mobile",
+    "codecept:desktop": "cd test-e2e && rm -rf \"./output/desktop\" && codeceptjs run-workers --suites ${WORKER_COUNT:=8} --config ./codecept.desktop.cjs",
+    "codecept:mobile": "cd test-e2e && rm -rf \"./output/mobile\" && codeceptjs run-workers --suites ${WORKER_COUNT:=8} --config ./codecept.mobile.cjs",
+    "generate-pwa-assets": "pwa-assets-generator",
     "lint:ts": "tsc --pretty --noEmit -p ./ && tsc --pretty --noEmit -p ./test-e2e",
+    "load-content-types": "npx ts-node ./scripts/content-types/load-content-types",
+    "serve-report:desktop": "cd test-e2e && allure serve \"./output/desktop\"",
+    "serve-report:mobile": "cd test-e2e && allure serve \"./output/mobile\"",
+    "start": "vite",
+    "start:test": "vite build --mode test && vite preview --port 8080",
     "test": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run",
-    "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest",
     "test-coverage": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run --coverage",
     "test-update": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run --update",
-    "codecept:mobile": "cd test-e2e && rm -rf \"./output/mobile\" && codeceptjs run-workers --suites ${WORKER_COUNT:=8} --config ./codecept.mobile.js",
-    "codecept:desktop": "cd test-e2e && rm -rf \"./output/desktop\" && codeceptjs run-workers --suites ${WORKER_COUNT:=8} --config ./codecept.desktop.js",
-    "serve-report:mobile": "cd test-e2e && allure serve \"./output/mobile\"",
-    "serve-report:desktop": "cd test-e2e && allure serve \"./output/desktop\"",
-    "codecept-serve:mobile": "yarn codecept:mobile ; yarn serve-report:mobile",
-    "codecept-serve:desktop": "yarn codecept:desktop ; yarn serve-report:desktop",
-    "load-content-types": "npx ts-node ./scripts/content-types/load-content-types",
-    "generate-pwa-assets": "pwa-assets-generator"
+    "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest"
   },
   "dependencies": {
     "@codeceptjs/allure-legacy": "^1.0.2",
@@ -70,17 +70,22 @@
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.0",
     "vi-fetch": "^0.8.0",
-    "vite": "^4.4.8",
+    "vite": "^5.1.5",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-html": "^3.2.0",
-    "vite-plugin-pwa": "^0.14.0",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-pwa": "^0.19.2",
     "vite-plugin-static-copy": "^0.17.0",
-    "vite-plugin-stylelint": "^4.3.0",
-    "vite-plugin-svgr": "4.2.0",
-    "vitest": "^0.34.6",
+    "vite-plugin-stylelint": "^5.3.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^1.3.1",
     "workbox-build": "^6.5.4",
     "workbox-window": "^6.5.4"
   },
+  "optionalDependencies": {
+    "gh-pages": "^3.2.3",
+    "lighthouse": "^9.6.7",
+    "sharp": "^0.33.2"
+  },
   "peerDependencies": {
     "@jwp/ott-common": "*",
     "@jwp/ott-hooks-react": "*",
@@ -89,10 +94,5 @@
     "@jwp/ott-ui-react": "*",
     "eslint-config-jwp": "*",
     "postcss-config-jwp": "*"
-  },
-  "optionalDependencies": {
-    "gh-pages": "^3.2.3",
-    "lighthouse": "^9.6.7",
-    "sharp": "^0.33.2"
   }
 }
diff --git a/platforms/web/public/locales/en/account.json b/platforms/web/public/locales/en/account.json
index d7847ab72..af22d14b7 100644
--- a/platforms/web/public/locales/en/account.json
+++ b/platforms/web/public/locales/en/account.json
@@ -8,6 +8,7 @@
   },
   "checkout": {
     "applicable_tax": "Applicable tax ({{taxRate}}%)",
+    "card_details_updated": "Your card details have been updated",
     "card_holder_name": "Cardholder name",
     "close": "Close",
     "continue": "Continue",
@@ -25,15 +26,14 @@
     "invalid_card_expiry": "Invalid card expiry",
     "invalid_card_number": "Invalid card number",
     "invalid_cvc_number": "Invalid CVC number",
-    "card_details_updated": "Your card details have been updated",
     "monthly": "Monthly subscription",
     "no_payment_needed": "No payment needed",
     "payment_cancelled": "Payment cancelled",
     "payment_cancelled_message": "You have cancelled the payment",
     "payment_error": "Payment failed",
-    "payment_success": "Payment was successfully sent",
     "payment_method": "Payment method",
     "payment_method_fee": "Payment method fee",
+    "payment_success": "Payment was successfully sent",
     "paypal": "PayPal",
     "paypal_instructions": "Clicking 'continue' will bring you to the PayPal site.",
     "periods_trial_one": "You will be charged after one {{period}}.",
@@ -67,10 +67,8 @@
     "monthly": "Monthly",
     "monthly_subscription": "Monthly subscription",
     "no_pricing_available": "There are no pricing options available at the moment.",
-    "offer_not_found": "Offer not found, please try reloading the page",
     "one_time_only": "This video",
     "subscription": "Subscription",
-    "subscription_update_success": "Your subscription has been updated",
     "title": "Choose plan",
     "tvod_access_one": "{{count}} {{period}} access",
     "tvod_access_other": "{{count}} {{period}} access",
@@ -85,12 +83,11 @@
     "field_required": "This field is required, please fill in a valid {{field}}",
     "forgot_password": "Forgot password?",
     "google": "Sign in with Google",
-    "hide_password": "Hide password",
     "not_registered": "New to {{siteName}}?",
     "password": "Password",
     "sign_in": "Sign in",
-    "sign_up": "Sign up",
     "sign_in_success": "Sign in successful",
+    "sign_up": "Sign up",
     "simultaneous_logins": "The maximum number of active sessions for this account has been reached. Signing in here will sign you out from another session or device.",
     "twitter": "Sign in with Twitter",
     "unexpected_error": "An unexpected error occurred.",
@@ -139,20 +136,13 @@
   "registration": {
     "already_account": "Already have an account?",
     "consent_required": "This field is required, please fill in {{field}} to continue.",
+    "consents_error": "Please accept all required consents to continue.",
     "continue": "Continue",
     "email": "Email",
     "email_updates": "Yes, I want to receive {{siteName}} updates by email.",
     "failed_to_create": "An error occurred. Please try again later.",
     "field_is_not_valid_email": "Please re-enter your email details",
     "field_required": "This field is required",
-    "field_select_required": "Please select an option",
-    "field_input_required": "Please fill in this field",
-    "field_radio_required": "Please select an option",
-    "field_country_required": "Please select a country",
-    "field_us_state_required": "Please select a state",
-    "field_datepicker_required": "Please select a date",
-    "field_checkbox_required": "Please check this box",
-    "hide_password": "Hide password",
     "invalid_password": "Use a minimum of 8 characters (case sensitive) with at least one number",
     "password": "Password",
     "password_helper_text": "Use a minimum of 8 characters (case sensitive) with at least one number",
@@ -163,9 +153,9 @@
       "very_strong": "Very strong",
       "weak": "Weak"
     },
+    "password_strength_prefix": "Password strength",
     "sign_up": "Sign up",
     "success": "Registration successful",
-    "account_delete_success": "Your account has been deleted",
     "terms_and_conditions": "Terms and Conditions",
     "terms_consent": "I accept the {{termsLink}}.",
     "terms_consent_jwplayer": "I accept the {{termsLink}} of JW Player.",
@@ -176,9 +166,9 @@
     "explanation": "By clicking the button below you can renew your plan.",
     "next_billing_date_on": "Next billing date will be {{date}}",
     "no_thanks": "No, thanks",
-    "success": "Your subscription has been renewed",
     "renew_subscription": "Renew subscription",
     "renew_your_subscription": "Renew your subscription",
+    "success": "Your subscription has been renewed",
     "unknown_error_occurred": "An unknown error occurred!"
   },
   "reset": {
@@ -188,7 +178,6 @@
     "email_me": "Email me",
     "forgot_password": "Forgot password",
     "forgot_text": "We will send you an email with instructions on how to reset your password.",
-    "hide_password": "Hide password",
     "invalid_link": "Invalid link",
     "invalid_password": "Invalid password",
     "invalid_reset_link": "The reset password link is invalid or has expired. Please try resetting your password again.",
@@ -202,9 +191,9 @@
     "password": "Password",
     "password_helper_text": "Use a minimum of 8 characters (case sensitive) with at least one number",
     "password_reset": "Password reset",
+    "password_reset_success": "Password reset successful",
     "password_reset_text": "",
     "password_strength": "Although your password meets the criteria for a strong password, it includes elements that are not advisable, such as prohibited phrases or repeated words. Please modify it to ensure account safety.",
-    "password_reset_success": "Password reset successful",
     "passwords_do_not_match": "Passwords do not match",
     "repeat_new_password": "Repeat new password",
     "reset_password": "Edit Password",
diff --git a/platforms/web/public/locales/en/common.json b/platforms/web/public/locales/en/common.json
index 7ce5d4d44..acc115d5e 100644
--- a/platforms/web/public/locales/en/common.json
+++ b/platforms/web/public/locales/en/common.json
@@ -21,9 +21,12 @@
   "optional": "(Optional)",
   "play_item": "Play {{title}}",
   "scheduled": "Scheduled",
-  "series": "series",
   "sign_in": "Sign in",
   "sign_up": "Sign up",
+  "slide_indicator": "Page {{page}} of {{pages}}",
   "slide_left": "Slide left",
-  "slide_right": "Slide right"
+  "slide_next": "Next slide",
+  "slide_previous": "Previous slide",
+  "slide_right": "Slide right",
+  "videoplayer": "Video player"
 }
diff --git a/platforms/web/public/locales/en/error.json b/platforms/web/public/locales/en/error.json
index 470d99cc6..5711e7d81 100644
--- a/platforms/web/public/locales/en/error.json
+++ b/platforms/web/public/locales/en/error.json
@@ -1,7 +1,10 @@
 {
+  "adyen_order_unknown": "Order is unknown",
   "check_your_config": "There was a problem retrieving the application configuration. Try again later. If the problem persists contact technical support.",
   "check_your_settings": "There was a problem loading the default settings. Try again later. If the problem persists contact technical support.",
   "config_invalid": "Invalid or missing config",
+  "empty_shelves_description": "We apologize, but there is no content available in your region.",
+  "empty_shelves_heading": "No content available",
   "generic_error_description": "Try refreshing this page or come back later.",
   "generic_error_heading": "There was an issue loading the application",
   "learn_more": "Learn more",
@@ -9,9 +12,10 @@
   "notfound_error_heading": "Not found",
   "playlist_not_found": "Playlist not found",
   "settings_invalid": "Invalid or missing settings",
-  "video_not_found": "Video not found",
   "unknown_error": "Unknown error",
-  "adyen_order_unknown": "Order is unknown",
-  "empty_shelves_heading": "No content available",
-  "empty_shelves_description": "We apologize, but there is no content available in your region."
+  "validation_form_error": {
+    "other": "Please correct your mistakes before proceeding.",
+    "required": "Please fill in all required fields before proceeding."
+  },
+  "video_not_found": "Video not found"
 }
diff --git a/platforms/web/public/locales/en/menu.json b/platforms/web/public/locales/en/menu.json
index 2777f33b5..c6713a53e 100644
--- a/platforms/web/public/locales/en/menu.json
+++ b/platforms/web/public/locales/en/menu.json
@@ -1,10 +1,9 @@
 {
   "close_menu": "Close menu",
+  "language_menu": "Open language menu",
   "open_menu": "Open menu",
   "open_user_menu": "Open user menu",
   "profile_icon": "Profile icon",
-  "select_language": "Select language",
-  "language_menu": "Open language menu",
   "sign_in": "Sign in",
   "sign_up": "Sign up",
   "skip_to_content": "Skip to content"
diff --git a/platforms/web/public/locales/en/user.json b/platforms/web/public/locales/en/user.json
index 9b043a5aa..ea8790a6b 100644
--- a/platforms/web/public/locales/en/user.json
+++ b/platforms/web/public/locales/en/user.json
@@ -12,15 +12,17 @@
     "delete_account": {
       "body": "Permanently delete your account and all of your content.",
       "error": "An error occurred while deleting your account. Please try again.",
+      "invalid_credentials": "The submitted password is not valid",
       "modal": {
+        "description": "Enter password to continue",
         "placeholder": "Enter your password",
         "text_cant_be_undone": "Please be aware that this process cannot be undone, so proceed with caution.",
         "text_contacts": "If you have any further questions or concerns, please do not hesitate to contact our support team.",
         "text_data_erasure": "Please note that if you choose to proceed with this process, all of your personal data will be erased from our system. This includes any personal information you provided during the registration process, as well as any location and device information that we gathered during the authentication process. Additionally, all other personal information stored in various parts of our database will be deleted as well. However, please be aware that due to some legislations we are required to keep certain personal data as part of transaction and subscription records.",
         "text_revoked_access": "Once the erasure is complete, all of your active accesses will be revoked, and any active login sessions, including this one, will be terminated. Your account information will no longer be accessible to our staff in any capacity.",
-        "title": "Enter password to continue",
         "warning": "All active subscriptions that were purchased through a web browser will be automatically canceled upon erasure of personal data. However, if you purchased a subscription through iOS, Android, Roku, or Amazon apps, please be aware that it will not be canceled automatically. In this case, you will need to follow the usual subscription cancelation steps for each respective platform to manually cancel the subscription."
       },
+      "success": "Your account has been deleted",
       "title": "Delete account"
     },
     "delete_account_password_warning": {
@@ -31,7 +33,6 @@
     "edit_information": "Edit information",
     "edit_password": "Edit password",
     "email": "Email",
-    "update_success": "Your {{section}} has been successfully updated.",
     "errors": {
       "email_exists": "Email already exists!",
       "email_update_not_supported": "Email update not supported",
@@ -40,14 +41,15 @@
       "invalid_password": "Password incorrect!",
       "last_name_too_long": "Please limit Last Name to 50 characters or fewer.",
       "please_enter_valid_email": "Please enter a valid email address.",
-      "unknown_error": "An unknown error occurred"
+      "unknown_error": "An unknown error occurred",
+      "validation_error": "Please correct your mistakes before proceeding.",
+      "wrong_combination": "Incorrect email/password combination"
     },
     "export_data_body": "Export all of your personal account data to <strong>{{email}}</strong> as an attachment.",
     "export_data_error": "An error occurred while exporting your account data.",
     "export_data_success": "Please check your email.",
     "export_data_title": "Export account data",
     "firstname": "First name",
-    "hide_password": "Hide password",
     "lastname": "Last name",
     "manage_profiles": "Manage profiles",
     "other_registration_details": "Other registration details",
@@ -59,6 +61,7 @@
     "security": "Password",
     "terms_and_tracking": "Legal & Marketing",
     "update_consents": "Update consents",
+    "update_success": "Your {{section}} has been successfully updated.",
     "view_password": "View password",
     "who_is_watching": "Who’s watching?"
   },
@@ -72,7 +75,6 @@
   "login": {
     "field_required": "This field is required, please fill in a valid {{field}}."
   },
-  "name": "Name",
   "nav": {
     "account": "Account",
     "add_profile": "Add new profile",
diff --git a/platforms/web/public/locales/en/video.json b/platforms/web/public/locales/en/video.json
index c01d5750f..aec5d3418 100644
--- a/platforms/web/public/locales/en/video.json
+++ b/platforms/web/public/locales/en/video.json
@@ -1,5 +1,4 @@
 {
-  "add_to_favorites": "Add to favorites",
   "all_seasons": "All seasons",
   "buy": "Buy",
   "buy_to_start_watching": "Buy to start watching!",
@@ -17,7 +16,6 @@
     "geo_blocked_description": "We apologize, but this content is currently unavailable in your region.",
     "geo_blocked_title": "Content unavailable"
   },
-  "remove_from_favorites": "Remove from favorites",
   "season": "season",
   "season_number_filter_template": "Season {{seasonNumber}}",
   "series": "Series",
diff --git a/platforms/web/public/locales/es/account.json b/platforms/web/public/locales/es/account.json
index 9769cd963..996819818 100644
--- a/platforms/web/public/locales/es/account.json
+++ b/platforms/web/public/locales/es/account.json
@@ -8,6 +8,7 @@
   },
   "checkout": {
     "applicable_tax": "Impuesto aplicable ({{taxRate}}%)",
+    "card_details_updated": "Detalles de la tarjeta actualizados",
     "card_holder_name": "Nombre del titular de la tarjeta",
     "close": "Cerrar",
     "continue": "Continuar",
@@ -27,15 +28,14 @@
     "invalid_card_expiry": "Fecha de vencimiento Invalido para la tarjeta",
     "invalid_card_number": "Número de tarjeta inválido",
     "invalid_cvc_number": "Número de CVC inválido",
-    "card_details_updated": "Detalles de la tarjeta actualizados",
     "monthly": "Suscripción mensual",
     "no_payment_needed": "No se necesita pago",
     "payment_cancelled": "Pago cancelado",
     "payment_cancelled_message": "Has cancelado el pago",
     "payment_error": "Error en el pago",
-    "payment_success": "Pago fue enviado con éxito",
     "payment_method": "Método de pago",
     "payment_method_fee": "Tarifa del método de pago",
+    "payment_success": "Pago fue enviado con éxito",
     "paypal": "PayPal",
     "paypal_instructions": "Al hacer clic en 'Continuar', serás redirigido al sitio de PayPal.",
     "periods_trial_one": "Se te cobrará después de un {{period}}.",
@@ -72,10 +72,8 @@
     "monthly": "Mensual",
     "monthly_subscription": "Suscripción mensual",
     "no_pricing_available": "No hay opciones de precios disponibles en este momento.",
-    "offer_not_found": "Oferta no encontrada, por favor intenta volver a cargar la página",
     "one_time_only": "Este video",
     "subscription": "Suscripción",
-    "subscription_update_success": "Suscripción actualizada",
     "title": "Elige un plan",
     "tvod_access_one": "Acceso de {{count}} {{period}}",
     "tvod_access_many": "",
@@ -91,12 +89,11 @@
     "field_required": "Este campo es obligatorio, por favor ingresa un {{field}} válido.",
     "forgot_password": "¿Olvidaste tu contraseña?",
     "google": "Inicia sesión con Google",
-    "hide_password": "Ocultar contraseña",
     "not_registered": "¿Nuevo/a en {{siteName}}?",
     "password": "Contraseña",
     "sign_in": "Iniciar sesión",
-    "sign_up": "Registrarse",
     "sign_in_success": "Has iniciado sesión correctamente.",
+    "sign_up": "Registrarse",
     "simultaneous_logins": "Se ha alcanzado el número máximo de sesiones activas para esta cuenta. Iniciar sesión aquí lo cerrará en otra sesión o dispositivo.",
     "twitter": "Inicia sesión con Twitter",
     "unexpected_error": "Ocurrió un error inesperado.",
@@ -149,20 +146,13 @@
   "registration": {
     "already_account": "¿Ya tienes una cuenta?",
     "consent_required": "Este campo es obligatorio, por favor completa {{field}} para continuar.",
+    "consents_error": "Acepte todos los consentimientos necesarios para continuar.",
     "continue": "Continuar",
     "email": "Correo electrónico",
     "email_updates": "Sí, deseo recibir actualizaciones de {{siteName}} por correo electrónico.",
     "failed_to_create": "Ocurrió un error. Por favor, inténtalo de nuevo más tarde.",
     "field_is_not_valid_email": "Por favor, vuelve a ingresar tus datos de correo electrónico",
     "field_required": "Este campo es obligatorio",
-    "field_select_required": "Por favor, selecciona una opción",
-    "field_input_required": "Por favor, ingresa un valor",
-    "field_radio_required": "Por favor, selecciona una opción",
-    "field_country_required": "Por favor, selecciona un país",
-    "field_us_state_required": "Por favor, selecciona un estado",
-    "field_datepicker_required": "Por favor, selecciona una fecha",
-    "field_checkbox_required": "Por favor, marca la casilla para continuar",
-    "hide_password": "Ocultar contraseña",
     "invalid_password": "Utiliza un mínimo de 8 caracteres (distingue entre mayúsculas y minúsculas) con al menos un número",
     "password": "Contraseña",
     "password_helper_text": "Utiliza un mínimo de 8 caracteres (distingue entre mayúsculas y minúsculas) con al menos un número",
@@ -173,9 +163,9 @@
       "very_strong": "Muy fuerte",
       "weak": "Débil"
     },
+    "password_strength_prefix": "Seguridad de la contraseña",
     "sign_up": "Registrarse",
     "success": "¡Cuenta creada!",
-    "account_delete_success": "Tu cuenta ha sido eliminada",
     "terms_and_conditions": "Términos y condiciones",
     "terms_consent": "Acepto los {{termsLink}}.",
     "terms_consent_jwplayer": "Acepto los {{termsLink}} de JW Player.",
@@ -186,9 +176,9 @@
     "explanation": "Al hacer clic en el botón de abajo, puedes renovar tu plan.",
     "next_billing_date_on": "La próxima fecha de facturación será el {{date}}",
     "no_thanks": "No, gracias",
-    "success": "¡Suscripción renovada!",
     "renew_subscription": "Renovar suscripción",
     "renew_your_subscription": "Renueva tu suscripción",
+    "success": "¡Suscripción renovada!",
     "unknown_error_occurred": "¡Ocurrió un error desconocido!"
   },
   "reset": {
@@ -198,7 +188,6 @@
     "email_me": "Envíame un correo electrónico",
     "forgot_password": "¿Olvidaste tu contraseña?",
     "forgot_text": "Te enviaremos un correo electrónico con instrucciones sobre cómo restablecer tu contraseña.",
-    "hide_password": "Ocultar contraseña",
     "invalid_link": "Enlace no válido",
     "invalid_password": "Contraseña no válida",
     "invalid_reset_link": "El enlace de restablecimiento de contraseña no es válido o ha expirado. Por favor, intenta restablecer tu contraseña nuevamente.",
@@ -212,8 +201,8 @@
     "password": "Contraseña",
     "password_helper_text": "Utiliza un mínimo de 8 caracteres (distingue entre mayúsculas y minúsculas) con al menos un número",
     "password_reset": "Restablecimiento de contraseña",
-    "password_reset_text": "",
     "password_reset_success": "Contraseña restablecida",
+    "password_reset_text": "",
     "password_strength": "Aunque tu contraseña cumple con los criterios de una contraseña segura, incluye elementos que no son recomendables, como frases prohibidas o palabras repetidas. Por favor, modifícala para garantizar la seguridad de tu cuenta.",
     "passwords_do_not_match": "Las contraseñas no coinciden",
     "repeat_new_password": "Repetir nueva contraseña",
diff --git a/platforms/web/public/locales/es/common.json b/platforms/web/public/locales/es/common.json
index 14b14d3a2..b44ec6beb 100644
--- a/platforms/web/public/locales/es/common.json
+++ b/platforms/web/public/locales/es/common.json
@@ -21,9 +21,12 @@
   "optional": "(Opcional)",
   "play_item": "Reproducir {{title}}",
   "scheduled": "Programada",
-  "series": "serie",
   "sign_in": "Iniciar sesión",
   "sign_up": "Registrarse",
+  "slide_indicator": "Página {{page}} de {{pages}}",
   "slide_left": "Deslizar hacia la izquierda",
-  "slide_right": "Deslizar hacia la derecha"
+  "slide_next": "Siguiente diapositiva",
+  "slide_previous": "Diapositiva anterior",
+  "slide_right": "Deslizar hacia la derecha",
+  "videoplayer": "Reproductor de video"
 }
diff --git a/platforms/web/public/locales/es/error.json b/platforms/web/public/locales/es/error.json
index 092e7fb80..dc372ac7e 100644
--- a/platforms/web/public/locales/es/error.json
+++ b/platforms/web/public/locales/es/error.json
@@ -1,7 +1,10 @@
 {
+  "adyen_order_unknown": "El orden es desconocido",
   "check_your_config": "Hubo un problema al recuperar la configuración de la aplicación. Inténtalo de nuevo más tarde. Si el problema persiste, contacta al soporte técnico.",
   "check_your_settings": "Hubo un problema al cargar los ajustes predeterminados. Inténtalo de nuevo más tarde. Si el problema persiste, contacta al soporte técnico.",
   "config_invalid": "Configuración inválida o faltante",
+  "empty_shelves_description": "Nos disculpamos, pero no hay contenido disponible en su región.",
+  "empty_shelves_heading": "No hay contenido disponible",
   "generic_error_description": "Intenta actualizar esta página o vuelve más tarde.",
   "generic_error_heading": "Hubo un problema al cargar la aplicación",
   "learn_more": "Más información",
@@ -9,9 +12,10 @@
   "notfound_error_heading": "No encontrado",
   "playlist_not_found": "Lista de reproducción no encontrada",
   "settings_invalid": "Ajustes inválidos o faltantes",
-  "video_not_found": "Video no encontrado",
   "unknown_error": "Error desconocido",
-  "adyen_order_unknown": "El orden es desconocido",
-  "empty_shelves_heading": "No hay contenido disponible",
-  "empty_shelves_description": "Nos disculpamos, pero no hay contenido disponible en su región."
+  "validation_form_error": {
+    "other": "Corrija sus errores antes de continuar.",
+    "required": "Complete todos los campos obligatorios antes de continuar."
+  },
+  "video_not_found": "Video no encontrado"
 }
diff --git a/platforms/web/public/locales/es/menu.json b/platforms/web/public/locales/es/menu.json
index c0b647070..e310ce7bf 100644
--- a/platforms/web/public/locales/es/menu.json
+++ b/platforms/web/public/locales/es/menu.json
@@ -1,10 +1,9 @@
 {
   "close_menu": "Cerrar menú",
+  "language_menu": "Abrir menú de idioma",
   "open_menu": "Abrir menú",
   "open_user_menu": "Abrir menú de usuario",
   "profile_icon": "Icono de perfil",
-  "select_language": "Seleccionar idioma",
-  "language_menu": "Abrir menú de idioma",
   "sign_in": "Iniciar sesión",
   "sign_up": "Registrarse",
   "skip_to_content": "Saltar al contenido"
diff --git a/platforms/web/public/locales/es/user.json b/platforms/web/public/locales/es/user.json
index 3ff65a5ab..1ec0dbe28 100644
--- a/platforms/web/public/locales/es/user.json
+++ b/platforms/web/public/locales/es/user.json
@@ -12,15 +12,17 @@
     "delete_account": {
       "body": "Elimine permanentemente su cuenta y todo su contenido.",
       "error": "Ocurrió un error al eliminar su cuenta. Inténtalo de nuevo.",
+      "invalid_credentials": "¡Contraseña incorrecta!",
       "modal": {
+        "description": "Introduce la contraseña para continuar",
         "placeholder": "Ingresa tu contraseña",
         "text_cant_be_undone": "Tenga en cuenta que este proceso no se puede deshacer, así que proceda con precaución.",
         "text_contacts": "Si tiene más preguntas o inquietudes, no dude en ponerse en contacto con nuestro equipo de soporte.",
         "text_data_erasure": "Tenga en cuenta que si elige continuar con este proceso, todos sus datos personales se borrarán de nuestro sistema. Esto incluye cualquier información personal que haya proporcionado durante el proceso de registro, así como cualquier información de ubicación y dispositivo que hayamos recopilado durante el proceso de autenticación. Además, también se eliminará toda otra información personal almacenada en varias partes de nuestra base de datos. Sin embargo, tenga en cuenta que, debido a algunas legislaciones, estamos obligados a mantener ciertos datos personales como parte de los registros de transacciones y suscripciones.",
         "text_revoked_access": "Una vez que se complete el borrado, se revocarán todos sus accesos activos y se cancelarán todas las sesiones de inicio de sesión activas, incluida esta. La información de su cuenta ya no será accesible para nuestro personal de ninguna manera.",
-        "title": "Introduce la contraseña para continuar",
         "warning": "Todas las suscripciones activas que se compraron a través de un navegador web se cancelarán automáticamente al borrar los datos personales. Sin embargo, si compró una suscripción a través de las aplicaciones iOS, Android, Roku o Amazon, tenga en cuenta que no se cancelará automáticamente. En este caso, deberá seguir los pasos habituales de cancelación de suscripción para cada plataforma respectiva para cancelar manualmente la suscripción."
       },
+      "success": "Tu cuenta ha sido eliminada",
       "title": "Borrar cuenta"
     },
     "delete_account_password_warning": {
@@ -31,7 +33,6 @@
     "edit_information": "Editar información",
     "edit_password": "Editar contraseña",
     "email": "Correo electrónico",
-    "update_success": "Tu {{section}} ha sido actualizado con éxito.",
     "errors": {
       "email_exists": "¡El correo electrónico ya existe!",
       "email_update_not_supported": "No se admite la actualización del correo electrónico",
@@ -40,14 +41,15 @@
       "invalid_password": "¡Contraseña incorrecta!",
       "last_name_too_long": "Por favor, limita el Apellido a 50 caracteres o menos.",
       "please_enter_valid_email": "Por favor, ingresa una dirección de correo electrónico válida.",
-      "unknown_error": "Se produjo un error desconocido"
+      "unknown_error": "Se produjo un error desconocido",
+      "validation_error": "Corrija sus errores antes de continuar.",
+      "wrong_combination": "Combinación de correo electrónico/contraseña incorrecta"
     },
     "export_data_body": "Exporte todos los datos de su cuenta personal a <strong>{{email}}</strong> como un archivo adjunto.",
     "export_data_error": "Ocurrió un error al exportar los datos de su cuenta.",
     "export_data_success": "Please check your email.",
     "export_data_title": "Por favor revise su correo electrónico.",
     "firstname": "Nombre",
-    "hide_password": "Ocultar contraseña",
     "lastname": "Apellido",
     "manage_profiles": "Administrar perfiles",
     "other_registration_details": "Otros detalles de registro",
@@ -59,6 +61,7 @@
     "security": "Contraseña",
     "terms_and_tracking": "Jurídico y marketing",
     "update_consents": "Actualizar consentimientos",
+    "update_success": "Tu {{section}} ha sido actualizado con éxito.",
     "view_password": "Ver contraseña",
     "who_is_watching": "¿Quién está mirando?"
   },
@@ -72,7 +75,6 @@
   "login": {
     "field_required": "Este campo es obligatorio, por favor ingresa un {{field}} válido."
   },
-  "name": "Nombre",
   "nav": {
     "account": "Cuenta",
     "add_profile": "Añade un nuevo perfil",
diff --git a/platforms/web/public/locales/es/video.json b/platforms/web/public/locales/es/video.json
index 59416b236..340b53136 100644
--- a/platforms/web/public/locales/es/video.json
+++ b/platforms/web/public/locales/es/video.json
@@ -1,5 +1,4 @@
 {
-  "add_to_favorites": "Agregar a favoritos",
   "all_seasons": "Todas las temporadas",
   "buy": "Comprar",
   "buy_to_start_watching": "Compra para empezar a mirar!",
@@ -17,11 +16,10 @@
     "geo_blocked_description": "Pedimos disculpas, pero este contenido no está disponible actualmente en tu región.",
     "geo_blocked_title": "Contenido no disponible"
   },
-  "remove_from_favorites": "Eliminar de favoritos",
   "season": "temporada",
   "season_number_filter_template": "Temporada {{seasonNumber}}",
-  "series_error": "Se produjo un error al solicitar la serie",
   "series": "Serie",
+  "series_error": "Se produjo un error al solicitar la serie",
   "share": "Compartir",
   "share_video": "Compartir este video",
   "sign_up_to_start_watching": "¡Regístrate para comenzar a ver!",
diff --git a/platforms/web/pwa-assets.config.ts b/platforms/web/pwa-assets.config.ts
index 2c2180c12..212fc82c6 100644
--- a/platforms/web/pwa-assets.config.ts
+++ b/platforms/web/pwa-assets.config.ts
@@ -1,8 +1,12 @@
-import { defineConfig, defaultAssetName, type Preset, type AssetType, type ResolvedAssetSize } from '@vite-pwa/assets-generator/config';
+import { defineConfig, type Preset } from '@vite-pwa/assets-generator/config';
+
+export const favIconSizes = [196, 192, 160, 144, 96, 64, 32, 16];
+export const appleIconSizes = [180, 152, 144, 120, 114, 76, 72, 60];
+export const basePath = '/images/icons/';
 
 export const ottPresetNoPadding: Preset = {
   transparent: {
-    sizes: [196, 192, 160, 144, 96, 64, 32, 16],
+    sizes: favIconSizes,
     favicons: [[48, 'favicon.ico']],
     padding: 0,
   },
@@ -11,7 +15,7 @@ export const ottPresetNoPadding: Preset = {
     padding: 0,
   },
   apple: {
-    sizes: [180, 152, 144, 120, 114, 76, 72, 60],
+    sizes: appleIconSizes,
     padding: 0,
   },
 };
@@ -20,6 +24,6 @@ export default defineConfig({
   images: './public/images/icons/app-icon.png', // Source image
   preset: ottPresetNoPadding,
   headLinkOptions: {
-    basePath: '/images/icons/',
+    basePath: basePath,
   },
 });
diff --git a/platforms/web/scripts/build-tools/buildTools.ts b/platforms/web/scripts/build-tools/buildTools.ts
index f5f1eb904..4a5d4f25c 100644
--- a/platforms/web/scripts/build-tools/buildTools.ts
+++ b/platforms/web/scripts/build-tools/buildTools.ts
@@ -80,6 +80,16 @@ export const getGoogleFontTags = (fonts: ExternalFont[]): HtmlTagDescriptor[] =>
   return createGoogleFontTags(googleFonts);
 };
 
+export const generateIconTags = (basePath: string, favIconSizes: number[], appleIconSizes: number[]) => {
+  const favIconTags = favIconSizes.map((size) => {
+    return `<link rel="icon" type="image/png" sizes="${size}x${size}" href="${basePath}/favicon-${size}x${size}.png">`;
+  });
+  const appleIconTags = appleIconSizes.map((size) => {
+    return `<link rel="apple-touch-icon" href="${basePath}/apple-touch-icon-${size}x${size}.png">`;
+  });
+  return [...favIconTags, ...appleIconTags].join('\n');
+};
+
 const makeFontsUnique = (arr: ExternalFont[]) => {
   const seen = new Set();
 
diff --git a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
index a7c66345b..01b11132f 100644
--- a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
+++ b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
         class="_box_d73633"
       >
         <img
-          alt="Logo"
+          alt=""
           class="_image_d73633"
           src="/images/logo.png"
         />
@@ -65,8 +65,7 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
               >
                 <input
                   aria-describedby="helper_text_1235_app-config"
-                  aria-invalid="true"
-                  aria-required="true"
+                  aria-invalid="false"
                   autocapitalize="none"
                   class="_input_25c745"
                   id="text-field_1235_app-config"
@@ -79,9 +78,8 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
                 />
               </div>
               <div
-                aria-live="assertive"
                 class="_helperText_edc1c5 _error_edc1c5"
-                id="helper_text_1235_app-config_1235"
+                id="helper_text_1235_app-config"
               >
                 <span>
                   smth
diff --git a/platforms/web/src/hooks/useNotifications.ts b/platforms/web/src/hooks/useNotifications.ts
index e92dbacf9..35b9fd2ef 100644
--- a/platforms/web/src/hooks/useNotifications.ts
+++ b/platforms/web/src/hooks/useNotifications.ts
@@ -6,6 +6,8 @@ import { queryClient } from '@jwp/ott-ui-react/src/containers/QueryProvider/Quer
 import { simultaneousLoginWarningKey } from '@jwp/ott-common/src/constants';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
+import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
+import type { AccountModals } from '@jwp/ott-ui-react/src/containers/AccountModal/AccountModal';
 
 enum NotificationsTypes {
   ACCESS_REVOKED = 'access.revoked',
@@ -27,6 +29,11 @@ export default function useNotifications() {
   const accountController = getModule(AccountController);
   const { hasNotifications } = accountController?.getFeatures() || {};
 
+  // use an eventCallback to prevent the `location` property being stale when used directly in the useEffect below
+  const navigateToModal = useEventCallback((path: keyof AccountModals | null, queryParams?: Record<string, string>) => {
+    navigate(modalURLFromLocation(location, path, queryParams));
+  });
+
   useEffect(() => {
     if (!uuid || !hasNotifications) return;
 
@@ -40,11 +47,11 @@ export default function useNotifications() {
             case NotificationsTypes.FAILED:
             case NotificationsTypes.CARD_FAILED:
             case NotificationsTypes.SUBSCRIBE_FAILED:
-              navigate(modalURLFromLocation(location, 'payment-error', { message: notification.resource?.message }));
+              navigateToModal('payment-error', notification.resource?.message);
               break;
             case NotificationsTypes.CARD_SUCCESS:
               await queryClient.invalidateQueries(['entitlements']);
-              navigate(modalURLFromLocation(location, null));
+              navigateToModal(null); // close modal
               break;
             case NotificationsTypes.SUBSCRIBE_SUCCESS:
               await accountController.reloadSubscriptions();
@@ -61,7 +68,7 @@ export default function useNotifications() {
                 await accountController?.logout();
               } finally {
                 if (notification.resource?.reason === 'sessions_limit') {
-                  navigate(modalURLFromLocation(location, 'login', { message: simultaneousLoginWarningKey }));
+                  navigateToModal('login', { message: simultaneousLoginWarningKey });
                 }
               }
               break;
@@ -71,6 +78,5 @@ export default function useNotifications() {
         }
       },
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [accountController, uuid]);
+  }, [accountController, hasNotifications, navigateToModal, uuid]);
 }
diff --git a/platforms/web/stylelint.config.js b/platforms/web/stylelint.config.cjs
similarity index 100%
rename from platforms/web/stylelint.config.js
rename to platforms/web/stylelint.config.cjs
diff --git a/platforms/web/test-e2e/codecept.desktop.js b/platforms/web/test-e2e/codecept.desktop.cjs
similarity index 100%
rename from platforms/web/test-e2e/codecept.desktop.js
rename to platforms/web/test-e2e/codecept.desktop.cjs
diff --git a/platforms/web/test-e2e/codecept.mobile.js b/platforms/web/test-e2e/codecept.mobile.cjs
similarity index 100%
rename from platforms/web/test-e2e/codecept.mobile.js
rename to platforms/web/test-e2e/codecept.mobile.cjs
diff --git a/platforms/web/test-e2e/tests/favorites_test.ts b/platforms/web/test-e2e/tests/favorites_test.ts
index a7aaae4ac..8df41b4f8 100644
--- a/platforms/web/test-e2e/tests/favorites_test.ts
+++ b/platforms/web/test-e2e/tests/favorites_test.ts
@@ -29,9 +29,7 @@ Scenario('I can add a video to my favorites', async ({ I }) => {
 
 Scenario('I can remove a video from my favorites', async ({ I }) => {
   await addVideoToFavorites(I);
-  I.forceClick({ css: 'button[aria-label="Remove from favorites"]' });
-
-  I.seeElement({ css: 'button[aria-label="Add to favorites"]' });
+  I.forceClick({ css: 'button[aria-label="Favorite"]' });
 
   const savedFavorites = await I.executeScript(function () {
     return JSON.parse(localStorage.getItem('jwapp.favorites') || '');
@@ -70,7 +68,7 @@ async function addVideoToFavorites(I) {
   await I.openVideoCard(videoTitle, ShelfId.allFilms, false);
   I.see('Favorite');
 
-  I.scrollTo({ css: 'button[aria-label="Add to favorites"]' });
-  I.forceClick({ css: 'button[aria-label="Add to favorites"]' });
-  I.seeElement({ css: 'button[aria-label="Remove from favorites"]' });
+  I.scrollTo({ css: 'button[aria-label="Favorite"]' });
+  I.forceClick({ css: 'button[aria-label="Favorite"]' });
+  I.seeAttributesOnElements({ css: 'button[aria-label="Favorite"]' }, { 'aria-pressed': 'true' });
 }
diff --git a/platforms/web/test-e2e/tests/home_test.ts b/platforms/web/test-e2e/tests/home_test.ts
index 41c6521f5..af8dd071c 100644
--- a/platforms/web/test-e2e/tests/home_test.ts
+++ b/platforms/web/test-e2e/tests/home_test.ts
@@ -44,7 +44,7 @@ Scenario('I can slide within the featured shelf', async ({ I }) => {
 
   async function slide(swipeText: string) {
     if (isDesktop) {
-      I.click({ css: 'div[aria-label="Slide right"]' });
+      I.click({ css: 'div[aria-label="Next slide"]' });
     } else {
       await I.swipeLeft({ text: swipeText });
     }
@@ -79,7 +79,7 @@ Scenario('I can slide within non-featured shelves', async ({ I }) => {
 
   async function slideRight(swipeText) {
     if (isDesktop) {
-      I.click({ css: 'div[aria-label="Slide right"]' }, makeShelfXpath(ShelfId.allFilms));
+      I.click({ css: 'div[aria-label="Next slide"]' }, makeShelfXpath(ShelfId.allFilms));
     } else {
       await I.swipeLeft({ text: swipeText });
     }
@@ -87,7 +87,7 @@ Scenario('I can slide within non-featured shelves', async ({ I }) => {
 
   async function slideLeft(swipeText) {
     if (isDesktop) {
-      I.click({ css: 'div[aria-label="Slide left"]' }, makeShelfXpath(ShelfId.allFilms));
+      I.click({ css: 'div[aria-label="Previous slide"]' }, makeShelfXpath(ShelfId.allFilms));
     } else {
       await I.swipeRight({ text: swipeText });
     }
diff --git a/platforms/web/test-e2e/tests/login/account_test.ts b/platforms/web/test-e2e/tests/login/account_test.ts
index 67ce94bf2..7171f6317 100644
--- a/platforms/web/test-e2e/tests/login/account_test.ts
+++ b/platforms/web/test-e2e/tests/login/account_test.ts
@@ -111,10 +111,9 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     I.submitForm();
 
     I.see(incorrectLogin);
-    I.seeCssPropertiesOnElements(formFeedback, { 'background-color': 'rgb(255, 53, 53)' });
 
-    checkField(I, 'email', true);
-    checkField(I, 'password', true);
+    checkField(I, 'email');
+    checkField(I, 'password');
 
     // Failed login maintains the email but clears the password field
     I.waitForValue('input[name=email]', 'danny@email.com', 0);
diff --git a/platforms/web/test-e2e/tests/register_test.ts b/platforms/web/test-e2e/tests/register_test.ts
index d34a6c3fc..c07a1cd11 100644
--- a/platforms/web/test-e2e/tests/register_test.ts
+++ b/platforms/web/test-e2e/tests/register_test.ts
@@ -66,8 +66,11 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     I.dontSeeElement(constants.loginFormSelector);
   });
 
-  Scenario(`The submit button is disabled when the form is incompletely filled in - ${providerName}`, async ({ I }) => {
-    I.seeAttributesOnElements('button[type="submit"]', { disabled: true });
+  Scenario(`The Sign up modal will invalidate when directly pressing submit - ${providerName}`, async ({ I }) => {
+    I.click('Continue');
+    I.seeElementInDOM('div[class*=formFeedback]'); // This element can be visually hidden through CSS
+    I.seeAttributesOnElements('input[name="email"]', { 'aria-invalid': 'true' });
+    I.seeAttributesOnElements('input[name="password"]', { 'aria-invalid': 'true' });
   });
 
   Scenario(`I get warned when filling in incorrect credentials - ${providerName}`, async ({ I }) => {
diff --git a/platforms/web/test-e2e/tests/search_test.ts b/platforms/web/test-e2e/tests/search_test.ts
index 247279365..50c1439df 100644
--- a/platforms/web/test-e2e/tests/search_test.ts
+++ b/platforms/web/test-e2e/tests/search_test.ts
@@ -5,7 +5,7 @@ import { testConfigs } from '@jwp/ott-testing/constants';
 import constants from '#utils/constants';
 
 const openSearchLocator = { css: 'div[aria-label="Open search"]' };
-const searchBarLocator = { css: 'input[aria-label="Search"]' };
+const searchBarLocator = 'input[type="search"]';
 const emptySearchPrompt = 'Type something in the search box to start searching';
 const clearSearchLocator = { css: 'div[aria-label="Clear search"]' };
 const closeSearchLocator = { css: 'div[aria-label="Close search"]' };
diff --git a/platforms/web/test-e2e/tests/video_detail_test.ts b/platforms/web/test-e2e/tests/video_detail_test.ts
index 41a8a690f..e3469d3ba 100644
--- a/platforms/web/test-e2e/tests/video_detail_test.ts
+++ b/platforms/web/test-e2e/tests/video_detail_test.ts
@@ -54,7 +54,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
 
     I.seeElement('div[aria-label="Collapse"]');
     I.dontSeeElement('div[aria-label="Expand"]');
-    checkHeight('160px');
+    checkHeight('216px');
 
     I.click('div[aria-label="Collapse"]');
 
diff --git a/platforms/web/test-e2e/utils/login.ts b/platforms/web/test-e2e/utils/login.ts
index ce47998c7..dcd360f1c 100644
--- a/platforms/web/test-e2e/utils/login.ts
+++ b/platforms/web/test-e2e/utils/login.ts
@@ -1,8 +1,7 @@
-const formFeedback = 'div[class*=formFeedback]';
-
 export function tryToSubmitForm(I: CodeceptJS.I) {
   I.submitForm(false);
-  I.dontSeeElement(formFeedback);
+  I.seeElementInDOM('div[class*=formFeedback]'); // This element can be visually hidden through CSS
+  I.dontSee('Unknown error');
   I.dontSee('Incorrect email/password combination');
 }
 
@@ -20,14 +19,17 @@ export function fillAndCheckField(I: CodeceptJS.I, field, value, error: string |
   checkField(I, field, error);
 }
 
-export function checkField(I: CodeceptJS.I, field, error: string | boolean = false) {
+export async function checkField(I: CodeceptJS.I, field, error: string | boolean = false) {
   const hoverColor = 'rgba(255, 255, 255, 0.7)';
   const activeColor = error ? 'rgb(255, 53, 53)' : 'rgb(255, 255, 255)';
   const restingColor = error ? 'rgb(255, 53, 53)' : 'rgba(255, 255, 255, 0.34)';
 
   // If error === true, there's an error, but no associated message
   if (error && error !== true) {
+    const helperId = await I.grabAttributeFrom(`input[name="${field}"]`, 'aria-describedby');
     I.see(error, `[data-testid=login-${field}-input]`);
+    I.seeElement(`#${helperId}[class*=helperText]`);
+    I.seeAttributesOnElements(`[name="${field}"]`, { 'aria-invalid': 'true' });
     I.seeCssPropertiesOnElements(`[data-testid="login-${field}-input"] [class*=helperText]`, { color: '#FF3535' });
   } else {
     I.dontSeeElement(`[class*=helperText] [data-testid="${field}-input"]`);
diff --git a/platforms/web/test-e2e/utils/password_utils.ts b/platforms/web/test-e2e/utils/password_utils.ts
index 53c4ca5f1..afbf894d1 100644
--- a/platforms/web/test-e2e/utils/password_utils.ts
+++ b/platforms/web/test-e2e/utils/password_utils.ts
@@ -18,7 +18,7 @@ async function testPasswordToggling(I: CodeceptJS.I, name = 'password') {
 
   await I.writeClipboard('dummy');
 
-  I.click(`input[name="${name}"]+div div[aria-label="Hide password"]`);
+  I.click(`input[name="${name}"]+div div[aria-label="View password"]`);
   await checkPasswordType(I, name, 'password');
 }
 
diff --git a/platforms/web/test-e2e/utils/steps_file.ts b/platforms/web/test-e2e/utils/steps_file.ts
index f289f3bbd..fb8f3642f 100644
--- a/platforms/web/test-e2e/utils/steps_file.ts
+++ b/platforms/web/test-e2e/utils/steps_file.ts
@@ -512,7 +512,7 @@ const stepsObj = {
           direction: scrollToTheRight ? 'left' : 'right',
         });
       } else {
-        this.click({ css: `div[aria-label="Slide ${scrollToTheRight ? 'right' : 'left'}"]` }, shelfLocator);
+        this.click({ css: `div[aria-label="${scrollToTheRight ? 'Next slide' : 'Previous slide'}"]` }, shelfLocator);
       }
 
       this.wait(1);
diff --git a/platforms/web/vite.config.ts b/platforms/web/vite.config.ts
index 8ff7fdb75..d979d8032 100644
--- a/platforms/web/vite.config.ts
+++ b/platforms/web/vite.config.ts
@@ -10,7 +10,15 @@ import { createHtmlPlugin } from 'vite-plugin-html';
 import svgr from 'vite-plugin-svgr';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
-import { extractExternalFonts, getFileCopyTargets, getGoogleFontTags, getGoogleVerificationTag, getGtmTags } from './scripts/build-tools/buildTools';
+import { basePath, favIconSizes, appleIconSizes } from './pwa-assets.config';
+import {
+  extractExternalFonts,
+  getFileCopyTargets,
+  getGoogleFontTags,
+  getGoogleVerificationTag,
+  getGtmTags,
+  generateIconTags,
+} from './scripts/build-tools/buildTools';
 
 export default ({ mode, command }: ConfigEnv): UserConfigExport => {
   const envPrefix = 'APP_';
@@ -39,6 +47,7 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
   const fontTags = getGoogleFontTags([bodyFonts, bodyAltFonts].flat());
   const bodyFontsString = bodyFonts.map((font) => font.fontFamily).join(', ');
   const bodyAltFontsString = bodyAltFonts.map((font) => font.fontFamily).join(', ');
+  const favicons = generateIconTags(basePath, favIconSizes, appleIconSizes);
 
   return defineConfig({
     plugins: [
@@ -80,7 +89,7 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
         minify: true,
         inject: {
           tags: [getGoogleVerificationTag(env), fontTags, getGtmTags(env)].flat(),
-          data: app,
+          data: { ...app, favicons },
         },
       }),
       viteStaticCopy({ targets: getFileCopyTargets(mode) }),
@@ -148,5 +157,10 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
       setupFiles: ['test/vitest.setup.ts'],
       css: true,
     },
+    optimizeDeps: {
+      esbuildOptions: {
+        tsconfig: 'tsconfig.json',
+      },
+    },
   });
 };
diff --git a/tsconfig.base.json b/tsconfig.base.json
index dd26f4360..35cb0cdaa 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -13,7 +13,7 @@
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
-    "importsNotUsedAsValues": "error",
+    "verbatimModuleSyntax": true,
     // Ensure unused code is cleaned up
     "noUnusedParameters": true,
     "noUnusedLocals": true,
diff --git a/yarn.lock b/yarn.lock
index c7032284a..d6742e4e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,15 +7,15 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
-"@adobe/css-tools@^4.0.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.1.tgz#abfccb8ca78075a2b6187345c26243c1a0842f28"
-  integrity sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==
+"@adobe/css-tools@^4.0.1", "@adobe/css-tools@~4.3.1":
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.3.tgz#90749bde8b89cd41764224f5aac29cd4138f75ff"
+  integrity sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==
 
 "@adyen/adyen-web@^5.42.1":
-  version "5.53.2"
-  resolved "https://registry.yarnpkg.com/@adyen/adyen-web/-/adyen-web-5.53.2.tgz#449b60b873af31dee13e401a1df1a67fc796bd40"
-  integrity sha512-hnOphMNTaauu9+cLvPVD4jxFxKZZV+DJJsKfRoldaafBt2Z/0zH0iol3ZnA9FjwWJjxBw8Qh4JXwu0lcx+uwIw==
+  version "5.59.0"
+  resolved "https://registry.yarnpkg.com/@adyen/adyen-web/-/adyen-web-5.59.0.tgz#dd35f0f7cde4a374ff66f3d02cbf2183d0ea0805"
+  integrity sha512-hkIDzek/5bhhamip0ujOQGctrcr44+mwSn34tU4fVqm13TcKsxdY+2SxD79cSplLlDYYQzfMgnlC8azlOmm7Ww==
   dependencies:
     "@babel/runtime" "^7.15.4"
     "@babel/runtime-corejs3" "^7.20.1"
@@ -26,12 +26,12 @@
     preact "10.13.2"
 
 "@ampproject/remapping@^2.2.0", "@ampproject/remapping@^2.2.1":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
-  integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
+  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
   dependencies:
-    "@jridgewell/gen-mapping" "^0.3.0"
-    "@jridgewell/trace-mapping" "^0.3.9"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
 
 "@antfu/utils@^0.7.6":
   version "0.7.7"
@@ -47,22 +47,7 @@
     jsonpointer "^5.0.0"
     leven "^3.1.0"
 
-"@babel/code-frame@7.12.11":
-  version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
-  integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
-  dependencies:
-    "@babel/highlight" "^7.10.4"
-
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.22.13":
-  version "7.22.13"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
-  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
-  dependencies:
-    "@babel/highlight" "^7.22.13"
-    chalk "^2.4.2"
-
-"@babel/code-frame@^7.23.5":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
   integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
@@ -70,68 +55,32 @@
     "@babel/highlight" "^7.23.4"
     chalk "^2.4.2"
 
-"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9", "@babel/compat-data@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.3.tgz#3febd552541e62b5e883a25eb3effd7c7379db11"
-  integrity sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==
-
-"@babel/compat-data@^7.23.5":
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98"
   integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==
 
-"@babel/core@^7.11.1", "@babel/core@^7.22.11", "@babel/core@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.3.tgz#5ec09c8803b91f51cc887dedc2654a35852849c9"
-  integrity sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==
-  dependencies:
-    "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.22.13"
-    "@babel/generator" "^7.23.3"
-    "@babel/helper-compilation-targets" "^7.22.15"
-    "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helpers" "^7.23.2"
-    "@babel/parser" "^7.23.3"
-    "@babel/template" "^7.22.15"
-    "@babel/traverse" "^7.23.3"
-    "@babel/types" "^7.23.3"
-    convert-source-map "^2.0.0"
-    debug "^4.1.0"
-    gensync "^1.0.0-beta.2"
-    json5 "^2.2.3"
-    semver "^6.3.1"
-
-"@babel/core@^7.21.3":
-  version "7.23.7"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.7.tgz#4d8016e06a14b5f92530a13ed0561730b5c6483f"
-  integrity sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==
+"@babel/core@^7.11.1", "@babel/core@^7.21.3", "@babel/core@^7.22.11", "@babel/core@^7.23.5":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.0.tgz#56cbda6b185ae9d9bed369816a8f4423c5f2ff1b"
+  integrity sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
     "@babel/code-frame" "^7.23.5"
     "@babel/generator" "^7.23.6"
     "@babel/helper-compilation-targets" "^7.23.6"
     "@babel/helper-module-transforms" "^7.23.3"
-    "@babel/helpers" "^7.23.7"
-    "@babel/parser" "^7.23.6"
-    "@babel/template" "^7.22.15"
-    "@babel/traverse" "^7.23.7"
-    "@babel/types" "^7.23.6"
+    "@babel/helpers" "^7.24.0"
+    "@babel/parser" "^7.24.0"
+    "@babel/template" "^7.24.0"
+    "@babel/traverse" "^7.24.0"
+    "@babel/types" "^7.24.0"
     convert-source-map "^2.0.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.3.tgz#86e6e83d95903fbe7613f448613b8b319f330a8e"
-  integrity sha512-keeZWAV4LU3tW0qRi19HRpabC/ilM0HRBBzf9/k8FFiG4KVpiv0FIy4hHfLfFQZNhziCTPTmd59zoyv6DNISzg==
-  dependencies:
-    "@babel/types" "^7.23.3"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    "@jridgewell/trace-mapping" "^0.3.17"
-    jsesc "^2.5.1"
-
 "@babel/generator@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e"
@@ -156,18 +105,7 @@
   dependencies:
     "@babel/types" "^7.22.15"
 
-"@babel/helper-compilation-targets@^7.22.15", "@babel/helper-compilation-targets@^7.22.6":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz#0698fc44551a26cf29f18d4662d5bf545a6cfc52"
-  integrity sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==
-  dependencies:
-    "@babel/compat-data" "^7.22.9"
-    "@babel/helper-validator-option" "^7.22.15"
-    browserslist "^4.21.9"
-    lru-cache "^5.1.1"
-    semver "^6.3.1"
-
-"@babel/helper-compilation-targets@^7.23.6":
+"@babel/helper-compilation-targets@^7.22.15", "@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
   integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==
@@ -178,17 +116,17 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
-"@babel/helper-create-class-features-plugin@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.15.tgz#97a61b385e57fe458496fad19f8e63b63c867de4"
-  integrity sha512-jKkwA59IXcvSaiK2UN45kKwSC9o+KuoXsBDvHvU/7BecYIp8GQ2UwrVvFgJASUT+hBnwJx6MhvMCuMzwZZ7jlg==
+"@babel/helper-create-class-features-plugin@^7.22.15", "@babel/helper-create-class-features-plugin@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.0.tgz#fc7554141bdbfa2d17f7b4b80153b9b090e5d158"
+  integrity sha512-QAH+vfvts51BCsNZ2PhY6HAggnlS6omLLFTsIpeqZk/MmJ6cW7tgz5yRv0fMJThcr6FmbMrENh1RgrWPTYA76g==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-environment-visitor" "^7.22.5"
-    "@babel/helper-function-name" "^7.22.5"
-    "@babel/helper-member-expression-to-functions" "^7.22.15"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-member-expression-to-functions" "^7.23.0"
     "@babel/helper-optimise-call-expression" "^7.22.5"
-    "@babel/helper-replace-supers" "^7.22.9"
+    "@babel/helper-replace-supers" "^7.22.20"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
     "@babel/helper-split-export-declaration" "^7.22.6"
     semver "^6.3.1"
@@ -202,10 +140,10 @@
     regexpu-core "^5.3.1"
     semver "^6.3.1"
 
-"@babel/helper-define-polyfill-provider@^0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.3.tgz#a71c10f7146d809f4a256c373f462d9bba8cf6ba"
-  integrity sha512-WBrLmuPP47n7PNwsZ57pqam6G/RGo1vw/87b0Blc53tZNGZ4x7YvZ6HgQe2vo1W/FR20OgjeZuGXzudPiXHFug==
+"@babel/helper-define-polyfill-provider@^0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.5.0.tgz#465805b7361f461e86c680f1de21eaf88c25901b"
+  integrity sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==
   dependencies:
     "@babel/helper-compilation-targets" "^7.22.6"
     "@babel/helper-plugin-utils" "^7.22.5"
@@ -213,7 +151,7 @@
     lodash.debounce "^4.0.8"
     resolve "^1.14.2"
 
-"@babel/helper-environment-visitor@^7.22.20", "@babel/helper-environment-visitor@^7.22.5":
+"@babel/helper-environment-visitor@^7.22.20":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
   integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
@@ -233,7 +171,7 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-member-expression-to-functions@^7.22.15":
+"@babel/helper-member-expression-to-functions@^7.22.15", "@babel/helper-member-expression-to-functions@^7.23.0":
   version "7.23.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366"
   integrity sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==
@@ -265,10 +203,10 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
-  integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.24.0", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz#945681931a52f15ce879fd5b86ce2dae6d3d7f2a"
+  integrity sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==
 
 "@babel/helper-remap-async-to-generator@^7.22.20":
   version "7.22.20"
@@ -279,7 +217,7 @@
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-wrap-function" "^7.22.20"
 
-"@babel/helper-replace-supers@^7.22.20", "@babel/helper-replace-supers@^7.22.9":
+"@babel/helper-replace-supers@^7.22.20":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793"
   integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
@@ -309,11 +247,6 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
-"@babel/helper-string-parser@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
-  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
-
 "@babel/helper-string-parser@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz#9478c707febcbbe1ddb38a3d91a2e054ae622d83"
@@ -324,11 +257,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
   integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 
-"@babel/helper-validator-option@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040"
-  integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==
-
 "@babel/helper-validator-option@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
@@ -343,32 +271,14 @@
     "@babel/template" "^7.22.15"
     "@babel/types" "^7.22.19"
 
-"@babel/helpers@^7.23.2":
-  version "7.23.2"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.2.tgz#2832549a6e37d484286e15ba36a5330483cac767"
-  integrity sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==
-  dependencies:
-    "@babel/template" "^7.22.15"
-    "@babel/traverse" "^7.23.2"
-    "@babel/types" "^7.23.0"
-
-"@babel/helpers@^7.23.7":
-  version "7.23.8"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.8.tgz#fc6b2d65b16847fd50adddbd4232c76378959e34"
-  integrity sha512-KDqYz4PiOWvDFrdHLPhKtCThtIcKVy6avWD2oG4GEvyQ+XDZwHD4YQd+H2vNMnq2rkdxsDkU82T+Vk8U/WXHRQ==
-  dependencies:
-    "@babel/template" "^7.22.15"
-    "@babel/traverse" "^7.23.7"
-    "@babel/types" "^7.23.6"
-
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.22.13":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
-  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
+"@babel/helpers@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.0.tgz#a3dd462b41769c95db8091e49cfe019389a9409b"
+  integrity sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.22.20"
-    chalk "^2.4.2"
-    js-tokens "^4.0.0"
+    "@babel/template" "^7.24.0"
+    "@babel/traverse" "^7.24.0"
+    "@babel/types" "^7.24.0"
 
 "@babel/highlight@^7.23.4":
   version "7.23.4"
@@ -379,15 +289,10 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.23.3", "@babel/parser@^7.8.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.3.tgz#0ce0be31a4ca4f1884b5786057cadcb6c3be58f9"
-  integrity sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==
-
-"@babel/parser@^7.23.6":
-  version "7.23.6"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.6.tgz#ba1c9e512bda72a47e285ae42aff9d2a635a9e3b"
-  integrity sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==
+"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.23.0", "@babel/parser@^7.23.9", "@babel/parser@^7.24.0", "@babel/parser@^7.8.3":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.0.tgz#26a3d1ff49031c53a97d03b604375f028746a9ac"
+  integrity sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.23.3":
   version "7.23.3"
@@ -405,24 +310,22 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
     "@babel/plugin-transform-optional-chaining" "^7.23.3"
 
-"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.3.tgz#20c60d4639d18f7da8602548512e9d3a4c8d7098"
-  integrity sha512-XaJak1qcityzrX0/IU5nKHb34VaibwP3saKqG6a/tppelgllOH13LUann4ZCIBcVOeE6H18K4Vx9QKkVww3z/w==
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.23.7":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.7.tgz#516462a95d10a9618f197d39ad291a9b47ae1d7b"
+  integrity sha512-LlRT7HgaifEpQA1ZgLVOIJZZFVPWN5iReq/7/JixwBtwcoeVGDBD53ZV28rrsLYOZs1Y/EHhA8N/Z6aazHR8cw==
   dependencies:
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-proposal-decorators@^7.22.10":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.23.3.tgz#c609ca70be908d187ee36ff49f1250c56cc98f15"
-  integrity sha512-u8SwzOcP0DYSsa++nHd/9exlHb0NAlHCb890qtZZbSwPX2bFv8LBEztxwN7Xg/dS8oAFFidhrI9PBcLBJSkGRQ==
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.24.0.tgz#845b42189e7441faa60a37682de1038eae97c382"
+  integrity sha512-LiT1RqZWeij7X+wGxCoYh3/3b8nVOX6/7BZ9wiQgAIyjoeQWdROaodJCgT+dwtbjHaz0r7bEbHJzjSbVfcOyjQ==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-replace-supers" "^7.22.20"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/plugin-syntax-decorators" "^7.23.3"
+    "@babel/helper-create-class-features-plugin" "^7.24.0"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/plugin-syntax-decorators" "^7.24.0"
 
 "@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
   version "7.21.0-placeholder-for-preset-env.2"
@@ -450,12 +353,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-decorators@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.23.3.tgz#a1d351d6c25bfdcf2e16f99b039101bc0ffcb0ca"
-  integrity sha512-cf7Niq4/+/juY67E0PbgH0TDhLQ5J7zS8C/Q5FFx+DWyrRa9sUQdTXkjqKu8zGvuqr7vw1muKiukseihU+PJDA==
+"@babel/plugin-syntax-decorators@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.24.0.tgz#7a15e20aeaf412469c53ed0d5666f31a1fc41215"
+  integrity sha512-MXW3pQCu9gUiVGzqkGqsgiINDVYXoAnrY8FYF/rmb+OfufNF0zHMpHPN4ulRrinxYT8Vk/aZJxYqOKsDECjKAw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-plugin-utils" "^7.24.0"
 
 "@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
@@ -570,10 +473,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-async-generator-functions@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.3.tgz#9df2627bad7f434ed13eef3e61b2b65cafd4885b"
-  integrity sha512-59GsVNavGxAXCDDbakWSMJhajASb4kBCqDjqJsv+p5nKdbz7istmZ3HrX3L2LuiI80+zsOADCvooqQH3qGCucQ==
+"@babel/plugin-transform-async-generator-functions@^7.23.9":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.9.tgz#9adaeb66fc9634a586c5df139c6240d41ed801ce"
+  integrity sha512-8Q3veQEDGe14dTYuwagbRtwxQDnytyg1JFu4/HwEMETeofocrB0U0ejBJIXoeG/t2oXZ8kzCyI0ZZfbT80VFNQ==
   dependencies:
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-plugin-utils" "^7.22.5"
@@ -596,10 +499,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-block-scoping@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.3.tgz#e99a3ff08f58edd28a8ed82481df76925a4ffca7"
-  integrity sha512-QPZxHrThbQia7UdvfpaRRlq/J9ciz1J4go0k+lPBXbgaNeY7IQrBj/9ceWjvMMI07/ZBzHl/F0R/2K0qH7jCVw==
+"@babel/plugin-transform-block-scoping@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.4.tgz#b2d38589531c6c80fbe25e6b58e763622d2d3cf5"
+  integrity sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
@@ -611,25 +514,24 @@
     "@babel/helper-create-class-features-plugin" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-class-static-block@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.23.3.tgz#56f2371c7e5bf6ff964d84c5dc4d4db5536b5159"
-  integrity sha512-PENDVxdr7ZxKPyi5Ffc0LjXdnJyrJxyqF5T5YjlVg4a0VFfQHW0r8iAtRiDXkfHlu1wwcvdtnndGYIeJLSuRMQ==
+"@babel/plugin-transform-class-static-block@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.23.4.tgz#2a202c8787a8964dd11dfcedf994d36bfc844ab5"
+  integrity sha512-nsWu/1M+ggti1SOALj3hfx5FXzAY06fwPJsUZD4/A5e1bWi46VUIWtD+kOX6/IdhXGsXBWllLFDSnqSCdUNydQ==
   dependencies:
     "@babel/helper-create-class-features-plugin" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
-"@babel/plugin-transform-classes@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.3.tgz#73380c632c095b03e8503c24fd38f95ad41ffacb"
-  integrity sha512-FGEQmugvAEu2QtgtU0uTASXevfLMFfBeVCIIdcQhn/uBQsMTjBajdnAtanQlOcuihWh10PZ7+HWvc7NtBwP74w==
+"@babel/plugin-transform-classes@^7.23.8":
+  version "7.23.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.8.tgz#d08ae096c240347badd68cdf1b6d1624a6435d92"
+  integrity sha512-yAYslGsY1bX6Knmg46RjiCiNSwJKv2IUC8qOdYKqMMr0491SXFhcHqOdRDeCRohOOIzwN/90C6mQ9qAKgrP7dg==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
-    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-compilation-targets" "^7.23.6"
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-optimise-call-expression" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-replace-supers" "^7.22.20"
     "@babel/helper-split-export-declaration" "^7.22.6"
@@ -665,10 +567,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-dynamic-import@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.23.3.tgz#82625924da9ed5fb11a428efb02e43bc9a3ab13e"
-  integrity sha512-vTG+cTGxPFou12Rj7ll+eD5yWeNl5/8xvQvF08y5Gv3v4mZQoyFf8/n9zg4q5vvCWt5jmgymfzMAldO7orBn7A==
+"@babel/plugin-transform-dynamic-import@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.23.4.tgz#c7629e7254011ac3630d47d7f34ddd40ca535143"
+  integrity sha512-V6jIbLhdJK86MaLh4Jpghi8ho5fGzt3imHOBu/x0jlBaPYqDoWz4RDXjmMOfnh+JWNaQleEAByZLV0QzBT4YQQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
@@ -681,20 +583,21 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-export-namespace-from@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.23.3.tgz#dcd066d995f6ac6077e5a4ccb68322a01e23ac49"
-  integrity sha512-yCLhW34wpJWRdTxxWtFZASJisihrfyMOTOQexhVzA78jlU+dH7Dw+zQgcPepQ5F3C6bAIiblZZ+qBggJdHiBAg==
+"@babel/plugin-transform-export-namespace-from@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.23.4.tgz#084c7b25e9a5c8271e987a08cf85807b80283191"
+  integrity sha512-GzuSBcKkx62dGzZI1WVgTWvkkz84FZO5TC5T8dl/Tht/rAla6Dg/Mz9Yhypg+ezVACf/rgDuQt3kbWEv7LdUDQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-transform-for-of@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.23.3.tgz#afe115ff0fbce735e02868d41489093c63e15559"
-  integrity sha512-X8jSm8X1CMwxmK878qsUGJRmbysKNbdpTv/O1/v0LuY/ZkZrng5WYiekYSdg9m09OTmDDUWeEDsTE+17WYbAZw==
+"@babel/plugin-transform-for-of@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.23.6.tgz#81c37e24171b37b370ba6aaffa7ac86bcb46f94e"
+  integrity sha512-aYH4ytZ0qSuBbpfhuofbg/e96oQ7U2w1Aw/UQmKT+1l39uEhUPoFS3fHevDc1G0OvewyDudfMKY1OulczHzWIw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
 
 "@babel/plugin-transform-function-name@^7.23.3":
   version "7.23.3"
@@ -705,10 +608,10 @@
     "@babel/helper-function-name" "^7.23.0"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-json-strings@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.23.3.tgz#489724ab7d3918a4329afb4172b2fd2cf3c8d245"
-  integrity sha512-H9Ej2OiISIZowZHaBwF0tsJOih1PftXJtE8EWqlEIwpc7LMTGq0rPOrywKLQ4nefzx8/HMR0D3JGXoMHYvhi0A==
+"@babel/plugin-transform-json-strings@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.23.4.tgz#a871d9b6bd171976efad2e43e694c961ffa3714d"
+  integrity sha512-81nTOqM1dMwZ/aRXQ59zVubN9wHGqk6UtqRK+/q+ciXmRy8fSolhGVvG09HHRGo4l6fr/c4ZhXUQH0uFW7PZbg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
@@ -720,10 +623,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-logical-assignment-operators@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.23.3.tgz#3a406d6083feb9487083bca6d2334a3c9b6c4808"
-  integrity sha512-+pD5ZbxofyOygEp+zZAfujY2ShNCXRpDRIPOiBmTO693hhyOEteZgl876Xs9SAHPQpcV0vz8LvA/T+w8AzyX8A==
+"@babel/plugin-transform-logical-assignment-operators@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.23.4.tgz#e599f82c51d55fac725f62ce55d3a0886279ecb5"
+  integrity sha512-Mc/ALf1rmZTP4JKKEhUwiORU+vcfarFVLfcFiolKUo6sewoxSEgl36ak5t+4WamRsNr6nzjZXQjM35WsU+9vbg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
@@ -752,10 +655,10 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-simple-access" "^7.22.5"
 
-"@babel/plugin-transform-modules-systemjs@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.3.tgz#fa7e62248931cb15b9404f8052581c302dd9de81"
-  integrity sha512-ZxyKGTkF9xT9YJuKQRo19ewf3pXpopuYQd8cDXqNzc3mUNbOME0RKMoZxviQk74hwzfQsEe66dE92MaZbdHKNQ==
+"@babel/plugin-transform-modules-systemjs@^7.23.9":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.9.tgz#105d3ed46e4a21d257f83a2f9e2ee4203ceda6be"
+  integrity sha512-KDlPRM6sLo4o1FkiSlXoAa8edLXFsKKIda779fbLrvmeuc3itnjCtaO6RrtoaANsIJANj+Vk1zqbZIMhkCAHVw==
   dependencies:
     "@babel/helper-hoist-variables" "^7.22.5"
     "@babel/helper-module-transforms" "^7.23.3"
@@ -785,30 +688,30 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-nullish-coalescing-operator@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.23.3.tgz#8a613d514b521b640344ed7c56afeff52f9413f8"
-  integrity sha512-xzg24Lnld4DYIdysyf07zJ1P+iIfJpxtVFOzX4g+bsJ3Ng5Le7rXx9KwqKzuyaUeRnt+I1EICwQITqc0E2PmpA==
+"@babel/plugin-transform-nullish-coalescing-operator@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.23.4.tgz#45556aad123fc6e52189ea749e33ce090637346e"
+  integrity sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-transform-numeric-separator@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.23.3.tgz#2f8da42b75ba89e5cfcd677afd0856d52c0c2e68"
-  integrity sha512-s9GO7fIBi/BLsZ0v3Rftr6Oe4t0ctJ8h4CCXfPoEJwmvAPMyNrfkOOJzm6b9PX9YXcCJWWQd/sBF/N26eBiMVw==
+"@babel/plugin-transform-numeric-separator@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.23.4.tgz#03d08e3691e405804ecdd19dd278a40cca531f29"
+  integrity sha512-mps6auzgwjRrwKEZA05cOwuDc9FAzoyFS4ZsG/8F43bTLf/TgkJg7QXOrPO1JO599iA3qgK9MXdMGOEC8O1h6Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-transform-object-rest-spread@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.23.3.tgz#509373753b5f7202fe1940e92fd075bd7874955f"
-  integrity sha512-VxHt0ANkDmu8TANdE9Kc0rndo/ccsmfe2Cx2y5sI4hu3AukHQ5wAu4cM7j3ba8B9548ijVyclBU+nuDQftZsog==
+"@babel/plugin-transform-object-rest-spread@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.0.tgz#7b836ad0088fdded2420ce96d4e1d3ed78b71df1"
+  integrity sha512-y/yKMm7buHpFFXfxVFS4Vk1ToRJDilIa6fKRioB9Vjichv58TDGXTvqV0dN7plobAmTW5eSEGXDngE+Mm+uO+w==
   dependencies:
-    "@babel/compat-data" "^7.23.3"
-    "@babel/helper-compilation-targets" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/compat-data" "^7.23.5"
+    "@babel/helper-compilation-targets" "^7.23.6"
+    "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
     "@babel/plugin-transform-parameters" "^7.23.3"
 
@@ -820,18 +723,18 @@
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-replace-supers" "^7.22.20"
 
-"@babel/plugin-transform-optional-catch-binding@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.23.3.tgz#362c0b545ee9e5b0fa9d9e6fe77acf9d4c480027"
-  integrity sha512-LxYSb0iLjUamfm7f1D7GpiS4j0UAC8AOiehnsGAP8BEsIX8EOi3qV6bbctw8M7ZvLtcoZfZX5Z7rN9PlWk0m5A==
+"@babel/plugin-transform-optional-catch-binding@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.23.4.tgz#318066de6dacce7d92fa244ae475aa8d91778017"
+  integrity sha512-XIq8t0rJPHf6Wvmbn9nFxU6ao4c7WhghTR5WyV8SrJfUFzyxhCm4nhC+iAp3HFhbAKLfYpgzhJ6t4XCtVwqO5A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-transform-optional-chaining@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.3.tgz#92fc83f54aa3adc34288933fa27e54c13113f4be"
-  integrity sha512-zvL8vIfIUgMccIAK1lxjvNv572JHFJIKb4MWBz5OGdBQA0fB0Xluix5rmOby48exiJc987neOmP/m9Fnpkz3Tg==
+"@babel/plugin-transform-optional-chaining@^7.23.3", "@babel/plugin-transform-optional-chaining@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.4.tgz#6acf61203bdfc4de9d4e52e64490aeb3e52bd017"
+  integrity sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
@@ -852,10 +755,10 @@
     "@babel/helper-create-class-features-plugin" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/plugin-transform-private-property-in-object@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.23.3.tgz#5cd34a2ce6f2d008cc8f91d8dcc29e2c41466da6"
-  integrity sha512-a5m2oLNFyje2e/rGKjVfAELTVI5mbA0FeZpBnkOWWV7eSmKQ+T/XW0Vf+29ScLzSxX+rnsarvU0oie/4m6hkxA==
+"@babel/plugin-transform-private-property-in-object@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.23.4.tgz#3ec711d05d6608fd173d9b8de39872d8dbf68bf5"
+  integrity sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.22.5"
     "@babel/helper-create-class-features-plugin" "^7.22.15"
@@ -966,17 +869,17 @@
     "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/preset-env@^7.11.0":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.23.3.tgz#d299e0140a7650684b95c62be2db0ef8c975143e"
-  integrity sha512-ovzGc2uuyNfNAs/jyjIGxS8arOHS5FENZaNn4rtE7UdKMMkqHCvboHfcuhWLZNX5cB44QfcGNWjaevxMzzMf+Q==
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.24.0.tgz#11536a7f4b977294f0bdfad780f01a8ac8e183fc"
+  integrity sha512-ZxPEzV9IgvGn73iK0E6VB9/95Nd7aMFpbE0l8KQFDG70cOV9IxRP7Y2FUPmlK0v6ImlLqYX50iuZ3ZTVhOF2lA==
   dependencies:
-    "@babel/compat-data" "^7.23.3"
-    "@babel/helper-compilation-targets" "^7.22.15"
-    "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/helper-validator-option" "^7.22.15"
+    "@babel/compat-data" "^7.23.5"
+    "@babel/helper-compilation-targets" "^7.23.6"
+    "@babel/helper-plugin-utils" "^7.24.0"
+    "@babel/helper-validator-option" "^7.23.5"
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.23.3"
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.23.3"
-    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.23.3"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.23.7"
     "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
     "@babel/plugin-syntax-class-properties" "^7.12.13"
@@ -997,41 +900,41 @@
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
     "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
     "@babel/plugin-transform-arrow-functions" "^7.23.3"
-    "@babel/plugin-transform-async-generator-functions" "^7.23.3"
+    "@babel/plugin-transform-async-generator-functions" "^7.23.9"
     "@babel/plugin-transform-async-to-generator" "^7.23.3"
     "@babel/plugin-transform-block-scoped-functions" "^7.23.3"
-    "@babel/plugin-transform-block-scoping" "^7.23.3"
+    "@babel/plugin-transform-block-scoping" "^7.23.4"
     "@babel/plugin-transform-class-properties" "^7.23.3"
-    "@babel/plugin-transform-class-static-block" "^7.23.3"
-    "@babel/plugin-transform-classes" "^7.23.3"
+    "@babel/plugin-transform-class-static-block" "^7.23.4"
+    "@babel/plugin-transform-classes" "^7.23.8"
     "@babel/plugin-transform-computed-properties" "^7.23.3"
     "@babel/plugin-transform-destructuring" "^7.23.3"
     "@babel/plugin-transform-dotall-regex" "^7.23.3"
     "@babel/plugin-transform-duplicate-keys" "^7.23.3"
-    "@babel/plugin-transform-dynamic-import" "^7.23.3"
+    "@babel/plugin-transform-dynamic-import" "^7.23.4"
     "@babel/plugin-transform-exponentiation-operator" "^7.23.3"
-    "@babel/plugin-transform-export-namespace-from" "^7.23.3"
-    "@babel/plugin-transform-for-of" "^7.23.3"
+    "@babel/plugin-transform-export-namespace-from" "^7.23.4"
+    "@babel/plugin-transform-for-of" "^7.23.6"
     "@babel/plugin-transform-function-name" "^7.23.3"
-    "@babel/plugin-transform-json-strings" "^7.23.3"
+    "@babel/plugin-transform-json-strings" "^7.23.4"
     "@babel/plugin-transform-literals" "^7.23.3"
-    "@babel/plugin-transform-logical-assignment-operators" "^7.23.3"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.23.4"
     "@babel/plugin-transform-member-expression-literals" "^7.23.3"
     "@babel/plugin-transform-modules-amd" "^7.23.3"
     "@babel/plugin-transform-modules-commonjs" "^7.23.3"
-    "@babel/plugin-transform-modules-systemjs" "^7.23.3"
+    "@babel/plugin-transform-modules-systemjs" "^7.23.9"
     "@babel/plugin-transform-modules-umd" "^7.23.3"
     "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5"
     "@babel/plugin-transform-new-target" "^7.23.3"
-    "@babel/plugin-transform-nullish-coalescing-operator" "^7.23.3"
-    "@babel/plugin-transform-numeric-separator" "^7.23.3"
-    "@babel/plugin-transform-object-rest-spread" "^7.23.3"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.23.4"
+    "@babel/plugin-transform-numeric-separator" "^7.23.4"
+    "@babel/plugin-transform-object-rest-spread" "^7.24.0"
     "@babel/plugin-transform-object-super" "^7.23.3"
-    "@babel/plugin-transform-optional-catch-binding" "^7.23.3"
-    "@babel/plugin-transform-optional-chaining" "^7.23.3"
+    "@babel/plugin-transform-optional-catch-binding" "^7.23.4"
+    "@babel/plugin-transform-optional-chaining" "^7.23.4"
     "@babel/plugin-transform-parameters" "^7.23.3"
     "@babel/plugin-transform-private-methods" "^7.23.3"
-    "@babel/plugin-transform-private-property-in-object" "^7.23.3"
+    "@babel/plugin-transform-private-property-in-object" "^7.23.4"
     "@babel/plugin-transform-property-literals" "^7.23.3"
     "@babel/plugin-transform-regenerator" "^7.23.3"
     "@babel/plugin-transform-reserved-words" "^7.23.3"
@@ -1045,9 +948,9 @@
     "@babel/plugin-transform-unicode-regex" "^7.23.3"
     "@babel/plugin-transform-unicode-sets-regex" "^7.23.3"
     "@babel/preset-modules" "0.1.6-no-external-plugins"
-    babel-plugin-polyfill-corejs2 "^0.4.6"
-    babel-plugin-polyfill-corejs3 "^0.8.5"
-    babel-plugin-polyfill-regenerator "^0.5.3"
+    babel-plugin-polyfill-corejs2 "^0.4.8"
+    babel-plugin-polyfill-corejs3 "^0.9.0"
+    babel-plugin-polyfill-regenerator "^0.5.5"
     core-js-compat "^3.31.0"
     semver "^6.3.1"
 
@@ -1066,9 +969,9 @@
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
 "@babel/runtime-corejs3@^7.20.1":
-  version "7.23.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.23.2.tgz#a5cd9d8b408fb946b2f074b21ea40c04e516795c"
-  integrity sha512-54cIh74Z1rp4oIjsHjqN+WM4fMyCBYe+LpZ9jWm51CZ1fbH3SkAzQD/3XLoNkjbJ7YEmjobLXyvQrFypRHOrXw==
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.24.0.tgz#34243e29e369a762dd2a356fee65c3767973828a"
+  integrity sha512-HxiRMOncx3ly6f3fcZ1GVKf+/EROcI9qwPgmij8Czqy6Okm/0T37T4y2ZIlLUuEUFjtM7NRsfdCO8Y3tAiJZew==
   dependencies:
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
@@ -1080,42 +983,26 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.0", "@babel/runtime@^7.20.6", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
-  version "7.23.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
-  integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.0", "@babel/runtime@^7.20.6", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.8", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
+  integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
-  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
-  dependencies:
-    "@babel/code-frame" "^7.22.13"
-    "@babel/parser" "^7.22.15"
-    "@babel/types" "^7.22.15"
-
-"@babel/traverse@^7.23.2", "@babel/traverse@^7.23.3":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.3.tgz#26ee5f252e725aa7aca3474aa5b324eaf7908b5b"
-  integrity sha512-+K0yF1/9yR0oHdE0StHuEj3uTPzwwbrLGfNOndVJVV2TqA5+j3oljJUb4nmB954FLGjNem976+B+eDuLIjesiQ==
+"@babel/template@^7.22.15", "@babel/template@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.0.tgz#c6a524aa93a4a05d66aaf31654258fae69d87d50"
+  integrity sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==
   dependencies:
-    "@babel/code-frame" "^7.22.13"
-    "@babel/generator" "^7.23.3"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.23.3"
-    "@babel/types" "^7.23.3"
-    debug "^4.1.0"
-    globals "^11.1.0"
+    "@babel/code-frame" "^7.23.5"
+    "@babel/parser" "^7.24.0"
+    "@babel/types" "^7.24.0"
 
-"@babel/traverse@^7.23.7":
-  version "7.23.7"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.7.tgz#9a7bf285c928cb99b5ead19c3b1ce5b310c9c305"
-  integrity sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==
+"@babel/traverse@^7.23.2", "@babel/traverse@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.0.tgz#4a408fbf364ff73135c714a2ab46a5eab2831b1e"
+  integrity sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==
   dependencies:
     "@babel/code-frame" "^7.23.5"
     "@babel/generator" "^7.23.6"
@@ -1123,24 +1010,15 @@
     "@babel/helper-function-name" "^7.23.0"
     "@babel/helper-hoist-variables" "^7.22.5"
     "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.23.6"
-    "@babel/types" "^7.23.6"
+    "@babel/parser" "^7.24.0"
+    "@babel/types" "^7.24.0"
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.3", "@babel/types@^7.4.4":
-  version "7.23.3"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.3.tgz#d5ea892c07f2ec371ac704420f4dcdb07b5f9598"
-  integrity sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==
-  dependencies:
-    "@babel/helper-string-parser" "^7.22.5"
-    "@babel/helper-validator-identifier" "^7.22.20"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.21.3", "@babel/types@^7.23.6":
-  version "7.23.6"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.6.tgz#be33fdb151e1f5a56877d704492c240fc71c7ccd"
-  integrity sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==
+"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6", "@babel/types@^7.24.0", "@babel/types@^7.4.4":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
+  integrity sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==
   dependencies:
     "@babel/helper-string-parser" "^7.23.4"
     "@babel/helper-validator-identifier" "^7.22.20"
@@ -1329,24 +1207,24 @@
     "@jridgewell/trace-mapping" "0.3.9"
 
 "@csstools/css-parser-algorithms@^2.3.1":
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.2.tgz#1e0d581dbf4518cb3e939c3b863cb7180c8cedad"
-  integrity sha512-sLYGdAdEY2x7TSw9FtmdaTrh2wFtRJO5VMbBrA8tEqEod7GEggFmxTSK9XqExib3yMuYNcvcTdCZIP6ukdjAIA==
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.0.tgz#b45d3c7cbdd4214261724c82f96e33c746fedd58"
+  integrity sha512-YfEHq0eRH98ffb5/EsrrDspVWAuph6gDggAE74ZtjecsmyyWpW768hOyiONa8zwWGbIWYfa2Xp4tRTrpQQ00CQ==
 
 "@csstools/css-tokenizer@^2.2.0":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.2.1.tgz#9dc431c9a5f61087af626e41ac2a79cce7bb253d"
-  integrity sha512-Zmsf2f/CaEPWEVgw29odOj+WEVoiJy9s9NOv5GgNY9mZ1CZ7394By6wONrONrTsnNDv6F9hR02nvFihrGVGHBg==
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-2.2.3.tgz#b099d543ea57b64f495915a095ead583866c50c6"
+  integrity sha512-pp//EvZ9dUmGuGtG1p+n17gTHEOqu9jO+FiCUjNN3BDmyhdA2Jq9QsVeR7K8/2QCK17HSsioPlTW9ZkzoWb3Lg==
 
 "@csstools/media-query-list-parser@^2.1.4":
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.5.tgz#94bc8b3c3fd7112a40b7bf0b483e91eba0654a0f"
-  integrity sha512-IxVBdYzR8pYe89JiyXQuYk4aVVoCPhMJkz6ElRwlVysjwURTsTk/bmY/z4FfeRE+CRBMlykPwXEVUg8lThv7AQ==
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.8.tgz#36157fbe54ea30d5f2b1767c69fcdf92048a7b1d"
+  integrity sha512-DiD3vG5ciNzeuTEoh74S+JMjQDs50R3zlxHnBnfd04YYfA/kh2KiBCGhzqLxlJcNq+7yNQ3stuZZYLX6wK/U2g==
 
 "@csstools/selector-specificity@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz#798622546b63847e82389e473fd67f2707d82247"
-  integrity sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz#ea61ba7bb24be3502c6aaa3190ed231f4633a81e"
+  integrity sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==
 
 "@cucumber/cucumber-expressions@16":
   version "16.1.2"
@@ -1413,9 +1291,9 @@
   integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
 
 "@emotion/is-prop-valid@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
-  integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz#d4175076679c6a26faa92b03bb786f9e52612337"
+  integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==
   dependencies:
     "@emotion/memoize" "^0.8.1"
 
@@ -1425,23 +1303,23 @@
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
 "@emotion/react@^11.9.0":
-  version "11.11.1"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157"
-  integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==
+  version "11.11.4"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.4.tgz#3a829cac25c1f00e126408fab7f891f00ecc3c1d"
+  integrity sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==
   dependencies:
     "@babel/runtime" "^7.18.3"
     "@emotion/babel-plugin" "^11.11.0"
     "@emotion/cache" "^11.11.0"
-    "@emotion/serialize" "^1.1.2"
+    "@emotion/serialize" "^1.1.3"
     "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
     "@emotion/utils" "^1.2.1"
     "@emotion/weak-memoize" "^0.3.1"
     hoist-non-react-statics "^3.3.1"
 
-"@emotion/serialize@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.2.tgz#017a6e4c9b8a803bd576ff3d52a0ea6fa5a62b51"
-  integrity sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==
+"@emotion/serialize@^1.1.2", "@emotion/serialize@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.3.tgz#84b77bfcfe3b7bb47d326602f640ccfcacd5ffb0"
+  integrity sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==
   dependencies:
     "@emotion/hash" "^0.9.1"
     "@emotion/memoize" "^0.8.1"
@@ -1486,253 +1364,268 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
-"@esbuild/android-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
-  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
-
-"@esbuild/android-arm64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.19.5.tgz#276c5f99604054d3dbb733577e09adae944baa90"
-  integrity sha512-5d1OkoJxnYQfmC+Zd8NBFjkhyCNYwM4n9ODrycTFY6Jk1IGiZ+tjVJDDSwDt77nK+tfpGP4T50iMtVi4dEGzhQ==
-
-"@esbuild/android-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
-  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
-
-"@esbuild/android-arm@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.19.5.tgz#4a3cbf14758166abaae8ba9c01a80e68342a4eec"
-  integrity sha512-bhvbzWFF3CwMs5tbjf3ObfGqbl/17ict2/uwOSfr3wmxDE6VdS2GqY/FuzIPe0q0bdhj65zQsvqfArI9MY6+AA==
-
-"@esbuild/android-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
-  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
-
-"@esbuild/android-x64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.19.5.tgz#21a3d11cd4613d2d3c5ccb9e746c254eb9265b0a"
-  integrity sha512-9t+28jHGL7uBdkBjL90QFxe7DVA+KGqWlHCF8ChTKyaKO//VLuoBricQCgwhOjA1/qOczsw843Fy4cbs4H3DVA==
-
-"@esbuild/darwin-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
-  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
-
-"@esbuild/darwin-arm64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.5.tgz#714cb839f467d6a67b151ee8255886498e2b9bf6"
-  integrity sha512-mvXGcKqqIqyKoxq26qEDPHJuBYUA5KizJncKOAf9eJQez+L9O+KfvNFu6nl7SCZ/gFb2QPaRqqmG0doSWlgkqw==
-
-"@esbuild/darwin-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
-  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
-
-"@esbuild/darwin-x64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.19.5.tgz#2c553e97a6d2b4ae76a884e35e6cbab85a990bbf"
-  integrity sha512-Ly8cn6fGLNet19s0X4unjcniX24I0RqjPv+kurpXabZYSXGM4Pwpmf85WHJN3lAgB8GSth7s5A0r856S+4DyiA==
-
-"@esbuild/freebsd-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
-  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
-
-"@esbuild/freebsd-arm64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.5.tgz#d554f556718adb31917a0da24277bf84b6ee87f3"
-  integrity sha512-GGDNnPWTmWE+DMchq1W8Sd0mUkL+APvJg3b11klSGUDvRXh70JqLAO56tubmq1s2cgpVCSKYywEiKBfju8JztQ==
-
-"@esbuild/freebsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
-  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
-
-"@esbuild/freebsd-x64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.5.tgz#288f7358a3bb15d99e73c65c9adaa3dabb497432"
-  integrity sha512-1CCwDHnSSoA0HNwdfoNY0jLfJpd7ygaLAp5EHFos3VWJCRX9DMwWODf96s9TSse39Br7oOTLryRVmBoFwXbuuQ==
-
-"@esbuild/linux-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
-  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
-
-"@esbuild/linux-arm64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.19.5.tgz#95933ae86325c93cb6b5e8333d22120ecfdc901b"
-  integrity sha512-o3vYippBmSrjjQUCEEiTZ2l+4yC0pVJD/Dl57WfPwwlvFkrxoSO7rmBZFii6kQB3Wrn/6GwJUPLU5t52eq2meA==
-
-"@esbuild/linux-arm@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
-  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
-
-"@esbuild/linux-arm@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.19.5.tgz#0acef93aa3e0579e46d33b666627bddb06636664"
-  integrity sha512-lrWXLY/vJBzCPC51QN0HM71uWgIEpGSjSZZADQhq7DKhPcI6NH1IdzjfHkDQws2oNpJKpR13kv7/pFHBbDQDwQ==
-
-"@esbuild/linux-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
-  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
-
-"@esbuild/linux-ia32@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.5.tgz#b6e5c9e80b42131cbd6b1ddaa48c92835f1ed67f"
-  integrity sha512-MkjHXS03AXAkNp1KKkhSKPOCYztRtK+KXDNkBa6P78F8Bw0ynknCSClO/ztGszILZtyO/lVKpa7MolbBZ6oJtQ==
-
-"@esbuild/linux-loong64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
-  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
-
-"@esbuild/linux-loong64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.19.5.tgz#e5f0cf95a180158b01ff5f417da796a1c09dfbea"
-  integrity sha512-42GwZMm5oYOD/JHqHska3Jg0r+XFb/fdZRX+WjADm3nLWLcIsN27YKtqxzQmGNJgu0AyXg4HtcSK9HuOk3v1Dw==
-
-"@esbuild/linux-mips64el@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
-  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
-
-"@esbuild/linux-mips64el@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.5.tgz#ae36fb86c7d5f641f3a0c8472e83dcb6ea36a408"
-  integrity sha512-kcjndCSMitUuPJobWCnwQ9lLjiLZUR3QLQmlgaBfMX23UEa7ZOrtufnRds+6WZtIS9HdTXqND4yH8NLoVVIkcg==
-
-"@esbuild/linux-ppc64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
-  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
-
-"@esbuild/linux-ppc64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.5.tgz#7960cb1666f0340ddd9eef7b26dcea3835d472d0"
-  integrity sha512-yJAxJfHVm0ZbsiljbtFFP1BQKLc8kUF6+17tjQ78QjqjAQDnhULWiTA6u0FCDmYT1oOKS9PzZ2z0aBI+Mcyj7Q==
-
-"@esbuild/linux-riscv64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
-  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
-
-"@esbuild/linux-riscv64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.5.tgz#32207df26af60a3a9feea1783fc21b9817bade19"
-  integrity sha512-5u8cIR/t3gaD6ad3wNt1MNRstAZO+aNyBxu2We8X31bA8XUNyamTVQwLDA1SLoPCUehNCymhBhK3Qim1433Zag==
-
-"@esbuild/linux-s390x@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
-  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
-
-"@esbuild/linux-s390x@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.19.5.tgz#b38d5681db89a3723862dfa792812397b1510a7d"
-  integrity sha512-Z6JrMyEw/EmZBD/OFEFpb+gao9xJ59ATsoTNlj39jVBbXqoZm4Xntu6wVmGPB/OATi1uk/DB+yeDPv2E8PqZGw==
-
-"@esbuild/linux-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
-  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
-
-"@esbuild/linux-x64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.19.5.tgz#46feba2ad041a241379d150f415b472fe3885075"
-  integrity sha512-psagl+2RlK1z8zWZOmVdImisMtrUxvwereIdyJTmtmHahJTKb64pAcqoPlx6CewPdvGvUKe2Jw+0Z/0qhSbG1A==
-
-"@esbuild/netbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
-  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
-
-"@esbuild/netbsd-x64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.5.tgz#3b5c1fb068f26bfc681d31f682adf1bea4ef0702"
-  integrity sha512-kL2l+xScnAy/E/3119OggX8SrWyBEcqAh8aOY1gr4gPvw76la2GlD4Ymf832UCVbmuWeTf2adkZDK+h0Z/fB4g==
-
-"@esbuild/openbsd-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
-  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
-
-"@esbuild/openbsd-x64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.5.tgz#ca6830316ca68056c5c88a875f103ad3235e00db"
-  integrity sha512-sPOfhtzFufQfTBgRnE1DIJjzsXukKSvZxloZbkJDG383q0awVAq600pc1nfqBcl0ice/WN9p4qLc39WhBShRTA==
-
-"@esbuild/sunos-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
-  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
-
-"@esbuild/sunos-x64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.19.5.tgz#9efc4eb9539a7be7d5a05ada52ee43cda0d8e2dd"
-  integrity sha512-dGZkBXaafuKLpDSjKcB0ax0FL36YXCvJNnztjKV+6CO82tTYVDSH2lifitJ29jxRMoUhgkg9a+VA/B03WK5lcg==
-
-"@esbuild/win32-arm64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
-  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
-
-"@esbuild/win32-arm64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.19.5.tgz#29f8184afa7a02a956ebda4ed638099f4b8ff198"
-  integrity sha512-dWVjD9y03ilhdRQ6Xig1NWNgfLtf2o/STKTS+eZuF90fI2BhbwD6WlaiCGKptlqXlURVB5AUOxUj09LuwKGDTg==
-
-"@esbuild/win32-ia32@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
-  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
-
-"@esbuild/win32-ia32@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.19.5.tgz#f3de07afb292ecad651ae4bb8727789de2d95b05"
-  integrity sha512-4liggWIA4oDgUxqpZwrDhmEfAH4d0iljanDOK7AnVU89T6CzHon/ony8C5LeOdfgx60x5cnQJFZwEydVlYx4iw==
-
-"@esbuild/win32-x64@0.18.20":
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d"
-  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
-
-"@esbuild/win32-x64@0.19.5":
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.5.tgz#faad84c41ba12e3a0acb52571df9bff37bee75f6"
-  integrity sha512-czTrygUsB/jlM8qEW5MD8bgYU2Xg14lo6kBDXW6HdxKjh8M5PzETGiSHaz9MtbXBYDloHNUAUW2tMiKW4KM9Mw==
-
-"@eslint-community/eslint-utils@^4.2.0":
+"@esbuild/aix-ppc64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"
+  integrity sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==
+
+"@esbuild/aix-ppc64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.20.1.tgz#eafa8775019b3650a77e8310ba4dbd17ca7af6d5"
+  integrity sha512-m55cpeupQ2DbuRGQMMZDzbv9J9PgVelPjlcmM5kxHnrBdBx6REaEd7LamYV7Dm8N7rCyR/XwU6rVP8ploKtIkA==
+
+"@esbuild/android-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz#7ad65a36cfdb7e0d429c353e00f680d737c2aed4"
+  integrity sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==
+
+"@esbuild/android-arm64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.20.1.tgz#68791afa389550736f682c15b963a4f37ec2f5f6"
+  integrity sha512-hCnXNF0HM6AjowP+Zou0ZJMWWa1VkD77BXe959zERgGJBBxB+sV+J9f/rcjeg2c5bsukD/n17RKWXGFCO5dD5A==
+
+"@esbuild/android-arm@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.19.12.tgz#b0c26536f37776162ca8bde25e42040c203f2824"
+  integrity sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==
+
+"@esbuild/android-arm@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.20.1.tgz#38c91d8ee8d5196f7fbbdf4f0061415dde3a473a"
+  integrity sha512-4j0+G27/2ZXGWR5okcJi7pQYhmkVgb4D7UKwxcqrjhvp5TKWx3cUjgB1CGj1mfdmJBQ9VnUGgUhign+FPF2Zgw==
+
+"@esbuild/android-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.19.12.tgz#cb13e2211282012194d89bf3bfe7721273473b3d"
+  integrity sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==
+
+"@esbuild/android-x64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.20.1.tgz#93f6190ce997b313669c20edbf3645fc6c8d8f22"
+  integrity sha512-MSfZMBoAsnhpS+2yMFYIQUPs8Z19ajwfuaSZx+tSl09xrHZCjbeXXMsUF/0oq7ojxYEpsSo4c0SfjxOYXRbpaA==
+
+"@esbuild/darwin-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz#cbee41e988020d4b516e9d9e44dd29200996275e"
+  integrity sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==
+
+"@esbuild/darwin-arm64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.20.1.tgz#0d391f2e81fda833fe609182cc2fbb65e03a3c46"
+  integrity sha512-Ylk6rzgMD8klUklGPzS414UQLa5NPXZD5tf8JmQU8GQrj6BrFA/Ic9tb2zRe1kOZyCbGl+e8VMbDRazCEBqPvA==
+
+"@esbuild/darwin-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz#e37d9633246d52aecf491ee916ece709f9d5f4cd"
+  integrity sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==
+
+"@esbuild/darwin-x64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.20.1.tgz#92504077424584684862f483a2242cfde4055ba2"
+  integrity sha512-pFIfj7U2w5sMp52wTY1XVOdoxw+GDwy9FsK3OFz4BpMAjvZVs0dT1VXs8aQm22nhwoIWUmIRaE+4xow8xfIDZA==
+
+"@esbuild/freebsd-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz#1ee4d8b682ed363b08af74d1ea2b2b4dbba76487"
+  integrity sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==
+
+"@esbuild/freebsd-arm64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.1.tgz#a1646fa6ba87029c67ac8a102bb34384b9290774"
+  integrity sha512-UyW1WZvHDuM4xDz0jWun4qtQFauNdXjXOtIy7SYdf7pbxSWWVlqhnR/T2TpX6LX5NI62spt0a3ldIIEkPM6RHw==
+
+"@esbuild/freebsd-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz#37a693553d42ff77cd7126764b535fb6cc28a11c"
+  integrity sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==
+
+"@esbuild/freebsd-x64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.20.1.tgz#41c9243ab2b3254ea7fb512f71ffdb341562e951"
+  integrity sha512-itPwCw5C+Jh/c624vcDd9kRCCZVpzpQn8dtwoYIt2TJF3S9xJLiRohnnNrKwREvcZYx0n8sCSbvGH349XkcQeg==
+
+"@esbuild/linux-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz#be9b145985ec6c57470e0e051d887b09dddb2d4b"
+  integrity sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==
+
+"@esbuild/linux-arm64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.20.1.tgz#f3c1e1269fbc9eedd9591a5bdd32bf707a883156"
+  integrity sha512-cX8WdlF6Cnvw/DO9/X7XLH2J6CkBnz7Twjpk56cshk9sjYVcuh4sXQBy5bmTwzBjNVZze2yaV1vtcJS04LbN8w==
+
+"@esbuild/linux-arm@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz#207ecd982a8db95f7b5279207d0ff2331acf5eef"
+  integrity sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==
+
+"@esbuild/linux-arm@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.20.1.tgz#4503ca7001a8ee99589c072801ce9d7540717a21"
+  integrity sha512-LojC28v3+IhIbfQ+Vu4Ut5n3wKcgTu6POKIHN9Wpt0HnfgUGlBuyDDQR4jWZUZFyYLiz4RBBBmfU6sNfn6RhLw==
+
+"@esbuild/linux-ia32@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz#d0d86b5ca1562523dc284a6723293a52d5860601"
+  integrity sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==
+
+"@esbuild/linux-ia32@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.20.1.tgz#98c474e3e0cbb5bcbdd8561a6e65d18f5767ce48"
+  integrity sha512-4H/sQCy1mnnGkUt/xszaLlYJVTz3W9ep52xEefGtd6yXDQbz/5fZE5dFLUgsPdbUOQANcVUa5iO6g3nyy5BJiw==
+
+"@esbuild/linux-loong64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz#9a37f87fec4b8408e682b528391fa22afd952299"
+  integrity sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==
+
+"@esbuild/linux-loong64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.20.1.tgz#a8097d28d14b9165c725fe58fc438f80decd2f33"
+  integrity sha512-c0jgtB+sRHCciVXlyjDcWb2FUuzlGVRwGXgI+3WqKOIuoo8AmZAddzeOHeYLtD+dmtHw3B4Xo9wAUdjlfW5yYA==
+
+"@esbuild/linux-mips64el@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz#4ddebd4e6eeba20b509d8e74c8e30d8ace0b89ec"
+  integrity sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==
+
+"@esbuild/linux-mips64el@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.20.1.tgz#c44f6f0d7d017c41ad3bb15bfdb69b690656b5ea"
+  integrity sha512-TgFyCfIxSujyuqdZKDZ3yTwWiGv+KnlOeXXitCQ+trDODJ+ZtGOzLkSWngynP0HZnTsDyBbPy7GWVXWaEl6lhA==
+
+"@esbuild/linux-ppc64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz#adb67dadb73656849f63cd522f5ecb351dd8dee8"
+  integrity sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==
+
+"@esbuild/linux-ppc64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.20.1.tgz#0765a55389a99237b3c84227948c6e47eba96f0d"
+  integrity sha512-b+yuD1IUeL+Y93PmFZDZFIElwbmFfIKLKlYI8M6tRyzE6u7oEP7onGk0vZRh8wfVGC2dZoy0EqX1V8qok4qHaw==
+
+"@esbuild/linux-riscv64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz#11bc0698bf0a2abf8727f1c7ace2112612c15adf"
+  integrity sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==
+
+"@esbuild/linux-riscv64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.20.1.tgz#e4153b032288e3095ddf4c8be07893781b309a7e"
+  integrity sha512-wpDlpE0oRKZwX+GfomcALcouqjjV8MIX8DyTrxfyCfXxoKQSDm45CZr9fanJ4F6ckD4yDEPT98SrjvLwIqUCgg==
+
+"@esbuild/linux-s390x@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz#e86fb8ffba7c5c92ba91fc3b27ed5a70196c3cc8"
+  integrity sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==
+
+"@esbuild/linux-s390x@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.20.1.tgz#b9ab8af6e4b73b26d63c1c426d7669a5d53eb5a7"
+  integrity sha512-5BepC2Au80EohQ2dBpyTquqGCES7++p7G+7lXe1bAIvMdXm4YYcEfZtQrP4gaoZ96Wv1Ute61CEHFU7h4FMueQ==
+
+"@esbuild/linux-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz#5f37cfdc705aea687dfe5dfbec086a05acfe9c78"
+  integrity sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==
+
+"@esbuild/linux-x64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.20.1.tgz#0b25da17ac38c3e11cdd06ca3691d4d6bef2755f"
+  integrity sha512-5gRPk7pKuaIB+tmH+yKd2aQTRpqlf1E4f/mC+tawIm/CGJemZcHZpp2ic8oD83nKgUPMEd0fNanrnFljiruuyA==
+
+"@esbuild/netbsd-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz#29da566a75324e0d0dd7e47519ba2f7ef168657b"
+  integrity sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==
+
+"@esbuild/netbsd-x64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.20.1.tgz#3148e48406cd0d4f7ba1e0bf3f4d77d548c98407"
+  integrity sha512-4fL68JdrLV2nVW2AaWZBv3XEm3Ae3NZn/7qy2KGAt3dexAgSVT+Hc97JKSZnqezgMlv9x6KV0ZkZY7UO5cNLCg==
+
+"@esbuild/openbsd-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz#306c0acbdb5a99c95be98bdd1d47c916e7dc3ff0"
+  integrity sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==
+
+"@esbuild/openbsd-x64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.20.1.tgz#7b73e852986a9750192626d377ac96ac2b749b76"
+  integrity sha512-GhRuXlvRE+twf2ES+8REbeCb/zeikNqwD3+6S5y5/x+DYbAQUNl0HNBs4RQJqrechS4v4MruEr8ZtAin/hK5iw==
+
+"@esbuild/sunos-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz#0933eaab9af8b9b2c930236f62aae3fc593faf30"
+  integrity sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==
+
+"@esbuild/sunos-x64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.20.1.tgz#402a441cdac2eee98d8be378c7bc23e00c1861c5"
+  integrity sha512-ZnWEyCM0G1Ex6JtsygvC3KUUrlDXqOihw8RicRuQAzw+c4f1D66YlPNNV3rkjVW90zXVsHwZYWbJh3v+oQFM9Q==
+
+"@esbuild/win32-arm64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz#773bdbaa1971b36db2f6560088639ccd1e6773ae"
+  integrity sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==
+
+"@esbuild/win32-arm64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.20.1.tgz#36c4e311085806a6a0c5fc54d1ac4d7b27e94d7b"
+  integrity sha512-QZ6gXue0vVQY2Oon9WyLFCdSuYbXSoxaZrPuJ4c20j6ICedfsDilNPYfHLlMH7vGfU5DQR0czHLmJvH4Nzis/A==
+
+"@esbuild/win32-ia32@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz#000516cad06354cc84a73f0943a4aa690ef6fd67"
+  integrity sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==
+
+"@esbuild/win32-ia32@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.20.1.tgz#0cf933be3fb9dc58b45d149559fe03e9e22b54fe"
+  integrity sha512-HzcJa1NcSWTAU0MJIxOho8JftNp9YALui3o+Ny7hCh0v5f90nprly1U3Sj1Ldj/CvKKdvvFsCRvDkpsEMp4DNw==
+
+"@esbuild/win32-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz#c57c8afbb4054a3ab8317591a0b7320360b444ae"
+  integrity sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==
+
+"@esbuild/win32-x64@0.20.1":
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.20.1.tgz#77583b6ea54cee7c1410ebbd54051b6a3fcbd8ba"
+  integrity sha512-0MBh53o6XtI6ctDnRMeQ+xoCN8kD2qI1rY1KgF/xdWQwoFeKou7puvDfV8/Wv4Ctx2rRpET/gGdz3YlNtNACSA==
+
+"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
   integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
-"@eslint-community/regexpp@^4.4.0":
+"@eslint-community/regexpp@^4.5.1", "@eslint-community/regexpp@^4.6.1":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
   integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
 
-"@eslint/eslintrc@^0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
-  integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
   dependencies:
     ajv "^6.12.4"
-    debug "^4.1.1"
-    espree "^7.3.0"
-    globals "^13.9.0"
-    ignore "^4.0.6"
+    debug "^4.3.2"
+    espree "^9.6.0"
+    globals "^13.19.0"
+    ignore "^5.2.0"
     import-fresh "^3.2.1"
-    js-yaml "^3.13.1"
-    minimatch "^3.0.4"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@eslint/js@8.57.0":
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
+  integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
+
 "@gulpjs/to-absolute-glob@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@gulpjs/to-absolute-glob/-/to-absolute-glob-4.0.0.tgz#1fc2460d3953e1d9b9f2dfdb4bcc99da4710c021"
@@ -1752,19 +1645,24 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@humanwhocodes/config-array@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
-  integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
+"@humanwhocodes/config-array@^0.11.14":
+  version "0.11.14"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
+  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.0"
-    debug "^4.1.1"
-    minimatch "^3.0.4"
+    "@humanwhocodes/object-schema" "^2.0.2"
+    debug "^4.3.1"
+    minimatch "^3.0.5"
 
-"@humanwhocodes/object-schema@^1.2.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
-  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
+  integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
 "@img/sharp-darwin-arm64@0.33.2":
   version "0.33.2"
@@ -1922,24 +1820,24 @@
     "@types/yargs" "^17.0.8"
     chalk "^4.0.0"
 
-"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
-  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
+"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
   dependencies:
-    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/set-array" "^1.2.1"
     "@jridgewell/sourcemap-codec" "^1.4.10"
-    "@jridgewell/trace-mapping" "^0.3.9"
+    "@jridgewell/trace-mapping" "^0.3.24"
 
 "@jridgewell/resolve-uri@^3.0.3", "@jridgewell/resolve-uri@^3.1.0":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721"
-  integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
 
-"@jridgewell/set-array@^1.0.1":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
-  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
 
 "@jridgewell/source-map@^0.3.3":
   version "0.3.5"
@@ -1962,10 +1860,10 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
-  version "0.3.20"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f"
-  integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
   dependencies:
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
@@ -1983,7 +1881,7 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
-"@nodelib/fs.walk@^1.2.3":
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
@@ -2024,14 +1922,6 @@
     "@rollup/pluginutils" "^3.1.0"
     magic-string "^0.25.7"
 
-"@rollup/plugin-replace@^5.0.1":
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-5.0.5.tgz#33d5653dce6d03cb24ef98bef7f6d25b57faefdf"
-  integrity sha512-rYO4fOi8lMaTg/z5Jb+hKnrHHVn8j2lwkqwyS4kTRhKyWOLf2wST2sWXr4WzWiTcoHTp2sTjqUbqIj2E39slKQ==
-  dependencies:
-    "@rollup/pluginutils" "^5.0.1"
-    magic-string "^0.30.3"
-
 "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -2049,16 +1939,7 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@rollup/pluginutils@^5.0.1", "@rollup/pluginutils@^5.0.2":
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.5.tgz#bbb4c175e19ebfeeb8c132c2eea0ecb89941a66c"
-  integrity sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==
-  dependencies:
-    "@types/estree" "^1.0.0"
-    estree-walker "^2.0.2"
-    picomatch "^2.3.1"
-
-"@rollup/pluginutils@^5.0.5":
+"@rollup/pluginutils@^5.0.5", "@rollup/pluginutils@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
   integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
@@ -2067,6 +1948,71 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
+"@rollup/rollup-android-arm-eabi@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.1.tgz#11aaa02a933864b87f0b31cf2b755734e1f22787"
+  integrity sha512-iU2Sya8hNn1LhsYyf0N+L4Gf9Qc+9eBTJJJsaOGUp+7x4n2M9dxTt8UvhJl3oeftSjblSlpCfvjA/IfP3g5VjQ==
+
+"@rollup/rollup-android-arm64@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.1.tgz#b1e606fb4b46b38dc32bf010d513449462d669e9"
+  integrity sha512-wlzcWiH2Ir7rdMELxFE5vuM7D6TsOcJ2Yw0c3vaBR3VOsJFVTx9xvwnAvhgU5Ii8Gd6+I11qNHwndDscIm0HXg==
+
+"@rollup/rollup-darwin-arm64@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.1.tgz#dc21df1be9402671a8b6b15a93dd5953c68ec114"
+  integrity sha512-YRXa1+aZIFN5BaImK+84B3uNK8C6+ynKLPgvn29X9s0LTVCByp54TB7tdSMHDR7GTV39bz1lOmlLDuedgTwwHg==
+
+"@rollup/rollup-darwin-x64@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.1.tgz#397dcc4427d774f29b9954676893574ac563bf0b"
+  integrity sha512-opjWJ4MevxeA8FhlngQWPBOvVWYNPFkq6/25rGgG+KOy0r8clYwL1CFd+PGwRqqMFVQ4/Qd3sQu5t7ucP7C/Uw==
+
+"@rollup/rollup-linux-arm-gnueabihf@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.1.tgz#d851fd49d617e7792e7cde8e5a95ca51ea520fe5"
+  integrity sha512-uBkwaI+gBUlIe+EfbNnY5xNyXuhZbDSx2nzzW8tRMjUmpScd6lCQYKY2V9BATHtv5Ef2OBq6SChEP8h+/cxifQ==
+
+"@rollup/rollup-linux-arm64-gnu@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.1.tgz#e41a271ae51f79ffee6fb2b5597cc81b4ef66ad9"
+  integrity sha512-0bK9aG1kIg0Su7OcFTlexkVeNZ5IzEsnz1ept87a0TUgZ6HplSgkJAnFpEVRW7GRcikT4GlPV0pbtVedOaXHQQ==
+
+"@rollup/rollup-linux-arm64-musl@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.1.tgz#d3b4cd6ef18d0aa7103129755e0c535701624fac"
+  integrity sha512-qB6AFRXuP8bdkBI4D7UPUbE7OQf7u5OL+R94JE42Z2Qjmyj74FtDdLGeriRyBDhm4rQSvqAGCGC01b8Fu2LthQ==
+
+"@rollup/rollup-linux-riscv64-gnu@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.1.tgz#215101b2bb768cce2f2227145b8dd5c3c716c259"
+  integrity sha512-sHig3LaGlpNgDj5o8uPEoGs98RII8HpNIqFtAI8/pYABO8i0nb1QzT0JDoXF/pxzqO+FkxvwkHZo9k0NJYDedg==
+
+"@rollup/rollup-linux-x64-gnu@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.1.tgz#34a12fa305e167105eab70dbf577cd41e5199709"
+  integrity sha512-nD3YcUv6jBJbBNFvSbp0IV66+ba/1teuBcu+fBBPZ33sidxitc6ErhON3JNavaH8HlswhWMC3s5rgZpM4MtPqQ==
+
+"@rollup/rollup-linux-x64-musl@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.1.tgz#3f000b5a92a32b844e385e1166979c87882930a3"
+  integrity sha512-7/XVZqgBby2qp/cO0TQ8uJK+9xnSdJ9ct6gSDdEr4MfABrjTyrW6Bau7HQ73a2a5tPB7hno49A0y1jhWGDN9OQ==
+
+"@rollup/rollup-win32-arm64-msvc@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.1.tgz#27977d91f5059645ebb3b7fbf4429982de2278d3"
+  integrity sha512-CYc64bnICG42UPL7TrhIwsJW4QcKkIt9gGlj21gq3VV0LL6XNb1yAdHVp1pIi9gkts9gGcT3OfUYHjGP7ETAiw==
+
+"@rollup/rollup-win32-ia32-msvc@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.1.tgz#0d252acd5af0274209c74374867ee8b949843d75"
+  integrity sha512-LN+vnlZ9g0qlHGlS920GR4zFCqAwbv2lULrR29yGaWP9u7wF5L7GqWu9Ah6/kFZPXPUkpdZwd//TNR+9XC9hvA==
+
+"@rollup/rollup-win32-x64-msvc@4.12.1":
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.1.tgz#cd8d175e001c212d5ac71c7827ef1d5c5e14494c"
+  integrity sha512-n+vkrSyphvmU0qkQ6QBNXCGr2mKjhP08mPRM/Xp5Ck2FV4NrHU+y6axzDeixUrCBHVUS51TZhjqrKBBsHLKb2Q==
+
 "@sentry/core@6.19.7":
   version "6.19.7"
   resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.19.7.tgz#156aaa56dd7fad8c89c145be6ad7a4f7209f9785"
@@ -2124,9 +2070,9 @@
     tslib "^1.9.3"
 
 "@sideway/address@^4.1.3":
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
-  integrity sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.5.tgz#4bc149a0076623ced99ca8208ba780d65a99b9d5"
+  integrity sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
@@ -2239,9 +2185,9 @@
     svg-parser "^2.0.4"
 
 "@testing-library/dom@^9.0.0":
-  version "9.3.3"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.3.tgz#108c23a5b0ef51121c26ae92eb3179416b0434f5"
-  integrity sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==
+  version "9.3.4"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.4.tgz#50696ec28376926fec0a1bf87d9dbac5e27f60ce"
+  integrity sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
@@ -2268,9 +2214,9 @@
     redent "^3.0.0"
 
 "@testing-library/react@^14.0.0":
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-14.1.0.tgz#01d64915111db99b50f8361d51d7217606805989"
-  integrity sha512-hcvfZEEyO0xQoZeHmUbuMs7APJCGELpilL7bY+BaJaMP57aWc6q1etFwScnoZDheYjk4ESdlzPdQ33IbsKAK/A==
+  version "14.2.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-14.2.1.tgz#bf69aa3f71c36133349976a4a2da3687561d8310"
+  integrity sha512-sGdjws32ai5TLerhvzThYFbpnF9XtL65Cjf+gB0Dhr29BGqK+mAeN7SURSdu+eqgET4ANcWoC7FQpkaiGvBr+A==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^9.0.0"
@@ -2311,10 +2257,10 @@
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708"
   integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==
 
-"@types/babel__core@^7.20.4":
-  version "7.20.4"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.4.tgz#26a87347e6c6f753b3668398e34496d6d9ac6ac0"
-  integrity sha512-mLnSC22IC4vcWiuObSRjrLd9XcBTGf59vUSoq2jkQDJ/QQ8PMI9rSuzE+aEV8karUMbskw07bKYoUJCKTUaygg==
+"@types/babel__core@^7.20.5":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
+  integrity sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==
   dependencies:
     "@babel/parser" "^7.20.7"
     "@babel/types" "^7.20.7"
@@ -2323,9 +2269,9 @@
     "@types/babel__traverse" "*"
 
 "@types/babel__generator@*":
-  version "7.6.7"
-  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.7.tgz#a7aebf15c7bc0eb9abd638bdb5c0b8700399c9d0"
-  integrity sha512-6Sfsq+EaaLrw4RmdFWE9Onp63TOUue71AWb4Gpa6JxzgTYtimbM086WnYTy2U67AofR++QKCo08ZP6pwx8YFHQ==
+  version "7.6.8"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.8.tgz#f836c61f48b1346e7d2b0d93c6dacc5b9535d3ab"
+  integrity sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==
   dependencies:
     "@babel/types" "^7.0.0"
 
@@ -2338,24 +2284,12 @@
     "@babel/types" "^7.0.0"
 
 "@types/babel__traverse@*":
-  version "7.20.4"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.4.tgz#ec2c06fed6549df8bc0eb4615b683749a4a92e1b"
-  integrity sha512-mSM/iKUk5fDDrEV/e83qY+Cr3I1+Q3qqTuEn++HAWYjEa1+NxZr6CNrcJGf2ZTnq4HoFGC3zaTPZTobCzCFukA==
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.5.tgz#7b7502be0aa80cc4ef22978846b983edaafcd4dd"
+  integrity sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==
   dependencies:
     "@babel/types" "^7.20.7"
 
-"@types/chai-subset@^1.3.3":
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/@types/chai-subset/-/chai-subset-1.3.5.tgz#3fc044451f26985f45625230a7f22284808b0a9a"
-  integrity sha512-c2mPnw+xHtXDoHmdtcCXGwyLMiauiAyxWMzhGpqHC4nqI/Y5G2XhTampslK2rb59kpcuHon03UH8W6iYUzw88A==
-  dependencies:
-    "@types/chai" "*"
-
-"@types/chai@*", "@types/chai@^4.3.5":
-  version "4.3.10"
-  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.10.tgz#2ad2959d1767edee5b0e4efb1a0cd2b500747317"
-  integrity sha512-of+ICnbqjmFCiixUnqRulbylyXQrPqIGf/B3Jax1wIF3DvSheysQxAWvqHhZiW3IQrycvokcLcFQlveGp+vyNg==
-
 "@types/dompurify@^2.3.4":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.4.0.tgz#fd9706392a88e0e0e6d367f3588482d817df0ab9"
@@ -2364,14 +2298,14 @@
     "@types/trusted-types" "*"
 
 "@types/eslint@^8.4.5":
-  version "8.44.7"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.44.7.tgz#430b3cc96db70c81f405e6a08aebdb13869198f5"
-  integrity sha512-f5ORu2hcBbKei97U73mf+l9t4zTGl74IqZ0GQk4oVea/VS8tQZYkUveSYojk+frraAVYId0V2WC9O4PTNru2FQ==
+  version "8.56.5"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.5.tgz#94b88cab77588fcecdd0771a6d576fa1c0af9d02"
+  integrity sha512-u5/YPJHo1tvkSF2CE0USEkxon82Z5DBy2xR+qfyYNszpX9qcs4sT6uq2kBbj4BXY1+DBGDPnrhMZV3pKWGNukw==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
 
-"@types/estree@*", "@types/estree@^1.0.0":
+"@types/estree@*", "@types/estree@1.0.5", "@types/estree@^1.0.0":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
@@ -2382,14 +2316,14 @@
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
 "@types/googlepay@^0.7.0":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@types/googlepay/-/googlepay-0.7.4.tgz#271a1b3b191107713a392314bd39c2ce8a1b4b84"
-  integrity sha512-7j0iu4lUQfML5c+3zS8t/BNUJFH5MqKnMWEFD141eWsAXmmm6piJ0p+mJlM2Om61FYGe5pUWKRYB8HlZT7n4rQ==
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@types/googlepay/-/googlepay-0.7.5.tgz#b944cd0e4c49f4661c9b966cb45614eb7ae87a26"
+  integrity sha512-158egcRaqkMSpW6unyGV4uG4FpoCklRf3J5emCzOXSRVAohMfIuZ481JNvp4X6+KxoNjxWiGtMx5vb1YfQADPw==
 
 "@types/ini@^1.3.31":
-  version "1.3.33"
-  resolved "https://registry.yarnpkg.com/@types/ini/-/ini-1.3.33.tgz#d5f885e5da6dcb1a3ee9133d84a823d4a046fe25"
-  integrity sha512-YZDzdPTDxy084i5eVxUKfAHLenhAMVHupzCIg1dzFJNs6xp/UGyWk+8Lp1YxoZH+Hvv7C9OcHEDPndSMwaPVsQ==
+  version "1.3.34"
+  resolved "https://registry.yarnpkg.com/@types/ini/-/ini-1.3.34.tgz#99a69ecfccdfc3f6e91b411d4208aaa3c4cc9685"
+  integrity sha512-FafeLhwmWucTi31ZYg/6aHBZNyrogQ35aDvSW7zMAz3HMhUqQ4G/NBya8c5pe2jwoYsDFwra8O9/yZotong76g==
 
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.6"
@@ -2411,14 +2345,14 @@
     "@types/istanbul-lib-report" "*"
 
 "@types/jest@*":
-  version "29.5.8"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.8.tgz#ed5c256fe2bc7c38b1915ee5ef1ff24a3427e120"
-  integrity sha512-fXEFTxMV2Co8ZF5aYFJv+YeA08RTYJfhtN5c9JSv/mFEMe+xxjufCb+PHL+bJcMs/ebPUsBu+UNTEz+ydXrR6g==
+  version "29.5.12"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.12.tgz#7f7dc6eb4cf246d2474ed78744b05d06ce025544"
+  integrity sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==
   dependencies:
     expect "^29.0.0"
     pretty-format "^29.0.0"
 
-"@types/json-schema@*", "@types/json-schema@^7.0.9":
+"@types/json-schema@*", "@types/json-schema@^7.0.12":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
@@ -2429,9 +2363,9 @@
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
 "@types/jwplayer@^8.2.13":
-  version "8.28.3"
-  resolved "https://registry.yarnpkg.com/@types/jwplayer/-/jwplayer-8.28.3.tgz#2507322ebf8a91f261e7a1167219209cc6e46360"
-  integrity sha512-VU4yV+f7ddL3PPpDNNDKUDN0Qp4dcw7cNgBnQuokk0+GmR9r8BTWJcKyrnaL/IX1JuFbKVDjGm8cEnH14RvsVw==
+  version "8.28.4"
+  resolved "https://registry.yarnpkg.com/@types/jwplayer/-/jwplayer-8.28.4.tgz#ee2fa65a48cc6bfa6472464e92c90b0d6b053a04"
+  integrity sha512-do47k7UASeDSnaZRZU71OmVv6KZ4F1mgkXOmljbu2uiT38jeE+ecxaL7ZkWggYg6xGqqSYmkLrjl4E6aOBqoHA==
 
 "@types/lodash.merge@^4.6.6":
   version "4.6.9"
@@ -2441,14 +2375,14 @@
     "@types/lodash" "*"
 
 "@types/lodash@*", "@types/lodash@^4.14.175":
-  version "4.14.201"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.201.tgz#76f47cb63124e806824b6c18463daf3e1d480239"
-  integrity sha512-y9euML0cim1JrykNxADLfaG0FgD1g/yTHwUs/Jg9ZIU7WKj2/4IW9Lbb1WZbvck78W/lfGXFfe+u2EGfIJXdLQ==
+  version "4.14.202"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
+  integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
 
 "@types/luxon@^3.0.2":
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.3.4.tgz#cda5c0709a0c4c01ba059c40e62d76610479049a"
-  integrity sha512-H9OXxv4EzJwE75aTPKpiGXJq+y4LFxjpsdgKwSmr503P5DkWc3AG7VAFYrFNVvqemT5DfgZJV9itYhqBHSGujA==
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.4.2.tgz#e4fc7214a420173cea47739c33cdf10874694db7"
+  integrity sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==
 
 "@types/marked@^4.0.7":
   version "4.3.2"
@@ -2466,16 +2400,16 @@
   integrity sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==
 
 "@types/node@*":
-  version "20.9.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.9.1.tgz#9d578c610ce1e984adda087f685ace940954fe19"
-  integrity sha512-HhmzZh5LSJNS5O8jQKpJ/3ZcrrlG6L70hpGqMIAoM9YVD0YBRNWYsfwcXq8VnSjlNpCpgLzMXdiPo+dxcvSmiA==
+  version "20.11.25"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.11.25.tgz#0f50d62f274e54dd7a49f7704cc16bfbcccaf49f"
+  integrity sha512-TBHyJxk2b7HceLVGFcpAUjsa5zIdsPWlR6XHfyGzd0SFu+/NFgQgMAl96MSDZgQDvJAvV6BKsFOrt6zIL09JDw==
   dependencies:
     undici-types "~5.26.4"
 
 "@types/node@^18.15.3":
-  version "18.18.11"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.11.tgz#d43f6b92671eacfdd1fedb7a897388fb8880323f"
-  integrity sha512-c1vku6qnTeujJneYH94/4aq73XrVcsJe35UPyAsSok1ijiKrkRzK+AxQPSpNMUnC03roWBBwJx/9I8V7lQoxmA==
+  version "18.19.22"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.22.tgz#f622f92514b897e6b09903e97c16a0db8e94689f"
+  integrity sha512-p3pDIfuMg/aXBmhkyanPshdfJuX5c5+bQjYLIikPLXAUycEogij/c50n/C+8XOA5L93cU4ZRXtn+dNQGi0IZqQ==
   dependencies:
     undici-types "~5.26.4"
 
@@ -2490,18 +2424,18 @@
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
 "@types/payment@^2.1.4":
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/@types/payment/-/payment-2.1.6.tgz#03e3f71331113e038588b0b15c0fb2cd4cf30d15"
-  integrity sha512-YrgKdayP/F//M4yVpMLN5SDL3SrfYad7tQFwEcBCtO3Qxj8ijZFUpi2PlY92bDYMNmeiBsnZ5F0PKGIf27q1vQ==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/@types/payment/-/payment-2.1.7.tgz#02e6cb0cf8b576e72a35477111c1d754d3ac3d1f"
+  integrity sha512-J9BCWMJ+S2PBCSVTvdE+/ziiV73Cu3Wu6WQCC6D+1AO8vphGaQUM6hOy+UaKo84md5mrMcn7P9G/TmD9Y2922A==
 
-"@types/postcss-modules-local-by-default@^4.0.0":
+"@types/postcss-modules-local-by-default@^4.0.2":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.2.tgz#8fee7513dd1558d74713d817c183a33a6dc583f9"
   integrity sha512-CtYCcD+L+trB3reJPny+bKWKMzPfxEyQpKIwit7kErnOexf5/faaGpkFy4I5AwbV4hp1sk7/aTg0tt0B67VkLQ==
   dependencies:
     postcss "^8.0.0"
 
-"@types/postcss-modules-scope@^3.0.1":
+"@types/postcss-modules-scope@^3.0.4":
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/@types/postcss-modules-scope/-/postcss-modules-scope-3.0.4.tgz#f82d15ec9023c924b531a49e8087b32646233f41"
   integrity sha512-//ygSisVq9kVI0sqx3UPLzWIMCmtSVrzdljtuaAEJtGoGnpjBikZ2sXO5MpH9SnWX9HRfXxHifDAXcQjupWnIQ==
@@ -2509,28 +2443,21 @@
     postcss "^8.0.0"
 
 "@types/prop-types@*":
-  version "15.7.10"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.10.tgz#892afc9332c4d62a5ea7e897fe48ed2085bbb08a"
-  integrity sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A==
-
-"@types/react-dom@^18.0.0":
-  version "18.2.15"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.15.tgz#921af67f9ee023ac37ea84b1bc0cc40b898ea522"
-  integrity sha512-HWMdW+7r7MR5+PZqJF6YFNSCtjz1T0dsvo/f1BV6HkV+6erD/nA7wd9NM00KVG83zf2nJ7uATPO9ttdIPvi3gg==
-  dependencies:
-    "@types/react" "*"
+  version "15.7.11"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563"
+  integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
 
-"@types/react-dom@^18.2.7":
-  version "18.2.17"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.17.tgz#375c55fab4ae671bd98448dcfa153268d01d6f64"
-  integrity sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==
+"@types/react-dom@^18.0.0", "@types/react-dom@^18.2.7":
+  version "18.2.21"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.21.tgz#b8c81715cebdebb2994378616a8d54ace54f043a"
+  integrity sha512-gnvBA/21SA4xxqNXEwNiVcP0xSGHh/gi1VhWv9Bl46a0ItbTT5nFY+G9VSQpaG/8N/qdJpJ+vftQ4zflTtnjLw==
   dependencies:
     "@types/react" "*"
 
 "@types/react-helmet@^6.1.2":
-  version "6.1.9"
-  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.9.tgz#e79e0def2ad4047cb67e83c5be7cfb3d2121615a"
-  integrity sha512-nuOeTefP4yPTWHvjGksCBKb/4hsgJxSX7aSTjTIDFXJIkZ6Wo2Y4/cmE1FO9OlYBrHjKOer/0zLwY7s4qiQBtw==
+  version "6.1.11"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.11.tgz#8cafcafff38f75361f451563ba7b406b0c5d3907"
+  integrity sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==
   dependencies:
     "@types/react" "*"
 
@@ -2542,9 +2469,9 @@
     "@types/react" "*"
 
 "@types/react@*", "@types/react@^18.2.15":
-  version "18.2.37"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.37.tgz#0f03af69e463c0f19a356c2660dbca5d19c44cae"
-  integrity sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==
+  version "18.2.64"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.64.tgz#3700fbb6b2fa60a6868ec1323ae4cbd446a2197d"
+  integrity sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -2565,14 +2492,14 @@
     "@types/node" "*"
 
 "@types/scheduler@*":
-  version "0.16.6"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.6.tgz#eb26db6780c513de59bee0b869ef289ad3068711"
-  integrity sha512-Vlktnchmkylvc9SnwwwozTv04L/e1NykF5vgoQ0XTmI8DD+wxfjQuHuvHS3p0r2jz2x2ghPs2h1FVeDirIteWA==
+  version "0.16.8"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
+  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
 
-"@types/semver@^7.3.12":
-  version "7.5.6"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.6.tgz#c65b2bfce1bec346582c07724e3f8c1017a20339"
-  integrity sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==
+"@types/semver@^7.5.0":
+  version "7.5.8"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
+  integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
 
 "@types/stack-utils@^2.0.0":
   version "2.0.3"
@@ -2592,9 +2519,9 @@
     "@types/jest" "*"
 
 "@types/trusted-types@*", "@types/trusted-types@^2.0.2":
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.6.tgz#d12451beaeb9c3838f12024580dc500b7e88b0ad"
-  integrity sha512-HYtNooPvUY9WAVRBr4u+4Qa9fYD1ze2IUlAD3HoA6oehn1taGwBx3Oa52U4mTslTS+GAExKpaFu39Y5xUEwfjg==
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
 
 "@types/uuid@9.0.1":
   version "9.0.1"
@@ -2607,9 +2534,9 @@
   integrity sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==
 
 "@types/yargs@^17.0.8":
-  version "17.0.31"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.31.tgz#8fd0089803fd55d8a285895a18b88cb71a99683c"
-  integrity sha512-bocYSx4DI8TmdlvxqGpVNXOgCNR1Jj0gNPhhAY+iz1rgKDAaYrAYdFYnhDV1IFuiuVc9HkOwyDcFxaTElF3/wg==
+  version "17.0.32"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.32.tgz#030774723a2f7faafebf645f4e5a48371dca6229"
+  integrity sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==
   dependencies:
     "@types/yargs-parser" "*"
 
@@ -2620,94 +2547,101 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/eslint-plugin@^5.17.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
-  integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==
-  dependencies:
-    "@eslint-community/regexpp" "^4.4.0"
-    "@typescript-eslint/scope-manager" "5.62.0"
-    "@typescript-eslint/type-utils" "5.62.0"
-    "@typescript-eslint/utils" "5.62.0"
+"@typescript-eslint/eslint-plugin@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.1.1.tgz#dd71fc5c7ecec745ca26ece506d84d203a205c0e"
+  integrity sha512-zioDz623d0RHNhvx0eesUmGfIjzrk18nSBC8xewepKXbBvN/7c1qImV7Hg8TI1URTxKax7/zxfxj3Uph8Chcuw==
+  dependencies:
+    "@eslint-community/regexpp" "^4.5.1"
+    "@typescript-eslint/scope-manager" "7.1.1"
+    "@typescript-eslint/type-utils" "7.1.1"
+    "@typescript-eslint/utils" "7.1.1"
+    "@typescript-eslint/visitor-keys" "7.1.1"
     debug "^4.3.4"
     graphemer "^1.4.0"
-    ignore "^5.2.0"
-    natural-compare-lite "^1.4.0"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/parser@^5.17.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.62.0.tgz#1b63d082d849a2fcae8a569248fbe2ee1b8a56c7"
-  integrity sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==
-  dependencies:
-    "@typescript-eslint/scope-manager" "5.62.0"
-    "@typescript-eslint/types" "5.62.0"
-    "@typescript-eslint/typescript-estree" "5.62.0"
+    ignore "^5.2.4"
+    natural-compare "^1.4.0"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/parser@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.1.1.tgz#6a9d0a5c9ccdf5dbd3cb8c949728c64e24e07d1f"
+  integrity sha512-ZWUFyL0z04R1nAEgr9e79YtV5LbafdOtN7yapNbn1ansMyaegl2D4bL7vHoJ4HPSc4CaLwuCVas8CVuneKzplQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "7.1.1"
+    "@typescript-eslint/types" "7.1.1"
+    "@typescript-eslint/typescript-estree" "7.1.1"
+    "@typescript-eslint/visitor-keys" "7.1.1"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
-  integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==
+"@typescript-eslint/scope-manager@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.1.1.tgz#9e301803ff8e21a74f50c6f89a4baccad9a48f93"
+  integrity sha512-cirZpA8bJMRb4WZ+rO6+mnOJrGFDd38WoXCEI57+CYBqta8Yc8aJym2i7vyqLL1vVYljgw0X27axkUXz32T8TA==
   dependencies:
-    "@typescript-eslint/types" "5.62.0"
-    "@typescript-eslint/visitor-keys" "5.62.0"
+    "@typescript-eslint/types" "7.1.1"
+    "@typescript-eslint/visitor-keys" "7.1.1"
 
-"@typescript-eslint/type-utils@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz#286f0389c41681376cdad96b309cedd17d70346a"
-  integrity sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==
+"@typescript-eslint/type-utils@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.1.1.tgz#aee820d5bedd39b83c18585a526cc520ddb7a226"
+  integrity sha512-5r4RKze6XHEEhlZnJtR3GYeCh1IueUHdbrukV2KSlLXaTjuSfeVF8mZUVPLovidCuZfbVjfhi4c0DNSa/Rdg5g==
   dependencies:
-    "@typescript-eslint/typescript-estree" "5.62.0"
-    "@typescript-eslint/utils" "5.62.0"
+    "@typescript-eslint/typescript-estree" "7.1.1"
+    "@typescript-eslint/utils" "7.1.1"
     debug "^4.3.4"
-    tsutils "^3.21.0"
+    ts-api-utils "^1.0.1"
 
-"@typescript-eslint/types@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
-  integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
+"@typescript-eslint/types@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.1.1.tgz#ca33ba7cf58224fb46a84fea62593c2c53cd795f"
+  integrity sha512-KhewzrlRMrgeKm1U9bh2z5aoL4s7K3tK5DwHDn8MHv0yQfWFz/0ZR6trrIHHa5CsF83j/GgHqzdbzCXJ3crx0Q==
 
-"@typescript-eslint/typescript-estree@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
-  integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
+"@typescript-eslint/typescript-estree@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.1.1.tgz#09c54af0151a1b05d0875c0fc7fe2ec7a2476ece"
+  integrity sha512-9ZOncVSfr+sMXVxxca2OJOPagRwT0u/UHikM2Rd6L/aB+kL/QAuTnsv6MeXtjzCJYb8PzrXarypSGIPx3Jemxw==
   dependencies:
-    "@typescript-eslint/types" "5.62.0"
-    "@typescript-eslint/visitor-keys" "5.62.0"
+    "@typescript-eslint/types" "7.1.1"
+    "@typescript-eslint/visitor-keys" "7.1.1"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
-    semver "^7.3.7"
-    tsutils "^3.21.0"
+    minimatch "9.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
 
-"@typescript-eslint/utils@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
-  integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
+"@typescript-eslint/utils@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.1.1.tgz#bdeeb789eee4af5d3fb5400a69566d4dbf97ff3b"
+  integrity sha512-thOXM89xA03xAE0lW7alstvnyoBUbBX38YtY+zAUcpRPcq9EIhXPuJ0YTv948MbzmKh6e1AUszn5cBFK49Umqg==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@types/json-schema" "^7.0.12"
+    "@types/semver" "^7.5.0"
+    "@typescript-eslint/scope-manager" "7.1.1"
+    "@typescript-eslint/types" "7.1.1"
+    "@typescript-eslint/typescript-estree" "7.1.1"
+    semver "^7.5.4"
+
+"@typescript-eslint/visitor-keys@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.1.1.tgz#e6538a58c9b157f03bcbb29e3b6a92fe39a6ab0d"
+  integrity sha512-yTdHDQxY7cSoCcAtiBzVzxleJhkGB9NncSIyMYe2+OGON1ZsP9zOPws/Pqgopa65jvknOjlk/w7ulPlZ78PiLQ==
   dependencies:
-    "@eslint-community/eslint-utils" "^4.2.0"
-    "@types/json-schema" "^7.0.9"
-    "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.62.0"
-    "@typescript-eslint/types" "5.62.0"
-    "@typescript-eslint/typescript-estree" "5.62.0"
-    eslint-scope "^5.1.1"
-    semver "^7.3.7"
-
-"@typescript-eslint/visitor-keys@5.62.0":
-  version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
-  integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
-  dependencies:
-    "@typescript-eslint/types" "5.62.0"
-    eslint-visitor-keys "^3.3.0"
+    "@typescript-eslint/types" "7.1.1"
+    eslint-visitor-keys "^3.4.1"
+
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
+  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
 "@vite-pwa/assets-generator@^0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@vite-pwa/assets-generator/-/assets-generator-0.2.3.tgz#cae0a853d0172e30e1083493a3e1ac5413fb04ef"
-  integrity sha512-tfCQamgaIv13bPUQ/tLkzXz2PqxgjYbJdQ/yTPEw9SF/pYGEvSy6pR0ABIsAIeRaOlhoiHnX77CtGcfEeGKIiw==
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@vite-pwa/assets-generator/-/assets-generator-0.2.4.tgz#ffd5dee762f6e98eaff9938fd52591cb04d8dbc7"
+  integrity sha512-DXyPLPR/IpbZPSpo1amZEPghY/ziIwpTUKNaz0v1xG+ELzCXmrVQhVzEMqr2JLSqRxjc+UzKfGJA/YdUuaao3w==
   dependencies:
     cac "^6.7.14"
     colorette "^2.0.20"
@@ -2717,14 +2651,14 @@
     unconfig "^0.3.11"
 
 "@vitejs/plugin-react@^4.0.4":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.2.0.tgz#d71352b1a443c09c7aae8f278dd071ab3d9d8490"
-  integrity sha512-+MHTH/e6H12kRp5HUkzOGqPMksezRMmW+TNzlh/QXfI8rRf6l2Z2yH/v12no1UvTwhZgEDMuQ7g7rrfMseU6FQ==
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz#744d8e4fcb120fc3dbaa471dadd3483f5a304bb9"
+  integrity sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==
   dependencies:
-    "@babel/core" "^7.23.3"
+    "@babel/core" "^7.23.5"
     "@babel/plugin-transform-react-jsx-self" "^7.23.3"
     "@babel/plugin-transform-react-jsx-source" "^7.23.3"
-    "@types/babel__core" "^7.20.4"
+    "@types/babel__core" "^7.20.5"
     react-refresh "^0.14.0"
 
 "@vitest/coverage-v8@^0.33.0":
@@ -2744,106 +2678,96 @@
     test-exclude "^6.0.0"
     v8-to-istanbul "^9.1.0"
 
-"@vitest/expect@0.34.6":
-  version "0.34.6"
-  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-0.34.6.tgz#608a7b7a9aa3de0919db99b4cc087340a03ea77e"
-  integrity sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==
+"@vitest/expect@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-1.3.1.tgz#d4c14b89c43a25fd400a6b941f51ba27fe0cb918"
+  integrity sha512-xofQFwIzfdmLLlHa6ag0dPV8YsnKOCP1KdAeVVh34vSjN2dcUiXYCD9htu/9eM7t8Xln4v03U9HLxLpPlsXdZw==
   dependencies:
-    "@vitest/spy" "0.34.6"
-    "@vitest/utils" "0.34.6"
+    "@vitest/spy" "1.3.1"
+    "@vitest/utils" "1.3.1"
     chai "^4.3.10"
 
-"@vitest/runner@0.34.6":
-  version "0.34.6"
-  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-0.34.6.tgz#6f43ca241fc96b2edf230db58bcde5b974b8dcaf"
-  integrity sha512-1CUQgtJSLF47NnhN+F9X2ycxUP0kLHQ/JWvNHbeBfwW8CzEGgeskzNnHDyv1ieKTltuR6sdIHV+nmR6kPxQqzQ==
+"@vitest/runner@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-1.3.1.tgz#e7f96cdf74842934782bfd310eef4b8695bbfa30"
+  integrity sha512-5FzF9c3jG/z5bgCnjr8j9LNq/9OxV2uEBAITOXfoe3rdZJTdO7jzThth7FXv/6b+kdY65tpRQB7WaKhNZwX+Kg==
   dependencies:
-    "@vitest/utils" "0.34.6"
-    p-limit "^4.0.0"
+    "@vitest/utils" "1.3.1"
+    p-limit "^5.0.0"
     pathe "^1.1.1"
 
-"@vitest/snapshot@0.34.6":
-  version "0.34.6"
-  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-0.34.6.tgz#b4528cf683b60a3e8071cacbcb97d18b9d5e1d8b"
-  integrity sha512-B3OZqYn6k4VaN011D+ve+AA4whM4QkcwcrwaKwAbyyvS/NB1hCWjFIBQxAQQSQir9/RtyAAGuq+4RJmbn2dH4w==
+"@vitest/snapshot@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-1.3.1.tgz#193a5d7febf6ec5d22b3f8c5a093f9e4322e7a88"
+  integrity sha512-EF++BZbt6RZmOlE3SuTPu/NfwBF6q4ABS37HHXzs2LUVPBLx2QoY/K0fKpRChSo8eLiuxcbCVfqKgx/dplCDuQ==
   dependencies:
-    magic-string "^0.30.1"
+    magic-string "^0.30.5"
     pathe "^1.1.1"
-    pretty-format "^29.5.0"
+    pretty-format "^29.7.0"
 
-"@vitest/spy@0.34.6":
-  version "0.34.6"
-  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-0.34.6.tgz#b5e8642a84aad12896c915bce9b3cc8cdaf821df"
-  integrity sha512-xaCvneSaeBw/cz8ySmF7ZwGvL0lBjfvqc1LpQ/vcdHEvpLn3Ff1vAvjw+CoGn0802l++5L/pxb7whwcWAw+DUQ==
+"@vitest/spy@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-1.3.1.tgz#814245d46d011b99edd1c7528f5725c64e85a88b"
+  integrity sha512-xAcW+S099ylC9VLU7eZfdT9myV67Nor9w9zhf0mGCYJSO+zM2839tOeROTdikOi/8Qeusffvxb/MyBSOja1Uig==
   dependencies:
-    tinyspy "^2.1.1"
+    tinyspy "^2.2.0"
 
-"@vitest/utils@0.34.6":
-  version "0.34.6"
-  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-0.34.6.tgz#38a0a7eedddb8e7291af09a2409cb8a189516968"
-  integrity sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==
+"@vitest/utils@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-1.3.1.tgz#7b05838654557544f694a372de767fcc9594d61a"
+  integrity sha512-d3Waie/299qqRyHTm2DjADeTaNdNSVsnwHPWrs20JMpjh6eiVq7ggggweO8rc4arhf6rRkWuHKwvxGvejUXZZQ==
   dependencies:
-    diff-sequences "^29.4.3"
-    loupe "^2.3.6"
-    pretty-format "^29.5.0"
+    diff-sequences "^29.6.3"
+    estree-walker "^3.0.3"
+    loupe "^2.3.7"
+    pretty-format "^29.7.0"
 
-"@vue/compiler-core@3.3.8":
-  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.8.tgz#301bb60d0245265a88ed5b30e200fbf223acb313"
-  integrity sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==
+"@vue/compiler-core@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.21.tgz#868b7085378fc24e58c9aed14c8d62110a62be1a"
+  integrity sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==
   dependencies:
-    "@babel/parser" "^7.23.0"
-    "@vue/shared" "3.3.8"
+    "@babel/parser" "^7.23.9"
+    "@vue/shared" "3.4.21"
+    entities "^4.5.0"
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
-"@vue/compiler-dom@3.3.8":
-  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.8.tgz#09d832514b9b8d9415a3816b065d69dbefcc7e9b"
-  integrity sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==
+"@vue/compiler-dom@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz#0077c355e2008207283a5a87d510330d22546803"
+  integrity sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==
   dependencies:
-    "@vue/compiler-core" "3.3.8"
-    "@vue/shared" "3.3.8"
+    "@vue/compiler-core" "3.4.21"
+    "@vue/shared" "3.4.21"
 
 "@vue/compiler-sfc@^3.3.4":
-  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.8.tgz#40b18e48aa00260950964d1d72157668521be0e1"
-  integrity sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==
-  dependencies:
-    "@babel/parser" "^7.23.0"
-    "@vue/compiler-core" "3.3.8"
-    "@vue/compiler-dom" "3.3.8"
-    "@vue/compiler-ssr" "3.3.8"
-    "@vue/reactivity-transform" "3.3.8"
-    "@vue/shared" "3.3.8"
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz#4af920dc31ab99e1ff5d152b5fe0ad12181145b2"
+  integrity sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==
+  dependencies:
+    "@babel/parser" "^7.23.9"
+    "@vue/compiler-core" "3.4.21"
+    "@vue/compiler-dom" "3.4.21"
+    "@vue/compiler-ssr" "3.4.21"
+    "@vue/shared" "3.4.21"
     estree-walker "^2.0.2"
-    magic-string "^0.30.5"
-    postcss "^8.4.31"
+    magic-string "^0.30.7"
+    postcss "^8.4.35"
     source-map-js "^1.0.2"
 
-"@vue/compiler-ssr@3.3.8":
-  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.3.8.tgz#136eed54411e4694815d961048a237191063fbce"
-  integrity sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==
-  dependencies:
-    "@vue/compiler-dom" "3.3.8"
-    "@vue/shared" "3.3.8"
-
-"@vue/reactivity-transform@3.3.8":
-  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.8.tgz#6d07649013b0be5c670f0ab6cc7ddd3150ad03f2"
-  integrity sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==
+"@vue/compiler-ssr@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz#b84ae64fb9c265df21fc67f7624587673d324fef"
+  integrity sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==
   dependencies:
-    "@babel/parser" "^7.23.0"
-    "@vue/compiler-core" "3.3.8"
-    "@vue/shared" "3.3.8"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.5"
+    "@vue/compiler-dom" "3.4.21"
+    "@vue/shared" "3.4.21"
 
-"@vue/shared@3.3.8":
-  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.8.tgz#f044942142e1d3a395f24132e6203a784838542d"
-  integrity sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==
+"@vue/shared@3.4.21":
+  version "3.4.21"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.21.tgz#de526a9059d0a599f0b429af7037cd0c3ed7d5a1"
+  integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
 
 "@xmldom/xmldom@0.8.10":
   version "0.8.10"
@@ -2868,32 +2792,22 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
-acorn-jsx@^5.3.1:
+acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn-walk@^8.1.1, acorn-walk@^8.2.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.0.tgz#2097665af50fd0cf7a2dfccd2b9368964e66540f"
-  integrity sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==
+acorn-walk@^8.1.1, acorn-walk@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.2.tgz#7703af9415f1b6db9315d6895503862e231d34aa"
+  integrity sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==
 
 acorn@8.10.0:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
   integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
 
-acorn@^7.4.0:
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
-  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
-
-acorn@^8.10.0, acorn@^8.4.1, acorn@^8.8.2, acorn@^8.9.0:
-  version "8.11.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
-  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
-
-acorn@^8.11.3:
+acorn@^8.11.3, acorn@^8.4.1, acorn@^8.8.2, acorn@^8.9.0:
   version "8.11.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
   integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
@@ -2905,7 +2819,7 @@ agent-base@6:
   dependencies:
     debug "4"
 
-ajv@^6.10.0, ajv@^6.12.4:
+ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -2926,9 +2840,9 @@ ajv@^8.0.1, ajv@^8.6.0:
     uri-js "^4.2.2"
 
 allure-commandline@^2.17.2:
-  version "2.24.1"
-  resolved "https://registry.yarnpkg.com/allure-commandline/-/allure-commandline-2.24.1.tgz#28eb1f28c031fa2ac0742fe85798d29202db678e"
-  integrity sha512-eNto3ipBq+O2B/f8/OwiS3E8R7jYENs3qv8jT7wMZmziYLANsISC9tX/FfEqR3FDiQlEOjkP7iyTEZ3ph53FPg==
+  version "2.27.0"
+  resolved "https://registry.yarnpkg.com/allure-commandline/-/allure-commandline-2.27.0.tgz#abde1a14d4b95e7f63dd727a4bb2e5df44e03fe0"
+  integrity sha512-KuxKEZ2Joa0LCcM9w8AWgWJgmB5d3VqSgaJhPC6pEsdRwAObT/JE8NY0u4mJ61+c2mhAPGIetGV9jgP3gzxgIg==
 
 allure-js-commons@^1.3.2:
   version "1.3.2"
@@ -2957,12 +2871,12 @@ ansi-escapes@^3.2.0:
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
   integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
 
-ansi-escapes@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-5.0.0.tgz#b6a0caf0eef0c41af190e9a749e0c00ec04bb2a6"
-  integrity sha512-5GFMVX8HqE/TB+FuBJGuO5XG0WrsA6ptUqoODaT/n9mmUaZFkqnBueB4leqGBCmrUHnCnC4PCZTCd0E7QQ83bA==
+ansi-escapes@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-6.2.0.tgz#8a13ce75286f417f1963487d86ba9f90dccf9947"
+  integrity sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==
   dependencies:
-    type-fest "^1.0.2"
+    type-fest "^3.0.0"
 
 ansi-regex@^3.0.0:
   version "3.0.1"
@@ -3003,7 +2917,7 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
-ansi-styles@^6.0.0, ansi-styles@^6.1.0:
+ansi-styles@^6.0.0, ansi-styles@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
@@ -3047,13 +2961,13 @@ aria-query@^5.0.0:
   dependencies:
     dequal "^2.0.3"
 
-array-buffer-byte-length@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead"
-  integrity sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==
+array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
+  integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
   dependencies:
-    call-bind "^1.0.2"
-    is-array-buffer "^3.0.1"
+    call-bind "^1.0.5"
+    is-array-buffer "^3.0.4"
 
 array-differ@^3.0.0:
   version "3.0.0"
@@ -3093,16 +3007,38 @@ array-uniq@^1.0.1:
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
   integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
 
-array.prototype.findlastindex@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz#b37598438f97b579166940814e2c0493a4f50207"
-  integrity sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==
+array.prototype.filter@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.filter/-/array.prototype.filter-1.0.3.tgz#423771edeb417ff5914111fff4277ea0624c0d0e"
+  integrity sha512-VizNcj/RGJiUyQBgzwxzE5oHdeuXY5hSbbmKMlphj1cy1Vl7Pn2asCGbSrru6hSQjmCzqTBPVWAF/whmEOVHbw==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
-    es-shim-unscopables "^1.0.0"
-    get-intrinsic "^1.2.1"
+    es-array-method-boxes-properly "^1.0.0"
+    is-string "^1.0.7"
+
+array.prototype.findlast@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.4.tgz#eeb9e45fc894055c82e5675c463e8077b827ad36"
+  integrity sha512-BMtLxpV+8BD+6ZPFIWmnUBpQoy+A+ujcg4rhp2iwCRJYA7PEh2MS4NL3lz8EiDlLrJPp2hg9qWihr5pd//jcGw==
+  dependencies:
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.3.0"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.findlastindex@^1.2.3:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.4.tgz#d1c50f0b3a9da191981ff8942a0aedd82794404f"
+  integrity sha512-hzvSHUshSpCflDR1QMUBLHGHP1VIEBegT4pix9H/Z92Xw3ySoy6c2qh7lJWTJnRJ8JCZ9bJNCgTyYaJGcJu6xQ==
+  dependencies:
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.3.0"
+    es-shim-unscopables "^1.0.2"
 
 array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
   version "1.3.2"
@@ -3114,7 +3050,7 @@ array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
     es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
-array.prototype.flatmap@^1.3.1, array.prototype.flatmap@^1.3.2:
+array.prototype.flatmap@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
   integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
@@ -3124,28 +3060,39 @@ array.prototype.flatmap@^1.3.1, array.prototype.flatmap@^1.3.2:
     es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
-array.prototype.tosorted@^1.1.1:
+array.prototype.toreversed@^1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.2.tgz#620eff7442503d66c799d95503f82b475745cefd"
-  integrity sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==
+  resolved "https://registry.yarnpkg.com/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz#b989a6bf35c4c5051e1dc0325151bf8088954eba"
+  integrity sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
-    get-intrinsic "^1.2.1"
 
-arraybuffer.prototype.slice@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz#98bd561953e3e74bb34938e77647179dfe6e9f12"
-  integrity sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==
+array.prototype.tosorted@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz#c8c89348337e51b8a3c48a9227f9ce93ceedcba8"
+  integrity sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==
   dependencies:
-    array-buffer-byte-length "^1.0.0"
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
-    get-intrinsic "^1.2.1"
-    is-array-buffer "^3.0.2"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.1.0"
+    es-shim-unscopables "^1.0.2"
+
+arraybuffer.prototype.slice@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz#097972f4255e41bc3425e37dc3f6421cf9aefde6"
+  integrity sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.2.1"
+    get-intrinsic "^1.2.3"
+    is-array-buffer "^3.0.4"
     is-shared-array-buffer "^1.0.2"
 
 arrify@2.0.1, arrify@^2.0.1:
@@ -3207,10 +3154,12 @@ at-least-node@^1.0.0:
   resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
   integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
 
-available-typed-arrays@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
-  integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
+available-typed-arrays@^1.0.6, available-typed-arrays@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+  dependencies:
+    possible-typed-array-names "^1.0.0"
 
 aws-iot-device-sdk@^2.2.6:
   version "2.2.13"
@@ -3251,9 +3200,9 @@ axios@^0.26.0:
     follow-redirects "^1.14.8"
 
 b4a@^1.6.4:
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/b4a/-/b4a-1.6.4.tgz#ef1c1422cae5ce6535ec191baeed7567443f36c9"
-  integrity sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==
+  version "1.6.6"
+  resolved "https://registry.yarnpkg.com/b4a/-/b4a-1.6.6.tgz#a4cc349a3851987c3c4ac2d7785c18744f6da9ba"
+  integrity sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==
 
 babel-plugin-macros@^3.1.0:
   version "3.1.0"
@@ -3264,29 +3213,29 @@ babel-plugin-macros@^3.1.0:
     cosmiconfig "^7.0.0"
     resolve "^1.19.0"
 
-babel-plugin-polyfill-corejs2@^0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.6.tgz#b2df0251d8e99f229a8e60fc4efa9a68b41c8313"
-  integrity sha512-jhHiWVZIlnPbEUKSSNb9YoWcQGdlTLq7z1GHL4AjFxaoOUMuuEVJ+Y4pAaQUGOGk93YsVCKPbqbfw3m0SM6H8Q==
+babel-plugin-polyfill-corejs2@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.8.tgz#dbcc3c8ca758a290d47c3c6a490d59429b0d2269"
+  integrity sha512-OtIuQfafSzpo/LhnJaykc0R/MMnuLSSVjVYy9mHArIZ9qTCSZ6TpWCuEKZYVoN//t8HqBNScHrOtCrIK5IaGLg==
   dependencies:
     "@babel/compat-data" "^7.22.6"
-    "@babel/helper-define-polyfill-provider" "^0.4.3"
+    "@babel/helper-define-polyfill-provider" "^0.5.0"
     semver "^6.3.1"
 
-babel-plugin-polyfill-corejs3@^0.8.5:
-  version "0.8.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.6.tgz#25c2d20002da91fe328ff89095c85a391d6856cf"
-  integrity sha512-leDIc4l4tUgU7str5BWLS2h8q2N4Nf6lGZP6UrNDxdtfF2g69eJ5L0H7S8A5Ln/arfFAfHor5InAdZuIOwZdgQ==
+babel-plugin-polyfill-corejs3@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.9.0.tgz#9eea32349d94556c2ad3ab9b82ebb27d4bf04a81"
+  integrity sha512-7nZPG1uzK2Ymhy/NbaOWTg3uibM2BmGASS4vHS4szRZAIR8R6GwA/xAujpdrXU5iyklrimWnLWU+BLF9suPTqg==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.4.3"
-    core-js-compat "^3.33.1"
+    "@babel/helper-define-polyfill-provider" "^0.5.0"
+    core-js-compat "^3.34.0"
 
-babel-plugin-polyfill-regenerator@^0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.3.tgz#d4c49e4b44614607c13fb769bcd85c72bb26a4a5"
-  integrity sha512-8sHeDOmXC8csczMrYEOf0UTNa4yE2SxV5JGeT/LP1n0OYVDUUFPxG9vdk2AlDlIit4t+Kf0xCtpgXPBwnn/9pw==
+babel-plugin-polyfill-regenerator@^0.5.5:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.5.tgz#8b0c8fc6434239e5d7b8a9d1f832bb2b0310f06a"
+  integrity sha512-OJGYZlhLqBh2DDHeqAxWB1XIvr49CxiJ2gIt61/PU55CQK4Z58OzMqjDe1zwQdQk+rBYsRc+1rJmdajM3gimHg==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.4.3"
+    "@babel/helper-define-polyfill-provider" "^0.5.0"
 
 babel-plugin-transform-typescript-metadata@^0.3.2:
   version "0.3.2"
@@ -3305,15 +3254,42 @@ balanced-match@^2.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
   integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
 
+bare-events@^2.0.0, bare-events@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/bare-events/-/bare-events-2.2.1.tgz#7b6d421f26a7a755e20bf580b727c84b807964c1"
+  integrity sha512-9GYPpsPFvrWBkelIhOhTWtkeZxVxZOdb3VnFTCzlOo3OjvmTvzLoZFUT8kNFACx0vJej6QPney1Cf9BvzCNE/A==
+
+bare-fs@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/bare-fs/-/bare-fs-2.2.1.tgz#c1985d8d3e07a178956b072d3af67cb8c1fa9391"
+  integrity sha512-+CjmZANQDFZWy4PGbVdmALIwmt33aJg8qTkVjClU6X4WmZkTPBDxRHiBn7fpqEWEfF3AC2io++erpViAIQbSjg==
+  dependencies:
+    bare-events "^2.0.0"
+    bare-os "^2.0.0"
+    bare-path "^2.0.0"
+    streamx "^2.13.0"
+
+bare-os@^2.0.0, bare-os@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/bare-os/-/bare-os-2.2.0.tgz#24364692984d0bd507621754781b31d7872736b2"
+  integrity sha512-hD0rOPfYWOMpVirTACt4/nK8mC55La12K5fY1ij8HAdfQakD62M+H4o4tpfKzVGLgRDTuk3vjA4GqGXXCeFbag==
+
+bare-path@^2.0.0, bare-path@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/bare-path/-/bare-path-2.1.0.tgz#830f17fd39842813ca77d211ebbabe238a88cb4c"
+  integrity sha512-DIIg7ts8bdRKwJRJrUMy/PICEaQZaPGZ26lsSx9MJSwIhSrcdHn7/C8W+XmnG/rKi6BaRcz+JO00CjZteybDtw==
+  dependencies:
+    bare-os "^2.1.0"
+
 base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
 big-integer@^1.6.16:
-  version "1.6.51"
-  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
-  integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
+  version "1.6.52"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.52.tgz#60a887f3047614a8e1bffe5d7173490a97dc8c85"
+  integrity sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==
 
 binary-extensions@^2.0.0:
   version "2.2.0"
@@ -3431,23 +3407,13 @@ browser-stdout@1.3.1:
   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
   integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
 
-browserslist@^4.21.9, browserslist@^4.22.1:
-  version "4.22.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619"
-  integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==
-  dependencies:
-    caniuse-lite "^1.0.30001541"
-    electron-to-chromium "^1.4.535"
-    node-releases "^2.0.13"
-    update-browserslist-db "^1.0.13"
-
-browserslist@^4.22.2:
-  version "4.22.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.2.tgz#704c4943072bd81ea18997f3bd2180e89c77874b"
-  integrity sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==
+browserslist@^4.22.2, browserslist@^4.22.3:
+  version "4.23.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
+  integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
   dependencies:
-    caniuse-lite "^1.0.30001565"
-    electron-to-chromium "^1.4.601"
+    caniuse-lite "^1.0.30001587"
+    electron-to-chromium "^1.4.668"
     node-releases "^2.0.14"
     update-browserslist-db "^1.0.13"
 
@@ -3487,14 +3453,16 @@ cac@^6.7.14:
   resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
   integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
 
-call-bind@^1.0.0, call-bind@^1.0.2, call-bind@^1.0.4, call-bind@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.5.tgz#6fa2b7845ce0ea49bf4d8b9ef64727a2c2e2e513"
-  integrity sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==
+call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
   dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
     function-bind "^1.1.2"
-    get-intrinsic "^1.2.1"
-    set-function-length "^1.1.1"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
 
 callsite@^1.0.0:
   version "1.0.0"
@@ -3551,15 +3519,10 @@ camelcase@^6.0.0, camelcase@^6.2.0, camelcase@^6.3.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-caniuse-lite@^1.0.30001541:
-  version "1.0.30001563"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001563.tgz#aa68a64188903e98f36eb9c56e48fba0c1fe2a32"
-  integrity sha512-na2WUmOxnwIZtwnFI2CZ/3er0wdNzU7hN+cPYz/z2ajHThnkWjNBOpEPP4n+4r2WPM847JaMotaJE3bnfzjyKw==
-
-caniuse-lite@^1.0.30001565:
-  version "1.0.30001576"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz#893be772cf8ee6056d6c1e2d07df365b9ec0a5c4"
-  integrity sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==
+caniuse-lite@^1.0.30001587:
+  version "1.0.30001596"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001596.tgz#da06b79c3d9c3d9958eb307aa832ac68ead79bee"
+  integrity sha512-zpkZ+kEr6We7w63ORkoJ2pOfBwBkY/bJrG/UZ90qNb45Isblu8wzDgevEOrRL1r9dWayHjYiiyCMEXPn4DweGQ==
 
 chai-deep-match@1.2.1:
   version "1.2.1"
@@ -3584,9 +3547,9 @@ chai@4.3.6:
     type-detect "^4.0.5"
 
 chai@^4.3.10:
-  version "4.3.10"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.10.tgz#d784cec635e3b7e2ffb66446a63b4e33bd390384"
-  integrity sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-4.4.1.tgz#3603fa6eba35425b0f2ac91a009fe924106e50d1"
+  integrity sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==
   dependencies:
     assertion-error "^1.1.0"
     check-error "^1.0.3"
@@ -3663,7 +3626,7 @@ cheerio@^1.0.0-rc.2:
     parse5 "^7.0.0"
     parse5-htmlparser2-tree-adapter "^7.0.0"
 
-chokidar@3.5.3, "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
+chokidar@3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -3678,6 +3641,21 @@ chokidar@3.5.3, "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chownr@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -3704,9 +3682,9 @@ class-transformer@0.5.1:
   integrity sha512-SQa1Ws6hUbfC98vKGxZH3KFY0Y1lm5Zm0SY8XX9zbK7FJCyVEac3ATW0RIpwzW+oOfmHE5PMPufDG9hCfoEOMw==
 
 classnames@^2.3.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
-  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 
 clean-css@^4.2.1:
   version "4.2.4"
@@ -3716,9 +3694,9 @@ clean-css@^4.2.1:
     source-map "~0.6.0"
 
 clean-css@^5.2.2:
-  version "5.3.2"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.2.tgz#70ecc7d4d4114921f5d298349ff86a31a9975224"
-  integrity sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.3.tgz#b330653cd3bd6b75009cc25c714cae7b93351ccd"
+  integrity sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==
   dependencies:
     source-map "~0.6.0"
 
@@ -3744,17 +3722,17 @@ cli-cursor@^4.0.0:
     restore-cursor "^4.0.0"
 
 cli-spinners@^2.5.0:
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.1.tgz#9c0b9dad69a6d47cbb4333c14319b060ed395a35"
-  integrity sha512-jHgecW0pxkonBJdrKsqxgRX9AcG+u/5k0Q7WPDfi8AogLAdwxEkyYYNWwZ5GvVFoFx2uiY1eNcSK00fh+1+FyQ==
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.9.2.tgz#1773a8f4b9c4d6ac31563df53b3fc1d79462fe41"
+  integrity sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==
 
-cli-truncate@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-3.1.0.tgz#3f23ab12535e3d73e839bb43e73c9de487db1389"
-  integrity sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==
+cli-truncate@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-4.0.0.tgz#6cc28a2924fee9e25ce91e973db56c7066e6172a"
+  integrity sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==
   dependencies:
     slice-ansi "^5.0.0"
-    string-width "^5.0.0"
+    string-width "^7.0.0"
 
 cli-width@^2.0.0:
   version "2.2.1"
@@ -3900,12 +3878,12 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@11.0.0, commander@~11.0.0:
+commander@11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-11.0.0.tgz#43e19c25dbedc8256203538e8d7e9346877a6f67"
   integrity sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==
 
-commander@11.1.0:
+commander@11.1.0, commander@~11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-11.1.0.tgz#62fdce76006a68e5c1ab3314dc92e800eb83d906"
   integrity sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==
@@ -4052,22 +4030,22 @@ copy-anything@^2.0.1:
   dependencies:
     is-what "^3.14.1"
 
-core-js-compat@^3.31.0, core-js-compat@^3.33.1:
-  version "3.33.2"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.33.2.tgz#3ea4563bfd015ad4e4b52442865b02c62aba5085"
-  integrity sha512-axfo+wxFVxnqf8RvxTzoAlzW4gRoacrHeoFlc9n0x50+7BEyZL/Rt3hicaED1/CEd7I6tPCPVUYcJwCMO5XUYw==
+core-js-compat@^3.31.0, core-js-compat@^3.34.0:
+  version "3.36.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.36.0.tgz#087679119bc2fdbdefad0d45d8e5d307d45ba190"
+  integrity sha512-iV9Pd/PsgjNWBXeq8XRtWVSgz2tKAfhfvBs7qxYty+RlRd+OCksaWmOnc4JKrTc1cToXL1N0s3l/vwlxPtdElw==
   dependencies:
-    browserslist "^4.22.1"
+    browserslist "^4.22.3"
 
 core-js-pure@^3.25.3, core-js-pure@^3.30.2:
-  version "3.33.2"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.33.2.tgz#644830db2507ef84d068a70980ccd99c275f5fa6"
-  integrity sha512-a8zeCdyVk7uF2elKIGz67AjcXOxjRbwOLz8SbklEso1V+2DoW4OkAMZN9S9GBgvZIaqQi/OemFX4OiSoQEmg1Q==
+  version "3.36.0"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.36.0.tgz#ffb34330b14e594d6a9835cf5843b4123f1d95db"
+  integrity sha512-cN28qmhRNgbMZZMc/RFu5w8pK9VJzpb2rJVR/lHuZJKwmXnoWOpXmMkxqBB514igkp1Hu8WGROsiOAzUcKdHOQ==
 
 core-js@^3.19.2:
-  version "3.33.2"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.33.2.tgz#312bbf6996a3a517c04c99b9909cdd27138d1ceb"
-  integrity sha512-XeBzWI6QL3nJQiHmdzbAOiMYqjrb7hwU7A39Qhvd/POSa/t9E1AeZyEZx3fNvp/vtM8zXwhoL0FsiS0hD0pruQ==
+  version "3.36.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.36.0.tgz#e752fa0b0b462a0787d56e9d73f80b0f7c0dde68"
+  integrity sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==
 
 core-util-is@~1.0.0:
   version "1.0.3"
@@ -4149,11 +4127,6 @@ csp_evaluator@1.1.1:
   resolved "https://registry.yarnpkg.com/csp_evaluator/-/csp_evaluator-1.1.1.tgz#12b7bb0c6ae9053d30c86e8ddc52a1e920e6c0f7"
   integrity sha512-N3ASg0C4kNPUaNxt1XAvzHIVuzdtr8KLgfk1O8WDyimp1GisPAHESupArO2ieHk9QWbrJ/WkQODyh21Ps/xhxw==
 
-css-color-names@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
-  integrity sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==
-
 css-functions-list@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.2.1.tgz#2eb205d8ce9f9ce74c5c1d7490b66b77c45ce3ea"
@@ -4181,11 +4154,6 @@ css-select@^5.1.0:
     domutils "^3.0.1"
     nth-check "^2.0.1"
 
-css-shorthand-properties@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/css-shorthand-properties/-/css-shorthand-properties-1.1.1.tgz#1c808e63553c283f289f2dd56fcee8f3337bd935"
-  integrity sha512-Md+Juc7M3uOdbAFwOYlTrccIZ7oCFuzrhKYQjdeUEW/sE1hv17Jp/Bws+ReOPpGVBTYCBoYo+G17V5Qo8QQ75A==
-
 css-to-xpath@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/css-to-xpath/-/css-to-xpath-0.1.0.tgz#ac0d1c26cef023f7bd8cf2e1fc1f77134bc70c47"
@@ -4202,15 +4170,6 @@ css-tree@^2.3.1:
     mdn-data "2.0.30"
     source-map-js "^1.0.1"
 
-css-values@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/css-values/-/css-values-0.1.0.tgz#128b7ce103d4dc027a814a5d5995c54781d7b4c6"
-  integrity sha512-hQ6JSn4t/70aOCvdlP9zTOsFFUifMSKWz3PX7rz5NZl+uEHCqTFVJJvfP07isErCGEVHYoc8Orja8wLKZRvOeg==
-  dependencies:
-    css-color-names "0.0.4"
-    ends-with "^0.2.0"
-    postcss-value-parser "^3.3.0"
-
 css-what@^6.0.1, css-what@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
@@ -4246,14 +4205,14 @@ cssstyle@^3.0.0:
     rrweb-cssom "^0.6.0"
 
 csstype@^3.0.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
-  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
 csv-parse@^5.4.0:
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/csv-parse/-/csv-parse-5.5.2.tgz#ab525e642093dccff7c5cca5c7b71fd3e99fe8f2"
-  integrity sha512-YRVtvdtUNXZCMyK5zd5Wty1W6dNTpGKdqQd4EQ8tl/c6KW1aMBB1Kg1ppky5FONKmEqGJ/8WjLlTNLPne4ioVA==
+  version "5.5.5"
+  resolved "https://registry.yarnpkg.com/csv-parse/-/csv-parse-5.5.5.tgz#68a271a9092877b830541805e14c8a80e6a22517"
+  integrity sha512-erCk7tyU3yLWAhk6wvKxnyPtftuy/6Ak622gOO7BCJ05+TYffnPCJF905wmOQm+BpkX54OdAl8pveJwUdpnCXQ==
 
 dargs@^7.0.0:
   version "7.0.0"
@@ -4281,7 +4240,7 @@ de-indent@^1.0.2:
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
-debug@4, debug@4.3.4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@4.3.4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -4424,21 +4383,21 @@ defaults@^1.0.3:
   dependencies:
     clone "^1.0.2"
 
-define-data-property@^1.0.1, define-data-property@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.1.tgz#c35f7cd0ab09883480d12ac5cb213715587800b3"
-  integrity sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==
+define-data-property@^1.0.1, define-data-property@^1.1.2, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
   dependencies:
-    get-intrinsic "^1.2.1"
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
     gopd "^1.0.1"
-    has-property-descriptors "^1.0.0"
 
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
   integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
 
-define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0, define-properties@^1.2.1:
+define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
   integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
@@ -4516,7 +4475,7 @@ devtools-protocol@0.0.981744:
   resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.981744.tgz#9960da0370284577d46c28979a0b32651022bacf"
   integrity sha512-0cuGS8+jhR67Fy7qG3i3Pc7Aw494sb9yG9QgpG97SFVWwolgYjlhJg7n+UaHxOQT30d1TYu/EYe9k01ivLErIg==
 
-diff-sequences@^29.4.3, diff-sequences@^29.6.3:
+diff-sequences@^29.6.3:
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.6.3.tgz#4deaf894d11407c51efc8418012f9e70b84ea921"
   integrity sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==
@@ -4644,10 +4603,10 @@ dotenv-expand@^8.0.2:
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-8.0.3.tgz#29016757455bcc748469c83a19b36aaf2b83dd6e"
   integrity sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==
 
-dotenv@^16.0.0, dotenv@^16.0.3:
-  version "16.3.1"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
-  integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
+dotenv@^16.0.0, dotenv@^16.4.2:
+  version "16.4.5"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
+  integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==
 
 duplexify@^3.5.1:
   version "3.7.1"
@@ -4660,19 +4619,14 @@ duplexify@^3.5.1:
     stream-shift "^1.0.0"
 
 duplexify@^4.1.1:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-4.1.2.tgz#18b4f8d28289132fa0b9573c898d9f903f81c7b0"
-  integrity sha512-fz3OjcNCHmRP12MJoZMPglx8m4rrFP8rovnk4vT8Fs+aonZoCwGg10dSsQsfP/E62eZcPTMSMP6686fu9Qlqtw==
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-4.1.3.tgz#a07e1c0d0a2c001158563d32592ba58bddb0236f"
+  integrity sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==
   dependencies:
     end-of-stream "^1.4.1"
     inherits "^2.0.3"
     readable-stream "^3.1.1"
-    stream-shift "^1.0.0"
-
-eastasianwidth@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
-  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+    stream-shift "^1.0.2"
 
 editorconfig@^0.15.3:
   version "0.15.3"
@@ -4691,31 +4645,26 @@ ejs@^3.1.6:
   dependencies:
     jake "^10.8.5"
 
-electron-to-chromium@^1.4.535:
-  version "1.4.587"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.587.tgz#d8b864f21338b60798d447a3d83b90753f701d07"
-  integrity sha512-RyJX0q/zOkAoefZhB9XHghGeATVP0Q3mwA253XD/zj2OeXc+JZB9pCaEv6R578JUYaWM9PRhye0kXvd/V1cQ3Q==
-
-electron-to-chromium@^1.4.601:
-  version "1.4.629"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.629.tgz#9cbffe1b08a5627b6a25118360f7fd3965416caf"
-  integrity sha512-5UUkr3k3CZ/k+9Sw7vaaIMyOzMC0XbPyprKI3n0tbKDqkzTDOjK4izm7DxlkueRMim6ZZQ1ja9F7hoFVplHihA==
+electron-to-chromium@^1.4.668:
+  version "1.4.695"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.695.tgz#1753f4017e8d7e72a1ce5058c0fc66c8b67bab8e"
+  integrity sha512-eMijZmeqPtm774pCZIOrfUHMs/7ls++W1sLhxwqgu8KQ8E2WmMtzwyqOMt0XXUJ3HTIPfuwlfwF+I5cwnfItBA==
 
 email-addresses@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/email-addresses/-/email-addresses-3.1.0.tgz#cabf7e085cbdb63008a70319a74e6136188812fb"
   integrity sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==
 
+emoji-regex@^10.3.0:
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23"
+  integrity sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emoji-regex@^9.2.2:
-  version "9.2.2"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
-  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
-
 end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -4723,12 +4672,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
-ends-with@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/ends-with/-/ends-with-0.2.0.tgz#2f9da98d57a50cfda4571ce4339000500f4e6b8a"
-  integrity sha512-lRppY4dK3VkqBdR242sKcAJeYc8Gf/DhoX9AWvWI2RzccmLnqBQfwm2k4oSDv5MPDjUqawCauXhZkyWxkVhRsg==
-
-enquirer@^2.3.5, enquirer@^2.3.6:
+enquirer@^2.3.6:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.4.1.tgz#93334b3fbd74fc7097b224ab4a8fb7e40bf4ae56"
   integrity sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==
@@ -4746,7 +4690,7 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-entities@^4.2.0, entities@^4.4.0:
+entities@^4.2.0, entities@^4.4.0, entities@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@@ -4780,50 +4724,69 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.22.1:
-  version "1.22.3"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.3.tgz#48e79f5573198de6dee3589195727f4f74bc4f32"
-  integrity sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==
-  dependencies:
-    array-buffer-byte-length "^1.0.0"
-    arraybuffer.prototype.slice "^1.0.2"
-    available-typed-arrays "^1.0.5"
-    call-bind "^1.0.5"
-    es-set-tostringtag "^2.0.1"
+es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.22.4:
+  version "1.22.5"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.22.5.tgz#1417df4e97cc55f09bf7e58d1e614bc61cb8df46"
+  integrity sha512-oW69R+4q2wG+Hc3KZePPZxOiisRIqfKBVo/HLx94QcJeWGU/8sZhCvc829rd1kS366vlJbzBfXf9yWwf0+Ko7w==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    arraybuffer.prototype.slice "^1.0.3"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    es-set-tostringtag "^2.0.3"
     es-to-primitive "^1.2.1"
     function.prototype.name "^1.1.6"
-    get-intrinsic "^1.2.2"
-    get-symbol-description "^1.0.0"
+    get-intrinsic "^1.2.4"
+    get-symbol-description "^1.0.2"
     globalthis "^1.0.3"
     gopd "^1.0.1"
-    has-property-descriptors "^1.0.0"
-    has-proto "^1.0.1"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.0.3"
     has-symbols "^1.0.3"
-    hasown "^2.0.0"
-    internal-slot "^1.0.5"
-    is-array-buffer "^3.0.2"
+    hasown "^2.0.1"
+    internal-slot "^1.0.7"
+    is-array-buffer "^3.0.4"
     is-callable "^1.2.7"
-    is-negative-zero "^2.0.2"
+    is-negative-zero "^2.0.3"
     is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.2"
+    is-shared-array-buffer "^1.0.3"
     is-string "^1.0.7"
-    is-typed-array "^1.1.12"
+    is-typed-array "^1.1.13"
     is-weakref "^1.0.2"
     object-inspect "^1.13.1"
     object-keys "^1.1.1"
-    object.assign "^4.1.4"
-    regexp.prototype.flags "^1.5.1"
-    safe-array-concat "^1.0.1"
-    safe-regex-test "^1.0.0"
+    object.assign "^4.1.5"
+    regexp.prototype.flags "^1.5.2"
+    safe-array-concat "^1.1.0"
+    safe-regex-test "^1.0.3"
     string.prototype.trim "^1.2.8"
     string.prototype.trimend "^1.0.7"
     string.prototype.trimstart "^1.0.7"
-    typed-array-buffer "^1.0.0"
-    typed-array-byte-length "^1.0.0"
-    typed-array-byte-offset "^1.0.0"
-    typed-array-length "^1.0.4"
+    typed-array-buffer "^1.0.2"
+    typed-array-byte-length "^1.0.1"
+    typed-array-byte-offset "^1.0.2"
+    typed-array-length "^1.0.5"
     unbox-primitive "^1.0.2"
-    which-typed-array "^1.1.13"
+    which-typed-array "^1.1.14"
+
+es-array-method-boxes-properly@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
+  integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
+
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.0.0, es-errors@^1.1.0, es-errors@^1.2.1, es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
 es-get-iterator@^1.1.3:
   version "1.1.3"
@@ -4840,36 +4803,37 @@ es-get-iterator@^1.1.3:
     isarray "^2.0.5"
     stop-iteration-iterator "^1.0.0"
 
-es-iterator-helpers@^1.0.12:
-  version "1.0.15"
-  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz#bd81d275ac766431d19305923707c3efd9f1ae40"
-  integrity sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==
+es-iterator-helpers@^1.0.17:
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.17.tgz#123d1315780df15b34eb181022da43e734388bb8"
+  integrity sha512-lh7BsUqelv4KUbR5a/ZTaGGIMLCjPGPqJ6q+Oq24YP0RdyptX1uzm4vvaqzk7Zx3bpl/76YLTTDj9L7uYQ92oQ==
   dependencies:
     asynciterator.prototype "^1.0.0"
-    call-bind "^1.0.2"
+    call-bind "^1.0.7"
     define-properties "^1.2.1"
-    es-abstract "^1.22.1"
-    es-set-tostringtag "^2.0.1"
-    function-bind "^1.1.1"
-    get-intrinsic "^1.2.1"
+    es-abstract "^1.22.4"
+    es-errors "^1.3.0"
+    es-set-tostringtag "^2.0.2"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
     globalthis "^1.0.3"
-    has-property-descriptors "^1.0.0"
+    has-property-descriptors "^1.0.2"
     has-proto "^1.0.1"
     has-symbols "^1.0.3"
-    internal-slot "^1.0.5"
+    internal-slot "^1.0.7"
     iterator.prototype "^1.1.2"
-    safe-array-concat "^1.0.1"
+    safe-array-concat "^1.1.0"
 
-es-set-tostringtag@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz#11f7cc9f63376930a5f20be4915834f4bc74f9c9"
-  integrity sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==
+es-set-tostringtag@^2.0.2, es-set-tostringtag@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz#8bb60f0a440c2e4281962428438d58545af39777"
+  integrity sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
   dependencies:
-    get-intrinsic "^1.2.2"
-    has-tostringtag "^1.0.0"
-    hasown "^2.0.0"
+    get-intrinsic "^1.2.4"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.1"
 
-es-shim-unscopables@^1.0.0:
+es-shim-unscopables@^1.0.0, es-shim-unscopables@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
   integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
@@ -4885,66 +4849,68 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-esbuild@^0.18.10:
-  version "0.18.20"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
-  integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==
+esbuild@^0.19.3:
+  version "0.19.12"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.12.tgz#dc82ee5dc79e82f5a5c3b4323a2a641827db3e04"
+  integrity sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==
   optionalDependencies:
-    "@esbuild/android-arm" "0.18.20"
-    "@esbuild/android-arm64" "0.18.20"
-    "@esbuild/android-x64" "0.18.20"
-    "@esbuild/darwin-arm64" "0.18.20"
-    "@esbuild/darwin-x64" "0.18.20"
-    "@esbuild/freebsd-arm64" "0.18.20"
-    "@esbuild/freebsd-x64" "0.18.20"
-    "@esbuild/linux-arm" "0.18.20"
-    "@esbuild/linux-arm64" "0.18.20"
-    "@esbuild/linux-ia32" "0.18.20"
-    "@esbuild/linux-loong64" "0.18.20"
-    "@esbuild/linux-mips64el" "0.18.20"
-    "@esbuild/linux-ppc64" "0.18.20"
-    "@esbuild/linux-riscv64" "0.18.20"
-    "@esbuild/linux-s390x" "0.18.20"
-    "@esbuild/linux-x64" "0.18.20"
-    "@esbuild/netbsd-x64" "0.18.20"
-    "@esbuild/openbsd-x64" "0.18.20"
-    "@esbuild/sunos-x64" "0.18.20"
-    "@esbuild/win32-arm64" "0.18.20"
-    "@esbuild/win32-ia32" "0.18.20"
-    "@esbuild/win32-x64" "0.18.20"
-
-esbuild@^0.19.0:
-  version "0.19.5"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.5.tgz#53a0e19dfbf61ba6c827d51a80813cf071239a8c"
-  integrity sha512-bUxalY7b1g8vNhQKdB24QDmHeY4V4tw/s6Ak5z+jJX9laP5MoQseTOMemAr0gxssjNcH0MCViG8ONI2kksvfFQ==
+    "@esbuild/aix-ppc64" "0.19.12"
+    "@esbuild/android-arm" "0.19.12"
+    "@esbuild/android-arm64" "0.19.12"
+    "@esbuild/android-x64" "0.19.12"
+    "@esbuild/darwin-arm64" "0.19.12"
+    "@esbuild/darwin-x64" "0.19.12"
+    "@esbuild/freebsd-arm64" "0.19.12"
+    "@esbuild/freebsd-x64" "0.19.12"
+    "@esbuild/linux-arm" "0.19.12"
+    "@esbuild/linux-arm64" "0.19.12"
+    "@esbuild/linux-ia32" "0.19.12"
+    "@esbuild/linux-loong64" "0.19.12"
+    "@esbuild/linux-mips64el" "0.19.12"
+    "@esbuild/linux-ppc64" "0.19.12"
+    "@esbuild/linux-riscv64" "0.19.12"
+    "@esbuild/linux-s390x" "0.19.12"
+    "@esbuild/linux-x64" "0.19.12"
+    "@esbuild/netbsd-x64" "0.19.12"
+    "@esbuild/openbsd-x64" "0.19.12"
+    "@esbuild/sunos-x64" "0.19.12"
+    "@esbuild/win32-arm64" "0.19.12"
+    "@esbuild/win32-ia32" "0.19.12"
+    "@esbuild/win32-x64" "0.19.12"
+
+esbuild@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.20.1.tgz#1e4cbb380ad1959db7609cb9573ee77257724a3e"
+  integrity sha512-OJwEgrpWm/PCMsLVWXKqvcjme3bHNpOgN7Tb6cQnR5n0TPbQx1/Xrn7rqM+wn17bYeT6MGB5sn1Bh5YiGi70nA==
   optionalDependencies:
-    "@esbuild/android-arm" "0.19.5"
-    "@esbuild/android-arm64" "0.19.5"
-    "@esbuild/android-x64" "0.19.5"
-    "@esbuild/darwin-arm64" "0.19.5"
-    "@esbuild/darwin-x64" "0.19.5"
-    "@esbuild/freebsd-arm64" "0.19.5"
-    "@esbuild/freebsd-x64" "0.19.5"
-    "@esbuild/linux-arm" "0.19.5"
-    "@esbuild/linux-arm64" "0.19.5"
-    "@esbuild/linux-ia32" "0.19.5"
-    "@esbuild/linux-loong64" "0.19.5"
-    "@esbuild/linux-mips64el" "0.19.5"
-    "@esbuild/linux-ppc64" "0.19.5"
-    "@esbuild/linux-riscv64" "0.19.5"
-    "@esbuild/linux-s390x" "0.19.5"
-    "@esbuild/linux-x64" "0.19.5"
-    "@esbuild/netbsd-x64" "0.19.5"
-    "@esbuild/openbsd-x64" "0.19.5"
-    "@esbuild/sunos-x64" "0.19.5"
-    "@esbuild/win32-arm64" "0.19.5"
-    "@esbuild/win32-ia32" "0.19.5"
-    "@esbuild/win32-x64" "0.19.5"
+    "@esbuild/aix-ppc64" "0.20.1"
+    "@esbuild/android-arm" "0.20.1"
+    "@esbuild/android-arm64" "0.20.1"
+    "@esbuild/android-x64" "0.20.1"
+    "@esbuild/darwin-arm64" "0.20.1"
+    "@esbuild/darwin-x64" "0.20.1"
+    "@esbuild/freebsd-arm64" "0.20.1"
+    "@esbuild/freebsd-x64" "0.20.1"
+    "@esbuild/linux-arm" "0.20.1"
+    "@esbuild/linux-arm64" "0.20.1"
+    "@esbuild/linux-ia32" "0.20.1"
+    "@esbuild/linux-loong64" "0.20.1"
+    "@esbuild/linux-mips64el" "0.20.1"
+    "@esbuild/linux-ppc64" "0.20.1"
+    "@esbuild/linux-riscv64" "0.20.1"
+    "@esbuild/linux-s390x" "0.20.1"
+    "@esbuild/linux-x64" "0.20.1"
+    "@esbuild/netbsd-x64" "0.20.1"
+    "@esbuild/openbsd-x64" "0.20.1"
+    "@esbuild/sunos-x64" "0.20.1"
+    "@esbuild/win32-arm64" "0.20.1"
+    "@esbuild/win32-ia32" "0.20.1"
+    "@esbuild/win32-x64" "0.20.1"
 
 escalade@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
-  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
+  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
 
 escape-string-regexp@4.0.0, escape-string-regexp@^4.0.0:
   version "4.0.0"
@@ -4971,9 +4937,9 @@ eslint-import-resolver-node@^0.3.9:
     resolve "^1.22.4"
 
 eslint-module-utils@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz#e439fee65fc33f6bba630ff621efc38ec0375c49"
-  integrity sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz#52f2404300c3bd33deece9d7372fb337cc1d7c34"
+  integrity sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==
   dependencies:
     debug "^3.2.7"
 
@@ -4985,9 +4951,9 @@ eslint-plugin-codeceptjs@^1.3.0:
     requireindex "~1.1.0"
 
 eslint-plugin-import@^2.23.4:
-  version "2.29.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz#8133232e4329ee344f2f612885ac3073b0b7e155"
-  integrity sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
+  integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
   dependencies:
     array-includes "^3.1.7"
     array.prototype.findlastindex "^1.2.3"
@@ -5005,7 +4971,7 @@ eslint-plugin-import@^2.23.4:
     object.groupby "^1.0.1"
     object.values "^1.1.7"
     semver "^6.3.1"
-    tsconfig-paths "^3.14.2"
+    tsconfig-paths "^3.15.0"
 
 eslint-plugin-react-hooks@^4.2.0:
   version "4.6.0"
@@ -5013,118 +4979,101 @@ eslint-plugin-react-hooks@^4.2.0:
   integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
 eslint-plugin-react@^7.24.0:
-  version "7.33.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608"
-  integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==
+  version "7.34.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.34.0.tgz#ab71484d54fc409c37025c5eca00eb4177a5e88c"
+  integrity sha512-MeVXdReleBTdkz/bvcQMSnCXGi+c9kvy51IpinjnJgutl3YTHWsDdke7Z1ufZpGfDG8xduBDKyjtB9JH1eBKIQ==
   dependencies:
-    array-includes "^3.1.6"
-    array.prototype.flatmap "^1.3.1"
-    array.prototype.tosorted "^1.1.1"
+    array-includes "^3.1.7"
+    array.prototype.findlast "^1.2.4"
+    array.prototype.flatmap "^1.3.2"
+    array.prototype.toreversed "^1.1.2"
+    array.prototype.tosorted "^1.1.3"
     doctrine "^2.1.0"
-    es-iterator-helpers "^1.0.12"
+    es-iterator-helpers "^1.0.17"
     estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
-    object.entries "^1.1.6"
-    object.fromentries "^2.0.6"
-    object.hasown "^1.1.2"
-    object.values "^1.1.6"
+    object.entries "^1.1.7"
+    object.fromentries "^2.0.7"
+    object.hasown "^1.1.3"
+    object.values "^1.1.7"
     prop-types "^15.8.1"
-    resolve "^2.0.0-next.4"
+    resolve "^2.0.0-next.5"
     semver "^6.3.1"
-    string.prototype.matchall "^4.0.8"
+    string.prototype.matchall "^4.0.10"
 
-eslint-scope@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
-  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
   dependencies:
     esrecurse "^4.3.0"
-    estraverse "^4.1.1"
-
-eslint-utils@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
-  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
-  dependencies:
-    eslint-visitor-keys "^1.1.0"
-
-eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
-  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
-
-eslint-visitor-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
-  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+    estraverse "^5.2.0"
 
-eslint-visitor-keys@^3.3.0:
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint@^7.31.0:
-  version "7.32.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
-  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
+eslint@^8.57.0:
+  version "8.57.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
+  integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
   dependencies:
-    "@babel/code-frame" "7.12.11"
-    "@eslint/eslintrc" "^0.4.3"
-    "@humanwhocodes/config-array" "^0.5.0"
-    ajv "^6.10.0"
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.0"
+    "@humanwhocodes/config-array" "^0.11.14"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
-    debug "^4.0.1"
+    debug "^4.3.2"
     doctrine "^3.0.0"
-    enquirer "^2.3.5"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^5.1.1"
-    eslint-utils "^2.1.0"
-    eslint-visitor-keys "^2.0.0"
-    espree "^7.3.1"
-    esquery "^1.4.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^5.1.2"
-    globals "^13.6.0"
-    ignore "^4.0.6"
-    import-fresh "^3.0.0"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
-    js-yaml "^3.13.1"
+    is-path-inside "^3.0.3"
+    js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
     lodash.merge "^4.6.2"
-    minimatch "^3.0.4"
+    minimatch "^3.1.2"
     natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    progress "^2.0.0"
-    regexpp "^3.1.0"
-    semver "^7.2.1"
-    strip-ansi "^6.0.0"
-    strip-json-comments "^3.1.0"
-    table "^6.0.9"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
     text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
 
-espree@^7.3.0, espree@^7.3.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
-  integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
   dependencies:
-    acorn "^7.4.0"
-    acorn-jsx "^5.3.1"
-    eslint-visitor-keys "^1.3.0"
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
 
 esprima@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.4.0:
+esquery@^1.4.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
   integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
@@ -5138,11 +5087,6 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^4.1.1:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
-  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
-
 estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
@@ -5158,6 +5102,13 @@ estree-walker@^2.0.1, estree-walker@^2.0.2:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
+estree-walker@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-3.0.3.tgz#67c3e549ec402a487b4fc193d1953a524752340d"
+  integrity sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==
+  dependencies:
+    "@types/estree" "^1.0.0"
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -5173,7 +5124,7 @@ eventemitter3@^5.0.1:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
   integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
 
-execa@8.0.1:
+execa@8.0.1, execa@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-8.0.1.tgz#51f6a5943b580f963c3ca9c6321796db8cc39b8c"
   integrity sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==
@@ -5246,7 +5197,7 @@ fast-fifo@^1.1.0, fast-fifo@^1.2.0:
   resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
   integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
 
-fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.9, fast-glob@^3.3.1:
+fast-glob@^3.2.11, fast-glob@^3.2.9, fast-glob@^3.3.1, fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -5268,9 +5219,9 @@ fast-levenshtein@^2.0.6:
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
 fast-xml-parser@^4.3.2:
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.3.3.tgz#aeaf5778392329f17168c40c51bcbfec8ff965be"
-  integrity sha512-coV/D1MhrShMvU6D0I+VAK3umz6hUaxxhL0yp/9RjfiYUfAv14rDhGQL+PLForhMdr0wq3PiV07WtkkNjJjNHg==
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.3.5.tgz#e2f2a2ae8377e9c3dc321b151e58f420ca7e5ccc"
+  integrity sha512-sWvP1Pl8H03B8oFJpFR3HE31HUfwtX7Rlf9BNsvdpujD4n7WMhfmu8h9wOV2u+c1k0ZilTADhPqypzx2J690ZQ==
   dependencies:
     strnum "^1.0.5"
 
@@ -5280,9 +5231,9 @@ fastest-levenshtein@^1.0.16:
   integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
 
 fastq@^1.13.0, fastq@^1.6.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a"
-  integrity sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
+  integrity sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==
   dependencies:
     reusify "^1.0.4"
 
@@ -5419,9 +5370,9 @@ flat@^5.0.1, flat@^5.0.2:
   integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
 
 flatted@^3.2.9:
-  version "3.2.9"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.9.tgz#7eb4c67ca1ba34232ca9d2d93e9886e611ad7daf"
-  integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
+  integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
 fn-args@4.0.0:
   version "4.0.0"
@@ -5429,9 +5380,9 @@ fn-args@4.0.0:
   integrity sha512-M9XSagc92ejQhi+7kjpFPAO59xKbGRsbOg/9dfwSj84DfzB0pj+Q81DVD1pKr084Xf2oICwUNI0pCvGORmD9zg==
 
 follow-redirects@^1.14.0, follow-redirects@^1.14.8, follow-redirects@^1.15.0:
-  version "1.15.3"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
-  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
+  version "1.15.5"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.5.tgz#54d4d6d062c0fa7d9d17feb008461550e3ba8020"
+  integrity sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -5473,9 +5424,9 @@ fs-extra@^10.0.1:
     universalify "^2.0.0"
 
 fs-extra@^11.1.0:
-  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.1.1.tgz#da69f7c39f3b002378b0954bb6ae7efdc0876e2d"
-  integrity sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==
+  version "11.2.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.2.0.tgz#e70e17dfad64232287d01929399e0ea7c86b0e5b"
+  integrity sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==
   dependencies:
     graceful-fs "^4.2.0"
     jsonfile "^6.0.1"
@@ -5540,12 +5491,12 @@ fsevents@2.3.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
-fsevents@~2.3.2:
+fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
-function-bind@^1.1.1, function-bind@^1.1.2:
+function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
@@ -5560,11 +5511,6 @@ function.prototype.name@^1.1.5, function.prototype.name@^1.1.6:
     es-abstract "^1.22.1"
     functions-have-names "^1.2.3"
 
-functional-red-black-tree@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
-  integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
-
 functions-have-names@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
@@ -5580,16 +5526,22 @@ get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-east-asian-width@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz#5e6ebd9baee6fb8b7b6bd505221065f0cd91f64e"
+  integrity sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==
+
 get-func-name@^2.0.0, get-func-name@^2.0.1, get-func-name@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.2.tgz#0d7cf20cd13fda808669ffa88f4ffc7a3943fc41"
   integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==
 
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.2.tgz#281b7622971123e1ef4b3c90fd7539306da93f3b"
-  integrity sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==
+get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
   dependencies:
+    es-errors "^1.3.0"
     function-bind "^1.1.2"
     has-proto "^1.0.1"
     has-symbols "^1.0.3"
@@ -5612,13 +5564,14 @@ get-stream@^8.0.1:
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-8.0.1.tgz#def9dfd71742cd7754a7761ed43749a27d02eca2"
   integrity sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==
 
-get-symbol-description@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
-  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+get-symbol-description@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz#533744d5aa20aca4e079c8e5daf7fd44202821f5"
+  integrity sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==
   dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.1"
+    call-bind "^1.0.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
 
 gh-pages@^3.2.3:
   version "3.2.3"
@@ -5753,10 +5706,10 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.6.0, globals@^13.9.0:
-  version "13.23.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.23.0.tgz#ef31673c926a0976e1f61dab4dca57e0c0a8af02"
-  integrity sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==
+globals@^13.19.0:
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
   dependencies:
     type-fest "^0.20.2"
 
@@ -5839,34 +5792,34 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-property-descriptors@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz#52ba30b6c5ec87fd89fa574bc1c39125c6f65340"
-  integrity sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==
+has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.1, has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
   dependencies:
-    get-intrinsic "^1.2.2"
+    es-define-property "^1.0.0"
 
-has-proto@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.1.tgz#1885c1305538958aff469fef37937c22795408e0"
-  integrity sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==
+has-proto@^1.0.1, has-proto@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
 
 has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
 
-has-tostringtag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
-  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+has-tostringtag@^1.0.0, has-tostringtag@^1.0.1, has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
   dependencies:
-    has-symbols "^1.0.2"
+    has-symbols "^1.0.3"
 
-hasown@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.0.tgz#f4c513d454a57b7c7e1650778de226b11700546c"
-  integrity sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==
+hasown@^2.0.0, hasown@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.1.tgz#26f48f039de2c0f8d3356c223fb8d50253519faa"
+  integrity sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==
   dependencies:
     function-bind "^1.1.2"
 
@@ -6024,28 +5977,29 @@ i18next-browser-languagedetector@^6.1.1:
     "@babel/runtime" "^7.19.0"
 
 i18next-http-backend@^2.2.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-2.4.1.tgz#b0cd4926ea71a689da22d2b55ea2bc37fde8909a"
-  integrity sha512-CZHzFGDvF8zN7ya1W2lHbgLj2ejPUvPD836+vA3eNXc9eKGUM3MSF6SA2TKBXKBZ2cNG3nxzycCXeM6n/46KWQ==
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-2.5.0.tgz#8396a7df30bfe722eff7a65f629df32a61720414"
+  integrity sha512-Z/aQsGZk1gSxt2/DztXk92DuDD20J+rNudT7ZCdTrNOiK8uQppfvdjq9+DFQfpAnFPn3VZS+KQIr1S/W1KxhpQ==
   dependencies:
     cross-fetch "4.0.0"
 
 i18next-parser@^8.0.0:
-  version "8.9.0"
-  resolved "https://registry.yarnpkg.com/i18next-parser/-/i18next-parser-8.9.0.tgz#aab1f9afd174a6da74d4f3d96a66518e922fc4f5"
-  integrity sha512-8B+XTeBscPeswJbpBlGYxzUNXybDRltwTupJD+lLTGzBwfSfviAsSl2MEFpHc/fVlwjjd4Muw19nMpK2O+CB8A==
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/i18next-parser/-/i18next-parser-8.13.0.tgz#3d0774f1659d691b451c105cc1eaf8c444e11740"
+  integrity sha512-XU7resoeNcpJazh29OncQQUH6HsgCxk06RqBBDAmLHldafxopfCHY1vElyG/o3EY0Sn7XjelAmPTV0SgddJEww==
   dependencies:
+    "@babel/runtime" "^7.23.2"
     broccoli-plugin "^4.0.7"
     cheerio "^1.0.0-rc.2"
     colors "1.4.0"
-    commander "~11.0.0"
+    commander "~11.1.0"
     eol "^0.9.1"
-    esbuild "^0.19.0"
+    esbuild "^0.20.1"
     fs-extra "^11.1.0"
     gulp-sort "^2.0.0"
     i18next "^23.5.1"
     js-yaml "4.1.0"
-    lilconfig "^2.0.6"
+    lilconfig "^3.0.0"
     rsvp "^4.8.2"
     sort-keys "^5.0.0"
     typescript "^5.0.4"
@@ -6061,9 +6015,9 @@ i18next@^22.4.15:
     "@babel/runtime" "^7.20.6"
 
 i18next@^23.5.1:
-  version "23.7.6"
-  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.7.6.tgz#7328e76c899052d5d33d930164612dd21e575f74"
-  integrity sha512-O66BhXBw0fH4bEJMA0/klQKPEbcwAp5wjXEL803pdAynNbg2f4qhLIYlNHJyE7icrL6XmSZKPYaaXwy11kJ6YQ==
+  version "23.10.0"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.10.0.tgz#fb328794ae692e6fdde0564259e421f4203c4a2c"
+  integrity sha512-/TgHOqsa7/9abUKJjdPeydoyDc0oTi/7u9F8lMSj6ufg4cbC1Oj3f/Jja7zj7WRIhEQKB7Q4eN6y68I9RDxxGQ==
   dependencies:
     "@babel/runtime" "^7.23.2"
 
@@ -6101,15 +6055,10 @@ ieee754@^1.1.13, ieee754@^1.2.1:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
-  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
-
 ignore@^5.2.0, ignore@^5.2.4:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78"
-  integrity sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
+  integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
 image-size@~0.5.0:
   version "0.5.5"
@@ -6122,9 +6071,9 @@ image-ssim@^0.2.0:
   integrity sha512-W7+sO6/yhxy83L0G7xR8YAc5Z5QFtYEXXRV6EaE8tuYBZJnA3gVgp3q7X7muhLZVodeb9UfvjSbwt9VJwjIYAg==
 
 immutable@^4.0.0:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"
-  integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.5.tgz#f8b436e66d59f99760dc577f5c99a4fd2a5cc5a0"
+  integrity sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==
 
 import-fresh@^3.0.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.0"
@@ -6196,12 +6145,12 @@ inquirer@6.5.2:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-internal-slot@^1.0.4, internal-slot@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.6.tgz#37e756098c4911c5e912b8edbf71ed3aa116f930"
-  integrity sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==
+internal-slot@^1.0.4, internal-slot@^1.0.5, internal-slot@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
+  integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
   dependencies:
-    get-intrinsic "^1.2.2"
+    es-errors "^1.3.0"
     hasown "^2.0.0"
     side-channel "^1.0.4"
 
@@ -6230,14 +6179,13 @@ is-arguments@^1.1.1:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-array-buffer@^3.0.1, is-array-buffer@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.2.tgz#f2653ced8412081638ecb0ebbd0c41c6e0aecbbe"
-  integrity sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==
+is-array-buffer@^3.0.2, is-array-buffer@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
+  integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
   dependencies:
     call-bind "^1.0.2"
-    get-intrinsic "^1.2.0"
-    is-typed-array "^1.1.10"
+    get-intrinsic "^1.2.1"
 
 is-arrayish@^0.2.1:
   version "0.2.1"
@@ -6329,6 +6277,13 @@ is-fullwidth-code-point@^4.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
   integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
 
+is-fullwidth-code-point@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz#9609efced7c2f97da7b60145ef481c787c7ba704"
+  integrity sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==
+  dependencies:
+    get-east-asian-width "^1.0.0"
+
 is-generator-function@^1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
@@ -6363,10 +6318,10 @@ is-negated-glob@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-negated-glob/-/is-negated-glob-1.0.0.tgz#6910bca5da8c95e784b5751b976cf5a10fee36d2"
   integrity sha512-czXVVn/QEmgvej1f50BZ648vUI+em0xqMq2Sn+QncCLN4zj1UAxlT+kw/6ggQTOaZPd1HqKQGEqbpQVtJucWug==
 
-is-negative-zero@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
-  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+is-negative-zero@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
+  integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
 
 is-number-object@^1.0.4:
   version "1.0.7"
@@ -6390,6 +6345,11 @@ is-obj@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
   integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
 
+is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
 is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
@@ -6433,12 +6393,12 @@ is-set@^2.0.1, is-set@^2.0.2:
   resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
   integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
 
-is-shared-array-buffer@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
-  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
+  integrity sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
   dependencies:
-    call-bind "^1.0.2"
+    call-bind "^1.0.7"
 
 is-stream@^2.0.0:
   version "2.0.1"
@@ -6471,12 +6431,12 @@ is-text-path@^1.0.1:
   dependencies:
     text-extensions "^1.0.0"
 
-is-typed-array@^1.1.10, is-typed-array@^1.1.12, is-typed-array@^1.1.9:
-  version "1.1.12"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.12.tgz#d0bab5686ef4a76f7a73097b95470ab199c57d4a"
-  integrity sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==
+is-typed-array@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.13.tgz#d6c5ca56df62334959322d7d7dd1cca50debe229"
+  integrity sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==
   dependencies:
-    which-typed-array "^1.1.11"
+    which-typed-array "^1.1.14"
 
 is-typedarray@^1.0.0:
   version "1.0.0"
@@ -6569,9 +6529,9 @@ istanbul-lib-source-maps@^4.0.1:
     source-map "^0.6.1"
 
 istanbul-reports@^3.1.5:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.6.tgz#2544bcab4768154281a2f0870471902704ccaa1a"
-  integrity sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg==
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.7.tgz#daed12b9e1dca518e15c056e1e537e741280fa0b"
+  integrity sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==
   dependencies:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
@@ -6704,6 +6664,11 @@ js-sha3@0.8.0:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
+js-tokens@^8.0.2:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-8.0.3.tgz#1c407ec905643603b38b6be6977300406ec48775"
+  integrity sha512-UfJMcSJc+SEXEl9lH/VLHSZbThQyLpw1vLO1Lb+j4RWDvG3N2f7yj3PVQA3cmkTBNldJ9eFnM+xEXxHIXrYiJw==
+
 js-yaml@4.1.0, js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
@@ -6711,7 +6676,7 @@ js-yaml@4.1.0, js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
-js-yaml@^3.13.1, js-yaml@^3.14.1:
+js-yaml@^3.14.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
   integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
@@ -6806,9 +6771,9 @@ json5@^1.0.2, json5@^2.2.0, json5@^2.2.2, json5@^2.2.3:
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
 jsonc-parser@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
-  integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.1.tgz#031904571ccf929d7670ee8c547545081cb37f1a"
+  integrity sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==
 
 jsonfile@^4.0.0:
   version "4.0.0"
@@ -6873,7 +6838,7 @@ lead@^4.0.0:
   resolved "https://registry.yarnpkg.com/lead/-/lead-4.0.0.tgz#5317a49effb0e7ec3a0c8fb9c1b24fb716aab939"
   integrity sha512-DpMa59o5uGUWWjruMp71e6knmwKU3jRBBn1kjuLWN9EeIOxNeSAwvHf03WIl8g/ZMR2oSQC9ej3yeLBwdDc/pg==
 
-less@^4.1.3:
+less@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/less/-/less-4.2.0.tgz#cbefbfaa14a4cd388e2099b2b51f956e1465c450"
   integrity sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==
@@ -6954,43 +6919,53 @@ lighthouse@^9.6.7:
     yargs "^17.3.1"
     yargs-parser "^21.0.0"
 
-lilconfig@2.1.0, lilconfig@^2.0.5, lilconfig@^2.0.6:
+lilconfig@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.0.0.tgz#f8067feb033b5b74dab4602a5f5029420be749bc"
+  integrity sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==
+
+lilconfig@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
   integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
 
+lilconfig@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.1.tgz#9d8a246fa753106cfc205fd2d77042faca56e5e3"
+  integrity sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==
+
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
 lint-staged@^15.1.0:
-  version "15.1.0"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.1.0.tgz#c0f8e4d96ac3c09beac5c76d08524d6000c207b4"
-  integrity sha512-ZPKXWHVlL7uwVpy8OZ7YQjYDAuO5X4kMh0XgZvPNxLcCCngd0PO5jKQyy3+s4TL2EnHoIXIzP1422f/l3nZKMw==
+  version "15.2.2"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.2.2.tgz#ad7cbb5b3ab70e043fa05bff82a09ed286bc4c5f"
+  integrity sha512-TiTt93OPh1OZOsb5B7k96A/ATl2AjIZo+vnzFZ6oHK5FuTk63ByDtxGQpHm+kFETjEWqgkF95M8FRXKR/LEBcw==
   dependencies:
     chalk "5.3.0"
     commander "11.1.0"
     debug "4.3.4"
     execa "8.0.1"
-    lilconfig "2.1.0"
-    listr2 "7.0.2"
+    lilconfig "3.0.0"
+    listr2 "8.0.1"
     micromatch "4.0.5"
     pidtree "0.6.0"
     string-argv "0.3.2"
     yaml "2.3.4"
 
-listr2@7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/listr2/-/listr2-7.0.2.tgz#3aa3e1549dfaf3c57ab5eeaba754da3b87f33063"
-  integrity sha512-rJysbR9GKIalhTbVL2tYbF2hVyDnrf7pFUZBwjPaMIdadYHmeT+EVi/Bu3qd7ETQPahTotg2WRCatXwRBW554g==
+listr2@8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-8.0.1.tgz#4d3f50ae6cec3c62bdf0e94f5c2c9edebd4b9c34"
+  integrity sha512-ovJXBXkKGfq+CwmKTjluEqFi3p4h8xvkxGQQAQan22YCgef4KZ1mKGjzfGh6PL6AW5Csw0QiQPNuQyH+6Xk3hA==
   dependencies:
-    cli-truncate "^3.1.0"
+    cli-truncate "^4.0.0"
     colorette "^2.0.20"
     eventemitter3 "^5.0.1"
-    log-update "^5.0.1"
+    log-update "^6.0.0"
     rfdc "^1.3.0"
-    wrap-ansi "^8.1.0"
+    wrap-ansi "^9.0.0"
 
 load-json-file@^4.0.0:
   version "4.0.0"
@@ -7002,10 +6977,13 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
-local-pkg@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.4.3.tgz#0ff361ab3ae7f1c19113d9bb97b98b905dbc4963"
-  integrity sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==
+local-pkg@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.5.0.tgz#093d25a346bae59a99f80e75f6e9d36d7e8c925c"
+  integrity sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==
+  dependencies:
+    mlly "^1.4.2"
+    pkg-types "^1.0.3"
 
 locate-path@^5.0.0:
   version "5.0.0"
@@ -7081,16 +7059,16 @@ log-symbols@4.1.0, log-symbols@^4.1.0:
     chalk "^4.1.0"
     is-unicode-supported "^0.1.0"
 
-log-update@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/log-update/-/log-update-5.0.1.tgz#9e928bf70cb183c1f0c9e91d9e6b7115d597ce09"
-  integrity sha512-5UtUDQ/6edw4ofyljDNcOVJQ4c7OjDro4h3y8e1GQL5iYElYclVHJ3zeWchylvMaKnDbDilC8irOVyexnA/Slw==
+log-update@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-6.0.0.tgz#0ddeb7ac6ad658c944c1de902993fce7c33f5e59"
+  integrity sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==
   dependencies:
-    ansi-escapes "^5.0.0"
+    ansi-escapes "^6.2.0"
     cli-cursor "^4.0.0"
-    slice-ansi "^5.0.0"
-    strip-ansi "^7.0.1"
-    wrap-ansi "^8.0.1"
+    slice-ansi "^7.0.0"
+    strip-ansi "^7.1.0"
+    wrap-ansi "^9.0.0"
 
 lookup-closest-locale@6.2.0:
   version "6.2.0"
@@ -7104,7 +7082,7 @@ loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-loupe@^2.3.1, loupe@^2.3.6:
+loupe@^2.3.1, loupe@^2.3.6, loupe@^2.3.7:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.7.tgz#6e69b7d4db7d3ab436328013d37d1c8c3540c697"
   integrity sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==
@@ -7167,10 +7145,10 @@ magic-string@^0.25.0, magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
-magic-string@^0.30.1, magic-string@^0.30.3, magic-string@^0.30.5:
-  version "0.30.5"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
-  integrity sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
+magic-string@^0.30.1, magic-string@^0.30.5, magic-string@^0.30.7:
+  version "0.30.8"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.8.tgz#14e8624246d2bedba70d5462aa99ac9681844613"
+  integrity sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
@@ -7222,12 +7200,12 @@ marky@^1.2.2:
   integrity sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==
 
 match-sorter@^6.0.2:
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
-  integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
+  version "6.3.4"
+  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.4.tgz#afa779d8e922c81971fbcb4781c7003ace781be7"
+  integrity sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==
   dependencies:
-    "@babel/runtime" "^7.12.5"
-    remove-accents "0.4.2"
+    "@babel/runtime" "^7.23.8"
+    remove-accents "0.5.0"
 
 matcher-collection@^2.0.0:
   version "2.0.1"
@@ -7376,6 +7354,13 @@ minimatch@5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@9.0.3:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimatch@^5.0.1:
   version "5.1.6"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
@@ -7420,24 +7405,14 @@ mkdirp@1.0.4:
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
 mktemp@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/mktemp/-/mktemp-0.4.0.tgz#6d0515611c8a8c84e484aa2000129b98e981ff0b"
-  integrity sha512-IXnMcJ6ZyTuhRmJSjzvHSRhlVPiN9Jwc6e59V0bEJ0ba6OBeX2L0E+mRN1QseeOF4mM+F1Rit6Nh7o+rl2Yn/A==
-
-mlly@^1.2.0, mlly@^1.4.0:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.4.2.tgz#7cf406aa319ff6563d25da6b36610a93f2a8007e"
-  integrity sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==
-  dependencies:
-    acorn "^8.10.0"
-    pathe "^1.1.1"
-    pkg-types "^1.0.3"
-    ufo "^1.3.0"
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/mktemp/-/mktemp-0.4.0.tgz#6d0515611c8a8c84e484aa2000129b98e981ff0b"
+  integrity sha512-IXnMcJ6ZyTuhRmJSjzvHSRhlVPiN9Jwc6e59V0bEJ0ba6OBeX2L0E+mRN1QseeOF4mM+F1Rit6Nh7o+rl2Yn/A==
 
-mlly@^1.4.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.5.0.tgz#8428a4617d54cc083d3009030ac79739a0e5447a"
-  integrity sha512-NPVQvAY1xr1QoVeG0cy8yUYC7FQcOx6evl/RjT1wL5FvzPnzOysoqB/jmx/DhssT2dYa8nxECLAaFI/+gVLhDQ==
+mlly@^1.2.0, mlly@^1.4.2:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.6.1.tgz#0983067dc3366d6314fc5e12712884e6978d028f"
+  integrity sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==
   dependencies:
     acorn "^8.11.3"
     pathe "^1.1.2"
@@ -7553,7 +7528,7 @@ nanoid@3.3.3:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
   integrity sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==
 
-nanoid@^3.3.6, nanoid@^3.3.7:
+nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
@@ -7563,11 +7538,6 @@ napi-build-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806"
   integrity sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==
 
-natural-compare-lite@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
-  integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
-
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -7602,9 +7572,9 @@ no-case@^3.0.4:
     tslib "^2.0.3"
 
 node-abi@^3.3.0:
-  version "3.54.0"
-  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.54.0.tgz#f6386f7548817acac6434c6cba02999c9aebcc69"
-  integrity sha512-p7eGEiQil0YUV3ItH4/tBb781L5impVmmx2E9FRKF7d18XXzp4PGT2tdYMFY6wQqgxD0IwNZOiSJ0/K0fSi/OA==
+  version "3.56.0"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.56.0.tgz#ca807d5ff735ac6bbbd684ae3ff2debc1c2a40a7"
+  integrity sha512-fZjdhDOeRcaS+rcpve7XuwHBmktS1nS1gzgghwKUQQ8nTy2FdSDr6ZT8k6YhvlJeHmmQMYiT/IH9hfco5zeW2Q==
   dependencies:
     semver "^7.3.5"
 
@@ -7635,11 +7605,6 @@ node-html-parser@^5.3.3:
     css-select "^4.2.1"
     he "1.2.0"
 
-node-releases@^2.0.13:
-  version "2.0.13"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
-  integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==
-
 node-releases@^2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
@@ -7700,9 +7665,9 @@ npm-run-all@^4.1.5:
     string.prototype.padend "^3.0.0"
 
 npm-run-path@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.1.0.tgz#bc62f7f3f6952d9894bd08944ba011a6ee7b7e00"
-  integrity sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.3.0.tgz#e23353d0ebb9317f174e93417e4a4d82d0249e9f"
+  integrity sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==
   dependencies:
     path-key "^4.0.0"
 
@@ -7723,35 +7688,35 @@ object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
-object-inspect@^1.13.1, object-inspect@^1.9.0:
+object-inspect@^1.13.1:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
   integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
 
 object-is@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
-  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.6.tgz#1a6a53aed2dd8f7e6775ff870bea58545956ab07"
+  integrity sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
 
 object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object.assign@^4.1.4:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
-  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+object.assign@^4.1.4, object.assign@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
+  integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
-object.entries@^1.1.6:
+object.entries@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131"
   integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==
@@ -7760,7 +7725,7 @@ object.entries@^1.1.6:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-object.fromentries@^2.0.6, object.fromentries@^2.0.7:
+object.fromentries@^2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616"
   integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==
@@ -7770,16 +7735,17 @@ object.fromentries@^2.0.6, object.fromentries@^2.0.7:
     es-abstract "^1.22.1"
 
 object.groupby@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.1.tgz#d41d9f3c8d6c778d9cbac86b4ee9f5af103152ee"
-  integrity sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.2.tgz#494800ff5bab78fd0eff2835ec859066e00192ec"
+  integrity sha512-bzBq58S+x+uo0VjurFT0UktpKHOZmv4/xePiOA1nbB9pMqpGK7rUPNgf+1YC+7mE+0HzhTMqNUuCqvKhj6FnBw==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
-    get-intrinsic "^1.2.1"
+    array.prototype.filter "^1.0.3"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.0.0"
 
-object.hasown@^1.1.2:
+object.hasown@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.3.tgz#6a5f2897bb4d3668b8e79364f98ccf971bda55ae"
   integrity sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==
@@ -7851,7 +7817,7 @@ openai@3.2.1:
     axios "^0.26.0"
     form-data "^4.0.0"
 
-optionator@^0.9.1:
+optionator@^0.9.3:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
   integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
@@ -7902,10 +7868,10 @@ p-limit@^3.0.2:
   dependencies:
     yocto-queue "^0.1.0"
 
-p-limit@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-4.0.0.tgz#914af6544ed32bfa54670b061cafcbd04984b644"
-  integrity sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==
+p-limit@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-5.0.0.tgz#6946d5b7140b649b7a33a027d89b4c625b3a5985"
+  integrity sha512-/Eaoq+QyLSiXQ4lyYV23f14mZRQcXnxfHrN0vCai+ak9G0pp9iEQukIIZq5NccEvwRB8PUnZT0KsOoDCINS1qQ==
   dependencies:
     yocto-queue "^1.0.0"
 
@@ -8081,12 +8047,7 @@ pathe@^0.2.0:
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-0.2.0.tgz#30fd7bbe0a0d91f0e60bae621f5d19e9e225c339"
   integrity sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==
 
-pathe@^1.1.0, pathe@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.1.tgz#1dd31d382b974ba69809adc9a7a347e65d84829a"
-  integrity sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==
-
-pathe@^1.1.2:
+pathe@^1.1.0, pathe@^1.1.1, pathe@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
   integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==
@@ -8187,17 +8148,17 @@ planby@^0.3.0:
     date-fns "^2.28.0"
     use-debounce "^7.0.1"
 
-playwright-core@1.40.0:
-  version "1.40.0"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.40.0.tgz#82f61e5504cb3097803b6f8bbd98190dd34bdf14"
-  integrity sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==
+playwright-core@1.42.1:
+  version "1.42.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.42.1.tgz#13c150b93c940a3280ab1d3fbc945bc855c9459e"
+  integrity sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==
 
 playwright@^1.38.1:
-  version "1.40.0"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.40.0.tgz#2a1824b9fe5c4fe52ed53db9ea68003543a99df0"
-  integrity sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw==
+  version "1.42.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.42.1.tgz#79c828b51fe3830211137550542426111dc8239f"
+  integrity sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==
   dependencies:
-    playwright-core "1.40.0"
+    playwright-core "1.42.1"
   optionalDependencies:
     fsevents "2.3.2"
 
@@ -8208,6 +8169,11 @@ please-upgrade-node@^3.2.0:
   dependencies:
     semver-compare "^1.0.0"
 
+possible-typed-array-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
 postcss-import@^14.0.2:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
@@ -8235,19 +8201,19 @@ postcss-modules-extract-imports@^3.0.0:
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
   integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
 
-postcss-modules-local-by-default@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.3.tgz#b08eb4f083050708998ba2c6061b50c2870ca524"
-  integrity sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==
+postcss-modules-local-by-default@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz#7cbed92abd312b94aaea85b68226d3dec39a14e6"
+  integrity sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==
   dependencies:
     icss-utils "^5.0.0"
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.1.0"
 
-postcss-modules-scope@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.1.0.tgz#fbfddfda93a31f310f1d152c2bb4d3f3c5592ee0"
-  integrity sha512-SaIbK8XW+MZbd0xHPf7kdfA/3eOt7vxJ72IRecn3EzuZVLr1r0orzf0MX/pN8m+NMDoo6X/SQd8oeKqGZd8PXg==
+postcss-modules-scope@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz#32cfab55e84887c079a19bbb215e721d683ef134"
+  integrity sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==
   dependencies:
     postcss-selector-parser "^6.0.4"
 
@@ -8266,15 +8232,7 @@ postcss-scss@^4.0.4, postcss-scss@^4.0.9:
   resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.9.tgz#a03c773cd4c9623cb04ce142a52afcec74806685"
   integrity sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==
 
-postcss-selector-parser@^6.0.13:
-  version "6.0.13"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
-  integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
-  dependencies:
-    cssesc "^3.0.0"
-    util-deprecate "^1.0.2"
-
-postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
+postcss-selector-parser@^6.0.13, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
   version "6.0.15"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535"
   integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==
@@ -8287,43 +8245,29 @@ postcss-sorting@^8.0.2:
   resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-8.0.2.tgz#6393385ece272baf74bee9820fb1b58098e4eeca"
   integrity sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==
 
-postcss-value-parser@^3.3.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.0.0:
-  version "8.4.33"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
-  integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
+postcss@^8.0.0, postcss@^8.4.28, postcss@^8.4.31, postcss@^8.4.32, postcss@^8.4.35:
+  version "8.4.35"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7"
+  integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==
   dependencies:
     nanoid "^3.3.7"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.21, postcss@^8.4.26, postcss@^8.4.28, postcss@^8.4.31:
-  version "8.4.31"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
-  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
-  dependencies:
-    nanoid "^3.3.6"
-    picocolors "^1.0.0"
-    source-map-js "^1.0.2"
-
 preact@10.13.2:
   version "10.13.2"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.13.2.tgz#2c40c73d57248b57234c4ae6cd9ab9d8186ebc0a"
   integrity sha512-q44QFLhOhty2Bd0Y46fnYW0gD/cbVM9dUVtNTDKPcdXSMA7jfY+Jpd6rk3GB0lcQss0z5s/6CmVP0Z/hV+g6pw==
 
 prebuild-install@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
-  integrity sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.2.tgz#a5fd9986f5a6251fbc47e1e5c65de71e68c0a056"
+  integrity sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==
   dependencies:
     detect-libc "^2.0.0"
     expand-template "^2.0.3"
@@ -8353,7 +8297,7 @@ pretty-bytes@^5.3.0:
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
-pretty-bytes@^6.0.0:
+pretty-bytes@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-6.1.1.tgz#38cd6bb46f47afbf667c202cfc754bffd2016a3b"
   integrity sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==
@@ -8367,7 +8311,7 @@ pretty-format@^27.0.2:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-format@^29.0.0, pretty-format@^29.5.0, pretty-format@^29.7.0:
+pretty-format@^29.0.0, pretty-format@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"
   integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==
@@ -8381,7 +8325,7 @@ process-nextick-args@^2.0.1, process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-progress@2.0.3, progress@^2.0.0:
+progress@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
@@ -8492,11 +8436,11 @@ qj@~2.0.0:
   integrity sha512-8466vlnAF/piI42tzMBUfhaAWn2yBNPOLSSbA2YBlEh+S8CxBXbAO1AwuDReGKYX6LlsK19wBL9cpXZGlgsXxA==
 
 qs@^6.9.4:
-  version "6.11.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.2.tgz#64bea51f12c1f5da1bc01496f48ffcff7c69d7d9"
-  integrity sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.12.0.tgz#edd40c3b823995946a8a0b1f208669c7a200db77"
+  integrity sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==
   dependencies:
-    side-channel "^1.0.4"
+    side-channel "^1.0.6"
 
 query-string@^7.1.1:
   version "7.1.3"
@@ -8778,20 +8722,31 @@ redent@^4.0.0:
     indent-string "^5.0.0"
     strip-indent "^4.0.0"
 
-reflect-metadata@*, reflect-metadata@0.1.13, reflect-metadata@^0.1.13:
+reflect-metadata@*:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.2.1.tgz#8d5513c0f5ef2b4b9c3865287f3c0940c1f67f74"
+  integrity sha512-i5lLI6iw9AU3Uu4szRNPPEkomnkjRTaVt9hy/bn5g/oSzekBSMeLZblcjP74AW0vBabqERLLIrz+gR8QYR54Tw==
+
+reflect-metadata@0.1.13:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.13.tgz#67ae3ca57c972a2aa1642b10fe363fe32d49dc08"
   integrity sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==
 
+reflect-metadata@^0.1.13:
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.14.tgz#24cf721fe60677146bb77eeb0e1f9dece3d65859"
+  integrity sha512-ZhYeb6nRaXCfhnndflDK8qI6ZQ/YcWZCISRAWICW9XYqMUwjZM9Z0DveWX/ABN01oxSHwVxKQmxeYZSsm0jh5A==
+
 reflect.getprototypeof@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz#aaccbf41aca3821b87bb71d9dcbc7ad0ba50a3f3"
-  integrity sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.5.tgz#e0bd28b597518f16edaf9c0e292c631eb13e0674"
+  integrity sha512-62wgfC8dJWrmxv44CA36pLDnP6KKl3Vhxb7PL+8+qrrFMMoJij4vgiMP8zV4O8+CBMXY1mHxI5fITGHXFHVmQQ==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
-    get-intrinsic "^1.2.1"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.0.0"
+    get-intrinsic "^1.2.3"
     globalthis "^1.0.3"
     which-builtin-type "^1.1.3"
 
@@ -8813,9 +8768,9 @@ regenerator-runtime@^0.13.9:
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
 regenerator-runtime@^0.14.0:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
-  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
 
 regenerator-transform@^0.15.2:
   version "0.15.2"
@@ -8836,19 +8791,15 @@ regexp-tree@^0.1.11:
   resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.27.tgz#2198f0ef54518ffa743fe74d983b56ffd631b6cd"
   integrity sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==
 
-regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz#90ce989138db209f81492edd734183ce99f9677e"
-  integrity sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==
+regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
+  integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    set-function-name "^2.0.0"
-
-regexpp@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
-  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+    call-bind "^1.0.6"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    set-function-name "^2.0.1"
 
 regexpu-core@^5.3.1:
   version "5.3.2"
@@ -8879,10 +8830,10 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
 
-remove-accents@0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
-  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
+remove-accents@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.5.0.tgz#77991f37ba212afba162e375b627631315bed687"
+  integrity sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==
 
 remove-trailing-separator@^1.1.0:
   version "1.1.0"
@@ -8965,7 +8916,7 @@ resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^2.0.0-next.4:
+resolve@^2.0.0-next.5:
   version "2.0.0-next.5"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
   integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
@@ -9016,9 +8967,9 @@ reusify@^1.0.4:
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
 rfdc@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
-  integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.1.tgz#2b6d4df52dffe8bb346992a10ea9451f24373a8f"
+  integrity sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==
 
 rimraf@3.0.2, rimraf@^3.0.2:
   version "3.0.2"
@@ -9056,11 +9007,26 @@ rollup@^2.43.1, rollup@^2.77.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
-rollup@^3.25.2, rollup@^3.7.2:
-  version "3.29.4"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981"
-  integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
+rollup@^4.2.0:
+  version "4.12.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.12.1.tgz#0659cb02551cde4c5b210e9bd3af050b5b5b415d"
+  integrity sha512-ggqQKvx/PsB0FaWXhIvVkSWh7a/PCLQAsMjBc+nA2M8Rv2/HG0X6zvixAB7KyZBRtifBUhy5k8voQX/mRnABPg==
+  dependencies:
+    "@types/estree" "1.0.5"
   optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.12.1"
+    "@rollup/rollup-android-arm64" "4.12.1"
+    "@rollup/rollup-darwin-arm64" "4.12.1"
+    "@rollup/rollup-darwin-x64" "4.12.1"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.12.1"
+    "@rollup/rollup-linux-arm64-gnu" "4.12.1"
+    "@rollup/rollup-linux-arm64-musl" "4.12.1"
+    "@rollup/rollup-linux-riscv64-gnu" "4.12.1"
+    "@rollup/rollup-linux-x64-gnu" "4.12.1"
+    "@rollup/rollup-linux-x64-musl" "4.12.1"
+    "@rollup/rollup-win32-arm64-msvc" "4.12.1"
+    "@rollup/rollup-win32-ia32-msvc" "4.12.1"
+    "@rollup/rollup-win32-x64-msvc" "4.12.1"
     fsevents "~2.3.2"
 
 rrweb-cssom@^0.6.0:
@@ -9097,13 +9063,13 @@ rxjs@^6.4.0:
   dependencies:
     tslib "^1.9.0"
 
-safe-array-concat@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.0.1.tgz#91686a63ce3adbea14d61b14c99572a8ff84754c"
-  integrity sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==
+safe-array-concat@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.0.tgz#8d0cae9cb806d6d1c06e08ab13d847293ebe0692"
+  integrity sha512-ZdQ0Jeb9Ofti4hbt5lX3T2JcAamT9hfzYU1MNB+z/jaEbB6wfFfPIR/zEORmZqobkCCJhSjodobH6WHNmJ97dg==
   dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.2.1"
+    call-bind "^1.0.5"
+    get-intrinsic "^1.2.2"
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
@@ -9117,13 +9083,13 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-regex-test@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
-  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+safe-regex-test@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
+  integrity sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==
   dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.1.3"
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
     is-regex "^1.1.4"
 
 "safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
@@ -9131,34 +9097,20 @@ safe-regex-test@^1.0.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sass@^1.49.10:
-  version "1.69.5"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.5.tgz#23e18d1c757a35f2e52cc81871060b9ad653dfde"
-  integrity sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==
-  dependencies:
-    chokidar ">=3.0.0 <4.0.0"
-    immutable "^4.0.0"
-    source-map-js ">=0.6.2 <2.0.0"
-
-sass@^1.58.3:
-  version "1.69.7"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.7.tgz#6e7e1c8f51e8162faec3e9619babc7da780af3b7"
-  integrity sha512-rzj2soDeZ8wtE2egyLXgOOHQvaC2iosZrkF6v3EUG+tBwEvhqUCzm0VP3k9gHF9LXbSrRhT5SksoI56Iw8NPnQ==
+sass@^1.49.10, sass@^1.70.0:
+  version "1.71.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.71.1.tgz#dfb09c63ce63f89353777bbd4a88c0a38386ee54"
+  integrity sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-sax@^1.2.4:
+sax@^1.2.4, sax@~1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.3.0.tgz#a5dbe77db3be05c9d1ee7785dbd3ea9de51593d0"
   integrity sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==
 
-sax@~1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
-  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
-
 saxes@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5"
@@ -9195,10 +9147,10 @@ semver@^6.0.0, semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.2.1, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4:
-  version "7.5.4"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
-  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+semver@^7.3.4, semver@^7.3.5, semver@^7.5.3, semver@^7.5.4:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
+  integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -9216,24 +9168,27 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
-set-function-length@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.1.1.tgz#4bc39fafb0307224a33e106a7d35ca1218d659ed"
-  integrity sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==
+set-function-length@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.1.tgz#47cc5945f2c771e2cf261c6737cf9684a2a5e425"
+  integrity sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==
   dependencies:
-    define-data-property "^1.1.1"
-    get-intrinsic "^1.2.1"
+    define-data-property "^1.1.2"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.3"
     gopd "^1.0.1"
-    has-property-descriptors "^1.0.0"
+    has-property-descriptors "^1.0.1"
 
 set-function-name@^2.0.0, set-function-name@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a"
-  integrity sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
   dependencies:
-    define-data-property "^1.0.1"
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
     functions-have-names "^1.2.3"
-    has-property-descriptors "^1.0.0"
+    has-property-descriptors "^1.0.2"
 
 sharp-ico@^0.1.5:
   version "0.1.5"
@@ -9316,21 +9271,15 @@ shell-quote@^1.6.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
   integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
 
-shortcss@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/shortcss/-/shortcss-0.1.3.tgz#ee2a7904d80b7f5502c98408f4a2f313faadfb48"
-  integrity sha512-MIOoTd99CIGTrAuGiMUx9VZrnrZmWzEHuKbGM/w+ia/w98cezhlN9w4aQOVSxswdoqkUnWrMw3tThOi3sevZAg==
-  dependencies:
-    css-shorthand-properties "^1.0.0"
-
-side-channel@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
-  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+side-channel@^1.0.4, side-channel@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
   dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.2"
-    object-inspect "^1.9.0"
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
 
 siginfo@^2.0.0:
   version "2.0.0"
@@ -9395,6 +9344,14 @@ slice-ansi@^5.0.0:
     ansi-styles "^6.0.0"
     is-fullwidth-code-point "^4.0.0"
 
+slice-ansi@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-7.1.0.tgz#cd6b4655e298a8d1bdeb04250a433094b347b9a9"
+  integrity sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==
+  dependencies:
+    ansi-styles "^6.2.1"
+    is-fullwidth-code-point "^5.0.0"
+
 snake-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
@@ -9459,9 +9416,9 @@ spdx-correct@^3.0.0:
     spdx-license-ids "^3.0.0"
 
 spdx-exceptions@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
-  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz#5d607d27fc806f66d7b64a766650fa890f04ed66"
+  integrity sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==
 
 spdx-expression-parse@^3.0.0:
   version "3.0.1"
@@ -9472,9 +9429,9 @@ spdx-expression-parse@^3.0.0:
     spdx-license-ids "^3.0.0"
 
 spdx-license-ids@^3.0.0:
-  version "3.0.16"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.16.tgz#a14f64e0954f6e25cc6587bd4f392522db0d998f"
-  integrity sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==
+  version "3.0.17"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.17.tgz#887da8aa73218e51a1d917502d79863161a93f9c"
+  integrity sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==
 
 speedline-core@^1.4.3:
   version "1.4.3"
@@ -9524,10 +9481,10 @@ stackback@0.0.2:
   resolved "https://registry.yarnpkg.com/stackback/-/stackback-0.0.2.tgz#1ac8a0d9483848d1695e418b6d031a3c3ce68e3b"
   integrity sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==
 
-std-env@^3.3.3:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.5.0.tgz#83010c9e29bd99bf6f605df87c19012d82d63b97"
-  integrity sha512-JGUEaALvL0Mf6JCfYnJOTcobY+Nc7sG/TemDRBqCA0wEr4DER7zDchaaixTlmOxAjG1uRJmX82EQcxwTQTkqVA==
+std-env@^3.3.3, std-env@^3.5.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.7.0.tgz#c9f7386ced6ecf13360b6c6c55b8aaa4ef7481d2"
+  integrity sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==
 
 stop-iteration-iterator@^1.0.0:
   version "1.0.0"
@@ -9543,26 +9500,20 @@ stream-composer@^1.0.2:
   dependencies:
     streamx "^2.13.2"
 
-stream-shift@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
-  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
-
-streamx@^2.12.0, streamx@^2.12.5, streamx@^2.13.2, streamx@^2.14.0:
-  version "2.15.5"
-  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.15.5.tgz#87bcef4dc7f0b883f9359671203344a4e004c7f1"
-  integrity sha512-9thPGMkKC2GctCzyCUjME3yR03x2xNo0GPKGkRw2UMYN+gqWa9uqpyNWhmsNCutU5zHmkUum0LsCRQTXUgUCAg==
-  dependencies:
-    fast-fifo "^1.1.0"
-    queue-tick "^1.0.1"
+stream-shift@^1.0.0, stream-shift@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.3.tgz#85b8fab4d71010fc3ba8772e8046cc49b8a3864b"
+  integrity sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==
 
-streamx@^2.15.0:
-  version "2.15.6"
-  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.15.6.tgz#28bf36997ebc7bf6c08f9eba958735231b833887"
-  integrity sha512-q+vQL4AAz+FdfT137VF69Cc/APqUbxy+MDOImRrMvchJpigHj9GksgDU2LYbO9rx7RX6osWgxJB2WxhYv4SZAw==
+streamx@^2.12.0, streamx@^2.12.5, streamx@^2.13.0, streamx@^2.13.2, streamx@^2.14.0, streamx@^2.15.0:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.16.1.tgz#2b311bd34832f08aa6bb4d6a80297c9caef89614"
+  integrity sha512-m9QYj6WygWyWa3H1YY69amr4nVgy61xfjys7xO7kviL5rfIEc2naf+ewFiOA+aEJD7y0JO3h2GoiUv4TDwEGzQ==
   dependencies:
     fast-fifo "^1.1.0"
     queue-tick "^1.0.1"
+  optionalDependencies:
+    bare-events "^2.2.0"
 
 strict-uri-encode@^2.0.0:
   version "2.0.0"
@@ -9591,16 +9542,16 @@ string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string-width@^5.0.0, string-width@^5.0.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
-  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+string-width@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-7.1.0.tgz#d994252935224729ea3719c49f7206dc9c46550a"
+  integrity sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==
   dependencies:
-    eastasianwidth "^0.2.0"
-    emoji-regex "^9.2.2"
-    strip-ansi "^7.0.1"
+    emoji-regex "^10.3.0"
+    get-east-asian-width "^1.0.0"
+    strip-ansi "^7.1.0"
 
-string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.8:
+string.prototype.matchall@^4.0.10, string.prototype.matchall@^4.0.6:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz#a1553eb532221d4180c51581d6072cd65d1ee100"
   integrity sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==
@@ -9695,7 +9646,7 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
-strip-ansi@^7.0.1:
+strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
   integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
@@ -9731,7 +9682,7 @@ strip-indent@^4.0.0:
   dependencies:
     min-indent "^1.0.1"
 
-strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+strip-json-comments@3.1.1, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -9741,12 +9692,12 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
 
-strip-literal@^1.0.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/strip-literal/-/strip-literal-1.3.0.tgz#db3942c2ec1699e6836ad230090b84bb458e3a07"
-  integrity sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==
+strip-literal@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-literal/-/strip-literal-2.0.0.tgz#5d063580933e4e03ebb669b12db64d2200687527"
+  integrity sha512-f9vHgsCWBq2ugHAkGMiiYY+AYG0D/cbloKKg0nhaaaSNsujdGIpVXCNsrJpCKr5M0f4aI31mr13UjY6GAuXCKA==
   dependencies:
-    acorn "^8.10.0"
+    js-tokens "^8.0.2"
 
 strip-outer@^1.0.1:
   version "1.0.1"
@@ -9780,25 +9731,22 @@ stylelint-config-recommended@^13.0.0:
   integrity sha512-EH+yRj6h3GAe/fRiyaoO2F9l9Tgg50AOFhaszyfov9v6ayXJ1IkSHwTxd7lB48FmOeSGDPLjatjO11fJpmarkQ==
 
 stylelint-declaration-strict-value@^1.9.2:
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/stylelint-declaration-strict-value/-/stylelint-declaration-strict-value-1.9.2.tgz#f2a884c669974a73f82c9f24b05beb81bc337480"
-  integrity sha512-Z/2yr7g4tq2iGOUWhZLzHL2g2GJYJGcPkfjDh++zI8ukLxW0tcLGJjo64XYCDjja6YcECPDUWbpN+OAoAtAYvw==
-  dependencies:
-    css-values "^0.1.0"
-    shortcss "^0.1.3"
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/stylelint-declaration-strict-value/-/stylelint-declaration-strict-value-1.10.4.tgz#ed504c237a3f5c5542692279ec3f2d84b0b24f50"
+  integrity sha512-unOEftKCOb78Zr+WStqyVj9V1rCdUo+PJI3vFPiHPdu+O9o71K9Mu+txc6VDF7gBXyTTMHbbjIvHk3VNzuixzQ==
 
 stylelint-order@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-6.0.3.tgz#160b78650bd90463241b992581efee7159baefc2"
-  integrity sha512-1j1lOb4EU/6w49qZeT2SQVJXm0Ht+Qnq9GMfUa3pMwoyojIWfuA+JUDmoR97Bht1RLn4ei0xtLGy87M7d29B1w==
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-6.0.4.tgz#3e80d876c61a98d2640de181433686f24284748b"
+  integrity sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==
   dependencies:
-    postcss "^8.4.21"
+    postcss "^8.4.32"
     postcss-sorting "^8.0.2"
 
 stylelint-scss@^5.3.0, stylelint-scss@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-5.3.1.tgz#7f0f5f06d0a2a3c515aa71d3a8de3548045e03e1"
-  integrity sha512-5I9ZDIm77BZrjOccma5WyW2nJEKjXDd4Ca8Kk+oBapSO4pewSlno3n+OyimcyVJJujQZkBN2D+xuMkIamSc6hA==
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-5.3.2.tgz#c54564dfbd98de0c08742b9c43025cda91acf940"
+  integrity sha512-4LzLaayFhFyneJwLo0IUa8knuIvj+zF0vBFueQs4e3tEaAMIQX8q5th8ziKkgOavr6y/y9yoBe+RXN/edwLzsQ==
   dependencies:
     known-css-properties "^0.29.0"
     postcss-media-query-parser "^0.2.3"
@@ -9857,15 +9805,15 @@ stylis@4.2.0:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-stylus@^0.59.0:
-  version "0.59.0"
-  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.59.0.tgz#a344d5932787142a141946536d6e24e6a6be7aa6"
-  integrity sha512-lQ9w/XIOH5ZHVNuNbWW8D822r+/wBSO/d6XvtyHLF7LW4KaCIDeVbvn5DF8fGCJAUCwVhVi/h6J0NUcnylUEjg==
+stylus@^0.62.0:
+  version "0.62.0"
+  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.62.0.tgz#648a020e2bf90ed87587ab9c2f012757e977bb5d"
+  integrity sha512-v3YCf31atbwJQIMtPNX8hcQ+okD4NQaTuKGUWfII8eaqn+3otrbttGL1zSMZAAtiPsBztQnujVBugg/cXFUpyg==
   dependencies:
-    "@adobe/css-tools" "^4.0.1"
+    "@adobe/css-tools" "~4.3.1"
     debug "^4.3.2"
     glob "^7.1.6"
-    sax "~1.2.4"
+    sax "~1.3.0"
     source-map "^0.7.3"
 
 supports-color@8.1.1:
@@ -9922,7 +9870,7 @@ symlink-or-copy@^1.1.8, symlink-or-copy@^1.2.0, symlink-or-copy@^1.3.1:
   resolved "https://registry.yarnpkg.com/symlink-or-copy/-/symlink-or-copy-1.3.1.tgz#9506dd64d8e98fa21dcbf4018d1eab23e77f71fe"
   integrity sha512-0K91MEXFpBUaywiwSSkmKjnGcasG/rVBXFLJz5DrgGabpYD6N+3yZrfD6uUIfpuTu65DZLHi7N8CizHc07BPZA==
 
-table@^6.0.9, table@^6.8.1:
+table@^6.8.1:
   version "6.8.1"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
   integrity sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==
@@ -9944,13 +9892,15 @@ tar-fs@2.1.1, tar-fs@^2.0.0:
     tar-stream "^2.1.4"
 
 tar-fs@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-3.0.4.tgz#a21dc60a2d5d9f55e0089ccd78124f1d3771dbbf"
-  integrity sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-3.0.5.tgz#f954d77767e4e6edf973384e1eb95f8f81d64ed9"
+  integrity sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg==
   dependencies:
-    mkdirp-classic "^0.5.2"
     pump "^3.0.0"
     tar-stream "^3.1.5"
+  optionalDependencies:
+    bare-fs "^2.1.1"
+    bare-path "^2.1.0"
 
 tar-stream@^2.1.4:
   version "2.2.0"
@@ -9995,9 +9945,9 @@ tempy@^0.6.0:
     unique-string "^2.0.0"
 
 terser@^5.0.0, terser@^5.10.0:
-  version "5.24.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.24.0.tgz#4ae50302977bca4831ccc7b4fef63a3c04228364"
-  integrity sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==
+  version "5.29.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.29.1.tgz#44e58045b70c09792ba14bfb7b4e14ca8755b9fa"
+  integrity sha512-lZQ/fyaIGxsbGxApKmoPTODIzELy3++mXhS5hOqaAWZjQtpq/hFHAc+rm29NND1rYRxRWKcjuARNwULNXa5RtQ==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"
@@ -10053,25 +10003,25 @@ timezone-mock@^1.3.4:
   resolved "https://registry.yarnpkg.com/timezone-mock/-/timezone-mock-1.3.6.tgz#44e4c5aeb57e6c07ae630a05c528fc4d9aab86f4"
   integrity sha512-YcloWmZfLD9Li5m2VcobkCDNVaLMx8ohAb/97l/wYS3m+0TIEK5PFNMZZfRcusc6sFjIfxu8qcJT0CNnOdpqmg==
 
-tinybench@^2.5.0:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.5.1.tgz#3408f6552125e53a5a48adee31261686fd71587e"
-  integrity sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==
+tinybench@^2.5.1:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.6.0.tgz#1423284ee22de07c91b3752c048d2764714b341b"
+  integrity sha512-N8hW3PG/3aOoZAN5V/NSAEDz0ZixDSSt5b/a05iqtpgfLWMSVuCo7w0k2vVvEjdrIoeGqZzweX2WlyioNIHchA==
 
-tinypool@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-0.7.0.tgz#88053cc99b4a594382af23190c609d93fddf8021"
-  integrity sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==
+tinypool@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-0.8.2.tgz#84013b03dc69dacb322563a475d4c0a9be00f82a"
+  integrity sha512-SUszKYe5wgsxnNOVlBYO6IC+8VGWdVGZWAqUxp3UErNBtptZvWbwyUOyzNL59zigz2rCA92QiL3wvG+JDSdJdQ==
 
 tinyspy@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-1.1.1.tgz#0cb91d5157892af38cb2d217f5c7e8507a5bf092"
   integrity sha512-UVq5AXt/gQlti7oxoIg5oi/9r0WpF7DGEVwXgqWSMmyN16+e3tl5lIvTaOpJ3TAtu5xFzWccFRM4R5NaWHF+4g==
 
-tinyspy@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-2.2.0.tgz#9dc04b072746520b432f77ea2c2d17933de5d6ce"
-  integrity sha512-d2eda04AN/cPOR89F7Xv5bK/jrQEhmcLFe6HFldoeO9AJtps+fqEnh486vnT/8y4bw38pSyxDcTCAq+Ks2aJTg==
+tinyspy@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-2.2.1.tgz#117b2342f1f38a0dbdcc73a50a454883adf861d1"
+  integrity sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==
 
 tmp@^0.0.33:
   version "0.0.33"
@@ -10155,10 +10105,15 @@ trim-repeated@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.2"
 
+ts-api-utils@^1.0.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.2.1.tgz#f716c7e027494629485b21c0df6180f4d08f5e8b"
+  integrity sha512-RIYA36cJn2WiH9Hy77hdF9r7oEwxAtB/TS9/S4Qd90Ap4z5FSiin5zEiTL44OII1Y3IIlEvxwxFUVgrHSZ/UpA==
+
 ts-node@^10.9.1:
-  version "10.9.1"
-  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b"
-  integrity sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==
+  version "10.9.2"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.2.tgz#70f021c9e185bccdca820e26dc413805c101c71f"
+  integrity sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==
   dependencies:
     "@cspotcode/source-map-support" "^0.8.0"
     "@tsconfig/node10" "^1.0.7"
@@ -10174,17 +10129,17 @@ ts-node@^10.9.1:
     v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
-tsconfig-paths@^3.14.2:
-  version "3.14.2"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
-  integrity sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==
+tsconfig-paths@^3.15.0:
+  version "3.15.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
+  integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
   dependencies:
     "@types/json5" "^0.0.29"
     json5 "^1.0.2"
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tsconfig-paths@^4.1.0, tsconfig-paths@^4.1.2:
+tsconfig-paths@^4.1.0, tsconfig-paths@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz#ef78e19039133446d244beac0fd6a1632e2d107c"
   integrity sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==
@@ -10193,7 +10148,7 @@ tsconfig-paths@^4.1.0, tsconfig-paths@^4.1.2:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -10203,13 +10158,6 @@ tslib@^2.0.3, tslib@^2.3.0, tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
-tsutils@^3.21.0:
-  version "3.21.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
-  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
-  dependencies:
-    tslib "^1.8.1"
-
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
@@ -10254,49 +10202,59 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
-type-fest@^1.0.1, type-fest@^1.0.2, type-fest@^1.2.1, type-fest@^1.2.2:
+type-fest@^1.0.1, type-fest@^1.2.1, type-fest@^1.2.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-1.4.0.tgz#e9fb813fe3bf1744ec359d55d1affefa76f14be1"
   integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==
 
-typed-array-buffer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz#18de3e7ed7974b0a729d3feecb94338d1472cd60"
-  integrity sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==
+type-fest@^3.0.0:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.13.1.tgz#bb744c1f0678bea7543a2d1ec24e83e68e8c8706"
+  integrity sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==
+
+typed-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
+  integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
   dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.2.1"
-    is-typed-array "^1.1.10"
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.13"
 
-typed-array-byte-length@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz#d787a24a995711611fb2b87a4052799517b230d0"
-  integrity sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==
+typed-array-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
+  integrity sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
   dependencies:
-    call-bind "^1.0.2"
+    call-bind "^1.0.7"
     for-each "^0.3.3"
-    has-proto "^1.0.1"
-    is-typed-array "^1.1.10"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
 
-typed-array-byte-offset@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz#cbbe89b51fdef9cd6aaf07ad4707340abbc4ea0b"
-  integrity sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==
+typed-array-byte-offset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz#f9ec1acb9259f395093e4567eb3c28a580d02063"
+  integrity sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==
   dependencies:
-    available-typed-arrays "^1.0.5"
-    call-bind "^1.0.2"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
     for-each "^0.3.3"
-    has-proto "^1.0.1"
-    is-typed-array "^1.1.10"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
 
-typed-array-length@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb"
-  integrity sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==
+typed-array-length@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.5.tgz#57d44da160296d8663fd63180a1802ebf25905d5"
+  integrity sha512-yMi0PlwuznKHxKmcpoOdeLwxBoVPkqZxd7q2FgMkmD3bNwvF5VW0+UlUQ1k1vmktTu4Yu13Q0RIxEP8+B+wloA==
   dependencies:
-    call-bind "^1.0.2"
+    call-bind "^1.0.7"
     for-each "^0.3.3"
-    is-typed-array "^1.1.9"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
 
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
@@ -10311,41 +10269,41 @@ typedarray@^0.0.6:
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
 typescript-plugin-css-modules@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/typescript-plugin-css-modules/-/typescript-plugin-css-modules-5.0.2.tgz#7aed6350638f11a1318d393568ea87404c75528f"
-  integrity sha512-ej/Og4Y8mF+43P14P9Ik1MGqNXcXBVgO1TltkESegdnZsaaRXnaJ5CoJmTPRkg25ysQlOV6P94wNhI4VxIzlkw==
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/typescript-plugin-css-modules/-/typescript-plugin-css-modules-5.1.0.tgz#faa0ceffe8a8ffcbbc2f77ed637a64464195044a"
+  integrity sha512-6h+sLBa4l+XYSTn/31vZHd/1c3SvAbLpobY6FxDiUOHJQG1eD9Gh3eCs12+Eqc+TCOAdxcO+zAPvUq0jBfdciw==
   dependencies:
-    "@types/postcss-modules-local-by-default" "^4.0.0"
-    "@types/postcss-modules-scope" "^3.0.1"
-    dotenv "^16.0.3"
+    "@types/postcss-modules-local-by-default" "^4.0.2"
+    "@types/postcss-modules-scope" "^3.0.4"
+    dotenv "^16.4.2"
     icss-utils "^5.1.0"
-    less "^4.1.3"
+    less "^4.2.0"
     lodash.camelcase "^4.3.0"
-    postcss "^8.4.21"
+    postcss "^8.4.35"
     postcss-load-config "^3.1.4"
     postcss-modules-extract-imports "^3.0.0"
-    postcss-modules-local-by-default "^4.0.0"
-    postcss-modules-scope "^3.0.0"
+    postcss-modules-local-by-default "^4.0.4"
+    postcss-modules-scope "^3.1.1"
     reserved-words "^0.1.2"
-    sass "^1.58.3"
+    sass "^1.70.0"
     source-map-js "^1.0.2"
-    stylus "^0.59.0"
-    tsconfig-paths "^4.1.2"
+    stylus "^0.62.0"
+    tsconfig-paths "^4.2.0"
 
-typescript@^4.3.4:
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
+  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
 
 typescript@^5.0.4:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
-  integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
+  version "5.4.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.2.tgz#0ae9cebcfae970718474fe0da2c090cad6577372"
+  integrity sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==
 
-ufo@^1.3.0, ufo@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.3.2.tgz#c7d719d0628a1c80c006d2240e0d169f6e3c0496"
-  integrity sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==
+ufo@^1.3.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.4.0.tgz#39845b31be81b4f319ab1d99fd20c56cac528d32"
+  integrity sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ==
 
 uglify-js@^3.5.1:
   version "3.17.4"
@@ -10519,15 +10477,10 @@ v8-compile-cache-lib@^3.0.1:
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
-v8-compile-cache@^2.0.3:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz#cdada8bec61e15865f05d097c5f4fd30e94dc128"
-  integrity sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==
-
 v8-to-istanbul@^9.1.0:
-  version "9.1.3"
-  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.1.3.tgz#ea456604101cd18005ac2cae3cdd1aa058a6306b"
-  integrity sha512-9lDD+EVI2fjFsMWXc6dy5JJzBsVTcQ2fVkfBvncZ6xJWG9wtBhOldG+mHkSL0+V1K/xgZz0JDO5UT5hFwHUghg==
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz#2ed7644a245cddd83d4e087b9b33b3e62dfd10ad"
+  integrity sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==
   dependencies:
     "@jridgewell/trace-mapping" "^0.3.12"
     "@types/istanbul-lib-coverage" "^2.0.1"
@@ -10605,17 +10558,16 @@ vinyl@^3.0.0, vinyl@~3.0.0:
     replace-ext "^2.0.0"
     teex "^1.0.1"
 
-vite-node@0.34.6:
-  version "0.34.6"
-  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.34.6.tgz#34d19795de1498562bf21541a58edcd106328a17"
-  integrity sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==
+vite-node@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-1.3.1.tgz#a93f7372212f5d5df38e945046b945ac3f4855d2"
+  integrity sha512-azbRrqRxlWTJEVbzInZCTchx0X69M/XPTCz4H+TLvlTcR/xH/3hkRqhOakT41fMJCMzXTu4UvegkZiEoJAWvng==
   dependencies:
     cac "^6.7.14"
     debug "^4.3.4"
-    mlly "^1.4.0"
     pathe "^1.1.1"
     picocolors "^1.0.0"
-    vite "^3.0.0 || ^4.0.0 || ^5.0.0-0"
+    vite "^5.0.0"
 
 vite-plugin-eslint@^1.8.1:
   version "1.8.1"
@@ -10626,10 +10578,10 @@ vite-plugin-eslint@^1.8.1:
     "@types/eslint" "^8.4.5"
     rollup "^2.77.2"
 
-vite-plugin-html@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/vite-plugin-html/-/vite-plugin-html-3.2.0.tgz#0d4df9900642a321a139f1c25c05195ba9d0ec79"
-  integrity sha512-2VLCeDiHmV/BqqNn5h2V+4280KRgQzCFN47cst3WiNK848klESPQnzuC3okH5XHtgwHH/6s1Ho/YV6yIO0pgoQ==
+vite-plugin-html@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/vite-plugin-html/-/vite-plugin-html-3.2.2.tgz#661834fa09015d3fda48ba694dbaa809396f5f7a"
+  integrity sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==
   dependencies:
     "@rollup/pluginutils" "^4.2.0"
     colorette "^2.0.16"
@@ -10644,18 +10596,16 @@ vite-plugin-html@^3.2.0:
     node-html-parser "^5.3.3"
     pathe "^0.2.0"
 
-vite-plugin-pwa@^0.14.0:
-  version "0.14.7"
-  resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.14.7.tgz#56844ff767d54256f45f49f91bfdff9dd1ea7685"
-  integrity sha512-dNJaf0fYOWncmjxv9HiSa2xrSjipjff7IkYE5oIUJ2x5HKu3cXgA8LRgzOwTc5MhwyFYRSU0xyN0Phbx3NsQYw==
+vite-plugin-pwa@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.19.2.tgz#60d91c667b3ed22196a072a00dc0fe4f91603c03"
+  integrity sha512-LSQJFPxCAQYbRuSyc9EbRLRqLpaBA9onIZuQFomfUYjWSgHuQLonahetDlPSC9zsxmkSEhQH8dXZN8yL978h3w==
   dependencies:
-    "@rollup/plugin-replace" "^5.0.1"
     debug "^4.3.4"
-    fast-glob "^3.2.12"
-    pretty-bytes "^6.0.0"
-    rollup "^3.7.2"
-    workbox-build "^6.5.4"
-    workbox-window "^6.5.4"
+    fast-glob "^3.3.2"
+    pretty-bytes "^6.1.1"
+    workbox-build "^7.0.0"
+    workbox-window "^7.0.0"
 
 vite-plugin-static-copy@^0.17.0:
   version "0.17.1"
@@ -10667,15 +10617,16 @@ vite-plugin-static-copy@^0.17.0:
     fs-extra "^11.1.0"
     picocolors "^1.0.0"
 
-vite-plugin-stylelint@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/vite-plugin-stylelint/-/vite-plugin-stylelint-4.3.0.tgz#62cfee8aadc277f06b2655e2b4e311ea46812f8d"
-  integrity sha512-S8BONq5X8TndOFt+My4lkeHxVZvkDQRL++TV0nvnuYgOU/CvDddPPOT4V6go+ETzWK0NEtXqCGFnpkmm8c8Xcg==
+vite-plugin-stylelint@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-stylelint/-/vite-plugin-stylelint-5.3.1.tgz#1e9e3ab42217cc79e50914158626c617e2115a64"
+  integrity sha512-M/hSdfOwnOVghbJDeuuYIU2xO/MMukYR8QcEyNKFPG8ro1L+DlTdViix2B2d/FvAw14WPX88ckA5A7NvUjJz8w==
   dependencies:
-    "@rollup/pluginutils" "^5.0.2"
+    "@rollup/pluginutils" "^5.1.0"
     chokidar "^3.5.3"
+    debug "^4.3.4"
 
-vite-plugin-svgr@4.2.0:
+vite-plugin-svgr@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-4.2.0.tgz#9f3bf5206b0ec510287e56d16f1915e729bb4e6b"
   integrity sha512-SC7+FfVtNQk7So0XMjrrtLAbEC8qjFPifyD7+fs/E6aaNdVde6umlVVh0QuwDLdOMu7vp5RiGFsB70nj5yo0XA==
@@ -10684,45 +10635,41 @@ vite-plugin-svgr@4.2.0:
     "@svgr/core" "^8.1.0"
     "@svgr/plugin-jsx" "^8.1.0"
 
-"vite@^3.0.0 || ^4.0.0 || ^5.0.0-0", "vite@^3.1.0 || ^4.0.0 || ^5.0.0-0", vite@^4.4.8:
-  version "4.4.8"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-4.4.8.tgz#31e4a438f8748695c68bd57ffd262ba93540fdf7"
-  integrity sha512-LONawOUUjxQridNWGQlNizfKH89qPigK36XhMI7COMGztz8KNY0JHim7/xDd71CZwGT4HtSRgI7Hy+RlhG0Gvg==
+vite@^5.0.0, vite@^5.1.5:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.1.5.tgz#bdbc2b15e8000d9cc5172f059201178f9c9de5fb"
+  integrity sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==
   dependencies:
-    esbuild "^0.18.10"
-    postcss "^8.4.26"
-    rollup "^3.25.2"
+    esbuild "^0.19.3"
+    postcss "^8.4.35"
+    rollup "^4.2.0"
   optionalDependencies:
-    fsevents "~2.3.2"
+    fsevents "~2.3.3"
 
-vitest@^0.34.6:
-  version "0.34.6"
-  resolved "https://registry.yarnpkg.com/vitest/-/vitest-0.34.6.tgz#44880feeeef493c04b7f795ed268f24a543250d7"
-  integrity sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==
-  dependencies:
-    "@types/chai" "^4.3.5"
-    "@types/chai-subset" "^1.3.3"
-    "@types/node" "*"
-    "@vitest/expect" "0.34.6"
-    "@vitest/runner" "0.34.6"
-    "@vitest/snapshot" "0.34.6"
-    "@vitest/spy" "0.34.6"
-    "@vitest/utils" "0.34.6"
-    acorn "^8.9.0"
-    acorn-walk "^8.2.0"
-    cac "^6.7.14"
+vitest@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-1.3.1.tgz#2d7e9861f030d88a4669392a4aecb40569d90937"
+  integrity sha512-/1QJqXs8YbCrfv/GPQ05wAZf2eakUPLPa18vkJAKE7RXOKfVHqMZZ1WlTjiwl6Gcn65M5vpNUB6EFLnEdRdEXQ==
+  dependencies:
+    "@vitest/expect" "1.3.1"
+    "@vitest/runner" "1.3.1"
+    "@vitest/snapshot" "1.3.1"
+    "@vitest/spy" "1.3.1"
+    "@vitest/utils" "1.3.1"
+    acorn-walk "^8.3.2"
     chai "^4.3.10"
     debug "^4.3.4"
-    local-pkg "^0.4.3"
-    magic-string "^0.30.1"
+    execa "^8.0.1"
+    local-pkg "^0.5.0"
+    magic-string "^0.30.5"
     pathe "^1.1.1"
     picocolors "^1.0.0"
-    std-env "^3.3.3"
-    strip-literal "^1.0.1"
-    tinybench "^2.5.0"
-    tinypool "^0.7.0"
-    vite "^3.1.0 || ^4.0.0 || ^5.0.0-0"
-    vite-node "0.34.6"
+    std-env "^3.5.0"
+    strip-literal "^2.0.0"
+    tinybench "^2.5.1"
+    tinypool "^0.8.2"
+    vite "^5.0.0"
+    vite-node "1.3.1"
     why-is-node-running "^2.2.2"
 
 void-elements@3.1.0:
@@ -10731,9 +10678,9 @@ void-elements@3.1.0:
   integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
 
 vue-template-compiler@^2.6.11:
-  version "2.7.15"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.15.tgz#ec88ba8ceafe0f17a528b89c57e01e02da92b0de"
-  integrity sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
+  integrity sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
   dependencies:
     de-indent "^1.0.2"
     he "^1.2.0"
@@ -10797,9 +10744,9 @@ whatwg-encoding@^2.0.0:
     iconv-lite "0.6.3"
 
 whatwg-fetch@^3.6.2:
-  version "3.6.19"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.19.tgz#caefd92ae630b91c07345537e67f8354db470973"
-  integrity sha512-d67JP4dHSbm2TrpFj8AbO8DnL1JXL5J9u0Kq2xW6d0TFDbCA3Muhdt8orXC22utleTVj7Prqt82baN6RBvnEgw==
+  version "3.6.20"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz#580ce6d791facec91d37c72890995a0b48d31c70"
+  integrity sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==
 
 whatwg-mimetype@^3.0.0:
   version "3.0.0"
@@ -10870,16 +10817,16 @@ which-collection@^1.0.1:
     is-weakmap "^2.0.1"
     is-weakset "^2.0.1"
 
-which-typed-array@^1.1.11, which-typed-array@^1.1.13, which-typed-array@^1.1.9:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.13.tgz#870cd5be06ddb616f504e7b039c4c24898184d36"
-  integrity sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==
+which-typed-array@^1.1.13, which-typed-array@^1.1.14, which-typed-array@^1.1.9:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.14.tgz#1f78a111aee1e131ca66164d8bdc3ab062c95a06"
+  integrity sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==
   dependencies:
-    available-typed-arrays "^1.0.5"
-    call-bind "^1.0.4"
+    available-typed-arrays "^1.0.6"
+    call-bind "^1.0.5"
     for-each "^0.3.3"
     gopd "^1.0.1"
-    has-tostringtag "^1.0.0"
+    has-tostringtag "^1.0.1"
 
 which@^1.2.14, which@^1.2.9, which@^1.3.1:
   version "1.3.1"
@@ -10916,6 +10863,14 @@ workbox-background-sync@6.6.1:
     idb "^7.0.1"
     workbox-core "6.6.1"
 
+workbox-background-sync@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-7.0.0.tgz#2b84b96ca35fec976e3bd2794b70e4acec46b3a5"
+  integrity sha512-S+m1+84gjdueM+jIKZ+I0Lx0BDHkk5Nu6a3kTVxP4fdj3gKouRNmhO8H290ybnJTOPfBDtTMXSQA/QLTvr7PeA==
+  dependencies:
+    idb "^7.0.1"
+    workbox-core "7.0.0"
+
 workbox-broadcast-update@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.6.1.tgz#0fad9454cf8e4ace0c293e5617c64c75d8a8c61e"
@@ -10923,6 +10878,13 @@ workbox-broadcast-update@6.6.1:
   dependencies:
     workbox-core "6.6.1"
 
+workbox-broadcast-update@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-7.0.0.tgz#7f611ca1a94ba8ac0aa40fa171c9713e0f937d22"
+  integrity sha512-oUuh4jzZrLySOo0tC0WoKiSg90bVAcnE98uW7F8GFiSOXnhogfNDGZelPJa+6KpGBO5+Qelv04Hqx2UD+BJqNQ==
+  dependencies:
+    workbox-core "7.0.0"
+
 workbox-build@^6.5.4:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.6.1.tgz#6010e9ce550910156761448f2dbea8cfcf759cb0"
@@ -10966,6 +10928,49 @@ workbox-build@^6.5.4:
     workbox-sw "6.6.1"
     workbox-window "6.6.1"
 
+workbox-build@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-7.0.0.tgz#02ab5ef2991b3369b8b9395703f08912212769b4"
+  integrity sha512-CttE7WCYW9sZC+nUYhQg3WzzGPr4IHmrPnjKiu3AMXsiNQKx+l4hHl63WTrnicLmKEKHScWDH8xsGBdrYgtBzg==
+  dependencies:
+    "@apideck/better-ajv-errors" "^0.3.1"
+    "@babel/core" "^7.11.1"
+    "@babel/preset-env" "^7.11.0"
+    "@babel/runtime" "^7.11.2"
+    "@rollup/plugin-babel" "^5.2.0"
+    "@rollup/plugin-node-resolve" "^11.2.1"
+    "@rollup/plugin-replace" "^2.4.1"
+    "@surma/rollup-plugin-off-main-thread" "^2.2.3"
+    ajv "^8.6.0"
+    common-tags "^1.8.0"
+    fast-json-stable-stringify "^2.1.0"
+    fs-extra "^9.0.1"
+    glob "^7.1.6"
+    lodash "^4.17.20"
+    pretty-bytes "^5.3.0"
+    rollup "^2.43.1"
+    rollup-plugin-terser "^7.0.0"
+    source-map "^0.8.0-beta.0"
+    stringify-object "^3.3.0"
+    strip-comments "^2.0.1"
+    tempy "^0.6.0"
+    upath "^1.2.0"
+    workbox-background-sync "7.0.0"
+    workbox-broadcast-update "7.0.0"
+    workbox-cacheable-response "7.0.0"
+    workbox-core "7.0.0"
+    workbox-expiration "7.0.0"
+    workbox-google-analytics "7.0.0"
+    workbox-navigation-preload "7.0.0"
+    workbox-precaching "7.0.0"
+    workbox-range-requests "7.0.0"
+    workbox-recipes "7.0.0"
+    workbox-routing "7.0.0"
+    workbox-strategies "7.0.0"
+    workbox-streams "7.0.0"
+    workbox-sw "7.0.0"
+    workbox-window "7.0.0"
+
 workbox-cacheable-response@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.6.1.tgz#284c2b86be3f4fd191970ace8c8e99797bcf58e9"
@@ -10973,11 +10978,23 @@ workbox-cacheable-response@6.6.1:
   dependencies:
     workbox-core "6.6.1"
 
+workbox-cacheable-response@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-7.0.0.tgz#ee27c036728189eed69d25a135013053277482d2"
+  integrity sha512-0lrtyGHn/LH8kKAJVOQfSu3/80WDc9Ma8ng0p2i/5HuUndGttH+mGMSvOskjOdFImLs2XZIimErp7tSOPmu/6g==
+  dependencies:
+    workbox-core "7.0.0"
+
 workbox-core@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.6.1.tgz#7184776d4134c5ed2f086878c882728fc9084265"
   integrity sha512-ZrGBXjjaJLqzVothoE12qTbVnOAjFrHDXpZe7coCb6q65qI/59rDLwuFMO4PcZ7jcbxY+0+NhUVztzR/CbjEFw==
 
+workbox-core@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-7.0.0.tgz#dec114ec923cc2adc967dd9be1b8a0bed50a3545"
+  integrity sha512-81JkAAZtfVP8darBpfRTovHg8DGAVrKFgHpOArZbdFd78VqHr5Iw65f2guwjE2NlCFbPFDoez3D3/6ZvhI/rwQ==
+
 workbox-expiration@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.6.1.tgz#a841fa36676104426dbfb9da1ef6a630b4f93739"
@@ -10986,6 +11003,14 @@ workbox-expiration@6.6.1:
     idb "^7.0.1"
     workbox-core "6.6.1"
 
+workbox-expiration@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-7.0.0.tgz#3d90bcf2a7577241de950f89784f6546b66c2baa"
+  integrity sha512-MLK+fogW+pC3IWU9SFE+FRStvDVutwJMR5if1g7oBJx3qwmO69BNoJQVaMXq41R0gg3MzxVfwOGKx3i9P6sOLQ==
+  dependencies:
+    idb "^7.0.1"
+    workbox-core "7.0.0"
+
 workbox-google-analytics@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.6.1.tgz#a07a6655ab33d89d1b0b0a935ffa5dea88618c5d"
@@ -10996,6 +11021,16 @@ workbox-google-analytics@6.6.1:
     workbox-routing "6.6.1"
     workbox-strategies "6.6.1"
 
+workbox-google-analytics@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-7.0.0.tgz#603b2c4244af1e85de0fb26287d4e17d3293452a"
+  integrity sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==
+  dependencies:
+    workbox-background-sync "7.0.0"
+    workbox-core "7.0.0"
+    workbox-routing "7.0.0"
+    workbox-strategies "7.0.0"
+
 workbox-navigation-preload@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.6.1.tgz#61a34fe125558dd88cf09237f11bd966504ea059"
@@ -11003,6 +11038,13 @@ workbox-navigation-preload@6.6.1:
   dependencies:
     workbox-core "6.6.1"
 
+workbox-navigation-preload@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-7.0.0.tgz#4913878dbbd97057181d57baa18d2bbdde085c6c"
+  integrity sha512-juWCSrxo/fiMz3RsvDspeSLGmbgC0U9tKqcUPZBCf35s64wlaLXyn2KdHHXVQrb2cqF7I0Hc9siQalainmnXJA==
+  dependencies:
+    workbox-core "7.0.0"
+
 workbox-precaching@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.6.1.tgz#dedeeba10a2d163d990bf99f1c2066ac0d1a19e2"
@@ -11012,6 +11054,15 @@ workbox-precaching@6.6.1:
     workbox-routing "6.6.1"
     workbox-strategies "6.6.1"
 
+workbox-precaching@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-7.0.0.tgz#3979ba8033aadf3144b70e9fe631d870d5fbaa03"
+  integrity sha512-EC0vol623LJqTJo1mkhD9DZmMP604vHqni3EohhQVwhJlTgyKyOkMrZNy5/QHfOby+39xqC01gv4LjOm4HSfnA==
+  dependencies:
+    workbox-core "7.0.0"
+    workbox-routing "7.0.0"
+    workbox-strategies "7.0.0"
+
 workbox-range-requests@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.6.1.tgz#ddaf7e73af11d362fbb2f136a9063a4c7f507a39"
@@ -11019,6 +11070,13 @@ workbox-range-requests@6.6.1:
   dependencies:
     workbox-core "6.6.1"
 
+workbox-range-requests@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-7.0.0.tgz#97511901e043df27c1aa422adcc999a7751f52ed"
+  integrity sha512-SxAzoVl9j/zRU9OT5+IQs7pbJBOUOlriB8Gn9YMvi38BNZRbM+RvkujHMo8FOe9IWrqqwYgDFBfv6sk76I1yaQ==
+  dependencies:
+    workbox-core "7.0.0"
+
 workbox-recipes@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.6.1.tgz#ea70d2b2b0b0bce8de0a9d94f274d4a688e69fae"
@@ -11031,6 +11089,18 @@ workbox-recipes@6.6.1:
     workbox-routing "6.6.1"
     workbox-strategies "6.6.1"
 
+workbox-recipes@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-7.0.0.tgz#1a6a01c8c2dfe5a41eef0fed3fe517e8a45c6514"
+  integrity sha512-DntcK9wuG3rYQOONWC0PejxYYIDHyWWZB/ueTbOUDQgefaeIj1kJ7pdP3LZV2lfrj8XXXBWt+JDRSw1lLLOnww==
+  dependencies:
+    workbox-cacheable-response "7.0.0"
+    workbox-core "7.0.0"
+    workbox-expiration "7.0.0"
+    workbox-precaching "7.0.0"
+    workbox-routing "7.0.0"
+    workbox-strategies "7.0.0"
+
 workbox-routing@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.6.1.tgz#cba9a1c7e0d1ea11e24b6f8c518840efdc94f581"
@@ -11038,6 +11108,13 @@ workbox-routing@6.6.1:
   dependencies:
     workbox-core "6.6.1"
 
+workbox-routing@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-7.0.0.tgz#6668438a06554f60645aedc77244a4fe3a91e302"
+  integrity sha512-8YxLr3xvqidnbVeGyRGkaV4YdlKkn5qZ1LfEePW3dq+ydE73hUUJJuLmGEykW3fMX8x8mNdL0XrWgotcuZjIvA==
+  dependencies:
+    workbox-core "7.0.0"
+
 workbox-strategies@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.6.1.tgz#38d0f0fbdddba97bd92e0c6418d0b1a2ccd5b8bf"
@@ -11045,6 +11122,13 @@ workbox-strategies@6.6.1:
   dependencies:
     workbox-core "6.6.1"
 
+workbox-strategies@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-7.0.0.tgz#dcba32b3f3074476019049cc490fe1a60ea73382"
+  integrity sha512-dg3qJU7tR/Gcd/XXOOo7x9QoCI9nk74JopaJaYAQ+ugLi57gPsXycVdBnYbayVj34m6Y8ppPwIuecrzkpBVwbA==
+  dependencies:
+    workbox-core "7.0.0"
+
 workbox-streams@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.6.1.tgz#b2f7ba7b315c27a6e3a96a476593f99c5d227d26"
@@ -11053,11 +11137,24 @@ workbox-streams@6.6.1:
     workbox-core "6.6.1"
     workbox-routing "6.6.1"
 
+workbox-streams@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-7.0.0.tgz#36722aecd04785f88b6f709e541c094fc658c0f9"
+  integrity sha512-moVsh+5to//l6IERWceYKGiftc+prNnqOp2sgALJJFbnNVpTXzKISlTIsrWY+ogMqt+x1oMazIdHj25kBSq/HQ==
+  dependencies:
+    workbox-core "7.0.0"
+    workbox-routing "7.0.0"
+
 workbox-sw@6.6.1:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.6.1.tgz#d4c4ca3125088e8b9fd7a748ed537fa0247bd72c"
   integrity sha512-R7whwjvU2abHH/lR6kQTTXLHDFU2izht9kJOvBRYK65FbwutT4VvnUAJIgHvfWZ/fokrOPhfoWYoPCMpSgUKHQ==
 
+workbox-sw@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-7.0.0.tgz#7350126411e3de1409f7ec243df8d06bb5b08b86"
+  integrity sha512-SWfEouQfjRiZ7GNABzHUKUyj8pCoe+RwjfOIajcx6J5mtgKkN+t8UToHnpaJL5UVVOf5YhJh+OHhbVNIHe+LVA==
+
 workbox-window@6.6.1, workbox-window@^6.5.4:
   version "6.6.1"
   resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.6.1.tgz#f22a394cbac36240d0dadcbdebc35f711bb7b89e"
@@ -11066,6 +11163,14 @@ workbox-window@6.6.1, workbox-window@^6.5.4:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
+workbox-window@7.0.0, workbox-window@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-7.0.0.tgz#a683ab33c896e4f16786794eac7978fc98a25d08"
+  integrity sha512-j7P/bsAWE/a7sxqTzXo3P2ALb1reTfZdvVp6OJ/uLr/C2kZAMvjeWGm8V4htQhor7DOvYg0sSbFN2+flT5U0qA==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+    workbox-core "7.0.0"
+
 workerpool@6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
@@ -11080,14 +11185,14 @@ wrap-ansi@^7.0.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
-  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+wrap-ansi@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-9.0.0.tgz#1a3dc8b70d85eeb8398ddfb1e4a02cd186e58b3e"
+  integrity sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==
   dependencies:
-    ansi-styles "^6.1.0"
-    string-width "^5.0.1"
-    strip-ansi "^7.0.1"
+    ansi-styles "^6.2.1"
+    string-width "^7.0.0"
+    strip-ansi "^7.1.0"
 
 wrappy@1:
   version "1.0.2"
@@ -11132,9 +11237,9 @@ ws@^7.0.0, ws@^7.5.0:
   integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
 
 ws@^8.13.0:
-  version "8.14.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.14.2.tgz#6c249a806eb2db7a20d26d51e7709eab7b2e6c7f"
-  integrity sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==
+  version "8.16.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.16.0.tgz#d1cd774f36fbc07165066a60e40323eab6446fd4"
+  integrity sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==
 
 xdg-basedir@^4.0.0:
   version "4.0.0"

From d7db57ab330630c270412ca8fa39ea94052d7675 Mon Sep 17 00:00:00 2001
From: Anton Lantukh <alantukh@jwplayer.com>
Date: Mon, 18 Mar 2024 10:10:41 +0100
Subject: [PATCH 067/128] feat(watchhistory): change max items limit (#418)

* feat(watchhistory): change max items limit
---
 docs/features/user-watchlists.md                     | 12 +++++++++---
 packages/common/src/constants.ts                     |  6 +++---
 .../common/src/controllers/FavoritesController.ts    |  2 +-
 packages/common/src/services/FavoriteService.ts      |  9 ++-------
 packages/common/src/services/WatchHistoryService.ts  |  9 ++++++---
 .../src/services/integrations/AccountService.ts      |  1 +
 .../integrations/cleeng/CleengAccountService.ts      |  2 ++
 .../services/integrations/jwp/JWPAccountService.ts   |  2 ++
 packages/hooks-react/src/useWatchHistoryListener.ts  |  2 +-
 9 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/docs/features/user-watchlists.md b/docs/features/user-watchlists.md
index f8928df27..4aa61c100 100644
--- a/docs/features/user-watchlists.md
+++ b/docs/features/user-watchlists.md
@@ -127,10 +127,16 @@ Example data format
 }
 ```
 
-### Max 48 items
+### Max amount of items
 
-Cleeng customer `externalData` attribute has maxsize of 5000 symbols.
+#### JWP
 
-The length of one stringified object of History equals to 52 symbols, one Favorites object equals to 22 symbols. Taking into account only History objects, we get 5000 / 52 = ~96, so 48 for Favorites and 48 for History. We also leave some extra space for possible further updates.
+For JWP the limit is 48 items for Favorites and 48 for Watch History.
+
+#### Cleeng
+
+Cleeng customer `externalData` attribute has maxsize of 4000 symbols.
+
+The length of one stringified object of History equals to 41 symbols, one Favorites object equals to 22 symbols. Taking into account only History objects, we get 4000 / 41 = ~97.56, so 48 for Favorites and 48 for Watch History. We also leave some extra space for possible further updates.
 
 We rotate the oldest continue watching object to the first item position after its progress property gets a new value.
diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
index 06c8c0ee1..bfaf1d4b8 100644
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@@ -23,9 +23,6 @@ export const VideoProgressMinMax = {
 
 export const PLAYLIST_LIMIT = 25;
 
-// The externalData attribute of Cleeng can contain max 5000 characters
-export const MAX_WATCHLIST_ITEMS_COUNT = 48;
-
 export const ADYEN_TEST_CLIENT_KEY = 'test_I4OFGUUCEVB5TI222AS3N2Y2LY6PJM3K';
 
 export const ADYEN_LIVE_CLIENT_KEY = 'live_BQDOFBYTGZB3XKF62GBYSLPUJ4YW2TPL';
@@ -62,6 +59,8 @@ export const STALE_TIME = 60 * 1000 * 20;
 
 export const CARD_ASPECT_RATIOS = ['1:1', '2:1', '2:3', '4:3', '5:3', '16:9', '9:13', '9:16'] as const;
 
+export const MAX_WATCHLIST_ITEMS_COUNT = 48; // Default value
+
 export const DEFAULT_FEATURES = {
   canUpdateEmail: false,
   canSupportEmptyFullName: false,
@@ -73,6 +72,7 @@ export const DEFAULT_FEATURES = {
   canShowReceipts: false,
   hasSocialURLs: false,
   hasNotifications: false,
+  watchListSizeLimit: MAX_WATCHLIST_ITEMS_COUNT,
 };
 
 export const simultaneousLoginWarningKey = 'simultaneous_logins';
diff --git a/packages/common/src/controllers/FavoritesController.ts b/packages/common/src/controllers/FavoritesController.ts
index 8f8639adb..e871bcf63 100644
--- a/packages/common/src/controllers/FavoritesController.ts
+++ b/packages/common/src/controllers/FavoritesController.ts
@@ -74,7 +74,7 @@ export default class FavoritesController {
     }
 
     // If we exceed the max available number of favorites, we show a warning
-    if (this.favoritesService.hasReachedFavoritesLimit(favorites)) {
+    if (favorites.length > this.favoritesService.getMaxFavoritesCount()) {
       setWarning(i18next.t('video:favorites_warning', { maxCount: this.favoritesService.getMaxFavoritesCount() }));
       return;
     }
diff --git a/packages/common/src/services/FavoriteService.ts b/packages/common/src/services/FavoriteService.ts
index e2319b07c..ed833889a 100644
--- a/packages/common/src/services/FavoriteService.ts
+++ b/packages/common/src/services/FavoriteService.ts
@@ -1,13 +1,13 @@
 import { inject, injectable } from 'inversify';
 import { object, array, string } from 'yup';
 
-import { MAX_WATCHLIST_ITEMS_COUNT } from '../constants';
 import type { Favorite, SerializedFavorite } from '../../types/favorite';
 import type { PlaylistItem } from '../../types/playlist';
 import type { Customer } from '../../types/account';
 import { getNamedModule } from '../modules/container';
 import { INTEGRATION_TYPE } from '../modules/types';
 import { logDev } from '../utils/common';
+import { MAX_WATCHLIST_ITEMS_COUNT } from '../constants';
 
 import ApiService from './ApiService';
 import StorageService from './StorageService';
@@ -21,7 +21,6 @@ const schema = array(
 
 @injectable()
 export default class FavoriteService {
-  private MAX_FAVORITES_COUNT = 48;
   private PERSIST_KEY_FAVORITES = 'favorites';
 
   private readonly apiService;
@@ -89,11 +88,7 @@ export default class FavoriteService {
   };
 
   getMaxFavoritesCount = () => {
-    return this.MAX_FAVORITES_COUNT;
-  };
-
-  hasReachedFavoritesLimit = (favorites: Favorite[]) => {
-    return favorites?.length >= MAX_WATCHLIST_ITEMS_COUNT;
+    return this.accountService?.features?.watchListSizeLimit || MAX_WATCHLIST_ITEMS_COUNT;
   };
 
   createFavorite = (item: PlaylistItem): Favorite => {
diff --git a/packages/common/src/services/WatchHistoryService.ts b/packages/common/src/services/WatchHistoryService.ts
index e5df748d3..62e4408ac 100644
--- a/packages/common/src/services/WatchHistoryService.ts
+++ b/packages/common/src/services/WatchHistoryService.ts
@@ -7,6 +7,7 @@ import type { Customer } from '../../types/account';
 import { getNamedModule } from '../modules/container';
 import { INTEGRATION_TYPE } from '../modules/types';
 import { logDev } from '../utils/common';
+import { MAX_WATCHLIST_ITEMS_COUNT } from '../constants';
 
 import ApiService from './ApiService';
 import StorageService from './StorageService';
@@ -22,7 +23,6 @@ const schema = array(
 @injectable()
 export default class WatchHistoryService {
   private PERSIST_KEY_WATCH_HISTORY = 'history';
-  private MAX_WATCH_HISTORY_COUNT = 48;
 
   private readonly apiService;
   private readonly storageService;
@@ -145,6 +145,10 @@ export default class WatchHistoryService {
     } as WatchHistoryItem;
   };
 
+  getMaxWatchHistoryCount = () => {
+    return this.accountService?.features?.watchListSizeLimit || MAX_WATCHLIST_ITEMS_COUNT;
+  };
+
   /**
    *  If we already have an element with continue watching state, we:
    *    1. Update the progress
@@ -163,8 +167,7 @@ export default class WatchHistoryService {
     });
 
     updatedHistory.unshift(watchHistoryItem);
-
-    updatedHistory.splice(this.MAX_WATCH_HISTORY_COUNT);
+    updatedHistory.splice(this.getMaxWatchHistoryCount());
 
     return updatedHistory;
   };
diff --git a/packages/common/src/services/integrations/AccountService.ts b/packages/common/src/services/integrations/AccountService.ts
index b72475b3d..deb186041 100644
--- a/packages/common/src/services/integrations/AccountService.ts
+++ b/packages/common/src/services/integrations/AccountService.ts
@@ -35,6 +35,7 @@ export type AccountServiceFeatures = {
   readonly canShowReceipts: boolean;
   readonly hasSocialURLs: boolean;
   readonly hasNotifications: boolean;
+  readonly watchListSizeLimit: number;
 };
 
 export default abstract class AccountService {
diff --git a/packages/common/src/services/integrations/cleeng/CleengAccountService.ts b/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
index 7ff3dfe27..fa9fcd173 100644
--- a/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
+++ b/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
@@ -71,6 +71,8 @@ export default class CleengAccountService extends AccountService {
       canShowReceipts: true,
       hasSocialURLs: false,
       hasNotifications: false,
+      // The 'externalData' attribute of Cleeng can contain max 4000 characters
+      watchListSizeLimit: 48,
     });
 
     this.cleengService = cleengService;
diff --git a/packages/common/src/services/integrations/jwp/JWPAccountService.ts b/packages/common/src/services/integrations/jwp/JWPAccountService.ts
index d0b8b865e..a2e258592 100644
--- a/packages/common/src/services/integrations/jwp/JWPAccountService.ts
+++ b/packages/common/src/services/integrations/jwp/JWPAccountService.ts
@@ -68,6 +68,8 @@ export default class JWPAccountService extends AccountService {
       canDeleteAccount: true,
       hasNotifications: true,
       hasSocialURLs: true,
+      // Limit of media_ids length passed to the /apps/watchlists endpoint
+      watchListSizeLimit: 48,
     });
 
     this.storageService = storageService;
diff --git a/packages/hooks-react/src/useWatchHistoryListener.ts b/packages/hooks-react/src/useWatchHistoryListener.ts
index ef2d15e9c..d9d2d9002 100644
--- a/packages/hooks-react/src/useWatchHistoryListener.ts
+++ b/packages/hooks-react/src/useWatchHistoryListener.ts
@@ -57,7 +57,7 @@ export const useWatchHistoryListener = (player: jwplayer.JWPlayer | undefined, i
     // live streams have a negative duration, we ignore these for now
     if (event.duration < 0) return;
 
-    const progress = event.position / event.duration;
+    const progress = Number((event.position / event.duration).toFixed(5));
 
     if (!isNaN(progress) && isFinite(progress)) {
       queuedWatchProgress.current = {

From d37905df4022103e3fdf62ad936d58af6e12617c Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Mon, 18 Mar 2024 10:11:36 +0100
Subject: [PATCH 068/128] feat(payment): disable deprecated receipts cleeng
 (#458)

---
 .../src/services/integrations/cleeng/CleengAccountService.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/common/src/services/integrations/cleeng/CleengAccountService.ts b/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
index fa9fcd173..f89994bd8 100644
--- a/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
+++ b/packages/common/src/services/integrations/cleeng/CleengAccountService.ts
@@ -68,7 +68,7 @@ export default class CleengAccountService extends AccountService {
       canExportAccountData: false,
       canDeleteAccount: false,
       canUpdatePaymentMethod: true,
-      canShowReceipts: true,
+      canShowReceipts: false,
       hasSocialURLs: false,
       hasNotifications: false,
       // The 'externalData' attribute of Cleeng can contain max 4000 characters

From 3da156c13e917a3b390c0549ff168d04d21b495c Mon Sep 17 00:00:00 2001
From: Danny Budzinski <dbudzins@users.noreply.github.com>
Date: Tue, 19 Mar 2024 10:41:02 +0100
Subject: [PATCH 069/128] chore: replace depcheck with knip (#462)

* chore: replace depcheck with knip

* chore: run prettier on knip.config.ts

* chore: revert to knip entry instead of package exports

* chore: fix prettier
---
 .depcheckrc.yaml                              |   16 -
 configs/eslint-config-jwp/.depcheckrc.yaml    |    8 -
 configs/postcss-config-jwp/.depcheckrc.yaml   |    4 -
 configs/stylelint-config-jwp/.depcheckrc.yaml |    8 -
 knip.config.ts                                |   78 ++
 package.json                                  |    4 +-
 packages/common/.depcheckrc.yaml              |    9 -
 packages/common/package.json                  |    1 -
 packages/hooks-react/.depcheckrc.yaml         |    4 -
 packages/hooks-react/package.json             |    1 +
 packages/i18n/.depcheckrc.yaml                |    1 -
 packages/theme/.depcheckrc.yaml               |    1 -
 packages/ui-react/.depcheckrc.yaml            |    6 -
 packages/ui-react/package.json                |    2 +-
 platforms/web/.depcheckrc.yaml                |   28 -
 platforms/web/package.json                    |    1 +
 platforms/web/test/.depcheckrc.yaml           |    1 -
 yarn.lock                                     | 1146 +++++++++++++----
 18 files changed, 964 insertions(+), 355 deletions(-)
 delete mode 100644 .depcheckrc.yaml
 delete mode 100644 configs/eslint-config-jwp/.depcheckrc.yaml
 delete mode 100644 configs/postcss-config-jwp/.depcheckrc.yaml
 delete mode 100644 configs/stylelint-config-jwp/.depcheckrc.yaml
 create mode 100644 knip.config.ts
 delete mode 100644 packages/common/.depcheckrc.yaml
 delete mode 100644 packages/hooks-react/.depcheckrc.yaml
 delete mode 100644 packages/i18n/.depcheckrc.yaml
 delete mode 100644 packages/theme/.depcheckrc.yaml
 delete mode 100644 packages/ui-react/.depcheckrc.yaml
 delete mode 100644 platforms/web/.depcheckrc.yaml
 delete mode 100644 platforms/web/test/.depcheckrc.yaml

diff --git a/.depcheckrc.yaml b/.depcheckrc.yaml
deleted file mode 100644
index acab1bd22..000000000
--- a/.depcheckrc.yaml
+++ /dev/null
@@ -1,16 +0,0 @@
-ignores: [
-    # This is used by commitlint in .commitlintrc.js
-    '@commitlint/config-conventional',
-
-    # @todo: remove dep from main package, once i18next is moved to specific packages
-    'ts-node',
-
-    # Workspace packages
-    'eslint-config-jwp',
-    '@typescript-eslint/parser', # Required by eslint-config-jwp
-    '@typescript-eslint/eslint-plugin', # Required by eslint-config-jwp
-    'eslint-plugin-import', # Required by eslint-config-jwp
-
-    'depcheck',
-    'ts-node'
-  ]
diff --git a/configs/eslint-config-jwp/.depcheckrc.yaml b/configs/eslint-config-jwp/.depcheckrc.yaml
deleted file mode 100644
index b7fda79d0..000000000
--- a/configs/eslint-config-jwp/.depcheckrc.yaml
+++ /dev/null
@@ -1,8 +0,0 @@
-ignores: [
-  # Dynamically loaded in the eslint config
-  '@typescript-eslint/eslint-plugin',
-  '@typescript-eslint/parser',
-  'eslint-plugin-import',
-  'eslint-plugin-react',
-  'eslint-plugin-react-hooks'
-]
diff --git a/configs/postcss-config-jwp/.depcheckrc.yaml b/configs/postcss-config-jwp/.depcheckrc.yaml
deleted file mode 100644
index 39214c2d1..000000000
--- a/configs/postcss-config-jwp/.depcheckrc.yaml
+++ /dev/null
@@ -1,4 +0,0 @@
-ignores: [
-  # Dynamically loaded in the postcss config
-  'postcss-scss'
-]
diff --git a/configs/stylelint-config-jwp/.depcheckrc.yaml b/configs/stylelint-config-jwp/.depcheckrc.yaml
deleted file mode 100644
index c2a6ddbcb..000000000
--- a/configs/stylelint-config-jwp/.depcheckrc.yaml
+++ /dev/null
@@ -1,8 +0,0 @@
-ignores: [
-  # Dynamically loaded in the stylelint config
-  'stylelint',
-  'stylelint-order',
-  'stylelint-config-recommended-scss',
-  'stylelint-declaration-strict-value',
-  'stylelint-scss'
-]
diff --git a/knip.config.ts b/knip.config.ts
new file mode 100644
index 000000000..2a724d99b
--- /dev/null
+++ b/knip.config.ts
@@ -0,0 +1,78 @@
+import type { KnipConfig } from 'knip';
+
+const config: KnipConfig = {
+  ignoreBinaries: [
+    // These are installed, but don't have valid package.json bin fields for knip to detect them
+    'stylelint',
+  ],
+  workspaces: {
+    '.': {
+      entry: ['scripts/**/*'],
+      ignoreDependencies: [
+        // Workspace packages
+        'eslint-config-jwp',
+      ],
+      ignoreBinaries: [
+        // false positives from yarn scripts in github actions
+        'build',
+        'global',
+        'start:test',
+        'codecept:*',
+      ],
+    },
+    'packages/common': {
+      entry: ['src/**/*'],
+    },
+    'packages/ui-react': {
+      entry: ['src/**/*'],
+      ignoreDependencies: [
+        'sass', // Used in css
+      ],
+    },
+    'platforms/web': {
+      ignoreDependencies: [
+        '@codeceptjs/allure-legacy',
+        '@codeceptjs/configure', // Used in e2e tests
+        '@babel/plugin-proposal-decorators', // Used to build with decorators for ioc resolution
+        '@babel/core', // Required peer dependency for babel plugins
+        '@types/luxon', // Used in tests
+        'babel-plugin-transform-typescript-metadata', // Used to build with decorators for ioc resolution
+        'eslint-plugin-codeceptjs', // Used by apps/web/test-e2e/.eslintrc.cjs
+        'luxon', // Used in tests
+        'playwright', // Used in test configs
+        'sharp', // Requirement for @vite-pwa/assets-generator
+        'tsconfig-paths', // Used for e2e test setup
+        'virtual:pwa-register', // Service Worker code is injected at build time,
+      ],
+    },
+    'configs/eslint-config-jwp': {
+      entry: ['*.*'],
+      ignoreDependencies: [
+        // Dynamically loaded in the eslint config
+        '@typescript-eslint/eslint-plugin',
+        '@typescript-eslint/parser',
+        'eslint-plugin-import',
+        'eslint-plugin-react',
+        'eslint-plugin-react-hooks',
+      ],
+    },
+    'configs/postcss-config-jwp': {
+      ignoreDependencies: [
+        // Dynamically loaded in the postcss config
+        'postcss-scss',
+      ],
+    },
+    'configs/stylelint-config-jwp': {
+      ignoreDependencies: [
+        // Dynamically loaded in the stylelint config
+        'stylelint',
+        'stylelint-order',
+        'stylelint-config-recommended-scss',
+        'stylelint-declaration-strict-value',
+        'stylelint-scss',
+      ],
+    },
+  },
+};
+
+export default config;
diff --git a/package.json b/package.json
index cac289ea3..023ec5f52 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   ],
   "scripts": {
     "commit-msg": "commitlint --edit $1",
-    "depcheck": "depcheck && yarn workspaces run depcheck",
+    "depcheck": "knip --dependencies",
     "format": "run-s -c format:*",
     "format:eslint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\" --fix",
     "format:prettier": "prettier --write \"{**/*,*}.{js,ts,jsx,tsx}\"",
@@ -39,10 +39,10 @@
     "@commitlint/config-conventional": "^12.1.1",
     "@types/node": "^18.15.3",
     "csv-parse": "^5.4.0",
-    "depcheck": "^1.4.3",
     "eslint": "^8.57.0",
     "husky": "^6.0.0",
     "i18next-parser": "^8.0.0",
+    "knip": "^5.0.3",
     "lint-staged": "^15.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
diff --git a/packages/common/.depcheckrc.yaml b/packages/common/.depcheckrc.yaml
deleted file mode 100644
index a149870a7..000000000
--- a/packages/common/.depcheckrc.yaml
+++ /dev/null
@@ -1,9 +0,0 @@
-ignores: [
-  # Installed by eslint-config-jwp
-  '@typescript-eslint/parser',
-  '@typescript-eslint/eslint-plugin',
-  'eslint-plugin-import',
-
-  # Installed by inplayer SDK (only used for typings)
-  'axios'
-]
diff --git a/packages/common/package.json b/packages/common/package.json
index 97e8e714d..bda2d81f3 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -2,7 +2,6 @@
   "name": "@jwp/ott-common",
   "version": "4.30.0",
   "private": true,
-  "main": "./src",
   "scripts": {
     "lint:ts": "tsc --pretty --noEmit -p ./",
     "test": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run",
diff --git a/packages/hooks-react/.depcheckrc.yaml b/packages/hooks-react/.depcheckrc.yaml
deleted file mode 100644
index 0fd1e3728..000000000
--- a/packages/hooks-react/.depcheckrc.yaml
+++ /dev/null
@@ -1,4 +0,0 @@
-ignores: [
-  'eslint-plugin-react',
-  'eslint-plugin-react-hooks'
-]
diff --git a/packages/hooks-react/package.json b/packages/hooks-react/package.json
index 39761a0cc..f0573aeda 100644
--- a/packages/hooks-react/package.json
+++ b/packages/hooks-react/package.json
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@testing-library/react": "^14.0.0",
     "@types/jwplayer": "^8.2.13",
+    "jsdom": "^22.1.0",
     "vi-fetch": "^0.8.0",
     "vitest": "^1.3.1"
   },
diff --git a/packages/i18n/.depcheckrc.yaml b/packages/i18n/.depcheckrc.yaml
deleted file mode 100644
index 8bb6edae4..000000000
--- a/packages/i18n/.depcheckrc.yaml
+++ /dev/null
@@ -1 +0,0 @@
-ignores: []
diff --git a/packages/theme/.depcheckrc.yaml b/packages/theme/.depcheckrc.yaml
deleted file mode 100644
index 8bb6edae4..000000000
--- a/packages/theme/.depcheckrc.yaml
+++ /dev/null
@@ -1 +0,0 @@
-ignores: []
diff --git a/packages/ui-react/.depcheckrc.yaml b/packages/ui-react/.depcheckrc.yaml
deleted file mode 100644
index 7e92b5b8a..000000000
--- a/packages/ui-react/.depcheckrc.yaml
+++ /dev/null
@@ -1,6 +0,0 @@
-ignores: [
-  '@jwp/ott-ui-react',
-  'eslint-plugin-react',
-  'eslint-plugin-react-hooks',
-  'typescript-plugin-css-modules',
-]
diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json
index af981242b..85b12ee45 100644
--- a/packages/ui-react/package.json
+++ b/packages/ui-react/package.json
@@ -2,7 +2,6 @@
   "name": "@jwp/ott-ui-react",
   "version": "4.30.0",
   "private": true,
-  "main": "./src",
   "scripts": {
     "lint:ts": "tsc --pretty --noEmit -p ./",
     "test": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run",
@@ -41,6 +40,7 @@
     "@types/payment": "^2.1.4",
     "@types/react-infinite-scroller": "^1.2.3",
     "@vitejs/plugin-react": "^4.0.4",
+    "jsdom": "^22.1.0",
     "sass": "^1.49.10",
     "typescript-plugin-css-modules": "^5.0.2",
     "vi-fetch": "^0.8.0",
diff --git a/platforms/web/.depcheckrc.yaml b/platforms/web/.depcheckrc.yaml
deleted file mode 100644
index 0293a8f70..000000000
--- a/platforms/web/.depcheckrc.yaml
+++ /dev/null
@@ -1,28 +0,0 @@
-ignores: [
-  '@codeceptjs/allure-legacy',
-
-  # These are dependencies for vite and vite plugins that depcheck doesn't recognize as being used
-  '@vitest/coverage-v8',
-
-  # These are vite aliases / tsconfig paths that point to specific local directories
-  # Note the \ is necessary to escape the # or the ignore doesn't work
-  '\#src',
-  '\#test',
-  '\#types',
-  '\#components',
-  '\#utils',
-  'src', # This is used in src/styles, which recognizes absolute paths from the repo root
-  'allure-commandline', # To support e2e-reports
-  'i18next-parser', # For extracting i18next translation keys
-  'npm-run-all', # To run linting checks
-  'virtual:pwa-register', # Service Worker code is injected at build time
-  'vite-plugin-pwa/client', # Used to generate pwa framework
-  'reflect-metadata', # Used for ioc resolution
-  '@babel/plugin-proposal-decorators', # Used to build with decorators for ioc resolution
-  'babel-plugin-transform-typescript-metadata', # Used to build with decorators for ioc resolution
-  '@babel/core', # Required peer dependency for babel plugins above
-  'sharp', # Requirement for @vite-pwa/assets-generator
-
-  'eslint-plugin-react', # Installed by eslint config
-  'eslint-plugin-react-hooks', # Installed by eslint config
-]
diff --git a/platforms/web/package.json b/platforms/web/package.json
index c32f17148..932880903 100644
--- a/platforms/web/package.json
+++ b/platforms/web/package.json
@@ -67,6 +67,7 @@
     "sass": "^1.49.10",
     "sharp": "^0.33.2",
     "stylelint": "^15.11.0",
+    "stylelint-config-jwp": "*",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.0",
     "vi-fetch": "^0.8.0",
diff --git a/platforms/web/test/.depcheckrc.yaml b/platforms/web/test/.depcheckrc.yaml
deleted file mode 100644
index 8bb6edae4..000000000
--- a/platforms/web/test/.depcheckrc.yaml
+++ /dev/null
@@ -1 +0,0 @@
-ignores: []
diff --git a/yarn.lock b/yarn.lock
index d6742e4e5..e8d77714d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -289,7 +289,7 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.23.0", "@babel/parser@^7.23.9", "@babel/parser@^7.24.0", "@babel/parser@^7.8.3":
+"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.24.0", "@babel/parser@^7.8.3":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.0.tgz#26a3d1ff49031c53a97d03b604375f028746a9ac"
   integrity sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==
@@ -999,7 +999,7 @@
     "@babel/parser" "^7.24.0"
     "@babel/types" "^7.24.0"
 
-"@babel/traverse@^7.23.2", "@babel/traverse@^7.24.0":
+"@babel/traverse@^7.24.0":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.0.tgz#4a408fbf364ff73135c714a2ab46a5eab2831b1e"
   integrity sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==
@@ -1364,6 +1364,31 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
+"@ericcornelissen/bash-parser@0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@ericcornelissen/bash-parser/-/bash-parser-0.5.2.tgz#5eb3bc52020d97fbaebc63b5168ca0aa0b2e8418"
+  integrity sha512-4pIMTa1nEFfMXitv7oaNEWOdM+zpOZavesa5GaiWTgda6Zk32CFGxjUp/iIaN0PwgUW1yTq/fztSjbpE8SLGZQ==
+  dependencies:
+    array-last "^1.1.1"
+    babylon "^6.9.1"
+    compose-function "^3.0.3"
+    deep-freeze "0.0.1"
+    filter-iterator "0.0.1"
+    filter-obj "^1.1.0"
+    has-own-property "^0.1.0"
+    identity-function "^1.0.0"
+    is-iterable "^1.1.0"
+    iterable-lookahead "^1.0.0"
+    lodash.curry "^4.1.1"
+    magic-string "^0.16.0"
+    map-obj "^2.0.0"
+    object-pairs "^0.1.0"
+    object-values "^1.0.0"
+    reverse-arguments "^1.0.0"
+    shell-quote-word "^1.0.1"
+    to-pascal-case "^1.0.0"
+    unescape-js "^1.0.5"
+
 "@esbuild/aix-ppc64@0.19.12":
   version "0.19.12"
   resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"
@@ -1789,6 +1814,18 @@
     lodash "^4.17.20"
     qs "^6.9.4"
 
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
 "@istanbuljs/schema@^0.1.2":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
@@ -1876,11 +1913,32 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
+"@nodelib/fs.scandir@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-3.0.0.tgz#91c0a33e1aeaedcd4bab2bf31be5d1962a55d2a7"
+  integrity sha512-ktI9+PxfHYtKjF3cLTUAh2N+b8MijCRPNwKJNqTVdL0gB0QxLU2rIRaZ1t71oEa3YBDE6bukH1sR0+CDnpp/Mg==
+  dependencies:
+    "@nodelib/fs.stat" "3.0.0"
+    run-parallel "^1.2.0"
+
 "@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
+"@nodelib/fs.stat@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-3.0.0.tgz#ef6c829f2b05f42595d88854ebd777d4335ff0a9"
+  integrity sha512-2tQOI38s19P9i7X/Drt0v8iMA+KMsgdhB/dyPER+e+2Y8L1Z7QvnuRdW/uLuf5YRFUYmnj4bMA6qCuZHFI1GDQ==
+
+"@nodelib/fs.walk@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-2.0.0.tgz#10499ac2210f6399770b465ba728adafc7d44bb1"
+  integrity sha512-54voNDBobGdMl3BUXSu7UaDh1P85PGHWlJ5e0XhPugo1JulOyCtp2I+5ri4wplGDJ8QGwPEQW7/x3yTLU7yF1A==
+  dependencies:
+    "@nodelib/fs.scandir" "3.0.0"
+    fastq "^1.15.0"
+
 "@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
@@ -1889,6 +1947,167 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@npmcli/git@^5.0.0":
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/@npmcli/git/-/git-5.0.4.tgz#d18c50f99649e6e89e8b427318134f582498700c"
+  integrity sha512-nr6/WezNzuYUppzXRaYu/W4aT5rLxdXqEFupbh6e/ovlYFQ8hpu1UUPV3Ir/YTl+74iXl2ZOMlGzudh9ZPUchQ==
+  dependencies:
+    "@npmcli/promise-spawn" "^7.0.0"
+    lru-cache "^10.0.1"
+    npm-pick-manifest "^9.0.0"
+    proc-log "^3.0.0"
+    promise-inflight "^1.0.1"
+    promise-retry "^2.0.1"
+    semver "^7.3.5"
+    which "^4.0.0"
+
+"@npmcli/map-workspaces@3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@npmcli/map-workspaces/-/map-workspaces-3.0.4.tgz#15ad7d854292e484f7ba04bc30187a8320dba799"
+  integrity sha512-Z0TbvXkRbacjFFLpVpV0e2mheCh+WzQpcqL+4xp49uNJOxOnIAPZyXtUxZ5Qn3QBTGKA11Exjd9a5411rBrhDg==
+  dependencies:
+    "@npmcli/name-from-folder" "^2.0.0"
+    glob "^10.2.2"
+    minimatch "^9.0.0"
+    read-package-json-fast "^3.0.0"
+
+"@npmcli/name-from-folder@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@npmcli/name-from-folder/-/name-from-folder-2.0.0.tgz#c44d3a7c6d5c184bb6036f4d5995eee298945815"
+  integrity sha512-pwK+BfEBZJbKdNYpHHRTNBwBoqrN/iIMO0AiGvYsp3Hoaq0WbgGSWQR6SCldZovoDpY3yje5lkFUe6gsDgJ2vg==
+
+"@npmcli/package-json@5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@npmcli/package-json/-/package-json-5.0.0.tgz#77d0f8b17096763ccbd8af03b7117ba6e34d6e91"
+  integrity sha512-OI2zdYBLhQ7kpNPaJxiflofYIpkNLi+lnGdzqUOfRmCF3r2l1nadcjtCYMJKv/Utm/ZtlffaUuTiAktPHbc17g==
+  dependencies:
+    "@npmcli/git" "^5.0.0"
+    glob "^10.2.2"
+    hosted-git-info "^7.0.0"
+    json-parse-even-better-errors "^3.0.0"
+    normalize-package-data "^6.0.0"
+    proc-log "^3.0.0"
+    semver "^7.5.3"
+
+"@npmcli/promise-spawn@^7.0.0":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/@npmcli/promise-spawn/-/promise-spawn-7.0.1.tgz#a836de2f42a2245d629cf6fbb8dd6c74c74c55af"
+  integrity sha512-P4KkF9jX3y+7yFUxgcUdDtLy+t4OlDGuEBLNs57AZsfSfg+uV6MLndqGpnl4831ggaEdXwR50XFoZP4VFtHolg==
+  dependencies:
+    which "^4.0.0"
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@pnpm/constants@7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@pnpm/constants/-/constants-7.1.1.tgz#3db261425fe15425aa213a2b003f4f60c9378b43"
+  integrity sha512-31pZqMtjwV+Vaq7MaPrT1EoDFSYwye3dp6BiHIGRJmVThCQwySRKM7hCvqqI94epNkqFAAYoWrNynWoRYosGdw==
+
+"@pnpm/core-loggers@9.0.6":
+  version "9.0.6"
+  resolved "https://registry.yarnpkg.com/@pnpm/core-loggers/-/core-loggers-9.0.6.tgz#59a65822cc5ef901dad5aca5b8f1f9562cf91e2a"
+  integrity sha512-iK67SGbp+06bA/elpg51wygPFjNA7JKHtKkpLxqXXHw+AjFFBC3f2OznJsCIuDK6HdGi5UhHLYqo5QxJ2gMqJQ==
+  dependencies:
+    "@pnpm/types" "9.4.2"
+
+"@pnpm/error@5.0.3":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@pnpm/error/-/error-5.0.3.tgz#4dbb9f4acb0b30c373b3ca5024cdf495f03f4380"
+  integrity sha512-ONJU5cUeoeJSy50qOYsMZQHTA/9QKmGgh1ATfEpCLgtbdwqUiwD9MxHNeXUYYI/pocBCz6r1ZCFqiQvO+8SUKA==
+  dependencies:
+    "@pnpm/constants" "7.1.1"
+
+"@pnpm/fetching-types@5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@pnpm/fetching-types/-/fetching-types-5.0.0.tgz#36807c4bea4697d5ad7519d80929666a91c0083d"
+  integrity sha512-o9gdO1v8Uc5P2fBBuW6GSpfTqIivQmQlqjQJdFiQX0m+tgxlrMRneIg392jZuc6fk7kFqjLheInlslgJfwY+4Q==
+  dependencies:
+    "@zkochan/retry" "^0.2.0"
+    node-fetch "3.0.0-beta.9"
+
+"@pnpm/graceful-fs@3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@pnpm/graceful-fs/-/graceful-fs-3.2.0.tgz#241846c42c23feff7421b8bd97d4039891003f12"
+  integrity sha512-vRoXJxscDpHak7YE9SqCkzfrayn+Lw+YueOeHIPEqkgokrHeYgYeONoc2kGh0ObHaRtNSsonozVfJ456kxLNvA==
+  dependencies:
+    graceful-fs "^4.2.11"
+
+"@pnpm/logger@5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@pnpm/logger/-/logger-5.0.0.tgz#9ac8254d40d8d5b5e676742dc66b8cac1af380bf"
+  integrity sha512-YfcB2QrX+Wx1o6LD1G2Y2fhDhOix/bAY/oAnMpHoNLsKkWIRbt1oKLkIFvxBMzLwAEPqnYWguJrYC+J6i4ywbw==
+  dependencies:
+    bole "^5.0.0"
+    ndjson "^2.0.0"
+
+"@pnpm/npm-package-arg@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@pnpm/npm-package-arg/-/npm-package-arg-1.0.0.tgz#2a27938f4d38c6cce5f3695fd1e7d5ed8929645e"
+  integrity sha512-oQYP08exi6mOPdAZZWcNIGS+KKPsnNwUBzSuAEGWuCcqwMAt3k/WVCqVIXzBxhO5sP2b43og69VHmPj6IroKqw==
+  dependencies:
+    hosted-git-info "^4.0.1"
+    semver "^7.3.5"
+    validate-npm-package-name "^4.0.0"
+
+"@pnpm/npm-resolver@18.1.1":
+  version "18.1.1"
+  resolved "https://registry.yarnpkg.com/@pnpm/npm-resolver/-/npm-resolver-18.1.1.tgz#64a259825db6dc4e4615f5b67464c1cd174850bf"
+  integrity sha512-NptzncmMD5ZMimbjWkGpMzuBRhlCY+sh7mzypPdBOTNlh5hmEQe/VaRKjNK4V9/b0C/llElkvIePL6acybu86w==
+  dependencies:
+    "@pnpm/core-loggers" "9.0.6"
+    "@pnpm/error" "5.0.3"
+    "@pnpm/fetching-types" "5.0.0"
+    "@pnpm/graceful-fs" "3.2.0"
+    "@pnpm/resolve-workspace-range" "5.0.1"
+    "@pnpm/resolver-base" "11.1.0"
+    "@pnpm/types" "9.4.2"
+    "@zkochan/retry" "^0.2.0"
+    encode-registry "^3.0.1"
+    load-json-file "^6.2.0"
+    lru-cache "^10.0.2"
+    normalize-path "^3.0.0"
+    p-limit "^3.1.0"
+    p-memoize "4.0.1"
+    parse-npm-tarball-url "^3.0.0"
+    path-temp "^2.1.0"
+    ramda "npm:@pnpm/ramda@0.28.1"
+    rename-overwrite "^5.0.0"
+    semver "^7.5.4"
+    ssri "10.0.5"
+    version-selector-type "^3.0.0"
+
+"@pnpm/resolve-workspace-range@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@pnpm/resolve-workspace-range/-/resolve-workspace-range-5.0.1.tgz#839179560fbf5e565234e5dd1d65b79765d86f4c"
+  integrity sha512-yQ0pMthlw8rTgS/C9hrjne+NEnnSNevCjtdodd7i15I59jMBYciHifZ/vjg0NY+Jl+USTc3dBE+0h/4tdYjMKg==
+  dependencies:
+    semver "^7.4.0"
+
+"@pnpm/resolver-base@11.1.0":
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/@pnpm/resolver-base/-/resolver-base-11.1.0.tgz#e640ba9ae096bf05a0b905496a63509556322618"
+  integrity sha512-y2qKaj18pwe1VWc3YXEitdYFo+WqOOt60aqTUuOVkJAirUzz0DzuYh3Ifct4znYWPdgUXHaN5DMphNF5iL85rA==
+  dependencies:
+    "@pnpm/types" "9.4.2"
+
+"@pnpm/types@9.4.2":
+  version "9.4.2"
+  resolved "https://registry.yarnpkg.com/@pnpm/types/-/types-9.4.2.tgz#0a34c3c41d5452461d8d8958374a727f9c46cfb2"
+  integrity sha512-g1hcF8Nv4gd76POilz9gD4LITAPXOe5nX4ijgr8ixCbLQZfcpYiMfJ+C1RlMNRUDo8vhlNB4O3bUlxmT6EAQXA==
+
+"@pnpm/workspace.pkgs-graph@^2.0.15":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@pnpm/workspace.pkgs-graph/-/workspace.pkgs-graph-2.0.15.tgz#98bf425705206f672e3ea39bd8b549a22b7849a9"
+  integrity sha512-Txxd5FzzVfBfGCTngISaxFlJzZhzdS8BUrCEtAWJfZOFbQzpWy27rzkaS7TaWW2dHiFcCVYzPI/2vgxfeRansA==
+  dependencies:
+    "@pnpm/npm-package-arg" "^1.0.0"
+    "@pnpm/npm-resolver" "18.1.1"
+    "@pnpm/resolve-workspace-range" "5.0.1"
+    ramda "npm:@pnpm/ramda@0.28.1"
+
 "@remix-run/router@1.7.2":
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.7.2.tgz#cba1cf0a04bc04cb66027c51fa600e9cbc388bc8"
@@ -2091,6 +2310,15 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
   integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
 
+"@snyk/github-codeowners@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@snyk/github-codeowners/-/github-codeowners-1.1.0.tgz#45b99732c3c38b5f5b47e43d2b0c9db67a6d2bcc"
+  integrity sha512-lGFf08pbkEac0NYgVf4hdANpAgApRjNByLXB+WBip3qj1iendOIyAwP2GKkKbQMNVy2r1xxDf0ssfWscoiC+Vw==
+  dependencies:
+    commander "^4.1.1"
+    ignore "^5.1.8"
+    p-map "^4.0.0"
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -2428,6 +2656,11 @@
   resolved "https://registry.yarnpkg.com/@types/payment/-/payment-2.1.7.tgz#02e6cb0cf8b576e72a35477111c1d754d3ac3d1f"
   integrity sha512-J9BCWMJ+S2PBCSVTvdE+/ziiV73Cu3Wu6WQCC6D+1AO8vphGaQUM6hOy+UaKo84md5mrMcn7P9G/TmD9Y2922A==
 
+"@types/picomatch@2.3.3":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@types/picomatch/-/picomatch-2.3.3.tgz#be60498568c19e989e43fb39aa84be1ed3655e92"
+  integrity sha512-Yll76ZHikRFCyz/pffKGjrCwe/le2CDwOP5F210KQo27kpRE46U2rDnzikNlVn6/ezH3Mhn46bJMTfeVTtcYMg==
+
 "@types/postcss-modules-local-by-default@^4.0.2":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.2.tgz#8fee7513dd1558d74713d817c183a33a6dc583f9"
@@ -2722,58 +2955,23 @@
     loupe "^2.3.7"
     pretty-format "^29.7.0"
 
-"@vue/compiler-core@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.21.tgz#868b7085378fc24e58c9aed14c8d62110a62be1a"
-  integrity sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==
-  dependencies:
-    "@babel/parser" "^7.23.9"
-    "@vue/shared" "3.4.21"
-    entities "^4.5.0"
-    estree-walker "^2.0.2"
-    source-map-js "^1.0.2"
-
-"@vue/compiler-dom@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz#0077c355e2008207283a5a87d510330d22546803"
-  integrity sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==
-  dependencies:
-    "@vue/compiler-core" "3.4.21"
-    "@vue/shared" "3.4.21"
-
-"@vue/compiler-sfc@^3.3.4":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz#4af920dc31ab99e1ff5d152b5fe0ad12181145b2"
-  integrity sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==
-  dependencies:
-    "@babel/parser" "^7.23.9"
-    "@vue/compiler-core" "3.4.21"
-    "@vue/compiler-dom" "3.4.21"
-    "@vue/compiler-ssr" "3.4.21"
-    "@vue/shared" "3.4.21"
-    estree-walker "^2.0.2"
-    magic-string "^0.30.7"
-    postcss "^8.4.35"
-    source-map-js "^1.0.2"
-
-"@vue/compiler-ssr@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz#b84ae64fb9c265df21fc67f7624587673d324fef"
-  integrity sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==
-  dependencies:
-    "@vue/compiler-dom" "3.4.21"
-    "@vue/shared" "3.4.21"
-
-"@vue/shared@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.21.tgz#de526a9059d0a599f0b429af7037cd0c3ed7d5a1"
-  integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
-
 "@xmldom/xmldom@0.8.10":
   version "0.8.10"
   resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz#a1337ca426aa61cef9fe15b5b28e340a72f6fa99"
   integrity sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==
 
+"@zkochan/retry@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@zkochan/retry/-/retry-0.2.0.tgz#cb52c9fce1976f3eed7b1979b739e70706f4a3d2"
+  integrity sha512-WhB+2B/ZPlW2Xy/kMJBrMbqecWXcbDDgn0K0wKBAgO2OlBTz1iLJrRWduo+DGGn0Akvz1Lu4Xvls7dJojximWw==
+
+"@zkochan/rimraf@^2.1.2":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@zkochan/rimraf/-/rimraf-2.1.3.tgz#1074cb72d6e4997275285b04296a343b6ac7046b"
+  integrity sha512-mCfR3gylCzPC+iqdxEA6z5SxJeOgzgbwmyxanKriIne5qZLswDe/M43aD3p5MNzwzXRhbZg/OX+MpES6Zk1a6A==
+  dependencies:
+    rimraf "^3.0.2"
+
 JSONStream@^1.0.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
@@ -2819,6 +3017,14 @@ agent-base@6:
   dependencies:
     debug "4"
 
+aggregate-error@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
+  integrity sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==
+  dependencies:
+    clean-stack "^2.0.0"
+    indent-string "^4.0.0"
+
 ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
@@ -2917,7 +3123,7 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
-ansi-styles@^6.0.0, ansi-styles@^6.2.1:
+ansi-styles@^6.0.0, ansi-styles@^6.1.0, ansi-styles@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
@@ -2935,13 +3141,6 @@ arg@^4.1.0:
   resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
-argparse@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
-  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
-  dependencies:
-    sprintf-js "~1.0.2"
-
 argparse@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
@@ -2961,6 +3160,11 @@ aria-query@^5.0.0:
   dependencies:
     dequal "^2.0.3"
 
+arity-n@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745"
+  integrity sha512-fExL2kFDC1Q2DUOx3whE/9KoN66IzkY4b4zUHUBFM1ojEYjZZYDcUW3bek/ufGionX9giIKDC5redH2IlGqcQQ==
+
 array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
@@ -2969,11 +3173,6 @@ array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
     call-bind "^1.0.5"
     is-array-buffer "^3.0.4"
 
-array-differ@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-3.0.0.tgz#3cbb3d0f316810eafcc47624734237d6aee4ae6b"
-  integrity sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==
-
 array-ify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
@@ -2990,6 +3189,13 @@ array-includes@^3.1.6, array-includes@^3.1.7:
     get-intrinsic "^1.2.1"
     is-string "^1.0.7"
 
+array-last@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/array-last/-/array-last-1.3.0.tgz#7aa77073fec565ddab2493f5f88185f404a9d336"
+  integrity sha512-eOCut5rXlI6aCOS7Z7kCplKRKyiFQ6dHFBem4PwlwKeNFk2/XxTrhRh5T9PyaEWGy/NHTZWbY+nsZlNFJu9rYg==
+  dependencies:
+    is-number "^4.0.0"
+
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -3244,6 +3450,11 @@ babel-plugin-transform-typescript-metadata@^0.3.2:
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+babylon@^6.9.1:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -3319,6 +3530,14 @@ bo-selector@0.0.10:
   resolved "https://registry.yarnpkg.com/bo-selector/-/bo-selector-0.0.10.tgz#9816dcb00adf374ea87941a863b2acfc026afa3e"
   integrity sha512-Drm8W3MFLNhzHTXG93g8ll7wBlmiRr5C9W8R0sbsNQp/8h1IoPnzDH4dEQuJx8VaNq02io2ZfFnzKC1s64xRJg==
 
+bole@^5.0.0:
+  version "5.0.11"
+  resolved "https://registry.yarnpkg.com/bole/-/bole-5.0.11.tgz#c4a165975422daee6f576360e882a425c8e40617"
+  integrity sha512-KB0Ye0iMAW5BnNbnLfMSQcnI186hKUzE2fpkZWqcxsoTR7eqzlTidSOMYPHJOn/yR7VGH7uSZp37qH9q2Et0zQ==
+  dependencies:
+    fast-safe-stringify "^2.0.7"
+    individual "^3.0.0"
+
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -3448,6 +3667,13 @@ builtin-modules@^3.1.0:
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
   integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
 
+builtins@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/builtins/-/builtins-5.0.1.tgz#87f6db9ab0458be728564fa81d876d8d74552fa9"
+  integrity sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==
+  dependencies:
+    semver "^7.0.0"
+
 cac@^6.7.14:
   version "6.7.14"
   resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
@@ -3464,11 +3690,6 @@ call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
     get-intrinsic "^1.2.4"
     set-function-length "^1.2.1"
 
-callsite@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
-  integrity sha512-0vdNRFXn5q+dtOqjfFtmtlI9N2eVZ7LMyEV2iKC5mEEFvSg/69Ml6b/WU2qF8W1nLRa0wiSrDT3Y5jOHZCwKPQ==
-
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -3700,6 +3921,11 @@ clean-css@^5.2.2:
   dependencies:
     source-map "~0.6.0"
 
+clean-stack@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
+  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
+
 cli-cursor@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
@@ -3893,6 +4119,11 @@ commander@^2.18.0, commander@^2.19.0, commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commander@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
@@ -3924,6 +4155,13 @@ compare-func@^2.0.0:
     array-ify "^1.0.0"
     dot-prop "^5.1.0"
 
+compose-function@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/compose-function/-/compose-function-3.0.3.tgz#9ed675f13cc54501d30950a486ff6a7ba3ab185f"
+  integrity sha512-xzhzTJ5eC+gmIzvZq+C3kCJHsp9os6tJkrigDRZclyGtOKINbZtE8n1Tzmeh32jW+BUDPbvZpibwvJHBLGMVwg==
+  dependencies:
+    arity-n "^1.0.4"
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -4052,7 +4290,7 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cosmiconfig@^7.0.0, cosmiconfig@^7.1.0:
+cosmiconfig@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
   integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
@@ -4092,7 +4330,7 @@ cross-fetch@4.0.0:
   dependencies:
     node-fetch "^2.6.12"
 
-cross-spawn@7.0.3, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -4219,6 +4457,11 @@ dargs@^7.0.0:
   resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc"
   integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==
 
+data-uri-to-buffer@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
+  integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
+
 data-urls@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-4.0.0.tgz#333a454eca6f9a5b7b0f1013ff89074c3f522dd4"
@@ -4361,6 +4604,11 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
+deep-freeze@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/deep-freeze/-/deep-freeze-0.0.1.tgz#3a0b0005de18672819dfd38cd31f91179c893e84"
+  integrity sha512-Z+z8HiAvsGwmjqlphnHW5oz6yWlOwu6EQfFTjmeTWlDeda3FS2yv3jhq35TX/ewmsnqB+RX2IdsIOyjJCQN5tg==
+
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
@@ -4416,50 +4664,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
-depcheck@^1.4.3:
-  version "1.4.7"
-  resolved "https://registry.yarnpkg.com/depcheck/-/depcheck-1.4.7.tgz#57976e2fa43625f477efc0f19ad868ef94f8a26c"
-  integrity sha512-1lklS/bV5chOxwNKA/2XUUk/hPORp8zihZsXflr8x0kLwmcZ9Y9BsS6Hs3ssvA+2wUVbG0U2Ciqvm1SokNjPkA==
-  dependencies:
-    "@babel/parser" "^7.23.0"
-    "@babel/traverse" "^7.23.2"
-    "@vue/compiler-sfc" "^3.3.4"
-    callsite "^1.0.0"
-    camelcase "^6.3.0"
-    cosmiconfig "^7.1.0"
-    debug "^4.3.4"
-    deps-regex "^0.2.0"
-    findup-sync "^5.0.0"
-    ignore "^5.2.4"
-    is-core-module "^2.12.0"
-    js-yaml "^3.14.1"
-    json5 "^2.2.3"
-    lodash "^4.17.21"
-    minimatch "^7.4.6"
-    multimatch "^5.0.0"
-    please-upgrade-node "^3.2.0"
-    readdirp "^3.6.0"
-    require-package-name "^2.0.1"
-    resolve "^1.22.3"
-    resolve-from "^5.0.0"
-    semver "^7.5.4"
-    yargs "^16.2.0"
-
-deps-regex@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/deps-regex/-/deps-regex-0.2.0.tgz#3ee7ddae5fd784f3accf29d5a711aa6e10044137"
-  integrity sha512-PwuBojGMQAYbWkMXOY9Pd/NWCDNHVH12pnS7WHqZkTSeMESe4hwnKKRp0yR87g37113x4JPbo/oIvXY+s/f56Q==
-
 dequal@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
 
-detect-file@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
-  integrity sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==
-
 detect-libc@^2.0.0, detect-libc@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.2.tgz#8ccf2ba9315350e1241b88d0ac3b0e1fbd99605d"
@@ -4628,6 +4837,20 @@ duplexify@^4.1.1:
     readable-stream "^3.1.1"
     stream-shift "^1.0.2"
 
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+easy-table@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/easy-table/-/easy-table-1.2.0.tgz#ba9225d7138fee307bfd4f0b5bc3c04bdc7c54eb"
+  integrity sha512-OFzVOv03YpvtcWGe5AayU5G2hgybsg3iqA6drU8UaoZyB9jLGMTrz9+asnLp/E+6qPh88yEI1gvyZFZ41dmgww==
+  dependencies:
+    ansi-regex "^5.0.1"
+  optionalDependencies:
+    wcwidth "^1.0.1"
+
 editorconfig@^0.15.3:
   version "0.15.3"
   resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
@@ -4665,6 +4888,18 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+encode-registry@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/encode-registry/-/encode-registry-3.0.1.tgz#cb925d0db14ce59b18882b62c67133721b0846d1"
+  integrity sha512-6qOwkl1g0fv0DN3Y3ggr2EaZXN71aoAqPp3p/pVaWSBSIo+YjLOWN61Fva43oVyQNPf7kgm8lkudzlzojwE2jw==
+  dependencies:
+    mem "^8.0.0"
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -4690,7 +4925,7 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-entities@^4.2.0, entities@^4.4.0, entities@^4.5.0:
+entities@^4.2.0, entities@^4.4.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@@ -4710,6 +4945,11 @@ err-code@^1.0.0:
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
   integrity sha512-CJAN+O0/yA1CKfRn9SXOGctSpEM7DCon/r/5r2eXFMY2zCCJBasFhcM5I+1kh3Ap11FsQCX+vGHceNPvpWKhoA==
 
+err-code@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
+  integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
+
 errno@^0.1.1:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -5068,11 +5308,6 @@ espree@^9.6.0, espree@^9.6.1:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.4.1"
 
-esprima@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
-  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
-
 esquery@^1.4.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
@@ -5144,13 +5379,6 @@ expand-template@^2.0.3:
   resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
   integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==
 
-expand-tilde@^2.0.0, expand-tilde@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
-  integrity sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==
-  dependencies:
-    homedir-polyfill "^1.0.1"
-
 expect@^29.0.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/expect/-/expect-29.7.0.tgz#578874590dcb3214514084c08115d8aee61e11bc"
@@ -5197,7 +5425,7 @@ fast-fifo@^1.1.0, fast-fifo@^1.2.0:
   resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
   integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
 
-fast-glob@^3.2.11, fast-glob@^3.2.9, fast-glob@^3.3.1, fast-glob@^3.3.2:
+fast-glob@3.3.2, fast-glob@^3.2.11, fast-glob@^3.2.9, fast-glob@^3.3.1, fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -5218,6 +5446,11 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
+fast-safe-stringify@^2.0.7:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
+  integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
+
 fast-xml-parser@^4.3.2:
   version "4.3.5"
   resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.3.5.tgz#e2f2a2ae8377e9c3dc321b151e58f420ca7e5ccc"
@@ -5230,7 +5463,7 @@ fastest-levenshtein@^1.0.16:
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
   integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
 
-fastq@^1.13.0, fastq@^1.6.0:
+fastq@^1.13.0, fastq@^1.15.0, fastq@^1.6.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
   integrity sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==
@@ -5244,6 +5477,11 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+fetch-blob@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-2.1.2.tgz#a7805db1361bd44c1ef62bb57fb5fe8ea173ef3c"
+  integrity sha512-YKqtUDwqLyfyMnmbw8XD6Q8j9i/HggKtPEI+pZ1+8bvheBu78biSmNaXWusx1TauGqtUUGx/cBb1mKdq2rLYow==
+
 figures@3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
@@ -5305,6 +5543,11 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+filter-iterator@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/filter-iterator/-/filter-iterator-0.0.1.tgz#0a2ecf07d6c06f96bdeb6846f8e88b57b8da1f37"
+  integrity sha512-v4lhL7Qa8XpbW3LN46CEnmhGk3eHZwxfNl5at20aEkreesht4YKb/Ba3BUIbnPhAC/r3dmu7ABaGk6MAvh2alA==
+
 filter-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
@@ -5340,16 +5583,6 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
-findup-sync@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-5.0.0.tgz#54380ad965a7edca00cc8f63113559aadc541bd2"
-  integrity sha512-MzwXju70AuyflbgeOhzvQWAvvQdo1XL0A9bVvlXsYcFEBM87WR4OakL4OfZq+QRmr+duJubio+UtNQCPsVESzQ==
-  dependencies:
-    detect-file "^1.0.0"
-    is-glob "^4.0.3"
-    micromatch "^4.0.4"
-    resolve-dir "^1.0.1"
-
 fingerprintjs2@^2.1.2:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/fingerprintjs2/-/fingerprintjs2-2.1.4.tgz#a39deb947aa187c098306a0b5dd41ceaa2e15fc5"
@@ -5391,6 +5624,14 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
+foreground-child@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.1.1.tgz#1d173e776d75d2772fed08efe4a0de1ea1b12d0d"
+  integrity sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
 form-data@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
@@ -5405,6 +5646,15 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
+fs-extra@10.1.0, fs-extra@^10.0.1:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs-extra@8.1.0, fs-extra@^8.0.1, fs-extra@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
@@ -5414,15 +5664,6 @@ fs-extra@8.1.0, fs-extra@^8.0.1, fs-extra@^8.1.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@^10.0.1:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
-  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
-
 fs-extra@^11.1.0:
   version "11.2.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.2.0.tgz#e70e17dfad64232287d01929399e0ea7c86b0e5b"
@@ -5646,6 +5887,17 @@ glob@7.2.0:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^10.2.2:
+  version "10.3.10"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
+  integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^2.3.5"
+    minimatch "^9.0.1"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+    path-scurry "^1.10.1"
+
 glob@^7.0.3, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
@@ -5665,15 +5917,6 @@ global-dirs@^0.1.1:
   dependencies:
     ini "^1.3.4"
 
-global-modules@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
-  integrity sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==
-  dependencies:
-    global-prefix "^1.0.1"
-    is-windows "^1.0.1"
-    resolve-dir "^1.0.0"
-
 global-modules@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@@ -5681,17 +5924,6 @@ global-modules@^2.0.0:
   dependencies:
     global-prefix "^3.0.0"
 
-global-prefix@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe"
-  integrity sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==
-  dependencies:
-    expand-tilde "^2.0.2"
-    homedir-polyfill "^1.0.1"
-    ini "^1.3.4"
-    is-windows "^1.0.1"
-    which "^1.2.14"
-
 global-prefix@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-3.0.0.tgz#fc85f73064df69f50421f47f883fe5b913ba9b97"
@@ -5755,7 +5987,7 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.10, graceful-fs@^4.2.11, graceful-fs@^4.2.8, graceful-fs@^4.2.9:
+graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.10, graceful-fs@^4.2.11, graceful-fs@^4.2.8, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -5792,6 +6024,11 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+has-own-property@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/has-own-property/-/has-own-property-0.1.0.tgz#992b0f5bb3a25416f8d4d0cde53f497b9d7b1ea5"
+  integrity sha512-14qdBKoonU99XDhWcFKZTShK+QV47qU97u8zzoVo9cL5TZ3BmBHXogItSt9qJjR0KUMFRhcCW8uGIGl8nkl7Aw==
+
 has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.1, has-property-descriptors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
@@ -5858,13 +6095,6 @@ hoist-non-react-statics@^3.3.1:
   dependencies:
     react-is "^16.7.0"
 
-homedir-polyfill@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8"
-  integrity sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==
-  dependencies:
-    parse-passwd "^1.0.0"
-
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -5877,6 +6107,13 @@ hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
+hosted-git-info@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-7.0.1.tgz#9985fcb2700467fecf7f33a4d4874e30680b5322"
+  integrity sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==
+  dependencies:
+    lru-cache "^10.0.1"
+
 html-encoding-sniffer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
@@ -6050,12 +6287,17 @@ idb@^7.0.1:
   resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
   integrity sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==
 
+identity-function@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/identity-function/-/identity-function-1.0.0.tgz#bea1159f0985239be3ca348edf40ce2f0dd2c21d"
+  integrity sha512-kNrgUK0qI+9qLTBidsH85HjDLpZfrrS0ElquKKe/fJFdB3D7VeKdXXEvOPDUHSHOzdZKCAAaQIWWyp0l2yq6pw==
+
 ieee754@^1.1.13, ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^5.2.0, ignore@^5.2.4:
+ignore@^5.1.8, ignore@^5.2.0, ignore@^5.2.4:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
@@ -6103,6 +6345,11 @@ indent-string@^5.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-5.0.0.tgz#4fd2980fccaf8622d14c64d694f4cf33c81951a5"
   integrity sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==
 
+individual@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/individual/-/individual-3.0.0.tgz#e7ca4f85f8957b018734f285750dc22ec2f9862d"
+  integrity sha512-rUY5vtT748NMRbEMrTNiFfy29BgGZwGXUi2NFUVMWQrogSLzlJvQV9eeMWi+g1aVaQ53tpyLAQtd5x/JH0Nh1g==
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -6231,7 +6478,7 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-core-module@^2.12.0, is-core-module@^2.13.0, is-core-module@^2.13.1, is-core-module@^2.5.0:
+is-core-module@^2.13.0, is-core-module@^2.13.1, is-core-module@^2.5.0, is-core-module@^2.8.1:
   version "2.13.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
   integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
@@ -6303,6 +6550,11 @@ is-interactive@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
   integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
 
+is-iterable@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-iterable/-/is-iterable-1.1.1.tgz#71f9aa6f113e1d968ebe1d41cff4c8fb23a817bc"
+  integrity sha512-EdOZCr0NsGE00Pot+x1ZFx9MJK3C6wy91geZpXwvwexDLJvA4nzYyZf7r+EIwSeVsOLDdBz7ATg9NqKTzuNYuQ==
+
 is-map@^2.0.1, is-map@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
@@ -6330,6 +6582,11 @@ is-number-object@^1.0.4:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-number@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff"
+  integrity sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==
+
 is-number@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
@@ -6478,11 +6735,6 @@ is-what@^3.14.1:
   resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
   integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
 
-is-windows@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
-  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
-
 is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
@@ -6505,6 +6757,11 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
+isexe@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-3.1.1.tgz#4a407e2bd78ddfb14bea0c27c6f7072dde775f0d"
+  integrity sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==
+
 istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz#2d166c4b0644d43a39f04bf6c2edd1e585f31756"
@@ -6536,6 +6793,11 @@ istanbul-reports@^3.1.5:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
+iterable-lookahead@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/iterable-lookahead/-/iterable-lookahead-1.0.0.tgz#896dfcb78680bdb50036e97edb034c8b68a9737f"
+  integrity sha512-hJnEP2Xk4+44DDwJqUQGdXal5VbyeWLaPyDl2AQc242Zr7iqz4DgpQOrEzglWVMGHMDCkguLHEKxd1+rOsmgSQ==
+
 iterator.prototype@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
@@ -6547,6 +6809,15 @@ iterator.prototype@^1.1.2:
     reflect.getprototypeof "^1.0.4"
     set-function-name "^2.0.1"
 
+jackspeak@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
+  integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
 jake@^10.8.5:
   version "10.8.7"
   resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.7.tgz#63a32821177940c33f356e0ba44ff9d34e1c7d8f"
@@ -6618,7 +6889,7 @@ jest-worker@^26.2.1:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jiti@^1.20.0:
+jiti@1.21.0, jiti@^1.20.0:
   version "1.21.0"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
@@ -6676,14 +6947,6 @@ js-yaml@4.1.0, js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
-js-yaml@^3.14.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
-  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
 js2xmlparser@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/js2xmlparser/-/js2xmlparser-3.0.0.tgz#3fb60eaa089c5440f9319f51760ccd07e2499733"
@@ -6745,6 +7008,11 @@ json-parse-even-better-errors@^2.3.0:
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
+json-parse-even-better-errors@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-3.0.1.tgz#02bb29fb5da90b5444581749c22cedd3597c6cb0"
+  integrity sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -6765,6 +7033,11 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
+json-stringify-safe@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+  integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
+
 json5@^1.0.2, json5@^2.2.0, json5@^2.2.2, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
@@ -6828,6 +7101,34 @@ kind-of@^6.0.2, kind-of@^6.0.3:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+knip@^5.0.3:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/knip/-/knip-5.1.0.tgz#ca18799fe58992076af06f10bcea6b4701f642f6"
+  integrity sha512-iyiioeTUqzvlzIg270dTKpV1MbZZh0sCO+OIBHzO/ZHpJMbO1vHPuYZMvrubOUjR2ikF08R0EsFbL57EY1o1Nw==
+  dependencies:
+    "@ericcornelissen/bash-parser" "0.5.2"
+    "@nodelib/fs.walk" "2.0.0"
+    "@npmcli/map-workspaces" "3.0.4"
+    "@npmcli/package-json" "5.0.0"
+    "@pnpm/logger" "5.0.0"
+    "@pnpm/workspace.pkgs-graph" "^2.0.15"
+    "@snyk/github-codeowners" "1.1.0"
+    "@types/picomatch" "2.3.3"
+    easy-table "1.2.0"
+    fast-glob "3.3.2"
+    jiti "1.21.0"
+    js-yaml "4.1.0"
+    micromatch "4.0.5"
+    minimist "1.2.8"
+    picocolors "1.0.0"
+    picomatch "4.0.1"
+    pretty-ms "9.0.0"
+    smol-toml "1.1.4"
+    strip-json-comments "5.0.1"
+    summary "2.1.0"
+    zod "3.22.4"
+    zod-validation-error "3.0.3"
+
 known-css-properties@^0.29.0:
   version "0.29.0"
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.29.0.tgz#e8ba024fb03886f23cb882e806929f32d814158f"
@@ -6977,6 +7278,16 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
+load-json-file@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-6.2.0.tgz#5c7770b42cafa97074ca2848707c61662f4251a1"
+  integrity sha512-gUD/epcRms75Cw8RT1pUdHugZYM5ce64ucs2GEISABwkRsOQr0q2wm/MV2TKThycIe5e0ytRweW2RZxclogCdQ==
+  dependencies:
+    graceful-fs "^4.1.15"
+    parse-json "^5.0.0"
+    strip-bom "^4.0.0"
+    type-fest "^0.6.0"
+
 local-pkg@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-0.5.0.tgz#093d25a346bae59a99f80e75f6e9d36d7e8c925c"
@@ -7021,6 +7332,11 @@ lodash.clonedeep@4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==
 
+lodash.curry@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
+  integrity sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -7101,6 +7417,11 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+lru-cache@^10.0.1, lru-cache@^10.0.2, "lru-cache@^9.1.1 || ^10.0.0":
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
+  integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
+
 lru-cache@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -7138,6 +7459,13 @@ lz-string@^1.5.0:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
+magic-string@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.16.0.tgz#970ebb0da7193301285fb1aa650f39bdd81eb45a"
+  integrity sha512-c4BEos3y6G2qO0B9X7K0FVLOPT9uGrjYwYRLFmDqyl5YMboUviyecnXWp94fJTSMwPw2/sf+CEYt5AGpmklkkQ==
+  dependencies:
+    vlq "^0.2.1"
+
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
@@ -7145,7 +7473,7 @@ magic-string@^0.25.0, magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
-magic-string@^0.30.1, magic-string@^0.30.5, magic-string@^0.30.7:
+magic-string@^0.30.1, magic-string@^0.30.5:
   version "0.30.8"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.8.tgz#14e8624246d2bedba70d5462aa99ac9681844613"
   integrity sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==
@@ -7179,11 +7507,23 @@ make-error@^1.1.1:
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
+map-age-cleaner@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
+  integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
+  dependencies:
+    p-defer "^1.0.0"
+
 map-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
   integrity sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==
 
+map-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
+  integrity sha512-TzQSV2DiMYgoF5RycneKVUzIa9bQsj/B3tTgsE3dOGqlzHnGIDaC7XBE7grnA+8kZPnfqSGFe95VHc2oc0VFUQ==
+
 map-obj@^4.0.0, map-obj@^4.1.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
@@ -7225,6 +7565,22 @@ mdn-data@2.0.30:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
   integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
 
+mem@^6.0.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-6.1.1.tgz#ea110c2ebc079eca3022e6b08c85a795e77f6318"
+  integrity sha512-Ci6bIfq/UgcxPTYa8dQQ5FY3BzKkT894bwXWXxC/zqs0XgMO2cT20CGkOqda7gZNkmK5VP4x89IGZ6K7hfbn3Q==
+  dependencies:
+    map-age-cleaner "^0.1.3"
+    mimic-fn "^3.0.0"
+
+mem@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-8.1.1.tgz#cf118b357c65ab7b7e0817bdf00c8062297c0122"
+  integrity sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==
+  dependencies:
+    map-age-cleaner "^0.1.3"
+    mimic-fn "^3.1.0"
+
 memorystream@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
@@ -7325,6 +7681,11 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+mimic-fn@^3.0.0, mimic-fn@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-3.1.0.tgz#65755145bbf3e36954b949c16450427451d5ca74"
+  integrity sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==
+
 mimic-fn@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
@@ -7354,7 +7715,7 @@ minimatch@5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimatch@9.0.3:
+minimatch@9.0.3, minimatch@^9.0.0, minimatch@^9.0.1:
   version "9.0.3"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
   integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
@@ -7368,13 +7729,6 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimatch@^7.4.6:
-  version "7.4.6"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-7.4.6.tgz#845d6f254d8f4a5e4fd6baf44d5f10c8448365fb"
-  integrity sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==
-  dependencies:
-    brace-expansion "^2.0.1"
-
 minimist-options@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
@@ -7389,11 +7743,16 @@ minimist@1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
-minimist@^1.1.0, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6:
+minimist@1.2.8, minimist@^1.1.0, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.0.3:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c"
+  integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==
+
 mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
@@ -7490,17 +7849,6 @@ ms@2.1.3, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-multimatch@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-5.0.0.tgz#932b800963cea7a31a033328fa1e0c3a1874dbe6"
-  integrity sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==
-  dependencies:
-    "@types/minimatch" "^3.0.3"
-    array-differ "^3.0.0"
-    array-union "^2.1.0"
-    arrify "^2.0.1"
-    minimatch "^3.0.4"
-
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
@@ -7543,6 +7891,17 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+ndjson@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ndjson/-/ndjson-2.0.0.tgz#320ac86f6fe53f5681897349b86ac6f43bfa3a19"
+  integrity sha512-nGl7LRGrzugTtaFcJMhLbpzJM6XdivmbkdlaGcrk/LXg2KL/YBC6z1g70xh0/al+oFuVFP8N8kiWRucmeEH/qQ==
+  dependencies:
+    json-stringify-safe "^5.0.1"
+    minimist "^1.2.5"
+    readable-stream "^3.6.0"
+    split2 "^3.0.0"
+    through2 "^4.0.0"
+
 needle@^3.1.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/needle/-/needle-3.3.1.tgz#63f75aec580c2e77e209f3f324e2cdf3d29bd049"
@@ -7590,6 +7949,14 @@ node-fetch@2.6.7:
   dependencies:
     whatwg-url "^5.0.0"
 
+node-fetch@3.0.0-beta.9:
+  version "3.0.0-beta.9"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.0.0-beta.9.tgz#0a7554cfb824380dd6812864389923c783c80d9b"
+  integrity sha512-RdbZCEynH2tH46+tj0ua9caUHVWrd/RHnRfvly2EVdqGmI3ndS1Vn/xjm5KuGejDt2RNDQsVRLPNd2QPwcewVg==
+  dependencies:
+    data-uri-to-buffer "^3.0.1"
+    fetch-blob "^2.1.1"
+
 node-fetch@^2.6.12:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
@@ -7637,6 +8004,16 @@ normalize-package-data@^3.0.0, normalize-package-data@^3.0.2:
     semver "^7.3.4"
     validate-npm-package-license "^3.0.1"
 
+normalize-package-data@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-6.0.0.tgz#68a96b3c11edd462af7189c837b6b1064a484196"
+  integrity sha512-UL7ELRVxYBHBgYEtZCXjxuD5vPxnmvMGq0jp/dGPKKrN7tfsBh2IY7TlJ15WWwdjRWD3RJbnsygUurTK3xkPkg==
+  dependencies:
+    hosted-git-info "^7.0.0"
+    is-core-module "^2.8.1"
+    semver "^7.3.5"
+    validate-npm-package-license "^3.0.4"
+
 normalize-path@3.0.0, normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -7649,6 +8026,38 @@ now-and-later@^3.0.0:
   dependencies:
     once "^1.4.0"
 
+npm-install-checks@^6.0.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/npm-install-checks/-/npm-install-checks-6.3.0.tgz#046552d8920e801fa9f919cad569545d60e826fe"
+  integrity sha512-W29RiK/xtpCGqn6f3ixfRYGk+zRyr+Ew9F2E20BfXxT5/euLdA/Nm7fO7OeTGuAmTs30cpgInyJ0cYe708YTZw==
+  dependencies:
+    semver "^7.1.1"
+
+npm-normalize-package-bin@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz#25447e32a9a7de1f51362c61a559233b89947832"
+  integrity sha512-dMxCf+zZ+3zeQZXKxmyuCKlIDPGuv8EF940xbkC4kQVDTtqoh6rJFO+JTKSA6/Rwi0getWmtuy4Itup0AMcaDQ==
+
+npm-package-arg@^11.0.0:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/npm-package-arg/-/npm-package-arg-11.0.1.tgz#f208b0022c29240a1c532a449bdde3f0a4708ebc"
+  integrity sha512-M7s1BD4NxdAvBKUPqqRW957Xwcl/4Zvo8Aj+ANrzvIPzGJZElrH7Z//rSaec2ORcND6FHHLnZeY8qgTpXDMFQQ==
+  dependencies:
+    hosted-git-info "^7.0.0"
+    proc-log "^3.0.0"
+    semver "^7.3.5"
+    validate-npm-package-name "^5.0.0"
+
+npm-pick-manifest@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/npm-pick-manifest/-/npm-pick-manifest-9.0.0.tgz#f87a4c134504a2c7931f2bb8733126e3c3bb7e8f"
+  integrity sha512-VfvRSs/b6n9ol4Qb+bDwNGUXutpy76x6MARw/XssevE0TnctIKcmklJZM5Z7nqs5z5aW+0S63pgCNbpkUNNXBg==
+  dependencies:
+    npm-install-checks "^6.0.0"
+    npm-normalize-package-bin "^3.0.0"
+    npm-package-arg "^11.0.0"
+    semver "^7.3.5"
+
 npm-run-all@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
@@ -7706,6 +8115,16 @@ object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
+object-pairs@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-pairs/-/object-pairs-0.1.0.tgz#8276eed81d60b8549d69c5f73a682ab9da4ff32f"
+  integrity sha512-3ECr6K831I4xX/Mduxr9UC+HPOz/d6WKKYj9p4cmC8Lg8p7g8gitzsxNX5IWlSIgFWN/a4JgrJaoAMKn20oKwA==
+
+object-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/object-values/-/object-values-1.0.0.tgz#72af839630119e5b98c3b02bb8c27e3237158105"
+  integrity sha512-+8hwcz/JnQ9EpLIXzN0Rs7DLsBpJNT/xYehtB/jU93tHYr5BFEO8E+JGQNOSqE7opVzz5cGksKFHt7uUJVLSjQ==
+
 object.assign@^4.1.4, object.assign@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
@@ -7849,6 +8268,11 @@ os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
 
+p-defer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
+  integrity sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -7861,7 +8285,7 @@ p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
-p-limit@^3.0.2:
+p-limit@^3.0.2, p-limit@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
   integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
@@ -7889,6 +8313,21 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
+p-map@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
+  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
+p-memoize@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/p-memoize/-/p-memoize-4.0.1.tgz#6f4231857fec10de2504611fe820c808fa8c5f8b"
+  integrity sha512-km0sP12uE0dOZ5qP+s7kGVf07QngxyG0gS8sYFvFWhqlgzOsSy+m71aUejf/0akxj5W7gE//2G74qTv6b4iMog==
+  dependencies:
+    mem "^6.0.1"
+    mimic-fn "^3.0.0"
+
 p-queue@6.6.2:
   version "6.6.2"
   resolved "https://registry.yarnpkg.com/p-queue/-/p-queue-6.6.2.tgz#2068a9dcf8e67dd0ec3e7a2bcb76810faa85e426"
@@ -7962,15 +8401,22 @@ parse-json@^5.0.0, parse-json@^5.2.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-ms@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-4.0.0.tgz#c0c058edd47c2a590151a718990533fd62803df4"
+  integrity sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==
+
 parse-node-version@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
   integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
 
-parse-passwd@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
-  integrity sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==
+parse-npm-tarball-url@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/parse-npm-tarball-url/-/parse-npm-tarball-url-3.0.0.tgz#4bcdd84b7eb824b9539182dea082f7bde2cbb24f"
+  integrity sha512-InpdgIdNe5xWMEUcrVQUniQKwnggBtJ7+SCwh7zQAZwbbIYZV9XdgJyhtmDSSvykFyQXoe4BINnzKTfCwWLs5g==
+  dependencies:
+    semver "^6.1.0"
 
 parse5-htmlparser2-tree-adapter@^7.0.0:
   version "7.0.0"
@@ -8030,6 +8476,21 @@ path-posix@^1.0.0:
   resolved "https://registry.yarnpkg.com/path-posix/-/path-posix-1.0.0.tgz#06b26113f56beab042545a23bfa88003ccac260f"
   integrity sha512-1gJ0WpNIiYcQydgg3Ed8KzvIqTsDpNwq+cjBCssvBtuTWjEqY1AW+i+OepiEMqDCzyro9B2sLAe4RBPajMYFiA==
 
+path-scurry@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.10.1.tgz#9ba6bf5aa8500fe9fd67df4f0d9483b2b0bfc698"
+  integrity sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==
+  dependencies:
+    lru-cache "^9.1.1 || ^10.0.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+path-temp@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/path-temp/-/path-temp-2.1.0.tgz#cc68bb26d4fc301df799bb40b8c005cab0e62786"
+  integrity sha512-cMMJTAZlion/RWRRC48UbrDymEIt+/YSD/l8NqjneyDw2rDOBQcP5yRkMB4CYGn47KMhZvbblBP7Z79OsMw72w==
+  dependencies:
+    unique-string "^2.0.0"
+
 path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
@@ -8075,11 +8536,16 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
-picocolors@^1.0.0:
+picocolors@1.0.0, picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
+picomatch@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.1.tgz#68c26c8837399e5819edce48590412ea07f17a07"
+  integrity sha512-xUXwsxNjwTQ8K3GnT4pCJm+xq3RUPQbmkYJTP5aFIfNIvbcc/4MUxgBaaRSZJ6yGJZiGSyYlM6MzwTsRk8SYCg==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -8162,13 +8628,6 @@ playwright@^1.38.1:
   optionalDependencies:
     fsevents "2.3.2"
 
-please-upgrade-node@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
-  integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==
-  dependencies:
-    semver-compare "^1.0.0"
-
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
@@ -8320,6 +8779,18 @@ pretty-format@^29.0.0, pretty-format@^29.7.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+pretty-ms@9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-9.0.0.tgz#53c57f81171c53be7ce3fd20bdd4265422bc5929"
+  integrity sha512-E9e9HJ9R9NasGOgPaPE8VMeiPKAyWR5jcFpNnwIejslIhWqdqOrb2wShBsncMPUb+BcCd2OPYfh7p2W6oemTng==
+  dependencies:
+    parse-ms "^4.0.0"
+
+proc-log@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/proc-log/-/proc-log-3.0.0.tgz#fb05ef83ccd64fd7b20bbe9c8c1070fc08338dd8"
+  integrity sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A==
+
 process-nextick-args@^2.0.1, process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -8330,6 +8801,11 @@ progress@2.0.3:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+  integrity sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==
+
 promise-map-series@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/promise-map-series/-/promise-map-series-0.3.0.tgz#41873ca3652bb7a042b387d538552da9b576f8a1"
@@ -8343,6 +8819,14 @@ promise-retry@1.1.1:
     err-code "^1.0.0"
     retry "^0.10.0"
 
+promise-retry@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/promise-retry/-/promise-retry-2.0.1.tgz#ff747a13620ab57ba688f5fc67855410c370da22"
+  integrity sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==
+  dependencies:
+    err-code "^2.0.2"
+    retry "^0.12.0"
+
 promise@^8.1.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/promise/-/promise-8.3.0.tgz#8cb333d1edeb61ef23869fbb8a4ea0279ab60e0a"
@@ -8493,6 +8977,11 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
+"ramda@npm:@pnpm/ramda@0.28.1":
+  version "0.28.1"
+  resolved "https://registry.yarnpkg.com/@pnpm/ramda/-/ramda-0.28.1.tgz#0f32abc5275d586a03e0dc1dd90a009ac668ff33"
+  integrity sha512-zcAG+lvU0fMziNeGXpPyCyCJYp5ZVrPElEE4t14jAmViaihohocZ+dDkcRIyAomox8pQsuZnv1EyHR+pOhmUWw==
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -8623,6 +9112,14 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
+read-package-json-fast@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz#394908a9725dc7a5f14e70c8e7556dff1d2b1049"
+  integrity sha512-0J+Msgym3vrLOUB3hzQCuZHII0xkNGCtz/HJH9xZshwv9DbDwkw1KaE3gx/e2J5rpEY5rtOy6cyhKOPrkP7FZw==
+  dependencies:
+    json-parse-even-better-errors "^3.0.0"
+    npm-normalize-package-bin "^3.0.0"
+
 read-pkg-up@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
@@ -8699,7 +9196,7 @@ readable-stream@^2.0.0, readable-stream@^2.3.3, readable-stream@~2.3.6:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readdirp@^3.6.0, readdirp@~3.6.0:
+readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
   integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
@@ -8840,6 +9337,14 @@ remove-trailing-separator@^1.1.0:
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
   integrity sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==
 
+rename-overwrite@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/rename-overwrite/-/rename-overwrite-5.0.0.tgz#ccd1f85aef47d41647ccc1c681d9b6d054cf5fc8"
+  integrity sha512-vSxE5Ww7Jnyotvaxi3Dj0vOMoojH8KMkBfs9xYeW/qNfJiLTcC1fmwTjrbGUq3mQSOCxkG0DbdcvwTUrpvBN4w==
+  dependencies:
+    "@zkochan/rimraf" "^2.1.2"
+    fs-extra "10.1.0"
+
 replace-ext@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-2.0.0.tgz#9471c213d22e1bcc26717cd6e50881d88f812b06"
@@ -8855,11 +9360,6 @@ require-from-string@^2.0.2:
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
   integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
 
-require-package-name@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/require-package-name/-/require-package-name-2.0.1.tgz#c11e97276b65b8e2923f75dabf5fb2ef0c3841b9"
-  integrity sha512-uuoJ1hU/k6M0779t3VMVIYpb2VMJk05cehCaABFhXaibcbvfgR8wKiozLjVFSzJPmQMRqIcO0HMyTFqfV09V6Q==
-
 requireindex@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/requireindex/-/requireindex-1.1.0.tgz#e5404b81557ef75db6e49c5a72004893fe03e162"
@@ -8875,14 +9375,6 @@ reserved-words@^0.1.2:
   resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1"
   integrity sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==
 
-resolve-dir@^1.0.0, resolve-dir@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
-  integrity sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==
-  dependencies:
-    expand-tilde "^2.0.0"
-    global-modules "^1.0.0"
-
 resolve-from@5.0.0, resolve-from@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
@@ -8907,7 +9399,7 @@ resolve-options@^2.0.0:
   dependencies:
     value-or-function "^4.0.0"
 
-resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.3, resolve@^1.22.4:
+resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.4:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -8961,11 +9453,21 @@ retry@^0.10.0:
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.10.1.tgz#e76388d217992c252750241d3d3956fed98d8ff4"
   integrity sha512-ZXUSQYTHdl3uS7IuCehYfMzKyIDBNoAuUblvy5oGO5UJSUTmStUUVPXbA9Qxd173Bgre53yCQczQuHgRWAdvJQ==
 
+retry@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
+  integrity sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==
+
 reusify@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
+reverse-arguments@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/reverse-arguments/-/reverse-arguments-1.0.0.tgz#c28095a3a921ac715d61834ddece9027992667cd"
+  integrity sha512-/x8uIPdTafBqakK0TmPNJzgkLP+3H+yxpUJhCQHsLBg1rYEVNR2D8BRYNWQhVBjyOd7oo1dZRVzIkwMY2oqfYQ==
+
 rfdc@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.1.tgz#2b6d4df52dffe8bb346992a10ea9451f24373a8f"
@@ -9049,7 +9551,7 @@ run-async@^2.2.0:
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
   integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
 
-run-parallel@^1.1.9:
+run-parallel@^1.1.9, run-parallel@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
   integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
@@ -9125,11 +9627,6 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
-semver-compare@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
-  integrity sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==
-
 "semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.5.0, semver@^5.6.0:
   version "5.7.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
@@ -9142,12 +9639,12 @@ semver@7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^6.0.0, semver@^6.3.1:
+semver@^6.0.0, semver@^6.1.0, semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.3.4, semver@^7.3.5, semver@^7.5.3, semver@^7.5.4:
+semver@^7.0.0, semver@^7.1.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.4.0, semver@^7.5.3, semver@^7.5.4:
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
   integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
@@ -9266,6 +9763,11 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+shell-quote-word@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/shell-quote-word/-/shell-quote-word-1.0.1.tgz#e2bdfd22d599fd68886491677e38f560f9d469c9"
+  integrity sha512-lT297f1WLAdq0A4O+AknIFRP6kkiI3s8C913eJ0XqBxJbZPGWUNkRQk2u8zk4bEAjUJ5i+fSLwB6z1HzeT+DEg==
+
 shell-quote@^1.6.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
@@ -9352,6 +9854,11 @@ slice-ansi@^7.0.0:
     ansi-styles "^6.2.1"
     is-fullwidth-code-point "^5.0.0"
 
+smol-toml@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/smol-toml/-/smol-toml-1.1.4.tgz#08c23b105f56f17e57b0a77c7edcb10b75a62c5c"
+  integrity sha512-Y0OT8HezWsTNeEOSVxDnKOW/AyNXHQ4BwJNbAXlLTF5wWsBvrcHhIkE5Rf8kQMLmgf7nDX3PVOlgC6/Aiggu3Q==
+
 snake-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
@@ -9464,10 +9971,12 @@ sprintf-js@^1.1.1:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.3.tgz#4914b903a2f8b685d17fdf78a70e917e872e444a"
   integrity sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==
 
-sprintf-js@~1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
-  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
+ssri@10.0.5:
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-10.0.5.tgz#e49efcd6e36385196cb515d3a2ad6c3f0265ef8c"
+  integrity sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==
+  dependencies:
+    minipass "^7.0.3"
 
 stack-utils@^2.0.3:
   version "2.0.6"
@@ -9525,6 +10034,15 @@ string-argv@0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  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@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
@@ -9533,14 +10051,14 @@ string-width@^2.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  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==
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
   dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
 
 string-width@^7.0.0:
   version "7.1.0"
@@ -9551,6 +10069,11 @@ string-width@^7.0.0:
     get-east-asian-width "^1.0.0"
     strip-ansi "^7.1.0"
 
+string.fromcodepoint@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string.fromcodepoint/-/string.fromcodepoint-0.2.1.tgz#8d978333c0bc92538f50f383e4888f3e5619d653"
+  integrity sha512-n69H31OnxSGSZyZbgBlvYIXlrMhJQ0dQAX1js1QDhpaUH6zmU3QYlj07bCwCNlPOu3oRXIubGPl2gDGnHsiCqg==
+
 string.prototype.matchall@^4.0.10, string.prototype.matchall@^4.0.6:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz#a1553eb532221d4180c51581d6072cd65d1ee100"
@@ -9625,6 +10148,13 @@ 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:
+  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@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
@@ -9639,14 +10169,7 @@ strip-ansi@^5.1.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-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==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^7.1.0:
+strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
   integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
@@ -9658,6 +10181,11 @@ strip-bom@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
 
+strip-bom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
+
 strip-comments@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-2.0.1.tgz#4ad11c3fbcac177a67a40ac224ca339ca1c1ba9b"
@@ -9687,6 +10215,11 @@ strip-json-comments@3.1.1, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+strip-json-comments@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-5.0.1.tgz#0d8b7d01b23848ed7dbdf4baaaa31a8250d8cfa0"
+  integrity sha512-0fk9zBqO67Nq5M/m45qHCJxylV/DhBlIOVExqgOMiCCrzrhU6tCibRXNqE3jwJLftzE9SNuZtYbpzcO+i9FiKw==
+
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -9816,6 +10349,11 @@ stylus@^0.62.0:
     sax "~1.3.0"
     source-map "^0.7.3"
 
+summary@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/summary/-/summary-2.1.0.tgz#be8a49a0aa34eb6ceea56042cae88f8add4b0885"
+  integrity sha512-nMIjMrd5Z2nuB2RZCKJfFMjgS3fygbeyGk9PxPPaJR1RIcyN9yn4A63Isovzm3ZtQuEkLBVgMdPup8UeLH7aQw==
+
 supports-color@8.1.1:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
@@ -10040,6 +10578,18 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
 
+to-no-case@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"
+  integrity sha512-Z3g735FxuZY8rodxV4gH7LxClE4H0hTIyHNIHdk+vpQxjLm0cwnKXq/OFVZ76SOQmto7txVcwSCwkU5kqp+FKg==
+
+to-pascal-case@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-pascal-case/-/to-pascal-case-1.0.0.tgz#0bbdc8df448886ba01535e543327048d0aa1ce78"
+  integrity sha512-QGMWHqM6xPrcQW57S23c5/3BbYb0Tbe9p+ur98ckRnGDwD4wbbtDiYI38CfmMKNB5Iv0REjs5SNDntTwvDxzZA==
+  dependencies:
+    to-space-case "^1.0.0"
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -10047,6 +10597,13 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+to-space-case@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17"
+  integrity sha512-rLdvwXZ39VOn1IxGL3V6ZstoTbwLRckQmn/U8ZDLuWwIXNpuZDhQ3AiRUlhTbOXFVE9C+dR51wM0CBDhk31VcA==
+  dependencies:
+    to-no-case "^1.0.0"
+
 to-through@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/to-through/-/to-through-3.0.0.tgz#bf4956eaca5a0476474850a53672bed6906ace54"
@@ -10356,6 +10913,13 @@ undici-types@~5.26.4:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
+unescape-js@^1.0.5:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/unescape-js/-/unescape-js-1.1.4.tgz#4bc6389c499cb055a98364a0b3094e1c3d5da395"
+  integrity sha512-42SD8NOQEhdYntEiUQdYq/1V/YHwr1HLwlHuTJB5InVVdOSbgI6xu8jK5q65yIzuFCfczzyDF/7hbGzVbyCw0g==
+  dependencies:
+    string.fromcodepoint "^0.2.1"
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -10486,7 +11050,7 @@ v8-to-istanbul@^9.1.0:
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^2.0.0"
 
-validate-npm-package-license@^3.0.1:
+validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
   integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
@@ -10494,11 +11058,32 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+validate-npm-package-name@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz#fe8f1c50ac20afdb86f177da85b3600f0ac0d747"
+  integrity sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==
+  dependencies:
+    builtins "^5.0.0"
+
+validate-npm-package-name@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-5.0.0.tgz#f16afd48318e6f90a1ec101377fa0384cfc8c713"
+  integrity sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==
+  dependencies:
+    builtins "^5.0.0"
+
 value-or-function@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-4.0.0.tgz#70836b6a876a010dc3a2b884e7902e9db064378d"
   integrity sha512-aeVK81SIuT6aMJfNo9Vte8Dw0/FZINGBV8BfCraGtqVxIeLAEhJyoWs8SmvRVmXfGss2PmmOwZCuBPbZR+IYWg==
 
+version-selector-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/version-selector-type/-/version-selector-type-3.0.0.tgz#47c365fb4d9ca4a54e6dabcad6fb7a46265f7955"
+  integrity sha512-PSvMIZS7C1MuVNBXl/CDG2pZq8EXy/NW2dHIdm3bVP5N0PC8utDK8ttXLXj44Gn3J0lQE3U7Mpm1estAOd+eiA==
+  dependencies:
+    semver "^7.3.2"
+
 vi-fetch@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/vi-fetch/-/vi-fetch-0.8.0.tgz#45170a3d9e2ecb2a775b128356f8faae671b5a66"
@@ -10672,6 +11257,11 @@ vitest@^1.3.1:
     vite-node "1.3.1"
     why-is-node-running "^2.2.2"
 
+vlq@^0.2.1:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
+  integrity sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==
+
 void-elements@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
@@ -10828,7 +11418,7 @@ which-typed-array@^1.1.13, which-typed-array@^1.1.14, which-typed-array@^1.1.9:
     gopd "^1.0.1"
     has-tostringtag "^1.0.1"
 
-which@^1.2.14, which@^1.2.9, which@^1.3.1:
+which@^1.2.9, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
@@ -10842,6 +11432,13 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
+which@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-4.0.0.tgz#cd60b5e74503a3fbcfbf6cd6b4138a8bae644c1a"
+  integrity sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==
+  dependencies:
+    isexe "^3.1.1"
+
 why-is-node-running@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/why-is-node-running/-/why-is-node-running-2.2.2.tgz#4185b2b4699117819e7154594271e7e344c9973e"
@@ -11176,7 +11773,7 @@ workerpool@6.2.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
   integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
 
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.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==
@@ -11185,6 +11782,15 @@ wrap-ansi@^7.0.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
 wrap-ansi@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-9.0.0.tgz#1a3dc8b70d85eeb8398ddfb1e4a02cd186e58b3e"
@@ -11388,6 +11994,16 @@ yup@^0.32.9:
     property-expr "^2.0.4"
     toposort "^2.0.2"
 
+zod-validation-error@3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.0.3.tgz#d2e0bbb1bb5fcf0ae406095180dc3c31d8145b8e"
+  integrity sha512-cETTrcMq3Ze58vhdR0zD37uJm/694I6mAxcf/ei5bl89cC++fBNxrC2z8lkFze/8hVMPwrbtrwXHR2LB50fpHw==
+
+zod@3.22.4:
+  version "3.22.4"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
+  integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==
+
 zustand@^3.6.9:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.2.tgz#7b44c4f4a5bfd7a8296a3957b13e1c346f42514d"

From b65bade2632656128782d6d925fe32c61069de74 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Thu, 25 Jan 2024 20:52:52 +0100
Subject: [PATCH 070/128] docs(project): update docs for workspaces

---
 README.md                                     |  10 +-
 docs/configuration.md                         |  22 +---
 docs/content-types.md                         |  14 +--
 docs/developer-guidelines.md                  |  12 +--
 docs/features/related-videos.md               |   7 +-
 docs/translations.md                          |  65 ++++++------
 docs/workspaces.md                            | 100 +++++-------------
 .../common/docs}/backend-services.md          |   0
 .../common/docs}/modularization.md            |   8 +-
 platforms/web/.env                            |  17 ++-
 platforms/web/README.md                       |  29 +++++
 .../web/docs}/build-from-source.md            |  58 +++++-----
 platforms/web/docs/developer-guidelines.md    |  50 +++++++++
 {docs => platforms/web/docs}/e2e.md           |   0
 .../web/docs}/easy-deployments.md             |   6 +-
 {docs => platforms/web/docs}/frameworks.md    |   0
 .../web/docs}/initialization-file.md          |  14 +--
 platforms/web/docs/web-configuration.md       |  21 ++++
 18 files changed, 239 insertions(+), 194 deletions(-)
 rename {docs => packages/common/docs}/backend-services.md (100%)
 rename {docs => packages/common/docs}/modularization.md (76%)
 create mode 100644 platforms/web/README.md
 rename {docs => platforms/web/docs}/build-from-source.md (84%)
 create mode 100644 platforms/web/docs/developer-guidelines.md
 rename {docs => platforms/web/docs}/e2e.md (100%)
 rename {docs => platforms/web/docs}/easy-deployments.md (83%)
 rename {docs => platforms/web/docs}/frameworks.md (100%)
 rename {docs => platforms/web/docs}/initialization-file.md (78%)
 create mode 100644 platforms/web/docs/web-configuration.md

diff --git a/README.md b/README.md
index fdad7997b..4f402a895 100644
--- a/README.md
+++ b/README.md
@@ -34,8 +34,8 @@ The JW OTT Webapp is an open-source, dynamically generated video website built a
 - [Configure JW OTT Webapp](./docs/configuration.md)
 - [Configure Translations](./docs/translations.md)
 - [Contributing Guidelines](CONTRIBUTING.md)
-- [Frameworks, SDKs and Libraries](./docs/frameworks.md)
-- [Backend Services](./docs/backend-services.md)
+- [Frameworks, SDKs and Libraries](./platforms/web/docs/frameworks.md)
+- [Backend Services](./packages/common/docs/backend-services.md)
 - [Developer Guidelines](./docs/developer-guidelines.md)
 - [Workspaces](./docs/workspaces.md)
 
@@ -60,12 +60,6 @@ The JW OTT Webapp is an open-source, dynamically generated video website built a
 
 - Self-hosted JW Players
 
-## Getting started
-
-- Clone this repository
-- Run `yarn` to install dependencies
-- Run `yarn start`
-
 ## Support and Bug Reporting
 
 To report bugs and feature requests, or request help using JW OTT Webapp, use this repository's [Issues](https://github.com/jwplayer/ott-web-app/issues) page.
diff --git a/docs/configuration.md b/docs/configuration.md
index 5f9ee4dce..0a6586576 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -1,27 +1,9 @@
 # Configuration
 
-The JW OTT Webapp is designed to consume a json configuration file served by the [JWP Delivery API](https://docs.jwplayer.com/platform/reference/get_apps-configs-config-id-json).
+The JW OTT Webapp is designed to consume a JSON configuration file served by the [JWP Delivery API](https://docs.jwplayer.com/platform/reference/get_apps-configs-config-id-json).
 The easiest way to maintain configuration files is to use the 'Apps' section in your [JWP Dashboard account](https://dashboard.jwplayer.com/).
 
-## Configuration File Source
-
-Which app config file the application uses is determined by the [ini file](initialization-file.md).
-
-You can specify the default that the application starts with and also which config, if any, it will allow to be set using the [`app-config=<config source>` query param](#switching-between-app-configs).
-The location is usually specified by the 8-character ID (i.e. `gnnuzabk`) of the App Config from your JWP account, in which case the file will be loaded from the JW Player App Config delivery endpoint (i.e. `https://cdn.jwplayer.com/apps/configs/gnnuzabk.json`).
-You may also specify a relative or absolute URL.
-
-### Switching between app configs
-
-As mentioned above, if you have 1 or more additional allowed sources (see additionalAllowedConfigSources in [`initialization-file`](initialization-file.md)), you can switch between them by adding `app-config=<config source>` as a query parameter in the web app URL in your browser (i.e. `https://<your domain>/?app-config=gnnuzabk`).
-
-The parameter is automatically evaluated, loaded, and stored in browser session storage and should remain part of the url as the user navigates around the site.
-
-> _Note: Be aware that this mechanism only sets the config for the local machine, browser, and session that you are accessing the site with and it does not change the default hosted app for other users._
-
-Even sharing URL's should work as long as the query parameter of the desired config is part of the URL. However, once the query parameter is removed and the stored value in the session is released, the application will revert to loading the default config source.
-
-> _Note: to clear the value from session storage and return to the default, you can navigate to the site with a blank query parameter value (i.e. `?app-config=`)_
+> See the [web configuration documentation](../platforms/web/docs/web-configuration.md) for configuring the OTT Web App. 
 
 ## Available Configuration Parameters
 
diff --git a/docs/content-types.md b/docs/content-types.md
index 23f0cc7e0..749dff78a 100644
--- a/docs/content-types.md
+++ b/docs/content-types.md
@@ -4,7 +4,7 @@ In order to map data coming from the JWP delivery pipeline to the correct screen
 we use the concept of 'content types'.
 Basically, a content type is simply a custom parameter named 'contentType' on a media item with a value defining which type the media is (movie, trailer, series, etc.)
 
-In the app, content types often map to specific screens (see [screenMapping.ts](../platforms/web/src/screenMapping.ts) and [MediaScreenRouter.tsx](src/pages/ScreenRouting/MediaScreenRouter.tsx).)
+In the app, content types often map to specific screens (see [screenMapping.ts](../platforms/web/src/screenMapping.ts) and [MediaScreenRouter.tsx](../packages/ui-react/src/pages/ScreenRouting/MediaScreenRouter.tsx).)
 Each content type screen often expects different metadata attached to the media item's custom parameters.
 
 # Using content types in the JWP dashboard
@@ -21,22 +21,22 @@ In order to quickly upload the content types, you can use the yarn script includ
 
 `yarn load-content-types --site-id=<site id>`
 
-By default, the script will load the content types that the vanilla web app expects found in [content-types.json](scripts/content-types/content-types.json).
-You can modify this file in your fork of the web app code or optionally specify another file to load by adding a `--source-file=<file path>` param to the yarn script call. 
+By default, the script will load the content types that the vanilla web app expects found in [content-types.json](../scripts/content-types/content-types.json).
+You can modify this file in your fork of the web app code or optionally specify another file to load by adding a `--source-file=<file path>` param to the yarn script call.
 
 ### Content type upload file definition
 
 The upload file should be a json property with the schemas defined as an array on the `schemas` property on the root object.
-Please refer to [content-types.json](scripts/content-types/content-types.json) and the JWP documentation for the schema format.
+Please refer to [content-types.json](../scripts/content-types/content-types.json) and the JWP documentation for the schema format.
 
 To avoid unnecessary duplication the file also allows some basic abstraction.
 You can define reused fields and sections as key-value entries on the `fields` and `sections` properties respectively.
 Then you can include these reusable entities by putting their string key into schemas the same way that you would for inline fields or sections.
-There are many examples in the included [content-types.json](scripts/content-types/content-types.json)
+There are many examples in the included [content-types.json](../scripts/content-types/content-types.json)
 
 > Note: Although the upload file allows you to define reused fields and sections, when these are uploaded they become distinct copies for each instance in the schemas where they are used.
 > That means that changing fields and sections via the api after they are uploaded must be done individually for each schema.
-> Alternatively, you can re-upload and overwrite the existing schemas, but use caution because you will lose any other manual changes you have made.  
+> Alternatively, you can re-upload and overwrite the existing schemas, but use caution because you will lose any other manual changes you have made.
 
 # Content Type Data Structure
 
@@ -44,6 +44,6 @@ Content types do not change the underlying structure of data returned from the J
 
 ## Boolean custom params
 
-Because custom params are always strings and any non-empty string in javascript converts to truthy, we have by convention decided on a few string values to consider strictly true or false. You can find these values in code: https://github.com/jwplayer/ott-web-app/blob/a95c3a3c9d0c5bc7c98b194928261ffc6fc4286f/src/utils/common.ts#L88-L90
+Because custom params are always strings and any non-empty string in javascript converts to truthy, we have by convention decided on a few string values to consider strictly true or false. You can find these values in code: https://github.com/jwplayer/ott-web-app/blob/a95c3a3c9d0c5bc7c98b194928261ffc6fc4286f/src/utils/common.ts#L88
 
 Be careful to use the right version considering the fallback when the value is not matched. For example, if you want the property to only be true when matched and fallback to false, use IsTruthy.
diff --git a/docs/developer-guidelines.md b/docs/developer-guidelines.md
index 2c98923c5..be22aa1af 100644
--- a/docs/developer-guidelines.md
+++ b/docs/developer-guidelines.md
@@ -1,12 +1,12 @@
 ## When working on this project, keep these in mind:
 
-- Use yarn.
-- Run the server through `yarn start` (in the platforms/web directory)
-- Run the e2e tests through `yarn codecept:mobile` and `yarn codecept:desktop` (in the platforms/web directory)
-- Run the tests through `yarn test`
+- Use `yarn`
+- Run all unit tests through `yarn test`
 - Format the code through `yarn format` (or automatically do it via git hooks)
 - Lint through `yarn lint` (eslint, prettier, stylelint and tsc checks)
 - Run `yarn i18next` to extract all translations keys from source-code
+- Run `yarn depcheck` to validating dependency usages for all packages
+- Run `npx syncpack lint` for validating dependency issues for all workspaces
 - The JW organization requires personal access tokens for all of their repositories. In order to create a branch or pull request you'll need to [Generate a Personal Access Token](https://github.com/settings/tokens) and then [store it in your git config](https://stackoverflow.com/questions/46645843/where-to-store-my-git-personal-access-token/67360592). (For token permissions, `repo` should be sufficient).
 
 ## Versioning and Changelog
@@ -60,7 +60,7 @@ Please use one of the following:
 
 The scope must specify the location of the commit change. For example `home` or `search`.
 
-The allowed scopes can be found in the [commitlint config file](../.commitlintrc.js).
+The allowed scopes can be found in the [../.commitlintrc.js](../.commitlintrc.js) file.
 
 ### Subject
 
@@ -87,7 +87,7 @@ The footer should contain any information about **Breaking Changes** and is also
   /_images        - Images used in the docs and README
   /features       - Docs coverage specific product use cases
 /node_modules*    - Yarn generated dependencies
-/packages         - Re-usable code for platfroms (registered in workspace)
+/packages         - Re-usable code for platforms (registered in workspace)
 /platforms        - Platform entry points (registered in workspace)
 /scripts          - Dev helper scripts for i18n, deployment, etc.
 /CHANGELOG.md     - Auto-generated changelog
diff --git a/docs/features/related-videos.md b/docs/features/related-videos.md
index abaf6dabc..323a34f0c 100644
--- a/docs/features/related-videos.md
+++ b/docs/features/related-videos.md
@@ -19,7 +19,7 @@ GET playlists/fuD6TWcf?related_media_id=dwEE1oBP
   "description":"",
   "kind":"FEED",
   "feedid":"fuD6TWcf",
-  "playlist":[
+  "playlist": [
     {
       "title":"Elephants Dream",
       "mediaid":"8pN9r7vd",
@@ -33,9 +33,8 @@ GET playlists/fuD6TWcf?related_media_id=dwEE1oBP
       "rating":"CC-BY",
       "genre":"Drama",
       "trailerId":"EorcUZCU"
-    },
-    {}
-   ]
+    }
+  ]
 }
 ```
 
diff --git a/docs/translations.md b/docs/translations.md
index 01896ecb1..f9a705327 100644
--- a/docs/translations.md
+++ b/docs/translations.md
@@ -6,7 +6,7 @@ Before changing or adding languages, read the sections below to understand the m
 
 ## Translation status
 
-Here is a list of all supported translations included in the OTT Web App. The status indicates if the translations are 
+Here is a list of all supported translations included in the OTT Web App. The status indicates if the translations are
 generated using Google Translate/ChatGTP or validated by a person.
 
 | Language | Code | Status    | Validated by             |
@@ -17,39 +17,42 @@ generated using Google Translate/ChatGTP or validated by a person.
 
 ## Translation files
 
-The web app uses the [react-i18next](https://react.i18next.com/) library for displaying translated strings. Translation 
-files are defined in JSON format and can be found in the `./public/locales` directory. Translation files are separated 
-by namespace.
+The web app uses the [react-i18next](https://react.i18next.com/) library for displaying translated strings. Translation
+files are defined in JSON format and can be found in the `./platforms/web/public/locales` directory. Translation files
+are separated by namespace.
 
-The structure of all translation files is generated automatically using the `yarn i18next` command. This script 
-extracts all namespaces and translation keys from the source code. Refrain from editing the structure (e.g., adding or 
+> The translation files will be moved to the `./packages/i18n` package in the near future.
+
+The structure of all translation files is generated automatically using the `yarn i18next` command. This script
+extracts all namespaces and translation keys from the source code. Refrain from editing the structure (e.g., adding or
 removing keys) of translation files manually because this is prone to mistakes.
 
-To add a new language, create a new subdirectory in the `./public/locales` directory using the language code or 
-LCID string if the language is region specific. For example, using the `fr` language code will be available for all 
-French-speaking regions (e.g., Belgium, Canada, France, Luxembourg, etc.). But if you have different translations for 
-one or more French-speaking regions, use the LCID string (e.g., `fr-be`, `fr-ca`, `fr-lu`, or `fr-fr`) instead of the 
-language code. The downside of this, when having multiple French-speaking regions, a lot of translations will be 
+To add a new language, create a new subdirectory in the `./platforms/web/public/locales` directory using the language
+code or LCID string if the language is region specific. For example, using the `fr` language code will be available for
+all French-speaking regions (e.g., Belgium, Canada, France, Luxembourg, etc.). But if you have different translations
+for one or more French-speaking regions, use the LCID string (e.g., `fr-be`, `fr-ca`, `fr-lu`, or `fr-fr`) instead of
+the language code. The downside of this, when having multiple French-speaking regions, a lot of translations will be
 duplicate.
 
-After adding the subdirectory, run the `yarn i18next` command to generate all the added 
-language(s) translation files. You can now translate each key for the added language(s). 
+After adding the subdirectory, run the `yarn i18next` command to generate all the added
+language(s) translation files. You can now translate each key for the added language(s).
 
 ## Defined languages
 
-When a language is added to the `./public/locales` folder, the OTT Web App doesn't automatically recognize this. 
-Instead, the language must first be added to the "defined languages" list. This is for two reasons:
+When a language is added to the `./platforms/web/public/locales` folder, the OTT Web App doesn't automatically recognize
+this. Instead, the language must first be added to the "defined languages" list. This is for two reasons:
 
 - As OTT Web App we want to be able to include many languages without enabling them all by default
 - For each language, the display name must be defined, which is shown in the language selection menu
 
-Navigate to the [../platforms/web/src/i18n/config.ts](../platforms/web/src/i18n/config.ts) file and find the `DEFINED_LANGUAGES` constant. Each entry specifies the 
-language code (or LCID string) and display name. 
+Navigate to the `./platforms/web/src/i18n/config.ts` file and find the `DEFINED_LANGUAGES` constant. Each entry 
+specifies the language code (or LCID string) and display name.
 
-> If you have added multiple languages using the LCID string identifier, each much be added to the list of defined 
+> If you have added multiple languages using the LCID string identifier, each much be added to the list of defined
 > languages and ensure to include the region in the `displayName`. For example: `Français Canadien`
 
-The `displayName` is always translated for the language it is written for. This ensures that when the current language is 
+The `displayName` is always translated for the language it is written for. This ensures that when the current language
+is
 wrong for the current user, he/her will still be able to recognize the language.
 
 ```ts
@@ -65,23 +68,23 @@ export const DEFINED_LANGUAGES: LanguageDefinition[] = [
 ];
 ```
 
-> You won't have to delete entries with languages that are not supported for your OTT Web App. Instead, don't enable 
-> the language in the app (see the next step). 
+> You won't have to delete entries with languages that are not supported for your OTT Web App. Instead, don't enable
+> the language in the app (see the next step).
 
 ## Enabled languages
 
-Languages can be enabled or disabled by updating the `APP_ENABLED_LANGUAGES` environment variable. This can be changed 
-in the `.env` file or by adding the environment variable to the start/build commands.
+Languages can be enabled or disabled by updating the `APP_ENABLED_LANGUAGES` environment variable. This can be changed
+in the `/platforms/web/.env` file or by adding the environment variable to the start/build commands.
 
-This disables the multilingual feature by only supporting the English language. The language selection icon will be 
+This disables the multilingual feature by only supporting the English language. The language selection icon will be
 hidden in the header.
 
 ```shell
 $ APP_ENABLED_LANGUAGES=en yarn build 
 ```
 
-This builds an OTT Web App supporting the English and French languages. The language selection icon will be shown in 
-the header. 
+This builds an OTT Web App supporting the English and French languages. The language selection icon will be shown in
+the header.
 
 ```shell
 $ APP_ENABLED_LANGUAGES=en,fr yarn build 
@@ -89,14 +92,14 @@ $ APP_ENABLED_LANGUAGES=en,fr yarn build
 
 ## Default language
 
-OTT Web App will try to predict the user language by looking at the Browser language. When the language can't be 
-predicted, or there is no support for the Browser language, the default language will be used. By default, this is set 
+OTT Web App will try to predict the user language by looking at the Browser language. When the language can't be
+predicted, or there is no support for the Browser language, the default language will be used. By default, this is set
 to `en`.
 
-The default language can be changed in the `.env` file as well or by adding the `APP_DEFAULT_LANGUAGE` environment 
-variable to the start/build commands.
+The default language can be changed in the `/platforms/web/.env` file as well or by adding the `APP_DEFAULT_LANGUAGE` 
+environment variable to the start/build commands.
 
-Build an OTT Web App with English and French translations, but default to French when the language couldn't be 
+Build an OTT Web App with English and French translations, but default to French when the language couldn't be
 predicted.
 
 ```shell
diff --git a/docs/workspaces.md b/docs/workspaces.md
index 02ed7f926..8b5a28b32 100644
--- a/docs/workspaces.md
+++ b/docs/workspaces.md
@@ -4,42 +4,41 @@
 
 The JW OTT Web App is an open-source repository that showcases an OTT app implementing JWP services. The OTT Web App, as
 the name implies, originates as a web only repository. But much of the source-code can be re-used for many different
-platforms, like Capacitor, React Native, and other frameworks based on TypeScript.
+platforms, such as CapacitorJS, React Native, LightningJS and other frameworks based on TypeScript.
 
 Using the previous codebase, it would be quite challenging to re-use the services because of the dependencies and
 browser usage. For example, the AccountController could redirect a user to a different page by using `window.location`.
-This will never work in a non-browser environment and will most likely crash the app.
+This will never work in a non-browser environment and will crash the app.
 
 This means that we need to:
 
-- Make most of the shareable code platform-agnostic
-- Make most of the shareable code framework-agnostic
+- Make some of the shareable code platform-agnostic
+- Make some of the shareable code framework-agnostic
 - Make importing services, controllers, stores, and utils possible in any other projects/platforms
 - Benefit from linting based on the environment (Node, Browser, Vite, ...)
-- Easy linking of packages/dependencies
 
 ## The solution
 
-Based on the re-usability of parts of the existing codebase, we've created separate packages using Yarn Workspaces.
+Based on the re-usability of parts of the existing codebase, we've created separate modules using Yarn Workspaces.
 This will combine all similar code and prevent installing redundant or conflicting dependencies.
 
-For example, all components, containers, and pages are be combined into the `packages/ui-react` package, which depends
-on react and react-dom. To create a React Native app, you could add an `packages/ui-react-native` package and configure
-aliases to use the correct package.
+For example, all components, containers, and pages are combined into the `packages/ui-react` module, which depends on
+react and react-dom. To create a React Native app, you could add a `packages/ui-react-native` module and configure
+aliases to use the correct module.
 
 ## Packages & Platforms
 
 A split has been made between the platform and reusable code. All reusable code is further split into multiple packages.
-This is mostly to separate the React from the non-react code.
+This is mostly done to separate the React from the non-react code.
 
-Here is a breakdown of each package:
+Here is a breakdown of each module:
 
 ### Common
 
 Name: `@jwp/ott-common`
 
-The common package contains all non-react TypeScript code reusable between multiple frameworks. These are controllers,
-services, stores, utilities, and typings. There should be no platform-specific dependencies like React or React DOM.
+The common module contains all non-react TypeScript code, reusable between multiple frameworks. These are controllers,
+services, stores, utilities and typings. There should be no platform-specific dependencies like React or React DOM.
 
 Typings can also be reused for multiple frameworks.
 
@@ -61,9 +60,9 @@ configureEnv({
 Name: `@jwp/ott-hooks-react`
 
 Hooks are special because they are React-dependent but can be shared between the React and React Native frameworks.
-That’s why they are in a separate folder for use between the two frameworks.
+That’s why they are in a separate folder for usage from both the two frameworks.
 
-### I18n (TODO)
+### i18n (TODO)
 
 Name: `@jwp/ott-i18n`
 
@@ -74,7 +73,7 @@ files between all platforms.
 
 Name: `@jwp/ott-testing`
 
-This package contains all test fixtures and could contain some generic test utils. But it shouldn’t contain
+This module can contain all test fixtures and perhaps some generic test utils. But it shouldn’t contain
 CodeceptJS/Playwright-specific code.
 
 ### Theme (TODO)
@@ -93,7 +92,7 @@ The theme folder also contains generic assets like images, logos, and fonts.
 Name: `@jwp/ott-ui-react`
 
 The ui-react package contains all the existing React UI code.
-The ui-react package also contains the SCSS variables and theme for use across more platforms.
+The ui-react package also contains the SCSS variables and theme for usage across multiple platforms.
 
 ### Platforms/web
 
@@ -105,25 +104,25 @@ bootstrapping the app.
 
 We can add more platforms by adding a folder to the platforms folder.
 
-Each platform is a standalone application that may use other packages defined in the packages folder as dependency.
+Each platform is a standalone application that may use other modules defined in the packages folder as dependencies.
 
-### Configs
+### Eslint, PostCSS and Stylelint
 
-The configs directory contains packages that are used mainly for configuring common build tools. This ensures these
-configurations are aligned between the different application packages in the `packages/*` and `platforms/*` folder.
+Besides the mentioned packages there are also three utility packages listed in the packages folder. These utility
+packages exist to align linting dependencies and configuration between the different packages.
 
-Since most application packages depend on ESLint and use the same configuration, the recommended way of doing this in a
-monorepo is by creating a local package of the eslint config.
+All packages depend on Eslint and need a configuration. The recommended way of doing this in a monorepo is by creating
+a local package.
 
 **eslint-config-jwp**
 
-This is the ESLint config for React or TypeScript packages. Usage:
+This is the Eslint config for React or TypeScript packages. Usage:
 
 **.eslintrc.js**
 
 ```js
 module.exports = {
-  extends: ['jwp/typescript'], // extends: ['jwp/react'], 
+  extends: ['jwp/typescript'], // extends: ['jwp/react'],
 };
 ```
 
@@ -148,54 +147,3 @@ module.exports = {
   extends: ['stylelint-config-jwp'],
 };
 ```
-
-## Tips when working with workspaces
-
-### Setup
-
-You can set up the OTT Web App repository by following
-the [Building from source](./build-from-source.md#build-the-jw-ott-webapp) documentation.
-
-All packages are automatically linked and can be used from source. This prevents us from needing to compile each
-package while developing.
-
-### Developing
-
-While developing the web platform, you want to cd to the `platforms/web` directory first.
-
-```shell
-cd platforms/web
-```
-
-This directory contains most of the "old" scripts that were available in the package.json.
-
-### Dependency validation
-
-Because there are multiple package.json files, you can use [syncpack](https://www.npmjs.com/package/syncpack) to lint
-and align the dependencies. This package is not a dependency, but can be used with the NPX from the root directory.
-
-Lint package.json files based on the syncpack config.
-
-```shell
-npx syncpack lint
-```
-
-Organize package.json files automatically based on the syncpack config.
-
-```shell
-npx syncpack format
-```
-
-### TypeScript config
-
-Because most of the packages use TypeScript a [tsconfig.base.json](../tsconfig.base.json) file is found in the root.
-Most packages extend this tsconfig file and make the changes accordingly for the package.
-
-For example, the [tsconfig](../packages/common/tsconfig.json) in the common package overrides the `compilerOptions#lib`
-property to disallow browser globals.
-
-Another example is the [tsconfig](../packages/ui-react/tsconfig.json) in the ui-react package which extends Vite typings
-and ensures SCSS modules are typed as well.  
-
-
-
diff --git a/docs/backend-services.md b/packages/common/docs/backend-services.md
similarity index 100%
rename from docs/backend-services.md
rename to packages/common/docs/backend-services.md
diff --git a/docs/modularization.md b/packages/common/docs/modularization.md
similarity index 76%
rename from docs/modularization.md
rename to packages/common/docs/modularization.md
index 198beaf0e..5aaf93551 100644
--- a/docs/modularization.md
+++ b/packages/common/docs/modularization.md
@@ -42,11 +42,11 @@ This is the price we need to pay to remove `inject` decorators from the construc
 
 ## Initialization
 
-We use [register](../platforms/web/src/modules/register.ts) function to initialize services and controllers. Some services don't depend on any integration provider (like `ConfigService` or `EpgService`), while such services as `CleengAccountService` or `InplayerAccountService` depend on the provider and get injected into controllers conditionally based on the `INTEGRATION_TYPE` dynamic value (`JWP` or `CLEENG`).
+We use [register](../src/modules/register.ts) function to initialize services and controllers. Some services don't depend on any integration provider (like `ConfigService` or `EpgService`), while such services as `CleengAccountService` or `InplayerAccountService` depend on the provider and get injected into controllers conditionally based on the `INTEGRATION_TYPE` dynamic value (`JWP` or `CLEENG`).
 
-Initialization starts in the [index.tsx](../platforms/web/src/index.tsx) file where we register services. We do it outside of the react component to make services available in different parts of the application.
+Initialization starts in the platform index.tsx file where we register services. We do it outside the React component to make services available in different parts of the application.
 
-The app is loaded in the [useBootstrapApp](../packages/hooks-react/src/useBootstrapApp.ts) hook with the help of the `AppController` which is responsible for retrieving data from the Config and Settings services, initializing the initial state of the application and hitting init methods of the base app's controllers.
+The app is loaded in the [useBootstrapApp](../src/hooks/useBootstrapApp.ts) hook with the help of the `AppController` which is responsible for retrieving data from the Config and Settings services, initializing the initial state of the application and hitting init methods of the base app's controllers.
 
 ## Controllers and Services
 
@@ -82,6 +82,6 @@ Controllers bind different parts of the application. Controllers use services, s
 
 ### Controllers / Services retrieval
 
-To get access to the service / controller [getModule](../packages/common/src/modules/container.ts) utility can be used. It also accepts a `required` param which can be used in case the presence of the service is optional. If `required` is provided but service itself is not bound then the error will be thrown.
+To get access to the service / controller [getModule](../src/modules/container.ts) utility can be used. It also accepts a `required` param which can be used in case the presence of the service is optional. If `required` is provided but service itself is not bound then the error will be thrown.
 
 `getNamedModule` function is mostly use in controllers to retrieve integration-specific services, like AccountService or CheckoutService.
diff --git a/platforms/web/.env b/platforms/web/.env
index eb0bc9bd0..fb9ab08f5 100644
--- a/platforms/web/.env
+++ b/platforms/web/.env
@@ -1,9 +1,22 @@
 APP_API_BASE_URL=https://cdn.jwplayer.com
 APP_PLAYER_ID=M4qoGvUk
 
-### Web-only env vars (not sent to common/src/env configureEnv())
+# page metadata (SEO)
+#APP_NAME=
+#APP_SHORT_NAME=
+#APP_DESCRIPTION
+
+# UI configuration
 APP_VERSION=$npm_package_version
-APP_FOOTER_TEXT=\u00a9 JW Player | [jwplayer.com](https://www.jwplayer.com/) | v${APP_VERSION}
+APP_FOOTER_TEXT="\u00a9 JW Player | [jwplayer.com](https://www.jwplayer.com/) | v${APP_VERSION}"
+
+# config for Google Services
+#APP_GTM_TAG_ID
+#APP_GOOGLE_SITE_VERIFICATION_ID
+
+# override with custom fonts. supports Google Fonts (eg. APP_BODY_FONT_FAMILY=google:Roboto,system:Verdana - use Roboto and fallback to Verdana)
+#APP_BODY_FONT_FAMILY
+#APP_BODY_ALT_FONT_FAMILY
 
 # the default language that the app should load when the language couldn't be detected
 APP_DEFAULT_LANGUAGE=en
diff --git a/platforms/web/README.md b/platforms/web/README.md
new file mode 100644
index 000000000..06864c9ab
--- /dev/null
+++ b/platforms/web/README.md
@@ -0,0 +1,29 @@
+# OTT Web App
+
+## Getting started
+
+- Clone this repository
+- Run `yarn` to install dependencies
+- Navigate to the platform directory `cd platforms/web`
+- Run unit tests through `yarn test`
+- Format the code through `yarn format` (or automatically do it via git hooks)
+- Lint through `yarn lint` (eslint, prettier, stylelint and tsc checks)
+- Run `yarn start`
+
+## Create favicons / pwa icons
+
+First override the source icon with another image here [./public/images/icons/app-icon.png`](./public/images/icons/app-icon.png)
+Use a high quality image square-sized image. We suggest a dimension 1024x1024 or higher
+
+- Navigate to the platform directory `cd platforms/web`
+- Perform `yarn generate-pwa-assets`
+
+Instal `sharp` if you get the following error: Could not load the "sharp" module using the ... runtime.
+And run `yarn generate-pwa-assets` afterwards
+
+The different icon formats are defined here [pwa-assets.config.ts](./pwa-assets.config.ts)
+
+## Developer guidelines
+
+- Read the workspace guidelines here [../../docs/developer-guidelines.md](../../docs/developer-guidelines.md).
+- Read the web platform guidelines here [./docs/developer-guidelines.md](./docs/developer-guidelines.md).
diff --git a/docs/build-from-source.md b/platforms/web/docs/build-from-source.md
similarity index 84%
rename from docs/build-from-source.md
rename to platforms/web/docs/build-from-source.md
index 0840fd76c..ccab5f76d 100644
--- a/docs/build-from-source.md
+++ b/platforms/web/docs/build-from-source.md
@@ -13,39 +13,45 @@ The following tools are needed to start building JW OTT Webapp. Follow the instr
 ## Build the JW OTT Webapp
 
 1. Clone the **ott-web-app** repository on your local machine.
-   ```shell
-   $ cd ~/
-   
-   $ git clone https://github.com/jwplayer/ott-web-app.git
-   $ cd ott-web-app
-   ```
+
+```shell
+$ cd ~/
+
+$ git clone https://github.com/jwplayer/ott-web-app.git
+$ cd ott-web-app
+```
+
 2. Install the required dependencies. Optional dependencies include packages that are not necessary to build the project. These optional dependencies can be safely ignored.
-   ```shell
-   $ yarn --ignore-optional
-   ```
-   > **NOTE**: Some of the [easy deployments](easy-deployments.md) instructions require installing these optional dependencies. Use the `yarn` command to install all dependencies. The `yarn` command can be run even if `yarn --ignore-optional` has been previously run.
+
+```shell
+$ yarn --ignore-optional
+```
+
+> **NOTE**: Some of the [easy deployments](easy-deployments.md) instructions require installing these optional dependencies. Use the `yarn` command to install all dependencies. The `yarn` command can be run even if `yarn --ignore-optional` has been previously run.
 
 3. Create or update the .ini files in `/platforms/web/ini` for the modes you will be running in (probably dev and prod).
    You can copy the ini file from `/platforms/web/ini/templates` into `/platforms/web/ini`. The files in `/platforms/web/ini` are git-ignored, so you do not need to worry about account values in source control, but you will need to recreate the ini files each time you make a fresh checkout of the repository.
 
+   The .ini files provide startup values to the application such as which app config to load by default. See [initialization-file](initialization-file.md) for more details.
+
 4. Start the local development server.
 
-   ```shell
-   $ cd platforms/web
-   $ yarn start
-   ```
-   
-   If you encounter any errors, make sure you have correctly set the `defaultConfigSource` in `/platforms/web/ini/.webapp.dev.ini` to point to a valid app config from your JWP account.
-   
-   > **NOTE:** Only use the development server for development purposes. The development server is not optimized for production usage.
+```shell
+$ cd platforms/web
+$ yarn start
+```
+
+If you encounter any errors, make sure you have correctly set the `defaultConfigSource` in `/platforms/web/ini/.webapp.dev.ini` to point to a valid app config from your JWP account.
+
+> **NOTE:** Only use the development server for development purposes. The development server is not optimized for production usage.
 
 5. Build a deployable version of the JW OTT Webapp source code.<br /><br />This command creates a new folder in the projects root folder named **build**.
    The `public` folder from the build directory can be uploaded to any static hosting provider to run the web app from that host.
 
-   ```shell
-   $ cd platforms/web
-   $ yarn build
-   ```
+```shell
+$ cd platforms/web
+$ yarn build
+```
 
 If you have not made any changes to the JW OTT Webapp configuration or source code, changes can now be made. Be sure to run the `yarn build` command after making any changes.
 
@@ -72,16 +78,16 @@ Production builds optimize code and minimize debug information, while developmen
 ## Env Variables
 
 To allow for adjustments to be made at compile time, there are several env variables that get replaced during [vite compile](https://vitejs.dev/guide/env-and-mode.html#env-variables).
-These values are then de facto constants, which means code optimizations can remove unused code such as if/else checks using them.
+These values are then defacto constants, which means code optimizations can remove unused code such as if/else checks using them.
 
 For non-sensitive values, you can add them directly to the appropriate .env file for each mode.
 
-For sensitive values, if building with GitHub actions we recommend using [GitHub secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) and setting them in the [build action environment](https://docs.github.com/en/actions/learn-github-actions/variables).
+For sensitive values, if building with github actions we recommend using [github secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) and setting them in the [build action environment](https://docs.github.com/en/actions/learn-github-actions/variables).
 You can see an example of how these are used in our [Firebase Live / Preview actions.](https://github.com/jwplayer/ott-web-app/blob/develop/.github/workflows/firebase-live.yml#L14)
 
 If building manually, you can create an .env.[mode].local file and add the values there. These files are git ignored which will prevent leaking your secrets to version control.
 
-> Note: env variables must begin with the 'APP_' prefix. or they are ignored by our vite configuration.
+> Note: env variables must begin with the 'APP\_' prefix or they are ignored by our vite configuration.
 
 ### APP_DEFAULT_CONFIG_SOURCE
 
@@ -111,7 +117,7 @@ The value to use can be found labeled 'License Key' in the 'Self-Hosted Web Play
 
 If you link directly to your JWP cloud player using the [APP_PLAYER_ID](#app_player_id) environment variable or the [playerId ini setting](initialization-file.md#playerid), you do not need to provide a value for `APP_PLAYER_LICENSE_KEY`.
 
-It is recommended that this value be provided via a .env.local file or a GitHub secret to avoid saving it in version control.
+It is recommended that this value be provided via a .env.local file or a github secret to avoid saving it in version control.
 
 If you are using pre-compiled builds instead of building the code yourself, you can also set this value with the [playerLicenseKey ini setting](initialization-file.md#playerLicenseKey).
 Keep in mind, if the [playerLicenseKey ini setting](initialization-file.md#playerLicenseKey) is provided, it will be used even if the `APP_PLAYER_LICENSE_KEY` environment variable is set.
diff --git a/platforms/web/docs/developer-guidelines.md b/platforms/web/docs/developer-guidelines.md
new file mode 100644
index 000000000..d03257ba5
--- /dev/null
+++ b/platforms/web/docs/developer-guidelines.md
@@ -0,0 +1,50 @@
+# Developer guidelines
+
+## When working on this project, keep these in mind:
+
+- Use `yarn`
+- Run unit tests through `yarn test`
+- Format the code through `yarn format` (or automatically do it via git hooks)
+- Lint through `yarn lint` (eslint, prettier, stylelint and tsc checks)
+- Run `yarn i18next` from the workspace root to extract all translations keys from source-code
+- Run `yarn depcheck` from the workspace root to validating dependency usages for all packages
+- Run `npx syncpack lint` from the workspace root for validating dependency issues for all workspaces
+
+## Project Structure
+
+```
+/build*           - Directory where the code is compiled by `yarn build`
+/coverage*        - Location of the C8 coverage report
+/docs             - Documentation
+/ini              - Directory to group different initialization files
+  /templates      - Template .ini files per mode
+/node_modules*    - Yarn generated dependencies
+/public           - Static files to be hosted with the application
+/scripts          - Dev helper scripts for deployment, etc.
+/src              - Source code for the application
+  /components     - Reusable, side-effect free UI components
+  /containers     - UI Containers
+  /hooks          - Custom React hooks
+  /i18n           - Internationalization tools
+  /modules        - Container registry for IoC
+  /services       - Services which connects external data sources to the application
+  /styles         - Global SCSS rules, theming and variables
+  /utils          - Utility functions
+  /App.tsx        - The main React component which renders the app
+  /constants.ts   - Re-usable TypeScript constants 
+  /index.tsx      - The entrypoint
+/test             - Data and scripts for unit and e2e testing
+/test-cases       - Test cases written in cucumber format
+/test-e2e         - End to end tests and scripts
+/types            - Global type definitions
+/.env<.mode>      - Environment variables for different Vite modes
+/firebase.json    - Config for firebase static hosting
+/index.html       - Main html file entrypoint for the application
+/package.json     - Yarn file for dependencies and scripts
+/vite.config.ts   - Vite build and test configuration file
+
+* = Generated directories, not in source control
+
+Note: Some system and util files are not shown above for brevity.
+You probably won't need to mess with anything not shown here.
+```
diff --git a/docs/e2e.md b/platforms/web/docs/e2e.md
similarity index 100%
rename from docs/e2e.md
rename to platforms/web/docs/e2e.md
diff --git a/docs/easy-deployments.md b/platforms/web/docs/easy-deployments.md
similarity index 83%
rename from docs/easy-deployments.md
rename to platforms/web/docs/easy-deployments.md
index faf0f630a..41044211b 100644
--- a/docs/easy-deployments.md
+++ b/platforms/web/docs/easy-deployments.md
@@ -5,7 +5,7 @@ The instructions in this document will help you deploy your fork of the ott-web-
 ## Prerequisites
 
 1. [Fork this repo](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
-2. Follow the instructions in [docs/build-from-source.md](build-from-source.md).
+2. Follow the instructions in [./build-from-source.md](./build-from-source.md).
 
 ## Supported Platforms
 
@@ -19,8 +19,8 @@ Firebase has both [free and paid plans](https://firebase.google.com/pricing). Th
 
 #### Usage Instructions
 
-First, in your fork, you will need to update the project ID in [.firebaserc](../platforms/web/.firebaserc).
+First, in your fork, you will need to update the project ID in [../.firebaserc](../.firebaserc).
 
-The easiest way to deploy is to use the [Firebase-Github integration](https://firebase.google.com/docs/hosting/github-integration). You can find the action [.yml specifications here](https://github.com/marketplace/actions/deploy-to-firebase-hosting) to deploy to a preview channel for each PR and to the live channel for each merge to your main branch. If you want to manually set up the work, you can find those instructions [here](https://github.com/FirebaseExtended/action-hosting-deploy/blob/main/docs/service-account.md).
+The easiest way to deploy is to use the [Firebase-Github integration](https://firebase.google.com/docs/hosting/github-integration). You can find the action [.yml specifications here](https://github.com/marketplace/actions/deploy-to-firebase-hosting) to deploy to a preview channel for each PR and to the live channel for each merge to your main branch. If you want to manually setup the work, you can find those instructions [here](https://github.com/FirebaseExtended/action-hosting-deploy/blob/main/docs/service-account.md).
 
 You can also manually deploy using the Firebase CLI, as described [here](https://firebase.google.com/docs/hosting/quickstart).
diff --git a/docs/frameworks.md b/platforms/web/docs/frameworks.md
similarity index 100%
rename from docs/frameworks.md
rename to platforms/web/docs/frameworks.md
diff --git a/docs/initialization-file.md b/platforms/web/docs/initialization-file.md
similarity index 78%
rename from docs/initialization-file.md
rename to platforms/web/docs/initialization-file.md
index 5826605d4..cea4161fe 100644
--- a/docs/initialization-file.md
+++ b/platforms/web/docs/initialization-file.md
@@ -2,11 +2,11 @@
 
 The JW OTT Web App loads a small initialization (.ini) file at startup. This file provides a mechanism to set key startup parameters without modifying the source code.
 Template ini files are included in the repo and with the pre-compiled production release builds ([.webapp.prod.ini](/web/ini/templates/.webapp.prod.ini)).
-Make sure you include a copy of the ini file edited to include your account data at `platforms/web/public/.webapp.ini` for the application to load correctly.
+Make sure you include a copy of the ini file edited to include your account data at `/public/.webapp.ini` for the application to load correctly.
 
-For all manual builds (`yarn start` or `yarn build`), the ini file is copied from `platforms/web/ini/.webapp.<mode>.ini` to `platforms/web/build/public/.webapp.ini`, which the application fetches and parses at startup. For production builds, the ini file is stripped of comments and extra whitespace.
-If a file doesn't exist in /ini/.webapp.<mode>.ini, then the template file will first be copied from [`platforms/web/ini/templates`](../platforms/web/ini/templates).
-All .ini files directly inside of `platforms/web/ini` are ignored in git, so you can create your own files locally to run the application with your account parameters without creating conflicts with committed code or leaking your details into source control.
+For all manual builds (`yarn start` or `yarn build`), the ini file is copied from `/ini/.webapp.<mode>.ini` to `build/public/.webapp.ini`, which the application fetches and parses at startup. For production builds, the ini file is stripped of comments and extra whitespace.
+If a file doesn't exist in /ini/.webapp.<mode>.ini, then the template file will first be copied from [`/ini/templates`](/web/ini/templates).
+All the .ini files directly inside of `/ini` are ignored in git, so you can create your own files locally to run the application with your account parameters without creating conflicts with committed code or leaking your details into source control.
 
 ## Ini Parameters
 
@@ -45,12 +45,12 @@ Keep in mind, if the playerLicenseKey ini setting is provided, it will be used e
 
 ### additionalAllowedConfigSources[]
 
-An array of 8-character IDs (entered 1 per line) for app configs in your JWP account (or url paths) that can be used with the [`app-config=<config source>` query param](configuration.md#switching-between-app-configs).
-This may be useful for example if you have a staging or experimental config that you want to be able to test on your site using the [`app-config` query parameter](configuration.md#switching-between-app-configs) without changing the default config that the application loads with for all of your users.
+An array of 8-character IDs (entered 1 per line) for app configs in your JWP account (or url paths) that can be used with the [`app-config=<config source>` query param](web-configuration#switching-between-app-configs).
+This may be useful for example if you have a staging or experimental config that you want to be able to test on your site using the [`app-config` query parameter](web-configuration#switching-between-app-configs) without changing the default config that the application loads with for all of your users.
 See [.webapp.test.ini](/web/ini/templates/.webapp.test.ini) for an example.
 
 ### UNSAFE_allowAnyConfigSource
 
-Boolean flag which when true, enables **ANY** 8-character app config ID (or path) to be specified with the [`app-config=<config source>` query param](configuration.md#switching-between-app-configs).
+Boolean flag which if true, enables **ANY** 8-character app config ID (or path) to be specified with the [`app-config=<config source>` query param](web-configuration#switching-between-app-configs).
 
 > _**Warning:** Generally the `UNSAFE_allowAnyConfigSource` option should only be used for dev, test, or demo deployments, because it will allow anyone to create URL's that specify any config to be displayed on your domain._
diff --git a/platforms/web/docs/web-configuration.md b/platforms/web/docs/web-configuration.md
new file mode 100644
index 000000000..5db53a1ec
--- /dev/null
+++ b/platforms/web/docs/web-configuration.md
@@ -0,0 +1,21 @@
+# Web configuration
+
+## Configuration File Source
+
+Which app config file the application uses is determined by the [ini file](../platforms/web/docs/initialization-file.md).
+
+You can specify the default that the application starts with and also which config, if any, it will allow to be set using the [`app-config=<config source>` query param](#switching-between-app-configs).
+The location is usually specified by the 8-character ID (i.e. `gnnuzabk`) of the App Config from your JWP account, in which case the file will be loaded from the JW Player App Config delivery endpoint (i.e. `https://cdn.jwplayer.com/apps/configs/gnnuzabk.json`).
+You may also specify a relative or absolute URL.
+
+### Switching between app configs
+
+As mentioned above, if you have 1 or more additional allowed sources (see additionalAllowedConfigSources in [`initialization-file`](initialization-file.md)), you can switch between them by adding `app-config=<config source>` as a query parameter in the web app URL in your browser (i.e. `https://<your domain>/?app-config=gnnuzabk`).
+
+The parameter is automatically evaluated, loaded, and stored in browser session storage and should remain part of the url as the user navigates around the site.
+
+> _Note: Be aware that this mechanism only sets the config for the local machine, browser, and session that you are accessing the site with and it does not change the default hosted app for other users._
+
+Even sharing URL's should work as long as the query parameter of the desired config is part of the URL. However, once the query parameter is removed and the stored value in the session is released, the application will revert to loading the default config source.
+
+> _Note: to clear the value from session storage and return to the default, you can navigate to the site with a blank query parameter value (i.e. `?app-config=`)_

From 4faaeef38502f929b8cb9810c2ddd50c9b692d36 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 19 Mar 2024 22:10:14 +0100
Subject: [PATCH 071/128] docs: spellcheck and fix feedback

---
 README.md                                  |  50 +++++++---
 docs/configuration.md                      | 106 ++++++++++++++-------
 docs/content-types.md                      |   6 +-
 docs/developer-guidelines.md               |  13 ++-
 docs/translations.md                       |   8 +-
 docs/workspaces.md                         |  20 ++--
 package.json                               |   3 +-
 packages/common/docs/backend-services.md   |  60 ++++++------
 packages/common/docs/modularization.md     |  61 ++++++++----
 platforms/web/README.md                    |   6 +-
 platforms/web/docs/build-from-source.md    |   4 +-
 platforms/web/docs/developer-guidelines.md |  59 ++++++------
 platforms/web/docs/e2e.md                  |   8 +-
 platforms/web/docs/initialization-file.md  |  15 ++-
 platforms/web/docs/web-configuration.md    |  10 +-
 15 files changed, 268 insertions(+), 161 deletions(-)

diff --git a/README.md b/README.md
index 4f402a895..de3f9da99 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,7 @@
 ![JW OTT Webapp](docs/_images/homepage-screenshot.png)
 
-The JW OTT Webapp is an open-source, dynamically generated video website built around JW Player and JW Platform services. It enables you to easily publish your JW Player-hosted video content with no coding and minimal configuration.
+The JW OTT Webapp is an open-source, dynamically generated video website built around JW Player and JW Platform
+services. It enables you to easily publish your JW Player-hosted video content with no coding and minimal configuration.
 
 **Examples of JW OTT Webapp in action:**
 
@@ -41,17 +42,30 @@ The JW OTT Webapp is an open-source, dynamically generated video website built a
 
 ## Supported Features
 
-- Works with any JW Player edition, from Free to Enterprise (note that usage will count against your monthly JW streaming limits). Only cloud-hosted JW Players are supported.
-- It looks great on any device. The responsive UI automatically optimizes itself for desktop, tablet, and mobile screens.
-- Populates your site's media content using JSON feeds. If you are using JW Platform, this happens auto-magically based on playlists that you specify. Using feeds from other sources will require you to hack the source code.
+- Works with any JW Player edition, from Free to Enterprise (note that usage will count against your monthly JW
+  streaming limits). Only cloud-hosted JW Players are supported.
+- It looks great on any device. The responsive UI automatically optimizes itself for desktop, tablet, and mobile
+  screens.
+- Populates your site's media content using JSON feeds. If you are using JW Platform, this happens auto-magically based
+  on playlists that you specify. Using feeds from other sources will require you to hack the source code.
 - Video titles, descriptions and hero images are populated from JW Platform JSON feed metadata.
-- Playback of HLS video content from the JW Platform CDN. You can add external URLs (for example, URLS from your own server or CDN) to your playlists in the Content section of your JW Player account dashboard, but they must be HLS streams (`.m3u8` files).
+- Playback of HLS video content from the JW Platform CDN. You can add external URLs (for example, URLS from your own
+  server or CDN) to your playlists in the Content section of your JW Player account dashboard, but they must be HLS
+  streams (`.m3u8` files).
 - Support for live video streams (must be registered as external .m3u8 URLs in your JW Dashboard).
-- Customize the user interface with your own branding. The default app is configured for JW Player branding and content, but you can easily change this to use your own assets by modifying the `config.json` file. Advanced customization is possible (for example, editing the CSS files), but you will need to modify the source code and [build from source](docs/build-from-source.md).
-- Site-wide video search and related video recommendations powered by [JW Recommendations](https://docs.jwplayer.com/platform/docs/vdh-create-a-recommendations-playlist).
+- Customize the user interface with your own branding. The default app is configured for JW Player branding and content,
+  but you can easily change this to use your own assets by modifying the `config.json` file. Advanced customization is
+  possible (for example, editing the CSS files), but you will need to modify the source code
+  and [build from source](docs/build-from-source.md).
+- Site-wide video search and related video recommendations powered
+  by [JW Recommendations](https://docs.jwplayer.com/platform/docs/vdh-create-a-recommendations-playlist).
 - Basic playback analytics is reported to your JW Dashboard.
-- Ad integrations (VAST, VPAID, GoogleIMA, etc.). These features require a JW Player Ads Edition license. For more information, see the [JW Player pricing page](https://www.jwplayer.com/pricing/).
-- A "Favorites" feature for users to save videos for watching later. A separate list for "Continue Watching" is also kept so users can resume watching videos from where they left off. The lists are per-browser at this time (i.e., lists do not sync across user's browsers or devices). The "Continue Watching" list can be disabled in your JW OTT Webapp's `config.json` file.
+- Ad integrations (VAST, VPAID, GoogleIMA, etc.). These features require a JW Player Ads Edition license. For more
+  information, see the [JW Player pricing page](https://www.jwplayer.com/pricing/).
+- A "Favorites" feature for users to save videos for watching later. A separate list for "Continue Watching" is also
+  kept so users can resume watching videos from where they left off. The lists are per-browser at this time (i.e., lists
+  do not sync across user's browsers or devices). The "Continue Watching" list can be disabled in your JW OTT
+  Webapp's `config.json` file.
 - A grid view for a particular playlist of videos, with the ability to deep-link to the playlist through a static URL.
 - Social sharing options using the device native sharing dialog.
 - 24x7 live channel(s) screen with Electronic Programming Guide (EPG) view.
@@ -60,10 +74,24 @@ The JW OTT Webapp is an open-source, dynamically generated video website built a
 
 - Self-hosted JW Players
 
+## Getting started
+
+The easiest way to get the OTT Web App running on your machine, use the following commands:
+
+```shell
+$ yarn
+$ yarn web start
+```
+
+These commands will install all dependencies and start a dev server serving the web app. Read
+the [full documentation](./platforms/web/README.md) for more information about the web app.
+
 ## Support and Bug Reporting
 
-To report bugs and feature requests, or request help using JW OTT Webapp, use this repository's [Issues](https://github.com/jwplayer/ott-web-app/issues) page.
+To report bugs and feature requests, or request help using JW OTT Webapp, use this
+repository's [Issues](https://github.com/jwplayer/ott-web-app/issues) page.
 
 ## Software License
 
-This project is licensed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0). See [LICENSE.txt](LICENSE.txt) for more details.
+This project is licensed under the [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0).
+See [LICENSE.txt](LICENSE.txt) for more details.
diff --git a/docs/configuration.md b/docs/configuration.md
index 0a6586576..0413dce0d 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -1,9 +1,11 @@
 # Configuration
 
-The JW OTT Webapp is designed to consume a JSON configuration file served by the [JWP Delivery API](https://docs.jwplayer.com/platform/reference/get_apps-configs-config-id-json).
-The easiest way to maintain configuration files is to use the 'Apps' section in your [JWP Dashboard account](https://dashboard.jwplayer.com/).
+The JW OTT Webapp is designed to consume a JSON configuration file served by
+the [JWP Delivery API](https://docs.jwplayer.com/platform/reference/get_apps-configs-config-id-json).
+The easiest way to maintain configuration files is to use the 'Apps' section in
+your [JWP Dashboard account](https://dashboard.jwplayer.com/).
 
-> See the [web configuration documentation](../platforms/web/docs/web-configuration.md) for configuring the OTT Web App. 
+> See the [web configuration documentation](../platforms/web/docs/web-configuration.md) for configuring the OTT Web App.
 
 ## Available Configuration Parameters
 
@@ -11,13 +13,15 @@ These are the available configuration parameters for the JW OTT Webapp's config.
 
 **siteName**
 
-Title of your website. JW OTT Webapp will automatically update the `<title>` tag of your site to this value when the site loads. If **siteName** is not set, the default name `My OTT Application` will be used.
+Title of your website. JW OTT Webapp will automatically update the `<title>` tag of your site to this value when the
+site loads. If **siteName** is not set, the default name `My OTT Application` will be used.
 
 ---
 
 **description**
 
-Short description of your website. JW OTT Webapp will automatically update the `<meta name='description'>` tag in your site to this value, which can help to improve your site's search engine performance.
+Short description of your website. JW OTT Webapp will automatically update the `<meta name='description'>` tag in your
+site to this value, which can help to improve your site's search engine performance.
 
 ---
 
@@ -62,7 +66,8 @@ The label is what the user sees in the header and sidebar.
 
 **menu[].contentId**
 
-The eight-character Playlists IDs from the JW Player dashboard. These IDs populate the grid when the user navigates to the given screen.
+The eight-character Playlists IDs from the JW Player dashboard. These IDs populate the grid when the user navigates to
+the given screen.
 
 ---
 
@@ -74,7 +79,9 @@ You can optionally define a list of comma separated tags which are used in the "
 
 **content**
 
-Use the `content` array to define which and how content playlists should be displayed in "shelves". For optimal performance and user experience, we recommend a maximum of 10 playlists. See the available options below to configure each shelf separately.
+Use the `content` array to define which and how content playlists should be displayed in "shelves". For optimal
+performance and user experience, we recommend a maximum of 10 playlists. See the available options below to configure
+each shelf separately.
 
 ```
 {
@@ -97,15 +104,19 @@ Use the `content` array to define which and how content playlists should be disp
 
 **content[].contentId**
 
-The eight-character Playlists IDs from the JW Player dashboard. These IDs populate the video "shelves" in your site. **contentId** is not required if you use `continue_watching` or `favorites` **type**.
+The eight-character Playlists IDs from the JW Player dashboard. These IDs populate the video "shelves" on your site. *
+*contentId** is not required if you use `continue_watching` or `favorites` **type**.
 
 ---
 
 **content[].type**
 
-It is possible to use 'playlist', 'continue_watching' or 'favorites' as a type. With this, you can change the position of the shelves and turn on/off extra `continue_watching` and `favorites` shelves.
+It is possible to use 'playlist', 'continue_watching' or 'favorites' as a type. With this, you can change the position
+of the shelves and turn on/off extra `continue_watching` and `favorites` shelves.
 
-If you want to include `favorites` / `continue_watching` shelf, you should also add a corresponding playlist with `watchlist` type to features section (`features.favoritesList` and `features.continueWatchingList`). To exclude the shelves, remove a corresponding array item and a playlist in `features`.
+If you want to include `favorites` / `continue_watching` shelf, you should also add a corresponding playlist
+with `watchlist` type to features section (`features.favoritesList` and `features.continueWatchingList`). To exclude the
+shelves, remove a corresponding array item and a playlist in `features`.
 
 ```
 {
@@ -117,7 +128,8 @@ If you want to include `favorites` / `continue_watching` shelf, you should also
 
 **content[].title** (optional)
 
-You can change the playlist title and choose a custom one. It is also possible to do for `continue_watching` and `favorites` types.
+You can change the playlist title and choose a custom one. It is also possible to do for `continue_watching`
+and `favorites` types.
 
 ---
 
@@ -129,7 +141,7 @@ Controls if the playlist should be used as a large "Featured" shelf on your JW O
 
 **content[].backgroundColor** (optional)
 
-You can change the background color of the shelf with the help of this property (e.g. #ff0000).
+You can change the background color of the shelf with the help of this property (e.g., #ff0000).
 
 ---
 
@@ -150,13 +162,13 @@ Use the `styling` object to define extra styles for your application.
 
 **styling.backgroundColor** (optional)
 
-Override the theme's background color without needing to change CSS (e.g. #ff0000).
+Override the theme's background color without needing to change CSS (e.g., #ff0000).
 
 ---
 
 **styling.highlightColor** (optional)
 
-Controls the color used for certain UI elements such as progress spinner, buttons, etc. The default is light red.
+Controls the color used for certain UI elements such as progress spinner, buttons, etc. The default is light-red.
 
 Specify the color in hexadecimal format. For example, if you want bright yellow, set it to #ffff00
 
@@ -164,7 +176,8 @@ Specify the color in hexadecimal format. For example, if you want bright yellow,
 
 **styling.headerBackground** (optional)
 
-Use this parameter to change the background color of the header. By default, the header is transparent. Recommended is to use a HEX color (e.g. `#1a1a1a`) so that the contrast color of the buttons and links can be calculated.
+Use this parameter to change the background color of the header. By default, the header is transparent. Recommended is
+to use a HEX color (e.g. `#1a1a1a`) so that the contrast color of the buttons and links can be calculated.
 
 ---
 
@@ -184,25 +197,32 @@ Use the `features` object to define extra properties for your app.
 
 **features.recommendationsPlaylist** (optional)
 
-The eight-character Playlist ID of the Recommendations playlist that you want to use to populate the "Related Videos" shelf in your site. Note that Recommendations requires a JW Player Enterprise license. For more information about Recommendations playlists, see [this JW Player Support article](https://support.jwplayer.com/customer/portal/articles/2191721-jw-recommendations).
+The eight-character Playlist ID of the Recommendations playlist that you want to use to populate the "Related Videos"
+shelf in your site. Note that Recommendations requires a JW Player Enterprise license. For more information about
+Recommendations playlists,
+see [this JW Player Support article](https://support.jwplayer.com/customer/portal/articles/2191721-jw-recommendations).
 
 ---
 
 **features.searchPlaylist** (optional)
 
-The eight-character Playlist ID of the Search playlist that you want to use to enable search on your site. Note that Search requires a JW Player Enterprise license. For more information about Search playlists, see [this JW Player Support article](https://support.jwplayer.com/customer/portal/articles/2383600-building-managing-data-driven-feeds).
+The eight-character Playlist ID of the Search playlist that you want to use to enable search on your site. Note that
+Search requires a JW Player Enterprise license. For more information about Search playlists,
+see [this JW Player Support article](https://support.jwplayer.com/customer/portal/articles/2383600-building-managing-data-driven-feeds).
 
 ---
 
 **features.favoritesList** (optional)
 
-The eight-character Playlist ID of the Watchlist playlist that you want to use to populate the "Favorites" shelf in your site.
+The eight-character Playlist ID of the Watchlist playlist that you want to use to populate the "Favorites" shelf in your
+site.
 
 ---
 
 **features.continueWatchingList** (optional)
 
-The eight-character Playlist ID of the Watchlist playlist that you want to use to populate the "Continue Watching" shelf in your site.
+The eight-character Playlist ID of the Watchlist playlist that you want to use to populate the "Continue Watching" shelf
+in your site.
 
 ---
 
@@ -226,19 +246,25 @@ Use the `integrations.jwp` object to activate the JWP integrations for authentic
 
 **integrations.jwp.clientId** (optional)
 
-The ID of your JWP Authentication and Subscription environment if you would like to activate JWP account, subscription, and payment functionality. Omit this key in your config to disable this functionality. See [docs/backend-services](backend-services.md) for more details.
+The ID of your JWP Authentication and Subscription environment if you would like to activate JWP account, subscription,
+and payment functionality. Omit this key in your config to disable this functionality.
+See [docs/backend-services](backend-services.md) for more details.
 
 ---
 
 **integrations.jwp.assetId** (optional)
 
-If JWP authentication is enabled, and you want to show the Payments and Subscription functionality as well, you need to include the asset ID. The application uses this ID to map to a subscription offer that you've configured in your JWP environment that represent your subscription options.
+If JWP authentication is enabled, and you want to show the Payments and Subscription functionality as well, you need to
+include the asset ID. The application uses this ID to map to a subscription offer that you've configured in your JWP
+environment that represent your subscription options.
 
 ---
 
 **integrations.jwp.useSandbox** (optional)
 
-This setting determines which JWP environment is used. If false or not defined, the production environment is used. If true, the test (sandbox) environment is used. Note, this setting is ignored if JWP integrations are not enabled (i.e. there is not clientId defined)
+This setting determines which JWP environment is used. If false or not defined, the production environment is used. If
+true, the test (sandbox) environment is used. Note, this setting is ignored if JWP integrations are not enabled (i.e.
+there is not clientId defined)
 
 ---
 
@@ -262,29 +288,41 @@ Use the `integrations.cleeng` object to integrate with Cleeng.
 
 **integrations.cleeng.id** (optional)
 
-The ID of your Cleeng ID environment if you would like to integrate with Cleeng as a backend for account, subscription, and checkout functionality. Omit this key in your config to disable Cleeng and the related functionality. See [docs/backend-services](backend-services.md) for more details.
+The ID of your Cleeng ID environment if you would like to integrate with Cleeng as a backend for account, subscription,
+and checkout functionality. Omit this key in your config to disable Cleeng and the related functionality.
+See [docs/backend-services](backend-services.md) for more details.
 
 ---
 
 **integrations.cleeng.useSandbox** (optional)
 
-This setting determines which Cleeng mediastore URL is used. If false or not defined, the Cleeng production URL is used (https://mediastore.cleeng.com). If true, the Cleeng sandbox URL is used (https://mediastore-sandbox.cleeng.com). Note, this setting is ignored if Cleeng is not enabled (i.e. there is not Cleeng ID defined)
+This setting determines which Cleeng mediastore URL is used. If false or not defined, the Cleeng production URL is
+used (https://mediastore.cleeng.com). If true, the Cleeng sandbox URL is used (https://mediastore-sandbox.cleeng.com).
+Note, this setting is ignored if Cleeng is not enabled (i.e. there is not Cleeng ID defined)
 
 ---
 
 **integrations.cleeng.monthlyOffer** (optional)
 
-If Cleeng is enabled, and you want to show the Payments and Subscription functionality, you need to include at least 1 offer ID (either this or the yearly offer property.) The application uses this ID to map to an offer that you've configured in your Cleeng environment under Offers to represent your monthly subscription. Note that the only the data used from the Cleeng offer is the price, the free days, and the free period and the app does not verify if the offer length is actually monthly. If no monthly or yearly offer is configured, the Payments section will not be shown.
+If Cleeng is enabled, and you want to show the Payments and Subscription functionality, you need to include at least one
+offer ID (either this or the yearly offer property). 
+The application uses this ID to map to an offer that you've configured in your Cleeng environment under Offers to 
+represent your monthly subscription. 
+Note that only the data used from the Cleeng offer is the price, the free days, and the free period,
+and the app does not verify if the offer length is actually monthly. 
+If no monthly or yearly offer is configured, the Payments section will not be shown.
 
 ---
 
 **integrations.cleeng.yearlyOffer** (optional)
 
-If Cleeng is enabled, and you want to show the Payments and Subscription functionality, you need to include at least 1
-offer ID (either this or the monthly offer property.) The application uses this ID to map to an offer that you've
-configured in your Cleeng environment under Offers to represent your yearly subscription. Note that the only the data
-used from the Cleeng offer is the price, the free days, and the free period and the app does not verify if the offer
-length is actually yearly. If no monthly or yearly offer is configured, the Payments section will not be shown.
+If Cleeng is enabled, and you want to show the Payments and Subscription functionality, you need to include at least one
+offer ID (either this or the monthly offer property).
+The application uses this ID to map to an offer that you've configured in your Cleeng environment under Offers to
+represent your yearly subscription.
+Note that only the data used from the Cleeng offer is the price, the free days, and the free period,
+and the app does not verify if the offer length is actually yearly.
+If no monthly or yearly offer is configured, the Payments section will not be shown.
 
 ---
 
@@ -312,10 +350,10 @@ official [URL Signing Documentation](https://developer.jwplayer.com/jwplayer/doc
 **contentSigningService.drmPolicyId** (optional)
 
 When DRM is enabled for your JW Dashboard Property, all playlist and media requests MUST use the DRM specific endpoints.
-When this property is configured, OTT Web App automatically does this for you but all DRM requests must be
+When this property is configured, OTT Web App automatically does this for you, but all DRM requests must be
 signed as well.
 
-For this to work the entitlement service must implement the following endpoints:
+For this to work, the entitlement service must implement the following endpoints:
 
 **Default public endpoints:**
 
@@ -329,8 +367,8 @@ path.
 
 [POST] `${host}/media/${mediaid}/sign_all_public/drm/${drmPolicyId}`
 
-In order to sign multiple media items at once for the favorites and watch history shelves, a different endpoint is used.
-The request body contains all media IDs which needs to be signed, for example:
+To sign multiple media items at once for the favorites and watch history shelves, a different endpoint is used.
+The request body contains all media IDs that need to be signed, for example:
 
 ```json
 {
diff --git a/docs/content-types.md b/docs/content-types.md
index 749dff78a..2d3117b0e 100644
--- a/docs/content-types.md
+++ b/docs/content-types.md
@@ -13,7 +13,7 @@ To help ensure that content editors use the right content types and custom param
 You can upload the schema for the content types that your app expects.
 Content editors will then be able to choose a content type for each media item and will see the expected metadata when they are editing the item on the dashboard.
 
-> Note: Content types on the JWP dashboard requires a specific entitlement. Please speak with your account rep to enable this feature for your account.
+> Note: Content types on the JWP dashboard require a specific entitlement. Please speak with your account rep to enable this feature for your account.
 
 ## Uploading content types to the dashboard
 
@@ -29,12 +29,12 @@ You can modify this file in your fork of the web app code or optionally specify
 The upload file should be a json property with the schemas defined as an array on the `schemas` property on the root object.
 Please refer to [content-types.json](../scripts/content-types/content-types.json) and the JWP documentation for the schema format.
 
-To avoid unnecessary duplication the file also allows some basic abstraction.
+To avoid unnecessary duplication, the file also allows some basic abstraction.
 You can define reused fields and sections as key-value entries on the `fields` and `sections` properties respectively.
 Then you can include these reusable entities by putting their string key into schemas the same way that you would for inline fields or sections.
 There are many examples in the included [content-types.json](../scripts/content-types/content-types.json)
 
-> Note: Although the upload file allows you to define reused fields and sections, when these are uploaded they become distinct copies for each instance in the schemas where they are used.
+> Note: Although the upload file allows you to define reused fields and sections, when these are uploaded, they become distinct copies for each instance in the schemas where they are used.
 > That means that changing fields and sections via the api after they are uploaded must be done individually for each schema.
 > Alternatively, you can re-upload and overwrite the existing schemas, but use caution because you will lose any other manual changes you have made.
 
diff --git a/docs/developer-guidelines.md b/docs/developer-guidelines.md
index be22aa1af..2a6158b75 100644
--- a/docs/developer-guidelines.md
+++ b/docs/developer-guidelines.md
@@ -7,7 +7,7 @@
 - Run `yarn i18next` to extract all translations keys from source-code
 - Run `yarn depcheck` to validating dependency usages for all packages
 - Run `npx syncpack lint` for validating dependency issues for all workspaces
-- The JW organization requires personal access tokens for all of their repositories. In order to create a branch or pull request you'll need to [Generate a Personal Access Token](https://github.com/settings/tokens) and then [store it in your git config](https://stackoverflow.com/questions/46645843/where-to-store-my-git-personal-access-token/67360592). (For token permissions, `repo` should be sufficient).
+- The JW organization requires personal access tokens for all of their repositories. To create a branch or pull request, you'll need to [Generate a Personal Access Token](https://github.com/settings/tokens) and then [store it in your git config](https://stackoverflow.com/questions/46645843/where-to-store-my-git-personal-access-token/67360592). (For token permissions, `repo` should be sufficient).
 
 ## Versioning and Changelog
 
@@ -27,7 +27,9 @@ The GitHub action will update the project package.json, create a release tag in
 
 ## Git Commit Guidelines (conventional changelog)
 
-We use the conventional changelog thereby defining very precise rules over how our git commit messages can be formatted. This leads to **more readable messages** that are easy to follow when looking through the **project history**. But also, we allow the git commit messages to **generate the change log**.
+We use the conventional changelog, thereby defining very precise rules over how our git commit messages can be formatted. 
+This leads to **more readable messages** that are easy to follow when looking through the **project history**. 
+But also, we allow the git commit messages to **generate the change log**.
 
 ### Commit Message Format
 
@@ -41,7 +43,8 @@ Each commit message consists of a **header**, a **body** and a **footer**. The h
 <footer>
 ```
 
-The subject line of the commit message cannot be longer 100 characters. This allows the message to be easier to read on GitHub as well as in various git tools.
+The subject line of the commit message cannot be longer than 100 characters. 
+This allows the message to be easier to read on GitHub as well as in various git tools.
 
 ### Type
 
@@ -50,8 +53,8 @@ Please use one of the following:
 - **feat**: A new feature
 - **fix**: A bug fix
 - **docs**: Documentation only changes
-- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
-- **refactor**: A code change that neither fixes a bug or adds a feature
+- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semicolons, etc.)
+- **refactor**: A code change that neither fixes a bug nor adds a feature
 - **perf**: A code change that improves performance
 - **test**: Adding missing tests
 - **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation
diff --git a/docs/translations.md b/docs/translations.md
index f9a705327..05c449083 100644
--- a/docs/translations.md
+++ b/docs/translations.md
@@ -28,7 +28,7 @@ extracts all namespaces and translation keys from the source code. Refrain from
 removing keys) of translation files manually because this is prone to mistakes.
 
 To add a new language, create a new subdirectory in the `./platforms/web/public/locales` directory using the language
-code or LCID string if the language is region specific. For example, using the `fr` language code will be available for
+code or LCID string if the language is region-specific. For example, using the `fr` language code will be available for
 all French-speaking regions (e.g., Belgium, Canada, France, Luxembourg, etc.). But if you have different translations
 for one or more French-speaking regions, use the LCID string (e.g., `fr-be`, `fr-ca`, `fr-lu`, or `fr-fr`) instead of
 the language code. The downside of this, when having multiple French-speaking regions, a lot of translations will be
@@ -42,10 +42,10 @@ language(s) translation files. You can now translate each key for the added lang
 When a language is added to the `./platforms/web/public/locales` folder, the OTT Web App doesn't automatically recognize
 this. Instead, the language must first be added to the "defined languages" list. This is for two reasons:
 
-- As OTT Web App we want to be able to include many languages without enabling them all by default
+- As OTT Web App, we want to be able to include many languages without enabling them all by default
 - For each language, the display name must be defined, which is shown in the language selection menu
 
-Navigate to the `./platforms/web/src/i18n/config.ts` file and find the `DEFINED_LANGUAGES` constant. Each entry 
+Navigate to the `./platforms/web/src/i18n/config.ts` file and find the `DEFINED_LANGUAGES` constant. Each entry
 specifies the language code (or LCID string) and display name.
 
 > If you have added multiple languages using the LCID string identifier, each much be added to the list of defined
@@ -96,7 +96,7 @@ OTT Web App will try to predict the user language by looking at the Browser lang
 predicted, or there is no support for the Browser language, the default language will be used. By default, this is set
 to `en`.
 
-The default language can be changed in the `/platforms/web/.env` file as well or by adding the `APP_DEFAULT_LANGUAGE` 
+The default language can be changed in the `/platforms/web/.env` file as well or by adding the `APP_DEFAULT_LANGUAGE`
 environment variable to the start/build commands.
 
 Build an OTT Web App with English and French translations, but default to French when the language couldn't be
diff --git a/docs/workspaces.md b/docs/workspaces.md
index 8b5a28b32..7b143091a 100644
--- a/docs/workspaces.md
+++ b/docs/workspaces.md
@@ -3,7 +3,7 @@
 ## Why workspaces?
 
 The JW OTT Web App is an open-source repository that showcases an OTT app implementing JWP services. The OTT Web App, as
-the name implies, originates as a web only repository. But much of the source-code can be re-used for many different
+the name implies, originates as a web-only repository. But much of the source-code can be re-used for many different
 platforms, such as CapacitorJS, React Native, LightningJS and other frameworks based on TypeScript.
 
 Using the previous codebase, it would be quite challenging to re-use the services because of the dependencies and
@@ -19,11 +19,12 @@ This means that we need to:
 
 ## The solution
 
-Based on the re-usability of parts of the existing codebase, we've created separate modules using Yarn Workspaces.
+Based on the re-usability of the existing codebase, we've created separate modules using Yarn Workspaces.
 This will combine all similar code and prevent installing redundant or conflicting dependencies.
 
 For example, all components, containers, and pages are combined into the `packages/ui-react` module, which depends on
-react and react-dom. To create a React Native app, you could add a `packages/ui-react-native` module and configure
+React and React DOM. 
+To create a React Native app, you could add a `packages/ui-react-native` module and configure
 aliases to use the correct module.
 
 ## Packages & Platforms
@@ -80,8 +81,9 @@ CodeceptJS/Playwright-specific code.
 
 Name: `@jwp/ott-theme`
 
-The most important theming comes from the app config, but many other SCSS variables can be abstracted into generic (
-JSON) tokens. These tokens can be used across multiple frameworks.
+The most important theming comes from the app config, but many other SCSS variables can be abstracted into generic 
+(JSON) tokens. 
+These tokens can be used across multiple frameworks.
 
 Raw SVG icons are added here as well.
 
@@ -102,14 +104,14 @@ The web folder is located in the platforms directory in the project's root folde
 platform-specific code. In the case of the web platform, this is all the Vite.js configuration and App.tsx for
 bootstrapping the app.
 
-We can add more platforms by adding a folder to the platforms folder.
+We can add more platforms by adding a folder to the `../platforms` folder.
 
 Each platform is a standalone application that may use other modules defined in the packages folder as dependencies.
 
-### Eslint, PostCSS and Stylelint
+### ESLint, PostCSS and Stylelint
 
-Besides the mentioned packages there are also three utility packages listed in the packages folder. These utility
-packages exist to align linting dependencies and configuration between the different packages.
+Besides the mentioned packages, there are also three utility packages listed in the configs folder.
+These utility packages exist to align linting dependencies and configurations between the different packages and apps.
 
 All packages depend on Eslint and need a configuration. The recommended way of doing this in a monorepo is by creating
 a local package.
diff --git a/package.json b/package.json
index 023ec5f52..aca4377d8 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,8 @@
     "pre-commit": "yarn depcheck && lint-staged",
     "prepare": "husky install",
     "test": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run",
-    "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest"
+    "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest",
+    "web": "yarn --cwd platforms/web"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.1.1",
diff --git a/packages/common/docs/backend-services.md b/packages/common/docs/backend-services.md
index 9ddca20c1..9793b1edb 100644
--- a/packages/common/docs/backend-services.md
+++ b/packages/common/docs/backend-services.md
@@ -1,50 +1,52 @@
 # Backend dependencies and architecture
 
 The application is built as a single page web app that can run without its own dedicated backend. This is useful for
-hosting it with a very simple, static host. The server serves the static web content and the frontend
+hosting it with a basic, static host. The server serves the static web content, and the frontend
 calls the [JW Player Delivery API](https://developer.jwplayer.com/jwplayer/docs) directly.
 However, for additional functionality, the application can also connect to other backends to provide user
 accounts / authentication, subscription management, and checkout flows.
 
 ## Roles and Functions
 
-The available backend integrations serve 3 main roles: Accounts, Subscription, and Checkout. Below are the methods
-that any backend integration needs to support broken down by role:
+The available backend integrations serve three main roles: Accounts, Subscription, and Checkout.
+Below are the methods that any backend integration needs to support broken down by role:
 
 - [Account](../packages/common/src/services/integrations/AccountService.ts)
-  - login
-  - register
-  - getPublisherConsents
-  - getCustomerConsents
-  - resetPassword
-  - changePassword
-  - updateCustomer
-  - updateCustomerConsents
-  - getCustomer
-  - refreshToken
-  - getLocales
-  - getCaptureStatus
-  - updateCaptureAnswers
+    - login
+    - register
+    - getPublisherConsents
+    - getCustomerConsents
+    - resetPassword
+    - changePassword
+    - updateCustomer
+    - updateCustomerConsents
+    - getCustomer
+    - refreshToken
+    - getLocales
+    - getCaptureStatus
+    - updateCaptureAnswers
 - [Subscription](../packages/common/src/services/integrations/SubscriptionService.ts)
-  - getSubscriptions
-  - updateSubscription
-  - getPaymentDetails
-  - getTransactions
+    - getSubscriptions
+    - updateSubscription
+    - getPaymentDetails
+    - getTransactions
 - [Checkout](../packages/common/src/services/integrations/CheckoutService.ts)
-  - getOffer
-  - createOrder
-  - updateOrder
-  - getPaymentMethods
-  - paymentWithoutDetails
-  - paymentWithAdyen
-  - paymentWithPayPal
+    - getOffer
+    - createOrder
+    - updateOrder
+    - getPaymentMethods
+    - paymentWithoutDetails
+    - paymentWithAdyen
+    - paymentWithPayPal
 
 ## Existing Configurations
 
 ### JWP
 
-The OTT Web App is optimized to work with JWP authentication, subscriptions, and payments. For configuration options see [configuration.md](configuration.md)
+The OTT Web App is optimized to work with JWP authentication, subscriptions, and payments. 
+For configuration options see [configuration.md](configuration.md)
 
 ### Cleeng (https://developers.cleeng.com/docs)
 
-The Web App was also developed with support for Cleeng. Cleeng is a 3rd party platform that also provides support for the 3 functional roles above.
+The Web App was also developed with support for Cleeng. 
+Cleeng is a third party platform that also provides support for the three functional roles above.
diff --git a/packages/common/docs/modularization.md b/packages/common/docs/modularization.md
index 5aaf93551..cdc0e665c 100644
--- a/packages/common/docs/modularization.md
+++ b/packages/common/docs/modularization.md
@@ -1,12 +1,16 @@
 # Architecture
 
-In order to implement a more structural approach of organizing the code and to reduce coupling we decided to add Dependency Injection (DI) and Inversion of Control (IOC) patterns support for services and controllers present in the application. We expect these patterns to be even more effective when working with different OTT platforms where JS code can be reused.
+To implement a more structural approach of organizing the code and to reduce coupling, we decided to add Dependency
+Injection (DI) and Inversion of Control (IOC) patterns support for services and controllers present in the application.
+We expect these patterns to be even more effective when working with different OTT platforms where JS code can be reused.
 
 ## DI library
 
-InversifyJS is used to provide IOC container and to perform DI for both services and controllers. Injection happens automatically with the help of the reflect-metadata package (by adding `injectable` decorators).
+InversifyJS is used to provide IOC container and to perform DI for both services and controllers.
+Injection happens automatically with the help of the reflect-metadata package (by adding `injectable` decorators).
 
-> **Important:** The type of the service / controller defined in the constructor should be used as a value, without the `type` keyword.
+> **Important:** The type of the service / controller defined in the constructor should be used as a value, without
+> the `type` keyword.
 
 Won't work:
 
@@ -42,46 +46,71 @@ This is the price we need to pay to remove `inject` decorators from the construc
 
 ## Initialization
 
-We use [register](../src/modules/register.ts) function to initialize services and controllers. Some services don't depend on any integration provider (like `ConfigService` or `EpgService`), while such services as `CleengAccountService` or `InplayerAccountService` depend on the provider and get injected into controllers conditionally based on the `INTEGRATION_TYPE` dynamic value (`JWP` or `CLEENG`).
+We use [register](../src/modules/register.ts) function to initialize services and controllers.
+Some services don't depend on any integration provider (like `ConfigService` or `EpgService`),
+while such services as `CleengAccountService` or `InplayerAccountService` depend on the provider 
+and get injected into controllers conditionally based on the `INTEGRATION_TYPE` dynamic value (`JWP` or `CLEENG`).
 
-Initialization starts in the platform index.tsx file where we register services. We do it outside the React component to make services available in different parts of the application.
+Initialization starts in the platform index.tsx file where we register services. We do it outside the React component to
+make services available in different parts of the application.
 
-The app is loaded in the [useBootstrapApp](../src/hooks/useBootstrapApp.ts) hook with the help of the `AppController` which is responsible for retrieving data from the Config and Settings services, initializing the initial state of the application and hitting init methods of the base app's controllers.
+Platforms load all the required data with the help of the [`AppController`](../src/controllers/AppController.ts). The
+AppController is responsible for retrieving data from the Config and Settings services, initializing the initial state
+of the application and hitting init methods of the base app's controllers.
 
 ## Controllers and Services
 
-Both Controllers and Services are defined as classes. We use `injectable` decorator to make them visible for the InversifyJS library.
+Both Controllers and Services are defined as classes.
+We use `injectable` decorator to make them visible for the InversifyJS library.
 
 > **Important:** Use arrow functions for class methods to avoid lost context.
 
 ### Services
 
-Business logic should be mostly stored in Services. We use services to communicate with the back-end and to process the data we receive.
+Business logic should be mostly stored in Services. We use services to communicate with the back-end and to process the
+data we receive.
 
-Services also help to manage different dependencies. For example, we can use them to support several integration providers. If this is the case we should also create a common interface and make dependant entities use the interface instead of the actual implementation. This is how inversion of control principle can be respected. Then when we inject services into controllers, we use interface types instead of the implementation classes.
+Services also help to manage different dependencies.
+For example, we can use them to support several integration providers.
+If this is the case,
+we should also create a common interface and make dependent entities
+use the interface instead of the actual implementation.
+This is how inversion of control principle can be respected.
+Then, when we inject services into controllers, we use interface types instead of the implementation classes.
 
 All in all:
 
 - Services contain the actual business logic;
 - They can be injected into controllers (which orchestrate different services) or into other services;
-- We should avoid using services in the View part of the application and prefer controllers instead. However, it is still possible to do in case controllers fully duplicate service's methods (EPG service). In this case we can use a react hook (for the web app) and get access to the service there.
-- One service can use provides different implementations. For example, we can split it into Cleeng and JWP implementation (account, checkout and so on).
+- We should avoid using services in the View part of the application and prefer controllers instead.
+  However, it is still possible to do in case controllers fully duplicate service methods (EPG service).
+  In this case, we can use a React hook (for the web app) and get access to the service there.
+- One service can use provides different implementations.
+  For example, we can split it into Cleeng and JWP implementation (account, checkout and so on).
 
-> **Important:** Services should be written in an environment / client agnostic way (i.e. no Window usage) to be reused on different platforms (Web, SmartTV and so on).
+> **Important:** Services should be written in an environment / client agnostic way (i.e. no Window usage) to be reused
+> on different platforms (Web, SmartTV and so on).
 
 ### Controllers
 
-Controllers bind different parts of the application. Controllers use services, store and provide methods to operate with business logic in the UI and in the App. If we need to share code across controllers then it is better to promote the code to the next level (we do it in the AppController). Then it is possible to modify both controllers to call the same (now shared) code.
+Controllers bind different parts of the application. Controllers use services, store and provide methods to operate with
+business logic in the UI and in the App. If we need to share code across controllers, then it is better to promote the
+code to the next level (we do it in the AppController). Then it is possible to modify both controllers to call the
+same (now shared) code.
 
 - They can be called from the View part of the application;
 - They use the data from the Store and from the UI to operate different injected services;
 - They use the Store to persist the entities when needed;
 - They return data back to the UI when needed.
 
-> **Important:** We should try to avoid controllers calling each other because it leads to circular dependencies and makes the code messy. However now they do it sometimes (to be refactored).
+> **Important:** We should try to avoid controllers calling each other because it leads to circular dependencies and
+> makes the code messy. However, now they sometimes do it (to be refactored).
 
 ### Controllers / Services retrieval
 
-To get access to the service / controller [getModule](../src/modules/container.ts) utility can be used. It also accepts a `required` param which can be used in case the presence of the service is optional. If `required` is provided but service itself is not bound then the error will be thrown.
+To get access to the service / controller [getModule](../src/modules/container.ts) utility can be used.
+It also accepts a `required` param which can be used in case the presence of the service is optional.
+If `required` is provided but service itself is not bound then the error will be thrown.
 
-`getNamedModule` function is mostly use in controllers to retrieve integration-specific services, like AccountService or CheckoutService.
+`getNamedModule` function is mostly used in controllers to retrieve integration-specific services, like AccountService or
+CheckoutService.
diff --git a/platforms/web/README.md b/platforms/web/README.md
index 06864c9ab..a0dca0187 100644
--- a/platforms/web/README.md
+++ b/platforms/web/README.md
@@ -13,13 +13,13 @@
 ## Create favicons / pwa icons
 
 First override the source icon with another image here [./public/images/icons/app-icon.png`](./public/images/icons/app-icon.png)
-Use a high quality image square-sized image. We suggest a dimension 1024x1024 or higher
+Use a high-quality square-sized image.
+We suggest a dimension 1024x1024 or higher
 
 - Navigate to the platform directory `cd platforms/web`
 - Perform `yarn generate-pwa-assets`
 
-Instal `sharp` if you get the following error: Could not load the "sharp" module using the ... runtime.
-And run `yarn generate-pwa-assets` afterwards
+Install `sharp` if you get the following error: Could not load the "sharp" module using the ... runtime and run `yarn generate-pwa-assets` afterward
 
 The different icon formats are defined here [pwa-assets.config.ts](./pwa-assets.config.ts)
 
diff --git a/platforms/web/docs/build-from-source.md b/platforms/web/docs/build-from-source.md
index ccab5f76d..9e8d9764c 100644
--- a/platforms/web/docs/build-from-source.md
+++ b/platforms/web/docs/build-from-source.md
@@ -82,7 +82,7 @@ These values are then defacto constants, which means code optimizations can remo
 
 For non-sensitive values, you can add them directly to the appropriate .env file for each mode.
 
-For sensitive values, if building with github actions we recommend using [github secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) and setting them in the [build action environment](https://docs.github.com/en/actions/learn-github-actions/variables).
+For sensitive values, if building with GitHub actions, we recommend using [GitHub secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) and setting them in the [build action environment](https://docs.github.com/en/actions/learn-github-actions/variables).
 You can see an example of how these are used in our [Firebase Live / Preview actions.](https://github.com/jwplayer/ott-web-app/blob/develop/.github/workflows/firebase-live.yml#L14)
 
 If building manually, you can create an .env.[mode].local file and add the values there. These files are git ignored which will prevent leaking your secrets to version control.
@@ -117,7 +117,7 @@ The value to use can be found labeled 'License Key' in the 'Self-Hosted Web Play
 
 If you link directly to your JWP cloud player using the [APP_PLAYER_ID](#app_player_id) environment variable or the [playerId ini setting](initialization-file.md#playerid), you do not need to provide a value for `APP_PLAYER_LICENSE_KEY`.
 
-It is recommended that this value be provided via a .env.local file or a github secret to avoid saving it in version control.
+It is recommended that this value be provided via a .env.local file or a GitHub secret to avoid saving it in version control.
 
 If you are using pre-compiled builds instead of building the code yourself, you can also set this value with the [playerLicenseKey ini setting](initialization-file.md#playerLicenseKey).
 Keep in mind, if the [playerLicenseKey ini setting](initialization-file.md#playerLicenseKey) is provided, it will be used even if the `APP_PLAYER_LICENSE_KEY` environment variable is set.
diff --git a/platforms/web/docs/developer-guidelines.md b/platforms/web/docs/developer-guidelines.md
index d03257ba5..79cecc517 100644
--- a/platforms/web/docs/developer-guidelines.md
+++ b/platforms/web/docs/developer-guidelines.md
@@ -13,35 +13,36 @@
 ## Project Structure
 
 ```
-/build*           - Directory where the code is compiled by `yarn build`
-/coverage*        - Location of the C8 coverage report
-/docs             - Documentation
-/ini              - Directory to group different initialization files
-  /templates      - Template .ini files per mode
-/node_modules*    - Yarn generated dependencies
-/public           - Static files to be hosted with the application
-/scripts          - Dev helper scripts for deployment, etc.
-/src              - Source code for the application
-  /components     - Reusable, side-effect free UI components
-  /containers     - UI Containers
-  /hooks          - Custom React hooks
-  /i18n           - Internationalization tools
-  /modules        - Container registry for IoC
-  /services       - Services which connects external data sources to the application
-  /styles         - Global SCSS rules, theming and variables
-  /utils          - Utility functions
-  /App.tsx        - The main React component which renders the app
-  /constants.ts   - Re-usable TypeScript constants 
-  /index.tsx      - The entrypoint
-/test             - Data and scripts for unit and e2e testing
-/test-cases       - Test cases written in cucumber format
-/test-e2e         - End to end tests and scripts
-/types            - Global type definitions
-/.env<.mode>      - Environment variables for different Vite modes
-/firebase.json    - Config for firebase static hosting
-/index.html       - Main html file entrypoint for the application
-/package.json     - Yarn file for dependencies and scripts
-/vite.config.ts   - Vite build and test configuration file
+/build*                 - Directory where the code is compiled by `yarn build`
+/coverage*              - Location of the C8 coverage report
+/docs                   - Documentation
+/ini                    - Directory to group different initialization files
+  /templates            - Template .ini files per mode
+/node_modules*          - Yarn generated dependencies
+/public                 - Static files to be hosted with the application
+/scripts                - Dev helper scripts for deployment, etc.
+/src                    - Source code for the application
+  /components           - Reusable, side-effect free UI components
+  /containers           - UI Containers
+  /hooks                - Custom React hooks
+  /i18n                 - Internationalization tools
+  /modules              - Container registry for IoC
+  /services             - Services which connects external data sources to the application
+  /styles               - Global SCSS rules, theming and variables
+  /utils                - Utility functions
+  /App.tsx              - The main React component which renders the app
+  /constants.ts         - Re-usable TypeScript constants 
+  /index.tsx            - The entrypoint
+  /screenMapping.tsx    - The screen mapping registers custom screens for contentTypes
+/test                   - Data and scripts for unit and e2e testing
+/test-cases             - Test cases written in cucumber format
+/test-e2e               - End to end tests and scripts
+/types                  - Global type definitions
+/.env<.mode>            - Environment variables for different Vite modes
+/firebase.json          - Config for firebase static hosting
+/index.html             - Main html file entrypoint for the application
+/package.json           - Yarn file for dependencies and scripts
+/vite.config.ts         - Vite build and test configuration file
 
 * = Generated directories, not in source control
 
diff --git a/platforms/web/docs/e2e.md b/platforms/web/docs/e2e.md
index 021038b35..21eb1c6cd 100644
--- a/platforms/web/docs/e2e.md
+++ b/platforms/web/docs/e2e.md
@@ -32,21 +32,23 @@ Each test suite is a separate file located in the `platforms/web/tests` folder.
 
 We use several workers to launch tests for each platform. That increases the speed and guaranties the autonomy of each Scenario.
 
-**(!)** In order to support allure reports it is necessary to install Java 8.
+**(!)** In order to support allure reports, it is necessary to install Java 8.
 
 Basic commands:
 
 - `cd platforms/web` - run the following commands from the web platform
 - `yarn codecept:mobile` - to run tests for a mobile device
 - `yarn codecept:desktop` - to run tests for desktop
-- `yarn serve-report:mobile` - to serve allure report from "./output/mobile" folder
+- `yarn serve-report:mobile` - to serve an allure report from "./output/mobile" folder
 - `yarn serve-report:desktop` - to serve allure report from "./output/desktop" folder
 - `yarn codecept-serve:mobile` - to run desktop tests and serve the report
 - `yarn codecept-serve:desktop` - to run mobile tests and serve the report
 
 ## GitHub Actions
 
-We have two actions: one for desktop and one for mobile device. Each one runs independently. After the action run it is possible to download an artifact with an allure report and build a nice report locally.
+We have two actions: one for desktop and one for mobile devices. 
+Each one runs independently.
+After the actions run, it is possible to download an artifact with an allure report and build a nice report locally.
 
 To do it on Mac: `allure serve ~/Downloads/allure-report-desktop`
 
diff --git a/platforms/web/docs/initialization-file.md b/platforms/web/docs/initialization-file.md
index cea4161fe..619e8712d 100644
--- a/platforms/web/docs/initialization-file.md
+++ b/platforms/web/docs/initialization-file.md
@@ -1,12 +1,11 @@
 # Initialization (ini) File
 
 The JW OTT Web App loads a small initialization (.ini) file at startup. This file provides a mechanism to set key startup parameters without modifying the source code.
-Template ini files are included in the repo and with the pre-compiled production release builds ([.webapp.prod.ini](/web/ini/templates/.webapp.prod.ini)).
+Template ini files are included in the repo and with the pre-compiled production release builds ([.webapp.prod.ini](../ini/templates/.webapp.prod.ini)).
 Make sure you include a copy of the ini file edited to include your account data at `/public/.webapp.ini` for the application to load correctly.
 
 For all manual builds (`yarn start` or `yarn build`), the ini file is copied from `/ini/.webapp.<mode>.ini` to `build/public/.webapp.ini`, which the application fetches and parses at startup. For production builds, the ini file is stripped of comments and extra whitespace.
-If a file doesn't exist in /ini/.webapp.<mode>.ini, then the template file will first be copied from [`/ini/templates`](/web/ini/templates).
-All the .ini files directly inside of `/ini` are ignored in git, so you can create your own files locally to run the application with your account parameters without creating conflicts with committed code or leaking your details into source control.
+If a file doesn't exist in /ini/.webapp.<mode>.ini, then the template file will first be copied from [`ini/templates`](../ini/templates).
 
 ## Ini Parameters
 
@@ -45,12 +44,12 @@ Keep in mind, if the playerLicenseKey ini setting is provided, it will be used e
 
 ### additionalAllowedConfigSources[]
 
-An array of 8-character IDs (entered 1 per line) for app configs in your JWP account (or url paths) that can be used with the [`app-config=<config source>` query param](web-configuration#switching-between-app-configs).
-This may be useful for example if you have a staging or experimental config that you want to be able to test on your site using the [`app-config` query parameter](web-configuration#switching-between-app-configs) without changing the default config that the application loads with for all of your users.
-See [.webapp.test.ini](/web/ini/templates/.webapp.test.ini) for an example.
+An array of 8-character IDs (entered 1 per line) for app configs in your JWP account (or url paths) that can be used with the [`app-config=<config source>` query param](web-configuration.md#switching-between-app-configs).
+This may be useful, for example, if you have a staging or experimental config that you want to be able to test on your site using the [`app-config` query parameter](web-configuration.md#switching-between-app-configs) without changing the default config that the application loads with for all of your users.
+See [.webapp.test.ini](../ini/templates/.webapp.test.ini) for an example.
 
 ### UNSAFE_allowAnyConfigSource
 
-Boolean flag which if true, enables **ANY** 8-character app config ID (or path) to be specified with the [`app-config=<config source>` query param](web-configuration#switching-between-app-configs).
+Boolean flag, which, if true, enables **ANY** 8-character app config ID (or path) to be specified with the [`app-config=<config source>` query param](web-configuration.md#switching-between-app-configs).
 
-> _**Warning:** Generally the `UNSAFE_allowAnyConfigSource` option should only be used for dev, test, or demo deployments, because it will allow anyone to create URL's that specify any config to be displayed on your domain._
+> _**Warning:** Generally the `UNSAFE_allowAnyConfigSource` option should only be used for dev, test, or demo deployments, because it will allow anyone to create URLs that specify any config to be displayed on your domain._
diff --git a/platforms/web/docs/web-configuration.md b/platforms/web/docs/web-configuration.md
index 5db53a1ec..0e1761be6 100644
--- a/platforms/web/docs/web-configuration.md
+++ b/platforms/web/docs/web-configuration.md
@@ -2,7 +2,7 @@
 
 ## Configuration File Source
 
-Which app config file the application uses is determined by the [ini file](../platforms/web/docs/initialization-file.md).
+The [ini file](initialization-file.md) determines which app config file the application uses.
 
 You can specify the default that the application starts with and also which config, if any, it will allow to be set using the [`app-config=<config source>` query param](#switching-between-app-configs).
 The location is usually specified by the 8-character ID (i.e. `gnnuzabk`) of the App Config from your JWP account, in which case the file will be loaded from the JW Player App Config delivery endpoint (i.e. `https://cdn.jwplayer.com/apps/configs/gnnuzabk.json`).
@@ -10,12 +10,14 @@ You may also specify a relative or absolute URL.
 
 ### Switching between app configs
 
-As mentioned above, if you have 1 or more additional allowed sources (see additionalAllowedConfigSources in [`initialization-file`](initialization-file.md)), you can switch between them by adding `app-config=<config source>` as a query parameter in the web app URL in your browser (i.e. `https://<your domain>/?app-config=gnnuzabk`).
+As mentioned above, if you have one or more additional allowed sources (see additionalAllowedConfigSources in [`initialization-file`](initialization-file.md)), you can switch between them by adding `app-config=<config source>` as a query parameter in the web app URL in your browser (i.e. `https://<your domain>/?app-config=gnnuzabk`).
 
 The parameter is automatically evaluated, loaded, and stored in browser session storage and should remain part of the url as the user navigates around the site.
 
-> _Note: Be aware that this mechanism only sets the config for the local machine, browser, and session that you are accessing the site with and it does not change the default hosted app for other users._
+> _Note: Be aware that this mechanism only sets the config for the local machine, browser, and session that you are accessing the site with, and it does not change the default hosted app for other users._
 
-Even sharing URL's should work as long as the query parameter of the desired config is part of the URL. However, once the query parameter is removed and the stored value in the session is released, the application will revert to loading the default config source.
+Even sharing a URL should work as long as the query parameter of the desired config is part of the URL. 
+However, once the query parameter is removed and the stored value in the session is released, 
+the application will revert to loading the default config source.
 
 > _Note: to clear the value from session storage and return to the default, you can navigate to the site with a blank query parameter value (i.e. `?app-config=`)_

From 0a9817a9b6f5bbfaae5ce5967bbf3c16436d2f15 Mon Sep 17 00:00:00 2001
From: Anton Lantukh <alantukh@jwplayer.com>
Date: Mon, 18 Mar 2024 17:52:56 +0100
Subject: [PATCH 072/128] feat(project): update default content-type schemas

---
 package.json                             |  1 +
 platforms/web/package.json               |  1 -
 scripts/content-types/content-types.json | 17 +++++++++--------
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index aca4377d8..8b1df73aa 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "lint:prettier": "prettier --check \"{**/*,*}.{js,ts,jsx,tsx}\"",
     "lint:stylelint": "stylelint '**/*.{css,scss}'",
     "lint:ts": "tsc --pretty --noEmit -p ./scripts && yarn workspaces run lint:ts",
+    "load-content-types": "ts-node ./scripts/content-types/load-content-types",
     "pre-commit": "yarn depcheck && lint-staged",
     "prepare": "husky install",
     "test": "TZ=UTC LC_ALL=en_US.UTF-8 vitest run",
diff --git a/platforms/web/package.json b/platforms/web/package.json
index 932880903..e7606048e 100644
--- a/platforms/web/package.json
+++ b/platforms/web/package.json
@@ -15,7 +15,6 @@
     "codecept:mobile": "cd test-e2e && rm -rf \"./output/mobile\" && codeceptjs run-workers --suites ${WORKER_COUNT:=8} --config ./codecept.mobile.cjs",
     "generate-pwa-assets": "pwa-assets-generator",
     "lint:ts": "tsc --pretty --noEmit -p ./ && tsc --pretty --noEmit -p ./test-e2e",
-    "load-content-types": "npx ts-node ./scripts/content-types/load-content-types",
     "serve-report:desktop": "cd test-e2e && allure serve \"./output/desktop\"",
     "serve-report:mobile": "cd test-e2e && allure serve \"./output/mobile\"",
     "start": "vite",
diff --git a/scripts/content-types/content-types.json b/scripts/content-types/content-types.json
index c086bc2ab..93b896f23 100644
--- a/scripts/content-types/content-types.json
+++ b/scripts/content-types/content-types.json
@@ -99,19 +99,20 @@
     "liveStatus": {
       "param": "VCH.EventState",
       "label": "Status",
-      "description": "Do Not Modify - This is the state of the live event (populated automatically)",
+      "read_only": true,
+      "description": "This field will be populated automatically",
       "details": {
         "field_type": "input",
-        "placeholder": "This value will be populated automatically"
+        "placeholder": "Populated automatically"
       }
     },
     "liveStartTime": {
       "param": "VCH.ScheduledStart",
       "label": "Start Time",
-      "description": "Do Not Modify - This is the schedules start time of the live event (populated automatically)",
+      "read_only": true,
+      "description": "This field will be populated automatically",
       "details": {
-        "field_type": "input",
-        "placeholder": "This value will be populated automatically"
+        "field_type": "date_time"
       }
     }
   },
@@ -243,10 +244,10 @@
             {
               "param": "VCH.ScheduledEnd",
               "label": "End Time",
-              "description": "Do not Modify - Live event start time (populated automatically)",
+              "read_only": true,
+              "description": "This field will be populated automatically",
               "details": {
-                "field_type": "input",
-                "placeholder": "This value will be populated automatically"
+                "field_type": "date_time"
               }
             }
           ]

From 72325a63d43ca19f43b9ac1d76a024037889aab0 Mon Sep 17 00:00:00 2001
From: Anton Lantukh <alantukh@jwplayer.com>
Date: Thu, 21 Mar 2024 13:15:33 +0100
Subject: [PATCH 073/128] fix(project): unused dep

---
 platforms/web/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/platforms/web/package.json b/platforms/web/package.json
index e7606048e..15420174b 100644
--- a/platforms/web/package.json
+++ b/platforms/web/package.json
@@ -67,7 +67,6 @@
     "sharp": "^0.33.2",
     "stylelint": "^15.11.0",
     "stylelint-config-jwp": "*",
-    "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.0",
     "vi-fetch": "^0.8.0",
     "vite": "^5.1.5",

From f52a0f3377ed1c0d22e47f27995c597d7ec71e55 Mon Sep 17 00:00:00 2001
From: Melissa 't Hart <melissa@videodock.com>
Date: Thu, 21 Mar 2024 14:53:57 +0100
Subject: [PATCH 074/128] fix(project): ensure modals obscure underlying
 elements

---
 packages/ui-react/src/containers/Layout/Layout.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss
index c38ad5eea..3c8262988 100644
--- a/packages/ui-react/src/containers/Layout/Layout.module.scss
+++ b/packages/ui-react/src/containers/Layout/Layout.module.scss
@@ -3,6 +3,7 @@
 
 .layout {
   position: relative;
+  z-index: 0;
 }
 
 .buttonContainer {

From 71433abfca80431243effc246afdbe8c6901521e Mon Sep 17 00:00:00 2001
From: Anton Lantukh <alantukh@jwplayer.com>
Date: Thu, 21 Mar 2024 16:03:02 +0100
Subject: [PATCH 075/128] feat(project): add app content search

---
 packages/common/src/services/ApiService.ts    | 13 +++--
 packages/common/src/services/ConfigService.ts |  1 +
 packages/common/src/stores/ConfigStore.ts     |  1 +
 packages/common/src/utils/configSchema.ts     |  1 +
 packages/common/types/config.ts               |  1 +
 packages/hooks-react/src/useSearch.ts         | 54 +++++++++++++++++++
 .../ui-react/src/containers/Layout/Layout.tsx |  9 ++--
 .../ui-react/src/pages/Home/Home.test.tsx     |  1 +
 packages/ui-react/src/pages/Search/Search.tsx |  4 +-
 9 files changed, 75 insertions(+), 10 deletions(-)
 create mode 100644 packages/hooks-react/src/useSearch.ts

diff --git a/packages/common/src/services/ApiService.ts b/packages/common/src/services/ApiService.ts
index 481e8db4a..919822364 100644
--- a/packages/common/src/services/ApiService.ts
+++ b/packages/common/src/services/ApiService.ts
@@ -246,13 +246,16 @@ export default class ApiService {
     return (await getDataOrThrow(response)) as AdSchedule;
   };
 
-  getMediaAds = async (url: string, mediaId: string): Promise<AdSchedule | undefined> => {
-    const urlWithQuery = createURL(url, {
-      media_id: mediaId,
+  getAppContentSearch = async (siteId: string, searchQuery: string | undefined) => {
+    const pathname = `/v2/sites/${siteId}/app_content/media/search`;
+
+    const url = createURL(`${env.APP_API_BASE_URL}${pathname}`, {
+      search_query: searchQuery,
     });
 
-    const response = await fetch(urlWithQuery, { credentials: 'omit' });
+    const response = await fetch(url);
+    const data = (await getDataOrThrow(response)) as Playlist;
 
-    return (await getDataOrThrow(response)) as AdSchedule;
+    return this.transformPlaylist(data);
   };
 }
diff --git a/packages/common/src/services/ConfigService.ts b/packages/common/src/services/ConfigService.ts
index 6c17f682e..c775a87c8 100644
--- a/packages/common/src/services/ConfigService.ts
+++ b/packages/common/src/services/ConfigService.ts
@@ -22,6 +22,7 @@ export default class ConfigService {
     id: '',
     siteName: '',
     description: '',
+    siteId: '',
     assets: {
       banner: '/images/logo.png',
     },
diff --git a/packages/common/src/stores/ConfigStore.ts b/packages/common/src/stores/ConfigStore.ts
index 854a60977..4a71a4115 100644
--- a/packages/common/src/stores/ConfigStore.ts
+++ b/packages/common/src/stores/ConfigStore.ts
@@ -21,6 +21,7 @@ export const useConfigStore = createStore<ConfigState>('ConfigStore', () => ({
     siteName: '',
     description: '',
     player: '',
+    siteId: '',
     assets: {},
     content: [],
     menu: [],
diff --git a/packages/common/src/utils/configSchema.ts b/packages/common/src/utils/configSchema.ts
index af6ffc382..e564a4eac 100644
--- a/packages/common/src/utils/configSchema.ts
+++ b/packages/common/src/utils/configSchema.ts
@@ -50,6 +50,7 @@ export const configSchema: SchemaOf<Config> = object({
   description: string().defined(),
   analyticsToken: string().nullable(),
   adSchedule: string().nullable(),
+  siteId: string().defined(),
   assets: object({
     banner: string().notRequired().nullable(),
   }).notRequired(),
diff --git a/packages/common/types/config.ts b/packages/common/types/config.ts
index 7e60bfee8..fa1a790f2 100644
--- a/packages/common/types/config.ts
+++ b/packages/common/types/config.ts
@@ -22,6 +22,7 @@ export type Config = {
   custom?: Record<string, unknown>;
   contentSigningService?: ContentSigningConfig;
   contentProtection?: ContentProtection;
+  siteId: string;
 };
 
 export type ContentSigningConfig = {
diff --git a/packages/hooks-react/src/useSearch.ts b/packages/hooks-react/src/useSearch.ts
new file mode 100644
index 000000000..76d0acb43
--- /dev/null
+++ b/packages/hooks-react/src/useSearch.ts
@@ -0,0 +1,54 @@
+import { useQuery, type UseQueryResult } from 'react-query';
+import { shallow } from '@jwp/ott-common/src/utils/compare';
+import ApiService from '@jwp/ott-common/src/services/ApiService';
+import { getModule } from '@jwp/ott-common/src/modules/container';
+import type { ApiError } from '@jwp/ott-common/src/utils/api';
+import usePlaylist from '@jwp/ott-hooks-react/src/usePlaylist';
+import { CACHE_TIME, STALE_TIME } from '@jwp/ott-common/src/constants';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
+import { isTruthyCustomParamValue } from '@jwp/ott-common/src/utils/common';
+import type { Playlist } from '@jwp/ott-common/types/playlist';
+import { generatePlaylistPlaceholder } from '@jwp/ott-common/src/utils/collection';
+
+const placeholderData = generatePlaylistPlaceholder(30);
+
+const useAppContentSearch = ({ siteId, enabled, query }: { query: string; siteId: string; enabled: boolean }) => {
+  const apiService = getModule(ApiService);
+
+  const appContentSearchQuery: UseQueryResult<Playlist | undefined, ApiError> = useQuery(
+    ['app-search', query],
+    async () => {
+      const searchResult = await apiService.getAppContentSearch(siteId, query);
+
+      return searchResult;
+    },
+    {
+      placeholderData: enabled ? placeholderData : undefined,
+      enabled: enabled,
+      staleTime: STALE_TIME,
+      cacheTime: CACHE_TIME,
+    },
+  );
+
+  return appContentSearchQuery;
+};
+
+export const useSearch = (query: string) => {
+  const { config } = useConfigStore(({ config }) => ({ config }), shallow);
+
+  const siteId = config?.siteId;
+  const searchPlaylist = config?.features?.searchPlaylist;
+  const hasAppContentSearch = isTruthyCustomParamValue(config?.custom?.appContentSearch);
+
+  const playlistQuery = usePlaylist(searchPlaylist || '', { search: query || '' }, !hasAppContentSearch, !!query);
+  // New app content search flow
+  const appContentSearchQuery = useAppContentSearch({ siteId, enabled: hasAppContentSearch, query });
+
+  return hasAppContentSearch
+    ? { data: appContentSearchQuery.data, isFetching: appContentSearchQuery.isFetching, error: appContentSearchQuery.error }
+    : {
+        isFetching: playlistQuery.isFetching,
+        error: playlistQuery.error,
+        data: playlistQuery.data,
+      };
+};
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index a9d8bbbc3..845f79cc3 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -10,7 +10,7 @@ import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
 import ProfileController from '@jwp/ott-common/src/controllers/ProfileController';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
-import { unicodeToChar } from '@jwp/ott-common/src/utils/common';
+import { isTruthyCustomParamValue, unicodeToChar } from '@jwp/ott-common/src/utils/common';
 import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
 import useSearchQueryUpdater from '@jwp/ott-ui-react/src/hooks/useSearchQueryUpdater';
 import { useProfiles, useSelectProfile } from '@jwp/ott-hooks-react/src/useProfiles';
@@ -40,7 +40,7 @@ const Layout = () => {
   const userMenuTitleId = useOpaqueId('usermenu-title');
   const isLoggedIn = !!useAccountStore(({ user }) => user);
   const favoritesEnabled = !!config.features?.favoritesList;
-  const { menu, assets, siteName, description, features, styling } = config;
+  const { menu, assets, siteName, description, features, styling, custom } = config;
   const metaDescription = description || t('default_description');
   const { footerText: configFooterText } = styling || {};
   const footerText = configFooterText || unicodeToChar(env.APP_FOOTER_TEXT);
@@ -48,6 +48,9 @@ const Layout = () => {
   const profileController = getModule(ProfileController, false);
 
   const { searchPlaylist } = features || {};
+  const hasAppContentSearch = isTruthyCustomParamValue(custom?.appContentSearch);
+  const searchEnabled = !!searchPlaylist || hasAppContentSearch;
+
   const currentLanguage = useMemo(() => supportedLanguages.find(({ code }) => code === i18n.language), [i18n.language, supportedLanguages]);
 
   const {
@@ -160,7 +163,7 @@ const Layout = () => {
         <Header
           onMenuButtonClick={() => setSideBarOpen(true)}
           logoSrc={banner}
-          searchEnabled={!!searchPlaylist}
+          searchEnabled={searchEnabled}
           searchBarProps={{
             query: searchQuery,
             onQueryChange: (event) => updateSearchQuery(event.target.value),
diff --git a/packages/ui-react/src/pages/Home/Home.test.tsx b/packages/ui-react/src/pages/Home/Home.test.tsx
index bba69ce89..c4b711670 100644
--- a/packages/ui-react/src/pages/Home/Home.test.tsx
+++ b/packages/ui-react/src/pages/Home/Home.test.tsx
@@ -9,6 +9,7 @@ describe('Home Component tests', () => {
   test('Home test', () => {
     useConfigStore.setState({
       config: {
+        siteId: 'test',
         description: '',
         integrations: {},
         assets: {},
diff --git a/packages/ui-react/src/pages/Search/Search.tsx b/packages/ui-react/src/pages/Search/Search.tsx
index 81366cb42..c43896d41 100644
--- a/packages/ui-react/src/pages/Search/Search.tsx
+++ b/packages/ui-react/src/pages/Search/Search.tsx
@@ -10,7 +10,7 @@ import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { mediaURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import useFirstRender from '@jwp/ott-hooks-react/src/useFirstRender';
 import useSearchQueryUpdater from '@jwp/ott-ui-react/src/hooks/useSearchQueryUpdater';
-import usePlaylist from '@jwp/ott-hooks-react/src/usePlaylist';
+import { useSearch } from '@jwp/ott-hooks-react/src/useSearch';
 import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
 
 import CardGrid from '../../components/CardGrid/CardGrid';
@@ -29,7 +29,7 @@ const Search = () => {
   const { updateSearchQuery } = useSearchQueryUpdater();
   const params = useParams();
   const query = params['*'];
-  const { isFetching, error, data: playlist } = usePlaylist(features?.searchPlaylist || '', { search: query || '' }, true, !!query);
+  const { isFetching, error, data: playlist } = useSearch(query || '');
 
   // User
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);

From 73830ce1938f0c57efa3f83fdafed6f1a029a108 Mon Sep 17 00:00:00 2001
From: Conventional Changelog Action <conventional.changelog.action@github.com>
Date: Mon, 25 Mar 2024 11:47:32 +0000
Subject: [PATCH 076/128] chore(release): v6.0.0

---
 CHANGELOG.md | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 package.json |  2 +-
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5402f754e..5591a712e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,66 @@
+## [6.0.0](https://github.com/jwplayer/ott-web-app/compare/v5.1.1...v6.0.0) (2024-03-25)
+
+
+### ⚠ BREAKING CHANGES
+
+* **project:** restructure for multiplatforms with workspaces (#435)
+
+### Features
+
+* **a11y:** many accessibility optimisations ([cc02259](https://github.com/jwplayer/ott-web-app/commit/cc02259ddb8faeed27813ddce850b5653fe1d0d3)), closes [#48](https://github.com/jwplayer/ott-web-app/issues/48) [#47](https://github.com/jwplayer/ott-web-app/issues/47) [#46](https://github.com/jwplayer/ott-web-app/issues/46)
+* **a11y:** update font colors for contrast and adjust active state in header ([#76](https://github.com/jwplayer/ott-web-app/issues/76)) ([6444282](https://github.com/jwplayer/ott-web-app/commit/6444282c6c2adedb93980904ba968c8d5bf2680d))
+* accessibility improvements and bug fixes ([82b5967](https://github.com/jwplayer/ott-web-app/commit/82b5967dcf9415aba21e8f6c7bdaabd57f1589af)), closes [#127](https://github.com/jwplayer/ott-web-app/issues/127) [#109](https://github.com/jwplayer/ott-web-app/issues/109) [#115](https://github.com/jwplayer/ott-web-app/issues/115) [#117](https://github.com/jwplayer/ott-web-app/issues/117) [#116](https://github.com/jwplayer/ott-web-app/issues/116) [#121](https://github.com/jwplayer/ott-web-app/issues/121) [#125](https://github.com/jwplayer/ott-web-app/issues/125)
+* **payment:** disable deprecated receipts cleeng ([#458](https://github.com/jwplayer/ott-web-app/issues/458)) ([d37905d](https://github.com/jwplayer/ott-web-app/commit/d37905df4022103e3fdf62ad936d58af6e12617c))
+* **project:** add app content search ([71433ab](https://github.com/jwplayer/ott-web-app/commit/71433abfca80431243effc246afdbe8c6901521e))
+* **project:** customizable footer through env-var ([9d8ff15](https://github.com/jwplayer/ott-web-app/commit/9d8ff150dc298880bd4cdc1323a4fc68f8d0fcba))
+* **project:** dynamic gtm snippet ([6babace](https://github.com/jwplayer/ott-web-app/commit/6babacefc3ae56191625207436fc6faaaca10445))
+* **project:** favicons in different sizes ([a1c6188](https://github.com/jwplayer/ott-web-app/commit/a1c6188ae0e6b634977d9ac0642bad437a31df3b))
+* **project:** restructure for multiplatforms with workspaces ([#435](https://github.com/jwplayer/ott-web-app/issues/435)) ([3e3e2b1](https://github.com/jwplayer/ott-web-app/commit/3e3e2b14c4926e596fad46c2ea7cc99dbced05f0)), closes [#8](https://github.com/jwplayer/ott-web-app/issues/8)
+* **project:** update default content-type schemas ([0a9817a](https://github.com/jwplayer/ott-web-app/commit/0a9817a9b6f5bbfaae5ce5967bbf3c16436d2f15))
+* underline for active header item and add lineair gradient ([1d2f25f](https://github.com/jwplayer/ott-web-app/commit/1d2f25f04dc06463a0a37aa4c6fddabab455cdcf))
+* **watchhistory:** change max items limit ([#418](https://github.com/jwplayer/ott-web-app/issues/418)) ([d7db57a](https://github.com/jwplayer/ott-web-app/commit/d7db57ab330630c270412ca8fa39ea94052d7675))
+
+
+### Bug Fixes
+
+* **a11y:** close search bar when pressing escape ([7a14497](https://github.com/jwplayer/ott-web-app/commit/7a14497224bc8d159bda1ac3238cc0eb566b5437))
+* **a11y:** constrast enhancement for search field ([b4c3230](https://github.com/jwplayer/ott-web-app/commit/b4c323026bc713519fcd6e1ac8efbb68dc8f8fff))
+* **a11y:** format date call caused an error to be raised ([aef1415](https://github.com/jwplayer/ott-web-app/commit/aef1415229901704af0e15b57fd3a0d42040cbe7))
+* **a11y:** prevent duplicate global a11y selectors ([b3ccaff](https://github.com/jwplayer/ott-web-app/commit/b3ccaffe4ea1249d7ad5a80cfe6e8e20a94ef3b7))
+* **a11y:** remove outline when user is not tabbing ([5fe1665](https://github.com/jwplayer/ott-web-app/commit/5fe1665ad30e08dd7eed234c93243da7df748cce))
+* **a11y:** shelf item navigation with screen reader ([91dc66c](https://github.com/jwplayer/ott-web-app/commit/91dc66cd6b6bdbae3b48c0454fe1da335acc9f91))
+* **account:** delete account error ([a2885eb](https://github.com/jwplayer/ott-web-app/commit/a2885eb34598b413e4b81f9cdbb542bbbd849a64))
+* **auth:** capture error to prevent misleading “wrong combination” error ([588f69a](https://github.com/jwplayer/ott-web-app/commit/588f69ac9034736ddf7804bbebaddb141fe30860))
+* click not working in layout grid ([2ded57b](https://github.com/jwplayer/ott-web-app/commit/2ded57b41bbac7a08f5c1d0eeccb149fdcde3242))
+* e2e test optimisations and small fixes ([b700fbb](https://github.com/jwplayer/ott-web-app/commit/b700fbb7ea31cde67740bab99246a0b705058c55))
+* e2e tests for a11y ([c4d09c5](https://github.com/jwplayer/ott-web-app/commit/c4d09c52494b20e0d8e31fb4595f898729817255))
+* enter key not closing the account modal ([1791b4c](https://github.com/jwplayer/ott-web-app/commit/1791b4ca91e161250e354ae96e1d32f0b7bf30c9))
+* favorites and history validation error ([3deabfc](https://github.com/jwplayer/ott-web-app/commit/3deabfc766a75c12ab122a775376449e316ff232))
+* footer overlap fix ([bf79d10](https://github.com/jwplayer/ott-web-app/commit/bf79d108356418c80cfe7a9ddc2496977ae9bb17))
+* hide start watching button in avod platform ([86b461f](https://github.com/jwplayer/ott-web-app/commit/86b461fc9df4b92401055b8c56d8e9d5aec13c99))
+* language menu icon not centered ([ddcfc91](https://github.com/jwplayer/ott-web-app/commit/ddcfc91973548d6cdacc084dd6b88bb3453c6d36))
+* layout grid arrow down and end problem ([6a291a7](https://github.com/jwplayer/ott-web-app/commit/6a291a77f51626c46c082f268f454ff00cde9310))
+* layout grid home and page down problem ([a6305ef](https://github.com/jwplayer/ott-web-app/commit/a6305efbe94b0261786a2adcb76a6530aff3e4cc))
+* logo and header layout issues ([a0cca10](https://github.com/jwplayer/ott-web-app/commit/a0cca10419b9a74b4761d5701e242db2c4e8d562))
+* **menu:** ensure logo does not exceed width of the header ([ea4af42](https://github.com/jwplayer/ott-web-app/commit/ea4af42e23ddefce292a0784c8a0db9b98e4895d))
+* **payment:** incorrect couponCode success message ([c97c59b](https://github.com/jwplayer/ott-web-app/commit/c97c59b7268d540ee37cdb0bb41beb72d8946a7e))
+* **payment:** redirect after incorrect couponcode entry ([ca71f29](https://github.com/jwplayer/ott-web-app/commit/ca71f29298ea6c4af2f5c2b6c4f6379d68385df0))
+* **payment:** subscription offer panel shown for authvod+tvod ([d63b056](https://github.com/jwplayer/ott-web-app/commit/d63b0562e74c624bae0690048467442595928fe2))
+* **payment:** tvod offer not showing in AuthVOD platform ([d01d1b7](https://github.com/jwplayer/ott-web-app/commit/d01d1b71aba628feeb4510cb9b0b9d4132af3cb7))
+* personal shelves restoration ([2741eac](https://github.com/jwplayer/ott-web-app/commit/2741eac5331657ed6156a9e5fba1906c8623227b))
+* **player:** inlineplayer not supporting tvod ([bb593e9](https://github.com/jwplayer/ott-web-app/commit/bb593e97ce2635d9c33c1d027da51075509a7462))
+* **project:** ensure modals obscure underlying elements ([f52a0f3](https://github.com/jwplayer/ott-web-app/commit/f52a0f3377ed1c0d22e47f27995c597d7ec71e55))
+* **project:** fix live stream duration check for ott plugin ([#460](https://github.com/jwplayer/ott-web-app/issues/460)) ([69eff3c](https://github.com/jwplayer/ott-web-app/commit/69eff3c1e9763d2b80e1669809323ee9c1de5f63))
+* **project:** show footer when custom footer is provided ([6503267](https://github.com/jwplayer/ott-web-app/commit/65032674e0ca75e129e5d6fca35e54fc6b690f3d))
+* **project:** undouble serieIds to prevent crash ([ca3d38e](https://github.com/jwplayer/ott-web-app/commit/ca3d38e2ad82235a84cb658da0174095c2eed10e))
+* **project:** unused dep ([72325a6](https://github.com/jwplayer/ott-web-app/commit/72325a63d43ca19f43b9ac1d76a024037889aab0))
+* related videos title layout issue ([361c58a](https://github.com/jwplayer/ott-web-app/commit/361c58a53cb6ae56b84cb6751c7b4ad3d64c702b))
+* restore personal shelves after registration ([3fdb220](https://github.com/jwplayer/ott-web-app/commit/3fdb220ef988383e6af80b72efb7c7d27e6bccb7))
+* root error screen for unexpected errors ([320fe44](https://github.com/jwplayer/ott-web-app/commit/320fe4402f7338816825471de52c21aedb95a144))
+* set wrong loading state in early return ([0837944](https://github.com/jwplayer/ott-web-app/commit/0837944dc4d022ecfe95d6e3f30959d943be9e99))
+* update order error handling ([bf3e5b5](https://github.com/jwplayer/ott-web-app/commit/bf3e5b575624580a38301968a63023748bd9a6df))
+* **user:** tvod subscription not reloaded after login for authvod/avod ([7de84ae](https://github.com/jwplayer/ott-web-app/commit/7de84ae37f174c04bdea26af1818721dfe9956d8))
+
 ## [5.1.1](https://github.com/jwplayer/ott-web-app/compare/v5.1.0...v5.1.1) (2024-01-24)
 
 
diff --git a/package.json b/package.json
index 8b1df73aa..6792857f4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jwp/ott",
-  "version": "5.1.1",
+  "version": "6.0.0",
   "private": true,
   "license": "Apache-2.0",
   "repository": "https://github.com/jwplayer/ott-web-app.git",

From a34f6863480b075d82c80a062833899fd26bbdc5 Mon Sep 17 00:00:00 2001
From: Anton Lantukh <alantukh@jwplayer.com>
Date: Mon, 25 Mar 2024 13:25:24 +0100
Subject: [PATCH 077/128] feat(project): update translations

---
 platforms/web/public/locales/en/account.json |  3 +--
 platforms/web/public/locales/es/account.json | 13 +------------
 platforms/web/public/locales/es/search.json  |  1 -
 platforms/web/public/locales/es/user.json    |  1 -
 platforms/web/public/locales/es/video.json   |  1 -
 scripts/i18next/diff-translations.ts         |  2 +-
 6 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/platforms/web/public/locales/en/account.json b/platforms/web/public/locales/en/account.json
index af22d14b7..7e2d7e611 100644
--- a/platforms/web/public/locales/en/account.json
+++ b/platforms/web/public/locales/en/account.json
@@ -148,7 +148,7 @@
     "password_helper_text": "Use a minimum of 8 characters (case sensitive) with at least one number",
     "password_strength": {
       "fair": "Fair",
-      "invalid": "",
+      "invalid": "Invalid",
       "strong": "Strong",
       "very_strong": "Very strong",
       "weak": "Weak"
@@ -192,7 +192,6 @@
     "password_helper_text": "Use a minimum of 8 characters (case sensitive) with at least one number",
     "password_reset": "Password reset",
     "password_reset_success": "Password reset successful",
-    "password_reset_text": "",
     "password_strength": "Although your password meets the criteria for a strong password, it includes elements that are not advisable, such as prohibited phrases or repeated words. Please modify it to ensure account safety.",
     "passwords_do_not_match": "Passwords do not match",
     "repeat_new_password": "Repeat new password",
diff --git a/platforms/web/public/locales/es/account.json b/platforms/web/public/locales/es/account.json
index 996819818..12c4fdd8a 100644
--- a/platforms/web/public/locales/es/account.json
+++ b/platforms/web/public/locales/es/account.json
@@ -18,10 +18,8 @@
     "credit_card": "Tarjeta de crédito",
     "credit_card_name": "Nombre de la tarjeta de crédito",
     "days_trial_one": "Se te cobrará mañana.",
-    "days_trial_many": "",
     "days_trial_other": "Se te cobrará después de {{count}} días.",
     "discount_period_one": "Durante el primer {{period}}",
-    "discount_period_many": "",
     "discount_period_other": "Durante los primeros {{count}} {{period}}",
     "free_trial_discount": "Prueba gratuita",
     "go_back_to_checkout": "Volver a la caja",
@@ -39,7 +37,6 @@
     "paypal": "PayPal",
     "paypal_instructions": "Al hacer clic en 'Continuar', serás redirigido al sitio de PayPal.",
     "periods_trial_one": "Se te cobrará después de un {{period}}.",
-    "periods_trial_many": "",
     "periods_trial_other": "Se te cobrará después de {{count}} {{period}}.",
     "redeem_coupon": "Canjear cupón",
     "save": "Ahorrar",
@@ -60,10 +57,8 @@
     "benefits": {
       "cancel_anytime": "Cancelar en cualquier momento",
       "first_days_free_one": "Primer día gratis",
-      "first_days_free_many": "",
       "first_days_free_other": "Primeros {{count}} días gratis",
       "first_periods_free_one": "Primer {{period}} gratis",
-      "first_periods_free_many": "",
       "first_periods_free_other": "Primeros {{count}} {{period}} gratis",
       "watch_on_all_devices": "Ver en todos los dispositivos"
     },
@@ -76,7 +71,6 @@
     "subscription": "Suscripción",
     "title": "Elige un plan",
     "tvod_access_one": "Acceso de {{count}} {{period}}",
-    "tvod_access_many": "",
     "tvod_access_other": "Acceso de {{count}} {{period}}",
     "watch_this_on_platform": "Ver esto en {{siteName}}",
     "yearly": "Anual",
@@ -112,18 +106,14 @@
   },
   "periods": {
     "day_one": "día",
-    "day_many": "",
     "day_other": "días",
     "month": "mensual",
     "month_one": "mes",
-    "month_many": "",
     "month_other": "meses",
     "week_one": "semana",
-    "week_many": "",
     "week_other": "semanas",
     "year": "anual",
     "year_one": "año",
-    "year_many": "",
     "year_other": "años"
   },
   "personal_details": {
@@ -158,7 +148,7 @@
     "password_helper_text": "Utiliza un mínimo de 8 caracteres (distingue entre mayúsculas y minúsculas) con al menos un número",
     "password_strength": {
       "fair": "Regular",
-      "invalid": "",
+      "invalid": "Invalida",
       "strong": "Fuerte",
       "very_strong": "Muy fuerte",
       "weak": "Débil"
@@ -202,7 +192,6 @@
     "password_helper_text": "Utiliza un mínimo de 8 caracteres (distingue entre mayúsculas y minúsculas) con al menos un número",
     "password_reset": "Restablecimiento de contraseña",
     "password_reset_success": "Contraseña restablecida",
-    "password_reset_text": "",
     "password_strength": "Aunque tu contraseña cumple con los criterios de una contraseña segura, incluye elementos que no son recomendables, como frases prohibidas o palabras repetidas. Por favor, modifícala para garantizar la seguridad de tu cuenta.",
     "passwords_do_not_match": "Las contraseñas no coinciden",
     "repeat_new_password": "Repetir nueva contraseña",
diff --git a/platforms/web/public/locales/es/search.json b/platforms/web/public/locales/es/search.json
index d0dd7a1d6..5d9b5d23f 100644
--- a/platforms/web/public/locales/es/search.json
+++ b/platforms/web/public/locales/es/search.json
@@ -15,6 +15,5 @@
   "tip_two": "Hacer términos de búsqueda más generales",
   "tip_three": "Prueba con diferentes términos de búsqueda",
   "title_one": "{{count}} resultado para \"{{query}}\"",
-  "title_many": "",
   "title_other": "{{count}} resultados para \"{{query}}\""
 }
diff --git a/platforms/web/public/locales/es/user.json b/platforms/web/public/locales/es/user.json
index 1ec0dbe28..84a54688b 100644
--- a/platforms/web/public/locales/es/user.json
+++ b/platforms/web/public/locales/es/user.json
@@ -104,7 +104,6 @@
     "expiry_date": "Fecha de vencimiento",
     "granted_subscription": "Suscripción otorgada",
     "hidden_transactions_one": "Una transacción más",
-    "hidden_transactions_many": "",
     "hidden_transactions_other": "{{count}} transacciones más",
     "longer_than_usual": "El pago está tardando más de lo habitual. Por favor, inténtelo de nuevo más tarde.",
     "monthly_subscription": "Suscripción mensual",
diff --git a/platforms/web/public/locales/es/video.json b/platforms/web/public/locales/es/video.json
index 340b53136..26dc52abc 100644
--- a/platforms/web/public/locales/es/video.json
+++ b/platforms/web/public/locales/es/video.json
@@ -25,7 +25,6 @@
   "sign_up_to_start_watching": "¡Regístrate para comenzar a ver!",
   "start_watching": "Comenzar a ver",
   "total_episodes_one": "{{count}} episodio",
-  "total_episodes_many": "",
   "total_episodes_other": "{{count}} episodios",
   "trailer": "Tráiler",
   "watch_trailer": "Ver el tráiler"
diff --git a/scripts/i18next/diff-translations.ts b/scripts/i18next/diff-translations.ts
index 4553f0e54..bb131a90c 100644
--- a/scripts/i18next/diff-translations.ts
+++ b/scripts/i18next/diff-translations.ts
@@ -15,7 +15,7 @@ const changes: {
 function run() {
   execSync('git fetch');
 
-  const fileChanges = execSync('git diff -U200000 --no-prefix origin/release..origin/release-candidate public/locales')
+  const fileChanges = execSync('git diff -U200000 --no-prefix origin/release..origin/release-candidate platforms/web/public/locales')
     .toString()
     .split('\n')
     .filter((s) => !!s)

From b80ab0682fbde1c9f85f7ddacfbf22b433a38cfb Mon Sep 17 00:00:00 2001
From: Anton Lantukh <alantukh@jwplayer.com>
Date: Wed, 27 Mar 2024 12:33:26 +0100
Subject: [PATCH 078/128] fix(project): fix es translations

---
 platforms/web/public/locales/es/account.json | 18 +++++++++---------
 platforms/web/public/locales/es/common.json  |  4 ++--
 platforms/web/public/locales/es/demo.json    |  2 +-
 platforms/web/public/locales/es/menu.json    |  2 +-
 platforms/web/public/locales/es/user.json    |  2 +-
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/platforms/web/public/locales/es/account.json b/platforms/web/public/locales/es/account.json
index 12c4fdd8a..4c0c356e3 100644
--- a/platforms/web/public/locales/es/account.json
+++ b/platforms/web/public/locales/es/account.json
@@ -2,13 +2,13 @@
   "cancel_subscription": {
     "explanation": "Serás dado de baja de tu plan actual al hacer clic en el botón de cancelar suscripción a continuación.",
     "no_thanks": "No, gracias",
-    "title": "Lamentamos verte partir.",
+    "title": "Lamentamos que te vayas.",
     "unknown_error_occurred": "Se produjo un error desconocido, por favor inténtalo de nuevo más tarde.",
     "unsubscribe": "Cancelar suscripción"
   },
   "checkout": {
     "applicable_tax": "Impuesto aplicable ({{taxRate}}%)",
-    "card_details_updated": "Detalles de la tarjeta actualizados",
+    "card_details_updated": "Los detalles de tu tarjeta han sido actualizados",
     "card_holder_name": "Nombre del titular de la tarjeta",
     "close": "Cerrar",
     "continue": "Continuar",
@@ -22,7 +22,7 @@
     "discount_period_one": "Durante el primer {{period}}",
     "discount_period_other": "Durante los primeros {{count}} {{period}}",
     "free_trial_discount": "Prueba gratuita",
-    "go_back_to_checkout": "Volver a la caja",
+    "go_back_to_checkout": "Volver a la página de pago",
     "invalid_card_expiry": "Fecha de vencimiento Invalido para la tarjeta",
     "invalid_card_number": "Número de tarjeta inválido",
     "invalid_cvc_number": "Número de CVC inválido",
@@ -39,15 +39,15 @@
     "periods_trial_one": "Se te cobrará después de un {{period}}.",
     "periods_trial_other": "Se te cobrará después de {{count}} {{period}}.",
     "redeem_coupon": "Canjear cupón",
-    "save": "Ahorrar",
+    "save": "Guardar",
     "start_watching": "Comenzar a ver ({{countdown}})",
     "total_price": "Total",
-    "upgrade_error": "No se pudo actualizar la suscripción!",
+    "upgrade_error": "¡No se pudo actualizar la suscripción!",
     "upgrade_error_message": "Debido a un error desconocido, la actualización ha fallado. Póngase en contacto con un administrador.",
     "upgrade_pending": "¡Suscripción actualizada!",
     "upgrade_pending_message": "Su suscripción se actualizará después de la próxima fecha de facturación.",
     "upgrade_success": "¡Suscripción actualizada!",
-    "upgrade_success_message": "Su suscripción se actualiza y se puede utilizar de inmediato.",
+    "upgrade_success_message": "Su suscripción se actualizó y se puede utilizar de inmediato.",
     "waiting_for_payment": "Esperando el pago",
     "welcome_description": "Gracias por suscribirte a {{siteName}}. Disfruta de todo nuestro contenido.",
     "welcome_title": "Bienvenido/a a {{siteName}}",
@@ -55,7 +55,7 @@
   },
   "choose_offer": {
     "benefits": {
-      "cancel_anytime": "Cancelar en cualquier momento",
+      "cancel_anytime": "Cancele en cualquier momento",
       "first_days_free_one": "Primer día gratis",
       "first_days_free_other": "Primeros {{count}} días gratis",
       "first_periods_free_one": "Primer {{period}} gratis",
@@ -63,7 +63,7 @@
       "watch_on_all_devices": "Ver en todos los dispositivos"
     },
     "continue": "Continuar",
-    "field_required": "Este campo es obligatorio, selecciona una opción",
+    "field_required": "Este campo es obligatorio, por favor seleccione una opción",
     "monthly": "Mensual",
     "monthly_subscription": "Suscripción mensual",
     "no_pricing_available": "No hay opciones de precios disponibles en este momento.",
@@ -97,7 +97,7 @@
   },
   "payment": {
     "back_to_profile": "Volver al perfil",
-    "credit_card": "Credit card",
+    "credit_card": "Tarjeta de crédito",
     "edit_card": "Editar tarjeta",
     "longer_than_usual": "El pago está tardando más de lo habitual. Por favor, inténtelo de nuevo más tarde.",
     "paypal": "PayPal",
diff --git a/platforms/web/public/locales/es/common.json b/platforms/web/public/locales/es/common.json
index b44ec6beb..e5baa3040 100644
--- a/platforms/web/public/locales/es/common.json
+++ b/platforms/web/public/locales/es/common.json
@@ -1,7 +1,7 @@
 {
   "alert": {
     "close": "Cerrar",
-    "success": "Success",
+    "success": "Éxito",
     "title": "Se produjo un error"
   },
   "back": "Atrás",
@@ -11,7 +11,7 @@
     "close": "Cancelar",
     "confirm": "Sí"
   },
-  "default_description": "La OTT WebApp de JW es un sitio web de videos de código abierto generado dinamicamente.",
+  "default_description": "OTT WebApp de JW es un sitio web de videos de código abierto generado dinamicamente.",
   "default_site_name": "Mi aplicación OTT",
   "filter_videos_by": "Filtrar videos por {{name}}",
   "filter_videos_by_genre": "Filtrar videos por género",
diff --git a/platforms/web/public/locales/es/demo.json b/platforms/web/public/locales/es/demo.json
index 3b70551b3..86eee4251 100644
--- a/platforms/web/public/locales/es/demo.json
+++ b/platforms/web/public/locales/es/demo.json
@@ -1,6 +1,6 @@
 {
   "app_config_learn_more": "Más información sobre App Configs",
-  "app_config_not_found": "Configuración de aplicación inválida o no encontrada",
+  "app_config_not_found": "App Config inválida o no encontrada",
   "cancel_config_id": "Cancelar",
   "click_to_unselect_config": "(haz clic aquí para deseleccionar esta configuración)",
   "currently_previewing_config": "Actualmente estás previsualizando la configuración: '{{configSource}}'",
diff --git a/platforms/web/public/locales/es/menu.json b/platforms/web/public/locales/es/menu.json
index e310ce7bf..28fb0e7b9 100644
--- a/platforms/web/public/locales/es/menu.json
+++ b/platforms/web/public/locales/es/menu.json
@@ -1,6 +1,6 @@
 {
   "close_menu": "Cerrar menú",
-  "language_menu": "Abrir menú de idioma",
+  "language_menu": "Abrir el menú de idiomas",
   "open_menu": "Abrir menú",
   "open_user_menu": "Abrir menú de usuario",
   "profile_icon": "Icono de perfil",
diff --git a/platforms/web/public/locales/es/user.json b/platforms/web/public/locales/es/user.json
index 84a54688b..66d0eff36 100644
--- a/platforms/web/public/locales/es/user.json
+++ b/platforms/web/public/locales/es/user.json
@@ -12,7 +12,7 @@
     "delete_account": {
       "body": "Elimine permanentemente su cuenta y todo su contenido.",
       "error": "Ocurrió un error al eliminar su cuenta. Inténtalo de nuevo.",
-      "invalid_credentials": "¡Contraseña incorrecta!",
+      "invalid_credentials": "La contraseña ingresada no es válida",
       "modal": {
         "description": "Introduce la contraseña para continuar",
         "placeholder": "Ingresa tu contraseña",

From 9001a21c9a4b0bd35db6c182e2f46b4480983dc8 Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Wed, 28 Feb 2024 17:11:31 +0100
Subject: [PATCH 079/128] fix(a11y): focus lost when submitting a form

---
 packages/ui-react/src/components/Button/Button.tsx | 2 +-
 platforms/web/test-e2e/tests/live_channel_test.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui-react/src/components/Button/Button.tsx b/packages/ui-react/src/components/Button/Button.tsx
index 32067f2d8..297189b1b 100644
--- a/packages/ui-react/src/components/Button/Button.tsx
+++ b/packages/ui-react/src/components/Button/Button.tsx
@@ -79,7 +79,7 @@ const Button: React.FC<Props> = ({
   }
 
   return (
-    <button className={buttonClassName(active)} onClick={onClick} type={type} disabled={disabled} aria-disabled={disabled} {...rest}>
+    <button className={buttonClassName(active)} onClick={onClick} type={type} aria-disabled={disabled} {...rest}>
       {content}
     </button>
   );
diff --git a/platforms/web/test-e2e/tests/live_channel_test.ts b/platforms/web/test-e2e/tests/live_channel_test.ts
index 660839599..d83b4ef4a 100644
--- a/platforms/web/test-e2e/tests/live_channel_test.ts
+++ b/platforms/web/test-e2e/tests/live_channel_test.ts
@@ -148,7 +148,7 @@ Scenario('I can select an upcoming program on the same channel', async ({ I }) =
   I.dontSee('LIVE', locate('div').inside(videoDetailsLocator));
   I.see('On Channel 1', locate('div').inside(videoDetailsLocator));
 
-  I.seeElement(locate('button[disabled]').withText('Start watching'));
+  I.seeElement(locate('button[aria-disabled]').withText('Start watching'));
 
   I.seeElement(channel1LiveProgramLocator);
   await isLiveProgram(I, channel1LiveProgramLocator, 'channel 1');

From 76ad046d9fd11ceed40f197060f783c991248d74 Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Thu, 29 Feb 2024 09:10:42 +0100
Subject: [PATCH 080/128] chore: update unit test

---
 packages/ui-react/src/components/LoginForm/LoginForm.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx b/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx
index 8fd51f217..d6cda2224 100644
--- a/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx
+++ b/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx
@@ -116,7 +116,7 @@ describe('<LoginForm>', () => {
 
     await waitForWithFakeTimers();
 
-    expect(getByRole('button', { name: 'login.sign_in' })).toBeDisabled();
+    expect(getByRole('button', { name: 'login.sign_in' })).toHaveAttribute('aria-disabled', 'true');
   });
 
   test('calls the onSubmit callback when the form gets submitted', async () => {

From 0f5c3b5f3d53e7054ee766ed9d141bccf8b739be Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Tue, 26 Mar 2024 10:28:26 +0100
Subject: [PATCH 081/128] chore: prevent click handler execution when button is
 disabled

---
 packages/ui-react/src/components/Button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-react/src/components/Button/Button.tsx b/packages/ui-react/src/components/Button/Button.tsx
index 297189b1b..0961aacc0 100644
--- a/packages/ui-react/src/components/Button/Button.tsx
+++ b/packages/ui-react/src/components/Button/Button.tsx
@@ -79,7 +79,7 @@ const Button: React.FC<Props> = ({
   }
 
   return (
-    <button className={buttonClassName(active)} onClick={onClick} type={type} aria-disabled={disabled} {...rest}>
+    <button className={buttonClassName(active)} onClick={disabled ? undefined : onClick} type={type} aria-disabled={disabled} {...rest}>
       {content}
     </button>
   );

From 88ce77c587883117eb6af4dec40481ddcbfe01b2 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 26 Mar 2024 13:40:30 +0100
Subject: [PATCH 082/128] fix(user): redirect when no integration is configured

---
 packages/common/src/stores/AccountStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/common/src/stores/AccountStore.ts b/packages/common/src/stores/AccountStore.ts
index 3521537a7..ad7aa3a39 100644
--- a/packages/common/src/stores/AccountStore.ts
+++ b/packages/common/src/stores/AccountStore.ts
@@ -19,7 +19,7 @@ type AccountStore = {
 };
 
 export const useAccountStore = createStore<AccountStore>('AccountStore', (set, get) => ({
-  loading: true,
+  loading: false,
   user: null,
   subscription: null,
   transactions: null,

From d4c851bdccc155b4953c9948ffdab86c2bfacc5e Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 26 Mar 2024 17:37:14 +0100
Subject: [PATCH 083/128] feat(project): reload site on update

---
 platforms/web/src/index.tsx  | 5 ++++-
 platforms/web/vite.config.ts | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/platforms/web/src/index.tsx b/platforms/web/src/index.tsx
index cd59da4f7..b3f8c289d 100644
--- a/platforms/web/src/index.tsx
+++ b/platforms/web/src/index.tsx
@@ -36,4 +36,7 @@ if (rootElement) {
   console.info('Application - rootElement not found');
 }
 
-registerSW();
+const refresh = registerSW({
+  immediate: true,
+  onNeedRefresh: () => refresh(true),
+});
diff --git a/platforms/web/vite.config.ts b/platforms/web/vite.config.ts
index d979d8032..366269e49 100644
--- a/platforms/web/vite.config.ts
+++ b/platforms/web/vite.config.ts
@@ -59,6 +59,7 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
       StylelintPlugin(),
       svgr(),
       VitePWA({
+        registerType: 'autoUpdate',
         manifestFilename: 'manifest.json',
         manifest: {
           name: app.name,

From 961bcd140b68c2eb8e128b898c23caa8ddcfd744 Mon Sep 17 00:00:00 2001
From: Anton Lantukh <alantukh@jwplayer.com>
Date: Wed, 3 Apr 2024 12:37:35 +0200
Subject: [PATCH 084/128] fix(i18n): add missing translations

---
 platforms/web/public/locales/en/account.json |  2 +-
 platforms/web/public/locales/es/account.json | 12 +++++++++++-
 platforms/web/public/locales/es/search.json  |  1 +
 platforms/web/public/locales/es/user.json    |  1 +
 platforms/web/public/locales/es/video.json   |  1 +
 5 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/platforms/web/public/locales/en/account.json b/platforms/web/public/locales/en/account.json
index 7e2d7e611..e01a545ed 100644
--- a/platforms/web/public/locales/en/account.json
+++ b/platforms/web/public/locales/en/account.json
@@ -148,7 +148,7 @@
     "password_helper_text": "Use a minimum of 8 characters (case sensitive) with at least one number",
     "password_strength": {
       "fair": "Fair",
-      "invalid": "Invalid",
+      "invalid": "",
       "strong": "Strong",
       "very_strong": "Very strong",
       "weak": "Weak"
diff --git a/platforms/web/public/locales/es/account.json b/platforms/web/public/locales/es/account.json
index 4c0c356e3..7f685fb42 100644
--- a/platforms/web/public/locales/es/account.json
+++ b/platforms/web/public/locales/es/account.json
@@ -18,8 +18,10 @@
     "credit_card": "Tarjeta de crédito",
     "credit_card_name": "Nombre de la tarjeta de crédito",
     "days_trial_one": "Se te cobrará mañana.",
+    "days_trial_many": "Se te cobrará después de {{count}} días.",
     "days_trial_other": "Se te cobrará después de {{count}} días.",
     "discount_period_one": "Durante el primer {{period}}",
+    "discount_period_many": "Durante los primeros {{count}} {{period}}",
     "discount_period_other": "Durante los primeros {{count}} {{period}}",
     "free_trial_discount": "Prueba gratuita",
     "go_back_to_checkout": "Volver a la página de pago",
@@ -37,6 +39,7 @@
     "paypal": "PayPal",
     "paypal_instructions": "Al hacer clic en 'Continuar', serás redirigido al sitio de PayPal.",
     "periods_trial_one": "Se te cobrará después de un {{period}}.",
+    "periods_trial_many": "Se te cobrará después de {{count}} {{period}}.",
     "periods_trial_other": "Se te cobrará después de {{count}} {{period}}.",
     "redeem_coupon": "Canjear cupón",
     "save": "Guardar",
@@ -57,8 +60,10 @@
     "benefits": {
       "cancel_anytime": "Cancele en cualquier momento",
       "first_days_free_one": "Primer día gratis",
+      "first_days_free_many": "Primeros {{count}} días gratis",
       "first_days_free_other": "Primeros {{count}} días gratis",
       "first_periods_free_one": "Primer {{period}} gratis",
+      "first_periods_free_many": "Primeros {{count}} {{period}} gratis",
       "first_periods_free_other": "Primeros {{count}} {{period}} gratis",
       "watch_on_all_devices": "Ver en todos los dispositivos"
     },
@@ -71,6 +76,7 @@
     "subscription": "Suscripción",
     "title": "Elige un plan",
     "tvod_access_one": "Acceso de {{count}} {{period}}",
+    "tvod_access_many": "Acceso de {{count}} {{period}}",
     "tvod_access_other": "Acceso de {{count}} {{period}}",
     "watch_this_on_platform": "Ver esto en {{siteName}}",
     "yearly": "Anual",
@@ -106,14 +112,18 @@
   },
   "periods": {
     "day_one": "día",
+    "day_many": "días",
     "day_other": "días",
     "month": "mensual",
     "month_one": "mes",
+    "month_many": "meses",
     "month_other": "meses",
     "week_one": "semana",
+    "week_many": "semanas",
     "week_other": "semanas",
     "year": "anual",
     "year_one": "año",
+    "year_many": "años",
     "year_other": "años"
   },
   "personal_details": {
@@ -148,7 +158,7 @@
     "password_helper_text": "Utiliza un mínimo de 8 caracteres (distingue entre mayúsculas y minúsculas) con al menos un número",
     "password_strength": {
       "fair": "Regular",
-      "invalid": "Invalida",
+      "invalid": "",
       "strong": "Fuerte",
       "very_strong": "Muy fuerte",
       "weak": "Débil"
diff --git a/platforms/web/public/locales/es/search.json b/platforms/web/public/locales/es/search.json
index 5d9b5d23f..897d6bbd9 100644
--- a/platforms/web/public/locales/es/search.json
+++ b/platforms/web/public/locales/es/search.json
@@ -15,5 +15,6 @@
   "tip_two": "Hacer términos de búsqueda más generales",
   "tip_three": "Prueba con diferentes términos de búsqueda",
   "title_one": "{{count}} resultado para \"{{query}}\"",
+  "title_many": "{{count}} resultados para \"{{query}}\"",
   "title_other": "{{count}} resultados para \"{{query}}\""
 }
diff --git a/platforms/web/public/locales/es/user.json b/platforms/web/public/locales/es/user.json
index 66d0eff36..66331fb65 100644
--- a/platforms/web/public/locales/es/user.json
+++ b/platforms/web/public/locales/es/user.json
@@ -104,6 +104,7 @@
     "expiry_date": "Fecha de vencimiento",
     "granted_subscription": "Suscripción otorgada",
     "hidden_transactions_one": "Una transacción más",
+    "hidden_transactions_many": "{{count}} transacciones más",
     "hidden_transactions_other": "{{count}} transacciones más",
     "longer_than_usual": "El pago está tardando más de lo habitual. Por favor, inténtelo de nuevo más tarde.",
     "monthly_subscription": "Suscripción mensual",
diff --git a/platforms/web/public/locales/es/video.json b/platforms/web/public/locales/es/video.json
index 26dc52abc..2f555c9fc 100644
--- a/platforms/web/public/locales/es/video.json
+++ b/platforms/web/public/locales/es/video.json
@@ -25,6 +25,7 @@
   "sign_up_to_start_watching": "¡Regístrate para comenzar a ver!",
   "start_watching": "Comenzar a ver",
   "total_episodes_one": "{{count}} episodio",
+  "total_episodes_many": "{{count}} episodios",
   "total_episodes_other": "{{count}} episodios",
   "trailer": "Tráiler",
   "watch_trailer": "Ver el tráiler"

From 5097e607090bcdf098335dd39a6aa6ef82250ad7 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 27 Mar 2024 09:49:47 +0100
Subject: [PATCH 085/128] fix(payment): missing feedback when submitting coupon

---
 .../src/controllers/CheckoutController.ts     | 32 ++++++-----------
 .../cleeng/CleengCheckoutService.ts           | 18 +++++++++-
 .../integrations/cleeng/CleengService.ts      |  2 +-
 .../integrations/jwp/JWPCheckoutService.ts    | 34 +++++++++++++------
 .../components/CheckoutForm/CheckoutForm.tsx  |  3 ++
 .../AccountModal/forms/Checkout.tsx           |  5 +--
 6 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/packages/common/src/controllers/CheckoutController.ts b/packages/common/src/controllers/CheckoutController.ts
index 63362677e..ffe195d50 100644
--- a/packages/common/src/controllers/CheckoutController.ts
+++ b/packages/common/src/controllers/CheckoutController.ts
@@ -91,32 +91,22 @@ export default class CheckoutController {
   };
 
   updateOrder = async (order: Order, paymentMethodId?: number, couponCode?: string | null): Promise<void> => {
-    let response;
-
     try {
-      response = await this.checkoutService.updateOrder({ order, paymentMethodId, couponCode });
-    } catch (error: unknown) {
-      // TODO: we currently (falsely) assume that the only error caught is because the coupon is not valid, but there
-      //  could be a network failure as well (JWPCheckoutService)
-      throw new FormValidationError({ couponCode: [i18next.t('account:checkout.coupon_not_valid')] });
-    }
+      const response = await this.checkoutService.updateOrder({ order, paymentMethodId, couponCode });
 
-    if (response.errors.length > 0) {
-      // clear the order when the order doesn't exist on the server
-      if (response.errors[0].includes(`Order with ${order.id} not found`)) {
-        useCheckoutStore.getState().setOrder(null);
+      if (response.responseData.order) {
+        useCheckoutStore.getState().setOrder(response.responseData?.order);
       }
-
-      // TODO: this handles the `Coupon ${couponCode} not found` message (CleengCheckoutService)
-      if (response.errors[0].includes(`not found`)) {
-        throw new FormValidationError({ couponCode: [i18next.t('account:checkout.coupon_not_valid')] });
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        if (error.message === 'Order not found') {
+          useCheckoutStore.getState().setOrder(null);
+        } else if (error.message === 'Invalid coupon code') {
+          throw new FormValidationError({ couponCode: [i18next.t('account:checkout.coupon_not_valid')] });
+        }
       }
 
-      throw new FormValidationError({ form: response.errors });
-    }
-
-    if (response.responseData.order) {
-      useCheckoutStore.getState().setOrder(response.responseData?.order);
+      throw new FormValidationError({ form: [i18next.t('error:unknown_error')] });
     }
   };
 
diff --git a/packages/common/src/services/integrations/cleeng/CleengCheckoutService.ts b/packages/common/src/services/integrations/cleeng/CleengCheckoutService.ts
index c0dcd4e9c..1dc3bce05 100644
--- a/packages/common/src/services/integrations/cleeng/CleengCheckoutService.ts
+++ b/packages/common/src/services/integrations/cleeng/CleengCheckoutService.ts
@@ -20,11 +20,13 @@ import type {
   PaymentWithPayPal,
   SwitchSubscription,
   UpdateOrder,
+  UpdateOrderResponse,
   UpdatePaymentWithPayPal,
 } from '../../../../types/checkout';
 import CheckoutService from '../CheckoutService';
 import { GET_CUSTOMER_IP } from '../../../modules/types';
 import type { GetCustomerIP } from '../../../../types/get-customer-ip';
+import type { ServiceResponse } from '../../../../types/service';
 
 import CleengService from './CleengService';
 
@@ -83,7 +85,21 @@ export default class CleengCheckoutService extends CheckoutService {
   };
 
   updateOrder: UpdateOrder = async ({ order, ...payload }) => {
-    return this.cleengService.patch(`/orders/${order.id}`, JSON.stringify(payload), { authenticate: true });
+    const response = await this.cleengService.patch<ServiceResponse<UpdateOrderResponse>>(`/orders/${order.id}`, JSON.stringify(payload), {
+      authenticate: true,
+    });
+
+    if (response.errors.length) {
+      if (response.errors[0].includes(`Order with ${order.id} not found`)) {
+        throw new Error('Order not found');
+      }
+
+      if (response.errors[0].includes(`Coupon ${payload.couponCode} not found`)) {
+        throw new Error('Invalid coupon code');
+      }
+    }
+
+    return response;
   };
 
   getPaymentMethods: GetPaymentMethods = async () => {
diff --git a/packages/common/src/services/integrations/cleeng/CleengService.ts b/packages/common/src/services/integrations/cleeng/CleengService.ts
index 34d0ba298..7b724353d 100644
--- a/packages/common/src/services/integrations/cleeng/CleengService.ts
+++ b/packages/common/src/services/integrations/cleeng/CleengService.ts
@@ -193,7 +193,7 @@ export default class CleengService {
       return await resp.json();
     } catch (error: unknown) {
       return {
-        errors: Array.of(error as string),
+        errors: Array.of(error instanceof Error ? error.message : String(error)),
       };
     }
   };
diff --git a/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts b/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts
index 006071ce1..484eb393d 100644
--- a/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts
+++ b/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts
@@ -21,6 +21,7 @@ import type {
 } from '../../../../types/checkout';
 import CheckoutService from '../CheckoutService';
 import type { ServiceResponse } from '../../../../types/service';
+import { isCommonError } from '../../../utils/api';
 
 @injectable()
 export default class JWPCheckoutService extends CheckoutService {
@@ -179,26 +180,37 @@ export default class JWPCheckoutService extends CheckoutService {
         voucherCode: `${couponCode}`,
         accessFeeId: order.id,
       });
-      order.discount = {
-        applied: true,
-        type: 'coupon',
-        periods: response.data.discount_duration,
-      };
 
       const discountedAmount = order.totalPrice - response.data.amount;
-      order.totalPrice = response.data.amount;
-      order.priceBreakdown.discountAmount = discountedAmount;
-      order.priceBreakdown.discountedPrice = discountedAmount;
+      const updatedOrder = {
+        ...order,
+        totalPrice: response.data.amount,
+        priceBreakdown: {
+          ...order.priceBreakdown,
+          discountedAmount,
+          discountedPrice: discountedAmount,
+        },
+        discount: {
+          applied: true,
+          type: 'coupon',
+          periods: response.data.discount_duration,
+        },
+      };
+
       return {
         errors: [],
         responseData: {
           message: 'successfully updated',
-          order: order,
+          order: updatedOrder,
           success: true,
         },
       };
-    } catch {
-      throw new Error('Invalid coupon code');
+    } catch (error: unknown) {
+      if (isCommonError(error) && error.response.data.message === 'Voucher not found') {
+        throw new Error('Invalid coupon code');
+      }
+
+      throw new Error('An unknown error occurred');
     }
   };
 
diff --git a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx
index a4733cf33..7213eee16 100644
--- a/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx
+++ b/packages/ui-react/src/components/CheckoutForm/CheckoutForm.tsx
@@ -25,6 +25,7 @@ type Props = {
   onCouponInputChange: React.ChangeEventHandler<HTMLInputElement>;
   onRedeemCouponButtonClick: () => void;
   onCloseCouponFormClick: () => void;
+  error?: string;
   couponFormOpen: boolean;
   couponFormError?: string;
   couponFormApplied?: boolean;
@@ -45,6 +46,7 @@ const CheckoutForm: React.FC<Props> = ({
   offerType,
   onBackButtonClick,
   onPaymentMethodChange,
+  error,
   couponFormOpen,
   couponInputValue,
   couponFormError,
@@ -89,6 +91,7 @@ const CheckoutForm: React.FC<Props> = ({
   const orderTitle = offerType === 'svod' ? (offer.period === 'month' ? t('checkout.monthly') : t('checkout.yearly')) : offer.offerTitle;
   return (
     <div>
+      {error ? <FormFeedback variant="error">{error}</FormFeedback> : null}
       <h1 className={styles.title}>{t('checkout.payment_method')}</h1>
       <div className={styles.order}>
         <div className={styles.orderInfo}>
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
index df73a5cba..825da6582 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
@@ -53,10 +53,10 @@ const Checkout = () => {
     handleSubmit,
   } = useForm({
     initialValues: { couponCode: '', paymentMethodId: paymentMethods?.[0]?.id?.toString() || '' },
-    onSubmit: async ({ couponCode, paymentMethodId }) => {
+    onSubmit: ({ couponCode, paymentMethodId }) => {
       setShowCouponCodeSuccess(false);
 
-      return await updateOrder.mutateAsync({ couponCode, paymentMethodId: parseInt(paymentMethodId) });
+      return updateOrder.mutateAsync({ couponCode, paymentMethodId: parseInt(paymentMethodId) });
     },
     onSubmitSuccess: ({ couponCode }): void => setShowCouponCodeSuccess(!!couponCode),
     onSubmitError: ({ error }) => {
@@ -117,6 +117,7 @@ const Checkout = () => {
       order={order}
       offer={selectedOffer}
       offerType={offerType}
+      error={errors.form}
       onBackButtonClick={backButtonClickHandler}
       paymentMethods={paymentMethods}
       paymentMethodId={paymentMethodId}

From 2a04031e3052f6a9d52ec174efcafbd193075650 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 27 Mar 2024 12:09:08 +0100
Subject: [PATCH 086/128] chore: fix jwp coupon discount price

---
 .../src/services/integrations/jwp/JWPCheckoutService.ts  | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts b/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts
index 484eb393d..678c50cd5 100644
--- a/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts
+++ b/packages/common/src/services/integrations/jwp/JWPCheckoutService.ts
@@ -72,6 +72,7 @@ export default class JWPCheckoutService extends CheckoutService {
       totalPrice: payload.offer.customerPriceInclTax,
       priceBreakdown: {
         offerPrice: payload.offer.customerPriceInclTax,
+        // @TODO is this correct?
         discountAmount: payload.offer.customerPriceInclTax,
         discountedPrice: payload.offer.customerPriceInclTax,
         paymentMethodFee: 0,
@@ -181,14 +182,14 @@ export default class JWPCheckoutService extends CheckoutService {
         accessFeeId: order.id,
       });
 
-      const discountedAmount = order.totalPrice - response.data.amount;
-      const updatedOrder = {
+      const discountAmount = order.totalPrice - response.data.amount;
+      const updatedOrder: Order = {
         ...order,
         totalPrice: response.data.amount,
         priceBreakdown: {
           ...order.priceBreakdown,
-          discountedAmount,
-          discountedPrice: discountedAmount,
+          discountAmount,
+          discountedPrice: discountAmount,
         },
         discount: {
           applied: true,

From b928ce8604aed42e226e435dce4e292de72d5c30 Mon Sep 17 00:00:00 2001
From: Conventional Changelog Action <conventional.changelog.action@github.com>
Date: Fri, 5 Apr 2024 14:10:05 +0000
Subject: [PATCH 087/128] chore(release): v6.1.0

---
 CHANGELOG.md | 15 +++++++++++++++
 package.json |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5591a712e..230792e18 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,18 @@
+## [6.1.0](https://github.com/jwplayer/ott-web-app/compare/v6.0.0...v6.1.0) (2024-04-05)
+
+
+### Features
+
+* **project:** reload site on update ([d4c851b](https://github.com/jwplayer/ott-web-app/commit/d4c851bdccc155b4953c9948ffdab86c2bfacc5e))
+
+
+### Bug Fixes
+
+* **a11y:** focus lost when submitting a form ([9001a21](https://github.com/jwplayer/ott-web-app/commit/9001a21c9a4b0bd35db6c182e2f46b4480983dc8))
+* **i18n:** add missing translations ([961bcd1](https://github.com/jwplayer/ott-web-app/commit/961bcd140b68c2eb8e128b898c23caa8ddcfd744))
+* **payment:** missing feedback when submitting coupon ([5097e60](https://github.com/jwplayer/ott-web-app/commit/5097e607090bcdf098335dd39a6aa6ef82250ad7))
+* **user:** redirect when no integration is configured ([88ce77c](https://github.com/jwplayer/ott-web-app/commit/88ce77c587883117eb6af4dec40481ddcbfe01b2))
+
 ## [6.0.0](https://github.com/jwplayer/ott-web-app/compare/v5.1.1...v6.0.0) (2024-03-25)
 
 
diff --git a/package.json b/package.json
index 6792857f4..1a8494cad 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jwp/ott",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "private": true,
   "license": "Apache-2.0",
   "repository": "https://github.com/jwplayer/ott-web-app.git",

From 1011dd28252afe0c001b1a27c5b1c3589a5c1cea Mon Sep 17 00:00:00 2001
From: mirovladimitrovski
 <46674160+mirovladimitrovski@users.noreply.github.com>
Date: Tue, 9 Apr 2024 16:22:02 +0200
Subject: [PATCH 088/128] fix: change wording (#488)

---
 platforms/web/public/locales/en/user.json    | 2 +-
 platforms/web/test-e2e/tests/account_test.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/platforms/web/public/locales/en/user.json b/platforms/web/public/locales/en/user.json
index ea8790a6b..694c142d6 100644
--- a/platforms/web/public/locales/en/user.json
+++ b/platforms/web/public/locales/en/user.json
@@ -1,6 +1,6 @@
 {
   "account": {
-    "about_you": "Profile info",
+    "about_you": "Account info",
     "add_password": "Add password",
     "add_password_error": "Failed to proceed to the Add Password screen. Please try again.",
     "add_password_modal_text": "We sent instructions to {{email}} on how to add a password. If you don’t receive the email within a few minutes, check your spam folder or",
diff --git a/platforms/web/test-e2e/tests/account_test.ts b/platforms/web/test-e2e/tests/account_test.ts
index 075c2d53f..67048a745 100644
--- a/platforms/web/test-e2e/tests/account_test.ts
+++ b/platforms/web/test-e2e/tests/account_test.ts
@@ -52,7 +52,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string, res
     I.see('Password');
     I.see('Edit password');
 
-    I.see('Profile info');
+    I.see('Account info');
     I.see('First name');
     I.seeInField('input[name="firstName"][readonly]', firstName);
     I.see('Last name');
@@ -253,7 +253,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string, res
 
   Scenario(`I can update my consents - ${providerName}`, async ({ I }) => {
     I.amOnPage(constants.accountsUrl);
-    I.waitForText('Profile info', longTimeout);
+    I.waitForText('Account info', longTimeout);
     I.scrollTo('//*[text() = "Legal & Marketing"]', undefined, -100);
 
     I.dontSeeCheckboxIsChecked(consentCheckbox);

From 930d52b015434f968f9a0bef477ddcadcb0013c9 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 10 Apr 2024 11:25:46 +0200
Subject: [PATCH 089/128] fix(payment): catch cleeng invalid coupon for offer

---
 packages/common/src/controllers/CheckoutController.ts         | 2 ++
 .../src/services/integrations/cleeng/CleengCheckoutService.ts | 4 ++++
 platforms/web/public/locales/en/account.json                  | 1 +
 platforms/web/public/locales/es/account.json                  | 1 +
 4 files changed, 8 insertions(+)

diff --git a/packages/common/src/controllers/CheckoutController.ts b/packages/common/src/controllers/CheckoutController.ts
index ffe195d50..917699af9 100644
--- a/packages/common/src/controllers/CheckoutController.ts
+++ b/packages/common/src/controllers/CheckoutController.ts
@@ -103,6 +103,8 @@ export default class CheckoutController {
           useCheckoutStore.getState().setOrder(null);
         } else if (error.message === 'Invalid coupon code') {
           throw new FormValidationError({ couponCode: [i18next.t('account:checkout.coupon_not_valid')] });
+        } else if (error.message === 'Invalid coupon code for this offer') {
+          throw new FormValidationError({ couponCode: [i18next.t('account:checkout.coupon_not_valid_for_offer')] });
         }
       }
 
diff --git a/packages/common/src/services/integrations/cleeng/CleengCheckoutService.ts b/packages/common/src/services/integrations/cleeng/CleengCheckoutService.ts
index 1dc3bce05..6aa89be0e 100644
--- a/packages/common/src/services/integrations/cleeng/CleengCheckoutService.ts
+++ b/packages/common/src/services/integrations/cleeng/CleengCheckoutService.ts
@@ -97,6 +97,10 @@ export default class CleengCheckoutService extends CheckoutService {
       if (response.errors[0].includes(`Coupon ${payload.couponCode} not found`)) {
         throw new Error('Invalid coupon code');
       }
+
+      if (response.errors[0].includes(`Coupon ${payload.couponCode} cannot be applied on this offer`)) {
+        throw new Error('Invalid coupon code for this offer');
+      }
     }
 
     return response;
diff --git a/platforms/web/public/locales/en/account.json b/platforms/web/public/locales/en/account.json
index e01a545ed..d5dddbee5 100644
--- a/platforms/web/public/locales/en/account.json
+++ b/platforms/web/public/locales/en/account.json
@@ -15,6 +15,7 @@
     "coupon_applied": "Your coupon code has been applied",
     "coupon_discount": "Coupon discount",
     "coupon_not_valid": "Coupon code is not valid",
+    "coupon_not_valid_for_offer": "Coupon code is not valid for this offer",
     "credit_card": "Credit card",
     "credit_card_name": "Credit card name",
     "days_trial_one": "You will be charged tomorrow.",
diff --git a/platforms/web/public/locales/es/account.json b/platforms/web/public/locales/es/account.json
index 7f685fb42..fbf29626e 100644
--- a/platforms/web/public/locales/es/account.json
+++ b/platforms/web/public/locales/es/account.json
@@ -15,6 +15,7 @@
     "coupon_applied": "Se ha aplicado tu código de cupón",
     "coupon_discount": "Descuento de cupón",
     "coupon_not_valid": "El código de cupón no es válido",
+    "coupon_not_valid_for_offer": "El código de cupón no es válido para esta oferta",
     "credit_card": "Tarjeta de crédito",
     "credit_card_name": "Nombre de la tarjeta de crédito",
     "days_trial_one": "Se te cobrará mañana.",

From 2a5e2fe5a395f019e430993d14d3fd9e2de5340d Mon Sep 17 00:00:00 2001
From: Melissa 't Hart <melissa@videodock.com>
Date: Thu, 4 Apr 2024 18:00:06 +0200
Subject: [PATCH 090/128] fix(project): retain password input during sign up

---
 .../ui-react/src/containers/AccountModal/forms/Registration.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
index ba403fbae..42e34dc77 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
@@ -79,7 +79,6 @@ const Registration = () => {
       announce(t('registration.success'), 'success');
       navigate(modalURLFromLocation(location, 'personal-details'));
     },
-    onSubmitError: ({ resetValue }) => resetValue('password'),
   });
 
   return (

From 051e46f54a55aec5a6cde3b296859472bb362e6a Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Fri, 5 Apr 2024 16:31:42 +0200
Subject: [PATCH 091/128] fix(a11y): sitename in logo alt

---
 packages/ui-react/src/components/Header/Header.tsx | 4 +++-
 packages/ui-react/src/components/Logo/Logo.tsx     | 5 +++--
 packages/ui-react/src/containers/Layout/Layout.tsx | 1 +
 platforms/web/public/locales/en/menu.json          | 1 +
 platforms/web/public/locales/es/menu.json          | 1 +
 5 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
index c3f592f56..6dc5d636f 100644
--- a/packages/ui-react/src/components/Header/Header.tsx
+++ b/packages/ui-react/src/components/Header/Header.tsx
@@ -51,6 +51,7 @@ type Props = {
   currentLanguage: LanguageDefinition | undefined;
   onLanguageClick: (code: string) => void;
   favoritesEnabled?: boolean;
+  siteName?: string;
 
   profilesData?: {
     currentProfile: Profile | null;
@@ -87,6 +88,7 @@ const Header: React.FC<Props> = ({
   currentLanguage,
   onLanguageClick,
   favoritesEnabled,
+  siteName,
   profilesData: { currentProfile, profiles, profilesEnabled, selectProfile, isSelectingProfile } = {},
 }) => {
   const { t } = useTranslation('menu');
@@ -215,7 +217,7 @@ const Header: React.FC<Props> = ({
         </div>
         {logoSrc && (
           <div className={styles.brand}>
-            <Logo src={logoSrc} onLoad={() => setLogoLoaded(true)} />
+            <Logo alt={t('logo_alt', { siteName })} src={logoSrc} onLoad={() => setLogoLoaded(true)} />
           </div>
         )}
         <nav className={styles.nav}>{logoLoaded || !logoSrc ? children : null}</nav>
diff --git a/packages/ui-react/src/components/Logo/Logo.tsx b/packages/ui-react/src/components/Logo/Logo.tsx
index a6eef375c..77b88bdb9 100644
--- a/packages/ui-react/src/components/Logo/Logo.tsx
+++ b/packages/ui-react/src/components/Logo/Logo.tsx
@@ -5,6 +5,7 @@ import styles from './Logo.module.scss';
 
 type Props = {
   src: string;
+  alt?: string;
   onLoad: () => void;
 };
 
@@ -13,7 +14,7 @@ type ImgRef = {
   width?: number;
 };
 
-const Logo: React.FC<Props> = ({ src, onLoad }: Props) => {
+const Logo: React.FC<Props> = ({ src, alt = 'logo', onLoad }: Props) => {
   const [imgDimensions, updateImgDimensions] = useState<ImgRef>({ height: undefined, width: undefined });
 
   const onLoadHandler = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
@@ -24,7 +25,7 @@ const Logo: React.FC<Props> = ({ src, onLoad }: Props) => {
 
   return (
     <Link to="/">
-      <img className={styles.logo} alt="logo" src={src} height={imgDimensions.height} width={imgDimensions.width} onLoad={onLoadHandler} onError={onLoad} />
+      <img className={styles.logo} alt={alt} src={src} height={imgDimensions.height} width={imgDimensions.width} onLoad={onLoadHandler} onError={onLoad} />
     </Link>
   );
 };
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index 845f79cc3..d81f8fd21 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -189,6 +189,7 @@ const Layout = () => {
           canLogin={canLogin}
           showPaymentsMenuItem={accessModel !== ACCESS_MODEL.AVOD}
           favoritesEnabled={favoritesEnabled}
+          siteName={siteName}
           profilesData={{
             currentProfile: profile,
             profiles,
diff --git a/platforms/web/public/locales/en/menu.json b/platforms/web/public/locales/en/menu.json
index c6713a53e..8ae298bee 100644
--- a/platforms/web/public/locales/en/menu.json
+++ b/platforms/web/public/locales/en/menu.json
@@ -1,6 +1,7 @@
 {
   "close_menu": "Close menu",
   "language_menu": "Open language menu",
+  "logo_alt": "Homepage of {{siteName}}",
   "open_menu": "Open menu",
   "open_user_menu": "Open user menu",
   "profile_icon": "Profile icon",
diff --git a/platforms/web/public/locales/es/menu.json b/platforms/web/public/locales/es/menu.json
index 28fb0e7b9..9df1f6161 100644
--- a/platforms/web/public/locales/es/menu.json
+++ b/platforms/web/public/locales/es/menu.json
@@ -1,6 +1,7 @@
 {
   "close_menu": "Cerrar menú",
   "language_menu": "Abrir el menú de idiomas",
+  "logo_alt": "Página de inicio de {{siteName}}",
   "open_menu": "Abrir menú",
   "open_user_menu": "Abrir menú de usuario",
   "profile_icon": "Icono de perfil",

From 1d22ab05d4f5004fff8740827dc37b3d8460debf Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Fri, 5 Apr 2024 16:17:21 +0200
Subject: [PATCH 092/128] fix(a11y): header navigation list

---
 .../src/components/Header/Header.module.scss  | 34 ++++++++++++++++++-
 .../ui-react/src/components/Header/Header.tsx | 24 ++++++++++++-
 .../src/containers/Layout/Layout.module.scss  | 22 ------------
 .../ui-react/src/containers/Layout/Layout.tsx | 10 +++---
 4 files changed, 60 insertions(+), 30 deletions(-)

diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
index eb66f4de2..f2f18331b 100644
--- a/packages/ui-react/src/components/Header/Header.module.scss
+++ b/packages/ui-react/src/components/Header/Header.module.scss
@@ -77,7 +77,17 @@
   flex: 1;
   align-items: center;
 
-  > a {
+  > ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    li {
+      float: left;
+    }
+  }
+
+  a {
     height: 36px;
     min-height: 36px;
     margin: 0 6px;
@@ -177,6 +187,28 @@
   }
 }
 
+.navButton {
+  overflow: visible;
+
+  &::after {
+    position: absolute;
+    bottom: calc(((variables.$header-height - 36px) / 2) * -1);
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: variables.$white;
+    content: '';
+  }
+
+  body:global(.is-tabbing) & {
+    &:focus {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
 //
 // mediaQueries
 // --------------------------------
diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
index 6dc5d636f..18c4787fd 100644
--- a/packages/ui-react/src/components/Header/Header.tsx
+++ b/packages/ui-react/src/components/Header/Header.tsx
@@ -25,6 +25,11 @@ import styles from './Header.module.scss';
 
 type TypeHeader = 'static' | 'fixed';
 
+type NavItem = {
+  label: string;
+  to: string;
+};
+
 type Props = {
   headerType?: TypeHeader;
   onMenuButtonClick: () => void;
@@ -52,6 +57,7 @@ type Props = {
   onLanguageClick: (code: string) => void;
   favoritesEnabled?: boolean;
   siteName?: string;
+  navItems?: NavItem[];
 
   profilesData?: {
     currentProfile: Profile | null;
@@ -90,6 +96,7 @@ const Header: React.FC<Props> = ({
   favoritesEnabled,
   siteName,
   profilesData: { currentProfile, profiles, profilesEnabled, selectProfile, isSelectingProfile } = {},
+  navItems = [],
 }) => {
   const { t } = useTranslation('menu');
   const [logoLoaded, setLogoLoaded] = useState(false);
@@ -197,6 +204,21 @@ const Header: React.FC<Props> = ({
     );
   };
 
+  const renderNav = () => {
+    if (navItems.length === 0) {
+      return children;
+    }
+    return (
+      <ul>
+        {navItems.map((item, index) => (
+          <li key={index}>
+            <Button activeClassname={styles.navButton} label={item.label} to={item.to} variant="text" />
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
   return (
     <header className={headerClassName}>
       <div className={styles.container}>
@@ -220,7 +242,7 @@ const Header: React.FC<Props> = ({
             <Logo alt={t('logo_alt', { siteName })} src={logoSrc} onLoad={() => setLogoLoaded(true)} />
           </div>
         )}
-        <nav className={styles.nav}>{logoLoaded || !logoSrc ? children : null}</nav>
+        <nav className={styles.nav}>{logoLoaded || !logoSrc ? renderNav() : null}</nav>
         <div className={styles.actions}>
           {renderSearch()}
           {renderLanguageDropdown()}
diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss
index 3c8262988..19d703a84 100644
--- a/packages/ui-react/src/containers/Layout/Layout.module.scss
+++ b/packages/ui-react/src/containers/Layout/Layout.module.scss
@@ -19,25 +19,3 @@
 .main {
   height: 100%;
 }
-
-.headerButton {
-    overflow: visible;
-
-    &::after {
-      position: absolute;
-      bottom: calc(((variables.$header-height - 36px) / 2) * -1);
-      left: 0;
-      width: 100%;
-      height: 2px;
-      background-color: variables.$white;
-      content: '';
-    }
-
-    body:global(.is-tabbing) & {
-      &:focus {
-        &::after {
-          display: none;
-        }
-      }
-    }
-}
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index d81f8fd21..f4bba8739 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -147,6 +147,8 @@ const Layout = () => {
     );
   };
 
+  const navItems = [{ label: t('home'), to: '/' }, ...menu.map((item) => ({ label: item.label, to: playlistURL(item.contentId) }))];
+
   const containerProps = { inert: sideBarOpen ? '' : undefined }; // inert is not yet officially supported in react
 
   return (
@@ -197,12 +199,8 @@ const Layout = () => {
             selectProfile: ({ avatarUrl, id }) => selectProfile.mutate({ id, avatarUrl }),
             isSelectingProfile: selectProfile.isLoading,
           }}
-        >
-          <Button activeClassname={styles.headerButton} label={t('home')} to="/" variant="text" />
-          {menu.map((item) => (
-            <Button activeClassname={styles.headerButton} key={item.contentId} label={item.label} to={playlistURL(item.contentId)} variant="text" />
-          ))}
-        </Header>
+          navItems={navItems}
+        />
         <main id="content" className={styles.main} tabIndex={-1}>
           <Outlet />
         </main>

From 5ebeebb1872cfb291f140b92cbdc5904aa503524 Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Fri, 5 Apr 2024 17:21:05 +0200
Subject: [PATCH 093/128] chore: tidy css selector

---
 .../ui-react/src/components/Header/Header.module.scss     | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
index f2f18331b..63fcd46ea 100644
--- a/packages/ui-react/src/components/Header/Header.module.scss
+++ b/packages/ui-react/src/components/Header/Header.module.scss
@@ -200,12 +200,8 @@
     content: '';
   }
 
-  body:global(.is-tabbing) & {
-    &:focus {
-      &::after {
-        display: none;
-      }
-    }
+  body:global(.is-tabbing) &:focus::after {
+    display: none;
   }
 }
 

From 8c66ac457644a2cc7b72c7010c0d1f1a3aa28dd9 Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Fri, 5 Apr 2024 17:34:07 +0200
Subject: [PATCH 094/128] chore: update snapshot tests

---
 .../src/components/Header/Header.test.tsx     |  41 ++++++-
 .../Header/__snapshots__/Header.test.tsx.snap | 102 ++++++++++++++++++
 .../Layout/__snapshots__/Layout.test.tsx.snap |  22 ++--
 3 files changed, 154 insertions(+), 11 deletions(-)

diff --git a/packages/ui-react/src/components/Header/Header.test.tsx b/packages/ui-react/src/components/Header/Header.test.tsx
index 2cd961f57..138c85367 100644
--- a/packages/ui-react/src/components/Header/Header.test.tsx
+++ b/packages/ui-react/src/components/Header/Header.test.tsx
@@ -19,7 +19,7 @@ describe('<Header />', () => {
   });
 
   test('renders header', () => {
-    const playlistMenuItems = [<Button key="key" label="Home" to="/" />];
+    const homeButton = [<Button key="key" label="Home" to="/" />];
     const { container } = render(
       <Header
         onMenuButtonClick={vi.fn()}
@@ -46,10 +46,47 @@ describe('<Header />', () => {
         currentLanguage={undefined}
         onLanguageClick={vi.fn()}
       >
-        {playlistMenuItems}
+        {homeButton}
       </Header>,
     );
 
     expect(container).toMatchSnapshot();
   });
+
+  test('renders header with nav buttons', () => {
+    const navItems = [
+      { label: 'Home', to: '/' },
+      { label: 'Button test', to: '/test' },
+    ];
+    const { container } = render(
+      <Header
+        onMenuButtonClick={vi.fn()}
+        searchBarProps={{
+          query: '',
+          onQueryChange: vi.fn(),
+        }}
+        searchEnabled
+        searchActive={false}
+        onSearchButtonClick={vi.fn()}
+        onCloseSearchButtonClick={vi.fn()}
+        onLoginButtonClick={vi.fn()}
+        userMenuOpen={false}
+        sideBarOpen={false}
+        openUserPanel={vi.fn()}
+        closeUserPanel={vi.fn()}
+        openLanguageMenu={vi.fn()}
+        closeLanguageMenu={vi.fn()}
+        isLoggedIn={false}
+        canLogin={true}
+        showPaymentsMenuItem={true}
+        supportedLanguages={[]}
+        languageMenuOpen={false}
+        currentLanguage={undefined}
+        onLanguageClick={vi.fn()}
+        navItems={navItems}
+      />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
index baeb35dd9..149af04c5 100644
--- a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -94,3 +94,105 @@ exports[`<Header /> > renders header 1`] = `
   </header>
 </div>
 `;
+
+exports[`<Header /> > renders header with nav buttons 1`] = `
+<div>
+  <header
+    class="_header_f4f7a7 _static_f4f7a7"
+  >
+    <div
+      class="_container_f4f7a7"
+    >
+      <a
+        class="_skipToContent_f4f7a7"
+        href="#content"
+      >
+        skip_to_content
+      </a>
+      <div
+        class="_menu_f4f7a7"
+      >
+        <div
+          aria-controls="sidebar"
+          aria-expanded="false"
+          aria-haspopup="true"
+          aria-label="open_menu"
+          class="_iconButton_0fef65 _iconButton_f4f7a7"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_585b29"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 0h24v24H0V0z"
+              fill="none"
+            />
+            <path
+              d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+            />
+          </svg>
+        </div>
+      </div>
+      <nav
+        class="_nav_f4f7a7"
+      >
+        <ul>
+          <li>
+            a
+          </li>
+          <li>
+            a
+          </li>
+        </ul>
+      </nav>
+      <div
+        class="_actions_f4f7a7"
+      >
+        <div
+          aria-label="Open search"
+          class="_iconButton_0fef65 _iconButton_f4f7a7 _actionButton_f4f7a7"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_585b29"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+            />
+          </svg>
+        </div>
+        <div
+          class="_buttonContainer_f4f7a7"
+        >
+          <button
+            aria-haspopup="dialog"
+            class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+            type="button"
+          >
+            <span>
+              sign_in
+            </span>
+          </button>
+          <button
+            aria-haspopup="dialog"
+            class="_button_f8f296 _primary_f8f296"
+            type="button"
+          >
+            <span>
+              sign_up
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </header>
+</div>
+`;
diff --git a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
index 1bef0cce5..1a795957a 100644
--- a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
@@ -49,15 +49,19 @@ exports[`<Layout /> > renders layout 1`] = `
           <nav
             class="_nav_f4f7a7"
           >
-            <a
-              aria-current="page"
-              class="_button_f8f296 _default_f8f296 _text_f8f296 _active_f8f296 _headerButton_c71437"
-              href="/"
-            >
-              <span>
-                home
-              </span>
-            </a>
+            <ul>
+              <li>
+                <a
+                  aria-current="page"
+                  class="_button_f8f296 _default_f8f296 _text_f8f296 _active_f8f296 _navButton_f4f7a7"
+                  href="/"
+                >
+                  <span>
+                    home
+                  </span>
+                </a>
+              </li>
+            </ul>
           </nav>
           <div
             class="_actions_f4f7a7"

From da5488c2372b2f49e302c45ef24627ebbe599151 Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Mon, 8 Apr 2024 12:40:42 +0200
Subject: [PATCH 095/128] chore: inline-block instead of float for menu buttons

---
 packages/ui-react/src/components/Header/Header.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
index 63fcd46ea..18c5d00cc 100644
--- a/packages/ui-react/src/components/Header/Header.module.scss
+++ b/packages/ui-react/src/components/Header/Header.module.scss
@@ -83,7 +83,7 @@
     list-style-type: none;
 
     li {
-      float: left;
+      display: inline-block;
     }
   }
 

From 0cb065ad5e4238fba14622ecfb43fc529f83ca1b Mon Sep 17 00:00:00 2001
From: mirovladimitrovski <vladimir.dimitrovski@jwplayer.com>
Date: Fri, 12 Apr 2024 11:37:19 +0200
Subject: [PATCH 096/128] fix: add social login buttons to signup screen

---
 .../components/RegistrationForm/RegistrationForm.test.tsx  | 1 +
 .../src/components/RegistrationForm/RegistrationForm.tsx   | 7 ++++++-
 .../src/containers/AccountModal/forms/Registration.tsx     | 4 ++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
index 30e894e3d..8aabfb019 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
@@ -19,6 +19,7 @@ describe('<RegistrationForm>', () => {
         consentValues={{}}
         loading={false}
         onConsentChange={vi.fn()}
+        socialLoginURLs={{ facebook: 'https://facebook.com', google: 'https://google.com' }}
       />,
     );
 
diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
index 1f56b636d..85c6d943f 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
@@ -5,6 +5,7 @@ import DOMPurify from 'dompurify';
 import type { FormErrors } from '@jwp/ott-common/types/form';
 import type { CustomFormField, RegistrationFormData } from '@jwp/ott-common/types/account';
 import { testId } from '@jwp/ott-common/src/utils/common';
+import type { SocialLoginURLs } from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
 import useToggle from '@jwp/ott-hooks-react/src/useToggle';
 import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
 import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
@@ -20,6 +21,7 @@ import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import Link from '../Link/Link';
 import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
+import SocialButtonsList from '../SocialButtonsList/SocialButtonsList';
 
 import styles from './RegistrationForm.module.scss';
 
@@ -36,6 +38,7 @@ type Props = {
   submitting: boolean;
   validationError?: boolean;
   publisherConsents: CustomFormField[] | null;
+  socialLoginURLs: SocialLoginURLs | null;
 };
 
 const RegistrationForm: React.FC<Props> = ({
@@ -51,6 +54,7 @@ const RegistrationForm: React.FC<Props> = ({
   consentValues,
   onConsentChange,
   consentErrors,
+  socialLoginURLs,
 }: Props) => {
   const [viewPassword, toggleViewPassword] = useToggle();
 
@@ -80,7 +84,6 @@ const RegistrationForm: React.FC<Props> = ({
 
   return (
     <form onSubmit={onSubmit} data-testid={testId('registration-form')} noValidate>
-      <h2 className={styles.title}>{t('registration.sign_up')}</h2>
       <div ref={ref}>
         {errors.form ? (
           <FormFeedback variant="error" visible={!validationError}>
@@ -88,6 +91,8 @@ const RegistrationForm: React.FC<Props> = ({
           </FormFeedback>
         ) : null}
       </div>
+      <SocialButtonsList socialLoginURLs={socialLoginURLs} />
+      <h2 className={styles.title}>{t('registration.sign_up')}</h2>
       <TextField
         value={values.email}
         onChange={onChange}
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
index 42e34dc77..a79cbe5b5 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
@@ -6,6 +6,7 @@ import type { RegistrationFormData } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { checkConsentsFromValues, extractConsentValues, formatConsentsFromValues } from '@jwp/ott-common/src/utils/collection';
+import useSocialLoginUrls from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
@@ -54,6 +55,8 @@ const Registration = () => {
     setConsentValues(extractConsentValues(publisherConsents));
   }, [accountController, publisherConsents]);
 
+  const socialLoginURLs = useSocialLoginUrls(window.location.href.split('?')[0]);
+
   const { handleSubmit, handleChange, handleBlur, values, errors, validationSchemaError, submitting } = useForm<RegistrationFormData>({
     initialValues: { email: '', password: '' },
     validationSchema: object().shape({
@@ -95,6 +98,7 @@ const Registration = () => {
       consentValues={consentValues}
       publisherConsents={publisherConsents}
       loading={loading || publisherConsentsLoading}
+      socialLoginURLs={socialLoginURLs}
     />
   );
 };

From bb5f5ea3e9b8664efb09e9fa8f837ce03d57127b Mon Sep 17 00:00:00 2001
From: mirovladimitrovski <vladimir.dimitrovski@jwplayer.com>
Date: Mon, 15 Apr 2024 09:37:59 +0200
Subject: [PATCH 097/128] Revert "fix: add social login buttons to signup
 screen"

This reverts commit 0cb065ad5e4238fba14622ecfb43fc529f83ca1b.
---
 .../components/RegistrationForm/RegistrationForm.test.tsx  | 1 -
 .../src/components/RegistrationForm/RegistrationForm.tsx   | 7 +------
 .../src/containers/AccountModal/forms/Registration.tsx     | 4 ----
 3 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
index 8aabfb019..30e894e3d 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
@@ -19,7 +19,6 @@ describe('<RegistrationForm>', () => {
         consentValues={{}}
         loading={false}
         onConsentChange={vi.fn()}
-        socialLoginURLs={{ facebook: 'https://facebook.com', google: 'https://google.com' }}
       />,
     );
 
diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
index 85c6d943f..1f56b636d 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
@@ -5,7 +5,6 @@ import DOMPurify from 'dompurify';
 import type { FormErrors } from '@jwp/ott-common/types/form';
 import type { CustomFormField, RegistrationFormData } from '@jwp/ott-common/types/account';
 import { testId } from '@jwp/ott-common/src/utils/common';
-import type { SocialLoginURLs } from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
 import useToggle from '@jwp/ott-hooks-react/src/useToggle';
 import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
 import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
@@ -21,7 +20,6 @@ import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import Link from '../Link/Link';
 import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
-import SocialButtonsList from '../SocialButtonsList/SocialButtonsList';
 
 import styles from './RegistrationForm.module.scss';
 
@@ -38,7 +36,6 @@ type Props = {
   submitting: boolean;
   validationError?: boolean;
   publisherConsents: CustomFormField[] | null;
-  socialLoginURLs: SocialLoginURLs | null;
 };
 
 const RegistrationForm: React.FC<Props> = ({
@@ -54,7 +51,6 @@ const RegistrationForm: React.FC<Props> = ({
   consentValues,
   onConsentChange,
   consentErrors,
-  socialLoginURLs,
 }: Props) => {
   const [viewPassword, toggleViewPassword] = useToggle();
 
@@ -84,6 +80,7 @@ const RegistrationForm: React.FC<Props> = ({
 
   return (
     <form onSubmit={onSubmit} data-testid={testId('registration-form')} noValidate>
+      <h2 className={styles.title}>{t('registration.sign_up')}</h2>
       <div ref={ref}>
         {errors.form ? (
           <FormFeedback variant="error" visible={!validationError}>
@@ -91,8 +88,6 @@ const RegistrationForm: React.FC<Props> = ({
           </FormFeedback>
         ) : null}
       </div>
-      <SocialButtonsList socialLoginURLs={socialLoginURLs} />
-      <h2 className={styles.title}>{t('registration.sign_up')}</h2>
       <TextField
         value={values.email}
         onChange={onChange}
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
index a79cbe5b5..42e34dc77 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
@@ -6,7 +6,6 @@ import type { RegistrationFormData } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { checkConsentsFromValues, extractConsentValues, formatConsentsFromValues } from '@jwp/ott-common/src/utils/collection';
-import useSocialLoginUrls from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
@@ -55,8 +54,6 @@ const Registration = () => {
     setConsentValues(extractConsentValues(publisherConsents));
   }, [accountController, publisherConsents]);
 
-  const socialLoginURLs = useSocialLoginUrls(window.location.href.split('?')[0]);
-
   const { handleSubmit, handleChange, handleBlur, values, errors, validationSchemaError, submitting } = useForm<RegistrationFormData>({
     initialValues: { email: '', password: '' },
     validationSchema: object().shape({
@@ -98,7 +95,6 @@ const Registration = () => {
       consentValues={consentValues}
       publisherConsents={publisherConsents}
       loading={loading || publisherConsentsLoading}
-      socialLoginURLs={socialLoginURLs}
     />
   );
 };

From c2e3f5266f0e29637e9e85ccef53c9dc54d962ce Mon Sep 17 00:00:00 2001
From: mirovladimitrovski
 <46674160+mirovladimitrovski@users.noreply.github.com>
Date: Mon, 15 Apr 2024 13:28:11 +0200
Subject: [PATCH 098/128] fix: add social login buttons to signup screen (#496)

---
 .../RegistrationForm.test.tsx                 | 21 +++++++++++++++++--
 .../RegistrationForm/RegistrationForm.tsx     |  7 ++++++-
 .../RegistrationForm.test.tsx.snap            | 21 ++++++++++++++++++-
 .../AccountModal/forms/Registration.tsx       |  4 ++++
 4 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
index 30e894e3d..2bc21f757 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.test.tsx
@@ -1,11 +1,25 @@
 import React from 'react';
 
-import { renderWithRouter } from '../../../test/utils';
+import { renderWithRouter, waitForWithFakeTimers } from '../../../test/utils';
 
 import RegistrationForm from './RegistrationForm';
 
+// The SocialButton component contains an SVG import that results in an absolute path on the current machine
+// This results in snapshot inconsistencies per machine
+vi.mock('../SocialButton/SocialButton.tsx', () => ({
+  default: (props: { href: string }) => {
+    return <a href={props.href}>Social Button</a>;
+  },
+}));
+
+const socialLoginURLs = {
+  twitter: 'https://staging-v2.inplayer.com/',
+  facebook: 'https://www.facebook.com/',
+  google: 'https://accounts.google.com/',
+};
+
 describe('<RegistrationForm>', () => {
-  test('renders and matches snapshot', () => {
+  test('renders and matches snapshot', async () => {
     const { container } = renderWithRouter(
       <RegistrationForm
         publisherConsents={null}
@@ -19,9 +33,12 @@ describe('<RegistrationForm>', () => {
         consentValues={{}}
         loading={false}
         onConsentChange={vi.fn()}
+        socialLoginURLs={socialLoginURLs}
       />,
     );
 
+    await waitForWithFakeTimers();
+
     expect(container).toMatchSnapshot();
   });
 });
diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
index 1f56b636d..85c6d943f 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
@@ -5,6 +5,7 @@ import DOMPurify from 'dompurify';
 import type { FormErrors } from '@jwp/ott-common/types/form';
 import type { CustomFormField, RegistrationFormData } from '@jwp/ott-common/types/account';
 import { testId } from '@jwp/ott-common/src/utils/common';
+import type { SocialLoginURLs } from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
 import useToggle from '@jwp/ott-hooks-react/src/useToggle';
 import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
 import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
@@ -20,6 +21,7 @@ import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import Link from '../Link/Link';
 import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
+import SocialButtonsList from '../SocialButtonsList/SocialButtonsList';
 
 import styles from './RegistrationForm.module.scss';
 
@@ -36,6 +38,7 @@ type Props = {
   submitting: boolean;
   validationError?: boolean;
   publisherConsents: CustomFormField[] | null;
+  socialLoginURLs: SocialLoginURLs | null;
 };
 
 const RegistrationForm: React.FC<Props> = ({
@@ -51,6 +54,7 @@ const RegistrationForm: React.FC<Props> = ({
   consentValues,
   onConsentChange,
   consentErrors,
+  socialLoginURLs,
 }: Props) => {
   const [viewPassword, toggleViewPassword] = useToggle();
 
@@ -80,7 +84,6 @@ const RegistrationForm: React.FC<Props> = ({
 
   return (
     <form onSubmit={onSubmit} data-testid={testId('registration-form')} noValidate>
-      <h2 className={styles.title}>{t('registration.sign_up')}</h2>
       <div ref={ref}>
         {errors.form ? (
           <FormFeedback variant="error" visible={!validationError}>
@@ -88,6 +91,8 @@ const RegistrationForm: React.FC<Props> = ({
           </FormFeedback>
         ) : null}
       </div>
+      <SocialButtonsList socialLoginURLs={socialLoginURLs} />
+      <h2 className={styles.title}>{t('registration.sign_up')}</h2>
       <TextField
         value={values.email}
         onChange={onChange}
diff --git a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
index 709bd50c3..7065bc1c9 100644
--- a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
+++ b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -6,12 +6,31 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
     data-testid="registration-form"
     novalidate=""
   >
+    <div />
+    <div
+      class="_socialButtonsListContainer_313d0d"
+    >
+      <a
+        href="https://staging-v2.inplayer.com/"
+      >
+        Social Button
+      </a>
+      <a
+        href="https://www.facebook.com/"
+      >
+        Social Button
+      </a>
+      <a
+        href="https://accounts.google.com/"
+      >
+        Social Button
+      </a>
+    </div>
     <h2
       class="_title_a472a0"
     >
       registration.sign_up
     </h2>
-    <div />
     <div
       class="_textField_e16c1b"
     >
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
index 42e34dc77..a79cbe5b5 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
@@ -6,6 +6,7 @@ import type { RegistrationFormData } from '@jwp/ott-common/types/account';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { checkConsentsFromValues, extractConsentValues, formatConsentsFromValues } from '@jwp/ott-common/src/utils/collection';
+import useSocialLoginUrls from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
@@ -54,6 +55,8 @@ const Registration = () => {
     setConsentValues(extractConsentValues(publisherConsents));
   }, [accountController, publisherConsents]);
 
+  const socialLoginURLs = useSocialLoginUrls(window.location.href.split('?')[0]);
+
   const { handleSubmit, handleChange, handleBlur, values, errors, validationSchemaError, submitting } = useForm<RegistrationFormData>({
     initialValues: { email: '', password: '' },
     validationSchema: object().shape({
@@ -95,6 +98,7 @@ const Registration = () => {
       consentValues={consentValues}
       publisherConsents={publisherConsents}
       loading={loading || publisherConsentsLoading}
+      socialLoginURLs={socialLoginURLs}
     />
   );
 };

From fa8c142331a87fe363aa639ab70ef14015a01439 Mon Sep 17 00:00:00 2001
From: mirovladimitrovski
 <46674160+mirovladimitrovski@users.noreply.github.com>
Date: Mon, 15 Apr 2024 15:33:19 +0200
Subject: [PATCH 099/128] fix: plans prompt after social register (#498)

---
 .../src/containers/AccountModal/forms/Registration.tsx        | 4 ++--
 platforms/web/src/containers/AppRoutes/AppRoutes.tsx          | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
index a79cbe5b5..c7443a1c5 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Registration.tsx
@@ -8,7 +8,7 @@ import AccountController from '@jwp/ott-common/src/controllers/AccountController
 import { checkConsentsFromValues, extractConsentValues, formatConsentsFromValues } from '@jwp/ott-common/src/utils/collection';
 import useSocialLoginUrls from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
-import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
+import { modalURLFromLocation, modalURLFromWindowLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 
 import RegistrationForm from '../../../components/RegistrationForm/RegistrationForm';
@@ -55,7 +55,7 @@ const Registration = () => {
     setConsentValues(extractConsentValues(publisherConsents));
   }, [accountController, publisherConsents]);
 
-  const socialLoginURLs = useSocialLoginUrls(window.location.href.split('?')[0]);
+  const socialLoginURLs = useSocialLoginUrls(modalURLFromWindowLocation('personal-details'));
 
   const { handleSubmit, handleChange, handleBlur, values, errors, validationSchemaError, submitting } = useForm<RegistrationFormData>({
     initialValues: { email: '', password: '' },
diff --git a/platforms/web/src/containers/AppRoutes/AppRoutes.tsx b/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
index c8c851617..8291728d9 100644
--- a/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
+++ b/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
@@ -32,6 +32,7 @@ import {
   PATH_USER_PROFILES_EDIT_PROFILE,
   PATH_SEARCH,
   PATH_USER,
+  PATH_HOME,
 } from '@jwp/ott-common/src/paths';
 
 import useNotifications from '#src/hooks/useNotifications';
@@ -53,7 +54,7 @@ export default function AppRoutes() {
   useNotifications();
 
   if (userData.user && !userData.loading && window.location.href.includes('#token')) {
-    return <Navigate to="/" />; // component instead of hook to prevent extra re-renders
+    return <Navigate to={`${PATH_HOME}${location.search}`} />; // component instead of hook to prevent extra re-renders
   }
 
   if (userData.user && selectingProfileAvatar !== null) {

From 1cd135ea3eccae6d956d71493611d3e8cf79adc0 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 16 Apr 2024 15:15:23 +0200
Subject: [PATCH 100/128] fix(a11y): lose focus after activating share button

---
 packages/ui-react/src/utils/clipboard.test.ts | 28 +++++++++++++++++++
 packages/ui-react/src/utils/clipboard.ts      |  2 ++
 2 files changed, 30 insertions(+)
 create mode 100644 packages/ui-react/src/utils/clipboard.test.ts

diff --git a/packages/ui-react/src/utils/clipboard.test.ts b/packages/ui-react/src/utils/clipboard.test.ts
new file mode 100644
index 000000000..a887a1e19
--- /dev/null
+++ b/packages/ui-react/src/utils/clipboard.test.ts
@@ -0,0 +1,28 @@
+import { copyToClipboard } from './clipboard';
+
+document.execCommand = vi.fn();
+const execCommandMocked = vi.mocked(document.execCommand);
+
+describe('clipboard', () => {
+  test('copies text to clipboard', () => {
+    copyToClipboard('text to copy');
+
+    expect(execCommandMocked).toHaveBeenCalledWith('copy');
+  });
+
+  test('restores focus to the last active element', () => {
+    // create a test button
+    const button = document.createElement('button');
+    button.textContent = 'share';
+
+    document.body.appendChild(button);
+
+    button.focus();
+
+    // document.activeElement = '';
+    copyToClipboard('text to copy');
+
+    expect(document.activeElement).toEqual(button);
+    document.body.removeChild(button);
+  });
+});
diff --git a/packages/ui-react/src/utils/clipboard.ts b/packages/ui-react/src/utils/clipboard.ts
index 26b942845..089e6e486 100644
--- a/packages/ui-react/src/utils/clipboard.ts
+++ b/packages/ui-react/src/utils/clipboard.ts
@@ -1,4 +1,5 @@
 export const copyToClipboard = (value: string): void => {
+  const focusedElement = document.activeElement as HTMLElement;
   const inputElement = document.createElement('input');
   inputElement.style.zIndex = '-10';
   inputElement.style.position = 'absolute';
@@ -9,4 +10,5 @@ export const copyToClipboard = (value: string): void => {
   document.execCommand('copy');
   inputElement.blur();
   document.body.removeChild(inputElement);
+  focusedElement?.focus();
 };

From 880e4af3ef3a01054a65f3bebb75e32287aae469 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 10 Apr 2024 17:28:16 +0200
Subject: [PATCH 101/128] fix(payment): cleeng paypal invalid url error

---
 .../ui-react/src/containers/AccountModal/forms/Checkout.tsx     | 2 +-
 packages/ui-react/src/utils/location.ts                         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
index 825da6582..69c357e78 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
@@ -103,7 +103,7 @@ const Checkout = () => {
   const cancelUrl = modalURLFromWindowLocation('payment-cancelled');
   const waitingUrl = modalURLFromWindowLocation('waiting-for-payment', { offerId: selectedOffer?.offerId });
   const errorUrl = modalURLFromWindowLocation('payment-error');
-  const successUrlPaypal = offerType === 'svod' ? waitingUrl : closeModalUrl;
+  const successUrlPaypal = offerType === 'svod' ? waitingUrl : modalURLFromWindowLocation(null);
   const referrer = window.location.href;
 
   const paymentMethod = paymentMethods?.find((method) => method.id === parseInt(paymentMethodId));
diff --git a/packages/ui-react/src/utils/location.ts b/packages/ui-react/src/utils/location.ts
index b40718100..b9c4c0bef 100644
--- a/packages/ui-react/src/utils/location.ts
+++ b/packages/ui-react/src/utils/location.ts
@@ -12,6 +12,6 @@ export const modalURLFromLocation = (location: Location, u: keyof AccountModals
 };
 
 // Create a full modal url including hostname, mostly for external use (e.g paypal successUrl)
-export const modalURLFromWindowLocation = (u: keyof AccountModals, queryParams?: QueryParamsArg) => {
+export const modalURLFromWindowLocation = (u: keyof AccountModals | null, queryParams?: QueryParamsArg) => {
   return createURL(window.location.href, { u, ...queryParams });
 };

From d6b6e8fa243279cfe8755f7e67a0a0f34df84233 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 17 Apr 2024 13:37:19 +0200
Subject: [PATCH 102/128] refactor: use create url util for paypal success url

---
 packages/common/src/utils/urlFormatting.ts           | 12 ++++++++++--
 .../src/containers/AccountModal/forms/Checkout.tsx   |  3 ++-
 packages/ui-react/src/utils/location.ts              |  9 +++++++--
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/common/src/utils/urlFormatting.ts b/packages/common/src/utils/urlFormatting.ts
index 4ce11e919..0ba584fb9 100644
--- a/packages/common/src/utils/urlFormatting.ts
+++ b/packages/common/src/utils/urlFormatting.ts
@@ -5,8 +5,16 @@ import { getLegacySeriesPlaylistIdFromEpisodeTags, getSeriesPlaylistIdFromCustom
 
 export type QueryParamsArg = { [key: string]: string | number | string[] | undefined | null };
 
-// Creates a new URL from a url string (could include search params) and an object to add and remove query params
-// For example: createURL(window.location.pathname, { foo: 'bar' });
+/**
+ * Creates a new URL from an url string (preserving the search params) and an object to add and remove query params
+ *
+ * @example
+ * createURL('/m/123456?play=1', { foo: 'bar' }) === '/m/123456?play=6&foo=bar'
+ * createURL('/m/123456?play=1', { play: null }) === '/m/123456'
+ *
+ * // works with absolute URLs
+ * createURL('https://jwplayer.com/m/123456?play=1', { play: null }) === 'https://jwplayer.com/m/123456'
+ */
 export const createURL = (url: string, queryParams: QueryParamsArg) => {
   const [baseUrl, urlQueryString = ''] = url.split('?');
   const urlSearchParams = new URLSearchParams(urlQueryString);
diff --git a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
index 69c357e78..b65abac5f 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx
@@ -5,6 +5,7 @@ import { modalURLFromLocation, modalURLFromWindowLocation } from '@jwp/ott-ui-re
 import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { FormValidationError } from '@jwp/ott-common/src/errors/FormValidationError';
 import { useTranslation } from 'react-i18next';
+import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 
 import CheckoutForm from '../../../components/CheckoutForm/CheckoutForm';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
@@ -103,7 +104,7 @@ const Checkout = () => {
   const cancelUrl = modalURLFromWindowLocation('payment-cancelled');
   const waitingUrl = modalURLFromWindowLocation('waiting-for-payment', { offerId: selectedOffer?.offerId });
   const errorUrl = modalURLFromWindowLocation('payment-error');
-  const successUrlPaypal = offerType === 'svod' ? waitingUrl : modalURLFromWindowLocation(null);
+  const successUrlPaypal = offerType === 'svod' ? waitingUrl : createURL(window.location.href, { u: '' });
   const referrer = window.location.href;
 
   const paymentMethod = paymentMethods?.find((method) => method.id === parseInt(paymentMethodId));
diff --git a/packages/ui-react/src/utils/location.ts b/packages/ui-react/src/utils/location.ts
index b9c4c0bef..22020450c 100644
--- a/packages/ui-react/src/utils/location.ts
+++ b/packages/ui-react/src/utils/location.ts
@@ -11,7 +11,12 @@ export const modalURLFromLocation = (location: Location, u: keyof AccountModals
   return createURL(`${location.pathname}${location.search || ''}`, { u, ...queryParams });
 };
 
-// Create a full modal url including hostname, mostly for external use (e.g paypal successUrl)
-export const modalURLFromWindowLocation = (u: keyof AccountModals | null, queryParams?: QueryParamsArg) => {
+/**
+ * Create a full modal URL including the hostname, mostly for external use (e.g., for the PayPal successUrl)
+ *
+ * @example
+ * modalURLFromWindowLocation('login', { foo: 'bar' }) === 'https://jwplayer.com/?u=login&foo=bar'
+ */
+export const modalURLFromWindowLocation = (u: keyof AccountModals, queryParams?: QueryParamsArg) => {
   return createURL(window.location.href, { u, ...queryParams });
 };

From 11a0e32f26b68d4ceeab5edfba2e912e8423198d Mon Sep 17 00:00:00 2001
From: Melissa 't Hart <melissa@videodock.com>
Date: Tue, 16 Apr 2024 12:14:04 +0200
Subject: [PATCH 103/128] fix(videodetail): unnecessary scrollbar in videolist

---
 .../ui-react/src/components/VideoList/VideoList.module.scss    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/ui-react/src/components/VideoList/VideoList.module.scss b/packages/ui-react/src/components/VideoList/VideoList.module.scss
index b50f97ff3..6f25e50a8 100644
--- a/packages/ui-react/src/components/VideoList/VideoList.module.scss
+++ b/packages/ui-react/src/components/VideoList/VideoList.module.scss
@@ -8,11 +8,10 @@
 }
 
 .content {
-  
   @include responsive.desktop-only() {
     height: 100%;
     padding: 16px 24px;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 }
 

From a9a0d1fa4d9266bb532544f1377010819ac47ff5 Mon Sep 17 00:00:00 2001
From: Melissa 't Hart <melissa@videodock.com>
Date: Tue, 16 Apr 2024 12:15:08 +0200
Subject: [PATCH 104/128] fix(project): scroll to top on static pages

---
 .../mediaScreens/MediaStaticPage/MediaStaticPage.tsx        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaStaticPage/MediaStaticPage.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaStaticPage/MediaStaticPage.tsx
index 2d9700c35..6d54f5b61 100644
--- a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaStaticPage/MediaStaticPage.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaStaticPage/MediaStaticPage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
@@ -16,6 +16,10 @@ const MediaStaticPage: ScreenComponent<PlaylistItem> = ({ data }) => {
   const pageTitle = `${data.title} - ${siteName}`;
   const canonicalUrl = data ? `${window.location.origin}${mediaURL({ media: data })}` : window.location.href;
 
+  useEffect(() => {
+    (document.scrollingElement || document.body).scroll({ top: 0 });
+  }, [data]);
+
   return (
     <>
       <Helmet>

From e62425040df5836723d1d3db3f5bc9e09339a042 Mon Sep 17 00:00:00 2001
From: Melissa 't Hart <melissa@videodock.com>
Date: Wed, 17 Apr 2024 11:39:47 +0200
Subject: [PATCH 105/128] refactor(project): add a more specific hook
 dependency

---
 .../mediaScreens/MediaStaticPage/MediaStaticPage.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaStaticPage/MediaStaticPage.tsx b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaStaticPage/MediaStaticPage.tsx
index 6d54f5b61..ae66dbded 100644
--- a/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaStaticPage/MediaStaticPage.tsx
+++ b/packages/ui-react/src/pages/ScreenRouting/mediaScreens/MediaStaticPage/MediaStaticPage.tsx
@@ -18,7 +18,7 @@ const MediaStaticPage: ScreenComponent<PlaylistItem> = ({ data }) => {
 
   useEffect(() => {
     (document.scrollingElement || document.body).scroll({ top: 0 });
-  }, [data]);
+  }, [data.mediaid]);
 
   return (
     <>

From 7e11074c1ba9aebc02f01e0dfffcc47d39a9a370 Mon Sep 17 00:00:00 2001
From: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com>
Date: Tue, 2 Apr 2024 09:14:12 +0200
Subject: [PATCH 106/128] fix(project): old password form error after
 validation

---
 .../src/components/EditPasswordForm/EditPasswordForm.tsx     | 5 ++++-
 .../__snapshots__/EditPasswordForm.test.tsx.snap             | 2 ++
 .../ui-react/src/components/PasswordField/PasswordField.tsx  | 2 +-
 .../src/containers/AccountModal/forms/EditPassword.tsx       | 2 ++
 platforms/web/public/locales/en/account.json                 | 1 +
 platforms/web/public/locales/es/account.json                 | 1 +
 6 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
index 5aa41f030..8413310ac 100644
--- a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
+++ b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
@@ -43,7 +43,7 @@ const EditPasswordForm: React.FC<Props> = ({
 }: Props) => {
   const { t } = useTranslation(['account', 'user']);
   return (
-    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate className={styles.forgotPasswordForm}>
+    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate>
       {errors.form && (
         <FormFeedback variant="error" visible={!validationError}>
           {errors.form}
@@ -69,6 +69,7 @@ const EditPasswordForm: React.FC<Props> = ({
           name="oldPassword"
           showToggleView={false}
           showHelperText={false}
+          autoComplete="current-password"
           required
         />
       )}
@@ -95,6 +96,7 @@ const EditPasswordForm: React.FC<Props> = ({
         placeholder={t('reset.password')}
         error={!!errors.password}
         name="password"
+        autoComplete="new-password"
         required
       />
 
@@ -106,6 +108,7 @@ const EditPasswordForm: React.FC<Props> = ({
         placeholder={t('reset.repeat_new_password')}
         error={!!errors.passwordConfirmation}
         name="passwordConfirmation"
+        autoComplete="new-password"
         required
       />
 
diff --git a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
index 6158f4261..154c0b47c 100644
--- a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
+          autocomplete="new-password"
           class="_input_e16c1b"
           id="text-field_1235_password"
           name="password"
@@ -79,6 +80,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_passwordconfirmation"
           aria-invalid="false"
+          autocomplete="new-password"
           class="_input_e16c1b"
           id="text-field_1235_passwordconfirmation"
           name="passwordConfirmation"
diff --git a/packages/ui-react/src/components/PasswordField/PasswordField.tsx b/packages/ui-react/src/components/PasswordField/PasswordField.tsx
index 0a430ee44..a4eceecd3 100644
--- a/packages/ui-react/src/components/PasswordField/PasswordField.tsx
+++ b/packages/ui-react/src/components/PasswordField/PasswordField.tsx
@@ -9,7 +9,7 @@ import PasswordStrength from '../PasswordStrength/PasswordStrength';
 import IconButton from '../IconButton/IconButton';
 import Icon from '../Icon/Icon';
 
-type Props = {
+type Props = React.InputHTMLAttributes<HTMLInputElement> & {
   onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   error?: boolean;
diff --git a/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx b/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
index 50321cc8a..22c54a2ba 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
@@ -59,6 +59,8 @@ const ResetPassword = ({ type }: { type?: 'add' }) => {
           setErrors({ form: t('reset.invalid_reset_link') });
         } else if (error.message.includes('score does not match standards')) {
           setErrors({ form: t('reset.password_strength') });
+        } else if (error.message.includes('old password does not match')) {
+          setErrors({ form: t('reset.old_password_does_not_match') });
         } else if (error.message.includes('password could not be set')) {
           setErrors({ form: t('reset.invalid_token') });
         }
diff --git a/platforms/web/public/locales/en/account.json b/platforms/web/public/locales/en/account.json
index d5dddbee5..12dfe8199 100644
--- a/platforms/web/public/locales/en/account.json
+++ b/platforms/web/public/locales/en/account.json
@@ -195,6 +195,7 @@
     "password_reset_success": "Password reset successful",
     "password_strength": "Although your password meets the criteria for a strong password, it includes elements that are not advisable, such as prohibited phrases or repeated words. Please modify it to ensure account safety.",
     "passwords_do_not_match": "Passwords do not match",
+    "old_password_does_not_match": "Old password does not match",
     "repeat_new_password": "Repeat new password",
     "reset_password": "Edit Password",
     "reset_password_token": "Token",
diff --git a/platforms/web/public/locales/es/account.json b/platforms/web/public/locales/es/account.json
index fbf29626e..2701e8a2c 100644
--- a/platforms/web/public/locales/es/account.json
+++ b/platforms/web/public/locales/es/account.json
@@ -205,6 +205,7 @@
     "password_reset_success": "Contraseña restablecida",
     "password_strength": "Aunque tu contraseña cumple con los criterios de una contraseña segura, incluye elementos que no son recomendables, como frases prohibidas o palabras repetidas. Por favor, modifícala para garantizar la seguridad de tu cuenta.",
     "passwords_do_not_match": "Las contraseñas no coinciden",
+    "old_password_does_not_match": "La contraseña antigua no coincide",
     "repeat_new_password": "Repetir nueva contraseña",
     "reset_password": "Editar contraseña",
     "reset_password_token": "Token",

From 0dfa380a07be113cdb691eaaa5b245a54f91afc2 Mon Sep 17 00:00:00 2001
From: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com>
Date: Tue, 2 Apr 2024 12:05:12 +0200
Subject: [PATCH 107/128] fix(project): improve form validation on account page

---
 .../src/components/Form/FormSection.tsx        |  2 +-
 .../PersonalDetailsForm.test.tsx.snap          | 18 +++++++++---------
 .../src/components/TextField/TextField.tsx     |  2 +-
 .../DemoConfigDialog.test.tsx.snap             |  2 +-
 platforms/web/test-e2e/tests/register_test.ts  |  8 +++++++-
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/ui-react/src/components/Form/FormSection.tsx b/packages/ui-react/src/components/Form/FormSection.tsx
index eb4daf399..bd6737589 100644
--- a/packages/ui-react/src/components/Form/FormSection.tsx
+++ b/packages/ui-react/src/components/Form/FormSection.tsx
@@ -94,7 +94,7 @@ export function FormSection<TData extends GenericFormValues>({
 
         try {
           setFormState((s) => {
-            return { ...s, isBusy: true };
+            return { ...s, isBusy: true, errors: [] };
           });
           response = await onSubmit(values);
         } catch (error: unknown) {
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
index fe029a7ed..e05b7b349 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
+++ b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_firstname"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="given-name"
           class="_input_e16c1b"
           id="text-field_1235_firstname"
@@ -63,7 +63,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_lastname"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="family-name"
           class="_input_e16c1b"
           id="text-field_1235_lastname"
@@ -98,7 +98,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_companyname"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="organization"
           class="_input_e16c1b"
           id="text-field_1235_companyname"
@@ -129,7 +129,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_address"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="address-line1"
           class="_input_e16c1b"
           id="text-field_1235_address"
@@ -164,7 +164,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_address2"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="address-line2"
           class="_input_e16c1b"
           id="text-field_1235_address2"
@@ -195,7 +195,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_city"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="address-level2"
           class="_input_e16c1b"
           id="text-field_1235_city"
@@ -227,7 +227,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_state"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="address-level1"
           class="_input_e16c1b"
           id="text-field_1235_state"
@@ -259,7 +259,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_postcode"
-          aria-invalid="false"
+          aria-invalid="true"
           autocomplete="postal-code"
           class="_input_e16c1b"
           id="text-field_1235_postcode"
@@ -291,7 +291,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_phonenumber"
-          aria-invalid="false"
+          aria-invalid="true"
           class="_input_e16c1b"
           id="text-field_1235_phonenumber"
           name="phoneNumber"
diff --git a/packages/ui-react/src/components/TextField/TextField.tsx b/packages/ui-react/src/components/TextField/TextField.tsx
index 1b5787a6f..8f095daf9 100644
--- a/packages/ui-react/src/components/TextField/TextField.tsx
+++ b/packages/ui-react/src/components/TextField/TextField.tsx
@@ -69,7 +69,7 @@ const TextField: React.FC<Props> = ({
     const inputType = 'type' in otherInputProps ? otherInputProps.type : 'text';
 
     const ariaAttributes = {
-      'aria-invalid': Boolean(error && !value),
+      'aria-invalid': Boolean(error && !!value),
       'aria-describedby': helperTextId,
     } as const;
 
diff --git a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
index 01b11132f..b2103ad89 100644
--- a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
+++ b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
@@ -65,7 +65,7 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
               >
                 <input
                   aria-describedby="helper_text_1235_app-config"
-                  aria-invalid="false"
+                  aria-invalid="true"
                   autocapitalize="none"
                   class="_input_25c745"
                   id="text-field_1235_app-config"
diff --git a/platforms/web/test-e2e/tests/register_test.ts b/platforms/web/test-e2e/tests/register_test.ts
index c07a1cd11..41cafddc1 100644
--- a/platforms/web/test-e2e/tests/register_test.ts
+++ b/platforms/web/test-e2e/tests/register_test.ts
@@ -66,9 +66,15 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     I.dontSeeElement(constants.loginFormSelector);
   });
 
-  Scenario(`The Sign up modal will invalidate when directly pressing submit - ${providerName}`, async ({ I }) => {
+  Scenario(`The Sign up modal will invalidate upon submit only if a value is inputted - ${providerName}`, async ({ I }) => {
     I.click('Continue');
     I.seeElementInDOM('div[class*=formFeedback]'); // This element can be visually hidden through CSS
+    I.seeAttributesOnElements('input[name="email"]', { 'aria-invalid': 'false' });
+    I.seeAttributesOnElements('input[name="password"]', { 'aria-invalid': 'false' });
+
+    I.fillField('Email', 'test');
+    I.fillField('Password', 'test');
+    I.click('Continue');
     I.seeAttributesOnElements('input[name="email"]', { 'aria-invalid': 'true' });
     I.seeAttributesOnElements('input[name="password"]', { 'aria-invalid': 'true' });
   });

From 7d5beae6f12ab4de55414bc2f2f1a46386915921 Mon Sep 17 00:00:00 2001
From: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com>
Date: Thu, 4 Apr 2024 15:41:55 +0200
Subject: [PATCH 108/128] fix(a11y): icon button to use button element

---
 .../__snapshots__/CheckoutForm.test.tsx.snap  |  6 ++---
 .../Dialog/__snapshots__/Dialog.test.tsx.snap |  6 ++---
 .../DialogBackButton.test.tsx.snap            |  6 ++---
 .../EditPasswordForm.test.tsx.snap            | 12 ++++------
 .../Header/__snapshots__/Header.test.tsx.snap | 12 ++++------
 .../src/components/IconButton/IconButton.tsx  | 23 ++++--------------
 .../__snapshots__/IconButton.test.tsx.snap    |  6 ++---
 .../components/LanguageMenu/LanguageMenu.tsx  |  4 ++--
 .../__snapshots__/LanguageMenu.test.tsx.snap  |  6 ++---
 .../__snapshots__/LoginForm.test.tsx.snap     |  6 ++---
 .../ModalCloseButton.test.tsx.snap            |  6 ++---
 .../__snapshots__/PasswordField.test.tsx.snap |  6 ++---
 .../RegistrationForm.test.tsx.snap            |  6 ++---
 .../__snapshots__/SearchBar.test.tsx.snap     |  6 ++---
 .../__snapshots__/Sidebar.test.tsx.snap       | 12 ++++------
 .../Cinema/__snapshots__/Cinema.test.tsx.snap |  6 ++---
 .../Layout/__snapshots__/Layout.test.tsx.snap | 12 ++++------
 .../web/test-e2e/tests/live_channel_test.ts   |  2 +-
 .../test-e2e/tests/payments/coupons_test.ts   |  2 +-
 platforms/web/test-e2e/tests/search_test.ts   |  6 ++---
 .../web/test-e2e/tests/video_detail_test.ts   | 24 +++++++++----------
 .../web/test-e2e/utils/password_utils.ts      |  4 ++--
 platforms/web/test-e2e/utils/steps_file.ts    |  6 ++---
 platforms/web/test-e2e/utils/watch_history.ts |  2 +-
 24 files changed, 68 insertions(+), 119 deletions(-)

diff --git a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
index ebbee84cb..2c2beb5e7 100644
--- a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
+++ b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
@@ -216,11 +216,9 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
         </form>
       </div>
     </div>
-    <div
+    <button
       aria-label="common:back"
       class="_iconButton_0fef65 _dialogBackButton_248199"
-      role="button"
-      tabindex="0"
     >
       <svg
         aria-hidden="true"
@@ -232,7 +230,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
           d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
         />
       </svg>
-    </div>
+    </button>
   </div>
 </div>
 `;
diff --git a/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
index a46295ebc..fda711396 100644
--- a/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -35,11 +35,9 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
             role="dialog"
           >
             Dialog contents
-            <div
+            <button
               aria-label="close_modal"
               class="_iconButton_0fef65 _modalCloseButton_b92d69"
-              role="button"
-              tabindex="0"
             >
               <svg
                 aria-hidden="true"
@@ -55,7 +53,7 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
                   fill="none"
                 />
               </svg>
-            </div>
+            </button>
           </div>
         </div>
       </div>
diff --git a/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap b/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
index 99e39c033..7a39c7d0e 100644
--- a/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
+++ b/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
@@ -2,11 +2,9 @@
 
 exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
 <div>
-  <div
+  <button
     aria-label="common:back"
     class="_iconButton_0fef65 _dialogBackButton_248199"
-    role="button"
-    tabindex="0"
   >
     <svg
       aria-hidden="true"
@@ -18,6 +16,6 @@ exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
         d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
       />
     </svg>
-  </div>
+  </button>
 </div>
 `;
diff --git a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
index 154c0b47c..98520e064 100644
--- a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
@@ -38,12 +38,10 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <div
           class="_control_e16c1b"
         >
-          <div
+          <button
             aria-label="reset.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
-            role="button"
-            tabindex="0"
           >
             <svg
               aria-hidden="true"
@@ -55,7 +53,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
                 d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
               />
             </svg>
-          </div>
+          </button>
         </div>
       </div>
       <div
@@ -92,12 +90,10 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <div
           class="_control_e16c1b"
         >
-          <div
+          <button
             aria-label="reset.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
-            role="button"
-            tabindex="0"
           >
             <svg
               aria-hidden="true"
@@ -109,7 +105,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
                 d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
               />
             </svg>
-          </div>
+          </button>
         </div>
       </div>
       <div
diff --git a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
index 149af04c5..16a26a365 100644
--- a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -17,14 +17,12 @@ exports[`<Header /> > renders header 1`] = `
       <div
         class="_menu_f4f7a7"
       >
-        <div
+        <button
           aria-controls="sidebar"
           aria-expanded="false"
           aria-haspopup="true"
           aria-label="open_menu"
           class="_iconButton_0fef65 _iconButton_f4f7a7"
-          role="button"
-          tabindex="0"
         >
           <svg
             aria-hidden="true"
@@ -40,7 +38,7 @@ exports[`<Header /> > renders header 1`] = `
               d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
             />
           </svg>
-        </div>
+        </button>
       </div>
       <nav
         class="_nav_f4f7a7"
@@ -50,11 +48,9 @@ exports[`<Header /> > renders header 1`] = `
       <div
         class="_actions_f4f7a7"
       >
-        <div
+        <button
           aria-label="Open search"
           class="_iconButton_0fef65 _iconButton_f4f7a7 _actionButton_f4f7a7"
-          role="button"
-          tabindex="0"
         >
           <svg
             aria-hidden="true"
@@ -66,7 +62,7 @@ exports[`<Header /> > renders header 1`] = `
               d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
             />
           </svg>
-        </div>
+        </button>
         <div
           class="_buttonContainer_f4f7a7"
         >
diff --git a/packages/ui-react/src/components/IconButton/IconButton.tsx b/packages/ui-react/src/components/IconButton/IconButton.tsx
index fa5d6b8e4..14d229cb7 100644
--- a/packages/ui-react/src/components/IconButton/IconButton.tsx
+++ b/packages/ui-react/src/components/IconButton/IconButton.tsx
@@ -1,33 +1,20 @@
 import classNames from 'classnames';
-import React, { type AriaAttributes } from 'react';
+import React, { type ButtonHTMLAttributes } from 'react';
 
 import styles from './IconButton.module.scss';
 
-type Props = AriaAttributes & {
+type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
   onClick?: () => void;
   onBlur?: () => void;
   children: JSX.Element;
-  tabIndex?: number;
   className?: string;
 };
 
-const IconButton: React.FC<Props> = ({ children, onClick, tabIndex = 0, className, ...ariaProps }: Props) => {
+const IconButton: React.FC<Props> = ({ children, onClick, className, ...ariaProps }: Props) => {
   return (
-    <div
-      className={classNames(styles.iconButton, className)}
-      onClick={onClick}
-      role="button"
-      tabIndex={tabIndex}
-      onKeyDown={(event: React.KeyboardEvent) => {
-        if ((event.key === 'Enter' || event.key === ' ') && tabIndex >= 0 && onClick) {
-          onClick();
-          event.preventDefault(); // prevent click being called when this component unmounts
-        }
-      }}
-      {...ariaProps}
-    >
+    <button className={classNames(styles.iconButton, className)} onClick={onClick} {...ariaProps}>
       {children}
-    </div>
+    </button>
   );
 };
 
diff --git a/packages/ui-react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap b/packages/ui-react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
index 29886da80..f8e9e64c5 100644
--- a/packages/ui-react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
+++ b/packages/ui-react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
@@ -2,11 +2,9 @@
 
 exports[`<IconButton> > renders and matches snapshot 1`] = `
 <div>
-  <div
+  <button
     aria-label="Icon button"
     class="_iconButton_0fef65"
-    role="button"
-    tabindex="0"
   >
     <svg
       viewBox="0 0 24 24"
@@ -20,6 +18,6 @@ exports[`<IconButton> > renders and matches snapshot 1`] = `
         fill="none"
       />
     </svg>
-  </div>
+  </button>
 </div>
 `;
diff --git a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
index 2a11f724a..8463b9df1 100644
--- a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
+++ b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
@@ -48,14 +48,14 @@ const LanguageMenu = ({ onClick, className, languages, currentLanguage, language
         aria-controls="language-panel"
         aria-expanded={languageMenuOpen}
         aria-haspopup="menu"
-        className={classNames(styles.iconButton, className)}
+        className={classNames(className)}
         aria-label={t('language_menu')}
         onClick={handleMenuToggle}
         onBlur={closeLanguageMenu}
       >
         <Icon icon={Language} />
       </IconButton>
-      <Popover isOpen={languageMenuOpen} onClose={closeLanguageMenu} aria-expanded={languageMenuOpen}>
+      <Popover isOpen={languageMenuOpen} onClose={closeLanguageMenu}>
         <Panel id="language-panel">
           <ul className={styles.menuItems}>
             {languages.map(({ code, displayName }) => {
diff --git a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
index e098530c3..5f70ef66e 100644
--- a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
+++ b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
@@ -2,15 +2,13 @@
 
 exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
 <div>
-  <div
+  <button
     aria-controls="language-panel"
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="language_menu"
     class="_iconButton_0fef65"
     data-testid="language-menu-button"
-    role="button"
-    tabindex="0"
   >
     <svg
       aria-hidden="true"
@@ -23,6 +21,6 @@ exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
         fill="currentColor"
       />
     </svg>
-  </div>
+  </button>
 </div>
 `;
diff --git a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
index ccb3a2978..d119863b5 100644
--- a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
+++ b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
@@ -85,12 +85,10 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
         <div
           class="_control_e16c1b"
         >
-          <div
+          <button
             aria-label="login.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
-            role="button"
-            tabindex="0"
           >
             <svg
               aria-hidden="true"
@@ -102,7 +100,7 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
                 d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
               />
             </svg>
-          </div>
+          </button>
         </div>
       </div>
     </div>
diff --git a/packages/ui-react/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap b/packages/ui-react/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap
index 587364f04..3d1e03c3b 100644
--- a/packages/ui-react/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap
+++ b/packages/ui-react/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap
@@ -2,11 +2,9 @@
 
 exports[`<ModalCloseButton> > renders and matches snapshot 1`] = `
 <div>
-  <div
+  <button
     aria-label="close_modal"
     class="_iconButton_0fef65 _modalCloseButton_b92d69"
-    role="button"
-    tabindex="0"
   >
     <svg
       aria-hidden="true"
@@ -22,6 +20,6 @@ exports[`<ModalCloseButton> > renders and matches snapshot 1`] = `
         fill="none"
       />
     </svg>
-  </div>
+  </button>
 </div>
 `;
diff --git a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap b/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
index 0bc26227d..c8b995d96 100644
--- a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
+++ b/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
@@ -28,12 +28,10 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
       <div
         class="_control_e16c1b"
       >
-        <div
+        <button
           aria-label="reset.view_password"
           aria-pressed="false"
           class="_iconButton_0fef65"
-          role="button"
-          tabindex="0"
         >
           <svg
             aria-hidden="true"
@@ -45,7 +43,7 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
               d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
             />
           </svg>
-        </div>
+        </button>
       </div>
     </div>
     <div
diff --git a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
index 7065bc1c9..509d58018 100644
--- a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
+++ b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -84,12 +84,10 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
         <div
           class="_control_e16c1b"
         >
-          <div
+          <button
             aria-label="registration.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
-            role="button"
-            tabindex="0"
           >
             <svg
               aria-hidden="true"
@@ -101,7 +99,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
                 d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
               />
             </svg>
-          </div>
+          </button>
         </div>
       </div>
       <div
diff --git a/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap b/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
index 6ad2ca4f9..6ad06cf58 100644
--- a/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
+++ b/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
@@ -32,11 +32,9 @@ exports[`<SearchBar> > renders and matches snapshot 1`] = `
         type="search"
         value="My search query"
       />
-      <div
+      <button
         aria-label="search_bar.clear_search_label"
         class="_iconButton_0fef65 _clearButton_3bb1d7"
-        role="button"
-        tabindex="0"
       >
         <svg
           aria-hidden="true"
@@ -48,7 +46,7 @@ exports[`<SearchBar> > renders and matches snapshot 1`] = `
             d="M9 1C4.58 1 1 4.58 1 9s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm4 10.87L11.87 13 9 10.13 6.13 13 5 11.87 7.87 9 5 6.13 6.13 5 9 7.87 11.87 5 13 6.13 10.13 9 13 11.87z"
           />
         </svg>
-      </div>
+      </button>
     </form>
   </div>
 </div>
diff --git a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
index 33b7ab28a..92a961242 100644
--- a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
+++ b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
@@ -13,11 +13,9 @@ exports[`<SideBar /> > renders sideBar closed 1`] = `
     <div
       class="_heading_577f70"
     >
-      <div
+      <button
         aria-label="close_menu"
         class="_iconButton_0fef65"
-        role="button"
-        tabindex="0"
       >
         <svg
           aria-hidden="true"
@@ -33,7 +31,7 @@ exports[`<SideBar /> > renders sideBar closed 1`] = `
             fill="none"
           />
         </svg>
-      </div>
+      </button>
     </div>
     <nav
       class="_group_577f70"
@@ -64,11 +62,9 @@ exports[`<SideBar /> > renders sideBar opened 1`] = `
     <div
       class="_heading_577f70"
     >
-      <div
+      <button
         aria-label="close_menu"
         class="_iconButton_0fef65"
-        role="button"
-        tabindex="0"
       >
         <svg
           aria-hidden="true"
@@ -84,7 +80,7 @@ exports[`<SideBar /> > renders sideBar opened 1`] = `
             fill="none"
           />
         </svg>
-      </div>
+      </button>
     </div>
     <nav
       class="_group_577f70"
diff --git a/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap b/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
index e929cf9ac..ae50a64a6 100644
--- a/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
+++ b/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
@@ -38,11 +38,9 @@ exports[`<Cinema> > renders and matches snapshot 1`] = `
                 <div
                   class="_playerContent_555f3c"
                 >
-                  <div
+                  <button
                     aria-label="common:back"
                     class="_iconButton_0fef65 _backButton_555f3c"
-                    role="button"
-                    tabindex="0"
                   >
                     <svg
                       aria-hidden="true"
@@ -54,7 +52,7 @@ exports[`<Cinema> > renders and matches snapshot 1`] = `
                         d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
                       />
                     </svg>
-                  </div>
+                  </button>
                   <div>
                     <h1
                       class="_title_555f3c"
diff --git a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
index 1a795957a..214c757ce 100644
--- a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
@@ -21,14 +21,12 @@ exports[`<Layout /> > renders layout 1`] = `
           <div
             class="_menu_f4f7a7"
           >
-            <div
+            <button
               aria-controls="sidebar"
               aria-expanded="false"
               aria-haspopup="true"
               aria-label="open_menu"
               class="_iconButton_0fef65 _iconButton_f4f7a7"
-              role="button"
-              tabindex="0"
             >
               <svg
                 aria-hidden="true"
@@ -44,7 +42,7 @@ exports[`<Layout /> > renders layout 1`] = `
                   d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
                 />
               </svg>
-            </div>
+            </button>
           </div>
           <nav
             class="_nav_f4f7a7"
@@ -85,11 +83,9 @@ exports[`<Layout /> > renders layout 1`] = `
       <div
         class="_heading_577f70"
       >
-        <div
+        <button
           aria-label="close_menu"
           class="_iconButton_0fef65"
-          role="button"
-          tabindex="0"
         >
           <svg
             aria-hidden="true"
@@ -105,7 +101,7 @@ exports[`<Layout /> > renders layout 1`] = `
               fill="none"
             />
           </svg>
-        </div>
+        </button>
       </div>
       <nav
         class="_group_577f70"
diff --git a/platforms/web/test-e2e/tests/live_channel_test.ts b/platforms/web/test-e2e/tests/live_channel_test.ts
index d83b4ef4a..6b9473c21 100644
--- a/platforms/web/test-e2e/tests/live_channel_test.ts
+++ b/platforms/web/test-e2e/tests/live_channel_test.ts
@@ -100,7 +100,7 @@ Scenario.skip('I can watch the current live program on the live channel screen',
   // to make sure the back button is visible and can be clicked on
   I.click('video');
 
-  I.click('div[aria-label="Back"]');
+  I.click('button[aria-label="Back"]');
   await I.checkPlayerClosed();
 });
 
diff --git a/platforms/web/test-e2e/tests/payments/coupons_test.ts b/platforms/web/test-e2e/tests/payments/coupons_test.ts
index 4d02b77a4..f95c3b384 100644
--- a/platforms/web/test-e2e/tests/payments/coupons_test.ts
+++ b/platforms/web/test-e2e/tests/payments/coupons_test.ts
@@ -57,7 +57,7 @@ function runTestSuite(props: ProviderProps, providerName: string) {
     I.seeElement('input[name="couponCode"]');
     I.see('Apply');
 
-    I.click('div[aria-label="Close coupon form"]');
+    I.click('button[aria-label="Close coupon form"]');
     I.dontSee('Coupon code');
 
     I.click('Redeem coupon');
diff --git a/platforms/web/test-e2e/tests/search_test.ts b/platforms/web/test-e2e/tests/search_test.ts
index 50c1439df..4bea920a4 100644
--- a/platforms/web/test-e2e/tests/search_test.ts
+++ b/platforms/web/test-e2e/tests/search_test.ts
@@ -4,11 +4,11 @@ import { testConfigs } from '@jwp/ott-testing/constants';
 
 import constants from '#utils/constants';
 
-const openSearchLocator = { css: 'div[aria-label="Open search"]' };
+const openSearchLocator = { css: 'button[aria-label="Open search"]' };
 const searchBarLocator = 'input[type="search"]';
 const emptySearchPrompt = 'Type something in the search box to start searching';
-const clearSearchLocator = { css: 'div[aria-label="Clear search"]' };
-const closeSearchLocator = { css: 'div[aria-label="Close search"]' };
+const clearSearchLocator = { css: 'button[aria-label="Clear search"]' };
+const closeSearchLocator = { css: 'button[aria-label="Close search"]' };
 
 Feature('search').retry(Number(process.env.TEST_RETRY_COUNT) || 0);
 
diff --git a/platforms/web/test-e2e/tests/video_detail_test.ts b/platforms/web/test-e2e/tests/video_detail_test.ts
index e3469d3ba..be446cfb9 100644
--- a/platforms/web/test-e2e/tests/video_detail_test.ts
+++ b/platforms/web/test-e2e/tests/video_detail_test.ts
@@ -46,20 +46,20 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
       I.seeCssPropertiesOnElements(`text="${constants.agent327Description}"`, { 'max-height': height });
     }
 
-    I.seeElement('div[aria-label="Expand"]');
-    I.dontSeeElement('div[aria-label="Collapse"]');
+    I.seeElement('button[aria-label="Expand"]');
+    I.dontSeeElement('button[aria-label="Collapse"]');
     checkHeight('60px');
 
-    I.click('div[aria-label="Expand"]');
+    I.click('button[aria-label="Expand"]');
 
-    I.seeElement('div[aria-label="Collapse"]');
-    I.dontSeeElement('div[aria-label="Expand"]');
+    I.seeElement('button[aria-label="Collapse"]');
+    I.dontSeeElement('button[aria-label="Expand"]');
     checkHeight('216px');
 
-    I.click('div[aria-label="Collapse"]');
+    I.click('button[aria-label="Collapse"]');
 
-    I.seeElement('div[aria-label="Expand"]');
-    I.dontSeeElement('div[aria-label="Collapse"]');
+    I.seeElement('button[aria-label="Expand"]');
+    I.dontSeeElement('button[aria-label="Collapse"]');
     checkHeight('60px');
   });
 
@@ -68,7 +68,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
   Scenario(`I can return to the video detail screen - ${providerName}`, async ({ I }) => {
     await playBigBuckBunny(I);
 
-    I.click('div[aria-label="Back"]');
+    I.click('button[aria-label="Back"]');
 
     await I.checkPlayerClosed();
     I.see(constants.startWatchingButton);
@@ -103,7 +103,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     await I.checkPlayerClosed();
     I.waitForText('Email', normalTimeout);
     I.see('Password');
-    I.click('div[aria-label="Close panel"]');
+    I.click('button[aria-label="Close panel"]');
 
     I.click('Trailer');
     await I.waitForPlayerPlaying(`${constants.elephantsDreamTitle} - Trailer`);
@@ -126,7 +126,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
 
     await I.waitForPlayerPlaying(constants.elephantsDreamTitle);
 
-    I.click('div[aria-label="Back"]');
+    I.click('button[aria-label="Back"]');
 
     await I.checkPlayerClosed();
   });
@@ -150,7 +150,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
 
     await I.waitForPlayerPlaying(constants.elephantsDreamTitle);
 
-    I.click('div[aria-label="Back"]');
+    I.click('button[aria-label="Back"]');
 
     await I.checkPlayerClosed();
   });
diff --git a/platforms/web/test-e2e/utils/password_utils.ts b/platforms/web/test-e2e/utils/password_utils.ts
index afbf894d1..dd2e14b39 100644
--- a/platforms/web/test-e2e/utils/password_utils.ts
+++ b/platforms/web/test-e2e/utils/password_utils.ts
@@ -13,12 +13,12 @@ async function testPasswordToggling(I: CodeceptJS.I, name = 'password') {
 
   await checkPasswordType(I, name, 'password');
 
-  I.click(`input[name="${name}"]+div div[aria-label="View password"]`);
+  I.click(`input[name="${name}"]+div button[aria-label="View password"]`);
   await checkPasswordType(I, name, 'text');
 
   await I.writeClipboard('dummy');
 
-  I.click(`input[name="${name}"]+div div[aria-label="View password"]`);
+  I.click(`input[name="${name}"]+div button[aria-label="View password"]`);
   await checkPasswordType(I, name, 'password');
 }
 
diff --git a/platforms/web/test-e2e/utils/steps_file.ts b/platforms/web/test-e2e/utils/steps_file.ts
index fb8f3642f..e7af276e5 100644
--- a/platforms/web/test-e2e/utils/steps_file.ts
+++ b/platforms/web/test-e2e/utils/steps_file.ts
@@ -278,13 +278,13 @@ const stepsObj = {
     return isMobile;
   },
   openMenuDrawer: function (this: CodeceptJS.I) {
-    this.click('div[aria-label="Open menu"]');
+    this.click('button[aria-label="Open menu"]');
   },
   openUserMenu: function (this: CodeceptJS.I) {
-    this.click('div[aria-label="Open user menu"]');
+    this.click('button[aria-label="Open user menu"]');
   },
   clickCloseButton: function (this: CodeceptJS.I) {
-    this.click('div[aria-label="Close panel"]');
+    this.click('button[aria-label="Close panel"]');
   },
   seeAll: function (this: CodeceptJS.I, allStrings: string[]) {
     allStrings.forEach((s) => this.see(s));
diff --git a/platforms/web/test-e2e/utils/watch_history.ts b/platforms/web/test-e2e/utils/watch_history.ts
index 1736e6f73..9007c234a 100644
--- a/platforms/web/test-e2e/utils/watch_history.ts
+++ b/platforms/web/test-e2e/utils/watch_history.ts
@@ -17,7 +17,7 @@ export async function playVideo(I: CodeceptJS.I, seekTo: number, title: string,
     window.jwplayer().seek(seekTo);
   }, seekTo);
   I.clickPlayerContainer();
-  I.click('div[aria-label="Back"]');
+  I.click('button[aria-label="Back"]');
 
   // We need to wait for the player to be removed before proceeding, otherwise race conditions occur when the player is reloaded
   await I.waitForPlayerState('', ['paused']);

From 33e99983feb8ea55e30885cdf6c1459447a49155 Mon Sep 17 00:00:00 2001
From: langemike <mikevv@gmail.com>
Date: Thu, 11 Apr 2024 12:09:07 +0200
Subject: [PATCH 109/128] =?UTF-8?q?chore(a11y):=20adhere=20icon=20button?=
 =?UTF-8?q?=20styling=20&=20don=E2=80=99t=20act=20as=20a=20submit=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>
---
 .../CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap       | 1 +
 .../src/components/Dialog/__snapshots__/Dialog.test.tsx.snap    | 1 +
 .../__snapshots__/DialogBackButton.test.tsx.snap                | 1 +
 .../__snapshots__/EditPasswordForm.test.tsx.snap                | 2 ++
 .../src/components/Header/__snapshots__/Header.test.tsx.snap    | 2 ++
 packages/ui-react/src/components/IconButton/IconButton.tsx      | 2 +-
 .../IconButton/__snapshots__/IconButton.test.tsx.snap           | 1 +
 .../LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap       | 1 +
 .../components/LoginForm/__snapshots__/LoginForm.test.tsx.snap  | 1 +
 .../__snapshots__/ModalCloseButton.test.tsx.snap                | 1 +
 .../PasswordField/__snapshots__/PasswordField.test.tsx.snap     | 1 +
 .../__snapshots__/RegistrationForm.test.tsx.snap                | 1 +
 .../components/SearchBar/__snapshots__/SearchBar.test.tsx.snap  | 1 +
 .../src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap  | 2 ++
 .../ui-react/src/components/TextField/TextField.module.scss     | 2 +-
 .../src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap    | 1 +
 .../src/containers/Layout/__snapshots__/Layout.test.tsx.snap    | 2 ++
 17 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
index 2c2beb5e7..68dd32a08 100644
--- a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
+++ b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
@@ -219,6 +219,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
     <button
       aria-label="common:back"
       class="_iconButton_0fef65 _dialogBackButton_248199"
+      type="button"
     >
       <svg
         aria-hidden="true"
diff --git a/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
index fda711396..ca13b6772 100644
--- a/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/ui-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -38,6 +38,7 @@ exports[`<Dialog> > renders and matches snapshot 1`] = `
             <button
               aria-label="close_modal"
               class="_iconButton_0fef65 _modalCloseButton_b92d69"
+              type="button"
             >
               <svg
                 aria-hidden="true"
diff --git a/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap b/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
index 7a39c7d0e..3b86f0b8b 100644
--- a/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
+++ b/packages/ui-react/src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
   <button
     aria-label="common:back"
     class="_iconButton_0fef65 _dialogBackButton_248199"
+    type="button"
   >
     <svg
       aria-hidden="true"
diff --git a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
index 98520e064..6588c0191 100644
--- a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
@@ -42,6 +42,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
             aria-label="reset.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
+            type="button"
           >
             <svg
               aria-hidden="true"
@@ -94,6 +95,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
             aria-label="reset.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
+            type="button"
           >
             <svg
               aria-hidden="true"
diff --git a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
index 16a26a365..4426fdb29 100644
--- a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -23,6 +23,7 @@ exports[`<Header /> > renders header 1`] = `
           aria-haspopup="true"
           aria-label="open_menu"
           class="_iconButton_0fef65 _iconButton_f4f7a7"
+          type="button"
         >
           <svg
             aria-hidden="true"
@@ -51,6 +52,7 @@ exports[`<Header /> > renders header 1`] = `
         <button
           aria-label="Open search"
           class="_iconButton_0fef65 _iconButton_f4f7a7 _actionButton_f4f7a7"
+          type="button"
         >
           <svg
             aria-hidden="true"
diff --git a/packages/ui-react/src/components/IconButton/IconButton.tsx b/packages/ui-react/src/components/IconButton/IconButton.tsx
index 14d229cb7..c03f9c622 100644
--- a/packages/ui-react/src/components/IconButton/IconButton.tsx
+++ b/packages/ui-react/src/components/IconButton/IconButton.tsx
@@ -12,7 +12,7 @@ type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
 
 const IconButton: React.FC<Props> = ({ children, onClick, className, ...ariaProps }: Props) => {
   return (
-    <button className={classNames(styles.iconButton, className)} onClick={onClick} {...ariaProps}>
+    <button className={classNames(styles.iconButton, className)} type="button" onClick={onClick} {...ariaProps}>
       {children}
     </button>
   );
diff --git a/packages/ui-react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap b/packages/ui-react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
index f8e9e64c5..fe9e53ede 100644
--- a/packages/ui-react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
+++ b/packages/ui-react/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`<IconButton> > renders and matches snapshot 1`] = `
   <button
     aria-label="Icon button"
     class="_iconButton_0fef65"
+    type="button"
   >
     <svg
       viewBox="0 0 24 24"
diff --git a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
index 5f70ef66e..5d55ddd6a 100644
--- a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
+++ b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
     aria-label="language_menu"
     class="_iconButton_0fef65"
     data-testid="language-menu-button"
+    type="button"
   >
     <svg
       aria-hidden="true"
diff --git a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
index d119863b5..0628874b0 100644
--- a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
+++ b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
@@ -89,6 +89,7 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
             aria-label="login.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
+            type="button"
           >
             <svg
               aria-hidden="true"
diff --git a/packages/ui-react/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap b/packages/ui-react/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap
index 3d1e03c3b..6211ad3ab 100644
--- a/packages/ui-react/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap
+++ b/packages/ui-react/src/components/ModalCloseButton/__snapshots__/ModalCloseButton.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`<ModalCloseButton> > renders and matches snapshot 1`] = `
   <button
     aria-label="close_modal"
     class="_iconButton_0fef65 _modalCloseButton_b92d69"
+    type="button"
   >
     <svg
       aria-hidden="true"
diff --git a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap b/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
index c8b995d96..52ffd8085 100644
--- a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
+++ b/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
@@ -32,6 +32,7 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
           aria-label="reset.view_password"
           aria-pressed="false"
           class="_iconButton_0fef65"
+          type="button"
         >
           <svg
             aria-hidden="true"
diff --git a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
index 509d58018..19b8ab12a 100644
--- a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
+++ b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -88,6 +88,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
             aria-label="registration.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
+            type="button"
           >
             <svg
               aria-hidden="true"
diff --git a/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap b/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
index 6ad06cf58..afe392eb0 100644
--- a/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
+++ b/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
@@ -35,6 +35,7 @@ exports[`<SearchBar> > renders and matches snapshot 1`] = `
       <button
         aria-label="search_bar.clear_search_label"
         class="_iconButton_0fef65 _clearButton_3bb1d7"
+        type="button"
       >
         <svg
           aria-hidden="true"
diff --git a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
index 92a961242..d63f367da 100644
--- a/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
+++ b/packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`<SideBar /> > renders sideBar closed 1`] = `
       <button
         aria-label="close_menu"
         class="_iconButton_0fef65"
+        type="button"
       >
         <svg
           aria-hidden="true"
@@ -65,6 +66,7 @@ exports[`<SideBar /> > renders sideBar opened 1`] = `
       <button
         aria-label="close_menu"
         class="_iconButton_0fef65"
+        type="button"
       >
         <svg
           aria-hidden="true"
diff --git a/packages/ui-react/src/components/TextField/TextField.module.scss b/packages/ui-react/src/components/TextField/TextField.module.scss
index a78d12e6a..3457d7ac5 100644
--- a/packages/ui-react/src/components/TextField/TextField.module.scss
+++ b/packages/ui-react/src/components/TextField/TextField.module.scss
@@ -48,7 +48,7 @@
   }
 }
 
-.control > div {
+.control > button {
   width: 48px;
   height: 48px;
 }
diff --git a/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap b/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
index ae50a64a6..c44677b05 100644
--- a/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
+++ b/packages/ui-react/src/containers/Cinema/__snapshots__/Cinema.test.tsx.snap
@@ -41,6 +41,7 @@ exports[`<Cinema> > renders and matches snapshot 1`] = `
                   <button
                     aria-label="common:back"
                     class="_iconButton_0fef65 _backButton_555f3c"
+                    type="button"
                   >
                     <svg
                       aria-hidden="true"
diff --git a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
index 214c757ce..13d3fe0d1 100644
--- a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
@@ -27,6 +27,7 @@ exports[`<Layout /> > renders layout 1`] = `
               aria-haspopup="true"
               aria-label="open_menu"
               class="_iconButton_0fef65 _iconButton_f4f7a7"
+              type="button"
             >
               <svg
                 aria-hidden="true"
@@ -86,6 +87,7 @@ exports[`<Layout /> > renders layout 1`] = `
         <button
           aria-label="close_menu"
           class="_iconButton_0fef65"
+          type="button"
         >
           <svg
             aria-hidden="true"

From 5da9c73b7334e61753b7b93656900562f85f46d3 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 16 Apr 2024 14:15:47 +0200
Subject: [PATCH 110/128] chore: update snapshots

---
 .../Header/__snapshots__/Header.test.tsx.snap      | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
index 4426fdb29..e2ed93756 100644
--- a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -110,14 +110,13 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
       <div
         class="_menu_f4f7a7"
       >
-        <div
+        <button
           aria-controls="sidebar"
           aria-expanded="false"
           aria-haspopup="true"
           aria-label="open_menu"
           class="_iconButton_0fef65 _iconButton_f4f7a7"
-          role="button"
-          tabindex="0"
+          type="button"
         >
           <svg
             aria-hidden="true"
@@ -133,7 +132,7 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
               d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
             />
           </svg>
-        </div>
+        </button>
       </div>
       <nav
         class="_nav_f4f7a7"
@@ -150,11 +149,10 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
       <div
         class="_actions_f4f7a7"
       >
-        <div
+        <button
           aria-label="Open search"
           class="_iconButton_0fef65 _iconButton_f4f7a7 _actionButton_f4f7a7"
-          role="button"
-          tabindex="0"
+          type="button"
         >
           <svg
             aria-hidden="true"
@@ -166,7 +164,7 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
               d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
             />
           </svg>
-        </div>
+        </button>
         <div
           class="_buttonContainer_f4f7a7"
         >

From 5e6d445bc78926011477121adcd4dda5b233ee40 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Wed, 17 Apr 2024 10:47:58 +0200
Subject: [PATCH 111/128] fix(a11y): close menu focus with voice over

---
 packages/ui-react/src/components/Header/Header.tsx       | 9 +--------
 .../components/Header/__snapshots__/Header.test.tsx.snap | 4 ----
 .../containers/Layout/__snapshots__/Layout.test.tsx.snap | 2 --
 3 files changed, 1 insertion(+), 14 deletions(-)

diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
index 18c4787fd..3aedb2575 100644
--- a/packages/ui-react/src/components/Header/Header.tsx
+++ b/packages/ui-react/src/components/Header/Header.tsx
@@ -226,14 +226,7 @@ const Header: React.FC<Props> = ({
           {t('skip_to_content')}
         </a>
         <div className={styles.menu}>
-          <IconButton
-            className={styles.iconButton}
-            aria-label={sideBarOpen ? t('close_menu') : t('open_menu')}
-            aria-controls="sidebar"
-            aria-haspopup="true"
-            aria-expanded={sideBarOpen}
-            onClick={() => onMenuButtonClick()}
-          >
+          <IconButton className={styles.iconButton} aria-label={t('open_menu')} aria-expanded={sideBarOpen} onClick={() => onMenuButtonClick()}>
             <Icon icon={Menu} />
           </IconButton>
         </div>
diff --git a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
index e2ed93756..63d3685b6 100644
--- a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -18,9 +18,7 @@ exports[`<Header /> > renders header 1`] = `
         class="_menu_f4f7a7"
       >
         <button
-          aria-controls="sidebar"
           aria-expanded="false"
-          aria-haspopup="true"
           aria-label="open_menu"
           class="_iconButton_0fef65 _iconButton_f4f7a7"
           type="button"
@@ -111,9 +109,7 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
         class="_menu_f4f7a7"
       >
         <button
-          aria-controls="sidebar"
           aria-expanded="false"
-          aria-haspopup="true"
           aria-label="open_menu"
           class="_iconButton_0fef65 _iconButton_f4f7a7"
           type="button"
diff --git a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
index 13d3fe0d1..9ce8ed38b 100644
--- a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
@@ -22,9 +22,7 @@ exports[`<Layout /> > renders layout 1`] = `
             class="_menu_f4f7a7"
           >
             <button
-              aria-controls="sidebar"
               aria-expanded="false"
-              aria-haspopup="true"
               aria-label="open_menu"
               class="_iconButton_0fef65 _iconButton_f4f7a7"
               type="button"

From b46e6595c423e33452185751807372ed8fc8ddd2 Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Mon, 8 Apr 2024 16:41:23 +0200
Subject: [PATCH 112/128] fix(a11y): read title while searching

---
 .../src/components/ErrorPage/ErrorPage.tsx    |  4 +-
 packages/ui-react/src/pages/Search/Search.tsx | 39 +++++++++++++------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx b/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx
index 94911cbb3..d0971b3f4 100644
--- a/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx
+++ b/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx
@@ -38,7 +38,9 @@ export const ErrorPageWithoutTranslation = ({ title, children, message, learnMor
     <div className={styles.errorPage}>
       <div className={styles.box}>
         <img className={styles.image} src={logo || '/images/logo.png'} alt={alt} />
-        <h1 className={styles.title}>{title || 'An error occurred'}</h1>
+        <h1 className={styles.title} aria-live="polite">
+          {title || 'An error occurred'}
+        </h1>
         <div className={styles.main}>
           <p className={styles.message}>{message || 'Try refreshing this page or come back later.'}</p>
           {children}
diff --git a/packages/ui-react/src/pages/Search/Search.tsx b/packages/ui-react/src/pages/Search/Search.tsx
index c43896d41..5c9faca67 100644
--- a/packages/ui-react/src/pages/Search/Search.tsx
+++ b/packages/ui-react/src/pages/Search/Search.tsx
@@ -56,6 +56,14 @@ const Search = () => {
     };
   }, []);
 
+  const title = isFetching
+    ? t('heading')
+    : !query
+    ? t('start_typing')
+    : playlist?.playlist.length
+    ? t('title', { count: playlist.playlist.length, query })
+    : t('no_results_heading', { query });
+
   if ((error || !playlist) && !isFetching) {
     return (
       <ErrorPage title={t('error_heading')}>
@@ -66,19 +74,26 @@ const Search = () => {
   }
 
   if (!query) {
-    return <ErrorPage title={t('start_typing')} />;
+    return <ErrorPage title={title} />;
   }
 
   if (!playlist?.playlist.length) {
     return (
-      <ErrorPage title={t('no_results_heading', { query })}>
-        <h2 className={styles.subHeading}>{t('suggestions')}</h2>
-        <ul>
-          <li>{t('tip_one')}</li>
-          <li>{t('tip_two')}</li>
-          <li>{t('tip_three')}</li>
-        </ul>
-      </ErrorPage>
+      <>
+        <Helmet>
+          <title>
+            {title} - {siteName}
+          </title>
+        </Helmet>
+        <ErrorPage title={title}>
+          <h2 className={styles.subHeading}>{t('suggestions')}</h2>
+          <ul>
+            <li>{t('tip_one')}</li>
+            <li>{t('tip_two')}</li>
+            <li>{t('tip_three')}</li>
+          </ul>
+        </ErrorPage>
+      </>
     );
   }
 
@@ -86,11 +101,13 @@ const Search = () => {
     <div className={styles.search}>
       <Helmet>
         <title>
-          {t('title', { count: playlist.playlist.length, query })} - {siteName}
+          {title} - {siteName}
         </title>
       </Helmet>
       <header className={styles.header}>
-        <h2 id={headingId}>{t('heading')}</h2>
+        <h2 id={headingId} aria-live={isFetching ? undefined : 'polite'}>
+          {title}
+        </h2>
       </header>
       <CardGrid
         aria-labelledby={headingId}

From 67494cc2d071fdd1be9fb8dc164c6af94f33ec09 Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Mon, 8 Apr 2024 17:27:45 +0200
Subject: [PATCH 113/128] chore: update snapshot

---
 .../components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap   | 1 +
 .../__snapshots__/DemoConfigDialog.test.tsx.snap                 | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/ui-react/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap b/packages/ui-react/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap
index 7dea1eabe..018946364 100644
--- a/packages/ui-react/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap
+++ b/packages/ui-react/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`<ErrorPage> > renders and matches snapshot 1`] = `
         src="/images/logo.png"
       />
       <h1
+        aria-live="polite"
         class="_title_8c5621"
       >
         This is the title
diff --git a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
index b2103ad89..32c75eedb 100644
--- a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
+++ b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
@@ -37,6 +37,7 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
           src="/images/logo.png"
         />
         <h1
+          aria-live="polite"
           class="_title_d73633"
         >
           app_config_not_found

From 1b3bebff20027645003c657c5964ceb3580a6f2c Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Tue, 9 Apr 2024 16:26:08 +0200
Subject: [PATCH 114/128] fix(e2e): search results based on typeahead changes

---
 platforms/web/test-e2e/tests/search_test.ts | 27 ++++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/platforms/web/test-e2e/tests/search_test.ts b/platforms/web/test-e2e/tests/search_test.ts
index 4bea920a4..48440b74e 100644
--- a/platforms/web/test-e2e/tests/search_test.ts
+++ b/platforms/web/test-e2e/tests/search_test.ts
@@ -54,33 +54,36 @@ Scenario('Closing search return to original page (@mobile-only)', async ({ I })
 });
 
 Scenario('I can type a search phrase in the search bar', async ({ I }) => {
+  const searchTerm = 'Caminandes';
   await openSearch(I);
-  I.fillField(searchBarLocator, 'Caminandes');
+  I.fillField(searchBarLocator, searchTerm);
   I.seeElement(clearSearchLocator);
 
-  checkSearchResults(I, ['Caminandes 1', 'Caminandes 2', 'Caminandes 3']);
+  checkSearchResults(I, searchTerm, 3, ['Caminandes 1', 'Caminandes 2', 'Caminandes 3']);
 
   I.click(clearSearchLocator);
   assert.strictEqual('', await I.grabValueFrom(searchBarLocator));
 
-  checkSearchResults(I, []);
+  I.dontSee('Search results');
   I.see(emptySearchPrompt);
 });
 
 Scenario('I can search by partial match', async ({ I }) => {
+  const searchTerm = 'ani';
   await openSearch(I);
-  I.fillField(searchBarLocator, 'ani');
+  I.fillField(searchBarLocator, searchTerm);
   I.seeElement(clearSearchLocator);
 
-  checkSearchResults(I, ['Minecraft Animation Workshop', 'Animating the Throw', 'Primitive Animals']);
+  checkSearchResults(I, searchTerm, 5, ['Minecraft Animation Workshop', 'Animating the Throw', 'Primitive Animals']);
 });
 
 Scenario('I get empty search results when no videos match', async ({ I }) => {
+  const searchTerm = 'Axdfsdfgfgfd';
   await openSearch(I);
-  I.fillField(searchBarLocator, 'Axdfsdfgfgfd');
+  I.fillField(searchBarLocator, searchTerm);
   I.seeElement(clearSearchLocator);
 
-  checkSearchResults(I, []);
+  checkSearchResults(I, searchTerm, 0, []);
 
   I.see('No results found for "Axdfsdfgfgfd"');
   I.see('Suggestions:');
@@ -124,17 +127,17 @@ Scenario('I can clear the search phrase manually', async ({ I }) => {
   I.dontSee('Suggestions:');
 });
 
-function checkSearchResults(I: CodeceptJS.I, expectedResults: string[]) {
+function checkSearchResults(I: CodeceptJS.I, searchTerm: string, expectedResults: number, searchMatches: string[]) {
   I.dontSee('Blender Channel');
   I.dontSee('All Films');
 
-  if (expectedResults.length > 0) {
-    I.see('Search results');
+  if (expectedResults > 0) {
+    I.see(`${expectedResults} results for "${searchTerm}"`, 'h2');
     I.dontSee(emptySearchPrompt);
     I.dontSee('No results found');
-    expectedResults.forEach((result) => I.see(result));
+    searchMatches.forEach((result) => I.see(result));
   } else {
-    I.dontSee('Search results');
+    I.see(`No results found for "${searchTerm}"`, 'h1');
     I.dontSeeElement('div[class*="cell"]');
     I.dontSeeElement('div[class*="card"]');
     I.dontSeeElement('div[class*="poster"]');

From fdd26810e920ffbd32ed2655f325ccd521a05d39 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Thu, 18 Apr 2024 11:45:08 +0200
Subject: [PATCH 115/128] refactor: use memo for title

---
 packages/ui-react/src/pages/Search/Search.tsx | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/ui-react/src/pages/Search/Search.tsx b/packages/ui-react/src/pages/Search/Search.tsx
index 5c9faca67..30004fac1 100644
--- a/packages/ui-react/src/pages/Search/Search.tsx
+++ b/packages/ui-react/src/pages/Search/Search.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useParams } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
@@ -34,7 +34,19 @@ const Search = () => {
   // User
   const { user, subscription } = useAccountStore(({ user, subscription }) => ({ user, subscription }), shallow);
 
-  const getURL = (playlistItem: PlaylistItem) => mediaURL({ media: playlistItem, playlistId: features?.searchPlaylist });
+  const getURL = (playlistItem: PlaylistItem) =>
+    mediaURL({
+      media: playlistItem,
+      playlistId: features?.searchPlaylist,
+    });
+
+  const title = useMemo(() => {
+    if (isFetching) return t('heading');
+    if (!query) return t('start_typing');
+    if (!playlist?.playlist.length) return t('no_results_heading', { query });
+
+    return t('title', { count: playlist.playlist.length, query });
+  }, [isFetching, playlist?.playlist.length, query, t]);
 
   // Update the search bar query to match the route param on mount
   useEffect(() => {
@@ -56,14 +68,6 @@ const Search = () => {
     };
   }, []);
 
-  const title = isFetching
-    ? t('heading')
-    : !query
-    ? t('start_typing')
-    : playlist?.playlist.length
-    ? t('title', { count: playlist.playlist.length, query })
-    : t('no_results_heading', { query });
-
   if ((error || !playlist) && !isFetching) {
     return (
       <ErrorPage title={t('error_heading')}>

From 8abc55c537fc50a39b85d9c941f038e7688d9c94 Mon Sep 17 00:00:00 2001
From: mirovladimitrovski
 <46674160+mirovladimitrovski@users.noreply.github.com>
Date: Fri, 19 Apr 2024 11:22:43 +0200
Subject: [PATCH 116/128] fix: Leave the path intact and only remove token from
 hash after login with social media (#499)

---
 .../integrations/jwp/JWPAccountService.ts     |  11 +-
 .../hooks-react/src/useSocialLoginUrls.ts     |  13 ++-
 .../PersonalDetailsForm.test.tsx              |  27 +----
 .../PersonalDetailsForm.tsx                   |  54 ++++-----
 .../PersonalDetailsForm.test.tsx.snap         | 106 ++++--------------
 .../AccountModal/forms/PersonalDetails.tsx    |  67 +++++------
 .../src/containers/AppRoutes/AppRoutes.tsx    |   6 +-
 7 files changed, 99 insertions(+), 185 deletions(-)

diff --git a/packages/common/src/services/integrations/jwp/JWPAccountService.ts b/packages/common/src/services/integrations/jwp/JWPAccountService.ts
index a2e258592..5daba8d5e 100644
--- a/packages/common/src/services/integrations/jwp/JWPAccountService.ts
+++ b/packages/common/src/services/integrations/jwp/JWPAccountService.ts
@@ -393,15 +393,18 @@ export default class JWPAccountService extends AccountService {
     return data;
   };
 
-  getCaptureStatus: GetCaptureStatus = async ({ customer }) => {
+  getCaptureStatus: GetCaptureStatus = async ({ customer: { firstName, lastName } }) => {
+    const firstNameTrimmed = firstName?.trim() || '';
+    const lastNameTrimmed = lastName?.trim() || '';
+
     return {
       isCaptureEnabled: true,
-      shouldCaptureBeDisplayed: true,
+      shouldCaptureBeDisplayed: !firstNameTrimmed || !lastNameTrimmed,
       settings: [
         {
           answer: {
-            firstName: customer.firstName || null,
-            lastName: customer.lastName || null,
+            firstName: firstNameTrimmed || null,
+            lastName: lastNameTrimmed || null,
           },
           enabled: true,
           key: 'firstNameLastName',
diff --git a/packages/hooks-react/src/useSocialLoginUrls.ts b/packages/hooks-react/src/useSocialLoginUrls.ts
index 5c3d59a02..e254ae3ca 100644
--- a/packages/hooks-react/src/useSocialLoginUrls.ts
+++ b/packages/hooks-react/src/useSocialLoginUrls.ts
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useQuery } from 'react-query';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
@@ -7,14 +8,20 @@ export type SocialLoginURLs = Record<string, string>;
 export default function useSocialLoginUrls(url: string) {
   const accountController = getModule(AccountController);
 
-  const urls = useQuery(['socialUrls'], () => accountController.getSocialLoginUrls(url), {
+  const { data, error } = useQuery(['socialUrls', url], () => accountController.getSocialLoginUrls(url), {
     enabled: accountController.getFeatures().hasSocialURLs,
     retry: false,
   });
 
-  if (urls.error || !urls.data) {
+  const urls = useMemo(() => {
+    if (!data) return null;
+
+    return data.reduce((acc, url) => ({ ...acc, ...url }), {} as SocialLoginURLs);
+  }, [data]);
+
+  if (error || !urls) {
     return null;
   }
 
-  return urls.data.reduce((acc, url) => ({ ...acc, ...url }), {} as SocialLoginURLs);
+  return urls;
 }
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.test.tsx b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.test.tsx
index 5d339ff12..513530583 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.test.tsx
+++ b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.test.tsx
@@ -5,7 +5,7 @@ import PersonalDetailsForm from './PersonalDetailsForm';
 const noop = () => {
   /**/
 };
-const values = {
+const initialValues = {
   firstName: 'Vince',
   lastName: 'Guy',
   birthDate: '27-Feb-1985',
@@ -86,12 +86,8 @@ describe('<PersonalDetailsForm>', () => {
   test('Renders without crashing', () => {
     const { container } = render(
       <PersonalDetailsForm
+        initialValues={initialValues}
         onSubmit={noop}
-        onChange={noop}
-        setValue={noop}
-        errors={{}}
-        values={values}
-        submitting={false}
         fields={fields}
         questions={questions}
         onQuestionChange={noop}
@@ -106,25 +102,8 @@ describe('<PersonalDetailsForm>', () => {
   test('Renders with errors', () => {
     const { container } = render(
       <PersonalDetailsForm
+        initialValues={initialValues}
         onSubmit={noop}
-        onChange={noop}
-        setValue={noop}
-        errors={{
-          firstName: 'this is wrong',
-          lastName: 'also this',
-          address: 'Do you know where you live',
-          address2: 'Come on',
-          city: 'stop it',
-          companyName: 'So much errors',
-          country: 'usa is an error',
-          birthDate: 'February 30th? Really?',
-          phoneNumber: 'Invalid',
-          state: 'Confusion',
-          postCode: 'Post Code should be 5 centimeters',
-          form: 'This is a form error',
-        }}
-        values={values}
-        submitting={false}
         fields={fields}
         questions={questions}
         onQuestionChange={noop}
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
index 871b6effc..f69cb6a33 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
+++ b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import type { FormErrors } from '@jwp/ott-common/types/form';
 import type { CleengCaptureField, CleengCaptureQuestionField, PersonalDetailsFormData } from '@jwp/ott-common/types/account';
 import { testId } from '@jwp/ott-common/src/utils/common';
+import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
 
 import TextField from '../TextField/TextField';
 import Button from '../Button/Button';
@@ -16,14 +16,9 @@ import FormFeedback from '../FormFeedback/FormFeedback';
 import styles from './PersonalDetailsForm.module.scss';
 
 type Props = {
-  onSubmit: React.FormEventHandler<HTMLFormElement>;
-  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  setValue: (key: keyof PersonalDetailsFormData, value: string) => void;
+  initialValues: PersonalDetailsFormData;
+  onSubmit: UseFormOnSubmitHandler<PersonalDetailsFormData>;
   error?: string;
-  errors: FormErrors<PersonalDetailsFormData>;
-  validationError?: boolean;
-  values: PersonalDetailsFormData;
-  submitting: boolean;
   fields: Record<string, CleengCaptureField>;
   questions: CleengCaptureQuestionField[];
   onQuestionChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
@@ -31,21 +26,14 @@ type Props = {
   questionErrors: Record<string, string>;
 };
 
-const PersonalDetailsForm: React.FC<Props> = ({
-  onSubmit,
-  onChange,
-  setValue,
-  validationError,
-  values,
-  errors,
-  submitting,
-  fields,
-  questions,
-  onQuestionChange,
-  questionValues,
-  questionErrors,
-}: Props) => {
+const PersonalDetailsForm: React.FC<Props> = ({ initialValues, onSubmit, fields, questions, onQuestionChange, questionValues, questionErrors }: Props) => {
   const { t } = useTranslation('account');
+
+  const { setValue, handleSubmit, handleChange, values, errors, validationSchemaError, submitting } = useForm<PersonalDetailsFormData>({
+    initialValues,
+    onSubmit,
+  });
+
   const renderQuestion = ({ value, key, question, required, enabled }: CleengCaptureQuestionField) => {
     if (!enabled) {
       return null;
@@ -86,10 +74,10 @@ const PersonalDetailsForm: React.FC<Props> = ({
   };
 
   return (
-    <form onSubmit={onSubmit} data-testid={testId('personal_details-form')} noValidate>
+    <form onSubmit={handleSubmit} data-testid={testId('personal_details-form')} noValidate>
       <h2 className={styles.title}>{t('personal_details.title')}</h2>
       {errors.form ? (
-        <FormFeedback variant="error" visible={!validationError}>
+        <FormFeedback variant="error" visible={!validationSchemaError}>
           {errors.form}
         </FormFeedback>
       ) : null}
@@ -97,7 +85,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
         <React.Fragment>
           <TextField
             value={values.firstName}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.fist_name')}
             placeholder={t('personal_details.fist_name')}
             error={!!errors.firstName}
@@ -108,7 +96,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           />
           <TextField
             value={values.lastName}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.last_name')}
             placeholder={t('personal_details.last_name')}
             error={!!errors.lastName}
@@ -122,7 +110,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
       {fields.companyName?.enabled ? (
         <TextField
           value={values.companyName}
-          onChange={onChange}
+          onChange={handleChange}
           label={t('personal_details.company_name')}
           placeholder={t('personal_details.company_name')}
           error={!!errors.companyName}
@@ -136,7 +124,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
         <React.Fragment>
           <TextField
             value={values.address}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.address')}
             placeholder={t('personal_details.address')}
             error={!!errors.address}
@@ -147,7 +135,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           />
           <TextField
             value={values.address2}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.address2')}
             placeholder={t('personal_details.address2')}
             error={!!errors.address2}
@@ -157,7 +145,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           />
           <TextField
             value={values.city}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.city')}
             placeholder={t('personal_details.city')}
             error={!!errors.city}
@@ -168,7 +156,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           />
           <TextField
             value={values.state}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.state')}
             placeholder={t('personal_details.state')}
             error={!!errors.state}
@@ -179,7 +167,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
           />
           <TextField
             value={values.postCode}
-            onChange={onChange}
+            onChange={handleChange}
             label={t('personal_details.post_code')}
             placeholder={t('personal_details.post_code')}
             error={!!errors.postCode}
@@ -193,7 +181,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
       {fields.phoneNumber?.enabled ? (
         <TextField
           value={values.phoneNumber}
-          onChange={onChange}
+          onChange={handleChange}
           label={t('personal_details.phone_number')}
           placeholder={t('personal_details.phone_number')}
           error={!!errors.phoneNumber}
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
index e05b7b349..902240880 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
+++ b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -12,13 +12,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       personal_details.title
     </h2>
     <div
-      aria-live="assertive"
-      class="_formFeedback_99f247 _error_99f247"
-    >
-      This is a form error
-    </div>
-    <div
-      class="_textField_e16c1b _error_e16c1b"
+      class="_textField_e16c1b"
     >
       <label
         class="_label_e16c1b"
@@ -31,7 +25,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_firstname"
-          aria-invalid="true"
+          aria-invalid="false"
           autocomplete="given-name"
           class="_input_e16c1b"
           id="text-field_1235_firstname"
@@ -42,15 +36,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           value="Vince"
         />
       </div>
-      <div
-        class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_firstname"
-      >
-        this is wrong
-      </div>
     </div>
     <div
-      class="_textField_e16c1b _error_e16c1b"
+      class="_textField_e16c1b"
     >
       <label
         class="_label_e16c1b"
@@ -63,7 +51,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_lastname"
-          aria-invalid="true"
+          aria-invalid="false"
           autocomplete="family-name"
           class="_input_e16c1b"
           id="text-field_1235_lastname"
@@ -74,15 +62,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           value="Guy"
         />
       </div>
-      <div
-        class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_lastname"
-      >
-        also this
-      </div>
     </div>
     <div
-      class="_textField_e16c1b _error_e16c1b"
+      class="_textField_e16c1b"
     >
       <label
         class="_label_e16c1b"
@@ -98,7 +80,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_companyname"
-          aria-invalid="true"
+          aria-invalid="false"
           autocomplete="organization"
           class="_input_e16c1b"
           id="text-field_1235_companyname"
@@ -108,15 +90,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           value="JW Player"
         />
       </div>
-      <div
-        class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_companyname"
-      >
-        So much errors
-      </div>
     </div>
     <div
-      class="_textField_e16c1b _error_e16c1b"
+      class="_textField_e16c1b"
     >
       <label
         class="_label_e16c1b"
@@ -129,7 +105,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_address"
-          aria-invalid="true"
+          aria-invalid="false"
           autocomplete="address-line1"
           class="_input_e16c1b"
           id="text-field_1235_address"
@@ -140,15 +116,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           value="123 Nowhere St."
         />
       </div>
-      <div
-        class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_address"
-      >
-        Do you know where you live
-      </div>
     </div>
     <div
-      class="_textField_e16c1b _error_e16c1b"
+      class="_textField_e16c1b"
     >
       <label
         class="_label_e16c1b"
@@ -164,7 +134,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_address2"
-          aria-invalid="true"
+          aria-invalid="false"
           autocomplete="address-line2"
           class="_input_e16c1b"
           id="text-field_1235_address2"
@@ -174,15 +144,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           value="Apt 1W"
         />
       </div>
-      <div
-        class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_address2"
-      >
-        Come on
-      </div>
     </div>
     <div
-      class="_textField_e16c1b _error_e16c1b"
+      class="_textField_e16c1b"
     >
       <label
         class="_label_e16c1b"
@@ -195,7 +159,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_city"
-          aria-invalid="true"
+          aria-invalid="false"
           autocomplete="address-level2"
           class="_input_e16c1b"
           id="text-field_1235_city"
@@ -206,15 +170,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           value="Chicago"
         />
       </div>
-      <div
-        class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_city"
-      >
-        stop it
-      </div>
     </div>
     <div
-      class="_textField_e16c1b _error_e16c1b"
+      class="_textField_e16c1b"
     >
       <label
         class="_label_e16c1b"
@@ -227,7 +185,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_state"
-          aria-invalid="true"
+          aria-invalid="false"
           autocomplete="address-level1"
           class="_input_e16c1b"
           id="text-field_1235_state"
@@ -238,15 +196,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           value="IL"
         />
       </div>
-      <div
-        class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_state"
-      >
-        Confusion
-      </div>
     </div>
     <div
-      class="_textField_e16c1b _error_e16c1b"
+      class="_textField_e16c1b"
     >
       <label
         class="_label_e16c1b"
@@ -259,7 +211,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_postcode"
-          aria-invalid="true"
+          aria-invalid="false"
           autocomplete="postal-code"
           class="_input_e16c1b"
           id="text-field_1235_postcode"
@@ -270,15 +222,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           value="60601"
         />
       </div>
-      <div
-        class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_postcode"
-      >
-        Post Code should be 5 centimeters
-      </div>
     </div>
     <div
-      class="_textField_e16c1b _error_e16c1b"
+      class="_textField_e16c1b"
     >
       <label
         class="_label_e16c1b"
@@ -291,7 +237,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_phonenumber"
-          aria-invalid="true"
+          aria-invalid="false"
           class="_input_e16c1b"
           id="text-field_1235_phonenumber"
           name="phoneNumber"
@@ -301,15 +247,9 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           value="+1 555 555 5555"
         />
       </div>
-      <div
-        class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_phonenumber"
-      >
-        Invalid
-      </div>
     </div>
     <div
-      class="_dateField_eb6974 _error_eb6974"
+      class="_dateField_eb6974"
       id="text-field_1235_birthdate"
     >
       <label
@@ -323,7 +263,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       >
         <input
           aria-describedby="helper_text_1235_birthdate"
-          aria-invalid="true"
+          aria-invalid="false"
           class="_hiddenInput_eb6974"
           id="text-field_1235_birthdate-hidden"
           name="birthDate"
@@ -361,12 +301,6 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           value="1985"
         />
       </div>
-      <div
-        class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235_birthdate"
-      >
-        February 30th? Really?
-      </div>
     </div>
     <div
       class="_container_bb73c6 _fullWidth_bb73c6 _error_bb73c6 _medium_bb73c6"
diff --git a/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx b/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx
index d48a3cbca..052865647 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/PersonalDetails.tsx
@@ -9,7 +9,7 @@ import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
-import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
+import { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
 import useOffers from '@jwp/ott-hooks-react/src/useOffers';
 
 import PersonalDetailsForm from '../../../components/PersonalDetailsForm/PersonalDetailsForm';
@@ -33,6 +33,7 @@ const PersonalDetails = () => {
   const [questionErrors, setQuestionErrors] = useState<Record<string, string>>({});
 
   const fields = useMemo(() => Object.fromEntries(data?.settings.map((item) => [item.key, item]) || []), [data]);
+
   const questions = useMemo(
     () => (data?.settings.filter((item) => !!(item as CleengCaptureQuestionField).question) as CleengCaptureQuestionField[]) || [],
     [data],
@@ -45,26 +46,41 @@ const PersonalDetails = () => {
   }, [navigate, location, accessModel, hasMediaOffers]);
 
   useEffect(() => {
-    if (data && (!data.isCaptureEnabled || !data.shouldCaptureBeDisplayed)) nextStep();
+    if (!data) return;
+
+    if (!data.isCaptureEnabled || !data.shouldCaptureBeDisplayed) {
+      nextStep();
+    }
 
-    if (data && questions) {
+    if (questions) {
       setQuestionValues(Object.fromEntries(questions.map((question) => [question.key, ''])));
     }
   }, [data, nextStep, questions]);
 
-  const initialValues: PersonalDetailsFormData = {
-    firstName: '',
-    lastName: '',
-    birthDate: '',
-    companyName: '',
-    phoneNumber: '',
-    address: '',
-    address2: '',
-    city: '',
-    state: '',
-    postCode: '',
-    country: '',
-  };
+  const initialValues: PersonalDetailsFormData = useMemo(() => {
+    const [firstName, lastName] = (() => {
+      if (fields.firstNameLastName?.enabled) {
+        const firstNameLastName = fields.firstNameLastName?.answer as Record<string, string | null>;
+        return [firstNameLastName?.firstName || '', firstNameLastName?.lastName || ''];
+      }
+
+      return ['', ''];
+    })();
+
+    return {
+      firstName,
+      lastName,
+      birthDate: '',
+      companyName: '',
+      phoneNumber: '',
+      address: '',
+      address2: '',
+      city: '',
+      state: '',
+      postCode: '',
+      country: '',
+    };
+  }, [fields]);
 
   const questionChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.type === 'checkbox' && !event.target.checked ? '' : event.target.value;
@@ -72,10 +88,7 @@ const PersonalDetails = () => {
     setQuestionValues((current) => ({ ...current, [event.target.name]: value }));
   };
 
-  const PersonalDetailSubmitHandler: UseFormOnSubmitHandler<PersonalDetailsFormData> = async (
-    formData,
-    { setErrors, setSubmitting, setValidationSchemaError, validate },
-  ) => {
+  const submitHandler: UseFormOnSubmitHandler<PersonalDetailsFormData> = async (formData, { setErrors, setSubmitting, setValidationSchemaError, validate }) => {
     const requiredMessage = t('personal_details.this_field_is_required');
     const schema = object().shape({
       firstName: yupConditional(!!fields.firstNameLastName?.required, requiredMessage),
@@ -139,11 +152,6 @@ const PersonalDetails = () => {
     setSubmitting(false);
   };
 
-  const { setValue, handleSubmit, handleChange, values, errors, validationSchemaError, submitting } = useForm<PersonalDetailsFormData>({
-    initialValues,
-    onSubmit: PersonalDetailSubmitHandler,
-  });
-
   if (isLoading) {
     return (
       <div style={{ height: 400 }}>
@@ -154,18 +162,13 @@ const PersonalDetails = () => {
 
   return (
     <PersonalDetailsForm
+      initialValues={initialValues}
       fields={fields}
       questions={questions}
       onQuestionChange={questionChangeHandler}
       questionValues={questionValues}
       questionErrors={questionErrors}
-      onSubmit={handleSubmit}
-      onChange={handleChange}
-      setValue={setValue}
-      values={values}
-      errors={errors}
-      validationError={validationSchemaError}
-      submitting={submitting}
+      onSubmit={submitHandler}
     />
   );
 };
diff --git a/platforms/web/src/containers/AppRoutes/AppRoutes.tsx b/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
index 8291728d9..e53461d92 100644
--- a/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
+++ b/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
@@ -32,7 +32,6 @@ import {
   PATH_USER_PROFILES_EDIT_PROFILE,
   PATH_SEARCH,
   PATH_USER,
-  PATH_HOME,
 } from '@jwp/ott-common/src/paths';
 
 import useNotifications from '#src/hooks/useNotifications';
@@ -53,8 +52,9 @@ export default function AppRoutes() {
   // listen to websocket notifications
   useNotifications();
 
-  if (userData.user && !userData.loading && window.location.href.includes('#token')) {
-    return <Navigate to={`${PATH_HOME}${location.search}`} />; // component instead of hook to prevent extra re-renders
+  if (userData.user && !userData.loading && location.hash.includes('#token')) {
+    // leave the location intact and only remove the token from the hash
+    return <Navigate to={{ ...location, hash: '' }} replace />; // component instead of hook to prevent extra re-renders
   }
 
   if (userData.user && selectingProfileAvatar !== null) {

From d71ca43876275f1a5795a1a076af110649df78ab Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Thu, 11 Apr 2024 12:15:37 +0200
Subject: [PATCH 117/128] test(e2e): add already subscribed/canceled check

---
 .../test-e2e/tests/payments/coupons_test.ts   |   6 +-
 .../test-e2e/tests/payments/payments_test.ts  | 228 ++++++++++++++++++
 .../tests/payments/subscription_test.ts       | 133 ++--------
 platforms/web/test-e2e/utils/payments.ts      |  51 ++--
 4 files changed, 282 insertions(+), 136 deletions(-)
 create mode 100644 platforms/web/test-e2e/tests/payments/payments_test.ts

diff --git a/platforms/web/test-e2e/tests/payments/coupons_test.ts b/platforms/web/test-e2e/tests/payments/coupons_test.ts
index f95c3b384..7eafe5d08 100644
--- a/platforms/web/test-e2e/tests/payments/coupons_test.ts
+++ b/platforms/web/test-e2e/tests/payments/coupons_test.ts
@@ -2,7 +2,7 @@ import { testConfigs } from '@jwp/ott-testing/constants';
 
 import { LoginContext } from '#utils/password_utils';
 import constants from '#utils/constants';
-import { goToCheckout, formatPrice, finishAndCheckSubscription, addYear, cancelPlan, renewPlan, overrideIP } from '#utils/payments';
+import { addYear, cancelPlan, checkSubscription, finishSubscription, formatPrice, goToCheckout, overrideIP, renewPlan } from '#utils/payments';
 import { ProviderProps } from '#test/types';
 
 const jwProps: ProviderProps = {
@@ -87,8 +87,8 @@ function runTestSuite(props: ProviderProps, providerName: string) {
         '',
       );
     }
-
-    await finishAndCheckSubscription(I, addYear(today), today, props.yearlyOffer.price, props.hasInlineOfferSwitch);
+    await finishSubscription(I);
+    await checkSubscription(I, addYear(today), today, props.yearlyOffer.price, props.hasInlineOfferSwitch);
   });
 
   Scenario(`I can cancel a free subscription - ${providerName}`, async ({ I }) => {
diff --git a/platforms/web/test-e2e/tests/payments/payments_test.ts b/platforms/web/test-e2e/tests/payments/payments_test.ts
new file mode 100644
index 000000000..b81ea0633
--- /dev/null
+++ b/platforms/web/test-e2e/tests/payments/payments_test.ts
@@ -0,0 +1,228 @@
+import { testConfigs } from '@jwp/ott-testing/constants';
+
+import { LoginContext } from '#utils/password_utils';
+import constants, { longTimeout } from '#utils/constants';
+import { goToCheckout, finishSubscription, cancelPlan, renewPlan, overrideIP, addYear, formatDate, checkSubscription } from '#utils/payments';
+import { ProviderProps } from '#test/types';
+
+const jwProps: ProviderProps = {
+  config: testConfigs.jwpSvod,
+  monthlyOffer: constants.offers.monthlyOffer.inplayer,
+  yearlyOffer: constants.offers.yearlyOffer.inplayer,
+  paymentFields: constants.paymentFields.inplayer,
+  creditCard: constants.creditCard.inplayer,
+  applicableTax: 0,
+  canRenewSubscription: false,
+  canOpenReceipts: false,
+  fieldWrapper: '',
+  hasInlineOfferSwitch: true,
+};
+
+const cleengProps: ProviderProps = {
+  config: testConfigs.svod,
+  monthlyOffer: constants.offers.monthlyOffer.cleeng,
+  yearlyOffer: constants.offers.yearlyOffer.cleeng,
+  paymentFields: constants.paymentFields.cleeng,
+  creditCard: constants.creditCard.cleeng,
+  applicableTax: 21,
+  canRenewSubscription: true,
+  canOpenReceipts: false, // Cleeng returns an error on Sandbox making this test flaky
+  fieldWrapper: 'iframe',
+  hasInlineOfferSwitch: false,
+};
+
+runTestSuite(jwProps, 'JW Player');
+runTestSuite(cleengProps, 'Cleeng');
+
+function runTestSuite(props: ProviderProps, providerName: string) {
+  let paidLoginContext: LoginContext;
+
+  const today = new Date();
+
+  const cardInfo = Array.of(['Card number', '•••• •••• •••• 1111'], ['Expiry date', '03/2030'], ['Security code', '******']);
+
+  Feature(`payments - ${providerName}`).retry(Number(process.env.TEST_RETRY_COUNT) || 0);
+
+  Before(async ({ I }) => {
+    // This gets used in checkoutService.getOffer to make sure the offers are geolocated for NL
+    overrideIP(I);
+    I.useConfig(props.config);
+  });
+
+  Scenario(`I can see my payments data - ${providerName}`, async ({ I }) => {
+    paidLoginContext = await I.registerOrLogin(paidLoginContext);
+
+    await I.openMainMenu();
+
+    I.click('Payments');
+    I.see('Subscription details');
+    I.see('You have no subscription. Complete your subscription to start watching all movies and series.');
+    I.see('Complete subscription');
+
+    I.see('Payment method');
+    I.see('No payment methods');
+
+    I.see('Billing history');
+    I.see('No transactions');
+  });
+
+  Scenario(`I can see offered subscriptions - ${providerName}`, async ({ I }) => {
+    paidLoginContext = await I.registerOrLogin(paidLoginContext);
+
+    I.amOnPage(constants.paymentsUrl);
+
+    I.click('Complete subscription');
+    I.see('Choose plan');
+    I.see('Watch this on JW OTT Web App');
+
+    await within(props.monthlyOffer.label, () => {
+      I.see('Monthly');
+      I.see('First month free');
+      I.see('Cancel anytime');
+      I.see('Watch on all devices');
+      I.see(props.monthlyOffer.price);
+      I.see('/month');
+    });
+
+    await within(props.yearlyOffer.label, () => {
+      I.see('Cancel anytime');
+      I.see('Watch on all devices');
+      I.see(props.yearlyOffer.price);
+      I.see('/year');
+    });
+
+    I.see('Continue');
+  });
+
+  Scenario(`I can choose an offer - ${providerName}`, async ({ I }) => {
+    paidLoginContext = await I.registerOrLogin(paidLoginContext);
+
+    I.amOnPage(constants.offersUrl);
+
+    I.click(props.monthlyOffer.label);
+    I.seeCssPropertiesOnElements(props.monthlyOffer.label, { color: '#000000' });
+    I.seeCssPropertiesOnElements(props.yearlyOffer.label, { color: '#ffffff' });
+
+    I.click(props.yearlyOffer.label);
+    I.seeCssPropertiesOnElements(props.monthlyOffer.label, { color: '#ffffff' });
+    I.seeCssPropertiesOnElements(props.yearlyOffer.label, { color: '#000000' });
+
+    I.click('Continue');
+    I.waitForLoaderDone();
+
+    I.see('Yearly subscription');
+    I.see(props.yearlyOffer.price);
+    I.see('/year');
+
+    I.see('Redeem coupon');
+    I.see(props.yearlyOffer.price);
+    I.dontSee('Payment method fee');
+    I.dontSee(props.yearlyOffer.paymentFee);
+    I.see('Total');
+    if (props.applicableTax !== 0) {
+      I.see('Applicable tax (21%)');
+    }
+    I.clickCloseButton();
+  });
+
+  Scenario(`I can see payment types - ${providerName}`, async ({ I }) => {
+    paidLoginContext = await I.registerOrLogin(paidLoginContext);
+
+    await goToCheckout(I);
+
+    I.waitForText('Credit card');
+    I.waitForText('PayPal');
+    I.waitForText(props.paymentFields.creditCardholder);
+    I.waitForText('Card number');
+    I.waitForText('Expiry date');
+    I.waitForText('Security code');
+    I.waitForText('Continue');
+    I.dontSee("Clicking 'continue' will bring you to the PayPal site.");
+
+    I.click('PayPal');
+
+    I.waitForText("Clicking 'continue' will bring you to the PayPal site.");
+    I.dontSee('Card number');
+    I.dontSee('Expiry date');
+    I.dontSee('Security code');
+    I.waitForText('Continue');
+  });
+
+  Scenario(`I can open the PayPal site - ${providerName}`, async ({ I }) => {
+    paidLoginContext = await I.registerOrLogin(paidLoginContext);
+
+    await goToCheckout(I);
+
+    I.click('PayPal');
+    I.click('Continue');
+
+    I.waitInUrl('paypal.com', longTimeout);
+    // I'm sorry, I don't know why, but this test ends in a way that causes the next test to fail
+    I.amOnPage(constants.baseUrl);
+  });
+
+  Scenario(`I can finish my subscription with credit card - ${providerName}`, async ({ I }) => {
+    paidLoginContext = await I.registerOrLogin(paidLoginContext);
+
+    await goToCheckout(I);
+
+    const alreadySubscribed = await tryTo(() => {
+      I.waitForText('Next billing date is on ' + formatDate(today));
+    });
+
+    if (!alreadySubscribed) {
+      await I.payWithCreditCard(
+        props.paymentFields.creditCardholder,
+        props.creditCard,
+        props.paymentFields.cardNumber,
+        props.paymentFields.expiryDate,
+        props.paymentFields.securityCode,
+        props.fieldWrapper,
+      );
+
+      await finishSubscription(I);
+    }
+
+    await checkSubscription(I, addYear(today), today, props.yearlyOffer.price, props.hasInlineOfferSwitch);
+
+    cardInfo.forEach(([label, value]) => I.seeInField(label, value));
+  });
+
+  Scenario(`I can cancel my subscription - ${providerName}`, async ({ I }) => {
+    paidLoginContext = await I.registerOrLogin(paidLoginContext);
+
+    await cancelPlan(I, addYear(today), props.canRenewSubscription, providerName);
+
+    // Still see payment info
+    cardInfo.forEach(([label, value]) => I.seeInField(label, value));
+  });
+
+  Scenario(`I can renew my subscription - ${providerName}`, async ({ I }) => {
+    if (props.canRenewSubscription) {
+      paidLoginContext = await I.registerOrLogin(paidLoginContext);
+      renewPlan(I, addYear(today), props.yearlyOffer.price);
+    }
+  });
+
+  Scenario(`I can view my invoices - ${providerName}`, async ({ I }) => {
+    if (props.canRenewSubscription) {
+      paidLoginContext = await I.registerOrLogin(paidLoginContext);
+      I.amOnPage(constants.paymentsUrl);
+      I.waitForLoaderDone();
+      I.see('Billing history');
+      I.dontSee('No transactions');
+
+      I.scrollPageToBottom();
+
+      if (props.canOpenReceipts) {
+        // Open the invoice which is opened in a new tab
+        I.click('Show receipt');
+        I.switchToNextTab();
+
+        // Assert invoice functionality by validating the presence of the purchase button
+        I.seeElement('.purchase-button');
+        I.closeCurrentTab();
+      }
+    }
+  });
+}
diff --git a/platforms/web/test-e2e/tests/payments/subscription_test.ts b/platforms/web/test-e2e/tests/payments/subscription_test.ts
index 1df037a4e..2fa194bd6 100644
--- a/platforms/web/test-e2e/tests/payments/subscription_test.ts
+++ b/platforms/web/test-e2e/tests/payments/subscription_test.ts
@@ -2,7 +2,7 @@ import { testConfigs } from '@jwp/ott-testing/constants';
 
 import { LoginContext } from '#utils/password_utils';
 import constants, { longTimeout } from '#utils/constants';
-import { goToCheckout, finishAndCheckSubscription, cancelPlan, renewPlan, overrideIP, addYear } from '#utils/payments';
+import { goToCheckout, finishSubscription, cancelPlan, renewPlan, overrideIP, addYear, formatDate, checkSubscription } from '#utils/payments';
 import { ProviderProps } from '#test/types';
 
 const jwProps: ProviderProps = {
@@ -17,7 +17,6 @@ const jwProps: ProviderProps = {
   fieldWrapper: '',
   hasInlineOfferSwitch: true,
 };
-
 const cleengProps: ProviderProps = {
   config: testConfigs.svod,
   monthlyOffer: constants.offers.monthlyOffer.cleeng,
@@ -41,111 +40,13 @@ function runTestSuite(props: ProviderProps, providerName: string) {
 
   const cardInfo = Array.of(['Card number', '•••• •••• •••• 1111'], ['Expiry date', '03/2030'], ['Security code', '******']);
 
-  Feature(`payments - ${providerName}`).retry(Number(process.env.TEST_RETRY_COUNT) || 0);
+  Feature(`subscription - ${providerName}`).retry(Number(process.env.TEST_RETRY_COUNT) || 0);
 
   Before(async ({ I }) => {
     // This gets used in checkoutService.getOffer to make sure the offers are geolocated for NL
     overrideIP(I);
-    I.useConfig(props.config);
-  });
-
-  Scenario(`I can see my payments data - ${providerName}`, async ({ I }) => {
-    paidLoginContext = await I.registerOrLogin(paidLoginContext);
-
-    await I.openMainMenu();
-
-    I.click('Payments');
-    I.see('Subscription details');
-    I.see('You have no subscription. Complete your subscription to start watching all movies and series.');
-    I.see('Complete subscription');
-
-    I.see('Payment method');
-    I.see('No payment methods');
-
-    I.see('Billing history');
-    I.see('No transactions');
-  });
-
-  Scenario(`I can see offered subscriptions - ${providerName}`, async ({ I }) => {
-    paidLoginContext = await I.registerOrLogin(paidLoginContext);
-
-    I.amOnPage(constants.paymentsUrl);
-
-    I.click('Complete subscription');
-    I.see('Choose plan');
-    I.see('Watch this on JW OTT Web App');
-
-    await within(props.monthlyOffer.label, () => {
-      I.see('Monthly');
-      I.see('First month free');
-      I.see('Cancel anytime');
-      I.see('Watch on all devices');
-      I.see(props.monthlyOffer.price);
-      I.see('/month');
-    });
-
-    await within(props.yearlyOffer.label, () => {
-      I.see('Cancel anytime');
-      I.see('Watch on all devices');
-      I.see(props.yearlyOffer.price);
-      I.see('/year');
-    });
-
-    I.see('Continue');
-  });
 
-  Scenario(`I can choose an offer - ${providerName}`, async ({ I }) => {
-    paidLoginContext = await I.registerOrLogin(paidLoginContext);
-
-    I.amOnPage(constants.offersUrl);
-
-    I.click(props.monthlyOffer.label);
-    I.seeCssPropertiesOnElements(props.monthlyOffer.label, { color: '#000000' });
-    I.seeCssPropertiesOnElements(props.yearlyOffer.label, { color: '#ffffff' });
-
-    I.click(props.yearlyOffer.label);
-    I.seeCssPropertiesOnElements(props.monthlyOffer.label, { color: '#ffffff' });
-    I.seeCssPropertiesOnElements(props.yearlyOffer.label, { color: '#000000' });
-
-    I.click('Continue');
-    I.waitForLoaderDone();
-
-    I.see('Yearly subscription');
-    I.see(props.yearlyOffer.price);
-    I.see('/year');
-
-    I.see('Redeem coupon');
-    I.see(props.yearlyOffer.price);
-    I.dontSee('Payment method fee');
-    I.dontSee(props.yearlyOffer.paymentFee);
-    I.see('Total');
-    if (props.applicableTax !== 0) {
-      I.see('Applicable tax (21%)');
-    }
-    I.clickCloseButton();
-  });
-
-  Scenario(`I can see payment types - ${providerName}`, async ({ I }) => {
-    paidLoginContext = await I.registerOrLogin(paidLoginContext);
-
-    await goToCheckout(I);
-
-    I.waitForText('Credit card');
-    I.waitForText('PayPal');
-    I.waitForText(props.paymentFields.creditCardholder);
-    I.waitForText('Card number');
-    I.waitForText('Expiry date');
-    I.waitForText('Security code');
-    I.waitForText('Continue');
-    I.dontSee("Clicking 'continue' will bring you to the PayPal site.");
-
-    I.click('PayPal');
-
-    I.waitForText("Clicking 'continue' will bring you to the PayPal site.");
-    I.dontSee('Card number');
-    I.dontSee('Expiry date');
-    I.dontSee('Security code');
-    I.waitForText('Continue');
+    I.useConfig(props.config);
   });
 
   Scenario(`I can open the PayPal site - ${providerName}`, async ({ I }) => {
@@ -166,16 +67,24 @@ function runTestSuite(props: ProviderProps, providerName: string) {
 
     await goToCheckout(I);
 
-    await I.payWithCreditCard(
-      props.paymentFields.creditCardholder,
-      props.creditCard,
-      props.paymentFields.cardNumber,
-      props.paymentFields.expiryDate,
-      props.paymentFields.securityCode,
-      props.fieldWrapper,
-    );
+    const alreadySubscribed = await tryTo(() => {
+      I.waitForText('Next billing date is on ' + formatDate(today));
+    });
+
+    if (!alreadySubscribed) {
+      await I.payWithCreditCard(
+        props.paymentFields.creditCardholder,
+        props.creditCard,
+        props.paymentFields.cardNumber,
+        props.paymentFields.expiryDate,
+        props.paymentFields.securityCode,
+        props.fieldWrapper,
+      );
+
+      await finishSubscription(I);
+    }
 
-    await finishAndCheckSubscription(I, addYear(today), today, props.yearlyOffer.price, props.hasInlineOfferSwitch);
+    await checkSubscription(I, addYear(today), today, props.yearlyOffer.price, props.hasInlineOfferSwitch);
 
     cardInfo.forEach(([label, value]) => I.seeInField(label, value));
   });
@@ -183,7 +92,7 @@ function runTestSuite(props: ProviderProps, providerName: string) {
   Scenario(`I can cancel my subscription - ${providerName}`, async ({ I }) => {
     paidLoginContext = await I.registerOrLogin(paidLoginContext);
 
-    cancelPlan(I, addYear(today), props.canRenewSubscription, providerName);
+    await cancelPlan(I, addYear(today), props.canRenewSubscription, providerName);
 
     // Still see payment info
     cardInfo.forEach(([label, value]) => I.seeInField(label, value));
diff --git a/platforms/web/test-e2e/utils/payments.ts b/platforms/web/test-e2e/utils/payments.ts
index df46e5a84..904b1e95b 100644
--- a/platforms/web/test-e2e/utils/payments.ts
+++ b/platforms/web/test-e2e/utils/payments.ts
@@ -29,13 +29,15 @@ export function formatDate(date: Date) {
   return new Intl.DateTimeFormat('en-US', { day: 'numeric', month: 'long', year: 'numeric' }).format(date);
 }
 
-export async function finishAndCheckSubscription(I: CodeceptJS.I, billingDate: Date, today: Date, yearlyPrice: string, hasInlineOfferSwitch: boolean) {
+export async function finishSubscription(I: CodeceptJS.I) {
   I.click('Continue');
   I.waitForText(`Welcome to JW OTT Web App (SVOD)`, longTimeout);
   I.waitForText(`Thank you for subscribing to JW OTT Web App (SVOD). Please enjoy all our content.`);
 
   I.click('Start watching');
+}
 
+export async function checkSubscription(I: CodeceptJS.I, billingDate: Date, today: Date, yearlyPrice: string, hasInlineOfferSwitch: boolean) {
   const transactionText = 'Annual subscription';
 
   // It takes a few seconds for transactions to load, so try and refresh a few times
@@ -67,31 +69,38 @@ export async function finishAndCheckSubscription(I: CodeceptJS.I, billingDate: D
   I.waitForText(formatDate(today));
 }
 
-export function cancelPlan(I: CodeceptJS.I, expirationDate: Date, canRenewSubscription: boolean, providerName?: string) {
+export async function cancelPlan(I: CodeceptJS.I, expirationDate: Date, canRenewSubscription: boolean, providerName?: string) {
   I.amOnPage(constants.paymentsUrl);
   I.waitForLoaderDone();
 
-  if (providerName?.includes('JW')) {
-    I.waitForElement('[data-testid="change-subscription-button"]', 10);
-    I.click('[data-testid="change-subscription-button"]');
-  }
-
-  I.waitForElement('[data-testid="cancel-subscription-button"]', 10);
-  I.click('[data-testid="cancel-subscription-button"]');
-  I.see('We are sorry to see you go.');
-  I.see('You will be unsubscribed from your current plan by clicking the unsubscribe button below.');
-  I.see('Unsubscribe');
-  // Make sure the cancel button works
-  I.click('No, thanks');
+  // sometimes the response takes too long, and we retry this test while the subscription is canceled
+  const isAlreadyCancelled = await tryTo(() => {
+    I.see('This plan will expire on ' + formatDate(expirationDate));
+  });
 
-  I.dontSee('This plan will expire');
+  if (!isAlreadyCancelled) {
+    if (providerName?.includes('JW')) {
+      I.waitForElement('[data-testid="change-subscription-button"]', 10);
+      I.click('[data-testid="change-subscription-button"]');
+    }
 
-  I.waitForElement('[data-testid="cancel-subscription-button"]', 10);
-  I.click('[data-testid="cancel-subscription-button"]');
-  I.click('Unsubscribe');
-  I.waitForText('Miss you already.', longTimeout);
-  I.see('You have been successfully unsubscribed. Your current plan will expire on ' + formatDate(expirationDate));
-  I.click('Return to profile');
+    I.waitForElement('[data-testid="cancel-subscription-button"]', 10);
+    I.click('[data-testid="cancel-subscription-button"]');
+    I.see('We are sorry to see you go.');
+    I.see('You will be unsubscribed from your current plan by clicking the unsubscribe button below.');
+    I.see('Unsubscribe');
+    // Make sure the cancel button works
+    I.click('No, thanks');
+
+    I.dontSee('This plan will expire');
+
+    I.waitForElement('[data-testid="cancel-subscription-button"]', 10);
+    I.click('[data-testid="cancel-subscription-button"]');
+    I.click('Unsubscribe');
+    I.waitForText('Miss you already.', longTimeout);
+    I.see('You have been successfully unsubscribed. Your current plan will expire on ' + formatDate(expirationDate));
+    I.click('Return to profile');
+  }
 
   if (canRenewSubscription) {
     I.waitForText('Renew subscription');

From b3cb4deebc028c2ee0bccc2bc28046385755991e Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Thu, 18 Apr 2024 12:07:25 +0200
Subject: [PATCH 118/128] chore: add removed subscription tests

---
 .../tests/payments/subscription_test.ts       | 140 ++++++++++--------
 1 file changed, 79 insertions(+), 61 deletions(-)

diff --git a/platforms/web/test-e2e/tests/payments/subscription_test.ts b/platforms/web/test-e2e/tests/payments/subscription_test.ts
index 2fa194bd6..c4601fa61 100644
--- a/platforms/web/test-e2e/tests/payments/subscription_test.ts
+++ b/platforms/web/test-e2e/tests/payments/subscription_test.ts
@@ -1,8 +1,8 @@
 import { testConfigs } from '@jwp/ott-testing/constants';
 
 import { LoginContext } from '#utils/password_utils';
-import constants, { longTimeout } from '#utils/constants';
-import { goToCheckout, finishSubscription, cancelPlan, renewPlan, overrideIP, addYear, formatDate, checkSubscription } from '#utils/payments';
+import constants from '#utils/constants';
+import { goToCheckout, overrideIP } from '#utils/payments';
 import { ProviderProps } from '#test/types';
 
 const jwProps: ProviderProps = {
@@ -36,10 +36,6 @@ runTestSuite(cleengProps, 'Cleeng');
 function runTestSuite(props: ProviderProps, providerName: string) {
   let paidLoginContext: LoginContext;
 
-  const today = new Date();
-
-  const cardInfo = Array.of(['Card number', '•••• •••• •••• 1111'], ['Expiry date', '03/2030'], ['Security code', '******']);
-
   Feature(`subscription - ${providerName}`).retry(Number(process.env.TEST_RETRY_COUNT) || 0);
 
   Before(async ({ I }) => {
@@ -49,81 +45,103 @@ function runTestSuite(props: ProviderProps, providerName: string) {
     I.useConfig(props.config);
   });
 
-  Scenario(`I can open the PayPal site - ${providerName}`, async ({ I }) => {
+  Scenario(`I can see my payments data - ${providerName}`, async ({ I }) => {
     paidLoginContext = await I.registerOrLogin(paidLoginContext);
 
-    await goToCheckout(I);
+    await I.openMainMenu();
 
-    I.click('PayPal');
-    I.click('Continue');
+    I.click('Payments');
+    I.see('Subscription details');
+    I.see('You have no subscription. Complete your subscription to start watching all movies and series.');
+    I.see('Complete subscription');
+
+    I.see('Payment method');
+    I.see('No payment methods');
 
-    I.waitInUrl('paypal.com', longTimeout);
-    // I'm sorry, I don't know why, but this test ends in a way that causes the next test to fail
-    I.amOnPage(constants.baseUrl);
+    I.see('Billing history');
+    I.see('No transactions');
   });
 
-  Scenario(`I can finish my subscription with credit card - ${providerName}`, async ({ I }) => {
+  Scenario(`I can see offered subscriptions - ${providerName}`, async ({ I }) => {
     paidLoginContext = await I.registerOrLogin(paidLoginContext);
 
-    await goToCheckout(I);
+    I.amOnPage(constants.paymentsUrl);
 
-    const alreadySubscribed = await tryTo(() => {
-      I.waitForText('Next billing date is on ' + formatDate(today));
-    });
+    I.click('Complete subscription');
+    I.see('Choose plan');
+    I.see('Watch this on JW OTT Web App');
 
-    if (!alreadySubscribed) {
-      await I.payWithCreditCard(
-        props.paymentFields.creditCardholder,
-        props.creditCard,
-        props.paymentFields.cardNumber,
-        props.paymentFields.expiryDate,
-        props.paymentFields.securityCode,
-        props.fieldWrapper,
-      );
-
-      await finishSubscription(I);
-    }
+    await within(props.monthlyOffer.label, () => {
+      I.see('Monthly');
+      I.see('First month free');
+      I.see('Cancel anytime');
+      I.see('Watch on all devices');
+      I.see(props.monthlyOffer.price);
+      I.see('/month');
+    });
 
-    await checkSubscription(I, addYear(today), today, props.yearlyOffer.price, props.hasInlineOfferSwitch);
+    await within(props.yearlyOffer.label, () => {
+      I.see('Cancel anytime');
+      I.see('Watch on all devices');
+      I.see(props.yearlyOffer.price);
+      I.see('/year');
+    });
 
-    cardInfo.forEach(([label, value]) => I.seeInField(label, value));
+    I.see('Continue');
   });
 
-  Scenario(`I can cancel my subscription - ${providerName}`, async ({ I }) => {
+  Scenario(`I can choose an offer - ${providerName}`, async ({ I }) => {
     paidLoginContext = await I.registerOrLogin(paidLoginContext);
 
-    await cancelPlan(I, addYear(today), props.canRenewSubscription, providerName);
+    I.amOnPage(constants.offersUrl);
 
-    // Still see payment info
-    cardInfo.forEach(([label, value]) => I.seeInField(label, value));
-  });
+    I.click(props.monthlyOffer.label);
+    I.seeCssPropertiesOnElements(props.monthlyOffer.label, { color: '#000000' });
+    I.seeCssPropertiesOnElements(props.yearlyOffer.label, { color: '#ffffff' });
 
-  Scenario(`I can renew my subscription - ${providerName}`, async ({ I }) => {
-    if (props.canRenewSubscription) {
-      paidLoginContext = await I.registerOrLogin(paidLoginContext);
-      renewPlan(I, addYear(today), props.yearlyOffer.price);
+    I.click(props.yearlyOffer.label);
+    I.seeCssPropertiesOnElements(props.monthlyOffer.label, { color: '#ffffff' });
+    I.seeCssPropertiesOnElements(props.yearlyOffer.label, { color: '#000000' });
+
+    I.click('Continue');
+    I.waitForLoaderDone();
+
+    I.see('Yearly subscription');
+    I.see(props.yearlyOffer.price);
+    I.see('/year');
+
+    I.see('Redeem coupon');
+    I.see(props.yearlyOffer.price);
+    I.dontSee('Payment method fee');
+    I.dontSee(props.yearlyOffer.paymentFee);
+    I.see('Total');
+    if (props.applicableTax !== 0) {
+      I.see('Applicable tax (21%)');
     }
+    I.clickCloseButton();
   });
 
-  Scenario(`I can view my invoices - ${providerName}`, async ({ I }) => {
-    if (props.canRenewSubscription) {
-      paidLoginContext = await I.registerOrLogin(paidLoginContext);
-      I.amOnPage(constants.paymentsUrl);
-      I.waitForLoaderDone();
-      I.see('Billing history');
-      I.dontSee('No transactions');
-
-      I.scrollPageToBottom();
-
-      if (props.canOpenReceipts) {
-        // Open the invoice which is opened in a new tab
-        I.click('Show receipt');
-        I.switchToNextTab();
-
-        // Assert invoice functionality by validating the presence of the purchase button
-        I.seeElement('.purchase-button');
-        I.closeCurrentTab();
-      }
-    }
+  Scenario(`I can see payment types - ${providerName}`, async ({ I }) => {
+    paidLoginContext = await I.registerOrLogin(paidLoginContext);
+
+    await goToCheckout(I);
+
+    I.waitForText('Credit card');
+    I.waitForText('PayPal');
+    I.waitForText(props.paymentFields.creditCardholder);
+    I.waitForText('Card number');
+    I.waitForText('Expiry date');
+    I.waitForText('Security code');
+    I.waitForText('Continue');
+    I.dontSee("Clicking 'continue' will bring you to the PayPal site.");
+
+    I.click('PayPal');
+
+    I.waitForText("Clicking 'continue' will bring you to the PayPal site.");
+    I.dontSee('Card number');
+    I.dontSee('Expiry date');
+    I.dontSee('Security code');
+    I.waitForText('Continue');
+    I.useConfig(props.config);
   });
 }

From 4c4641428e23af8d5cc06a6ed53053c1fd91e60b Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Thu, 18 Apr 2024 19:26:00 +0200
Subject: [PATCH 119/128] chore: remove duplicate subscription tests

---
 .../test-e2e/tests/payments/payments_test.ts  | 99 -------------------
 1 file changed, 99 deletions(-)

diff --git a/platforms/web/test-e2e/tests/payments/payments_test.ts b/platforms/web/test-e2e/tests/payments/payments_test.ts
index b81ea0633..073c5d686 100644
--- a/platforms/web/test-e2e/tests/payments/payments_test.ts
+++ b/platforms/web/test-e2e/tests/payments/payments_test.ts
@@ -49,105 +49,6 @@ function runTestSuite(props: ProviderProps, providerName: string) {
     I.useConfig(props.config);
   });
 
-  Scenario(`I can see my payments data - ${providerName}`, async ({ I }) => {
-    paidLoginContext = await I.registerOrLogin(paidLoginContext);
-
-    await I.openMainMenu();
-
-    I.click('Payments');
-    I.see('Subscription details');
-    I.see('You have no subscription. Complete your subscription to start watching all movies and series.');
-    I.see('Complete subscription');
-
-    I.see('Payment method');
-    I.see('No payment methods');
-
-    I.see('Billing history');
-    I.see('No transactions');
-  });
-
-  Scenario(`I can see offered subscriptions - ${providerName}`, async ({ I }) => {
-    paidLoginContext = await I.registerOrLogin(paidLoginContext);
-
-    I.amOnPage(constants.paymentsUrl);
-
-    I.click('Complete subscription');
-    I.see('Choose plan');
-    I.see('Watch this on JW OTT Web App');
-
-    await within(props.monthlyOffer.label, () => {
-      I.see('Monthly');
-      I.see('First month free');
-      I.see('Cancel anytime');
-      I.see('Watch on all devices');
-      I.see(props.monthlyOffer.price);
-      I.see('/month');
-    });
-
-    await within(props.yearlyOffer.label, () => {
-      I.see('Cancel anytime');
-      I.see('Watch on all devices');
-      I.see(props.yearlyOffer.price);
-      I.see('/year');
-    });
-
-    I.see('Continue');
-  });
-
-  Scenario(`I can choose an offer - ${providerName}`, async ({ I }) => {
-    paidLoginContext = await I.registerOrLogin(paidLoginContext);
-
-    I.amOnPage(constants.offersUrl);
-
-    I.click(props.monthlyOffer.label);
-    I.seeCssPropertiesOnElements(props.monthlyOffer.label, { color: '#000000' });
-    I.seeCssPropertiesOnElements(props.yearlyOffer.label, { color: '#ffffff' });
-
-    I.click(props.yearlyOffer.label);
-    I.seeCssPropertiesOnElements(props.monthlyOffer.label, { color: '#ffffff' });
-    I.seeCssPropertiesOnElements(props.yearlyOffer.label, { color: '#000000' });
-
-    I.click('Continue');
-    I.waitForLoaderDone();
-
-    I.see('Yearly subscription');
-    I.see(props.yearlyOffer.price);
-    I.see('/year');
-
-    I.see('Redeem coupon');
-    I.see(props.yearlyOffer.price);
-    I.dontSee('Payment method fee');
-    I.dontSee(props.yearlyOffer.paymentFee);
-    I.see('Total');
-    if (props.applicableTax !== 0) {
-      I.see('Applicable tax (21%)');
-    }
-    I.clickCloseButton();
-  });
-
-  Scenario(`I can see payment types - ${providerName}`, async ({ I }) => {
-    paidLoginContext = await I.registerOrLogin(paidLoginContext);
-
-    await goToCheckout(I);
-
-    I.waitForText('Credit card');
-    I.waitForText('PayPal');
-    I.waitForText(props.paymentFields.creditCardholder);
-    I.waitForText('Card number');
-    I.waitForText('Expiry date');
-    I.waitForText('Security code');
-    I.waitForText('Continue');
-    I.dontSee("Clicking 'continue' will bring you to the PayPal site.");
-
-    I.click('PayPal');
-
-    I.waitForText("Clicking 'continue' will bring you to the PayPal site.");
-    I.dontSee('Card number');
-    I.dontSee('Expiry date');
-    I.dontSee('Security code');
-    I.waitForText('Continue');
-  });
-
   Scenario(`I can open the PayPal site - ${providerName}`, async ({ I }) => {
     paidLoginContext = await I.registerOrLogin(paidLoginContext);
 

From 3d1cc7322702ce5d5d7c57ba04f4d368278db22c Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Thu, 18 Apr 2024 19:27:09 +0200
Subject: [PATCH 120/128] chore: remove redundant receipt check

---
 .../web/test-e2e/tests/payments/payments_test.ts     | 12 ------------
 .../web/test-e2e/tests/payments/subscription_test.ts |  2 --
 2 files changed, 14 deletions(-)

diff --git a/platforms/web/test-e2e/tests/payments/payments_test.ts b/platforms/web/test-e2e/tests/payments/payments_test.ts
index 073c5d686..e717954b5 100644
--- a/platforms/web/test-e2e/tests/payments/payments_test.ts
+++ b/platforms/web/test-e2e/tests/payments/payments_test.ts
@@ -13,7 +13,6 @@ const jwProps: ProviderProps = {
   creditCard: constants.creditCard.inplayer,
   applicableTax: 0,
   canRenewSubscription: false,
-  canOpenReceipts: false,
   fieldWrapper: '',
   hasInlineOfferSwitch: true,
 };
@@ -26,7 +25,6 @@ const cleengProps: ProviderProps = {
   creditCard: constants.creditCard.cleeng,
   applicableTax: 21,
   canRenewSubscription: true,
-  canOpenReceipts: false, // Cleeng returns an error on Sandbox making this test flaky
   fieldWrapper: 'iframe',
   hasInlineOfferSwitch: false,
 };
@@ -114,16 +112,6 @@ function runTestSuite(props: ProviderProps, providerName: string) {
       I.dontSee('No transactions');
 
       I.scrollPageToBottom();
-
-      if (props.canOpenReceipts) {
-        // Open the invoice which is opened in a new tab
-        I.click('Show receipt');
-        I.switchToNextTab();
-
-        // Assert invoice functionality by validating the presence of the purchase button
-        I.seeElement('.purchase-button');
-        I.closeCurrentTab();
-      }
     }
   });
 }
diff --git a/platforms/web/test-e2e/tests/payments/subscription_test.ts b/platforms/web/test-e2e/tests/payments/subscription_test.ts
index c4601fa61..8d121973c 100644
--- a/platforms/web/test-e2e/tests/payments/subscription_test.ts
+++ b/platforms/web/test-e2e/tests/payments/subscription_test.ts
@@ -13,7 +13,6 @@ const jwProps: ProviderProps = {
   creditCard: constants.creditCard.inplayer,
   applicableTax: 0,
   canRenewSubscription: false,
-  canOpenReceipts: false,
   fieldWrapper: '',
   hasInlineOfferSwitch: true,
 };
@@ -25,7 +24,6 @@ const cleengProps: ProviderProps = {
   creditCard: constants.creditCard.cleeng,
   applicableTax: 21,
   canRenewSubscription: true,
-  canOpenReceipts: false, // Cleeng returns an error on Sandbox making this test flaky
   fieldWrapper: 'iframe',
   hasInlineOfferSwitch: false,
 };

From 8df8c306bc1ff70a2f99a830264fba0c5c98695a Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 22 Apr 2024 10:54:51 +0200
Subject: [PATCH 121/128] refactor(e2e): rename subscription_test

---
 .../subscription_test.ts => offers/choose_offer_test.ts}      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename platforms/web/test-e2e/tests/{payments/subscription_test.ts => offers/choose_offer_test.ts} (96%)

diff --git a/platforms/web/test-e2e/tests/payments/subscription_test.ts b/platforms/web/test-e2e/tests/offers/choose_offer_test.ts
similarity index 96%
rename from platforms/web/test-e2e/tests/payments/subscription_test.ts
rename to platforms/web/test-e2e/tests/offers/choose_offer_test.ts
index 8d121973c..61b233243 100644
--- a/platforms/web/test-e2e/tests/payments/subscription_test.ts
+++ b/platforms/web/test-e2e/tests/offers/choose_offer_test.ts
@@ -34,7 +34,7 @@ runTestSuite(cleengProps, 'Cleeng');
 function runTestSuite(props: ProviderProps, providerName: string) {
   let paidLoginContext: LoginContext;
 
-  Feature(`subscription - ${providerName}`).retry(Number(process.env.TEST_RETRY_COUNT) || 0);
+  Feature(`choose offer - ${providerName}`).retry(Number(process.env.TEST_RETRY_COUNT) || 0);
 
   Before(async ({ I }) => {
     // This gets used in checkoutService.getOffer to make sure the offers are geolocated for NL
@@ -43,7 +43,7 @@ function runTestSuite(props: ProviderProps, providerName: string) {
     I.useConfig(props.config);
   });
 
-  Scenario(`I can see my payments data - ${providerName}`, async ({ I }) => {
+  Scenario(`I can see a payments page with no history - ${providerName}`, async ({ I }) => {
     paidLoginContext = await I.registerOrLogin(paidLoginContext);
 
     await I.openMainMenu();

From bf73a1b7e9f0fe904164db2a425269e3dd2f9bda Mon Sep 17 00:00:00 2001
From: Anton Lantukh <alantukh@jwplayer.com>
Date: Tue, 23 Apr 2024 08:30:40 +0200
Subject: [PATCH 122/128] fix(project): fix workflow

---
 .github/workflows/release-build-tag-release.yml | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/release-build-tag-release.yml b/.github/workflows/release-build-tag-release.yml
index 26aa6ac42..43a172b47 100644
--- a/.github/workflows/release-build-tag-release.yml
+++ b/.github/workflows/release-build-tag-release.yml
@@ -8,6 +8,11 @@ on:
 jobs:
   create-new-release-version:
     runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
@@ -52,7 +57,7 @@ jobs:
         if: ${{ steps.package-version.outputs.current-version }}
         with:
           commit: 'release'
-          artifacts: 'web/build/ott-web-app-build-*.tar.gz, web/build/ott-web-app-build-*.zip'
+          artifacts: 'platforms/web/build/ott-web-app-build-*.tar.gz, platforms/web/build/ott-web-app-build-*.zip'
           tag: v${{ steps.package-version.outputs.current-version }}
           bodyFile: '.github/RELEASE_BODY_TEMPLATE.md'
           token: ${{ secrets.github_token }}

From 3e3e6cc812abc7fdd91ec273c611b9d5d5317b04 Mon Sep 17 00:00:00 2001
From: Conventional Changelog Action <conventional.changelog.action@github.com>
Date: Tue, 23 Apr 2024 07:37:22 +0000
Subject: [PATCH 123/128] chore(release): v6.1.1

---
 CHANGELOG.md                                 | 25 ++++++++++++++++++++
 package.json                                 |  2 +-
 platforms/web/public/locales/en/account.json |  2 +-
 platforms/web/public/locales/es/account.json |  2 +-
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 230792e18..9aa3cd486 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,28 @@
+## [6.1.1](https://github.com/jwplayer/ott-web-app/compare/v6.1.0...v6.1.1) (2024-04-23)
+
+
+### Bug Fixes
+
+* **a11y:** close menu focus with voice over ([5e6d445](https://github.com/jwplayer/ott-web-app/commit/5e6d445bc78926011477121adcd4dda5b233ee40))
+* **a11y:** header navigation list ([1d22ab0](https://github.com/jwplayer/ott-web-app/commit/1d22ab05d4f5004fff8740827dc37b3d8460debf))
+* **a11y:** icon button to use button element ([7d5beae](https://github.com/jwplayer/ott-web-app/commit/7d5beae6f12ab4de55414bc2f2f1a46386915921))
+* **a11y:** lose focus after activating share button ([1cd135e](https://github.com/jwplayer/ott-web-app/commit/1cd135ea3eccae6d956d71493611d3e8cf79adc0))
+* **a11y:** read title while searching ([b46e659](https://github.com/jwplayer/ott-web-app/commit/b46e6595c423e33452185751807372ed8fc8ddd2))
+* **a11y:** sitename in logo alt ([051e46f](https://github.com/jwplayer/ott-web-app/commit/051e46f54a55aec5a6cde3b296859472bb362e6a))
+* add social login buttons to signup screen ([#496](https://github.com/jwplayer/ott-web-app/issues/496)) ([c2e3f52](https://github.com/jwplayer/ott-web-app/commit/c2e3f5266f0e29637e9e85ccef53c9dc54d962ce))
+* change wording ([#488](https://github.com/jwplayer/ott-web-app/issues/488)) ([1011dd2](https://github.com/jwplayer/ott-web-app/commit/1011dd28252afe0c001b1a27c5b1c3589a5c1cea))
+* **e2e:** search results based on typeahead changes ([1b3bebf](https://github.com/jwplayer/ott-web-app/commit/1b3bebff20027645003c657c5964ceb3580a6f2c))
+* Leave the path intact and only remove token from hash after login with social media ([#499](https://github.com/jwplayer/ott-web-app/issues/499)) ([8abc55c](https://github.com/jwplayer/ott-web-app/commit/8abc55c537fc50a39b85d9c941f038e7688d9c94))
+* **payment:** catch cleeng invalid coupon for offer ([930d52b](https://github.com/jwplayer/ott-web-app/commit/930d52b015434f968f9a0bef477ddcadcb0013c9))
+* **payment:** cleeng paypal invalid url error ([880e4af](https://github.com/jwplayer/ott-web-app/commit/880e4af3ef3a01054a65f3bebb75e32287aae469))
+* plans prompt after social register ([#498](https://github.com/jwplayer/ott-web-app/issues/498)) ([fa8c142](https://github.com/jwplayer/ott-web-app/commit/fa8c142331a87fe363aa639ab70ef14015a01439))
+* **project:** fix workflow ([bf73a1b](https://github.com/jwplayer/ott-web-app/commit/bf73a1b7e9f0fe904164db2a425269e3dd2f9bda))
+* **project:** improve form validation on account page ([0dfa380](https://github.com/jwplayer/ott-web-app/commit/0dfa380a07be113cdb691eaaa5b245a54f91afc2))
+* **project:** old password form error after validation ([7e11074](https://github.com/jwplayer/ott-web-app/commit/7e11074c1ba9aebc02f01e0dfffcc47d39a9a370))
+* **project:** retain password input during sign up ([2a5e2fe](https://github.com/jwplayer/ott-web-app/commit/2a5e2fe5a395f019e430993d14d3fd9e2de5340d))
+* **project:** scroll to top on static pages ([a9a0d1f](https://github.com/jwplayer/ott-web-app/commit/a9a0d1fa4d9266bb532544f1377010819ac47ff5))
+* **videodetail:** unnecessary scrollbar in videolist ([11a0e32](https://github.com/jwplayer/ott-web-app/commit/11a0e32f26b68d4ceeab5edfba2e912e8423198d))
+
 ## [6.1.0](https://github.com/jwplayer/ott-web-app/compare/v6.0.0...v6.1.0) (2024-04-05)
 
 
diff --git a/package.json b/package.json
index 1a8494cad..b13af62b3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jwp/ott",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "private": true,
   "license": "Apache-2.0",
   "repository": "https://github.com/jwplayer/ott-web-app.git",
diff --git a/platforms/web/public/locales/en/account.json b/platforms/web/public/locales/en/account.json
index 12dfe8199..d1a5f837e 100644
--- a/platforms/web/public/locales/en/account.json
+++ b/platforms/web/public/locales/en/account.json
@@ -189,13 +189,13 @@
     "no": "No, thanks",
     "not_sure": "Not sure that was the right email address?",
     "old_password": "Old password",
+    "old_password_does_not_match": "Old password does not match",
     "password": "Password",
     "password_helper_text": "Use a minimum of 8 characters (case sensitive) with at least one number",
     "password_reset": "Password reset",
     "password_reset_success": "Password reset successful",
     "password_strength": "Although your password meets the criteria for a strong password, it includes elements that are not advisable, such as prohibited phrases or repeated words. Please modify it to ensure account safety.",
     "passwords_do_not_match": "Passwords do not match",
-    "old_password_does_not_match": "Old password does not match",
     "repeat_new_password": "Repeat new password",
     "reset_password": "Edit Password",
     "reset_password_token": "Token",
diff --git a/platforms/web/public/locales/es/account.json b/platforms/web/public/locales/es/account.json
index 2701e8a2c..ab871dec2 100644
--- a/platforms/web/public/locales/es/account.json
+++ b/platforms/web/public/locales/es/account.json
@@ -199,13 +199,13 @@
     "no": "No, gracias",
     "not_sure": "¿No estás seguro de que esa sea la dirección de correo electrónico correcta?",
     "old_password": "Contraseña antigua",
+    "old_password_does_not_match": "La contraseña antigua no coincide",
     "password": "Contraseña",
     "password_helper_text": "Utiliza un mínimo de 8 caracteres (distingue entre mayúsculas y minúsculas) con al menos un número",
     "password_reset": "Restablecimiento de contraseña",
     "password_reset_success": "Contraseña restablecida",
     "password_strength": "Aunque tu contraseña cumple con los criterios de una contraseña segura, incluye elementos que no son recomendables, como frases prohibidas o palabras repetidas. Por favor, modifícala para garantizar la seguridad de tu cuenta.",
     "passwords_do_not_match": "Las contraseñas no coinciden",
-    "old_password_does_not_match": "La contraseña antigua no coincide",
     "repeat_new_password": "Repetir nueva contraseña",
     "reset_password": "Editar contraseña",
     "reset_password_token": "Token",

From da0920329c8204782a73544ff3a931a22ddfff82 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 16 Apr 2024 09:17:59 +0200
Subject: [PATCH 124/128] refactor(project): simplify layout and app routes

---
 packages/common/src/stores/UIStore.ts         |   2 +
 packages/hooks-react/src/useProfiles.ts       |   8 +-
 .../src/components/Header/Header.module.scss  |  40 +--
 .../src/components/Header/Header.test.tsx     |  92 +++----
 .../ui-react/src/components/Header/Header.tsx | 230 +----------------
 .../components/Header/HeaderActionButton.tsx  |  16 ++
 .../src/components/Header/HeaderActions.tsx   |   9 +
 .../src/components/Header/HeaderBrand.tsx     |  26 ++
 .../src/components/Header/HeaderMenu.tsx      |  22 ++
 .../components/Header/HeaderNavigation.tsx    |  26 ++
 .../src/components/Header/HeaderSkipLink.tsx  |  15 ++
 .../Header/__snapshots__/Header.test.tsx.snap |  63 +----
 .../src/components/IconButton/IconButton.tsx  |   2 +-
 .../LanguageMenu/LanguageMenu.module.scss     |   4 +
 .../components/LanguageMenu/LanguageMenu.tsx  |  14 +-
 .../__snapshots__/LanguageMenu.test.tsx.snap  |  42 ++--
 .../__snapshots__/UserMenu.test.tsx.snap      |   2 +-
 .../components/Popover/Popover.module.scss    |   1 -
 .../src/components/Popover/Popover.tsx        |   5 +-
 .../components/Sidebar/Sidebar.module.scss    |   4 +-
 .../components/UserMenu/UserMenu.module.scss  |  54 +---
 .../src/components/UserMenu/UserMenu.test.tsx |  25 +-
 .../src/components/UserMenu/UserMenu.tsx      | 157 ++++++------
 .../__snapshots__/UserMenu.test.tsx.snap      | 103 ++------
 .../UserMenuNav/UserMenuNav.module.scss       |  55 ++++
 .../UserMenuNav/UserMenuNav.test.tsx          |  21 ++
 .../components/UserMenuNav/UserMenuNav.tsx    | 105 ++++++++
 .../__snapshots__/UserMenuNav.test.tsx.snap   |  92 +++++++
 .../HeaderLanguageSwitcher.tsx                |  36 +++
 .../HeaderSearch/HeaderSearch.module.scss     |  22 ++
 .../containers/HeaderSearch/HeaderSearch.tsx  |  82 ++++++
 .../HeaderUserMenu/HeaderUserMenu.tsx         |  70 ++++++
 .../src/containers/Layout/Layout.module.scss  |  10 -
 .../ui-react/src/containers/Layout/Layout.tsx | 236 ++++--------------
 .../Layout/__snapshots__/Layout.test.tsx.snap |   3 +
 .../SidebarContainer.module.scss              |  20 ++
 .../SidebarContainer/SidebarContainer.tsx     | 104 ++++++++
 .../containers/SiteMetadata/SiteMetadata.tsx  |  24 ++
 platforms/web/package.json                    |   3 +-
 .../src/containers/AppRoutes/AppRoutes.tsx    |  83 ++----
 .../RoutesContainer/RoutesContainer.tsx       |  52 ++++
 41 files changed, 1079 insertions(+), 901 deletions(-)
 create mode 100644 packages/ui-react/src/components/Header/HeaderActionButton.tsx
 create mode 100644 packages/ui-react/src/components/Header/HeaderActions.tsx
 create mode 100644 packages/ui-react/src/components/Header/HeaderBrand.tsx
 create mode 100644 packages/ui-react/src/components/Header/HeaderMenu.tsx
 create mode 100644 packages/ui-react/src/components/Header/HeaderNavigation.tsx
 create mode 100644 packages/ui-react/src/components/Header/HeaderSkipLink.tsx
 create mode 100644 packages/ui-react/src/components/UserMenuNav/UserMenuNav.module.scss
 create mode 100644 packages/ui-react/src/components/UserMenuNav/UserMenuNav.test.tsx
 create mode 100644 packages/ui-react/src/components/UserMenuNav/UserMenuNav.tsx
 create mode 100644 packages/ui-react/src/components/UserMenuNav/__snapshots__/UserMenuNav.test.tsx.snap
 create mode 100644 packages/ui-react/src/containers/HeaderLanguageSwitcher/HeaderLanguageSwitcher.tsx
 create mode 100644 packages/ui-react/src/containers/HeaderSearch/HeaderSearch.module.scss
 create mode 100644 packages/ui-react/src/containers/HeaderSearch/HeaderSearch.tsx
 create mode 100644 packages/ui-react/src/containers/HeaderUserMenu/HeaderUserMenu.tsx
 create mode 100644 packages/ui-react/src/containers/SidebarContainer/SidebarContainer.module.scss
 create mode 100644 packages/ui-react/src/containers/SidebarContainer/SidebarContainer.tsx
 create mode 100644 packages/ui-react/src/containers/SiteMetadata/SiteMetadata.tsx
 create mode 100644 platforms/web/src/containers/RoutesContainer/RoutesContainer.tsx

diff --git a/packages/common/src/stores/UIStore.ts b/packages/common/src/stores/UIStore.ts
index af33c22b4..a328ae7ed 100644
--- a/packages/common/src/stores/UIStore.ts
+++ b/packages/common/src/stores/UIStore.ts
@@ -4,6 +4,7 @@ type UIState = {
   searchQuery: string;
   searchActive: boolean;
   userMenuOpen: boolean;
+  sideBarOpen: boolean;
   languageMenuOpen: boolean;
   preSearchPage?: string;
 };
@@ -12,5 +13,6 @@ export const useUIStore = createStore<UIState>('UIStore', () => ({
   searchQuery: '',
   searchActive: false,
   userMenuOpen: false,
+  sideBarOpen: false,
   languageMenuOpen: false,
 }));
diff --git a/packages/hooks-react/src/useProfiles.ts b/packages/hooks-react/src/useProfiles.ts
index aef289e6f..ebda26e9a 100644
--- a/packages/hooks-react/src/useProfiles.ts
+++ b/packages/hooks-react/src/useProfiles.ts
@@ -10,6 +10,7 @@ import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import ProfileController from '@jwp/ott-common/src/controllers/ProfileController';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import { logDev } from '@jwp/ott-common/src/utils/common';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 
 export const useSelectProfile = (options?: { onSuccess: () => void; onError: () => void }) => {
   const accountController = getModule(AccountController, false);
@@ -94,7 +95,9 @@ export const useProfileErrorHandler = () => {
 };
 
 export const useProfiles = (options?: UseQueryOptions<ListProfilesResponse | undefined, unknown, ListProfilesResponse | undefined, string[]>) => {
-  const { user } = useAccountStore();
+  const user = useAccountStore((state) => state.user);
+  const accessModel = useConfigStore((state) => state.accessModel);
+  const { profile } = useProfileStore();
   const isLoggedIn = !!user;
 
   const profileController = getModule(ProfileController);
@@ -106,8 +109,11 @@ export const useProfiles = (options?: UseQueryOptions<ListProfilesResponse | und
     enabled: isLoggedIn && profilesEnabled,
   });
 
+  const shouldManageProfiles = !!user && profilesEnabled && query.data?.canManageProfiles && !profile && (accessModel === 'SVOD' || accessModel === 'AUTHVOD');
+
   return {
     query,
+    shouldManageProfiles,
     profilesEnabled: !!query.data?.canManageProfiles,
   };
 };
diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss
index 18c5d00cc..0d601ac84 100644
--- a/packages/ui-react/src/components/Header/Header.module.scss
+++ b/packages/ui-react/src/components/Header/Header.module.scss
@@ -131,6 +131,7 @@
 .actions {
   position: relative;
   display: flex;
+  gap: calc(variables.$base-spacing / 2);
 
   @include responsive.mobile-and-tablet() {
     // the search container wants to position itself against the header
@@ -138,10 +139,6 @@
   }
 }
 
-.actionButton {
-  margin-left: calc(#{variables.$base-spacing} / 2);
-}
-
 //
 // Header search
 //
@@ -149,38 +146,6 @@
   max-width: 180px;
 }
 
-//
-// Header search container
-//
-.searchContainer {
-  position: absolute;
-  left: -#{variables.$search-bar-width-desktop};
-  display: flex;
-  width: variables.$search-bar-width-desktop;
-
-  > div:first-child {
-    flex: 1;
-  }
-
-  @include responsive.mobile-and-tablet() {
-    right: 0;
-    left: 0;
-    width: auto;
-  }
-}
-
-//
-// Container for the user button(s)
-//
-.buttonContainer {
-  // this is a visual fix for putting a button with background besides a transparent button
-  margin-left: variables.$base-spacing;
-
-  > button:first-child {
-    margin-right: calc(#{variables.$base-spacing} / 2);
-  }
-}
-
 .brandCentered {
   .brand {
     text-align: center;
@@ -231,8 +196,7 @@
   .searchActive {
     .menu,
     .brand,
-    .buttonContainer,
-    .actionButton {
+    .actions > *:not(:first-child) { // all action buttons except the search bar
       display: none;
     }
   }
diff --git a/packages/ui-react/src/components/Header/Header.test.tsx b/packages/ui-react/src/components/Header/Header.test.tsx
index 138c85367..cf59ab857 100644
--- a/packages/ui-react/src/components/Header/Header.test.tsx
+++ b/packages/ui-react/src/components/Header/Header.test.tsx
@@ -1,52 +1,35 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import AccountController from '@jwp/ott-common/src/controllers/AccountController';
-import { mockService } from '@jwp/ott-common/test/mockService';
-import { DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
+import Language from '@jwp/ott-theme/assets/icons/language.svg?react';
 
-import Button from '../Button/Button';
+import Icon from '../Icon/Icon';
 
 import Header from './Header';
+import HeaderSkipLink from './HeaderSkipLink';
+import HeaderMenu from './HeaderMenu';
+import HeaderBrand from './HeaderBrand';
+import HeaderNavigation from './HeaderNavigation';
+import HeaderActions from './HeaderActions';
+import HeaderActionButton from './HeaderActionButton';
 
 vi.mock('react-router-dom', () => ({
   NavLink: () => 'a',
+  Link: () => 'a',
 }));
 
 describe('<Header />', () => {
-  beforeEach(() => {
-    // TODO: remove AccountController from component
-    mockService(AccountController, { getFeatures: () => DEFAULT_FEATURES });
-  });
-
   test('renders header', () => {
-    const homeButton = [<Button key="key" label="Home" to="/" />];
     const { container } = render(
-      <Header
-        onMenuButtonClick={vi.fn()}
-        searchBarProps={{
-          query: '',
-          onQueryChange: vi.fn(),
-        }}
-        searchEnabled
-        searchActive={false}
-        onSearchButtonClick={vi.fn()}
-        onCloseSearchButtonClick={vi.fn()}
-        onLoginButtonClick={vi.fn()}
-        userMenuOpen={false}
-        sideBarOpen={false}
-        openUserPanel={vi.fn()}
-        closeUserPanel={vi.fn()}
-        openLanguageMenu={vi.fn()}
-        closeLanguageMenu={vi.fn()}
-        isLoggedIn={false}
-        canLogin={true}
-        showPaymentsMenuItem={true}
-        supportedLanguages={[]}
-        languageMenuOpen={false}
-        currentLanguage={undefined}
-        onLanguageClick={vi.fn()}
-      >
-        {homeButton}
+      <Header searchActive={false}>
+        <HeaderSkipLink />
+        <HeaderMenu onClick={vi.fn()} sideBarOpen={false} />
+        <HeaderBrand logoSrc={undefined} setLogoLoaded={vi.fn()} siteName="OTT Web App" />
+        <HeaderNavigation navItems={[]} />
+        <HeaderActions>
+          <HeaderActionButton>
+            <Icon icon={Language} />
+          </HeaderActionButton>
+        </HeaderActions>
       </Header>,
     );
 
@@ -59,32 +42,17 @@ describe('<Header />', () => {
       { label: 'Button test', to: '/test' },
     ];
     const { container } = render(
-      <Header
-        onMenuButtonClick={vi.fn()}
-        searchBarProps={{
-          query: '',
-          onQueryChange: vi.fn(),
-        }}
-        searchEnabled
-        searchActive={false}
-        onSearchButtonClick={vi.fn()}
-        onCloseSearchButtonClick={vi.fn()}
-        onLoginButtonClick={vi.fn()}
-        userMenuOpen={false}
-        sideBarOpen={false}
-        openUserPanel={vi.fn()}
-        closeUserPanel={vi.fn()}
-        openLanguageMenu={vi.fn()}
-        closeLanguageMenu={vi.fn()}
-        isLoggedIn={false}
-        canLogin={true}
-        showPaymentsMenuItem={true}
-        supportedLanguages={[]}
-        languageMenuOpen={false}
-        currentLanguage={undefined}
-        onLanguageClick={vi.fn()}
-        navItems={navItems}
-      />,
+      <Header searchActive={false}>
+        <HeaderSkipLink />
+        <HeaderMenu onClick={vi.fn()} sideBarOpen={false} />
+        <HeaderBrand logoSrc="/logo.png" setLogoLoaded={vi.fn()} siteName="OTT Web App" />
+        <HeaderNavigation navItems={navItems} />
+        <HeaderActions>
+          <HeaderActionButton>
+            <Icon icon={Language} />
+          </HeaderActionButton>
+        </HeaderActions>
+      </Header>,
     );
 
     expect(container).toMatchSnapshot();
diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
index 3aedb2575..cf88147c3 100644
--- a/packages/ui-react/src/components/Header/Header.tsx
+++ b/packages/ui-react/src/components/Header/Header.tsx
@@ -1,247 +1,23 @@
-import React, { type ReactNode, useState } from 'react';
+import React, { type PropsWithChildren } from 'react';
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
-import type { LanguageDefinition } from '@jwp/ott-common/types/i18n';
-import Menu from '@jwp/ott-theme/assets/icons/menu.svg?react';
-import SearchIcon from '@jwp/ott-theme/assets/icons/search.svg?react';
-import CloseIcon from '@jwp/ott-theme/assets/icons/close.svg?react';
-import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react';
-import type { Profile } from '@jwp/ott-common/types/profiles';
-
-import SearchBar, { type Props as SearchBarProps } from '../SearchBar/SearchBar';
-import Logo from '../Logo/Logo';
-import Button from '../Button/Button';
-import UserMenu from '../UserMenu/UserMenu';
-import ProfilesMenu from '../ProfilesMenu/ProfilesMenu';
-import IconButton from '../IconButton/IconButton';
-import LanguageMenu from '../LanguageMenu/LanguageMenu';
-import Panel from '../Panel/Panel';
-import Icon from '../Icon/Icon';
-import ProfileCircle from '../ProfileCircle/ProfileCircle';
-import Popover from '../Popover/Popover';
 
 import styles from './Header.module.scss';
 
 type TypeHeader = 'static' | 'fixed';
 
-type NavItem = {
-  label: string;
-  to: string;
-};
-
 type Props = {
   headerType?: TypeHeader;
-  onMenuButtonClick: () => void;
-  logoSrc?: string | null;
-  searchBarProps: SearchBarProps;
-  searchEnabled: boolean;
   searchActive: boolean;
-  onSearchButtonClick?: () => void;
-  onCloseSearchButtonClick?: () => void;
-  onLoginButtonClick?: () => void;
-  onSignUpButtonClick?: () => void;
-  openUserPanel: () => void;
-  closeUserPanel: () => void;
-  openLanguageMenu: () => void;
-  closeLanguageMenu: () => void;
-  children?: ReactNode;
-  isLoggedIn: boolean;
-  sideBarOpen: boolean;
-  userMenuOpen: boolean;
-  languageMenuOpen: boolean;
-  canLogin: boolean;
-  showPaymentsMenuItem: boolean;
-  supportedLanguages: LanguageDefinition[];
-  currentLanguage: LanguageDefinition | undefined;
-  onLanguageClick: (code: string) => void;
-  favoritesEnabled?: boolean;
-  siteName?: string;
-  navItems?: NavItem[];
-
-  profilesData?: {
-    currentProfile: Profile | null;
-    profiles: Profile[];
-    profilesEnabled: boolean;
-    selectProfile: ({ avatarUrl, id }: { avatarUrl: string; id: string }) => void;
-    isSelectingProfile: boolean;
-  };
 };
 
-const Header: React.FC<Props> = ({
-  children,
-  headerType = 'static',
-  onMenuButtonClick,
-  logoSrc,
-  searchBarProps,
-  searchActive,
-  onSearchButtonClick,
-  searchEnabled,
-  onLoginButtonClick,
-  onCloseSearchButtonClick,
-  onSignUpButtonClick,
-  isLoggedIn,
-  sideBarOpen,
-  userMenuOpen,
-  languageMenuOpen,
-  openUserPanel,
-  closeUserPanel,
-  openLanguageMenu,
-  closeLanguageMenu,
-  canLogin = false,
-  showPaymentsMenuItem,
-  supportedLanguages,
-  currentLanguage,
-  onLanguageClick,
-  favoritesEnabled,
-  siteName,
-  profilesData: { currentProfile, profiles, profilesEnabled, selectProfile, isSelectingProfile } = {},
-  navItems = [],
-}) => {
-  const { t } = useTranslation('menu');
-  const [logoLoaded, setLogoLoaded] = useState(false);
-  const breakpoint = useBreakpoint();
+const Header = ({ children, headerType = 'static', searchActive }: PropsWithChildren<Props>) => {
   const headerClassName = classNames(styles.header, styles[headerType], {
     [styles.searchActive]: searchActive,
   });
 
-  // only show the language dropdown when there are other languages to choose from
-  const showLanguageSwitcher = supportedLanguages.length > 1;
-
-  const renderSearch = () => {
-    if (!searchEnabled) return null;
-
-    return searchActive ? (
-      <div className={styles.searchContainer}>
-        <SearchBar {...searchBarProps} onClose={onCloseSearchButtonClick} />
-        <IconButton className={styles.iconButton} aria-label="Close search" onClick={onCloseSearchButtonClick}>
-          <Icon icon={CloseIcon} />
-        </IconButton>
-      </div>
-    ) : (
-      <IconButton
-        className={classNames(styles.iconButton, styles.actionButton)}
-        aria-label="Open search"
-        onClick={() => {
-          if (onSearchButtonClick) {
-            onSearchButtonClick();
-          }
-        }}
-      >
-        <Icon icon={SearchIcon} />
-      </IconButton>
-    );
-  };
-
-  const renderUserActions = () => {
-    if (!canLogin || breakpoint <= Breakpoint.sm) return null;
-
-    return isLoggedIn ? (
-      <React.Fragment>
-        <IconButton
-          className={classNames(styles.iconButton, styles.actionButton)}
-          aria-label={t('open_user_menu')}
-          aria-controls="menu_panel"
-          aria-expanded={userMenuOpen}
-          aria-haspopup="menu"
-          onClick={openUserPanel}
-          onBlur={closeUserPanel}
-        >
-          {profilesEnabled && currentProfile ? (
-            <ProfileCircle src={currentProfile.avatar_url} alt={currentProfile.name || t('profile_icon')} />
-          ) : (
-            <Icon icon={AccountCircle} />
-          )}
-        </IconButton>
-        <Popover isOpen={userMenuOpen} onClose={closeUserPanel}>
-          <Panel id="menu_panel">
-            <div onFocus={openUserPanel} onBlur={closeUserPanel}>
-              {profilesEnabled && (
-                <ProfilesMenu
-                  onButtonClick={closeUserPanel}
-                  profiles={profiles ?? []}
-                  currentProfile={currentProfile}
-                  selectingProfile={!!isSelectingProfile}
-                  selectProfile={selectProfile}
-                  small
-                />
-              )}
-              <UserMenu
-                focusable={userMenuOpen}
-                onButtonClick={closeUserPanel}
-                showPaymentsItem={showPaymentsMenuItem}
-                currentProfile={currentProfile}
-                favoritesEnabled={favoritesEnabled}
-                small
-              />
-            </div>
-          </Panel>
-        </Popover>
-      </React.Fragment>
-    ) : (
-      <div className={styles.buttonContainer}>
-        <Button onClick={onLoginButtonClick} label={t('sign_in')} aria-haspopup="dialog" />
-        <Button variant="contained" color="primary" onClick={onSignUpButtonClick} label={t('sign_up')} aria-haspopup="dialog" />
-      </div>
-    );
-  };
-
-  const renderLanguageDropdown = () => {
-    if (!showLanguageSwitcher) return null;
-
-    return (
-      <LanguageMenu
-        className={classNames(styles.iconButton, styles.actionButton)}
-        openLanguageMenu={openLanguageMenu}
-        closeLanguageMenu={closeLanguageMenu}
-        languageMenuOpen={languageMenuOpen}
-        onClick={(code) => {
-          onLanguageClick(code);
-        }}
-        languages={supportedLanguages}
-        currentLanguage={currentLanguage}
-      />
-    );
-  };
-
-  const renderNav = () => {
-    if (navItems.length === 0) {
-      return children;
-    }
-    return (
-      <ul>
-        {navItems.map((item, index) => (
-          <li key={index}>
-            <Button activeClassname={styles.navButton} label={item.label} to={item.to} variant="text" />
-          </li>
-        ))}
-      </ul>
-    );
-  };
-
   return (
     <header className={headerClassName}>
-      <div className={styles.container}>
-        <a href="#content" className={styles.skipToContent}>
-          {t('skip_to_content')}
-        </a>
-        <div className={styles.menu}>
-          <IconButton className={styles.iconButton} aria-label={t('open_menu')} aria-expanded={sideBarOpen} onClick={() => onMenuButtonClick()}>
-            <Icon icon={Menu} />
-          </IconButton>
-        </div>
-        {logoSrc && (
-          <div className={styles.brand}>
-            <Logo alt={t('logo_alt', { siteName })} src={logoSrc} onLoad={() => setLogoLoaded(true)} />
-          </div>
-        )}
-        <nav className={styles.nav}>{logoLoaded || !logoSrc ? renderNav() : null}</nav>
-        <div className={styles.actions}>
-          {renderSearch()}
-          {renderLanguageDropdown()}
-          {renderUserActions()}
-        </div>
-      </div>
+      <div className={styles.container}>{children}</div>
     </header>
   );
 };
diff --git a/packages/ui-react/src/components/Header/HeaderActionButton.tsx b/packages/ui-react/src/components/Header/HeaderActionButton.tsx
new file mode 100644
index 000000000..78f6bc8cd
--- /dev/null
+++ b/packages/ui-react/src/components/Header/HeaderActionButton.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import IconButton, { type Props as IconButtonProps } from '../IconButton/IconButton';
+
+import styles from './Header.module.scss';
+
+const HeaderActionButton = ({ children, className, ...rest }: IconButtonProps) => {
+  return (
+    <IconButton className={classNames(styles.iconButton, className)} {...rest}>
+      {children}
+    </IconButton>
+  );
+};
+
+export default HeaderActionButton;
diff --git a/packages/ui-react/src/components/Header/HeaderActions.tsx b/packages/ui-react/src/components/Header/HeaderActions.tsx
new file mode 100644
index 000000000..e275f091a
--- /dev/null
+++ b/packages/ui-react/src/components/Header/HeaderActions.tsx
@@ -0,0 +1,9 @@
+import React, { type PropsWithChildren } from 'react';
+
+import styles from './Header.module.scss';
+
+const HeaderActions = ({ children }: PropsWithChildren) => {
+  return <div className={styles.actions}>{children}</div>;
+};
+
+export default HeaderActions;
diff --git a/packages/ui-react/src/components/Header/HeaderBrand.tsx b/packages/ui-react/src/components/Header/HeaderBrand.tsx
new file mode 100644
index 000000000..650889a11
--- /dev/null
+++ b/packages/ui-react/src/components/Header/HeaderBrand.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Logo from '../Logo/Logo';
+
+import styles from './Header.module.scss';
+
+type Props = {
+  siteName?: string;
+  logoSrc?: string | null;
+  setLogoLoaded: (loaded: boolean) => void;
+};
+
+const HeaderBrand = ({ siteName, logoSrc, setLogoLoaded }: Props) => {
+  const { t } = useTranslation('menu');
+
+  if (!logoSrc) return null;
+
+  return (
+    <div className={styles.brand}>
+      <Logo alt={t('logo_alt', { siteName })} src={logoSrc} onLoad={() => setLogoLoaded(true)} />
+    </div>
+  );
+};
+
+export default HeaderBrand;
diff --git a/packages/ui-react/src/components/Header/HeaderMenu.tsx b/packages/ui-react/src/components/Header/HeaderMenu.tsx
new file mode 100644
index 000000000..5e6d9238b
--- /dev/null
+++ b/packages/ui-react/src/components/Header/HeaderMenu.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Menu from '@jwp/ott-theme/assets/icons/menu.svg?react';
+
+import Icon from '../Icon/Icon';
+import IconButton from '../IconButton/IconButton';
+
+import styles from './Header.module.scss';
+
+const HeaderMenu = ({ sideBarOpen, onClick }: { sideBarOpen: boolean; onClick: () => void }) => {
+  const { t } = useTranslation('menu');
+
+  return (
+    <div className={styles.menu}>
+      <IconButton className={styles.iconButton} aria-label={t('open_menu')} aria-expanded={sideBarOpen} onClick={onClick}>
+        <Icon icon={Menu} />
+      </IconButton>
+    </div>
+  );
+};
+
+export default HeaderMenu;
diff --git a/packages/ui-react/src/components/Header/HeaderNavigation.tsx b/packages/ui-react/src/components/Header/HeaderNavigation.tsx
new file mode 100644
index 000000000..3158c0932
--- /dev/null
+++ b/packages/ui-react/src/components/Header/HeaderNavigation.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import Button from '../Button/Button';
+
+import styles from './Header.module.scss';
+
+type NavItem = {
+  label: string;
+  to: string;
+};
+
+const HeaderNavigation = ({ navItems }: { navItems: NavItem[] }) => {
+  return (
+    <nav className={styles.nav}>
+      <ul>
+        {navItems.map((item, index) => (
+          <li key={index}>
+            <Button activeClassname={styles.navButton} label={item.label} to={item.to} variant="text" />
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export default HeaderNavigation;
diff --git a/packages/ui-react/src/components/Header/HeaderSkipLink.tsx b/packages/ui-react/src/components/Header/HeaderSkipLink.tsx
new file mode 100644
index 000000000..22d517d80
--- /dev/null
+++ b/packages/ui-react/src/components/Header/HeaderSkipLink.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './Header.module.scss';
+
+const HeaderSkipLink = () => {
+  const { t } = useTranslation('menu');
+  return (
+    <a href="#content" className={styles.skipToContent}>
+      {t('skip_to_content')}
+    </a>
+  );
+};
+
+export default HeaderSkipLink;
diff --git a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
index 63d3685b6..79060c0be 100644
--- a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -42,14 +42,13 @@ exports[`<Header /> > renders header 1`] = `
       <nav
         class="_nav_f4f7a7"
       >
-        a
+        <ul />
       </nav>
       <div
         class="_actions_f4f7a7"
       >
         <button
-          aria-label="Open search"
-          class="_iconButton_0fef65 _iconButton_f4f7a7 _actionButton_f4f7a7"
+          class="_iconButton_0fef65 _iconButton_f4f7a7"
           type="button"
         >
           <svg
@@ -59,32 +58,11 @@ exports[`<Header /> > renders header 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+              d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
+              fill="currentColor"
             />
           </svg>
         </button>
-        <div
-          class="_buttonContainer_f4f7a7"
-        >
-          <button
-            aria-haspopup="dialog"
-            class="_button_f8f296 _default_f8f296 _outlined_f8f296"
-            type="button"
-          >
-            <span>
-              sign_in
-            </span>
-          </button>
-          <button
-            aria-haspopup="dialog"
-            class="_button_f8f296 _primary_f8f296"
-            type="button"
-          >
-            <span>
-              sign_up
-            </span>
-          </button>
-        </div>
       </div>
     </div>
   </header>
@@ -130,6 +108,11 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
           </svg>
         </button>
       </div>
+      <div
+        class="_brand_f4f7a7"
+      >
+        a
+      </div>
       <nav
         class="_nav_f4f7a7"
       >
@@ -146,8 +129,7 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
         class="_actions_f4f7a7"
       >
         <button
-          aria-label="Open search"
-          class="_iconButton_0fef65 _iconButton_f4f7a7 _actionButton_f4f7a7"
+          class="_iconButton_0fef65 _iconButton_f4f7a7"
           type="button"
         >
           <svg
@@ -157,32 +139,11 @@ exports[`<Header /> > renders header with nav buttons 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+              d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
+              fill="currentColor"
             />
           </svg>
         </button>
-        <div
-          class="_buttonContainer_f4f7a7"
-        >
-          <button
-            aria-haspopup="dialog"
-            class="_button_f8f296 _default_f8f296 _outlined_f8f296"
-            type="button"
-          >
-            <span>
-              sign_in
-            </span>
-          </button>
-          <button
-            aria-haspopup="dialog"
-            class="_button_f8f296 _primary_f8f296"
-            type="button"
-          >
-            <span>
-              sign_up
-            </span>
-          </button>
-        </div>
       </div>
     </div>
   </header>
diff --git a/packages/ui-react/src/components/IconButton/IconButton.tsx b/packages/ui-react/src/components/IconButton/IconButton.tsx
index c03f9c622..d604fbf3e 100644
--- a/packages/ui-react/src/components/IconButton/IconButton.tsx
+++ b/packages/ui-react/src/components/IconButton/IconButton.tsx
@@ -3,7 +3,7 @@ import React, { type ButtonHTMLAttributes } from 'react';
 
 import styles from './IconButton.module.scss';
 
-type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
+export type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
   onClick?: () => void;
   onBlur?: () => void;
   children: JSX.Element;
diff --git a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.module.scss b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.module.scss
index 32c6c21a1..f3995109a 100644
--- a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.module.scss
+++ b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.module.scss
@@ -2,6 +2,10 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 
+.popover {
+  top: 10px;
+}
+
 .menuItems {
   margin: 0;
   padding: 0;
diff --git a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
index 8463b9df1..1faccb7cd 100644
--- a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
+++ b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
@@ -1,15 +1,15 @@
 import type { LanguageDefinition } from '@jwp/ott-common/types/i18n';
 import classNames from 'classnames';
-import { Fragment, type MouseEvent } from 'react';
+import { type MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { testId } from '@jwp/ott-common/src/utils/common';
 import Language from '@jwp/ott-theme/assets/icons/language.svg?react';
 
-import IconButton from '../IconButton/IconButton';
 import Link from '../Link/Link';
 import Panel from '../Panel/Panel';
 import Popover from '../Popover/Popover';
 import Icon from '../Icon/Icon';
+import HeaderActionButton from '../Header/HeaderActionButton';
 
 import styles from './LanguageMenu.module.scss';
 
@@ -42,19 +42,19 @@ const LanguageMenu = ({ onClick, className, languages, currentLanguage, language
   };
 
   return (
-    <Fragment>
-      <IconButton
+    <div>
+      <HeaderActionButton
         data-testid={testId('language-menu-button')}
         aria-controls="language-panel"
         aria-expanded={languageMenuOpen}
         aria-haspopup="menu"
-        className={classNames(className)}
+        className={className}
         aria-label={t('language_menu')}
         onClick={handleMenuToggle}
         onBlur={closeLanguageMenu}
       >
         <Icon icon={Language} />
-      </IconButton>
+      </HeaderActionButton>
       <Popover isOpen={languageMenuOpen} onClose={closeLanguageMenu}>
         <Panel id="language-panel">
           <ul className={styles.menuItems}>
@@ -72,7 +72,7 @@ const LanguageMenu = ({ onClick, className, languages, currentLanguage, language
           </ul>
         </Panel>
       </Popover>
-    </Fragment>
+    </div>
   );
 };
 
diff --git a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
index 5d55ddd6a..f8b0e8be9 100644
--- a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
+++ b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
@@ -2,26 +2,28 @@
 
 exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
 <div>
-  <button
-    aria-controls="language-panel"
-    aria-expanded="false"
-    aria-haspopup="menu"
-    aria-label="language_menu"
-    class="_iconButton_0fef65"
-    data-testid="language-menu-button"
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      class="_icon_585b29"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
+  <div>
+    <button
+      aria-controls="language-panel"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="language_menu"
+      class="_iconButton_0fef65 _iconButton_f4f7a7"
+      data-testid="language-menu-button"
+      type="button"
     >
-      <path
-        d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
-        fill="currentColor"
-      />
-    </svg>
-  </button>
+      <svg
+        aria-hidden="true"
+        class="_icon_585b29"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"
+          fill="currentColor"
+        />
+      </svg>
+    </button>
+  </div>
 </div>
 `;
diff --git a/packages/ui-react/src/components/LanguageMenu/__snapshots__/UserMenu.test.tsx.snap b/packages/ui-react/src/components/LanguageMenu/__snapshots__/UserMenu.test.tsx.snap
index ec9b0c446..3b250a7ea 100644
--- a/packages/ui-react/src/components/LanguageMenu/__snapshots__/UserMenu.test.tsx.snap
+++ b/packages/ui-react/src/components/LanguageMenu/__snapshots__/UserMenu.test.tsx.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1
 
-exports[`<UserMenu> > renders and matches snapshot 1`] = `
+exports[`<UserMenuNav> > renders and matches snapshot 1`] = `
 <div>
   <ul
     class="_menuItems_457528"
diff --git a/packages/ui-react/src/components/Popover/Popover.module.scss b/packages/ui-react/src/components/Popover/Popover.module.scss
index adf5febe4..71b3053ed 100644
--- a/packages/ui-react/src/components/Popover/Popover.module.scss
+++ b/packages/ui-react/src/components/Popover/Popover.module.scss
@@ -3,7 +3,6 @@
 
 .popover {
   position: absolute;
-  top: 55px;
   right: 5px;
   z-index: variables.$header-z-index;
   min-width: 180px;
diff --git a/packages/ui-react/src/components/Popover/Popover.tsx b/packages/ui-react/src/components/Popover/Popover.tsx
index 894b3101b..77000f221 100644
--- a/packages/ui-react/src/components/Popover/Popover.tsx
+++ b/packages/ui-react/src/components/Popover/Popover.tsx
@@ -8,15 +8,16 @@ import styles from './Popover.module.scss';
 
 type Props = {
   children: ReactNode;
+  className?: string;
   isOpen: boolean;
   onClose: () => void;
 };
 
-const Popover: React.FC<Props> = ({ children, isOpen, onClose }: Props) => {
+const Popover: React.FC<Props> = ({ children, className, isOpen, onClose }: Props) => {
   return (
     <Slide open={isOpen} duration={250} direction="right" style={{ position: 'relative' }}>
       <DetectOutsideClick callback={onClose}>
-        <div className={classNames(styles.popover)}>{children}</div>
+        <div className={classNames(styles.popover, className)}>{children}</div>
       </DetectOutsideClick>
     </Slide>
   );
diff --git a/packages/ui-react/src/components/Sidebar/Sidebar.module.scss b/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
index 7bc53c321..ee465b0e6 100644
--- a/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
+++ b/packages/ui-react/src/components/Sidebar/Sidebar.module.scss
@@ -37,9 +37,8 @@
 
   ul {
     margin: 0;
-    padding: 0 0 calc(#{variables.$base-spacing} / 2) 0;
+    padding: 0;
     list-style-type: none;
-    border-bottom: 1px solid rgba(variables.$white, 0.12);
   }
 }
 
@@ -50,6 +49,7 @@
 
 .group {
   display: flex;
+  gap: variables.$base-spacing;
   flex-direction: column;
   max-height: 100%;
   padding: variables.$base-spacing 0;
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.module.scss b/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
index 9c8daf45c..096f619ca 100644
--- a/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
+++ b/packages/ui-react/src/components/UserMenu/UserMenu.module.scss
@@ -1,55 +1,15 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 
-@mixin divider-before($marginY, $marginX, $background-opacity) {
-  position: relative;
-  margin-top: $marginY;
-
-  &::before {
-    position: absolute;
-    top: calc(#{$marginY} * -0.5);
-    right: $marginX;
-    left: $marginX;
-    height: 1px;
-    background-color: rgba(variables.$white, $background-opacity);
-    content: '';
-  }
-}
-
-.menuItems {
-  width: auto;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-
-  > li > a {
-    padding: 0 18px;
-    font-size: 16px;
-  }
-}
-
-.button {
-  margin-bottom: variables.$base-spacing;
-}
-
-.divider {
-  @include divider-before(variables.$base-spacing, 0, 0.12);
-
-  &.small {
-    @include divider-before(variables.$base-spacing, variables.$base-spacing, 0.32);
-  }
+.popover {
+  top: 10px;
 }
 
-.sectionHeader {
-  width: 100%;
-  padding: 12px 0 12px 24px;
-  color: variables.$white;
-  font-weight: 700;
-  font-size: 12px;
-  text-transform: uppercase;
-  opacity: 0.7;
+.buttonContainer {
+  // this is a visual fix for putting a button with background besides a transparent button
+  margin-left: variables.$base-spacing;
 
-  .menuItems + & {
-    @include divider-before(variables.$base-spacing, variables.$base-spacing, 0.32);
+  > button:first-child {
+    margin-right: calc(#{variables.$base-spacing} / 2);
   }
 }
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.test.tsx b/packages/ui-react/src/components/UserMenu/UserMenu.test.tsx
index 8ac1fcc28..f422eb851 100644
--- a/packages/ui-react/src/components/UserMenu/UserMenu.test.tsx
+++ b/packages/ui-react/src/components/UserMenu/UserMenu.test.tsx
@@ -1,20 +1,27 @@
 import React from 'react';
-import AccountController from '@jwp/ott-common/src/controllers/AccountController';
-import { mockService } from '@jwp/ott-common/test/mockService';
-import { DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
 
 import { renderWithRouter } from '../../../test/utils';
 
 import UserMenu from './UserMenu';
 
 describe('<UserMenu>', () => {
-  beforeEach(() => {
-    // TODO: Remove AccountController from component
-    mockService(AccountController, { getFeatures: () => DEFAULT_FEATURES });
-  });
-
   test('renders and matches snapshot', () => {
-    const { container } = renderWithRouter(<UserMenu focusable={true} showPaymentsItem={true} />);
+    const { container } = renderWithRouter(
+      <UserMenu
+        open={false}
+        onOpen={vi.fn()}
+        onClose={vi.fn()}
+        favoritesEnabled
+        isLoggedIn
+        onLoginButtonClick={vi.fn()}
+        onSelectProfile={vi.fn()}
+        profile={null}
+        onSignUpButtonClick={vi.fn()}
+        profilesEnabled={true}
+        profileLoading={false}
+        profiles={[]}
+      />,
+    );
 
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/ui-react/src/components/UserMenu/UserMenu.tsx b/packages/ui-react/src/components/UserMenu/UserMenu.tsx
index 8cfc147ab..4c94dbfcb 100644
--- a/packages/ui-react/src/components/UserMenu/UserMenu.tsx
+++ b/packages/ui-react/src/components/UserMenu/UserMenu.tsx
@@ -1,104 +1,89 @@
-import React, { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import classNames from 'classnames';
-import { getModule } from '@jwp/ott-common/src/modules/container';
-import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react';
-import Favorite from '@jwp/ott-theme/assets/icons/favorite.svg?react';
-import BalanceWallet from '@jwp/ott-theme/assets/icons/balance_wallet.svg?react';
-import Exit from '@jwp/ott-theme/assets/icons/exit.svg?react';
-import { userProfileURL } from '@jwp/ott-common/src/utils/urlFormatting';
-import { PATH_USER_ACCOUNT, PATH_USER_FAVORITES, PATH_USER_PAYMENTS } from '@jwp/ott-common/src/paths';
 import type { Profile } from '@jwp/ott-common/types/profiles';
 
-import MenuButton from '../MenuButton/MenuButton';
 import Icon from '../Icon/Icon';
 import ProfileCircle from '../ProfileCircle/ProfileCircle';
+import Popover from '../Popover/Popover';
+import Panel from '../Panel/Panel';
+import ProfilesMenu from '../ProfilesMenu/ProfilesMenu';
+import Button from '../Button/Button';
+import UserMenuNav from '../UserMenuNav/UserMenuNav';
+import HeaderActionButton from '../Header/HeaderActionButton';
 
 import styles from './UserMenu.module.scss';
 
 type Props = {
-  small?: boolean;
-  focusable: boolean;
-  showPaymentsItem: boolean;
-  onButtonClick?: () => void;
-  titleId?: string;
-  currentProfile?: Profile | null;
-  favoritesEnabled?: boolean;
+  open: boolean;
+  onClose: () => void;
+  onOpen: () => void;
+  onLoginButtonClick: () => void;
+  onSignUpButtonClick: () => void;
+  isLoggedIn: boolean;
+  favoritesEnabled: boolean;
+  profilesEnabled: boolean;
+  profile: Profile | null;
+  profiles: Profile[] | null;
+  profileLoading: boolean;
+  onSelectProfile: (params: { id: string; avatarUrl: string }) => void;
 };
 
-const UserMenu = ({ showPaymentsItem, small = false, onButtonClick, currentProfile, favoritesEnabled, focusable, titleId }: Props) => {
-  const { t } = useTranslation('user');
-  const navigate = useNavigate();
-  const accountController = getModule(AccountController);
-  const tabIndex = focusable ? 0 : -1;
+const UserMenu = ({
+  isLoggedIn,
+  favoritesEnabled,
+  open,
+  onClose,
+  onOpen,
+  onLoginButtonClick,
+  onSignUpButtonClick,
+  profilesEnabled,
+  profile,
+  profiles,
+  profileLoading,
+  onSelectProfile,
+}: Props) => {
+  const { t } = useTranslation('menu');
 
-  const onLogout = useCallback(async () => {
-    if (onButtonClick) {
-      onButtonClick();
-    }
-
-    await accountController.logout();
-    navigate('/', { replace: true });
-  }, [onButtonClick, navigate, accountController]);
+  if (!isLoggedIn) {
+    return (
+      <div className={styles.buttonContainer}>
+        <Button onClick={onLoginButtonClick} label={t('sign_in')} aria-haspopup="dialog" />
+        <Button variant="contained" color="primary" onClick={onSignUpButtonClick} label={t('sign_up')} aria-haspopup="dialog" />
+      </div>
+    );
+  }
 
   return (
-    <>
-      <h2 className={styles.sectionHeader} id={titleId}>
-        {t('nav.settings')}
-      </h2>
-      <ul className={styles.menuItems}>
-        {currentProfile && (
-          <li>
-            <MenuButton
-              small={small}
-              onClick={onButtonClick}
-              to={userProfileURL(currentProfile.id ?? '')}
-              label={t('nav.profile')}
-              startIcon={<ProfileCircle src={currentProfile?.avatar_url} alt={currentProfile?.name ?? ''} />}
-            />
-          </li>
-        )}
-        <li>
-          <MenuButton
-            small={small}
-            onClick={onButtonClick}
-            to={PATH_USER_ACCOUNT}
-            label={t('nav.account')}
-            startIcon={<Icon icon={AccountCircle} />}
-            tabIndex={tabIndex}
-          />
-        </li>
-        {favoritesEnabled && (
-          <li>
-            <MenuButton
-              small={small}
-              onClick={onButtonClick}
-              to={PATH_USER_FAVORITES}
-              label={t('nav.favorites')}
-              startIcon={<Icon icon={Favorite} />}
-              tabIndex={tabIndex}
-            />
-          </li>
-        )}
-        {showPaymentsItem && (
-          <li>
-            <MenuButton
-              small={small}
-              onClick={onButtonClick}
-              to={PATH_USER_PAYMENTS}
-              label={t('nav.payments')}
-              startIcon={<Icon icon={BalanceWallet} />}
-              tabIndex={tabIndex}
-            />
-          </li>
-        )}
-        <li className={classNames(styles.divider, { [styles.small]: small })}>
-          <MenuButton small={small} onClick={onLogout} label={t('nav.logout')} startIcon={<Icon icon={Exit} />} tabIndex={tabIndex} />
-        </li>
-      </ul>
-    </>
+    <div>
+      <HeaderActionButton
+        aria-label={t('open_user_menu')}
+        aria-controls="menu_panel"
+        aria-expanded={open}
+        aria-haspopup="menu"
+        onClick={onOpen}
+        onBlur={onClose}
+      >
+        {profilesEnabled && profile ? <ProfileCircle src={profile.avatar_url} alt={profile.name || t('profile_icon')} /> : <Icon icon={AccountCircle} />}
+      </HeaderActionButton>
+      <Popover className={styles.popover} isOpen={open} onClose={onClose}>
+        <Panel id="menu_panel">
+          <div onFocus={onOpen} onBlur={onClose}>
+            {profilesEnabled && (
+              <ProfilesMenu
+                onButtonClick={onClose}
+                profiles={profiles ?? []}
+                currentProfile={profile}
+                selectingProfile={profileLoading}
+                selectProfile={onSelectProfile}
+                small
+              />
+            )}
+            <UserMenuNav focusable={open} onButtonClick={onClose} showPaymentItems={true} currentProfile={profile} favoritesEnabled={favoritesEnabled} small />
+          </div>
+        </Panel>
+      </Popover>
+    </div>
   );
 };
 
diff --git a/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap b/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
index b971d187b..0a2bac89e 100644
--- a/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
+++ b/packages/ui-react/src/components/UserMenu/__snapshots__/UserMenu.test.tsx.snap
@@ -2,91 +2,26 @@
 
 exports[`<UserMenu> > renders and matches snapshot 1`] = `
 <div>
-  <h2
-    class="_sectionHeader_457528"
-  >
-    nav.settings
-  </h2>
-  <ul
-    class="_menuItems_457528"
-  >
-    <li>
-      <a
-        class="_menuButton_91706b"
-        href="/u/my-account"
-        tabindex="0"
-      >
-        <div
-          class="_startIcon_91706b"
-        >
-          <svg
-            aria-hidden="true"
-            class="_icon_585b29"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"
-            />
-          </svg>
-        </div>
-        <span>
-          nav.account
-        </span>
-      </a>
-    </li>
-    <li>
-      <a
-        class="_menuButton_91706b"
-        href="/u/payments"
-        tabindex="0"
-      >
-        <div
-          class="_startIcon_91706b"
-        >
-          <svg
-            aria-hidden="true"
-            class="_icon_585b29"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M5,3C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V16.72C21.59,16.37 22,15.74 22,15V9C22,8.26 21.59,7.63 21,7.28V5A2,2 0 0,0 19,3H5M5,5H19V7H13A2,2 0 0,0 11,9V15A2,2 0 0,0 13,17H19V19H5V5M13,9H20V15H13V9M16,10.5A1.5,1.5 0 0,0 14.5,12A1.5,1.5 0 0,0 16,13.5A1.5,1.5 0 0,0 17.5,12A1.5,1.5 0 0,0 16,10.5Z"
-            />
-          </svg>
-        </div>
-        <span>
-          nav.payments
-        </span>
-      </a>
-    </li>
-    <li
-      class="_divider_457528"
+  <div>
+    <button
+      aria-controls="menu_panel"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="open_user_menu"
+      class="_iconButton_0fef65 _iconButton_f4f7a7"
+      type="button"
     >
-      <div
-        class="_menuButton_91706b"
-        role="button"
-        tabindex="0"
+      <svg
+        aria-hidden="true"
+        class="_icon_585b29"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <div
-          class="_startIcon_91706b"
-        >
-          <svg
-            aria-hidden="true"
-            class="_icon_585b29"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z"
-            />
-          </svg>
-        </div>
-        <span>
-          nav.logout
-        </span>
-      </div>
-    </li>
-  </ul>
+        <path
+          d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"
+        />
+      </svg>
+    </button>
+  </div>
 </div>
 `;
diff --git a/packages/ui-react/src/components/UserMenuNav/UserMenuNav.module.scss b/packages/ui-react/src/components/UserMenuNav/UserMenuNav.module.scss
new file mode 100644
index 000000000..9c8daf45c
--- /dev/null
+++ b/packages/ui-react/src/components/UserMenuNav/UserMenuNav.module.scss
@@ -0,0 +1,55 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+
+@mixin divider-before($marginY, $marginX, $background-opacity) {
+  position: relative;
+  margin-top: $marginY;
+
+  &::before {
+    position: absolute;
+    top: calc(#{$marginY} * -0.5);
+    right: $marginX;
+    left: $marginX;
+    height: 1px;
+    background-color: rgba(variables.$white, $background-opacity);
+    content: '';
+  }
+}
+
+.menuItems {
+  width: auto;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  > li > a {
+    padding: 0 18px;
+    font-size: 16px;
+  }
+}
+
+.button {
+  margin-bottom: variables.$base-spacing;
+}
+
+.divider {
+  @include divider-before(variables.$base-spacing, 0, 0.12);
+
+  &.small {
+    @include divider-before(variables.$base-spacing, variables.$base-spacing, 0.32);
+  }
+}
+
+.sectionHeader {
+  width: 100%;
+  padding: 12px 0 12px 24px;
+  color: variables.$white;
+  font-weight: 700;
+  font-size: 12px;
+  text-transform: uppercase;
+  opacity: 0.7;
+
+  .menuItems + & {
+    @include divider-before(variables.$base-spacing, variables.$base-spacing, 0.32);
+  }
+}
diff --git a/packages/ui-react/src/components/UserMenuNav/UserMenuNav.test.tsx b/packages/ui-react/src/components/UserMenuNav/UserMenuNav.test.tsx
new file mode 100644
index 000000000..2baf6bf93
--- /dev/null
+++ b/packages/ui-react/src/components/UserMenuNav/UserMenuNav.test.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import { mockService } from '@jwp/ott-common/test/mockService';
+import { DEFAULT_FEATURES } from '@jwp/ott-common/src/constants';
+
+import { renderWithRouter } from '../../../test/utils';
+
+import UserMenuNav from './UserMenuNav';
+
+describe('<UserMenu>', () => {
+  beforeEach(() => {
+    // TODO: Remove AccountController from component
+    mockService(AccountController, { getFeatures: () => DEFAULT_FEATURES });
+  });
+
+  test('renders and matches snapshot', () => {
+    const { container } = renderWithRouter(<UserMenuNav focusable={true} showPaymentItems={true} />);
+
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/ui-react/src/components/UserMenuNav/UserMenuNav.tsx b/packages/ui-react/src/components/UserMenuNav/UserMenuNav.tsx
new file mode 100644
index 000000000..57b7f85f8
--- /dev/null
+++ b/packages/ui-react/src/components/UserMenuNav/UserMenuNav.tsx
@@ -0,0 +1,105 @@
+import React, { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import { getModule } from '@jwp/ott-common/src/modules/container';
+import AccountController from '@jwp/ott-common/src/controllers/AccountController';
+import AccountCircle from '@jwp/ott-theme/assets/icons/account_circle.svg?react';
+import Favorite from '@jwp/ott-theme/assets/icons/favorite.svg?react';
+import BalanceWallet from '@jwp/ott-theme/assets/icons/balance_wallet.svg?react';
+import Exit from '@jwp/ott-theme/assets/icons/exit.svg?react';
+import { userProfileURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import { PATH_USER_ACCOUNT, PATH_USER_FAVORITES, PATH_USER_PAYMENTS } from '@jwp/ott-common/src/paths';
+import type { Profile } from '@jwp/ott-common/types/profiles';
+
+import MenuButton from '../MenuButton/MenuButton';
+import Icon from '../Icon/Icon';
+import ProfileCircle from '../ProfileCircle/ProfileCircle';
+
+import styles from './UserMenuNav.module.scss';
+
+type Props = {
+  small?: boolean;
+  focusable: boolean;
+  showPaymentItems: boolean;
+  onButtonClick?: () => void;
+  titleId?: string;
+  currentProfile?: Profile | null;
+  favoritesEnabled?: boolean;
+};
+
+const UserMenuNav = ({ showPaymentItems, small = false, onButtonClick, currentProfile, favoritesEnabled, focusable, titleId }: Props) => {
+  const { t } = useTranslation('user');
+  const navigate = useNavigate();
+  const accountController = getModule(AccountController);
+  const tabIndex = focusable ? 0 : -1;
+
+  const onLogout = useCallback(async () => {
+    if (onButtonClick) {
+      onButtonClick();
+    }
+
+    await accountController.logout();
+    navigate('/', { replace: true });
+  }, [onButtonClick, navigate, accountController]);
+
+  return (
+    <>
+      <h2 className={styles.sectionHeader} id={titleId}>
+        {t('nav.settings')}
+      </h2>
+      <ul className={styles.menuItems}>
+        {currentProfile && (
+          <li>
+            <MenuButton
+              small={small}
+              onClick={onButtonClick}
+              to={userProfileURL(currentProfile.id ?? '')}
+              label={t('nav.profile')}
+              startIcon={<ProfileCircle src={currentProfile?.avatar_url} alt={currentProfile?.name ?? ''} />}
+            />
+          </li>
+        )}
+        <li>
+          <MenuButton
+            small={small}
+            onClick={onButtonClick}
+            to={PATH_USER_ACCOUNT}
+            label={t('nav.account')}
+            startIcon={<Icon icon={AccountCircle} />}
+            tabIndex={tabIndex}
+          />
+        </li>
+        {favoritesEnabled && (
+          <li>
+            <MenuButton
+              small={small}
+              onClick={onButtonClick}
+              to={PATH_USER_FAVORITES}
+              label={t('nav.favorites')}
+              startIcon={<Icon icon={Favorite} />}
+              tabIndex={tabIndex}
+            />
+          </li>
+        )}
+        {showPaymentItems && (
+          <li>
+            <MenuButton
+              small={small}
+              onClick={onButtonClick}
+              to={PATH_USER_PAYMENTS}
+              label={t('nav.payments')}
+              startIcon={<Icon icon={BalanceWallet} />}
+              tabIndex={tabIndex}
+            />
+          </li>
+        )}
+        <li className={classNames(styles.divider, { [styles.small]: small })}>
+          <MenuButton small={small} onClick={onLogout} label={t('nav.logout')} startIcon={<Icon icon={Exit} />} tabIndex={tabIndex} />
+        </li>
+      </ul>
+    </>
+  );
+};
+
+export default UserMenuNav;
diff --git a/packages/ui-react/src/components/UserMenuNav/__snapshots__/UserMenuNav.test.tsx.snap b/packages/ui-react/src/components/UserMenuNav/__snapshots__/UserMenuNav.test.tsx.snap
new file mode 100644
index 000000000..f0a3fdc77
--- /dev/null
+++ b/packages/ui-react/src/components/UserMenuNav/__snapshots__/UserMenuNav.test.tsx.snap
@@ -0,0 +1,92 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<UserMenu> > renders and matches snapshot 1`] = `
+<div>
+  <h2
+    class="_sectionHeader_e947a3"
+  >
+    nav.settings
+  </h2>
+  <ul
+    class="_menuItems_e947a3"
+  >
+    <li>
+      <a
+        class="_menuButton_91706b"
+        href="/u/my-account"
+        tabindex="0"
+      >
+        <div
+          class="_startIcon_91706b"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_585b29"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"
+            />
+          </svg>
+        </div>
+        <span>
+          nav.account
+        </span>
+      </a>
+    </li>
+    <li>
+      <a
+        class="_menuButton_91706b"
+        href="/u/payments"
+        tabindex="0"
+      >
+        <div
+          class="_startIcon_91706b"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_585b29"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5,3C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V16.72C21.59,16.37 22,15.74 22,15V9C22,8.26 21.59,7.63 21,7.28V5A2,2 0 0,0 19,3H5M5,5H19V7H13A2,2 0 0,0 11,9V15A2,2 0 0,0 13,17H19V19H5V5M13,9H20V15H13V9M16,10.5A1.5,1.5 0 0,0 14.5,12A1.5,1.5 0 0,0 16,13.5A1.5,1.5 0 0,0 17.5,12A1.5,1.5 0 0,0 16,10.5Z"
+            />
+          </svg>
+        </div>
+        <span>
+          nav.payments
+        </span>
+      </a>
+    </li>
+    <li
+      class="_divider_e947a3"
+    >
+      <div
+        class="_menuButton_91706b"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="_startIcon_91706b"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_585b29"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z"
+            />
+          </svg>
+        </div>
+        <span>
+          nav.logout
+        </span>
+      </div>
+    </li>
+  </ul>
+</div>
+`;
diff --git a/packages/ui-react/src/containers/HeaderLanguageSwitcher/HeaderLanguageSwitcher.tsx b/packages/ui-react/src/containers/HeaderLanguageSwitcher/HeaderLanguageSwitcher.tsx
new file mode 100644
index 000000000..1513d9089
--- /dev/null
+++ b/packages/ui-react/src/containers/HeaderLanguageSwitcher/HeaderLanguageSwitcher.tsx
@@ -0,0 +1,36 @@
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
+import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
+
+import LanguageMenu from '../../components/LanguageMenu/LanguageMenu';
+
+const HeaderLanguageSwitcher = () => {
+  const { i18n } = useTranslation('menu');
+  const supportedLanguages = useConfigStore((state) => state.supportedLanguages);
+  const languageMenuOpen = useUIStore((state) => state.languageMenuOpen);
+
+  const openLanguageMenu = useCallback(() => useUIStore.setState({ languageMenuOpen: true }), []);
+  const closeLanguageMenu = useCallback(() => useUIStore.setState({ languageMenuOpen: false }), []);
+
+  const languageClickHandler = (code: string) => {
+    i18n.changeLanguage(code);
+  };
+
+  const currentLanguage = useMemo(() => supportedLanguages.find(({ code }) => code === i18n.language), [i18n.language, supportedLanguages]);
+
+  if (supportedLanguages.length < 2) return null;
+
+  return (
+    <LanguageMenu
+      openLanguageMenu={openLanguageMenu}
+      closeLanguageMenu={closeLanguageMenu}
+      languageMenuOpen={languageMenuOpen}
+      onClick={languageClickHandler}
+      languages={supportedLanguages}
+      currentLanguage={currentLanguage}
+    />
+  );
+};
+
+export default HeaderLanguageSwitcher;
diff --git a/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.module.scss b/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.module.scss
new file mode 100644
index 000000000..ee12f170d
--- /dev/null
+++ b/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.module.scss
@@ -0,0 +1,22 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+@use '@jwp/ott-ui-react/src/styles/accessibility';
+@use '@jwp/ott-ui-react/src/styles/mixins/responsive';
+@use '@jwp/ott-ui-react/src/styles/mixins/utils';
+
+.searchContainer {
+  position: absolute;
+  left: -#{variables.$search-bar-width-desktop};
+  display: flex;
+  width: variables.$search-bar-width-desktop;
+
+  > div:first-child {
+    flex: 1;
+  }
+
+  @include responsive.mobile-and-tablet() {
+    right: 0;
+    left: 0;
+    width: auto;
+  }
+}
diff --git a/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.tsx b/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.tsx
new file mode 100644
index 000000000..18345c9c2
--- /dev/null
+++ b/packages/ui-react/src/containers/HeaderSearch/HeaderSearch.tsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
+import { shallow } from '@jwp/ott-common/src/utils/compare';
+import { isTruthyCustomParamValue } from '@jwp/ott-common/src/utils/common';
+import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
+import SearchIcon from '@jwp/ott-theme/assets/icons/search.svg?react';
+import CloseIcon from '@jwp/ott-theme/assets/icons/close.svg?react';
+
+import Icon from '../../components/Icon/Icon';
+import SearchBar from '../../components/SearchBar/SearchBar';
+import useSearchQueryUpdater from '../../hooks/useSearchQueryUpdater';
+import HeaderActionButton from '../../components/Header/HeaderActionButton';
+
+import styles from './HeaderSearch.module.scss';
+
+const HeaderSearch = () => {
+  const location = useLocation();
+  const searchInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;
+
+  const config = useConfigStore(({ config }) => config);
+  const { features, custom } = config;
+
+  const { searchPlaylist } = features || {};
+  const hasAppContentSearch = isTruthyCustomParamValue(custom?.appContentSearch);
+  const searchEnabled = !!searchPlaylist || hasAppContentSearch;
+
+  const { searchQuery, searchActive } = useUIStore(
+    ({ searchQuery, searchActive, userMenuOpen, languageMenuOpen }) => ({
+      languageMenuOpen,
+      searchQuery,
+      searchActive,
+      userMenuOpen,
+    }),
+    shallow,
+  );
+  const { updateSearchQuery, resetSearchQuery } = useSearchQueryUpdater();
+
+  const closeSearchButtonClickHandler = () => {
+    resetSearchQuery();
+
+    useUIStore.setState({
+      searchActive: false,
+    });
+  };
+
+  const searchButtonClickHandler = () => {
+    useUIStore.setState({
+      searchActive: true,
+      preSearchPage: `${location.pathname}${location.search || ''}`,
+    });
+  };
+
+  useEffect(() => {
+    if (searchActive && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [searchActive]);
+
+  if (!searchEnabled) return null;
+
+  return searchActive ? (
+    <div className={styles.searchContainer}>
+      <SearchBar
+        query={searchQuery}
+        onQueryChange={(event) => updateSearchQuery(event.target.value)}
+        onClearButtonClick={() => updateSearchQuery('')}
+        inputRef={searchInputRef}
+        onClose={closeSearchButtonClickHandler}
+      />
+      <HeaderActionButton aria-label="Close search" onClick={closeSearchButtonClickHandler}>
+        <Icon icon={CloseIcon} />
+      </HeaderActionButton>
+    </div>
+  ) : (
+    <HeaderActionButton aria-label="Open search" onClick={searchButtonClickHandler}>
+      <Icon icon={SearchIcon} />
+    </HeaderActionButton>
+  );
+};
+
+export default HeaderSearch;
diff --git a/packages/ui-react/src/containers/HeaderUserMenu/HeaderUserMenu.tsx b/packages/ui-react/src/containers/HeaderUserMenu/HeaderUserMenu.tsx
new file mode 100644
index 000000000..e474186ba
--- /dev/null
+++ b/packages/ui-react/src/containers/HeaderUserMenu/HeaderUserMenu.tsx
@@ -0,0 +1,70 @@
+import React, { useCallback } from 'react';
+import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
+import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
+import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
+import { useProfiles, useSelectProfile } from '@jwp/ott-hooks-react/src/useProfiles';
+import { PATH_HOME, PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
+import { useLocation, useNavigate } from 'react-router';
+import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
+
+import UserMenu from '../../components/UserMenu/UserMenu';
+import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
+import { modalURLFromLocation } from '../../utils/location';
+
+const HeaderUserMenu = () => {
+  const breakpoint = useBreakpoint();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const userMenuOpen = useUIStore((state) => state.userMenuOpen);
+  const {
+    config: { features },
+    accessModel,
+  } = useConfigStore((state) => ({
+    config: state.config,
+    accessModel: state.accessModel,
+  }));
+  const isLoggedIn = useAccountStore(({ user }) => !!user);
+  const { profile } = useProfileStore();
+
+  const {
+    query: { data: { collection: profiles = [] } = {} },
+    profilesEnabled,
+  } = useProfiles();
+
+  const selectProfile = useSelectProfile({
+    onSuccess: () => navigate(PATH_HOME),
+    onError: () => navigate(PATH_USER_PROFILES),
+  });
+
+  const favoritesEnabled = !!features?.favoritesList;
+  const canLogin = accessModel !== ACCESS_MODEL.AVOD;
+
+  const openUserPanel = useCallback(() => useUIStore.setState({ userMenuOpen: true }), []);
+  const closeUserPanel = useCallback(() => useUIStore.setState({ userMenuOpen: false }), []);
+
+  const loginButtonClickHandler = () => navigate(modalURLFromLocation(location, 'login'));
+  const signUpButtonClickHandler = () => navigate(modalURLFromLocation(location, 'create-account'));
+
+  if (!canLogin || breakpoint <= Breakpoint.sm) return null;
+
+  return (
+    <UserMenu
+      open={userMenuOpen}
+      onOpen={openUserPanel}
+      onClose={closeUserPanel}
+      isLoggedIn={isLoggedIn}
+      favoritesEnabled={favoritesEnabled}
+      onLoginButtonClick={loginButtonClickHandler}
+      onSignUpButtonClick={signUpButtonClickHandler}
+      profilesEnabled={profilesEnabled}
+      profile={profile}
+      profiles={profiles}
+      profileLoading={selectProfile.isLoading}
+      onSelectProfile={selectProfile.mutate}
+    />
+  );
+};
+
+export default HeaderUserMenu;
diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss
index 19d703a84..467b71faa 100644
--- a/packages/ui-react/src/containers/Layout/Layout.module.scss
+++ b/packages/ui-react/src/containers/Layout/Layout.module.scss
@@ -6,16 +6,6 @@
   z-index: 0;
 }
 
-.buttonContainer {
-  display: flex;
-  flex-direction: column;
-  padding: 0 variables.$base-spacing;
-
-  > button:first-child {
-    margin-bottom: calc(#{variables.$base-spacing} / 2);
-  }
-}
-
 .main {
   height: 100%;
 }
diff --git a/packages/ui-react/src/containers/Layout/Layout.tsx b/packages/ui-react/src/containers/Layout/Layout.tsx
index f4bba8739..c9876f230 100644
--- a/packages/ui-react/src/containers/Layout/Layout.tsx
+++ b/packages/ui-react/src/containers/Layout/Layout.tsx
@@ -1,224 +1,82 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Helmet } from 'react-helmet';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Outlet, useLocation, useNavigate } from 'react-router';
+import { Outlet } from 'react-router';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
-import { getModule } from '@jwp/ott-common/src/modules/container';
-import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
-import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
-import ProfileController from '@jwp/ott-common/src/controllers/ProfileController';
-import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
-import { isTruthyCustomParamValue, unicodeToChar } from '@jwp/ott-common/src/utils/common';
-import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
-import useSearchQueryUpdater from '@jwp/ott-ui-react/src/hooks/useSearchQueryUpdater';
-import { useProfiles, useSelectProfile } from '@jwp/ott-hooks-react/src/useProfiles';
-import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
-import { PATH_HOME, PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
+import { unicodeToChar } from '@jwp/ott-common/src/utils/common';
 import { playlistURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import env from '@jwp/ott-common/src/env';
+import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
 
 import Header from '../../components/Header/Header';
-import Sidebar from '../../components/Sidebar/Sidebar';
-import MenuButton from '../../components/MenuButton/MenuButton';
-import UserMenu from '../../components/UserMenu/UserMenu';
-import Button from '../../components/Button/Button';
 import Footer from '../../components/Footer/Footer';
+import HeaderMenu from '../../components/Header/HeaderMenu';
+import HeaderNavigation from '../../components/Header/HeaderNavigation';
+import HeaderBrand from '../../components/Header/HeaderBrand';
+import HeaderActions from '../../components/Header/HeaderActions';
+import HeaderSkipLink from '../../components/Header/HeaderSkipLink';
+import SidebarContainer from '../SidebarContainer/SidebarContainer';
+import SiteMetadata from '../SiteMetadata/SiteMetadata';
+import HeaderSearch from '../HeaderSearch/HeaderSearch';
+import HeaderLanguageSwitcher from '../HeaderLanguageSwitcher/HeaderLanguageSwitcher';
+import HeaderUserMenu from '../HeaderUserMenu/HeaderUserMenu';
 
 import styles from './Layout.module.scss';
 
 const Layout = () => {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { t, i18n } = useTranslation('common');
+  const { t } = useTranslation('common');
 
-  const { config, accessModel, supportedLanguages } = useConfigStore(
-    ({ config, accessModel, supportedLanguages }) => ({ config, accessModel, supportedLanguages }),
+  const { config } = useConfigStore(
+    ({ config, accessModel, supportedLanguages }) => ({
+      config,
+      accessModel,
+      supportedLanguages,
+    }),
     shallow,
   );
-  const userMenuTitleId = useOpaqueId('usermenu-title');
-  const isLoggedIn = !!useAccountStore(({ user }) => user);
-  const favoritesEnabled = !!config.features?.favoritesList;
-  const { menu, assets, siteName, description, features, styling, custom } = config;
-  const metaDescription = description || t('default_description');
+  const { menu, assets, siteName, styling } = config;
   const { footerText: configFooterText } = styling || {};
   const footerText = configFooterText || unicodeToChar(env.APP_FOOTER_TEXT);
 
-  const profileController = getModule(ProfileController, false);
-
-  const { searchPlaylist } = features || {};
-  const hasAppContentSearch = isTruthyCustomParamValue(custom?.appContentSearch);
-  const searchEnabled = !!searchPlaylist || hasAppContentSearch;
-
-  const currentLanguage = useMemo(() => supportedLanguages.find(({ code }) => code === i18n.language), [i18n.language, supportedLanguages]);
-
-  const {
-    query: { data: { collection: profiles = [] } = {} },
-    profilesEnabled,
-  } = useProfiles();
-
-  const selectProfile = useSelectProfile({
-    onSuccess: () => navigate(PATH_HOME),
-    onError: () => navigate(PATH_USER_PROFILES),
-  });
-
-  const { searchQuery, searchActive, userMenuOpen, languageMenuOpen } = useUIStore(
-    ({ searchQuery, searchActive, userMenuOpen, languageMenuOpen }) => ({
-      languageMenuOpen,
-      searchQuery,
-      searchActive,
-      userMenuOpen,
-    }),
-    shallow,
-  );
-  const { updateSearchQuery, resetSearchQuery } = useSearchQueryUpdater();
-  const { profile } = useProfileStore();
-
-  const searchInputRef = useRef<HTMLInputElement>(null) as React.MutableRefObject<HTMLInputElement>;
-
-  const [sideBarOpen, setSideBarOpen] = useState(false);
+  const { sideBarOpen, searchActive } = useUIStore((state) => ({
+    sideBarOpen: state.sideBarOpen,
+    searchActive: state.searchActive,
+  }));
   const banner = assets.banner;
-  const canLogin = accessModel !== ACCESS_MODEL.AVOD;
 
-  useEffect(() => {
-    if (isLoggedIn && profilesEnabled && !profiles?.length) {
-      profileController?.unpersistProfile();
-    }
-    // Trigger once on the initial page load
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    document.documentElement.setAttribute('lang', i18n.language);
-  }, [i18n.language]);
-
-  useEffect(() => {
-    if (searchActive && searchInputRef.current) {
-      searchInputRef.current.focus();
-    }
-  }, [searchActive]);
-
-  const searchButtonClickHandler = () => {
-    useUIStore.setState({
-      searchActive: true,
-      preSearchPage: `${location.pathname}${location.search || ''}`,
-    });
-  };
-
-  const closeSearchButtonClickHandler = () => {
-    resetSearchQuery();
-
-    useUIStore.setState({
-      searchActive: false,
-    });
-  };
-
-  const loginButtonClickHandler = () => {
-    navigate(modalURLFromLocation(location, 'login'));
-  };
-
-  const signUpButtonClickHandler = () => {
-    navigate(modalURLFromLocation(location, 'create-account'));
-  };
-
-  const languageClickHandler = async (code: string) => {
-    await i18n.changeLanguage(code);
-  };
-
-  // useCallbacks are used here to fix a bug in the Popover when using a Reactive onClose callback
-  const openUserPanel = useCallback(() => useUIStore.setState({ userMenuOpen: true }), []);
-  const closeUserPanel = useCallback(() => useUIStore.setState({ userMenuOpen: false }), []);
-  const openLanguageMenu = useCallback(() => useUIStore.setState({ languageMenuOpen: true }), []);
-  const closeLanguageMenu = useCallback(() => useUIStore.setState({ languageMenuOpen: false }), []);
-
-  const renderUserActions = (sideBarOpen: boolean) => {
-    if (!canLogin) return null;
-
-    return isLoggedIn ? (
-      <section aria-labelledby={userMenuTitleId}>
-        <UserMenu focusable={sideBarOpen} favoritesEnabled={favoritesEnabled} titleId={userMenuTitleId} showPaymentsItem />
-      </section>
-    ) : (
-      <div className={styles.buttonContainer}>
-        <Button tabIndex={sideBarOpen ? 0 : -1} onClick={loginButtonClickHandler} label={t('sign_in')} fullWidth />
-        <Button tabIndex={sideBarOpen ? 0 : -1} variant="contained" color="primary" onClick={signUpButtonClickHandler} label={t('sign_up')} fullWidth />
-      </div>
-    );
-  };
+  const openSideBar = () => useUIStore.setState({ sideBarOpen: true });
 
-  const navItems = [{ label: t('home'), to: '/' }, ...menu.map((item) => ({ label: item.label, to: playlistURL(item.contentId) }))];
+  const navItems = [
+    { label: t('home'), to: '/' },
+    ...menu.map((item) => ({
+      label: item.label,
+      to: playlistURL(item.contentId),
+    })),
+  ];
 
   const containerProps = { inert: sideBarOpen ? '' : undefined }; // inert is not yet officially supported in react
 
   return (
     <div className={styles.layout}>
-      <Helmet>
-        <title>{siteName}</title>
-        <meta name="description" content={metaDescription} />
-        <meta property="og:description" content={metaDescription} />
-        <meta property="og:title" content={siteName} />
-        <meta name="twitter:title" content={siteName} />
-        <meta name="twitter:description" content={metaDescription} />
-      </Helmet>
+      <SiteMetadata />
       <div {...containerProps}>
-        <Header
-          onMenuButtonClick={() => setSideBarOpen(true)}
-          logoSrc={banner}
-          searchEnabled={searchEnabled}
-          searchBarProps={{
-            query: searchQuery,
-            onQueryChange: (event) => updateSearchQuery(event.target.value),
-            onClearButtonClick: () => updateSearchQuery(''),
-            inputRef: searchInputRef,
-          }}
-          searchActive={searchActive}
-          onSearchButtonClick={searchButtonClickHandler}
-          onCloseSearchButtonClick={closeSearchButtonClickHandler}
-          onLoginButtonClick={loginButtonClickHandler}
-          onSignUpButtonClick={signUpButtonClickHandler}
-          onLanguageClick={languageClickHandler}
-          supportedLanguages={supportedLanguages}
-          currentLanguage={currentLanguage}
-          isLoggedIn={isLoggedIn}
-          sideBarOpen={sideBarOpen}
-          userMenuOpen={userMenuOpen}
-          languageMenuOpen={languageMenuOpen}
-          openUserPanel={openUserPanel}
-          closeUserPanel={closeUserPanel}
-          openLanguageMenu={openLanguageMenu}
-          closeLanguageMenu={closeLanguageMenu}
-          canLogin={canLogin}
-          showPaymentsMenuItem={accessModel !== ACCESS_MODEL.AVOD}
-          favoritesEnabled={favoritesEnabled}
-          siteName={siteName}
-          profilesData={{
-            currentProfile: profile,
-            profiles,
-            profilesEnabled,
-            selectProfile: ({ avatarUrl, id }) => selectProfile.mutate({ id, avatarUrl }),
-            isSelectingProfile: selectProfile.isLoading,
-          }}
-          navItems={navItems}
-        />
+        <Header searchActive={searchActive}>
+          <HeaderSkipLink />
+          <HeaderMenu sideBarOpen={sideBarOpen} onClick={openSideBar} />
+          <HeaderBrand siteName={siteName} logoSrc={banner} setLogoLoaded={() => undefined} />
+          <HeaderNavigation navItems={navItems} />
+          <HeaderActions>
+            <HeaderSearch />
+            <HeaderLanguageSwitcher />
+            <HeaderUserMenu />
+          </HeaderActions>
+        </Header>
         <main id="content" className={styles.main} tabIndex={-1}>
           <Outlet />
         </main>
         {!!footerText && <Footer text={footerText} />}
       </div>
-      <Sidebar isOpen={sideBarOpen} onClose={() => setSideBarOpen(false)}>
-        <ul>
-          <li>
-            <MenuButton label={t('home')} to="/" />
-          </li>
-          {menu.map((item) => (
-            <li key={item.contentId}>
-              <MenuButton label={item.label} to={playlistURL(item.contentId)} />
-            </li>
-          ))}
-        </ul>
-        {renderUserActions(sideBarOpen)}
-      </Sidebar>
+      <SidebarContainer />
     </div>
   );
 };
diff --git a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
index 9ce8ed38b..18b74e839 100644
--- a/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/packages/ui-react/src/containers/Layout/__snapshots__/Layout.test.tsx.snap
@@ -120,6 +120,9 @@ exports[`<Layout /> > renders layout 1`] = `
             </a>
           </li>
         </ul>
+        <hr
+          class="_separator_e15dbc"
+        />
       </nav>
     </div>
   </div>
diff --git a/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.module.scss b/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.module.scss
new file mode 100644
index 000000000..f126d5fb6
--- /dev/null
+++ b/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.module.scss
@@ -0,0 +1,20 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  padding: 0 variables.$base-spacing;
+
+  > button:first-child {
+    margin-bottom: calc(#{variables.$base-spacing} / 2);
+  }
+}
+
+.separator {
+  width: 100%;
+  height: 1px;
+  margin: 0;
+  background: rgba(variables.$white, 0.12);
+  border: none;
+}
diff --git a/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.tsx b/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.tsx
new file mode 100644
index 000000000..6f4377d6a
--- /dev/null
+++ b/packages/ui-react/src/containers/SidebarContainer/SidebarContainer.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { playlistURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import { useUIStore } from '@jwp/ott-common/src/stores/UIStore';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
+import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
+import { useLocation, useNavigate } from 'react-router';
+import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
+import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
+
+import Button from '../../components/Button/Button';
+import Sidebar from '../../components/Sidebar/Sidebar';
+import MenuButton from '../../components/MenuButton/MenuButton';
+import { modalURLFromLocation } from '../../utils/location';
+import UserMenuNav from '../../components/UserMenuNav/UserMenuNav';
+
+import styles from './SidebarContainer.module.scss';
+
+const SidebarUserActions = ({
+  sideBarOpen,
+  canLogin,
+  isLoggedIn,
+  favoritesEnabled,
+  onLoginClick,
+  onSignUpClick,
+}: {
+  sideBarOpen: boolean;
+  canLogin: boolean;
+  isLoggedIn: boolean;
+  favoritesEnabled: boolean;
+  onLoginClick: () => void;
+  onSignUpClick: () => void;
+}) => {
+  const { t } = useTranslation('menu');
+  const userMenuTitleId = useOpaqueId('usermenu-title');
+
+  if (!canLogin) return null;
+
+  return isLoggedIn ? (
+    <section aria-labelledby={userMenuTitleId}>
+      <UserMenuNav focusable={sideBarOpen} favoritesEnabled={favoritesEnabled} titleId={userMenuTitleId} showPaymentItems />
+    </section>
+  ) : (
+    <div className={styles.buttonContainer}>
+      <Button tabIndex={sideBarOpen ? 0 : -1} onClick={onLoginClick} label={t('sign_in')} fullWidth />
+      <Button tabIndex={sideBarOpen ? 0 : -1} variant="contained" color="primary" onClick={onSignUpClick} label={t('sign_up')} fullWidth />
+    </div>
+  );
+};
+
+const SidebarContainer = () => {
+  const { t } = useTranslation('common');
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const sideBarOpen = useUIStore((state) => state.sideBarOpen);
+  const {
+    config: { menu, features },
+    accessModel,
+  } = useConfigStore((state) => ({
+    config: state.config,
+    accessModel: state.accessModel,
+  }));
+  const isLoggedIn = useAccountStore(({ user }) => !!user);
+
+  const favoritesEnabled = !!features?.favoritesList;
+  const canLogin = accessModel !== ACCESS_MODEL.AVOD;
+
+  const closeSideBar = () => useUIStore.setState({ sideBarOpen: false });
+
+  const loginButtonClickHandler = () => {
+    navigate(modalURLFromLocation(location, 'login'));
+  };
+
+  const signUpButtonClickHandler = () => {
+    navigate(modalURLFromLocation(location, 'create-account'));
+  };
+
+  return (
+    <Sidebar isOpen={sideBarOpen} onClose={closeSideBar}>
+      <ul>
+        <li>
+          <MenuButton label={t('home')} to="/" />
+        </li>
+        {menu.map((item) => (
+          <li key={item.contentId}>
+            <MenuButton label={item.label} to={playlistURL(item.contentId)} />
+          </li>
+        ))}
+      </ul>
+      <hr className={styles.separator} />
+      <SidebarUserActions
+        sideBarOpen={sideBarOpen}
+        favoritesEnabled={favoritesEnabled}
+        canLogin={canLogin}
+        isLoggedIn={isLoggedIn}
+        onLoginClick={loginButtonClickHandler}
+        onSignUpClick={signUpButtonClickHandler}
+      />
+    </Sidebar>
+  );
+};
+
+export default SidebarContainer;
diff --git a/packages/ui-react/src/containers/SiteMetadata/SiteMetadata.tsx b/packages/ui-react/src/containers/SiteMetadata/SiteMetadata.tsx
new file mode 100644
index 000000000..f16eb9d42
--- /dev/null
+++ b/packages/ui-react/src/containers/SiteMetadata/SiteMetadata.tsx
@@ -0,0 +1,24 @@
+import { Helmet } from 'react-helmet';
+import React from 'react';
+import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
+import { shallow } from '@jwp/ott-common/src/utils/compare';
+import { useTranslation } from 'react-i18next';
+
+const SiteMetadata = () => {
+  const { t } = useTranslation('common');
+  const { siteName, description } = useConfigStore(({ config }) => config, shallow);
+  const metaDescription = description || t('default_description');
+
+  return (
+    <Helmet>
+      <title>{siteName}</title>
+      <meta name="description" content={metaDescription} />
+      <meta property="og:description" content={metaDescription} />
+      <meta property="og:title" content={siteName} />
+      <meta name="twitter:title" content={siteName} />
+      <meta name="twitter:description" content={metaDescription} />
+    </Helmet>
+  );
+};
+
+export default SiteMetadata;
diff --git a/platforms/web/package.json b/platforms/web/package.json
index 15420174b..ddd55da58 100644
--- a/platforms/web/package.json
+++ b/platforms/web/package.json
@@ -35,8 +35,7 @@
     "react-i18next": "^12.3.1",
     "react-router": "6.14.2",
     "react-router-dom": "6.14.2",
-    "wicg-inert": "^3.1.1",
-    "zustand": "^3.6.9"
+    "wicg-inert": "^3.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.22.11",
diff --git a/platforms/web/src/containers/AppRoutes/AppRoutes.tsx b/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
index e53461d92..1e5bd1bc6 100644
--- a/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
+++ b/platforms/web/src/containers/AppRoutes/AppRoutes.tsx
@@ -1,15 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
-import shallow from 'zustand/shallow';
-import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
-import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
-import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
-import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
-import { useProfiles } from '@jwp/ott-hooks-react/src/useProfiles';
+import { Route, Routes } from 'react-router-dom';
 import ErrorPage from '@jwp/ott-ui-react/src/components/ErrorPage/ErrorPage';
 import RootErrorPage from '@jwp/ott-ui-react/src/components/RootErrorPage/RootErrorPage';
-import LoadingOverlay from '@jwp/ott-ui-react/src/components/LoadingOverlay/LoadingOverlay';
 import About from '@jwp/ott-ui-react/src/pages/About/About';
 import Home from '@jwp/ott-ui-react/src/pages/Home/Home';
 import Search from '@jwp/ott-ui-react/src/pages/Search/Search';
@@ -26,71 +19,39 @@ import {
   PATH_LEGACY_SERIES,
   PATH_MEDIA,
   PATH_PLAYLIST,
+  PATH_SEARCH,
+  PATH_USER,
   PATH_USER_PROFILES,
   PATH_USER_PROFILES_CREATE,
   PATH_USER_PROFILES_EDIT,
   PATH_USER_PROFILES_EDIT_PROFILE,
-  PATH_SEARCH,
-  PATH_USER,
 } from '@jwp/ott-common/src/paths';
 
-import useNotifications from '#src/hooks/useNotifications';
+import RoutesContainer from '#src/containers/RoutesContainer/RoutesContainer';
 
 export default function AppRoutes() {
-  const location = useLocation();
-
   const { t } = useTranslation('error');
-  const userModal = useQueryParam('u');
-
-  const { accessModel } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
-  const user = useAccountStore(({ user }) => user, shallow);
-  const { profile, selectingProfileAvatar } = useProfileStore();
-  const { profilesEnabled } = useProfiles();
-
-  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user }));
-
-  // listen to websocket notifications
-  useNotifications();
-
-  if (userData.user && !userData.loading && location.hash.includes('#token')) {
-    // leave the location intact and only remove the token from the hash
-    return <Navigate to={{ ...location, hash: '' }} replace />; // component instead of hook to prevent extra re-renders
-  }
-
-  if (userData.user && selectingProfileAvatar !== null) {
-    return <LoadingOverlay profileImageUrl={selectingProfileAvatar || profile?.avatar_url} />;
-  }
-
-  const shouldManageProfiles =
-    !!user &&
-    profilesEnabled &&
-    !profile &&
-    (accessModel === 'SVOD' || accessModel === 'AUTHVOD') &&
-    !userModal &&
-    !location.pathname.includes(PATH_USER_PROFILES);
-
-  if (shouldManageProfiles) {
-    return <Navigate to={PATH_USER_PROFILES} />;
-  }
 
   return (
     <Routes>
-      <Route path={PATH_USER_PROFILES} element={<Profiles />} />
-      <Route path={PATH_USER_PROFILES_CREATE} element={<CreateProfile />} />
-      <Route path={PATH_USER_PROFILES_EDIT} element={<Profiles editMode />} />
-      <Route path={PATH_USER_PROFILES_EDIT_PROFILE} element={<EditProfile />} />
-      <Route element={<Layout />} errorElement={<RootErrorPage />}>
-        <Route index element={<Home />} />
-        <Route path={PATH_PLAYLIST} element={<PlaylistScreenRouter />} />
-        <Route path={PATH_MEDIA} element={<MediaScreenRouter />} />
-        <Route path={PATH_LEGACY_SERIES} element={<LegacySeries />} />
-        <Route path={PATH_SEARCH} element={<Search />} />
-        <Route path={PATH_USER} element={<User />} />
-        <Route path={PATH_ABOUT} element={<About />} />
-        <Route
-          path="/*"
-          element={<ErrorPage title={t('notfound_error_heading', 'Not found')} message={t('notfound_error_description', "This page doesn't exist.")} />}
-        />
+      <Route element={<RoutesContainer />}>
+        <Route path={PATH_USER_PROFILES} element={<Profiles />} />
+        <Route path={PATH_USER_PROFILES_CREATE} element={<CreateProfile />} />
+        <Route path={PATH_USER_PROFILES_EDIT} element={<Profiles editMode />} />
+        <Route path={PATH_USER_PROFILES_EDIT_PROFILE} element={<EditProfile />} />
+        <Route element={<Layout />} errorElement={<RootErrorPage />}>
+          <Route index element={<Home />} />
+          <Route path={PATH_PLAYLIST} element={<PlaylistScreenRouter />} />
+          <Route path={PATH_MEDIA} element={<MediaScreenRouter />} />
+          <Route path={PATH_LEGACY_SERIES} element={<LegacySeries />} />
+          <Route path={PATH_SEARCH} element={<Search />} />
+          <Route path={PATH_USER} element={<User />} />
+          <Route path={PATH_ABOUT} element={<About />} />
+          <Route
+            path="/*"
+            element={<ErrorPage title={t('notfound_error_heading', 'Not found')} message={t('notfound_error_description', "This page doesn't exist.")} />}
+          />
+        </Route>
       </Route>
     </Routes>
   );
diff --git a/platforms/web/src/containers/RoutesContainer/RoutesContainer.tsx b/platforms/web/src/containers/RoutesContainer/RoutesContainer.tsx
new file mode 100644
index 000000000..e9e67ac00
--- /dev/null
+++ b/platforms/web/src/containers/RoutesContainer/RoutesContainer.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { Outlet } from 'react-router';
+import { useTranslation } from 'react-i18next';
+import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
+import { useProfiles } from '@jwp/ott-hooks-react/src/useProfiles';
+import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
+import { PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
+import { shallow } from '@jwp/ott-common/src/utils/compare';
+import LoadingOverlay from '@jwp/ott-ui-react/src/components/LoadingOverlay/LoadingOverlay';
+import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
+
+import useNotifications from '#src/hooks/useNotifications';
+
+const RoutesContainer = () => {
+  const { i18n } = useTranslation();
+  const location = useLocation();
+  const userModal = useQueryParam('u');
+
+  const { profile, selectingProfileAvatar } = useProfileStore();
+  const { shouldManageProfiles } = useProfiles();
+
+  const userData = useAccountStore((s) => ({ loading: s.loading, user: s.user }), shallow);
+
+  // listen to websocket notifications
+  useNotifications();
+
+  // set/update lang html lang attribute
+  useEffect(() => {
+    document.documentElement.setAttribute('lang', i18n.language);
+  }, [i18n.language]);
+
+  // used for social logins
+  // @todo should users be redirected away from a page after login?
+  if (userData.user && !userData.loading && window.location.href.includes('#token')) {
+    return <Navigate to={{ ...location, hash: '' }} replace />; // component instead of hook to prevent extra re-renders
+  }
+
+  // show a loading overlay when a profile is loading
+  if (userData.user && selectingProfileAvatar !== null) {
+    return <LoadingOverlay profileImageUrl={selectingProfileAvatar || profile?.avatar_url} />;
+  }
+
+  // the user must choose a profile first
+  if (shouldManageProfiles && !location.pathname.includes(PATH_USER_PROFILES) && !userModal) {
+    return <Navigate to={PATH_USER_PROFILES} />;
+  }
+
+  return <Outlet />;
+};
+
+export default RoutesContainer;

From 7acf234446d8dc62e3f43b13f49c3b2ad3c72a8a Mon Sep 17 00:00:00 2001
From: Mike van Veenhuijzen <mike@videodock.com>
Date: Wed, 17 Apr 2024 14:43:30 +0200
Subject: [PATCH 125/128] fix(project): favicon paths

---
 platforms/web/scripts/build-tools/buildTools.ts |  4 ++--
 platforms/web/test-e2e/tests/seo_test.ts        | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/platforms/web/scripts/build-tools/buildTools.ts b/platforms/web/scripts/build-tools/buildTools.ts
index 4a5d4f25c..3df535c96 100644
--- a/platforms/web/scripts/build-tools/buildTools.ts
+++ b/platforms/web/scripts/build-tools/buildTools.ts
@@ -82,10 +82,10 @@ export const getGoogleFontTags = (fonts: ExternalFont[]): HtmlTagDescriptor[] =>
 
 export const generateIconTags = (basePath: string, favIconSizes: number[], appleIconSizes: number[]) => {
   const favIconTags = favIconSizes.map((size) => {
-    return `<link rel="icon" type="image/png" sizes="${size}x${size}" href="${basePath}/favicon-${size}x${size}.png">`;
+    return `<link rel="icon" type="image/png" sizes="${size}x${size}" href="${basePath}pwa-${size}x${size}.png">`;
   });
   const appleIconTags = appleIconSizes.map((size) => {
-    return `<link rel="apple-touch-icon" href="${basePath}/apple-touch-icon-${size}x${size}.png">`;
+    return `<link rel="apple-touch-icon" href="${basePath}apple-touch-icon-${size}x${size}.png">`;
   });
   return [...favIconTags, ...appleIconTags].join('\n');
 };
diff --git a/platforms/web/test-e2e/tests/seo_test.ts b/platforms/web/test-e2e/tests/seo_test.ts
index c092ea437..e5cec1539 100644
--- a/platforms/web/test-e2e/tests/seo_test.ts
+++ b/platforms/web/test-e2e/tests/seo_test.ts
@@ -1,5 +1,7 @@
 import { testConfigs } from '@jwp/ott-testing/constants';
 
+import { favIconSizes, appleIconSizes } from './../../pwa-assets.config';
+
 import constants from '#utils/constants';
 
 Feature('seo').retry(Number(process.env.TEST_RETRY_COUNT) || 0);
@@ -8,6 +10,18 @@ Before(({ I }) => {
   I.useConfig(testConfigs.basicNoAuth);
 });
 
+Scenario('It renders all favicons correcty', ({ I }) => {
+  I.seeAttributesOnElements('link[sizes="any"]', { href: `${constants.baseUrl}images/icons/favicon.ico`, rel: 'icon', type: 'image/x-icon' });
+  for (const size of favIconSizes) {
+    const sizes = `${size}x${size}`;
+    I.seeAttributesOnElements(`link[sizes="${sizes}"]`, { href: `${constants.baseUrl}images/icons/pwa-${sizes}.png`, rel: 'icon', type: 'image/png' });
+  }
+  for (const size of appleIconSizes) {
+    const sizes = `${size}x${size}`;
+    I.seeElementInDOM(`link[rel="apple-touch-icon"][href="/images/icons/apple-touch-icon-${sizes}.png"]`);
+  }
+});
+
 Scenario('It renders the correct meta tags for the home screen', ({ I }) => {
   I.seeTitleEquals('JW OTT Web App');
 

From ba253088dbb679ddb36663cb88a7c9c731bb999d Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Tue, 13 Feb 2024 13:43:28 +0100
Subject: [PATCH 126/128] refactor(project): form fields and control elements

---
 packages/common/types/form.d.ts               |   4 +-
 .../src/components/Account/Account.tsx        |   7 +-
 .../__snapshots__/Account.test.tsx.snap       |  32 +-
 .../src/components/Checkbox/Checkbox.test.tsx |  18 -
 .../src/components/Checkbox/Checkbox.tsx      |  61 --
 .../__snapshots__/CheckoutForm.test.tsx.snap  |  56 +-
 .../CustomRegisterField.tsx                   |  26 +-
 .../CustomRegisterField.test.tsx.snap         | 136 ++---
 .../DateField/DateField.module.scss           | 105 ----
 .../DeleteAccountModal/DeleteAccountModal.tsx |   2 +-
 .../DevConfigSelector/DevConfigSelector.tsx   |   4 +-
 .../src/components/Dropdown/Dropdown.tsx      |  97 ----
 .../EditCardPaymentForm.tsx                   |   8 +-
 .../EditPasswordForm/EditPasswordForm.tsx     |   5 +-
 .../EditPasswordForm.test.tsx.snap            |  38 +-
 .../ui-react/src/components/Filter/Filter.tsx |   5 +-
 .../FinalizePayment/FinalizePayment.tsx       |   2 +-
 .../ForgotPasswordForm/ForgotPasswordForm.tsx |   4 +-
 .../ForgotPasswordForm.test.tsx.snap          |  14 +-
 .../FormField/FormField.module.scss           |  22 +
 .../src/components/FormField/FormField.tsx    |  41 ++
 .../Input.module.scss}                        |  64 +-
 .../ui-react/src/components/Input/Input.tsx   |  98 ++++
 .../components/LoginForm/LoginForm.test.tsx   |   8 +-
 .../src/components/LoginForm/LoginForm.tsx    |   2 +-
 .../__snapshots__/LoginForm.test.tsx.snap     |  30 +-
 .../components/OfferSwitch/OfferSwitch.tsx    |   2 +-
 .../src/components/Payment/Payment.tsx        |   2 +-
 .../__snapshots__/Payment.test.tsx.snap       |  21 +-
 .../components/PaymentForm/PaymentForm.tsx    |   8 +-
 .../PersonalDetailsForm.tsx                   |  20 +-
 .../PersonalDetailsForm.test.tsx.snap         | 548 +++++++++++-------
 .../ui-react/src/components/Radio/Radio.tsx   |  54 --
 .../RegistrationForm/RegistrationForm.tsx     |  25 +-
 .../RegistrationForm.test.tsx.snap            |  36 +-
 .../Select.module.scss}                       | 103 ++--
 .../ui-react/src/components/Select/Select.tsx |  93 +++
 .../Checkbox/Checkbox.module.scss             |  27 +-
 .../form-fields/Checkbox/Checkbox.test.tsx    |  24 +
 .../form-fields/Checkbox/Checkbox.tsx         |  71 +++
 .../__snapshots__/Checkbox.test.tsx.snap      |  11 +-
 .../CreditCardCVCField.test.tsx               |   0
 .../CreditCardCVCField/CreditCardCVCField.tsx |   0
 .../CreditCardCVCField.test.tsx.snap          |  14 +-
 .../CreditCardExpiryField.test.tsx            |   0
 .../CreditCardExpiryField.tsx                 |   0
 .../CreditCardExpiryField.test.tsx.snap       |  14 +-
 .../CreditCardNumberField.module.scss         |   0
 .../CreditCardNumberField.test.tsx            |   0
 .../CreditCardNumberField.tsx                 |   0
 .../CreditCardNumberField.test.tsx.snap       |  14 +-
 .../DateField/DateField.module.scss           |  64 ++
 .../{ => form-fields}/DateField/DateField.tsx | 205 ++++---
 .../Dropdown/Dropdown.test.tsx                |   0
 .../form-fields/Dropdown/Dropdown.tsx         |  46 ++
 .../PasswordField/PasswordField.test.tsx      |   0
 .../PasswordField/PasswordField.tsx           |  25 +-
 .../__snapshots__/PasswordField.test.tsx.snap |  16 +-
 .../{ => form-fields}/Radio/Radio.module.scss |  33 +-
 .../{ => form-fields}/Radio/Radio.test.tsx    |   2 +-
 .../components/form-fields/Radio/Radio.tsx    |  56 ++
 .../Radio/__snapshots__/Radio.test.tsx.snap   |  75 +++
 .../TextField/TextField.module.scss           |   7 +
 .../TextField/TextField.test.tsx              |   0
 .../form-fields/TextField/TextField.tsx       |  35 ++
 .../__snapshots__/TextField.test.tsx.snap     |  48 +-
 .../ui-react/src/containers/Profiles/Form.tsx |   6 +-
 packages/ui-react/src/pages/Home/Home.tsx     |   2 -
 .../User/__snapshots__/User.test.tsx.snap     |  42 +-
 packages/ui-react/src/types/form.ts           |  15 +
 .../DemoConfigDialog/DemoConfigDialog.tsx     |   2 +-
 .../DemoConfigDialog.test.tsx.snap            |  11 +-
 72 files changed, 1526 insertions(+), 1140 deletions(-)
 delete mode 100644 packages/ui-react/src/components/Checkbox/Checkbox.test.tsx
 delete mode 100644 packages/ui-react/src/components/Checkbox/Checkbox.tsx
 delete mode 100644 packages/ui-react/src/components/DateField/DateField.module.scss
 delete mode 100644 packages/ui-react/src/components/Dropdown/Dropdown.tsx
 create mode 100644 packages/ui-react/src/components/FormField/FormField.module.scss
 create mode 100644 packages/ui-react/src/components/FormField/FormField.tsx
 rename packages/ui-react/src/components/{TextField/TextField.module.scss => Input/Input.module.scss} (64%)
 create mode 100644 packages/ui-react/src/components/Input/Input.tsx
 delete mode 100644 packages/ui-react/src/components/Radio/Radio.tsx
 rename packages/ui-react/src/components/{Dropdown/Dropdown.module.scss => Select/Select.module.scss} (55%)
 create mode 100644 packages/ui-react/src/components/Select/Select.tsx
 rename packages/ui-react/src/components/{ => form-fields}/Checkbox/Checkbox.module.scss (81%)
 create mode 100644 packages/ui-react/src/components/form-fields/Checkbox/Checkbox.test.tsx
 create mode 100644 packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
 rename packages/ui-react/src/components/{ => form-fields}/Checkbox/__snapshots__/Checkbox.test.tsx.snap (67%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardCVCField/CreditCardCVCField.test.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardCVCField/CreditCardCVCField.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap (70%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardExpiryField/CreditCardExpiryField.test.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardExpiryField/CreditCardExpiryField.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap (69%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardNumberField/CreditCardNumberField.module.scss (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardNumberField/CreditCardNumberField.test.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardNumberField/CreditCardNumberField.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap (69%)
 create mode 100644 packages/ui-react/src/components/form-fields/DateField/DateField.module.scss
 rename packages/ui-react/src/components/{ => form-fields}/DateField/DateField.tsx (50%)
 rename packages/ui-react/src/components/{ => form-fields}/Dropdown/Dropdown.test.tsx (100%)
 create mode 100644 packages/ui-react/src/components/form-fields/Dropdown/Dropdown.tsx
 rename packages/ui-react/src/components/{ => form-fields}/PasswordField/PasswordField.test.tsx (100%)
 rename packages/ui-react/src/components/{ => form-fields}/PasswordField/PasswordField.tsx (70%)
 rename packages/ui-react/src/components/{ => form-fields}/PasswordField/__snapshots__/PasswordField.test.tsx.snap (85%)
 rename packages/ui-react/src/components/{ => form-fields}/Radio/Radio.module.scss (77%)
 rename packages/ui-react/src/components/{ => form-fields}/Radio/Radio.test.tsx (94%)
 create mode 100644 packages/ui-react/src/components/form-fields/Radio/Radio.tsx
 create mode 100644 packages/ui-react/src/components/form-fields/Radio/__snapshots__/Radio.test.tsx.snap
 create mode 100644 packages/ui-react/src/components/form-fields/TextField/TextField.module.scss
 rename packages/ui-react/src/components/{ => form-fields}/TextField/TextField.test.tsx (100%)
 create mode 100644 packages/ui-react/src/components/form-fields/TextField/TextField.tsx
 rename packages/ui-react/src/components/{ => form-fields}/TextField/__snapshots__/TextField.test.tsx.snap (72%)
 create mode 100644 packages/ui-react/src/types/form.ts

diff --git a/packages/common/types/form.d.ts b/packages/common/types/form.d.ts
index f4616910b..336d1270f 100644
--- a/packages/common/types/form.d.ts
+++ b/packages/common/types/form.d.ts
@@ -1,5 +1,5 @@
-export type UseFormChangeHandler = React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-export type UseFormBlurHandler = React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+export type UseFormChangeHandler = React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+export type UseFormBlurHandler = React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
 export type UseFormSubmitHandler = React.FormEventHandler<HTMLFormElement>;
 
 export type GenericFormErrors = { form: string };
diff --git a/packages/ui-react/src/components/Account/Account.tsx b/packages/ui-react/src/components/Account/Account.tsx
index 94b61e2c7..9752b12f9 100644
--- a/packages/ui-react/src/components/Account/Account.tsx
+++ b/packages/ui-react/src/components/Account/Account.tsx
@@ -20,9 +20,9 @@ import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
 import Form from '../Form/Form';
 import IconButton from '../IconButton/IconButton';
-import TextField from '../TextField/TextField';
-import Checkbox from '../Checkbox/Checkbox';
 import FormFeedback from '../FormFeedback/FormFeedback';
+import TextField from '../form-fields/TextField/TextField';
+import Checkbox from '../form-fields/Checkbox/Checkbox';
 import CustomRegisterField from '../CustomRegisterField/CustomRegisterField';
 import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
@@ -351,8 +351,9 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }
                     name={`consentsValues.${consent.name}`}
                     checked={isTruthyCustomParamValue(section.values.consentsValues?.[consent.name])}
                     onChange={section.onChange}
-                    label={formatConsentLabel(consent.label)}
+                    checkboxLabel={formatConsentLabel(consent.label)}
                     disabled={consent.required || section.isBusy}
+                    required={consent.required}
                     lang={htmlLang}
                   />
                 ))}
diff --git a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
index 624a6df72..25c330d33 100644
--- a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
+++ b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -25,10 +25,10 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       novalidate=""
     >
       <div
-        class="_textField_e16c1b"
+        class="_formField_86f2f5 _textField_c799b0"
       >
         <label
-          class="_label_e16c1b"
+          class="_label_86f2f5"
           for="text-field_1235_firstname"
         >
           account.firstname
@@ -36,8 +36,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_firstname"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="given-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_firstname"
           lang="en"
           name="firstName"
@@ -47,10 +48,10 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         />
       </div>
       <div
-        class="_textField_e16c1b"
+        class="_formField_86f2f5 _textField_c799b0"
       >
         <label
-          class="_label_e16c1b"
+          class="_label_86f2f5"
           for="text-field_1235_lastname"
         >
           account.lastname
@@ -58,8 +59,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_lastname"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="family-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_lastname"
           lang="en"
           name="lastName"
@@ -100,10 +102,10 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       novalidate=""
     >
       <div
-        class="_textField_e16c1b"
+        class="_formField_86f2f5 _textField_c799b0"
       >
         <label
-          class="_label_e16c1b"
+          class="_label_86f2f5"
           for="text-field_1235_email"
         >
           account.email
@@ -111,8 +113,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="email"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_email"
           name="email"
           readonly=""
@@ -183,25 +186,22 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       novalidate=""
     >
       <div
-        class="_checkbox_531f07"
+        class="_formField_86f2f5 _checkbox_a98c3a"
       >
         <div
-          class="_row_531f07"
+          class="_row_a98c3a"
         >
           <input
             aria-describedby="helper_text_1235_consentsvalues_marketing"
-            id="check-box_1235_consentsvalues_marketing"
+            id="text-field_1235_consentsvalues_marketing"
             name="consentsValues.marketing"
             type="checkbox"
             value=""
           />
           <label
-            for="check-box_1235_consentsvalues_marketing"
+            for="text-field_1235_consentsvalues_marketing"
             lang="en"
           >
-            <span
-              aria-hidden="true"
-            />
             Receive Marketing Emails
           </label>
         </div>
diff --git a/packages/ui-react/src/components/Checkbox/Checkbox.test.tsx b/packages/ui-react/src/components/Checkbox/Checkbox.test.tsx
deleted file mode 100644
index 3bd4cf316..000000000
--- a/packages/ui-react/src/components/Checkbox/Checkbox.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Checkbox from './Checkbox';
-
-describe('<Checkbox>', () => {
-  test('renders and matches snapshot', () => {
-    const { container } = render(<Checkbox label="label" name="name" value="value" onChange={vi.fn()} />);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('should set the checked state', () => {
-    const { getByLabelText } = render(<Checkbox label="label" name="name" value="value" checked={true} onChange={vi.fn()} />);
-
-    expect(getByLabelText('label')).toBeChecked();
-  });
-});
diff --git a/packages/ui-react/src/components/Checkbox/Checkbox.tsx b/packages/ui-react/src/components/Checkbox/Checkbox.tsx
deleted file mode 100644
index 2b07b3933..000000000
--- a/packages/ui-react/src/components/Checkbox/Checkbox.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { type ReactNode } from 'react';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
-
-import HelperText from '../HelperText/HelperText';
-
-import styles from './Checkbox.module.scss';
-
-type Props = {
-  label?: ReactNode;
-  name: string;
-  value?: string;
-  checked?: boolean;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
-  header?: string;
-  error?: boolean;
-  helperText?: string;
-  disabled?: boolean;
-  required?: boolean;
-  lang?: string;
-};
-
-const Checkbox: React.FC<Props> = ({ label, name, onChange, header, checked, value, helperText, disabled, error, required, lang, ...rest }: Props) => {
-  const { t } = useTranslation('common');
-  const id = useOpaqueId('check-box', name);
-  const helperTextId = useOpaqueId('helper_text', name);
-
-  return (
-    <div className={classNames(styles.checkbox, { [styles.error]: error })} {...rest}>
-      {header ? (
-        <div className={styles.header}>
-          {header}
-          {!required ? <span>{t('optional')}</span> : null}
-        </div>
-      ) : null}
-      <div className={styles.row}>
-        <input
-          name={name}
-          type="checkbox"
-          id={id}
-          value={value}
-          onChange={onChange}
-          checked={checked}
-          disabled={disabled}
-          aria-required={required}
-          aria-describedby={helperTextId}
-        />
-        <label htmlFor={id} lang={lang}>
-          <span aria-hidden="true">{required ? '* ' : ''}</span>
-          {label}
-        </label>
-      </div>
-      <HelperText id={helperTextId} error={error} className={error ? styles.helperTextError : undefined}>
-        {helperText}
-      </HelperText>
-    </div>
-  );
-};
-
-export default Checkbox;
diff --git a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
index 68dd32a08..ca30638db 100644
--- a/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
+++ b/packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap
@@ -85,22 +85,28 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
         >
           <div>
             <div
-              class="_textField_e16c1b"
+              class="_formField_86f2f5 _textField_c799b0"
             >
               <label
-                class="_label_e16c1b"
+                class="_label_86f2f5"
                 for="text-field_1235_cardholdername"
               >
                 checkout.card_holder_name
+                <span
+                  aria-hidden="true"
+                >
+                  *
+                </span>
               </label>
               <div
-                class="_container_e16c1b"
+                class="_container_859b20"
               >
                 <input
                   aria-describedby="helper_text_1235_cardholdername"
                   aria-invalid="false"
+                  aria-required="true"
                   autocomplete="cc-name"
-                  class="_input_e16c1b"
+                  class="_input_859b20"
                   id="text-field_1235_cardholdername"
                   name="cardholderName"
                   placeholder="checkout.credit_card_name"
@@ -113,22 +119,28 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
           </div>
           <div>
             <div
-              class="_textField_e16c1b directPostCreditCardNumber"
+              class="_formField_86f2f5 _textField_c799b0 directPostCreditCardNumber"
             >
               <label
-                class="_label_e16c1b"
+                class="_label_86f2f5"
                 for="text-field_1235_cardnumber"
               >
                 Card number
+                <span
+                  aria-hidden="true"
+                >
+                  *
+                </span>
               </label>
               <div
-                class="_container_e16c1b"
+                class="_container_859b20"
               >
                 <input
                   aria-describedby="helper_text_1235_cardnumber"
                   aria-invalid="false"
+                  aria-required="true"
                   autocomplete="cc-number"
-                  class="_input_e16c1b"
+                  class="_input_859b20"
                   id="text-field_1235_cardnumber"
                   name="cardNumber"
                   pattern="\\d*"
@@ -145,22 +157,28 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
           >
             <div>
               <div
-                class="_textField_e16c1b directPostExpiryDate"
+                class="_formField_86f2f5 _textField_c799b0 directPostExpiryDate"
               >
                 <label
-                  class="_label_e16c1b"
+                  class="_label_86f2f5"
                   for="text-field_1235_cardexpiry"
                 >
                   Expiry date
+                  <span
+                    aria-hidden="true"
+                  >
+                    *
+                  </span>
                 </label>
                 <div
-                  class="_container_e16c1b"
+                  class="_container_859b20"
                 >
                   <input
                     aria-describedby="helper_text_1235_cardexpiry"
                     aria-invalid="false"
+                    aria-required="true"
                     autocomplete="cc-exp"
-                    class="_input_e16c1b"
+                    class="_input_859b20"
                     id="text-field_1235_cardexpiry"
                     name="cardExpiry"
                     pattern="\\d*"
@@ -174,23 +192,29 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
             </div>
             <div>
               <div
-                class="_textField_e16c1b directPostSecurityCode"
+                class="_formField_86f2f5 _textField_c799b0 directPostSecurityCode"
               >
                 <label
-                  class="_label_e16c1b"
+                  class="_label_86f2f5"
                   for="text-field_1235_cardcvc"
                 >
                   payment.security_code
+                  <span
+                    aria-hidden="true"
+                  >
+                    *
+                  </span>
                 </label>
                 <div
-                  class="_container_e16c1b"
+                  class="_container_859b20"
                 >
                   <input
                     aria-describedby="helper_text_1235_cardcvc"
                     aria-invalid="false"
                     aria-label="payment.security_code"
+                    aria-required="true"
                     autocomplete="cc-csc"
-                    class="_input_e16c1b"
+                    class="_input_859b20"
                     id="text-field_1235_cardcvc"
                     name="cardCVC"
                     pattern="\\d*"
diff --git a/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx b/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx
index 204cd417b..5bcb0916d 100644
--- a/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx
+++ b/packages/ui-react/src/components/CustomRegisterField/CustomRegisterField.tsx
@@ -4,17 +4,17 @@ import type { RegisterFieldOptions } from '@inplayer-org/inplayer.js';
 import type { CustomRegisterFieldVariant } from '@jwp/ott-common/types/account';
 import { isTruthyCustomParamValue, testId } from '@jwp/ott-common/src/utils/common';
 
-import Checkbox from '../Checkbox/Checkbox';
-import TextField from '../TextField/TextField';
-import Radio from '../Radio/Radio';
-import Dropdown from '../Dropdown/Dropdown';
-import DateField from '../DateField/DateField';
+import Checkbox from '../form-fields/Checkbox/Checkbox';
+import TextField from '../form-fields/TextField/TextField';
+import Radio from '../form-fields/Radio/Radio';
+import Dropdown from '../form-fields/Dropdown/Dropdown';
+import DateField from '../form-fields/DateField/DateField';
 
 export type CustomRegisterFieldCommonProps = {
   type?: CustomRegisterFieldVariant;
   name: string;
   value: string | boolean;
-  onChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onChange: ChangeEventHandler;
 } & Partial<{
   label: ReactNode;
   placeholder: string;
@@ -27,7 +27,7 @@ export type CustomRegisterFieldCommonProps = {
   lang: string;
 }>;
 
-const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value = '', options, editing, lang, ...props }) => {
+const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value = '', label, options, editing, lang, ...props }) => {
   const { t, i18n } = useTranslation();
 
   const optionsList = useMemo(() => {
@@ -49,9 +49,9 @@ const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value =
 
   switch (type) {
     case 'input':
-      return <TextField {...props} value={value as string} testId={testId(`crf-${type}`)} />;
+      return <TextField {...props} value={String(value)} label={label} testId={testId(`crf-${type}`)} />;
     case 'radio':
-      return <Radio {...props} values={optionsList} value={value as string} header={props.label} data-testid={testId(`crf-${type}`)} lang={lang} />;
+      return <Radio {...props} label={label} values={optionsList} value={String(value)} data-testid={testId(`crf-${type}`)} lang={lang} />;
     case 'select':
     case 'country':
     case 'us_state':
@@ -59,17 +59,17 @@ const CustomRegisterField: FC<CustomRegisterFieldCommonProps> = ({ type, value =
         <Dropdown
           {...props}
           options={optionsList}
-          value={value as string}
+          value={String(value)}
+          label={label}
           defaultLabel={props.placeholder}
-          fullWidth
           testId={testId(`crf-${type}`)}
           lang={lang}
         />
       );
     case 'datepicker':
-      return <DateField {...props} value={value as string} testId={testId(`crf-${type}`)} />;
+      return <DateField {...props} value={String(value)} label={label} testId={testId(`crf-${type}`)} />;
     default:
-      return <Checkbox {...props} checked={isTruthyCustomParamValue(value)} data-testid={testId(`crf-${type}`)} lang={lang} />;
+      return <Checkbox {...props} checkboxLabel={label} checked={isTruthyCustomParamValue(value)} data-testid={testId(`crf-${type}`)} lang={lang} />;
   }
 };
 
diff --git a/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap b/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
index d514ad065..4e8facf32 100644
--- a/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
+++ b/packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
@@ -3,25 +3,22 @@
 exports[`<CustomRegisterField> > renders and matches snapshot <Checkbox> 1`] = `
 <div>
   <div
-    class="_checkbox_531f07"
-    data-testid="crf-checkbox"
+    class="_formField_86f2f5 _checkbox_a98c3a"
   >
     <div
-      class="_row_531f07"
+      class="_row_a98c3a"
     >
       <input
         aria-describedby="helper_text_1235_name"
-        id="check-box_1235_name"
+        data-testid="crf-checkbox"
+        id="text-field_1235_name"
         name="name"
         type="checkbox"
         value=""
       />
       <label
-        for="check-box_1235_name"
+        for="text-field_1235_name"
       >
-        <span
-          aria-hidden="true"
-        />
         label
       </label>
     </div>
@@ -32,42 +29,40 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Checkbox> 1`] = `
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="country"> 1`] = `
 <div>
   <div
-    class="_container_bb73c6 _fullWidth_bb73c6 _medium_bb73c6"
+    class="_formField_86f2f5"
     data-testid="crf-country"
   >
     <label
-      class="_label_bb73c6"
-      for="1235"
+      class="_label_86f2f5"
+      for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_dropdown_bb73c6 _fullWidth_bb73c6"
+      class="_container_d97916"
     >
       <select
         aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
         aria-required="false"
-        class="_select_bb73c6"
-        id="1235"
+        class="_select_d97916"
+        id="text-field_1235_name"
         name="name"
       >
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="af"
         >
           country:af
         </option>
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="ax"
         >
           country:ax
         </option>
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="al"
         >
           country:al
@@ -81,31 +76,27 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="co
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="datepicker"> 1`] = `
 <div>
   <div
-    class="_dateField_eb6974"
+    class="_formField_86f2f5 _dateField_0addad"
     data-testid="crf-datepicker"
-    id="text-field_1235_name"
   >
     <label
-      class="_label_eb6974"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_eb6974"
+      class="_container_0addad"
     >
       <input
         aria-describedby="helper_text_1235_name"
-        class="_hiddenInput_eb6974"
+        class="_hiddenInput_0addad"
         id="text-field_1235_name-hidden"
         name="name"
       />
       <input
         autocomplete="bday-day"
-        class="_input_eb6974"
+        class="_input_0addad"
         id="text-field_1235_name-date"
         maxlength="2"
         name="date"
@@ -116,7 +107,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
        / 
       <input
         autocomplete="bday-month"
-        class="_input_eb6974"
+        class="_input_0addad"
         id="text-field_1235_name-month"
         maxlength="2"
         name="month"
@@ -127,7 +118,7 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
        / 
       <input
         autocomplete="bday-year"
-        class="_input_eb6974"
+        class="_input_0addad"
         id="text-field_1235_name-year"
         maxlength="4"
         name="year"
@@ -143,25 +134,22 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="da
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="randomstring"> 1`] = `
 <div>
   <div
-    class="_checkbox_531f07"
-    data-testid="crf-randomstring"
+    class="_formField_86f2f5 _checkbox_a98c3a"
   >
     <div
-      class="_row_531f07"
+      class="_row_a98c3a"
     >
       <input
         aria-describedby="helper_text_1235_name"
-        id="check-box_1235_name"
+        data-testid="crf-randomstring"
+        id="text-field_1235_name"
         name="name"
         type="checkbox"
         value=""
       />
       <label
-        for="check-box_1235_name"
+        for="text-field_1235_name"
       >
-        <span
-          aria-hidden="true"
-        />
         label
       </label>
     </div>
@@ -172,26 +160,24 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="ra
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="select"> 1`] = `
 <div>
   <div
-    class="_container_bb73c6 _fullWidth_bb73c6 _medium_bb73c6"
+    class="_formField_86f2f5"
     data-testid="crf-select"
   >
     <label
-      class="_label_bb73c6"
-      for="1235"
+      class="_label_86f2f5"
+      for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_dropdown_bb73c6 _fullWidth_bb73c6"
+      class="_container_d97916"
     >
       <select
         aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
         aria-required="false"
-        class="_select_bb73c6"
-        id="1235"
+        class="_select_d97916"
+        id="text-field_1235_name"
         name="name"
       />
     </div>
@@ -202,42 +188,40 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="se
 exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="us_state"> 1`] = `
 <div>
   <div
-    class="_container_bb73c6 _fullWidth_bb73c6 _medium_bb73c6"
+    class="_formField_86f2f5"
     data-testid="crf-us_state"
   >
     <label
-      class="_label_bb73c6"
-      for="1235"
+      class="_label_86f2f5"
+      for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_dropdown_bb73c6 _fullWidth_bb73c6"
+      class="_container_d97916"
     >
       <select
         aria-describedby="helper_text_1235_name"
+        aria-invalid="false"
         aria-required="false"
-        class="_select_bb73c6"
-        id="1235"
+        class="_select_d97916"
+        id="text-field_1235_name"
         name="name"
       >
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="al"
         >
           us_state:al
         </option>
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="ak"
         >
           us_state:ak
         </option>
         <option
-          class="_option_bb73c6"
+          class="_option_d97916"
           value="az"
         >
           us_state:az
@@ -251,23 +235,17 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="us
 exports[`<CustomRegisterField> > renders and matches snapshot <Radio> 1`] = `
 <div>
   <div
-    data-testid="crf-radio"
-    label="label"
+    class="_formField_86f2f5"
   >
     <label
-      class="_header_d50e6e"
-      data-testid="radio-header"
-      for="radio_1235_name"
+      class="_label_86f2f5"
+      for="text-field_1235_name"
     >
-      <span>
-        label
-      </span>
-      <span
-        class="_note_d50e6e"
-      >
-        optional
-      </span>
+      label
     </label>
+    <div
+      id="text-field_1235_name"
+    />
   </div>
 </div>
 `;
@@ -275,25 +253,23 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Radio> 1`] = `
 exports[`<CustomRegisterField> > renders and matches snapshot <TextField> 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
     data-testid="crf-input"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         type="text"
diff --git a/packages/ui-react/src/components/DateField/DateField.module.scss b/packages/ui-react/src/components/DateField/DateField.module.scss
deleted file mode 100644
index c4e91652f..000000000
--- a/packages/ui-react/src/components/DateField/DateField.module.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-@use '@jwp/ott-ui-react/src/styles/variables';
-@use '@jwp/ott-ui-react/src/styles/theme';
-
-.dateField {
-  width: 100%;
-  margin-bottom: 8px;
-
-  &.error {
-    .container {
-      border-color: theme.$text-field-error-color;
-    }
-  }
-
-  &.disabled {
-    .container {
-      opacity: 0.7;
-    }
-  }
-
-  &:hover {
-    &:not(.disabled) {
-      .container {
-        background-color: theme.$text-field-hover-bg-color;
-        border-color: theme.$text-field-hover-border-color;
-      }
-    }
-  }
-}
-
-.label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: var(--body-font-weight-bold);
-  text-align: left;
-
-  > span {
-    float: right;
-    color: rgba(variables.$white, 0.7);
-    font-weight: normal;
-  }
-}
-
-.control > div {
-  width: 48px;
-  height: 48px;
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  width: 100%;
-
-  color: theme.$text-field-resting-color;
-
-  font-weight: var(--body-font-weight-bold);
-  font-size: 16px;
-
-  background-color: theme.$text-field-bg-color;
-  border: 1px solid theme.$text-field-resting-border-color;
-  border-radius: 4px;
-  transition: border 0.2s ease;
-
-  &:focus-within {
-    color: theme.$text-field-active-color;
-    border-color: theme.$text-field-active-border-color;
-  }
-}
-
-.input {
-  width: 100%;
-  min-height: 48px;
-  padding: 14px 16px;
-  color: inherit;
-  font-size: 16px;
-  line-height: variables.$base-line-height;
-  text-align: center;
-  background: transparent;
-  border: none;
-  outline: none;
-  appearance: none;
-
-  &::-webkit-inner-spin-button {
-    display: none;
-  }
-
-  &[name="date"] {
-    width: 43px;
-    padding-right: 4px;
-  }
-
-  &[name="month"] {
-    width: 35px;
-    padding-right: 4px;
-    padding-left: 4px;
-  }
-
-  &[name="year"] {
-    width: 60px;
-    padding-left: 4px;
-  }
-}
-
-.hiddenInput {
-  display: none;
-}
diff --git a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
index 6d8a33fd6..404251e02 100644
--- a/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
+++ b/packages/ui-react/src/components/DeleteAccountModal/DeleteAccountModal.tsx
@@ -13,7 +13,7 @@ import classNames from 'classnames';
 import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 import { modalURLFromLocation } from '../../utils/location';
 import Button from '../Button/Button';
-import PasswordField from '../PasswordField/PasswordField';
+import PasswordField from '../form-fields/PasswordField/PasswordField';
 import useQueryParam from '../../hooks/useQueryParam';
 import FormFeedback from '../FormFeedback/FormFeedback';
 
diff --git a/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx b/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx
index 795579841..1a1f0c7a7 100644
--- a/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx
+++ b/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx
@@ -3,7 +3,7 @@ import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { CONFIG_QUERY_KEY } from '@jwp/ott-common/src/constants';
 import { jwDevEnvConfigs, testConfigs } from '@jwp/ott-testing/constants';
 
-import Dropdown from '../Dropdown/Dropdown';
+import Select from '../Select/Select';
 
 import styles from './DevConfigSelector.module.scss';
 
@@ -23,7 +23,7 @@ const DevConfigSelector = ({ selectedConfig }: Props) => {
   }, []);
 
   return (
-    <Dropdown
+    <Select
       className={styles.dropdown}
       size="small"
       options={configOptions}
diff --git a/packages/ui-react/src/components/Dropdown/Dropdown.tsx b/packages/ui-react/src/components/Dropdown/Dropdown.tsx
deleted file mode 100644
index b70dfb45e..000000000
--- a/packages/ui-react/src/components/Dropdown/Dropdown.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { type ReactNode } from 'react';
-import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
-
-import HelperText from '../HelperText/HelperText';
-
-import styles from './Dropdown.module.scss';
-
-type Props = {
-  name: string;
-  value: string;
-  className?: string;
-  defaultLabel?: string;
-  options?: (string | { value: string; label: string })[];
-  optionsStyle?: string;
-  label?: ReactNode;
-  fullWidth?: boolean;
-  size?: 'small' | 'medium';
-  error?: boolean;
-  helperText?: string;
-  required?: boolean;
-  hideOptional?: boolean;
-  onChange: React.ChangeEventHandler;
-  testId?: string;
-  lang?: string;
-};
-
-const Dropdown: React.FC<Props & React.AriaAttributes> = ({
-  name,
-  value,
-  className,
-  defaultLabel,
-  options,
-  onChange,
-  optionsStyle,
-  label,
-  fullWidth,
-  error,
-  helperText,
-  required = false,
-  size = 'medium',
-  testId,
-  hideOptional,
-  lang,
-  ...rest
-}: Props & React.AriaAttributes) => {
-  const { t } = useTranslation('common');
-  const id = useOpaqueId();
-  const helperTextId = useOpaqueId('helper_text', name);
-
-  return (
-    <div className={classNames(styles.container, { [styles.fullWidth]: fullWidth, [styles.error]: error }, styles[size], className)} data-testid={testId}>
-      {(label || (!required && !hideOptional)) && (
-        <label htmlFor={id} className={styles.label}>
-          {label}
-          {!required && !hideOptional ? <span>{t('optional')}</span> : null}
-        </label>
-      )}
-      <div className={classNames(styles.dropdown, { [styles.fullWidth]: fullWidth })}>
-        <select
-          id={id}
-          className={styles.select}
-          name={name}
-          value={value}
-          onChange={onChange}
-          aria-required={required}
-          aria-invalid={error}
-          aria-describedby={helperTextId}
-          lang={lang}
-          {...rest}
-        >
-          {defaultLabel && (
-            <option className={classNames(styles.option, optionsStyle)} value="" disabled={required}>
-              {defaultLabel}
-            </option>
-          )}
-          {options &&
-            options.map((option) => (
-              <option
-                className={classNames(styles.option, optionsStyle)}
-                key={typeof option === 'string' ? option : option.value}
-                value={typeof option === 'string' ? option : option.value}
-              >
-                {typeof option === 'string' ? option : option.label}
-              </option>
-            ))}
-        </select>
-      </div>
-      <HelperText id={helperTextId} error={error}>
-        {helperText}
-      </HelperText>
-    </div>
-  );
-};
-
-export default Dropdown;
diff --git a/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx b/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
index 369610415..5f919445a 100644
--- a/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
+++ b/packages/ui-react/src/components/EditCardPaymentForm/EditCardPaymentForm.tsx
@@ -10,10 +10,10 @@ import AccountController from '@jwp/ott-common/src/controllers/AccountController
 import useForm from '@jwp/ott-hooks-react/src/useForm';
 
 import Button from '../Button/Button';
-import CreditCardCVCField from '../CreditCardCVCField/CreditCardCVCField';
-import CreditCardExpiryField from '../CreditCardExpiryField/CreditCardExpiryField';
-import CreditCardNumberField from '../CreditCardNumberField/CreditCardNumberField';
-import TextField from '../TextField/TextField';
+import CreditCardCVCField from '../form-fields/CreditCardCVCField/CreditCardCVCField';
+import CreditCardExpiryField from '../form-fields/CreditCardExpiryField/CreditCardExpiryField';
+import CreditCardNumberField from '../form-fields/CreditCardNumberField/CreditCardNumberField';
+import TextField from '../form-fields/TextField/TextField';
 import { useAriaAnnouncer } from '../../containers/AnnouncementProvider/AnnoucementProvider';
 
 import styles from './EditCardPaymentForm.module.scss';
diff --git a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
index 8413310ac..3a2f4246d 100644
--- a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
+++ b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
@@ -4,8 +4,8 @@ import type { EditPasswordFormData } from '@jwp/ott-common/types/account';
 import type { FormErrors } from '@jwp/ott-common/types/form';
 import { testId } from '@jwp/ott-common/src/utils/common';
 
-import PasswordField from '../PasswordField/PasswordField';
-import TextField from '../TextField/TextField';
+import PasswordField from '../form-fields/PasswordField/PasswordField';
+import TextField from '../form-fields/TextField/TextField';
 import Button from '../Button/Button';
 import FormFeedback from '../FormFeedback/FormFeedback';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
@@ -109,6 +109,7 @@ const EditPasswordForm: React.FC<Props> = ({
         error={!!errors.passwordConfirmation}
         name="passwordConfirmation"
         autoComplete="new-password"
+        showHelperText={false}
         required
       />
 
diff --git a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
index 6588c0191..05c99cb80 100644
--- a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
@@ -12,22 +12,28 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
       reset.password_reset
     </h2>
     <div
-      class="_textField_e16c1b _rightControl_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_password"
       >
         reset.new_password
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20 _rightControl_859b20"
       >
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="new-password"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_password"
           name="password"
           placeholder="reset.password"
@@ -36,7 +42,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
           value=""
         />
         <div
-          class="_control_e16c1b"
+          class="_control_859b20"
         >
           <button
             aria-label="reset.view_password"
@@ -65,22 +71,28 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b _rightControl_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_passwordconfirmation"
       >
         reset.repeat_new_password
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20 _rightControl_859b20"
       >
         <input
           aria-describedby="helper_text_1235_passwordconfirmation"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="new-password"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_passwordconfirmation"
           name="passwordConfirmation"
           placeholder="reset.repeat_new_password"
@@ -89,7 +101,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
           value=""
         />
         <div
-          class="_control_e16c1b"
+          class="_control_859b20"
         >
           <button
             aria-label="reset.view_password"
@@ -110,12 +122,6 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
           </button>
         </div>
       </div>
-      <div
-        class="_helperText_da58e0"
-        id="helper_text_1235_passwordconfirmation"
-      >
-        reset.password_helper_text
-      </div>
     </div>
     <button
       aria-disabled="false"
diff --git a/packages/ui-react/src/components/Filter/Filter.tsx b/packages/ui-react/src/components/Filter/Filter.tsx
index ffe24f0db..bcd384486 100644
--- a/packages/ui-react/src/components/Filter/Filter.tsx
+++ b/packages/ui-react/src/components/Filter/Filter.tsx
@@ -2,7 +2,7 @@ import React, { type FC, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import useBreakpoint, { Breakpoint } from '@jwp/ott-ui-react/src/hooks/useBreakpoint';
 
-import Dropdown from '../Dropdown/Dropdown';
+import Select from '../Select/Select';
 import Button from '../Button/Button';
 
 import styles from './Filter.module.scss';
@@ -49,7 +49,7 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, force
         </div>
       ) : (
         <div className={styles.filterDropDown}>
-          <Dropdown
+          <Select
             className={styles.dropDown}
             size="small"
             options={options}
@@ -58,7 +58,6 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, force
             value={value}
             onChange={handleChange}
             aria-label={t('filter_videos_by', { name })}
-            hideOptional
           />
         </div>
       )}
diff --git a/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx b/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
index 32878c32c..a0df5676d 100644
--- a/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
+++ b/packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx
@@ -73,7 +73,7 @@ const FinalizePayment = () => {
           />
         </>
       ) : (
-        <div className={styles.loading}>
+        <div>
           <Spinner />
         </div>
       )}
diff --git a/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx b/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
index 47d950cf9..a02ba78f1 100644
--- a/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
+++ b/packages/ui-react/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
@@ -5,7 +5,7 @@ import type { FormErrors } from '@jwp/ott-common/types/form';
 import { testId } from '@jwp/ott-common/src/utils/common';
 
 import Button from '../Button/Button';
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import FormFeedback from '../FormFeedback/FormFeedback';
 
 import styles from './ForgotPasswordForm.module.scss';
@@ -24,7 +24,7 @@ const ForgotPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors
   const { t } = useTranslation('account');
 
   return (
-    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate className={styles.forgotPasswordForm}>
+    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate>
       <h2 className={styles.title}>{t('reset.forgot_password')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <p className={styles.text}>{t('reset.forgot_text')}</p>
diff --git a/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap b/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
index d7350f90a..0980f3f28 100644
--- a/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap
@@ -17,22 +17,28 @@ exports[`<ForgotPasswordForm> > renders and matches snapshot type forgot 1`] = `
       reset.forgot_text
     </p>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_email"
       >
         reset.email
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="email"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_email"
           name="email"
           placeholder="reset.email"
diff --git a/packages/ui-react/src/components/FormField/FormField.module.scss b/packages/ui-react/src/components/FormField/FormField.module.scss
new file mode 100644
index 000000000..2cf65d9b8
--- /dev/null
+++ b/packages/ui-react/src/components/FormField/FormField.module.scss
@@ -0,0 +1,22 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+
+.formField {
+  width: 100%;
+  margin-bottom: 8px;
+}
+
+.label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: var(--body-font-weight-bold);
+  text-align: left;
+
+  > span {
+    margin-left: 4px;
+    font-family: Verdana, sans-serif;
+    font-weight: normal;
+    font-size: 12px;
+    vertical-align: top;
+  }
+}
diff --git a/packages/ui-react/src/components/FormField/FormField.tsx b/packages/ui-react/src/components/FormField/FormField.tsx
new file mode 100644
index 000000000..db7661b9d
--- /dev/null
+++ b/packages/ui-react/src/components/FormField/FormField.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import classNames from 'classnames';
+import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
+
+import HelperText from '../HelperText/HelperText';
+import type { FormControlProps } from '../../types/form';
+
+import styles from './FormField.module.scss';
+
+type RenderInputProps = {
+  helperTextId: string;
+  id: string;
+};
+
+type Props = {
+  helperText?: React.ReactNode;
+  renderInput: (fieldProps: RenderInputProps) => React.ReactElement;
+} & Omit<FormControlProps, 'value' | 'placeholder'>;
+
+export const FormField = ({ className, renderInput, required, label, error, helperText, testId, editing = true, name }: Props) => {
+  const formFieldClassName = classNames(styles.formField, className);
+  const id = useOpaqueId('text-field', name);
+  const helperTextId = useOpaqueId('helper_text', name);
+
+  return (
+    <div className={formFieldClassName} data-testid={testId}>
+      {!!label && (
+        <label htmlFor={id} className={styles.label}>
+          {label}
+          {required && editing ? <span aria-hidden="true">*</span> : null}
+        </label>
+      )}
+      {renderInput({ helperTextId, id })}
+      {editing && (
+        <HelperText id={helperTextId} error={error}>
+          {helperText}
+        </HelperText>
+      )}
+    </div>
+  );
+};
diff --git a/packages/ui-react/src/components/TextField/TextField.module.scss b/packages/ui-react/src/components/Input/Input.module.scss
similarity index 64%
rename from packages/ui-react/src/components/TextField/TextField.module.scss
rename to packages/ui-react/src/components/Input/Input.module.scss
index 3457d7ac5..66b80a7a5 100644
--- a/packages/ui-react/src/components/TextField/TextField.module.scss
+++ b/packages/ui-react/src/components/Input/Input.module.scss
@@ -1,20 +1,23 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 
-.textField {
+.container {
+  display: flex;
   width: 100%;
-  margin-bottom: 8px;
+
+  color: theme.$text-field-resting-color;
+
+  background-color: theme.$text-field-bg-color;
+  border: 1px solid theme.$text-field-resting-border-color;
+  border-radius: 4px;
+  transition: border 0.2s ease;
 
   &.error {
-    .container {
-      border-color: theme.$text-field-error-color;
-    }
+    border-color: theme.$text-field-error-color;
   }
 
   &.disabled {
-    .container {
-      opacity: 0.7;
-    }
+    opacity: 0.7;
   }
 
   &.leftControl .input {
@@ -25,58 +28,31 @@
     padding-right: 0;
   }
 
+  &:focus-within {
+    color: theme.$text-field-active-color;
+    border-color: theme.$text-field-active-border-color;
+  }
+
   &:hover {
     &:not(.disabled) {
-      .container {
-        background-color: theme.$text-field-hover-bg-color;
-        border-color: theme.$text-field-hover-border-color;
-      }
+      background-color: theme.$text-field-hover-bg-color;
+      border-color: theme.$text-field-hover-border-color;
     }
   }
 }
 
-.label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: var(--body-font-weight-bold);
-  text-align: left;
-
-  > span {
-    float: right;
-    color: rgba(variables.$white, 0.7);
-    font-weight: normal;
-  }
-}
-
-.control > button {
+.control > div {
   width: 48px;
   height: 48px;
 }
 
-.container {
-  display: flex;
-  width: 100%;
-
-  color: theme.$text-field-resting-color;
-
-  background-color: theme.$text-field-bg-color;
-  border: 1px solid theme.$text-field-resting-border-color;
-  border-radius: 4px;
-  transition: border 0.2s ease;
-
-  &:focus-within {
-    color: theme.$text-field-active-color;
-    border-color: theme.$text-field-active-border-color;
-  }
-}
-
 .input {
   width: 100%;
   min-height: 48px;
   padding: 14px 16px;
   color: inherit;
   font-size: 16px;
-  line-height: 18px;
+  line-height: variables.$base-line-height;
   background: transparent;
   border: none;
   outline: none;
diff --git a/packages/ui-react/src/components/Input/Input.tsx b/packages/ui-react/src/components/Input/Input.tsx
new file mode 100644
index 000000000..e3ded1897
--- /dev/null
+++ b/packages/ui-react/src/components/Input/Input.tsx
@@ -0,0 +1,98 @@
+import React, { type InputHTMLAttributes, type RefObject, type TextareaHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import type { FormControlProps } from '../../types/form';
+
+import styles from './Input.module.scss';
+
+type CommonProps = {
+  id?: string;
+  helperTextId?: string;
+  leftControl?: React.ReactNode;
+  rightControl?: React.ReactNode;
+  multiline?: boolean;
+} & FormControlProps;
+
+type HTMLInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+type HTMLTextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>;
+
+type InputProps = HTMLInputProps & {
+  type?: InputHTMLAttributes<HTMLInputElement>['type'];
+  multiline?: boolean;
+  inputRef?: RefObject<HTMLInputElement>;
+  textAreaRef?: never;
+} & CommonProps;
+type TextAreaProps = HTMLTextAreaProps & { type?: never; multiline: true; inputRef?: never; textAreaRef?: RefObject<HTMLTextAreaElement> } & CommonProps;
+
+export type Props = InputProps | TextAreaProps;
+
+const isTextArea = (_props: HTMLInputProps | HTMLTextAreaProps, multiline?: boolean): _props is HTMLTextAreaProps => !!multiline;
+
+const Input = ({
+  required,
+  className,
+  disabled,
+  editing = true,
+  value,
+  id,
+  name,
+  multiline,
+  error,
+  helperTextId,
+  type,
+  textAreaRef,
+  inputRef,
+  leftControl,
+  rightControl,
+  ...inputProps
+}: Props) => {
+  // Default to 'text' if 'type' property is absent, which occurs in textareas.
+  const inputType = type || 'text';
+  const containerClassName = classNames(
+    styles.container,
+    {
+      [styles.error]: error,
+      [styles.disabled]: disabled,
+      [styles.leftControl]: !!leftControl,
+      [styles.rightControl]: !!rightControl,
+    },
+    className,
+  );
+
+  const ariaAttributes = {
+    'aria-required': !!required,
+    'aria-invalid': Boolean(required && error && value !== ''),
+    'aria-describedby': helperTextId,
+  } as const;
+
+  const commonProps: HTMLInputProps | HTMLTextAreaProps = {
+    id,
+    name,
+    value,
+    disabled,
+    rows: multiline ? 3 : undefined,
+    className: styles.input,
+    readOnly: !editing,
+    required: required,
+    ...ariaAttributes,
+    ...inputProps,
+  };
+
+  const input = isTextArea(commonProps, multiline) ? (
+    <textarea {...commonProps} ref={textAreaRef} />
+  ) : (
+    <input {...commonProps} type={inputType} ref={inputRef} />
+  );
+
+  return editing ? (
+    <div className={containerClassName}>
+      {leftControl ? <div className={styles.control}>{leftControl}</div> : null}
+      {input}
+      {rightControl ? <div className={styles.control}>{rightControl}</div> : null}
+    </div>
+  ) : (
+    input
+  );
+};
+
+export default Input;
diff --git a/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx b/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx
index d6cda2224..c1f15c208 100644
--- a/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx
+++ b/packages/ui-react/src/components/LoginForm/LoginForm.test.tsx
@@ -69,8 +69,8 @@ describe('<LoginForm>', () => {
 
     await waitForWithFakeTimers();
 
-    expect(getByLabelText('login.email')).toHaveValue('myemail@email.com');
-    expect(getByLabelText('login.password')).toHaveValue('mypassword');
+    expect(getByLabelText('login.email', { exact: false })).toHaveValue('myemail@email.com');
+    expect(getByLabelText('login.password', { exact: false })).toHaveValue('mypassword');
   });
 
   test('sets the correct errors in the form fields', async () => {
@@ -167,8 +167,8 @@ describe('<LoginForm>', () => {
     );
 
     act(() => {
-      fireEvent.change(getByLabelText('login.email'), { target: { value: 'email' } });
-      fireEvent.change(getByLabelText('login.password'), { target: { value: 'password' } });
+      fireEvent.change(getByLabelText('login.email', { exact: false }), { target: { value: 'email' } });
+      fireEvent.change(getByLabelText('login.password', { exact: false }), { target: { value: 'password' } });
     });
 
     await waitForWithFakeTimers();
diff --git a/packages/ui-react/src/components/LoginForm/LoginForm.tsx b/packages/ui-react/src/components/LoginForm/LoginForm.tsx
index 3e36ab5bb..42a586471 100644
--- a/packages/ui-react/src/components/LoginForm/LoginForm.tsx
+++ b/packages/ui-react/src/components/LoginForm/LoginForm.tsx
@@ -10,7 +10,7 @@ import { simultaneousLoginWarningKey } from '@jwp/ott-common/src/constants';
 import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
 import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
 
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import Button from '../Button/Button';
 import Link from '../Link/Link';
 import IconButton from '../IconButton/IconButton';
diff --git a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
index 0628874b0..791901494 100644
--- a/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
+++ b/packages/ui-react/src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap
@@ -31,23 +31,29 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
       login.sign_in
     </h2>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
       data-testid="login-email-input"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_email"
       >
         login.email
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="email"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_email"
           name="email"
           placeholder="login.email"
@@ -58,23 +64,29 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b _rightControl_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
       data-testid="login-password-input"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_password"
       >
         login.password
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20 _rightControl_859b20"
       >
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="current-password"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_password"
           name="password"
           placeholder="login.password"
@@ -83,7 +95,7 @@ exports[`<LoginForm> > renders and matches snapshot 1`] = `
           value=""
         />
         <div
-          class="_control_e16c1b"
+          class="_control_859b20"
         >
           <button
             aria-label="login.view_password"
diff --git a/packages/ui-react/src/components/OfferSwitch/OfferSwitch.tsx b/packages/ui-react/src/components/OfferSwitch/OfferSwitch.tsx
index 9fbc7883e..3ced92a6e 100644
--- a/packages/ui-react/src/components/OfferSwitch/OfferSwitch.tsx
+++ b/packages/ui-react/src/components/OfferSwitch/OfferSwitch.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import type { Offer } from '@jwp/ott-common/types/checkout';
 import { formatLocalizedDate, formatPrice } from '@jwp/ott-common/src/utils/formatting';
 
-import Checkbox from '../Checkbox/Checkbox';
+import Checkbox from '../form-fields/Checkbox/Checkbox';
 
 import styles from './OfferSwitch.module.scss';
 
diff --git a/packages/ui-react/src/components/Payment/Payment.tsx b/packages/ui-react/src/components/Payment/Payment.tsx
index b209a7058..c276b0965 100644
--- a/packages/ui-react/src/components/Payment/Payment.tsx
+++ b/packages/ui-react/src/components/Payment/Payment.tsx
@@ -18,7 +18,7 @@ import Alert from '../Alert/Alert';
 import Button from '../Button/Button';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import OfferSwitch from '../OfferSwitch/OfferSwitch';
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
 
diff --git a/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap b/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
index 57c66f0d5..1620f8f2e 100644
--- a/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
+++ b/packages/ui-react/src/components/Payment/__snapshots__/Payment.test.tsx.snap
@@ -19,10 +19,10 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
     </div>
     <div>
       <div
-        class="_textField_e16c1b"
+        class="_formField_86f2f5 _textField_c799b0"
       >
         <label
-          class="_label_e16c1b"
+          class="_label_86f2f5"
           for="text-field_1235_cardnumber"
         >
           user:payment.card_number
@@ -31,8 +31,9 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
           aria-describedby="helper_text_1235_cardnumber"
           aria-invalid="false"
           aria-label="user:payment.card_number_hidden"
+          aria-required="false"
           autocomplete="cc-number"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_cardnumber"
           name="cardNumber"
           readonly=""
@@ -44,10 +45,10 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
         class="_cardDetails_c57ff5"
       >
         <div
-          class="_textField_e16c1b"
+          class="_formField_86f2f5 _textField_c799b0"
         >
           <label
-            class="_label_e16c1b"
+            class="_label_86f2f5"
             for="text-field_1235_cardexpiry"
           >
             user:payment.expiry_date
@@ -55,8 +56,9 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
           <input
             aria-describedby="helper_text_1235_cardexpiry"
             aria-invalid="false"
+            aria-required="false"
             autocomplete="cc-exp"
-            class="_input_e16c1b"
+            class="_input_859b20"
             id="text-field_1235_cardexpiry"
             name="cardExpiry"
             readonly=""
@@ -65,10 +67,10 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
           />
         </div>
         <div
-          class="_textField_e16c1b"
+          class="_formField_86f2f5 _textField_c799b0"
         >
           <label
-            class="_label_e16c1b"
+            class="_label_86f2f5"
             for="text-field_1235_cardsecuritycode"
           >
             user:payment.security_code
@@ -77,8 +79,9 @@ exports[`<Payment> > renders and matches snapshot 1`] = `
             aria-describedby="helper_text_1235_cardsecuritycode"
             aria-invalid="false"
             aria-label="user:payment.security_code_hidden"
+            aria-required="false"
             autocomplete="cc-csc"
-            class="_input_e16c1b"
+            class="_input_859b20"
             id="text-field_1235_cardsecuritycode"
             name="cardSecurityCode"
             readonly=""
diff --git a/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx b/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
index 9d8092101..9d6220ebc 100644
--- a/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
+++ b/packages/ui-react/src/components/PaymentForm/PaymentForm.tsx
@@ -6,10 +6,10 @@ import useForm from '@jwp/ott-hooks-react/src/useForm';
 import { testId } from '@jwp/ott-common/src/utils/common';
 
 import Button from '../Button/Button';
-import CreditCardCVCField from '../CreditCardCVCField/CreditCardCVCField';
-import CreditCardExpiryField from '../CreditCardExpiryField/CreditCardExpiryField';
-import CreditCardNumberField from '../CreditCardNumberField/CreditCardNumberField';
-import TextField from '../TextField/TextField';
+import CreditCardCVCField from '../form-fields/CreditCardCVCField/CreditCardCVCField';
+import CreditCardExpiryField from '../form-fields/CreditCardExpiryField/CreditCardExpiryField';
+import CreditCardNumberField from '../form-fields/CreditCardNumberField/CreditCardNumberField';
+import TextField from '../form-fields/TextField/TextField';
 import FormFeedback from '../FormFeedback/FormFeedback';
 
 import styles from './PaymentForm.module.scss';
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
index f69cb6a33..74dfaf035 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
+++ b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -4,12 +4,12 @@ import type { CleengCaptureField, CleengCaptureQuestionField, PersonalDetailsFor
 import { testId } from '@jwp/ott-common/src/utils/common';
 import useForm, { type UseFormOnSubmitHandler } from '@jwp/ott-hooks-react/src/useForm';
 
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import Button from '../Button/Button';
-import Dropdown from '../Dropdown/Dropdown';
-import Checkbox from '../Checkbox/Checkbox';
-import Radio from '../Radio/Radio';
-import DateField from '../DateField/DateField';
+import Dropdown from '../form-fields/Dropdown/Dropdown';
+import Checkbox from '../form-fields/Checkbox/Checkbox';
+import Radio from '../form-fields/Radio/Radio';
+import DateField from '../form-fields/DateField/DateField';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import FormFeedback from '../FormFeedback/FormFeedback';
 
@@ -18,10 +18,12 @@ import styles from './PersonalDetailsForm.module.scss';
 type Props = {
   initialValues: PersonalDetailsFormData;
   onSubmit: UseFormOnSubmitHandler<PersonalDetailsFormData>;
+  onChange: React.ChangeEventHandler;
+  setValue: (key: keyof PersonalDetailsFormData, value: string) => void;
   error?: string;
   fields: Record<string, CleengCaptureField>;
   questions: CleengCaptureQuestionField[];
-  onQuestionChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onQuestionChange: React.ChangeEventHandler;
   questionValues: Record<string, string>;
   questionErrors: Record<string, string>;
 };
@@ -63,11 +65,11 @@ const PersonalDetailsForm: React.FC<Props> = ({ initialValues, onSubmit, fields,
     if (values.length === 1 && values[0].value === '') {
       return <TextField value={questionValues[key]} label={question} {...props} />;
     } else if (values.length === 1) {
-      return <Checkbox checked={!!questionValues[key]} value={values[0].value} header={question} label={values[0].label} {...props} />;
+      return <Checkbox checked={!!questionValues[key]} value={values[0].value} label={question} checkboxLabel={values[0].label} {...props} />;
     } else if (values.length === 2) {
-      return <Radio values={values} value={questionValues[key]} header={question} {...props} />;
+      return <Radio values={values} value={questionValues[key]} label={question} {...props} />;
     } else if (values.length > 2) {
-      return <Dropdown options={values} value={questionValues[key]} label={question} defaultLabel={t('personal_details.select_answer')} {...props} fullWidth />;
+      return <Dropdown options={values} value={questionValues[key]} label={question} defaultLabel={t('personal_details.select_answer')} {...props} />;
     }
 
     return null;
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
index 902240880..2d871699b 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
+++ b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -12,22 +12,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       personal_details.title
     </h2>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_firstname"
       >
         personal_details.fist_name
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_firstname"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="given-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_firstname"
           name="firstName"
           placeholder="personal_details.fist_name"
@@ -38,22 +44,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_lastname"
       >
         personal_details.last_name
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_lastname"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="family-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_lastname"
           name="lastName"
           placeholder="personal_details.last_name"
@@ -64,25 +76,23 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_companyname"
       >
         personal_details.company_name
-        <span>
-          optional
-        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_companyname"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="organization"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_companyname"
           name="companyName"
           placeholder="personal_details.company_name"
@@ -92,22 +102,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_address"
       >
         personal_details.address
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_address"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-line1"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_address"
           name="address"
           placeholder="personal_details.address"
@@ -118,25 +134,23 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_address2"
       >
         personal_details.address2
-        <span>
-          optional
-        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_address2"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="address-line2"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_address2"
           name="address2"
           placeholder="personal_details.address2"
@@ -146,22 +160,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_city"
       >
         personal_details.city
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_city"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-level2"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_city"
           name="city"
           placeholder="personal_details.city"
@@ -172,22 +192,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_state"
       >
         personal_details.state
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_state"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-level1"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_state"
           name="state"
           placeholder="personal_details.state"
@@ -198,22 +224,28 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_postcode"
       >
         personal_details.post_code
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_postcode"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="postal-code"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_postcode"
           name="postCode"
           placeholder="personal_details.post_code"
@@ -224,21 +256,27 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_phonenumber"
       >
         personal_details.phone_number
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_phonenumber"
           aria-invalid="false"
-          class="_input_e16c1b"
+          aria-required="true"
+          class="_input_859b20"
           id="text-field_1235_phonenumber"
           name="phoneNumber"
           placeholder="personal_details.phone_number"
@@ -249,28 +287,32 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_dateField_eb6974"
-      id="text-field_1235_birthdate"
+      class="_formField_86f2f5 _dateField_0addad"
     >
       <label
-        class="_label_eb6974"
+        class="_label_86f2f5"
         for="text-field_1235_birthdate"
       >
         personal_details.birth_date
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_eb6974"
+        class="_container_0addad"
       >
         <input
           aria-describedby="helper_text_1235_birthdate"
           aria-invalid="false"
-          class="_hiddenInput_eb6974"
+          class="_hiddenInput_0addad"
           id="text-field_1235_birthdate-hidden"
           name="birthDate"
         />
         <input
           autocomplete="bday-day"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-date"
           maxlength="2"
           name="date"
@@ -278,10 +320,10 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           type="number"
           value="27"
         />
-         / 
+         /
         <input
           autocomplete="bday-month"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-month"
           maxlength="2"
           name="month"
@@ -289,10 +331,10 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           type="number"
           value="2"
         />
-         / 
+         /
         <input
           autocomplete="bday-year"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-year"
           maxlength="4"
           name="year"
@@ -303,46 +345,52 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
       </div>
     </div>
     <div
-      class="_container_bb73c6 _fullWidth_bb73c6 _error_bb73c6 _medium_bb73c6"
+      class="_formField_86f2f5"
     >
       <label
-        class="_label_bb73c6"
-        for="1235"
+        class="_label_86f2f5"
+        for="text-field_1235_key1"
       >
         Which number is 2?
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_dropdown_bb73c6 _fullWidth_bb73c6"
+        class="_container_d97916 _error_d97916"
       >
         <select
           aria-describedby="helper_text_1235_key1"
           aria-invalid="true"
           aria-required="true"
-          class="_select_bb73c6"
-          id="1235"
+          class="_select_d97916"
+          id="text-field_1235_key1"
           name="key1"
+          required=""
         >
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             disabled=""
             value=""
           >
             personal_details.select_answer
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="1"
           >
             1
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="2"
           >
             2
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="3"
           >
             3
@@ -356,92 +404,98 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         question 1 is invalid
       </div>
     </div>
-    <div>
+    <div
+      class="_formField_86f2f5"
+    >
       <label
-        class="_header_d50e6e"
-        data-testid="radio-header"
-        for="radio_1235_key2"
+        class="_label_86f2f5"
+        for="text-field_1235_key2"
       >
-        <span>
-          Is this a question?
-        </span>
-        <span
-          class="_note_d50e6e"
-        >
-          optional
-        </span>
+        Is this a question?
       </label>
       <div
-        class="_radio_d50e6e"
+        id="text-field_1235_key2"
       >
-        <input
-          id="radio_1235_key20"
-          name="key2"
-          type="radio"
-          value="Yes"
-        />
-        <label
-          for="radio_1235_key20"
+        <div
+          class="_radio_854545 _error_854545"
         >
-          Yes
-        </label>
-      </div>
-      <div
-        class="_radio_d50e6e"
-      >
-        <input
-          checked=""
-          id="radio_1235_key21"
-          name="key2"
-          type="radio"
-          value="No"
-        />
-        <label
-          for="radio_1235_key21"
+          <input
+            aria-describedby="helper_text_1235_key2"
+            id="text-field_1235_key20"
+            name="key2"
+            type="radio"
+            value="Yes"
+          />
+          <label
+            for="text-field_1235_key20"
+          >
+            Yes
+          </label>
+        </div>
+        <div
+          class="_radio_854545 _error_854545"
         >
-          No
-        </label>
+          <input
+            aria-describedby="helper_text_1235_key2"
+            checked=""
+            id="text-field_1235_key21"
+            name="key2"
+            type="radio"
+            value="No"
+          />
+          <label
+            for="text-field_1235_key21"
+          >
+            No
+          </label>
+        </div>
       </div>
       <div
         class="_helperText_da58e0 _error_da58e0"
-        id="helper_text_1235"
+        id="helper_text_1235_key2"
       >
         Invalid answer
       </div>
     </div>
     <div
-      class="_checkbox_531f07 _error_531f07"
+      class="_formField_86f2f5 _checkbox_a98c3a _error_a98c3a"
     >
-      <div
-        class="_header_531f07"
+      <label
+        class="_label_86f2f5"
+        for="text-field_1235_ccc"
       >
         Check this off.
-      </div>
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
+      </label>
       <div
-        class="_row_531f07"
+        class="_row_a98c3a"
       >
         <input
           aria-describedby="helper_text_1235_ccc"
           aria-required="true"
           checked=""
-          id="check-box_1235_ccc"
+          id="text-field_1235_ccc"
           name="ccc"
           type="checkbox"
           value="CheckMe"
         />
         <label
-          for="check-box_1235_ccc"
+          for="text-field_1235_ccc"
         >
           <span
-            aria-hidden="true"
+            role="presentation"
           >
-            * 
+            *
           </span>
           CheckMe
         </label>
       </div>
       <div
-        class="_helperText_da58e0 _error_da58e0 _helperTextError_531f07"
+        class="_helperText_da58e0 _error_da58e0"
         id="helper_text_1235_ccc"
       >
         No way Jose
@@ -472,22 +526,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       personal_details.title
     </h2>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_firstname"
       >
         personal_details.fist_name
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_firstname"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="given-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_firstname"
           name="firstName"
           placeholder="personal_details.fist_name"
@@ -498,22 +558,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_lastname"
       >
         personal_details.last_name
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_lastname"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="family-name"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_lastname"
           name="lastName"
           placeholder="personal_details.last_name"
@@ -524,25 +590,23 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_companyname"
       >
         personal_details.company_name
-        <span>
-          optional
-        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_companyname"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="organization"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_companyname"
           name="companyName"
           placeholder="personal_details.company_name"
@@ -552,22 +616,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_address"
       >
         personal_details.address
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_address"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-line1"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_address"
           name="address"
           placeholder="personal_details.address"
@@ -578,25 +648,23 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_address2"
       >
         personal_details.address2
-        <span>
-          optional
-        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_address2"
           aria-invalid="false"
+          aria-required="false"
           autocomplete="address-line2"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_address2"
           name="address2"
           placeholder="personal_details.address2"
@@ -606,22 +674,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_city"
       >
         personal_details.city
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_city"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-level2"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_city"
           name="city"
           placeholder="personal_details.city"
@@ -632,22 +706,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_state"
       >
         personal_details.state
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_state"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="address-level1"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_state"
           name="state"
           placeholder="personal_details.state"
@@ -658,22 +738,28 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_postcode"
       >
         personal_details.post_code
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_postcode"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="postal-code"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_postcode"
           name="postCode"
           placeholder="personal_details.post_code"
@@ -684,21 +770,27 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_phonenumber"
       >
         personal_details.phone_number
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_phonenumber"
           aria-invalid="false"
-          class="_input_e16c1b"
+          aria-required="true"
+          class="_input_859b20"
           id="text-field_1235_phonenumber"
           name="phoneNumber"
           placeholder="personal_details.phone_number"
@@ -709,28 +801,32 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_dateField_eb6974"
-      id="text-field_1235_birthdate"
+      class="_formField_86f2f5 _dateField_0addad"
     >
       <label
-        class="_label_eb6974"
+        class="_label_86f2f5"
         for="text-field_1235_birthdate"
       >
         personal_details.birth_date
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_eb6974"
+        class="_container_0addad"
       >
         <input
           aria-describedby="helper_text_1235_birthdate"
           aria-invalid="false"
-          class="_hiddenInput_eb6974"
+          class="_hiddenInput_0addad"
           id="text-field_1235_birthdate-hidden"
           name="birthDate"
         />
         <input
           autocomplete="bday-day"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-date"
           maxlength="2"
           name="date"
@@ -738,10 +834,10 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
           type="number"
           value="27"
         />
-         / 
+         /
         <input
           autocomplete="bday-month"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-month"
           maxlength="2"
           name="month"
@@ -749,10 +845,10 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
           type="number"
           value="2"
         />
-         / 
+         /
         <input
           autocomplete="bday-year"
-          class="_input_eb6974"
+          class="_input_0addad"
           id="text-field_1235_birthdate-year"
           maxlength="4"
           name="year"
@@ -763,46 +859,52 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
       </div>
     </div>
     <div
-      class="_container_bb73c6 _fullWidth_bb73c6 _medium_bb73c6"
+      class="_formField_86f2f5"
     >
       <label
-        class="_label_bb73c6"
-        for="1235"
+        class="_label_86f2f5"
+        for="text-field_1235_key1"
       >
         Which number is 2?
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_dropdown_bb73c6 _fullWidth_bb73c6"
+        class="_container_d97916"
       >
         <select
           aria-describedby="helper_text_1235_key1"
           aria-invalid="false"
           aria-required="true"
-          class="_select_bb73c6"
-          id="1235"
+          class="_select_d97916"
+          id="text-field_1235_key1"
           name="key1"
+          required=""
         >
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             disabled=""
             value=""
           >
             personal_details.select_answer
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="1"
           >
             1
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="2"
           >
             2
           </option>
           <option
-            class="_option_bb73c6"
+            class="_option_d97916"
             value="3"
           >
             3
@@ -810,80 +912,86 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         </select>
       </div>
     </div>
-    <div>
+    <div
+      class="_formField_86f2f5"
+    >
       <label
-        class="_header_d50e6e"
-        data-testid="radio-header"
-        for="radio_1235_key2"
+        class="_label_86f2f5"
+        for="text-field_1235_key2"
       >
-        <span>
-          Is this a question?
-        </span>
-        <span
-          class="_note_d50e6e"
-        >
-          optional
-        </span>
+        Is this a question?
       </label>
       <div
-        class="_radio_d50e6e"
+        id="text-field_1235_key2"
       >
-        <input
-          id="radio_1235_key20"
-          name="key2"
-          type="radio"
-          value="Yes"
-        />
-        <label
-          for="radio_1235_key20"
+        <div
+          class="_radio_854545"
         >
-          Yes
-        </label>
-      </div>
-      <div
-        class="_radio_d50e6e"
-      >
-        <input
-          checked=""
-          id="radio_1235_key21"
-          name="key2"
-          type="radio"
-          value="No"
-        />
-        <label
-          for="radio_1235_key21"
+          <input
+            aria-describedby="helper_text_1235_key2"
+            id="text-field_1235_key20"
+            name="key2"
+            type="radio"
+            value="Yes"
+          />
+          <label
+            for="text-field_1235_key20"
+          >
+            Yes
+          </label>
+        </div>
+        <div
+          class="_radio_854545"
         >
-          No
-        </label>
+          <input
+            aria-describedby="helper_text_1235_key2"
+            checked=""
+            id="text-field_1235_key21"
+            name="key2"
+            type="radio"
+            value="No"
+          />
+          <label
+            for="text-field_1235_key21"
+          >
+            No
+          </label>
+        </div>
       </div>
     </div>
     <div
-      class="_checkbox_531f07"
+      class="_formField_86f2f5 _checkbox_a98c3a"
     >
-      <div
-        class="_header_531f07"
+      <label
+        class="_label_86f2f5"
+        for="text-field_1235_ccc"
       >
         Check this off.
-      </div>
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
+      </label>
       <div
-        class="_row_531f07"
+        class="_row_a98c3a"
       >
         <input
           aria-describedby="helper_text_1235_ccc"
           aria-required="true"
           checked=""
-          id="check-box_1235_ccc"
+          id="text-field_1235_ccc"
           name="ccc"
           type="checkbox"
           value="CheckMe"
         />
         <label
-          for="check-box_1235_ccc"
+          for="text-field_1235_ccc"
         >
           <span
-            aria-hidden="true"
+            role="presentation"
           >
-            * 
+            *
           </span>
           CheckMe
         </label>
diff --git a/packages/ui-react/src/components/Radio/Radio.tsx b/packages/ui-react/src/components/Radio/Radio.tsx
deleted file mode 100644
index 9e7c06739..000000000
--- a/packages/ui-react/src/components/Radio/Radio.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { type ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
-
-import HelperText from '../HelperText/HelperText';
-
-import styles from './Radio.module.scss';
-
-type Props = {
-  name: string;
-  value?: string;
-  values: { value: string; label: string }[];
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
-  header?: ReactNode;
-  helperText?: string;
-  error?: boolean;
-  required?: boolean;
-  disabled?: boolean;
-  lang?: string;
-};
-
-const Radio: React.FC<Props> = ({ name, onChange, header, value, values, helperText, error, required, disabled, lang, ...rest }: Props) => {
-  const { t } = useTranslation('common');
-  const id = useOpaqueId('radio', name);
-
-  return (
-    <div className={error ? styles.error : undefined} {...rest}>
-      {header || !required ? (
-        <label className={styles.header} htmlFor={id} data-testid="radio-header">
-          <span lang={lang}>{header}</span>
-          {!required ? <span className={styles.note}>{t('optional')}</span> : null}
-        </label>
-      ) : null}
-      {values.map(({ value: optionValue, label: optionLabel }, index) => (
-        <div className={styles.radio} key={index} lang={lang}>
-          <input
-            value={optionValue}
-            name={name}
-            type="radio"
-            id={id + index}
-            onChange={onChange}
-            checked={value === optionValue}
-            required={required}
-            disabled={disabled}
-          />
-          <label htmlFor={id + index}>{optionLabel}</label>
-        </div>
-      ))}
-      <HelperText error={error}>{helperText}</HelperText>
-    </div>
-  );
-};
-
-export default Radio;
diff --git a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
index 85c6d943f..314584c51 100644
--- a/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/packages/ui-react/src/components/RegistrationForm/RegistrationForm.tsx
@@ -6,22 +6,17 @@ import type { FormErrors } from '@jwp/ott-common/types/form';
 import type { CustomFormField, RegistrationFormData } from '@jwp/ott-common/types/account';
 import { testId } from '@jwp/ott-common/src/utils/common';
 import type { SocialLoginURLs } from '@jwp/ott-hooks-react/src/useSocialLoginUrls';
-import useToggle from '@jwp/ott-hooks-react/src/useToggle';
-import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
-import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
 import env from '@jwp/ott-common/src/env';
 
-import TextField from '../TextField/TextField';
+import TextField from '../form-fields/TextField/TextField';
 import Button from '../Button/Button';
-import IconButton from '../IconButton/IconButton';
-import PasswordStrength from '../PasswordStrength/PasswordStrength';
 import CustomRegisterField from '../CustomRegisterField/CustomRegisterField';
 import FormFeedback from '../FormFeedback/FormFeedback';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import Link from '../Link/Link';
-import Icon from '../Icon/Icon';
 import { modalURLFromLocation } from '../../utils/location';
 import SocialButtonsList from '../SocialButtonsList/SocialButtonsList';
+import PasswordField from '../form-fields/PasswordField/PasswordField';
 
 import styles from './RegistrationForm.module.scss';
 
@@ -56,8 +51,6 @@ const RegistrationForm: React.FC<Props> = ({
   consentErrors,
   socialLoginURLs,
 }: Props) => {
-  const [viewPassword, toggleViewPassword] = useToggle();
-
   const { t, i18n } = useTranslation('account');
   const location = useLocation();
 
@@ -106,26 +99,14 @@ const RegistrationForm: React.FC<Props> = ({
         autoComplete="email"
         required
       />
-      <TextField
+      <PasswordField
         value={values.password}
         onChange={onChange}
         onBlur={onBlur}
         label={t('registration.password')}
         placeholder={t('registration.password')}
         error={!!errors.password}
-        helperText={
-          <React.Fragment>
-            <PasswordStrength password={values.password} />
-            {t('registration.password_helper_text')}
-          </React.Fragment>
-        }
         name="password"
-        type={viewPassword ? 'text' : 'password'}
-        rightControl={
-          <IconButton aria-label={t('registration.view_password')} onClick={() => toggleViewPassword()} aria-pressed={viewPassword}>
-            <Icon icon={viewPassword ? Visibility : VisibilityOff} />
-          </IconButton>
-        }
         autoComplete="new-password"
         required
       />
diff --git a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
index 19b8ab12a..71044a889 100644
--- a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
+++ b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -32,22 +32,28 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
       registration.sign_up
     </h2>
     <div
-      class="_textField_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_email"
       >
         registration.email
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20"
       >
         <input
           aria-describedby="helper_text_1235_email"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="email"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_email"
           name="email"
           placeholder="registration.email"
@@ -58,22 +64,28 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_textField_e16c1b _rightControl_e16c1b"
+      class="_formField_86f2f5 _textField_c799b0"
     >
       <label
-        class="_label_e16c1b"
+        class="_label_86f2f5"
         for="text-field_1235_password"
       >
         registration.password
+        <span
+          aria-hidden="true"
+        >
+          *
+        </span>
       </label>
       <div
-        class="_container_e16c1b"
+        class="_container_859b20 _rightControl_859b20"
       >
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
+          aria-required="true"
           autocomplete="new-password"
-          class="_input_e16c1b"
+          class="_input_859b20"
           id="text-field_1235_password"
           name="password"
           placeholder="registration.password"
@@ -82,10 +94,10 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
           value=""
         />
         <div
-          class="_control_e16c1b"
+          class="_control_859b20"
         >
           <button
-            aria-label="registration.view_password"
+            aria-label="reset.view_password"
             aria-pressed="false"
             class="_iconButton_0fef65"
             type="button"
@@ -107,7 +119,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
         class="_helperText_da58e0"
         id="helper_text_1235_password"
       >
-        registration.password_helper_text
+        reset.password_helper_text
       </div>
     </div>
     <button
@@ -123,7 +135,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
       class="_bottom_a472a0"
     >
       registration.already_account
-       
+
       <a
         class="_link_a14c64"
         href="/?u=login"
diff --git a/packages/ui-react/src/components/Dropdown/Dropdown.module.scss b/packages/ui-react/src/components/Select/Select.module.scss
similarity index 55%
rename from packages/ui-react/src/components/Dropdown/Dropdown.module.scss
rename to packages/ui-react/src/components/Select/Select.module.scss
index 3dc8a7ce7..deb8e3366 100644
--- a/packages/ui-react/src/components/Dropdown/Dropdown.module.scss
+++ b/packages/ui-react/src/components/Select/Select.module.scss
@@ -10,45 +10,10 @@ $disabled-bg-color: #eee;
 $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
 
 .container {
-  width: 100%;
-  margin-bottom: 8px;
-
-  &.error {
-    .dropdown {
-      border-color: theme.$text-field-error-color;
-    }
-  }
-
-  &.medium {
-    .dropdown {
-      height: 48px;
-    }
-
-    .select {
-      height: 46px;
-      padding: 14px 16px;
-    }
-  }
-}
-
-.label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: var(--body-font-weight-bold);
-  text-align: left;
-
-  > span {
-    float: right;
-    color: rgba(variables.$white, 0.7);
-    font-weight: normal;
-  }
-}
-
-.dropdown {
   position: relative;
   display: grid;
   align-items: center;
-  width: 140px;
+  width: 100%;
   height: 36px;
   font-size: 1.25rem;
   background-color: rgba(0, 0, 0, 0.54);
@@ -71,33 +36,16 @@ $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
     justify-self: end;
   }
 
-  &.fullWidth {
-    width: 100%;
-    margin-left: initial;
+  &.error {
+    border-color: theme.$text-field-error-color;
   }
 
-  .select {
-    z-index: 1;
-    width: 100%;
-    height: 36px;
-    margin: 0;
-    padding: 2px 8px;
-    color: variables.$white;
-    font-family: inherit;
-    font-weight: theme.$body-font-weight-bold;
-    font-size: 1rem;
-    line-height: variables.$base-line-height;
-    text-overflow: ellipsis;
-    background: none;
-    border: none;
-    outline: none;
-    cursor: inherit;
-    -webkit-appearance: none; /* stylelint-disable-line */
-    appearance: none;
+  &.medium {
+    height: 48px;
 
-    // Remove IE arrow
-    &::-ms-expand {
-      display: none;
+    .select {
+      height: 46px;
+      padding: 14px 16px;
     }
   }
 
@@ -106,16 +54,41 @@ $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
     grid-area: select;
   }
 
-  & .disabled {
-    background-color: $disabled-bg-color;
-    background-image: $disabled-gradient;
+  &.disabled {
     cursor: not-allowed;
   }
 
   &:hover,
   &:focus-within {
-    border-color: $select-focus;
-    outline: none;
+    &:not(.disabled) {
+      border-color: $select-focus;
+      outline: none;
+    }
+  }
+}
+
+.select {
+  z-index: 1;
+  width: 100%;
+  height: 36px;
+  margin: 0;
+  padding: 2px 8px;
+  color: variables.$white;
+  font-family: inherit;
+  font-weight: theme.$body-font-weight-bold;
+  font-size: 1rem;
+  line-height: variables.$base-line-height;
+  text-overflow: ellipsis;
+  background: none;
+  border: none;
+  outline: none;
+  cursor: inherit;
+  -webkit-appearance: none; /* stylelint-disable-line */
+  appearance: none;
+
+  // Remove IE arrow
+  &::-ms-expand {
+    display: none;
   }
 }
 
diff --git a/packages/ui-react/src/components/Select/Select.tsx b/packages/ui-react/src/components/Select/Select.tsx
new file mode 100644
index 000000000..b6a740793
--- /dev/null
+++ b/packages/ui-react/src/components/Select/Select.tsx
@@ -0,0 +1,93 @@
+import React, { type InputHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import type { FormControlProps } from '../../types/form';
+
+import styles from './Select.module.scss';
+
+type HTMLSelectProps = Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'>;
+
+type Props = HTMLSelectProps & {
+  id?: string;
+  helperTextId?: string;
+  options?: (string | { value: string; label: string })[];
+  optionsStyle?: string;
+  defaultLabel?: string;
+} & FormControlProps;
+
+const Select = ({
+  required,
+  className,
+  disabled,
+  defaultLabel,
+  options,
+  optionsStyle,
+  editing = true,
+  value,
+  onChange,
+  id,
+  name,
+  error,
+  helperTextId,
+  type,
+  ...rest
+}: Props) => {
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (!editing) {
+      return event.preventDefault();
+    }
+    onChange?.(event);
+  };
+
+  // Default to 'text' if 'type' property is absent, which occurs in textareas.
+  const containerClassName = classNames(
+    styles.container,
+    {
+      [styles.error]: error,
+      [styles.disabled]: disabled,
+    },
+    className,
+  );
+
+  const ariaAttributes = {
+    'aria-required': !!required,
+    'aria-invalid': Boolean(required && error && value !== ''),
+    'aria-describedby': helperTextId,
+  } as const;
+
+  const inputProps: HTMLSelectProps = {
+    id,
+    name,
+    value,
+    disabled,
+    className: styles.select,
+    readOnly: !editing,
+    required: required,
+    ...ariaAttributes,
+    ...rest,
+  };
+
+  return (
+    <div className={classNames({ [containerClassName]: editing })}>
+      <select {...inputProps} onChange={handleChange}>
+        {defaultLabel && (
+          <option className={classNames(styles.option, optionsStyle)} value="" disabled={required}>
+            {defaultLabel}
+          </option>
+        )}
+        {options &&
+          options.map((option) => (
+            <option
+              className={classNames(styles.option, optionsStyle)}
+              key={typeof option === 'string' ? option : option.value}
+              value={typeof option === 'string' ? option : option.value}
+            >
+              {typeof option === 'string' ? option : option.label}
+            </option>
+          ))}
+      </select>
+    </div>
+  );
+};
+
+export default Select;
diff --git a/packages/ui-react/src/components/Checkbox/Checkbox.module.scss b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.module.scss
similarity index 81%
rename from packages/ui-react/src/components/Checkbox/Checkbox.module.scss
rename to packages/ui-react/src/components/form-fields/Checkbox/Checkbox.module.scss
index 8f8491a28..8bd161386 100644
--- a/packages/ui-react/src/components/Checkbox/Checkbox.module.scss
+++ b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.module.scss
@@ -9,6 +9,10 @@
     font-size: 14px;
     cursor: pointer;
 
+    > span {
+      margin-right: 4px;
+    }
+
     a {
       color: variables.$white;
       font-weight: var(--body-font-weight-bold);
@@ -24,20 +28,6 @@
     }
   }
 
-  .header {
-    display: inline-block;
-    width: 100%;
-    margin-bottom: 8px;
-    font-weight: var(--body-font-weight-bold);
-    text-align: left;
-
-    > span {
-      float: right;
-      color: rgba(variables.$white, 0.7);
-      font-weight: normal;
-    }
-  }
-
   input {
     display: inline-flex;
     flex-shrink: 0;
@@ -77,7 +67,7 @@
 
     &:not(:checked) {
       border: 2px solid theme.$input-resting-border-color;
-      &:hover {
+      &:hover:not(:disabled) {
         border-color: theme.$input-hover-border-color;
       }
     }
@@ -96,10 +86,3 @@
   display: flex;
   align-items: center;
 }
-
-.helperTextError {
-  margin-top: -5px;
-  margin-left: 35px;
-  color: theme.$text-field-error-color;
-  font-size: 10px;
-}
diff --git a/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.test.tsx b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.test.tsx
new file mode 100644
index 000000000..ed2d6f7ba
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.test.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Checkbox from './Checkbox';
+
+describe('<Checkbox>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<Checkbox checkboxLabel="label" name="name" value="value" onChange={vi.fn()} />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should set the checked state', () => {
+    const { getByLabelText } = render(<Checkbox checkboxLabel="label" name="name" value="value" checked={true} onChange={vi.fn()} />);
+
+    expect(getByLabelText('label')).toBeChecked();
+  });
+
+  test('should mark when required ', () => {
+    const { getByText } = render(<Checkbox checkboxLabel="label" name="name" value="value" checked={true} onChange={vi.fn()} required />);
+
+    expect(getByText('*')).toBeVisible();
+  });
+});
diff --git a/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
new file mode 100644
index 000000000..816382c58
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
@@ -0,0 +1,71 @@
+import React, { type InputHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { FormField } from '../../FormField/FormField';
+import type { FormControlProps } from '../../../types/form';
+
+import styles from './Checkbox.module.scss';
+
+type HTMLCheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = HTMLCheckboxProps & {
+  checkboxLabel?: React.ReactNode;
+  helperText?: React.ReactNode;
+} & FormControlProps;
+
+const Checkbox: React.FC<Props> = ({
+  className,
+  label,
+  checkboxLabel,
+  name,
+  onChange,
+  editing = true,
+  value,
+  helperText,
+  error,
+  required,
+  lang,
+  size,
+  ...rest
+}) => {
+  const fieldClassName = classNames(styles.checkbox, { [styles.error]: error }, className);
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    if (!editing) {
+      return event.preventDefault();
+    }
+    onChange?.(event);
+  };
+
+  return (
+    <FormField
+      className={fieldClassName}
+      name={name}
+      label={label}
+      editing={editing}
+      required={required}
+      error={error}
+      helperText={helperText}
+      renderInput={({ id, helperTextId }) => (
+        <div className={styles.row}>
+          <input
+            name={name}
+            type="checkbox"
+            id={id}
+            value={value}
+            aria-required={required}
+            aria-describedby={helperTextId}
+            {...rest}
+            onChange={handleChange}
+            readOnly={!editing}
+          />
+          <label htmlFor={id} lang={lang}>
+            {required ? <span role="presentation">*</span> : ''}
+            {checkboxLabel}
+          </label>
+        </div>
+      )}
+    />
+  );
+};
+
+export default Checkbox;
diff --git a/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/ui-react/src/components/form-fields/Checkbox/__snapshots__/Checkbox.test.tsx.snap
similarity index 67%
rename from packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index dbf01ce28..07d166cc5 100644
--- a/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -3,24 +3,21 @@
 exports[`<Checkbox> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_checkbox_531f07"
+    class="_formField_86f2f5 _checkbox_a98c3a"
   >
     <div
-      class="_row_531f07"
+      class="_row_a98c3a"
     >
       <input
         aria-describedby="helper_text_1235_name"
-        id="check-box_1235_name"
+        id="text-field_1235_name"
         name="name"
         type="checkbox"
         value="value"
       />
       <label
-        for="check-box_1235_name"
+        for="text-field_1235_name"
       >
-        <span
-          aria-hidden="true"
-        />
         label
       </label>
     </div>
diff --git a/packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.test.tsx b/packages/ui-react/src/components/form-fields/CreditCardCVCField/CreditCardCVCField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.test.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardCVCField/CreditCardCVCField.test.tsx
diff --git a/packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.tsx b/packages/ui-react/src/components/form-fields/CreditCardCVCField/CreditCardCVCField.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardCVCField/CreditCardCVCField.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardCVCField/CreditCardCVCField.tsx
diff --git a/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap b/packages/ui-react/src/components/form-fields/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
similarity index 70%
rename from packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
index b8a970262..3d13971c5 100644
--- a/packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap
@@ -3,23 +3,29 @@
 exports[`<CreditCardCVCField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b directPostSecurityCode"
+    class="_formField_86f2f5 _textField_c799b0 directPostSecurityCode"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_cardcvc"
     >
       payment.security_code
+      <span
+        aria-hidden="true"
+      >
+        *
+      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_cardcvc"
         aria-invalid="false"
         aria-label="payment.security_code"
+        aria-required="true"
         autocomplete="cc-csc"
-        class="_input_e16c1b"
+        class="_input_859b20"
         id="text-field_1235_cardcvc"
         name="cardCVC"
         pattern="\\d*"
diff --git a/packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.test.tsx b/packages/ui-react/src/components/form-fields/CreditCardExpiryField/CreditCardExpiryField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.test.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardExpiryField/CreditCardExpiryField.test.tsx
diff --git a/packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.tsx b/packages/ui-react/src/components/form-fields/CreditCardExpiryField/CreditCardExpiryField.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardExpiryField/CreditCardExpiryField.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardExpiryField/CreditCardExpiryField.tsx
diff --git a/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap b/packages/ui-react/src/components/form-fields/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
similarity index 69%
rename from packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
index 04274f67f..c73763e68 100644
--- a/packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap
@@ -3,22 +3,28 @@
 exports[`<CreditCardExpiryField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b directPostExpiryDate"
+    class="_formField_86f2f5 _textField_c799b0 directPostExpiryDate"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_cardexpiry"
     >
       Expiry date
+      <span
+        aria-hidden="true"
+      >
+        *
+      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_cardexpiry"
         aria-invalid="false"
+        aria-required="true"
         autocomplete="cc-exp"
-        class="_input_e16c1b"
+        class="_input_859b20"
         id="text-field_1235_cardexpiry"
         name="cardExpiry"
         pattern="\\d*"
diff --git a/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.module.scss b/packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.module.scss
similarity index 100%
rename from packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.module.scss
rename to packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.module.scss
diff --git a/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.test.tsx b/packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.test.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.test.tsx
diff --git a/packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.tsx b/packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.tsx
similarity index 100%
rename from packages/ui-react/src/components/CreditCardNumberField/CreditCardNumberField.tsx
rename to packages/ui-react/src/components/form-fields/CreditCardNumberField/CreditCardNumberField.tsx
diff --git a/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap b/packages/ui-react/src/components/form-fields/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
similarity index 69%
rename from packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
index 471171761..1830eca82 100644
--- a/packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap
@@ -3,22 +3,28 @@
 exports[`<CreditCardNumberField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b directPostCreditCardNumber"
+    class="_formField_86f2f5 _textField_c799b0 directPostCreditCardNumber"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_cardnumber"
     >
       Card number
+      <span
+        aria-hidden="true"
+      >
+        *
+      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_cardnumber"
         aria-invalid="false"
+        aria-required="true"
         autocomplete="cc-number"
-        class="_input_e16c1b"
+        class="_input_859b20"
         id="text-field_1235_cardnumber"
         name="cardNumber"
         pattern="\\d*"
diff --git a/packages/ui-react/src/components/form-fields/DateField/DateField.module.scss b/packages/ui-react/src/components/form-fields/DateField/DateField.module.scss
new file mode 100644
index 000000000..62488fdec
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/DateField/DateField.module.scss
@@ -0,0 +1,64 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+
+@use '../../Input/Input.module.scss';
+
+.dateField {
+  width: 100%;
+  margin-bottom: 8px;
+
+  &.error {
+    .container {
+      border-color: theme.$text-field-error-color;
+    }
+  }
+
+  &.disabled {
+    .container {
+      opacity: 0.7;
+    }
+  }
+
+  &:hover {
+    &:not(.disabled) {
+      .container {
+        background-color: theme.$text-field-hover-bg-color;
+        border-color: theme.$text-field-hover-border-color;
+      }
+    }
+  }
+}
+
+// below is inferred and extended from Input.module.scss
+.container {
+  display: flex;
+  align-items: center;
+}
+
+.input {
+  text-align: center;
+
+  &::-webkit-inner-spin-button {
+    display: none;
+  }
+
+  &[name="date"] {
+    width: 43px;
+    padding-right: 4px;
+  }
+
+  &[name="month"] {
+    width: 35px;
+    padding-right: 4px;
+    padding-left: 4px;
+  }
+
+  &[name="year"] {
+    width: 60px;
+    padding-left: 4px;
+  }
+}
+
+.hiddenInput {
+  display: none;
+}
diff --git a/packages/ui-react/src/components/DateField/DateField.tsx b/packages/ui-react/src/components/form-fields/DateField/DateField.tsx
similarity index 50%
rename from packages/ui-react/src/components/DateField/DateField.tsx
rename to packages/ui-react/src/components/form-fields/DateField/DateField.tsx
index 41b7e6130..a9f1987aa 100644
--- a/packages/ui-react/src/components/DateField/DateField.tsx
+++ b/packages/ui-react/src/components/form-fields/DateField/DateField.tsx
@@ -1,32 +1,47 @@
-import React, { type ReactNode, useRef, useState } from 'react';
+import React, { type InputHTMLAttributes, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
 import useOpaqueId from '@jwp/ott-hooks-react/src/useOpaqueId';
 
-import HelperText from '../HelperText/HelperText';
+import { FormField } from '../../FormField/FormField';
+import type { FormControlProps } from '../../../types/form';
 
 import styles from './DateField.module.scss';
 
-type Props = {
-  className?: string;
-  label?: ReactNode;
-  name?: string;
-  value: string;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = InputProps & {
   format?: string;
-  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onFocus?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   helperText?: React.ReactNode;
-  error?: boolean;
-  required?: boolean;
-  testId?: string;
-};
+} & FormControlProps;
+
+const parseDateString = (dateString: string | undefined) => {
+  if (!dateString) return null;
 
-const parseDateString = (dateString: string) => {
   const date = new Date(dateString);
 
   return isNaN(date.getTime()) ? null : date;
 };
 
+const padLeft = (value: number) => {
+  return value > 0 && value < 10 ? `0${value}` : value.toString();
+};
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+const parseBlurValue = (value: string, min: number, max: number) => {
+  const parsed = clamp(parseInt(value), min, max);
+  if (isNaN(parsed)) return '';
+
+  return value.length > 0 && parsed < 10 ? padLeft(parsed) : parsed.toString();
+};
+
+const parseInputValue = (value: string, min: number, max: number) => {
+  const parsed = clamp(parseInt(value), min, max);
+  if (isNaN(parsed)) return '';
+
+  return value.length > 1 && parsed < 10 ? padLeft(parsed) : parsed.toString();
+};
+
 const DateField: React.FC<Props> = ({
   className,
   label,
@@ -36,12 +51,12 @@ const DateField: React.FC<Props> = ({
   onChange,
   format = 'YYYY-MM-DD',
   name,
+  editing,
+  lang,
   required,
   onFocus,
   testId,
-  ...rest
 }: Props) => {
-  const { t } = useTranslation('common');
   const parsedDate = parseDateString(value);
 
   const [values, setValues] = useState({
@@ -55,7 +70,7 @@ const DateField: React.FC<Props> = ({
 
   const hiddenInputRef = useRef<HTMLInputElement>(null);
 
-  const DateFieldClassName = classNames(
+  const dateFieldClassName = classNames(
     styles.dateField,
     {
       [styles.error]: error,
@@ -80,26 +95,6 @@ const DateField: React.FC<Props> = ({
     }
   };
 
-  const padLeft = (value: number) => {
-    return value > 0 && value < 10 ? `0${value}` : value.toString();
-  };
-
-  const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
-
-  const parseBlurValue = (value: string, min: number, max: number) => {
-    const parsed = clamp(parseInt(value), min, max);
-    if (isNaN(parsed)) return '';
-
-    return value.length > 0 && parsed < 10 ? padLeft(parsed) : parsed.toString();
-  };
-
-  const parseInputValue = (value: string, min: number, max: number) => {
-    const parsed = clamp(parseInt(value), min, max);
-    if (isNaN(parsed)) return '';
-
-    return value.length > 1 && parsed < 10 ? padLeft(parsed) : parsed.toString();
-  };
-
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
 
@@ -142,71 +137,75 @@ const DateField: React.FC<Props> = ({
   };
 
   return (
-    <div className={DateFieldClassName} {...rest} data-testid={testId} id={id}>
-      <label htmlFor={id} className={styles.label}>
-        {label}
-        {!required ? <span>{t('optional')}</span> : null}
-      </label>
-      <div className={styles.container}>
-        {/* don't be tempted to make it type="hidden", onChange will practically be ignored that way */}
-        <input
-          ref={hiddenInputRef}
-          id={`${id}-hidden`}
-          className={styles.hiddenInput}
-          name={name}
-          onChange={onChange}
-          aria-invalid={error}
-          aria-describedby={helperTextId}
-        />
-        <input
-          className={styles.input}
-          name="date"
-          placeholder="dd"
-          value={values.date}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          maxLength={2}
-          type="number"
-          id={`${id}-date`}
-          autoComplete="bday-day"
-        />
-        {' / '}
-        <input
-          className={styles.input}
-          name="month"
-          placeholder="mm"
-          value={values.month}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          maxLength={2}
-          type="number"
-          id={`${id}-month`}
-          autoComplete="bday-month"
-        />
-        {' / '}
-        <input
-          className={styles.input}
-          name="year"
-          placeholder="yyyy"
-          value={values.year}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          maxLength={4}
-          type="number"
-          id={`${id}-year`}
-          autoComplete="bday-year"
-        />
-      </div>
-      <HelperText id={helperTextId} error={error}>
-        {helperText}
-      </HelperText>
-    </div>
+    <FormField
+      className={dateFieldClassName}
+      name={name}
+      helperText={helperText}
+      error={error}
+      label={label}
+      editing={editing}
+      lang={lang}
+      required={required}
+      testId={testId}
+      renderInput={() => (
+        <div className={styles.container}>
+          {/* don't be tempted to make it type="hidden", onChange will practically be ignored that way */}
+          <input
+            ref={hiddenInputRef}
+            id={`${id}-hidden`}
+            className={styles.hiddenInput}
+            name={name}
+            onChange={onChange}
+            aria-invalid={error}
+            aria-describedby={helperTextId}
+          />
+          <input
+            className={styles.input}
+            name="date"
+            placeholder="dd"
+            value={values.date}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            maxLength={2}
+            type="number"
+            id={`${id}-date`}
+            autoComplete="bday-day"
+          />
+          {' / '}
+          <input
+            className={styles.input}
+            name="month"
+            placeholder="mm"
+            value={values.month}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            maxLength={2}
+            type="number"
+            id={`${id}-month`}
+            autoComplete="bday-month"
+          />
+          {' / '}
+          <input
+            className={styles.input}
+            name="year"
+            placeholder="yyyy"
+            value={values.year}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            maxLength={4}
+            type="number"
+            id={`${id}-year`}
+            autoComplete="bday-year"
+          />
+        </div>
+      )}
+    />
   );
 };
 
diff --git a/packages/ui-react/src/components/Dropdown/Dropdown.test.tsx b/packages/ui-react/src/components/form-fields/Dropdown/Dropdown.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/Dropdown/Dropdown.test.tsx
rename to packages/ui-react/src/components/form-fields/Dropdown/Dropdown.test.tsx
diff --git a/packages/ui-react/src/components/form-fields/Dropdown/Dropdown.tsx b/packages/ui-react/src/components/form-fields/Dropdown/Dropdown.tsx
new file mode 100644
index 000000000..865328322
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Dropdown/Dropdown.tsx
@@ -0,0 +1,46 @@
+import React, { type InputHTMLAttributes } from 'react';
+
+import { FormField } from '../../FormField/FormField';
+import Select from '../../Select/Select';
+import type { FormControlProps } from '../../../types/form';
+
+type SelectProps = Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'>;
+
+type Props = SelectProps & {
+  defaultLabel?: string;
+  options?: (string | { value: string; label: string })[];
+  optionsStyle?: string;
+  helperText?: React.ReactNode;
+} & FormControlProps;
+
+const Dropdown: React.FC<Props> = ({
+  name,
+  className,
+  label,
+  error,
+  helperText,
+  editing = true,
+  required = false,
+  size = 'medium',
+  testId,
+  lang,
+  ...inputProps
+}) => {
+  return (
+    <FormField
+      className={className}
+      error={error}
+      helperText={helperText}
+      label={label}
+      required={required}
+      editing={editing}
+      testId={testId}
+      name={name}
+      size={size}
+      lang={lang}
+      renderInput={(fieldProps) => <Select name={name} required={required} editing={editing} error={error} size={size} {...fieldProps} {...inputProps} />}
+    />
+  );
+};
+
+export default Dropdown;
diff --git a/packages/ui-react/src/components/PasswordField/PasswordField.test.tsx b/packages/ui-react/src/components/form-fields/PasswordField/PasswordField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/PasswordField/PasswordField.test.tsx
rename to packages/ui-react/src/components/form-fields/PasswordField/PasswordField.test.tsx
diff --git a/packages/ui-react/src/components/PasswordField/PasswordField.tsx b/packages/ui-react/src/components/form-fields/PasswordField/PasswordField.tsx
similarity index 70%
rename from packages/ui-react/src/components/PasswordField/PasswordField.tsx
rename to packages/ui-react/src/components/form-fields/PasswordField/PasswordField.tsx
index a4eceecd3..8e5e708d3 100644
--- a/packages/ui-react/src/components/PasswordField/PasswordField.tsx
+++ b/packages/ui-react/src/components/form-fields/PasswordField/PasswordField.tsx
@@ -1,27 +1,22 @@
-import React from 'react';
+import React, { type InputHTMLAttributes } from 'react';
 import { useTranslation } from 'react-i18next';
 import useToggle from '@jwp/ott-hooks-react/src/useToggle';
 import Visibility from '@jwp/ott-theme/assets/icons/visibility.svg?react';
 import VisibilityOff from '@jwp/ott-theme/assets/icons/visibility_off.svg?react';
 
 import TextField from '../TextField/TextField';
-import PasswordStrength from '../PasswordStrength/PasswordStrength';
-import IconButton from '../IconButton/IconButton';
-import Icon from '../Icon/Icon';
+import PasswordStrength from '../../PasswordStrength/PasswordStrength';
+import IconButton from '../../IconButton/IconButton';
+import Icon from '../../Icon/Icon';
+import type { FormControlProps } from '../../../types/form';
 
-type Props = React.InputHTMLAttributes<HTMLInputElement> & {
-  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  error?: boolean;
-  value?: string;
-  label?: string;
-  placeholder?: string;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = InputProps & {
   helperText?: React.ReactNode;
-  name: string;
-  required?: boolean;
   showToggleView?: boolean;
   showHelperText?: boolean;
-};
+} & FormControlProps;
 
 const PasswordField: React.FC<Props> = ({ value, showToggleView = true, helperText, showHelperText = true, ...props }: Props) => {
   const { t } = useTranslation('account');
@@ -31,7 +26,7 @@ const PasswordField: React.FC<Props> = ({ value, showToggleView = true, helperTe
     <TextField
       {...props}
       helperText={
-        helperText ||
+        helperText ??
         (showHelperText ? (
           <React.Fragment>
             <PasswordStrength password={value || ''} />
diff --git a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap b/packages/ui-react/src/components/form-fields/PasswordField/__snapshots__/PasswordField.test.tsx.snap
similarity index 85%
rename from packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/PasswordField/__snapshots__/PasswordField.test.tsx.snap
index 52ffd8085..e339a2012 100644
--- a/packages/ui-react/src/components/PasswordField/__snapshots__/PasswordField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/PasswordField/__snapshots__/PasswordField.test.tsx.snap
@@ -3,21 +3,27 @@
 exports[`<PasswordField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b _rightControl_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_password"
     >
       Label
+      <span
+        aria-hidden="true"
+      >
+        *
+      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20 _rightControl_859b20"
     >
       <input
         aria-describedby="helper_text_1235_password"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="true"
+        class="_input_859b20"
         id="text-field_1235_password"
         name="password"
         placeholder="Placeholder"
@@ -26,7 +32,7 @@ exports[`<PasswordField> > renders and matches snapshot 1`] = `
         value=""
       />
       <div
-        class="_control_e16c1b"
+        class="_control_859b20"
       >
         <button
           aria-label="reset.view_password"
diff --git a/packages/ui-react/src/components/Radio/Radio.module.scss b/packages/ui-react/src/components/form-fields/Radio/Radio.module.scss
similarity index 77%
rename from packages/ui-react/src/components/Radio/Radio.module.scss
rename to packages/ui-react/src/components/form-fields/Radio/Radio.module.scss
index e28160388..dddf1b517 100644
--- a/packages/ui-react/src/components/Radio/Radio.module.scss
+++ b/packages/ui-react/src/components/form-fields/Radio/Radio.module.scss
@@ -1,24 +1,19 @@
 @use '@jwp/ott-ui-react/src/styles/variables';
 @use '@jwp/ott-ui-react/src/styles/theme';
 
-.header {
-  display: flex;
-  margin-bottom: 8px;
-  font-weight: var(--body-font-weight-bold);
-  text-align: left;
-
-  > span.note {
-    margin-left: auto;
-    color: rgba(variables.$white, 0.7);
-    font-weight: normal;
-  }
-}
-
 .radio {
   display: flex;
   align-items: center;
   margin-bottom: 8px;
 
+  &.error {
+    input {
+      &:not(:checked) {
+        border: 2px solid theme.$input-field-error-color;
+      }
+    }
+  }
+
   > label {
     margin-left: calc(#{variables.$base-spacing} / 2);
     font-size: 14px;
@@ -31,12 +26,22 @@
     height: 20px;
     margin: 0;
     border-radius: 15px;
+    cursor: pointer;
     transition: all 0.1s;
     appearance: none;
 
+    &:disabled {
+      opacity: 0.6;
+      pointer-events: none;
+
+      + label {
+        pointer-events: none;
+      }
+    }
+
     &:not(:checked) {
       border: 2px solid theme.$input-resting-border-color;
-      &:hover {
+      &:hover:not(:disabled) {
         border-color: theme.$input-hover-border-color;
       }
     }
diff --git a/packages/ui-react/src/components/Radio/Radio.test.tsx b/packages/ui-react/src/components/form-fields/Radio/Radio.test.tsx
similarity index 94%
rename from packages/ui-react/src/components/Radio/Radio.test.tsx
rename to packages/ui-react/src/components/form-fields/Radio/Radio.test.tsx
index 177460d4d..1889d668b 100644
--- a/packages/ui-react/src/components/Radio/Radio.test.tsx
+++ b/packages/ui-react/src/components/form-fields/Radio/Radio.test.tsx
@@ -8,7 +8,7 @@ describe('<Radio>', () => {
     const { container } = render(
       <Radio
         name="radio"
-        header={'Choose a Value'}
+        label={'Choose a Value'}
         onChange={vi.fn()}
         value="value1"
         values={Array.of({ value: 'value1', label: 'Label 1 ' }, { value: 'value2', label: 'Label 2 ' }, { value: 'value3', label: 'Label 3 ' })}
diff --git a/packages/ui-react/src/components/form-fields/Radio/Radio.tsx b/packages/ui-react/src/components/form-fields/Radio/Radio.tsx
new file mode 100644
index 000000000..e37d6d0ee
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Radio/Radio.tsx
@@ -0,0 +1,56 @@
+import React, { type InputHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import type { FormControlProps } from '../../../types/form';
+import { FormField } from '../../FormField/FormField';
+
+import styles from './Radio.module.scss';
+
+type HTMLRadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = HTMLRadioProps & {
+  values: { value: string; label: string }[];
+  helperText?: React.ReactNode;
+} & FormControlProps;
+
+const Radio: React.FC<Props> = ({ name, onChange, label, value, editing = true, size, values, helperText, error, required, disabled, lang, ...rest }) => {
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    if (!editing) {
+      return event.preventDefault();
+    }
+    onChange?.(event);
+  };
+
+  return (
+    <FormField
+      name={name}
+      label={label}
+      error={error}
+      helperText={helperText}
+      required={required}
+      renderInput={({ id, helperTextId }) => (
+        <div id={id}>
+          {values.map(({ value: optionValue, label: optionLabel }, index) => (
+            <div className={classNames(styles.radio, { [styles.error]: error })} key={index} lang={lang}>
+              <input
+                value={optionValue}
+                name={name}
+                type="radio"
+                id={id + index}
+                onChange={handleChange}
+                checked={value === optionValue}
+                required={required}
+                disabled={disabled}
+                aria-describedby={helperTextId}
+                {...rest}
+              />
+              <label htmlFor={id + index}>{optionLabel}</label>
+            </div>
+          ))}
+        </div>
+      )}
+    />
+  );
+};
+
+export default Radio;
diff --git a/packages/ui-react/src/components/form-fields/Radio/__snapshots__/Radio.test.tsx.snap b/packages/ui-react/src/components/form-fields/Radio/__snapshots__/Radio.test.tsx.snap
new file mode 100644
index 000000000..fa69ae07f
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/Radio/__snapshots__/Radio.test.tsx.snap
@@ -0,0 +1,75 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Radio> > renders and matches snapshot 1`] = `
+<div>
+  <div
+    class="_formField_86f2f5"
+  >
+    <label
+      class="_label_86f2f5"
+      for="text-field_1235_radio"
+    >
+      Choose a Value
+    </label>
+    <div
+      id="text-field_1235_radio"
+    >
+      <div
+        class="_radio_854545"
+      >
+        <input
+          aria-describedby="helper_text_1235_radio"
+          checked=""
+          id="text-field_1235_radio0"
+          name="radio"
+          type="radio"
+          value="value1"
+        />
+        <label
+          for="text-field_1235_radio0"
+        >
+          Label 1 
+        </label>
+      </div>
+      <div
+        class="_radio_854545"
+      >
+        <input
+          aria-describedby="helper_text_1235_radio"
+          id="text-field_1235_radio1"
+          name="radio"
+          type="radio"
+          value="value2"
+        />
+        <label
+          for="text-field_1235_radio1"
+        >
+          Label 2 
+        </label>
+      </div>
+      <div
+        class="_radio_854545"
+      >
+        <input
+          aria-describedby="helper_text_1235_radio"
+          id="text-field_1235_radio2"
+          name="radio"
+          type="radio"
+          value="value3"
+        />
+        <label
+          for="text-field_1235_radio2"
+        >
+          Label 3 
+        </label>
+      </div>
+    </div>
+    <div
+      class="_helperText_da58e0"
+      id="helper_text_1235_radio"
+    >
+      This is required!
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/ui-react/src/components/form-fields/TextField/TextField.module.scss b/packages/ui-react/src/components/form-fields/TextField/TextField.module.scss
new file mode 100644
index 000000000..e1bdad729
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/TextField/TextField.module.scss
@@ -0,0 +1,7 @@
+@use '@jwp/ott-ui-react/src/styles/variables';
+@use '@jwp/ott-ui-react/src/styles/theme';
+
+.textField {
+  width: 100%;
+  margin-bottom: 8px;
+}
diff --git a/packages/ui-react/src/components/TextField/TextField.test.tsx b/packages/ui-react/src/components/form-fields/TextField/TextField.test.tsx
similarity index 100%
rename from packages/ui-react/src/components/TextField/TextField.test.tsx
rename to packages/ui-react/src/components/form-fields/TextField/TextField.test.tsx
diff --git a/packages/ui-react/src/components/form-fields/TextField/TextField.tsx b/packages/ui-react/src/components/form-fields/TextField/TextField.tsx
new file mode 100644
index 000000000..858952dc9
--- /dev/null
+++ b/packages/ui-react/src/components/form-fields/TextField/TextField.tsx
@@ -0,0 +1,35 @@
+import React, { type InputHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { FormField } from '../../FormField/FormField';
+import Input from '../../Input/Input';
+import type { FormControlProps } from '../../../types/form';
+
+import styles from './TextField.module.scss';
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+type Props = InputProps & {
+  helperText?: React.ReactNode;
+  multiline?: boolean;
+  leftControl?: React.ReactNode;
+  rightControl?: React.ReactNode;
+} & FormControlProps;
+
+const TextField: React.FC<Props> = ({ className, helperText, label, error, required, editing = true, testId, name, ...inputProps }) => {
+  return (
+    <FormField
+      className={classNames(styles.textField, className)}
+      error={error}
+      helperText={helperText}
+      label={label}
+      required={required}
+      editing={editing}
+      testId={testId}
+      name={name}
+      renderInput={(fieldProps) => <Input editing={editing} error={error} name={name} required={required} {...fieldProps} {...inputProps} />}
+    />
+  );
+};
+
+export default TextField;
diff --git a/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/ui-react/src/components/form-fields/TextField/__snapshots__/TextField.test.tsx.snap
similarity index 72%
rename from packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
rename to packages/ui-react/src/components/form-fields/TextField/__snapshots__/TextField.test.tsx.snap
index baef0b215..ea0ff8492 100644
--- a/packages/ui-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/packages/ui-react/src/components/form-fields/TextField/__snapshots__/TextField.test.tsx.snap
@@ -3,24 +3,22 @@
 exports[`<TextField> > renders and matches multiline readonly snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       Label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <textarea
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         placeholder="Placeholder"
@@ -35,24 +33,22 @@ exports[`<TextField> > renders and matches multiline readonly snapshot 1`] = `
 exports[`<TextField> > renders and matches multiline snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       Label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <textarea
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         placeholder="Placeholder"
@@ -66,24 +62,22 @@ exports[`<TextField> > renders and matches multiline snapshot 1`] = `
 exports[`<TextField> > renders and matches readonly snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       Label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         placeholder="Placeholder"
@@ -99,24 +93,22 @@ exports[`<TextField> > renders and matches readonly snapshot 1`] = `
 exports[`<TextField> > renders and matches snapshot 1`] = `
 <div>
   <div
-    class="_textField_e16c1b"
+    class="_formField_86f2f5 _textField_c799b0"
   >
     <label
-      class="_label_e16c1b"
+      class="_label_86f2f5"
       for="text-field_1235_name"
     >
       Label
-      <span>
-        optional
-      </span>
     </label>
     <div
-      class="_container_e16c1b"
+      class="_container_859b20"
     >
       <input
         aria-describedby="helper_text_1235_name"
         aria-invalid="false"
-        class="_input_e16c1b"
+        aria-required="false"
+        class="_input_859b20"
         id="text-field_1235_name"
         name="name"
         placeholder="Placeholder"
diff --git a/packages/ui-react/src/containers/Profiles/Form.tsx b/packages/ui-react/src/containers/Profiles/Form.tsx
index 212986202..a367fd538 100644
--- a/packages/ui-react/src/containers/Profiles/Form.tsx
+++ b/packages/ui-react/src/containers/Profiles/Form.tsx
@@ -10,9 +10,9 @@ import { PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
 
 import styles from '../../pages/User/User.module.scss';
 import Button from '../../components/Button/Button';
-import Dropdown from '../../components/Dropdown/Dropdown';
+import Dropdown from '../../components/form-fields/Dropdown/Dropdown';
 import FormFeedback from '../../components/FormFeedback/FormFeedback';
-import TextField from '../../components/TextField/TextField';
+import TextField from '../../components/form-fields/TextField/TextField';
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 import ProfileBox from '../../components/ProfileBox/ProfileBox';
 
@@ -84,11 +84,9 @@ const Form = ({ initialValues, formHandler, selectedAvatar, showCancelButton = t
           />
           {showContentRating && (
             <Dropdown
-              fullWidth
               required
               name="adult"
               label={t('profile.content_rating')}
-              className={styles.dropdown}
               options={options}
               value={values?.adult?.toString() || 'true'}
               onChange={handleChange}
diff --git a/packages/ui-react/src/pages/Home/Home.tsx b/packages/ui-react/src/pages/Home/Home.tsx
index 82baf59e1..b58bceaed 100644
--- a/packages/ui-react/src/pages/Home/Home.tsx
+++ b/packages/ui-react/src/pages/Home/Home.tsx
@@ -6,8 +6,6 @@ import { useTranslation } from 'react-i18next';
 
 import ShelfList from '../../containers/ShelfList/ShelfList';
 
-import '../../styles/accessibility.scss';
-
 const Home = () => {
   const { config } = useConfigStore(({ config, accessModel }) => ({ config, accessModel }), shallow);
   const content: Content[] = config?.content;
diff --git a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
index 033dbb54c..c6c0ec92b 100644
--- a/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
+++ b/packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap
@@ -116,10 +116,10 @@ exports[`User Component tests > Account Page 1`] = `
           novalidate=""
         >
           <div
-            class="_textField_e16c1b"
+            class="_formField_86f2f5 _textField_c799b0"
           >
             <label
-              class="_label_e16c1b"
+              class="_label_86f2f5"
               for="text-field_1235_firstname"
             >
               account.firstname
@@ -127,8 +127,9 @@ exports[`User Component tests > Account Page 1`] = `
             <input
               aria-describedby="helper_text_1235_firstname"
               aria-invalid="false"
+              aria-required="false"
               autocomplete="given-name"
-              class="_input_e16c1b"
+              class="_input_859b20"
               id="text-field_1235_firstname"
               lang="en"
               name="firstName"
@@ -138,10 +139,10 @@ exports[`User Component tests > Account Page 1`] = `
             />
           </div>
           <div
-            class="_textField_e16c1b"
+            class="_formField_86f2f5 _textField_c799b0"
           >
             <label
-              class="_label_e16c1b"
+              class="_label_86f2f5"
               for="text-field_1235_lastname"
             >
               account.lastname
@@ -149,8 +150,9 @@ exports[`User Component tests > Account Page 1`] = `
             <input
               aria-describedby="helper_text_1235_lastname"
               aria-invalid="false"
+              aria-required="false"
               autocomplete="family-name"
-              class="_input_e16c1b"
+              class="_input_859b20"
               id="text-field_1235_lastname"
               lang="en"
               name="lastName"
@@ -191,10 +193,10 @@ exports[`User Component tests > Account Page 1`] = `
           novalidate=""
         >
           <div
-            class="_textField_e16c1b"
+            class="_formField_86f2f5 _textField_c799b0"
           >
             <label
-              class="_label_e16c1b"
+              class="_label_86f2f5"
               for="text-field_1235_email"
             >
               account.email
@@ -202,8 +204,9 @@ exports[`User Component tests > Account Page 1`] = `
             <input
               aria-describedby="helper_text_1235_email"
               aria-invalid="false"
+              aria-required="true"
               autocomplete="email"
-              class="_input_e16c1b"
+              class="_input_859b20"
               id="text-field_1235_email"
               name="email"
               readonly=""
@@ -712,10 +715,10 @@ exports[`User Component tests > Payments Page 1`] = `
         </div>
         <div>
           <div
-            class="_textField_e16c1b"
+            class="_formField_86f2f5 _textField_c799b0"
           >
             <label
-              class="_label_e16c1b"
+              class="_label_86f2f5"
               for="text-field_1235_cardnumber"
             >
               user:payment.card_number
@@ -724,8 +727,9 @@ exports[`User Component tests > Payments Page 1`] = `
               aria-describedby="helper_text_1235_cardnumber"
               aria-invalid="false"
               aria-label="user:payment.card_number_hidden"
+              aria-required="false"
               autocomplete="cc-number"
-              class="_input_e16c1b"
+              class="_input_859b20"
               id="text-field_1235_cardnumber"
               name="cardNumber"
               readonly=""
@@ -737,10 +741,10 @@ exports[`User Component tests > Payments Page 1`] = `
             class="_cardDetails_c57ff5"
           >
             <div
-              class="_textField_e16c1b"
+              class="_formField_86f2f5 _textField_c799b0"
             >
               <label
-                class="_label_e16c1b"
+                class="_label_86f2f5"
                 for="text-field_1235_cardexpiry"
               >
                 user:payment.expiry_date
@@ -748,8 +752,9 @@ exports[`User Component tests > Payments Page 1`] = `
               <input
                 aria-describedby="helper_text_1235_cardexpiry"
                 aria-invalid="false"
+                aria-required="false"
                 autocomplete="cc-exp"
-                class="_input_e16c1b"
+                class="_input_859b20"
                 id="text-field_1235_cardexpiry"
                 name="cardExpiry"
                 readonly=""
@@ -758,10 +763,10 @@ exports[`User Component tests > Payments Page 1`] = `
               />
             </div>
             <div
-              class="_textField_e16c1b"
+              class="_formField_86f2f5 _textField_c799b0"
             >
               <label
-                class="_label_e16c1b"
+                class="_label_86f2f5"
                 for="text-field_1235_cardsecuritycode"
               >
                 user:payment.security_code
@@ -770,8 +775,9 @@ exports[`User Component tests > Payments Page 1`] = `
                 aria-describedby="helper_text_1235_cardsecuritycode"
                 aria-invalid="false"
                 aria-label="user:payment.security_code_hidden"
+                aria-required="false"
                 autocomplete="cc-csc"
-                class="_input_e16c1b"
+                class="_input_859b20"
                 id="text-field_1235_cardsecuritycode"
                 name="cardSecurityCode"
                 readonly=""
diff --git a/packages/ui-react/src/types/form.ts b/packages/ui-react/src/types/form.ts
new file mode 100644
index 000000000..1c72e463f
--- /dev/null
+++ b/packages/ui-react/src/types/form.ts
@@ -0,0 +1,15 @@
+import type React from 'react';
+
+export type FormControlProps = {
+  name: string;
+  label?: React.ReactNode;
+  placeholder?: string;
+  className?: string;
+  required?: boolean;
+  error?: boolean;
+  editing?: boolean;
+  testId?: string;
+  value?: string;
+  lang?: string;
+  size?: 'small' | 'medium';
+};
diff --git a/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx b/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx
index 69a55e671..29bad61f0 100644
--- a/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx
+++ b/platforms/web/src/components/DemoConfigDialog/DemoConfigDialog.tsx
@@ -5,7 +5,7 @@ import { Helmet } from 'react-helmet';
 import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { CONFIG_QUERY_KEY } from '@jwp/ott-common/src/constants';
 import ErrorPage from '@jwp/ott-ui-react/src/components/ErrorPage/ErrorPage';
-import TextField from '@jwp/ott-ui-react/src/components/TextField/TextField';
+import TextField from '@jwp/ott-ui-react/src/components/form-fields/TextField/TextField';
 import Button from '@jwp/ott-ui-react/src/components/Button/Button';
 import ConfirmationDialog from '@jwp/ott-ui-react/src/components/ConfirmationDialog/ConfirmationDialog';
 import LoadingOverlay from '@jwp/ott-ui-react/src/components/LoadingOverlay/LoadingOverlay';
diff --git a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
index 32c75eedb..346cd5950 100644
--- a/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
+++ b/platforms/web/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
@@ -55,20 +55,17 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
             target="/"
           >
             <div
-              class="_textField_25c745 _error_25c745 _maxWidth_561a54"
+              class="_formField_a245e1 _textField_0fa545 _maxWidth_561a54"
             >
-              <label
-                class="_label_25c745"
-                for="text-field_1235_app-config"
-              />
               <div
-                class="_container_25c745"
+                class="_container_ac31ed _error_ac31ed"
               >
                 <input
                   aria-describedby="helper_text_1235_app-config"
                   aria-invalid="true"
+                  aria-required="true"
                   autocapitalize="none"
-                  class="_input_25c745"
+                  class="_input_ac31ed"
                   id="text-field_1235_app-config"
                   maxlength="8"
                   name="app-config"

From a5fa52c2b8f76dcd3d9816f288a985e2005301b2 Mon Sep 17 00:00:00 2001
From: Melissa 't Hart <melissa@videodock.com>
Date: Thu, 18 Apr 2024 15:37:24 +0200
Subject: [PATCH 127/128] chore(project): apply aria-hidden and update e2e
 tests

---
 .../__snapshots__/PersonalDetailsForm.test.tsx.snap |  2 ++
 .../components/form-fields/Checkbox/Checkbox.tsx    |  8 +++++++-
 platforms/web/test-e2e/tests/register_test.ts       | 13 -------------
 platforms/web/test-e2e/utils/steps_file.ts          |  8 ++++----
 4 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
index 2d871699b..2e2da4aa9 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
+++ b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -487,6 +487,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           for="text-field_1235_ccc"
         >
           <span
+            aria-hidden="true"
             role="presentation"
           >
             *
@@ -989,6 +990,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
           for="text-field_1235_ccc"
         >
           <span
+            aria-hidden="true"
             role="presentation"
           >
             *
diff --git a/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
index 816382c58..4476c0d13 100644
--- a/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
+++ b/packages/ui-react/src/components/form-fields/Checkbox/Checkbox.tsx
@@ -59,7 +59,13 @@ const Checkbox: React.FC<Props> = ({
             readOnly={!editing}
           />
           <label htmlFor={id} lang={lang}>
-            {required ? <span role="presentation">*</span> : ''}
+            {required ? (
+              <span role="presentation" aria-hidden="true">
+                *
+              </span>
+            ) : (
+              ''
+            )}
             {checkboxLabel}
           </label>
         </div>
diff --git a/platforms/web/test-e2e/tests/register_test.ts b/platforms/web/test-e2e/tests/register_test.ts
index 41cafddc1..65a5e6731 100644
--- a/platforms/web/test-e2e/tests/register_test.ts
+++ b/platforms/web/test-e2e/tests/register_test.ts
@@ -66,19 +66,6 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
     I.dontSeeElement(constants.loginFormSelector);
   });
 
-  Scenario(`The Sign up modal will invalidate upon submit only if a value is inputted - ${providerName}`, async ({ I }) => {
-    I.click('Continue');
-    I.seeElementInDOM('div[class*=formFeedback]'); // This element can be visually hidden through CSS
-    I.seeAttributesOnElements('input[name="email"]', { 'aria-invalid': 'false' });
-    I.seeAttributesOnElements('input[name="password"]', { 'aria-invalid': 'false' });
-
-    I.fillField('Email', 'test');
-    I.fillField('Password', 'test');
-    I.click('Continue');
-    I.seeAttributesOnElements('input[name="email"]', { 'aria-invalid': 'true' });
-    I.seeAttributesOnElements('input[name="password"]', { 'aria-invalid': 'true' });
-  });
-
   Scenario(`I get warned when filling in incorrect credentials - ${providerName}`, async ({ I }) => {
     I.fillField('Email', 'test');
     I.pressKey('Tab');
diff --git a/platforms/web/test-e2e/utils/steps_file.ts b/platforms/web/test-e2e/utils/steps_file.ts
index e7af276e5..070101fba 100644
--- a/platforms/web/test-e2e/utils/steps_file.ts
+++ b/platforms/web/test-e2e/utils/steps_file.ts
@@ -129,7 +129,7 @@ const stepsObj = {
     const requiredTextInputNames: string[] = await this.executeScript(
       ([container, crfFieldSelector]: [string, string]) =>
         Array.from(document.querySelectorAll(`${container} ${crfFieldSelector}`))
-          .filter((element) => !element.querySelector('label')?.innerText.includes('(Optional)'))
+          .filter((element) => element.querySelector('label')?.innerText.includes('*'))
           .map((element) => (element.querySelector('input[type="text"]') as HTMLInputElement)?.name),
       [container, constants.customRegFields.crfTextInput],
     );
@@ -146,7 +146,7 @@ const stepsObj = {
     const requiredRadioValues: string[] = await this.executeScript(
       ([container, crfFieldSelector]: [string, string]) =>
         Array.from(document.querySelectorAll(`${container} ${crfFieldSelector}`))
-          .filter((element) => !(element.querySelector('[data-testid="radio-header"]') as HTMLElement)?.innerText.includes('(Optional)'))
+          .filter((element) => (element.querySelector('[data-testid="radio-header"]') as HTMLElement)?.innerText.includes('*'))
           .map((element) => (element.querySelector('input[type="radio"]') as HTMLInputElement)?.value),
       [container, constants.customRegFields.crfRadioBox],
     );
@@ -164,7 +164,7 @@ const stepsObj = {
       const querySelector = ['crf-select', 'crf-country', 'crf-us_state'].map((testId) => `${container} [data-testid="${testId}"]`).join(', ');
 
       return Array.from(document.querySelectorAll(querySelector))
-        .filter((element) => !element.querySelector('label')?.innerText.includes('(Optional)'))
+        .filter((element) => element.querySelector('label')?.innerText.includes('*'))
         .map((element) => element.querySelector('select')?.name);
     }, container);
 
@@ -185,7 +185,7 @@ const stepsObj = {
     const requiredDatepickerIds: string[] = await this.executeScript(
       ([container, crfFieldSelector]: [string, string]) =>
         Array.from(document.querySelectorAll(`${container} ${crfFieldSelector}`))
-          .filter((element) => !element.querySelector('label')?.innerText.includes('(Optional)'))
+          .filter((element) => element.querySelector('label')?.innerText.includes('*'))
           .map((element) => element.id),
       [container, constants.customRegFields.crfDateField],
     );

From 1ce7c5b3ee820e79494b8ee6b3d487dd7b05ef6b Mon Sep 17 00:00:00 2001
From: Melissa 't Hart <melissa@videodock.com>
Date: Mon, 22 Apr 2024 14:47:07 +0200
Subject: [PATCH 128/128] chore(project): update test, snapshots and remove
 unused props

---
 .../PersonalDetailsForm/PersonalDetailsForm.tsx           | 2 --
 .../__snapshots__/PersonalDetailsForm.test.tsx.snap       | 8 ++++----
 .../__snapshots__/RegistrationForm.test.tsx.snap          | 2 +-
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
index 74dfaf035..9b31e0461 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
+++ b/packages/ui-react/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -18,8 +18,6 @@ import styles from './PersonalDetailsForm.module.scss';
 type Props = {
   initialValues: PersonalDetailsFormData;
   onSubmit: UseFormOnSubmitHandler<PersonalDetailsFormData>;
-  onChange: React.ChangeEventHandler;
-  setValue: (key: keyof PersonalDetailsFormData, value: string) => void;
   error?: string;
   fields: Record<string, CleengCaptureField>;
   questions: CleengCaptureQuestionField[];
diff --git a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
index 2e2da4aa9..5e27e0881 100644
--- a/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
+++ b/packages/ui-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -320,7 +320,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           type="number"
           value="27"
         />
-         /
+         / 
         <input
           autocomplete="bday-month"
           class="_input_0addad"
@@ -331,7 +331,7 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
           type="number"
           value="2"
         />
-         /
+         / 
         <input
           autocomplete="bday-year"
           class="_input_0addad"
@@ -835,7 +835,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
           type="number"
           value="27"
         />
-         /
+         / 
         <input
           autocomplete="bday-month"
           class="_input_0addad"
@@ -846,7 +846,7 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
           type="number"
           value="2"
         />
-         /
+         / 
         <input
           autocomplete="bday-year"
           class="_input_0addad"
diff --git a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
index 71044a889..30363b236 100644
--- a/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
+++ b/packages/ui-react/src/components/RegistrationForm/__snapshots__/RegistrationForm.test.tsx.snap
@@ -135,7 +135,7 @@ exports[`<RegistrationForm> > renders and matches snapshot 1`] = `
       class="_bottom_a472a0"
     >
       registration.already_account
-
+       
       <a
         class="_link_a14c64"
         href="/?u=login"