shadcn-glass-ui 2.2.0 → 2.2.1

package/dist/index.js

@@ -1,18 +1,16 @@
-import { $ as BaseProgressGlass, $t as DropdownMenuGlassShortcut, A as useChartHeight, An as InteractiveCard, At as notificationVariants, B as adaptEventsOfChild, Bt as GlassCardTitle, C as sparklineContainerVariants, Cn as AvatarGlassImage, Ct as skeletonVariants, D as Tooltip, Dn as AlertGlass, Dt as PopoverGlassLegacy, E as Cell, En as statusSizes, Et as PopoverGlassContent, F as selectLegendPayload, Ft as GlassCardAction, G as SegmentedControlGlass, Gt as DropdownMenuGlassContent, H as isNumber, Ht as DropdownGlass, I as useAppDispatch, It as GlassCardContent, J as progressSizes, Jt as DropdownMenuGlassLabel, K as RainbowProgressGlass, Kt as DropdownMenuGlassGroup, L as useAppSelector, Lt as GlassCardDescription, M as useMargin, Mn as TouchTarget, Mt as modalSizes, N as ResponsiveContainer, Nn as alertVariants, Nt as InputGlass, O as setLegendSettings, On as AlertGlassDescription, Ot as PopoverGlassTrigger, P as useElementOffset, Pt as GlassCard, Q as StatusIndicatorGlass, Qt as DropdownMenuGlassSeparator, R as getUniqPayload, Rt as GlassCardFooter, S as sparklineBarVariants, Sn as AvatarGlassFallback, St as SkeletonGlass, T as Bar, Tn as avatarSizes, Tt as PopoverGlassAnchor, U as useLegendPortal, Ut as DropdownMenuGlass, V as Symbols, Vt as cardIntensity, W as Surface, Wt as DropdownMenuGlassCheckboxItem, X as LanguageBarGlass, Xt as DropdownMenuGlassRadioGroup, Y as ProfileAvatarGlass, Yt as DropdownMenuGlassPortal, Z as FlagAlertGlass, Zt as DropdownMenuGlassRadioItem, _ as ContributionMetricsGlass, _n as ButtonGlass, _t as SliderGlass, a as HeaderBrandingGlass, an as inputVariants, at as insightCardVariants, b as AICardGlass, bn as badgeVariants, bt as useDirection, c as YearCardGlass, cn as Presence, ct as ExpandableHeaderGlass, d as TrustScoreDisplayGlass, dn as useLayoutEffect2, dt as TooltipGlassProvider, en as DropdownMenuGlassSub, et as ThemeToggleGlass, f as RepositoryMetadataGlass, fn as useCallbackRef, ft as TooltipGlassSimple, g as MetricCardGlass, gn as CheckboxGlass, gt as TabsGlass, h as MetricsGridGlass, hn as CircularProgressGlass, ht as toggleSizes, i as HeaderNavGlass, in as ComboBoxGlass, it as InsightCardGlass, j as useChartWidth, jn as FormFieldWrapper, jt as ModalGlass, k as setLegendSize, kn as AlertGlassTitle, kt as NotificationGlass, l as UserStatsLineGlass, ln as useSize, lt as TooltipGlass, m as RepositoryCardGlass, mn as composeEventHandlers, mt as ToggleGlass, n as ProjectsListGlass, nn as DropdownMenuGlassSubTrigger, nt as SortDropdownGlass, o as FlagsSectionGlass, on as Primitive$3, ot as insightVariantConfig, p as RepositoryHeaderGlass, pn as useComposedRefs, pt as TooltipGlassTrigger, q as ProgressGlass, qt as DropdownMenuGlassItem, r as ProfileHeaderGlass, rn as DropdownMenuGlassTrigger, rt as SearchBoxGlass, s as CareerStatsGlass, sn as useControllableState, st as IconButtonGlass, t as TrustScoreCardGlass, tn as DropdownMenuGlassSubContent, tt as StatItemGlass, u as UserInfoGlass, un as useId$1, ut as TooltipGlassContent, v as CircularMetricGlass, vn as buttonGlassVariants, vt as createCollection, w as BarChart, wn as AvatarGlassSimple, wt as PopoverGlass, x as SparklineGlass, xn as AvatarGlass, xt as clamp, y as CareerStatsHeaderGlass, yn as BadgeGlass, yt as usePrevious, z as resolveDefaultProps, zt as GlassCardHeader } from "./trust-score-card-glass-CUStm4o_.js";
+import { $ as BaseProgressGlass, $t as useLayoutEffect2, A as useChartHeight, At as modalSizes, B as adaptEventsOfChild, Bt as DropdownMenuGlassLabel, C as sparklineContainerVariants, Ct as PopoverGlassAnchor, D as Tooltip, Dt as NotificationGlass, E as Cell, Et as PopoverGlassTrigger, F as selectLegendPayload, Ft as DropdownMenuGlass, G as SegmentedControlGlass, Gt as DropdownMenuGlassShortcut, H as isNumber, Ht as DropdownMenuGlassRadioGroup, I as useAppDispatch, It as DropdownMenuGlassCheckboxItem, J as progressSizes, Jt as DropdownMenuGlassSubTrigger, K as RainbowProgressGlass, Kt as DropdownMenuGlassSub, L as useAppSelector, Lt as DropdownMenuGlassContent, M as useMargin, Mt as GlassCard, N as ResponsiveContainer, Nt as cardIntensity, O as setLegendSettings, Ot as notificationVariants, P as useElementOffset, Pt as DropdownGlass, Q as StatusIndicatorGlass, Qt as Presence, R as getUniqPayload, Rt as DropdownMenuGlassGroup, S as sparklineBarVariants, St as PopoverGlass, T as Bar, Tt as PopoverGlassLegacy, U as useLegendPortal, Ut as DropdownMenuGlassRadioItem, V as Symbols, Vt as DropdownMenuGlassPortal, W as Surface, Wt as DropdownMenuGlassSeparator, X as LanguageBarGlass, Xt as ComboBoxGlass, Y as ProfileAvatarGlass, Yt as DropdownMenuGlassTrigger, Z as FlagAlertGlass, Zt as inputVariants, _ as ContributionMetricsGlass, _n as AlertGlassTitle, _t as SliderGlass, a as HeaderBrandingGlass, an as ButtonGlass, at as insightCardVariants, b as AICardGlass, bn as TouchTarget, bt as SkeletonGlass, c as YearCardGlass, cn as badgeVariants, ct as ExpandableHeaderGlass, d as TrustScoreDisplayGlass, dn as AvatarGlassImage, dt as TooltipGlassProvider, en as useCallbackRef, et as ThemeToggleGlass, f as RepositoryMetadataGlass, fn as AvatarGlassSimple, ft as TooltipGlassSimple, g as MetricCardGlass, gn as AlertGlassDescription, gt as TabsGlass, h as MetricsGridGlass, hn as AlertGlass, ht as toggleSizes, i as HeaderNavGlass, in as CheckboxGlass, it as InsightCardGlass, j as useChartWidth, jt as InputGlass, k as setLegendSize, kt as ModalGlass, l as UserStatsLineGlass, ln as AvatarGlass, lt as TooltipGlass, m as RepositoryCardGlass, mn as statusSizes, mt as ToggleGlass, n as ProjectsListGlass, nn as composeEventHandlers, nt as SortDropdownGlass, o as FlagsSectionGlass, on as buttonGlassVariants, ot as insightVariantConfig, p as RepositoryHeaderGlass, pn as avatarSizes, pt as TooltipGlassTrigger, q as ProgressGlass, qt as DropdownMenuGlassSubContent, r as ProfileHeaderGlass, rn as CircularProgressGlass, rt as SearchBoxGlass, s as CareerStatsGlass, sn as BadgeGlass, st as IconButtonGlass, t as TrustScoreCardGlass, tn as useComposedRefs, tt as StatItemGlass, u as UserInfoGlass, un as AvatarGlassFallback, ut as TooltipGlassContent, v as CircularMetricGlass, vn as InteractiveCard, vt as useDirection, w as BarChart, wt as PopoverGlassContent, x as SparklineGlass, xn as alertVariants, xt as skeletonVariants, y as CareerStatsHeaderGlass, yn as FormFieldWrapper, yt as clamp, z as resolveDefaultProps, zt as DropdownMenuGlassItem } from "./trust-score-card-glass-Dg4_b_g_.js";
 import { t as cn } from "./utils-CcyeqpKQ.js";
 import { n as useHover, t as useFocus } from "./use-focus-CX0TJJIj.js";
 import { a as getThemeConfig, i as getNextTheme, n as THEME_CONFIG, o as useTheme, r as ThemeProvider, t as THEMES } from "./theme-context-_T5r1KG4.js";
 import { n as useResponsive, t as useWallpaperTint } from "./use-wallpaper-tint-DUgmytlY.js";
 import * as React$1 from "react";
