improvements to key manager ui

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

@@ -1,4 +1,4 @@
-import { ChevronLeftIcon, ChevronRightIcon, PhotoIcon } from '@heroicons/react/24/outline';
+import { ChevronLeftIcon, ChevronRightIcon, TagIcon } from '@heroicons/react/24/outline';
 import {
 	OperatingSystem,
 	getExplorerStore,
@@ -264,12 +264,12 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 								// </Tooltip>
 							}
 						>
-							<div className="block w-[350px] h-[435px]">
+							<div className="block w-[350px]">
 								<KeyManager />
 							</div>
 						</OverlayPanel>
-						<Tooltip label="Cloud">
-							<TopBarButton icon={Cloud} />
+						<Tooltip label="Tag Assign Mode">
+							<TopBarButton icon={TagIcon} />
 						</Tooltip>
 						<Tooltip label="Refresh">
 							<TopBarButton icon={ArrowsClockwise} />

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

@@ -0,0 +1,103 @@
+import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import {
+	EllipsisVerticalIcon,
+	EyeIcon,
+	EyeSlashIcon,
+	KeyIcon,
+	LockClosedIcon,
+	LockOpenIcon,
+	PlusIcon,
+	TrashIcon,
+	XMarkIcon
+} from '@heroicons/react/24/solid';
+import { Button, Input, Select, SelectOption } from '@sd/ui';
+import clsx from 'clsx';
+import { Eject, EjectSimple, Plus } from 'phosphor-react';
+import { useState } from 'react';
+
+import { Toggle } from '../primitive';
+import { DefaultProps } from '../primitive/types';
+import { Tooltip } from '../tooltip/Tooltip';
+
+export type KeyManagerProps = DefaultProps;
+
+// TODO: Replace this with Prisma type when integrating with backend
+export interface Key {
+	id: string;
+	name: string;
+	mounted?: boolean;
+	locked?: boolean;
+	stats?: {
+		objectCount?: number;
+		containerCount?: number;
+	};
+	// Nodes this key is mounted on
+	nodes?: string[]; // will be node object
+}
+
+export const Key: React.FC<{ data: Key; index: number }> = ({ data, index }) => {
+	const odd = (index || 0) % 2 === 0;
+
+	return (
+		<div
+			className={clsx(
+				'flex items-center justify-between px-2 py-1.5 shadow-gray-900/20 text-sm text-gray-300 bg-gray-500/30 shadow-lg border-gray-500 rounded-lg'
+				// !odd && 'bg-opacity-10'
+			)}
+		>
+			<div className="flex items-center">
+				<KeyIcon
+					className={clsx(
+						'w-5 h-5 ml-1 mr-3',
+						data.mounted
+							? data.locked
+								? 'text-primary-600'
+								: 'text-primary-600'
+							: 'text-gray-400/80'
+					)}
+				/>
+				<div className="flex flex-col ">
+					<div className="flex flex-row items-center">
+						<div className="font-semibold">{data.name}</div>
+						{data.mounted && (
+							<div className="inline ml-2 px-1 text-[8pt] font-medium text-gray-300 bg-gray-500 rounded">
+								{data.nodes?.length || 0 > 0 ? `${data.nodes?.length || 0} nodes` : 'This node'}
+							</div>
+						)}
+					</div>
+					{/* <div className="text-xs text-gray-300 opacity-30">#{data.id}</div> */}
+					{data.stats ? (
+						<div className="flex flex-row mt-[1px] space-x-3">
+							{data.stats.objectCount && (
+								<div className="text-[8pt] font-medium text-gray-200 opacity-30">
+									{data.stats.objectCount} Objects
+								</div>
+							)}
+							{data.stats.containerCount && (
+								<div className="text-[8pt] font-medium text-gray-200 opacity-30">
+									{data.stats.containerCount} Containers
+								</div>
+							)}
+						</div>
+					) : (
+						!data.mounted && (
+							<div className="text-[8pt] font-medium text-gray-200 opacity-30">Key not mounted</div>
+						)
+					)}
+				</div>
+			</div>
+			<div className="space-x-1">
+				{data.mounted && (
+					<Tooltip label="Browse files">
+						<Button noPadding>
+							<EyeIcon className="w-4 h-4 text-gray-400" />
+						</Button>
+					</Tooltip>
+				)}
+				<Button noPadding>
+					<EllipsisVerticalIcon className="w-4 h-4 text-gray-400" />
+				</Button>
+			</div>
+		</div>
+	);
+};

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

