- added explorer options panel

- added Select ui component
- added tailwind-radix

packages/assets/svgs/chevron-double.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29289 14.2929C6.68342 13.9024 7.31658 13.9024 7.70711 14.2929L12 18.5858L16.2929 14.2929C16.6834 13.9024 17.3166 13.9024 17.7071 14.2929C18.0976 14.6834 18.0976 15.3166 17.7071 15.7071L12.7071 20.7071C12.3166 21.0976 11.6834 21.0976 11.2929 20.7071L6.29289 15.7071C5.90237 15.3166 5.90237 14.6834 6.29289 14.2929Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.29289 9.70711C6.68342 10.0976 7.31658 10.0976 7.70711 9.70711L12 5.41421L16.2929 9.70711C16.6834 10.0976 17.3166 10.0976 17.7071 9.70711C18.0976 9.31658 18.0976 8.68342 17.7071 8.29289L12.7071 3.29289C12.3166 2.90237 11.6834 2.90237 11.2929 3.29289L6.29289 8.29289C5.90237 8.68342 5.90237 9.31658 6.29289 9.70711Z" fill="currentColor"/>
+</svg>

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

@@ -1,8 +1,8 @@
 import { ExplorerData, rspc, useCurrentLibrary, useExplorerStore } from '@sd/client';
 
 import { Inspector } from '../explorer/Inspector';
-import { TopBar } from '../layout/TopBar';
 import ExplorerContextMenu from './ExplorerContextMenu';
+import { TopBar } from './ExplorerTopBar';
 import { VirtualizedList } from './VirtualizedList';
 
 interface Props {

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

@@ -0,0 +1,47 @@
+import { Select, SelectOption } from '@sd/ui';
+import { useState } from 'react';
+
+import Slider from '../primitive/Slider';
+
+const Heading: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+	<div className="text-xs font-semibold text-gray-300">{children}</div>
+);
+
+const SubHeading: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+	<div className="mb-1 text-xs font-medium text-gray-300">{children}</div>
+);
+
+export const ExplorerOptionsPanel: React.FC = () => {
+	const [sortBy, setSortBy] = useState('name');
+	const [stackBy, setStackBy] = useState('kind');
+	const [size, setSize] = useState([50]);
+
+	return (
+		<div className="p-4 ">
+			{/* <Heading>Explorer Appearance</Heading> */}
+			<SubHeading>Item size</SubHeading>
+			<Slider defaultValue={size} step={10} />
+			<div className="grid grid-cols-2 gap-2 my-2 mt-4">
+				<div className="flex flex-col">
+					<SubHeading>Sort by</SubHeading>
+					<Select value={sortBy} size="sm" onChange={setSortBy}>
+						<SelectOption value="name">Name</SelectOption>
+						<SelectOption value="kind">Kind</SelectOption>
+						<SelectOption value="favorite">Favorite</SelectOption>
+						<SelectOption value="date_created">Date Created</SelectOption>
+						<SelectOption value="date_modified">Date Modified</SelectOption>
+						<SelectOption value="date_last_opened">Date Last Opened</SelectOption>
+					</Select>
+				</div>
+				<div className="flex flex-col">
+					<SubHeading>Stack by</SubHeading>
+					<Select value={stackBy} size="sm" onChange={setStackBy}>
+						<SelectOption value="kind">Kind</SelectOption>
+						<SelectOption value="location">Location</SelectOption>
+						<SelectOption value="node">Node</SelectOption>
+					</Select>
+				</div>
+			</div>
+		</div>
+	);
+};

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

@@ -31,6 +31,7 @@ import { KeyManager } from '../key/KeyManager';
 import { Shortcut } from '../primitive/Shortcut';
 import { DefaultProps } from '../primitive/types';
 import { Tooltip } from '../tooltip/Tooltip';