-import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Check, ChevronDown, Circle, Menu, PanelLeft, PanelLeftClose, PanelLeftOpen, X } from "lucide-react";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Check, ChevronDown, Menu, PanelLeft, PanelLeftClose, PanelLeftOpen, X } from "lucide-react";
 import { clsx } from "clsx";
 import { cva } from "class-variance-authority";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slot, createSlot } from "@radix-ui/react-slot";
 import { createPortal } from "react-dom";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Toggle } from "@radix-ui/react-toggle";
 const stepperRootVariants = cva("flex w-full", {
 	variants: { orientation: {
 		horizontal: "flex-col",
@@ -373,637 +371,38 @@ const StepperGlass = {
 	Step: StepperStep,
 	Content: StepperContent
 };
-function createContextScope$3(scopeName, createContextScopeDeps = []) {
-	let defaultContexts = [];
-	function createContext3(rootComponentName, defaultContext) {
-		const BaseContext = React$1.createContext(defaultContext);
-		const index = defaultContexts.length;
-		defaultContexts = [...defaultContexts, defaultContext];
-		const Provider = (props) => {
-			const { scope, children, ...context } = props;
-			const Context = scope?.[scopeName]?.[index] || BaseContext;
-			const value = React$1.useMemo(() => context, Object.values(context));
-			return /* @__PURE__ */ jsx(Context.Provider, {
-				value,
-				children
-			});
-		};
-		Provider.displayName = rootComponentName + "Provider";
-		function useContext2(consumerName, scope) {
-			const Context = scope?.[scopeName]?.[index] || BaseContext;
-			const context = React$1.useContext(Context);
-			if (context) return context;
-			if (defaultContext !== void 0) return defaultContext;
-			throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
-		}
-		return [Provider, useContext2];
-	}
-	const createScope = () => {
-		const scopeContexts = defaultContexts.map((defaultContext) => {
-			return React$1.createContext(defaultContext);
-		});
-		return function useScope(scope) {
-			const contexts = scope?.[scopeName] || scopeContexts;
-			return React$1.useMemo(() => ({ [`__scope${scopeName}`]: {
-				...scope,
-				[scopeName]: contexts
-			} }), [scope, contexts]);
-		};
-	};
-	createScope.scopeName = scopeName;
-	return [createContext3, composeContextScopes$4(createScope, ...createContextScopeDeps)];
-}
-function composeContextScopes$4(...scopes) {
-	const baseScope = scopes[0];
-	if (scopes.length === 1) return baseScope;
-	const createScope = () => {
-		const scopeHooks = scopes.map((createScope2) => ({
-			useScope: createScope2(),
-			scopeName: createScope2.scopeName
-		}));
-		return function useComposedScopes(overrideScopes) {
-			const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
-				const currentScope = useScope(overrideScopes)[`__scope${scopeName}`];
-				return {
-					...nextScopes2,
-					...currentScope
-				};
-			}, {});
-			return React$1.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
-		};
-	};
-	createScope.scopeName = baseScope.scopeName;
-	return createScope;
-}
-var Primitive$4 = [
-	"a",
-	"button",
-	"div",
-	"form",
-	"h2",
-	"h3",
-	"img",
-	"input",
-	"label",
-	"li",
-	"nav",
-	"ol",
-	"p",
-	"select",
-	"span",
-	"svg",
-	"ul"
-].reduce((primitive, node) => {
-	const Slot$1 = createSlot(`Primitive.${node}`);
-	const Node = React$1.forwardRef((props, forwardedRef) => {
-		const { asChild, ...primitiveProps } = props;
-		const Comp = asChild ? Slot$1 : node;
-		if (typeof window !== "undefined") window[Symbol.for("radix-ui")] = true;
-		return /* @__PURE__ */ jsx(Comp, {
-			...primitiveProps,
-			ref: forwardedRef
-		});
-	});
-	Node.displayName = `Primitive.${node}`;
-	return {
-		...primitive,
-		[node]: Node
-	};
-}, {});
-function createContextScope$4(scopeName, createContextScopeDeps = []) {
-	let defaultContexts = [];
-	function createContext3(rootComponentName, defaultContext) {
-		const BaseContext = React$1.createContext(defaultContext);
-		const index = defaultContexts.length;
-		defaultContexts = [...defaultContexts, defaultContext];
-		const Provider = (props) => {
-			const { scope, children, ...context } = props;
-			const Context = scope?.[scopeName]?.[index] || BaseContext;
-			const value = React$1.useMemo(() => context, Object.values(context));
-			return /* @__PURE__ */ jsx(Context.Provider, {
-				value,
-				children
-			});
-		};
-		Provider.displayName = rootComponentName + "Provider";
-		function useContext2(consumerName, scope) {
-			const Context = scope?.[scopeName]?.[index] || BaseContext;
-			const context = React$1.useContext(Context);
-			if (context) return context;
-			if (defaultContext !== void 0) return defaultContext;
-			throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
-		}
-		return [Provider, useContext2];
-	}
-	const createScope = () => {
-		const scopeContexts = defaultContexts.map((defaultContext) => {
-			return React$1.createContext(defaultContext);
-		});
-		return function useScope(scope) {
-			const contexts = scope?.[scopeName] || scopeContexts;
-			return React$1.useMemo(() => ({ [`__scope${scopeName}`]: {
-				...scope,
-				[scopeName]: contexts
-			} }), [scope, contexts]);
-		};
-	};
-	createScope.scopeName = scopeName;
-	return [createContext3, composeContextScopes$3(createScope, ...createContextScopeDeps)];
-}
-function composeContextScopes$3(...scopes) {
-	const baseScope = scopes[0];
-	if (scopes.length === 1) return baseScope;
-	const createScope = () => {
-		const scopeHooks = scopes.map((createScope2) => ({
-			useScope: createScope2(),
-			scopeName: createScope2.scopeName
-		}));
-		return function useComposedScopes(overrideScopes) {
-			const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
-				const currentScope = useScope(overrideScopes)[`__scope${scopeName}`];
-				return {
-					...nextScopes2,
-					...currentScope
-				};
-			}, {});
-			return React$1.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
-		};
-	};
-	createScope.scopeName = baseScope.scopeName;
-	return createScope;
+var MOBILE_BREAKPOINT = 768;
+var SIDEBAR_COOKIE_NAME = "sidebar:state";
+var SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7;
+var SidebarContext = createContext(null);
+function useSidebar() {
+	const context = useContext(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within SidebarGlass.Provider. Wrap your component tree with <SidebarGlass.Provider>.");
+	return context;
 }
-var Primitive$5 = [
-	"a",
-	"button",
-	"div",
-	"form",
-	"h2",
-	"h3",
-	"img",
-	"input",
-	"label",
-	"li",
-	"nav",
-	"ol",
-	"p",
-	"select",
-	"span",
-	"svg",
-	"ul"
-].reduce((primitive, node) => {
-	const Slot$1 = createSlot(`Primitive.${node}`);
-	const Node = React$1.forwardRef((props, forwardedRef) => {
-		const { asChild, ...primitiveProps } = props;
-		const Comp = asChild ? Slot$1 : node;
-		if (typeof window !== "undefined") window[Symbol.for("radix-ui")] = true;
-		return /* @__PURE__ */ jsx(Comp, {
-			...primitiveProps,
-			ref: forwardedRef
-		});
-	});
-	Node.displayName = `Primitive.${node}`;
-	return {
-		...primitive,
-		[node]: Node
-	};
-}, {});
-var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
-var EVENT_OPTIONS = {
-	bubbles: false,
-	cancelable: true
-};
-var GROUP_NAME = "RovingFocusGroup";
-var [Collection, useCollection, createCollectionScope] = createCollection(GROUP_NAME);
-var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope$4(GROUP_NAME, [createCollectionScope]);
-var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
-var RovingFocusGroup = React$1.forwardRef((props, forwardedRef) => {
-	return /* @__PURE__ */ jsx(Collection.Provider, {
-		scope: props.__scopeRovingFocusGroup,
-		children: /* @__PURE__ */ jsx(Collection.Slot, {
-			scope: props.__scopeRovingFocusGroup,
-			children: /* @__PURE__ */ jsx(RovingFocusGroupImpl, {
-				...props,
-				ref: forwardedRef
-			})
-		})
-	});
-});
-RovingFocusGroup.displayName = GROUP_NAME;
-var RovingFocusGroupImpl = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeRovingFocusGroup, orientation, loop = false, dir, currentTabStopId: currentTabStopIdProp, defaultCurrentTabStopId, onCurrentTabStopIdChange, onEntryFocus, preventScrollOnEntryFocus = false, ...groupProps } = props;
-	const ref = React$1.useRef(null);
-	const composedRefs = useComposedRefs(forwardedRef, ref);
-	const direction = useDirection(dir);
-	const [currentTabStopId, setCurrentTabStopId] = useControllableState({
-		prop: currentTabStopIdProp,
-		defaultProp: defaultCurrentTabStopId ?? null,
-		onChange: onCurrentTabStopIdChange,
-		caller: GROUP_NAME
-	});
-	const [isTabbingBackOut, setIsTabbingBackOut] = React$1.useState(false);
-	const handleEntryFocus = useCallbackRef(onEntryFocus);
-	const getItems = useCollection(__scopeRovingFocusGroup);
-	const isClickFocusRef = React$1.useRef(false);
-	const [focusableItemsCount, setFocusableItemsCount] = React$1.useState(0);
-	React$1.useEffect(() => {
-		const node = ref.current;
-		if (node) {
-			node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
-			return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
+const SidebarProvider = ({ children, open: controlledOpen, onOpenChange, defaultOpen = true, side = "left", variant = "sidebar", collapsible = "offcanvas", cookieName = SIDEBAR_COOKIE_NAME, keyboardShortcut = "b" }) => {
+	const [internalOpen, setInternalOpen] = useState(() => {
+		if (typeof document !== "undefined") {
+			const sidebarCookie = document.cookie.split(";").find((c) => c.trim().startsWith(`${cookieName}=`));
+			if (sidebarCookie) return sidebarCookie.split("=")[1] === "true";
 		}
-	}, [handleEntryFocus]);
-	return /* @__PURE__ */ jsx(RovingFocusProvider, {
-		scope: __scopeRovingFocusGroup,
-		orientation,
-		dir: direction,
-		loop,
-		currentTabStopId,
-		onItemFocus: React$1.useCallback((tabStopId) => setCurrentTabStopId(tabStopId), [setCurrentTabStopId]),
-		onItemShiftTab: React$1.useCallback(() => setIsTabbingBackOut(true), []),
-		onFocusableItemAdd: React$1.useCallback(() => setFocusableItemsCount((prevCount) => prevCount + 1), []),
-		onFocusableItemRemove: React$1.useCallback(() => setFocusableItemsCount((prevCount) => prevCount - 1), []),
-		children: /* @__PURE__ */ jsx(Primitive$5.div, {
-			tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
-			"data-orientation": orientation,
-			...groupProps,
-			ref: composedRefs,
-			style: {
-				outline: "none",
-				...props.style
-			},
-			onMouseDown: composeEventHandlers(props.onMouseDown, () => {
-				isClickFocusRef.current = true;
-			}),
-			onFocus: composeEventHandlers(props.onFocus, (event) => {
-				const isKeyboardFocus = !isClickFocusRef.current;
-				if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
-					const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
-					event.currentTarget.dispatchEvent(entryFocusEvent);
-					if (!entryFocusEvent.defaultPrevented) {
-						const items = getItems().filter((item) => item.focusable);
-						focusFirst([
-							items.find((item) => item.active),
-							items.find((item) => item.id === currentTabStopId),
-							...items
-						].filter(Boolean).map((item) => item.ref.current), preventScrollOnEntryFocus);
-					}
-				}
-				isClickFocusRef.current = false;
-			}),
-			onBlur: composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))
-		})
+		return defaultOpen;
 	});
-});
-var ITEM_NAME$2 = "RovingFocusGroupItem";
-var RovingFocusGroupItem = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeRovingFocusGroup, focusable = true, active = false, tabStopId, children, ...itemProps } = props;
-	const autoId = useId$1();
-	const id = tabStopId || autoId;
-	const context = useRovingFocusContext(ITEM_NAME$2, __scopeRovingFocusGroup);
-	const isCurrentTabStop = context.currentTabStopId === id;
-	const getItems = useCollection(__scopeRovingFocusGroup);
-	const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
-	React$1.useEffect(() => {
-		if (focusable) {
-			onFocusableItemAdd();
-			return () => onFocusableItemRemove();
-		}
+	const isControlled = controlledOpen !== void 0;
+	const open = isControlled ? controlledOpen : internalOpen;
+	const setOpen = useCallback((value$1) => {
+		if (!isControlled) setInternalOpen(value$1);
+		onOpenChange?.(value$1);
+		if (typeof document !== "undefined") document.cookie = `${cookieName}=${value$1}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 	}, [
-		focusable,
-		onFocusableItemAdd,
-		onFocusableItemRemove
+		isControlled,
+		onOpenChange,
+		cookieName
 	]);
-	return /* @__PURE__ */ jsx(Collection.ItemSlot, {
-		scope: __scopeRovingFocusGroup,
-		id,
-		focusable,
-		active,
-		children: /* @__PURE__ */ jsx(Primitive$5.span, {
-			tabIndex: isCurrentTabStop ? 0 : -1,
-			"data-orientation": context.orientation,
-			...itemProps,
-			ref: forwardedRef,
-			onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
-				if (!focusable) event.preventDefault();
-				else context.onItemFocus(id);
-			}),
-			onFocus: composeEventHandlers(props.onFocus, () => context.onItemFocus(id)),
-			onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
-				if (event.key === "Tab" && event.shiftKey) {
-					context.onItemShiftTab();
-					return;
-				}
-				if (event.target !== event.currentTarget) return;
-				const focusIntent = getFocusIntent(event, context.orientation, context.dir);
-				if (focusIntent !== void 0) {
-					if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
-					event.preventDefault();
-					let candidateNodes = getItems().filter((item) => item.focusable).map((item) => item.ref.current);
-					if (focusIntent === "last") candidateNodes.reverse();
-					else if (focusIntent === "prev" || focusIntent === "next") {
-						if (focusIntent === "prev") candidateNodes.reverse();
-						const currentIndex = candidateNodes.indexOf(event.currentTarget);
-						candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
-					}
-					setTimeout(() => focusFirst(candidateNodes));
-				}
-			}),
-			children: typeof children === "function" ? children({
-				isCurrentTabStop,
-				hasTabStop: currentTabStopId != null
-			}) : children
-		})
-	});
-});
-RovingFocusGroupItem.displayName = ITEM_NAME$2;
-var MAP_KEY_TO_FOCUS_INTENT = {
-	ArrowLeft: "prev",
-	ArrowUp: "prev",
-	ArrowRight: "next",
-	ArrowDown: "next",
-	PageUp: "first",
-	Home: "first",
-	PageDown: "last",
-	End: "last"
-};
-function getDirectionAwareKey(key, dir) {
-	if (dir !== "rtl") return key;
-	return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
-}
-function getFocusIntent(event, orientation, dir) {
-	const key = getDirectionAwareKey(event.key, dir);
-	if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
-	if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
-	return MAP_KEY_TO_FOCUS_INTENT[key];
-}
-function focusFirst(candidates, preventScroll = false) {
-	const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
-	for (const candidate of candidates) {
-		if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
-		candidate.focus({ preventScroll });
-		if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
-	}
-}
-function wrapArray(array, startIndex) {
-	return array.map((_, index) => array[(startIndex + index) % array.length]);
-}
-var Root$3 = RovingFocusGroup;
-var Item = RovingFocusGroupItem;
-var TOGGLE_GROUP_NAME = "ToggleGroup";
-var [createToggleGroupContext, createToggleGroupScope] = createContextScope$3(TOGGLE_GROUP_NAME, [createRovingFocusGroupScope]);
-var useRovingFocusGroupScope$1 = createRovingFocusGroupScope();
-var ToggleGroup = React.forwardRef((props, forwardedRef) => {
-	const { type, ...toggleGroupProps } = props;
-	if (type === "single") return /* @__PURE__ */ jsx(ToggleGroupImplSingle, {
-		...toggleGroupProps,
-		ref: forwardedRef
-	});
-	if (type === "multiple") return /* @__PURE__ */ jsx(ToggleGroupImplMultiple, {
-		...toggleGroupProps,
-		ref: forwardedRef
-	});
-	throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
-});
-ToggleGroup.displayName = TOGGLE_GROUP_NAME;
-var [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
-var ToggleGroupImplSingle = React.forwardRef((props, forwardedRef) => {
-	const { value: valueProp, defaultValue, onValueChange = () => {}, ...toggleGroupSingleProps } = props;
-	const [value, setValue] = useControllableState({
-		prop: valueProp,
-		defaultProp: defaultValue ?? "",
-		onChange: onValueChange,
-		caller: TOGGLE_GROUP_NAME
-	});
-	return /* @__PURE__ */ jsx(ToggleGroupValueProvider, {
-		scope: props.__scopeToggleGroup,
-		type: "single",
-		value: React.useMemo(() => value ? [value] : [], [value]),
-		onItemActivate: setValue,
-		onItemDeactivate: React.useCallback(() => setValue(""), [setValue]),
-		children: /* @__PURE__ */ jsx(ToggleGroupImpl, {
-			...toggleGroupSingleProps,
-			ref: forwardedRef
-		})
-	});
-});
-var ToggleGroupImplMultiple = React.forwardRef((props, forwardedRef) => {
-	const { value: valueProp, defaultValue, onValueChange = () => {}, ...toggleGroupMultipleProps } = props;
-	const [value, setValue] = useControllableState({
-		prop: valueProp,
-		defaultProp: defaultValue ?? [],
-		onChange: onValueChange,
-		caller: TOGGLE_GROUP_NAME
-	});
-	const handleButtonActivate = React.useCallback((itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]), [setValue]);
-	const handleButtonDeactivate = React.useCallback((itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)), [setValue]);
-	return /* @__PURE__ */ jsx(ToggleGroupValueProvider, {
-		scope: props.__scopeToggleGroup,
-		type: "multiple",
-		value,
-		onItemActivate: handleButtonActivate,
-		onItemDeactivate: handleButtonDeactivate,
-		children: /* @__PURE__ */ jsx(ToggleGroupImpl, {
-			...toggleGroupMultipleProps,
-			ref: forwardedRef
-		})
-	});
-});
-ToggleGroup.displayName = TOGGLE_GROUP_NAME;
-var [ToggleGroupContext$1, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
-var ToggleGroupImpl = React.forwardRef((props, forwardedRef) => {
-	const { __scopeToggleGroup, disabled = false, rovingFocus = true, orientation, dir, loop = true, ...toggleGroupProps } = props;
-	const rovingFocusGroupScope = useRovingFocusGroupScope$1(__scopeToggleGroup);
-	const direction = useDirection(dir);
-	const commonProps = {
-		role: "group",
-		dir: direction,
-		...toggleGroupProps
-	};
-	return /* @__PURE__ */ jsx(ToggleGroupContext$1, {
-		scope: __scopeToggleGroup,
-		rovingFocus,
-		disabled,
-		children: rovingFocus ? /* @__PURE__ */ jsx(Root$3, {
-			asChild: true,
-			...rovingFocusGroupScope,
-			orientation,
-			dir: direction,
-			loop,
-			children: /* @__PURE__ */ jsx(Primitive$4.div, {
-				...commonProps,
-				ref: forwardedRef
-			})
-		}) : /* @__PURE__ */ jsx(Primitive$4.div, {
-			...commonProps,
-			ref: forwardedRef
-		})
-	});
-});
-var ITEM_NAME$1 = "ToggleGroupItem";
-var ToggleGroupItem = React.forwardRef((props, forwardedRef) => {
-	const valueContext = useToggleGroupValueContext(ITEM_NAME$1, props.__scopeToggleGroup);
-	const context = useToggleGroupContext(ITEM_NAME$1, props.__scopeToggleGroup);
-	const rovingFocusGroupScope = useRovingFocusGroupScope$1(props.__scopeToggleGroup);
-	const pressed = valueContext.value.includes(props.value);
-	const disabled = context.disabled || props.disabled;
-	const commonProps = {
-		...props,
-		pressed,
-		disabled
-	};
-	const ref = React.useRef(null);
-	return context.rovingFocus ? /* @__PURE__ */ jsx(Item, {
-		asChild: true,
-		...rovingFocusGroupScope,
-		focusable: !disabled,
-		active: pressed,
-		ref,
-		children: /* @__PURE__ */ jsx(ToggleGroupItemImpl, {
-			...commonProps,
-			ref: forwardedRef
-		})
-	}) : /* @__PURE__ */ jsx(ToggleGroupItemImpl, {
-		...commonProps,
-		ref: forwardedRef
-	});
-});
-ToggleGroupItem.displayName = ITEM_NAME$1;
-var ToggleGroupItemImpl = React.forwardRef((props, forwardedRef) => {
-	const { __scopeToggleGroup, value, ...itemProps } = props;
-	const valueContext = useToggleGroupValueContext(ITEM_NAME$1, __scopeToggleGroup);
-	const singleProps = {
-		role: "radio",
-		"aria-checked": props.pressed,
-		"aria-pressed": void 0
-	};
-	return /* @__PURE__ */ jsx(Toggle, {
-		...valueContext.type === "single" ? singleProps : void 0,
-		...itemProps,
-		ref: forwardedRef,
-		onPressedChange: (pressed) => {
-			if (pressed) valueContext.onItemActivate(value);
-			else valueContext.onItemDeactivate(value);
-		}
-	});
-});
-var Root2$1 = ToggleGroup;
-var Item2$1 = ToggleGroupItem;
-var ToggleGroupContext = React$1.createContext({
-	size: "default",
-	variant: "default"
-});
-var toggleGroupItemVariants = cva([
-	"inline-flex items-center justify-center rounded-md text-sm font-medium",
-	"transition-all duration-200",
-	"focus:outline-none focus-visible:ring-2",
-	"focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2",
-	"disabled:pointer-events-none disabled:opacity-50"
-], {
-	variants: {
-		variant: {
-			default: [
-				"bg-[var(--toggle-group-item-bg,transparent)]",
-				"hover:bg-[var(--toggle-group-item-hover-bg,var(--glass-bg-subtle))]",
-				"data-[state=on]:bg-[var(--toggle-group-item-active-bg,var(--semantic-primary-subtle))]",
-				"data-[state=on]:text-[var(--toggle-group-item-active-text,var(--semantic-primary))]"
-			],
-			outline: [
-				"border border-[var(--toggle-group-item-border,var(--glass-border))]",
-				"bg-transparent",
-				"hover:bg-[var(--toggle-group-item-hover-bg,var(--glass-bg-subtle))]",
-				"data-[state=on]:border-[var(--semantic-primary)]",
-				"data-[state=on]:bg-[var(--toggle-group-item-active-bg,var(--semantic-primary-subtle))]",
-				"data-[state=on]:text-[var(--toggle-group-item-active-text,var(--semantic-primary))]"
-			]
-		},
-		size: {
-			default: "h-10 px-3",
-			sm: "h-8 px-2",
-			lg: "h-11 px-4"
-		}
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default"
-	}
-});
-function ToggleGroupGlassRootImpl(props, ref) {
-	const { className, variant = "default", size = "default", children, ...rest } = props;
-	const containerClasses = cn("inline-flex items-center justify-center gap-1", "rounded-lg p-1", "bg-[var(--toggle-group-bg,var(--glass-bg-subtle))]", "border border-[var(--toggle-group-border,var(--glass-border))]", className);
-	const contextValue = {
-		size: size ?? "default",
-		variant: variant ?? "default"
-	};
-	if (props.type === "multiple") return /* @__PURE__ */ jsx(Root2$1, {
-		ref,
-		className: containerClasses,
-		...rest,
-		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
-			value: contextValue,
-			children
-		})
-	});
-	return /* @__PURE__ */ jsx(Root2$1, {
-		ref,
-		className: containerClasses,
-		...rest,
-		children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
-			value: contextValue,
-			children
-		})
-	});
-}
-var ToggleGroupGlassRoot = React$1.forwardRef(ToggleGroupGlassRootImpl);
-ToggleGroupGlassRoot.displayName = "ToggleGroupGlassRoot";
-var ToggleGroupGlassItem = React$1.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-	const context = React$1.useContext(ToggleGroupContext);
-	return /* @__PURE__ */ jsx(Item2$1, {
-		ref,
-		className: cn(toggleGroupItemVariants({
-			variant: variant ?? context.variant,
-			size: size ?? context.size
-		}), className),
-		...props,
-		children
-	});
-});
-ToggleGroupGlassItem.displayName = "ToggleGroupGlassItem";
-const ToggleGroupGlass = {
-	Root: ToggleGroupGlassRoot,
-	Item: ToggleGroupGlassItem
-};
-var MOBILE_BREAKPOINT = 768;
-var SIDEBAR_COOKIE_NAME = "sidebar:state";
-var SIDEBAR_COOKIE_MAX_AGE = 3600 * 24 * 7;
-var SidebarContext = createContext(null);
-function useSidebar() {
-	const context = useContext(SidebarContext);
-	if (!context) throw new Error("useSidebar must be used within SidebarGlass.Provider. Wrap your component tree with <SidebarGlass.Provider>.");
-	return context;
-}
-const SidebarProvider = ({ children, open: controlledOpen, onOpenChange, defaultOpen = true, side = "left", variant = "sidebar", collapsible = "offcanvas", cookieName = SIDEBAR_COOKIE_NAME, keyboardShortcut = "b" }) => {
-	const [internalOpen, setInternalOpen] = useState(() => {
-		if (typeof document !== "undefined") {
-			const sidebarCookie = document.cookie.split(";").find((c) => c.trim().startsWith(`${cookieName}=`));
-			if (sidebarCookie) return sidebarCookie.split("=")[1] === "true";
-		}
-		return defaultOpen;
-	});
-	const isControlled = controlledOpen !== void 0;
-	const open = isControlled ? controlledOpen : internalOpen;
-	const setOpen = useCallback((value$1) => {
-		if (!isControlled) setInternalOpen(value$1);
-		onOpenChange?.(value$1);
-		if (typeof document !== "undefined") document.cookie = `${cookieName}=${value$1}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-	}, [
-		isControlled,
-		onOpenChange,
-		cookieName
-	]);
-	const [openMobile, setOpenMobile] = useState(false);
-	const [isMobile, setIsMobile] = useState(() => {
-		if (typeof window === "undefined") return false;
-		return window.innerWidth < MOBILE_BREAKPOINT;
+	const [openMobile, setOpenMobile] = useState(false);
+	const [isMobile, setIsMobile] = useState(() => {
+		if (typeof window === "undefined") return false;
+		return window.innerWidth < MOBILE_BREAKPOINT;
 	});
 	useEffect(() => {
 		if (typeof window === "undefined") return;
@@ -1379,875 +778,342 @@ const SidebarGlass = {
 	MenuSubItem: SidebarMenuSubItem,
 	MenuSubButton: SidebarMenuSubButton
 };
-var NAME = "Separator";
-var DEFAULT_ORIENTATION = "horizontal";
-var ORIENTATIONS = ["horizontal", "vertical"];
-var Separator = React$1.forwardRef((props, forwardedRef) => {
-	const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
-	const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
-	const ariaOrientation = orientation === "vertical" ? orientation : void 0;
-	const semanticProps = decorative ? { role: "none" } : {
-		"aria-orientation": ariaOrientation,
-		role: "separator"
-	};
-	return /* @__PURE__ */ jsx(Primitive$3.div, {
-		"data-orientation": orientation,
-		...semanticProps,
-		...domProps,
-		ref: forwardedRef
-	});
-});
-Separator.displayName = NAME;
-function isValidOrientation(orientation) {
-	return ORIENTATIONS.includes(orientation);
-}
-var Root$2 = Separator;
-var SeparatorGlass = React$1.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(Root$2, {
-	ref,
-	decorative,
-	orientation,
-	className: cn("shrink-0", "bg-[var(--separator-bg,var(--glass-border))]", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
-	...props
-}));
-SeparatorGlass.displayName = "SeparatorGlass";
-var Primitive$2 = [
-	"a",
-	"button",
-	"div",
-	"form",
-	"h2",
-	"h3",
-	"img",
-	"input",
-	"label",
-	"li",
-	"nav",
-	"ol",
-	"p",
-	"select",
-	"span",
-	"svg",
-	"ul"
-].reduce((primitive, node) => {
-	const Slot$1 = createSlot(`Primitive.${node}`);
-	const Node = React$1.forwardRef((props, forwardedRef) => {
-		const { asChild, ...primitiveProps } = props;
-		const Comp = asChild ? Slot$1 : node;
-		if (typeof window !== "undefined") window[Symbol.for("radix-ui")] = true;
-		return /* @__PURE__ */ jsx(Comp, {
-			...primitiveProps,
-			ref: forwardedRef
-		});
-	});
-	Node.displayName = `Primitive.${node}`;
-	return {
-		...primitive,
-		[node]: Node
-	};
-}, {});
-function createContextScope$2(scopeName, createContextScopeDeps = []) {
-	let defaultContexts = [];
-	function createContext3(rootComponentName, defaultContext) {
-		const BaseContext = React$1.createContext(defaultContext);
-		const index = defaultContexts.length;
-		defaultContexts = [...defaultContexts, defaultContext];
-		const Provider = (props) => {
-			const { scope, children, ...context } = props;
-			const Context = scope?.[scopeName]?.[index] || BaseContext;
-			const value = React$1.useMemo(() => context, Object.values(context));
-			return /* @__PURE__ */ jsx(Context.Provider, {
-				value,
-				children
-			});
-		};
-		Provider.displayName = rootComponentName + "Provider";
-		function useContext2(consumerName, scope) {
-			const Context = scope?.[scopeName]?.[index] || BaseContext;
-			const context = React$1.useContext(Context);
-			if (context) return context;
-			if (defaultContext !== void 0) return defaultContext;
-			throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+function _extends$1() {
+	return _extends$1 = Object.assign ? Object.assign.bind() : function(n) {
+		for (var e = 1; e < arguments.length; e++) {
+			var t = arguments[e];
+			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
 		}
-		return [Provider, useContext2];
+		return n;
+	}, _extends$1.apply(null, arguments);
+}
+function ownKeys$1(e, r) {
+	var t = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var o = Object.getOwnPropertySymbols(e);
+		r && (o = o.filter(function(r$1) {
+			return Object.getOwnPropertyDescriptor(e, r$1).enumerable;
+		})), t.push.apply(t, o);
 	}
-	const createScope = () => {
-		const scopeContexts = defaultContexts.map((defaultContext) => {
-			return React$1.createContext(defaultContext);
+	return t;
+}
+function _objectSpread$1(e) {
+	for (var r = 1; r < arguments.length; r++) {
+		var t = null != arguments[r] ? arguments[r] : {};
+		r % 2 ? ownKeys$1(Object(t), !0).forEach(function(r$1) {
+			_defineProperty$1(e, r$1, t[r$1]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function(r$1) {
+			Object.defineProperty(e, r$1, Object.getOwnPropertyDescriptor(t, r$1));
 		});
-		return function useScope(scope) {
-			const contexts = scope?.[scopeName] || scopeContexts;
-			return React$1.useMemo(() => ({ [`__scope${scopeName}`]: {
-				...scope,
-				[scopeName]: contexts
-			} }), [scope, contexts]);
-		};
-	};
-	createScope.scopeName = scopeName;
-	return [createContext3, composeContextScopes$2(createScope, ...createContextScopeDeps)];
+	}
+	return e;
 }
-function composeContextScopes$2(...scopes) {
-	const baseScope = scopes[0];
-	if (scopes.length === 1) return baseScope;
-	const createScope = () => {
-		const scopeHooks = scopes.map((createScope2) => ({
-			useScope: createScope2(),
-			scopeName: createScope2.scopeName
-		}));
-		return function useComposedScopes(overrideScopes) {
-			const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
-				const currentScope = useScope(overrideScopes)[`__scope${scopeName}`];
-				return {
-					...nextScopes2,
-					...currentScope
-				};
-			}, {});
-			return React$1.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
-		};
-	};
-	createScope.scopeName = baseScope.scopeName;
-	return createScope;
+function _defineProperty$1(e, r, t) {
+	return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
 }
-function useStateMachine(initialState, machine) {
-	return React$1.useReducer((state, event) => {
-		return machine[state][event] ?? state;
-	}, initialState);
+function _toPropertyKey$1(t) {
+	var i = _toPrimitive$1(t, "string");
+	return "symbol" == typeof i ? i : i + "";
 }
-var SCROLL_AREA_NAME = "ScrollArea";
-var [createScrollAreaContext, createScrollAreaScope] = createContextScope$2(SCROLL_AREA_NAME);
-var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
-var ScrollArea$1 = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeScrollArea, type = "hover", dir, scrollHideDelay = 600, ...scrollAreaProps } = props;
-	const [scrollArea, setScrollArea] = React$1.useState(null);
-	const [viewport, setViewport] = React$1.useState(null);
-	const [content, setContent] = React$1.useState(null);
-	const [scrollbarX, setScrollbarX] = React$1.useState(null);
-	const [scrollbarY, setScrollbarY] = React$1.useState(null);
-	const [cornerWidth, setCornerWidth] = React$1.useState(0);
-	const [cornerHeight, setCornerHeight] = React$1.useState(0);
-	const [scrollbarXEnabled, setScrollbarXEnabled] = React$1.useState(false);
-	const [scrollbarYEnabled, setScrollbarYEnabled] = React$1.useState(false);
-	const composedRefs = useComposedRefs(forwardedRef, (node) => setScrollArea(node));
-	const direction = useDirection(dir);
-	return /* @__PURE__ */ jsx(ScrollAreaProvider, {
-		scope: __scopeScrollArea,
-		type,
-		dir: direction,
-		scrollHideDelay,
-		scrollArea,
-		viewport,
-		onViewportChange: setViewport,
-		content,
-		onContentChange: setContent,
-		scrollbarX,
-		onScrollbarXChange: setScrollbarX,
-		scrollbarXEnabled,
-		onScrollbarXEnabledChange: setScrollbarXEnabled,
-		scrollbarY,
-		onScrollbarYChange: setScrollbarY,
-		scrollbarYEnabled,
-		onScrollbarYEnabledChange: setScrollbarYEnabled,
-		onCornerWidthChange: setCornerWidth,
-		onCornerHeightChange: setCornerHeight,
-		children: /* @__PURE__ */ jsx(Primitive$2.div, {
-			dir: direction,
-			...scrollAreaProps,
-			ref: composedRefs,
-			style: {
-				position: "relative",
-				["--radix-scroll-area-corner-width"]: cornerWidth + "px",
-				["--radix-scroll-area-corner-height"]: cornerHeight + "px",
-				...props.style
-			}
-		})
-	});
-});
-ScrollArea$1.displayName = SCROLL_AREA_NAME;
-var VIEWPORT_NAME = "ScrollAreaViewport";
-var ScrollAreaViewport = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
-	const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
-	const composedRefs = useComposedRefs(forwardedRef, React$1.useRef(null), context.onViewportChange);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
-		dangerouslySetInnerHTML: { __html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}` },
-		nonce
-	}), /* @__PURE__ */ jsx(Primitive$2.div, {
-		"data-radix-scroll-area-viewport": "",
-		...viewportProps,
-		ref: composedRefs,
-		style: {
-			overflowX: context.scrollbarXEnabled ? "scroll" : "hidden",
-			overflowY: context.scrollbarYEnabled ? "scroll" : "hidden",
-			...props.style
-		},
-		children: /* @__PURE__ */ jsx("div", {
-			ref: context.onContentChange,
-			style: {
-				minWidth: "100%",
-				display: "table"
-			},
-			children
-		})
-	})] });
-});
-ScrollAreaViewport.displayName = VIEWPORT_NAME;
-var SCROLLBAR_NAME = "ScrollAreaScrollbar";
-var ScrollAreaScrollbar = React$1.forwardRef((props, forwardedRef) => {
-	const { forceMount, ...scrollbarProps } = props;
-	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-	const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
-	const isHorizontal = props.orientation === "horizontal";
-	React$1.useEffect(() => {
-		isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
-		return () => {
-			isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
-		};
-	}, [
-		isHorizontal,
-		onScrollbarXEnabledChange,
-		onScrollbarYEnabledChange
-	]);
-	return context.type === "hover" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarHover, {
-		...scrollbarProps,
-		ref: forwardedRef,
-		forceMount
-	}) : context.type === "scroll" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarScroll, {
-		...scrollbarProps,
-		ref: forwardedRef,
-		forceMount
-	}) : context.type === "auto" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarAuto, {
-		...scrollbarProps,
-		ref: forwardedRef,
-		forceMount
-	}) : context.type === "always" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
-		...scrollbarProps,
-		ref: forwardedRef
-	}) : null;
-});
-ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
-var ScrollAreaScrollbarHover = React$1.forwardRef((props, forwardedRef) => {
-	const { forceMount, ...scrollbarProps } = props;
-	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-	const [visible, setVisible] = React$1.useState(false);
-	React$1.useEffect(() => {
-		const scrollArea = context.scrollArea;
-		let hideTimer = 0;
-		if (scrollArea) {
-			const handlePointerEnter = () => {
-				window.clearTimeout(hideTimer);
-				setVisible(true);
-			};
-			const handlePointerLeave = () => {
-				hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
-			};
-			scrollArea.addEventListener("pointerenter", handlePointerEnter);
-			scrollArea.addEventListener("pointerleave", handlePointerLeave);
-			return () => {
-				window.clearTimeout(hideTimer);
-				scrollArea.removeEventListener("pointerenter", handlePointerEnter);
-				scrollArea.removeEventListener("pointerleave", handlePointerLeave);
-			};
-		}
-	}, [context.scrollArea, context.scrollHideDelay]);
-	return /* @__PURE__ */ jsx(Presence, {
-		present: forceMount || visible,
-		children: /* @__PURE__ */ jsx(ScrollAreaScrollbarAuto, {
-			"data-state": visible ? "visible" : "hidden",
-			...scrollbarProps,
-			ref: forwardedRef
-		})
-	});
-});
-var ScrollAreaScrollbarScroll = React$1.forwardRef((props, forwardedRef) => {
-	const { forceMount, ...scrollbarProps } = props;
-	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-	const isHorizontal = props.orientation === "horizontal";
-	const debounceScrollEnd = useDebounceCallback(() => send("SCROLL_END"), 100);
-	const [state, send] = useStateMachine("hidden", {
-		hidden: { SCROLL: "scrolling" },
-		scrolling: {
-			SCROLL_END: "idle",
-			POINTER_ENTER: "interacting"
-		},
-		interacting: {
-			SCROLL: "interacting",
-			POINTER_LEAVE: "idle"
-		},
-		idle: {
-			HIDE: "hidden",
-			SCROLL: "scrolling",
-			POINTER_ENTER: "interacting"
-		}
-	});
-	React$1.useEffect(() => {
-		if (state === "idle") {
-			const hideTimer = window.setTimeout(() => send("HIDE"), context.scrollHideDelay);
-			return () => window.clearTimeout(hideTimer);
-		}
-	}, [
-		state,
-		context.scrollHideDelay,
-		send
-	]);
-	React$1.useEffect(() => {
-		const viewport = context.viewport;
-		const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
-		if (viewport) {
-			let prevScrollPos = viewport[scrollDirection];
-			const handleScroll = () => {
-				const scrollPos = viewport[scrollDirection];
-				if (prevScrollPos !== scrollPos) {
-					send("SCROLL");
-					debounceScrollEnd();
-				}
-				prevScrollPos = scrollPos;
-			};
-			viewport.addEventListener("scroll", handleScroll);
-			return () => viewport.removeEventListener("scroll", handleScroll);
-		}
-	}, [
-		context.viewport,
-		isHorizontal,
-		send,
-		debounceScrollEnd
-	]);
-	return /* @__PURE__ */ jsx(Presence, {
-		present: forceMount || state !== "hidden",
-		children: /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
-			"data-state": state === "hidden" ? "hidden" : "visible",
-			...scrollbarProps,
-			ref: forwardedRef,
-			onPointerEnter: composeEventHandlers(props.onPointerEnter, () => send("POINTER_ENTER")),
-			onPointerLeave: composeEventHandlers(props.onPointerLeave, () => send("POINTER_LEAVE"))
-		})
-	});
-});
-var ScrollAreaScrollbarAuto = React$1.forwardRef((props, forwardedRef) => {
-	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-	const { forceMount, ...scrollbarProps } = props;
-	const [visible, setVisible] = React$1.useState(false);
-	const isHorizontal = props.orientation === "horizontal";
-	const handleResize = useDebounceCallback(() => {
-		if (context.viewport) {
-			const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
-			const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
-			setVisible(isHorizontal ? isOverflowX : isOverflowY);
-		}
-	}, 10);
-	useResizeObserver(context.viewport, handleResize);
-	useResizeObserver(context.content, handleResize);
-	return /* @__PURE__ */ jsx(Presence, {
-		present: forceMount || visible,
-		children: /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
-			"data-state": visible ? "visible" : "hidden",
-			...scrollbarProps,
-			ref: forwardedRef
-		})
-	});
-});
-var ScrollAreaScrollbarVisible = React$1.forwardRef((props, forwardedRef) => {
-	const { orientation = "vertical", ...scrollbarProps } = props;
-	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-	const thumbRef = React$1.useRef(null);
-	const pointerOffsetRef = React$1.useRef(0);
-	const [sizes, setSizes] = React$1.useState({
-		content: 0,
-		viewport: 0,
-		scrollbar: {
-			size: 0,
-			paddingStart: 0,
-			paddingEnd: 0
-		}
-	});
-	const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
-	const commonProps = {
-		...scrollbarProps,
-		sizes,
-		onSizesChange: setSizes,
-		hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
-		onThumbChange: (thumb) => thumbRef.current = thumb,
-		onThumbPointerUp: () => pointerOffsetRef.current = 0,
-		onThumbPointerDown: (pointerPos) => pointerOffsetRef.current = pointerPos
-	};
-	function getScrollPosition(pointerPos, dir) {
-		return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
-	}
-	if (orientation === "horizontal") return /* @__PURE__ */ jsx(ScrollAreaScrollbarX, {
-		...commonProps,
-		ref: forwardedRef,
-		onThumbPositionChange: () => {
-			if (context.viewport && thumbRef.current) {
-				const scrollPos = context.viewport.scrollLeft;
-				const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
-				thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
-			}
-		},
-		onWheelScroll: (scrollPos) => {
-			if (context.viewport) context.viewport.scrollLeft = scrollPos;
-		},
-		onDragScroll: (pointerPos) => {
-			if (context.viewport) context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
-		}
-	});
-	if (orientation === "vertical") return /* @__PURE__ */ jsx(ScrollAreaScrollbarY, {
-		...commonProps,
-		ref: forwardedRef,
-		onThumbPositionChange: () => {
-			if (context.viewport && thumbRef.current) {
-				const scrollPos = context.viewport.scrollTop;
-				const offset = getThumbOffsetFromScroll(scrollPos, sizes);
-				thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
-			}
-		},
-		onWheelScroll: (scrollPos) => {
-			if (context.viewport) context.viewport.scrollTop = scrollPos;
-		},
-		onDragScroll: (pointerPos) => {
-			if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
-		}
-	});
-	return null;
-});
-var ScrollAreaScrollbarX = React$1.forwardRef((props, forwardedRef) => {
-	const { sizes, onSizesChange, ...scrollbarProps } = props;
-	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-	const [computedStyle, setComputedStyle] = React$1.useState();
-	const ref = React$1.useRef(null);
-	const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);
-	React$1.useEffect(() => {
-		if (ref.current) setComputedStyle(getComputedStyle(ref.current));
-	}, [ref]);
-	return /* @__PURE__ */ jsx(ScrollAreaScrollbarImpl, {
-		"data-orientation": "horizontal",
-		...scrollbarProps,
-		ref: composeRefs,
-		sizes,
-		style: {
-			bottom: 0,
-			left: context.dir === "rtl" ? "var(--radix-scroll-area-corner-width)" : 0,
-			right: context.dir === "ltr" ? "var(--radix-scroll-area-corner-width)" : 0,
-			["--radix-scroll-area-thumb-width"]: getThumbSize(sizes) + "px",
-			...props.style
-		},
-		onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.x),
-		onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.x),
-		onWheelScroll: (event, maxScrollPos) => {
-			if (context.viewport) {
-				const scrollPos = context.viewport.scrollLeft + event.deltaX;
-				props.onWheelScroll(scrollPos);
-				if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
-			}
-		},
-		onResize: () => {
-			if (ref.current && context.viewport && computedStyle) onSizesChange({
-				content: context.viewport.scrollWidth,
-				viewport: context.viewport.offsetWidth,
-				scrollbar: {
-					size: ref.current.clientWidth,
-					paddingStart: toInt(computedStyle.paddingLeft),
-					paddingEnd: toInt(computedStyle.paddingRight)
-				}
-			});
-		}
-	});
-});
-var ScrollAreaScrollbarY = React$1.forwardRef((props, forwardedRef) => {
-	const { sizes, onSizesChange, ...scrollbarProps } = props;
-	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
-	const [computedStyle, setComputedStyle] = React$1.useState();
-	const ref = React$1.useRef(null);
-	const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);
-	React$1.useEffect(() => {
-		if (ref.current) setComputedStyle(getComputedStyle(ref.current));
-	}, [ref]);
-	return /* @__PURE__ */ jsx(ScrollAreaScrollbarImpl, {
-		"data-orientation": "vertical",
-		...scrollbarProps,
-		ref: composeRefs,
-		sizes,
-		style: {
-			top: 0,
-			right: context.dir === "ltr" ? 0 : void 0,
-			left: context.dir === "rtl" ? 0 : void 0,
-			bottom: "var(--radix-scroll-area-corner-height)",
-			["--radix-scroll-area-thumb-height"]: getThumbSize(sizes) + "px",
-			...props.style
-		},
-		onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.y),
-		onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y),
-		onWheelScroll: (event, maxScrollPos) => {
-			if (context.viewport) {
-				const scrollPos = context.viewport.scrollTop + event.deltaY;
-				props.onWheelScroll(scrollPos);
-				if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
-			}
-		},
-		onResize: () => {
-			if (ref.current && context.viewport && computedStyle) onSizesChange({
-				content: context.viewport.scrollHeight,
-				viewport: context.viewport.offsetHeight,
-				scrollbar: {
-					size: ref.current.clientHeight,
-					paddingStart: toInt(computedStyle.paddingTop),
-					paddingEnd: toInt(computedStyle.paddingBottom)
-				}
-			});
-		}
-	});
-});
-var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
-var ScrollAreaScrollbarImpl = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeScrollArea, sizes, hasThumb, onThumbChange, onThumbPointerUp, onThumbPointerDown, onThumbPositionChange, onDragScroll, onWheelScroll, onResize, ...scrollbarProps } = props;
-	const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
-	const [scrollbar, setScrollbar] = React$1.useState(null);
-	const composeRefs = useComposedRefs(forwardedRef, (node) => setScrollbar(node));
-	const rectRef = React$1.useRef(null);
-	const prevWebkitUserSelectRef = React$1.useRef("");
-	const viewport = context.viewport;
-	const maxScrollPos = sizes.content - sizes.viewport;
-	const handleWheelScroll = useCallbackRef(onWheelScroll);
-	const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);
-	const handleResize = useDebounceCallback(onResize, 10);
-	function handleDragScroll(event) {
-		if (rectRef.current) onDragScroll({
-			x: event.clientX - rectRef.current.left,
-			y: event.clientY - rectRef.current.top
-		});
+function _toPrimitive$1(t, r) {
+	if ("object" != typeof t || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != typeof i) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
 	}
-	React$1.useEffect(() => {
-		const handleWheel = (event) => {
-			const element = event.target;
-			if (scrollbar?.contains(element)) handleWheelScroll(event, maxScrollPos);
-		};
-		document.addEventListener("wheel", handleWheel, { passive: false });
-		return () => document.removeEventListener("wheel", handleWheel, { passive: false });
-	}, [
-		viewport,
-		scrollbar,
-		maxScrollPos,
-		handleWheelScroll
-	]);
-	React$1.useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
-	useResizeObserver(scrollbar, handleResize);
-	useResizeObserver(context.content, handleResize);
-	return /* @__PURE__ */ jsx(ScrollbarProvider, {
-		scope: __scopeScrollArea,
-		scrollbar,
-		hasThumb,
-		onThumbChange: useCallbackRef(onThumbChange),
-		onThumbPointerUp: useCallbackRef(onThumbPointerUp),
-		onThumbPositionChange: handleThumbPositionChange,
-		onThumbPointerDown: useCallbackRef(onThumbPointerDown),
-		children: /* @__PURE__ */ jsx(Primitive$2.div, {
-			...scrollbarProps,
-			ref: composeRefs,
-			style: {
-				position: "absolute",
-				...scrollbarProps.style
-			},
-			onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
-				if (event.button === 0) {
-					event.target.setPointerCapture(event.pointerId);
-					rectRef.current = scrollbar.getBoundingClientRect();
-					prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
-					document.body.style.webkitUserSelect = "none";
-					if (context.viewport) context.viewport.style.scrollBehavior = "auto";
-					handleDragScroll(event);
-				}
-			}),
-			onPointerMove: composeEventHandlers(props.onPointerMove, handleDragScroll),
-			onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
-				const element = event.target;
-				if (element.hasPointerCapture(event.pointerId)) element.releasePointerCapture(event.pointerId);
-				document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
-				if (context.viewport) context.viewport.style.scrollBehavior = "";
-				rectRef.current = null;
-			})
-		})
-	});
-});
-var THUMB_NAME = "ScrollAreaThumb";
-var ScrollAreaThumb = React$1.forwardRef((props, forwardedRef) => {
-	const { forceMount, ...thumbProps } = props;
-	const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
-	return /* @__PURE__ */ jsx(Presence, {
-		present: forceMount || scrollbarContext.hasThumb,
-		children: /* @__PURE__ */ jsx(ScrollAreaThumbImpl, {
-			ref: forwardedRef,
-			...thumbProps
-		})
+	return ("string" === r ? String : Number)(t);
+}
+var SIZE = 32;
+var defaultLegendContentDefaultProps = {
+	align: "center",
+	iconSize: 14,
+	inactiveColor: "#ccc",
+	layout: "horizontal",
+	verticalAlign: "middle"
+};
+function Icon(_ref) {
+	var { data, iconType, inactiveColor } = _ref;
+	var halfSize = SIZE / 2;
+	var sixthSize = SIZE / 6;
+	var thirdSize = SIZE / 3;
+	var color = data.inactive ? inactiveColor : data.color;
+	var preferredIcon = iconType !== null && iconType !== void 0 ? iconType : data.type;
+	if (preferredIcon === "none") return null;
+	if (preferredIcon === "plainline") {
+		var _data$payload;
+		return /* @__PURE__ */ React$1.createElement("line", {
+			strokeWidth: 4,
+			fill: "none",
+			stroke: color,
+			strokeDasharray: (_data$payload = data.payload) === null || _data$payload === void 0 ? void 0 : _data$payload.strokeDasharray,
+			x1: 0,
+			y1: halfSize,
+			x2: SIZE,
+			y2: halfSize,
+			className: "recharts-legend-icon"
+		});
+	}
+	if (preferredIcon === "line") return /* @__PURE__ */ React$1.createElement("path", {
+		strokeWidth: 4,
+		fill: "none",
+		stroke: color,
+		d: "M0,".concat(halfSize, "h").concat(thirdSize, "\n            A").concat(sixthSize, ",").concat(sixthSize, ",0,1,1,").concat(2 * thirdSize, ",").concat(halfSize, "\n            H").concat(SIZE, "M").concat(2 * thirdSize, ",").concat(halfSize, "\n            A").concat(sixthSize, ",").concat(sixthSize, ",0,1,1,").concat(thirdSize, ",").concat(halfSize),
+		className: "recharts-legend-icon"
 	});
-});
-var ScrollAreaThumbImpl = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeScrollArea, style, ...thumbProps } = props;
-	const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
-	const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
-	const { onThumbPositionChange } = scrollbarContext;
-	const composedRef = useComposedRefs(forwardedRef, (node) => scrollbarContext.onThumbChange(node));
-	const removeUnlinkedScrollListenerRef = React$1.useRef(void 0);
-	const debounceScrollEnd = useDebounceCallback(() => {
-		if (removeUnlinkedScrollListenerRef.current) {
-			removeUnlinkedScrollListenerRef.current();
-			removeUnlinkedScrollListenerRef.current = void 0;
-		}
-	}, 100);
-	React$1.useEffect(() => {
-		const viewport = scrollAreaContext.viewport;
-		if (viewport) {
-			const handleScroll = () => {
-				debounceScrollEnd();
-				if (!removeUnlinkedScrollListenerRef.current) {
-					removeUnlinkedScrollListenerRef.current = addUnlinkedScrollListener(viewport, onThumbPositionChange);
-					onThumbPositionChange();
-				}
-			};
-			onThumbPositionChange();
-			viewport.addEventListener("scroll", handleScroll);
-			return () => viewport.removeEventListener("scroll", handleScroll);
-		}
-	}, [
-		scrollAreaContext.viewport,
-		debounceScrollEnd,
-		onThumbPositionChange
-	]);
-	return /* @__PURE__ */ jsx(Primitive$2.div, {
-		"data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
-		...thumbProps,
-		ref: composedRef,
-		style: {
-			width: "var(--radix-scroll-area-thumb-width)",
-			height: "var(--radix-scroll-area-thumb-height)",
-			...style
-		},
-		onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, (event) => {
-			const thumbRect = event.target.getBoundingClientRect();
-			const x = event.clientX - thumbRect.left;
-			const y = event.clientY - thumbRect.top;
-			scrollbarContext.onThumbPointerDown({
-				x,
-				y
-			});
-		}),
-		onPointerUp: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
+	if (preferredIcon === "rect") return /* @__PURE__ */ React$1.createElement("path", {
+		stroke: "none",
+		fill: color,
+		d: "M0,".concat(SIZE / 8, "h").concat(SIZE, "v").concat(SIZE * 3 / 4, "h").concat(-SIZE, "z"),
+		className: "recharts-legend-icon"
 	});
-});
-ScrollAreaThumb.displayName = THUMB_NAME;
-var CORNER_NAME = "ScrollAreaCorner";
-var ScrollAreaCorner = React$1.forwardRef((props, forwardedRef) => {
-	const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
-	const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
-	return context.type !== "scroll" && hasBothScrollbarsVisible ? /* @__PURE__ */ jsx(ScrollAreaCornerImpl, {
-		...props,
-		ref: forwardedRef
-	}) : null;
-});
-ScrollAreaCorner.displayName = CORNER_NAME;
-var ScrollAreaCornerImpl = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeScrollArea, ...cornerProps } = props;
-	const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
-	const [width, setWidth] = React$1.useState(0);
-	const [height, setHeight] = React$1.useState(0);
-	const hasSize = Boolean(width && height);
-	useResizeObserver(context.scrollbarX, () => {
-		const height2 = context.scrollbarX?.offsetHeight || 0;
-		context.onCornerHeightChange(height2);
-		setHeight(height2);
+	if (/* @__PURE__ */ React$1.isValidElement(data.legendIcon)) {
+		var iconProps = _objectSpread$1({}, data);
+		delete iconProps.legendIcon;
+		return /* @__PURE__ */ React$1.cloneElement(data.legendIcon, iconProps);
+	}
+	return /* @__PURE__ */ React$1.createElement(Symbols, {
+		fill: color,
+		cx: halfSize,
+		cy: halfSize,
+		size: SIZE,
+		sizeType: "diameter",
+		type: preferredIcon
 	});
-	useResizeObserver(context.scrollbarY, () => {
-		const width2 = context.scrollbarY?.offsetWidth || 0;
-		context.onCornerWidthChange(width2);
-		setWidth(width2);
+}
+function Items(props) {
+	var { payload, iconSize, layout, formatter, inactiveColor, iconType } = props;
+	var viewBox = {
+		x: 0,
+		y: 0,
+		width: SIZE,
+		height: SIZE
+	};
+	var itemStyle = {
+		display: layout === "horizontal" ? "inline-block" : "block",
+		marginRight: 10
+	};
+	var svgStyle = {
+		display: "inline-block",
+		verticalAlign: "middle",
+		marginRight: 4
+	};
+	return payload.map((entry, i) => {
+		var finalFormatter = entry.formatter || formatter;
+		var className = clsx({
+			"recharts-legend-item": true,
+			["legend-item-".concat(i)]: true,
+			inactive: entry.inactive
+		});
+		if (entry.type === "none") return null;
+		var color = entry.inactive ? inactiveColor : entry.color;
+		var finalValue = finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value;
+		return /* @__PURE__ */ React$1.createElement("li", _extends$1({
+			className,
+			style: itemStyle,
+			key: "legend-item-".concat(i)
+		}, adaptEventsOfChild(props, entry, i)), /* @__PURE__ */ React$1.createElement(Surface, {
+			width: iconSize,
+			height: iconSize,
+			viewBox,
+			style: svgStyle,
+			"aria-label": "".concat(finalValue, " legend icon")
+		}, /* @__PURE__ */ React$1.createElement(Icon, {
+			data: entry,
+			iconType,
+			inactiveColor
+		})), /* @__PURE__ */ React$1.createElement("span", {
+			className: "recharts-legend-item-text",
+			style: { color }
+		}, finalValue));
 	});
-	return hasSize ? /* @__PURE__ */ jsx(Primitive$2.div, {
-		...cornerProps,
-		ref: forwardedRef,
-		style: {
-			width,
-			height,
-			position: "absolute",
-			right: context.dir === "ltr" ? 0 : void 0,
-			left: context.dir === "rtl" ? 0 : void 0,
-			bottom: 0,
-			...props.style
+}
+var DefaultLegendContent = (outsideProps) => {
+	var props = resolveDefaultProps(outsideProps, defaultLegendContentDefaultProps);
+	var { payload, layout, align } = props;
+	if (!payload || !payload.length) return null;
+	var finalStyle = {
+		padding: 0,
+		margin: 0,
+		textAlign: layout === "horizontal" ? align : "left"
+	};
+	return /* @__PURE__ */ React$1.createElement("ul", {
+		className: "recharts-default-legend",
+		style: finalStyle
+	}, /* @__PURE__ */ React$1.createElement(Items, _extends$1({}, props, { payload })));
+};
+function useLegendPayload() {
+	return useAppSelector(selectLegendPayload);
+}
+var _excluded = ["contextPayload"];
+function _extends() {
+	return _extends = Object.assign ? Object.assign.bind() : function(n) {
+		for (var e = 1; e < arguments.length; e++) {
+			var t = arguments[e];
+			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
 		}
-	}) : null;
-});
-function toInt(value) {
-	return value ? parseInt(value, 10) : 0;
+		return n;
+	}, _extends.apply(null, arguments);
 }
-function getThumbRatio(viewportSize, contentSize) {
-	const ratio = viewportSize / contentSize;
-	return isNaN(ratio) ? 0 : ratio;
+function ownKeys(e, r) {
+	var t = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var o = Object.getOwnPropertySymbols(e);
+		r && (o = o.filter(function(r$1) {
+			return Object.getOwnPropertyDescriptor(e, r$1).enumerable;
+		})), t.push.apply(t, o);
+	}
+	return t;
 }
-function getThumbSize(sizes) {
-	const ratio = getThumbRatio(sizes.viewport, sizes.content);
-	const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
-	const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
-	return Math.max(thumbSize, 18);
+function _objectSpread(e) {
+	for (var r = 1; r < arguments.length; r++) {
+		var t = null != arguments[r] ? arguments[r] : {};
+		r % 2 ? ownKeys(Object(t), !0).forEach(function(r$1) {
+			_defineProperty(e, r$1, t[r$1]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r$1) {
+			Object.defineProperty(e, r$1, Object.getOwnPropertyDescriptor(t, r$1));
+		});
+	}
+	return e;
 }
-function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
-	const thumbSizePx = getThumbSize(sizes);
-	const thumbCenter = thumbSizePx / 2;
-	const offset = pointerOffset || thumbCenter;
-	const thumbOffsetFromEnd = thumbSizePx - offset;
-	const minPointerPos = sizes.scrollbar.paddingStart + offset;
-	const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
-	const maxScrollPos = sizes.content - sizes.viewport;
-	const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
-	return linearScale([minPointerPos, maxPointerPos], scrollRange)(pointerPos);
+function _defineProperty(e, r, t) {
+	return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
 }
-function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
-	const thumbSizePx = getThumbSize(sizes);
-	const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
-	const scrollbar = sizes.scrollbar.size - scrollbarPadding;
-	const maxScrollPos = sizes.content - sizes.viewport;
-	const maxThumbPos = scrollbar - thumbSizePx;
-	const scrollWithoutMomentum = clamp(scrollPos, dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0]);
-	return linearScale([0, maxScrollPos], [0, maxThumbPos])(scrollWithoutMomentum);
+function _toPropertyKey(t) {
+	var i = _toPrimitive(t, "string");
+	return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(t, r) {
+	if ("object" != typeof t || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != typeof i) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+function _objectWithoutProperties(e, t) {
+	if (null == e) return {};
+	var o, r, i = _objectWithoutPropertiesLoose(e, t);
+	if (Object.getOwnPropertySymbols) {
+		var n = Object.getOwnPropertySymbols(e);
+		for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+	}
+	return i;
 }
-function linearScale(input, output) {
-	return (value) => {
-		if (input[0] === input[1] || output[0] === output[1]) return output[0];
-		const ratio = (output[1] - output[0]) / (input[1] - input[0]);
-		return output[0] + ratio * (value - input[0]);
-	};
+function _objectWithoutPropertiesLoose(r, e) {
+	if (null == r) return {};
+	var t = {};
+	for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+		if (-1 !== e.indexOf(n)) continue;
+		t[n] = r[n];
+	}
+	return t;
 }
-function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
-	return scrollPos > 0 && scrollPos < maxScrollPos;
+function defaultUniqBy(entry) {
+	return entry.value;
 }
-var addUnlinkedScrollListener = (node, handler = () => {}) => {
-	let prevPosition = {
-		left: node.scrollLeft,
-		top: node.scrollTop
-	};
-	let rAF = 0;
-	(function loop() {
-		const position = {
-			left: node.scrollLeft,
-			top: node.scrollTop
-		};
-		const isHorizontalScroll = prevPosition.left !== position.left;
-		const isVerticalScroll = prevPosition.top !== position.top;
-		if (isHorizontalScroll || isVerticalScroll) handler();
-		prevPosition = position;
-		rAF = window.requestAnimationFrame(loop);
-	})();
-	return () => window.cancelAnimationFrame(rAF);
-};
-function useDebounceCallback(callback, delay) {
-	const handleCallback = useCallbackRef(callback);
-	const debounceTimerRef = React$1.useRef(0);
-	React$1.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
-	return React$1.useCallback(() => {
-		window.clearTimeout(debounceTimerRef.current);
-		debounceTimerRef.current = window.setTimeout(handleCallback, delay);
-	}, [handleCallback, delay]);
+function LegendContent(props) {
+	var { contextPayload } = props, otherProps = _objectWithoutProperties(props, _excluded);
+	var finalPayload = getUniqPayload(contextPayload, props.payloadUniqBy, defaultUniqBy);
+	var contentProps = _objectSpread(_objectSpread({}, otherProps), {}, { payload: finalPayload });
+	if (/* @__PURE__ */ React$1.isValidElement(props.content)) return /* @__PURE__ */ React$1.cloneElement(props.content, contentProps);
+	if (typeof props.content === "function") return /* @__PURE__ */ React$1.createElement(props.content, contentProps);
+	return /* @__PURE__ */ React$1.createElement(DefaultLegendContent, contentProps);
 }
-function useResizeObserver(element, onResize) {
-	const handleResize = useCallbackRef(onResize);
-	useLayoutEffect2(() => {
-		let rAF = 0;
-		if (element) {
-			const resizeObserver = new ResizeObserver(() => {
-				cancelAnimationFrame(rAF);
-				rAF = window.requestAnimationFrame(handleResize);
-			});
-			resizeObserver.observe(element);
-			return () => {
-				window.cancelAnimationFrame(rAF);
-				resizeObserver.unobserve(element);
-			};
-		}
-	}, [element, handleResize]);
+function getDefaultPosition(style, props, margin, chartWidth, chartHeight, box) {
+	var { layout, align, verticalAlign } = props;
+	var hPos, vPos;
+	if (!style || (style.left === void 0 || style.left === null) && (style.right === void 0 || style.right === null)) if (align === "center" && layout === "vertical") hPos = { left: ((chartWidth || 0) - box.width) / 2 };
+	else hPos = align === "right" ? { right: margin && margin.right || 0 } : { left: margin && margin.left || 0 };
+	if (!style || (style.top === void 0 || style.top === null) && (style.bottom === void 0 || style.bottom === null)) if (verticalAlign === "middle") vPos = { top: ((chartHeight || 0) - box.height) / 2 };
+	else vPos = verticalAlign === "bottom" ? { bottom: margin && margin.bottom || 0 } : { top: margin && margin.top || 0 };
+	return _objectSpread(_objectSpread({}, hPos), vPos);
 }
-var Root$1 = ScrollArea$1;
-var Viewport = ScrollAreaViewport;
-var Corner = ScrollAreaCorner;
-var ScrollBarGlass = React$1.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
-	ref,
-	orientation,
-	className: cn("flex touch-none select-none transition-colors", "bg-[var(--scrollbar-track,transparent)]", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]", className),
-	...props,
-	children: /* @__PURE__ */ jsx(ScrollAreaThumb, { className: cn("relative flex-1 rounded-full", "bg-[var(--scrollbar-thumb,var(--glass-border))]", "hover:bg-[var(--scrollbar-thumb-hover,var(--glass-border-hover))]", "transition-colors") })
-}));
-ScrollBarGlass.displayName = "ScrollBarGlass";
-var ScrollAreaGlass = React$1.forwardRef(({ className, children, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxs(Root$1, {
-	ref,
-	className: cn("relative overflow-hidden", className),
-	...props,
-	children: [
-		/* @__PURE__ */ jsx(Viewport, {
-			className: "h-full w-full rounded-[inherit]",
-			children
-		}),
-		(orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBarGlass, { orientation: "vertical" }),
-		(orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBarGlass, { orientation: "horizontal" }),
-		/* @__PURE__ */ jsx(Corner, {})
-	]
-}));
-ScrollAreaGlass.displayName = "ScrollAreaGlass";
-function createContextScope$1(scopeName, createContextScopeDeps = []) {
-	let defaultContexts = [];
-	function createContext3(rootComponentName, defaultContext) {
-		const BaseContext = React$1.createContext(defaultContext);
-		const index = defaultContexts.length;
-		defaultContexts = [...defaultContexts, defaultContext];
-		const Provider = (props) => {
-			const { scope, children, ...context } = props;
-			const Context = scope?.[scopeName]?.[index] || BaseContext;
-			const value = React$1.useMemo(() => context, Object.values(context));
-			return /* @__PURE__ */ jsx(Context.Provider, {
-				value,
-				children
-			});
-		};
-		Provider.displayName = rootComponentName + "Provider";
-		function useContext2(consumerName, scope) {
-			const Context = scope?.[scopeName]?.[index] || BaseContext;
-			const context = React$1.useContext(Context);
-			if (context) return context;
-			if (defaultContext !== void 0) return defaultContext;
-			throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
-		}
-		return [Provider, useContext2];
-	}
-	const createScope = () => {
-		const scopeContexts = defaultContexts.map((defaultContext) => {
-			return React$1.createContext(defaultContext);
-		});
-		return function useScope(scope) {
-			const contexts = scope?.[scopeName] || scopeContexts;
-			return React$1.useMemo(() => ({ [`__scope${scopeName}`]: {
-				...scope,
-				[scopeName]: contexts
-			} }), [scope, contexts]);
-		};
-	};
-	createScope.scopeName = scopeName;
-	return [createContext3, composeContextScopes$1(createScope, ...createContextScopeDeps)];
+function LegendSettingsDispatcher(props) {
+	var dispatch = useAppDispatch();
+	useEffect(() => {
+		dispatch(setLegendSettings(props));
+	}, [dispatch, props]);
+	return null;
 }
-function composeContextScopes$1(...scopes) {
-	const baseScope = scopes[0];
-	if (scopes.length === 1) return baseScope;
-	const createScope = () => {
-		const scopeHooks = scopes.map((createScope2) => ({
-			useScope: createScope2(),
-			scopeName: createScope2.scopeName
-		}));
-		return function useComposedScopes(overrideScopes) {
-			const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
-				const currentScope = useScope(overrideScopes)[`__scope${scopeName}`];
-				return {
-					...nextScopes2,
-					...currentScope
-				};
-			}, {});
-			return React$1.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+function LegendSizeDispatcher(props) {
+	var dispatch = useAppDispatch();
+	useEffect(() => {
+		dispatch(setLegendSize(props));
+		return () => {
+			dispatch(setLegendSize({
+				width: 0,
+				height: 0
+			}));
 		};
-	};
-	createScope.scopeName = baseScope.scopeName;
-	return createScope;
+	}, [dispatch, props]);
+	return null;
+}
+function getWidthOrHeight(layout, height, width, maxWidth) {
+	if (layout === "vertical" && isNumber(height)) return { height };
+	if (layout === "horizontal") return { width: width || maxWidth };
+	return null;
+}
+var legendDefaultProps = {
+	align: "center",
+	iconSize: 14,
+	itemSorter: "value",
+	layout: "horizontal",
+	verticalAlign: "bottom"
+};
+function Legend(outsideProps) {
+	var props = resolveDefaultProps(outsideProps, legendDefaultProps);
+	var contextPayload = useLegendPayload();
+	var legendPortalFromContext = useLegendPortal();
+	var margin = useMargin();
+	var { width: widthFromProps, height: heightFromProps, wrapperStyle, portal: portalFromProps } = props;
+	var [lastBoundingBox, updateBoundingBox] = useElementOffset([contextPayload]);
+	var chartWidth = useChartWidth();
+	var chartHeight = useChartHeight();
+	if (chartWidth == null || chartHeight == null) return null;
+	var maxWidth = chartWidth - ((margin === null || margin === void 0 ? void 0 : margin.left) || 0) - ((margin === null || margin === void 0 ? void 0 : margin.right) || 0);
+	var widthOrHeight = getWidthOrHeight(props.layout, heightFromProps, widthFromProps, maxWidth);
+	var outerStyle = portalFromProps ? wrapperStyle : _objectSpread(_objectSpread({
+		position: "absolute",
+		width: (widthOrHeight === null || widthOrHeight === void 0 ? void 0 : widthOrHeight.width) || widthFromProps || "auto",
+		height: (widthOrHeight === null || widthOrHeight === void 0 ? void 0 : widthOrHeight.height) || heightFromProps || "auto"
+	}, getDefaultPosition(wrapperStyle, props, margin, chartWidth, chartHeight, lastBoundingBox)), wrapperStyle);
+	var legendPortal = portalFromProps !== null && portalFromProps !== void 0 ? portalFromProps : legendPortalFromContext;
+	if (legendPortal == null || contextPayload == null) return null;
+	return /* @__PURE__ */ createPortal(/* @__PURE__ */ React$1.createElement("div", {
+		className: "recharts-legend-wrapper",
+		style: outerStyle,
+		ref: updateBoundingBox
+	}, /* @__PURE__ */ React$1.createElement(LegendSettingsDispatcher, {
+		layout: props.layout,
+		align: props.align,
+		verticalAlign: props.verticalAlign,
+		itemSorter: props.itemSorter
+	}), !portalFromProps && /* @__PURE__ */ React$1.createElement(LegendSizeDispatcher, {
+		width: lastBoundingBox.width,
+		height: lastBoundingBox.height
+	}), /* @__PURE__ */ React$1.createElement(LegendContent, _extends({}, props, widthOrHeight, {
+		margin,
+		chartWidth,
+		chartHeight,
+		contextPayload
+	}))), legendPortal);
 }
-var Primitive$1 = [
+Legend.displayName = "Legend";
+var Primitive = [
 	"a",
 	"button",
 	"div",
@@ -2281,145 +1147,7 @@ var Primitive$1 = [
 		...primitive,
 		[node]: Node
 	};
-}, {});
-var COLLAPSIBLE_NAME = "Collapsible";
-var [createCollapsibleContext, createCollapsibleScope] = createContextScope$1(COLLAPSIBLE_NAME);
-var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
-var Collapsible = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeCollapsible, open: openProp, defaultOpen, disabled, onOpenChange, ...collapsibleProps } = props;
-	const [open, setOpen] = useControllableState({
-		prop: openProp,
-		defaultProp: defaultOpen ?? false,
-		onChange: onOpenChange,
-		caller: COLLAPSIBLE_NAME
-	});
-	return /* @__PURE__ */ jsx(CollapsibleProvider, {
-		scope: __scopeCollapsible,
-		disabled,
-		contentId: useId$1(),
-		open,
-		onOpenToggle: React$1.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
-		children: /* @__PURE__ */ jsx(Primitive$1.div, {
-			"data-state": getState$1(open),
-			"data-disabled": disabled ? "" : void 0,
-			...collapsibleProps,
-			ref: forwardedRef
-		})
-	});
-});
-Collapsible.displayName = COLLAPSIBLE_NAME;
-var TRIGGER_NAME = "CollapsibleTrigger";
-var CollapsibleTrigger = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeCollapsible, ...triggerProps } = props;
-	const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
-	return /* @__PURE__ */ jsx(Primitive$1.button, {
-		type: "button",
-		"aria-controls": context.contentId,
-		"aria-expanded": context.open || false,
-		"data-state": getState$1(context.open),
-		"data-disabled": context.disabled ? "" : void 0,
-		disabled: context.disabled,
-		...triggerProps,
-		ref: forwardedRef,
-		onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
-	});
-});
-CollapsibleTrigger.displayName = TRIGGER_NAME;
-var CONTENT_NAME = "CollapsibleContent";
-var CollapsibleContent = React$1.forwardRef((props, forwardedRef) => {
-	const { forceMount, ...contentProps } = props;
-	const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
-	return /* @__PURE__ */ jsx(Presence, {
-		present: forceMount || context.open,
-		children: ({ present }) => /* @__PURE__ */ jsx(CollapsibleContentImpl, {
-			...contentProps,
-			ref: forwardedRef,
-			present
-		})
-	});
-});
-CollapsibleContent.displayName = CONTENT_NAME;
-var CollapsibleContentImpl = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeCollapsible, present, children, ...contentProps } = props;
-	const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
-	const [isPresent, setIsPresent] = React$1.useState(present);
-	const ref = React$1.useRef(null);
-	const composedRefs = useComposedRefs(forwardedRef, ref);
-	const heightRef = React$1.useRef(0);
-	const height = heightRef.current;
-	const widthRef = React$1.useRef(0);
-	const width = widthRef.current;
-	const isOpen = context.open || isPresent;
-	const isMountAnimationPreventedRef = React$1.useRef(isOpen);
-	const originalStylesRef = React$1.useRef(void 0);
-	React$1.useEffect(() => {
-		const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
-		return () => cancelAnimationFrame(rAF);
-	}, []);
-	useLayoutEffect2(() => {
-		const node = ref.current;
-		if (node) {
-			originalStylesRef.current = originalStylesRef.current || {
-				transitionDuration: node.style.transitionDuration,
-				animationName: node.style.animationName
-			};
-			node.style.transitionDuration = "0s";
-			node.style.animationName = "none";
-			const rect = node.getBoundingClientRect();
-			heightRef.current = rect.height;
-			widthRef.current = rect.width;
-			if (!isMountAnimationPreventedRef.current) {
-				node.style.transitionDuration = originalStylesRef.current.transitionDuration;
-				node.style.animationName = originalStylesRef.current.animationName;
-			}
-			setIsPresent(present);
-		}
-	}, [context.open, present]);
-	return /* @__PURE__ */ jsx(Primitive$1.div, {
-		"data-state": getState$1(context.open),
-		"data-disabled": context.disabled ? "" : void 0,
-		id: context.contentId,
-		hidden: !isOpen,
-		...contentProps,
-		ref: composedRefs,
-		style: {
-			[`--radix-collapsible-content-height`]: height ? `${height}px` : void 0,
-			[`--radix-collapsible-content-width`]: width ? `${width}px` : void 0,
-			...props.style
-		},
-		children: isOpen && children
-	});
-});
-function getState$1(open) {
-	return open ? "open" : "closed";
-}
-var Root = Collapsible;
-var Trigger = CollapsibleTrigger;
-var Content = CollapsibleContent;
-var CollapsibleGlassRoot = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Root, {
-	ref,
-	className: cn("w-full", className),
-	...props
-}));
-CollapsibleGlassRoot.displayName = "CollapsibleGlassRoot";
-var CollapsibleGlassTrigger = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Trigger, {
-	ref,
-	className: cn("flex w-full items-center justify-between", "focus-visible:outline-none focus-visible:ring-2", "focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2", className),
-	...props
-}));
-CollapsibleGlassTrigger.displayName = "CollapsibleGlassTrigger";
-var CollapsibleGlassContent = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Content, {
-	ref,
-	className: cn("overflow-hidden transition-all", "data-[state=closed]:animate-collapsible-up", "data-[state=open]:animate-collapsible-down", className),
-	...props,
-	children
-}));
-CollapsibleGlassContent.displayName = "CollapsibleGlassContent";
-const CollapsibleGlass = {
-	Root: CollapsibleGlassRoot,
-	Trigger: CollapsibleGlassTrigger,
-	Content: CollapsibleGlassContent
-};
+}, {});
 function createContextScope(scopeName, createContextScopeDeps = []) {
 	let defaultContexts = [];
 	function createContext3(rootComponentName, defaultContext) {
@@ -2482,679 +1210,663 @@ function composeContextScopes(...scopes) {
 	createScope.scopeName = baseScope.scopeName;
 	return createScope;
 }
-var Primitive = [
-	"a",
-	"button",
-	"div",
-	"form",
-	"h2",
-	"h3",
-	"img",
-	"input",
-	"label",
-	"li",
-	"nav",
-	"ol",
-	"p",
-	"select",
-	"span",
-	"svg",
-	"ul"
-].reduce((primitive, node) => {
-	const Slot$1 = createSlot(`Primitive.${node}`);
-	const Node = React$1.forwardRef((props, forwardedRef) => {
-		const { asChild, ...primitiveProps } = props;
-		const Comp = asChild ? Slot$1 : node;
-		if (typeof window !== "undefined") window[Symbol.for("radix-ui")] = true;
-		return /* @__PURE__ */ jsx(Comp, {
-			...primitiveProps,
+function useStateMachine(initialState, machine) {
+	return React$1.useReducer((state, event) => {
+		return machine[state][event] ?? state;
+	}, initialState);
+}
+var SCROLL_AREA_NAME = "ScrollArea";
+var [createScrollAreaContext, createScrollAreaScope] = createContextScope(SCROLL_AREA_NAME);
+var [ScrollAreaProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
+var ScrollArea$1 = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeScrollArea, type = "hover", dir, scrollHideDelay = 600, ...scrollAreaProps } = props;
+	const [scrollArea, setScrollArea] = React$1.useState(null);
+	const [viewport, setViewport] = React$1.useState(null);
+	const [content, setContent] = React$1.useState(null);
+	const [scrollbarX, setScrollbarX] = React$1.useState(null);
+	const [scrollbarY, setScrollbarY] = React$1.useState(null);
+	const [cornerWidth, setCornerWidth] = React$1.useState(0);
+	const [cornerHeight, setCornerHeight] = React$1.useState(0);
+	const [scrollbarXEnabled, setScrollbarXEnabled] = React$1.useState(false);
+	const [scrollbarYEnabled, setScrollbarYEnabled] = React$1.useState(false);
+	const composedRefs = useComposedRefs(forwardedRef, (node) => setScrollArea(node));
+	const direction = useDirection(dir);
+	return /* @__PURE__ */ jsx(ScrollAreaProvider, {
+		scope: __scopeScrollArea,
+		type,
+		dir: direction,
+		scrollHideDelay,
+		scrollArea,
+		viewport,
+		onViewportChange: setViewport,
+		content,
+		onContentChange: setContent,
+		scrollbarX,
+		onScrollbarXChange: setScrollbarX,
+		scrollbarXEnabled,
+		onScrollbarXEnabledChange: setScrollbarXEnabled,
+		scrollbarY,
+		onScrollbarYChange: setScrollbarY,
+		scrollbarYEnabled,
+		onScrollbarYEnabledChange: setScrollbarYEnabled,
+		onCornerWidthChange: setCornerWidth,
+		onCornerHeightChange: setCornerHeight,
+		children: /* @__PURE__ */ jsx(Primitive.div, {
+			dir: direction,
+			...scrollAreaProps,
+			ref: composedRefs,
+			style: {
+				position: "relative",
+				["--radix-scroll-area-corner-width"]: cornerWidth + "px",
+				["--radix-scroll-area-corner-height"]: cornerHeight + "px",
+				...props.style
+			}
+		})
+	});
+});
+ScrollArea$1.displayName = SCROLL_AREA_NAME;
+var VIEWPORT_NAME = "ScrollAreaViewport";
+var ScrollAreaViewport = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
+	const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
+	const composedRefs = useComposedRefs(forwardedRef, React$1.useRef(null), context.onViewportChange);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		dangerouslySetInnerHTML: { __html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}` },
+		nonce
+	}), /* @__PURE__ */ jsx(Primitive.div, {
+		"data-radix-scroll-area-viewport": "",
+		...viewportProps,
+		ref: composedRefs,
+		style: {
+			overflowX: context.scrollbarXEnabled ? "scroll" : "hidden",
+			overflowY: context.scrollbarYEnabled ? "scroll" : "hidden",
+			...props.style
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref: context.onContentChange,
+			style: {
+				minWidth: "100%",
+				display: "table"
+			},
+			children
+		})
+	})] });
+});
+ScrollAreaViewport.displayName = VIEWPORT_NAME;
+var SCROLLBAR_NAME = "ScrollAreaScrollbar";
+var ScrollAreaScrollbar = React$1.forwardRef((props, forwardedRef) => {
+	const { forceMount, ...scrollbarProps } = props;
+	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+	const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
+	const isHorizontal = props.orientation === "horizontal";
+	React$1.useEffect(() => {
+		isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
+		return () => {
+			isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
+		};
+	}, [
+		isHorizontal,
+		onScrollbarXEnabledChange,
+		onScrollbarYEnabledChange
+	]);
+	return context.type === "hover" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarHover, {
+		...scrollbarProps,
+		ref: forwardedRef,
+		forceMount
+	}) : context.type === "scroll" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarScroll, {
+		...scrollbarProps,
+		ref: forwardedRef,
+		forceMount
+	}) : context.type === "auto" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarAuto, {
+		...scrollbarProps,
+		ref: forwardedRef,
+		forceMount
+	}) : context.type === "always" ? /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
+		...scrollbarProps,
+		ref: forwardedRef
+	}) : null;
+});
+ScrollAreaScrollbar.displayName = SCROLLBAR_NAME;
+var ScrollAreaScrollbarHover = React$1.forwardRef((props, forwardedRef) => {
+	const { forceMount, ...scrollbarProps } = props;
+	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+	const [visible, setVisible] = React$1.useState(false);
+	React$1.useEffect(() => {
+		const scrollArea = context.scrollArea;
+		let hideTimer = 0;
+		if (scrollArea) {
+			const handlePointerEnter = () => {
+				window.clearTimeout(hideTimer);
+				setVisible(true);
+			};
+			const handlePointerLeave = () => {
+				hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
+			};
+			scrollArea.addEventListener("pointerenter", handlePointerEnter);
+			scrollArea.addEventListener("pointerleave", handlePointerLeave);
+			return () => {
+				window.clearTimeout(hideTimer);
+				scrollArea.removeEventListener("pointerenter", handlePointerEnter);
+				scrollArea.removeEventListener("pointerleave", handlePointerLeave);
+			};
+		}
+	}, [context.scrollArea, context.scrollHideDelay]);
+	return /* @__PURE__ */ jsx(Presence, {
+		present: forceMount || visible,
+		children: /* @__PURE__ */ jsx(ScrollAreaScrollbarAuto, {
+			"data-state": visible ? "visible" : "hidden",
+			...scrollbarProps,
 			ref: forwardedRef
-		});
+		})
 	});