@@ -0,0 +1,59 @@
+import { Button, CategoryHeading, Input, Select, SelectOption } from '@sd/ui';
+import clsx from 'clsx';
+import { Eject, EjectSimple, Plus } from 'phosphor-react';
+import { useState } from 'react';
+
+import { Toggle } from '../primitive';
+import { DefaultProps } from '../primitive/types';
+import { Tooltip } from '../tooltip/Tooltip';
+import { Key } from './Key';
+
+export type KeyListProps = DefaultProps;
+
+export function KeyList(props: KeyListProps) {
+	return (
+		<div className="flex flex-col h-full max-h-[360px]">
+			<div className="p-3 custom-scroll overlay-scroll">
+				<div className="">
+					{/* <CategoryHeading>Mounted keys</CategoryHeading> */}
+					<div className="space-y-1.5">
+						<Key
+							index={0}
+							data={{
+								id: 'af5570f5a1810b7a',
+								name: 'OBS Recordings',
+								mounted: true,
+
+								nodes: ['node1', 'node2'],
+								stats: { objectCount: 235, containerCount: 2 }
+							}}
+						/>
+						<Key
+							index={1}
+							data={{
+								id: 'af5570f5a1810b7a',
+								name: 'Unknown Key',
+								locked: true,
+								mounted: true,
+								stats: { objectCount: 45 }
+							}}
+						/>
+						<Key index={2} data={{ id: '7324695a52da67b1', name: 'Spacedrive Company' }} />
+						<Key index={3} data={{ id: 'b02303d68d05a562', name: 'Key 4' }} />
+						<Key index={3} data={{ id: 'b02303d68d05a562', name: 'Key 5' }} />
+						<Key index={3} data={{ id: 'b02303d68d05a562', name: 'Key 6' }} />
+					</div>
+				</div>
+			</div>
+			<div className="flex w-full p-2 bg-gray-600 border-t border-gray-500 rounded-b-md">
+				<Button size="sm" variant="gray">
+					Unmount All
+				</Button>
+				<div className="flex-grow" />
+				<Button size="sm" variant="gray">
+					Close
+				</Button>
+			</div>
+		</div>
+	);
+}

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

@@ -1,15 +1,4 @@
-import { InformationCircleIcon } from '@heroicons/react/24/outline';
-import {
-	EyeIcon,
-	EyeSlashIcon,
-	KeyIcon,
-	LockClosedIcon,
-	LockOpenIcon,
-	PlusIcon,
-	TrashIcon,
-	XMarkIcon
-} from '@heroicons/react/24/solid';
-import { Button, Input } from '@sd/ui';
+import { Button, Input, Select, SelectOption, Tabs } from '@sd/ui';
 import clsx from 'clsx';
 import { Eject, EjectSimple, Plus } from 'phosphor-react';
 import { useState } from 'react';
@@ -17,189 +6,31 @@ import { useState } from 'react';
 import { Toggle } from '../primitive';
 import { DefaultProps } from '../primitive/types';
 import { Tooltip } from '../tooltip/Tooltip';
+import { Key } from './Key';
+import { KeyList } from './KeyList';
+import { KeyMounter } from './KeyMounter';
 
 export type KeyManagerProps = DefaultProps;
 