+import { ExplorerOptionsPanel } from './ExplorerOptionsPanel';
 
 export interface TopBarButtonProps {
 	icon: React.ComponentType<IconProps>;
@@ -276,12 +277,6 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 					</div>
 				</div>
 				<div className="flex mr-3 space-x-2">
-					<TopBarButton
-						active={store.showInspector}
-						onClick={() => (getExplorerStore().showInspector = !store.showInspector)}
-						className="my-2"
-						icon={SidebarSimple}
-					/>
 					<OverlayPanel
 						className="focus:outline-none"
 						trigger={
@@ -290,8 +285,16 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 							// </Tooltip>
 						}
 					>
-						<div className="block w-[250px] h-[335px]">{/* <KeyManager /> */}</div>
+						<div className="block w-[250px] ">
+							<ExplorerOptionsPanel />
+						</div>
 					</OverlayPanel>
+					<TopBarButton
+						active={store.showInspector}
+						onClick={() => (getExplorerStore().showInspector = !store.showInspector)}
+						className="my-2"
+						icon={SidebarSimple}
+					/>
 					{/* <Dropdown
 						// className="absolute block h-6 w-44 top-2 right-4"
 						align="right"

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

@@ -51,7 +51,7 @@ function FileItem({ data, selected, index, ...rest }: Props) {
 				>
 					<FileThumb
 						className={clsx(
-							'border-4 border-gray-250 rounded shadow-md shadow-gray-750 object-cover max-w-full max-h-full w-auto overflow-hidden',
+							'border-4 border-gray-250 shadow-md shadow-gray-750 object-cover max-w-full max-h-full w-auto overflow-hidden',
 							isVid && 'border-gray-950 border-x-0 border-y-[9px]'
 						)}
 						data={data}

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

@@ -68,20 +68,20 @@ const Key: React.FC<{ data: FakeKey; index: number }> = ({ data, index }) => {
 						)}
 					</div>
 					{/* <div className="text-xs text-gray-300 opacity-30">#{data.id}</div> */}
-					{/* {data.stats && (
-						<div className="flex flex-row space-x-3">
+					{data.stats && (
+						<div className="flex flex-row mt-[1px] space-x-3">
 							{data.stats.objectCount && (
-								<div className="text-[8pt] text-gray-300 opacity-30">
+								<div className="text-[8pt] font-medium text-gray-200 opacity-30">
 									{data.stats.objectCount} Objects
 								</div>
 							)}
 							{data.stats.containerCount && (
-								<div className="text-[8pt] text-gray-300 opacity-30">
+								<div className="text-[8pt] font-medium text-gray-200 opacity-30">
 									{data.stats.containerCount} Containers
 								</div>
 							)}
 						</div>
-					)} */}
+					)}
 				</div>
 			</div>
 			<div className="space-x-1">
@@ -154,9 +154,9 @@ export function KeyManager(props: KeyManagerProps) {
 						<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%]">
+				<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> */}
+				</p>
 			</div>
 			<hr className="border-gray-500" />
 			<div className="p-3 custom-scroll overlay-scroll">

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

@@ -1,12 +1,16 @@
 import * as SliderPrimitive from '@radix-ui/react-slider';
+import clsx from 'clsx';
 
 const Slider = (props: SliderPrimitive.SliderProps) => (
-	<SliderPrimitive.Root {...props} className="relative flex items-center w-full h-6 select-none">
+	<SliderPrimitive.Root
+		{...props}
+		className={clsx('relative flex items-center w-full h-6 select-none', props.className)}
+	>
 		<SliderPrimitive.Track className="relative flex-grow h-2 bg-gray-500 rounded-full outline-none">
 			<SliderPrimitive.Range className="absolute h-full rounded-full outline-none bg-primary-500" />
 		</SliderPrimitive.Track>
 		<SliderPrimitive.Thumb
-			className="z-50 block w-5 h-5 font-bold transition rounded-full shadow-lg outline-none shadow-black bg-primary-500 ring-primary-500 ring-opacity-30 focus:ring-4"
+			className="z-50 block w-5 h-5 font-bold transition rounded-full shadow-lg outline-none shadow-black/50 bg-primary-500 ring-primary-500 ring-opacity-30 focus:ring-4"
 			data-tip="1.0"
 		/>
 	</SliderPrimitive.Root>

packages/interface/src/screens/Overview.tsx

@@ -70,7 +70,7 @@ const StatItem: React.FC<StatItemProps> = (props) => {
 			)}
 		>
 			<span className="text-sm text-gray-400">{title}</span>
-			<span className="text-2xl font-bold">
+			<span className="text-2xl">
 				{isLoading && (
 					<div>
 						<Skeleton enableAnimation={true} baseColor={'#21212e'} highlightColor={'#13131a'} />
@@ -81,7 +81,7 @@ const StatItem: React.FC<StatItemProps> = (props) => {
 						hidden: isLoading
 					})}
 				>