-	Node.displayName = `Primitive.${node}`;
-	return {
-		...primitive,
-		[node]: Node
-	};
-}, {});
-var RADIO_NAME = "Radio";
-var [createRadioContext, createRadioScope] = createContextScope(RADIO_NAME);
-var [RadioProvider, useRadioContext] = createRadioContext(RADIO_NAME);
-var Radio = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeRadio, name, checked = false, required, disabled, value = "on", onCheck, form, ...radioProps } = props;
-	const [button, setButton] = React$1.useState(null);
-	const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
-	const hasConsumerStoppedPropagationRef = React$1.useRef(false);
-	const isFormControl = button ? form || !!button.closest("form") : true;
-	return /* @__PURE__ */ jsxs(RadioProvider, {
-		scope: __scopeRadio,
-		checked,
-		disabled,
-		children: [/* @__PURE__ */ jsx(Primitive.button, {
-			type: "button",
-			role: "radio",
-			"aria-checked": checked,
-			"data-state": getState(checked),
-			"data-disabled": disabled ? "" : void 0,
-			disabled,
-			value,
-			...radioProps,
-			ref: composedRefs,
-			onClick: composeEventHandlers(props.onClick, (event) => {
-				if (!checked) onCheck?.();
-				if (isFormControl) {
-					hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-					if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+});
+var ScrollAreaScrollbarScroll = React$1.forwardRef((props, forwardedRef) => {
+	const { forceMount, ...scrollbarProps } = props;
+	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+	const isHorizontal = props.orientation === "horizontal";
+	const debounceScrollEnd = useDebounceCallback(() => send("SCROLL_END"), 100);
+	const [state, send] = useStateMachine("hidden", {
+		hidden: { SCROLL: "scrolling" },
+		scrolling: {
+			SCROLL_END: "idle",
+			POINTER_ENTER: "interacting"
+		},
+		interacting: {
+			SCROLL: "interacting",
+			POINTER_LEAVE: "idle"
+		},
+		idle: {
+			HIDE: "hidden",
+			SCROLL: "scrolling",
+			POINTER_ENTER: "interacting"
+		}
+	});
+	React$1.useEffect(() => {
+		if (state === "idle") {
+			const hideTimer = window.setTimeout(() => send("HIDE"), context.scrollHideDelay);
+			return () => window.clearTimeout(hideTimer);
+		}
+	}, [
+		state,
+		context.scrollHideDelay,
+		send
+	]);
+	React$1.useEffect(() => {
+		const viewport = context.viewport;
+		const scrollDirection = isHorizontal ? "scrollLeft" : "scrollTop";
+		if (viewport) {
+			let prevScrollPos = viewport[scrollDirection];
+			const handleScroll = () => {
+				const scrollPos = viewport[scrollDirection];
+				if (prevScrollPos !== scrollPos) {
+					send("SCROLL");
+					debounceScrollEnd();
 				}
-			})
-		}), isFormControl && /* @__PURE__ */ jsx(RadioBubbleInput, {
-			control: button,
-			bubbles: !hasConsumerStoppedPropagationRef.current,
-			name,
-			value,
-			checked,
-			required,
-			disabled,
-			form,
-			style: { transform: "translateX(-100%)" }
-		})]
+				prevScrollPos = scrollPos;
+			};
+			viewport.addEventListener("scroll", handleScroll);
+			return () => viewport.removeEventListener("scroll", handleScroll);
+		}
+	}, [
+		context.viewport,
+		isHorizontal,
+		send,
+		debounceScrollEnd
+	]);
+	return /* @__PURE__ */ jsx(Presence, {
+		present: forceMount || state !== "hidden",
+		children: /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
+			"data-state": state === "hidden" ? "hidden" : "visible",
+			...scrollbarProps,
+			ref: forwardedRef,
+			onPointerEnter: composeEventHandlers(props.onPointerEnter, () => send("POINTER_ENTER")),
+			onPointerLeave: composeEventHandlers(props.onPointerLeave, () => send("POINTER_LEAVE"))
+		})
 	});
 });