-interface FakeKey {
-	id: string;
-	name: string;
-	mounted?: boolean;
-	locked?: boolean;
-	stats?: {
-		objectCount?: number;
-		containerCount?: number;
-	};
-	// Nodes this key is mounted on
-	nodes?: string[]; // will be node object
-}
-
-const Heading: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-	<div className="mt-1 mb-1 text-xs font-semibold text-gray-300">{children}</div>
-);
-
-const Key: React.FC<{ data: FakeKey; index: number }> = ({ data, index }) => {
-	const odd = (index || 0) % 2 === 0;
-
-	return (
-		<div
-			className={clsx(
-				'flex items-center justify-between px-2 py-1.5 shadow-gray-900/20 text-sm text-gray-300 bg-gray-500/30 shadow-lg border-gray-500 rounded-lg'
-				// !odd && 'bg-opacity-10'
-			)}
-		>
-			<div className="flex items-center">
-				<KeyIcon
-					className={clsx(
-						'w-5 h-5 ml-1 mr-3',
-						data.mounted
-							? data.locked
-								? 'text-primary-600'
-								: 'text-primary-600'
-							: 'text-gray-400/80'
-					)}
-				/>
-				<div className="flex flex-col ">
-					<div className="flex flex-row items-center">
-						<div className="font-semibold">{data.name}</div>
-						{data.mounted && (
-							<div className="inline ml-2 px-1 text-[8pt] font-medium text-gray-300 bg-gray-500 rounded">
-								{data.nodes?.length || 0 > 0 ? `${data.nodes?.length || 0} nodes` : 'This node'}
-							</div>
-						)}
-					</div>
-					{/* <div className="text-xs text-gray-300 opacity-30">#{data.id}</div> */}
-					{data.stats && (
-						<div className="flex flex-row mt-[1px] space-x-3">
-							{data.stats.objectCount && (
-								<div className="text-[8pt] font-medium text-gray-200 opacity-30">
-									{data.stats.objectCount} Objects
-								</div>
-							)}
-							{data.stats.containerCount && (
-								<div className="text-[8pt] font-medium text-gray-200 opacity-30">
-									{data.stats.containerCount} Containers
-								</div>
-							)}
-						</div>
-					)}
-				</div>
-			</div>
-			<div className="space-x-1">
-				{data.mounted ? (
-					<>
-						<Tooltip label="Browse files">
-							<Button noPadding>
-								<EyeIcon className="w-4 h-4 text-gray-400" />
-							</Button>
-						</Tooltip>
-
-						{data.locked ? (
-							<Tooltip label="Unlock key">
-								<Button noPadding>
-									<LockClosedIcon className="w-4 h-4 text-gray-400" />
-								</Button>
-							</Tooltip>
-						) : (
-							<Tooltip label="Lock key">
-								<Button noPadding>
-									<LockOpenIcon className="w-4 h-4 text-gray-400" />
-								</Button>
-							</Tooltip>
-						)}
-					</>
-				) : (
-					<Tooltip label="Dismount key">
-						<Button noPadding>
-							<XMarkIcon className="w-4 h-4 text-gray-400" />
-						</Button>
-					</Tooltip>
-				)}
-			</div>
-		</div>
-	);
-};
-
 export function KeyManager(props: KeyManagerProps) {
-	const [showKey, setShowKey] = useState(false);
-	const [toggle, setToggle] = useState(false);
-
-	const CurrentEyeIcon = showKey ? EyeSlashIcon : EyeIcon;
-
 	return (
-		<div className="flex flex-col h-full">
-			<div className="p-3 pt-3">
-				<Heading>Mount key</Heading>
-				<div className="flex space-x-2">
-					<div className="relative flex flex-grow">
-						<Input autoFocus type={showKey ? 'text' : 'password'} className="flex-grow !py-0.5" />
-						<Button
-							onClick={() => setShowKey(!showKey)}
-							noBorder
-							noPadding
-							className="absolute right-[5px] top-[5px]"
-						>
-							<CurrentEyeIcon className="w-4 h-4" />
-						</Button>
-					</div>
-					<Tooltip className="flex" label="Mount key">
-						<Button variant="gray" noPadding>
-							<Plus weight="fill" className="w-4 h-4 mx-1" />
-						</Button>
-					</Tooltip>
-				</div>
-				<div className="flex flex-row items-center mt-3 mb-1">
-					<Toggle className="dark:bg-gray-400/30" size="sm" value={toggle} onChange={setToggle} />
-					<span className="ml-3 mt-[1px] font-medium text-xs">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-gray-400" />
-					</Tooltip>
-				</div>
-				<p className="pt-1.5 ml-0.5 text-[8pt] leading-snug text-gray-300 opacity-50 w-[90%]">
-					Files encrypted with this key will be revealed and decrypted on the fly.
-				</p>
-			</div>
-			<hr className="border-gray-500" />
-			<div className="p-3 custom-scroll overlay-scroll">
-				<div className="">
-					<Heading>Mounted keys</Heading>
-					<div className="pt-1 space-y-1.5">
-						<Key
-							index={0}
-							data={{
-								id: 'af5570f5a1810b7a',
-								name: 'OBS Recordings',
-								mounted: true,
-
-								nodes: ['node1', 'node2'],
-								stats: { objectCount: 235, containerCount: 2 }
-							}}
-						/>
-						<Key
-							index={1}
-							data={{
-								id: 'af5570f5a1810b7a',
-								name: 'Unknown Key',
-								locked: true,
-								mounted: true,
-								stats: { objectCount: 45 }
-							}}
-						/>
-						<Key index={2} data={{ id: '7324695a52da67b1', name: 'Spacedrive Company' }} />
-						<Key index={3} data={{ id: 'b02303d68d05a562', name: 'Key 4' }} />
-						<Key index={3} data={{ id: 'b02303d68d05a562', name: 'Key 5' }} />
-						<Key index={3} data={{ id: 'b02303d68d05a562', name: 'Key 6' }} />
-					</div>
-				</div>
-			</div>
-			<div className="flex w-full p-2 bg-gray-600 border-t border-gray-500 rounded-b-md">
-				<Button size="sm" variant="gray">
-					Unmount All
-				</Button>
-				<div className="flex-grow" />
-				<Button size="sm" variant="gray">
-					Close
-				</Button>
-			</div>
+		<div>
+			<Tabs.Root defaultValue="mount">
+				<Tabs.List>
+					<Tabs.Trigger className="text-sm font-medium text-gray-300" value="mount">
+						Mount
+					</Tabs.Trigger>
+					<Tabs.Trigger className="text-sm font-medium text-gray-300" value="keys">
+						Keys
+					</Tabs.Trigger>
+				</Tabs.List>
+				<Tabs.Content value="keys">
+					<KeyList />
+				</Tabs.Content>
+				<Tabs.Content value="mount">
+					<KeyMounter />
+				</Tabs.Content>
+			</Tabs.Root>
 		</div>
 	);
 }

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