-					<span className="tabular-nums">{count}</span>
+					<span className="font-black tabular-nums">{count}</span>
 					<span className="ml-1 text-[16px] text-gray-400">{size.unit}</span>
 				</div>
 			</span>

packages/interface/src/screens/settings/client/AppearanceSettings.tsx

@@ -1,10 +1,31 @@
+import { useState } from 'react';
+
+import { Toggle } from '../../../components/primitive';
+import { InputContainer } from '../../../components/primitive/InputContainer';
 import { SettingsContainer } from '../../../components/settings/SettingsContainer';
 import { SettingsHeader } from '../../../components/settings/SettingsHeader';
 
 export default function AppearanceSettings() {
+	const [uiAnimations, setUiAnimations] = useState(true);
+	const [blurEffects, setBlurEffects] = useState(true);
+
 	return (
 		<SettingsContainer>
 			<SettingsHeader title="Appearance" description="Change the look of your client." />
+			<InputContainer
+				mini
+				title="UI Animations"
+				description="Dialogs and other UI elements will animate when opening and closing."
+			>
+				<Toggle value={uiAnimations} onChange={setUiAnimations} className="m-2 ml-4" />
+			</InputContainer>
+			<InputContainer
+				mini
+				title="Blur Effects"
+				description="Some components will have a blur effect applied to them."
+			>
+				<Toggle value={blurEffects} onChange={setBlurEffects} className="m-2 ml-4" />
+			</InputContainer>
 		</SettingsContainer>
 	);
 }

packages/interface/src/screens/settings/client/KeybindingSettings.tsx

