Polish Icon Usage (#437)

apps/landing/package.json

@@ -11,7 +11,6 @@
 	},
 	"dependencies": {
 		"@headlessui/react": "^1.7.3",
-		"@heroicons/react": "^2.0.12",
 		"@icons-pack/react-simple-icons": "^5.8.0",
 		"@sd/assets": "workspace:*",
 		"@sd/docs": "workspace:*",

apps/landing/src/components/DocsLayout.tsx

@@ -1,6 +1,5 @@
-import { ChevronRightIcon } from '@heroicons/react/24/solid';
 import { Button } from '@sd/ui';
-import { List, X } from 'phosphor-react';
+import { CaretRight, List, X } from 'phosphor-react';
 import { PropsWithChildren, useState } from 'react';
 import pkg from 'react-burger-menu';
 
@@ -53,7 +52,7 @@ export default function DocsLayout(props: Props) {
 						return (
 							<div key={index} className="flex flex-row items-center ml-2">
 								<a className="px-1 text-sm">{toTitleCase(item)}</a>
-								{index < 1 && <ChevronRightIcon className="w-4 h-4 ml-1 -mr-2" />}
+								{index < 1 && <CaretRight className="w-4 h-4 ml-1 -mr-2" />}
 							</div>
 						);
 					})}

apps/landing/src/components/DocsSidebar.tsx

@@ -37,7 +37,7 @@ export default function DocsSidebar(props: Props) {
 							)}
 						>
 							<div className={clsx(`p-1 mr-4 bg-gray-500 border-t rounded-lg border-gray-400/20`)}>
-								<Icon className="w-4 h-4 text-white opacity-80" />
+								<Icon weight="bold" className="w-4 h-4 text-white opacity-80" />
 							</div>
 							{section.title}
 						</a>

apps/landing/src/components/NavBar.tsx

@@ -1,15 +1,8 @@
-import {
-	AcademicCapIcon,
-	BookOpenIcon,
-	ChatBubbleOvalLeftIcon,
-	MapIcon,
-	UsersIcon
-} from '@heroicons/react/24/solid';
-import { Discord, Github } from '@icons-pack/react-simple-icons';
+import { Academia, Discord, Github } from '@icons-pack/react-simple-icons';
 import AppLogo from '@sd/assets/images/logo.png';
 import { Button, Dropdown } from '@sd/ui';
 import clsx from 'clsx';
-import { DotsThreeVertical } from 'phosphor-react';
+import { Book, Chat, DotsThreeVertical, MapPin, User } from 'phosphor-react';
 import { PropsWithChildren, useEffect, useState } from 'react';
 import * as router from 'vite-plugin-ssr/client/router';
 