@@ -0,0 +1,87 @@
+import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import {
+	EllipsisVerticalIcon,
+	EyeIcon,
+	EyeSlashIcon,
+	KeyIcon,
+	LockClosedIcon,
+	LockOpenIcon,
+	PlusIcon,
+	TrashIcon,
+	XMarkIcon
+} from '@heroicons/react/24/solid';
+import { Button, CategoryHeading, Input, Select, SelectOption } from '@sd/ui';
+import clsx from 'clsx';
+import { Eject, EjectSimple, Plus } from 'phosphor-react';
+import { useState } from 'react';
+
+import { Toggle } from '../primitive';
+import { DefaultProps } from '../primitive/types';
+import { Tooltip } from '../tooltip/Tooltip';
+import { Key } from './Key';
+
+export function KeyMounter() {
+	const [showKey, setShowKey] = useState(false);
+	const [toggle, setToggle] = useState(false);
+
+	const [key, setKey] = useState('');
+	const [encryptionAlgo, setEncryptionAlgo] = useState('XChaCha20Poly1305');
+	const [hashingAlgo, setHashingAlgo] = useState('Argon2id');
+
+	const CurrentEyeIcon = showKey ? EyeSlashIcon : EyeIcon;
+
+	return (
+		<div className="p-3 pt-3 mb-1">
+			<CategoryHeading>Mount key</CategoryHeading>
+			<div className="flex space-x-2">
+				<div className="relative flex flex-grow">
+					<Input
+						value={key}
+						onChange={(e) => setKey(e.target.value)}
+						autoFocus
+						type={showKey ? 'text' : 'password'}
+						className="flex-grow !py-0.5"
+					/>
+					<Button
+						onClick={() => setShowKey(!showKey)}
+						noBorder
+						noPadding
+						className="absolute right-[5px] top-[5px]"
+					>
+						<CurrentEyeIcon className="w-4 h-4" />
+					</Button>
+				</div>
+			</div>
+
+			<div className="flex flex-row items-center mt-3 mb-1">
+				<Toggle className="dark:bg-gray-400/30" size="sm" value={toggle} onChange={setToggle} />
+				<span className="ml-3 mt-[1px] font-medium text-xs">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-gray-400" />
+				</Tooltip>
+			</div>
+
+			<div className="grid w-full grid-cols-2 gap-4 mt-4 mb-3">
+				<div className="flex flex-col">
+					<span className="text-xs font-bold">Encryption</span>
+					<Select className="mt-2" onChange={setEncryptionAlgo} value={encryptionAlgo}>
+						<SelectOption value="XChaCha20Poly1305">XChaCha20Poly1305</SelectOption>
+						<SelectOption value="Aes256Gcm">Aes256Gcm</SelectOption>
+					</Select>
+				</div>
+				<div className="flex flex-col">
+					<span className="text-xs font-bold">Hashing</span>
+					<Select className="mt-2" onChange={setHashingAlgo} value={hashingAlgo}>
+						<SelectOption value="Argon2id">Argon2id</SelectOption>
+					</Select>
+				</div>
+			</div>
+			<p className="pt-1.5 ml-0.5 text-[8pt] leading-snug text-gray-300 opacity-50 w-[90%]">
+				Files encrypted with this key will be revealed and decrypted on the fly.
+			</p>
+			<Button className="w-full mt-2" variant="primary">
+				Mount Key
+			</Button>
+		</div>
+	);
+}

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

@@ -2,7 +2,7 @@ import { CogIcon, LockClosedIcon, PhotoIcon } from '@heroicons/react/24/outline'
 import { PlusIcon } from '@heroicons/react/24/solid';
 import { useCurrentLibrary, useLibraryMutation, useLibraryQuery, usePlatform } from '@sd/client';
 import { LocationCreateArgs } from '@sd/client';
-import { Button, Dropdown, OverlayPanel } from '@sd/ui';
+import { Button, CategoryHeading, Dropdown, OverlayPanel } from '@sd/ui';
 import clsx from 'clsx';
 import { CheckCircle, CirclesFour, Planet, WaveTriangle } from 'phosphor-react';
 import { NavLink, NavLinkProps, useNavigate } from 'react-router-dom';
@@ -37,10 +37,6 @@ const Icon = ({ component: Icon, ...props }: any) => (
 	<Icon weight="bold" {...props} className={clsx('w-4 h-4 mr-2', props.className)} />
 );
 
-const Heading: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-	<div className="mt-5 mb-1 ml-1 text-xs font-semibold text-gray-300">{children}</div>
-);
-
 // cute little helper to decrease code clutter
 const macOnly = (platform: string | undefined, classnames: string) =>
 	platform === 'macOS' ? classnames : '';