-Radio.displayName = RADIO_NAME;
-var INDICATOR_NAME = "RadioIndicator";
-var RadioIndicator = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeRadio, forceMount, ...indicatorProps } = props;
-	const context = useRadioContext(INDICATOR_NAME, __scopeRadio);
+var ScrollAreaScrollbarAuto = React$1.forwardRef((props, forwardedRef) => {
+	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+	const { forceMount, ...scrollbarProps } = props;
+	const [visible, setVisible] = React$1.useState(false);
+	const isHorizontal = props.orientation === "horizontal";
+	const handleResize = useDebounceCallback(() => {
+		if (context.viewport) {
+			const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
+			const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
+			setVisible(isHorizontal ? isOverflowX : isOverflowY);
+		}
+	}, 10);
+	useResizeObserver(context.viewport, handleResize);
+	useResizeObserver(context.content, handleResize);
 	return /* @__PURE__ */ jsx(Presence, {
-		present: forceMount || context.checked,
-		children: /* @__PURE__ */ jsx(Primitive.span, {
-			"data-state": getState(context.checked),
-			"data-disabled": context.disabled ? "" : void 0,
-			...indicatorProps,
+		present: forceMount || visible,
+		children: /* @__PURE__ */ jsx(ScrollAreaScrollbarVisible, {
+			"data-state": visible ? "visible" : "hidden",
+			...scrollbarProps,
 			ref: forwardedRef
 		})
 	});
 });
-RadioIndicator.displayName = INDICATOR_NAME;
-var BUBBLE_INPUT_NAME = "RadioBubbleInput";
-var RadioBubbleInput = React$1.forwardRef(({ __scopeRadio, control, checked, bubbles = true, ...props }, forwardedRef) => {
-	const ref = React$1.useRef(null);
-	const composedRefs = useComposedRefs(ref, forwardedRef);
-	const prevChecked = usePrevious(checked);
-	const controlSize = useSize(control);
-	React$1.useEffect(() => {
-		const input = ref.current;
-		if (!input) return;
-		const inputProto = window.HTMLInputElement.prototype;
-		const setChecked = Object.getOwnPropertyDescriptor(inputProto, "checked").set;
-		if (prevChecked !== checked && setChecked) {
-			const event = new Event("click", { bubbles });
-			setChecked.call(input, checked);
-			input.dispatchEvent(event);
+var ScrollAreaScrollbarVisible = React$1.forwardRef((props, forwardedRef) => {
+	const { orientation = "vertical", ...scrollbarProps } = props;
+	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+	const thumbRef = React$1.useRef(null);
+	const pointerOffsetRef = React$1.useRef(0);
+	const [sizes, setSizes] = React$1.useState({
+		content: 0,
+		viewport: 0,
+		scrollbar: {
+			size: 0,
+			paddingStart: 0,
+			paddingEnd: 0
 		}
-	}, [
-		prevChecked,
-		checked,
-		bubbles
-	]);
-	return /* @__PURE__ */ jsx(Primitive.input, {
-		type: "radio",
-		"aria-hidden": true,
-		defaultChecked: checked,
-		...props,
-		tabIndex: -1,
-		ref: composedRefs,
-		style: {
-			...props.style,
-			...controlSize,
-			position: "absolute",
-			pointerEvents: "none",
-			opacity: 0,
-			margin: 0
+	});
+	const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
+	const commonProps = {
+		...scrollbarProps,
+		sizes,
+		onSizesChange: setSizes,
+		hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
+		onThumbChange: (thumb) => thumbRef.current = thumb,
+		onThumbPointerUp: () => pointerOffsetRef.current = 0,
+		onThumbPointerDown: (pointerPos) => pointerOffsetRef.current = pointerPos
+	};
+	function getScrollPosition(pointerPos, dir) {
+		return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
+	}
+	if (orientation === "horizontal") return /* @__PURE__ */ jsx(ScrollAreaScrollbarX, {
+		...commonProps,
+		ref: forwardedRef,
+		onThumbPositionChange: () => {
+			if (context.viewport && thumbRef.current) {
+				const scrollPos = context.viewport.scrollLeft;
+				const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
+				thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
+			}
+		},
+		onWheelScroll: (scrollPos) => {
+			if (context.viewport) context.viewport.scrollLeft = scrollPos;
+		},
+		onDragScroll: (pointerPos) => {
+			if (context.viewport) context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
 		}
 	});
-});
-RadioBubbleInput.displayName = BUBBLE_INPUT_NAME;
-function getState(checked) {
-	return checked ? "checked" : "unchecked";
-}
-var ARROW_KEYS = [
-	"ArrowUp",
-	"ArrowDown",
-	"ArrowLeft",
-	"ArrowRight"
-];
-var RADIO_GROUP_NAME = "RadioGroup";
-var [createRadioGroupContext, createRadioGroupScope] = createContextScope(RADIO_GROUP_NAME, [createRovingFocusGroupScope, createRadioScope]);
-var useRovingFocusGroupScope = createRovingFocusGroupScope();
-var useRadioScope = createRadioScope();
-var [RadioGroupProvider, useRadioGroupContext] = createRadioGroupContext(RADIO_GROUP_NAME);
-var RadioGroup = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeRadioGroup, name, defaultValue, value: valueProp, required = false, disabled = false, orientation, dir, loop = true, onValueChange, ...groupProps } = props;
-	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup);
-	const direction = useDirection(dir);
-	const [value, setValue] = useControllableState({
-		prop: valueProp,
-		defaultProp: defaultValue ?? null,
-		onChange: onValueChange,
-		caller: RADIO_GROUP_NAME
-	});
-	return /* @__PURE__ */ jsx(RadioGroupProvider, {
-		scope: __scopeRadioGroup,
-		name,
-		required,
-		disabled,
-		value,
-		onValueChange: setValue,
-		children: /* @__PURE__ */ jsx(Root$3, {
-			asChild: true,
-			...rovingFocusGroupScope,
-			orientation,
-			dir: direction,
-			loop,
-			children: /* @__PURE__ */ jsx(Primitive.div, {
-				role: "radiogroup",
-				"aria-required": required,
-				"aria-orientation": orientation,
-				"data-disabled": disabled ? "" : void 0,
-				dir: direction,
-				...groupProps,
-				ref: forwardedRef
-			})
-		})
+	if (orientation === "vertical") return /* @__PURE__ */ jsx(ScrollAreaScrollbarY, {
+		...commonProps,
+		ref: forwardedRef,
+		onThumbPositionChange: () => {
+			if (context.viewport && thumbRef.current) {
+				const scrollPos = context.viewport.scrollTop;
+				const offset = getThumbOffsetFromScroll(scrollPos, sizes);
+				thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
+			}
+		},
+		onWheelScroll: (scrollPos) => {
+			if (context.viewport) context.viewport.scrollTop = scrollPos;
+		},
+		onDragScroll: (pointerPos) => {
+			if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
+		}
 	});
+	return null;
 });
-RadioGroup.displayName = RADIO_GROUP_NAME;
-var ITEM_NAME = "RadioGroupItem";
-var RadioGroupItem = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeRadioGroup, disabled, ...itemProps } = props;
-	const context = useRadioGroupContext(ITEM_NAME, __scopeRadioGroup);
-	const isDisabled = context.disabled || disabled;
-	const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup);
-	const radioScope = useRadioScope(__scopeRadioGroup);
+var ScrollAreaScrollbarX = React$1.forwardRef((props, forwardedRef) => {
+	const { sizes, onSizesChange, ...scrollbarProps } = props;
+	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+	const [computedStyle, setComputedStyle] = React$1.useState();
 	const ref = React$1.useRef(null);
-	const composedRefs = useComposedRefs(forwardedRef, ref);
-	const checked = context.value === itemProps.value;
-	const isArrowKeyPressedRef = React$1.useRef(false);
+	const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);
 	React$1.useEffect(() => {
-		const handleKeyDown = (event) => {
-			if (ARROW_KEYS.includes(event.key)) isArrowKeyPressedRef.current = true;
-		};
-		const handleKeyUp = () => isArrowKeyPressedRef.current = false;
-		document.addEventListener("keydown", handleKeyDown);
-		document.addEventListener("keyup", handleKeyUp);
-		return () => {
-			document.removeEventListener("keydown", handleKeyDown);
-			document.removeEventListener("keyup", handleKeyUp);
-		};
-	}, []);
-	return /* @__PURE__ */ jsx(Item, {
-		asChild: true,
-		...rovingFocusGroupScope,
-		focusable: !isDisabled,
-		active: checked,
-		children: /* @__PURE__ */ jsx(Radio, {
-			disabled: isDisabled,
-			required: context.required,
-			checked,
-			...radioScope,
-			...itemProps,
-			name: context.name,
-			ref: composedRefs,
-			onCheck: () => context.onValueChange(itemProps.value),
-			onKeyDown: composeEventHandlers((event) => {
-				if (event.key === "Enter") event.preventDefault();
-			}),
-			onFocus: composeEventHandlers(itemProps.onFocus, () => {
-				if (isArrowKeyPressedRef.current) ref.current?.click();
-			})
-		})
-	});
-});
-RadioGroupItem.displayName = ITEM_NAME;
-var INDICATOR_NAME2 = "RadioGroupIndicator";
-var RadioGroupIndicator = React$1.forwardRef((props, forwardedRef) => {
-	const { __scopeRadioGroup, ...indicatorProps } = props;
-	return /* @__PURE__ */ jsx(RadioIndicator, {
-		...useRadioScope(__scopeRadioGroup),
-		...indicatorProps,
-		ref: forwardedRef
+		if (ref.current) setComputedStyle(getComputedStyle(ref.current));
+	}, [ref]);
+	return /* @__PURE__ */ jsx(ScrollAreaScrollbarImpl, {
+		"data-orientation": "horizontal",
+		...scrollbarProps,
+		ref: composeRefs,
+		sizes,
+		style: {
+			bottom: 0,
+			left: context.dir === "rtl" ? "var(--radix-scroll-area-corner-width)" : 0,
+			right: context.dir === "ltr" ? "var(--radix-scroll-area-corner-width)" : 0,
+			["--radix-scroll-area-thumb-width"]: getThumbSize(sizes) + "px",
+			...props.style
+		},
+		onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.x),
+		onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.x),
+		onWheelScroll: (event, maxScrollPos) => {
+			if (context.viewport) {
+				const scrollPos = context.viewport.scrollLeft + event.deltaX;
+				props.onWheelScroll(scrollPos);
+				if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
+			}
+		},
+		onResize: () => {
+			if (ref.current && context.viewport && computedStyle) onSizesChange({
+				content: context.viewport.scrollWidth,
+				viewport: context.viewport.offsetWidth,
+				scrollbar: {
+					size: ref.current.clientWidth,
+					paddingStart: toInt(computedStyle.paddingLeft),
+					paddingEnd: toInt(computedStyle.paddingRight)
+				}
+			});
+		}
 	});
 });
-RadioGroupIndicator.displayName = INDICATOR_NAME2;
-var Root2 = RadioGroup;
-var Item2 = RadioGroupItem;
-var Indicator = RadioGroupIndicator;
-var RadioGroupGlassRoot = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Root2, {
-	ref,
-	className: cn("grid gap-2", className),
-	...props
-}));
-RadioGroupGlassRoot.displayName = "RadioGroupGlassRoot";
-var RadioGroupGlassItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Item2, {
-	ref,
-	className: cn("aspect-square h-4 w-4 rounded-full", "border border-[var(--radio-border,var(--glass-border))]", "bg-[var(--radio-bg,transparent)]", "text-[var(--radio-indicator,var(--semantic-primary))]", "ring-offset-background", "focus:outline-none focus-visible:ring-2", "focus-visible:ring-[var(--focus-ring)] focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "data-[state=checked]:border-[var(--radio-border-checked,var(--semantic-primary))]", "data-[state=checked]:bg-[var(--radio-bg-checked,var(--semantic-primary-subtle))]", "transition-all duration-200", className),
-	...props,
-	children: /* @__PURE__ */ jsx(Indicator, {
-		className: "flex items-center justify-center",
-		children: /* @__PURE__ */ jsx(Circle, { className: cn("h-2.5 w-2.5 fill-current text-current", "drop-shadow-[0_0_4px_var(--semantic-primary)]") })
-	})
-}));
-RadioGroupGlassItem.displayName = "RadioGroupGlassItem";
-const RadioGroupGlass = {
-	Root: RadioGroupGlassRoot,
-	Item: RadioGroupGlassItem
-};
-var sheetVariants = cva([
-	"fixed z-50 gap-4 p-6",
-	"bg-[var(--sheet-bg,var(--modal-bg))]",
-	"border-[var(--sheet-border,var(--modal-border))]",
-	"backdrop-blur-lg",
-	"transition-all duration-300 ease-in-out",
-	"data-[state=open]:animate-in data-[state=closed]:animate-out"
-], {
-	variants: { side: {
-		top: ["inset-x-0 top-0 border-b", "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top"],
-		bottom: ["inset-x-0 bottom-0 border-t", "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"],
-		left: ["inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left"],
-		right: ["inset-y-0 right-0 h-full w-3/4 border-r sm:max-w-sm", "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"]
-	} },
-	defaultVariants: { side: "right" }
-});
-var SheetGlassRoot = DialogPrimitive.Root;
-var SheetGlassTrigger = DialogPrimitive.Trigger;
-var SheetGlassClose = DialogPrimitive.Close;
-var SheetGlassPortal = DialogPrimitive.Portal;
-var SheetGlassOverlay = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
-	ref,
-	className: cn("fixed inset-0 z-50", "bg-[var(--sheet-overlay,var(--modal-overlay))]", "backdrop-blur-sm", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
-	...props
-}));
-SheetGlassOverlay.displayName = "SheetGlassOverlay";
-var SheetGlassContent = React$1.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SheetGlassPortal, { children: [/* @__PURE__ */ jsx(SheetGlassOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
-	ref,
-	className: cn(sheetVariants({ side }), className),
-	...props,
-	children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
-		className: cn("absolute right-4 top-4 rounded-sm", "opacity-70 ring-offset-background", "transition-opacity hover:opacity-100", "focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:ring-offset-2", "disabled:pointer-events-none", "data-[state=open]:bg-secondary"),
-		children: [/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: "Close"
-		})]
-	})]
-})] }));
-SheetGlassContent.displayName = "SheetGlassContent";
-var SheetGlassHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex flex-col space-y-2 text-center sm:text-left", className),
-	...props
-});
-SheetGlassHeader.displayName = "SheetGlassHeader";
-var SheetGlassFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
-	...props
-});
-SheetGlassFooter.displayName = "SheetGlassFooter";
-var SheetGlassTitle = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, {
-	ref,
-	className: cn("text-lg font-semibold", "text-[var(--sheet-title,var(--text-primary))]", className),
-	...props
-}));
-SheetGlassTitle.displayName = "SheetGlassTitle";
-var SheetGlassDescription = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
-	ref,
-	className: cn("text-sm", "text-[var(--sheet-description,var(--text-muted))]", className),
-	...props
-}));
-SheetGlassDescription.displayName = "SheetGlassDescription";
-const SheetGlass = {
-	Root: SheetGlassRoot,
-	Trigger: SheetGlassTrigger,
-	Close: SheetGlassClose,
-	Portal: SheetGlassPortal,
-	Overlay: SheetGlassOverlay,
-	Content: SheetGlassContent,
-	Header: SheetGlassHeader,
-	Footer: SheetGlassFooter,
-	Title: SheetGlassTitle,
-	Description: SheetGlassDescription
-};
-function _extends$1() {
-	return _extends$1 = Object.assign ? Object.assign.bind() : function(n) {
-		for (var e = 1; e < arguments.length; e++) {
-			var t = arguments[e];
-			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-		}
-		return n;
-	}, _extends$1.apply(null, arguments);
-}
-function ownKeys$1(e, r) {
-	var t = Object.keys(e);
-	if (Object.getOwnPropertySymbols) {
-		var o = Object.getOwnPropertySymbols(e);
-		r && (o = o.filter(function(r$1) {
-			return Object.getOwnPropertyDescriptor(e, r$1).enumerable;
-		})), t.push.apply(t, o);
-	}
-	return t;
-}
-function _objectSpread$1(e) {
-	for (var r = 1; r < arguments.length; r++) {
-		var t = null != arguments[r] ? arguments[r] : {};
-		r % 2 ? ownKeys$1(Object(t), !0).forEach(function(r$1) {
-			_defineProperty$1(e, r$1, t[r$1]);
-		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function(r$1) {
-			Object.defineProperty(e, r$1, Object.getOwnPropertyDescriptor(t, r$1));
-		});
-	}
-	return e;
-}
-function _defineProperty$1(e, r, t) {
-	return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, {
-		value: t,
-		enumerable: !0,
-		configurable: !0,
-		writable: !0
-	}) : e[r] = t, e;
-}
-function _toPropertyKey$1(t) {
-	var i = _toPrimitive$1(t, "string");
-	return "symbol" == typeof i ? i : i + "";
-}
-function _toPrimitive$1(t, r) {
-	if ("object" != typeof t || !t) return t;
-	var e = t[Symbol.toPrimitive];
-	if (void 0 !== e) {
-		var i = e.call(t, r || "default");
-		if ("object" != typeof i) return i;
-		throw new TypeError("@@toPrimitive must return a primitive value.");
-	}
-	return ("string" === r ? String : Number)(t);
-}
-var SIZE = 32;
-var defaultLegendContentDefaultProps = {
-	align: "center",
-	iconSize: 14,
-	inactiveColor: "#ccc",
-	layout: "horizontal",
-	verticalAlign: "middle"
-};
-function Icon(_ref) {
-	var { data, iconType, inactiveColor } = _ref;
-	var halfSize = SIZE / 2;
-	var sixthSize = SIZE / 6;
-	var thirdSize = SIZE / 3;
-	var color = data.inactive ? inactiveColor : data.color;
-	var preferredIcon = iconType !== null && iconType !== void 0 ? iconType : data.type;
-	if (preferredIcon === "none") return null;
-	if (preferredIcon === "plainline") {
-		var _data$payload;
-		return /* @__PURE__ */ React$1.createElement("line", {
-			strokeWidth: 4,
-			fill: "none",
-			stroke: color,
-			strokeDasharray: (_data$payload = data.payload) === null || _data$payload === void 0 ? void 0 : _data$payload.strokeDasharray,
-			x1: 0,
-			y1: halfSize,
-			x2: SIZE,
-			y2: halfSize,
-			className: "recharts-legend-icon"
+var ScrollAreaScrollbarY = React$1.forwardRef((props, forwardedRef) => {
+	const { sizes, onSizesChange, ...scrollbarProps } = props;
+	const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);
+	const [computedStyle, setComputedStyle] = React$1.useState();
+	const ref = React$1.useRef(null);
+	const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);
+	React$1.useEffect(() => {
+		if (ref.current) setComputedStyle(getComputedStyle(ref.current));
+	}, [ref]);
+	return /* @__PURE__ */ jsx(ScrollAreaScrollbarImpl, {
+		"data-orientation": "vertical",
+		...scrollbarProps,
+		ref: composeRefs,
+		sizes,
+		style: {
+			top: 0,
+			right: context.dir === "ltr" ? 0 : void 0,
+			left: context.dir === "rtl" ? 0 : void 0,
+			bottom: "var(--radix-scroll-area-corner-height)",
+			["--radix-scroll-area-thumb-height"]: getThumbSize(sizes) + "px",
+			...props.style
+		},
+		onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.y),
+		onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y),
+		onWheelScroll: (event, maxScrollPos) => {
+			if (context.viewport) {
+				const scrollPos = context.viewport.scrollTop + event.deltaY;
+				props.onWheelScroll(scrollPos);
+				if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
+			}
+		},
+		onResize: () => {
+			if (ref.current && context.viewport && computedStyle) onSizesChange({
+				content: context.viewport.scrollHeight,
+				viewport: context.viewport.offsetHeight,
+				scrollbar: {
+					size: ref.current.clientHeight,
+					paddingStart: toInt(computedStyle.paddingTop),
+					paddingEnd: toInt(computedStyle.paddingBottom)
+				}
+			});
+		}
+	});
+});
+var [ScrollbarProvider, useScrollbarContext] = createScrollAreaContext(SCROLLBAR_NAME);
+var ScrollAreaScrollbarImpl = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeScrollArea, sizes, hasThumb, onThumbChange, onThumbPointerUp, onThumbPointerDown, onThumbPositionChange, onDragScroll, onWheelScroll, onResize, ...scrollbarProps } = props;
+	const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
+	const [scrollbar, setScrollbar] = React$1.useState(null);
+	const composeRefs = useComposedRefs(forwardedRef, (node) => setScrollbar(node));
+	const rectRef = React$1.useRef(null);
+	const prevWebkitUserSelectRef = React$1.useRef("");
+	const viewport = context.viewport;
+	const maxScrollPos = sizes.content - sizes.viewport;
+	const handleWheelScroll = useCallbackRef(onWheelScroll);
+	const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);
+	const handleResize = useDebounceCallback(onResize, 10);
+	function handleDragScroll(event) {
+		if (rectRef.current) onDragScroll({
+			x: event.clientX - rectRef.current.left,
+			y: event.clientY - rectRef.current.top
 		});
 	}