@@ -108,22 +101,19 @@ export default function NavBar() {
 						</Dropdown.Item>
 					</Dropdown.Section>
 					<Dropdown.Section>
-						<Dropdown.Item icon={MapIcon} {...link('/roadmap')}>
+						<Dropdown.Item icon={MapPin} {...link('/roadmap')}>
 							Roadmap
 						</Dropdown.Item>
-						<Dropdown.Item
-							icon={BookOpenIcon}
-							{...link('/docs/product/getting-started/introduction')}
-						>
+						<Dropdown.Item icon={Book} {...link('/docs/product/getting-started/introduction')}>
 							Docs
 						</Dropdown.Item>
-						<Dropdown.Item icon={UsersIcon} {...link('/team')}>
+						<Dropdown.Item icon={User} {...link('/team')}>
 							Team
 						</Dropdown.Item>
-						<Dropdown.Item icon={ChatBubbleOvalLeftIcon} {...link('/blog')}>
+						<Dropdown.Item icon={Chat} {...link('/blog')}>
 							Blog
 						</Dropdown.Item>
-						<Dropdown.Item icon={AcademicCapIcon} {...link('/careers')}>
+						<Dropdown.Item icon={Academia} {...link('/careers')}>
 							Careers
 						</Dropdown.Item>
 					</Dropdown.Section>

apps/landing/src/pages/careers.page.tsx

@@ -1,15 +1,15 @@
-import {
-	ArrowTrendingUpIcon,
-	BoltIcon,
-	ClockIcon,
-	ComputerDesktopIcon,
-	CurrencyDollarIcon,
-	FaceSmileIcon,
-	HeartIcon,
-	HomeIcon,
-	StarIcon
-} from '@heroicons/react/24/outline';
 import { Button } from '@sd/ui';
+import {
+	Clock,
+	CurrencyDollar,
+	Desktop,
+	Heart,
+	House,
+	LightningSlash,
+	Smiley,
+	Star,
+	TrendUp
+} from 'phosphor-react';
 import { useRef } from 'react';
 import { Helmet } from 'react-helmet';
 
@@ -25,22 +25,22 @@ const values = [
 	{
 		title: 'Async',
 		desc: 'To accommodate our international team and community, we work and communicate asynchronously.',
-		icon: ClockIcon
+		icon: Clock
 	},
 	{
 		title: 'Quality',
 		desc: 'From our interface design to our code, we strive to build software that will last.',
-		icon: StarIcon
+		icon: Star
 	},
 	{
 		title: 'Speed',
 		desc: 'We get things done quickly, through small iteration cycles and frequent updates.',
-		icon: BoltIcon
+		icon: LightningSlash
 	},
 	{
 		title: 'Transparency',
 		desc: 'We are human beings that make mistakes, but through total transparency we can solve them faster.',
-		icon: HeartIcon
+		icon: Heart
 	}
 ];
 
@@ -48,37 +48,37 @@ const perks = [
 	{
 		title: 'Competitive Salary',
 		desc: `We want the best, and will pay for the best. If you shine through we'll make sure you're paid what you're worth.`,
-		icon: CurrencyDollarIcon,
+		icon: CurrencyDollar,
 		color: '#0DD153'
 	},
 	{
 		title: 'Stock Options',
 		desc: `As an early employee, you deserve to own a piece of our company. Stock options will be offered as part of your onboarding process.`,
-		icon: ArrowTrendingUpIcon,
+		icon: TrendUp,
 		color: '#BD0DD1'
 	},
 	{
 		title: 'Paid Time Off',
 		desc: `Rest is important, you deliver your best work when you've had your downtime. We offer 4 weeks paid time off per year, and if you need more, we'll give you more.`,
-		icon: FaceSmileIcon,
+		icon: Smiley,
 		color: '#9210FF'
 	},
 	{
 		title: 'Work From Home',
 		desc: `As an open source project, we're remote first and intend to keep it that way. Sorry Elon.`,
-		icon: HomeIcon,
+		icon: House,
 		color: '#D1A20D'
 	},
 	{
 		title: 'Desk Budget',
 		desc: `Need an M1 MacBook Pro? We've got you covered. (You'll probably need one with Rust compile times)`,
-		icon: ComputerDesktopIcon,
+		icon: Desktop,
 		color: '#0DC5D1'
 	},
 	{
 		title: 'Health Care',
 		desc: `We use Deel for hiring and payroll, all your health care needs are covered.`,
-		icon: HeartIcon,
+		icon: Heart,
 		color: '#D10D7F'
 	}
 ];
@@ -167,11 +167,11 @@ function Page() {
 										<h3 className="m-0 text-2xl leading-tight">{value.name}</h3>
 										<div className="mt-3 sm:mt-0.5">
 											<span className="text-sm font-semibold text-gray-300 sm:ml-4">
-												<CurrencyDollarIcon className="inline w-4 mr-1 -mt-1" />
+												<CurrencyDollar className="inline w-4 mr-1 -mt-1" />
 												{value.salary}
 											</span>
 											<span className="ml-4 text-sm font-semibold text-gray-300">
-												<ClockIcon className="inline w-4 mr-1 -mt-1" />
+												<Clock className="inline w-4 mr-1 -mt-1" />
 												{value.type}
 											</span>
 										</div>

apps/landing/src/pages/docs/doc.page.tsx

@@ -1,5 +1,5 @@
-import { ChevronRightIcon } from '@heroicons/react/24/solid';
 import { Github } from '@icons-pack/react-simple-icons';
+import { CaretRight } from 'phosphor-react';
 import { PropsWithChildren } from 'react';
 import { Helmet } from 'react-helmet';
 
@@ -51,7 +51,7 @@ function Page({ doc, navigation, nextDoc }: SingleDocResponse) {
 						{nextDoc && (
 							<a href={`/docs/${nextDoc.url}`} className="w-full">
 								<BottomCard>
-									<ChevronRightIcon className="w-5 mr-3" />
+									<CaretRight className="w-5 mr-3" />
 									Next article: {nextDoc?.title}
 								</BottomCard>
 							</a>

apps/landing/src/pages/docs/docs.ts

@@ -1,4 +1,4 @@
-import { BuildingLibraryIcon, CubeIcon, SparklesIcon, StarIcon } from '@heroicons/react/24/solid';
+import { Circle, Cube, Sparkle, Star } from 'phosphor-react';
 
 import { DocsConfig } from './api';
 
@@ -14,22 +14,22 @@ const config: DocsConfig = {
 		{
 			title: 'Product',
 			slug: 'product',
-			icon: SparklesIcon
+			icon: Sparkle
 		},
 		{
 			title: 'Developers',
 			slug: 'developers',
-			icon: CubeIcon
+			icon: Cube
 		},
 		{
 			title: 'Company',
 			slug: 'company',
-			icon: BuildingLibraryIcon
+			icon: Circle
 		},
 		{
 			title: 'Changelog',
 			slug: 'changelog',
-			icon: StarIcon
+			icon: Star
 		}
 	]
 };

apps/landing/vite.config.ts

@@ -10,9 +10,7 @@ export default defineConfig({
 	plugins: [react(), ssr({ prerender: true }), svg(), md({ mode: [Mode.REACT] }), visualizer()],
 	resolve: {
 		alias: {
-			'~/docs': __dirname + '../../../docs',
-			'@heroicons/react/24/solid': '@heroicons/react/24/solid/index.js',
-			'@heroicons/react/24/outline': '@heroicons/react/24/outline/index.js'
+			'~/docs': __dirname + '../../../docs'
 		}
 	},
 

core/src/job/job_manager.rs

@@ -32,10 +32,11 @@ pub enum JobManagerEvent {
 	IngestJob(LibraryContext, Box<dyn DynJob>),
 }
 
-// jobs struct is maintained by the core
+/// JobManager handles queueing and executing jobs using the `DynJob`
+/// Handling persisting JobReports to the database, pause/resuming, and
+///
 pub struct JobManager {
 	job_queue: RwLock<VecDeque<Box<dyn DynJob>>>,
-	// workers are spawned when jobs are picked off the queue
 	running_workers: RwLock<HashMap<Uuid, Arc<Mutex<Worker>>>>,
 	internal_sender: mpsc::UnboundedSender<JobManagerEvent>,
 	shutdown_tx: Arc<broadcast::Sender<()>>,

packages/interface/package.json

@@ -17,7 +17,6 @@
 	"dependencies": {
 		"@fontsource/inter": "^4.5.13",
 		"@headlessui/react": "^1.7.3",
-		"@heroicons/react": "^2.0.12",
 		"@loadable/component": "^5.15.2",
 		"@radix-ui/react-progress": "^1.0.0",
 		"@radix-ui/react-slider": "^1.0.0",
@@ -37,8 +36,6 @@
 		"byte-size": "^8.1.0",
 		"clsx": "^1.2.1",
 		"dayjs": "^1.11.5",
-		"iconoir": "^5.3.2",
-		"iconoir-react": "^5.3.2",
 		"phosphor-react": "^1.4.1",
 		"react": "^18.2.0",
 		"react-colorful": "^5.6.1",

packages/interface/src/AppLayout.tsx

@@ -1,6 +1,5 @@
 import { useCurrentLibrary } from '@sd/client';
 import clsx from 'clsx';
-import { IconoirProvider } from 'iconoir-react';
 import { Suspense } from 'react';
 import { Outlet } from 'react-router-dom';
 
@@ -33,17 +32,9 @@ export function AppLayout() {
 		>
 			<Sidebar />
 			<div className="relative flex w-full">
-				<IconoirProvider
-					iconProps={{
-						strokeWidth: 1.8,
-						width: '1em',
-						height: '1em'
-					}}
-				>
-					<Suspense fallback={<div className="w-screen h-screen bg-app" />}>
-						<Outlet />
-					</Suspense>
-				</IconoirProvider>
+				<Suspense fallback={<div className="w-screen h-screen bg-app" />}>
+					<Outlet />
+				</Suspense>
 			</div>
 			<Toasts />
 		</div>

packages/interface/src/components/device/Device.tsx

@@ -1,8 +1,15 @@
-import { KeyIcon } from '@heroicons/react/24/outline';
-import { CogIcon, LockClosedIcon } from '@heroicons/react/24/solid';
 import { Button } from '@sd/ui';
 import { Loader } from '@sd/ui';
-import { Cloud, Desktop, DeviceMobileCamera, DotsSixVertical, Laptop } from 'phosphor-react';
+import {
+	Cloud,
+	Desktop,
+	DeviceMobileCamera,
+	DotsSixVertical,
+	Gear,
+	Key,
+	Laptop,
+	Lock
+} from 'phosphor-react';
 import { useState } from 'react';
 
 import FileItem from '../explorer/FileItem';
@@ -36,7 +43,7 @@ export function Device(props: DeviceProps) {
 				<h3 className="font-semibold text-md">{props.name || 'Unnamed Device'}</h3>
 				<div className="flex flex-row space-x-1.5 mt-0.5">
 					<span className="font-semibold flex flex-row h-[19px] -mt-0.5 ml-3 py-0.5 px-1.5 text-[10px] rounded text-type-faint">
-						<LockClosedIcon className="w-3 h-3 mr-1 -ml-0.5 m-[1px]" />
+						<Lock weight="bold" className="w-3 h-3 mr-1 -ml-0.5 m-[1px]" />
 						P2P
 					</span>
 				</div>
@@ -54,12 +61,12 @@ export function Device(props: DeviceProps) {
 				<div className="flex flex-row ml-3 space-x-1">
 					<Tooltip label="Encrypt">
 						<Button className="!p-1 ">
-							<KeyIcon className="w-5 h-5" />
+							<Key weight="bold" className="w-5 h-5" />
 						</Button>
 					</Tooltip>
 					<Tooltip label="Settings">
 						<Button className="!p-1 ">
-							<CogIcon className="w-5 h-5" />
+							<Gear weight="bold" className="w-5 h-5" />
 						</Button>
 					</Tooltip>
 				</div>

packages/interface/src/components/explorer/ExplorerTopBar.tsx

@@ -1,17 +1,18 @@
-import { ChevronLeftIcon, ChevronRightIcon, TagIcon } from '@heroicons/react/24/outline';
-import { TagIcon as TagIconSolid } from '@heroicons/react/24/solid';
 import { getExplorerStore, useExplorerStore, useLibraryMutation } from '@sd/client';
 import { Button, Input, OverlayPanel, cva, tw } from '@sd/ui';
 import clsx from 'clsx';
 import {
 	ArrowsClockwise,
+	CaretLeft,
+	CaretRight,
 	IconProps,
 	Key,
 	List,
 	MonitorPlay,
 	Rows,
 	SidebarSimple,
-	SquaresFour
+	SquaresFour,
+	Tag
 } from 'phosphor-react';
 import { forwardRef, useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
@@ -199,12 +200,12 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 				<div className="flex">
 					<Tooltip label="Navigate back">
 						<TopBarButton onClick={() => navigate(-1)}>
-							<ChevronLeftIcon className={TOP_BAR_ICON_STYLE} />
+							<CaretLeft weight="bold" className={TOP_BAR_ICON_STYLE} />
 						</TopBarButton>
 					</Tooltip>
 					<Tooltip label="Navigate forward">
 						<TopBarButton onClick={() => navigate(1)}>
-							<ChevronRightIcon className={TOP_BAR_ICON_STYLE} />
+							<CaretRight weight="bold" className={TOP_BAR_ICON_STYLE} />
 						</TopBarButton>
 					</Tooltip>
 				</div>
@@ -269,11 +270,10 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 								onClick={() => (getExplorerStore().tagAssignMode = !store.tagAssignMode)}
 								active={store.tagAssignMode}
 							>
-								{store.tagAssignMode ? (
-									<TagIconSolid className={TOP_BAR_ICON_STYLE} />
-								) : (
-									<TagIcon className={TOP_BAR_ICON_STYLE} />
-								)}
+								<Tag
+									weight={store.tagAssignMode ? 'fill' : 'bold'}
+									className={TOP_BAR_ICON_STYLE}
+								/>
 							</TopBarButton>
 						</Tooltip>
 						<Tooltip label="Refresh">

packages/interface/src/components/explorer/Inspector.tsx

@@ -1,12 +1,11 @@
 // import types from '../../constants/file-types.json';
-import { ShareIcon } from '@heroicons/react/24/solid';
 import { useLibraryQuery } from '@sd/client';
 import { ExplorerContext, ExplorerItem } from '@sd/client';
 import { Button } from '@sd/ui';
 import { useQuery } from '@tanstack/react-query';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
-import { Link } from 'phosphor-react';
+import { Link, Share } from 'phosphor-react';
 import { useEffect, useState } from 'react';
 
 import { DefaultProps } from '../primitive/types';
@@ -79,7 +78,7 @@ export const Inspector = (props: Props) => {
 								</Tooltip>
 								<Tooltip label="Share">
 									<Button size="icon">
-										<ShareIcon className="w-[18px] h-[18px]" />
+										<Share className="w-[18px] h-[18px]" />
 									</Button>
 								</Tooltip>
 								<Tooltip label="Link">

packages/interface/src/components/jobs/JobManager.tsx

@@ -1,26 +1,27 @@
-import {
-	EllipsisHorizontalIcon,
-	EllipsisVerticalIcon,
-	EyeIcon,
-	FingerPrintIcon,
-	FolderIcon,
-	PhotoIcon,
-	XMarkIcon
-} from '@heroicons/react/24/solid';
-import { QuestionMarkCircleIcon } from '@heroicons/react/24/solid';
 import { useLibraryQuery } from '@sd/client';
 import { JobReport } from '@sd/client';
 import { Button, CategoryHeading, tw } from '@sd/ui';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
-import { ArrowsClockwise, Pause } from 'phosphor-react';
+import {
+	ArrowsClockwise,
+	Camera,
+	DotsThree,
+	Eye,
+	Fingerprint,
+	Folder,
+	IconProps,
+	Pause,
+	Question,
+	X
+} from 'phosphor-react';
 
 import ProgressBar from '../primitive/ProgressBar';
 import { Tooltip } from '../tooltip/Tooltip';
 
 interface JobNiceData {
 	name: string;
-	icon: React.FC<React.ComponentProps<'svg'>>;
+	icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
 }
 
 const getNiceData = (job: JobReport): Record<string, JobNiceData> => ({
@@ -28,19 +29,19 @@ const getNiceData = (job: JobReport): Record<string, JobNiceData> => ({
 		name: `Indexed ${numberWithCommas(job.metadata?.data?.total_paths || 0)} paths at "${
 			job.metadata?.data?.location_path || '?'
 		}"`,
-		icon: FolderIcon
+		icon: Folder
 	},
 	thumbnailer: {
 		name: `Generated ${numberWithCommas(job.task_count)} thumbnails`,
-		icon: PhotoIcon
+		icon: Camera
 	},
 	file_identifier: {
 		name: `Extracted metadata for ${numberWithCommas(job.task_count)} files`,
-		icon: EyeIcon
+		icon: Eye
 	},
 	object_validator: {
 		name: `Generated ${numberWithCommas(job.task_count)} full object hashes`,
-		icon: FingerPrintIcon
+		icon: Fingerprint
 	}
 });
 
@@ -70,7 +71,7 @@ export function JobsManager() {
 				<div className="flex-grow" />
 
 				<Button size="icon">
-					<EllipsisHorizontalIcon className="w-5" />
+					<DotsThree className="w-5" />
 				</Button>
 			</HeaderContainer>
 			<div className="h-full mr-1 overflow-x-hidden custom-scroll inspector-scroll">
@@ -92,7 +93,7 @@ export function JobsManager() {
 function Job({ job }: { job: JobReport }) {
 	const niceData = getNiceData(job)[job.name] || {
 		name: job.name,
-		icon: QuestionMarkCircleIcon
+		icon: Question
 	};
 	const isRunning = job.status === 'Running';
 	return (
@@ -138,7 +139,7 @@ function Job({ job }: { job: JobReport }) {
 					</Button>
 				)}
 				<Button size="icon">
-					<XMarkIcon className="w-4" />
+					<X className="w-4" />
 				</Button>
 			</div>
 		</div>

packages/interface/src/components/key/Key.tsx

@@ -1,6 +1,6 @@
-import { EllipsisVerticalIcon, EyeIcon, KeyIcon } from '@heroicons/react/24/solid';
 import { Button } from '@sd/ui';
 import clsx from 'clsx';
+import { DotsThree, Eye, Key as KeyIcon } from 'phosphor-react';
 
 import { DefaultProps } from '../primitive/types';
 import { Tooltip } from '../tooltip/Tooltip';
@@ -69,12 +69,12 @@ export const Key: React.FC<{ data: Key; index: number }> = ({ data, index }) =>
 				{data.mounted && (
 					<Tooltip label="Browse files">
 						<Button size="icon">
-							<EyeIcon className="w-4 h-4 text-ink-faint" />
+							<Eye className="w-4 h-4 text-ink-faint" />
 						</Button>
 					</Tooltip>
 				)}
 				<Button size="icon">
-					<EllipsisVerticalIcon className="w-4 h-4 text-ink-faint" />
+					<DotsThree className="w-4 h-4 text-ink-faint" />
 				</Button>
 			</div>
 		</div>

packages/interface/src/components/key/KeyMounter.tsx

@@ -1,6 +1,5 @@
-import { InformationCircleIcon } from '@heroicons/react/24/outline';
-import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/solid';
 import { Button, CategoryHeading, Input, Select, SelectOption, Switch, cva, tw } from '@sd/ui';
+import { Eye, EyeSlash, Info } from 'phosphor-react';
 import { useEffect, useRef, useState } from 'react';
 
 import { Tooltip } from '../tooltip/Tooltip';
@@ -17,7 +16,7 @@ export function KeyMounter() {
 	const [encryptionAlgo, setEncryptionAlgo] = useState('XChaCha20Poly1305');
 	const [hashingAlgo, setHashingAlgo] = useState('Argon2id');
 
-	const CurrentEyeIcon = showKey ? EyeSlashIcon : EyeIcon;
+	const CurrentEyeIcon = showKey ? EyeSlash : Eye;
 
 	// this keeps the input focused when switching tabs
 	// feel free to replace with something cleaner
@@ -61,7 +60,7 @@ export function KeyMounter() {
 				</div>
 				<span className="ml-3 text-xs font-medium">Sync with Library</span>
 				<Tooltip label="This key will be mounted on all devices running your Library">
-					<InformationCircleIcon className="w-4 h-4 ml-1.5 text-ink-faint" />
+					<Info className="w-4 h-4 ml-1.5 text-ink-faint" />
 				</Tooltip>
 			</div>
 

packages/interface/src/components/layout/Modal.tsx

@@ -1,7 +1,7 @@
 import { Transition } from '@headlessui/react';
-import { XMarkIcon } from '@heroicons/react/24/solid';
 import { ButtonLink } from '@sd/ui';
 import clsx from 'clsx';
+import { X } from 'phosphor-react';
 import { PropsWithChildren } from 'react';
 
 export function Model(
@@ -31,7 +31,7 @@ export function Model(
 					/>
 				</Transition>
 				<ButtonLink to="/" variant="gray" className="!px-1.5 absolute top-2 right-2">
-					<XMarkIcon className="w-4 h-4" />
+					<X className="w-4 h-4" />
 				</ButtonLink>
 				<Transition
 					show

packages/interface/src/components/layout/Sidebar.tsx

@@ -1,5 +1,3 @@
-import { CogIcon, LockClosedIcon } from '@heroicons/react/24/outline';
-import { PlusIcon } from '@heroicons/react/24/solid';
 import { ReactComponent as Ellipsis } from '@sd/assets/svgs/ellipsis.svg';
 import {
 	LocationCreateArgs,
@@ -25,7 +23,16 @@ import {
 	tw
 } from '@sd/ui';
 import clsx from 'clsx';
-import { CheckCircle, CirclesFour, Planet, ShareNetwork } from 'phosphor-react';
+import {
+	CheckCircle,
+	CirclesFour,
+	Gear,
+	GearSix,
+	Lock,
+	Planet,
+	Plus,
+	ShareNetwork
+} from 'phosphor-react';
 import React, { PropsWithChildren, useState } from 'react';
 import { NavLink, NavLinkProps } from 'react-router-dom';
 
@@ -36,6 +43,12 @@ import { JobsManager } from '../jobs/JobManager';
 import { MacTrafficLights } from '../os/TrafficLights';
 import { InputContainer } from '../primitive/InputContainer';
 
+const SidebarBody = tw.div`flex relative flex-col flex-grow-0 flex-shrink-0 w-44 min-h-full border-r border-sidebar-divider bg-sidebar`;
+
+const SidebarContents = tw.div`flex flex-col px-2.5 flex-grow pt-1 pb-10 overflow-x-hidden overflow-y-scroll no-scrollbar mask-fade-out`;
+
+const SidebarFooter = tw.div`flex flex-col mb-3 px-2.5`;
+
 export function Sidebar() {
 	// DO NOT DO LIBRARY QUERIES OR MUTATIONS HERE. This is rendered before a library is set.
 	const os = useOperatingSystem();
@@ -43,26 +56,23 @@ export function Sidebar() {
 	const debugState = useDebugState();
 	const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
 
-	// const itemStyles = macOnly(os, 'dark:hover:bg-sidebar-box dark:hover:bg-opacity-50');
 	return (
-		<div
-			className={clsx(
-				'flex relative flex-col flex-grow-0 flex-shrink-0 w-44 min-h-full border-r border-sidebar-divider  bg-sidebar',
-				macOnly(os, 'bg-opacity-[0.80]')
-			)}
-		>
+		<SidebarBody className={macOnly(os, 'bg-opacity-[0.80]')}>
 			<WindowControls />
-
 			<Dropdown.Root
-				className="mt-1 mx-2.5"
+				className="mt-2 mx-2.5"
+				// we override the sidebar dropdown item's hover styles
+				// because the dark style clashes with the sidebar
+				itemsClassName="dark:bg-sidebar-box mt-1 dark:divide-menu-selected/30"
 				button={
 					<Dropdown.Button
 						variant="gray"
 						className={clsx(
-							`w-full text-ink !bg-sidebar-box !border-sidebar-line/50 active:!border-sidebar-line`,
-							`active:!bg-sidebar-button ui-open:!bg-sidebar-button ui-open:!border-sidebar-line `,
+							`w-full text-ink `,
+							// these classname overrides are messy
+							// but they work
+							`!bg-sidebar-box !border-sidebar-line/50 active:!border-sidebar-line active:!bg-sidebar-button ui-open:!bg-sidebar-button ui-open:!border-sidebar-line`,
 							(library === null || isLoadingLibraries) && '!text-ink-faint'
-							// macOnly(os, '!bg-opacity-80 !border-opacity-40')
 						)}
 					>
 						<span className="truncate">
@@ -83,18 +93,18 @@ export function Sidebar() {
 					))}
 				</Dropdown.Section>
 				<Dropdown.Section>
-					<Dropdown.Item icon={CogIcon} to="settings/library">
+					<Dropdown.Item icon={GearSix} to="settings/library">
 						Library Settings
 					</Dropdown.Item>
-					<Dropdown.Item icon={PlusIcon} onClick={() => setIsCreateDialogOpen(true)}>
+					<Dropdown.Item icon={Plus} onClick={() => setIsCreateDialogOpen(true)}>
 						Add Library
 					</Dropdown.Item>
-					<Dropdown.Item icon={LockClosedIcon} onClick={() => alert('TODO: Not implemented yet!')}>
+					<Dropdown.Item icon={Lock} onClick={() => alert('TODO: Not implemented yet!')}>
 						Lock
 					</Dropdown.Item>
 				</Dropdown.Section>
 			</Dropdown.Root>
-			<div className="flex flex-col px-2.5 flex-grow pt-1 pb-10 overflow-x-hidden overflow-y-scroll no-scrollbar mask-fade-out">
+			<SidebarContents>
 				<div className="pt-1">
 					<SidebarLink to="/overview">
 						<Icon component={Planet} />
@@ -111,13 +121,17 @@ export function Sidebar() {
 				</div>
 				{library && <LibraryScopedSection />}
 				<div className="flex-grow" />
-			</div>
-			{/* <div className="fixed w-[174px] bottom-[2px] left-[2px] h-20 rounded-[8px] bg-gradient-to-t from-sidebar-box/90 via-sidebar-box/50 to-transparent" /> */}
+			</SidebarContents>
 
-			<div className="flex flex-col mb-3 px-2.5">
+			<SidebarFooter>
 				<div className="flex">
-					<ButtonLink to="/settings/general" size="icon" variant="outline">
-						<CogIcon className="w-5 h-5" />
+					<ButtonLink
+						to="/settings/general"
+						size="icon"
+						variant="outline"
+						className="text-ink-faint"
+					>
+						<Gear className="w-5 h-5" />
 					</ButtonLink>
 					<OverlayPanel
 						className="focus:outline-none"
@@ -127,7 +141,7 @@ export function Sidebar() {
 							<Button
 								size="icon"
 								variant="outline"
-								className="radix-state-open:bg-sidebar-selected/50"
+								className="radix-state-open:bg-sidebar-selected/50 text-ink-faint"
 							>
 								{library && <IsRunningJob />}
 							</Button>
@@ -139,10 +153,10 @@ export function Sidebar() {
 					</OverlayPanel>
 				</div>
 				{debugState.enabled && <DebugPanel />}
-			</div>
+			</SidebarFooter>
 			{/* Putting this within the dropdown will break the enter click handling in the modal. */}
 			<CreateLibraryDialog open={isCreateDialogOpen} setOpen={setIsCreateDialogOpen} />
-		</div>
+		</SidebarBody>
 	);
 }
 
@@ -213,7 +227,7 @@ function DebugPanel() {
 						onChange={(value) => (getDebugState().reactQueryDevtools = value as any)}
 					>
 						<SelectOption value="disabled">Disabled</SelectOption>
-						<SelectOption value="invisible">Invisble</SelectOption>
+						<SelectOption value="invisible">Invisible</SelectOption>
 						<SelectOption value="enabled">Enabled</SelectOption>
 					</Select>
 				</InputContainer>

packages/interface/src/components/location/LocationListItem.tsx

@@ -1,9 +1,8 @@
-import { TrashIcon } from '@heroicons/react/24/solid';
 import { useLibraryMutation } from '@sd/client';
 import { Location, Node } from '@sd/client';
 import { Button, Card, Dialog } from '@sd/ui';
 import clsx from 'clsx';
-import { Repeat } from 'phosphor-react';
+import { Repeat, Trash } from 'phosphor-react';
 import { useState } from 'react';
 
 import { Folder } from '../icons/Folder';
@@ -66,7 +65,7 @@ export default function LocationListItem({ location }: LocationListItemProps) {
 					ctaLabel="Delete"
 					trigger={
 						<Button variant="gray" className="!p-1.5">
-							<TrashIcon className="w-4 h-4" />
+							<Trash className="w-4 h-4" />
 						</Button>
 					}
 				/>

packages/interface/src/components/primitive/Listbox.tsx

@@ -1,6 +1,6 @@
 import { Listbox as ListboxPrimitive } from '@headlessui/react';
-import { CheckIcon, SunIcon } from '@heroicons/react/24/solid';
 import clsx from 'clsx';
+import { Check, Sun } from 'phosphor-react';
 import { useEffect, useState } from 'react';
 
 interface ListboxOption {
@@ -38,7 +38,7 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
 						)}
 
 						<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-							<SunIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
+							<Sun className="w-5 h-5 text-gray-400" aria-hidden="true" />
 						</span>
 					</ListboxPrimitive.Button>
 
@@ -79,7 +79,7 @@ export default function Listbox(props: { options: ListboxOption[]; className?: s
 
 										{selected ? (
 											<span className="absolute inset-y-0 left-0 flex items-center pl-2 text-white">
-												<CheckIcon className="w-5 h-5" aria-hidden="true" />
+												<Check className="w-5 h-5" aria-hidden="true" />
 											</span>
 										) : null}
 									</>

packages/interface/src/components/settings/SettingsContainer.tsx

@@ -1,5 +1,24 @@
+import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
 
-export const SettingsContainer = ({ children }: PropsWithChildren) => (
-	<div className="flex flex-col flex-grow w-full max-w-4xl space-y-6">{children}</div>
-);
+import { useOperatingSystem } from '../../hooks/useOperatingSystem';
+
+export const SettingsContainer = ({ children }: PropsWithChildren) => {
+	const os = useOperatingSystem();
+
+	return (
+		<>
+			{os !== 'browser' ? (
+				<div data-tauri-drag-region className="w-full h-5" />
+			) : (
+				<div className="h-5" />
+			)}
+			<div className="flex flex-grow-0 w-full h-full max-h-screen custom-scroll page-scroll">
+				<div className={clsx('flex flex-col flex-grow w-full max-w-4xl space-y-6 pt-2 px-12 pb-5')}>
+					{children}
+					<div className="block h-20" />
+				</div>
+			</div>
+		</>
+	);
+};

packages/interface/src/components/settings/SettingsHeader.tsx

@@ -9,7 +9,7 @@ interface SettingsHeaderProps {
 
 export const SettingsHeader: React.FC<SettingsHeaderProps> = (props) => {
 	return (
-		<div className="flex mt-3 mb-3">
+		<div className="flex mb-3">
 			<div className="flex-grow">
 				<h1 className="text-2xl font-bold">{props.title}</h1>
 				<p className="mt-1 text-sm text-gray-400">{props.description}</p>

packages/interface/src/components/settings/SettingsSidebar.tsx

@@ -1,34 +1,40 @@
-import { CogIcon, HeartIcon, KeyIcon, ShieldCheckIcon, TagIcon } from '@heroicons/react/24/outline';
-import { BuildingLibraryIcon } from '@heroicons/react/24/solid';
 import {
+	Books,
 	FlyingSaucer,
+	GearSix,
 	HardDrive,
+	Heart,
+	Key,
 	KeyReturn,
 	PaintBrush,
 	PuzzlePiece,
 	Receipt,
-	ShareNetwork
+	ShareNetwork,
+	ShieldCheck,
+	TagSimple
 } from 'phosphor-react';
 
+import { useOperatingSystem } from '../../hooks/useOperatingSystem';
 import { SidebarLink } from '../layout/Sidebar';
 import { SettingsHeading, SettingsIcon } from './SettingsHeader';
 
 export const SettingsSidebar = () => {
+	const os = useOperatingSystem();
 	return (
 		<div className="h-full border-r max-w-[180px] flex-shrink-0 border-app-line/50 w-60 custom-scroll no-scrollbar pb-5">
-			<div data-tauri-drag-region className="w-full h-7" />
+			{os !== 'browser' && <div data-tauri-drag-region className="w-full h-5" />}
 			<div className="px-4 py-2.5">
-				<SettingsHeading className="!mt-0">Client</SettingsHeading>
+				<SettingsHeading className="!mt-2">Client</SettingsHeading>
 				<SidebarLink to="/settings/general">
-					<SettingsIcon component={CogIcon} />
+					<SettingsIcon component={GearSix} />
 					General
 				</SidebarLink>
 				<SidebarLink to="/settings/libraries">
-					<SettingsIcon component={BuildingLibraryIcon} />
+					<SettingsIcon component={Books} />
 					Libraries
 				</SidebarLink>
 				<SidebarLink to="/settings/privacy">
-					<SettingsIcon component={ShieldCheckIcon} />
+					<SettingsIcon component={ShieldCheck} />
 					Privacy
 				</SidebarLink>
 				<SidebarLink to="/settings/appearance">
@@ -46,7 +52,7 @@ export const SettingsSidebar = () => {
 
 				<SettingsHeading>Library</SettingsHeading>
 				<SidebarLink to="/settings/library">
-					<SettingsIcon component={CogIcon} />
+					<SettingsIcon component={GearSix} />
 					General
 				</SidebarLink>
 				<SidebarLink to="/settings/nodes">
@@ -58,11 +64,11 @@ export const SettingsSidebar = () => {
 					Locations
 				</SidebarLink>
 				<SidebarLink to="/settings/tags">
-					<SettingsIcon component={TagIcon} />
+					<SettingsIcon component={TagSimple} />
 					Tags
 				</SidebarLink>
 				<SidebarLink to="/settings/keys">
-					<SettingsIcon component={KeyIcon} />
+					<SettingsIcon component={Key} />
 					Keys
 				</SidebarLink>
 				<SettingsHeading>Resources</SettingsHeading>
@@ -75,7 +81,7 @@ export const SettingsSidebar = () => {
 					Changelog
 				</SidebarLink>
 				<SidebarLink to="/settings/support">
-					<SettingsIcon component={HeartIcon} />
+					<SettingsIcon component={Heart} />
 					Support
 				</SidebarLink>
 			</div>

packages/interface/src/screens/Overview.tsx

@@ -1,4 +1,3 @@
-import { PlusIcon } from '@heroicons/react/24/solid';
 import {
 	getExplorerStore,
 	onLibraryChange,

packages/interface/src/screens/settings/Settings.tsx

@@ -8,15 +8,9 @@ export default function SettingsScreen() {
 		<div className="flex flex-row w-full app-background">
 			<SettingsSidebar />
 			<div className="w-full">
-				<div data-tauri-drag-region className="w-full h-7" />
-				<div className="flex flex-grow-0 w-full h-full max-h-screen custom-scroll page-scroll">
-					<div className="flex flex-grow px-12 pb-5">
-						<Suspense>
-							<Outlet />
-						</Suspense>
-						<div className="block h-20" />
-					</div>
-				</div>
+				<Suspense>
+					<Outlet />
+				</Suspense>
 			</div>
 		</div>
 	);

packages/interface/src/screens/settings/library/TagsSettings.tsx

@@ -1,8 +1,8 @@
-import { TrashIcon } from '@heroicons/react/24/outline';
 import { Tag, useLibraryMutation, useLibraryQuery } from '@sd/client';
 import { TagUpdateArgs } from '@sd/client';
 import { Button, Card, Dialog, Input, Switch } from '@sd/ui';
 import clsx from 'clsx';
+import { Trash } from 'phosphor-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useDebounce } from 'rooks';
@@ -163,7 +163,7 @@ export default function TagsSettings() {
 							ctaLabel="Delete"
 							trigger={
 								<Button variant="gray" className="h-[38px] mt-[22px]">
-									<TrashIcon className="w-4 h-4" />
+									<Trash className="w-4 h-4" />
 								</Button>
 							}
 						/>

packages/interface/src/screens/settings/node/LibrariesSettings.tsx

@@ -1,8 +1,7 @@
-import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import { useBridgeMutation, useBridgeQuery } from '@sd/client';
 import { LibraryConfigWrapped } from '@sd/client';
 import { Button, ButtonLink, Card } from '@sd/ui';
-import { DotsSixVertical } from 'phosphor-react';
+import { DotsSixVertical, Pen, Trash } from 'phosphor-react';
 import { useState } from 'react';
 
 import CreateLibraryDialog from '../../../components/dialog/CreateLibraryDialog';
@@ -28,11 +27,11 @@ function LibraryListItem(props: { library: LibraryConfigWrapped }) {
 			</div>
 			<div className="flex flex-row items-center space-x-2">
 				<ButtonLink size="icon" to="/settings/library" variant="gray">
-					<PencilIcon className="w-4 h-4" />
+					<Pen className="w-4 h-4" />
 				</ButtonLink>
 				<DeleteLibraryDialog libraryUuid={props.library.uuid}>
 					<Button size="icon" variant="gray">
-						<TrashIcon className="w-4 h-4" />
+						<Trash className="w-4 h-4" />
 					</Button>
 				</DeleteLibraryDialog>
 			</div>

packages/ui/package.json

@@ -19,7 +19,6 @@
 	"dependencies": {
 		"@headlessui/react": "^1.7.3",
 		"@headlessui/tailwindcss": "^0.1.1",
-		"@heroicons/react": "^2.0.12",
 		"@radix-ui/react-context-menu": "^1.0.0",
 		"@radix-ui/react-dialog": "^1.0.0",
 		"@radix-ui/react-dropdown-menu": "^1.0.0",

packages/ui/src/Dropdown.tsx

@@ -96,7 +96,7 @@ export const Root = (props: PropsWithChildren<DropdownRootProps>) => {
 				>
 					<Menu.Items
 						className={clsx(
-							'absolute z-50   min-w-fit w-full border divide-y divide-menu-line rounded-md shadow-xl shadow-menu-shade/30 top-full focus:outline-none bg-menu border-menu-line text-menu-ink',
+							'absolute z-50 min-w-fit w-full border divide-y divide-menu-line rounded-md shadow-xl shadow-menu-shade/30 top-full focus:outline-none bg-menu border-menu-line text-menu-ink',
 							props.itemsClassName,
 							{ 'left-0': props.align === 'left' },
 							{ 'right-0': props.align === 'right' }

packages/ui/src/Select.tsx

@@ -1,7 +1,7 @@
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { ReactComponent as ChevronDouble } from '@sd/assets/svgs/chevron-double.svg';
 import clsx from 'clsx';
+import { CaretDown, Check } from 'phosphor-react';
 import { PropsWithChildren } from 'react';
 
 interface SelectProps {
@@ -37,7 +37,7 @@ export function Select(props: PropsWithChildren<SelectProps>) {
 			<SelectPrimitive.Portal className="relative">
 				<SelectPrimitive.Content className="absolute z-50 w-full p-1 border rounded-md shadow-2xl bg-app-box border-app-line shadow-app-shade/20 ">
 					<SelectPrimitive.ScrollUpButton className="hidden ">
-						<ChevronDownIcon />
+						<CaretDown />
 					</SelectPrimitive.ScrollUpButton>
 					<SelectPrimitive.Viewport>{props.children}</SelectPrimitive.Viewport>
 					<SelectPrimitive.ScrollDownButton className="hidden "></SelectPrimitive.ScrollDownButton>
@@ -59,7 +59,7 @@ export function SelectOption(props: PropsWithChildren<{ value: string }>) {
 		>
 			<SelectPrimitive.ItemText>{props.children}</SelectPrimitive.ItemText>
 			<SelectPrimitive.ItemIndicator className="absolute inline-flex items-center left-1">
-				<CheckIcon className="w-4 h-4" />
+				<Check className="w-4 h-4" />
 			</SelectPrimitive.ItemIndicator>
 		</SelectPrimitive.Item>
 	);

packages/ui/style/colors.scss

@@ -85,7 +85,7 @@
   --color-menu-line: var(--light-hue), 5%, 18%;
   --color-menu-ink: var(--light-hue), 5%, 100%;
   --color-menu-faint: var(--light-hue), 5%, 80%;
-  --color-menu-hover: var(--light-hue), 15%, 80%;
+  --color-menu-hover: var(--light-hue), 15%, 20%;
   --color-menu-selected: var(--light-hue), 5%, 30%;
   --color-menu-shade: var(--light-hue), 5%, 0%;
 

pnpm-lock.yaml

@@ -74,7 +74,6 @@ importers:
   apps/landing:
     specifiers:
       '@headlessui/react': ^1.7.3
-      '@heroicons/react': ^2.0.12
       '@icons-pack/react-simple-icons': ^5.8.0
       '@sd/assets': workspace:*
       '@sd/config': workspace:*
@@ -124,7 +123,6 @@ importers:
       vite-plugin-svgr: ^2.2.1
     dependencies:
       '@headlessui/react': 1.7.3_biqbaboplfbrettd7655fr4n2y
-      '@heroicons/react': 2.0.12_react@18.2.0
       '@icons-pack/react-simple-icons': 5.10.0_react@18.2.0
       '@sd/assets': link:../../packages/assets
       '@sd/docs': link:../../docs
@@ -253,7 +251,7 @@ importers:
       moti: 0.18.0_react@18.0.0
       phosphor-react-native: 1.1.2_ipumakbosk2s7ylysjmrulvctq
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       react-native-gesture-handler: 2.5.0_jk6ntyzimkrv4hwdmdgaaf5yaa
       react-native-heroicons: 2.2.0_wxlif5cfng7xfd3uerlw46xcs4
       react-native-reanimated: 2.10.0_ifayjdo6vuwky63y7hdw4ayxzu
@@ -361,7 +359,7 @@ importers:
       '@types/node': 18.11.0
       autoprefixer: 10.4.12_postcss@8.4.18
       postcss: 8.4.18
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.18
       typescript: 4.8.4
       vite: 3.1.8
       vite-plugin-solid: 2.3.9_solid-js@1.5.9+vite@3.1.8
@@ -417,7 +415,6 @@ importers:
     specifiers:
       '@fontsource/inter': ^4.5.13
       '@headlessui/react': ^1.7.3
-      '@heroicons/react': ^2.0.12
       '@loadable/component': ^5.15.2
       '@radix-ui/react-progress': ^1.0.0
       '@radix-ui/react-slider': ^1.0.0
@@ -446,8 +443,6 @@ importers:
       byte-size: ^8.1.0
       clsx: ^1.2.1
       dayjs: ^1.11.5
-      iconoir: ^5.3.2
-      iconoir-react: ^5.3.2
       phosphor-react: ^1.4.1
       prettier: ^2.7.1
       react: ^18.2.0
@@ -470,7 +465,6 @@ importers:
     dependencies:
       '@fontsource/inter': 4.5.14
       '@headlessui/react': 1.7.3_biqbaboplfbrettd7655fr4n2y
-      '@heroicons/react': 2.0.12_react@18.2.0
       '@loadable/component': 5.15.2_react@18.2.0
       '@radix-ui/react-progress': 1.0.1_biqbaboplfbrettd7655fr4n2y
       '@radix-ui/react-slider': 1.1.0_biqbaboplfbrettd7655fr4n2y
@@ -490,8 +484,6 @@ importers:
       byte-size: 8.1.0
       clsx: 1.2.1
       dayjs: 1.11.5
-      iconoir: 5.3.2
-      iconoir-react: 5.3.2_react@18.2.0
       phosphor-react: 1.4.1_react@18.2.0
       react: 18.2.0
       react-colorful: 5.6.1_biqbaboplfbrettd7655fr4n2y
@@ -527,7 +519,6 @@ importers:
       '@babel/core': ^7.19.3
       '@headlessui/react': ^1.7.3
       '@headlessui/tailwindcss': ^0.1.1
-      '@heroicons/react': ^2.0.12
       '@radix-ui/react-context-menu': ^1.0.0
       '@radix-ui/react-dialog': ^1.0.0
       '@radix-ui/react-dropdown-menu': ^1.0.0
@@ -574,8 +565,7 @@ importers:
       typescript: ^4.8.4
     dependencies:
       '@headlessui/react': 1.7.3_biqbaboplfbrettd7655fr4n2y
-      '@headlessui/tailwindcss': 0.1.1_xkowlklhtk6sfvtndbucb3hfiy
-      '@heroicons/react': 2.0.12_react@18.2.0
+      '@headlessui/tailwindcss': 0.1.1_tailwindcss@3.1.8
       '@radix-ui/react-context-menu': 1.0.0_rj7ozvcq3uehdlnj3cbwzbi5ce
       '@radix-ui/react-dialog': 1.0.2_rj7ozvcq3uehdlnj3cbwzbi5ce
       '@radix-ui/react-dropdown-menu': 1.0.0_rj7ozvcq3uehdlnj3cbwzbi5ce
@@ -620,7 +610,7 @@ importers:
       storybook: 6.5.12_yalvw3r2waubxycyb7k7qsruca
       storybook-tailwind-dark-mode: 1.0.15_biqbaboplfbrettd7655fr4n2y
       style-loader: 3.3.1
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.18
       typescript: 4.8.4
 
 packages:
@@ -2158,8 +2148,8 @@ packages:
       '@cspell/dict-docker': 1.1.1
       '@cspell/dict-dotnet': 2.0.1
       '@cspell/dict-elixir': 2.0.1
-      '@cspell/dict-en_us': 2.3.3
       '@cspell/dict-en-gb': 1.1.33
+      '@cspell/dict-en_us': 2.3.3
       '@cspell/dict-filetypes': 2.1.1
       '@cspell/dict-fonts': 2.1.0
       '@cspell/dict-fullstack': 2.0.6
@@ -2907,7 +2897,7 @@ packages:
       '@gorhom/portal': 1.0.14_jk6ntyzimkrv4hwdmdgaaf5yaa
       invariant: 2.2.4
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       react-native-gesture-handler: 2.5.0_jk6ntyzimkrv4hwdmdgaaf5yaa
       react-native-reanimated: 2.10.0_ifayjdo6vuwky63y7hdw4ayxzu
     dev: false
@@ -2920,7 +2910,7 @@ packages:
     dependencies:
       nanoid: 3.3.4
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
     dev: false
 
   /@graphql-typed-document-node/core/3.1.1_graphql@15.8.0:
@@ -2950,23 +2940,13 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
-  /@headlessui/tailwindcss/0.1.1_xkowlklhtk6sfvtndbucb3hfiy:
+  /@headlessui/tailwindcss/0.1.1_tailwindcss@3.1.8:
     resolution: {integrity: sha512-MJbc/MG1iVDow0IQYdsZNVY2xiTa2fDpXLF01xIAyNH6M+Ks0c6X0k3x6PqAvwvKWKEFhS0MlMzrDUVTU6cXDA==}
     engines: {node: '>=10'}
-    dependencies:
-      tailwindcss: 0.0.0-insiders.fe08e91_xkowlklhtk6sfvtndbucb3hfiy
-    transitivePeerDependencies:
-      - autoprefixer
-      - postcss
-      - ts-node
-    dev: false
-
-  /@heroicons/react/2.0.12_react@18.2.0:
-    resolution: {integrity: sha512-FZxKh3i9aKIDxyALTgIpSF2t6V6/eZfF5mRu41QlwkX3Oxzecdm1u6dpft6PQGxIBwO7TKYWaMAYYL8mp/EaOg==}
     peerDependencies:
-      react: '>= 16'
+      tailwindcss: ^3.0
     dependencies:
-      react: 18.2.0
+      tailwindcss: 3.1.8_postcss@8.4.18
     dev: false
 
   /@humanwhocodes/config-array/0.10.7:
@@ -4373,7 +4353,7 @@ packages:
       react-native: ^0.0.0-0 || 0.60 - 0.70 || 1000.0.0
     dependencies:
       merge-options: 3.0.4
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
     dev: false
 
   /@react-native-community/cli-clean/8.0.4:
@@ -4466,7 +4446,7 @@ packages:
     transitivePeerDependencies:
       - encoding
 
-  /@react-native-community/cli-plugin-metro/8.0.4:
+  /@react-native-community/cli-plugin-metro/8.0.4_@babel+core@7.19.3:
     resolution: {integrity: sha512-UWzY1eMcEr/6262R2+d0Is5M3L/7Y/xXSDIFMoc5Rv5Wucl3hJM/TxHXmByvHpuJf6fJAfqOskyt4bZCvbI+wQ==}
     dependencies:
       '@react-native-community/cli-server-api': 8.0.4
@@ -4475,11 +4455,12 @@ packages:
       metro: 0.70.3
       metro-config: 0.70.3
       metro-core: 0.70.3
-      metro-react-native-babel-transformer: 0.70.3
+      metro-react-native-babel-transformer: 0.70.3_@babel+core@7.19.3
       metro-resolver: 0.70.3
       metro-runtime: 0.70.3
       readline: 1.3.0
     transitivePeerDependencies:
+      - '@babel/core'
       - bufferutil
       - encoding
       - supports-color
@@ -4524,7 +4505,7 @@ packages:
     dependencies:
       joi: 17.6.3
 
-  /@react-native-community/cli/8.0.6_react-native@0.69.4:
+  /@react-native-community/cli/8.0.6_2wrsnxuq7u2kmzd6diim7k7fvu:
     resolution: {integrity: sha512-E36hU/if3quQCfJHGWVkpsCnwtByRCwORuAX0r6yr1ebKktpKeEO49zY9PAu/Z1gfyxCtgluXY0HfRxjKRFXTg==}
     engines: {node: '>=12'}
     hasBin: true
@@ -4536,7 +4517,7 @@ packages:
       '@react-native-community/cli-debugger-ui': 8.0.0
       '@react-native-community/cli-doctor': 8.0.6
       '@react-native-community/cli-hermes': 8.0.5
-      '@react-native-community/cli-plugin-metro': 8.0.4
+      '@react-native-community/cli-plugin-metro': 8.0.4_@babel+core@7.19.3
       '@react-native-community/cli-server-api': 8.0.4
       '@react-native-community/cli-tools': 8.0.4
       '@react-native-community/cli-types': 8.0.0
@@ -4550,9 +4531,10 @@ packages:
       lodash: 4.17.21
       minimist: 1.2.7
       prompts: 2.4.2
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       semver: 6.3.0
     transitivePeerDependencies:
+      - '@babel/core'
       - bufferutil
       - encoding
       - supports-color
@@ -4565,7 +4547,7 @@ packages:
       react-native: '>=0.57'
     dependencies:
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
     dev: false
 
   /@react-native/assets/1.0.0:
@@ -4590,7 +4572,7 @@ packages:
       '@react-navigation/native': 6.0.13_jk6ntyzimkrv4hwdmdgaaf5yaa
       color: 4.2.3
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       react-native-safe-area-context: 4.3.1_jk6ntyzimkrv4hwdmdgaaf5yaa
       react-native-screens: 3.15.0_jk6ntyzimkrv4hwdmdgaaf5yaa
       warn-once: 0.1.1
@@ -4625,7 +4607,7 @@ packages:
       '@react-navigation/native': 6.0.13_jk6ntyzimkrv4hwdmdgaaf5yaa
       color: 4.2.3
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       react-native-gesture-handler: 2.5.0_jk6ntyzimkrv4hwdmdgaaf5yaa
       react-native-reanimated: 2.10.0_ifayjdo6vuwky63y7hdw4ayxzu
       react-native-safe-area-context: 4.3.1_jk6ntyzimkrv4hwdmdgaaf5yaa
@@ -4643,7 +4625,7 @@ packages:
     dependencies:
       '@react-navigation/native': 6.0.13_jk6ntyzimkrv4hwdmdgaaf5yaa
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       react-native-safe-area-context: 4.3.1_jk6ntyzimkrv4hwdmdgaaf5yaa
     dev: false
 
@@ -4658,7 +4640,7 @@ packages:
       fast-deep-equal: 3.1.3
       nanoid: 3.3.4
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
     dev: false
 
   /@react-navigation/routers/6.1.3:
@@ -4681,7 +4663,7 @@ packages:
       '@react-navigation/native': 6.0.13_jk6ntyzimkrv4hwdmdgaaf5yaa
       color: 4.2.3
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       react-native-gesture-handler: 2.5.0_jk6ntyzimkrv4hwdmdgaaf5yaa
       react-native-safe-area-context: 4.3.1_jk6ntyzimkrv4hwdmdgaaf5yaa
       react-native-screens: 3.15.0_jk6ntyzimkrv4hwdmdgaaf5yaa
@@ -4837,7 +4819,7 @@ packages:
       '@rnx-kit/tools-node': 1.3.0
       '@rnx-kit/tools-workspaces': 0.1.1
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
     transitivePeerDependencies:
       - '@babel/core'
       - '@babel/plugin-transform-typescript'
@@ -6688,7 +6670,7 @@ packages:
       tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
     dependencies:
       mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.18
     dev: false
 
   /@tailwindcss/line-clamp/0.4.2:
@@ -6702,7 +6684,7 @@ packages:
     peerDependencies:
       tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
     dependencies:
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.18
     dev: true
 
   /@tailwindcss/typography/0.5.7:
@@ -6725,7 +6707,7 @@ packages:
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.1.8
+      tailwindcss: 3.1.8_postcss@8.4.18
     dev: true
 
   /@tanstack/match-sorter-utils/8.5.14:
@@ -6806,7 +6788,7 @@ packages:
     dependencies:
       '@tanstack/query-core': 4.12.0
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       use-sync-external-store: 1.2.0_react@18.0.0
     dev: false
 
@@ -7164,7 +7146,7 @@ packages:
     resolution: {integrity: sha512-l6NQsDDyQUVeoTynNpC9uRvCUint/gSUXQA2euwmTuWGvPY5LSDUu6tkCtJB2SvGQlJQzLaKqcGZP4//7EDveA==}
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 16.11.66
+      '@types/node': 18.11.0
     dev: true
 
   /@types/graceful-fs/4.1.5:
@@ -7270,6 +7252,7 @@ packages:
 
   /@types/node/16.11.66:
     resolution: {integrity: sha512-+xvMrGl3eAygKcf5jm+4zA4tbfEgmKM9o6/glTmN0RFVdu2VuFXMYYtRmuv3zTGCgAYMnEZLde3B7BTp+Yxcig==}
+    dev: true
 
   /@types/node/16.9.1:
     resolution: {integrity: sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==}
@@ -7292,6 +7275,7 @@ packages:
 
   /@types/parse-json/4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
+    dev: true
 
   /@types/parse5/5.0.3:
     resolution: {integrity: sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==}
@@ -7399,6 +7383,7 @@ packages:
     dependencies:
       tailwindcss: 3.1.8
     transitivePeerDependencies:
+      - postcss
       - ts-node
     dev: true
 
@@ -8530,6 +8515,7 @@ packages:
       normalize-range: 0.1.2
       picocolors: 1.0.0
       postcss-value-parser: 4.2.0
+    dev: false
 
   /autoprefixer/10.4.12_postcss@8.4.18:
     resolution: {integrity: sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==}
@@ -8545,6 +8531,7 @@ packages:
       picocolors: 1.0.0
       postcss: 8.4.18
       postcss-value-parser: 4.2.0
+    dev: true
 
   /autoprefixer/9.8.8:
     resolution: {integrity: sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==}
@@ -8775,7 +8762,7 @@ packages:
       '@babel/preset-env': 7.19.4_@babel+core@7.19.3
       babel-plugin-module-resolver: 4.1.0
       babel-plugin-react-native-web: 0.18.9
-      metro-react-native-babel-preset: 0.70.3
+      metro-react-native-babel-preset: 0.70.3_@babel+core@7.19.3
     transitivePeerDependencies:
       - '@babel/core'
       - supports-color
@@ -9462,6 +9449,7 @@ packages:
   /callsites/3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
+    dev: true
 
   /camel-case/4.1.2:
     resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
@@ -10175,6 +10163,7 @@ packages:
       parse-json: 5.2.0
       path-type: 4.0.0
       yaml: 1.10.2
+    dev: true
 
   /cp-file/7.0.0:
     resolution: {integrity: sha512-0Cbj7gyvFVApzpK/uhCtQ/9kE9UnYpxMzaq5nQQC/Dh4iaj5fxp7iEFIullrYwzj8nf0qnsI1Qsx34hAeAebvw==}
@@ -13698,18 +13687,6 @@ packages:
     engines: {node: '>=10.17.0'}
     dev: true
 
-  /iconoir-react/5.3.2_react@18.2.0:
-    resolution: {integrity: sha512-5p5FQAkX6ZAuk1UE/4RmjI9BgI5FSqTbgyUT/m74bfHxl57YAuU7sRdnvrLe97I9IbbiC2uKnGl90xVcBD07rQ==}
-    peerDependencies:
-      react: ^16.8.6 || ^17 || ^18
-    dependencies:
-      react: 18.2.0
-    dev: false
-
-  /iconoir/5.3.2:
-    resolution: {integrity: sha512-om9zHIRaoRs4XUXq11+/RB7lucY8eiz2nX1+DV0VjefMDAlncKctygz6Z/11lQDkISuyaBcbYDpJQvFcaEGvdg==}
-    dev: false
-
   /iconv-lite/0.4.23:
     resolution: {integrity: sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==}
     engines: {node: '>=0.10.0'}
@@ -13820,6 +13797,7 @@ packages:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
+    dev: true
 
   /import-lazy/2.1.0:
     resolution: {integrity: sha512-m7ZEHgtw69qOGw+jwxXkHlrlIPdTGkyh66zXZ1ajZbxkDBNjSY/LGbmjc7h0s2ELsUDTAhFr55TrPSSqJGPG0A==}
@@ -14640,7 +14618,7 @@ packages:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 16.11.66
+      '@types/node': 18.11.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -14793,6 +14771,7 @@ packages:
 
   /json-parse-even-better-errors/2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+    dev: true
 
   /json-schema-deref-sync/0.13.0:
     resolution: {integrity: sha512-YBOEogm5w9Op337yb6pAT6ZXDqlxAsQCanM3grid8lMWNxRJO/zWEJi3ZzqDL8boWfwhTFym5EFrNgWwpqcBRg==}
@@ -15222,7 +15201,7 @@ packages:
     dependencies:
       invariant: 2.2.4
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       react-native-safe-modules: 1.0.3_react-native@0.69.4
     dev: false
 
@@ -15654,8 +15633,10 @@ packages:
     dependencies:
       uglify-es: 3.3.9
 
-  /metro-react-native-babel-preset/0.70.3:
+  /metro-react-native-babel-preset/0.70.3_@babel+core@7.19.3:
     resolution: {integrity: sha512-4Nxc1zEiHEu+GTdEMEsHnRgfaBkg8f/Td3+FcQ8NTSvs+xL3LBrQy6N07idWSQZHIdGFf+tTHvRfSIWLD8u8Tg==}
+    peerDependencies:
+      '@babel/core': '*'
     dependencies:
       '@babel/core': 7.19.3
       '@babel/plugin-proposal-async-generator-functions': 7.19.1_@babel+core@7.19.3
@@ -15699,14 +15680,16 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /metro-react-native-babel-transformer/0.70.3:
+  /metro-react-native-babel-transformer/0.70.3_@babel+core@7.19.3:
     resolution: {integrity: sha512-WKBU6S/G50j9cfmFM4k4oRYprd8u3qjleD4so1E2zbTNILg+gYla7ZFGCAvi2G0ZcqS2XuGCR375c2hF6VVvwg==}
+    peerDependencies:
+      '@babel/core': '*'
     dependencies:
       '@babel/core': 7.19.3
       babel-preset-fbjs: 3.4.0_@babel+core@7.19.3
       hermes-parser: 0.6.0
       metro-babel-transformer: 0.70.3
-      metro-react-native-babel-preset: 0.70.3
+      metro-react-native-babel-preset: 0.70.3_@babel+core@7.19.3
       metro-source-map: 0.70.3
       nullthrows: 1.1.1
     transitivePeerDependencies:
@@ -15819,7 +15802,7 @@ packages:
       metro-hermes-compiler: 0.70.3
       metro-inspector-proxy: 0.70.3
       metro-minify-uglify: 0.70.3
-      metro-react-native-babel-preset: 0.70.3
+      metro-react-native-babel-preset: 0.70.3_@babel+core@7.19.3
       metro-resolver: 0.70.3
       metro-runtime: 0.70.3
       metro-source-map: 0.70.3
@@ -16407,11 +16390,6 @@ packages:
       define-property: 0.2.5
       kind-of: 3.2.2
 
-  /object-hash/2.2.0:
-    resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==}
-    engines: {node: '>= 6'}
-    dev: false
-
   /object-hash/3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
@@ -16850,6 +16828,7 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       callsites: 3.1.0
+    dev: true
 
   /parent-module/2.0.0:
     resolution: {integrity: sha512-uo0Z9JJeWzv8BG+tRcapBKNJ0dro9cLyczGzulS6EfeyAdeC9sbojtW6XwvYxJkEne9En+J2XEl4zyglVeIwFg==}
@@ -16920,6 +16899,7 @@ packages:
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
+    dev: true
 
   /parse-png/2.1.0:
     resolution: {integrity: sha512-Nt/a5SfCLiTnQAjx3fHlqp8hRgTL3z7kTQZzvIMS9uCAepnCyjpdEc6M/sz69WqMBdaDBw9sF1F1UaHROYzGkQ==}
@@ -17081,7 +17061,7 @@ packages:
     dependencies:
       caniuse-lite: 1.0.30001421
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       react-native-svg: 13.0.0_jk6ntyzimkrv4hwdmdgaaf5yaa
     dev: false
 
@@ -17238,6 +17218,16 @@ packages:
       postcss: 7.0.39
     dev: true
 
+  /postcss-import/14.1.0:
+    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.1
+
   /postcss-import/14.1.0_postcss@8.4.18:
     resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
     engines: {node: '>=10.0.0'}
@@ -17249,6 +17239,14 @@ packages:
       read-cache: 1.0.0
       resolve: 1.22.1
 
+  /postcss-js/4.0.0:
+    resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.3.3
+    dependencies:
+      camelcase-css: 2.0.1
+
   /postcss-js/4.0.0_postcss@8.4.18:
     resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
     engines: {node: ^12 || ^14 || >= 16}
@@ -17258,6 +17256,21 @@ packages:
       camelcase-css: 2.0.1
       postcss: 8.4.18
 
+  /postcss-load-config/3.1.4:
+    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.0.6
+      yaml: 1.10.2
+
   /postcss-load-config/3.1.4_postcss@8.4.18:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
@@ -17391,6 +17404,14 @@ packages:
       postcss: 8.4.18
     dev: true
 
+  /postcss-nested/5.0.6:
+    resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss-selector-parser: 6.0.10
+
   /postcss-nested/5.0.6_postcss@8.4.18:
     resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
     engines: {node: '>=12.0'}
@@ -18076,7 +18097,7 @@ packages:
       lodash: 4.17.21
       prop-types: 15.8.1
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
     dev: false
 
   /react-native-gradle-plugin/0.0.7:
@@ -18106,7 +18127,7 @@ packages:
       invariant: 2.2.4
       lodash.isequal: 4.5.0
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       setimmediate: 1.0.5
       string-hash-64: 1.0.3
     transitivePeerDependencies:
@@ -18120,7 +18141,7 @@ packages:
       react-native: '*'
     dependencies:
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
     dev: false
 
   /react-native-safe-modules/1.0.3_react-native@0.69.4:
@@ -18129,7 +18150,7 @@ packages:
       react-native: '*'
     dependencies:
       dedent: 0.6.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
     dev: false
 
   /react-native-screens/3.15.0_jk6ntyzimkrv4hwdmdgaaf5yaa:
@@ -18140,7 +18161,7 @@ packages:
     dependencies:
       react: 18.0.0
       react-freeze: 1.0.3_react@18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       warn-once: 0.1.1
     dev: false
 
@@ -18153,7 +18174,7 @@ packages:
       '@svgr/core': 6.5.0
       '@svgr/plugin-svgo': 6.5.0_@svgr+core@6.5.0
       path-dirname: 1.0.2
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       react-native-svg: 13.0.0_jk6ntyzimkrv4hwdmdgaaf5yaa
     transitivePeerDependencies:
       - supports-color
@@ -18168,9 +18189,9 @@ packages:
       css-select: 5.1.0
       css-tree: 1.1.3
       react: 18.0.0
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
 
-  /react-native/0.69.4_react@18.0.0:
+  /react-native/0.69.4_qwcebhcz7kt2t6qvska3nnpfdm:
     resolution: {integrity: sha512-rqNMialM/T4pHRKWqTIpOxA65B/9kUjtnepxwJqvsdCeMP9Q2YdSx4VASFR9RoEFYcPRU41yGf6EKrChNfns3g==}
     engines: {node: '>=14'}
     hasBin: true
@@ -18178,7 +18199,7 @@ packages:
       react: 18.0.0
     dependencies:
       '@jest/create-cache-key-function': 27.5.1
-      '@react-native-community/cli': 8.0.6_react-native@0.69.4
+      '@react-native-community/cli': 8.0.6_2wrsnxuq7u2kmzd6diim7k7fvu
       '@react-native-community/cli-platform-android': 8.0.5
       '@react-native-community/cli-platform-ios': 8.0.6
       '@react-native/assets': 1.0.0
@@ -18192,7 +18213,7 @@ packages:
       invariant: 2.2.4
       jsc-android: 250230.2.1
       memoize-one: 5.2.1
-      metro-react-native-babel-transformer: 0.70.3
+      metro-react-native-babel-transformer: 0.70.3_@babel+core@7.19.3
       metro-runtime: 0.70.3
       metro-source-map: 0.70.3
       mkdirp: 0.5.6
@@ -18212,6 +18233,7 @@ packages:
       whatwg-fetch: 3.6.2
       ws: 6.2.2
     transitivePeerDependencies:
+      - '@babel/core'
       - '@babel/preset-env'
       - bufferutil
       - encoding
@@ -18796,6 +18818,7 @@ packages:
   /resolve-from/4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
+    dev: true
 
   /resolve-from/5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
@@ -20184,44 +20207,44 @@ packages:
     resolution: {integrity: sha512-32gv65ommaEMPKRS9yPmbvc6QcV+LsAqtSe1RFindBctVpS6+SbmkfcdecW/zgRvHW7KeAgl3iyzq2ZmRqsdZQ==}
     dev: false
 
-  /tailwindcss/0.0.0-insiders.fe08e91_xkowlklhtk6sfvtndbucb3hfiy:
-    resolution: {integrity: sha512-W8rB1l3I1xEHJGnPGXqzeuq81F+AKGH+sn3c1jiH+Ydp7vyn/KhNr7niwe5e2MA538NUhtqlGL2wOeJlvXD2pw==}
+  /tailwindcss/3.1.8:
+    resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==}
     engines: {node: '>=12.13.0'}
     hasBin: true
     peerDependencies:
-      autoprefixer: ^10.0.2
       postcss: ^8.0.9
     dependencies:
       arg: 5.0.2
-      autoprefixer: 10.4.12_postcss@8.4.18
-      chalk: 4.1.2
       chokidar: 3.5.3
       color-name: 1.1.4
-      cosmiconfig: 7.0.1
       detective: 5.2.1
       didyoumean: 1.2.2
       dlv: 1.1.3
       fast-glob: 3.2.12
       glob-parent: 6.0.2
       is-glob: 4.0.3
+      lilconfig: 2.0.6
       normalize-path: 3.0.0
-      object-hash: 2.2.0
+      object-hash: 3.0.0
+      picocolors: 1.0.0
       postcss: 8.4.18
-      postcss-js: 4.0.0_postcss@8.4.18
-      postcss-load-config: 3.1.4_postcss@8.4.18
-      postcss-nested: 5.0.6_postcss@8.4.18
+      postcss-import: 14.1.0
+      postcss-js: 4.0.0
+      postcss-load-config: 3.1.4
+      postcss-nested: 5.0.6
       postcss-selector-parser: 6.0.10
       postcss-value-parser: 4.2.0
       quick-lru: 5.1.1
       resolve: 1.22.1
     transitivePeerDependencies:
       - ts-node
-    dev: false
 
-  /tailwindcss/3.1.8:
+  /tailwindcss/3.1.8_postcss@8.4.18:
     resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==}
     engines: {node: '>=12.13.0'}
     hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
     dependencies:
       arg: 5.0.2
       chokidar: 3.5.3
@@ -21092,9 +21115,10 @@ packages:
     peerDependencies:
       react-native: '>=0.63.0'
     dependencies:
-      react-native: 0.69.4_react@18.0.0
+      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
       tailwindcss: 3.1.8
     transitivePeerDependencies:
+      - postcss
       - ts-node
     dev: false