@catalystsoftware/ui 1.0.12 → 1.0.14

package/dist/components/catalyst-ui/overlays/sidebar.tsx

@@ -0,0 +1,2208 @@
+import { Circle } from "lucide-react";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { useIsMobile } from "~/modules/hooks/use-mobile";
+import { cn } from "~/components/catalyst-ui";
+import { Button } from "~/components/catalyst-ui"
+import { Input } from "~/components/catalyst-ui";
+import { Separator } from "~/components/catalyst-ui";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "~/components/catalyst-ui";
+import { Skeleton } from "~/components/catalyst-ui";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/catalyst-ui";
+import { useNavigation, NavLink, useLocation } from "@remix-run/react";
+
+export const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "18rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+export const THEME_VERSION = "v3";
+export const THEME_OPTIONS = ["neutral", "red", "orange", "green", "blue", "violet", "default"] as const;
+export const LOCAL_SIDEBAR_STORAGE_KEY = "sidebar-theme-v3";
+
+
+type SidebarTheme = typeof THEME_OPTIONS[number];
+
+interface SidebarThemeContextProps {
+	theme: SidebarTheme;
+	setTheme: (theme: SidebarTheme) => void;
+	themeVars: Record<string, string>;
+}
+
+const SidebarThemeContext = React.createContext<SidebarThemeContextProps | undefined>(undefined);
+
+function useSidebarTheme() {
+	const ctx = React.useContext(SidebarThemeContext);
+	if (!ctx) throw new Error("useSidebarTheme must be used within SidebarThemeProvider");
+	return ctx;
+}
+
+const SidebarThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+	const [theme, setTheme] = React.useState<SidebarTheme>(() => {
+		if (typeof window !== 'undefined') {
+			const storedTheme = localStorage.getItem(LOCAL_SIDEBAR_STORAGE_KEY);
+			if (storedTheme && THEME_OPTIONS.includes(storedTheme as SidebarTheme)) {
+				return storedTheme as SidebarTheme;
+			}
+		}
+		return "system";
+	});
+
+	const themeVars = React.useMemo(() => {
+		if (theme === "system") {
+			return {};
+		}
+		return (colorThemes as any)[theme]?.[THEME_VERSION]?.dark || {};
+	}, [theme]);
+
+	React.useEffect(() => {
+		if (typeof window !== 'undefined') {
+			localStorage.setItem(LOCAL_SIDEBAR_STORAGE_KEY, theme);
+		}
+	}, [theme]);
+
+	React.useEffect(() => {
+		if (typeof document === 'undefined') return;
+
+		const root = document.documentElement;
+
+		if (Object.keys(themeVars).length > 0) {
+			Object.entries(themeVars).forEach(([key, value]) => {
+				root.style.setProperty(key, String(value));
+			});
+		}
+
+		return () => {
+			Object.keys(themeVars).forEach((key) => {
+				root.style.removeProperty(key);
+			});
+		};
+	}, [themeVars]);
+
+	return (
+		<SidebarThemeContext.Provider value={{ theme, setTheme, themeVars }}>
+			{children}
+		</SidebarThemeContext.Provider>
+	);
+};
+
+function SidebarThemeSelector({ size = 28,  className, children }: { size?: number, className?: string, children: React.ReactNode }) {
+	const { theme, setTheme } = useSidebarTheme();
+
+	const [open, setOpen] = React.useState(false);
+	const [flyingTheme, setFlyingTheme] = React.useState<SidebarTheme | null>(null);
+	const [showOverlay, setShowOverlay] = React.useState(false);
+	const [flyingButtonPos, setFlyingButtonPos] = React.useState<{ left: number; top: number } | null>(null);
+	const [mainButtonOriginalPos, setMainButtonOriginalPos] = React.useState<{ left: number; top: number } | null>(null);
+	const [isTransitioning, setIsTransitioning] = React.useState(false);
+	const mainButtonRef = React.useRef<HTMLButtonElement>(null);
+
+	const radius = size * 1.6;
+	const themeList = THEME_OPTIONS;
+	const mainButtonCenterOffset = size * 1.5;
+	const mainButtonSize = size;
+
+	function getThemeColor(t: string) {
+		const themeObj = colorThemes[t as SidebarTheme]?.[THEME_VERSION]?.dark;
+		const primaryColor = themeObj?.["--primary"];
+
+		if (primaryColor) {
+			if (primaryColor.startsWith("oklch")) {
+				return primaryColor;
+			} else {
+				return `hsl(${primaryColor})`;
+			}
+		}
+		return "#888";
+	}
+
+	const handleMainButtonClick = () => {
+		if (flyingTheme) return;
+		
+		if (!open && mainButtonRef.current) {
+			// Store the original position before opening
+			const rect = mainButtonRef.current.getBoundingClientRect();
+			setMainButtonOriginalPos({
+				left: rect.left + rect.width / 2,
+				top: rect.top + rect.height / 2
+			});
+		}
+		
+		setOpen((v) => !v);
+		setShowOverlay(!open);
+	};
+
+	const handleThemeSelect = (t: SidebarTheme, event: React.MouseEvent<HTMLButtonElement>) => {
+		const button = event.currentTarget;
+		const rect = button.getBoundingClientRect();
+		
+		// Store the button's current position
+		setFlyingButtonPos({
+			left: rect.left + rect.width / 2,
+			top: rect.top + rect.height / 2
+		});
+		
+		setFlyingTheme(t);
+		setShowOverlay(true);
+		setOpen(false);
+
+		setTimeout(() => {
+			setTheme(t);
+		}, 300);
+
+		setTimeout(() => {
+			setShowOverlay(false);
+			setFlyingTheme(null);
+			setFlyingButtonPos(null);
+			setMainButtonOriginalPos(null);
+			setIsTransitioning(false);
+		}, 600);
+	};
+
+	// Determine main button position
+	let mainButtonStyle: React.CSSProperties = {
+		zIndex: 70,
+	};
+
+	if (open || mainButtonOriginalPos) {
+		// Use fixed positioning for animation
+		const targetLeft = open ? window.innerWidth / 2 : (mainButtonOriginalPos?.left || window.innerWidth / 2);
+		const targetTop = open ? window.innerHeight / 2 : (mainButtonOriginalPos?.top || window.innerHeight / 2);
+		
+		mainButtonStyle = {
+			...mainButtonStyle,
+			position: 'fixed',
+			left: `${targetLeft}px`,
+			top: `${targetTop}px`,
+			transform: 'translate(-50%, -50%)',
+		};
+	} else {
+		// Default position (relative within container)
+		mainButtonStyle = {
+			...mainButtonStyle,
+			position: 'absolute',
+			left: mainButtonCenterOffset - (mainButtonSize / 2),
+			top: mainButtonCenterOffset - (mainButtonSize / 2),
+		};
+	}
+
+	return (
+		<>
+			{showOverlay && (
+				<div
+					className="fixed inset-0 bg-black/50 transition-opacity duration-500"
+					style={{ zIndex: 998 }}
+				/>
+			)}
+
+			<div
+				className={cn(
+					"relative flex items-center justify-center transition-all duration-1000",
+					className
+				)}
+				style={{
+					width: size * 3,
+					height: size * 3,
+					zIndex: 999,
+				}}
+			>
+				<button
+					ref={mainButtonRef}
+					onClick={handleMainButtonClick}
+					className={cn(
+						"flex items-center justify-center rounded-full bg-background shadow-lg transition-all duration-500",
+						`h-[${mainButtonSize}px] w-[${mainButtonSize}px]`,
+						open ? "bg-sidebar-accent text-sidebar-accent-foreground" : "",
+						(open || mainButtonOriginalPos) ? "!fixed" : ""
+					)}
+					style={mainButtonStyle}
+				>
+					{children}
+				</button>
+
+				{themeList.map((t, i) => {
+					const angle = (360 / themeList.length) * i - 90;
+					const rad = (angle * Math.PI) / 180;
+
+					const radialX = Math.cos(rad) * radius;
+					const radialY = Math.sin(rad) * radius;
+
+					let currentX = 0;
+					let currentY = 0;
+					let currentScale = 0;
+					let currentOpacity = 0;
+					let currentZIndex = 10;
+					let currentDelay = open ? `${i * 90}ms` : "0ms";
+					let isFixed = false;
+					let fixedLeft = 0;
+					let fixedTop = 0;
+
+					if (flyingTheme === t) {
+						isFixed = true;
+						currentScale = 1.2;
+						currentOpacity = 1;
+						currentZIndex = 1000;
+						currentDelay = "0ms";
+						
+						// Animate to center of viewport
+						fixedLeft = window.innerWidth / 2;
+						fixedTop = window.innerHeight / 2;
+					} else if (open) {
+						// Position relative to center of screen when open
+						isFixed = true;
+						fixedLeft = window.innerWidth / 2 + radialX;
+						fixedTop = window.innerHeight / 2 + radialY;
+						currentScale = 1;
+						currentOpacity = 1;
+						currentZIndex = 10;
+					} else if (!open && flyingTheme === null) {
+						currentX = 0;
+						currentY = 0;
+						currentScale = 0;
+						currentOpacity = 0;
+						currentZIndex = 10;
+					}
+					
+					const buttonSize = size * 1;
+					const buttonOffset = buttonSize / 2;
+					
+					return (
+						<button
+							key={t}
+							className={cn(
+								`rounded-full border bg-background shadow transition-all duration-500 flex items-center justify-center`,
+								theme === t ? "ring-2 ring-primary border-primary" : "border-muted hover:ring-2 hover:ring-primary",
+								flyingTheme === t ? "ring-4 ring-primary !fixed" : open ? "!fixed" : "absolute",
+							)}
+							style={{
+								width: buttonSize,
+								height: buttonSize,
+								...(isFixed ? {
+									left: `${fixedLeft}px`,
+									top: `${fixedTop}px`,
+									transform: `translate(-50%, -50%) scale(${currentScale})`,
+								} : {
+									left: mainButtonCenterOffset + currentX - buttonOffset,
+									top: mainButtonCenterOffset + currentY - buttonOffset,
+									transform: `scale(${currentScale})`,
+								}),
+								zIndex: currentZIndex,
+								opacity: currentOpacity,
+								transitionDelay: currentDelay,
+								transitionTimingFunction: flyingTheme === t ? 'cubic-bezier(0.8, -0.5, 0.2, 1.5)' : 'ease-out',
+							}}
+							aria-label={`Switch to ${t} theme`}
+							onClick={(e) => handleThemeSelect(t as SidebarTheme, e)}
+							disabled={!!flyingTheme}
+						>
+							<Circle style={{ color: getThemeColor(t), fill: getThemeColor(t) }} size={size * 0.3} />
+						</button>
+					);
+				})}
+			</div>
+		</>
+	);
+}
+
+type SidebarContextProps = {
+	state: "expanded" | "collapsed";
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	openMobile: boolean;
+	setOpenMobile: (open: boolean) => void;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+	const context = React.useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider.");
+	}
+
+	return context;
+}
+
+const SidebarProvider = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		defaultOpen?: boolean;
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	}
+>(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = React.useState(false);
+
+	// This is the internal state of the sidebar.
+	// We use openProp and setOpenProp for control from outside the component.
+	const [_open, _setOpen] = React.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = React.useCallback(
+		(value: boolean | ((value: boolean) => boolean)) => {
+			const openState = typeof value === "function" ? value(open) : value;
+			if (setOpenProp) {
+				setOpenProp(openState);
+			} else {
+				_setOpen(openState);
+			}
+
+			// This sets the cookie to keep the sidebar state.
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		},
+		[setOpenProp, open]
+	);
+
+	// Helper to toggle the sidebar.
+	const toggleSidebar = React.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [isMobile, setOpen, setOpenMobile]);
+
+	// Adds a keyboard shortcut to toggle the sidebar.
+	React.useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
+
+	// We add a state so that we can do data-state="expanded" or "collapsed".
+	// This makes it easier to style the sidebar with Tailwind classes.
+	const state = open ? "expanded" : "collapsed";
+
+	const contextValue = React.useMemo<SidebarContextProps>(
+		() => ({
+			state,
+			open,
+			setOpen,
+			isMobile,
+			openMobile,
+			setOpenMobile,
+			toggleSidebar,
+		}),
+		[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+	);
+	//<SidebarThemeProvider>
+	//	</SidebarThemeProvider>
+
+	return (
+		<SidebarThemeProvider>
+			<SidebarContext.Provider value={contextValue}>
+				<TooltipProvider delayDuration={0}>
+					<div
+						style={
+							{
+								"--sidebar-width": SIDEBAR_WIDTH,
+								"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+								...style,
+							} as React.CSSProperties
+						}
+						className={cn("group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", className)}
+						ref={ref}
+						{...props}
+					>
+						{children}
+					</div>
+				</TooltipProvider>
+			</SidebarContext.Provider>
+		</SidebarThemeProvider>
+	);
+});
+SidebarProvider.displayName = "SidebarProvider";
+
+/**
+ * ORIGNIAL Sidebar
+ * const Sidebar = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		side?: "left" | "right";
+		variant?: "sidebar" | "floating" | "inset";
+		collapsible?: "offcanvas" | "icon" | "none";
+	}
+>(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
+	const { isMobile, state, openMobile, setOpenMobile, open } = useSidebar();
+
+	if (collapsible === "none") {
+		return (
+			<div className={cn("flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)} ref={ref} {...props}>
+				{children}
+			</div>
+		);
+	}
+
+	if (isMobile) {
+		return (
+			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+				<SheetContent
+					data-sidebar="sidebar"
+					data-mobile="true"
+					className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+						} as React.CSSProperties
+					}
+					side={side}
+				>
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+
+	return (
+		<div ref={ref} className="group peer hidden text-sidebar-foreground md:block" data-state={state} data-collapsible={state === "collapsed" ? collapsible : ""} data-variant={variant} data-side={side}>
+			<div
+				className={cn(
+					"relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+					"group-data-[collapsible=offcanvas]:w-0",
+					"group-data-[side=right]:rotate-180",
+					variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+				)}
+			/>
+			<div
+				className={cn(
+					"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+					side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+					// Adjust the padding for floating and inset variants.
+					variant === "floating" || variant === "inset"
+						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+						: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+					className
+				)}
+				{...props}
+			>
+				<div
+					data-sidebar="sidebar"
+					className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+				>
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+});
+Sidebar.displayName = "Sidebar"; */
+
+const Sidebar = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		side?: "left" | "right";
+		variant?: "sidebar" | "floating" | "inset";
+		collapsible?: "offcanvas" | "icon" | "none";
+		loadingUI?: boolean; // Optional prop to disable loading UI
+	}
+>(({
+	side = "left",
+	variant = "sidebar",
+	collapsible = "offcanvas",
+	className,
+	children,
+	loadingUI = true, // Default to showing loading UI
+	...props
+}, ref) => {
+	const { isMobile, state, openMobile, setOpenMobile, open } = useSidebar();
+	const navigation = useNavigation();
+	const [hasInitialLoaded, setHasInitialLoaded] = React.useState(false);
+
+	// Track initial load completion
+	React.useEffect(() => {
+		if (navigation.state === 'idle' && !hasInitialLoaded) {
+			setHasInitialLoaded(true);
+		}
+	}, [navigation.state, hasInitialLoaded]);
+
+	// Show loading only during initial load if loadingUI is enabled
+	const showLoading = loadingUI && navigation.state === 'loading' && !hasInitialLoaded;
+
+	if (collapsible === "none") {
+		return (
+			<div className={cn("flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)} ref={ref} {...props}>
+				{showLoading ? <LoadingSidebar /> : children}
+			</div>
+		);
+	}
+
+	if (isMobile) {
+		return (
+			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+				<SheetContent
+					data-sidebar="sidebar"
+					data-mobile="true"
+					className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+						} as React.CSSProperties
+					}
+					side={side}
+				>
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">
+						{showLoading ? <LoadingSidebar /> : children}
+					</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+
+	return (
+		<div ref={ref} className="group peer hidden text-sidebar-foreground md:block" data-state={state} data-collapsible={state === "collapsed" ? collapsible : ""} data-variant={variant} data-side={side}>
+			{/* This is what handles the sidebar gap on desktop */}
+			<div
+				className={cn(
+					"relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+					"group-data-[collapsible=offcanvas]:w-0",
+					"group-data-[side=right]:rotate-180",
+					variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+				)}
+			/>
+			<div
+				className={cn(
+					"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+					side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+					// Adjust the padding for floating and inset variants.
+					variant === "floating" || variant === "inset"
+						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+						: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+					className
+				)}
+				{...props}
+			>
+				<div
+					data-sidebar="sidebar"
+					className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-border group-data-[variant=floating]:shadow"
+				>
+					{showLoading ? <LoadingSidebar /> : children}
+				</div>
+			</div>
+		</div>
+	);
+});
+Sidebar.displayName = "Sidebar";
+
+
+const SidebarTrigger = React.forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button>>(({ className, onClick, ...props }, ref) => {
+	const { toggleSidebar, open } = useSidebar();
+
+	return (
+		<Button
+			ref={ref}
+			data-sidebar="trigger"
+			variant="ghost"
+			size="icon"
+			className={cn("h-7 w-7", className)}
+			onClick={(event) => {
+				onClick?.(event);
+				toggleSidebar();
+			}}
+			{...props}
+		>
+			<Burger
+				opened={open}
+			//  size="lg"
+			/>
+
+			<span className="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
+});
+// <PanelLeft />
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button">>(({ className, ...props }, ref) => {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<button
+			ref={ref}
+			data-sidebar="rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onClick={toggleSidebar}
+			title="Toggle Sidebar"
+			className={cn(
+				"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+				"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+				"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarRail.displayName = "SidebarRail";
+// RIGHT HERE SIDEBAR
+const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main">>(({ className, ...props }, ref) => {
+	return (
+		<main
+			ref={ref}
+			className={cn(
+				"relative flex w-full flex-1 flex-col bg-background",
+				"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+				"md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2",
+				//"md:peer-data-[state=expanded]:peer-data-[variant=inset]:ml-[calc(var(--sidebar-width)+0.5rem)]",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = React.forwardRef<React.ElementRef<typeof Input>, React.ComponentProps<typeof Input>>(({ className, ...props }, ref) => {
+	return <Input ref={ref} data-sidebar="input" className={cn("h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring", className)} {...props} />;
+});
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+	return <div ref={ref} data-sidebar="header" className={cn("flex flex-col gap-2 p-2",
+		"group-data-[variant=floating]:bg-sidebar group-data-[variant=floating]:text-sidebar-foreground",
+		"group-data-[variant=sidebar]:bg-sidebar group-data-[variant=sidebar]:text-sidebar-foreground",
+		className)} {...props} />;
+});
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+	return <div ref={ref} data-sidebar="footer" className={cn("flex flex-col gap-2 p-2",
+		"group-data-[variant=floating]:bg-sidebar group-data-[variant=floating]:text-sidebar-foreground",
+		"group-data-[variant=sidebar]:bg-sidebar group-data-[variant=sidebar]:text-sidebar-foreground",
+		className)} {...props} />;
+});
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = React.forwardRef<React.ElementRef<typeof Separator>, React.ComponentProps<typeof Separator>>(({ className, ...props }, ref) => {
+	return <Separator ref={ref} data-sidebar="separator" className={cn("mx-2 w-auto bg-sidebar-border", className)} {...props} />;
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+	return <div ref={ref} data-sidebar="content" className={cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto  group-data-[collapsible=icon]:overflow-hidden",
+		"group-data-[variant=floating]:bg-sidebar group-data-[variant=floating]:text-sidebar-foreground",
+		"group-data-[variant=sidebar]:bg-sidebar group-data-[variant=sidebar]:text-sidebar-foreground",
+		className)} {...props} />;
+});
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+	return <div ref={ref} data-sidebar="group" className={cn("relative flex w-full min-w-0 flex-col p-2", className)} {...props} />;
+});
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<"div"> & { asChild?: boolean }>(({ className, asChild = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "div";
+
+	return (
+		<Comp
+			ref={ref}
+			data-sidebar="group-label"
+			className={cn(
+				"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button"> & { asChild?: boolean }>(({ className, asChild = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			ref={ref}
+			data-sidebar="group-action"
+			className={cn(
+				"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 after:md:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => <div ref={ref} data-sidebar="group-content" className={cn("w-full text-sm", className)} {...props} />);
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(({ className, ...props }, ref) => <ul ref={ref} data-sidebar="menu" className={cn("flex w-full min-w-0 flex-col gap-1", className)} {...props} />);
+SidebarMenu.displayName = "SidebarMenu";
+
+const sidebarMenuButtonVariants = cva(
+	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	}
+);
+
+const SidebarMenuButton = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button"> & {
+		asChild?: boolean;
+		isActive?: boolean;
+		tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+	} & VariantProps<typeof sidebarMenuButtonVariants>
+>(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+	const { isMobile, state } = useSidebar();
+
+	const button = <Comp ref={ref} data-sidebar="menu-button" data-size={size} data-active={isActive} className={cn(sidebarMenuButtonVariants({ variant, size }), className)} {...props} />;
+
+	if (!tooltip) {
+		return button;
+	}
+
+	if (typeof tooltip === "string") {
+		tooltip = {
+			children: tooltip,
+		};
+	}
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{button}</TooltipTrigger>
+			<TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile} {...tooltip} />
+		</Tooltip>
+	);
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button"> & {
+		asChild?: boolean;
+		showOnHover?: boolean;
+	}
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			ref={ref}
+			data-sidebar="menu-action"
+			className={cn(
+				"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 after:md:hidden",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		data-sidebar="menu-badge"
+		className={cn(
+			"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+			"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+			"peer-data-[size=sm]/menu-button:top-1",
+			"peer-data-[size=default]/menu-button:top-1.5",
+			"peer-data-[size=lg]/menu-button:top-2.5",
+			"group-data-[collapsible=icon]:hidden",
+			className
+		)}
+		{...props}
+	/>
+));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		showIcon?: boolean;
+	}
+>(({ className, showIcon = false, ...props }, ref) => {
+	// Random width between 50 to 90%.
+	const width = React.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+
+	return (
+		<div ref={ref} data-sidebar="menu-skeleton" className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)} {...props}>
+			{showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+			<Skeleton
+				className="h-4 max-w-[--skeleton-width] flex-1"
+				data-sidebar="menu-skeleton-text"
+				style={
+					{
+						"--skeleton-width": width,
+					} as React.CSSProperties
+				}
+			/>
+		</div>
+	);
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(({ className, ...props }, ref) => (
+	<ul ref={ref} data-sidebar="menu-sub" className={cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-border px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className)} {...props} />
+));
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = React.forwardRef<
+	HTMLAnchorElement,
+	React.ComponentProps<"a"> & {
+		asChild?: boolean;
+		size?: "sm" | "md";
+		isActive?: boolean;
+	}
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			ref={ref}
+			data-sidebar="menu-sub-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(
+				"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				size === "sm" && "text-xs",
+				size === "md" && "text-sm",
+				"group-data-[collapsible=icon]:hidden",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+interface BurgerMenuProps {
+	opened?: boolean;
+	onToggle?: (opened: boolean) => void;
+	size?: 'sm' | 'md' | 'lg' | 'xl';
+	color?: string;
+	className?: string;
+	'aria-label'?: string;
+	disabled?: boolean;
+}
+
+function Burger({
+	opened: controlledOpened,
+	size = 'md',
+	color = 'currentColor',
+	onClick
+}) {
+	const [internalOpened, setInternalOpened] = React.useState(false);
+	const isOpened = controlledOpened !== undefined ? controlledOpened : internalOpened;
+
+	const sizeClasses = {
+		sm: 'w-4 h-4',
+		md: 'w-6 h-6',
+		lg: 'w-8 h-8',
+		xl: 'w-10 h-10'
+	};
+
+	const lineHeight = {
+		sm: '2px',
+		md: '2px',
+		lg: '3px',
+		xl: '3px'
+	};
+
+	const handleClick = () => {
+		if (controlledOpened === undefined) {
+			setInternalOpened(!internalOpened);
+		}
+		onClick?.();
+	};
+
+	return (
+		<button
+			className={cn("relative cursor-pointer bg-transparent border-none p-0", sizeClasses[size])}
+			style={{ color }}
+			onClick={handleClick}
+			aria-label={isOpened ? "Close menu" : "Open menu"}
+		>
+			{/* Top line */}
+			<span
+				className={cn(
+					"absolute left-0 block transition-all duration-300 ease-in-out rounded-full bg-current"
+				)}
+				style={{
+					width: '100%',
+					height: lineHeight[size],
+					top: '50%',
+					transformOrigin: 'center',
+					transform: isOpened
+						? 'translateY(-50%) rotate(45deg)'
+						: 'translateY(-50%) translateY(-6px)'
+				}}
+			/>
+
+			{/* Middle line */}
+			<span
+				className={cn(
+					"absolute left-0 top-1/2 block transition-all duration-300 ease-in-out rounded-full bg-current"
+				)}
+				style={{
+					width: '100%',
+					height: lineHeight[size],
+					opacity: isOpened ? 0 : 1,
+					transform: 'translateY(-50%)',
+					transformOrigin: 'center'
+				}}
+			/>
+
+			{/* Bottom line */}
+			<span
+				className={cn(
+					"absolute left-0 block transition-all duration-300 ease-in-out rounded-full bg-current"
+				)}
+				style={{
+					width: '100%',
+					height: lineHeight[size],
+					top: '50%',
+					transformOrigin: 'center',
+					transform: isOpened
+						? 'translateY(-50%) rotate(-45deg)'
+						: 'translateY(-50%) translateY(6px)'
+				}}
+			/>
+		</button>
+	);
+}
+
+const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => <li ref={ref} data-sidebar="menu-item" className={cn("group/menu-item relative", className)} {...props} />);
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+interface SidebarMenuAnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+	icon?: React.ReactNode;
+	tooltip?: string;
+	newTab?: boolean; // New prop to control tab behavior
+}
+
+const SidebarMenuAnchor = React.forwardRef<HTMLAnchorElement, SidebarMenuAnchorProps>(
+	({
+		className,
+		icon,
+		tooltip,
+		children,
+		to,
+		newTab = true,
+		onClick,
+		...props
+	}, ref) => {
+		const navigation = useNavigation();
+		const location = useLocation();
+
+		const isActive = location.pathname === to;
+
+		const isNavigatingToThisLink = navigation.state === 'loading' &&
+			navigation.location?.href === to;
+
+		const anchorProps = newTab ? {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		} : {};
+
+
+		return (
+			<a
+				ref={ref}
+				href={to}
+				{...anchorProps}
+				className={cn(
+					"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+					isActive && "text-primary bg-sidebar-accent font-medium",
+					className
+				)}
+				{...props}
+			>
+				{icon && React.isValidElement(icon) && React.cloneElement(icon, {
+					className: cn("size-4 shrink-0", icon.props.className)
+				})}
+				<span className="flex-1 truncate">{children}</span>
+
+				{isNavigatingToThisLink && (
+					<div className="ml-auto flex items-center h-full">
+						<div className="animate-spin rounded-full h-5 w-5 border-t-3 border-primary border-solid"></div>
+					</div>
+				)}
+			</a>
+		);
+	}
+);
+SidebarMenuAnchor.displayName = "SidebarMenuAnchor";
+
+interface SidebarMenuLinkProps extends React.ComponentProps<typeof NavLink> {
+	icon?: React.ReactNode;
+	tooltip?: string;
+}
+
+const SidebarMenuLink = React.forwardRef<HTMLAnchorElement, SidebarMenuLinkProps>(
+	({
+		className,
+		icon,
+		tooltip,
+		children,
+		to,
+		...props
+	}, ref) => {
+		const navigation = useNavigation();
+		const location = useLocation();
+
+		const isNavigatingToThisLink = navigation.state === 'loading' &&
+			navigation.location?.pathname === to;
+
+		const isActive = location.pathname === to;
+		return (
+			<NavLink
+				ref={ref}
+				to={to}
+				className={cn(
+					"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none  transition-[width,height,padding] hover:bg-muted hover:text-primary focus-visible:ring-2   group-has-[[data-sidebar=menu-action]]/menu-item:pr-8   group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate ",
+					isActive && "text-primary bg-muted font-medium",
+					className
+				)}
+				{...props}
+			>
+				{icon && React.isValidElement(icon) && React.cloneElement(icon, {
+					className: cn("size-4 shrink-0", icon.props.className)
+				})}
+				<span className="flex-1 truncate">{children}</span>
+
+				{isNavigatingToThisLink && (
+					<div className="ml-auto flex items-center">
+						<div className="animate-spin rounded-full h-5 w-5 border-t-3 border-primary border-solid"></div>
+					</div>
+				)}
+			</NavLink>
+		);
+	}
+);
+SidebarMenuLink.displayName = "SidebarMenuLink";
+
+function LoadingSidebar() {
+	const isMobile = useIsMobile();
+	const width = isMobile ? SIDEBAR_WIDTH_MOBILE : SIDEBAR_WIDTH
+	return (
+		<div className={cn("flex flex-col items-center justify-center text-center p-8 w-[256px] min-h-[400px] h-screen bg-gradient-to-b from-background to-muted/20", width)}>
+			<div className="relative mb-6">
+				<div className="absolute inset-0 animate-pulse bg-primary/20 rounded-full blur-xl"></div>
+				<div className="flex items-center justify-center h-full">
+					<div className='animate-spin rounded-full h-16 w-16 text-primary border-t-5 border-primary border-solid'></div>
+				</div>
+			</div>
+
+			<div className="space-y-3">
+				<h3 className="text-lg font-semibold text-foreground animate-pulse">
+					Loading Sidebar
+				</h3>
+				<p className="text-sm text-muted-foreground/80 animate-pulse delay-150">
+					Please wait while the content loads...
+				</p>
+			</div>
+
+			<div className="w-full mt-8 space-y-3">
+				<div className="h-3 bg-muted rounded-full animate-pulse"></div>
+				<div className="h-3 bg-muted rounded-full animate-pulse delay-75 w-3/4"></div>
+				<div className="h-3 bg-muted rounded-full animate-pulse delay-150 w-1/2"></div>
+			</div>
+
+			<div className="flex space-x-1 mt-6">
+				<div className="w-2 h-2 bg-primary/60 rounded-full animate-bounce"></div>
+				<div className="w-2 h-2 bg-primary/60 rounded-full animate-bounce delay-100"></div>
+				<div className="w-2 h-2 bg-primary/60 rounded-full animate-bounce delay-200"></div>
+			</div>
+		</div>
+	)
+}
+
+const colorThemes = {
+	neutral: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.145 0 0)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.145 0 0)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.145 0 0)",
+				"--primary": "oklch(0.205 0 0)",
+				"--primary-foreground": "oklch(0.985 0 0)",
+				"--secondary": "oklch(0.97 0 0)",
+				"--secondary-foreground": "oklch(0.205 0 0)",
+				"--muted": "oklch(0.97 0 0)",
+				"--muted-foreground": "oklch(0.556 0 0)",
+				"--accent": "oklch(0.97 0 0)",
+				"--accent-foreground": "oklch(0.205 0 0)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.922 0 0)",
+				"--input": "oklch(0.922 0 0)",
+				"--ring": "oklch(0.708 0 0)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.145 0 0)",
+				"--sidebar-primary": "oklch(0.205 0 0)",
+				"--sidebar-primary-foreground": "oklch(0.985 0 0)",
+				"--sidebar-accent": "oklch(0.97 0 0)",
+				"--sidebar-accent-foreground": "oklch(0.205 0 0)",
+				"--sidebar-border": "oklch(0.922 0 0)",
+				"--sidebar-ring": "oklch(0.708 0 0)"
+			},
+			dark: {
+				"--background": "oklch(0.145 0 0)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.205 0 0)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.205 0 0)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.922 0 0)",
+				"--primary-foreground": "oklch(0.205 0 0)",
+				"--secondary": "oklch(0.269 0 0)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.269 0 0)",
+				"--muted-foreground": "oklch(0.708 0 0)",
+				"--accent": "oklch(0.269 0 0)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.556 0 0)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.205 0 0)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.488 0.243 264.376)",
+				"--sidebar-primary-foreground": "oklch(0.985 0 0)",
+				"--sidebar-accent": "oklch(0.269 0 0)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.556 0 0)"
+			}
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "0 0% 3.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "0 0% 3.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "0 0% 3.9%",
+				"--primary": "0 0% 9%",
+				"--primary-foreground": "0 0% 98%",
+				"--secondary": "0 0% 96.1%",
+				"--secondary-foreground": "0 0% 9%",
+				"--muted": "0 0% 96.1%",
+				"--muted-foreground": "0 0% 45.1%",
+				"--accent": "0 0% 96.1%",
+				"--accent-foreground": "0 0% 9%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "0 0% 89.8%",
+				"--input": "0 0% 89.8%",
+				"--ring": "0 0% 3.9%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%"
+			},
+			dark: {
+				"--background": "0 0% 3.9%",
+				"--foreground": "0 0% 98%",
+				"--card": "0 0% 3.9%",
+				"--card-foreground": "0 0% 98%",
+				"--popover": "0 0% 3.9%",
+				"--popover-foreground": "0 0% 98%",
+				"--primary": "0 0% 98%",
+				"--primary-foreground": "0 0% 9%",
+				"--secondary": "0 0% 14.9%",
+				"--secondary-foreground": "0 0% 98%",
+				"--muted": "0 0% 14.9%",
+				"--muted-foreground": "0 0% 63.9%",
+				"--accent": "0 0% 14.9%",
+				"--accent-foreground": "0 0% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "0 0% 14.9%",
+				"--input": "0 0% 14.9%",
+				"--ring": "0 0% 83.1%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%"
+			}
+		}
+	},
+	red: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.637 0.237 25.331)",
+				"--primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.637 0.237 25.331)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.637 0.237 25.331)",
+				"--sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.637 0.237 25.331)"
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.637 0.237 25.331)",
+				"--primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.637 0.237 25.331)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.637 0.237 25.331)",
+				"--sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.637 0.237 25.331)"
+			}
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "0 0% 3.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "0 0% 3.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "0 0% 3.9%",
+				"--primary": "0 72.2% 50.6%",
+				"--primary-foreground": "0 85.7% 97.3%",
+				"--secondary": "0 0% 96.1%",
+				"--secondary-foreground": "0 0% 9%",
+				"--muted": "0 0% 96.1%",
+				"--muted-foreground": "0 0% 45.1%",
+				"--accent": "0 0% 96.1%",
+				"--accent-foreground": "0 0% 9%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "0 0% 89.8%",
+				"--input": "0 0% 89.8%",
+				"--ring": "0 72.2% 50.6%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%"
+			},
+			dark: {
+				"--background": "0 0% 3.9%",
+				"--foreground": "0 0% 98%",
+				"--card": "0 0% 3.9%",
+				"--card-foreground": "0 0% 98%",
+				"--popover": "0 0% 3.9%",
+				"--popover-foreground": "0 0% 98%",
+				"--primary": "0 72.2% 50.6%",
+				"--primary-foreground": "0 85.7% 97.3%",
+				"--secondary": "0 0% 14.9%",
+				"--secondary-foreground": "0 0% 98%",
+				"--muted": "0 0% 14.9%",
+				"--muted-foreground": "0 0% 63.9%",
+				"--accent": "0 0% 14.9%",
+				"--accent-foreground": "0 0% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "0 0% 14.9%",
+				"--input": "0 0% 14.9%",
+				"--ring": "0 72.2% 50.6%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%"
+			}
+		}
+	},
+	rose: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.645 0.246 16.439)",
+				"--primary-foreground": "oklch(0.969 0.015 12.422)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.645 0.246 16.439)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.645 0.246 16.439)",
+				"--sidebar-primary-foreground": "oklch(0.969 0.015 12.422)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.645 0.246 16.439)"
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.645 0.246 16.439)",
+				"--primary-foreground": "oklch(0.969 0.015 12.422)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.645 0.246 16.439)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.645 0.246 16.439)",
+				"--sidebar-primary-foreground": "oklch(0.969 0.015 12.422)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.645 0.246 16.439)"
+			}
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "240 10% 3.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "240 10% 3.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "240 10% 3.9%",
+				"--primary": "346.8 77.2% 49.8%",
+				"--primary-foreground": "355.7 100% 97.3%",
+				"--secondary": "240 4.8% 95.9%",
+				"--secondary-foreground": "240 5.9% 10%",
+				"--muted": "240 4.8% 95.9%",
+				"--muted-foreground": "240 3.8% 46.1%",
+				"--accent": "240 4.8% 95.9%",
+				"--accent-foreground": "240 5.9% 10%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "240 5.9% 90%",
+				"--input": "240 5.9% 90%",
+				"--ring": "346.8 77.2% 49.8%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%"
+			},
+			dark: {
+				"--background": "20 14.3% 4.1%",
+				"--foreground": "0 0% 95%",
+				"--card": "24 9.8% 10%",
+				"--card-foreground": "0 0% 95%",
+				"--popover": "0 0% 9%",
+				"--popover-foreground": "0 0% 95%",
+				"--primary": "346.8 77.2% 49.8%",
+				"--primary-foreground": "355.7 100% 97.3%",
+				"--secondary": "240 3.7% 15.9%",
+				"--secondary-foreground": "0 0% 98%",
+				"--muted": "0 0% 15%",
+				"--muted-foreground": "240 5% 64.9%",
+				"--accent": "12 6.5% 15.1%",
+				"--accent-foreground": "0 0% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "0 85.7% 97.3%",
+				"--border": "240 3.7% 15.9%",
+				"--input": "240 3.7% 15.9%",
+				"--ring": "346.8 77.2% 49.8%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%"
+			}
+		}
+	},
+	orange: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.705 0.213 47.604)",
+				"--primary-foreground": "oklch(0.98 0.016 73.684)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.705 0.213 47.604)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.705 0.213 47.604)",
+				"--sidebar-primary-foreground": "oklch(0.98 0.016 73.684)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.705 0.213 47.604)"
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.646 0.222 41.116)",
+				"--primary-foreground": "oklch(0.98 0.016 73.684)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.646 0.222 41.116)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.646 0.222 41.116)",
+				"--sidebar-primary-foreground": "oklch(0.98 0.016 73.684)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.646 0.222 41.116)"
+			}
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "20 14.3% 4.1%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "20 14.3% 4.1%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "20 14.3% 4.1%",
+				"--primary": "24.6 95% 53.1%",
+				"--primary-foreground": "60 9.1% 97.8%",
+				"--secondary": "60 4.8% 95.9%",
+				"--secondary-foreground": "24 9.8% 10%",
+				"--muted": "60 4.8% 95.9%",
+				"--muted-foreground": "25 5.3% 44.7%",
+				"--accent": "60 4.8% 95.9%",
+				"--accent-foreground": "24 9.8% 10%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "60 9.1% 97.8%",
+				"--border": "20 5.9% 90%",
+				"--input": "20 5.9% 90%",
+				"--ring": "24.6 95% 53.1%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%"
+			},
+			dark: {
+				"--background": "20 14.3% 4.1%",
+				"--foreground": "60 9.1% 97.8%",
+				"--card": "20 14.3% 4.1%",
+				"--card-foreground": "60 9.1% 97.8%",
+				"--popover": "20 14.3% 4.1%",
+				"--popover-foreground": "60 9.1% 97.8%",
+				"--primary": "20.5 90.2% 48.2%",
+				"--primary-foreground": "60 9.1% 97.8%",
+				"--secondary": "12 6.5% 15.1%",
+				"--secondary-foreground": "60 9.1% 97.8%",
+				"--muted": "12 6.5% 15.1%",
+				"--muted-foreground": "24 5.4% 63.9%",
+				"--accent": "12 6.5% 15.1%",
+				"--accent-foreground": "60 9.1% 97.8%",
+				"--destructive": "0 72.2% 50.6%",
+				"--destructive-foreground": "60 9.1% 97.8%",
+				"--border": "12 6.5% 15.1%",
+				"--input": "12 6.5% 15.1%",
+				"--ring": "20.5 90.2% 48.2%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%"
+			}
+		}
+	},
+	green: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.723 0.219 149.579)",
+				"--primary-foreground": "oklch(0.982 0.018 155.826)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.723 0.219 149.579)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.723 0.219 149.579)",
+				"--sidebar-primary-foreground": "oklch(0.982 0.018 155.826)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.723 0.219 149.579)"
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.696 0.17 162.48)",
+				"--primary-foreground": "oklch(0.393 0.095 152.535)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.527 0.154 150.069)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.696 0.17 162.48)",
+				"--sidebar-primary-foreground": "oklch(0.393 0.095 152.535)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.527 0.154 150.069)"
+			}
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "240 10% 3.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "240 10% 3.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "240 10% 3.9%",
+				"--primary": "142.1 76.2% 36.3%",
+				"--primary-foreground": "355.7 100% 97.3%",
+				"--secondary": "240 4.8% 95.9%",
+				"--secondary-foreground": "240 5.9% 10%",
+				"--muted": "240 4.8% 95.9%",
+				"--muted-foreground": "240 3.8% 46.1%",
+				"--accent": "240 4.8% 95.9%",
+				"--accent-foreground": "240 5.9% 10%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "240 5.9% 90%",
+				"--input": "240 5.9% 90%",
+				"--ring": "142.1 76.2% 36.3%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%"
+			},
+			dark: {
+				"--background": "20 14.3% 4.1%",
+				"--foreground": "0 0% 95%",
+				"--card": "24 9.8% 10%",
+				"--card-foreground": "0 0% 95%",
+				"--popover": "0 0% 9%",
+				"--popover-foreground": "0 0% 95%",
+				"--primary": "142.1 70.6% 45.3%",
+				"--primary-foreground": "144.9 80.4% 10%",
+				"--secondary": "240 3.7% 15.9%",
+				"--secondary-foreground": "0 0% 98%",
+				"--muted": "0 0% 15%",
+				"--muted-foreground": "240 5% 64.9%",
+				"--accent": "12 6.5% 15.1%",
+				"--accent-foreground": "0 0% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "0 85.7% 97.3%",
+				"--border": "240 3.7% 15.9%",
+				"--input": "240 3.7% 15.9%",
+				"--ring": "142.4 71.8% 29.2%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%"
+			}
+		}
+	},
+	blue: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.623 0.214 259.815)",
+				"--primary-foreground": "oklch(0.97 0.014 254.604)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.623 0.214 259.815)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.623 0.214 259.815)",
+				"--sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.623 0.214 259.815)"
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.546 0.245 262.881)",
+				"--primary-foreground": "oklch(0.379 0.146 265.522)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.488 0.243 264.376)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.546 0.245 262.881)",
+				"--sidebar-primary-foreground": "oklch(0.379 0.146 265.522)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.488 0.243 264.376)"
+			}
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "222.2 84% 4.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "222.2 84% 4.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "222.2 84% 4.9%",
+				"--primary": "221.2 83.2% 53.3%",
+				"--primary-foreground": "210 40% 98%",
+				"--secondary": "210 40% 96.1%",
+				"--secondary-foreground": "222.2 47.4% 11.2%",
+				"--muted": "210 40% 96.1%",
+				"--muted-foreground": "215.4 16.3% 46.9%",
+				"--accent": "210 40% 96.1%",
+				"--accent-foreground": "222.2 47.4% 11.2%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "210 40% 98%",
+				"--border": "214.3 31.8% 91.4%",
+				"--input": "214.3 31.8% 91.4%",
+				"--ring": "221.2 83.2% 53.3%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%"
+			},
+			dark: {
+				"--background": "222.2 84% 4.9%",
+				"--foreground": "210 40% 98%",
+				"--card": "222.2 84% 4.9%",
+				"--card-foreground": "210 40% 98%",
+				"--popover": "222.2 84% 4.9%",
+				"--popover-foreground": "210 40% 98%",
+				"--primary": "217.2 91.2% 59.8%",
+				"--primary-foreground": "222.2 47.4% 11.2%",
+				"--secondary": "217.2 32.6% 17.5%",
+				"--secondary-foreground": "210 40% 98%",
+				"--muted": "217.2 32.6% 17.5%",
+				"--muted-foreground": "215 20.2% 65.1%",
+				"--accent": "217.2 32.6% 17.5%",
+				"--accent-foreground": "210 40% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "210 40% 98%",
+				"--border": "217.2 32.6% 17.5%",
+				"--input": "217.2 32.6% 17.5%",
+				"--ring": "224.3 76.3% 48%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%"
+			}
+		}
+	},
+	yellow: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.795 0.184 86.047)",
+				"--primary-foreground": "oklch(0.421 0.095 57.708)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.795 0.184 86.047)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.795 0.184 86.047)",
+				"--sidebar-primary-foreground": "oklch(0.421 0.095 57.708)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.795 0.184 86.047)"
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.795 0.184 86.047)",
+				"--primary-foreground": "oklch(0.421 0.095 57.708)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.554 0.135 66.442)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.795 0.184 86.047)",
+				"--sidebar-primary-foreground": "oklch(0.421 0.095 57.708)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.554 0.135 66.442)"
+			}
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "20 14.3% 4.1%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "20 14.3% 4.1%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "20 14.3% 4.1%",
+				"--primary": "47.9 95.8% 53.1%",
+				"--primary-foreground": "26 83.3% 14.1%",
+				"--secondary": "60 4.8% 95.9%",
+				"--secondary-foreground": "24 9.8% 10%",
+				"--muted": "60 4.8% 95.9%",
+				"--muted-foreground": "25 5.3% 44.7%",
+				"--accent": "60 4.8% 95.9%",
+				"--accent-foreground": "24 9.8% 10%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "60 9.1% 97.8%",
+				"--border": "20 5.9% 90%",
+				"--input": "20 5.9% 90%",
+				"--ring": "20 14.3% 4.1%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%"
+			},
+			dark: {
+				"--background": "20 14.3% 4.1%",
+				"--foreground": "60 9.1% 97.8%",
+				"--card": "20 14.3% 4.1%",
+				"--card-foreground": "60 9.1% 97.8%",
+				"--popover": "20 14.3% 4.1%",
+				"--popover-foreground": "60 9.1% 97.8%",
+				"--primary": "47.9 95.8% 53.1%",
+				"--primary-foreground": "26 83.3% 14.1%",
+				"--secondary": "12 6.5% 15.1%",
+				"--secondary-foreground": "60 9.1% 97.8%",
+				"--muted": "12 6.5% 15.1%",
+				"--muted-foreground": "24 5.4% 63.9%",
+				"--accent": "12 6.5% 15.1%",
+				"--accent-foreground": "60 9.1% 97.8%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "60 9.1% 97.8%",
+				"--border": "12 6.5% 15.1%",
+				"--input": "12 6.5% 15.1%",
+				"--ring": "35.5 91.7% 32.9%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%"
+			}
+		}
+	},
+	violet: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.637 0.237 25.331)",
+				"--primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.637 0.237 25.331)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.637 0.237 25.331)",
+				"--sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.637 0.237 25.331)"
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.637 0.237 25.331)",
+				"--primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.637 0.237 25.331)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.637 0.237 25.331)",
+				"--sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.637 0.237 25.331)"
+			}
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "224 71.4% 4.1%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "224 71.4% 4.1%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "224 71.4% 4.1%",
+				"--primary": "262.1 83.3% 57.8%",
+				"--primary-foreground": "210 20% 98%",
+				"--secondary": "220 14.3% 95.9%",
+				"--secondary-foreground": "220.9 39.3% 11%",
+				"--muted": "220 14.3% 95.9%",
+				"--muted-foreground": "220 8.9% 46.1%",
+				"--accent": "220 14.3% 95.9%",
+				"--accent-foreground": "220.9 39.3% 11%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "210 20% 98%",
+				"--border": "220 13% 91%",
+				"--input": "220 13% 91%",
+				"--ring": "262.1 83.3% 57.8%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%"
+			},
+			dark: {
+				"--background": "224 71.4% 4.1%",
+				"--foreground": "210 20% 98%",
+				"--card": "224 71.4% 4.1%",
+				"--card-foreground": "210 20% 98%",
+				"--popover": "224 71.4% 4.1%",
+				"--popover-foreground": "210 20% 98%",
+				"--primary": "263.4 70% 50.4%",
+				"--primary-foreground": "210 20% 98%",
+				"--secondary": "215 27.9% 16.9%",
+				"--secondary-foreground": "210 20% 98%",
+				"--muted": "215 27.9% 16.9%",
+				"--muted-foreground": "217.9 10.6% 64.9%",
+				"--accent": "215 27.9% 16.9%",
+				"--accent-foreground": "210 20% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "210 20% 98%",
+				"--border": "215 27.9% 16.9%",
+				"--input": "215 27.9% 16.9%",
+				"--ring": "263.4 70% 50.4%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%"
+			}
+		}
+	}
+};
+
+
+export {
+	SidebarThemeSelector,
+	Sidebar,
+	type SidebarTheme,
+	useSidebarTheme,
+	SidebarThemeProvider,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupAction,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarInput,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSkeleton,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+	useSidebar,
+	SidebarMenuAnchor,
+	SidebarMenuLink
+};