-	if (preferredIcon === "line") return /* @__PURE__ */ React$1.createElement("path", {
-		strokeWidth: 4,
-		fill: "none",
-		stroke: color,
-		d: "M0,".concat(halfSize, "h").concat(thirdSize, "\n            A").concat(sixthSize, ",").concat(sixthSize, ",0,1,1,").concat(2 * thirdSize, ",").concat(halfSize, "\n            H").concat(SIZE, "M").concat(2 * thirdSize, ",").concat(halfSize, "\n            A").concat(sixthSize, ",").concat(sixthSize, ",0,1,1,").concat(thirdSize, ",").concat(halfSize),
-		className: "recharts-legend-icon"
-	});
-	if (preferredIcon === "rect") return /* @__PURE__ */ React$1.createElement("path", {
-		stroke: "none",
-		fill: color,
-		d: "M0,".concat(SIZE / 8, "h").concat(SIZE, "v").concat(SIZE * 3 / 4, "h").concat(-SIZE, "z"),
-		className: "recharts-legend-icon"
+	React$1.useEffect(() => {
+		const handleWheel = (event) => {
+			const element = event.target;
+			if (scrollbar?.contains(element)) handleWheelScroll(event, maxScrollPos);
+		};
+		document.addEventListener("wheel", handleWheel, { passive: false });
+		return () => document.removeEventListener("wheel", handleWheel, { passive: false });
+	}, [
+		viewport,
+		scrollbar,
+		maxScrollPos,
+		handleWheelScroll
+	]);
+	React$1.useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
+	useResizeObserver(scrollbar, handleResize);
+	useResizeObserver(context.content, handleResize);
+	return /* @__PURE__ */ jsx(ScrollbarProvider, {
+		scope: __scopeScrollArea,
+		scrollbar,
+		hasThumb,
+		onThumbChange: useCallbackRef(onThumbChange),
+		onThumbPointerUp: useCallbackRef(onThumbPointerUp),
+		onThumbPositionChange: handleThumbPositionChange,
+		onThumbPointerDown: useCallbackRef(onThumbPointerDown),
+		children: /* @__PURE__ */ jsx(Primitive.div, {
+			...scrollbarProps,
+			ref: composeRefs,
+			style: {
+				position: "absolute",
+				...scrollbarProps.style
+			},
+			onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
+				if (event.button === 0) {
+					event.target.setPointerCapture(event.pointerId);
+					rectRef.current = scrollbar.getBoundingClientRect();
+					prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
+					document.body.style.webkitUserSelect = "none";
+					if (context.viewport) context.viewport.style.scrollBehavior = "auto";
+					handleDragScroll(event);
+				}
+			}),
+			onPointerMove: composeEventHandlers(props.onPointerMove, handleDragScroll),
+			onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
+				const element = event.target;
+				if (element.hasPointerCapture(event.pointerId)) element.releasePointerCapture(event.pointerId);
+				document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
+				if (context.viewport) context.viewport.style.scrollBehavior = "";
+				rectRef.current = null;
+			})
+		})
 	});
