diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index c0c31e96cc..60a282ee2e 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -27,7 +27,7 @@ jobs:
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -39,7 +39,7 @@ jobs:
         run: |
           echo "::set-output name=dir::$(composer config cache-files-dir)"
       - name: Configure Composer cache
-        uses: actions/cache@v1
+        uses: actions/cache@v3
         with:
           path: ${{ steps.composer-cache.outputs.dir }}
           key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
diff --git a/assets/apps/dashboard/src/Components/App.js b/assets/apps/dashboard/src/Components/App.js
index 1e356e1da9..98702eb4ea 100644
--- a/assets/apps/dashboard/src/Components/App.js
+++ b/assets/apps/dashboard/src/Components/App.js
@@ -1,61 +1,59 @@
+import Container from '../Layout/Container';
+import { fetchOptions } from '../utils/rest';
+import Sidebar from './Content/Sidebar/Sidebar';
 import Header from './Header';
 import Notifications from './Notifications';
-import TabsContent from './TabsContent';
-import Sidebar from './Sidebar';
-import Loading from './Loading';
+import SkeletonLoader from './SkeletonLoader';
 import Snackbar from './Snackbar';
-import { fetchOptions } from '../utils/rest';
+import TransitionWrapper from './Common/TransitionWrapper';
 
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-import { useState, Fragment, useEffect } from '@wordpress/element';
-import Deal from './Deal';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+import { tabs } from '../utils/common';
+import { NEVE_STORE } from '../utils/constants';
 