@@ -1,9 +1,12 @@
+import { useState } from 'react';
+
 import { Toggle } from '../../../components/primitive';
 import { InputContainer } from '../../../components/primitive/InputContainer';
 import { SettingsContainer } from '../../../components/settings/SettingsContainer';
 import { SettingsHeader } from '../../../components/settings/SettingsHeader';
 
 export default function AppearanceSettings() {
+	const [syncWithLibrary, setSyncWithLibrary] = useState(true);
 	return (
 		<SettingsContainer>
 			<SettingsHeader title="Keybindings" description="Manage client keybindings" />
@@ -12,7 +15,7 @@ export default function AppearanceSettings() {
 				title="Sync with Library"
 				description="If enabled your keybindings will be synced with library, otherwise they will apply only to this client."
 			>
-				<Toggle value />
+				<Toggle value={syncWithLibrary} onChange={setSyncWithLibrary} className="m-2 ml-4" />
 			</InputContainer>
 		</SettingsContainer>
 	);

packages/ui/package.json

@@ -22,9 +22,11 @@
 		"@radix-ui/react-context-menu": "^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",
 		"@tailwindcss/forms": "^0.5.3",
 		"class-variance-authority": "^0.2.3",
 		"clsx": "^1.2.1",
+		"@sd/assets": "workspace:*",
 		"phosphor-react": "^1.4.1",
 		"postcss": "^8.4.17",
 		"react": "^18.2.0",
@@ -32,7 +34,8 @@
 		"react-loading-icons": "^1.1.0",
 		"react-spring": "^9.5.5",
 		"storybook": "^6.5.12",
-		"tailwindcss": "^3.1.8"
+		"tailwindcss": "^3.1.8",
+		"tailwindcss-radix": "^2.6.0"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.19.3",

packages/ui/src/OverlayPanel.tsx

@@ -33,7 +33,7 @@ export const OverlayPanel = ({
 	const transitions = useTransition(open, {
 		from: {
 			opacity: 0,
-			transform: `scale(${0.9})`,
+			transform: `scale(0.9)`,
 			transformOrigin: transformOrigin || 'top'
 		},
 		enter: { opacity: 1, transform: 'scale(1)' },

packages/ui/src/Select.tsx

@@ -0,0 +1,71 @@
+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 } from 'phosphor-react';
+
+interface SelectProps {
+	value: string;
+	size?: 'sm' | 'md' | 'lg';
+	className?: string;
+	onChange: (value: string) => void;
+	children: React.ReactNode;
+}
+
+export function Select(props: SelectProps) {
+	return (
+		<SelectPrimitive.Root
+			defaultValue={props.value}
+			value={props.value}
+			onValueChange={props.onChange}
+		>
+			<SelectPrimitive.Trigger
+				className={clsx(
+					'inline-flex items-center pl-2 py-0.5 bg-gray-500 border rounded-md shadow outline-none border-gray-450/30 shadow-gray-900/10',
+					props.className
+				)}
+			>
+				<span className="flex-grow text-xs text-left truncate">
+					<SelectPrimitive.Value />
+				</span>
+
+				<SelectPrimitive.Icon>
+					<ChevronDouble className="w-3 h-3 mr-0.5 text-gray-300" />
+				</SelectPrimitive.Icon>
+			</SelectPrimitive.Trigger>
+
+			<SelectPrimitive.Portal className="relative">
+				<SelectPrimitive.Content className="absolute z-50 w-full p-1 border border-gray-200 rounded-md shadow-2xl bg-gray-50 dark:bg-black/50 backdrop-blur dark:border-gray-500 shadow-gray-300 dark:shadow-gray-950">
+					<SelectPrimitive.ScrollUpButton className="flex items-center justify-center text-gray-700 dark:text-gray-300">
+						<ChevronDownIcon />
+					</SelectPrimitive.ScrollUpButton>
+					<SelectPrimitive.Viewport>{props.children}</SelectPrimitive.Viewport>
+					<SelectPrimitive.ScrollDownButton className="flex items-center justify-center text-gray-700 dark:text-gray-300"></SelectPrimitive.ScrollDownButton>
+				</SelectPrimitive.Content>
+			</SelectPrimitive.Portal>
+		</SelectPrimitive.Root>
+	);
+}
+
+export interface SelectOptionProps {
+	value: string;
+	children: string;
+}
+
+export function SelectOption(props: SelectOptionProps) {
+	return (
+		<SelectPrimitive.Item
+			className={clsx(
+				'relative flex items-center pl-6 px-1 py-0.5 dark:text-white pr-4 text-xs rounded font-sm cursor-pointer focus:bg-gray-100 dark:focus:bg-primary-500',
+				'radix-disabled:opacity-50',
+				'focus:outline-none select-none'
+			)}
+			value={props.value}
+		>
+			<SelectPrimitive.ItemText>{props.children}</SelectPrimitive.ItemText>
+			<SelectPrimitive.ItemIndicator className="absolute inline-flex items-center left-1">
+				<CheckIcon className="w-4 h-4" />
+			</SelectPrimitive.ItemIndicator>
+		</SelectPrimitive.Item>
+	);
+}

packages/ui/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+	const ReactComponent: React.ReactComponent;
+	export { ReactComponent };
+}

packages/ui/src/index.ts

@@ -5,3 +5,4 @@ export * from './Loader';
 export * as ContextMenu from './ContextMenu';
 export * from './OverlayPanel';
 export * from './Input';
+export * from './Select';

packages/ui/style/tailwind.js

@@ -125,7 +125,8 @@ module.exports = function (app, options) {
 			plugin(({ addVariant }) => {
 				addVariant('open', '&[data-state="open"]');
 				addVariant('closed', '&[data-state="closed"]');
-			})
+			}),
+			require('tailwindcss-radix')()
 		]
 	};
 	if (app === 'landing') {

pnpm-lock.yaml

@@ -487,6 +487,8 @@ importers:
       '@radix-ui/react-context-menu': ^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
+      '@sd/assets': workspace:*
       '@sd/config': workspace:*
       '@storybook/addon-actions': ^6.5.12
       '@storybook/addon-essentials': ^6.5.12
@@ -521,6 +523,7 @@ importers:
       storybook-tailwind-dark-mode: ^1.0.15
       style-loader: ^3.3.1
       tailwindcss: ^3.1.8
+      tailwindcss-radix: ^2.6.0
       typescript: ^4.8.4
     dependencies:
       '@headlessui/react': 1.7.3_biqbaboplfbrettd7655fr4n2y
@@ -528,6 +531,8 @@ importers:
       '@radix-ui/react-context-menu': 1.0.0_rj7ozvcq3uehdlnj3cbwzbi5ce
       '@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
+      '@sd/assets': link:../assets
       '@tailwindcss/forms': 0.5.3_tailwindcss@3.1.8
       class-variance-authority: 0.2.3_typescript@4.8.4
       clsx: 1.2.1
@@ -539,6 +544,7 @@ importers:
       react-spring: 9.5.5_biqbaboplfbrettd7655fr4n2y
       storybook: 6.5.12_yalvw3r2waubxycyb7k7qsruca
       tailwindcss: 3.1.8
+      tailwindcss-radix: 2.6.0
     devDependencies:
       '@babel/core': 7.19.3
       '@sd/config': link:../config
@@ -3285,6 +3291,21 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-label/1.0.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-k+EbxeRaVbSJ4oaR9eUYuC0cDIGRB4TAPhilbFCIMpP9pXFNcyQPQUvRaVOQBrviuArYM80xh0BQR/0y3kjUdQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-id': 1.0.0_react@18.2.0
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /@radix-ui/react-menu/1.0.0_rj7ozvcq3uehdlnj3cbwzbi5ce:
     resolution: {integrity: sha512-icW4C64T6nHh3Z4Q1fxO1RlSShouFF4UpUmPV8FLaJZfphDljannKErDuALDx4ClRLihAPZ9i+PrLNPoWS2DMA==}
     peerDependencies:
@@ -3408,6 +3429,40 @@ packages:
       react-dom: 18.2.0_react@18.2.0
     dev: false
 
+  /@radix-ui/react-select/1.0.0_rj7ozvcq3uehdlnj3cbwzbi5ce:
+    resolution: {integrity: sha512-GfbVBxx7JPvytNT+0XYCFCOImEMmpl0Vg7hhifLaLV7p5zRottFMgQ7qrrxw8v6B8buKXz41kWYMrdRrWqsZaQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.19.0
+      '@radix-ui/number': 1.0.0
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-collection': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-compose-refs': 1.0.0_react@18.2.0
+      '@radix-ui/react-context': 1.0.0_react@18.2.0
+      '@radix-ui/react-direction': 1.0.0_react@18.2.0
+      '@radix-ui/react-dismissable-layer': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-focus-guards': 1.0.0_react@18.2.0
+      '@radix-ui/react-focus-scope': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-id': 1.0.0_react@18.2.0
+      '@radix-ui/react-label': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-portal': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-primitive': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      '@radix-ui/react-slot': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-callback-ref': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-controllable-state': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-layout-effect': 1.0.0_react@18.2.0
+      '@radix-ui/react-use-previous': 1.0.0_react@18.2.0
+      '@radix-ui/react-visually-hidden': 1.0.0_biqbaboplfbrettd7655fr4n2y
+      aria-hidden: 1.2.1_iapumuv4e6jcjznwuxpf4tt22e
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      react-remove-scroll: 2.5.4_iapumuv4e6jcjznwuxpf4tt22e
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /@radix-ui/react-slider/1.0.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-LMZET7vn7HYwYSjsc9Jcen8Vn4cJXZZxQT7T+lGlqp+F+FofX+H86TBF2yDq+L51d99f1KLEsflTGBz9WRLSig==}
     peerDependencies:
@@ -6374,7 +6429,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.18.6_@babel+core@7.19.3
       magic-string: 0.26.6
       react-refresh: 0.14.0
-      vite: 3.1.4
+      vite: 3.1.4_sass@1.55.0
     transitivePeerDependencies:
       - supports-color
 
@@ -7109,7 +7164,6 @@ 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.17:
     resolution: {integrity: sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==}
@@ -7699,7 +7753,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
 
@@ -10990,7 +11044,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:
@@ -16955,6 +17009,10 @@ packages:
       - utf-8-validate
     dev: true
 
+  /tailwindcss-radix/2.6.0:
+    resolution: {integrity: sha512-32gv65ommaEMPKRS9yPmbvc6QcV+LsAqtSe1RFindBctVpS6+SbmkfcdecW/zgRvHW7KeAgl3iyzq2ZmRqsdZQ==}
+    dev: false
+
   /tailwindcss/3.1.8:
     resolution: {integrity: sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==}
     engines: {node: '>=12.13.0'}
@@ -18265,7 +18323,7 @@ packages:
       valtio: ^1.2.5
     dependencies:
       lodash: 4.17.21
-      valtio: 1.7.0_react@18.2.0+vite@3.1.4
+      valtio: 1.7.0
     dev: false
 
   /valtio/1.7.0:
@@ -18429,7 +18487,7 @@ packages:
     dependencies:
       '@rollup/pluginutils': 4.2.1
       '@svgr/core': 6.4.0
-      vite: 3.1.4
+      vite: 3.1.4_sass@1.55.0
     transitivePeerDependencies:
       - '@babel/core'
       - supports-color