-	if (/* @__PURE__ */ React$1.isValidElement(data.legendIcon)) {
-		var iconProps = _objectSpread$1({}, data);
-		delete iconProps.legendIcon;
-		return /* @__PURE__ */ React$1.cloneElement(data.legendIcon, iconProps);
-	}
-	return /* @__PURE__ */ React$1.createElement(Symbols, {
-		fill: color,
-		cx: halfSize,
-		cy: halfSize,
-		size: SIZE,
-		sizeType: "diameter",
-		type: preferredIcon
+});
+var THUMB_NAME = "ScrollAreaThumb";
+var ScrollAreaThumb = React$1.forwardRef((props, forwardedRef) => {
+	const { forceMount, ...thumbProps } = props;
+	const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);
+	return /* @__PURE__ */ jsx(Presence, {
+		present: forceMount || scrollbarContext.hasThumb,
+		children: /* @__PURE__ */ jsx(ScrollAreaThumbImpl, {
+			ref: forwardedRef,
+			...thumbProps
+		})
 	});
-}
-function Items(props) {
-	var { payload, iconSize, layout, formatter, inactiveColor, iconType } = props;
-	var viewBox = {
-		x: 0,
-		y: 0,
-		width: SIZE,
-		height: SIZE
-	};
-	var itemStyle = {
-		display: layout === "horizontal" ? "inline-block" : "block",
-		marginRight: 10
-	};
-	var svgStyle = {
-		display: "inline-block",
-		verticalAlign: "middle",
-		marginRight: 4
-	};
-	return payload.map((entry, i) => {
-		var finalFormatter = entry.formatter || formatter;
-		var className = clsx({
-			"recharts-legend-item": true,
-			["legend-item-".concat(i)]: true,
-			inactive: entry.inactive
-		});
-		if (entry.type === "none") return null;
-		var color = entry.inactive ? inactiveColor : entry.color;
-		var finalValue = finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value;
-		return /* @__PURE__ */ React$1.createElement("li", _extends$1({
-			className,
-			style: itemStyle,
-			key: "legend-item-".concat(i)
-		}, adaptEventsOfChild(props, entry, i)), /* @__PURE__ */ React$1.createElement(Surface, {
-			width: iconSize,
-			height: iconSize,
-			viewBox,
-			style: svgStyle,
-			"aria-label": "".concat(finalValue, " legend icon")
-		}, /* @__PURE__ */ React$1.createElement(Icon, {
-			data: entry,
-			iconType,
-			inactiveColor
-		})), /* @__PURE__ */ React$1.createElement("span", {
-			className: "recharts-legend-item-text",
-			style: { color }
-		}, finalValue));
+});
+var ScrollAreaThumbImpl = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeScrollArea, style, ...thumbProps } = props;
+	const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);
+	const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);
+	const { onThumbPositionChange } = scrollbarContext;
+	const composedRef = useComposedRefs(forwardedRef, (node) => scrollbarContext.onThumbChange(node));
+	const removeUnlinkedScrollListenerRef = React$1.useRef(void 0);
+	const debounceScrollEnd = useDebounceCallback(() => {
+		if (removeUnlinkedScrollListenerRef.current) {
+			removeUnlinkedScrollListenerRef.current();
+			removeUnlinkedScrollListenerRef.current = void 0;
+		}
+	}, 100);
+	React$1.useEffect(() => {
+		const viewport = scrollAreaContext.viewport;
+		if (viewport) {
+			const handleScroll = () => {
+				debounceScrollEnd();
+				if (!removeUnlinkedScrollListenerRef.current) {
+					removeUnlinkedScrollListenerRef.current = addUnlinkedScrollListener(viewport, onThumbPositionChange);
+					onThumbPositionChange();
+				}
+			};
+			onThumbPositionChange();
+			viewport.addEventListener("scroll", handleScroll);
+			return () => viewport.removeEventListener("scroll", handleScroll);
+		}
+	}, [
+		scrollAreaContext.viewport,
+		debounceScrollEnd,
+		onThumbPositionChange
+	]);
+	return /* @__PURE__ */ jsx(Primitive.div, {
+		"data-state": scrollbarContext.hasThumb ? "visible" : "hidden",
+		...thumbProps,
+		ref: composedRef,
+		style: {
+			width: "var(--radix-scroll-area-thumb-width)",
+			height: "var(--radix-scroll-area-thumb-height)",
+			...style
+		},
+		onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, (event) => {
+			const thumbRect = event.target.getBoundingClientRect();
+			const x = event.clientX - thumbRect.left;
+			const y = event.clientY - thumbRect.top;
+			scrollbarContext.onThumbPointerDown({
+				x,
+				y
+			});
+		}),
+		onPointerUp: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
 	});