-const App = ({ setSettings, toast, currentTab, setTab }) => {
+const App = () => {
 	const [loading, setLoading] = useState(true);
+
+	const { setSettings, setTab } = useDispatch(NEVE_STORE);
+
+	const { currentTab } = useSelect((select) => {
+		const { getTab } = select(NEVE_STORE);
+		return {
+			currentTab: getTab(),
+		};
+	});
+
 	useEffect(() => {
 		fetchOptions().then((r) => {
 			setSettings(r);
 			setLoading(false);
 		});
 	}, []);
+
 	if (loading) {
-		return <Loading />;
+		return <SkeletonLoader />;
 	}
 	return (
-		<Fragment>
-			<Header currentTab={currentTab} setTab={setTab} />
-			<div className="content-wrap">
-				<div className="container content">
-					<div className="main">
-						<Deal />
-						{'starter-sites' !== currentTab && <Notifications />}
-						<TabsContent currentTab={currentTab} setTab={setTab} />
-					</div>
-					{'starter-sites' !== currentTab &&
-						'custom-layouts' !== currentTab && (
-							<Sidebar currentTab={currentTab} />
-						)}
-				</div>
-			</div>
-			{toast && <Snackbar />}
-		</Fragment>
+		<div className="antialiased grow flex flex-col gap-6 h-full">
+			<Header />
+
+			{/*<Deal />*/}
+			{'starter-sites' !== currentTab && <Notifications />}
+
+			<Container className="flex flex-col lg:flex-row gap-6 h-full grow">
+				<div className="grow">{tabs[currentTab].render(setTab)}</div>
+
+				{!['starter-sites', 'settings'].includes(currentTab) && (
+					<TransitionWrapper className="shrink-0 lg:w-[435px]">
+						<Sidebar />
+					</TransitionWrapper>
+				)}
+			</Container>
+
+			<Snackbar />
+		</div>
 	);
 };
 
-export default compose(
-	withDispatch((dispatch) => {
-		const { setSettings, setTab } = dispatch('neve-dashboard');
-		return {
-			setSettings: (object) => setSettings(object),
-			setTab: (tab) => setTab(tab),
-		};
-	}),
-	withSelect((select) => {
-		const { getToast, getTab } = select('neve-dashboard');
-		return {
-			toast: getToast(),
-			currentTab: getTab(),
-		};
-	})
-)(App);
+export default App;
diff --git a/assets/apps/dashboard/src/Components/Common/Button.js b/assets/apps/dashboard/src/Components/Common/Button.js
new file mode 100644
index 0000000000..5cf509adc5
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/Button.js
@@ -0,0 +1,81 @@
+import cn from 'classnames';
+import { LoaderCircle } from 'lucide-react';
+import PropTypes from 'prop-types';
+
+const Button = (props) => {
+	const {
+		href,
+		onClick,
+		className = '',
+		isSubmit,
+		isPrimary,
+		isSecondary,
+		isLink,
+		children,
+		disabled,
+		loading,
+		target,
+	} = props;
+
+	const classNames = cn([
+		'flex items-center px-3 py-2 transition-colors duration-150 text-sm border gap-2',
+		{
+			rounded: !className.includes('rounded'),
+			'border-transparent bg-blue-600 text-white': isPrimary,
+			'border-blue-600 text-blue-600': isSecondary,
+			'border-transparent text-gray-600': isLink,
+			'cursor-not-allowed opacity-50': disabled,
+			'hover:bg-blue-700 hover:text-white': !disabled && isPrimary,
+			'hover:bg-blue-600 hover:text-white': !disabled && isSecondary,
+			'hover:text-gray-900': !disabled && isLink,
+		},
+		className,
+	]);
+
+	const passedProps = {
+		className: classNames,
+		disabled,
+		onClick,
+	};
+
+	if (isSubmit) {
+		passedProps.type = 'submit';
+	}
+
+	if (href) {
+		passedProps.href = href;
+	}
+
+	if (target) {
+		passedProps.target = target;
+
+		if (target === '_blank') {
+			passedProps.rel = 'noopener noreferrer';
+		}
+	}
+
+	const TAG = href && !onClick ? 'a' : 'button';
+
+	return (
+		<TAG {...passedProps}>
+			{loading && <LoaderCircle size={18} className="animate-spin" />}
+
+			{children}
+		</TAG>
+	);
+};
+
+Button.propTypes = {
+	href: PropTypes.string,
+	onClick: PropTypes.func,
+	className: PropTypes.string,
+	isSubmit: PropTypes.bool,
+	isPrimary: PropTypes.bool,
+	isSecondary: PropTypes.bool,
+	isLink: PropTypes.bool,
+	children: PropTypes.node,
+	disabled: PropTypes.bool,
+	target: PropTypes.oneOf(['_blank', '_self', '_parent', '_top']),
+};
+
+export default Button;
diff --git a/assets/apps/dashboard/src/Components/Common/Link.js b/assets/apps/dashboard/src/Components/Common/Link.js
new file mode 100644
index 0000000000..147f59b602
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/Link.js
@@ -0,0 +1,36 @@
+import { __ } from '@wordpress/i18n';
+
+import { LucideExternalLink } from 'lucide-react';
+import cn from 'classnames';
+
+export default ({ text, url, isExternal, className }) => {
+	const linkClasses = cn([
+		'text-blue-600 hover:text-blue-700 hover:underline text-sm',
+		className,
+		{
+			'inline-flex gap-1.5 items-center': isExternal,
+		},
+	]);
+	if (!isExternal) {
+		return (
+			<a href={url} className={linkClasses}>
+				{text}
+			</a>
+		);
+	}
+
+	return (
+		<a
+			href={url}
+			target="_blank"
+			rel="noopener noreferrer"
+			className={linkClasses}
+		>
+			{text}
+			<span className="sr-only">
+				{__('(opens in a new tab)', 'neve')}
+			</span>
+			<LucideExternalLink size={16} className="shrink-0" />
+		</a>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Common/Multiselect.js b/assets/apps/dashboard/src/Components/Common/Multiselect.js
new file mode 100644
index 0000000000..f960bed48a
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/Multiselect.js
@@ -0,0 +1,122 @@
+import { useRef, useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import cn from 'classnames';
+import { Check, ChevronDown } from 'lucide-react';
+
+const MultiSelect = ({ value, label, disabled, choices = {}, onChange }) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const dropdownRef = useRef(null);
+
+	const closeDropdown = (e) => {
+		if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+			setIsOpen(false);
+		}
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			document.addEventListener('click', closeDropdown);
+		} else {
+			document.removeEventListener('click', closeDropdown);
+		}
+
+		return () => {
+			document.removeEventListener('click', closeDropdown);
+		};
+	}, [isOpen]);
+
+	const handleChange = (optionValue) => {
+		const nextValues = value.includes(optionValue)
+			? value.filter((v) => v !== optionValue)
+			: [...value, optionValue];
+		onChange(nextValues);
+	};
+
+	return (
+		<div className="grid gap-1">
+			{label && (
+				<span className="text-sm text-gray-600 font-medium">
+					{label}
+				</span>
+			)}
+			<div className="relative">
+				<button
+					onClick={() => !disabled && setIsOpen(!isOpen)}
+					className={cn(
+						'relative w-full py-1.5 px-2 text-sm rounded border flex items-center gap-3 min-w-[200px]',
+						'border-gray-300 hover:border-gray-500',
+						{
+							'bg-gray-100': disabled,
+						}
+					)}
+					disabled={disabled}
+				>
+					<div className="flex flex-wrap gap-1 max-w-[160px] overflow-hidden">
+						{Object.entries(value).length === 0 ? (
+							<span className="text-gray-500">
+								{__('Select options', 'neve')}...
+							</span>
+						) : (
+							value.map((choice, index) => {
+								if (!choices[choice]) {
+									return null;
+								}
+
+								return (
+									<span
+										key={index}
+										className="inline-flex items-center gap-1 bg-blue-100 text-blue-800 rounded px-2 py-0.5 text-xs"
+									>
+										{choices[choice]}
+									</span>
+								);
+							})
+						)}
+					</div>
+
+					<ChevronDown
+						size={18}
+						className={`ml-auto transition-transform ${
+							isOpen ? 'transform rotate-180' : ''
+						}`}
+						aria-hidden="true"
+					/>
+				</button>
+
+				{isOpen && (
+					<div
+						ref={dropdownRef}
+						className="absolute z-10 w-full mt-1 bg-white border rounded shadow-lg"
+					>
+						<div className="max-h-60 overflow-y-auto p-1">
+							{Object.entries(choices).map(
+								([optionValue, optionLabel]) => (
+									<button
+										key={optionValue}
+										className="flex w-full items-center gap-2 text-sm rounded py-1.5 px-3 hover:bg-blue-100 hover:text-blue-700 cursor-pointer"
+										onClick={() =>
+											handleChange(optionValue)
+										}
+									>
+										<div className="w-4 h-4 border bg-white rounded flex items-center justify-center">
+											{value.includes(optionValue) && (
+												<Check
+													size={12}
+													className="text-blue-600"
+												/>
+											)}
+										</div>
+										{optionLabel}
+									</button>
+								)
+							)}
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default MultiSelect;
diff --git a/assets/apps/dashboard/src/Components/Common/Notice.js b/assets/apps/dashboard/src/Components/Common/Notice.js
new file mode 100644
index 0000000000..1c038a78d3
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/Notice.js
@@ -0,0 +1,79 @@
+import { useEffect } from '@wordpress/element';
+import cn from 'classnames';
+import {
+	LucideCircleAlert,
+	LucideCircleCheck,
+	LucideCircleX,
+	LucideInfo,
+} from 'lucide-react';
+
+const Notice = ({
+	children,
+	className = '',
+
+	// Type variants
+	isSuccess = false,
+	isWarning = false,
+	isError = false,
+
+	// Optional custom icon
+	icon: CustomIcon,
+	isAutoDismiss: autoDismiss = 0,
+	onDismiss = () => {},
+}) => {
+	useEffect(() => {
+		if (autoDismiss < 1000) return;
+
+		const dismissTimeout = setTimeout(() => {
+			onDismiss();
+		}, autoDismiss);
+
+		return () => {
+			clearTimeout(dismissTimeout);
+		};
+	}, [autoDismiss, onDismiss]);
+
+	if (!children) return null;
+
+	const getTypeClasses = () => {
+		if (isSuccess) return 'border-lime-300 bg-lime-50 text-lime-800';
+		if (isWarning) return 'border-orange-300 bg-orange-50 text-yellow-800';
+		if (isError) return 'border-red-300 bg-red-50 text-red-800';
+		return 'border-sky-300 bg-sky-50 text-sky-800';
+	};
+
+	const getIcon = () => {
+		if (CustomIcon) return CustomIcon;
+		if (isSuccess) return LucideCircleCheck;
+		if (isWarning) return LucideCircleAlert;
+		if (isError) return LucideCircleX;
+		return LucideInfo;
+	};
+
+	const iconColor = {
+		'text-lime-500': isSuccess,
+		'text-orange-500': isWarning,
+		'text-red-500': isError,
+		'text-sky-500': !isSuccess && !isWarning && !isError,
+	};
+
+	const Icon = getIcon();
+
+	return (
+		<div
+			className={cn(
+				'flex gap-2 p-3 rounded border transition-all duration-500 items-center',
+				getTypeClasses(),
+				className
+			)}
+		>
+			<Icon className={cn('size-4.5 shrink-0 mt-0.5', iconColor)} />
+
+			<div className="flex-1 flex flex-col gap-1">
+				{children && <div className="text-sm">{children}</div>}
+			</div>
+		</div>
+	);
+};
+
+export default Notice;
diff --git a/assets/apps/dashboard/src/Components/Notification.js b/assets/apps/dashboard/src/Components/Common/Notification.js
similarity index 59%
rename from assets/apps/dashboard/src/Components/Notification.js
rename to assets/apps/dashboard/src/Components/Common/Notification.js
index b8cf8a94b4..900a55220b 100644
--- a/assets/apps/dashboard/src/Components/Notification.js
+++ b/assets/apps/dashboard/src/Components/Common/Notification.js
@@ -1,26 +1,59 @@
 /* global neveDash */
-import classnames from 'classnames';
-
-import { sprintf, __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { external } from '@wordpress/icons';
-import { Button, Dashicon, Icon, Tooltip } from '@wordpress/components';
-
-const Notification = ({ data, slug }) => {
-	// eslint-disable-next-line no-unused-vars
+import cn from 'classnames';
+
+import { useState, useEffect } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+import {
+	LucideCircleCheck,
+	LucideCircleX,
+	LucideExternalLink,
+} from 'lucide-react';
+import Card from '../../Layout/Card';
+import Button from './Button';
+import Tooltip from './Tooltip';
+import TransitionInOut from './TransitionInOut';
+
+const Notification = ({ data }) => {
 	const [hidden, setHidden] = useState(false);
 	const { text, cta, type, update, url, targetBlank } = data;
 	const { canInstallPlugins } = neveDash;
 	const [inProgress, setInProgress] = useState(false);
 	const [done, setDone] = useState(false);
 	const [errorMessage, setErrorMessage] = useState(null);
-	const classes = classnames([
-		'notification',
-		slug,
-		type && !done ? type : '',
+
+	useEffect(() => {
+		let timeout;
+		if (done === 'done') {
+			timeout = setTimeout(() => {
+				setHidden(true);
+			}, 5000);
+		}
+
+		return () => {
+			clearTimeout(timeout);
+		};
+	}, [done]);
+
+	const classes = cn([
+		'text-white !p-3 rounded flex flex-col md:flex-row items-center justify-between gap-4',
+		{
+			'bg-blue-500': type === 'info' || (!type && !done),
+			'bg-amber-500': 'warning' === type && !done,
+			'bg-emerald-500': 'success' === type || 'done' === done,
+			'bg-red-500':
+				('error' === type && 'done' !== done) || 'error' === done,
+		},
+	]);
+
+	const buttonClasses = cn([
+		'bg-white border-white hover:opacity-90 text-blue-500 font-medium',
 		{
-			'success hidden': 'done' === done,
-			error: 'error' === done,
+			'!text-blue-600': type === 'info' || (!type && !done),
+			'!text-amber-600': 'warning' === type && !done,
+			'!text-emerald-600': 'success' === type || 'done' === done,
+			'!text-red-600':
+				('error' === type && 'done' !== done) || 'error' === done,
 		},
 	]);
 
@@ -119,23 +152,16 @@ const Notification = ({ data, slug }) => {
 		}
 		return (
 			<Button
-				isSecondary
 				disabled={inProgress || !canInstallPlugins}
-				className={classnames({ 'is-loading': inProgress })}
+				loading={inProgress}
+				className={buttonClasses}
 				onClick={() => {
 					if (update) {
 						updateEntity();
 					}
 				}}
 			>
-				{inProgress ? (
-					<span>
-						<Dashicon icon="update" />{' '}
-						{__('In Progress', 'neve') + '...'}{' '}
-					</span>
-				) : (
-					cta
-				)}
+				{inProgress ? null : cta}
 			</Button>
 		);
 	};
@@ -152,10 +178,6 @@ const Notification = ({ data, slug }) => {
 					__('Neve Pro', 'neve')
 				)
 			)}
-			position="top center"
-			style={{
-				opacity: 1,
-			}}
 		>
 			{ctaContent()}
 		</Tooltip>
@@ -165,17 +187,21 @@ const Notification = ({ data, slug }) => {
 
 	const UpdateNotification = () => {
 		return (
-			<div className={classes}>
-				{!done && <p>{text}</p>}
+			<>
+				{!done && (
+					<p className="text-sm font-medium leading-relaxed">
+						{text}
+					</p>
+				)}
 				{'done' === done && (
-					<p>
-						<Dashicon icon="yes" />
+					<p className="text-sm font-medium leading-relaxed">
+						<LucideCircleCheck className="size-5 mr-3 inline" />
 						{__('Done!', 'neve')}
 					</p>
 				)}
 				{'error' === done && (
-					<p>
-						<Dashicon icon="no" />
+					<p className="text-sm font-medium leading-relaxed">
+						<LucideCircleX className="size-5 mr-3 inline" />
 						{errorMessage ||
 							__(
 								'An error occurred. Please reload the page and try again.',
@@ -184,33 +210,38 @@ const Notification = ({ data, slug }) => {
 					</p>
 				)}
 				{wrappedButtonContent}
-			</div>
+			</>
 		);
 	};
 
-	const LinkNotification = () => {
-		return (
-			<div className={classes}>
-				<p dangerouslySetInnerHTML={{ __html: text }} />
-				{url && cta && (
-					<Button
-						isSecondary
-						target={targetBlank ? '_blank' : ''}
-						href={url}
-					>
-						{cta}
-						{targetBlank && <Icon size={20} icon={external} />}
-					</Button>
-				)}
-			</div>
-		);
-	};
-
-	if (update) {
-		return <UpdateNotification />;
-	}
+	const LinkNotification = () => (
+		<>
+			<p
+				className="text-sm font-medium leading-relaxed"
+				dangerouslySetInnerHTML={{ __html: text }}
+			/>
+			{url && cta && (
+				<Button
+					target={targetBlank ? '_blank' : ''}
+					className={buttonClasses}
+					href={url}
+				>
+					{cta}
+					{targetBlank && (
+						<LucideExternalLink size={18} className="ml-2" />
+					)}
+				</Button>
+			)}
+		</>
+	);
 
-	return <LinkNotification />;
+	return (
+		<TransitionInOut show={!hidden}>
+			<Card className={classes}>
+				{update ? <UpdateNotification /> : <LinkNotification />}
+			</Card>
+		</TransitionInOut>
+	);
 };
 
 export default Notification;
diff --git a/assets/apps/dashboard/src/Components/Common/Pill.js b/assets/apps/dashboard/src/Components/Common/Pill.js
new file mode 100644
index 0000000000..6d4137c8c8
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/Pill.js
@@ -0,0 +1,23 @@
+import cn from 'classnames';
+
+export default ({ children, type = 'primary', className }) => {
+	if (!children) {
+		return null;
+	}
+
+	const typeClasses = {
+		primary: 'bg-blue-100 text-blue-700',
+		secondary: 'bg-gray-100 text-gray-700',
+		success: 'bg-lime-100 text-lime-700',
+		error: 'bg-red-100 text-red-700',
+		warning: 'bg-yellow-100 text-yellow-700',
+	};
+
+	const classes = cn([
+		typeClasses[type],
+		'px-1.5 py-0.5 text-sm font-medium rounded leading-none uppercase',
+		className,
+	]);
+
+	return <span className={classes}>{children}</span>;
+};
diff --git a/assets/apps/dashboard/src/Components/Common/Select.js b/assets/apps/dashboard/src/Components/Common/Select.js
new file mode 100644
index 0000000000..157e634061
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/Select.js
@@ -0,0 +1,96 @@
+import cn from 'classnames';
+import { LoaderCircle, LucideChevronDown } from 'lucide-react';
+
+import {
+	Field,
+	Label,
+	Listbox,
+	ListboxButton,
+	ListboxOption,
+	ListboxOptions,
+} from '@headlessui/react';
+import { __ } from '@wordpress/i18n';
+
+export default ({
+	label,
+	value,
+	onChange,
+	disabled = false,
+	loading,
+	choices,
+}) => {
+	return (
+		<Field className="grid gap-1">
+			{label && (
+				<Label className="text-sm text-gray-600 font-medium">
+					{label}
+				</Label>
+			)}
+			<div className="flex items-center gap-3">
+				{loading && (
+					<LoaderCircle size={18} className="animate-spin shrink-0" />
+				)}
+				<Listbox
+					value={value}
+					onChange={onChange}
+					disabled={loading || disabled}
+				>
+					{({ open }) => (
+						<>
+							<ListboxButton
+								className={cn(
+									'relative w-full rounded py-1.5 px-2 text-left',
+									'rounded border border-gray-300',
+									'flex items-center gap-3 min-w-[200px]',
+									{
+										'bg-gray-100': disabled || loading,
+										'hover:border-gray-500':
+											!disabled && !loading,
+										'cursor-not-allowed text-gray-500':
+											disabled,
+									}
+								)}
+							>
+								{choices[value] ||
+									__('Select an option', 'neve')}
+
+								<LucideChevronDown
+									size={18}
+									className={cn(
+										'ml-auto transition-transform',
+										{
+											'transform rotate-180': open,
+										}
+									)}
+									aria-hidden="true"
+								/>
+							</ListboxButton>
+
+							<ListboxOptions
+								anchor="bottom"
+								transition
+								className={cn(
+									'text-sm font-normal shadow-lg',
+									'rounded border bg-white p-1 my-1 min-w-[200px]',
+									'transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0 antialiased'
+								)}
+							>
+								{Object.entries(choices).map(
+									([optionValue, optionLabel]) => (
+										<ListboxOption
+											key={optionValue}
+											value={optionValue}
+											className="flex w-full items-center gap-2 text-sm rounded py-1.5 px-3 hover:bg-blue-100 hover:text-blue-700 data-[focus]:bg-blue-100 data-[focus]:text-blue-700 cursor-pointer"
+										>
+											{optionLabel}
+										</ListboxOption>
+									)
+								)}
+							</ListboxOptions>
+						</>
+					)}
+				</Listbox>
+			</div>
+		</Field>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Common/TextInput.js b/assets/apps/dashboard/src/Components/Common/TextInput.js
new file mode 100644
index 0000000000..6c178baa1a
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/TextInput.js
@@ -0,0 +1,52 @@
+import { Description, Field, Input, Label } from '@headlessui/react';
+import { Fragment } from '@wordpress/element';
+import cn from 'classnames';
+
+const TextInput = ({
+	value,
+	label,
+	disabled,
+	onChange,
+	name,
+	className = '',
+	type = 'text',
+	description,
+}) => {
+	let TagName = 'input';
+
+	if (type === 'textarea') {
+		TagName = 'textarea';
+	}
+
+	return (
+		<Field className="grid gap-1">
+			{label && (
+				<Label className="text-sm text-gray-600 font-medium">
+					{label}
+				</Label>
+			)}
+			{description && (
+				<Description className="text-xs text-gray-600">
+					{description}
+				</Description>
+			)}
+			<Input type={type} as={Fragment} name={name}>
+				<TagName
+					type={type}
+					value={value}
+					onChange={onChange}
+					disabled={disabled}
+					className={cn(
+						'block w-full px-3 !py-1 text-sm border rounded disabled:bg-gray-100 !border-gray-300 focus:!border-gray-500 focus:!shadow-none',
+						{
+							'cursor-not-allowed': disabled,
+						},
+						className
+					)}
+				/>
+			</Input>
+		</Field>
+	);
+};
+
+export default TextInput;
diff --git a/assets/apps/dashboard/src/Components/Common/Toast.js b/assets/apps/dashboard/src/Components/Common/Toast.js
new file mode 100644
index 0000000000..009b11beab
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/Toast.js
@@ -0,0 +1,65 @@
+import cn from 'classnames';
+
+import { useEffect, useState } from '@wordpress/element';
+import {
+	LucideCircleAlert,
+	LucideCircleCheck,
+	LucideCircleX,
+	LucideInfo,
+} from 'lucide-react';
+import TransitionInOut from './TransitionInOut';
+
+const Toast = ({ message, dismiss, time, type = 'info', className }) => {
+	const [show, setShow] = useState(false);
+
+	useEffect(() => {
+		setShow(true);
+
+		const timeBeforeHide = time || 2000;
+		const timeBeforeDismiss = timeBeforeHide + 1000;
+
+		const hideTimeout = setTimeout(() => {
+			setShow(false);
+		}, timeBeforeHide);
+
+		const dismissTimeout = setTimeout(() => {
+			if (dismiss) dismiss('');
+		}, timeBeforeDismiss);
+
+		return () => {
+			clearTimeout(hideTimeout);
+			clearTimeout(dismissTimeout);
+		};
+	}, []);
+
+	const iconMap = {
+		info: LucideInfo,
+		error: LucideCircleX,
+		success: LucideCircleCheck,
+		warning: LucideCircleAlert,
+	};
+
+	const classes = cn(
+		'px-2 py-1.5 flex items-center text-sm border rounded gap-2',
+		{
+			'bg-sky-50 text-sky-800': type === 'info',
+			'bg-red-50 text-red-800': type === 'error',
+			'bg-lime-50 text-lime-800': type === 'success',
+			'bg-orange-50 text-orange-800': type === 'warning',
+		},
+		className
+	);
+
+	const ICON = iconMap[type];
+
+	return (
+		<TransitionInOut show={show}>
+			<div className={classes}>
+				<ICON size={20} />
+				<span>{message}</span>
+			</div>
+		</TransitionInOut>
+	);
+};
+
+export default Toast;
diff --git a/assets/apps/dashboard/src/Components/Common/Toggle.js b/assets/apps/dashboard/src/Components/Common/Toggle.js
new file mode 100644
index 0000000000..9387af341b
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/Toggle.js
@@ -0,0 +1,68 @@
+import { Switch, Label, Field, Description } from '@headlessui/react';
+import cn from 'classnames';
+
+export default ({
+	checked,
+	onToggle,
+	label,
+	disabled = false,
+	className,
+	labelBefore = false,
+	labelClassName = '',
+	description,
+}) => {
+	const switchClasses = cn(
+		'group inline-flex h-6 w-11 items-center rounded-full bg-gray-300 transition data-[checked]:bg-blue-600',
+		{
+			'cursor-not-allowed opacity-50': disabled,
+		}
+	);
+
+	const wrapClasses = cn('flex items-center gap-3', className);
+
+	const labelClasses = cn(
+		{
+			'font-medium': !labelClassName.includes('font-'),
+			'text-sm': !labelClassName.includes('text-'),
+			'text-gray-600': !labelClassName.includes('text-'),
+		},
+		labelClassName
+	);
+
+	return (
+		<Field className="grid gap-2">
+			<div className={wrapClasses}>
+				{label && labelBefore && (
+					<Label className={labelClasses}>{label}</Label>
+				)}
+
+				<Switch
+					checked={checked}
+					onChange={onToggle}
+					disabled={disabled}
+					className={switchClasses}
+				>
+					<span
+						className={cn(
+							'size-4 rounded-full bg-white transition',
+							{
+								'translate-x-6 rtl:-translate-x-6': checked,
+								'translate-x-1 rtl:-translate-x-1': !checked,
+							}
+						)}
+					/>
+				</Switch>
+
+				{label && !labelBefore && (
+					<Label className={labelClasses}>{label}</Label>
+				)}
+			</div>
+
+			{description && (
+				<Description className="text-xs text-gray-600">
+					{description}
+				</Description>
+			)}
+		</Field>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Common/Tooltip.js b/assets/apps/dashboard/src/Components/Common/Tooltip.js
new file mode 100644
index 0000000000..0306d820af
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/Tooltip.js
@@ -0,0 +1,20 @@
+import { useState } from '@wordpress/element';
+
+export default ({ text, children }) => {
+	const [isVisible, setIsVisible] = useState(false);
+
+	return (
+		<div
+			className="relative inline-block z-max"
+			onMouseEnter={() => setIsVisible(true)}
+			onMouseLeave={() => setIsVisible(false)}
+		>
+			{children}
+			{isVisible && (
+				<div className="absolute font-medium text-sm w-48 px-2 py-1 text-center text-white bg-gray-900 rounded shadow-lg right-0 bottom-full">
+					{text}
+				</div>
+			)}
+		</div>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Common/TransitionInOut.js b/assets/apps/dashboard/src/Components/Common/TransitionInOut.js
new file mode 100644
index 0000000000..65fdc7906e
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/TransitionInOut.js
@@ -0,0 +1,14 @@
+import { Transition } from '@headlessui/react';
+
+export default ({ children, show }) => {
+	const className = `transition
+		 data-[closed]:transform data-[closed]:-translate-y-2 data-[closed]:opacity-0
+		 data-[open]:transform data-[open]:translate-y-0 data-[open]:opacity-100
+		 duration-300 ease-in-out`;
+
+	return (
+		<Transition show={show}>
+			<div className={className}>{children}</div>
+		</Transition>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Common/TransitionWrapper.js b/assets/apps/dashboard/src/Components/Common/TransitionWrapper.js
new file mode 100644
index 0000000000..f9ce051bf9
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Common/TransitionWrapper.js
@@ -0,0 +1,43 @@
+import { Transition } from '@headlessui/react';
+import cn from 'classnames';
+
+export default ({ children, from = 'bottom', className }) => {
+	const directionClasses = {
+		left: {
+			enterFrom: '-translate-x-2',
+			enterTo: 'translate-x-0',
+		},
+		right: {
+			enterFrom: 'translate-x-2',
+			enterTo: 'translate-x-0',
+		},
+		top: {
+			enterFrom: '-translate-y-2',
+			enterTo: 'translate-y-0',
+		},
+		bottom: {
+			enterFrom: 'translate-y-2',
+			enterTo: 'translate-y-0',
+		},
+	};
+
+	const animationData = directionClasses[from] || directionClasses.bottom;
+
+	const transitionClasses = {
+		enter: 'ease-out duration-150',
+		enterFrom: `opacity-0 ${animationData.enterFrom}`,
+		enterTo: `opacity-100 ${animationData.enterTo}`,
+	};
+
+	return (
+		<Transition
+			as="div"
+			show
+			appear
+			className={cn('transition', className)}
+			{...transitionClasses}
+		>
+			{children}
+		</Transition>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Content/Changelog.js b/assets/apps/dashboard/src/Components/Content/Changelog.js
index e5846395ea..ff0e9873a7 100644
--- a/assets/apps/dashboard/src/Components/Content/Changelog.js
+++ b/assets/apps/dashboard/src/Components/Content/Changelog.js
@@ -1,114 +1,172 @@
 /* global neveDash */
-import Accordion from '../Accordion';
-import classnames from 'classnames';
-
+import cn from 'classnames';
+import { Clock, Crown, Rocket, Bug, Zap, CheckCircle } from 'lucide-react';
 import { __ } from '@wordpress/i18n';
-import { Fragment, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
+
+import Card from '../../Layout/Card';
+import Button from '../Common/Button';
+import Pill from '../Common/Pill';
+import TransitionWrapper from '../Common/TransitionWrapper';
+
+const TAB_CHOICES = {
+	FREE: 'free',
+	PRO: 'pro',
+};
+
+const CHANGE_TYPES = {
+	features: {
+		icon: <Rocket className="size-4 text-green-600 mr-2" />,
+		label: __('Features', 'neve'),
+	},
+	fixes: {
+		icon: <Bug className="size-4 text-red-600 mr-2" />,
+		label: __('Bug Fixes', 'neve'),
+	},
+	tweaks: {
+		icon: <Zap className="size-4 text-blue-600 mr-2" />,
+		label: __('Tweaks', 'neve'),
+	},
+};
+
+const TabButton = ({ active, onClick, children }) => {
+	return (
+		<button
+			onClick={onClick}
+			className={cn(
+				`px-4 py-2 text-sm font-medium rounded-lg transition-colors duration-150`,
+				{
+					'bg-blue-100 text-blue-700': active,
+					'text-gray-600 hover:text-gray-900 hover:bg-gray-100':
+						!active,
+				}
+			)}
+		>
+			{children}
+		</button>
+	);
+};
+
+const ChangelogEntry = ({ data }) => {
+	const { version, tweaks, fixes, features, date } = data;
+
+	const renderChangeList = (type, items) => {
+		if (!items?.length) return null;
 
+		const { icon, label } = CHANGE_TYPES[type];
+
+		return (
+			<div key={version + type}>
+				<div className="flex items-center mb-2">
+					{icon}
+					<span className="text-sm font-medium text-gray-700">
+						{label}
+					</span>
+				</div>
+				<ul className="space-y-2 ml-6">
+					{items.map((item, index) => {
+						return (
+							<li
+								key={index}
+								className="text-sm text-gray-600 flex items-start"
+							>
+								<CheckCircle className="w-3.5 h-3.5 text-gray-400 mr-2 mt-0.5 flex-shrink-0" />
+								<span
+									dangerouslySetInnerHTML={{ __html: item }}
+								/>
+							</li>
+						);
+					})}
+				</ul>
+			</div>
+		);
+	};
+
+	return (
+		<div className="border-b border-gray-200 last:border-0">
+			<div className="p-6">
+				<div className="flex items-center justify-between mb-4">
+					<div className="flex items-center space-x-3">
+						<h3 className="text-base font-semibold text-gray-900">
+							{__('Version', 'neve')} {version}
+						</h3>
+						<Pill type="primary" className={'ml-auto'}>
+							{date}
+						</Pill>
+					</div>
+				</div>
+				<div className="space-y-3">
+					{Object.entries({ features, fixes, tweaks }).map(
+						([type, items]) => renderChangeList(type, items)
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};
 const Changelog = () => {
 	const { changelog, changelogPro } = neveDash;
-	const [showForPro, setShowForPro] = useState(false);
+
+	const [shown, setShown] = useState(4);
+	const [activeTab, setActiveTab] = useState(TAB_CHOICES.FREE);
+	const changelogData =
+		activeTab === TAB_CHOICES.FREE ? changelog : changelogPro;
 
 	return (
-		<div className="card">
+		<TransitionWrapper className="grid gap-5">
 			{changelogPro && (
-				<div className="changelog-tabs">
-					<span>{__('Show changelog for', 'neve')}</span>
-					<a
-						href="#changelog-neve"
-						className={classnames([{ active: !showForPro }])}
-						onClick={() => {
-							setShowForPro(false);
-						}}
-					>
-						{__('Neve', 'neve')}
-					</a>
-					<a
-						href="#show-for-pro"
-						className={classnames([{ active: showForPro }])}
-						onClick={() => {
-							setShowForPro(true);
-						}}
+				<Card>
+					<div className="flex items-center justify-between">
+						<div className="flex items-center space-x-2">
+							<Clock className="size-4 text-gray-400" />
+							<span className="text-sm font-medium text-gray-900">
+								{__('Recent Updates', 'neve')}
+							</span>
+						</div>
+						<div className="flex space-x-2">
+							<TabButton
+								active={activeTab === TAB_CHOICES.FREE}
+								onClick={() => setActiveTab(TAB_CHOICES.FREE)}
+							>
+								{__('Free Version', 'neve')}
+							</TabButton>
+							<TabButton
+								active={activeTab === TAB_CHOICES.PRO}
+								onClick={() => setActiveTab(TAB_CHOICES.PRO)}
+							>
+								<div className="flex items-center space-x-1">
+									<Crown className="size-4 text-yellow-500" />
+									<span>{__('Pro Version', 'neve')}</span>
+								</div>
+							</TabButton>
+						</div>
+					</div>
+				</Card>
+			)}
+
+			<Card className="!p-0">
+				{changelogData.slice(0, shown).map((entry) => {
+					const { version, tweaks, fixes, features } = entry;
+
+					if ((!tweaks && !fixes && !features) || !version) {
+						return null;
+					}
+
+					return <ChangelogEntry key={version} data={entry} />;
+				})}
+			</Card>
+
+			{changelogData.length > shown && (
+				<div className="text-center my-8 mx-auto">
+					<Button
+						className="text-lg"
+						onClick={() => setShown(shown + 4)}
 					>
-						{__('Neve Pro', 'neve')}
-					</a>
+						{__('Load More', 'neve')}
+					</Button>
 				</div>
 			)}
-			{(showForPro ? changelogPro : changelog).map((entry, index) => {
-				const { date, version, tweaks, fixes, features } = entry;
-				if (!tweaks && !fixes && !features) {
-					return null;
-				}
-				const title = (
-					<Fragment>
-						<span className="version">v{version}</span> -{' '}
-						<span className="date">{date}</span>
-					</Fragment>
-				);
-
-				return (
-					<Accordion key={index} isOpen={0 === index} title={title}>
-						{features && (
-							<div className="features changelog-category">
-								<div className="label-wrap">
-									<span className="label success">
-										{__('Features', 'neve')}
-									</span>
-								</div>
-								<ul className="entries">
-									{features.map((feature, indexFeature) => (
-										<li
-											key={indexFeature}
-											dangerouslySetInnerHTML={{
-												__html: feature,
-											}}
-										/>
-									))}
-								</ul>
-							</div>
-						)}
-						{fixes && (
-							<div className="bugs changelog-category">
-								<div className="label-wrap">
-									<span className="label error">
-										{__('Bug Fixes', 'neve')}
-									</span>
-								</div>
-								<ul className="entries">
-									{fixes.map((fix, indexFixes) => (
-										<li
-											key={indexFixes}
-											dangerouslySetInnerHTML={{
-												__html: fix,
-											}}
-										/>
-									))}
-								</ul>
-							</div>
-						)}
-						{tweaks && (
-							<div className="tweaks changelog-category">
-								<div className="label-wrap">
-									<span className="label info">
-										{__('Tweaks', 'neve')}
-									</span>
-								</div>
-								<ul className="entries">
-									{tweaks.map((tweak, indexTweak) => (
-										<li
-											key={indexTweak}
-											dangerouslySetInnerHTML={{
-												__html: tweak,
-											}}
-										/>
-									))}
-								</ul>
-							</div>
-						)}
-					</Accordion>
-				);
-			})}
-		</div>
+		</TransitionWrapper>
 	);
 };
 
diff --git a/assets/apps/dashboard/src/Components/Content/CustomLayoutsUnavailable.js b/assets/apps/dashboard/src/Components/Content/CustomLayoutsUnavailable.js
deleted file mode 100644
index 53b4781c28..0000000000
--- a/assets/apps/dashboard/src/Components/Content/CustomLayoutsUnavailable.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/* global neveDash */
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-
-const CustomLayoutsUnavailable = ({ license, setTab }) => {
-	const { customLayoutsNeveProURL, assets } = neveDash;
-
-	const hasPro = neveDash.pro || neveDash.hasOldPro;
-	const secondButtonMessage = hasPro
-		? __('Activate', 'neve')
-		: __('Free vs Pro', 'neve');
-	const navigateToFreeVsPro = () => {
-		setTab('free-pro');
-	};
-
-	const navigateToProActivate = () => {
-		setTab('pro');
-	};
-
-	useEffect(() => {
-		if (license && 'valid' === license.valid) {
-			setTab('pro');
-			window.location.href = 'edit.php?post_type=neve_custom_layouts';
-		}
-	}, [license]);
-
-	return (
-		<div className="unavailable-custom-layouts">
-			<div
-				className="ss-background"
-				style={{ backgroundImage: `url(${assets}/starter.jpg)` }}
-			/>
-			<div className="content-wrap">
-				<img src={`${assets}/logo.svg`} alt="Neve" />
-				<h1>{__('Custom Layouts', 'neve')}</h1>
-				<p>
-					{__(
-						'Get access to all Pro features and power-up your website',
-						'neve'
-					)}
-				</p>
-				<iframe
-					width="560"
-					height="315"
-					src="https://www.youtube.com/embed/4XFoSHTHpes"
-					title="YouTube video player"
-					frameBorder="0"
-					allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-					allowFullScreen
-				></iframe>
-				<Button
-					target="_blank"
-					rel="external noreferrer noopener"
-					href={customLayoutsNeveProURL}
-					variant="primary"
-				>
-					{__('Get Neve Pro Now', 'neve')}
-					<span className="components-visually-hidden">
-						{__('(opens in a new tab)', 'neve')}
-					</span>
-				</Button>
-				<Button
-					variant="link"
-					onClick={
-						hasPro ? navigateToProActivate : navigateToFreeVsPro
-					}
-				>
-					{secondButtonMessage}
-				</Button>
-			</div>
-		</div>
-	);
-};
-
-export default compose(
-	withSelect((select) => {
-		const { getLicense } = select('neve-dashboard');
-		return {
-			license: getLicense(),
-		};
-	})
-)(CustomLayoutsUnavailable);
diff --git a/assets/apps/dashboard/src/Components/Content/FreePro.js b/assets/apps/dashboard/src/Components/Content/FreePro.js
index 828c98a37b..0eef316bd3 100644
--- a/assets/apps/dashboard/src/Components/Content/FreePro.js
+++ b/assets/apps/dashboard/src/Components/Content/FreePro.js
@@ -1,47 +1,142 @@
 /* global neveDash */
-import FeatureRow from '../FeatureRow';
 
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
 
-const Pro = () => {
-	const { featureData } = neveDash;
-	return (
-		<div className="col">
-			<table className="card table">
-				<tbody className="table-body">
-					<tr className="table-head">
-						<th className="large" />
-						<th className="indicator">Neve</th>
-						<th className="indicator">Neve Pro</th>
-					</tr>
-					{featureData.map((item, index) => (
-						<FeatureRow key={index} item={item} />
-					))}
-				</tbody>
-			</table>
-
-			<div className="card upsell">
-				<p>
-					{__(
-						'Get access to all Pro features and power-up your website',
-						'neve'
-					)}
-				</p>
-				<Button
-					target="_blank"
-					rel="external noreferrer noopener"
-					href={neveDash.upgradeURL}
-					isPrimary
-				>
-					{__('Get Neve Pro Now', 'neve')}
-					<span className="components-visually-hidden">
-						{__('(opens in a new tab)', 'neve')}
-					</span>
-				</Button>
+import {
+	CheckCircle2,
+	XCircle,
+	HelpCircle,
+	ArrowRight,
+	BookOpen,
+} from 'lucide-react';
+
+import Card from '../../Layout/Card';
+import Tooltip from '../Common/Tooltip';
+import Button from '../Common/Button';
+import TransitionWrapper from '../Common/TransitionWrapper';
+
+const FreeProCard = () => (
+	<Card className="!p-0">
+		<div className="flex items-center py-4 px-6 border-b border-gray-200">
+			<div className="text-sm font-medium">{__('Feature', 'neve')}</div>
+			<div className="ml-auto flex items-center md:space-x-16">
+				<div className="w-20 text-center text-sm font-medium">
+					{__('Free', 'neve')}
+				</div>
+				<div className="w-20 text-center text-sm font-medium">
+					{__('Pro', 'neve')}
+				</div>
 			</div>
 		</div>
+
+		{neveDash.featureData.map(({ section, items }) => (
+			<div key={section}>
+				<div className="py-3 px-6 bg-gray-50 border-b border-gray-200">
+					<h3 className="text-sm font-medium text-gray-600 uppercase">
+						{section}
+					</h3>
+				</div>
+
+				{items.map((item, index) => (
+					<div
+						key={index}
+						className="border-b border-gray-200 hover:bg-gray-50"
+					>
+						<div className="flex items-center py-4 px-6">
+							<div className="max-w-2xl">
+								<div className="flex items-center">
+									<span className="text-sm font-medium text-gray-900">
+										{item.title}
+									</span>
+									{item.tooltip && (
+										<Tooltip content={item.tooltip}>
+											<button className="ml-2">
+												<HelpCircle className="w-4 h-4 text-gray-400 hover:text-gray-600" />
+											</button>
+										</Tooltip>
+									)}
+								</div>
+								<p className="text-gray-600 mt-1">
+									{item.description}
+								</p>
+							</div>
+							<div className="ml-auto flex items-center md:space-x-16 flex-shrink-0">
+								<div className="w-20 text-center">
+									{item.free ? (
+										<CheckCircle2 className="w-5 h-5 text-green-500 mx-auto" />
+									) : (
+										<XCircle className="w-5 h-5 text-red-500 mx-auto" />
+									)}
+								</div>
+								<div className="w-20 text-center">
+									<CheckCircle2 className="w-5 h-5 text-green-500 mx-auto" />
+								</div>
+							</div>
+						</div>
+					</div>
+				))}
+			</div>
+		))}
+	</Card>
+);
+
+const UpsellCard = () => {
+	return (
+		<Card>
+			<div className="max-w-2xl mx-auto">
+				<h3 className="text-lg font-semibold mb-4">
+					{__('Need help deciding?', 'neve')}
+				</h3>
+				<div className="space-y-4 mb-6 text-gray-600">
+					<p>
+						{__(
+							'Our support team is happy to answer your questions about specific Pro features and help you determine if they match your needs.',
+							'neve'
+						)}
+					</p>
+					<div className="flex items-start space-x-2">
+						<div className="bg-gray-100 px-3 py-1.5 rounded">
+							{__(
+								'Average response time: ~8 hours during business days',
+								'neve'
+							)}
+						</div>
+					</div>
+				</div>
+				<div className="flex gap-4">
+					<Button
+						isPrimary
+						href={neveDash.upgradeURL}
+						target="_blank"
+						className="gap-"
+					>
+						{__('View Pro Plans', 'neve')}
+						<ArrowRight className="ml-2" size={16} />
+					</Button>
+					<Button
+						isLink
+						href="https://themeisle.com/contact"
+						target="_blank"
+						className="!border-gray-300"
+					>
+						{__('Contact Support', 'neve')}
+						<BookOpen className="ml-2" size={16} />
+					</Button>
+				</div>
+			</div>
+		</Card>
 	);
 };
 
-export default Pro;
+export default () => {
+	return (
+		<div className="grid gap-6">
+			<TransitionWrapper from="top">
+				<FreeProCard />
+			</TransitionWrapper>
+			<TransitionWrapper className="delay-150">
+				<UpsellCard />
+			</TransitionWrapper>
+		</div>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Content/Help.js b/assets/apps/dashboard/src/Components/Content/Help.js
deleted file mode 100644
index b48d63443d..0000000000
--- a/assets/apps/dashboard/src/Components/Content/Help.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/* global neveDash */
-import Card from '../Card';
-
-import { __ } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
-import { Button, Icon, ExternalLink } from '@wordpress/components';
-
-const Help = (props) => {
-	const { setTab } = props;
-
-	let { docsURL, codexURL, supportURL, whiteLabel, assets } = neveDash;
-	const { supportCardDescription, docsCardDescription } = neveDash.strings;
-
-	if (whiteLabel && whiteLabel.agencyURL) {
-		supportURL = whiteLabel.agencyURL;
-		docsURL = whiteLabel.agencyURL;
-	}
-
-	return (
-		<Fragment>
-			{!whiteLabel && (
-				<Card
-					icon={assets + 'arrows.svg'}
-					title={__(
-						'Build a landing page with a drag-and-drop content builder',
-						'neve'
-					)}
-					description={__(
-						'In the documentation below you will find an easy way to build a great looking landing page using a drag-and-drop content builder plugin.',
-						'neve'
-					)}
-				>
-					<ExternalLink href="http://docs.themeisle.com/article/219-how-to-build-a-landing-page-with-a-drag-and-drop-content-builder">
-						{__('Learn More', 'neve')}
-					</ExternalLink>
-				</Card>
-			)}
-			<Card
-				icon={assets + 'page.svg'}
-				title={__('Documentation', 'neve')}
-				description={docsCardDescription}
-			>
-				{!whiteLabel && (
-					<ExternalLink href={codexURL}>
-						{__('Go to Neve Codex', 'neve')}
-					</ExternalLink>
-				)}
-				<ExternalLink href={docsURL}>
-					{__('Go to docs', 'neve')}
-				</ExternalLink>
-				{!whiteLabel && (
-					<Button
-						isLink
-						className="facebook-badge"
-						href="https://www.facebook.com/groups/648646435537266/"
-						target="_blank"
-						rel="external noreferrer noopener"
-					>
-						<span className="components-visually-hidden">
-							{__('(opens in a new tab)', 'neve')}
-						</span>
-						<Icon icon="facebook-alt" />
-						<span>{__('Join our Facebook Group', 'neve')}</span>
-					</Button>
-				)}
-			</Card>
-
-			{!whiteLabel && (
-				<Card
-					icon={assets + 'clone.svg'}
-					title={__('Create a child theme', 'neve')}
-					description={__(
-						"If you want to make changes to the theme's files, those changes are likely to be overwritten when you next update the theme. In order to prevent that from happening, you need to create a child theme. For this, please follow the documentation below.",
-						'neve'
-					)}
-				>
-					<ExternalLink href="http://docs.themeisle.com/article/14-how-to-create-a-child-theme">
-						{__('Learn More', 'neve')}
-					</ExternalLink>
-				</Card>
-			)}
-
-			<Card
-				icon={neveDash.assets + 'buoy.svg'}
-				title={__('Contact Support', 'neve')}
-				description={supportCardDescription}
-			>
-				<Button
-					isPrimary
-					href={supportURL}
-					target="_blank"
-					rel="external noreferrer noopener"
-				>
-					<span className="components-visually-hidden">
-						{__('(opens in a new tab)', 'neve')}
-					</span>
-					{__('Contact Support', 'neve')}
-				</Button>
-			</Card>
-
-			{!whiteLabel && (
-				<Card
-					icon={assets + 'tachometer.svg'}
-					title={__('Speed up your site', 'neve')}
-					description={__(
-						'If you find yourself in a situation where everything on your site is running very slowly, you might consider having a look at the documentation below where you will find the most common issues causing this and possible solutions for each of the issues.',
-						'neve'
-					)}
-				>
-					<ExternalLink href="http://docs.themeisle.com/article/63-speed-up-your-wordpress-site">
-						{__('Learn More', 'neve')}
-					</ExternalLink>
-				</Card>
-			)}
-			{!whiteLabel && (
-				<Card
-					icon={assets + 'list.svg'}
-					title={__('Changelog', 'neve')}
-					description={__(
-						'Want to get the gist on the latest theme changes? Just consult our changelog below to get a taste of the recent fixes and features implemented.',
-						'neve'
-					)}
-					ßßßßß
-				>
-					<Button isLink onClick={() => setTab('changelog')}>
-						{__('View Changelog', 'neve')}
-					</Button>
-				</Card>
-			)}
-		</Fragment>
-	);
-};
-
-export default Help;
diff --git a/assets/apps/dashboard/src/Components/Content/ModuleGrid.js b/assets/apps/dashboard/src/Components/Content/ModuleGrid.js
new file mode 100644
index 0000000000..850a9ab140
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/ModuleGrid.js
@@ -0,0 +1,171 @@
+/* global neveDash */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { LoaderCircle, LucideCheck, LucideSettings } from 'lucide-react';
+
+import useLicenseData from '../../Hooks/useLicenseData';
+import Card from '../../Layout/Card';
+import {
+	NEVE_HAS_PRO,
+	NEVE_MODULE_ICON_MAP,
+	NEVE_STORE,
+} from '../../utils/constants';
+import Link from '../Common/Link';
+import Pill from '../Common/Pill';
+import Toggle from '../Common/Toggle';
+import Tooltip from '../Common/Tooltip';
+import { changeOption } from '../../utils/rest';
+import Button from '../Common/Button';
+
+const ModuleToggle = ({ slug, moduleData }) => {
+	const [loading, setLoading] = useState(false);
+
+	const { licenseTier, isLicenseValid } = useLicenseData();
+	const { changeModuleStatus, setToast } = useDispatch(NEVE_STORE);
+	const { moduleStatus } = useSelect((select) => {
+		const { getModuleStatus } = select(NEVE_STORE);
+
+		return {
+			moduleStatus: getModuleStatus(slug) || false,
+		};
+	});
+
+	if (!NEVE_HAS_PRO) {
+		return (
+			<Tooltip
+				text={__('These features are available in Neve Pro.', 'neve')}
+			>
+				<Pill className="ml-2 !px-2 !py-1 text-xs bg-blue-100 text-blue-800 rounded">
+					{__('Pro', 'neve')}
+				</Pill>
+			</Tooltip>
+		);
+	}
+
+	const { nicename, availabilityLevel } = moduleData;
+	const { upgradeLinks } = neveDash;
+
+	if (!isLicenseValid || licenseTier < availabilityLevel) {
+		return (
+			<Button isPrimary href={upgradeLinks[availabilityLevel]}>
+				{__('Upgrade', 'neve')}
+			</Button>
+		);
+	}
+
+	const handleToggle = (value) => {
+		setLoading(true);
+		changeModuleStatus(slug, value);
+
+		changeOption(slug, value, true).then((r) => {
+			if (r.success) {
+				setLoading(false);
+				setToast(
+					(value
+						? __('Module Activated', 'neve')
+						: __('Module Deactivated.', 'neve')) + ` (${nicename})`
+				);
+				return;
+			}
+			changeModuleStatus(slug, !value);
+			setLoading(false);
+			setToast(
+				__('Could not activate module. Please try again.', 'neve')
+			);
+		});
+	};
+
+	return (
+		<div className="flex gap-2 items-center">
+			{loading && <LoaderCircle size={18} className="animate-spin" />}
+			<Toggle
+				checked={moduleStatus}
+				onToggle={handleToggle}
+				disabled={loading}
+			/>
+		</div>
+	);
+};
+
+const ModuleCard = ({ moduleData, slug }) => {
+	const { nicename, description, documentation, hide, byline } = moduleData;
+	const CardIcon = NEVE_MODULE_ICON_MAP[slug] || LucideSettings;
+
+	if (hide) {
+		return null;
+	}
+
+	return (
+		<Card
+			icon={<CardIcon size={18} />}
+			title={nicename}
+			className="bg-white p-6 rounded-lg shadow-sm"
+			afterTitle={<ModuleToggle slug={slug} moduleData={moduleData} />}
+		>
+			<p className="text-gray-600 text-sm leading-relaxed">
+				{description}{' '}
+				{documentation && documentation.url && (
+					<Link
+						isExternal
+						url={documentation.url}
+						text={__('Learn more', 'neve')}
+					/>
+				)}
+			</p>
+
+			{byline && (
+				<p className="text-gray-600 text-xs mt-2 flex items-center">
+					<LucideCheck size={14} className="mr-1 text-lime-500" />
+					<span>{byline}</span>
+				</p>
+			)}
+		</Card>
+	);
+};
+
+const ModulesHeader = () => {
+	const { isLicenseValid } = useLicenseData();
+
+	return (
+		<div className="flex items-center justify-between">
+			<h2 className="text-lg font-semibold">
+				{__('Neve Pro Modules', 'neve')}
+			</h2>
+			{!isLicenseValid && (
+				<Link
+					className="text-sm font-medium"
+					text={__('Get Neve Pro', 'neve')}
+					url={neveDash.upgradeURLModules}
+					isExternal
+				/>
+			)}
+		</div>
+	);
+};
+
+export default () => {
+	const unorderedModuels = Object.entries(neveDash.modules);
+
+	const orderedModules = unorderedModuels.sort((a, b) => {
+		if (a[1].order && b[1].order) {
+			return a[1].order - b[1].order;
+		}
+		return 0;
+	});
+
+	return (
+		<>
+			<ModulesHeader />
+			<div className="grid xl:grid-cols-2 gap-6">
+				{orderedModules.map(([slug, moduleData]) => (
+					<ModuleCard
+						key={slug}
+						moduleData={moduleData}
+						slug={slug}
+					/>
+				))}
+			</div>
+		</>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Content/Plugins.js b/assets/apps/dashboard/src/Components/Content/Plugins.js
deleted file mode 100644
index beab1d0386..0000000000
--- a/assets/apps/dashboard/src/Components/Content/Plugins.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PluginCard from '../PluginCard';
-
-import { withSelect } from '@wordpress/data';
-import { Fragment } from '@wordpress/element';
-
-const Header = ({ plugins }) => {
-	if (!plugins) {
-		return null;
-	}
-
-	return (
-		<Fragment>
-			{Object.keys(plugins).map((slug) => {
-				return (
-					<PluginCard key={slug} slug={slug} data={plugins[slug]} />
-				);
-			})}
-		</Fragment>
-	);
-};
-
-export default withSelect((select) => {
-	const { getPlugins } = select('neve-dashboard');
-	return {
-		plugins: getPlugins(),
-	};
-})(Header);
diff --git a/assets/apps/dashboard/src/Components/Content/Pro.js b/assets/apps/dashboard/src/Components/Content/Pro.js
deleted file mode 100644
index 27144e9911..0000000000
--- a/assets/apps/dashboard/src/Components/Content/Pro.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* global neveDash */
-import ModuleCard from '../ModuleCard';
-
-const Pro = () => {
-	const { modules, hasOldPro, strings } = neveDash;
-
-	if (hasOldPro) {
-		return (
-			<div className="col">
-				<div className="card">
-					<h2>{strings.updateOldPro}</h2>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div className="col">
-			{Object.keys(modules).map((id, index) => {
-				return <ModuleCard key={index} slug={id} />;
-			})}
-		</div>
-	);
-};
-
-export default Pro;
diff --git a/assets/apps/dashboard/src/Components/Content/Settings.js b/assets/apps/dashboard/src/Components/Content/Settings.js
new file mode 100644
index 0000000000..0d95b1e749
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings.js
@@ -0,0 +1,140 @@
+/* global neveDash */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import cn from 'classnames';
+import {
+	CircleFadingArrowUp,
+	LucideBriefcase,
+	LucideGauge,
+	LucidePuzzle,
+	LucideSettings,
+} from 'lucide-react';
+
+import { useSelect } from '@wordpress/data';
+import Card from '../../Layout/Card';
+import {
+	NEVE_HAS_PRO,
+	NEVE_SHOW_WHITELABEL,
+	NEVE_STORE,
+} from '../../utils/constants';
+import Notice from '../Common/Notice';
+import TransitionWrapper from '../Common/TransitionWrapper';
+import GeneralTabContent from './Settings/GeneralTabContent';
+import ManageModulesTabContent from './Settings/ManageModulesTabContent';
+import PerformanceTabContent from './Settings/PerformanceTabContent';
+import WhiteLabelTabContent from './Settings/WhiteLabelTabContent';
+
+const NAV_ITEMS = [
+	{
+		id: 'general',
+		label: __('General', 'neve'),
+		icon: LucideSettings,
+	},
+	{
+		id: 'performance',
+		label: __('Performance', 'neve'),
+		icon: LucideGauge,
+	},
+	{
+		id: 'white-label',
+		label: __('White Label', 'neve'),
+		icon: LucideBriefcase,
+	},
+	{
+		id: 'manage-modules',
+		label: __('Manage Modules', 'neve'),
+		icon: LucidePuzzle,
+	},
+];
+
+const Menu = ({ tab, setTab }) => {
+	const { whiteLabelStatus } = useSelect((select) => {
+		const { getModuleStatus } = select(NEVE_STORE);
+
+		return {
+			whiteLabelStatus: getModuleStatus('white_label') || false,
+		};
+	});
+
+	const menuItems = NAV_ITEMS.filter(({ id }) => {
+		if (id === 'manage-modules') return NEVE_HAS_PRO;
+
+		if (id === 'white-label') {
+			return !NEVE_HAS_PRO || (whiteLabelStatus && NEVE_SHOW_WHITELABEL);
+		}
+
+		return true;
+	});
+
+	return (
+		<Card className="!p-0 overflow-hidden">
+			<TransitionWrapper>
+				{menuItems.map(({ id, label, icon }) => {
+					const Icon = icon;
+					const classes = cn(
+						'w-full flex items-center px-4 py-3 text-left',
+						{
+							'text-gray-600 hover:bg-gray-50': tab !== id,
+							'bg-blue-50 text-blue-600': tab === id,
+						}
+					);
+
+					return (
+						<button
+							key={id}
+							className={classes}
+							onClick={() => setTab(id)}
+						>
+							<Icon className="w-5 h-5 mr-3" />
+							<span className="font-medium">{label}</span>
+						</button>
+					);
+				})}
+			</TransitionWrapper>
+		</Card>
+	);
+};
+
+const Settings = () => {
+	const { hasOldPro, strings } = neveDash;
+
+	const [tab, setTab] = useState(NAV_ITEMS[0].id);
+
+	if (hasOldPro) {
+		return (
+			<Notice icon={CircleFadingArrowUp}>{strings.updateOldPro}</Notice>
+		);
+	}
+
+	return (
+		<div className="flex flex-col lg:flex-row gap-6">
+			<div className="shrink-0 w-full lg:w-[300px]">
+				<Menu tab={tab} setTab={setTab} />
+			</div>
+			<Card className="grow">
+				{tab === 'general' && (
+					<TransitionWrapper>
+						<GeneralTabContent />
+					</TransitionWrapper>
+				)}
+				{tab === 'performance' && (
+					<TransitionWrapper>
+						<PerformanceTabContent />
+					</TransitionWrapper>
+				)}
+				{tab === 'white-label' && (
+					<TransitionWrapper>
+						<WhiteLabelTabContent />
+					</TransitionWrapper>
+				)}
+				{tab === 'manage-modules' && (
+					<TransitionWrapper>
+						<ManageModulesTabContent />
+					</TransitionWrapper>
+				)}
+			</Card>
+		</div>
+	);
+};
+
+export default Settings;
diff --git a/assets/apps/dashboard/src/Components/Content/Settings/AccessRestriction.js b/assets/apps/dashboard/src/Components/Content/Settings/AccessRestriction.js
new file mode 100644
index 0000000000..cba6a517bc
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings/AccessRestriction.js
@@ -0,0 +1,195 @@
+/* global neveAccessRestriction */
+
+import apiFetch from '@wordpress/api-fetch';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { LucideLoaderCircle } from 'lucide-react';
+import Notice from '../../Common/Notice';
+import Select from '../../Common/Select';
+import Toggle from '../../Common/Toggle';
+import ControlWrap from '../../Controls/ControlWrap';
+import { NEVE_STORE } from '../../../utils/constants';
+import { useDispatch } from '@wordpress/data';
+
+export const saveOption = (value) => {
+	return new Promise((resolve) => {
+		apiFetch({
+			path: neveAccessRestriction.settingsRoute,
+			method: 'POST',
+			data: { settings: value },
+		})
+			.then((responseRaw) => {
+				const response = JSON.parse(responseRaw);
+				const status = response.status === 'success';
+				resolve({ success: status });
+			})
+			.catch(() => {
+				resolve({ success: false });
+			});
+	});
+};
+
+const AccessRestriction = ({ optionData }) => {
+	const [settings, setSettings] = useState(neveAccessRestriction.options);
+	const [saving, setSaving] = useState(false);
+	const [error, setError] = useState('');
+
+	const { setToast } = useDispatch(NEVE_STORE);
+
+	const updateContentTypeStatus = (slug, status) => {
+		const newSettings = { ...settings };
+
+		newSettings.content_types[slug].enabled = status;
+
+		setSettings(newSettings);
+		saveAsync(newSettings);
+	};
+
+	const updateSetting = (slug, value) => {
+		const newSettings = {
+			...settings,
+			[slug]: value,
+		};
+
+		setSettings(newSettings);
+		saveAsync(newSettings);
+	};
+
+	const saveAsync = (newSettings = null) => {
+		const settingsToSave = newSettings || settings;
+		setSaving(true);
+		setError('');
+		saveOption(JSON.stringify(settingsToSave))
+			.then((r) => {
+				if (!r.success) {
+					setError(
+						__('An error occurred. Please try again.', 'neve')
+					);
+					setToast(false);
+					return;
+				}
+				setToast(true);
+				neveAccessRestriction.options = newSettings;
+			})
+			.finally(() => {
+				setSaving(false);
+			});
+	};
+
+	return (
+		<ControlWrap
+			label={optionData.label}
+			icon={optionData.icon}
+			description={optionData.description}
+			afterTitle={
+				saving ? (
+					<div className="flex items-center gap-3 text-sm">
+						<LucideLoaderCircle
+							size={20}
+							className="animate-spin"
+						/>
+						<span>{__('Saving', 'neve')}...</span>
+					</div>
+				) : null
+			}
+		>
+			<div className="grid gap-4 grid-cols-2 xl:grid-cols-3">
+				<Fields
+					type="content_types"
+					updateSetting={updateContentTypeStatus}
+					valueCallback={(callbackSettings, callbackKey) => {
+						return callbackSettings[callbackKey].enabled;
+					}}
+					settings={neveAccessRestriction.options.content_types}
+				/>
+			</div>
+
+			<div className="grid gap-4 grid-cols-2 xl:grid-cols-3 mt-4 pt-4 border-t border-gray-200">
+				<Fields
+					type="restriction_behavior"
+					updateSetting={updateSetting}
+					settings={settings}
+				/>
+			</div>
+
+			{'' !== error && (
+				<Notice className="mt-4" isError>
+					{error}
+				</Notice>
+			)}
+		</ControlWrap>
+	);
+};
+
+const defaultValueCallback = (settings, key) => settings[key];
+
+const Fields = ({
+	type,
+	updateSetting,
+	settings,
+	valueCallback = defaultValueCallback,
+}) => {
+	const { fields } = neveAccessRestriction.fields[type];
+
+	return (
+		<>
+			{Object.keys(fields).map((key, index) => {
+				const { type: fieldType, label, description } = fields[key];
+
+				if (fields[key].parent) {
+					const parent = fields[key].parent;
+
+					if (settings[parent.fieldKey] !== parent.fieldValue) {
+						return null;
+					}
+				}
+
+				const value = valueCallback(settings, key);
+
+				return (
+					<div key={index}>
+						{'toggle' === fieldType && (
+							<>
+								<Toggle
+									checked={value === 'yes' || false}
+									label={label}
+									onToggle={(newValue) => {
+										const status = newValue ? 'yes' : 'no';
+										updateSetting(key, status);
+									}}
+								/>
+								{value && description && (
+									<p className="description">{description}</p>
+								)}
+							</>
+						)}
+						{'select' === fieldType && (
+							<>
+								<Select
+									label={label}
+									value={value}
+									choices={fields[key].options.reduce(
+										(acc, { value: v, label: l }) => ({
+											...acc,
+											[v]: l,
+										}),
+										{}
+									)}
+									onChange={(newValue) => {
+										updateSetting(key, newValue);
+									}}
+								/>
+
+								{value && description && (
+									<p className="description">{description}</p>
+								)}
+							</>
+						)}
+					</div>
+				);
+			})}
+		</>
+	);
+};
+
+export default AccessRestriction;
diff --git a/assets/apps/dashboard/src/Components/Content/Settings/GeneralTabContent.js b/assets/apps/dashboard/src/Components/Content/Settings/GeneralTabContent.js
new file mode 100644
index 0000000000..74127f88f5
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings/GeneralTabContent.js
@@ -0,0 +1,197 @@
+/* global neveDash */
+import { __ } from '@wordpress/i18n';
+import {
+	LucideImage,
+	LucideLock,
+	LucideMenu,
+	LucideMonitorDown,
+	LucideTags,
+	LucideType,
+} from 'lucide-react';
+import useLicenseData from '../../../Hooks/useLicenseData';
+import { NEVE_HAS_VALID_PRO } from '../../../utils/constants';
+import TextControl from '../../Controls/TextControl';
+import ToggleControl from '../../Controls/ToggleControl';
+import OptionGroup from './OptionGroup';
+import ControlWrap from '../../Controls/ControlWrap';
+import Toggle from '../../Common/Toggle';
+import Select from '../../Common/Select';
+
+const DUMMY_SETTINGS_ARGS = {
+	enable_featured_image_taxonomy: {
+		icon: LucideImage,
+		label: __('Featured image for taxonomy', 'neve'),
+		description: __(
+			'Enable featured images for categories and tags.',
+			'neve'
+		),
+	},
+	enable_mega_menu: {
+		icon: LucideMenu,
+		label: __('Enable Mega Menu', 'neve'),
+		description: __(
+			'Enable Mega menu fuctionality in the menu dashboard page.',
+			'neve'
+		),
+	},
+	typekit_id: {
+		icon: LucideType,
+		label: __('Embed Typekit', 'neve'),
+		type: 'text',
+		placeholder: __('Paste your Typekit code here', 'neve'),
+		description: __(
+			'Add your Typekit embed code here to use custom fonts.',
+			'neve'
+		),
+	},
+	neve_access_restriction: {
+		icon: LucideLock,
+		label: __('Enable Content Restriction', 'neve'),
+		description: __(
+			'Restrict content access on Posts, Pages, and set a default login page.',
+			'neve'
+		),
+	},
+};
+
+if (NEVE_HAS_VALID_PRO) {
+	DUMMY_SETTINGS_ARGS.typekit_loading_method = {
+		icon: LucideMonitorDown,
+		label: __('Typekit loading method', 'neve'),
+		description: __(
+			'Choose if Typekit fonts should be loaded with JavaScript or CSS. JavaScript is usually faster.',
+			'neve'
+		),
+	};
+
+	DUMMY_SETTINGS_ARGS.featured_image_taxonomies = {
+		icon: LucideTags,
+		description: __(
+			'Enable featured images for the following taxonomies.',
+			'neve'
+		),
+	};
+
+	DUMMY_SETTINGS_ARGS.neve_access_restriction = {
+		...DUMMY_SETTINGS_ARGS.neve_access_restriction,
+		description: __(
+			'Adds a metabox to control content restriction on the post/taxonomy edit page.',
+			'neve'
+		),
+	};
+}
+
+const AccessRestrictionDummySettings = () => {
+	const { icon, label, description } =
+		DUMMY_SETTINGS_ARGS.neve_access_restriction;
+
+	const contentTypes = [
+		__('Posts', 'neve'),
+		__('Pages', 'neve'),
+		__('Categories', 'neve'),
+	];
+
+	return (
+		<ControlWrap label={label} icon={icon} description={description} locked>
+			<div className="grid gap-4 grid-cols-2 xl:grid-cols-3">
+				{contentTypes.map((type) => (
+					<Toggle key={type} disabled label={type} />
+				))}
+			</div>
+
+			<div className="grid gap-4 grid-cols-2 xl:grid-cols-3 mt-4 pt-4 border-t border-gray-200">
+				<Select
+					disabled
+					label={`${__('For logged out users', 'neve')}:`}
+					value={'default'}
+					choices={{
+						default: __(
+							'Show default Wordpress login page',
+							'neve'
+						),
+					}}
+				/>
+			</div>
+		</ControlWrap>
+	);
+};
+
+const DummySettings = () => {
+	return (
+		<>
+			{Object.entries(DUMMY_SETTINGS_ARGS).map(([id, setting]) => {
+				if (id === 'neve_access_restriction') {
+					return <AccessRestrictionDummySettings />;
+				}
+
+				if (!setting.type) {
+					return <ToggleControl key={id} locked {...setting} />;
+				}
+				if (setting.type === 'text') {
+					return <TextControl key={id} locked {...setting} />;
+				}
+
+				return <div key={id}>{setting.label}</div>;
+			})}
+		</>
+	);
+};
+
+// Modules that should not be displayed in the general tab.
+const EXCLUDED_MODULES = ['performance_features'];
+
+const ProModuleSettings = () => {
+	const { modules } = neveDash;
+
+	const displayedModules = Object.entries(modules)
+		.filter(
+			([key, moduleArgs]) =>
+				!EXCLUDED_MODULES.includes(key) &&
+				moduleArgs.options &&
+				moduleArgs.options.length > 0
+		)
+		.map(([key, moduleArgs]) => {
+			return [key, moduleArgs.options];
+		});
+
+	return (
+		<>
+			{displayedModules.map(([key, optionGroups]) => {
+				if (!optionGroups || optionGroups.length < 1) {
+					return null;
+				}
+
+				return optionGroups.map(({ options }, idx) => {
+					if (!options || Object.keys(options).length < 1) {
+						return null;
+					}
+
+					return (
+						<OptionGroup
+							module={key}
+							key={key + idx}
+							options={options}
+							overrides={DUMMY_SETTINGS_ARGS}
+						/>
+					);
+				});
+			})}
+		</>
+	);
+};
+
+export default () => {
+	const { isLicenseValid } = useLicenseData();
+
+	return (
+		<>
+			<h1 className="text-lg font-semibold mb-6">
+				{__('General Settings', 'neve')}
+			</h1>
+
+			<div>
+				{(isLicenseValid && <ProModuleSettings />) || <DummySettings />}
+			</div>
+		</>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Content/Settings/ManageModulesTabContent.js b/assets/apps/dashboard/src/Components/Content/Settings/ManageModulesTabContent.js
new file mode 100644
index 0000000000..8a077600b0
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings/ManageModulesTabContent.js
@@ -0,0 +1,5 @@
+import ModuleGrid from '../ModuleGrid';
+
+export default () => {
+	return <ModuleGrid />;
+};
diff --git a/assets/apps/dashboard/src/Components/Content/Settings/OptionGroup.js b/assets/apps/dashboard/src/Components/Content/Settings/OptionGroup.js
new file mode 100644
index 0000000000..a273a8eab7
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings/OptionGroup.js
@@ -0,0 +1,123 @@
+import { useSelect } from '@wordpress/data';
+import MultiselectControl from '../../Controls/MultiselectControl';
+import SelectControl from '../../Controls/SelectControl';
+import TextControl from '../../Controls/TextControl';
+import ToggleControl from '../../Controls/ToggleControl';
+import { NEVE_STORE } from '../../../utils/constants';
+import { useEffect } from '@wordpress/element';
+import AccessRestriction from './AccessRestriction';
+import ControlWrap from '../../Controls/ControlWrap';
+
+export default ({ options, overrides = {}, module }) => {
+	const { getProOption, getModuleStatus } = useSelect(NEVE_STORE);
+
+	if (!getModuleStatus(module)) {
+		return null;
+	}
+
+	return (
+		<>
+			{Object.entries(options).map(([slug, optionData]) => {
+				if (
+					optionData.depends_on &&
+					getProOption(optionData.depends_on) !== true
+				) {
+					return null;
+				}
+
+				if (slug === 'enable_local_fonts') {
+					return null;
+				}
+
+				if (overrides[slug]) {
+					optionData = { ...optionData, ...overrides[slug] };
+				}
+
+				const { type } = optionData;
+
+				switch (type) {
+					case 'toggle':
+						return (
+							<ToggleControl
+								key={slug}
+								option={slug}
+								icon={optionData.icon}
+								label={optionData.label}
+								description={optionData.description}
+								checked={optionData.value}
+							/>
+						);
+
+					case 'text':
+						return (
+							<TextControl
+								key={slug}
+								option={slug}
+								icon={optionData.icon}
+								label={optionData.label}
+								description={optionData.description}
+							/>
+						);
+
+					case 'select':
+						return (
+							<SelectControl
+								key={slug}
+								icon={optionData.icon}
+								label={optionData.label}
+								description={optionData.description}
+								option={slug}
+								choices={optionData.choices}
+							/>
+						);
+					case 'multi_select':
+						return (
+							<MultiselectControl
+								key={slug}
+								icon={optionData.icon}
+								label={optionData.label}
+								description={optionData.description}
+								option={slug}
+								choices={optionData.choices}
+							/>
+						);
+
+					case 'react':
+						return slug === 'neve_access_restriction' ? (
+							<AccessRestriction
+								key={slug}
+								optionData={optionData}
+							/>
+						) : (
+							<ControlWrap
+								key={slug}
+								label={optionData.label}
+								description={optionData.description}
+								icon={optionData.icon}
+								locked={optionData.locked}
+							>
+								<ReactPlaceholder key={slug} slug={slug} />
+							</ControlWrap>
+						);
+
+					default:
+						return null;
+				}
+			})}
+		</>
+	);
+};
+
+const ReactPlaceholder = ({ slug }) => {
+	useEffect(() => {
+		window.dispatchEvent(
+			new window.CustomEvent('neve-dashboard-react-placeholder', {
+				detail: {
+					slug,
+				},
+			})
+		);
+	}, []);
+
+	return <div id={slug} />;
+};
diff --git a/assets/apps/dashboard/src/Components/Content/Settings/PerformanceTabContent.js b/assets/apps/dashboard/src/Components/Content/Settings/PerformanceTabContent.js
new file mode 100644
index 0000000000..536e468d8a
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings/PerformanceTabContent.js
@@ -0,0 +1,100 @@
+/* global neveDash */
+import { __ } from '@wordpress/i18n';
+import { LucideCode, LucideSmile, LucideText, LucideZap } from 'lucide-react';
+import ToggleControl from '../../Controls/ToggleControl';
+import useLicenseData from '../../../Hooks/useLicenseData';
+import OptionGroup from './OptionGroup';
+
+const LOCAL_HOSTING_OPTION = 'enable_local_fonts';
+
+const DUMMY_SETTINGS_ARGS = {
+	enable_emoji_removal: {
+		icon: LucideSmile,
+		label: __('Emoji Removal', 'neve'),
+		description: __(
+			'Remove emoji scripts to improve page load time.',
+			'neve'
+		),
+	},
+	enable_embedded_removal: {
+		icon: LucideCode,
+		label: __('Embed Removal', 'neve'),
+		description: __('Remove embed scripts for better performance.', 'neve'),
+	},
+	enable_lazy_content: {
+		icon: LucideZap,
+		label: __('Lazy Rendering', 'neve'),
+		description: __(
+			'Enable lazy rendering for better initial page load.',
+			'neve'
+		),
+	},
+};
+
+const DummySettings = () => {
+	return (
+		<>
+			{Object.values(DUMMY_SETTINGS_ARGS).map((setting, index) => {
+				return (
+					<ToggleControl
+						key={index}
+						icon={setting.icon}
+						label={setting.label}
+						description={setting.description}
+						locked={true}
+						checked={false}
+					/>
+				);
+			})}
+		</>
+	);
+};
+
+const ProModuleSettings = () => {
+	const optionGroups = neveDash?.modules?.performance_features.options || [];
+
+	if (optionGroups.length < 1) {
+		return null;
+	}
+
+	return optionGroups.map(({ options }, idx) => {
+		if (!options || Object.keys(options).length < 1) {
+			return null;
+		}
+
+		return (
+			<OptionGroup
+				module={'performance_features'}
+				key={idx}
+				options={options}
+				overrides={DUMMY_SETTINGS_ARGS}
+			/>
+		);
+	});
+};
+
+export default () => {
+	const { isLicenseValid } = useLicenseData();
+
+	return (
+		<>
+			<h1 className="text-lg font-semibold mb-6">
+				{__('Performance Settings', 'neve')}
+			</h1>
+
+			<div>
+				<ToggleControl
+					icon={LucideText}
+					label={__('Enable Local Fonts Hosting', 'neve')}
+					option={LOCAL_HOSTING_OPTION}
+					description={__(
+						'Host Google Fonts locally for better performance and GDPR compliance.',
+						'neve'
+					)}
+				/>
+
+				{(isLicenseValid && <ProModuleSettings />) || <DummySettings />}
+			</div>
+		</>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Content/Settings/WhiteLabelTabContent.js b/assets/apps/dashboard/src/Components/Content/Settings/WhiteLabelTabContent.js
new file mode 100644
index 0000000000..63d0fcdc29
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Settings/WhiteLabelTabContent.js
@@ -0,0 +1,313 @@
+/* global neveDash */
+import { __ } from '@wordpress/i18n';
+import useLicenseData from '../../../Hooks/useLicenseData';
+import {
+	CircleFadingArrowUp,
+	LucideBuilding,
+	LucideMessageCircleQuestion,
+	LucidePlug,
+	LucideSettings,
+	LucideToggleRight,
+	LucideWallpaper,
+} from 'lucide-react';
+import TextInput from '../../Common/TextInput';
+import { useReducer, useState } from '@wordpress/element';
+import Button from '../../Common/Button';
+import ControlWrap from '../../Controls/ControlWrap';
+import Toggle from '../../Common/Toggle';
+import Notice from '../../Common/Notice';
+import { changeOption } from '../../../utils/rest';
+import { useDispatch } from '@wordpress/data';
+import { NEVE_STORE } from '../../../utils/constants';
+
+const DUMMY_SECTIONS = {
+	agency: {
+		title: __('Agency Branding', 'neve'),
+		icon: LucideBuilding,
+		fields: {
+			author_name: {
+				type: 'text',
+				label: __('Agency Author', 'neve'),
+			},
+			author_url: {
+				type: 'text',
+				label: __('Agency Author URL', 'neve'),
+			},
+			starter_sites: {
+				type: 'toggle',
+				label: __('Hide Sites Library', 'neve'),
+			},
+			my_library: {
+				type: 'toggle',
+				label: __('Hide My Library', 'neve'),
+			},
+		},
+	},
+	theme: {
+		title: __('Theme Branding', 'neve'),
+		icon: LucideWallpaper,
+		fields: {
+			theme_name: {
+				type: 'text',
+				label: __('Theme Name', 'neve'),
+			},
+			theme_description: {
+				type: 'textarea',
+				label: __('Theme Description', 'neve'),
+			},
+			screenshot_url: {
+				type: 'text',
+				label: __('Screenshot URL', 'neve'),
+			},
+		},
+	},
+	plugin: {
+		title: __('Plugin Branding', 'neve'),
+		icon: LucidePlug,
+		fields: {
+			plugin_name: {
+				type: 'text',
+				label: __('Plugin Name', 'neve'),
+			},
+			plugin_description: {
+				type: 'textarea',
+				label: __('Plugin Description', 'neve'),
+			},
+		},
+	},
+	sidebar: {
+		title: __('Enable White Label', 'neve'),
+		icon: LucideToggleRight,
+		fields: {
+			white_label: {
+				type: 'toggle',
+				label: __('Hide Options from Dashboard', 'neve'),
+			},
+			license: {
+				type: 'toggle',
+				label: __('Enable License Hiding', 'neve'),
+			},
+		},
+	},
+};
+
+const PlaceholderComponent = () => {
+	return (
+		<div>
+			{Object.entries(DUMMY_SECTIONS).map(([id, section]) => {
+				const ICON = section.icon;
+
+				return (
+					<ControlWrap
+						key={id}
+						label={section.title}
+						icon={ICON}
+						locked={true}
+					>
+						<div className="grid gap-4">
+							{Object.entries(section.fields).map(
+								([sid, setting]) => {
+									return (
+										<div key={sid} className="opacity-75">
+											{setting.type === 'toggle' ? (
+												<Toggle
+													disabled
+													locked
+													checked={false}
+													label={setting.label}
+												/>
+											) : (
+												<TextInput
+													label={setting.label}
+													disabled={true}
+													name={sid}
+												/>
+											)}
+										</div>
+									);
+								}
+							)}
+						</div>
+					</ControlWrap>
+				);
+			})}
+
+			<div className="flex justify-end mt-6">
+				<Button isPrimary disabled>
+					{__('Save', 'neve')}
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+const WhiteLabelSettings = () => {
+	const { strings } = neveDash;
+
+	const { fields, optionKey, options } = neveDash.whiteLabelData;
+
+	const allFields = Object.values(fields)
+		.map((all) => all.fields)
+		.reduce((acc, val) => ({ ...acc, ...val }), {});
+
+	// remap values from options if the field type is toggle parse for '0' and '1'.
+	const formDefaults = Object.keys(allFields).reduce((acc, key) => {
+		if (allFields[key].type === 'toggle') {
+			acc[key] = options[key] === '1';
+		} else {
+			acc[key] = options[key];
+		}
+		return acc;
+	}, {});
+
+	const [loading, setLoading] = useState(false);
+	const [formData, setFormData] = useReducer((state, action) => {
+		return {
+			...state,
+			[action.name]: action.value,
+		};
+	}, formDefaults);
+
+	const { setToast } = useDispatch(NEVE_STORE);
+
+	if (!neveDash.whiteLabelData) {
+		return (
+			<Notice icon={CircleFadingArrowUp}>{strings.updateOldPro}</Notice>
+		);
+	}
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+
+		setLoading(true);
+
+		changeOption(optionKey, JSON.stringify(formData), false, false)
+			.then((r) => {
+				if (r.success) {
+					setToast(__('White Label settings saved.', 'neve'));
+					neveDash.whiteLabelData.options = formData;
+					return;
+				}
+
+				setToast(r.message ? r.message : false);
+			})
+			.catch((err) => {
+				setToast(err.message ? err.message : false);
+			})
+			.finally(() => {
+				setLoading(false);
+			});
+	};
+
+	return (
+		<form onSubmit={handleSubmit}>
+			{Object.entries(fields).map(([id, section]) => {
+				// We replace the icon as there's no way to retro-fit it from PRO.
+				section.icon = DUMMY_SECTIONS[id]?.icon || LucideSettings;
+
+				return (
+					<ControlWrap
+						key={id}
+						label={section.title}
+						icon={section.icon}
+					>
+						<div className="grid gap-4">
+							{Object.entries(section.fields).map(
+								([sid, setting]) => {
+									return (
+										<div key={sid}>
+											{[
+												'text',
+												'url',
+												'textarea',
+											].includes(setting.type) && (
+												<TextInput
+													label={setting.label}
+													type={setting.type}
+													onChange={(e) =>
+														setFormData({
+															name: sid,
+															value: e.target
+																.value,
+														})
+													}
+													value={formData[sid]}
+												/>
+											)}
+											{setting.type === 'toggle' && (
+												<Toggle
+													checked={
+														formData[sid] === '1' ||
+														formData[sid] === true
+													}
+													description={
+														setting.description
+													}
+													label={setting.label}
+													onToggle={(value) =>
+														setFormData({
+															name: sid,
+															value,
+														})
+													}
+												/>
+											)}
+										</div>
+									);
+								}
+							)}
+						</div>
+					</ControlWrap>
+				);
+			})}
+			<div className="flex justify-end mt-6">
+				<Button isSubmit isPrimary loading={loading} disabled={loading}>
+					{loading
+						? __('Saving', 'neve') + '...'
+						: __('Save', 'neve')}
+				</Button>
+			</div>
+		</form>
+	);
+};
+
+export default () => {
+	const { isLicenseValid, licenseTier } = useLicenseData();
+
+	const showPlaceholder = !isLicenseValid || licenseTier < 3;
+
+	return (
+		<>
+			<div className="flex items-center justify-between mb-6">
+				<h1 className="text-lg font-semibold">
+					{__('White Label Settings', 'neve')}
+				</h1>
+
+				{showPlaceholder && (
+					<Button
+						target="_blank"
+						className="!p-0"
+						isLink
+						href={neveDash.upgradeURLModules}
+					>
+						<LucideMessageCircleQuestion size={18} />
+						{__('Available in Agency Plan', 'neve')}
+					</Button>
+				)}
+			</div>
+
+			{showPlaceholder && <PlaceholderComponent />}
+			{!showPlaceholder && !neveDash.whiteLabelData && (
+				<Notice icon={CircleFadingArrowUp}>
+					{__(
+						'Please reload this page in order to view the White Label Settings',
+						'neve'
+					)}
+				</Notice>
+			)}
+			{!showPlaceholder && !!neveDash.whiteLabelData && (
+				<WhiteLabelSettings />
+			)}
+		</>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Content/Sidebar/LicenseCard.js b/assets/apps/dashboard/src/Components/Content/Sidebar/LicenseCard.js
new file mode 100644
index 0000000000..4f04f9abb3
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Sidebar/LicenseCard.js
@@ -0,0 +1,165 @@
+/* global neveDash */
+import { fetchOptions, send } from '../../../utils/rest';
+import Toast from '../../Common/Toast';
+
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { LucideCircleCheck, LucideCircleX } from 'lucide-react';
+import useLicenseData from '../../../Hooks/useLicenseData';
+import Card from '../../../Layout/Card';
+import { NEVE_STORE } from '../../../utils/constants';
+import Button from '../../Common/Button';
+import Pill from '../../Common/Pill';
+
+const LicenseCard = () => {
+	const { proApi } = neveDash;
+
+	const { changeLicense, setSettings } = useDispatch(NEVE_STORE);
+
+	const { license, isLicenseValid } = useLicenseData();
+
+	const [key, setKey] = useState(isLicenseValid ? license.key || '' : '');
+	const [status, setStatus] = useState(false);
+
+	const [toast, setToast] = useState('');
+	const [toastType, setToastType] = useState('success');
+
+	const { valid, expiration } = license;
+	const { whiteLabel, strings } = neveDash;
+	const { licenseCardHeading, licenseCardDescription } = strings;
+
+	const toggleLicense = () => {
+		const toDo = 'valid' === valid ? 'deactivate' : 'activate';
+		setStatus('activate' === toDo ? 'activating' : 'deactivating');
+		send(proApi + '/toggle_license', { key, action: toDo }).then(
+			(response) => {
+				setToastType(response.success ? 'success' : 'error');
+				setKey('activate' === toDo ? key : '');
+				setToast(response.message);
+				setStatus(false);
+				if (response.license) {
+					changeLicense(response.license);
+					fetchOptions().then((r) => {
+						setSettings(r);
+					});
+				}
+			}
+		);
+	};
+
+	if (whiteLabel && whiteLabel.hideLicense) {
+		return null;
+	}
+
+	const getStatusLabel = () => {
+		const statusLabelMap = {
+			activating: __('Activating', 'neve'),
+			deactivating: __('Deactivating', 'neve'),
+			activate: __('Activate', 'neve'),
+			deactivate: __('Deactivate', 'neve'),
+		};
+
+		if (!status) {
+			return 'valid' === valid
+				? __('Deactivate', 'neve')
+				: __('Activate', 'neve');
+		}
+
+		return statusLabelMap[status];
+	};
+
+	return (
+		<Card title={licenseCardHeading}>
+			<div className="grid gap-4">
+				{!whiteLabel && licenseCardDescription && (
+					<p
+						className="text-sm"
+						dangerouslySetInnerHTML={{
+							__html: licenseCardDescription,
+						}}
+					/>
+				)}
+				<form
+					className="flex gap-3 items-center"
+					onSubmit={(e) => {
+						e.preventDefault();
+						toggleLicense();
+					}}
+				>
+					<input
+						type="text"
+						id="license-field"
+						name="license-field"
+						className="flex-grow rounded !border-gray-300 text-sm !py-1 !px-2"
+						disabled={'valid' === valid}
+						onChange={(e) => {
+							const keyToSet = e.target.value.replace(/\s+/g, '');
+							setKey(keyToSet);
+						}}
+						value={
+							'valid' === valid
+								? '******************************' +
+								  key.slice(-5)
+								: key
+						}
+						placeholder={__('Enter License Key', 'neve')}
+					/>
+					<Button
+						isPrimary={'valid' !== valid}
+						isSecondary={'valid' === valid}
+						disabled={!!status || !key}
+						isSubmit
+					>
+						{getStatusLabel()}
+					</Button>
+				</form>
+				{toast && (
+					<Toast
+						type={toastType}
+						dismiss={setToast}
+						message={toast}
+					/>
+				)}
+				{'expired' === valid ||
+					('valid' === valid && (
+						<div className="flex items-center gap-1">
+							<Pill
+								type={valid === 'valid' ? 'success' : 'warning'}
+								className="inline-flex items-center gap-1 px-2 py-1"
+							>
+								{valid === 'valid' ? (
+									<>
+										<LucideCircleCheck size={14} />
+										<span>{__('Valid', 'neve')}</span>
+									</>
+								) : (
+									<>
+										<LucideCircleX size={14} />
+										<span>{__('Expired', 'neve')}</span>
+									</>
+								)}
+							</Pill>
+							{expiration && (
+								<>
+									<span className="space-x-1 ml-auto">
+										<span className="text-xs">
+											{'valid' === valid
+												? __('Expires', 'neve')
+												: __('Expired', 'neve')}
+										</span>
+
+										<span className="font-semibold text-xs">
+											{expiration}
+										</span>
+									</span>
+								</>
+							)}
+						</div>
+					))}
+			</div>
+		</Card>
+	);
+};
+
+export default LicenseCard;
diff --git a/assets/apps/dashboard/src/Components/Content/Sidebar/PluginsCard.js b/assets/apps/dashboard/src/Components/Content/Sidebar/PluginsCard.js
new file mode 100644
index 0000000000..83e8625b16
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Sidebar/PluginsCard.js
@@ -0,0 +1,139 @@
+/* global neveDash */
+import usePluginActions from '../../../Hooks/usePluginActions';
+import Card from '../../../Layout/Card';
+import {
+	NEVE_HIDE_PLUGINS,
+	NEVE_PLUGIN_ICON_MAP,
+} from '../../../utils/constants';
+
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import cn from 'classnames';
+import { LoaderCircle, LucidePuzzle } from 'lucide-react';
+import Pill from '../../Common/Pill';
+import Toast from '../../Common/Toast';
+import TransitionInOut from '../../Common/TransitionInOut';
+
+const PluginCard = ({ slug, data }) => {
+	const ICON = NEVE_PLUGIN_ICON_MAP[slug] || LucidePuzzle;
+
+	const [error, setError] = useState(null);
+	const [success, setSuccess] = useState(false);
+
+	const { title, description } = data;
+
+	const { doPluginAction, loading, buttonText } = usePluginActions(
+		slug,
+		true
+	);
+
+	const isPluginActive = useSelect((select) => {
+		const { getPlugins } = select('neve-dashboard');
+
+		const plugins = getPlugins();
+
+		return plugins[slug].cta === 'deactivate';
+	});
+
+	if (isPluginActive && !success) {
+		return null;
+	}
+
+	const handleClick = async () => {
+		setError(null);
+
+		const result = await doPluginAction();
+
+		if (result.success) {
+			setSuccess(true);
+
+			return;
+		}
+
+		if (!result.success) {
+			setError(result.error);
+		}
+	};
+
+	return (
+		<div className="flex items-start p-3 bg-white rounded-lg border border-gray-100 hover:shadow-md transition-shadow ">
+			<div className="flex-grow">
+				<div className="flex gap-4 items-center">
+					<ICON className="size-6 text-blue-500" />
+					<h3 className="text-sm font-medium text-gray-900">
+						{title}
+					</h3>
+
+					{!success && (
+						<button
+							onClick={handleClick}
+							disabled={loading}
+							className={cn(
+								'ml-auto text-blue-600 hover:text-blue-700 text-sm font-medium flex items-center',
+								{
+									'opacity-75 cursor-not-allowed': loading,
+								}
+							)}
+						>
+							{loading && (
+								<LoaderCircle
+									size={14}
+									className="animate-spin mr-2"
+								/>
+							)}
+							<span>{buttonText}</span>
+						</button>
+					)}
+					{success && (
+						<div className="ml-auto">
+							<TransitionInOut show>
+								<Pill type="success">
+									{__('Active', 'neve')}
+								</Pill>
+							</TransitionInOut>
+						</div>
+					)}
+				</div>
+				<p className="text-sm leading-relaxed text-gray-600 mt-1">
+					{description}
+				</p>
+
+				{error && (
+					<div className="mt-2">
+						<Toast
+							type="error"
+							dismiss={setError}
+							message={error}
+						/>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+const PluginsCard = ({ grid = false }) => {
+	const { plugins } = neveDash;
+
+	if (NEVE_HIDE_PLUGINS || plugins.length < 1) {
+		return null;
+	}
+
+	const contentClasses = cn({
+		'space-y-3': !grid,
+		'grid gap-4 grid-cols-2': grid,
+	});
+
+	return (
+		<Card title={__('Recommended Plugins', 'neve')}>
+			<div className={contentClasses}>
+				{Object.entries(plugins).map(([slug, args]) => (
+					<PluginCard key={slug} slug={slug} data={args} />
+				))}
+			</div>
+		</Card>
+	);
+};
+
+export default PluginsCard;
diff --git a/assets/apps/dashboard/src/Components/Content/Sidebar/Sidebar.js b/assets/apps/dashboard/src/Components/Content/Sidebar/Sidebar.js
new file mode 100644
index 0000000000..e6d8eb3844
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Sidebar/Sidebar.js
@@ -0,0 +1,150 @@
+import { changeOption } from '../../../utils/rest';
+import SupportCard from './SupportCard';
+import LicenseCard from './LicenseCard';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	NEVE_HAS_PRO,
+	NEVE_IS_WHITELABEL,
+	NEVE_STORE,
+} from '../../../utils/constants';
+import Card from '../../../Layout/Card';
+import Link from '../../Common/Link';
+import Toggle from '../../Common/Toggle';
+import PluginsCard from './PluginsCard';
+import { LucideLoaderCircle } from 'lucide-react';
+
+const ReviewCard = () => (
+	<Card title={__('Leave us a review', 'neve')}>
+		<p className="text-gray-600 mb-4 text-sm">
+			{__(
+				'Are you are enjoying Neve? We would love to hear your feedback.',
+				'neve'
+			)}
+		</p>
+
+		<Link
+			isExternal
+			text={__('Submit a review', 'neve')}
+			url={'https://wordpress.org/support/theme/neve/reviews/#new-post'}
+		/>
+	</Card>
+);
+
+const ContributingCard = () => {
+	const loggerEnabled = useSelect((select) => {
+		const { getOption } = select(NEVE_STORE);
+
+		return getOption('neve_logger_flag');
+	});
+
+	const [tracking, setTracking] = useState('yes' === loggerEnabled);
+	const [loading, setLoading] = useState(false);
+
+	const { setToast, setLogger } = useDispatch(NEVE_STORE);
+
+	const handleTrackingChange = (value) => {
+		setLoading(true);
+		setTracking(value);
+		changeOption('neve_logger_flag', value ? 'yes' : 'no', false, false)
+			.then((r) => {
+				if (!r.success) {
+					setToast(
+						__('Could not update option. Please try again.', 'neve')
+					);
+					setTracking(!value);
+					return;
+				}
+				setLogger(value ? 'yes' : 'no');
+				setToast(__('Option Updated', 'neve'));
+			})
+			.catch(() => {
+				setToast(
+					__('Could not update option. Please try again.', 'neve')
+				);
+				setTracking(!value);
+			})
+			.finally(() => {
+				setLoading(false);
+			});
+	};
+
+	return (
+		<Card title={__('Contributing', 'neve')}>
+			<p className="text-gray-600 mb-4 text-sm">
+				{__(
+					'Become a contributor by opting in to our anonymous data tracking. We guarantee no sensitive data is collected.',
+					'neve'
+				)}
+			</p>
+
+			<Link
+				isExternal
+				text={__('What do we track?', 'neve')}
+				url={
+					'https://docs.themeisle.com/article/1122-neve-usage-tracking'
+				}
+			/>
+
+			<Toggle
+				className="mt-4"
+				onToggle={handleTrackingChange}
+				checked={tracking}
+				label={
+					<div className="flex items-center gap-3">
+						{__('Allow Anonymous Tracking', 'neve')}
+						{loading && (
+							<LucideLoaderCircle
+								size={18}
+								className="animate-spin"
+							/>
+						)}
+					</div>
+				}
+			/>
+		</Card>
+	);
+};
+
+const CommunityCard = () => {
+	return (
+		<Card title={__('Join the Community', 'neve')}>
+			<p className="text-gray-600 mb-4 text-sm">
+				{__(
+					'Share opinions, ask questions and help each other on our Neve community!',
+					'neve'
+				)}
+			</p>
+
+			<Link
+				isExternal
+				text={__('Join our Facebook Group', 'neve')}
+				url={'https://www.facebook.com/groups/648646435537266/'}
+			/>
+		</Card>
+	);
+};
+
+const Sidebar = () => {
+	return (
+		<div className="grid gap-6">
+			{NEVE_HAS_PRO && <LicenseCard />}
+
+			{NEVE_HAS_PRO && <SupportCard />}
+
+			{!NEVE_IS_WHITELABEL && <ReviewCard />}
+
+			{!NEVE_HAS_PRO && <PluginsCard />}
+
+			{!NEVE_IS_WHITELABEL && (
+				<>
+					<ContributingCard />
+					<CommunityCard />
+				</>
+			)}
+		</div>
+	);
+};
+
+export default Sidebar;
diff --git a/assets/apps/dashboard/src/Components/Content/Sidebar/SupportCard.js b/assets/apps/dashboard/src/Components/Content/Sidebar/SupportCard.js
new file mode 100644
index 0000000000..b3eb4320d1
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Sidebar/SupportCard.js
@@ -0,0 +1,43 @@
+/* global neveDash */
+import { useSelect } from '@wordpress/data';
+import { NEVE_IS_WHITELABEL, NEVE_STORE } from '../../../utils/constants';
+import Link from '../../Common/Link';
+
+const SupportCard = () => {
+	const { license } = useSelect((select) => {
+		const { getLicense } = select(NEVE_STORE);
+		return {
+			license: getLicense(),
+		};
+	});
+
+	if (!license || !license.valid || 'valid' !== license.valid) {
+		return null;
+	}
+	const { supportData } = license;
+
+	if (!supportData || !supportData.text || !supportData.url) {
+		return null;
+	}
+
+	let supportUrl = supportData.url;
+
+	if (NEVE_IS_WHITELABEL) {
+		if (!neveDash.whiteLabel?.agencyURL) {
+			return null;
+		}
+
+		supportUrl = neveDash.whiteLabel.agencyURL;
+	}
+
+	return (
+		<Link
+			className="flex items-center justify-center bg-white hover:bg-blue-600 text-blue-600 hover:text-white hover:no-underline border border-blue-600 hover:border-transparent rounded font-semibold py-3 px-2"
+			url={supportUrl}
+			isExternal
+			text={supportData.text}
+		/>
+	);
+};
+
+export default SupportCard;
diff --git a/assets/apps/dashboard/src/Components/Content/Start.js b/assets/apps/dashboard/src/Components/Content/Start.js
deleted file mode 100644
index bd24e6769a..0000000000
--- a/assets/apps/dashboard/src/Components/Content/Start.js
+++ /dev/null
@@ -1,178 +0,0 @@
-/* global neveDash */
-import Card from '../Card';
-import { tabs } from '../../utils/common';
-
-import { __ } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
-import { Button, ExternalLink } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
-
-const Start = (props) => {
-	const { setTab, tier } = props;
-	const { pro, whiteLabel, customizerShortcuts, tpcOnboardingURL } = neveDash;
-	const starterSitesHidden = whiteLabel && whiteLabel.hideStarterSites;
-
-	const renderCustomizerLinks = () => {
-		const split = Math.ceil(customizerShortcuts.length / 2);
-		const parts = [
-			customizerShortcuts.slice(0, split),
-			customizerShortcuts.slice(split),
-		];
-		return (
-			<div className="columns">
-				{parts.map((column, index) => {
-					return (
-						<div className="col" key={index}>
-							{column.map((item, indexColumn) => {
-								return (
-									<Fragment key={indexColumn}>
-										<Button isLink href={item.link}>
-											{item.text}
-										</Button>
-										{indexColumn !== column.length - 1 && (
-											<hr />
-										)}
-									</Fragment>
-								);
-							})}
-						</div>
-					);
-				})}
-			</div>
-		);
-	};
-
-	return (
-		<>
-			{!starterSitesHidden && (
-				<Card
-					icon={neveDash.assets + 'squares.svg'}
-					title={__('Starter Sites', 'neve')}
-					description={neveDash.strings.starterSitesCardDescription}
-				>
-					{!neveDash.isValidLicense && (
-						<p>{neveDash.strings.starterSitesCardUpsellMessage}</p>
-					)}
-
-					<div className="card-button-wrap">
-						{tabs['starter-sites'] ? (
-							<Button
-								isPrimary
-								onClick={() => {
-									setTab('starter-sites');
-								}}
-							>
-								{__('Go to Starter Sites', 'neve')}
-							</Button>
-						) : (
-							<Button href={tpcOnboardingURL} isPrimary>
-								{__('Go to Starter Sites', 'neve')}
-							</Button>
-						)}
-						{!neveDash.isValidLicense && (
-							<Button
-								target="_blank"
-								rel="external noreferrer noopener"
-								href={neveDash.startSitesgetNeveProURL}
-								isSecondary
-							>
-								{__('Get Neve Pro', 'neve')}
-								<span className="components-visually-hidden">
-									{__('(opens in a new tab)', 'neve')}
-								</span>
-							</Button>
-						)}
-					</div>
-				</Card>
-			)}
-			<Card
-				classNames="customizer-quick-links"
-				icon={neveDash.assets + 'compass.svg'}
-				title={__('Customizer quick links', 'neve')}
-			>
-				{renderCustomizerLinks()}
-			</Card>
-
-			{!whiteLabel && (
-				<>
-					<Card
-						icon={neveDash.assets + 'page.svg'}
-						title={__(
-							'Getting Started? Check help and docs',
-							'neve'
-						)}
-						description={__(
-							'Need more details? Please check our full documentation for detailed information on how to use Neve.',
-							'neve'
-						)}
-					>
-						<Button isLink onClick={() => setTab('help')}>
-							{__('Go to docs', 'neve')}
-						</Button>
-					</Card>
-					<Card
-						icon={neveDash.assets + 'template-cloud.svg'}
-						title="Templates Cloud"
-						lockIcon={!pro}
-						description={__(
-							'Boost productivity and speed up your workflow by saving all your designs and share them automatically to all your sites in 1-click.',
-							'neve'
-						)}
-					>
-						{tier !== 3 && (
-							<ExternalLink href="https://docs.themeisle.com/article/1354-neve-template-cloud-library">
-								{__('Discover Templates Cloud', 'neve')}
-							</ExternalLink>
-						)}
-						{tier === 3 && (
-							<ExternalLink href="https://docs.themeisle.com/article/1354-neve-template-cloud-library">
-								{__('Learn how to use Templates Cloud', 'neve')}
-							</ExternalLink>
-						)}
-					</Card>
-				</>
-			)}
-			{!pro && (
-				<>
-					<Card
-						classNames="woo-card"
-						icon="cart"
-						dashicon={true}
-						lockIcon={true}
-						title={__('WooCommerce Booster', 'neve')}
-						description={__(
-							'Empower your online store with awesome new features, specially designed for a smooth WooCommerce integration.',
-							'neve'
-						)}
-					>
-						<ExternalLink href="https://docs.themeisle.com/article/1058-woocommerce-booster-documentation">
-							{__('Learn more', 'neve')}
-						</ExternalLink>
-					</Card>
-					<Card
-						classNames="block-editor-card"
-						icon="block-default"
-						dashicon={true}
-						lockIcon={true}
-						title={__('Block Editor Booster', 'neve')}
-						description={__(
-							'Enhance your Gutenberg experience with new blocks, including Business Hours, Popup, Review Comparison Table and more.',
-							'neve'
-						)}
-					>
-						<ExternalLink href="https://docs.themeisle.com/article/1473-neve-block-editor-booster-module">
-							{__('Learn more', 'neve')}
-						</ExternalLink>
-					</Card>
-				</>
-			)}
-		</>
-	);
-};
-
-export default withSelect((select) => {
-	const { getLicenseTier } = select('neve-dashboard');
-	return {
-		tier: getLicenseTier(),
-	};
-})(Start);
diff --git a/assets/apps/dashboard/src/Components/Content/StarterSitesUnavailable.js b/assets/apps/dashboard/src/Components/Content/StarterSitesUnavailable.js
index d17430307c..12cc52d042 100644
--- a/assets/apps/dashboard/src/Components/Content/StarterSitesUnavailable.js
+++ b/assets/apps/dashboard/src/Components/Content/StarterSitesUnavailable.js
@@ -1,52 +1,79 @@
 /* global neveDash */
-import InstallActivate from '../Plugin/InstallActivate';
 import { withSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
-const StarterSitesUnavailable = ({ templatesPluginData }) => {
-	const { tpcPath, tpcAdminURL, canInstallPlugins, assets } = neveDash;
-	const activateRedirect =
-		tpcAdminURL + (canInstallPlugins ? '&onboarding=yes' : '');
-	const currentState = templatesPluginData?.cta || 'install';
+import InstallActivate from '../Plugin/InstallActivate';
+import Card from '../../Layout/Card';
+import Container from '../../Layout/Container';
+import TransitionWrapper from '../Common/TransitionWrapper';
+
+const BackgroundPlaceholder = () => {
+	const [show, setShow] = useState(false);
+
+	const handleImageLoaded = () => {
+		setShow(true);
+	};
 
 	return (
-		<div className="unavailable-starter-sites">
-			<div
-				className="ss-background"
-				style={{ backgroundImage: `url(${assets}/starter.jpg)` }}
-			/>
-			<div className="content-wrap">
-				<InstallActivate
-					pluginData={{
-						name: 'Cloud Templates & Patterns Collection',
-						slug: 'templates-patterns-collection',
-						pluginBasename: tpcPath,
-						pluginState: currentState,
-						activateURL: templatesPluginData?.activate || '',
-					}}
-					successActivation={() => {
-						window.location.href = activateRedirect;
-					}}
-					successUpdate={() => {
-						window.location.href = activateRedirect;
-					}}
-					description={
-						<>
-							<h1>
-								{'deactivate' === currentState
-									? neveDash.strings
-											.starterSitesUnavailableUpdate
-									: neveDash.strings
-											.starterSitesUnavailableActive}
-							</h1>
-							<br />
-						</>
-					}
+		<div className="block absolute overflow-hidden inset-0 bg-cover opacity-15 mx-auto max-w-[1300px]">
+			<TransitionWrapper show={show} from="bottom" className="delay-150">
+				<img
+					style={{ marginTop: '-200px' }}
+					className="transition duration-300"
+					onLoad={handleImageLoaded}
+					src={`${neveDash.assets}starter.jpg`}
+					alt={__('Starter Sites', 'neve')}
 				/>
-			</div>
+			</TransitionWrapper>
 		</div>
 	);
 };
 
+const StarterSitesUnavailable = ({ templatesPluginData }) => {
+	const { tpcPath, tpcAdminURL, canInstallPlugins } = neveDash;
+	const currentState = templatesPluginData?.cta || 'install';
+	const activateRedirect = `${tpcAdminURL}${
+		canInstallPlugins ? '&onboarding=yes' : ''
+	}`;
+	const description = {
+		__html:
+			'deactivate' === currentState
+				? neveDash.strings.starterSitesUnavailableUpdate
+				: neveDash.strings.starterSitesUnavailableActive,
+	};
+
+	const redirectToStarterSites = () => {
+		window.location.href = activateRedirect;
+	};
+
+	return (
+		<Container className="relative min-h-full">
+			<BackgroundPlaceholder />
+			<TransitionWrapper from="top">
+				<Card className="z-50 relative flex flex-col justify-center items-center text-center max-w-3xl mx-auto">
+					<p
+						className="text-gray-800 text-base leading-relaxed mb-6 max-w-2xl mx-auto"
+						dangerouslySetInnerHTML={description}
+					/>
+
+					<InstallActivate
+						successUpdate={redirectToStarterSites}
+						successActivation={redirectToStarterSites}
+						pluginData={{
+							name: 'Starter Sites & Templates',
+							slug: 'templates-patterns-collection',
+							pluginBasename: tpcPath,
+							pluginState: currentState,
+							activateURL: templatesPluginData?.activate || '',
+						}}
+					/>
+				</Card>
+			</TransitionWrapper>
+		</Container>
+	);
+};
+
 export default withSelect((select) => {
 	const { getPlugins } = select('neve-dashboard');
 	return {
diff --git a/assets/apps/dashboard/src/Components/Content/Welcome.js b/assets/apps/dashboard/src/Components/Content/Welcome.js
new file mode 100644
index 0000000000..ba714004a3
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Content/Welcome.js
@@ -0,0 +1,38 @@
+/* global neveDash */
+import { __ } from '@wordpress/i18n';
+import { LucidePanelsTopLeft } from 'lucide-react';
+
+import Card from '../../Layout/Card';
+import { NEVE_HAS_PRO } from '../../utils/constants';
+import Link from '../Common/Link';
+import TransitionWrapper from '../Common/TransitionWrapper';
+import ModuleGrid from './ModuleGrid';
+import PluginsCard from './Sidebar/PluginsCard';
+
+export default () => (
+	<TransitionWrapper className="grid gap-6">
+		<CustomizerShortcutsCard />
+		{!NEVE_HAS_PRO && <ModuleGrid />}
+		{NEVE_HAS_PRO && <PluginsCard grid />}
+	</TransitionWrapper>
+);
+
+const CustomizerShortcutsCard = () => (
+	<Card
+		title={__('Essential Settings', 'neve')}
+		icon={<LucidePanelsTopLeft size={18} />}
+	>
+		<div className="grid grid-cols-2 gap-x-8 gap-y-4">
+			{neveDash.customizerShortcuts.map(({ text, link, description }) => (
+				<div key={link} className="grid gap-1">
+					<Link text={text} url={link} />
+					{description && (
+						<span className="text-gray-600 text-xs">
+							{description}
+						</span>
+					)}
+				</div>
+			))}
+		</div>
+	</Card>
+);
diff --git a/assets/apps/dashboard/src/Components/Controls/ControlWrap.js b/assets/apps/dashboard/src/Components/Controls/ControlWrap.js
new file mode 100644
index 0000000000..6a74602764
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Controls/ControlWrap.js
@@ -0,0 +1,52 @@
+import { __ } from '@wordpress/i18n';
+import cn from 'classnames';
+import { LucideSettings } from 'lucide-react';
+import Pill from '../Common/Pill';
+
+export default ({
+	icon,
+	label,
+	description,
+	locked,
+	afterTitle = null,
+	className,
+	children,
+}) => {
+	const ICON = icon || LucideSettings;
+
+	return (
+		<div
+			className={cn(
+				className,
+				'last:pb-0 pb-6 border-b last:border-0 first:mt-0 mt-6 grid gap-6'
+			)}
+		>
+			<div className="flex items-center gap-3">
+				<div className="grid gap-3 grow">
+					<div className="flex items-center">
+						{icon !== null && (
+							<ICON size={20} className="text-blue-600 mr-2" />
+						)}
+						<h3 className="text-base font-semibold">{label}</h3>
+						{locked && (
+							<Pill className="ml-2 !px-2 !py-1 text-xs bg-blue-100 text-blue-800 rounded">
+								{__('Pro', 'neve')}
+							</Pill>
+						)}
+					</div>
+
+					{description && (
+						<p className="text-gray-600">{description}</p>
+					)}
+				</div>
+
+				{afterTitle && (
+					<span className="ml-auto flex gap-3 items-center shrink-0">
+						{afterTitle}
+					</span>
+				)}
+			</div>
+			{children && <div>{children}</div>}
+		</div>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Controls/MultiselectControl.js b/assets/apps/dashboard/src/Components/Controls/MultiselectControl.js
new file mode 100644
index 0000000000..06feb141b3
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Controls/MultiselectControl.js
@@ -0,0 +1,80 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { LoaderCircle } from 'lucide-react';
+import { NEVE_STORE } from '../../utils/constants';
+import { changeOption } from '../../utils/rest';
+import MultiSelect from '../Common/Multiselect';
+import ControlWrap from './ControlWrap';
+
+const MultiSelectControl = ({
+	icon,
+	label,
+	description,
+	option,
+	isPro = true,
+	disabled,
+	locked,
+	choices = {},
+}) => {
+	const [loading, setLoading] = useState(false);
+
+	const { changeModuleOption, setToast } = useDispatch(NEVE_STORE);
+	const value = useSelect((select) => {
+		const { getOption, getProOption } = select(NEVE_STORE);
+
+		return isPro ? getProOption(option) : getOption(option);
+	});
+
+	const handleChange = (nextValues) => {
+		setLoading(true);
+
+		window.tiTrk?.with('neve').set(option, {
+			feature: 'module-settings',
+			featureComponent: option,
+			featureValue: nextValues,
+		});
+
+		changeModuleOption(option, nextValues);
+
+		changeOption(option, nextValues)
+			.then((r) => {
+				if (r.success) {
+					setToast(true);
+					return;
+				}
+				changeModuleOption(option, value);
+				setToast(false);
+			})
+			.finally(() => {
+				setLoading(false);
+			});
+	};
+
+	return (
+		<ControlWrap
+			label={label}
+			description={description}
+			icon={icon}
+			locked={locked}
+			afterTitle={
+				<>
+					{loading && (
+						<LoaderCircle
+							size={18}
+							className="animate-spin shrink-0"
+						/>
+					)}
+
+					<MultiSelect
+						choices={choices}
+						value={value}
+						disabled={loading || locked || disabled}
+						onChange={handleChange}
+					/>
+				</>
+			}
+		/>
+	);
+};
+
+export default MultiSelectControl;
diff --git a/assets/apps/dashboard/src/Components/Controls/SelectControl.js b/assets/apps/dashboard/src/Components/Controls/SelectControl.js
new file mode 100644
index 0000000000..15a3ff7ed3
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Controls/SelectControl.js
@@ -0,0 +1,66 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { NEVE_STORE } from '../../utils/constants';
+import { changeOption as changeSetting } from '../../utils/rest';
+
+import Select from '../Common/Select';
+import ControlWrap from './ControlWrap';
+
+export default ({
+	icon,
+	label,
+	description,
+	option,
+	isPro = true,
+	disabled,
+	locked,
+	choices,
+}) => {
+	const [loading, setLoading] = useState(false);
+
+	const { changeModuleOption, setToast } = useDispatch(NEVE_STORE);
+	const value = useSelect((select) => {
+		const { getOption, getProOption } = select(NEVE_STORE);
+
+		return isPro ? getProOption(option) : getOption(option);
+	});
+
+	const handleChange = (nextValue) => {
+		setLoading(true);
+		window.tiTrk?.with('neve').set(option, {
+			feature: 'module-settings',
+			featureComponent: option,
+			featureValue: nextValue,
+		});
+		changeSetting(option, nextValue)
+			.then((r) => {
+				if (r.success) {
+					changeModuleOption(option, nextValue);
+					setToast(true);
+					return;
+				}
+				setToast(false);
+			})
+			.finally(() => {
+				setLoading(false);
+			});
+	};
+
+	return (
+		<ControlWrap
+			description={description}
+			label={label}
+			icon={icon}
+			locked={locked}
+			afterTitle={
+				<Select
+					choices={choices}
+					value={value}
+					loading={loading}
+					disabled={disabled}
+					onChange={handleChange}
+				/>
+			}
+		></ControlWrap>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Controls/TextControl.js b/assets/apps/dashboard/src/Components/Controls/TextControl.js
new file mode 100644
index 0000000000..d1652585a1
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Controls/TextControl.js
@@ -0,0 +1,90 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { NEVE_STORE } from '../../utils/constants';
+import { changeOption } from '../../utils/rest';
+import Button from '../Common/Button';
+import TextInput from '../Common/TextInput';
+import ControlWrap from './ControlWrap';
+
+export default ({
+	icon,
+	label,
+	description,
+	option,
+	isPro = true,
+	disabled,
+	locked,
+	placeholder = '',
+}) => {
+	const { changeModuleOption, setToast } = useDispatch(NEVE_STORE);
+	const value = useSelect((select) => {
+		const { getOption, getProOption } = select(NEVE_STORE);
+
+		return isPro ? getProOption(option) : getOption(option);
+	});
+
+	const [loading, setLoading] = useState(false);
+
+	return (
+		<ControlWrap
+			label={label}
+			description={description}
+			icon={icon}
+			locked={locked}
+			afterTitle={
+				<form
+					disabled={loading || disabled || locked}
+					onSubmit={(e) => {
+						e.preventDefault();
+						setLoading(true);
+						changeOption(option, value)
+							.then((r) => {
+								if (r.success) {
+									setToast(true);
+									return;
+								}
+								setToast(r.message ? r.message : false);
+							})
+							.finally(() => {
+								setLoading(false);
+							});
+					}}
+				>
+					<div className="flex">
+						<TextInput
+							type="text"
+							id={option}
+							placeholder={placeholder}
+							disabled={loading || disabled || locked}
+							className="!border-r-0 !rounded-r-none px-2"
+							value={value}
+							onChange={(e) => {
+								changeModuleOption(option, e.target.value);
+								if (option === 'typekit_id') {
+									window.tiTrk?.with('neve').add({
+										feature: 'typekit-fonts',
+										featureComponent: 'typekit-id',
+										featureValue: 'enabled',
+									});
+								}
+							}}
+						/>
+
+						<Button
+							loading={loading}
+							type="submit"
+							isSecondary
+							disabled={loading || disabled || locked}
+							className="rounded-r"
+						>
+							{loading
+								? __('Saving', 'neve') + '...'
+								: __('Save', 'neve')}
+						</Button>
+					</div>
+				</form>
+			}
+		/>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/Controls/ToggleControl.js b/assets/apps/dashboard/src/Components/Controls/ToggleControl.js
new file mode 100644
index 0000000000..7af6fc7ff9
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/Controls/ToggleControl.js
@@ -0,0 +1,78 @@
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { LucideLoaderCircle } from 'lucide-react';
+
+import Toggle from '../Common/Toggle';
+import ControlWrap from './ControlWrap';
+
+import { NEVE_STORE } from '../../utils/constants';
+import { changeOption } from '../../utils/rest';
+
+export default ({
+	icon,
+	label,
+	description,
+	option,
+	isPro = true,
+	disabled,
+	locked,
+}) => {
+	const [loading, setLoading] = useState(false);
+
+	const value = useSelect((select) => {
+		const { getOption, getProOption } = select(NEVE_STORE);
+
+		return isPro ? getProOption(option) : getOption(option);
+	});
+
+	const { setToast, changeModuleOption } = useDispatch(NEVE_STORE);
+
+	const onToggleChange = (nextValue) => {
+		setLoading(true);
+		window.tiTrk?.with('neve').set(option, {
+			feature: 'module-settings',
+			featureComponent: option,
+			featureValue: nextValue,
+		});
+		changeModuleOption(option, nextValue);
+		changeOption(option, nextValue)
+			.then((r) => {
+				if (!r.success) {
+					changeModuleOption(option, !nextValue);
+					setToast(false);
+
+					return;
+				}
+
+				setToast(true);
+			})
+			.finally(() => {
+				setLoading(false);
+			});
+	};
+
+	return (
+		<ControlWrap
+			label={label}
+			description={description}
+			icon={icon}
+			locked={locked}
+			afterTitle={
+				<>
+					{loading && (
+						<LucideLoaderCircle
+							size={20}
+							className="animate-spin"
+						/>
+					)}
+					<Toggle
+						checked={value}
+						onToggle={onToggleChange}
+						disabled={loading || disabled || locked}
+						loading={loading}
+					/>
+				</>
+			}
+		></ControlWrap>
+	);
+};
diff --git a/assets/apps/dashboard/src/Components/FeatureRow.js b/assets/apps/dashboard/src/Components/FeatureRow.js
deleted file mode 100644
index eb27cb1c8d..0000000000
--- a/assets/apps/dashboard/src/Components/FeatureRow.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/* global neveDash */
-import { Dashicon, ExternalLink } from '@wordpress/components';
-import { useState, createInterpolateElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
-
-const FeatureRow = ({ item }) => {
-	const { title, description, inLite, docsLink, presentational } = item;
-	const [tooltip, toggleTooltip] = useState(false);
-
-	const showTooltip = () => toggleTooltip(true);
-	const hideTooltip = () => toggleTooltip(false);
-
-	const renderFeatureTitle = () => {
-		if (!presentational) {
-			return title;
-		}
-
-		return (
-			<ExternalLink href={neveDash.allfeaturesNeveProURL}>
-				{title}
-			</ExternalLink>
-		);
-	};
-
-	const renderInfoIcon = () => {
-		if (!presentational) {
-			return <Dashicon icon="info" />;
-		}
-	};
-
-	const renderNeveLiteIndicator = () => {
-		if (!presentational) {
-			return (
-				<td
-					className={classnames([
-						'indicator',
-						{
-							error: !inLite,
-							success: inLite,
-						},
-					])}
-				>
-					<Dashicon size={30} icon={inLite ? 'yes' : 'no-alt'} />
-				</td>
-			);
-		}
-	};
-
-	const renderNeveProIndicator = () => {
-		if (!presentational) {
-			return (
-				<td className="indicator success">
-					<Dashicon size={30} icon="yes" />
-				</td>
-			);
-		}
-	};
-
-	return (
-		<tr className="feature-row">
-			<td className="large">
-				<div className="feat-wrap">
-					<h4>{renderFeatureTitle()}</h4>
-					<span
-						onMouseEnter={(e) => {
-							e.preventDefault();
-							showTooltip();
-						}}
-						onMouseLeave={(e) => {
-							e.preventDefault();
-							hideTooltip();
-						}}
-						onFocus={(e) => {
-							e.preventDefault();
-							showTooltip();
-						}}
-						onBlur={(e) => {
-							e.preventDefault();
-							hideTooltip();
-						}}
-					>
-						{renderInfoIcon()}
-
-						{tooltip && (
-							<div className="tooltip-content">
-								<div className="tooltip-inner">
-									<p>
-										{description + ' '}
-										{docsLink &&
-											typeof createInterpolateElement !==
-												'undefined' &&
-											createInterpolateElement(
-												__(
-													'More details <external_link>here</external_link>.',
-													'neve'
-												),
-												{
-													external_link: (
-														<a
-															href={docsLink}
-															target="external noreferrer noopener"
-														>
-															#dumptext
-														</a>
-													),
-												}
-											)}
-									</p>
-								</div>
-							</div>
-						)}
-					</span>
-				</div>
-			</td>
-			{renderNeveLiteIndicator()}
-			{renderNeveProIndicator()}
-		</tr>
-	);
-};
-
-export default FeatureRow;
diff --git a/assets/apps/dashboard/src/Components/Header.js b/assets/apps/dashboard/src/Components/Header.js
index 4161b102cf..fea8408f2b 100644
--- a/assets/apps/dashboard/src/Components/Header.js
+++ b/assets/apps/dashboard/src/Components/Header.js
@@ -1,17 +1,175 @@
 /* global neveDash */
-import { addUrlHash, getTabHash, tabs } from '../utils/common';
-import classnames from 'classnames';
+import cn from 'classnames';
+import { getTabHash, tabs } from '../utils/common';
 
+import { Fragment, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
 
-const Header = (props) => {
+import { useDispatch, useSelect } from '@wordpress/data';
+import { LucideBookOpen, LucideFileText } from 'lucide-react';
+import useLicenseData from '../Hooks/useLicenseData';
+import Container from '../Layout/Container';
+import { NEVE_IS_WHITELABEL, NEVE_STORE } from '../utils/constants';
+import Button from './Common/Button';
+import Pill from './Common/Pill';
+
+const HeaderTopBar = ({ currentTab, setTab }) => {
+	const NAV_BUTTONS = {
+		help: {
+			label: __('Documentation', 'neve'),
+			icon: <LucideBookOpen className="mr-1.5" size={20} />,
+			url: neveDash.docsURL,
+		},
+		changelog: {
+			label: __('Changelog', 'neve'),
+			icon: <LucideFileText className="mr-1.5" size={20} />,
+		},
+	};
+
+	const { isLicenseValid } = useLicenseData();
+
+	if (NEVE_IS_WHITELABEL) {
+		const hasWhiteLabelAgencyURL = !!neveDash.whiteLabel?.agencyURL;
+
+		NAV_BUTTONS.changelog.hide = true;
+
+		if (hasWhiteLabelAgencyURL) {
+			NAV_BUTTONS.help.url = neveDash.whiteLabel?.agencyURL;
+		} else {
+			NAV_BUTTONS.help.hide = true;
+		}
+	}
+
+	return (
+		<div className="border-b border-gray-100">
+			<Container>
+				<div className="flex items-center justify-between h-14">
+					<div className="flex items-center space-x-3">
+						{!NEVE_IS_WHITELABEL && (
+							<img
+								className="size-7 rounded-sm"
+								src={neveDash.assets + 'logo.svg'}
+								alt={__('Neve Theme Logo', 'neve')}
+							/>
+						)}
+						<span className="text-sm font-semibold text-gray-900">
+							{neveDash.strings.header}
+						</span>
+						<Pill type="secondary">
+							{isLicenseValid
+								? __('Pro', 'neve')
+								: __('Free', 'neve')}
+						</Pill>
+						<span className="text-gray-500 font-medium">
+							{neveDash.version}
+						</span>
+					</div>
+					<div className="flex items-center">
+						{Object.entries(NAV_BUTTONS).map(
+							([slug, { label, icon, url, hide }], index) => {
+								if (hide) {
+									return null;
+								}
+
+								const props = {};
+
+								if (!url) {
+									props.onClick = (e) => {
+										e.preventDefault();
+										setTab(slug);
+									};
+									if (currentTab === slug) {
+										props.className = '!text-blue-600';
+									}
+								} else {
+									props.href = url;
+									props.target = '_blank';
+								}
+
+								return (
+									<Fragment key={slug}>
+										{index > 0 && (
+											<div className="w-px h-4 bg-gray-200 mx-3" />
+										)}
+										<Button isLink {...props}>
+											{icon}
+											<span>{label}</span>
+										</Button>
+									</Fragment>
+								);
+							}
+						)}
+					</div>
+				</div>
+			</Container>
+		</div>
+	);
+};
+
+const Navigation = ({ setTab, currentTab }) => {
+	return (
+		<div className="border-b border-gray-200">
+			<Container>
+				<nav className="flex -mb-px">
+					{Object.entries(tabs).map(([slug, { label, url }]) => {
+						if (!label) {
+							return null;
+						}
+						const itemClasses = cn([
+							'relative px-4 py-3 font-medium border-b-2',
+							{
+								'text-blue-600 border-blue-600':
+									currentTab === slug,
+								'border-transparent text-gray-600 hover:text-gray-900 transition-colors duration-150':
+									currentTab !== slug,
+							},
+						]);
+
+						const handleLinkClick = (e) => {
+							e.preventDefault();
+							setTab(slug);
+						};
+
+						const linkProps = {
+							href: url ? url : '#' + slug,
+						};
+
+						if (!url) {
+							linkProps.onClick = handleLinkClick;
+						}
+
+						return (
+							<a
+								{...linkProps}
+								key={slug}
+								className={itemClasses}
+							>
+								{label}
+							</a>
+						);
+					})}
+				</nav>
+			</Container>
+		</div>
+	);
+};
+
+const Header = () => {
+	const { currentTab } = useSelect((select) => {
+		const { getTab } = select(NEVE_STORE);
+		return {
+			currentTab: getTab(),
+		};
+	});
+
+	const { setTab } = useDispatch(NEVE_STORE);
+
 	const setTabToCurrentHash = () => {
 		const hash = getTabHash();
 		if (null === hash) {
 			return;
 		}
-		props.setTab(hash);
+		setTab(hash);
 	};
 
 	useEffect(() => {
@@ -23,54 +181,19 @@ const Header = (props) => {
 		};
 	}, []);
 
-	const renderHead = () => {
-		return (
-			<div className="top">
-				<h1 className="heading">{neveDash.strings.header}</h1>
-				<span className="version">{neveDash.version}</span>
-				{!neveDash.whiteLabel && (
-					<img
-						src={neveDash.assets + 'logo.svg'}
-						alt={__('Neve Theme Logo', 'neve')}
-					/>
-				)}
-			</div>
-		);
-	};
-
-	const renderNavigation = () => {
-		const { currentTab, setTab } = props;
-		return (
-			<nav className="navigation">
-				{Object.keys(tabs).map((item, index) => {
-					return (
-						<li key={index}>
-							<a
-								href={'#' + item}
-								className={classnames([
-									item,
-									currentTab === item ? 'active' : '',
-								])}
-								onClick={(e) => {
-									e.preventDefault();
-									setTab(item);
-									addUrlHash(item);
-								}}
-							>
-								{tabs[item].label}
-							</a>
-						</li>
-					);
-				})}
-			</nav>
-		);
+	const handleTabSwitch = (slug) => {
+		setTab(slug);
+		window.location.hash = slug;
 	};
 
 	return (
-		<header>
-			<div className="container">
-				{renderHead()}
-				{renderNavigation(props)}
+		<header className="bg-white z-50">
+			<div>
+				<HeaderTopBar
+					setTab={handleTabSwitch}
+					currentTab={currentTab}
+				/>
+				<Navigation setTab={handleTabSwitch} currentTab={currentTab} />
 			</div>
 		</header>
 	);
diff --git a/assets/apps/dashboard/src/Components/LicenseCard.js b/assets/apps/dashboard/src/Components/LicenseCard.js
deleted file mode 100644
index a2de9e6e81..0000000000
--- a/assets/apps/dashboard/src/Components/LicenseCard.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/* global neveDash */
-import { send, fetchOptions } from '../utils/rest';
-import Toast from './Toast';
-import classnames from 'classnames';
-
-import { __ } from '@wordpress/i18n';
-import { Button, Dashicon } from '@wordpress/components';
-import { Fragment, useState } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-
-const LicenseCard = ({ isVisible, setSettings, changeLicense, license }) => {
-	const { proApi } = neveDash;
-	const [key, setKey] = useState(
-		license && 'valid' === license.valid ? license.key || '' : ''
-	);
-	const [status, setStatus] = useState(false);
-
-	// const [ expiration, setExpiration ] = useState(license.expiration || '');
-	const [toast, setToast] = useState('');
-	const [toastType, setToastType] = useState('success');
-
-	const { valid, expiration } = license;
-	const { whiteLabel, strings } = neveDash;
-	const { licenseCardHeading, licenseCardDescription } = strings;
-
-	if (!isVisible) {
-		return null;
-	}
-	const toggleLicense = () => {
-		const toDo = 'valid' === valid ? 'deactivate' : 'activate';
-		setStatus('activate' === toDo ? 'activating' : 'deactivating');
-		send(proApi + '/toggle_license', { key, action: toDo }).then(
-			(response) => {
-				setToastType(response.success ? 'success' : 'error');
-				setKey('activate' === toDo ? key : '');
-				setToast(response.message);
-				setStatus(false);
-				if (response.license) {
-					changeLicense(response.license);
-					fetchOptions().then((r) => {
-						setSettings(r);
-					});
-				}
-			}
-		);
-	};
-
-	if (whiteLabel && whiteLabel.hideLicense) {
-		return null;
-	}
-	let statusLabel = '';
-	if (!status) {
-		if ('valid' === valid) {
-			statusLabel = __('Deactivate', 'neve');
-		} else {
-			statusLabel = __('Activate', 'neve');
-		}
-	}
-	if ('activating' === status) {
-		statusLabel = __('Activating', 'neve');
-		statusLabel = __('Deactivating', 'neve');
-	}
-
-	return (
-		<aside className="sidebar card license">
-			<div className="sidebar-section">
-				{licenseCardHeading && <h4>{licenseCardHeading}</h4>}
-				{!whiteLabel && licenseCardDescription && (
-					<p
-						dangerouslySetInnerHTML={{
-							__html: licenseCardDescription,
-						}}
-					/>
-				)}
-				<form
-					className="license-form"
-					onSubmit={(e) => {
-						e.preventDefault();
-						toggleLicense();
-					}}
-				>
-					<input
-						type="text"
-						id="license-field"
-						name="license-field"
-						disabled={'valid' === valid}
-						onChange={(e) => {
-							const keyToSet = e.target.value.replace(/\s+/g, '');
-							setKey(keyToSet);
-						}}
-						value={
-							'valid' === valid
-								? '******************************' +
-								  key.slice(-5)
-								: key
-						}
-						placeholder={__('Enter License Key', 'neve')}
-					/>
-					<Button
-						isPrimary={'valid' !== valid}
-						isSecondary={'valid' === valid}
-						disabled={status || !key}
-						type="submit"
-					>
-						{statusLabel}
-					</Button>
-				</form>
-				{toast && (
-					<Toast
-						type={toastType}
-						dismiss={setToast}
-						message={toast}
-					/>
-				)}
-				{'expired' === valid ||
-					('valid' === valid && (
-						<div className="license-footer">
-							<Fragment>
-								<span
-									className={classnames([
-										'status-icon',
-										'valid' === valid ? 'success' : 'error',
-									])}
-								>
-									<Dashicon
-										size={14}
-										icon={'valid' === valid ? 'yes' : 'no'}
-									/>
-								</span>
-								<span className="validity">
-									{'valid' === valid
-										? __('Valid', 'neve')
-										: __('Expired', 'neve')}
-								</span>
-								{expiration && (
-									<Fragment>
-										<span className="separator">-</span>
-										<span className="expires">
-											{('valid' === valid
-												? __('Expires', 'neve')
-												: __('Expired', 'neve')) +
-												' ' +
-												expiration}
-										</span>
-									</Fragment>
-								)}
-							</Fragment>
-						</div>
-					))}
-			</div>
-		</aside>
-	);
-};
-
-export default compose(
-	withDispatch((dispatch) => {
-		const { changeLicense, setSettings } = dispatch('neve-dashboard');
-		return {
-			setSettings: (object) => setSettings(object),
-			changeLicense: (data) => {
-				changeLicense(data);
-			},
-		};
-	}),
-	withSelect((select) => {
-		const { getLicense } = select('neve-dashboard');
-		return {
-			license: getLicense(),
-		};
-	})
-)(LicenseCard);
diff --git a/assets/apps/dashboard/src/Components/Loading.js b/assets/apps/dashboard/src/Components/Loading.js
deleted file mode 100644
index 48214147a2..0000000000
--- a/assets/apps/dashboard/src/Components/Loading.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/* global neveDash */
-/* eslint  jsx-a11y/heading-has-content: 0 */
-const Loading = () => {
-	return (
-		<div className="mock-dash">
-			<header>
-				<div className="container">
-					<div className="top">
-						<h1 className="heading loading" />
-						<span className="version loading">v2.6.2</span>
-						{!neveDash.whiteLabel && (
-							<div className="loading logo" />
-						)}
-					</div>
-					<nav className="navigation">
-						{Array.from(Array(6)).map((item, index) => {
-							return (
-								<li key={index}>
-									<a // eslint-disable-line  jsx-a11y/anchor-has-content,jsx-a11y/anchor-is-valid
-										className="loading"
-									/>
-								</li>
-							);
-						})}
-					</nav>
-				</div>
-			</header>
-			<div className="container content">
-				<div className="main">
-					{neveDash.notifications && (
-						<div className="notifications">
-							{Object.keys(neveDash.notifications).map(
-								(notification, index) => {
-									return (
-										<div
-											key={index}
-											className="notification loading placeholder"
-										/>
-									);
-								}
-							)}
-						</div>
-					)}
-					<div className="tab-content columns start">
-						<div className="card">
-							<div className="card-header">
-								<div className="loading icon" />
-								<h3 className="loading title" />
-							</div>
-							<div className="card-content">
-								<p className="loading card-description" />
-								<p className="loading card-description" />
-								<p className="loading card-description" />
-								<button
-									style={{ marginTop: 'auto' }}
-									type="button"
-									className="loading components-button is-button is-default is-primary"
-								/>
-							</div>
-						</div>
-						<div className="card customizer-quick-links">
-							<div className="card-header">
-								<div className="loading icon" />
-								<h3 className="loading title" />
-							</div>
-							<div className="card-content">
-								<div className="columns">
-									<div className="col">
-										<span className="loading link" />
-										<hr />
-										<span className="loading link" />
-										<hr />
-										<span className="loading link" />
-										<hr />
-										<span className="loading link" />
-									</div>
-									<div className="col">
-										<span className="loading link" />
-										<hr />
-										<span className="loading link" />
-										<hr />
-										<span className="loading link" />
-										<hr />
-										<span className="loading link" />
-									</div>
-								</div>
-							</div>
-						</div>
-						<div className="card">
-							<div className="card-header">
-								<div className="loading icon" />
-								<h3 className="loading title" />
-							</div>
-							<div className="card-content">
-								<p className="loading card-description" />
-								<button
-									type="button"
-									className="loading components-button is-button is-default is-primary"
-								/>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div className="sidebar-wrap">
-					{!neveDash.whiteLabel && (
-						<aside className="sidebar card">
-							<div className="sidebar-section">
-								<h4 className="loading" />
-								<p className="loading card-description" />
-								<p className="loading card-description" />
-								<p className="loading card-description" />
-								<span className="loading link components-button is-primary" />
-							</div>
-							<hr />
-							<div className="sidebar-section">
-								<h4 className="loading" />
-								<p className="loading card-description" />
-								<p className="loading card-description" />
-								<span className="loading link" />
-							</div>
-							<hr />
-							<div className="sidebar-section">
-								<h4 className="loading" />
-								<p className="loading card-description" />
-								<p className="loading card-description" />
-								<span className="loading link" />
-							</div>
-						</aside>
-					)}
-				</div>
-			</div>
-		</div>
-	);
-};
-
-export default Loading;
diff --git a/assets/apps/dashboard/src/Components/ModuleCard.js b/assets/apps/dashboard/src/Components/ModuleCard.js
deleted file mode 100644
index a39dda77d1..0000000000
--- a/assets/apps/dashboard/src/Components/ModuleCard.js
+++ /dev/null
@@ -1,277 +0,0 @@
-/* global neveDash, CustomEvent */
-/*eslint camelcase: ["error", {allow: ["required_actions"]}]*/
-import Accordion from './Accordion';
-import InputForm from './Options/InputForm';
-import Select from './Options/Select';
-import Toggle from './Options/Toggle';
-import MultiSelectOption from './Options/MultiSelect';
-import { changeOption } from '../utils/rest';
-import classnames from 'classnames';
-import MultiInstallActivate from './Plugin/MultiInstallActivate';
-
-import {
-	Button,
-	ToggleControl,
-	Dashicon,
-	ExternalLink,
-} from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { Fragment, useState, useEffect } from '@wordpress/element';
-import { compose } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-
-const ReactPlaceholder = ({ slug }) => {
-	useEffect(() => {
-		window.dispatchEvent(
-			new CustomEvent('neve-dashboard-react-placeholder', {
-				detail: {
-					slug,
-				},
-			})
-		);
-	}, []);
-
-	return <div id={slug} />;
-};
-
-const ModuleCard = ({
-	slug,
-	setToast,
-	getOption,
-	changeModuleStatus,
-	getModuleStatus,
-	tier,
-}) => {
-	const [loading, setLoading] = useState(false);
-
-	const {
-		nicename,
-		description,
-		availabilityLevel,
-		options,
-		links,
-		documentation,
-		// eslint-disable-next-line camelcase
-		required_actions,
-		manageableDependentPlugins,
-		manageablePluginsLabels,
-		dependentPlugins,
-	} = neveDash.modules[slug];
-	const { upgradeLinks } = neveDash;
-
-	const isToggleEnabled = (toggleSlug) => {
-		return getOption(toggleSlug);
-	};
-
-	const renderOptionsAccordions = () => {
-		return options.map((group, index) => {
-			const { label, options: optionGroup } = group;
-			return (
-				<Accordion
-					key={index}
-					title={label}
-					slug={slug}
-					isOpen={
-						(getModuleStatus(slug) || false) && !required_actions
-					}
-				>
-					<div>
-						{Object.keys(optionGroup).map(
-							(optionSlug, indexGroup) => {
-								const {
-									label: labelGroup,
-									type,
-									placeholder,
-									documentation: documentationOption,
-									choices,
-									depends_on: dependsOn,
-								} = optionGroup[optionSlug];
-
-								return (
-									<Fragment key={indexGroup}>
-										{'text' === type && (
-											<InputForm
-												label={labelGroup}
-												slug={optionSlug}
-												placeholder={placeholder}
-											/>
-										)}
-										{'toggle' === type && (
-											<Toggle
-												label={labelGroup}
-												slug={optionSlug}
-												documentation={
-													documentationOption
-												}
-											/>
-										)}
-										{'select' === type && (
-											<Select
-												label={labelGroup}
-												slug={optionSlug}
-												choices={choices}
-											/>
-										)}
-										{(('multi_select' === type &&
-											undefined === dependsOn) ||
-											('multi_select' === type &&
-												isToggleEnabled(
-													dependsOn
-												))) && (
-											<MultiSelectOption
-												label={labelGroup}
-												slug={optionSlug}
-												choices={choices}
-											/>
-										)}
-										{(('react' === type &&
-											undefined === dependsOn) ||
-											('react' === type &&
-												isToggleEnabled(
-													dependsOn
-												))) && (
-											<ReactPlaceholder
-												slug={optionSlug}
-											/>
-										)}
-									</Fragment>
-								);
-							}
-						)}
-					</div>
-				</Accordion>
-			);
-		});
-	};
-
-	return (
-		<div className={classnames(['card', 'module-card', slug])}>
-			<div className="card-header">
-				<h3 className="title">{nicename}</h3>
-				<div className="toggle-wrap">
-					{tier < availabilityLevel ? (
-						<Button
-							isPrimary
-							href={upgradeLinks[availabilityLevel]}
-						>
-							{__('Upgrade', 'neve')}
-						</Button>
-					) : (
-						<Fragment>
-							{required_actions && !manageableDependentPlugins && (
-								<span
-									className="required"
-									dangerouslySetInnerHTML={{
-										__html: required_actions,
-									}}
-								/>
-							)}
-							{loading && (
-								<Dashicon
-									size={18}
-									icon="update"
-									className="is-loading"
-								/>
-							)}
-							{manageableDependentPlugins && (
-								<MultiInstallActivate
-									slug={slug}
-									plugins={dependentPlugins}
-									buttonLabels={manageablePluginsLabels}
-								/>
-							)}
-							{!required_actions &&
-								'block_editor_booster' !== slug && (
-									<ToggleControl
-										checked={getModuleStatus(slug) || false}
-										onChange={(value) => {
-											setLoading(true);
-											changeOption(
-												slug,
-												value,
-												true
-											).then((r) => {
-												if (r.success) {
-													changeModuleStatus(
-														slug,
-														value
-													);
-													setLoading(false);
-													setToast(
-														(value
-															? __(
-																	'Module Activated',
-																	'neve'
-															  )
-															: __(
-																	'Module Deactivated.',
-																	'neve'
-															  )) +
-															` (${nicename})`
-													);
-													return false;
-												}
-												setLoading(false);
-												setToast(
-													__(
-														'Could not activate module. Please try again.',
-														'neve'
-													)
-												);
-											});
-										}}
-									/>
-								)}
-						</Fragment>
-					)}
-				</div>
-			</div>
-			<div className="card-content">
-				<p className="card-description">
-					{description + ' '}
-					{documentation.url && (
-						<ExternalLink href={documentation.url}>
-							{__('Learn More', 'neve')}
-						</ExternalLink>
-					)}
-				</p>
-				{links && getModuleStatus(slug) && (
-					<div className="actions">
-						{links.map((link, index) => (
-							<Button key={index} isSecondary href={link.url}>
-								{link.label}
-							</Button>
-						))}
-					</div>
-				)}
-				{0 < options.length &&
-					true === getModuleStatus(slug) &&
-					-1 < tier && (
-						<div className="module-options">
-							{renderOptionsAccordions()}
-						</div>
-					)}
-			</div>
-		</div>
-	);
-};
-
-export default compose(
-	withSelect((select) => {
-		const { getModuleStatus, getLicenseTier, getProOption } =
-			select('neve-dashboard');
-		return {
-			getOption: (slug) => getProOption(slug),
-			getModuleStatus: (slug) => getModuleStatus(slug),
-			tier: getLicenseTier(),
-		};
-	}),
-	withDispatch((dispatch) => {
-		const { changeModuleStatus, setToast } = dispatch('neve-dashboard');
-		return {
-			changeModuleStatus: (slug, value) =>
-				changeModuleStatus(slug, value),
-			setToast: (message) => setToast(message),
-		};
-	})
-)(ModuleCard);
diff --git a/assets/apps/dashboard/src/Components/Notifications.js b/assets/apps/dashboard/src/Components/Notifications.js
index 19f82ac5cb..d3d251ab2c 100644
--- a/assets/apps/dashboard/src/Components/Notifications.js
+++ b/assets/apps/dashboard/src/Components/Notifications.js
@@ -1,26 +1,21 @@
-/* global neveDash */
-import Notification from './Notification';
+import Notification from './Common/Notification';
+import Container from '../Layout/Container';
+import TransitionWrapper from './Common/TransitionWrapper';
+import { useSelect } from '@wordpress/data';
 
 const Notifications = () => {
-	if (!neveDash.notifications) {
-		return null;
-	}
-	if (1 > neveDash.notifications.length) {
-		return null;
-	}
+	const notifications = useSelect((select) => {
+		return select('neve-dashboard').getNotifications();
+	});
 
 	return (
-		<div className="notifications">
-			{Object.keys(neveDash.notifications).map((slug, index) => {
-				return (
-					<Notification
-						key={index}
-						data={neveDash.notifications[slug]}
-						slug={slug}
-					/>
-				);
-			})}
-		</div>
+		<Container className="grid gap-3">
+			{Object.entries(notifications).map(([slug, data]) => (
+				<TransitionWrapper key={slug} from="top" className="delay-200">
+					<Notification slug={slug} data={data} />
+				</TransitionWrapper>
+			))}
+		</Container>
 	);
 };
 
diff --git a/assets/apps/dashboard/src/Components/Plugin/InstallActivate.js b/assets/apps/dashboard/src/Components/Plugin/InstallActivate.js
index f1759422d9..680c83b9d2 100644
--- a/assets/apps/dashboard/src/Components/Plugin/InstallActivate.js
+++ b/assets/apps/dashboard/src/Components/Plugin/InstallActivate.js
@@ -1,8 +1,16 @@
 /* global neveDash */
+import { useEffect, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { get } from '../../utils/rest';
-import { sprintf, __ } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
-import { Button, Tooltip } from '@wordpress/components';
+import Button from '../Common/Button';
+import Notice from '../Common/Notice';
+import Tooltip from '../Common/Tooltip';
+import TransitionInOut from '../Common/TransitionInOut';
+
+const STATUS = {
+	INSTALLING: 'installing',
+	ACTIVATING: 'activating',
+};
 
 const InstallActivate = ({
 	labels = {},
@@ -21,8 +29,8 @@ const InstallActivate = ({
 		isOtterProInstalled,
 	} = neveDash;
 	const [progress, setProgress] = useState(false);
-	// const [updating, setUpdating] = useState(false);
-	const [error, setError] = useState(false);
+
+	const [error, setError] = useState('');
 	const [currentState, setCurrentState] = useState(pluginState);
 	const [buttonLabels, setButtonLabels] = useState({
 		firstLabel: false,
@@ -30,31 +38,9 @@ const InstallActivate = ({
 		activating: `${__('Activating', 'neve')}...`,
 		installActivate: __('Install and Activate', 'neve'),
 		activate: __('Activate', 'neve'),
+		...labels,
 	});
 
-	const setCustomLabels = (customLabels) => {
-		setButtonLabels({
-			...buttonLabels,
-			...(customLabels.firstLabel !== false && {
-				firstLabel: customLabels.firstLabel,
-			}),
-			...(customLabels.installing && {
-				installing: customLabels.installing,
-			}),
-			...(customLabels.activating && {
-				activating: customLabels.activating,
-			}),
-			...(customLabels.installActivate && {
-				installActivate: customLabels.installActivate,
-			}),
-			...(customLabels.activate && { activate: customLabels.activate }),
-		});
-	};
-
-	useEffect(() => {
-		setCustomLabels(labels);
-	}, []);
-
 	const getLabel = (type) => {
 		return progress || !buttonLabels.firstLabel
 			? buttonLabels[type]
@@ -66,7 +52,8 @@ const InstallActivate = ({
 	};
 
 	const installPlugin = () => {
-		setProgress('installing');
+		setProgress(STATUS.INSTALLING);
+
 		hideFirstLabel();
 		wp.updates.ajax('install-plugin', {
 			slug,
@@ -90,7 +77,7 @@ const InstallActivate = ({
 	};
 
 	const activatePlugin = () => {
-		setProgress('activating');
+		setProgress(STATUS.ACTIVATING);
 		setCurrentState('activate');
 		hideFirstLabel();
 		const activationURL = activateURL;
@@ -132,8 +119,6 @@ const InstallActivate = ({
 		});
 	};
 
-	const isProgress = (type) => progress === type;
-
 	const renderNoticeContent = () => {
 		const isSuperAdmin = canInstallPlugins && canActivatePlugins;
 
@@ -171,63 +156,70 @@ const InstallActivate = ({
 			return actionsAreDisabled();
 		};
 
+		const installing = progress === STATUS.INSTALLING;
+		const activating = progress === STATUS.ACTIVATING;
+
 		const buttonMap = {
 			install: (
 				<Button
-					disabled={isButtonDisabled()}
-					isPrimary={!isProgress('installing')}
-					isSmall={smallButton}
-					isSecondary={isProgress('installing')}
-					className={isProgress('installing') && 'is-loading'}
-					icon={isProgress('installing') && 'update'}
+					disabled={isButtonDisabled() || installing}
+					isPrimary={!installing}
+					isSecondary={installing}
+					loading={installing}
 					onClick={installPlugin}
+					isSmall={smallButton}
 				>
-					{isProgress('installing')
-						? getLabel('installing')
+					{installing
+						? getLabel(STATUS.INSTALLING)
 						: getLabel('installActivate')}
 				</Button>
 			),
 			activate: activateURL && (
 				<Button
-					disabled={isButtonDisabled()}
-					isSmall={smallButton}
-					isPrimary={!isProgress('activating')}
-					isSecondary={isProgress('activating')}
-					className={isProgress('activating') && 'is-loading'}
-					icon={isProgress('activating') && 'update'}
+					disabled={isButtonDisabled() || activating}
+					isPrimary={!activating}
+					isSecondary={activating}
+					loading={activating}
 					onClick={activatePlugin}
+					isSmall={smallButton}
 				>
-					{isProgress('activating')
-						? getLabel('activating')
+					{activating
+						? getLabel(STATUS.ACTIVATING)
 						: getLabel('activate')}
 				</Button>
 			),
 		};
 
-		const wrappedButtonContent = actionsAreDisabled() ? (
-			<Tooltip
-				text={sprintf(
+		const WrappedButton = () => {
+			if (actionsAreDisabled()) {
+				const text = sprintf(
 					// translators: %s: Plugin name.
 					__('Ask your admin to enable %s on your site', 'neve'),
 					name
-				)}
-				position="top center"
-			>
-				{buttonMap[currentState]}
-			</Tooltip>
-		) : (
-			buttonMap[currentState]
-		);
+				);
+
+				return <Tooltip text={text}>{buttonMap[currentState]}</Tooltip>;
+			}
+
+			return buttonMap[currentState];
+		};
 
 		return (
 			<>
 				{description}
-				{buttonMap.hasOwnProperty(currentState) && wrappedButtonContent}
+				{!!buttonMap[currentState] && <WrappedButton />}
 			</>
 		);
 	};
 
-	return error ? <h1 className="error">{error}</h1> : renderNoticeContent();
+	return (
+		<>
+			<TransitionInOut show={!!error}>
+				{<Notice isError>{error}</Notice>}
+			</TransitionInOut>
+			{!error && renderNoticeContent()}
+		</>
+	);
 };
 
 export default InstallActivate;
diff --git a/assets/apps/dashboard/src/Components/Plugin/MultiInstallActivate.js b/assets/apps/dashboard/src/Components/Plugin/MultiInstallActivate.js
index a9ea6027ce..2020426b88 100644
--- a/assets/apps/dashboard/src/Components/Plugin/MultiInstallActivate.js
+++ b/assets/apps/dashboard/src/Components/Plugin/MultiInstallActivate.js
@@ -1,8 +1,7 @@
 import InstallActivate from './InstallActivate';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withDispatch } from '@wordpress/data';
-import { useEffect } from 'react';
 
 const MultiInstallActivate = ({
 	slug,
diff --git a/assets/apps/dashboard/src/Components/PluginCard.js b/assets/apps/dashboard/src/Components/PluginCard.js
deleted file mode 100644
index e6068a8c99..0000000000
--- a/assets/apps/dashboard/src/Components/PluginCard.js
+++ /dev/null
@@ -1,179 +0,0 @@
-/* global neveDash */
-import classnames from 'classnames';
-import { get } from '../utils/rest';
-
-import { sprintf, __ } from '@wordpress/i18n';
-import { Button, Dashicon, ExternalLink, Tooltip } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { withDispatch } from '@wordpress/data';
-
-const Card = ({ slug, data, setPluginState }) => {
-	const {
-		banner,
-		name,
-		description,
-		version,
-		author,
-		url,
-		premium,
-		network,
-	} = data;
-	const { canInstallPlugins, canActivatePlugins } = neveDash;
-	const action = data.cta;
-	const [inProgress, setInProgress] = useState(false);
-
-	const stringMap = {
-		install: {
-			static: __('Install', 'neve'),
-			progress: __('Installing', 'neve'),
-		},
-		activate: {
-			static: __('Activate', 'neve'),
-			progress: __('Activating', 'neve'),
-		},
-		deactivate: {
-			static: __('Deactivate', 'neve'),
-			progress: __('Deactivating', 'neve'),
-		},
-		external: __('Learn More', 'neve'),
-	};
-
-	const ctaContent = () => {
-		if (action === 'external') {
-			return null;
-		}
-
-		const isButtonDisabled = () => {
-			if (inProgress) {
-				return true;
-			}
-			return actionsAreDisabled;
-		};
-
-		return (
-			<Button
-				className="plugin-action"
-				isPrimary={['install', 'activate'].includes(action)}
-				isSecondary={'deactivate' === action}
-				disabled={isButtonDisabled()}
-				onClick={() => {
-					setInProgress(true);
-					if ('install' === action) {
-						installPlugin(slug).then((r) => {
-							if (!r.success) {
-								// Todo handle error with toasts?
-								setInProgress(false);
-								return false;
-							}
-							setInProgress(false);
-							setPluginState(slug, 'activate');
-						});
-						return false;
-					}
-					get(data[action], true).then((r) => {
-						if (!r.ok) {
-							// Todo handle error with toasts?
-							setInProgress(false);
-							return false;
-						}
-
-						if ('activate' === action) {
-							setPluginState(slug, 'deactivate');
-						} else {
-							setPluginState(slug, 'activate');
-						}
-						if ('templates-patterns-collection' === slug) {
-							window.location.href =
-								neveDash.tpcAdminURL +
-								(neveDash.canInstallPlugins
-									? '&onboarding=yes'
-									: '');
-						}
-						setInProgress(false);
-					});
-				}}
-			>
-				{!inProgress && stringMap[action].static}
-				{inProgress && (
-					<span
-						style={{
-							display: 'flex',
-							alignItems: 'center',
-						}}
-					>
-						<Dashicon icon="update" />
-						{stringMap[action].progress + '...'}
-					</span>
-				)}
-			</Button>
-		);
-	};
-
-	const actionsAreDisabled =
-		(!canInstallPlugins && action === 'install') ||
-		(!canActivatePlugins && action === 'activate') ||
-		(network && action === 'deactivate') ||
-		false;
-
-	const wrappedButtonContent = actionsAreDisabled ? (
-		<Tooltip
-			text={sprintf(
-				// translators: %s: Plugin name.
-				__('Ask your admin to handle %s on your site', 'neve'),
-				name
-			)}
-			position="top center"
-		>
-			{ctaContent()}
-		</Tooltip>
-	) : (
-		ctaContent()
-	);
-
-	return (
-		<div className={classnames(['card', 'plugin', slug])}>
-			<div className="card-header">
-				<img src={banner} alt={__('Banner Image', 'name')} />
-				{premium && <span className="premium-label">{'Premium'}</span>}
-			</div>
-			<div className="card-body">
-				<h3 className="card-title">{name}</h3>
-				<p className="card-description">{description}</p>
-			</div>
-			<div className="card-footer">
-				<div className="plugin-data">
-					{version && <span className="version">v{version} | </span>}
-					{author && <span className="author">{author}</span>}
-				</div>
-				{wrappedButtonContent}
-				{action === 'external' && (
-					<ExternalLink className="plugin-action" href={url}>
-						{stringMap[action]}
-					</ExternalLink>
-				)}
-			</div>
-		</div>
-	);
-};
-
-const installPlugin = (slug) => {
-	return new Promise((resolve) => {
-		wp.updates.ajax('install-plugin', {
-			slug,
-			success: () => {
-				resolve({ success: true });
-			},
-			error: () => {
-				// errorCode, errorMessage are params of err if we toast.
-				resolve({ success: false });
-			},
-		});
-	});
-};
-
-export default withDispatch((dispatch) => {
-	const { setPluginState } = dispatch('neve-dashboard');
-	return {
-		setPluginState: (slug, newState) => setPluginState(slug, newState),
-	};
-})(Card);
diff --git a/assets/apps/dashboard/src/Components/Sidebar.js b/assets/apps/dashboard/src/Components/Sidebar.js
deleted file mode 100644
index 233f56f800..0000000000
--- a/assets/apps/dashboard/src/Components/Sidebar.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/* global neveDash */
-import { changeOption } from '../utils/rest';
-import SupportCard from './SupportCard';
-import LicenseCard from './LicenseCard';
-import { __ } from '@wordpress/i18n';
-import { ToggleControl, ExternalLink } from '@wordpress/components';
-import { createInterpolateElement, useState } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-
-const Sidebar = ({ currentTab, setToast, loggerValue, setLogger }) => {
-	const [tracking, setTracking] = useState('yes' === loggerValue);
-
-	return (
-		<div className="sidebar-wrap">
-			{!neveDash.whiteLabel && neveDash.pro && <SupportCard />}
-			{neveDash.pro && <LicenseCard isVisible={'pro' === currentTab} />}
-			{!neveDash.whiteLabel && (
-				<aside className="sidebar card">
-					<div className="sidebar-section">
-						<h4>{__('Neve Community', 'neve')}</h4>
-						<p>
-							{typeof createInterpolateElement !== 'undefined' &&
-								createInterpolateElement(
-									__(
-										'Share opinions, ask questions and help each other on our Neve community! Keep up with what we’re working on and vote to help us prioritize on our <external_link>public roadmap</external_link>.',
-										'neve'
-									),
-									{
-										external_link: (
-											<ExternalLink href="https://github.com/Codeinwp/neve/discussions">
-												#dumptext
-											</ExternalLink>
-										),
-									}
-								)}
-						</p>
-						<ExternalLink href="https://www.facebook.com/groups/648646435537266/">
-							{__('Join our Facebook Group', 'neve')}
-						</ExternalLink>
-					</div>
-					<hr />
-					<div className="sidebar-section">
-						<h4>{__('Leave us a review', 'neve')}</h4>
-						<p>
-							{__(
-								'Are you are enjoying Neve? We would love to hear your feedback.',
-								'neve'
-							)}
-						</p>
-						<ExternalLink href="https://wordpress.org/support/theme/neve/reviews/#new-post">
-							{__('Submit a review', 'neve')}
-						</ExternalLink>
-					</div>
-					<hr />
-					<div className="sidebar-section">
-						<h4>{__('Contributing', 'neve')}</h4>
-						<p>
-							{__(
-								'Become a contributor by opting in to our anonymous data tracking. We guarantee no sensitive data is collected.',
-								'neve'
-							)}
-							&nbsp;
-							<ExternalLink href="https://docs.themeisle.com/article/1122-neve-usage-tracking">
-								{__('What do we track?', 'neve')}
-							</ExternalLink>
-						</p>
-						<ToggleControl
-							checked={tracking}
-							label={__('Allow Anonymous Tracking', 'neve')}
-							onChange={(value) => {
-								setTracking(value);
-								changeOption(
-									'neve_logger_flag',
-									value ? 'yes' : 'no',
-									false,
-									false
-								).then((r) => {
-									if (!r.success) {
-										setToast(
-											__(
-												'Could not update option. Please try again.',
-												'neve'
-											)
-										);
-										setTracking(!value);
-										return false;
-									}
-									setLogger(value ? 'yes' : 'no');
-									setToast(__('Option Updated', 'neve'));
-								});
-							}}
-						/>
-					</div>
-				</aside>
-			)}
-		</div>
-	);
-};
-
-export default compose(
-	withDispatch((dispatch) => {
-		const { setToast, setLogger } = dispatch('neve-dashboard');
-		return {
-			setToast: (message) => setToast(message),
-			setLogger: (value) => setLogger(value),
-		};
-	}),
-	withSelect((select) => {
-		const { getOption } = select('neve-dashboard');
-		return {
-			loggerValue: getOption('neve_logger_flag'),
-		};
-	})
-)(Sidebar);
diff --git a/assets/apps/dashboard/src/Components/SkeletonLoader.js b/assets/apps/dashboard/src/Components/SkeletonLoader.js
new file mode 100644
index 0000000000..59bed50123
--- /dev/null
+++ b/assets/apps/dashboard/src/Components/SkeletonLoader.js
@@ -0,0 +1,131 @@
+const SkeletonLoader = () => (
+	<div className="antialiased grow flex flex-col gap-6 h-full">
+		<header className="bg-white z-50">
+			<div>
+				<div className="border-b border-gray-100">
+					<div className="max-w-[90vw] w-full lg:container mx-auto px-2 lg:px-6">
+						<div className="flex items-center justify-between h-14">
+							<div className="flex items-center space-x-3">
+								<div className="size-7 bg-gray-200 rounded-sm" />
+								<div className="h-4 w-16 bg-gray-200 rounded" />
+								<div className="h-5 w-14 bg-gray-200 rounded" />
+								<div className="h-4 w-16 bg-gray-200 rounded" />
+							</div>
+							<div className="flex items-center">
+								<div className="flex items-center gap-2 px-3 py-2">
+									<div className="size-5 bg-gray-200 rounded" />
+									<div className="h-4 w-24 bg-gray-200 rounded" />
+								</div>
+								<div className="w-px h-4 bg-gray-200 mx-3" />
+								<div className="flex items-center gap-2 px-3 py-2">
+									<div className="size-5 bg-gray-200 rounded" />
+									<div className="h-4 w-20 bg-gray-200 rounded" />
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div className="border-b border-gray-200">
+					<div className="max-w-[90vw] lg:container mx-auto px-2 lg:px-6">
+						<nav className="flex -mb-px">
+							{[...Array(4)].map((item, i) => (
+								<div
+									key={i}
+									className={`px-4 py-3 ${
+										i === 0
+											? 'border-b-2 border-gray-200'
+											: ''
+									}`}
+								>
+									<div className="h-4 w-20 bg-gray-200 rounded" />
+								</div>
+							))}
+						</nav>
+					</div>
+				</div>
+			</div>
+		</header>
+
+		<div className="max-w-[90vw] w-full lg:container mx-auto px-2 lg:px-6 flex flex-col lg:flex-row gap-6 h-full grow">
+			<div className="grow">
+				<div className="grid gap-6">
+					<div className="p-6 rounded-lg bg-white shadow-sm">
+						<div className="flex items-center mb-6 gap-3">
+							<div className="size-5 bg-gray-200 rounded" />
+							<div className="h-5 w-40 bg-gray-200 rounded" />
+						</div>
+						<div className="grid grid-cols-2 gap-x-8 gap-y-4">
+							{[...Array(8)].map((_, i) => (
+								<div
+									key={i}
+									className="h-4 w-32 bg-gray-200 rounded"
+								/>
+							))}
+						</div>
+					</div>
+
+					<div className="grid xl:grid-cols-2 gap-6">
+						<div className="xl:col-span-2 flex items-center justify-between">
+							<div className="h-6 w-40 bg-gray-200 rounded" />
+							<div className="h-4 w-24 bg-gray-200 rounded" />
+						</div>
+						{[...Array(8)].map((_, i) => (
+							<div
+								key={i}
+								className="p-6 rounded-lg bg-white shadow-sm"
+							>
+								<div className="flex items-center mb-6 gap-3">
+									<div className="size-5 bg-gray-200 rounded" />
+									<div className="h-5 w-32 bg-gray-200 rounded" />
+									<div className="ml-auto">
+										<div className="h-5 w-12 bg-gray-200 rounded" />
+									</div>
+								</div>
+								<div className="h-4 w-full bg-gray-200 rounded" />
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
+
+			<div className="shrink-0 lg:w-[435px]">
+				<div className="grid gap-6">
+					{[...Array(2)].map((_, i) => (
+						<div
+							key={i}
+							className="p-6 rounded-lg bg-white shadow-sm"
+						>
+							<div className="flex items-center mb-6 gap-3">
+								<div className="h-5 w-32 bg-gray-200 rounded" />
+							</div>
+							<div className="h-4 w-full bg-gray-200 rounded mb-4" />
+							<div className="h-4 w-40 bg-gray-200 rounded" />
+						</div>
+					))}
+					<div className="p-6 rounded-lg bg-white shadow-sm space-y-3">
+						<div className="flex items-center mb-6 gap-3">
+							<div className="h-5 w-40 bg-gray-200 rounded" />
+						</div>
+						{[...Array(6)].map((_, i) => (
+							<div
+								key={i}
+								className="flex items-start p-3 bg-white rounded-lg border border-gray-100"
+							>
+								<div className="flex-grow">
+									<div className="flex gap-4 items-center">
+										<div className="size-6 bg-gray-200 rounded" />
+										<div className="h-4 w-24 bg-gray-200 rounded" />
+										<div className="ml-auto h-4 w-32 bg-gray-200 rounded" />
+									</div>
+									<div className="h-4 w-3/4 bg-gray-200 rounded mt-1" />
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+);
+
+export default SkeletonLoader;
diff --git a/assets/apps/dashboard/src/Components/Snackbar.js b/assets/apps/dashboard/src/Components/Snackbar.js
index 9e6e92c671..83e6b8a037 100644
--- a/assets/apps/dashboard/src/Components/Snackbar.js
+++ b/assets/apps/dashboard/src/Components/Snackbar.js
@@ -1,45 +1,76 @@
-import { Snackbar } from '@wordpress/components';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-const GlobalSnackbar = ({ toast, setToast }) => {
+import { NEVE_STORE } from '../utils/constants';
+import Toast from './Common/Toast';
+
+const SingleToast = ({ message, type, onRemove }) => {
 	useEffect(() => {
-		setTimeout(() => {
-			setToast(null);
+		const timer = setTimeout(() => {
+			onRemove();
 		}, 3000);
-	}, []);
 
-	const message = toast();
-	const style = {
-		opacity: null === message ? 0 : 1,
+		return () => clearTimeout(timer);
+	}, [onRemove]);
+
+	return <Toast className="shadow-lg" type={type} message={message} />;
+};
+
+const GlobalSnackbar = () => {
+	const [toasts, setToasts] = useState([]);
+	const { setToast } = useDispatch(NEVE_STORE);
+
+	const toast = useSelect((select) => {
+		const { getToast } = select(NEVE_STORE);
+		return getToast();
+	});
+
+	const buildToast = (message) => {
+		if (message === false) {
+			return {
+				message: __(
+					'Could not Update Option. Please try again.',
+					'neve'
+				),
+				type: 'error',
+			};
+		}
+		if ('boolean' !== typeof message) {
+			return { message, type: 'success' };
+		}
+		return { message: __('Option Updated', 'neve'), type: 'success' };
+	};
+
+	useEffect(() => {
+		if (null === toast) {
+			return;
+		}
+
+		const newToast = {
+			id: Date.now(),
+			...buildToast(toast),
+		};
+
+		setToasts((prev) => [...prev, newToast]);
+		setToast(null);
+	}, [toast, setToast]);
+
+	const onRemove = (id) => {
+		setToasts((prev) => prev.filter((item) => item.id !== id));
 	};
-	let renderToast = __('Option Updated', 'neve');
-	if (message === false) {
-		renderToast = __('Could not Update Option. Please try again.', 'neve');
-	}
-	if ('boolean' !== typeof message) {
-		renderToast = toast();
-	}
 
 	return (
-		<div style={style}>
-			<Snackbar className="dash-notice">{renderToast}</Snackbar>
+		<div className="fixed bottom-5 ml-5 grid gap-2 z-max">
+			{toasts.map(({ id, message, type }) => (
+				<SingleToast
+					key={id}
+					message={message}
+					type={type}
+					onRemove={() => onRemove(id)}
+				/>
+			))}
 		</div>
 	);
 };
 
-export default compose(
-	withDispatch((dispatch) => {
-		const { setToast } = dispatch('neve-dashboard');
-		return {
-			setToast: (message) => setToast(message),
-		};
-	}),
-	withSelect((select) => {
-		const { getToast } = select('neve-dashboard');
-		return {
-			toast: () => getToast(),
-		};
-	})
-)(GlobalSnackbar);
+export default GlobalSnackbar;
diff --git a/assets/apps/dashboard/src/Components/SupportCard.js b/assets/apps/dashboard/src/Components/SupportCard.js
deleted file mode 100644
index a18c971b29..0000000000
--- a/assets/apps/dashboard/src/Components/SupportCard.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { withSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
-
-const SupportCard = ({ license }) => {
-	if (!license || !license.valid || 'valid' !== license.valid) {
-		return null;
-	}
-	const { supportData } = license;
-
-	if (!supportData || !supportData.text || !supportData.url) {
-		return null;
-	}
-
-	const buttonStyle = {
-		width: '100%',
-		justifyContent: 'center',
-		fontWeight: '700',
-		fontSize: '14px',
-		padding: '28px 0',
-		backgroundColor: '#ffffff',
-		marginBottom: '24px',
-	};
-
-	return (
-		<Button
-			style={buttonStyle}
-			variant="secondary"
-			href={supportData.url}
-			target="_blank"
-		>
-			{supportData.text}
-		</Button>
-	);
-};
-
-export default withSelect((select) => {
-	const { getLicense } = select('neve-dashboard');
-	return {
-		license: getLicense(),
-	};
-})(SupportCard);
diff --git a/assets/apps/dashboard/src/Components/TabsContent.js b/assets/apps/dashboard/src/Components/TabsContent.js
deleted file mode 100644
index 888dc96fc1..0000000000
--- a/assets/apps/dashboard/src/Components/TabsContent.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { tabs } from '../utils/common';
-import classnames from 'classnames';
-
-const TabsContent = ({ currentTab, setTab }) => {
-	const classes = classnames(['tab-content', 'columns', currentTab]);
-	return <div className={classes}>{tabs[currentTab].render(setTab)}</div>;
-};
-
-export default TabsContent;
diff --git a/assets/apps/dashboard/src/Components/Toast.js b/assets/apps/dashboard/src/Components/Toast.js
deleted file mode 100644
index 2e39064159..0000000000
--- a/assets/apps/dashboard/src/Components/Toast.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import classnames from 'classnames';
-
-import { useEffect } from '@wordpress/element';
-import { Dashicon } from '@wordpress/components';
-
-const Toast = ({ message, dismiss, time, type = 'info' }) => {
-	useEffect(() => {
-		const timeout = setTimeout(() => {
-			dismiss('');
-			clearTimeout(timeout);
-		}, time || 2000);
-	});
-	const iconMap = {
-		info: 'info',
-		error: 'no',
-		success: 'yes',
-		warning: 'warning',
-	};
-	const classes = classnames([
-		'toast',
-		'components-animate__appear',
-		'is-from-middle',
-		type,
-	]);
-	return (
-		<div className={classes}>
-			<Dashicon icon={iconMap[type]} />
-			<span>{message}</span>
-		</div>
-	);
-};
-
-export default Toast;
diff --git a/assets/apps/dashboard/src/Hooks/useLicenseData.js b/assets/apps/dashboard/src/Hooks/useLicenseData.js
new file mode 100644
index 0000000000..69966efe21
--- /dev/null
+++ b/assets/apps/dashboard/src/Hooks/useLicenseData.js
@@ -0,0 +1,19 @@
+/* global neveDash */
+
+import { useSelect } from '@wordpress/data';
+import { NEVE_STORE } from '../utils/constants';
+
+export default () => {
+	const { license } = useSelect((select) => {
+		const { getLicense } = select(NEVE_STORE);
+		return {
+			license: getLicense(),
+		};
+	});
+
+	return {
+		isLicenseValid: neveDash.pro && license && 'valid' === license.valid,
+		licenseTier: (license && license.tier) || 1,
+		license,
+	};
+};
diff --git a/assets/apps/dashboard/src/Hooks/usePluginActions.js b/assets/apps/dashboard/src/Hooks/usePluginActions.js
new file mode 100644
index 0000000000..0826c2df12
--- /dev/null
+++ b/assets/apps/dashboard/src/Hooks/usePluginActions.js
@@ -0,0 +1,190 @@
+/* global neveDash */
+
+import { useState, useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+const usePluginActions = (slug, activateAfterInstall = false) => {
+	const buttonLabelsMap = {
+		install: {
+			static: activateAfterInstall
+				? __('Install & Activate', 'neve')
+				: __('Install', 'neve'),
+			loading: __('Installing', 'neve') + '...',
+		},
+		activate: {
+			static: __('Activate', 'neve'),
+			loading: __('Activating', 'neve') + '...',
+		},
+		deactivate: {
+			static: __('Deactivate', 'neve'),
+			loading: __('Deactivating', 'neve') + '...',
+		},
+	};
+
+	const activateURL = neveDash.plugins[slug].activate;
+	const deactivateURL = neveDash.plugins[slug].deactivate;
+
+	const [loading, setLoading] = useState(false);
+	const [currentCTA, setCurrentCTA] = useState(neveDash.plugins[slug].cta);
+	const [buttonText, setButtonText] = useState(
+		buttonLabelsMap[currentCTA].static
+	);
+
+	const { setPluginState } = useDispatch('neve-dashboard');
+
+	useEffect(() => {
+		setButtonText(
+			loading
+				? buttonLabelsMap[currentCTA].loading
+				: buttonLabelsMap[currentCTA].static
+		);
+	}, [loading, currentCTA]);
+
+	const installPlugin = () => {
+		return new Promise((resolve) => {
+			wp.updates.ajax('install-plugin', {
+				slug,
+				success: () => resolve({ success: true }),
+				error: (error) =>
+					resolve({
+						success: false,
+						error:
+							error.errorMessage ||
+							__('Could not install plugin.', 'neve'),
+					}),
+			});
+		});
+	};
+
+	const activatePlugin = async () => {
+		try {
+			const response = await window.fetch(activateURL, {
+				headers: {
+					'X-WP-Nonce': neveDash.nonce,
+				},
+			});
+
+			if (!response.ok) {
+				return {
+					success: false,
+					error: __('Could not activate plugin.', 'neve'),
+				};
+			}
+
+			return { success: true };
+		} catch (error) {
+			return {
+				success: false,
+				error:
+					error.message || __('Could not activate plugin.', 'neve'),
+			};
+		}
+	};
+
+	const deactivatePlugin = async () => {
+		try {
+			const response = await window.fetch(deactivateURL, {
+				headers: {
+					'X-WP-Nonce': neveDash.nonce,
+				},
+			});
+
+			if (!response.ok) {
+				return {
+					success: false,
+					error: __('Could not deactivate plugin.', 'neve'),
+				};
+			}
+
+			return { success: true };
+		} catch (error) {
+			return { success: false, error: error.message };
+		}
+	};
+
+	/**
+	 * Do plugin action.
+	 *
+	 * @param {'activate'|'deactivate'|'install'|null} type - Action to perform. If null, it will use the currentCTA.
+	 * @return {Promise<{success: boolean, error: Error}>} - Result of the action.
+	 */
+	const doPluginAction = async (type = null) => {
+		return await handlePluginAction(type || currentCTA);
+	};
+
+	/**
+	 * Handle plugin action.
+	 *
+	 * @param {'activate'|'deactivate'|'install'} action - Action to perform.
+	 *
+	 * @return {Promise<{success: boolean, error: Error}>} - Result of the action ().
+	 *
+	 */
+	const handlePluginAction = async (action) => {
+		setLoading(true);
+
+		try {
+			let result;
+
+			switch (action) {
+				case 'install':
+					setLoading(true);
+					result = await installPlugin();
+					if (result.success) {
+						setPluginState(slug, 'activate');
+						setCurrentCTA('activate');
+
+						if (activateAfterInstall) {
+							return await handlePluginAction('activate');
+						}
+					}
+					break;
+
+				case 'activate':
+					result = await activatePlugin();
+					if (result.success) {
+						setPluginState(slug, 'deactivate');
+						setCurrentCTA('deactivate');
+
+						if (slug === 'templates-patterns-collection') {
+							window.location.href =
+								neveDash.tpcAdminURL +
+								(neveDash.canInstallPlugins
+									? '&onboarding=yes'
+									: '');
+						}
+					}
+					break;
+
+				case 'deactivate':
+					result = await deactivatePlugin(slug);
+
+					if (result.success) {
+						setPluginState(slug, 'activate');
+						setCurrentCTA('activate');
+					}
+
+					break;
+
+				default:
+					result = {
+						success: false,
+						error: __('Invalid action', 'neve'),
+					};
+			}
+
+			return result;
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return {
+		loading,
+		buttonText,
+		doPluginAction,
+	};
+};
+
+export default usePluginActions;
diff --git a/assets/apps/dashboard/src/Layout/Card.js b/assets/apps/dashboard/src/Layout/Card.js
new file mode 100644
index 0000000000..0f9149efe3
--- /dev/null
+++ b/assets/apps/dashboard/src/Layout/Card.js
@@ -0,0 +1,36 @@
+import cn from 'classnames';
+
+export default ({ icon, title, children, afterTitle, className = '' }) => {
+	const classes = cn(
+		[
+			'p-6 rounded-lg shadow-sm',
+			{
+				'bg-white': !className.includes('bg-'),
+			},
+		],
+		className
+	);
+
+	return (
+		<div className={classes}>
+			{(icon || title) && (
+				<div className="flex items-center mb-6 gap-3">
+					{icon && (
+						<span className="size-5 text-blue-600 shrink-0">
+							{icon}
+						</span>
+					)}
+					{title && (
+						<h2 className="text-base font-semibold text-black">
+							{title}
+						</h2>
+					)}
+					{afterTitle && (
+						<div className="ml-auto shrink-0">{afterTitle}</div>
+					)}
+				</div>
+			)}
+			{children}
+		</div>
+	);
+};
diff --git a/assets/apps/dashboard/src/Layout/Container.js b/assets/apps/dashboard/src/Layout/Container.js
new file mode 100644
index 0000000000..1e2d3443f1
--- /dev/null
+++ b/assets/apps/dashboard/src/Layout/Container.js
@@ -0,0 +1,12 @@
+import cn from 'classnames';
+
+export default ({ children, className }) => (
+	<div
+		className={cn([
+			'max-w-[90vw] w-full lg:container mx-auto px-2 lg:px-6',
+			className,
+		])}
+	>
+		{children}
+	</div>
+);
diff --git a/assets/apps/dashboard/src/dashboard.js b/assets/apps/dashboard/src/dashboard.js
index b60ba8dead..5d71f30392 100644
--- a/assets/apps/dashboard/src/dashboard.js
+++ b/assets/apps/dashboard/src/dashboard.js
@@ -1,20 +1,26 @@
 import { registerStore } from '@wordpress/data';
-import { render } from '@wordpress/element';
+import { render, StrictMode } from '@wordpress/element';
 
-import './style.scss';
+import './style.css';
 import App from './Components/App';
 
 import actions from './store/actions';
 import reducer from './store/reducer';
 import selectors from './store/selectors';
+import { NEVE_STORE } from './utils/constants';
+
 import './utils/module-observer';
 import './utils/survey';
 
-registerStore('neve-dashboard', {
+registerStore(NEVE_STORE, {
 	reducer,
 	actions,
 	selectors,
 });
 
-const Root = () => <App />;
+const Root = () => (
+	<StrictMode>
+		<App />
+	</StrictMode>
+);
 render(<Root />, document.getElementById('neve-dashboard'));
diff --git a/assets/apps/dashboard/src/store/reducer.js b/assets/apps/dashboard/src/store/reducer.js
index 9612c35204..d2cd911b7c 100644
--- a/assets/apps/dashboard/src/store/reducer.js
+++ b/assets/apps/dashboard/src/store/reducer.js
@@ -4,10 +4,10 @@ import { getTabHash } from '../utils/common';
 const initialState = {
 	settings: {},
 	plugins: neveDash.plugins || {},
-	tier: neveDash.pro ? neveDash.license.tier : 0,
 	toast: null,
 	currentTab: 'start',
 	license: neveDash.pro ? neveDash.license : {},
+	notifications: neveDash.notifications || {},
 };
 
 const hash = getTabHash();
diff --git a/assets/apps/dashboard/src/store/selectors.js b/assets/apps/dashboard/src/store/selectors.js
index 4f2cf76db9..cb576148e4 100644
--- a/assets/apps/dashboard/src/store/selectors.js
+++ b/assets/apps/dashboard/src/store/selectors.js
@@ -8,4 +8,21 @@ export default {
 	getLicense: (state) => state.license,
 	getToast: (state) => state.toast,
 	getTab: (state) => state.currentTab,
+	getNotifications: (state) => {
+		const shownNotifications = { ...state.notifications };
+
+		Object.entries(state.notifications).forEach(([slug, data]) => {
+			if (!data.dependentModule) {
+				return;
+			}
+
+			const option = `nv_pro_${data.dependentModule}_status`;
+
+			if (!state.settings[option]) {
+				delete shownNotifications[slug];
+			}
+		});
+
+		return shownNotifications;
+	},
 };
diff --git a/assets/apps/dashboard/src/style.css b/assets/apps/dashboard/src/style.css
new file mode 100644
index 0000000000..eacf688872
--- /dev/null
+++ b/assets/apps/dashboard/src/style.css
@@ -0,0 +1,33 @@
+@config './tailwind.config.js';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#wpcontent {
+	@apply pl-0 font-sans min-h-[100vh];
+}
+
+#wpbody-content > .notice, #wpbody-content > .error {
+	@apply hidden;
+}
+
+#wpcontent, #wpbody, #wpbody-content, #neve-dashboard {
+	@apply flex flex-col grow;
+}
+
+#wpwrap {
+	@apply min-h-full;
+}
+
+#wpwrap {
+	@apply bg-gray-50 relative;
+}
+
+#adminmenumain {
+	@apply shrink;
+}
+
+#neve-dashboard {
+	line-height: 1.5;
+}
diff --git a/assets/apps/dashboard/src/tailwind.config.js b/assets/apps/dashboard/src/tailwind.config.js
new file mode 100644
index 0000000000..9b1fce30e4
--- /dev/null
+++ b/assets/apps/dashboard/src/tailwind.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+	content: ['assets/apps/dashboard/src/**/*.js'],
+	theme: {
+		extend: {
+			zIndex: {
+				max: 9999,
+			},
+		},
+	},
+};
diff --git a/assets/apps/dashboard/src/utils/common.js b/assets/apps/dashboard/src/utils/common.js
index fcd574f9ba..4773307c57 100644
--- a/assets/apps/dashboard/src/utils/common.js
+++ b/assets/apps/dashboard/src/utils/common.js
@@ -2,18 +2,12 @@
 import compareVersions from 'compare-versions';
 
 import StarterSitesUnavailable from '../Components/Content/StarterSitesUnavailable';
-import CustomLayoutsUnavailable from '../Components/Content/CustomLayoutsUnavailable';
-import Start from '../Components/Content/Start';
-import Pro from '../Components/Content/Pro';
-import Plugins from '../Components/Content/Plugins';
-import Help from '../Components/Content/Help';
-import Changelog from '../Components/Content/Changelog';
+import Welcome from '../Components/Content/Welcome';
 import FreePro from '../Components/Content/FreePro';
-import { __ } from '@wordpress/i18n';
+import Settings from '../Components/Content/Settings';
+import Changelog from '../Components/Content/Changelog';
 
-const addUrlHash = (hash) => {
-	window.location.hash = hash;
-};
+import { __ } from '@wordpress/i18n';
 
 const getTabHash = () => {
 	let hash = window.location.hash;
@@ -34,30 +28,21 @@ const getTabHash = () => {
 const tabs = {
 	start: {
 		label: __('Welcome', 'neve'),
-		render: (setTab) => <Start setTab={setTab} />,
+		render: () => <Welcome />,
 	},
 	'starter-sites': {
 		label: __('Starter Sites', 'neve'),
 		render: () => <StarterSitesUnavailable />,
 	},
-	'custom-layouts': {
-		label: __('Custom Layouts', 'neve'),
-		render: (setTab) => <CustomLayoutsUnavailable setTab={setTab} />,
-	},
 	'free-pro': {
 		label: __('Free vs Pro', 'neve'),
 		render: () => <FreePro />,
 	},
-	plugins: {
-		label: __('Plugins', 'neve'),
-		render: () => <Plugins />,
-	},
-	help: {
-		label: __('Help', 'neve'),
-		render: (setTab) => <Help setTab={setTab} />,
+	settings: {
+		label: __('Settings', 'neve'),
+		render: () => <Settings />,
 	},
 	changelog: {
-		label: __('Changelog', 'neve'),
 		render: () => <Changelog />,
 	},
 };
@@ -74,38 +59,20 @@ const properTPC =
 	) === 1;
 
 if (activeTPC && properTPC) {
-	delete tabs['starter-sites'];
-}
+	delete tabs['starter-sites'].render;
 
-if (
-	(neveDash.pro || neveDash.hasOldPro) &&
-	neveDash.license &&
-	neveDash.license.valid === 'valid'
-) {
-	delete tabs['custom-layouts'];
+	tabs['starter-sites'].url = neveDash.tpcAdminURL;
 }
 
 if (neveDash.pro || neveDash.hasOldPro) {
-	tabs.pro = {
-		label: neveDash.strings.proTabTitle,
-		render: () => <Pro />,
-	};
 	delete tabs['free-pro'];
 }
 
 if (neveDash.whiteLabel) {
 	delete tabs.changelog;
-	delete tabs.plugins;
 	if (neveDash.whiteLabel.hideStarterSites) {
 		delete tabs['starter-sites'];
 	}
 }
 
-if (neveDash.hidePluginsTab) {
-	delete tabs.plugins;
-}
-
-const untrailingSlashIt = (str) => str.replace(/\/$/, '');
-const trailingSlashIt = (str) => untrailingSlashIt(str) + '/';
-
-export { addUrlHash, getTabHash, trailingSlashIt, untrailingSlashIt, tabs };
+export { getTabHash, tabs };
diff --git a/assets/apps/dashboard/src/utils/constants.js b/assets/apps/dashboard/src/utils/constants.js
new file mode 100644
index 0000000000..f9ca5aa4f4
--- /dev/null
+++ b/assets/apps/dashboard/src/utils/constants.js
@@ -0,0 +1,69 @@
+/* globals neveDash */
+
+import {
+	LucideArrowUp,
+	LucideBotMessageSquare,
+	LucideBriefcase,
+	LucideCreditCard,
+	LucideGalleryVertical,
+	LucideGauge,
+	LucideGraduationCap,
+	LucideImage,
+	LucideLayoutTemplate,
+	LucideNewspaper,
+	LucidePalette,
+	LucidePanelRightDashed,
+	LucidePanelTopDashed,
+	LucidePin,
+	LucideRss,
+	LucideScanBarcode,
+	LucideScroll,
+	LucideShield,
+	LucideShoppingCart,
+	LucideTimer,
+	LucideToyBrick,
+	LucideTypeOutline,
+} from 'lucide-react';
+
+export const NEVE_STORE = 'neve-dashboard';
+export const NEVE_HAS_VALID_PRO =
+	(neveDash.pro || neveDash.hasOldPro) &&
+	neveDash.license &&
+	neveDash.license.valid === 'valid';
+
+export const NEVE_HAS_PRO = neveDash.pro;
+
+export const NEVE_IS_WHITELABEL = !!neveDash.whiteLabel;
+
+export const NEVE_SHOW_WHITELABEL = !!neveDash.modules.white_label;
+
+export const NEVE_HIDE_PLUGINS = neveDash.hidePluginsTab || NEVE_IS_WHITELABEL;
+
+export const NEVE_MODULE_ICON_MAP = {
+	hfg_module: LucidePanelTopDashed,
+	woocommerce_booster: LucideShoppingCart,
+	easy_digital_downloads: LucideScanBarcode,
+	blog_pro: LucideNewspaper,
+	post_type_enhancements: LucidePin,
+	scroll_to_top: LucideArrowUp,
+	performance_features: LucideGauge,
+	block_editor_booster: LucideScroll,
+	white_label: LucideBriefcase,
+	custom_layouts: LucideGalleryVertical,
+	elementor_booster: LucidePalette,
+	lifterlms_booster: LucideGraduationCap,
+	typekit_fonts: LucideTypeOutline,
+	custom_sidebars: LucidePanelRightDashed,
+	access_restriction: LucideShield,
+};
+
+export const NEVE_PLUGIN_ICON_MAP = {
+	'otter-blocks': LucideToyBrick,
+	'templates-patterns-collection': LucideLayoutTemplate,
+	'wp-full-stripe-free': LucideCreditCard,
+	'optimole-wp': LucideImage,
+	'wp-cloudflare-page-cache': LucideTimer,
+	'feedzy-rss-feeds': LucideRss,
+	'hyve-lite': LucideBotMessageSquare,
+	// 'sparks'
+};
diff --git a/assets/apps/dashboard/src/utils/rest.js b/assets/apps/dashboard/src/utils/rest.js
index 36d28bffea..5cce1ce5a6 100644
--- a/assets/apps/dashboard/src/utils/rest.js
+++ b/assets/apps/dashboard/src/utils/rest.js
@@ -12,18 +12,19 @@ export const fetchOptions = () => {
 };
 
 export const changeOption = (option, value, module = false, pro = true) => {
-	option = (pro ? 'nv_pro_' : '') + option + (module ? '_status' : '');
+	const actualOption =
+		(pro ? 'nv_pro_' : '') + option + (module ? '_status' : '');
 
 	const model = new models.Settings({
-		[option]: value,
+		[actualOption]: value,
 	});
 
 	return new Promise((resolve) => {
 		model.save().then((r) => {
-			if (!r || !r[option] === value) {
+			if (!r || !r[actualOption] === value) {
 				resolve({ success: false });
 			}
-			resolve(isValid(option, r));
+			resolve(isValid(actualOption, r));
 		});
 	});
 };
diff --git a/assets/img/dashboard/logo.svg b/assets/img/dashboard/logo.svg
index 24ec3ce97e..5454c306d4 100644
--- a/assets/img/dashboard/logo.svg
+++ b/assets/img/dashboard/logo.svg
@@ -1,3 +1,7 @@
-<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 0.198486H61V59.9128H0.5V0.198486ZM25.0305 30.0698V44.2415H17.7858V15.4382C17.7858 15.2989 17.8281 15.2013 17.9129 15.1456C17.9976 15.0899 18.1529 15.1595 18.3789 15.3546L36.4696 30.0698V15.8145H43.7143V44.6596C43.7143 44.8268 43.672 44.9313 43.5872 44.9731C43.5025 45.0149 43.3472 44.9383 43.1212 44.7432L25.0305 30.0698ZM43.7143 48.9127H17.7858V51.2699H43.7143V48.9127Z" fill="#0073AA"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="49" height="49" viewBox="0 0 39 39" fill="none" aria-hidden="true">
+	<rect width="38.914" height="38.4086" fill="#0264C9"></rect>
+	<path fill-rule="evenodd" clip-rule="evenodd"
+		  d="M15.779 19.2133V28.3287H11.1191V9.80222C11.1191 9.71259 11.1464 9.64985 11.2009 9.614C11.2554 9.57815 11.3553 9.62296 11.5007 9.74845L23.1367 19.2133V10.0442H27.7966V28.5976C27.7966 28.7051 27.7693 28.7724 27.7148 28.7992C27.6603 28.8261 27.5604 28.7768 27.4151 28.6514L15.779 19.2133Z"
+		  fill="white"></path>
+	<rect x="11.1191" y="31.3334" width="16.6774" height="1.51613" fill="white"></rect>
 </svg>
diff --git a/grunt/sass.js b/grunt/sass.js
index 29c63b98c8..dc61f34a9e 100644
--- a/grunt/sass.js
+++ b/grunt/sass.js
@@ -1,7 +1,7 @@
 // jshint ignore: start
 // https://github.com/gruntjs/grunt-contrib-sass
 
-const sass = require('node-sass');
+const sass = require('sass');
 
 module.exports = {
 	style: {
diff --git a/inc/admin/dashboard/main.php b/inc/admin/dashboard/main.php
index 13b5465ffa..1fadc010c4 100755
--- a/inc/admin/dashboard/main.php
+++ b/inc/admin/dashboard/main.php
@@ -8,6 +8,7 @@
 namespace Neve\Admin\Dashboard;
 
 use Neve\Core\Limited_Offers;
+use Neve\Core\Settings\Config;
 use Neve\Core\Theme_Info;
 use Neve\Core\Tracker;
 
@@ -38,36 +39,6 @@ class Main {
 	 */
 	private $theme_args = [];
 
-	/**
-	 * Useful plugins array.
-	 *
-	 * @var array
-	 */
-	private $useful_plugins = [
-		'optimole-wp',
-		'wp-landing-kit',
-		'otter-blocks',
-		'wp-cloudflare-page-cache',
-		'templates-patterns-collection',
-		'themeisle-companion',
-		'translatepress-multilingual',
-		'amp',
-	];
-
-	/**
-	 * Plugins Cache key.
-	 *
-	 * @var string
-	 */
-	private $plugins_cache_key = 'neve_dash_useful_plugins';
-
-	/**
-	 * Plugins Cache Hash key.
-	 *
-	 * @var string
-	 */
-	private $plugins_cache_hash_key = 'neve_dash_useful_plugins_hash';
-
 	/**
 	 * Main constructor.
 	 */
@@ -143,6 +114,16 @@ public function register_settings() {
 				'default'      => '',
 			]
 		);
+
+		register_setting(
+			'neve_settings',
+			Config::OPTION_LOCAL_GOOGLE_FONTS_HOSTING,
+			[
+				'type'         => 'boolean',
+				'show_in_rest' => true,
+				'default'      => false,
+			]
+		);
 	}
 
 	/**
@@ -208,10 +189,8 @@ public function register() {
 		// Add Dashboard submenu. Same slug as parent to allow renaming the automatic submenu that is added.
 		add_submenu_page( // phpcs:ignore WPThemeReview.PluginTerritory.NoAddAdminPages.add_menu_pages_add_submenu_page
 			$theme_page,
-			/* translators: %s - Theme name */
-			sprintf( __( '%s Options', 'neve' ), wp_kses_post( $theme['name'] ) ),
-			/* translators: %s - Theme name */
-			sprintf( __( '%s Options', 'neve' ), wp_kses_post( $theme['name'] ) ),
+			__( 'Dashboard', 'neve' ),
+			__( 'Dashboard', 'neve' ),
 			$capability,
 			$theme_page,
 			[ $this, 'render' ]
@@ -335,29 +314,31 @@ private function get_localization() {
 			'isValidLicense'          => $this->has_valid_addons(),
 			'notifications'           => $this->get_notifications(),
 			'customizerShortcuts'     => $this->get_customizer_shortcuts(),
-			'plugins'                 => $this->get_useful_plugins(),
+			'plugins'                 => $this->get_recommended_plugins(),
+			'modules'                 => $this->get_modules(),
 			'featureData'             => $this->get_free_pro_features(),
 			'showFeedbackNotice'      => $this->should_show_feedback_notice(),
 			'allfeaturesNeveProURL'   => tsdk_translate_link( tsdk_utmify( 'https://themeisle.com/themes/neve/upgrade/', 'seeallfeatures', 'freevspropage' ), 'query' ),
 			'startSitesgetNeveProURL' => tsdk_translate_link( tsdk_utmify( 'https://themeisle.com/themes/neve/upgrade/', 'welcomestartersitescard', 'nevedashboard' ), 'query' ),
 			'customLayoutsNeveProURL' => tsdk_translate_link( tsdk_utmify( 'https://themeisle.com/themes/neve/upgrade/', 'customlayoutscard', 'nevedashboard' ), 'query' ),
 			'upgradeURL'              => apply_filters( 'neve_upgrade_link_from_child_theme_filter', tsdk_translate_link( tsdk_utmify( 'https://themeisle.com/themes/neve/upgrade/', 'getpronow', 'freevspropage' ), 'query' ) ),
+			'upgradeURLModules'       => apply_filters( 'neve_upgrade_link_from_child_theme_filter', tsdk_translate_link( tsdk_utmify( 'https://themeisle.com/themes/neve/upgrade/', 'getpronow', 'welcomepage' ), 'query' ) ),
 			'supportURL'              => esc_url( 'https://wordpress.org/support/theme/neve/' ),
 			'docsURL'                 => esc_url( 'https://docs.themeisle.com/article/946-neve-doc' ),
 			'codexURL'                => esc_url( 'https://codex.nevewp.com/' ),
 			'strings'                 => [
 				'proTabTitle'                   => wp_kses_post( $plugin_name ),
 				/* translators: %s - Theme name */
-				'header'                        => sprintf( __( '%s Options', 'neve' ), wp_kses_post( $theme_name ) ),
+				'header'                        => wp_kses_post( $theme_name ),
 				/* translators: %s - Theme name */
 				'starterSitesCardDescription'   => sprintf( __( '%s now comes with a sites library with various designs to pick from. Visit our collection of demos that are constantly being added.', 'neve' ), wp_kses_post( $theme_name ) ),
 				'starterSitesCardUpsellMessage' => esc_html__( 'Upgrade to the Pro version and get instant access to all Premium Starter Sites — including Expert Sites — and much more.', 'neve' ),
 				/* translators: %s - Theme name */
 				'starterSitesTabDescription'    => sprintf( __( 'With %s, you can choose from multiple unique demos, specially designed for you, that can be installed with a single click. You just need to choose your favorite, and we will take care of everything else.', 'neve' ), wp_kses_post( $theme_name ) ),
 				/* translators: 1 - Theme name, 2 - Cloud Templates & Patterns Collection */
-				'starterSitesUnavailableActive' => sprintf( __( 'In order to be able to import any starter sites for %1$s you would need to have the %2$s plugin active.', 'neve' ), wp_kses_post( $theme_name ), 'Cloud Templates & Patterns Collection' ),
+				'starterSitesUnavailableActive' => sprintf( __( 'In order to be able to import any starter sites for %1$s you would need to have the %2$s plugin active.', 'neve' ), wp_kses_post( $theme_name ), '<strong>Starter Sites & Templates by Neve</strong>' ),
 				/* translators: %s - Theme name */
-				'starterSitesUnavailableUpdate' => sprintf( __( 'In order to be able to import any starter sites for %1$s you would need to have the %2$s plugin updated to the latest version.', 'neve' ), wp_kses_post( $theme_name ), 'Cloud Templates & Patterns Collection' ),
+				'starterSitesUnavailableUpdate' => sprintf( __( 'In order to be able to import any starter sites for %1$s you would need to have the %2$s plugin updated to the latest version.', 'neve' ), wp_kses_post( $theme_name ), '<strong>Starter Sites & Templates by Neve</strong>' ),
 				/* translators: %s - Theme name */
 				'supportCardDescription'        => sprintf( __( 'We want to make sure you have the best experience using %1$s, and that is why we have gathered all the necessary information here for you. We hope you will enjoy using %1$s as much as we enjoy creating great products.', 'neve' ), wp_kses_post( $theme_name ) ),
 				/* translators: %s - Theme name */
@@ -369,8 +350,8 @@ private function get_localization() {
 				/* translators: %1$s - Author link - Themeisle */
 				'licenseCardDescription'        => sprintf(
 				// translators: store name (Themeisle)
-					__( 'Enter your license from %1$s purchase history in order to get plugin updates', 'neve' ),
-					'<a target="_blank" rel="external noreferrer noopener" href="' . tsdk_translate_link( 'https://store.themeisle.com/', 'query' ) . '">ThemeIsle<span class="components-visually-hidden">' . esc_html__( '(opens in a new tab)', 'neve' ) . '</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" class="components-external-link__icon" role="img" aria-hidden="true" focusable="false" style="fill: #0073AA"><path d="M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"></path></svg></a>'
+					__( 'Enter your license from %1$s purchase history in order to get plugin updates', 'neve' ) . '.',
+					'<a class="text-blue-600 hover:text-blue-700 hover:underline inline-flex gap-1 items-center" target="_blank" rel="external noreferrer noopener" href="' . tsdk_translate_link( 'https://store.themeisle.com/', 'query' ) . '">Themeisle<span class="sr-only">' . esc_html__( '(opens in a new tab)', 'neve' ) . '</span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link shrink-0"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a>'
 				),
 			],
 			'changelog'               => $this->cl_handler->get_changelog( get_template_directory() . '/CHANGELOG.md' ),
@@ -516,36 +497,44 @@ private function show_branding_notice() {
 	private function get_customizer_shortcuts() {
 		return [
 			[
-				'text' => __( 'Upload Logo', 'neve' ),
-				'link' => add_query_arg( [ 'autofocus[control]' => 'custom_logo' ], admin_url( 'customize.php' ) ),
+				'text'        => __( 'Upload Logo', 'neve' ),
+				'description' => __( 'Recommended size: 200x100px', 'neve' ),
+				'link'        => add_query_arg( [ 'autofocus[control]' => 'custom_logo' ], admin_url( 'customize.php' ) ),
 			],
 			[
-				'text' => __( 'Set Colors', 'neve' ),
-				'link' => add_query_arg( [ 'autofocus[section]' => 'neve_colors_background_section' ], admin_url( 'customize.php' ) ),
+				'text'        => __( 'Set Colors', 'neve' ),
+				'description' => __( 'Brand colors & site palette', 'neve' ),
+				'link'        => add_query_arg( [ 'autofocus[section]' => 'neve_colors_background_section' ], admin_url( 'customize.php' ) ),
 			],
 			[
-				'text' => __( 'Customize Fonts', 'neve' ),
-				'link' => add_query_arg( [ 'autofocus[control]' => 'neve_headings_font_family' ], admin_url( 'customize.php' ) ),
+				'text'        => __( 'Customize Fonts', 'neve' ),
+				'description' => __( 'Typography & text styles', 'neve' ),
+				'link'        => add_query_arg( [ 'autofocus[control]' => 'neve_headings_font_family' ], admin_url( 'customize.php' ) ),
 			],
 			[
-				'text' => __( 'Layout Options', 'neve' ),
-				'link' => add_query_arg( [ 'autofocus[panel]' => 'neve_layout' ], admin_url( 'customize.php' ) ),
+				'text'        => __( 'Layout Options', 'neve' ),
+				'description' => __( 'Content structure & spacing', 'neve' ),
+				'link'        => add_query_arg( [ 'autofocus[panel]' => 'neve_layout' ], admin_url( 'customize.php' ) ),
 			],
 			[
-				'text' => __( 'Header Options', 'neve' ),
-				'link' => add_query_arg( [ 'autofocus[panel]' => 'hfg_header' ], admin_url( 'customize.php' ) ),
+				'text'        => __( 'Header Options', 'neve' ),
+				'description' => __( 'Navigation & branding setup', 'neve' ),
+				'link'        => add_query_arg( [ 'autofocus[panel]' => 'hfg_header' ], admin_url( 'customize.php' ) ),
 			],
 			[
-				'text' => __( 'Blog Layouts', 'neve' ),
-				'link' => add_query_arg( [ 'autofocus[section]' => 'neve_blog_archive_layout' ], admin_url( 'customize.php' ) ),
+				'text'        => __( 'Blog Layouts', 'neve' ),
+				'description' => __( 'Post display & formatting', 'neve' ),
+				'link'        => add_query_arg( [ 'autofocus[section]' => 'neve_blog_archive_layout' ], admin_url( 'customize.php' ) ),
 			],
 			[
-				'text' => __( 'Footer Options', 'neve' ),
-				'link' => add_query_arg( [ 'autofocus[panel]' => 'hfg_footer' ], admin_url( 'customize.php' ) ),
+				'text'        => __( 'Footer Options', 'neve' ),
+				'description' => __( 'Pro: Custom footer layouts', 'neve' ),
+				'link'        => add_query_arg( [ 'autofocus[panel]' => 'hfg_footer' ], admin_url( 'customize.php' ) ),
 			],
 			[
-				'text' => __( 'Content / Sidebar', 'neve' ),
-				'link' => add_query_arg( [ 'autofocus[section]' => 'neve_sidebar' ], admin_url( 'customize.php' ) ),
+				'text'        => __( 'Content / Sidebar', 'neve' ),
+				'description' => __( 'Widget areas & layout', 'neve' ),
+				'link'        => add_query_arg( [ 'autofocus[section]' => 'neve_sidebar' ], admin_url( 'customize.php' ) ),
 			],
 		];
 	}
@@ -570,138 +559,230 @@ private function get_doc_link( $utm_term, $url ) {
 	private function get_free_pro_features() {
 		return [
 			[
-				'title'       => __( 'Header/Footer builder', 'neve' ),
-				'description' => __( 'Easily build your header and footer by dragging and dropping all the important elements in the real-time WordPress Customizer. More advanced options are available in PRO.', 'neve' ),
-				'inLite'      => true,
-				'docsLink'    => $this->get_doc_link( 'Header/Footer builder', 'https://docs.themeisle.com/category/1251-neve-header-builder' ),
-			],
-			[
-				'title'       => __( 'Page Builder Compatibility', 'neve' ),
-				'description' => __( 'Neve is fully compatible with Gutenberg, the new WordPress editor and for all of you page builder fans, Neve has full compatibility with Elementor, Beaver Builder, and all the other popular page builders.', 'neve' ),
-				'inLite'      => true,
-				'docsLink'    => $this->get_doc_link( 'Page Builder Compatibility', 'https://docs.themeisle.com/article/946-neve-doc#pagebuilders' ),
+				'section' => __( 'Website Essentials', 'neve' ),
+				'items'   => [
+					[
+						'title'       => __( 'Advanced Header Features', 'neve' ),
+						'description' => __( 'Full header settings control with sticky/transparent header, page-specific settings & mobile layouts.', 'neve' ),
+					],
+					[
+						'title'       => __( 'Design Components', 'neve' ),
+						'description' => __( 'Social icons, payment icons, divider, footer copyright editor and 15+ header components.', 'neve' ),
+					],
+					[
+						'title'       => __( 'Custom Layouts', 'neve' ),
+						'description' => __( 'Add custom blocks or content using hooks for headers, footers, 404 pages, and more.', 'neve' ),
+					],
+				],
 			],
 			[
-				'title'       => __( 'Header Booster', 'neve' ),
-				'description' => __( 'Take the header builder to a new level with new awesome components: socials, contact, breadcrumbs, language switcher, multiple HTML, sticky and transparent menu, page header builder and many more.', 'neve' ),
-				'inLite'      => false,
-				'docsLink'    => $this->get_doc_link( 'Header Booster', 'https://docs.themeisle.com/article/1057-header-booster-documentation' ),
+				'section' => __( 'Page Builder Features', 'neve' ),
+				'items'   => [
+					[
+						'title'       => __( 'Elementor Add-ons', 'neve' ),
+						'description' => __( 'Add engaging elements, protect content, and create dynamic layouts with our advanced toolkit.', 'neve' ),
+					],
+					[
+						'title'       => __( 'Otter Blocks PRO', 'neve' ),
+						'description' => __( 'Advanced Gutenberg blocks with animations & visibility controls.', 'neve' ),
+					],
+				],
 			],
 			[
-				'title'       => __( 'Page Header Builder', 'neve' ),
-				'description' => __( 'The Page Header is the horizontal area that sits directly below the header and contains the page/post title. Easily design an attractive Page Header area using our dedicated builder.', 'neve' ),
-				'inLite'      => false,
-				'docsLink'    => $this->get_doc_link( 'Page Header Builder', 'https://docs.themeisle.com/article/1262-neve-page-header' ),
+				'section' => __( 'Content & Blog Features', 'neve' ),
+				'items'   => [
+					[
+						'title'       => __( 'Advanced Blog Features', 'neve' ),
+						'description' => __( 'Multiple layouts, reading time estimates, social sharing & related posts.', 'neve' ),
+					],
+					[
+						'title'       => __( 'Starter Sites', 'neve' ),
+						'description' => __( 'Access a growing library of beautiful, ready-to-use templates for every niche and industry.', 'neve' ),
+					],
+					[
+						'title'       => __( 'Content Restriction', 'neve' ),
+						'description' => __( 'Restrict content access by user, role, or password—ideal for membership sites.', 'neve' ),
+					],
+					[
+						'title'       => __( 'Multilingual Support', 'neve' ),
+						'description' => __( 'Seamlessly integrate with WPML, Weglot, and Polylang for enhanced multilingual capabilities.', 'neve' ),
+					],
+				],
 			],
 			[
-				'title'       => __( 'Custom Layouts', 'neve' ),
-				'description' => __( 'Powerful Custom Layouts builder which allows you to easily create your own header, footer or custom content on any of the hook locations available in the theme.', 'neve' ),
-				'inLite'      => false,
-				'docsLink'    => $this->get_doc_link( 'Custom Layouts', 'https://docs.themeisle.com/article/1062-custom-layouts-module' ),
+				'section' => __( 'Store Features', 'neve' ),
+				'items'   => [
+					[
+						'title'       => __( 'Product Experience', 'neve' ),
+						'description' => __( 'Quick view popup, features video & wishlist functionality.', 'neve' ),
+					],
+					[
+						'title'       => __( 'Shopping Enhancement', 'neve' ),
+						'description' => __( 'Product comparison, advance product review & variation swatches.', 'neve' ),
+					],
+					[
+						'title'       => __( 'Sales Features', 'neve' ),
+						'description' => __( 'Custom thank you pages & announcement bars.', 'neve' ),
+					],
+				],
 			],
 			[
-				'title'       => __( 'Blog Booster', 'neve' ),
-				'description' => __( 'Give a huge boost to your entire blogging experience with features specially designed for increased user experience.', 'neve' ) . ' ' . __( 'Sharing, custom article sorting, comments integrations, number of minutes needed to read an article and many more.', 'neve' ),
-				'inLite'      => false,
-				'docsLink'    => $this->get_doc_link( 'Blog Booster', 'https://docs.themeisle.com/article/1059-blog-booster-documentation' ),
+				'section' => __( 'Professional Features', 'neve' ),
+				'items'   => [
+					[
+						'title'       => __( 'Priority Support', 'neve' ),
+						'description' => __( 'Get fast and reliable assistance directly from our expert team.', 'neve' ),
+					],
+					[
+						'title'       => __( 'White Label', 'neve' ),
+						'description' => __( 'Remove Neve branding and rebrand it as your own for client websites.', 'neve' ),
+					],
+				],
 			],
-			[
-				'title'       => __( 'Elementor Booster', 'neve' ),
+		];
+	}
+
+	/**
+	 * Get modules.
+	 *
+	 * @return array[]
+	 */
+	private function get_modules() {
+		$plugins = array(
+			'hfg_module'             => array(
+				'nicename'    => __( 'Header Booster', 'neve' ),
+				'description' => __( 'Create unique sticky & transparent headers that adapt to scroll. Perfect for modern, immersive websites.', 'neve' ),
+			),
+			'woocommerce_booster'    => array(
+				'nicename'    => __( 'WooCommerce Booster', 'neve' ),
+				'description' => __( 'Transform your store with quick-view popups, wishlist features, and optimized checkout flow. Boost sales instantly.', 'neve' ),
+				'byline'      => __( 'Boost conversion rates up to 15%', 'neve' ),
+				'condition'   => class_exists( 'WooCommerce' ),
+			),
+			'easy_digital_downloads' => array(
+				'nicename'    => __( 'Easy Digital Downloads Booster', 'neve' ),
+				'description' => __( 'Enhance your Easy Digital Downloads store with additional customization settings.', 'neve' ),
+				'condition'   => class_exists( 'Easy_Digital_Downloads' ),
+			),
+			'blog_pro'               => array(
+				'nicename'    => __( 'Blog Booster', 'neve' ),
+				'description' => __( 'Advanced layouts, reading time estimates, and social sharing to keep readers engaged longer.', 'neve' ),
+			),
+			'post_type_enhancements' => array(
+				'nicename'    => __( 'Post types enhancements', 'neve' ),
+				'description' => __( 'Extend Neve\'s powerful features to custom post types. Create unique layouts for portfolios, testimonials, and more.', 'neve' ),
+			),
+			'scroll_to_top'          => array(
+				'nicename'    => __( 'Scroll To Top', 'neve' ),
+				'description' => __( 'Add a customizable scroll-to-top button that appears exactly when needed. Style it to match your brand.', 'neve' ),
+			),
+			'performance_features'   => array(
+				'nicename'    => __( 'Performance', 'neve' ),
+				'description' => __( 'Optimize core vitals, enable lazy loading, and minify resources for lightning-fast load times.', 'neve' ),
+			),
+			'block_editor_booster'   => array(
+				'nicename'    => __( 'Block Editor Booster', 'neve' ),
+				'description' => __( 'Advanced Gutenberg blocks designed specifically for Neve. Build faster with pre-styled patterns.', 'neve' ),
+			),
+			'white_label'            => array(
+				'nicename'    => __( 'White Label', 'neve' ),
+				'description' => __( 'Rebrand Neve as your own. Change theme name, author, and links to match your agency identity.', 'neve' ),
+			),
+			'custom_layouts'         => array(
+				'nicename'    => __( 'Custom Layouts', 'neve' ),
+				'description' => __( 'Create conditional headers, footers, and content blocks. Perfect for custom landing pages and marketing campaigns.', 'neve' ),
+			),
+			'elementor_booster'      => array(
+				'nicename'    => __( 'Elementor Booster', 'neve' ),
 				'description' => __( 'Leverage the true flexibility of Elementor with powerful addons and templates that you can import with just one click.', 'neve' ),
-				'inLite'      => false,
-				'docsLink'    => $this->get_doc_link( 'Elementor Booster', 'https://docs.themeisle.com/article/1063-elementor-booster-module-documentation' ),
-			],
-			[
-				'title'       => __( 'WooCommerce Booster', 'neve' ),
-				'description' => __( 'Empower your online store with awesome new features, specially designed for a smooth WooCommerce integration.', 'neve' ) . ' ' . __( 'Wishlist, quick view, video products, advanced reviews, multiple dedicated layouts and many more.', 'neve' ),
-				'inLite'      => false,
-				'docsLink'    => $this->get_doc_link( 'WooCommerce Booster', 'https://docs.themeisle.com/article/1058-woocommerce-booster-documentation' ),
+				'condition'   => defined( 'ELEMENTOR_VERSION' ),
+			),
+			'lifterlms_booster'      => array(
+				'nicename'    => __( 'LifterLMS Booster', 'neve' ),
+				'description' => __( 'Enhanced course layouts, student dashboards, and learning features for your online education platform.', 'neve' ),
+				'condition'   => class_exists( 'LifterLMS' ),
+			),
+			'typekit_fonts'          => array(
+				'nicename'    => __( 'Typekit Fonts', 'neve' ),
+				'description' => __( 'Access premium Adobe fonts directly in your theme. Add professional typography to any element.', 'neve' ),
+			),
+			'custom_sidebars'        => array(
+				'nicename'    => __( 'Custom Sidebars', 'neve' ),
+				'description' => __( 'Create unique sidebar layouts for different sections. Show relevant content based on user context.', 'neve' ),
+			),
+			'access_restriction'     => array(
+				'nicename'    => __( 'Content restriction', 'neve' ),
+				'description' => __( 'Create members-only content areas. Control access by user roles, logged-in status, or custom rules.', 'neve' ),
+			),
+		);
+
+		return array_filter(
+			$plugins,
+			function ( $module ) {
+				return ! isset( $module['condition'] ) || $module['condition'] === true;
+			}
+		);
+	}
+
+	/**
+	 * Get the recommended plugins.
+	 *
+	 * @return array
+	 */
+	private function get_recommended_plugins() {
+		$plugins = [
+			'otter-blocks'                  => [
+				'title'       => __( 'Otter Blocks', 'neve' ),
+				'description' => __( 'Advanced blocks for modern WordPress editing', 'neve' ),
 			],
-			[
-				'title'       => __( 'LifterLMS Booster', 'neve' ),
-				'description' => __( 'Make your LifterLMS pages look stunning with our PRO design options. Specially created to help you set up your online courses with minimum customizations.', 'neve' ),
-				'inLite'      => false,
-				'docsLink'    => $this->get_doc_link( 'LifterLMS Booster', 'https://docs.themeisle.com/article/1084-lifterlms-booster-documentation' ),
+			'templates-patterns-collection' => [
+				'title'       => __( 'Starter Sites', 'neve' ),
+				'description' => __( 'Import ready-made websites with a single click', 'neve' ),
 			],
-			[
-				'title'       => __( 'Typekit(Adobe) Fonts', 'neve' ),
-				'description' => __( "The module allows for an easy way of enabling new awesome Adobe (previous Typekit) Fonts in Neve's Typography options.", 'neve' ),
-				'inLite'      => false,
-				'docsLink'    => $this->get_doc_link( 'Typekit(Adobe) Fonts', 'https://docs.themeisle.com/article/1085-typekit-fonts-documentation' ),
+			'wp-full-stripe-free'           => [
+				'title'       => __( 'WP Full Pay', 'neve' ),
+				'description' => __( 'Simple ecommerce solution with Stripe integration', 'neve' ),
 			],
-			[
-				'title'       => __( 'White Label', 'neve' ),
-				'description' => __( "For any developer or agency out there building websites for their own clients, we've made it easy to present the theme as your own.", 'neve' ),
-				'inLite'      => false,
-				'docsLink'    => $this->get_doc_link( 'White Label', 'https://docs.themeisle.com/article/1061-white-label-module-documentation' ),
+			'optimole-wp'                   => [
+				'title'       => __( 'Optimole', 'neve' ),
+				'description' => __( 'Smart image optimization and CDN', 'neve' ),
 			],
-			[
-				'title'       => __( 'Scroll To Top', 'neve' ),
-				'description' => __( 'Simple but effective module to help you navigate back to the top of the really long pages.', 'neve' ),
-				'inLite'      => false,
-				'docsLink'    => $this->get_doc_link( 'Scroll To Top', 'https://docs.themeisle.com/article/1060-scroll-to-top-module-documentation' ),
+			'wp-cloudflare-page-cache'      => [
+				'title'       => __( 'Super Page Cache', 'neve' ),
+				'description' => __( 'Lightning-fast caching made simple', 'neve' ),
 			],
-			[
-				'title'          => __( 'See all PRO features', 'neve' ),
-				'presentational' => true,
+			'feedzy-rss-feeds'              => [
+				'title'       => __( 'Feedzy', 'neve' ),
+				'description' => __( 'RSS feeds aggregator and content curator', 'neve' ),
 			],
 		];
-	}
-
-	/**
-	 * Get the useful plugin data.
-	 *
-	 * @return array
-	 */
-	private function get_useful_plugins() {
-		$available    = get_transient( $this->plugins_cache_key );
-		$hash         = get_transient( $this->plugins_cache_hash_key );
-		$current_hash = substr( md5( wp_json_encode( $this->useful_plugins ) ), 0, 5 );
-
-		if ( $available !== false && $hash === $current_hash ) {
-			$available = json_decode( $available, true );
-			foreach ( $available as $slug => $args ) {
-				$available[ $slug ]['cta']        = ( $args['cta'] === 'external' ) ? 'external' : $this->plugin_helper->get_plugin_state( $slug );
-				$available[ $slug ]['path']       = $this->plugin_helper->get_plugin_path( $slug );
-				$available[ $slug ]['activate']   = $this->plugin_helper->get_plugin_action_link( $slug );
-				$available[ $slug ]['deactivate'] = $this->plugin_helper->get_plugin_action_link( $slug, 'deactivate' );
-				$available[ $slug ]['network']    = $this->plugin_helper->get_is_network_wide( $slug );
-				$available[ $slug ]['version']    = ! empty( $available[ $slug ]['version'] ) ? $this->plugin_helper->get_plugin_version( $slug, $available[ $slug ]['version'] ) : '';
-			}
 
-			return $available;
+		if ( is_php_version_compatible( '8.1' ) ) {
+			$plugins['hyve-lite'] = [
+				'title'       => __( 'Hyve', 'neve' ),
+				'description' => __( 'AI chatbot for your website', 'neve' ),
+			];
 		}
 
-		$data = [];
-		foreach ( $this->useful_plugins as $slug ) {
 
-			if ( array_key_exists( $slug, $this->get_external_plugins_data() ) ) {
-				$data[ $slug ] = $this->get_external_plugins_data()[ $slug ];
-				continue;
-			}
+		foreach ( $plugins as $slug => $args ) {
 
-			$current_plugin = $this->plugin_helper->get_plugin_details( $slug );
-			if ( $current_plugin instanceof \WP_Error ) {
-				continue;
-			}
-			$data[ $slug ] = [
-				'banner'      => $current_plugin->banners['low'],
-				'name'        => html_entity_decode( $current_plugin->name ),
-				'description' => html_entity_decode( $current_plugin->short_description ),
-				'version'     => $current_plugin->version,
-				'author'      => html_entity_decode( wp_strip_all_tags( $current_plugin->author ) ),
-				'cta'         => $this->plugin_helper->get_plugin_state( $slug ),
-				'path'        => $this->plugin_helper->get_plugin_path( $slug ),
-				'activate'    => $this->plugin_helper->get_plugin_action_link( $slug ),
-				'deactivate'  => $this->plugin_helper->get_plugin_action_link( $slug, 'deactivate' ),
-				'network'     => $this->plugin_helper->get_is_network_wide( $slug ),
-			];
-		}
+			$action = $this->plugin_helper->get_plugin_state( $slug );
 
-		set_transient( $this->plugins_cache_hash_key, $current_hash );
-		set_transient( $this->plugins_cache_key, wp_json_encode( $data ) );
+			$plugins[ $slug ] = array_merge(
+				[
+					'cta'        => $action,
+					'path'       => $this->plugin_helper->get_plugin_path( $slug ),
+					'activate'   => $this->plugin_helper->get_plugin_action_link( $slug ),
+					'deactivate' => $this->plugin_helper->get_plugin_action_link( $slug, 'deactivate' ),
+					'network'    => $this->plugin_helper->get_is_network_wide( $slug ),
+					'version'    => $this->plugin_helper->get_plugin_version( $slug, '0.0.0' ),
+				],
+				$args
+			);
+		}
 
-		return $data;
+		return $plugins;
 	}
 
 	/**
diff --git a/inc/admin/dashboard/plugin_helper.php b/inc/admin/dashboard/plugin_helper.php
index 6a142415e8..58d50abc18 100644
--- a/inc/admin/dashboard/plugin_helper.php
+++ b/inc/admin/dashboard/plugin_helper.php
@@ -54,6 +54,8 @@ public function get_plugin_path( $slug ) {
 				return $slug . '/feedzy-rss-feed.php';
 			case 'wp-cloudflare-page-cache':
 				return $slug . '/wp-cloudflare-super-page-cache.php';
+			case 'wp-full-stripe-free':
+				return $slug . '/wp-full-stripe.php';
 			default:
 				return $slug . '/' . $slug . '.php';
 		}
diff --git a/package.json b/package.json
index 029eadae98..7515aa89e6 100644
--- a/package.json
+++ b/package.json
@@ -50,12 +50,14 @@
 		"pre-commit": "npx lint-staged"
 	},
 	"dependencies": {
+		"@headlessui/react": "^2.2.0",
 		"@neve-wp/components": "file:./assets/apps/components",
 		"array-move": "^3.0.1",
 		"classnames": "^2.2.6",
 		"eslint-plugin-prettier": "^3.3.1",
 		"fuse.js": "^6.4.1",
-		"prop-types": "^15.7.2",
+		"lucide-react": "^0.468.0",
+		"prop-types": "^15.8.1",
 		"react-sortablejs": "^6.0.0",
 		"react-visibility-sensor": "^5.1.1",
 		"sortablejs": "^1.13.0",
@@ -133,7 +135,6 @@
 		"lint-staged": "^10.5.4",
 		"load-project-config": "~0.2.1",
 		"lodash": "^4.17.21",
-		"node-sass": "8.0.0",
 		"npm-run-all": "^4.1.5",
 		"prettier": "^2.2.1",
 		"react": "^17.0.2",
@@ -143,12 +144,14 @@
 		"rollup-plugin-babel": "^4.4.0",
 		"rollup-plugin-terser": "^5.3.0",
 		"rollup-plugin-uglify": "^6.0.4",
+		"sass": "^1.83.4",
 		"sass-loader": "^10.1.1",
 		"semantic-release": "^17.1.1",
 		"semantic-release-slack-bot": "^3.5.3",
 		"simple-git-hooks": "^2.2.0",
 		"size-limit": "4.6.0",
 		"style-loader": "^2.0.0",
+		"tailwindcss": "^3.4.16",
 		"ts-loader": "^8.0.18",
 		"typescript": "^4.1.5",
 		"url-slug": "^2.3.2",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000000..b2cd363091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+	plugins: [require('tailwindcss')],
+};
diff --git a/yarn.lock b/yarn.lock
index 337b3b7e7a..88802daa9d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
 "@babel/code-frame@7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
@@ -2174,10 +2179,41 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@gar/promisify@^1.0.1", "@gar/promisify@^1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
-  integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
+"@floating-ui/core@^1.6.0":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
+  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/dom@^1.0.0":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556"
+  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/react-dom@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
+  integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
+"@floating-ui/react@^0.26.16":
+  version "0.26.28"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.28.tgz#93f44ebaeb02409312e9df9507e83aab4a8c0dc7"
+  integrity sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==
+  dependencies:
+    "@floating-ui/react-dom" "^2.1.2"
+    "@floating-ui/utils" "^0.2.8"
+    tabbable "^6.0.0"
+
+"@floating-ui/utils@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
+  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
 
 "@hapi/hoek@^9.0.0":
   version "9.2.1"
@@ -2191,6 +2227,16 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
+"@headlessui/react@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-2.2.0.tgz#a8e32f0899862849a1ce1615fa280e7891431ab7"
+  integrity sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==
+  dependencies:
+    "@floating-ui/react" "^0.26.16"
+    "@react-aria/focus" "^3.17.1"
+    "@react-aria/interactions" "^3.21.3"
+    "@tanstack/react-virtual" "^3.8.1"
+
 "@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"
@@ -2224,6 +2270,18 @@
   resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
   integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
 
+"@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/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -2411,6 +2469,38 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142"
+  integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  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.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/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.24":
+  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"
+
 "@mdx-js/loader@^1.6.19":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4"
@@ -2492,22 +2582,6 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@npmcli/fs@^1.0.0":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-1.1.1.tgz#72f719fe935e687c56a4faecf3c03d06ba593257"
-  integrity sha512-8KG5RD0GVP4ydEzRn/I4BNDuxDtqVbOdm8675T49OIG/NGhaK0pjPX7ZcDlvKYbA+ulvVK3ztfcF4uBdOxuJbQ==
-  dependencies:
-    "@gar/promisify" "^1.0.1"
-    semver "^7.3.5"
-
-"@npmcli/fs@^2.1.0":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@npmcli/fs/-/fs-2.1.2.tgz#a9e2541a4a2fec2e69c29b35e6060973da79b865"
-  integrity sha512-yOJKRvohFOaLqipNtwYB9WugyZKhC/DZC4VYPmpaCzDBrA8YpK3qHZ8/HGscMnE4GqbkLNuVcCnxkeQEdGt6LQ==
-  dependencies:
-    "@gar/promisify" "^1.1.3"
-    semver "^7.3.5"
-
 "@npmcli/move-file@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.1.2.tgz#1a82c3e372f7cae9253eb66d72543d6b8685c674"
@@ -2516,14 +2590,6 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
-"@npmcli/move-file@^2.0.0":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-2.0.1.tgz#26f6bdc379d87f75e55739bab89db525b06100e4"
-  integrity sha512-mJd2Z5TjYWq/ttPLLGqArdtnC74J6bOzg4rMDnN+p1xTacZ2yPRCk2y0oSWQtygLR9YVQXgOcONrwtnk3JupxQ==
-  dependencies:
-    mkdirp "^1.0.4"
-    rimraf "^3.0.2"
-
 "@octokit/auth-token@^2.4.4":
   version "2.4.5"
   resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.4.5.tgz#568ccfb8cb46f36441fac094ce34f7a875b197f3"
@@ -2627,6 +2693,100 @@
   dependencies:
     "@octokit/openapi-types" "^5.3.2"
 
+"@parcel/watcher-android-arm64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz#507f836d7e2042f798c7d07ad19c3546f9848ac1"
+  integrity sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==
+
+"@parcel/watcher-darwin-arm64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz#3d26dce38de6590ef79c47ec2c55793c06ad4f67"
+  integrity sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==
+
+"@parcel/watcher-darwin-x64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz#99f3af3869069ccf774e4ddfccf7e64fd2311ef8"
+  integrity sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==
+
+"@parcel/watcher-freebsd-x64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz#14d6857741a9f51dfe51d5b08b7c8afdbc73ad9b"
+  integrity sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==
+
+"@parcel/watcher-linux-arm-glibc@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz#43c3246d6892381db473bb4f663229ad20b609a1"
+  integrity sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==
+
+"@parcel/watcher-linux-arm-musl@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz#663750f7090bb6278d2210de643eb8a3f780d08e"
+  integrity sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==
+
+"@parcel/watcher-linux-arm64-glibc@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz#ba60e1f56977f7e47cd7e31ad65d15fdcbd07e30"
+  integrity sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==
+
+"@parcel/watcher-linux-arm64-musl@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz#f7fbcdff2f04c526f96eac01f97419a6a99855d2"
+  integrity sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==
+
+"@parcel/watcher-linux-x64-glibc@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz#4d2ea0f633eb1917d83d483392ce6181b6a92e4e"
+  integrity sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==
+
+"@parcel/watcher-linux-x64-musl@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz#277b346b05db54f55657301dd77bdf99d63606ee"
+  integrity sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==
+
+"@parcel/watcher-win32-arm64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz#7e9e02a26784d47503de1d10e8eab6cceb524243"
+  integrity sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==
+
+"@parcel/watcher-win32-ia32@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz#2d0f94fa59a873cdc584bf7f6b1dc628ddf976e6"
+  integrity sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==
+
+"@parcel/watcher-win32-x64@2.5.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz#ae52693259664ba6f2228fa61d7ee44b64ea0947"
+  integrity sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==
+
+"@parcel/watcher@^2.4.1":
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.5.1.tgz#342507a9cfaaf172479a882309def1e991fb1200"
+  integrity sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==
+  dependencies:
+    detect-libc "^1.0.3"
+    is-glob "^4.0.3"
+    micromatch "^4.0.5"
+    node-addon-api "^7.0.0"
+  optionalDependencies:
+    "@parcel/watcher-android-arm64" "2.5.1"
+    "@parcel/watcher-darwin-arm64" "2.5.1"
+    "@parcel/watcher-darwin-x64" "2.5.1"
+    "@parcel/watcher-freebsd-x64" "2.5.1"
+    "@parcel/watcher-linux-arm-glibc" "2.5.1"
+    "@parcel/watcher-linux-arm-musl" "2.5.1"
+    "@parcel/watcher-linux-arm64-glibc" "2.5.1"
+    "@parcel/watcher-linux-arm64-musl" "2.5.1"
+    "@parcel/watcher-linux-x64-glibc" "2.5.1"
+    "@parcel/watcher-linux-x64-musl" "2.5.1"
+    "@parcel/watcher-win32-arm64" "2.5.1"
+    "@parcel/watcher-win32-ia32" "2.5.1"
+    "@parcel/watcher-win32-x64" "2.5.1"
+
+"@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==
+
 "@playwright/test@^1.32.3":
   version "1.32.3"
   resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.32.3.tgz#75be8346d4ef289896835e1d2a86fdbe3d9be92a"
@@ -2669,6 +2829,45 @@
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
 
+"@react-aria/focus@^3.17.1":
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.19.0.tgz#82b9a5b83f023b943a7970df3d059f49d61df05d"
+  integrity sha512-hPF9EXoUQeQl1Y21/rbV2H4FdUR2v+4/I0/vB+8U3bT1CJ+1AFj1hc/rqx2DqEwDlEwOHN+E4+mRahQmlybq0A==
+  dependencies:
+    "@react-aria/interactions" "^3.22.5"
+    "@react-aria/utils" "^3.26.0"
+    "@react-types/shared" "^3.26.0"
+    "@swc/helpers" "^0.5.0"
+    clsx "^2.0.0"
+
+"@react-aria/interactions@^3.21.3", "@react-aria/interactions@^3.22.5":
+  version "3.22.5"
+  resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.22.5.tgz#9cd8c93b8b6988f1d315d3efb450119d1432bbb8"
+  integrity sha512-kMwiAD9E0TQp+XNnOs13yVJghiy8ET8L0cbkeuTgNI96sOAp/63EJ1FSrDf17iD8sdjt41LafwX/dKXW9nCcLQ==
+  dependencies:
+    "@react-aria/ssr" "^3.9.7"
+    "@react-aria/utils" "^3.26.0"
+    "@react-types/shared" "^3.26.0"
+    "@swc/helpers" "^0.5.0"
+
+"@react-aria/ssr@^3.9.7":
+  version "3.9.7"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.7.tgz#d89d129f7bbc5148657e6c952ac31c9353183770"
+  integrity sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
+"@react-aria/utils@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.26.0.tgz#833cbfa33e75d15835b757791b3f754432d2f948"
+  integrity sha512-LkZouGSjjQ0rEqo4XJosS4L3YC/zzQkfRM3KoqK6fUOmUJ9t0jQ09WjiF+uOoG9u+p30AVg3TrZRUWmoTS+koQ==
+  dependencies:
+    "@react-aria/ssr" "^3.9.7"
+    "@react-stately/utils" "^3.10.5"
+    "@react-types/shared" "^3.26.0"
+    "@swc/helpers" "^0.5.0"
+    clsx "^2.0.0"
+
 "@react-spring/animated@~9.3.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.3.0.tgz#294f7696e450c4ae3abd2b59a6dd08bf70b53d3f"
@@ -2714,6 +2913,18 @@
     "@react-spring/shared" "~9.3.0"
     "@react-spring/types" "~9.3.0"
 
+"@react-stately/utils@^3.10.5":
+  version "3.10.5"
+  resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.10.5.tgz#47bb91cd5afd1bafe39353614e5e281b818ebccc"
+  integrity sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
+"@react-types/shared@^3.26.0":
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.26.0.tgz#21a8b579f0097ee78de18e3e580421ced89e4c8c"
+  integrity sha512-6FuPqvhmjjlpEDLTiYx29IJCbCNWPlsyO+ZUmCUXzhUv2ttShOXfw8CmeHWHftT/b2KweAWuzqSlfeXPR76jpw==
+
 "@rollup/plugin-commonjs@^11.1.0":
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-11.1.0.tgz#60636c7a722f54b41e419e1709df05c7234557ef"
@@ -3804,6 +4015,13 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
+"@swc/helpers@^0.5.0":
+  version "0.5.15"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7"
+  integrity sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==
+  dependencies:
+    tslib "^2.8.0"
+
 "@tannin/compile@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@tannin/compile/-/compile-1.1.0.tgz#1e4d1c5364cbfeffa1c20352c053e19ef20ffe93"
@@ -3829,16 +4047,23 @@
   resolved "https://registry.yarnpkg.com/@tannin/postfix/-/postfix-1.1.0.tgz#6071f4204ae26c2e885cf3a3f1203a9f71e3f291"
   integrity sha512-oocsqY7g0cR+Gur5jRQLSrX2OtpMLMse1I10JQBm8CdGMrDkh1Mg2gjsiquMHRtBs4Qwu5wgEp5GgIYHk4SNPw==
 
+"@tanstack/react-virtual@^3.8.1":
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.11.2.tgz#d6b9bd999c181f0a2edce270c87a2febead04322"
+  integrity sha512-OuFzMXPF4+xZgx8UzJha0AieuMihhhaWG0tCqpp6tDzlFwOmNBPYMuLOtMJ1Tr4pXLHmgjcWhG6RlknY2oNTdQ==
+  dependencies:
+    "@tanstack/virtual-core" "3.11.2"
+
+"@tanstack/virtual-core@3.11.2":
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.11.2.tgz#00409e743ac4eea9afe5b7708594d5fcebb00212"
+  integrity sha512-vTtpNt7mKCiZ1pwU9hfKPhpdVO2sVzFQsxoVBGtOSHxlrRRzYr8iQ2TlwbAcRYCcEiZ9ECAM8kBzH0v2+VzfKw==
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
-"@tootallnate/once@2":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
-  integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
-
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
@@ -5735,7 +5960,7 @@ agent-base@4, agent-base@^4.3.0:
   dependencies:
     es6-promisify "^5.0.0"
 
-agent-base@6, agent-base@^6.0.2:
+agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
   integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
@@ -5756,13 +5981,6 @@ agentkeepalive@^3.4.1:
   dependencies:
     humanize-ms "^1.2.1"
 
-agentkeepalive@^4.1.3, agentkeepalive@^4.2.1:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-4.5.0.tgz#2673ad1389b3c418c5a20c5d7364f93ca04be923"
-  integrity sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==
-  dependencies:
-    humanize-ms "^1.2.1"
-
 aggregate-error@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
@@ -5910,6 +6128,11 @@ ansi-regex@^5.0.0, ansi-regex@^5.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
+ansi-regex@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.1.0.tgz#95ec409c69619d6cb1b8b34f14b660ef28ebd654"
+  integrity sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -5929,6 +6152,11 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
 ansi-to-html@^0.6.11:
   version "0.6.14"
   resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.6.14.tgz#65fe6d08bba5dd9db33f44a20aec331e0010dad8"
@@ -5946,6 +6174,11 @@ ansistyles@~0.1.3:
   resolved "https://registry.yarnpkg.com/ansistyles/-/ansistyles-0.1.3.tgz#5de60415bda071bb37127854c864f41b23254539"
   integrity sha1-XeYEFb2gcbs3EnhUyGT0GyMlRTk=
 
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
@@ -5980,7 +6213,7 @@ aproba@^1.0.3, aproba@^1.1.1, aproba@^1.1.2:
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
   integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
 
-"aproba@^1.0.3 || ^2.0.0", "aproba@^1.1.2 || 2", aproba@^2.0.0:
+"aproba@^1.1.2 || 2", aproba@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
   integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==
@@ -5990,14 +6223,6 @@ archy@~1.0.0:
   resolved "https://registry.yarnpkg.com/archy/-/archy-1.0.0.tgz#f9c8c13757cc1dd7bc379ac77b2c62a5c2868c40"
   integrity sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=
 
-are-we-there-yet@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-3.0.1.tgz#679df222b278c64f2cdba1175cdc00b0d96164bd"
-  integrity sha512-QZW4EDmGwlYur0Yyf/b2uGucHQMa8aFUP7eu9ddR73vvhFyt4V0Vl3QHPcTNJ8l6qYOBdxgXdnBXQrHilfRQBg==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^3.6.0"
-
 are-we-there-yet@~1.1.2:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
@@ -6006,6 +6231,11 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
 argparse@^1.0.2, argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -6245,11 +6475,6 @@ async-each@^1.0.1:
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
   integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
 
-async-foreach@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
-  integrity sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=
-
 async-limiter@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
@@ -6981,6 +7206,13 @@ braces@^3.0.1, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
 brcast@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/brcast/-/brcast-2.0.2.tgz#2db16de44140e418dc37fab10beec0369e78dcef"
@@ -7212,54 +7444,6 @@ cacache@^15.0.5:
     tar "^6.0.2"
     unique-filename "^1.1.1"
 
-cacache@^15.2.0:
-  version "15.3.0"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.3.0.tgz#dc85380fb2f556fe3dda4c719bfa0ec875a7f1eb"
-  integrity sha512-VVdYzXEn+cnbXpFgWs5hTT7OScegHVmLhJIR8Ufqk3iFD6A6j5iSX1KuBTfNEv4tdJWE2PzA6IVFtcLC7fN9wQ==
-  dependencies:
-    "@npmcli/fs" "^1.0.0"
-    "@npmcli/move-file" "^1.0.1"
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    glob "^7.1.4"
-    infer-owner "^1.0.4"
-    lru-cache "^6.0.0"
-    minipass "^3.1.1"
-    minipass-collect "^1.0.2"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.2"
-    mkdirp "^1.0.3"
-    p-map "^4.0.0"
-    promise-inflight "^1.0.1"
-    rimraf "^3.0.2"
-    ssri "^8.0.1"
-    tar "^6.0.2"
-    unique-filename "^1.1.1"
-
-cacache@^16.1.0:
-  version "16.1.3"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-16.1.3.tgz#a02b9f34ecfaf9a78c9f4bc16fceb94d5d67a38e"
-  integrity sha512-/+Emcj9DAXxX4cwlLmRI9c166RuL3w30zp4R7Joiv2cQTtTtA+jeuCAjH3ZlGnYS3tKENSrKhAzVVP9GVyzeYQ==
-  dependencies:
-    "@npmcli/fs" "^2.1.0"
-    "@npmcli/move-file" "^2.0.0"
-    chownr "^2.0.0"
-    fs-minipass "^2.1.0"
-    glob "^8.0.1"
-    infer-owner "^1.0.4"
-    lru-cache "^7.7.1"
-    minipass "^3.1.6"
-    minipass-collect "^1.0.2"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.4"
-    mkdirp "^1.0.4"
-    p-map "^4.0.0"
-    promise-inflight "^1.0.1"
-    rimraf "^3.0.2"
-    ssri "^9.0.0"
-    tar "^6.1.11"
-    unique-filename "^2.0.0"
-
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -7325,7 +7509,7 @@ camel-case@^4.1.1:
     pascal-case "^3.1.2"
     tslib "^2.0.3"
 
-camelcase-css@2.0.1:
+camelcase-css@2.0.1, camelcase-css@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
@@ -7432,7 +7616,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
+chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -7563,6 +7747,28 @@ chokidar@^3.4.1:
   optionalDependencies:
     fsevents "~2.3.1"
 
+chokidar@^3.6.0:
+  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"
+
+chokidar@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.3.tgz#7be37a4c03c9aee1ecfe862a4a23b2c70c205d30"
+  integrity sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==
+  dependencies:
+    readdirp "^4.0.1"
+
 chownr@^1.1.1, chownr@^1.1.2, chownr@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -7765,15 +7971,6 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
-cliui@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
-  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.1"
-    wrap-ansi "^7.0.0"
-
 clone-deep@^0.2.4:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.2.4.tgz#4e73dd09e9fb971cc38670c5dced9c1896481cc6"
@@ -7806,6 +8003,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+clsx@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 cmd-shim@^3.0.0, cmd-shim@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-3.0.3.tgz#2c35238d3df37d98ecdd7d5f6b8dc6b21cadc7cb"
@@ -7888,11 +8090,6 @@ color-string@^1.6.0:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color-support@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
-  integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
-
 color@^3.0.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
@@ -7961,7 +8158,7 @@ commander@^3.0.2:
   resolved "https://registry.yarnpkg.com/commander/-/commander-3.0.2.tgz#6837c3fb677ad9933d1cfba42dd14d5117d6b39e"
   integrity sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==
 
-commander@^4.1.1:
+commander@^4.0.0, 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==
@@ -8856,13 +9053,6 @@ debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.3.3:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
-  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
-  dependencies:
-    ms "2.1.2"
-
 debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@@ -9044,6 +9234,11 @@ detect-indent@~5.0.0:
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
   integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=
 
+detect-libc@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+  integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==
+
 detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
@@ -9096,6 +9291,11 @@ did-you-mean@^0.0.1:
     levenshtein "*"
     underscore "*"
 
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
 diff-sequences@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
@@ -9139,6 +9339,11 @@ discontinuous-range@1.0.0:
   resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
   integrity sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 doctrine@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
@@ -9405,6 +9610,11 @@ eachr@^3.2.0:
     editions "^2.2.0"
     typechecker "^4.9.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==
+
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -9493,7 +9703,7 @@ 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.0.0:
+emoji-regex@^9.0.0, 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==
@@ -9517,7 +9727,7 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
-encoding@^0.1.11, encoding@^0.1.12, encoding@^0.1.13:
+encoding@^0.1.11, encoding@^0.1.12:
   version "0.1.13"
   resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
   integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
@@ -9652,11 +9862,6 @@ err-code@^1.0.0:
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
   integrity sha1-BuARbTAo9q70gGhJ6w6mp0iuaWA=
 
-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==
-
 errlop@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/errlop/-/errlop-2.2.0.tgz#1ff383f8f917ae328bebb802d6ca69666a42d21b"
@@ -10521,6 +10726,17 @@ fast-glob@^3.2.5:
     micromatch "^4.0.2"
     picomatch "^2.2.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==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-json-parse@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d"
@@ -10685,6 +10901,13 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 filter-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
@@ -10885,6 +11108,14 @@ for-own@^1.0.0:
   dependencies:
     for-in "^1.0.1"
 
+foreground-child@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.0.tgz#0ac8644c06e431439f8561db8ecf29a7b5519c77"
+  integrity sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@@ -11022,7 +11253,7 @@ fs-minipass@^1.2.5:
   dependencies:
     minipass "^2.6.0"
 
-fs-minipass@^2.0.0, fs-minipass@^2.1.0:
+fs-minipass@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
   integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
@@ -11071,6 +11302,11 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+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==
+
 function.prototype.name@^1.1.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.4.tgz#e4ea839b9d3672ae99d0efd9f38d9191c5eaac83"
@@ -11111,20 +11347,6 @@ fuse.js@^6.4.1:
   resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.4.6.tgz#62f216c110e5aa22486aff20be7896d19a059b79"
   integrity sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw==
 
-gauge@^4.0.3:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-4.0.4.tgz#52ff0652f2bbf607a989793d53b751bef2328dce"
-  integrity sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==
-  dependencies:
-    aproba "^1.0.3 || ^2.0.0"
-    color-support "^1.1.3"
-    console-control-strings "^1.1.0"
-    has-unicode "^2.0.1"
-    signal-exit "^3.0.7"
-    string-width "^4.2.3"
-    strip-ansi "^6.0.1"
-    wide-align "^1.1.5"
-
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -11139,7 +11361,7 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
-gaze@^1.0.0, gaze@^1.1.0:
+gaze@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.3.tgz#c441733e13b927ac8c0ff0b4c3b033f28812924a"
   integrity sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==
@@ -11202,11 +11424,6 @@ get-package-type@^0.1.0:
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
   integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
-get-stdin@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
-  integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
-
 get-stdin@^8.0.0, get-stdin@~8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53"
@@ -11335,6 +11552,13 @@ glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@^5.1.2, glob-parent@~5.1.0,
   dependencies:
     is-glob "^4.0.1"
 
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
 glob-promise@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/glob-promise/-/glob-promise-3.4.0.tgz#b6b8f084504216f702dc2ce8c9bc9ac8866fdb20"
@@ -11352,6 +11576,18 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
+glob@^10.3.10:
+  version "10.4.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
 glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.4, glob@~7.1.1, glob@~7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -11376,17 +11612,6 @@ glob@^7.1.3, glob@^7.1.6, glob@^7.1.7:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^8.0.1:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e"
-  integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^5.0.1"
-    once "^1.3.0"
-
 glob@~5.0.0, glob@~5.0.15:
   version "5.0.15"
   resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
@@ -11617,11 +11842,6 @@ graceful-fs@^4.1.2:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
   integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
 
-graceful-fs@^4.2.6:
-  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==
-
 gradient-parser@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/gradient-parser/-/gradient-parser-0.1.5.tgz#0c7e2179559e5ce7d8d71f4423af937100b2248c"
@@ -11867,7 +12087,7 @@ has-tostringtag@^1.0.0:
   dependencies:
     has-symbols "^1.0.2"
 
-has-unicode@^2.0.0, has-unicode@^2.0.1, has-unicode@~2.0.1:
+has-unicode@^2.0.0, has-unicode@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
   integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
@@ -11927,6 +12147,13 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
 hast-to-hyperscript@^9.0.0:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz#9b67fd188e4c81e8ad66f803855334173920218d"
@@ -12175,11 +12402,6 @@ http-cache-semantics@^3.8.1:
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz#39b0e16add9b605bf0a9ef3d9daaf4843b4cacd2"
   integrity sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==
 
-http-cache-semantics@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
-  integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==
-
 http-errors@1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
@@ -12215,7 +12437,7 @@ http-proxy-agent@^2.1.0:
     agent-base "4"
     debug "3.1.0"
 
-http-proxy-agent@^4.0.0, http-proxy-agent@^4.0.1:
+http-proxy-agent@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
   integrity sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==
@@ -12224,15 +12446,6 @@ http-proxy-agent@^4.0.0, http-proxy-agent@^4.0.1:
     agent-base "6"
     debug "4"
 
-http-proxy-agent@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43"
-  integrity sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==
-  dependencies:
-    "@tootallnate/once" "2"
-    agent-base "6"
-    debug "4"
-
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -12343,6 +12556,11 @@ immer@8.0.1:
   resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656"
   integrity sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==
 
+immutable@^5.0.2:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-5.0.3.tgz#aa037e2313ea7b5d400cd9298fa14e404c933db1"
+  integrity sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -12543,11 +12761,6 @@ ip@1.1.5, ip@^1.1.5:
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
   integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
 
-ip@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-2.0.0.tgz#4cf4ab182fee2314c75ede1276f8c80b479936da"
-  integrity sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==
-
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -12709,6 +12922,13 @@ is-color-stop@^1.0.0:
     rgb-regex "^1.0.1"
     rgba-regex "^1.0.0"
 
+is-core-module@^2.16.0:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.16.0.tgz#6c01ffdd5e33c49c1d2abfa93334a85cb56bd81c"
+  integrity sha512-urTSINYfAYgcbLb0yDQ6egFm6h3Mo1DcF9EkyXSRjjzdHbsulg01qhwWuXdOoUBuTkbQ80KDboXa0vFJ+BDH+g==
+  dependencies:
+    hasown "^2.0.2"
+
 is-core-module@^2.2.0, is-core-module@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.7.0.tgz#3c0ef7d31b4acfc574f80c58409d568a836848e3"
@@ -12878,11 +13098,6 @@ 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-lambda@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-lambda/-/is-lambda-1.0.1.tgz#3d9877899e6a53efc0160504cde15f82e6f061d5"
-  integrity sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==
-
 is-map@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
@@ -13289,6 +13504,15 @@ iterate-value@^1.0.2:
     es-get-iterator "^1.0.2"
     iterate-iterator "^1.0.1"
 
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
 jake@^10.6.1:
   version "10.8.2"
   resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.2.tgz#ebc9de8558160a66d82d0eadc6a2e58fbc500a7b"
@@ -13739,6 +13963,11 @@ jit-grunt@~0.10.0:
   resolved "https://registry.yarnpkg.com/jit-grunt/-/jit-grunt-0.10.0.tgz#008c3a7fe1e96bd0d84e260ea1fa1783457f79c2"
   integrity sha1-AIw6f+Hpa9DYTiYOofoXg0V/ecI=
 
+jiti@^1.21.6:
+  version "1.21.6"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
+  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
+
 joi@^17.3.0:
   version "17.4.2"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.4.2.tgz#02f4eb5cf88e515e614830239379dcbbe28ce7f7"
@@ -13750,11 +13979,6 @@ joi@^17.3.0:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
-js-base64@^2.4.9:
-  version "2.6.4"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
-  integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
-
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
@@ -14251,6 +14475,11 @@ lilconfig@^2.0.3:
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.3.tgz#68f3005e921dafbd2a2afb48379986aa6d2579fd"
   integrity sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==
 
+lilconfig@^3.0.0, lilconfig@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
+  integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
+
 line-height@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/line-height/-/line-height-0.3.1.tgz#4b1205edde182872a5efa3c8f620b3187a9c54c9"
@@ -14634,6 +14863,11 @@ lowlight@^1.14.0:
     fault "^1.0.0"
     highlight.js "~10.7.0"
 
+lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
 lru-cache@^4.0.1:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -14656,10 +14890,10 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-lru-cache@^7.7.1:
-  version "7.18.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
-  integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
+lucide-react@^0.468.0:
+  version "0.468.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.468.0.tgz#830c1bfd905575ddd23b832baa420c87db166910"
+  integrity sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==
 
 magic-string@^0.25.2:
   version "0.25.7"
@@ -14690,28 +14924,6 @@ make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
-make-fetch-happen@^10.0.4:
-  version "10.2.1"
-  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-10.2.1.tgz#f5e3835c5e9817b617f2770870d9492d28678164"
-  integrity sha512-NgOPbRiaQM10DYXvN3/hhGVI2M5MtITFryzBGxHM5p4wnFxsVCbxkrBrDsk+EZ5OB4jEOT7AjDxtdF+KVEFT7w==
-  dependencies:
-    agentkeepalive "^4.2.1"
-    cacache "^16.1.0"
-    http-cache-semantics "^4.1.0"
-    http-proxy-agent "^5.0.0"
-    https-proxy-agent "^5.0.0"
-    is-lambda "^1.0.1"
-    lru-cache "^7.7.1"
-    minipass "^3.1.6"
-    minipass-collect "^1.0.2"
-    minipass-fetch "^2.0.3"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.4"
-    negotiator "^0.6.3"
-    promise-retry "^2.0.1"
-    socks-proxy-agent "^7.0.0"
-    ssri "^9.0.0"
-
 make-fetch-happen@^5.0.0:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz#aa8387104f2687edca01c8687ee45013d02d19bd"
@@ -14729,28 +14941,6 @@ make-fetch-happen@^5.0.0:
     socks-proxy-agent "^4.0.0"
     ssri "^6.0.0"
 
-make-fetch-happen@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-9.1.0.tgz#53085a09e7971433e6765f7971bf63f4e05cb968"
-  integrity sha512-+zopwDy7DNknmwPQplem5lAZX/eCOzSvSNNcSKm5eVwTkOBzoktEfXsa9L23J/GIRhxRsaxzkPEhrJEpE2F4Gg==
-  dependencies:
-    agentkeepalive "^4.1.3"
-    cacache "^15.2.0"
-    http-cache-semantics "^4.1.0"
-    http-proxy-agent "^4.0.1"
-    https-proxy-agent "^5.0.0"
-    is-lambda "^1.0.1"
-    lru-cache "^6.0.0"
-    minipass "^3.1.3"
-    minipass-collect "^1.0.2"
-    minipass-fetch "^1.3.2"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.4"
-    negotiator "^0.6.2"
-    promise-retry "^2.0.1"
-    socks-proxy-agent "^6.0.0"
-    ssri "^8.0.0"
-
 make-iterator@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/make-iterator/-/make-iterator-1.0.1.tgz#29b33f312aa8f547c4a5e490f56afcec99133ad6"
@@ -15277,6 +15467,14 @@ micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4:
     braces "^3.0.1"
     picomatch "^2.2.3"
 
+micromatch@^4.0.5, micromatch@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
 micromodal@^0.4.6:
   version "0.4.6"
   resolved "https://registry.yarnpkg.com/micromodal/-/micromodal-0.4.6.tgz#0425ad026c47923208cf826de6b58ed0693cb25a"
@@ -15358,10 +15556,10 @@ minimalistic-crypto-utils@^1.0.1:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^5.0.1:
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
-  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
   dependencies:
     brace-expansion "^2.0.1"
 
@@ -15386,28 +15584,6 @@ minipass-collect@^1.0.2:
   dependencies:
     minipass "^3.0.0"
 
-minipass-fetch@^1.3.2:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/minipass-fetch/-/minipass-fetch-1.4.1.tgz#d75e0091daac1b0ffd7e9d41629faff7d0c1f1b6"
-  integrity sha512-CGH1eblLq26Y15+Azk7ey4xh0J/XfJfrCox5LDJiKqI2Q2iwOLOKrlmIaODiSQS8d18jalF6y2K2ePUm0CmShw==
-  dependencies:
-    minipass "^3.1.0"
-    minipass-sized "^1.0.3"
-    minizlib "^2.0.0"
-  optionalDependencies:
-    encoding "^0.1.12"
-
-minipass-fetch@^2.0.3:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/minipass-fetch/-/minipass-fetch-2.1.2.tgz#95560b50c472d81a3bc76f20ede80eaed76d8add"
-  integrity sha512-LT49Zi2/WMROHYoqGgdlQIZh8mLPZmOrN2NdJjMXxYe4nkN6FUyuPuOAOedNJDrx0IRGg9+4guZewtp8hE6TxA==
-  dependencies:
-    minipass "^3.1.6"
-    minipass-sized "^1.0.3"
-    minizlib "^2.1.2"
-  optionalDependencies:
-    encoding "^0.1.13"
-
 minipass-flush@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
@@ -15415,20 +15591,13 @@ minipass-flush@^1.0.5:
   dependencies:
     minipass "^3.0.0"
 
-minipass-pipeline@^1.2.2, minipass-pipeline@^1.2.4:
+minipass-pipeline@^1.2.2:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz#68472f79711c084657c067c5c6ad93cddea8214c"
   integrity sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==
   dependencies:
     minipass "^3.0.0"
 
-minipass-sized@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/minipass-sized/-/minipass-sized-1.0.3.tgz#70ee5a7c5052070afacfbc22977ea79def353b70"
-  integrity sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==
-  dependencies:
-    minipass "^3.0.0"
-
 minipass@^2.3.5, minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
@@ -15444,17 +15613,10 @@ minipass@^3.0.0, minipass@^3.1.1:
   dependencies:
     yallist "^4.0.0"
 
-minipass@^3.1.0, minipass@^3.1.3, minipass@^3.1.6:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.3.6.tgz#7bba384db3a1520d18c9c0e5251c3444e95dd94a"
-  integrity sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==
-  dependencies:
-    yallist "^4.0.0"
-
-minipass@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-5.0.0.tgz#3e9788ffb90b694a5d0ec94479a45b5d8738133d"
-  integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
 minizlib@^1.2.1:
   version "1.3.3"
@@ -15463,7 +15625,7 @@ minizlib@^1.2.1:
   dependencies:
     minipass "^2.9.0"
 
-minizlib@^2.0.0, minizlib@^2.1.1, minizlib@^2.1.2:
+minizlib@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
   integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
@@ -15594,16 +15756,20 @@ mute-stream@0.0.8, mute-stream@~0.0.4:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
 nan@^2.12.1:
   version "2.14.2"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
-nan@^2.17.0:
-  version "2.18.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.18.0.tgz#26a6faae7ffbeb293a39660e88a76b82e30b7554"
-  integrity sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==
-
 nanocolors@^0.1.12:
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.1.12.tgz#8577482c58cbd7b5bb1681db4cf48f11a87fd5f6"
@@ -15614,6 +15780,11 @@ nanoid@^3.1.10, nanoid@^3.1.28, nanoid@^3.1.30:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
   integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
 
+nanoid@^3.3.7:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -15658,11 +15829,6 @@ negotiator@0.6.2:
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
-negotiator@^0.6.2, negotiator@^0.6.3:
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
-  integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
-
 neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1, neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
@@ -15691,6 +15857,11 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-addon-api@^7.0.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-7.1.1.tgz#1aba6693b0f255258a049d621329329322aad558"
+  integrity sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==
+
 node-dir@^0.1.10:
   version "0.1.17"
   resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5"
@@ -15750,22 +15921,6 @@ node-gyp@^5.0.2, node-gyp@^5.1.0:
     tar "^4.4.12"
     which "^1.3.1"
 
-node-gyp@^8.4.1:
-  version "8.4.1"
-  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-8.4.1.tgz#3d49308fc31f768180957d6b5746845fbd429937"
-  integrity sha512-olTJRgUtAb/hOXG0E93wZDs5YiJlgbXxTwQAFHyNlRsXQnYzUaF2aGgujZbw+hR8aF4ZG/rST57bWMWD16jr9w==
-  dependencies:
-    env-paths "^2.2.0"
-    glob "^7.1.4"
-    graceful-fs "^4.2.6"
-    make-fetch-happen "^9.1.0"
-    nopt "^5.0.0"
-    npmlog "^6.0.0"
-    rimraf "^3.0.2"
-    semver "^7.3.5"
-    tar "^6.1.2"
-    which "^2.0.2"
-
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -15827,26 +15982,6 @@ node-releases@^2.0.0:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.0.tgz#67dc74903100a7deb044037b8a2e5f453bb05400"
   integrity sha512-aA87l0flFYMzCHpTM3DERFSYxc6lv/BltdbRTOMZuxZ0cwZCD3mejE5n9vLhSJCN++/eOqr77G1IO5uXxlQYWA==
 
-node-sass@8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-8.0.0.tgz#c80d52148db0ce88610bcf1e1d112027393c13e1"
-  integrity sha512-jPzqCF2/e6JXw6r3VxfIqYc8tKQdkj5Z/BDATYyG6FL6b/LuYBNFGFVhus0mthcWifHm/JzBpKAd+3eXsWeK/A==
-  dependencies:
-    async-foreach "^0.1.3"
-    chalk "^4.1.2"
-    cross-spawn "^7.0.3"
-    gaze "^1.0.0"
-    get-stdin "^4.0.1"
-    glob "^7.0.3"
-    lodash "^4.17.15"
-    make-fetch-happen "^10.0.4"
-    meow "^9.0.0"
-    nan "^2.17.0"
-    node-gyp "^8.4.1"
-    sass-graph "^4.0.1"
-    stdout-stream "^1.4.0"
-    "true-case-path" "^2.2.1"
-
 node-wp-i18n@^1.2.2:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/node-wp-i18n/-/node-wp-i18n-1.2.5.tgz#40d79cea7d78f91bb4addb0208d96c9cb6ead053"
@@ -15868,13 +16003,6 @@ nopt@^4.0.1, nopt@^4.0.3, nopt@~4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
-nopt@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
-  integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
-  dependencies:
-    abbrev "1"
-
 nopt@~3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
@@ -16231,16 +16359,6 @@ npmlog@^4.1.2, npmlog@~4.1.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
-npmlog@^6.0.0:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-6.0.2.tgz#c8166017a42f2dea92d6453168dd865186a70830"
-  integrity sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==
-  dependencies:
-    are-we-there-yet "^3.0.0"
-    console-control-strings "^1.1.0"
-    gauge "^4.0.3"
-    set-blocking "^2.0.0"
-
 nth-check@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@@ -16294,6 +16412,11 @@ object-filter@^1.0.2:
   resolved "https://registry.yarnpkg.com/object-filter/-/object-filter-1.0.2.tgz#af0b797ffebeaf8a52c6637cedbe8816cfec1bc8"
   integrity sha1-rwt5f/6+r4pSxmN87b6IFs/sG8g=
 
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
 object-inspect@^1.11.0, object-inspect@^1.9.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1"
@@ -16675,6 +16798,11 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+package-json-from-dist@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
+  integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
+
 package-json@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/package-json/-/package-json-4.0.1.tgz#8869a0401253661c4c4ca3da6c2121ed555f5eed"
@@ -16894,7 +17022,7 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-parse@^1.0.6:
+path-parse@^1.0.6, path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
@@ -16911,6 +17039,14 @@ path-root@^0.1.1:
   dependencies:
     path-root-regex "^0.1.0"
 
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
 path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
@@ -16975,12 +17111,17 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
+picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
 picomatch@^2.0.4, picomatch@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
-picomatch@^2.0.5:
+picomatch@^2.0.5, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -16995,7 +17136,7 @@ pidtree@^0.3.0:
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
   integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
 
-pify@^2.0.0:
+pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
@@ -17263,6 +17404,22 @@ postcss-html@^0.36.0:
   dependencies:
     htmlparser2 "^3.10.0"
 
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
 postcss-less@^3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad"
@@ -17278,6 +17435,14 @@ postcss-load-config@^2.0.0:
     cosmiconfig "^5.0.0"
     import-cwd "^2.0.0"
 
+postcss-load-config@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
+  dependencies:
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
+
 postcss-loader@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
@@ -17480,6 +17645,13 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
+postcss-nested@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
+  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
+  dependencies:
+    postcss-selector-parser "^6.1.1"
+
 postcss-normalize-charset@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
@@ -17735,6 +17907,14 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-svgo@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.3.tgz#343a2cdbac9505d416243d496f724f38894c941e"
@@ -17780,6 +17960,11 @@ postcss-value-parser@^3.0.0:
   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:
+  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-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
@@ -17820,6 +18005,15 @@ postcss@^8.2.15:
     picocolors "^0.2.1"
     source-map-js "^0.6.2"
 
+postcss@^8.4.47:
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -17934,14 +18128,6 @@ 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.allsettled@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/promise.allsettled/-/promise.allsettled-1.0.4.tgz#65e71f2a604082ed69c548b68603294090ee6803"
@@ -18004,6 +18190,15 @@ prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8,
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 property-information@^5.0.0, property-information@^5.3.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
@@ -18698,6 +18893,13 @@ reactcss@^1.2.0:
   dependencies:
     lodash "^4.0.1"
 
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
 read-cmd-shim@^1.0.1, read-cmd-shim@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz#87e43eba50098ba5a32d0ceb583ab8e43b961c16"
@@ -18858,6 +19060,11 @@ readdirp@^2.2.1:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
+readdirp@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-4.1.1.tgz#bd115327129672dc47f87408f05df9bd9ca3ef55"
+  integrity sha512-h80JrZu/MHUZCyHu5ciuoI0+WxsCxzxJTILn6Fs8rxSnFPh+UVHYfeIxK1nVGugMqkfC4vJcBOYbkfkwYK0+gw==
+
 readdirp@~3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
@@ -19358,6 +19565,15 @@ resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
+resolve@^1.22.8:
+  version "1.22.9"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.9.tgz#6da76e4cdc57181fa4471231400e8851d0a924f3"
+  integrity sha512-QxrmX1DzraFIi9PxdG5VkRfRwIgjwyud+z/iBwfRRrVmHc+P9Q7u2lSSpQ6bjr2gy5lrqIiU9vb6iAeGf2400A==
+  dependencies:
+    is-core-module "^2.16.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 restore-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
@@ -19580,16 +19796,6 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sass-graph@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-4.0.1.tgz#2ff8ca477224d694055bf4093f414cf6cfad1d2e"
-  integrity sha512-5YCfmGBmxoIRYHnKK2AKzrAkCoQ8ozO+iumT8K4tXJXRVCPf+7s1/9KxTSW3Rbvf+7Y7b4FR3mWyLnQr3PHocA==
-  dependencies:
-    glob "^7.0.0"
-    lodash "^4.17.11"
-    scss-tokenizer "^0.4.3"
-    yargs "^17.2.1"
-
 sass-loader@^10.1.1:
   version "10.2.0"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.2.0.tgz#3d64c1590f911013b3fa48a0b22a83d5e1494716"
@@ -19616,6 +19822,17 @@ sass@^1.35.2:
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
 
+sass@^1.83.4:
+  version "1.83.4"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.83.4.tgz#5ccf60f43eb61eeec300b780b8dcb85f16eec6d1"
+  integrity sha512-B1bozCeNQiOgDcLd33e2Cs2U60wZwjUUXzh900ZyQF5qUasvMdDZYbQ566LJu7cqR+sAHlAfO6RMkaID5s6qpA==
+  dependencies:
+    chokidar "^4.0.0"
+    immutable "^5.0.2"
+    source-map-js ">=0.6.2 <2.0.0"
+  optionalDependencies:
+    "@parcel/watcher" "^2.4.1"
+
 sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -19671,14 +19888,6 @@ schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0, schema-utils@^2.7
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
-scss-tokenizer@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.4.3.tgz#1058400ee7d814d71049c29923d2b25e61dc026c"
-  integrity sha512-raKLgf1LI5QMQnG+RxHz6oK0sL3x3I4FN2UDLqgLOGO8hodECNnNh5BXn7fAyBxrA8zVzdQizQ6XjNJQ+uBwMw==
-  dependencies:
-    js-base64 "^2.4.9"
-    source-map "^0.7.3"
-
 select@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
@@ -19971,10 +20180,10 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
-signal-exit@^3.0.7:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
-  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
 signale@^1.2.1:
   version "1.4.0"
@@ -20081,11 +20290,6 @@ smart-buffer@^4.1.0:
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.1.0.tgz#91605c25d91652f4661ea69ccf45f1b331ca21ba"
   integrity sha512-iVICrxOzCynf/SNaBQCw34eM9jROU/s5rzIhpOvzhzuYHfJR/DhZfDkXiZSgKXfgv26HT3Yni3AV/DGw0cGnnw==
 
-smart-buffer@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
-  integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
-
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -20124,32 +20328,6 @@ socks-proxy-agent@^4.0.0:
     agent-base "~4.2.1"
     socks "~2.3.2"
 
-socks-proxy-agent@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-6.2.1.tgz#2687a31f9d7185e38d530bef1944fe1f1496d6ce"
-  integrity sha512-a6KW9G+6B3nWZ1yB8G7pJwL3ggLy1uTzKAgCb7ttblwqdz9fMGJUuTy3uFzEP48FAs9FLILlmzDlE2JJhVQaXQ==
-  dependencies:
-    agent-base "^6.0.2"
-    debug "^4.3.3"
-    socks "^2.6.2"
-
-socks-proxy-agent@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz#dc069ecf34436621acb41e3efa66ca1b5fed15b6"
-  integrity sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==
-  dependencies:
-    agent-base "^6.0.2"
-    debug "^4.3.3"
-    socks "^2.6.2"
-
-socks@^2.6.2:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/socks/-/socks-2.7.1.tgz#d8e651247178fde79c0663043e07240196857d55"
-  integrity sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==
-  dependencies:
-    ip "^2.0.0"
-    smart-buffer "^4.2.0"
-
 socks@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/socks/-/socks-2.3.3.tgz#01129f0a5d534d2b897712ed8aceab7ee65d78e3"
@@ -20181,6 +20359,11 @@ source-list-map@^2.0.0, source-list-map@^2.0.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map-js@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
@@ -20363,20 +20546,13 @@ ssri@^6.0.0, ssri@^6.0.1:
   dependencies:
     figgy-pudding "^3.5.1"
 
-ssri@^8.0.0, ssri@^8.0.1:
+ssri@^8.0.0:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.1.tgz#638e4e439e2ffbd2cd289776d5ca457c4f51a2af"
   integrity sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==
   dependencies:
     minipass "^3.1.1"
 
-ssri@^9.0.0:
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-9.0.1.tgz#544d4c357a8d7b71a19700074b6883fcb4eae057"
-  integrity sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==
-  dependencies:
-    minipass "^3.1.1"
-
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -20412,13 +20588,6 @@ static-extend@^0.1.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
-stdout-stream@^1.4.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.1.tgz#5ac174cdd5cd726104aa0c0b2bd83815d8d535de"
-  integrity sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==
-  dependencies:
-    readable-stream "^2.0.1"
-
 stealthy-require@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
@@ -20500,6 +20669,15 @@ string-template@~0.2.1:
   resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
   integrity sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=
 
+"string-width-cjs@npm:string-width@^4.2.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@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -20517,15 +20695,6 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-"string-width@^1.0.2 || 2 || 3 || 4", 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@^3.0.0, string-width@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
@@ -20544,6 +20713,15 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.2:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
+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:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
 "string.prototype.matchall@^4.0.0 || ^3.0.1", string.prototype.matchall@^4.0.2:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.4.tgz#608f255e93e072107f5de066f81a2dfb78cf6b29"
@@ -20633,6 +20811,13 @@ stringify-package@^1.0.0, stringify-package@^1.0.1:
   resolved "https://registry.yarnpkg.com/stringify-package/-/stringify-package-1.0.1.tgz#e5aa3643e7f74d0f28628b72f3dad5cecfc3ba85"
   integrity sha512-sa4DUQsYciMP1xhKWGuFM04fB0LG/9DlluZoSVywUMRNvzid6XucHK0/90xGxRoHrAaROrcHK1aPKaijCtSrhg==
 
+"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@6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
@@ -20661,12 +20846,12 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.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==
+strip-ansi@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
   dependencies:
-    ansi-regex "^5.0.1"
+    ansi-regex "^6.0.1"
 
 strip-bom@^2.0.0:
   version "2.0.0"
@@ -20854,6 +21039,19 @@ stylis@^4.0.3:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
   integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
 
+sucrase@^3.35.0:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 sugarss@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d"
@@ -20902,6 +21100,11 @@ supports-hyperlinks@^2.0.0, supports-hyperlinks@^2.1.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
 svg-parser@^2.0.2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
@@ -20959,6 +21162,11 @@ symbol.prototype.description@^1.0.0:
     has-symbols "^1.0.1"
     object.getownpropertydescriptors "^2.1.2"
 
+tabbable@^6.0.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 table@^6.0.4, table@^6.0.9:
   version "6.7.2"
   resolved "https://registry.yarnpkg.com/table/-/table-6.7.2.tgz#a8d39b9f5966693ca8b0feba270a78722cbaf3b0"
@@ -20981,6 +21189,34 @@ table@^6.0.7:
     slice-ansi "^4.0.0"
     string-width "^4.2.0"
 
+tailwindcss@^3.4.16:
+  version "3.4.16"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.16.tgz#35a7c3030844d6000fc271878db4096b6a8d2ec9"
+  integrity sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.6.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.2"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.6"
+    lilconfig "^3.1.3"
+    micromatch "^4.0.8"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.1.1"
+    postcss "^8.4.47"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.2"
+    postcss-nested "^6.2.0"
+    postcss-selector-parser "^6.1.2"
+    resolve "^1.22.8"
+    sucrase "^3.35.0"
+
 tannin@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/tannin/-/tannin-1.2.0.tgz#1da6fe65280dca4c3d84efb075b077b1b94362a6"
@@ -21054,18 +21290,6 @@ tar@^6.0.2:
     mkdirp "^1.0.3"
     yallist "^4.0.0"
 
-tar@^6.1.11, tar@^6.1.2:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.0.tgz#b14ce49a79cb1cd23bc9b016302dea5474493f73"
-  integrity sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==
-  dependencies:
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    minipass "^5.0.0"
-    minizlib "^2.1.1"
-    mkdirp "^1.0.3"
-    yallist "^4.0.0"
-
 telejson@^5.0.2, telejson@^5.3.2:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/telejson/-/telejson-5.3.3.tgz#fa8ca84543e336576d8734123876a9f02bf41d2e"
@@ -21195,6 +21419,20 @@ text-table@0.2.0, text-table@^0.2.0, text-table@~0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
 throat@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
@@ -21449,11 +21687,6 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
-"true-case-path@^2.2.1":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-2.2.1.tgz#c5bf04a5bbec3fd118be4084461b3a27c4d796bf"
-  integrity sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q==
-
 tryer@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
@@ -21469,6 +21702,11 @@ ts-essentials@^2.0.3:
   resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-2.0.12.tgz#c9303f3d74f75fa7528c3d49b80e089ab09d8745"
   integrity sha512-3IVX4nI6B5cc31/GFFE+i8ey/N2eA0CZDbo6n0yrz0zDX8ZJ8djmU1p+XRz7G3is0F3bB3pu2pAroFdAWQKU3w==
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 ts-loader@^8.0.18:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-8.3.0.tgz#83360496d6f8004fab35825279132c93412edf33"
@@ -21515,6 +21753,11 @@ tslib@^2.1.0, tslib@^2.3.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
+tslib@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 tsutils@^3.17.1, tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -21798,13 +22041,6 @@ unique-filename@^1.1.1:
   dependencies:
     unique-slug "^2.0.0"
 
-unique-filename@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-2.0.1.tgz#e785f8675a9a7589e0ac77e0b5c34d2eaeac6da2"
-  integrity sha512-ODWHtkkdx3IAR+veKxFV+VBkUMcN+FaqzUUd7IZzt+0zhDZFPFxhlqwPF3YQvMHx1TD0tdgYl+kuPnJ8E6ql7A==
-  dependencies:
-    unique-slug "^3.0.0"
-
 unique-slug@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.2.tgz#baabce91083fc64e945b0f3ad613e264f7cd4e6c"
@@ -21812,13 +22048,6 @@ unique-slug@^2.0.0:
   dependencies:
     imurmurhash "^0.1.4"
 
-unique-slug@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-3.0.0.tgz#6d347cf57c8a7a7a6044aabd0e2d74e4d76dc7c9"
-  integrity sha512-8EyMynh679x/0gqE9fT9oilG+qEt+ibFyqjuVTsZn1+CMxH+XLlpvr2UZx4nVcCwTpx81nICr2JQFkM+HPLq4w==
-  dependencies:
-    imurmurhash "^0.1.4"
-
 unique-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-1.0.0.tgz#9e1057cca851abb93398f8b33ae187b99caec11a"
@@ -22571,13 +22800,6 @@ wide-align@^1.1.0:
   dependencies:
     string-width "^1.0.2 || 2"
 
-wide-align@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.5.tgz#df1d4c206854369ecf3c9a4898f1b23fbd9d15d3"
-  integrity sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==
-  dependencies:
-    string-width "^1.0.2 || 2 || 3 || 4"
-
 widest-line@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-2.0.1.tgz#7438764730ec7ef4381ce4df82fb98a53142a3fc"
@@ -22621,6 +22843,15 @@ worker-rpc@^0.1.0:
   dependencies:
     microevent.ts "~0.1.1"
 
+"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==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
@@ -22647,14 +22878,14 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+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 "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
 
 wrappy@1:
   version "1.0.2"
@@ -22757,6 +22988,11 @@ yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
+yaml@^2.3.4:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.6.1.tgz#42f2b1ba89203f374609572d5349fb8686500773"
+  integrity sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==
+
 yargs-parser@^15.0.1:
   version "15.0.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.3.tgz#316e263d5febe8b38eef61ac092b33dfcc9b1115"
@@ -22778,11 +23014,6 @@ yargs-parser@^20.2.2, yargs-parser@^20.2.3:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.7.tgz#61df85c113edfb5a7a4e36eb8aa60ef423cbc90a"
   integrity sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==
 
-yargs-parser@^21.1.1:
-  version "21.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
-  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
-
 yargs-parser@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
@@ -22837,19 +23068,6 @@ yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
-yargs@^17.2.1:
-  version "17.7.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
-  integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
-  dependencies:
-    cliui "^8.0.1"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.3"
-    y18n "^5.0.5"
-    yargs-parser "^21.1.1"
-
 yargs@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"