@@ -71,7 +67,7 @@ function LibraryScopedSection() {
 	return (
 		<>
 			<div>
-				<Heading>Locations</Heading>
+				<CategoryHeading>Locations</CategoryHeading>
 				{locations?.map((location) => {
 					return (
 						<div key={location.id} className="flex flex-row items-center">
@@ -135,7 +131,7 @@ function LibraryScopedSection() {
 			</div>
 			{tags?.length ? (
 				<div>
-					<Heading>Tags</Heading>
+					<CategoryHeading>Tags</CategoryHeading>
 					<div className="mb-2">
 						{tags?.slice(0, 6).map((tag, index) => (
 							<SidebarLink key={index} to={`tag/${tag.id}`} className="">

packages/ui/package.json

@@ -20,21 +20,23 @@
 		"@headlessui/react": "^1.7.3",
 		"@heroicons/react": "^2.0.12",
 		"@radix-ui/react-context-menu": "^1.0.0",
-		"@radix-ui/react-select": "^1.0.0",
 		"@radix-ui/react-dialog": "^1.0.0",
 		"@radix-ui/react-dropdown-menu": "^1.0.0",
+		"@radix-ui/react-select": "^1.0.0",
+		"@radix-ui/react-tabs": "^1.0.0",
+		"@sd/assets": "workspace:*",
 		"@tailwindcss/forms": "^0.5.3",
 		"class-variance-authority": "^0.2.3",
-		"@sd/assets": "workspace:*",
 		"clsx": "^1.2.1",
 		"phosphor-react": "^1.4.1",
 		"postcss": "^8.4.17",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-router-dom": "6.4.2",
 		"react-loading-icons": "^1.1.0",
+		"react-router-dom": "6.4.2",
 		"react-spring": "^9.5.5",
 		"storybook": "^6.5.12",
+		"tailwind-styled-components": "2.1.7",
 		"tailwindcss": "^3.1.8",
 		"tailwindcss-radix": "^2.6.0"
 	},

packages/ui/src/Tabs.tsx

@@ -0,0 +1,16 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import tw from 'tailwind-styled-components';
+
+export const Root = tw(TabsPrimitive.Root)`
+  flex flex-col 
+`;
+
+export const Content = tw(TabsPrimitive.TabsContent)``;
+
+export const List = tw(TabsPrimitive.TabsList)`
+  flex flex-row p-2 items-center space-x-1 border-b border-gray-500/30
+`;
+
+export const Trigger = tw(TabsPrimitive.TabsTrigger)`
+  text-white px-1.5 py-0.5 rounded text-sm font-medium radix-state-active:bg-primary
+`;

packages/ui/src/Typography.tsx

@@ -0,0 +1,3 @@
+import tw from 'tailwind-styled-components';
+
+export const CategoryHeading = tw.h3`mt-1 mb-1 text-xs font-semibold text-gray-300`;

packages/ui/src/index.ts

@@ -6,3 +6,5 @@ export * as ContextMenu from './ContextMenu';
 export * from './OverlayPanel';
 export * from './Input';
 export * from './Select';
+export * as Tabs from './Tabs';
+export * from './Typography';

pnpm-lock.yaml

@@ -265,7 +265,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_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       react-native-gesture-handler: 2.5.0_jk6ntyzimkrv4hwdmdgaaf5yaa
       react-native-heroicons: 2.2.0_wxlif5cfng7xfd3uerlw46xcs4
       react-native-reanimated: 2.10.0_ifayjdo6vuwky63y7hdw4ayxzu
@@ -373,7 +373,7 @@ importers:
       '@types/node': 18.8.2
       autoprefixer: 10.4.12_postcss@8.4.17
       postcss: 8.4.17
-      tailwindcss: 3.1.8_postcss@8.4.17
+      tailwindcss: 3.1.8
       typescript: 4.8.4
       vite: 3.1.4
       vite-plugin-solid: 2.3.9_solid-js@1.5.7+vite@3.1.4
@@ -601,6 +601,7 @@ importers:
       '@radix-ui/react-dialog': ^1.0.0
       '@radix-ui/react-dropdown-menu': ^1.0.0
       '@radix-ui/react-select': ^1.0.0
+      '@radix-ui/react-tabs': ^1.0.0
       '@sd/assets': workspace:*
       '@sd/config': workspace:*
       '@storybook/addon-actions': ^6.5.12
@@ -636,6 +637,7 @@ importers:
       storybook: ^6.5.12
       storybook-tailwind-dark-mode: ^1.0.15
       style-loader: ^3.3.1
+      tailwind-styled-components: 2.1.7
       tailwindcss: ^3.1.8
       tailwindcss-radix: ^2.6.0
       typescript: ^4.8.4
@@ -646,6 +648,7 @@ importers:
       '@radix-ui/react-dialog': 1.0.0_rj7ozvcq3uehdlnj3cbwzbi5ce
       '@radix-ui/react-dropdown-menu': 1.0.0_rj7ozvcq3uehdlnj3cbwzbi5ce
       '@radix-ui/react-select': 1.0.0_rj7ozvcq3uehdlnj3cbwzbi5ce
+      '@radix-ui/react-tabs': 1.0.0_biqbaboplfbrettd7655fr4n2y
       '@sd/assets': link:../assets
       '@tailwindcss/forms': 0.5.3_tailwindcss@3.1.8
       class-variance-authority: 0.2.3_typescript@4.8.4
@@ -658,7 +661,8 @@ importers:
       react-router-dom: 6.4.2_biqbaboplfbrettd7655fr4n2y
       react-spring: 9.5.5_biqbaboplfbrettd7655fr4n2y
       storybook: 6.5.12_yalvw3r2waubxycyb7k7qsruca
-      tailwindcss: 3.1.8_postcss@8.4.17
+      tailwind-styled-components: 2.1.7_biqbaboplfbrettd7655fr4n2y
+      tailwindcss: 3.1.8
       tailwindcss-radix: 2.6.0
     devDependencies:
       '@babel/core': 7.19.3
@@ -2213,8 +2217,8 @@ packages:
       '@cspell/dict-docker': 1.1.1
       '@cspell/dict-dotnet': 2.0.1
       '@cspell/dict-elixir': 2.0.1
-      '@cspell/dict-en-gb': 1.1.33
       '@cspell/dict-en_us': 2.3.3
+      '@cspell/dict-en-gb': 1.1.33
       '@cspell/dict-filetypes': 2.1.1
       '@cspell/dict-fonts': 2.1.0
       '@cspell/dict-fullstack': 2.0.6
@@ -2962,7 +2966,7 @@ packages:
       '@gorhom/portal': 1.0.14_jk6ntyzimkrv4hwdmdgaaf5yaa
       invariant: 2.2.4
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       react-native-gesture-handler: 2.5.0_jk6ntyzimkrv4hwdmdgaaf5yaa
       react-native-reanimated: 2.10.0_ifayjdo6vuwky63y7hdw4ayxzu
     dev: false
@@ -2975,7 +2979,7 @@ packages:
     dependencies:
       nanoid: 3.3.4
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
     dev: false
 
   /@graphql-typed-document-node/core/3.1.1_graphql@15.8.0:
@@ -4282,7 +4286,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_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
     dev: false
 
   /@react-native-community/cli-clean/8.0.4:
@@ -4375,7 +4379,7 @@ packages:
     transitivePeerDependencies:
       - encoding
 
-  /@react-native-community/cli-plugin-metro/8.0.4_@babel+core@7.19.3:
+  /@react-native-community/cli-plugin-metro/8.0.4:
     resolution: {integrity: sha512-UWzY1eMcEr/6262R2+d0Is5M3L/7Y/xXSDIFMoc5Rv5Wucl3hJM/TxHXmByvHpuJf6fJAfqOskyt4bZCvbI+wQ==}
     dependencies:
       '@react-native-community/cli-server-api': 8.0.4
@@ -4384,12 +4388,11 @@ packages:
       metro: 0.70.3
       metro-config: 0.70.3
       metro-core: 0.70.3
-      metro-react-native-babel-transformer: 0.70.3_@babel+core@7.19.3
+      metro-react-native-babel-transformer: 0.70.3
       metro-resolver: 0.70.3
       metro-runtime: 0.70.3
       readline: 1.3.0
     transitivePeerDependencies:
-      - '@babel/core'
       - bufferutil
       - encoding
       - supports-color
@@ -4434,7 +4437,7 @@ packages:
     dependencies:
       joi: 17.6.3
 
-  /@react-native-community/cli/8.0.6_2wrsnxuq7u2kmzd6diim7k7fvu:
+  /@react-native-community/cli/8.0.6_react-native@0.69.4:
     resolution: {integrity: sha512-E36hU/if3quQCfJHGWVkpsCnwtByRCwORuAX0r6yr1ebKktpKeEO49zY9PAu/Z1gfyxCtgluXY0HfRxjKRFXTg==}
     engines: {node: '>=12'}
     hasBin: true
@@ -4446,7 +4449,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_@babel+core@7.19.3
+      '@react-native-community/cli-plugin-metro': 8.0.4
       '@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
@@ -4460,10 +4463,9 @@ packages:
       lodash: 4.17.21
       minimist: 1.2.6
       prompts: 2.4.2
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       semver: 6.3.0
     transitivePeerDependencies:
-      - '@babel/core'
       - bufferutil
       - encoding
       - supports-color
@@ -4476,7 +4478,7 @@ packages:
       react-native: '>=0.57'
     dependencies:
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
     dev: false
 
   /@react-native/assets/1.0.0:
@@ -4501,7 +4503,7 @@ packages:
       '@react-navigation/native': 6.0.13_jk6ntyzimkrv4hwdmdgaaf5yaa
       color: 4.2.3
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       react-native-safe-area-context: 4.3.1_jk6ntyzimkrv4hwdmdgaaf5yaa
       react-native-screens: 3.15.0_jk6ntyzimkrv4hwdmdgaaf5yaa
       warn-once: 0.1.1
@@ -4536,7 +4538,7 @@ packages:
       '@react-navigation/native': 6.0.13_jk6ntyzimkrv4hwdmdgaaf5yaa
       color: 4.2.3
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       react-native-gesture-handler: 2.5.0_jk6ntyzimkrv4hwdmdgaaf5yaa
       react-native-reanimated: 2.10.0_ifayjdo6vuwky63y7hdw4ayxzu
       react-native-safe-area-context: 4.3.1_jk6ntyzimkrv4hwdmdgaaf5yaa
@@ -4554,7 +4556,7 @@ packages:
     dependencies:
       '@react-navigation/native': 6.0.13_jk6ntyzimkrv4hwdmdgaaf5yaa
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       react-native-safe-area-context: 4.3.1_jk6ntyzimkrv4hwdmdgaaf5yaa
     dev: false
 
@@ -4569,7 +4571,7 @@ packages:
       fast-deep-equal: 3.1.3
       nanoid: 3.3.4
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
     dev: false
 
   /@react-navigation/routers/6.1.3:
@@ -4592,7 +4594,7 @@ packages:
       '@react-navigation/native': 6.0.13_jk6ntyzimkrv4hwdmdgaaf5yaa
       color: 4.2.3
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       react-native-gesture-handler: 2.5.0_jk6ntyzimkrv4hwdmdgaaf5yaa
       react-native-safe-area-context: 4.3.1_jk6ntyzimkrv4hwdmdgaaf5yaa
       react-native-screens: 3.15.0_jk6ntyzimkrv4hwdmdgaaf5yaa
@@ -4748,7 +4750,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_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
     transitivePeerDependencies:
       - '@babel/core'
       - '@babel/plugin-transform-typescript'
@@ -6637,7 +6639,7 @@ packages:
       tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
     dependencies:
       mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.1.8_postcss@8.4.17
+      tailwindcss: 3.1.8
     dev: false
 
   /@tailwindcss/line-clamp/0.4.2:
@@ -6651,7 +6653,7 @@ packages:
     peerDependencies:
       tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
     dependencies:
-      tailwindcss: 3.1.8_postcss@8.4.17
+      tailwindcss: 3.1.8
     dev: true
 
   /@tailwindcss/typography/0.5.7:
@@ -6674,7 +6676,7 @@ packages:
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.1.8_postcss@8.4.17
+      tailwindcss: 3.1.8
     dev: true
 
   /@tanstack/match-sorter-utils/8.5.14:
@@ -6751,7 +6753,7 @@ packages:
     dependencies:
       '@tanstack/query-core': 4.10.1
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       use-sync-external-store: 1.2.0_react@18.0.0
     dev: false
 
@@ -7343,7 +7345,6 @@ packages:
     dependencies:
       tailwindcss: 3.1.8
     transitivePeerDependencies:
-      - postcss
       - ts-node
     dev: true
 
@@ -8698,7 +8699,7 @@ packages:
       '@babel/preset-env': 7.19.3_@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_@babel+core@7.19.3
+      metro-react-native-babel-preset: 0.70.3
     transitivePeerDependencies:
       - '@babel/core'
       - supports-color
@@ -9169,7 +9170,7 @@ packages:
     dev: true
 
   /buffer-equal/0.0.1:
-    resolution: {integrity: sha512-RgSV6InVQ9ODPdLWJ5UAqBqJBOg370Nz6ZQtRzpt6nUjc8v0St97uJ4PYC6NztqIScrAXafKM3mZPMygSe1ggA==}
+    resolution: {integrity: sha1-kbx0sR6kBbyRa8aqkI+q+ltKrEs=}
     engines: {node: '>=0.4.0'}
     dev: true
 
@@ -12881,7 +12882,7 @@ packages:
     dev: true
 
   /github-from-package/0.0.0:
-    resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
+    resolution: {integrity: sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4=}
     dev: true
 
   /github-slugger/1.4.0:
@@ -15085,7 +15086,7 @@ packages:
     dependencies:
       invariant: 2.2.4
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       react-native-safe-modules: 1.0.3_react-native@0.69.4
     dev: false
 
@@ -15509,10 +15510,8 @@ packages:
     dependencies:
       uglify-es: 3.3.9
 
-  /metro-react-native-babel-preset/0.70.3_@babel+core@7.19.3:
+  /metro-react-native-babel-preset/0.70.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
@@ -15556,16 +15555,14 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /metro-react-native-babel-transformer/0.70.3_@babel+core@7.19.3:
+  /metro-react-native-babel-transformer/0.70.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_@babel+core@7.19.3
+      metro-react-native-babel-preset: 0.70.3
       metro-source-map: 0.70.3
       nullthrows: 1.1.1
     transitivePeerDependencies:
@@ -15678,7 +15675,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_@babel+core@7.19.3
+      metro-react-native-babel-preset: 0.70.3
       metro-resolver: 0.70.3
       metro-runtime: 0.70.3
       metro-source-map: 0.70.3
@@ -16925,7 +16922,7 @@ packages:
     dependencies:
       caniuse-lite: 1.0.30001416
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       react-native-svg: 13.0.0_jk6ntyzimkrv4hwdmdgaaf5yaa
     dev: false
 
@@ -17080,16 +17077,6 @@ 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.17:
     resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
     engines: {node: '>=10.0.0'}
@@ -17101,14 +17088,6 @@ 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.17:
     resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
     engines: {node: ^12 || ^14 || >= 16}
@@ -17118,21 +17097,6 @@ packages:
       camelcase-css: 2.0.1
       postcss: 8.4.17
 
-  /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.17:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
@@ -17266,14 +17230,6 @@ packages:
       postcss: 8.4.17
     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.17:
     resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
     engines: {node: '>=12.0'}
@@ -17992,7 +17948,7 @@ packages:
       lodash: 4.17.21
       prop-types: 15.8.1
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
     dev: false
 
   /react-native-gradle-plugin/0.0.7:
@@ -18022,7 +17978,7 @@ packages:
       invariant: 2.2.4
       lodash.isequal: 4.5.0
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       setimmediate: 1.0.5
       string-hash-64: 1.0.3
     transitivePeerDependencies:
@@ -18036,7 +17992,7 @@ packages:
       react-native: '*'
     dependencies:
       react: 18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
     dev: false
 
   /react-native-safe-modules/1.0.3_react-native@0.69.4:
@@ -18045,7 +18001,7 @@ packages:
       react-native: '*'
     dependencies:
       dedent: 0.6.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
     dev: false
 
   /react-native-screens/3.15.0_jk6ntyzimkrv4hwdmdgaaf5yaa:
@@ -18056,7 +18012,7 @@ packages:
     dependencies:
       react: 18.0.0
       react-freeze: 1.0.3_react@18.0.0
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       warn-once: 0.1.1
     dev: false
 
@@ -18069,7 +18025,7 @@ packages:
       '@svgr/core': 6.4.0_@babel+core@7.19.3
       '@svgr/plugin-svgo': 6.5.0_@svgr+core@6.4.0
       path-dirname: 1.0.2
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       react-native-svg: 13.0.0_jk6ntyzimkrv4hwdmdgaaf5yaa
     transitivePeerDependencies:
       - '@babel/core'
@@ -18085,9 +18041,9 @@ packages:
       css-select: 5.1.0
       css-tree: 1.1.3
       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:
+  /react-native/0.69.4_react@18.0.0:
     resolution: {integrity: sha512-rqNMialM/T4pHRKWqTIpOxA65B/9kUjtnepxwJqvsdCeMP9Q2YdSx4VASFR9RoEFYcPRU41yGf6EKrChNfns3g==}
     engines: {node: '>=14'}
     hasBin: true
@@ -18095,7 +18051,7 @@ packages:
       react: 18.0.0
     dependencies:
       '@jest/create-cache-key-function': 27.5.1
-      '@react-native-community/cli': 8.0.6_2wrsnxuq7u2kmzd6diim7k7fvu
+      '@react-native-community/cli': 8.0.6_react-native@0.69.4
       '@react-native-community/cli-platform-android': 8.0.5
       '@react-native-community/cli-platform-ios': 8.0.6
       '@react-native/assets': 1.0.0
@@ -18109,7 +18065,7 @@ packages:
       invariant: 2.2.4
       jsc-android: 250230.2.1
       memoize-one: 5.2.1
-      metro-react-native-babel-transformer: 0.70.3_@babel+core@7.19.3
+      metro-react-native-babel-transformer: 0.70.3
       metro-runtime: 0.70.3
       metro-source-map: 0.70.3
       mkdirp: 0.5.6
@@ -18129,7 +18085,6 @@ packages:
       whatwg-fetch: 3.6.2
       ws: 6.2.2
     transitivePeerDependencies:
-      - '@babel/core'
       - '@babel/preset-env'
       - bufferutil
       - encoding
@@ -20093,6 +20048,21 @@ packages:
     resolution: {integrity: sha512-qImOD23aDfnIDNqlG1NOehdB9IYsn1V9oByPjKY1nakv2MQYCEMyX033/q+aEtYCpmYK1cv2+NTmlH+ra6GA5A==}
     dev: true
 
+  /tailwind-merge/1.6.2:
+    resolution: {integrity: sha512-/JbgwDwsI8F4aryXAcQ6tVOZvI/YyZqPqdkG/Dj/8XZq8JDp64XxZCIDbyp7/iOpIfWFkF8swEwjXQEQkAvJNw==}
+    dev: false
+
+  /tailwind-styled-components/2.1.7_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-L20oQlwWM+kbYHIrwvvMQ0HHqt1Z/tInnO/Q9zM0IV/vqUxSIcLAmhMwbbiZmyXTdAVz84N4s1GtIyGODq80Pw==}
+    peerDependencies:
+      react: '>= 16.8.0'
+      react-dom: '>= 16.8.0'
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      tailwind-merge: 1.6.2
+    dev: false
+
   /tailwind/4.0.0:
     resolution: {integrity: sha512-LlUNoD/5maFG1h5kQ6/hXfFPdcnYw+1Z7z+kUD/W/E71CUMwcnrskxiBM8c3G8wmPsD1VvCuqGYMHviI8+yrmg==}
     dependencies:
@@ -20137,40 +20107,6 @@ packages:
     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
-      color-name: 1.1.4
-      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: 3.0.0
-      picocolors: 1.0.0
-      postcss: 8.4.17
-      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
-
-  /tailwindcss/3.1.8_postcss@8.4.17:
-    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
@@ -21038,10 +20974,9 @@ packages:
     peerDependencies:
       react-native: '>=0.63.0'
     dependencies:
-      react-native: 0.69.4_qwcebhcz7kt2t6qvska3nnpfdm
+      react-native: 0.69.4_react@18.0.0
       tailwindcss: 3.1.8
     transitivePeerDependencies:
-      - postcss
       - ts-node
     dev: false