-}
-var DefaultLegendContent = (outsideProps) => {
-	var props = resolveDefaultProps(outsideProps, defaultLegendContentDefaultProps);
-	var { payload, layout, align } = props;
-	if (!payload || !payload.length) return null;
-	var finalStyle = {
-		padding: 0,
-		margin: 0,
-		textAlign: layout === "horizontal" ? align : "left"
-	};
-	return /* @__PURE__ */ React$1.createElement("ul", {
-		className: "recharts-default-legend",
-		style: finalStyle
-	}, /* @__PURE__ */ React$1.createElement(Items, _extends$1({}, props, { payload })));
-};
-function useLegendPayload() {
-	return useAppSelector(selectLegendPayload);
-}
-var _excluded = ["contextPayload"];
-function _extends() {
-	return _extends = Object.assign ? Object.assign.bind() : function(n) {
-		for (var e = 1; e < arguments.length; e++) {
-			var t = arguments[e];
-			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+});
+ScrollAreaThumb.displayName = THUMB_NAME;
+var CORNER_NAME = "ScrollAreaCorner";
+var ScrollAreaCorner = React$1.forwardRef((props, forwardedRef) => {
+	const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);
+	const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
+	return context.type !== "scroll" && hasBothScrollbarsVisible ? /* @__PURE__ */ jsx(ScrollAreaCornerImpl, {
+		...props,
+		ref: forwardedRef
+	}) : null;
+});
+ScrollAreaCorner.displayName = CORNER_NAME;
+var ScrollAreaCornerImpl = React$1.forwardRef((props, forwardedRef) => {
+	const { __scopeScrollArea, ...cornerProps } = props;
+	const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);
+	const [width, setWidth] = React$1.useState(0);
+	const [height, setHeight] = React$1.useState(0);
+	const hasSize = Boolean(width && height);
+	useResizeObserver(context.scrollbarX, () => {
+		const height2 = context.scrollbarX?.offsetHeight || 0;
+		context.onCornerHeightChange(height2);
+		setHeight(height2);
+	});
+	useResizeObserver(context.scrollbarY, () => {
+		const width2 = context.scrollbarY?.offsetWidth || 0;
+		context.onCornerWidthChange(width2);
+		setWidth(width2);
+	});
+	return hasSize ? /* @__PURE__ */ jsx(Primitive.div, {
+		...cornerProps,
+		ref: forwardedRef,
+		style: {
+			width,
+			height,
+			position: "absolute",
+			right: context.dir === "ltr" ? 0 : void 0,
+			left: context.dir === "rtl" ? 0 : void 0,
+			bottom: 0,
+			...props.style
 		}
-		return n;
-	}, _extends.apply(null, arguments);
-}
-function ownKeys(e, r) {
-	var t = Object.keys(e);
-	if (Object.getOwnPropertySymbols) {
-		var o = Object.getOwnPropertySymbols(e);
-		r && (o = o.filter(function(r$1) {
-			return Object.getOwnPropertyDescriptor(e, r$1).enumerable;
-		})), t.push.apply(t, o);
-	}
-	return t;
-}
-function _objectSpread(e) {
-	for (var r = 1; r < arguments.length; r++) {
-		var t = null != arguments[r] ? arguments[r] : {};
-		r % 2 ? ownKeys(Object(t), !0).forEach(function(r$1) {
-			_defineProperty(e, r$1, t[r$1]);
-		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r$1) {
-			Object.defineProperty(e, r$1, Object.getOwnPropertyDescriptor(t, r$1));
-		});
-	}
-	return e;
-}
-function _defineProperty(e, r, t) {
-	return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-		value: t,
-		enumerable: !0,
-		configurable: !0,
-		writable: !0
-	}) : e[r] = t, e;
-}
-function _toPropertyKey(t) {
-	var i = _toPrimitive(t, "string");
-	return "symbol" == typeof i ? i : i + "";
-}
-function _toPrimitive(t, r) {
-	if ("object" != typeof t || !t) return t;
-	var e = t[Symbol.toPrimitive];
-	if (void 0 !== e) {
-		var i = e.call(t, r || "default");
-		if ("object" != typeof i) return i;
-		throw new TypeError("@@toPrimitive must return a primitive value.");
-	}
-	return ("string" === r ? String : Number)(t);
+	}) : null;
+});
+function toInt(value) {
+	return value ? parseInt(value, 10) : 0;
 }
-function _objectWithoutProperties(e, t) {
-	if (null == e) return {};
-	var o, r, i = _objectWithoutPropertiesLoose(e, t);
-	if (Object.getOwnPropertySymbols) {
-		var n = Object.getOwnPropertySymbols(e);
-		for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
-	}
-	return i;
+function getThumbRatio(viewportSize, contentSize) {
+	const ratio = viewportSize / contentSize;
+	return isNaN(ratio) ? 0 : ratio;
 }
-function _objectWithoutPropertiesLoose(r, e) {
-	if (null == r) return {};
-	var t = {};
-	for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-		if (-1 !== e.indexOf(n)) continue;
-		t[n] = r[n];
-	}
-	return t;
+function getThumbSize(sizes) {
+	const ratio = getThumbRatio(sizes.viewport, sizes.content);
+	const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+	const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
+	return Math.max(thumbSize, 18);
 }
-function defaultUniqBy(entry) {
-	return entry.value;
+function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = "ltr") {
+	const thumbSizePx = getThumbSize(sizes);
+	const thumbCenter = thumbSizePx / 2;
+	const offset = pointerOffset || thumbCenter;
+	const thumbOffsetFromEnd = thumbSizePx - offset;
+	const minPointerPos = sizes.scrollbar.paddingStart + offset;
+	const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
+	const maxScrollPos = sizes.content - sizes.viewport;
+	const scrollRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+	return linearScale([minPointerPos, maxPointerPos], scrollRange)(pointerPos);
 }
-function LegendContent(props) {
-	var { contextPayload } = props, otherProps = _objectWithoutProperties(props, _excluded);
-	var finalPayload = getUniqPayload(contextPayload, props.payloadUniqBy, defaultUniqBy);
-	var contentProps = _objectSpread(_objectSpread({}, otherProps), {}, { payload: finalPayload });
-	if (/* @__PURE__ */ React$1.isValidElement(props.content)) return /* @__PURE__ */ React$1.cloneElement(props.content, contentProps);
-	if (typeof props.content === "function") return /* @__PURE__ */ React$1.createElement(props.content, contentProps);
-	return /* @__PURE__ */ React$1.createElement(DefaultLegendContent, contentProps);
+function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
+	const thumbSizePx = getThumbSize(sizes);
+	const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+	const scrollbar = sizes.scrollbar.size - scrollbarPadding;
+	const maxScrollPos = sizes.content - sizes.viewport;
+	const maxThumbPos = scrollbar - thumbSizePx;
+	const scrollWithoutMomentum = clamp(scrollPos, dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0]);
+	return linearScale([0, maxScrollPos], [0, maxThumbPos])(scrollWithoutMomentum);
 }
-function getDefaultPosition(style, props, margin, chartWidth, chartHeight, box) {
-	var { layout, align, verticalAlign } = props;
-	var hPos, vPos;
-	if (!style || (style.left === void 0 || style.left === null) && (style.right === void 0 || style.right === null)) if (align === "center" && layout === "vertical") hPos = { left: ((chartWidth || 0) - box.width) / 2 };
-	else hPos = align === "right" ? { right: margin && margin.right || 0 } : { left: margin && margin.left || 0 };
-	if (!style || (style.top === void 0 || style.top === null) && (style.bottom === void 0 || style.bottom === null)) if (verticalAlign === "middle") vPos = { top: ((chartHeight || 0) - box.height) / 2 };
-	else vPos = verticalAlign === "bottom" ? { bottom: margin && margin.bottom || 0 } : { top: margin && margin.top || 0 };
-	return _objectSpread(_objectSpread({}, hPos), vPos);
+function linearScale(input, output) {
+	return (value) => {
+		if (input[0] === input[1] || output[0] === output[1]) return output[0];
+		const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+		return output[0] + ratio * (value - input[0]);
+	};
 }
-function LegendSettingsDispatcher(props) {
-	var dispatch = useAppDispatch();
-	useEffect(() => {
-		dispatch(setLegendSettings(props));
-	}, [dispatch, props]);
-	return null;
+function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
+	return scrollPos > 0 && scrollPos < maxScrollPos;
 }
-function LegendSizeDispatcher(props) {
-	var dispatch = useAppDispatch();
-	useEffect(() => {
-		dispatch(setLegendSize(props));
-		return () => {
-			dispatch(setLegendSize({
-				width: 0,
-				height: 0
-			}));
+var addUnlinkedScrollListener = (node, handler = () => {}) => {
+	let prevPosition = {
+		left: node.scrollLeft,
+		top: node.scrollTop
+	};
+	let rAF = 0;
+	(function loop() {
+		const position = {
+			left: node.scrollLeft,
+			top: node.scrollTop
 		};
-	}, [dispatch, props]);
-	return null;
-}
-function getWidthOrHeight(layout, height, width, maxWidth) {
-	if (layout === "vertical" && isNumber(height)) return { height };
-	if (layout === "horizontal") return { width: width || maxWidth };
-	return null;
-}
-var legendDefaultProps = {
-	align: "center",
-	iconSize: 14,
-	itemSorter: "value",
-	layout: "horizontal",
-	verticalAlign: "bottom"
+		const isHorizontalScroll = prevPosition.left !== position.left;
+		const isVerticalScroll = prevPosition.top !== position.top;
+		if (isHorizontalScroll || isVerticalScroll) handler();
+		prevPosition = position;
+		rAF = window.requestAnimationFrame(loop);
+	})();
+	return () => window.cancelAnimationFrame(rAF);
 };
-function Legend(outsideProps) {
-	var props = resolveDefaultProps(outsideProps, legendDefaultProps);
-	var contextPayload = useLegendPayload();
-	var legendPortalFromContext = useLegendPortal();
-	var margin = useMargin();
-	var { width: widthFromProps, height: heightFromProps, wrapperStyle, portal: portalFromProps } = props;
-	var [lastBoundingBox, updateBoundingBox] = useElementOffset([contextPayload]);
-	var chartWidth = useChartWidth();
-	var chartHeight = useChartHeight();
-	if (chartWidth == null || chartHeight == null) return null;
-	var maxWidth = chartWidth - ((margin === null || margin === void 0 ? void 0 : margin.left) || 0) - ((margin === null || margin === void 0 ? void 0 : margin.right) || 0);
-	var widthOrHeight = getWidthOrHeight(props.layout, heightFromProps, widthFromProps, maxWidth);
-	var outerStyle = portalFromProps ? wrapperStyle : _objectSpread(_objectSpread({
-		position: "absolute",
-		width: (widthOrHeight === null || widthOrHeight === void 0 ? void 0 : widthOrHeight.width) || widthFromProps || "auto",
-		height: (widthOrHeight === null || widthOrHeight === void 0 ? void 0 : widthOrHeight.height) || heightFromProps || "auto"
-	}, getDefaultPosition(wrapperStyle, props, margin, chartWidth, chartHeight, lastBoundingBox)), wrapperStyle);
-	var legendPortal = portalFromProps !== null && portalFromProps !== void 0 ? portalFromProps : legendPortalFromContext;
-	if (legendPortal == null || contextPayload == null) return null;
-	return /* @__PURE__ */ createPortal(/* @__PURE__ */ React$1.createElement("div", {
-		className: "recharts-legend-wrapper",
-		style: outerStyle,
-		ref: updateBoundingBox
-	}, /* @__PURE__ */ React$1.createElement(LegendSettingsDispatcher, {
-		layout: props.layout,
-		align: props.align,
-		verticalAlign: props.verticalAlign,
-		itemSorter: props.itemSorter
-	}), !portalFromProps && /* @__PURE__ */ React$1.createElement(LegendSizeDispatcher, {
-		width: lastBoundingBox.width,
-		height: lastBoundingBox.height
-	}), /* @__PURE__ */ React$1.createElement(LegendContent, _extends({}, props, widthOrHeight, {
-		margin,
-		chartWidth,
-		chartHeight,
-		contextPayload
-	}))), legendPortal);
+function useDebounceCallback(callback, delay) {
+	const handleCallback = useCallbackRef(callback);
+	const debounceTimerRef = React$1.useRef(0);
+	React$1.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+	return React$1.useCallback(() => {
+		window.clearTimeout(debounceTimerRef.current);
+		debounceTimerRef.current = window.setTimeout(handleCallback, delay);
+	}, [handleCallback, delay]);
 }
-Legend.displayName = "Legend";
+function useResizeObserver(element, onResize) {
+	const handleResize = useCallbackRef(onResize);
+	useLayoutEffect2(() => {
+		let rAF = 0;
+		if (element) {
+			const resizeObserver = new ResizeObserver(() => {
+				cancelAnimationFrame(rAF);
+				rAF = window.requestAnimationFrame(handleResize);
+			});
+			resizeObserver.observe(element);
+			return () => {
+				window.cancelAnimationFrame(rAF);
+				resizeObserver.unobserve(element);
+			};
+		}
+	}, [element, handleResize]);
+}
+var Root = ScrollArea$1;
+var Viewport = ScrollAreaViewport;
+var Corner = ScrollAreaCorner;
 function ScrollArea({ className, children, ...props }) {
-	return /* @__PURE__ */ jsxs(Root$1, {
+	return /* @__PURE__ */ jsxs(Root, {
 		"data-slot": "scroll-area",
 		className: cn("relative", className),
 		...props,
@@ -3836,6 +2548,6 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 		size: "default"
 	}
 });
-export { AICardGlass, AlertGlass, AlertGlassDescription, AlertGlassTitle, AvatarGlass, AvatarGlassFallback, AvatarGlassImage, AvatarGlassSimple, BadgeGlass, Bar, BarChart, BaseProgressGlass, ButtonGlass, CareerStatsGlass, CareerStatsHeaderGlass, Cell, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CheckboxGlass, CircularMetricGlass, CircularProgressGlass, CollapsibleGlass, CollapsibleGlassContent, CollapsibleGlassRoot, CollapsibleGlassTrigger, ComboBoxGlass, ContributionMetricsGlass, DropdownGlass, DropdownMenuGlass, DropdownMenuGlassCheckboxItem, DropdownMenuGlassContent, DropdownMenuGlassGroup, DropdownMenuGlassItem, DropdownMenuGlassLabel, DropdownMenuGlassPortal, DropdownMenuGlassRadioGroup, DropdownMenuGlassRadioItem, DropdownMenuGlassSeparator, DropdownMenuGlassShortcut, DropdownMenuGlassSub, DropdownMenuGlassSubContent, DropdownMenuGlassSubTrigger, DropdownMenuGlassTrigger, ExpandableHeaderGlass, FlagAlertGlass, FlagsSectionGlass, FormFieldWrapper, GlassCard, GlassCardAction, GlassCardContent, GlassCardDescription, GlassCardFooter, GlassCardHeader, GlassCardTitle, HeaderBrandingGlass, HeaderNavGlass, IconButtonGlass, InputGlass, InsightCardGlass, InteractiveCard, LanguageBarGlass, MetricCardGlass, MetricsGridGlass, ModalGlass, NotificationGlass, PopoverGlass, PopoverGlassAnchor, PopoverGlassContent, PopoverGlassLegacy, PopoverGlassTrigger, ProfileAvatarGlass, ProfileHeaderGlass, ProgressGlass, ProjectsListGlass, RadioGroupGlass, RadioGroupGlassItem, RadioGroupGlassRoot, RainbowProgressGlass, RepositoryCardGlass, RepositoryHeaderGlass, RepositoryMetadataGlass, ResponsiveContainer, ScrollAreaGlass, ScrollBarGlass, SearchBoxGlass, SegmentedControlGlass, SeparatorGlass, SheetGlass, SheetGlassClose, SheetGlassContent, SheetGlassDescription, SheetGlassFooter, SheetGlassHeader, SheetGlassOverlay, SheetGlassPortal, SheetGlassRoot, SheetGlassTitle, SheetGlassTrigger, SidebarGlass, SkeletonGlass, SliderGlass, SortDropdownGlass, SparklineGlass, SplitLayoutAccordion, SplitLayoutGlass, StatItemGlass, StatusIndicatorGlass, StepperGlass, THEMES, THEME_CONFIG, TabsGlass, ThemeProvider, ThemeToggleGlass, ToggleGlass, ToggleGroupGlass, ToggleGroupGlassItem, ToggleGroupGlassRoot, TooltipGlass, TooltipGlassContent, TooltipGlassProvider, TooltipGlassSimple, TooltipGlassTrigger, TouchTarget, TrustScoreCardGlass, TrustScoreDisplayGlass, UserInfoGlass, UserStatsLineGlass, YearCardGlass, alertVariants, avatarSizes, badgeVariants, buttonGlassVariants, cardIntensity, cn, dropdownAlign, getNextTheme, getThemeConfig, inputVariants, insightCardVariants, insightVariantConfig, modalSizes, notificationVariants, progressSizes, alertVariants$1 as shadcnAlertVariants, badgeVariants$1 as shadcnBadgeVariants, buttonVariants as shadcnButtonVariants, skeletonVariants, sparklineBarVariants, sparklineContainerVariants, statusSizes, stepperConnectorVariants, stepperContentVariants, stepperDescriptionVariants, stepperIndicatorVariants, stepperLabelVariants, stepperListVariants, stepperRootVariants, stepperStepContainerVariants, toggleSizes, tooltipPositions, useChart, useFocus, useHover, useResponsive, useSidebar, useSplitLayout, useSplitLayoutOptional, useTheme, useWallpaperTint };
+export { AICardGlass, AlertGlass, AlertGlassDescription, AlertGlassTitle, AvatarGlass, AvatarGlassFallback, AvatarGlassImage, AvatarGlassSimple, BadgeGlass, Bar, BarChart, BaseProgressGlass, ButtonGlass, CareerStatsGlass, CareerStatsHeaderGlass, Cell, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, CheckboxGlass, CircularMetricGlass, CircularProgressGlass, ComboBoxGlass, ContributionMetricsGlass, DropdownGlass, DropdownMenuGlass, DropdownMenuGlassCheckboxItem, DropdownMenuGlassContent, DropdownMenuGlassGroup, DropdownMenuGlassItem, DropdownMenuGlassLabel, DropdownMenuGlassPortal, DropdownMenuGlassRadioGroup, DropdownMenuGlassRadioItem, DropdownMenuGlassSeparator, DropdownMenuGlassShortcut, DropdownMenuGlassSub, DropdownMenuGlassSubContent, DropdownMenuGlassSubTrigger, DropdownMenuGlassTrigger, ExpandableHeaderGlass, FlagAlertGlass, FlagsSectionGlass, FormFieldWrapper, GlassCard, HeaderBrandingGlass, HeaderNavGlass, IconButtonGlass, InputGlass, InsightCardGlass, InteractiveCard, LanguageBarGlass, MetricCardGlass, MetricsGridGlass, ModalGlass, NotificationGlass, PopoverGlass, PopoverGlassAnchor, PopoverGlassContent, PopoverGlassLegacy, PopoverGlassTrigger, ProfileAvatarGlass, ProfileHeaderGlass, ProgressGlass, ProjectsListGlass, RainbowProgressGlass, RepositoryCardGlass, RepositoryHeaderGlass, RepositoryMetadataGlass, ResponsiveContainer, SearchBoxGlass, SegmentedControlGlass, SidebarGlass, SkeletonGlass, SliderGlass, SortDropdownGlass, SparklineGlass, SplitLayoutAccordion, SplitLayoutGlass, StatItemGlass, StatusIndicatorGlass, StepperGlass, THEMES, THEME_CONFIG, TabsGlass, ThemeProvider, ThemeToggleGlass, ToggleGlass, TooltipGlass, TooltipGlassContent, TooltipGlassProvider, TooltipGlassSimple, TooltipGlassTrigger, TouchTarget, TrustScoreCardGlass, TrustScoreDisplayGlass, UserInfoGlass, UserStatsLineGlass, YearCardGlass, alertVariants, avatarSizes, badgeVariants, buttonGlassVariants, cardIntensity, cn, dropdownAlign, getNextTheme, getThemeConfig, inputVariants, insightCardVariants, insightVariantConfig, modalSizes, notificationVariants, progressSizes, alertVariants$1 as shadcnAlertVariants, badgeVariants$1 as shadcnBadgeVariants, buttonVariants as shadcnButtonVariants, skeletonVariants, sparklineBarVariants, sparklineContainerVariants, statusSizes, stepperConnectorVariants, stepperContentVariants, stepperDescriptionVariants, stepperIndicatorVariants, stepperLabelVariants, stepperListVariants, stepperRootVariants, stepperStepContainerVariants, toggleSizes, tooltipPositions, useChart, useFocus, useHover, useResponsive, useSidebar, useSplitLayout, useSplitLayoutOptional, useTheme, useWallpaperTint };
 
 //# sourceMappingURL=index.js.map