@aircall/ds 0.11.0 → 0.14.0

package/dist/index.js

@@ -1,12 +1,13 @@
+import * as React from "react";
+import { createContext, useCallback, useContext, useSyncExternalStore } from "react";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 import { ArrowDownToLine, ArrowLeft, ArrowRight, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleAlert, CircleAlertIcon, CircleCheck, FLAGS, FlagUs, Info, Loader2Icon, MinusIcon, MoreHorizontalIcon, PanelLeftIcon, Search, Smile, TriangleAlertIcon, XIcon } from "@aircall/react-icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React$1 from "react";
-import React, { createContext, useContext, useMemo } from "react";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
+import i18next from "i18next";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 import { mergeProps } from "@base-ui/react/merge-props";
@@ -21,6 +22,9 @@ import { Combobox as Combobox$1 } from "@base-ui/react";
 import { Command as Command$1 } from "cmdk";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { checkboxesFeature, hotkeysCoreFeature, selectionFeature, syncDataLoaderFeature } from "@headless-tree/core";
+import { useTree } from "@headless-tree/react";
+import { useControllableState } from "@aircall/hooks";
 import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
@@ -34,7 +38,6 @@ import { Select as Select$1 } from "@base-ui/react/select";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 import { Slider as Slider$1 } from "@base-ui/react/slider";
 import { Toaster as Toaster$1, toast } from "sonner";
-import { useControllableState } from "@aircall/hooks";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
@@ -103,24 +106,32 @@ function cn(...inputs) {
 
 //#endregion
 //#region src/components/accordion.tsx
-function Accordion({ className, ...props }) {
+const Accordion = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Accordion$1.Root, {
+		ref: forwardRef,
 		"data-slot": "accordion",
 		className: cn("flex w-full flex-col", className),
 		...props
 	});
-}
-function AccordionItem({ className, ...props }) {
+});
+Accordion.displayName = "Accordion";
+const AccordionItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Accordion$1.Item, {
+		ref: forwardRef,
 		"data-slot": "accordion-item",
 		className: cn("not-last:border-b", className),
 		...props
 	});
-}
-function AccordionTrigger({ className, children, ...props }) {
+});
+AccordionItem.displayName = "AccordionItem";
+const AccordionTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Accordion$1.Header, {
 		className: "flex",
 		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
+			ref: forwardRef,
 			"data-slot": "accordion-trigger",
 			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
 			...props,
@@ -137,9 +148,12 @@ function AccordionTrigger({ className, children, ...props }) {
 			]
 		})
 	});
-}
-function AccordionContent({ className, children, ...props }) {
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+const AccordionContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Accordion$1.Panel, {
+		ref: forwardRef,
 		"data-slot": "accordion-content",
 		className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
 		...props,
@@ -148,7 +162,8 @@ function AccordionContent({ className, children, ...props }) {
 			children
 		})
 	});
-}
+});
+AccordionContent.displayName = "AccordionContent";
 
 //#endregion
 //#region src/components/button.tsx
@@ -178,7 +193,7 @@ const buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer ite
 		block: false
 	}
 });
-const Button = React$1.forwardRef((componentProps, forwardRef) => {
+const Button = React.forwardRef((componentProps, forwardRef) => {
 	const { className, variant = "default", size = "default", block = false, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Button$1, {
 		ref: forwardRef,
@@ -195,6 +210,194 @@ const Button = React$1.forwardRef((componentProps, forwardRef) => {
 });
 Button.displayName = "Button";
 
+//#endregion
+//#region src/i18n/locales/de.ts
+const de = {
+	"spinner.loading": "Laden",
+	"pagination.label": "Seitennavigation",
+	"pagination.previousPage": "Zur vorherigen Seite",
+	"pagination.nextPage": "Zur nächsten Seite",
+	"dataTable.selectAllRows": "Alle Zeilen auswählen",
+	"dataTable.selectRow": "Zeile auswählen",
+	"tree.collapse": "Minimieren",
+	"tree.expand": "Erweitern",
+	"multiselect.remove": "Entfernen",
+	"multiselect.clearAll": "Alles löschen",
+	"sidebar.toggle": "Seitenleiste umschalten",
+	"drawer.close": "Schließen",
+	"emojiPicker.emoji": "Emoji",
+	"emojiPicker.choose": "Emoji auswählen",
+	"actionBar.selectionActions": "Auswahlaktionen",
+	"pagination.previous": "Zurück",
+	"pagination.next": "Weiter",
+	"actionBar.clearSelection": "Auswahl aufheben",
+	"actionBar.itemsSelected": "{{count}} Elemente ausgewählt."
+};
+var de_default = de;
+
+//#endregion
+//#region src/i18n/locales/en.ts
+const en = {
+	"spinner.loading": "Loading",
+	"pagination.label": "pagination",
+	"pagination.previousPage": "Go to previous page",
+	"pagination.nextPage": "Go to next page",
+	"dataTable.selectAllRows": "Select all rows",
+	"dataTable.selectRow": "Select row",
+	"tree.collapse": "Collapse",
+	"tree.expand": "Expand",
+	"multiselect.remove": "Remove",
+	"multiselect.clearAll": "Clear all",
+	"sidebar.toggle": "Toggle Sidebar",
+	"drawer.close": "Close",
+	"emojiPicker.emoji": "Emoji",
+	"emojiPicker.choose": "Choose an emoji",
+	"actionBar.selectionActions": "Selection actions",
+	"pagination.previous": "Previous",
+	"pagination.next": "Next",
+	"actionBar.clearSelection": "Clear selection",
+	"actionBar.itemsSelected": "{{count}} items selected."
+};
+var en_default = en;
+
+//#endregion
+//#region src/i18n/locales/es.ts
+const es = {
+	"spinner.loading": "Cargando",
+	"pagination.label": "paginación",
+	"pagination.previousPage": "Ir a la página anterior",
+	"pagination.nextPage": "Ir a la página siguiente",
+	"dataTable.selectAllRows": "Seleccionar todas las filas",
+	"dataTable.selectRow": "Seleccionar fila",
+	"tree.collapse": "Minimizar",
+	"tree.expand": "Ampliar",
+	"multiselect.remove": "Eliminar",
+	"multiselect.clearAll": "Borrar todo",
+	"sidebar.toggle": "Alternar barra lateral",
+	"drawer.close": "Cerrar",
+	"emojiPicker.emoji": "Emoji",
+	"emojiPicker.choose": "Elegir un emoji",
+	"actionBar.selectionActions": "Acciones de selección",
+	"pagination.previous": "Anterior",
+	"pagination.next": "Siguiente",
+	"actionBar.clearSelection": "Borrar selección",
+	"actionBar.itemsSelected": "{{count}} elementos seleccionados."
+};
+var es_default = es;
+
+//#endregion
+//#region src/i18n/locales/fr.ts
+const fr = {
+	"spinner.loading": "Chargement",
+	"pagination.label": "pagination",
+	"pagination.previousPage": "Aller à la page précédente",
+	"pagination.nextPage": "Aller à la page suivante",
+	"dataTable.selectAllRows": "Sélectionner toutes les lignes",
+	"dataTable.selectRow": "Sélectionner la ligne",
+	"tree.collapse": "Réduire",
+	"tree.expand": "Développer",
+	"multiselect.remove": "Supprimer",
+	"multiselect.clearAll": "Tout effacer",
+	"sidebar.toggle": "Basculer la barre latérale",
+	"drawer.close": "Fermer",
+	"emojiPicker.emoji": "Émoji",
+	"emojiPicker.choose": "Choisir un émoji",
+	"actionBar.selectionActions": "Actions de sélection",
+	"pagination.previous": "Précédent",
+	"pagination.next": "Suivant",
+	"actionBar.clearSelection": "Effacer la sélection",
+	"actionBar.itemsSelected": "{{count}} éléments sélectionnés."
+};
+var fr_default = fr;
+
+//#endregion
+//#region src/i18n/locales/it.ts
+const it = {
+	"spinner.loading": "Caricamento",
+	"pagination.label": "paginazione",
+	"pagination.nextPage": "Vai alla pagina successiva",
+	"pagination.previousPage": "Vai alla pagina precedente",
+	"dataTable.selectAllRows": "Seleziona tutte le righe",
+	"dataTable.selectRow": "Seleziona riga",
+	"tree.collapse": "Ridurre",
+	"tree.expand": "Espandi",
+	"multiselect.remove": "Rimuovi",
+	"multiselect.clearAll": "Cancella tutto",
+	"sidebar.toggle": "Attiva/disattiva barra laterale",
+	"drawer.close": "Chiudi",
+	"emojiPicker.emoji": "Emoji",
+	"emojiPicker.choose": "Scegli un emoji",
+	"actionBar.selectionActions": "Azioni di selezione",
+	"pagination.previous": "Precedente",
+	"pagination.next": "Successivo",
+	"actionBar.clearSelection": "Cancella selezione",
+	"actionBar.itemsSelected": "{{count}} elementi selezionati."
+};
+var it_default = it;
+
+//#endregion
+//#region src/i18n/instance.ts
+const SUPPORTED_LANGUAGES = [
+	"en",
+	"fr",
+	"es",
+	"de",
+	"it"
+];
+const FALLBACK_LANGUAGE = "en";
+/** Resolve the initial language from the environment, falling back to English. */
+function detectInitialLanguage() {
+	if (typeof navigator === "undefined" || !navigator.language) return FALLBACK_LANGUAGE;
+	const base = navigator.language.split("-")[0];
+	return SUPPORTED_LANGUAGES.includes(base) ? base : FALLBACK_LANGUAGE;
+}
+/** The single private i18next instance owned by @aircall/ds. Isolated from any consumer instance. */
+const dsI18n = i18next.createInstance();
+dsI18n.init({
+	lng: detectInitialLanguage(),
+	fallbackLng: FALLBACK_LANGUAGE,
+	supportedLngs: [...SUPPORTED_LANGUAGES],
+	load: "languageOnly",
+	ns: ["ds"],
+	defaultNS: "ds",
+	resources: {
+		en: { ds: en_default },
+		fr: { ds: fr_default },
+		es: { ds: es_default },
+		de: { ds: de_default },
+		it: { ds: it_default }
+	},
+	interpolation: { escapeValue: false },
+	keySeparator: false,
+	returnNull: false,
+	initImmediate: false
+});
+/** Register an additional namespace's resources into the shared instance (used by @aircall/blocks). */
+function registerI18nNamespace(ns, resources) {
+	for (const [lng, bundle] of Object.entries(resources)) dsI18n.addResourceBundle(lng, ns, bundle, true, true);
+}
+
+//#endregion
+//#region src/i18n/use-ds-translation.ts
+function subscribe(onChange) {
+	dsI18n.on("languageChanged", onChange);
+	return () => dsI18n.off("languageChanged", onChange);
+}
+function getLanguageSnapshot() {
+	return dsI18n.language;
+}
+/**
+* @internal
+* Reads translations from the shared ds instance and re-renders on language change.
+* Used by @aircall/ds and @aircall/blocks components only — not part of the consumer contract.
+*/
+function useDsTranslation(ns) {
+	return useCallback((key, opts) => dsI18n.t(key, {
+		ns,
+		...opts
+	}), [ns, useSyncExternalStore(subscribe, getLanguageSnapshot, getLanguageSnapshot)]);
+}
+
 //#endregion
 //#region src/components/action-bar.tsx
 /** Fixed height of the ActionBar (px). Single source of truth — the bar uses it
@@ -206,22 +409,28 @@ const ActionBarHeight = 48;
 * Explicit `count`/`onClear` props on `ActionBar` always take precedence, so the
 * component still works standalone. Mirrors React Spectrum's `ActionBarContext`.
 */
-const ActionBarContext = React$1.createContext(null);
-const ActionBarButton = React$1.forwardRef(({ size = "default", ...props }, ref) => /* @__PURE__ */ jsx(Button, {
-	ref,
-	variant: "ghost",
-	size,
-	...props
-}));
+const ActionBarContext = React.createContext(null);
+const ActionBarButton = React.forwardRef((componentProps, forwardRef) => {
+	const { size = "default", ...props } = componentProps;
+	return /* @__PURE__ */ jsx(Button, {
+		ref: forwardRef,
+		variant: "ghost",
+		size,
+		...props
+	});
+});
 ActionBarButton.displayName = "ActionBarButton";
-const ActionBar = React$1.forwardRef(({ className, count, onClear, children, label, clearLabel = "Clear selection", style, ...props }, ref) => {
-	const ctx = React$1.useContext(ActionBarContext);
+const ActionBar = React.forwardRef((componentProps, forwardRef) => {
+	const { className, count, onClear, children, label, clearLabel, style, ...props } = componentProps;
+	const t = useDsTranslation("ds");
+	const ctx = React.useContext(ActionBarContext);
 	const resolvedCount = count ?? ctx?.count ?? 0;
 	const resolvedOnClear = onClear ?? ctx?.onClear;
+	const resolvedClearLabel = clearLabel ?? t("actionBar.clearSelection");
 	return /* @__PURE__ */ jsxs("div", {
-		ref,
+		ref: forwardRef,
 		role: "toolbar",
-		"aria-label": "Selection actions",
+		"aria-label": t("actionBar.selectionActions"),
 		"data-slot": "action-bar",
 		className: cn("relative flex w-full items-center gap-2 rounded-md border border-border bg-popover px-2 text-popover-foreground shadow-lg", className),
 		style: {
@@ -233,12 +442,12 @@ const ActionBar = React$1.forwardRef(({ className, count, onClear, children, lab
 			resolvedOnClear ? /* @__PURE__ */ jsx(ActionBarButton, {
 				size: "icon",
 				onClick: resolvedOnClear,
-				"aria-label": clearLabel,
+				"aria-label": resolvedClearLabel,
 				children: /* @__PURE__ */ jsx(XIcon, {})
 			}) : null,
 			/* @__PURE__ */ jsx("span", {
 				className: "flex-1 truncate text-sm",
-				children: label ? label(resolvedCount) : `${resolvedCount} items selected.`
+				children: label ? label(resolvedCount) : t("actionBar.itemsSelected", { count: resolvedCount })
 			}),
 			children ? /* @__PURE__ */ jsx("div", {
 				className: "flex shrink-0 items-center gap-2",
@@ -251,83 +460,112 @@ ActionBar.displayName = "ActionBar";
 
 //#endregion
 //#region src/components/alert-dialog.tsx
-function AlertDialog({ ...props }) {
+function AlertDialog(componentProps) {
 	return /* @__PURE__ */ jsx(AlertDialog$1.Root, {
 		"data-slot": "alert-dialog",
-		...props
+		...componentProps
 	});
 }
-function AlertDialogTrigger({ ...props }) {
+const AlertDialogTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
+		ref: forwardRef,
 		"data-slot": "alert-dialog-trigger",
 		...props
 	});
-}
-function AlertDialogPortal({ ...props }) {
+});
+AlertDialogTrigger.displayName = "AlertDialogTrigger";
+function AlertDialogPortal(componentProps) {
 	return /* @__PURE__ */ jsx(AlertDialog$1.Portal, {
 		"data-slot": "alert-dialog-portal",
-		...props
+		...componentProps
 	});
 }
-function AlertDialogOverlay({ className, ...props }) {
+const AlertDialogOverlay = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
+		ref: forwardRef,
 		"data-slot": "alert-dialog-overlay",
 		className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
 		...props
 	});
-}
-function AlertDialogContent({ className, size = "default", ...props }) {
+});
+AlertDialogOverlay.displayName = "AlertDialogOverlay";
+const AlertDialogContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, size = "default", ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
+		ref: forwardRef,
 		"data-slot": "alert-dialog-content",
 		"data-size": size,
 		className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 		...props
 	})] });
-}
-function AlertDialogHeader({ className, ...props }) {
+});
+AlertDialogContent.displayName = "AlertDialogContent";
+const AlertDialogHeader = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "alert-dialog-header",
 		className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
 		...props
 	});
-}
-function AlertDialogFooter({ className, ...props }) {
+});
+AlertDialogHeader.displayName = "AlertDialogHeader";
+const AlertDialogFooter = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "alert-dialog-footer",
 		className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
 		...props
 	});
-}
-function AlertDialogMedia({ className, ...props }) {
+});
+AlertDialogFooter.displayName = "AlertDialogFooter";
+const AlertDialogMedia = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "alert-dialog-media",
 		className: cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className),
 		...props
 	});
-}
-function AlertDialogTitle({ className, ...props }) {
+});
+AlertDialogMedia.displayName = "AlertDialogMedia";
+const AlertDialogTitle = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
+		ref: forwardRef,
 		"data-slot": "alert-dialog-title",
 		className: cn("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
 		...props
 	});
-}
-function AlertDialogDescription({ className, ...props }) {
+});
+AlertDialogTitle.displayName = "AlertDialogTitle";
+const AlertDialogDescription = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
+		ref: forwardRef,
 		"data-slot": "alert-dialog-description",
 		className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
 		...props
 	});
-}
-function AlertDialogAction({ className, ...props }) {
+});
+AlertDialogDescription.displayName = "AlertDialogDescription";
+const AlertDialogAction = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Button, {
+		ref: forwardRef,
 		"data-slot": "alert-dialog-action",
 		className: cn(className),
 		...props
 	});
-}
-function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
+});
+AlertDialogAction.displayName = "AlertDialogAction";
+const AlertDialogCancel = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant = "outline", size = "default", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
+		ref: forwardRef,
 		"data-slot": "alert-dialog-cancel",
 		className: cn(className),
 		render: /* @__PURE__ */ jsx(Button, {
@@ -336,7 +574,8 @@ function AlertDialogCancel({ className, variant = "outline", size = "default", .
 		}),
 		...props
 	});
-}
+});
+AlertDialogCancel.displayName = "AlertDialogCancel";
 
 //#endregion
 //#region src/components/alert.tsx
@@ -350,41 +589,54 @@ const alertVariants = cva("relative grid w-full items-start gap-x-2 gap-y-0.5 ro
 		warning: "bg-warning-background border-warning/35 [&>svg]:text-warning"
 	} }
 });
-function Alert({ className, variant, ...props }) {
+const Alert = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		className: cn(alertVariants({ variant }), className),
 		"data-slot": "alert",
 		role: "alert",
 		...props
 	});
-}
-function AlertTitle({ className, ...props }) {
+});
+Alert.displayName = "Alert";
+const AlertTitle = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		className: cn("font-medium leading-6 [svg~&]:col-start-2", className),
 		"data-slot": "alert-title",
 		...props
 	});
-}
-function AlertDescription({ className, ...props }) {
+});
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		className: cn("flex flex-col gap-2.5 text-muted-foreground [svg~&]:col-start-2", className),
 		"data-slot": "alert-description",
 		...props
 	});
-}
-function AlertAction({ className, ...props }) {
+});
+AlertDescription.displayName = "AlertDescription";
+const AlertAction = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		className: cn("flex gap-1 max-sm:col-start-2 max-sm:mt-2 sm:row-start-1 sm:row-end-3 sm:self-center sm:[[data-slot=alert-description]~&]:col-start-2 sm:[[data-slot=alert-title]~&]:col-start-2 sm:[svg~&]:col-start-2 sm:[svg~[data-slot=alert-description]~&]:col-start-3 sm:[svg~[data-slot=alert-title]~&]:col-start-3", className),
 		"data-slot": "alert-action",
 		...props
 	});
-}
+});
+AlertAction.displayName = "AlertAction";
 
 //#endregion
 //#region src/components/avatar.tsx
-const Avatar = React$1.forwardRef(({ className, size = "default", ...props }, ref) => {
+const Avatar = React.forwardRef((componentProps, forwardRef) => {
+	const { className, size = "default", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Avatar$1.Root, {
-		ref,
+		ref: forwardRef,
 		"data-slot": "avatar",
 		"data-size": size,
 		className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=xs]:size-5 data-[size=sm]:size-6 data-[size=lg]:size-10 data-[size=xl]:size-12 dark:after:mix-blend-lighten", className),
@@ -392,41 +644,56 @@ const Avatar = React$1.forwardRef(({ className, size = "default", ...props }, re
 	});
 });
 Avatar.displayName = "Avatar";
-function AvatarImage({ className, ...props }) {
+const AvatarImage = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Avatar$1.Image, {
+		ref: forwardRef,
 		"data-slot": "avatar-image",
 		className: cn("aspect-square size-full rounded-full object-cover", className),
 		...props
 	});
-}
-function AvatarFallback({ className, ...props }) {
+});
+AvatarImage.displayName = "AvatarImage";
+const AvatarFallback = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+		ref: forwardRef,
 		"data-slot": "avatar-fallback",
 		className: cn("flex size-full items-center justify-center rounded-full bg-background text-sm text-foreground group-data-[size=xs]/avatar:text-xs group-data-[size=sm]/avatar:text-xs group-data-[size=xl]/avatar:text-base", className),
 		...props
 	});
-}
-function AvatarBadge({ className, ...props }) {
+});
+AvatarFallback.displayName = "AvatarFallback";
+const AvatarBadge = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("span", {
+		ref: forwardRef,
 		"data-slot": "avatar-badge",
 		className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 ring-background select-none", "group-data-[size=xs]/avatar:size-2 group-data-[size=xs]/avatar:[&>svg]:hidden", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", "group-data-[size=xl]/avatar:size-3 group-data-[size=xl]/avatar:[&>svg]:size-2", className),
 		...props
 	});
-}
-function AvatarGroup({ className, ...props }) {
+});
+AvatarBadge.displayName = "AvatarBadge";
+const AvatarGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "avatar-group",
 		className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className),
 		...props
 	});
-}
-function AvatarGroupCount({ className, ...props }) {
+});
+AvatarGroup.displayName = "AvatarGroup";
+const AvatarGroupCount = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "avatar-group-count",
 		className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=xs]/avatar-group:size-5 group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=xl]/avatar-group:size-12 [&>svg]:size-4 group-has-data-[size=xs]/avatar-group:[&>svg]:size-3 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=xl]/avatar-group:[&>svg]:size-6", className),
 		...props
 	});
-}
+});
+AvatarGroupCount.displayName = "AvatarGroupCount";
 
 //#endregion
 //#region src/components/counter-badge.tsx
@@ -438,12 +705,13 @@ const counterBadgeVariants = cva("group/counter-badge inline-flex h-5 min-w-5 sh
 	} },
 	defaultVariants: { variant: "default" }
 });
-const CounterBadge = React$1.forwardRef(({ className, variant = "default", render, ...props }, ref) => {
+const CounterBadge = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant = "default", render, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "span",
 		props: mergeProps({
 			className: cn(counterBadgeVariants({ variant }), className),
-			ref
+			ref: forwardRef
 		}, props),
 		render,
 		state: {
@@ -636,13 +904,13 @@ const badgeVariants = cva("group/badge inline-flex w-fit max-w-36 shrink-0 items
 * `charcoal` / `light` — or pass a stored hex via `legacyColor`. Icons are
 * composed as children (auto-sized per `size`).
 */
-const Badge = React$1.forwardRef((componentProps, forwardRef) => {
+const Badge = React.forwardRef((componentProps, forwardRef) => {
 	const { className, size = "default", color, tone, legacyColor, render, children, ...props } = componentProps;
 	const resolved = legacyColor ? resolveTagColor(legacyColor) : {
 		color,
 		tone
 	};
-	const content = React$1.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx("span", {
+	const content = React.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx("span", {
 		className: "min-w-0 truncate",
 		children: child
 	}) : child);
@@ -665,7 +933,7 @@ const Badge = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 Badge.displayName = "Badge";
-const BadgeGroup = React$1.forwardRef((componentProps, forwardRef) => {
+const BadgeGroup = React.forwardRef((componentProps, forwardRef) => {
 	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
 		ref: forwardRef,
@@ -682,7 +950,7 @@ const badgeGroupCountVariants = cva("rounded-md", {
 	} },
 	defaultVariants: { size: "default" }
 });
-const BadgeGroupCount = React$1.forwardRef((componentProps, forwardRef) => {
+const BadgeGroupCount = React.forwardRef((componentProps, forwardRef) => {
 	const { className, size = "default", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(CounterBadge, {
 		ref: forwardRef,
@@ -775,8 +1043,10 @@ const bannerVariants = cva("relative grid w-full items-start gap-x-2 gap-y-0.5 p
 		}
 	}
 });
-function Banner({ className, variant, borderDirection, ...props }) {
+const Banner = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant, borderDirection, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		className: cn(bannerVariants({
 			variant,
 			borderDirection
@@ -785,7 +1055,8 @@ function Banner({ className, variant, borderDirection, ...props }) {
 		role: "alert",
 		...props
 	});
-}
+});
+Banner.displayName = "Banner";
 
 //#endregion
 //#region src/components/notification-queue.tsx
@@ -796,9 +1067,9 @@ const PRIORITY_WEIGHT = {
 	info: 10,
 	promotional: 1
 };
-const NotificationQueueContext = React$1.createContext(null);
+const NotificationQueueContext = React.createContext(null);
 function useNotificationQueueContext() {
-	const ctx = React$1.useContext(NotificationQueueContext);
+	const ctx = React.useContext(NotificationQueueContext);
 	if (!ctx) throw new Error("useNotification* hooks must be used inside <NotificationQueueProvider>");
 	return ctx;
 }
@@ -851,12 +1122,13 @@ function getSlotQueue(state, slot) {
 		return diff !== 0 ? diff : b.registeredAt - a.registeredAt;
 	});
 }
-function NotificationQueueProvider({ children }) {
-	const [state, dispatch] = React$1.useReducer(reducer, {
+function NotificationQueueProvider(componentProps) {
+	const { children } = componentProps;
+	const [state, dispatch] = React.useReducer(reducer, {
 		entries: [],
 		dismissed: /* @__PURE__ */ new Set()
 	});
-	const value = React$1.useMemo(() => ({
+	const value = React.useMemo(() => ({
 		state,
 		dispatch
 	}), [state]);
@@ -868,7 +1140,7 @@ function NotificationQueueProvider({ children }) {
 function useNotificationQueue() {
 	const { dispatch } = useNotificationQueueContext();
 	return {
-		push: React$1.useCallback(({ id, slot, priority, render }) => {
+		push: React.useCallback(({ id, slot, priority, render }) => {
 			const dismiss = () => dispatch({
 				type: "DISMISS",
 				id,
@@ -886,7 +1158,7 @@ function useNotificationQueue() {
 			});
 			return { dismiss };
 		}, [dispatch]),
-		dismiss: React$1.useCallback((id, slot) => dispatch({
+		dismiss: React.useCallback((id, slot) => dispatch({
 			type: "DISMISS",
 			id,
 			slot
@@ -895,7 +1167,7 @@ function useNotificationQueue() {
 }
 function useNotification({ id, slot, priority, render }) {
 	const { dispatch } = useNotificationQueueContext();
-	const dismiss = React$1.useCallback(() => dispatch({
+	const dismiss = React.useCallback(() => dispatch({
 		type: "DISMISS",
 		id,
 		slot
@@ -904,11 +1176,11 @@ function useNotification({ id, slot, priority, render }) {
 		slot,
 		dispatch
 	]);
-	const renderRef = React$1.useRef(render);
+	const renderRef = React.useRef(render);
 	renderRef.current = render;
-	const contentRef = React$1.useRef(null);
+	const contentRef = React.useRef(null);
 	contentRef.current = renderRef.current({ dismiss });
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		dispatch({
 			type: "REGISTER",
 			entry: {
@@ -932,28 +1204,34 @@ function useNotification({ id, slot, priority, render }) {
 	]);
 	return { dismiss };
 }
-function NotificationSlot({ slot, className }) {
+const NotificationSlot = React.forwardRef((componentProps, forwardRef) => {
+	const { slot, className } = componentProps;
 	const { state } = useNotificationQueueContext();
 	const active = getSlotQueue(state, slot)[0];
 	if (!active) return null;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "notification-slot",
 		className: cn(className),
 		children: active.contentRef.current
 	});
-}
+});
+NotificationSlot.displayName = "NotificationSlot";
 
 //#endregion
 //#region src/components/separator.tsx
-function Separator({ className, orientation = "horizontal", ...props }) {
+const Separator = React.forwardRef((componentProps, forwardRef) => {
+	const { className, orientation = "horizontal", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Separator$1, {
+		ref: forwardRef,
 		"data-slot": "separator",
 		"data-orientation": orientation,
 		orientation,
 		className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", className),
 		...props
 	});
-}
+});
+Separator.displayName = "Separator";
 
 //#endregion
 //#region src/components/button-group.tsx
@@ -964,31 +1242,42 @@ const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relati
 	} },
 	defaultVariants: { orientation: "horizontal" }
 });
-function ButtonGroup({ className, orientation, ...props }) {
+const ButtonGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, orientation, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		role: "group",
 		"data-slot": "button-group",
 		"data-orientation": orientation,
 		className: cn(buttonGroupVariants({ orientation }), className),
 		...props
 	});
-}
-function ButtonGroupText({ className, render, ...props }) {
+});
+ButtonGroup.displayName = "ButtonGroup";
+const ButtonGroupText = React.forwardRef((componentProps, forwardRef) => {
+	const { className, render, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className) }, props),
+		props: mergeProps({
+			className: cn("flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+			ref: forwardRef
+		}, props),
 		render,
 		state: { slot: "button-group-text" }
 	});
-}
-function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
+});
+ButtonGroupText.displayName = "ButtonGroupText";
+const ButtonGroupSeparator = React.forwardRef((componentProps, forwardRef) => {
+	const { className, orientation = "vertical", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Separator, {
+		ref: forwardRef,
 		"data-slot": "button-group-separator",
 		orientation,
 		className: cn("relative self-stretch bg-input data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto", className),
 		...props
 	});
-}
+});
+ButtonGroupSeparator.displayName = "ButtonGroupSeparator";
 
 //#endregion
 //#region src/components/calendar.tsx
@@ -1074,8 +1363,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 }
 function CalendarDayButton({ className: dayClassName, day, modifiers, locale, ...props }) {
 	const defaultClassNames = getDefaultClassNames();
-	const ref = React$1.useRef(null);
-	React$1.useEffect(() => {
+	const ref = React.useRef(null);
+	React.useEffect(() => {
 		if (modifiers.focused) ref.current?.focus();
 	}, [modifiers.focused]);
 	return /* @__PURE__ */ jsx(Button, {
@@ -1094,84 +1383,106 @@ function CalendarDayButton({ className: dayClassName, day, modifiers, locale, ..
 
 //#endregion
 //#region src/components/card.tsx
-function Card({ className, size = "default", ...props }) {
+const Card = React.forwardRef((componentProps, forwardRef) => {
+	const { className, size = "default", ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "card",
 		"data-size": size,
 		className: cn("group/card flex flex-col gap-4 overflow-hidden rounded-xl border bg-card py-4 text-sm text-card-foreground has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
 		...props
 	});
-}
-function CardHeader({ className, ...props }) {
+});
+Card.displayName = "Card";
+const CardHeader = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "card-header",
 		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3", className),
 		...props
 	});
-}
-function CardTitle({ className, ...props }) {
+});
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "card-title",
 		className: cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className),
 		...props
 	});
-}
-function CardDescription({ className, ...props }) {
+});
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "card-description",
 		className: cn("text-sm text-muted-foreground", className),
 		...props
 	});
-}
-function CardAction({ className, ...props }) {
+});
+CardDescription.displayName = "CardDescription";
+const CardAction = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "card-action",
 		className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
 		...props
 	});
-}
-function CardContent({ className, ...props }) {
+});
+CardAction.displayName = "CardAction";
+const CardContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "card-content",
 		className: cn("px-4 group-data-[size=sm]/card:px-3", className),
 		...props
 	});
-}
-function CardFooter({ className, ...props }) {
+});
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "card-footer",
 		className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3", className),
 		...props
 	});
-}
+});
+CardFooter.displayName = "CardFooter";
 
 //#endregion
 //#region src/components/carousel.tsx
-const CarouselContext = React$1.createContext(null);
+const CarouselContext = React.createContext(null);
 function useCarousel() {
-	const context = React$1.useContext(CarouselContext);
+	const context = React.useContext(CarouselContext);
 	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
 	return context;
 }
-function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
+const Carousel = React.forwardRef((componentProps, forwardRef) => {
+	const { orientation = "horizontal", opts, setApi, plugins, className, children, ...props } = componentProps;
 	const [carouselRef, api] = useEmblaCarousel({
 		...opts,
 		axis: orientation === "horizontal" ? "x" : "y"
 	}, plugins);
-	const [canScrollPrev, setCanScrollPrev] = React$1.useState(false);
-	const [canScrollNext, setCanScrollNext] = React$1.useState(false);
-	const onSelect = React$1.useCallback((api$1) => {
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+	const onSelect = React.useCallback((api$1) => {
 		if (!api$1) return;
 		setCanScrollPrev(api$1.canScrollPrev());
 		setCanScrollNext(api$1.canScrollNext());
 	}, []);
-	const scrollPrev = React$1.useCallback(() => {
+	const scrollPrev = React.useCallback(() => {
 		api?.scrollPrev();
 	}, [api]);
-	const scrollNext = React$1.useCallback(() => {
+	const scrollNext = React.useCallback(() => {
 		api?.scrollNext();
 	}, [api]);
-	const handleKeyDown = React$1.useCallback((event) => {
+	const handleKeyDown = React.useCallback((event) => {
 		if (event.key === "ArrowLeft") {
 			event.preventDefault();
 			scrollPrev();
@@ -1180,11 +1491,11 @@ function Carousel({ orientation = "horizontal", opts, setApi, plugins, className
 			scrollNext();
 		}
 	}, [scrollPrev, scrollNext]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (!api || !setApi) return;
 		setApi(api);
 	}, [api, setApi]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (!api) return;
 		onSelect(api);
 		api.on("reInit", onSelect);
@@ -1205,6 +1516,7 @@ function Carousel({ orientation = "horizontal", opts, setApi, plugins, className
 			canScrollNext
 		},
 		children: /* @__PURE__ */ jsx("div", {
+			ref: forwardRef,
 			onKeyDownCapture: handleKeyDown,
 			className: cn("relative", className),
 			role: "region",
@@ -1214,32 +1526,41 @@ function Carousel({ orientation = "horizontal", opts, setApi, plugins, className
 			children
 		})
 	});
-}
-function CarouselContent({ className, ...props }) {
+});
+Carousel.displayName = "Carousel";
+const CarouselContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	const { carouselRef, orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
 		ref: carouselRef,
 		className: "overflow-hidden",
 		"data-slot": "carousel-content",
 		children: /* @__PURE__ */ jsx("div", {
+			ref: forwardRef,
 			className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
 			...props
 		})
 	});
-}
-function CarouselItem({ className, ...props }) {
+});
+CarouselContent.displayName = "CarouselContent";
+const CarouselItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	const { orientation } = useCarousel();
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		role: "group",
 		"aria-roledescription": "slide",
 		"data-slot": "carousel-item",
 		className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
 		...props
 	});
-}
-function CarouselPrevious({ className, variant = "outline", size = "sm", ...props }) {
+});
+CarouselItem.displayName = "CarouselItem";
+const CarouselPrevious = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant = "outline", size = "sm", ...props } = componentProps;
 	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
+		ref: forwardRef,
 		"data-slot": "carousel-previous",
 		variant,
 		size,
@@ -1252,10 +1573,13 @@ function CarouselPrevious({ className, variant = "outline", size = "sm", ...prop
 			children: "Previous slide"
 		})]
 	});
-}
-function CarouselNext({ className, variant = "outline", size = "sm", ...props }) {
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+const CarouselNext = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant = "outline", size = "sm", ...props } = componentProps;
 	const { orientation, scrollNext, canScrollNext } = useCarousel();
 	return /* @__PURE__ */ jsxs(Button, {
+		ref: forwardRef,
 		"data-slot": "carousel-next",
 		variant,
 		size,
@@ -1268,13 +1592,15 @@ function CarouselNext({ className, variant = "outline", size = "sm", ...props })
 			children: "Next slide"
 		})]
 	});
-}
+});
+CarouselNext.displayName = "CarouselNext";
 
 //#endregion
 //#region src/components/checkbox.tsx
-const Checkbox = React$1.forwardRef(({ className, ...props }, ref) => {
+const Checkbox = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
-		ref,
+		ref: forwardRef,
 		"data-slot": "checkbox",
 		className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-[color,box-shadow,opacity] outline-none active:opacity-60 group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 dark:disabled:bg-input/80 aria-invalid:border-destructive focus-visible:aria-invalid:ring-3 focus-visible:aria-invalid:ring-destructive/20 hover:aria-invalid:data-unchecked:bg-destructive-background focus-visible:aria-invalid:data-unchecked:bg-destructive-background dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:focus-visible:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground aria-invalid:data-checked:border-destructive aria-invalid:data-checked:bg-destructive aria-invalid:data-indeterminate:border-destructive aria-invalid:data-indeterminate:bg-destructive dark:data-checked:bg-primary dark:data-indeterminate:bg-primary", className),
 		...props,
@@ -1353,7 +1679,7 @@ const chipGlowVariants = cva("", {
 * inherits the chip's text color and brightens on hover. Exported so the
 * combobox can reuse the exact treatment for its Base-UI-bound chips.
 */
-const ChipRemove = React$1.forwardRef((componentProps, forwardRef) => {
+const ChipRemove = React.forwardRef((componentProps, forwardRef) => {
 	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Button, {
 		ref: forwardRef,
@@ -1373,7 +1699,7 @@ ChipRemove.displayName = "ChipRemove";
 * non-interactive — only the X reacts to hover. For combobox-bound chips that
 * must drive Base UI's selection state, see `ComboboxChip`.
 */
-const Chip = React$1.forwardRef((componentProps, forwardRef) => {
+const Chip = React.forwardRef((componentProps, forwardRef) => {
 	const { className, children, color, tone, legacyColor, glow, ...props } = componentProps;
 	const glowColor = legacyColor ? resolveTagColor(legacyColor).color : color;
 	return /* @__PURE__ */ jsx(Badge, {
@@ -1395,8 +1721,10 @@ Chip.displayName = "Chip";
 
 //#endregion
 //#region src/components/scroll-area.tsx
-function ScrollArea({ className, children, scrollFade = false, scrollbarGutter = false, ...props }) {
+const ScrollArea = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, scrollFade = false, scrollbarGutter = false, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+		ref: forwardRef,
 		className: cn("size-full min-h-0", className),
 		...props,
 		children: [
@@ -1410,9 +1738,12 @@ function ScrollArea({ className, children, scrollFade = false, scrollbarGutter =
 			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, { "data-slot": "scroll-area-corner" })
 		]
 	});
-}
-function ScrollBar({ className, orientation = "vertical", ...props }) {
+});
+ScrollArea.displayName = "ScrollArea";
+const ScrollBar = React.forwardRef((componentProps, forwardRef) => {
+	const { className, orientation = "vertical", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, {
+		ref: forwardRef,
 		className: cn("m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100", className),
 		"data-slot": "scroll-area-scrollbar",
 		orientation,
@@ -1422,7 +1753,8 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 			"data-slot": "scroll-area-thumb"
 		})
 	});
-}
+});
+ScrollBar.displayName = "ScrollBar";
 
 //#endregion
 //#region src/components/filter.tsx
@@ -1434,7 +1766,7 @@ function ScrollBar({ className, orientation = "vertical", ...props }) {
 * `max-w-36` (144px). Compose inside a `FilterGroup` with a trailing
 * `FilterClearAllButton` (see the FilterBar story).
 */
-const Filter = React$1.forwardRef((componentProps, forwardRef) => {
+const Filter = React.forwardRef((componentProps, forwardRef) => {
 	const { className, children, onRemove, removeLabel = "Remove filter" } = componentProps;
 	return /* @__PURE__ */ jsxs(Chip, {
 		ref: forwardRef,
@@ -1454,7 +1786,7 @@ Filter.displayName = "Filter";
 * horizontal `ScrollArea` (inset scroll + edge fade) — it does not wrap onto
 * multiple lines.
 */
-const FilterGroup = React$1.forwardRef((componentProps, forwardRef) => {
+const FilterGroup = React.forwardRef((componentProps, forwardRef) => {
 	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "filter-group",
@@ -1478,7 +1810,7 @@ FilterGroup.displayName = "FilterGroup";
 * small `Button` with the styling pinned. Provide `onClick`; the label
 * defaults to "Clear all filters" (pass translated `children` to override).
 */
-const FilterClearAllButton = React$1.forwardRef((componentProps, forwardRef) => {
+const FilterClearAllButton = React.forwardRef((componentProps, forwardRef) => {
 	const { className, children = "Clear all filters", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Button, {
 		ref: forwardRef,
@@ -1495,29 +1827,36 @@ FilterClearAllButton.displayName = "FilterClearAllButton";
 
 //#endregion
 //#region src/components/collapsible.tsx
-function Collapsible({ ...props }) {
+const Collapsible = React.forwardRef((componentProps, forwardRef) => {
 	return /* @__PURE__ */ jsx(Collapsible$1.Root, {
+		ref: forwardRef,
 		"data-slot": "collapsible",
-		...props
+		...componentProps
 	});
-}
-function CollapsibleTrigger({ ...props }) {
+});
+Collapsible.displayName = "Collapsible";
+const CollapsibleTrigger = React.forwardRef((componentProps, forwardRef) => {
 	return /* @__PURE__ */ jsx(Collapsible$1.Trigger, {
+		ref: forwardRef,
 		"data-slot": "collapsible-trigger",
-		...props
+		...componentProps
 	});
-}
-function CollapsibleContent({ ...props }) {
+});
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+const CollapsibleContent = React.forwardRef((componentProps, forwardRef) => {
 	return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
+		ref: forwardRef,
 		"data-slot": "collapsible-content",
-		...props
+		...componentProps
 	});
-}
+});
+CollapsibleContent.displayName = "CollapsibleContent";
 
 //#endregion
 //#region src/components/input.tsx
 const inputVariants = cva("text-foreground file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 border-input flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium hover:border-ring hover:aria-invalid:border-destructive disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 dark:disabled:bg-input/80 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:border-destructive focus-visible:aria-invalid:ring-destructive/20 focus-visible:aria-invalid:ring-3 dark:focus-visible:aria-invalid:ring-destructive/40", { variants: { block: { true: "w-full" } } });
-const Input = React$1.forwardRef(({ className, type, block, ...props }, forwardedRef) => {
+const Input = React.forwardRef((componentProps, forwardRef) => {
+	const { className, type, block, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("input", {
 		type,
 		"data-slot": "input",
@@ -1526,29 +1865,36 @@ const Input = React$1.forwardRef(({ className, type, block, ...props }, forwarde
 			className
 		})),
 		...props,
-		ref: forwardedRef
+		ref: forwardRef
 	});
 });
+Input.displayName = "Input";
 
 //#endregion
 //#region src/components/textarea.tsx
-function Textarea({ className, ...props }) {
+const Textarea = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("textarea", {
+		ref: forwardRef,
 		"data-slot": "textarea",
 		className: cn("border-input placeholder:text-muted-foreground hover:border-ring hover:aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:border-destructive focus-visible:aria-invalid:ring-destructive/20 focus-visible:aria-invalid:ring-3 dark:focus-visible:aria-invalid:ring-destructive/40 dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 dark:disabled:bg-input/80 md:text-sm", className),
 		...props
 	});
-}
+});
+Textarea.displayName = "Textarea";
 
 //#endregion
 //#region src/components/input-group.tsx
-const InputGroup = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
-	ref,
-	"data-slot": "input-group",
-	role: "group",
-	className: cn("group/input-group border-input dark:bg-input/30 relative flex h-10 w-full items-center rounded-md border transition-[color,box-shadow] outline-none has-[>textarea]:h-auto", "not-has-[input:disabled]:not-has-[textarea:disabled]:not-has-[[data-slot][aria-invalid=true]]:hover:border-ring", "has-[input:disabled]:bg-input/50 has-[textarea:disabled]:bg-input/50 has-[input:disabled]:opacity-50 has-[textarea:disabled]:opacity-50 dark:has-[input:disabled]:bg-input/80 dark:has-[textarea:disabled]:bg-input/80", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-3", "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]:focus-visible]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]:focus-visible]:ring-destructive/40", className),
-	...props
-}));
+const InputGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
+		"data-slot": "input-group",
+		role: "group",
+		className: cn("group/input-group border-input dark:bg-input/30 relative flex h-10 w-full items-center rounded-md border transition-[color,box-shadow] outline-none has-[>textarea]:h-auto", "not-has-[input:disabled]:not-has-[textarea:disabled]:not-has-[[data-slot][aria-invalid=true]]:hover:border-ring", "has-[input:disabled]:bg-input/50 has-[textarea:disabled]:bg-input/50 has-[input:disabled]:opacity-50 has-[textarea:disabled]:opacity-50 dark:has-[input:disabled]:bg-input/80 dark:has-[textarea:disabled]:bg-input/80", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-3", "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]:focus-visible]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]:focus-visible]:ring-destructive/40", className),
+		...props
+	});
+});
 InputGroup.displayName = "InputGroup";
 const inputGroupAddonVariants = cva("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", {
 	variants: { align: {
@@ -1559,8 +1905,10 @@ const inputGroupAddonVariants = cva("text-muted-foreground flex h-auto cursor-te
 	} },
 	defaultVariants: { align: "inline-start" }
 });
-function InputGroupAddon({ className, align = "inline-start", ...props }) {
+const InputGroupAddon = React.forwardRef((componentProps, forwardRef) => {
+	const { className, align = "inline-start", ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		role: "group",
 		"data-slot": "input-group-addon",
 		"data-align": align,
@@ -1571,10 +1919,12 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 		},
 		...props
 	});
-}
-const InputGroupButton = React$1.forwardRef(({ className, type = "button", variant = "ghost", size = "sm", ...props }, ref) => {
+});
+InputGroupAddon.displayName = "InputGroupAddon";
+const InputGroupButton = React.forwardRef((componentProps, forwardRef) => {
+	const { className, type = "button", variant = "ghost", size = "sm", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Button, {
-		ref,
+		ref: forwardRef,
 		type,
 		variant,
 		size,
@@ -1583,27 +1933,35 @@ const InputGroupButton = React$1.forwardRef(({ className, type = "button", varia
 	});
 });
 InputGroupButton.displayName = "InputGroupButton";
-function InputGroupText({ className, ...props }) {
+const InputGroupText = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("span", {
+		ref: forwardRef,
 		className: cn("text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
-}
-const InputGroupInput = React$1.forwardRef(({ className, ...props }, forwardedRef) => {
+});
+InputGroupText.displayName = "InputGroupText";
+const InputGroupInput = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Input, {
 		"data-slot": "input-group-control",
 		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 aria-invalid:ring-0 focus-visible:aria-invalid:!ring-0 disabled:bg-transparent disabled:opacity-100 dark:bg-transparent dark:disabled:bg-transparent", className),
 		...props,
-		ref: forwardedRef
+		ref: forwardRef
 	});
 });
-function InputGroupTextarea({ className, ...props }) {
+InputGroupInput.displayName = "InputGroupInput";
+const InputGroupTextarea = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Textarea, {
+		ref: forwardRef,
 		"data-slot": "input-group-control",
 		className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", className),
 		...props
 	});
-}
+});
+InputGroupTextarea.displayName = "InputGroupTextarea";
 
 //#endregion
 //#region src/components/combobox.tsx
@@ -1614,7 +1972,7 @@ function ComboboxValue(componentProps) {
 		...componentProps
 	});
 }
-const ComboboxTrigger = React$1.forwardRef((componentProps, forwardRef) => {
+const ComboboxTrigger = React.forwardRef((componentProps, forwardRef) => {
 	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Combobox$1.Trigger, {
 		ref: forwardRef,
@@ -1625,7 +1983,7 @@ const ComboboxTrigger = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 ComboboxTrigger.displayName = "ComboboxTrigger";
-const ComboboxClear = React$1.forwardRef((componentProps, forwardRef) => {
+const ComboboxClear = React.forwardRef((componentProps, forwardRef) => {
 	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Clear, {
 		ref: forwardRef,
@@ -1640,7 +1998,7 @@ const ComboboxClear = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 ComboboxClear.displayName = "ComboboxClear";
-const ComboboxInput = React$1.forwardRef((componentProps, forwardRef) => {
+const ComboboxInput = React.forwardRef((componentProps, forwardRef) => {
 	const { className, children, disabled = false, showTrigger = true, showClear = false, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(InputGroup, {
 		ref: forwardRef,
@@ -1666,7 +2024,7 @@ const ComboboxInput = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 ComboboxInput.displayName = "ComboboxInput";
-const ComboboxContent = React$1.forwardRef((componentProps, forwardRef) => {
+const ComboboxContent = React.forwardRef((componentProps, forwardRef) => {
 	const { className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
 		side,
@@ -1685,7 +2043,7 @@ const ComboboxContent = React$1.forwardRef((componentProps, forwardRef) => {
 	}) });
 });
 ComboboxContent.displayName = "ComboboxContent";
-const ComboboxList = React$1.forwardRef((componentProps, forwardRef) => {
+const ComboboxList = React.forwardRef((componentProps, forwardRef) => {
 	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.List, {
 		ref: forwardRef,
@@ -1695,7 +2053,7 @@ const ComboboxList = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 ComboboxList.displayName = "ComboboxList";
-const ComboboxItem = React$1.forwardRef((componentProps, forwardRef) => {
+const ComboboxItem = React.forwardRef((componentProps, forwardRef) => {
 	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Combobox$1.Item, {
 		ref: forwardRef,
@@ -1710,7 +2068,7 @@ const ComboboxItem = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 ComboboxItem.displayName = "ComboboxItem";
-const ComboboxGroup = React$1.forwardRef((componentProps, forwardRef) => {
+const ComboboxGroup = React.forwardRef((componentProps, forwardRef) => {
 	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Group, {
 		ref: forwardRef,
@@ -1720,7 +2078,7 @@ const ComboboxGroup = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 ComboboxGroup.displayName = "ComboboxGroup";
-const ComboboxLabel = React$1.forwardRef((componentProps, forwardRef) => {
+const ComboboxLabel = React.forwardRef((componentProps, forwardRef) => {
 	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
 		ref: forwardRef,
@@ -1736,7 +2094,7 @@ function ComboboxCollection(componentProps) {
 		...componentProps
 	});
 }
-const ComboboxEmpty = React$1.forwardRef((componentProps, forwardRef) => {
+const ComboboxEmpty = React.forwardRef((componentProps, forwardRef) => {
 	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
 		ref: forwardRef,
@@ -1746,7 +2104,7 @@ const ComboboxEmpty = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 ComboboxEmpty.displayName = "ComboboxEmpty";
-const ComboboxSeparator = React$1.forwardRef((componentProps, forwardRef) => {
+const ComboboxSeparator = React.forwardRef((componentProps, forwardRef) => {
 	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Separator, {
 		ref: forwardRef,
@@ -1756,7 +2114,7 @@ const ComboboxSeparator = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 ComboboxSeparator.displayName = "ComboboxSeparator";
-const ComboboxChips = React$1.forwardRef((componentProps, forwardRef) => {
+const ComboboxChips = React.forwardRef((componentProps, forwardRef) => {
 	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Chips, {
 		ref: forwardRef,
@@ -1766,7 +2124,7 @@ const ComboboxChips = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 ComboboxChips.displayName = "ComboboxChips";
-const ComboboxChip = React$1.forwardRef(function ComboboxChip(componentProps, forwardRef) {
+const ComboboxChip = React.forwardRef(function ComboboxChip(componentProps, forwardRef) {
 	const { className, children, showRemove = true, color, tone, legacyColor, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Combobox$1.Chip, {
 		ref: forwardRef,
@@ -1780,7 +2138,7 @@ const ComboboxChip = React$1.forwardRef(function ComboboxChip(componentProps, fo
 		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox$1.ChipRemove, { render: /* @__PURE__ */ jsx(ChipRemove, {}) })]
 	});
 });
-const ComboboxChipsInput = React$1.forwardRef(function ComboboxChipsInput(componentProps, forwardRef) {
+const ComboboxChipsInput = React.forwardRef(function ComboboxChipsInput(componentProps, forwardRef) {
 	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Input, {
 		ref: forwardRef,
@@ -1791,44 +2149,55 @@ const ComboboxChipsInput = React$1.forwardRef(function ComboboxChipsInput(compon
 });
 ComboboxChipsInput.displayName = "ComboboxChipsInput";
 function useComboboxAnchor() {
-	return React$1.useRef(null);
+	return React.useRef(null);
 }
 
 //#endregion
 //#region src/components/dialog.tsx
-function Dialog({ ...props }) {
+function Dialog(componentProps) {
 	return /* @__PURE__ */ jsx(Dialog$1.Root, {
 		"data-slot": "dialog",
-		...props
+		...componentProps
 	});
 }
-function DialogTrigger({ ...props }) {
+const DialogTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		ref: forwardRef,
 		"data-slot": "dialog-trigger",
 		...props
 	});
-}
-function DialogPortal({ ...props }) {
+});
+DialogTrigger.displayName = "DialogTrigger";
+function DialogPortal(componentProps) {
 	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
 		"data-slot": "dialog-portal",
-		...props
+		...componentProps
 	});
 }
-function DialogClose({ ...props }) {
+const DialogClose = React.forwardRef((componentProps, forwardRef) => {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		ref: forwardRef,
 		"data-slot": "dialog-close",
 		...props
 	});
-}
-function DialogOverlay({ className, ...props }) {
+});
+DialogClose.displayName = "DialogClose";
+const DialogOverlay = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		ref: forwardRef,
 		"data-slot": "dialog-overlay",
 		className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
 		...props
 	});
-}
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
+});
+DialogOverlay.displayName = "DialogOverlay";
+const DialogContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, showCloseButton = true, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
+		ref: forwardRef,
 		"data-slot": "dialog-content",
 		className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl ring-1 ring-foreground/10 bg-background px-6 py-4 text-sm duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 		...props,
@@ -1845,16 +2214,22 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 			})]
 		})]
 	})] });
-}
-function DialogHeader({ className, ...props }) {
+});
+DialogContent.displayName = "DialogContent";
+const DialogHeader = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dialog-header",
 		className: cn("flex flex-col gap-2", className),
 		...props
 	});
-}
-function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+});
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = React.forwardRef((componentProps, forwardRef) => {
+	const { className, showCloseButton = false, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs("div", {
+		ref: forwardRef,
 		"data-slot": "dialog-footer",
 		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
 		...props,
@@ -1863,32 +2238,43 @@ function DialogFooter({ className, showCloseButton = false, children, ...props }
 			children: "Close"
 		})]
 	});
-}
-function DialogTitle({ className, ...props }) {
+});
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		ref: forwardRef,
 		"data-slot": "dialog-title",
 		className: cn("text-lg font-bold leading-normal", className),
 		...props
 	});
-}
-function DialogDescription({ className, ...props }) {
+});
+DialogTitle.displayName = "DialogTitle";
+const DialogDescription = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		ref: forwardRef,
 		"data-slot": "dialog-description",
 		className: cn("text-sm leading-normal text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
 		...props
 	});
-}
+});
+DialogDescription.displayName = "DialogDescription";
 
 //#endregion
 //#region src/components/command.tsx
-function Command({ className, ...props }) {
+const Command = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Command$1, {
+		ref: forwardRef,
 		"data-slot": "command",
 		className: cn("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className),
 		...props
 	});
-}
-function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, ...props }) {
+});
+Command.displayName = "Command";
+function CommandDialog(componentProps) {
+	const { title = "Command Palette", description = "Search for a command to run...", children, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Dialog, {
 		...props,
 		children: [/* @__PURE__ */ jsxs(DialogHeader, {
@@ -1903,59 +2289,80 @@ function CommandDialog({ title = "Command Palette", description = "Search for a
 		})]
 	});
 }
-function CommandInput({ className, ...props }) {
+const CommandInput = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "command-input-wrapper",
 		className: "flex h-9 items-center gap-2 border-b px-3",
 		children: [/* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
+			ref: forwardRef,
 			"data-slot": "command-input",
 			className: cn("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
 			...props
 		})]
 	});
-}
-function CommandList({ className, ...props }) {
+});
+CommandInput.displayName = "CommandInput";
+const CommandList = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Command$1.List, {
+		ref: forwardRef,
 		"data-slot": "command-list",
 		className: cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
 		...props
 	});
-}
-function CommandEmpty({ ...props }) {
+});
+CommandList.displayName = "CommandList";
+const CommandEmpty = React.forwardRef((componentProps, forwardRef) => {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Command$1.Empty, {
+		ref: forwardRef,
 		"data-slot": "command-empty",
 		className: "py-6 text-center text-sm",
 		...props
 	});
-}
-function CommandGroup({ className, ...props }) {
+});
+CommandEmpty.displayName = "CommandEmpty";
+const CommandGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Command$1.Group, {
+		ref: forwardRef,
 		"data-slot": "command-group",
 		className: cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className),
 		...props
 	});
-}
-function CommandSeparator({ className, ...props }) {
+});
+CommandGroup.displayName = "CommandGroup";
+const CommandSeparator = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Command$1.Separator, {
+		ref: forwardRef,
 		"data-slot": "command-separator",
 		className: cn("bg-border -mx-1 h-px", className),
 		...props
 	});
-}
-function CommandItem({ className, ...props }) {
+});
+CommandSeparator.displayName = "CommandSeparator";
+const CommandItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Command$1.Item, {
+		ref: forwardRef,
 		"data-slot": "command-item",
 		className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
-}
-function CommandShortcut({ className, ...props }) {
+});
+CommandItem.displayName = "CommandItem";
+const CommandShortcut = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("span", {
+		ref: forwardRef,
 		"data-slot": "command-shortcut",
 		className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
 		...props
 	});
-}
+});
+CommandShortcut.displayName = "CommandShortcut";
 
 //#endregion
 //#region src/components/country-flag.tsx
@@ -1965,22 +2372,28 @@ const sizeMap = {
 	lg: "size-5",
 	xl: "size-6"
 };
-const CountryFlag = ({ countryIsoCode, size = "xl", className, ...otherProps }) => {
+const CountryFlag = React.forwardRef((componentProps, forwardRef) => {
+	const { countryIsoCode, size = "xl", className, ...otherProps } = componentProps;
 	return /* @__PURE__ */ jsx(FLAGS[countryIsoCode.toLowerCase()] ?? FlagUs, {
+		ref: forwardRef,
 		className: cn("flex-none", sizeMap[size], className),
 		...otherProps
 	});
-};
+});
+CountryFlag.displayName = "CountryFlag";
 
 //#endregion
 //#region src/components/skeleton.tsx
-function Skeleton({ className, ...props }) {
+const Skeleton = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "skeleton",
 		className: cn("animate-pulse rounded-md bg-muted", className),
 		...props
 	});
-}
+});
+Skeleton.displayName = "Skeleton";
 
 //#endregion
 //#region src/components/spinner.tsx
@@ -1993,81 +2406,107 @@ const spinnerVariants = cva("animate-spin text-current", {
 	} },
 	defaultVariants: { size: "default" }
 });
-function Spinner({ className, size, ...props }) {
+const Spinner = React.forwardRef((componentProps, forwardRef) => {
+	const { className, size, ...props } = componentProps;
+	const t = useDsTranslation("ds");
 	return /* @__PURE__ */ jsx(Loader2Icon, {
+		ref: forwardRef,
 		"data-slot": "spinner",
 		role: "status",
-		"aria-label": "Loading",
+		"aria-label": t("spinner.loading"),
 		className: cn(spinnerVariants({ size }), className),
 		...props
 	});
-}
+});
+Spinner.displayName = "Spinner";
 
 //#endregion
 //#region src/components/table.tsx
-const Table = React$1.forwardRef(({ className, containerClassName, containerStyle, ...props }, ref) => /* @__PURE__ */ jsx("div", {
-	"data-slot": "table-container",
-	style: containerStyle,
-	className: cn("relative w-full overflow-x-auto rounded-lg border border-border", containerClassName),
-	children: /* @__PURE__ */ jsx("table", {
-		ref,
-		"data-slot": "table",
-		className: cn("w-full caption-bottom text-sm [&_tbody_tr:last-child]:border-b-0", className),
-		...props
-	})
-}));
+const Table = React.forwardRef((componentProps, forwardRef) => {
+	const { className, containerClassName, containerStyle, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-container",
+		style: containerStyle,
+		className: cn("relative w-full overflow-x-auto rounded-lg border border-border", containerClassName),
+		children: /* @__PURE__ */ jsx("table", {
+			ref: forwardRef,
+			"data-slot": "table",
+			className: cn("w-full caption-bottom text-sm [&_tbody_tr:last-child]:border-b-0", className),
+			...props
+		})
+	});
+});
 Table.displayName = "Table";
-const TableHeader = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", {
-	ref,
-	"data-slot": "table-header",
-	className: cn("[&_tr]:border-b [&_tr]:hover:bg-transparent", className),
-	...props
-}));
+const TableHeader = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("thead", {
+		ref: forwardRef,
+		"data-slot": "table-header",
+		className: cn("[&_tr]:border-b [&_tr]:hover:bg-transparent", className),
+		...props
+	});
+});
 TableHeader.displayName = "TableHeader";
-const TableBody = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", {
-	ref,
-	"data-slot": "table-body",
-	className: cn("[&_tr:last-child]:border-0", className),
-	...props
-}));
+const TableBody = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("tbody", {
+		ref: forwardRef,
+		"data-slot": "table-body",
+		className: cn("[&_tr:last-child]:border-0", className),
+		...props
+	});
+});
 TableBody.displayName = "TableBody";
-const TableFooter = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", {
-	ref,
-	"data-slot": "table-footer",
-	className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0 [&>tr]:hover:bg-transparent", className),
-	...props
-}));
+const TableFooter = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("tfoot", {
+		ref: forwardRef,
+		"data-slot": "table-footer",
+		className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0 [&>tr]:hover:bg-transparent", className),
+		...props
+	});
+});
 TableFooter.displayName = "TableFooter";
-const TableRow = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", {
-	ref,
-	"data-slot": "table-row",
-	className: cn("border-b transition-colors hover:bg-accent/30 data-[state=selected]:bg-accent/50", className),
-	...props
-}));
+const TableRow = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("tr", {
+		ref: forwardRef,
+		"data-slot": "table-row",
+		className: cn("border-b transition-colors hover:bg-accent/30 data-[state=selected]:bg-accent/50", className),
+		...props
+	});
+});
 TableRow.displayName = "TableRow";
-const TableHead = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("th", {
-	ref,
-	"data-slot": "table-head",
-	className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className),
-	...props
-}));
+const TableHead = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("th", {
+		ref: forwardRef,
+		"data-slot": "table-head",
+		className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0", className),
+		...props
+	});
+});
 TableHead.displayName = "TableHead";
-const TableCell = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("td", {
-	ref,
-	"data-slot": "table-cell",
-	className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className),
-	...props
-}));
+const TableCell = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("td", {
+		ref: forwardRef,
+		"data-slot": "table-cell",
+		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className),
+		...props
+	});
+});
 TableCell.displayName = "TableCell";
 
 //#endregion
 //#region src/components/data-table.tsx
 const SELECT_COLUMN_ID = "__select";
 const DEFAULT_SKELETON_COUNT = 5;
-function DataTable({ columns, data, getRowId, loadingState = "idle", skeletonCount = DEFAULT_SKELETON_COUNT, emptyState, sorting, onSortingChange, enableRowSelection, rowSelection, onRowSelectionChange, actionBar, onFetchMore, hasMore = false, enableColumnResizing = false, fillHeight = false, onRowClick, className }) {
+function DataTable(componentProps) {
+	const { columns, data, getRowId, loadingState = "idle", skeletonCount = DEFAULT_SKELETON_COUNT, emptyState, sorting, onSortingChange, enableRowSelection, rowSelection, onRowSelectionChange, actionBar, onFetchMore, hasMore = false, enableColumnResizing = false, fillHeight = false, onRowClick, className } = componentProps;
 	const sortingEnabled = !!onSortingChange;
 	const selectionEnabled = !!enableRowSelection;
-	const finalColumns = React$1.useMemo(() => {
+	const finalColumns = React.useMemo(() => {
 		if (!selectionEnabled) return columns;
 		return [makeSelectColumn(), ...columns];
 	}, [columns, selectionEnabled]);
@@ -2201,29 +2640,35 @@ function DataTable({ columns, data, getRowId, loadingState = "idle", skeletonCou
 		]
 	});
 }
+function SelectAllHeader({ table }) {
+	const t = useDsTranslation("ds");
+	const allSelected = table.getIsAllRowsSelected();
+	const someSelected = table.getIsSomeRowsSelected();
+	return /* @__PURE__ */ jsx(Checkbox, {
+		checked: allSelected,
+		indeterminate: !allSelected && someSelected,
+		onCheckedChange: (value) => table.toggleAllRowsSelected(value === true),
+		"aria-label": t("dataTable.selectAllRows")
+	});
+}
+function SelectRowCell({ row }) {
+	const t = useDsTranslation("ds");
+	return /* @__PURE__ */ jsx("span", {
+		className: "contents",
+		onClick: (e) => e.stopPropagation(),
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			checked: row.getIsSelected(),
+			disabled: !row.getCanSelect(),
+			onCheckedChange: (value) => row.toggleSelected(value === true),
+			"aria-label": t("dataTable.selectRow")
+		})
+	});
+}
 function makeSelectColumn() {
 	return {
 		id: SELECT_COLUMN_ID,
-		header: ({ table }) => {
-			const allSelected = table.getIsAllRowsSelected();
-			const someSelected = table.getIsSomeRowsSelected();
-			return /* @__PURE__ */ jsx(Checkbox, {
-				checked: allSelected,
-				indeterminate: !allSelected && someSelected,
-				onCheckedChange: (value) => table.toggleAllRowsSelected(value === true),
-				"aria-label": "Select all rows"
-			});
-		},
-		cell: ({ row }) => /* @__PURE__ */ jsx("span", {
-			className: "contents",
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ jsx(Checkbox, {
-				checked: row.getIsSelected(),
-				disabled: !row.getCanSelect(),
-				onCheckedChange: (value) => row.toggleSelected(value === true),
-				"aria-label": "Select row"
-			})
-		}),
+		header: ({ table }) => /* @__PURE__ */ jsx(SelectAllHeader, { table }),
+		cell: ({ row }) => /* @__PURE__ */ jsx(SelectRowCell, { row }),
 		enableSorting: false,
 		enableHiding: false,
 		enableResizing: false,
@@ -2268,12 +2713,12 @@ function SkeletonRows({ columns, count }) {
 * page never triggers duplicate fetches; the sentinel remounts for the next page.
 */
 function useFetchMoreSentinel(onFetchMore, fillHeight, resetKey) {
-	const onFetchMoreRef = React$1.useRef(onFetchMore);
+	const onFetchMoreRef = React.useRef(onFetchMore);
 	onFetchMoreRef.current = onFetchMore;
-	const observerRef = React$1.useRef(null);
-	const nodeRef = React$1.useRef(null);
-	const armedRef = React$1.useRef(true);
-	const observe = React$1.useCallback(() => {
+	const observerRef = React.useRef(null);
+	const nodeRef = React.useRef(null);
+	const armedRef = React.useRef(true);
+	const observe = React.useCallback(() => {
 		observerRef.current?.disconnect();
 		observerRef.current = null;
 		const node = nodeRef.current;
@@ -2293,16 +2738,270 @@ function useFetchMoreSentinel(onFetchMore, fillHeight, resetKey) {
 		observer.observe(node);
 		observerRef.current = observer;
 	}, [fillHeight]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		armedRef.current = true;
 		observe();
 	}, [resetKey, observe]);
-	return React$1.useCallback((node) => {
+	return React.useCallback((node) => {
 		nodeRef.current = node;
 		observe();
 	}, [observe]);
 }
 
+//#endregion
+//#region src/components/tree.tsx
+const TreeContext = React.createContext({
+	currentItem: void 0,
+	indent: 20,
+	tree: void 0
+});
+function useTreeContext() {
+	return React.useContext(TreeContext);
+}
+function Tree({ indent = 20, tree, className, ...props }) {
+	const containerProps = tree && typeof tree.getContainerProps === "function" ? tree.getContainerProps() : {};
+	const { style: propStyle, ...otherProps } = {
+		...props,
+		...containerProps
+	};
+	const mergedStyle = {
+		...propStyle,
+		"--tree-indent": `${indent}px`
+	};
+	return /* @__PURE__ */ jsx(TreeContext.Provider, {
+		value: {
+			indent,
+			tree
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex flex-col", className),
+			"data-slot": "tree",
+			style: mergedStyle,
+			...otherProps
+		})
+	});
+}
+const ACTIVATION_KEYS = new Set([
+	"Enter",
+	" ",
+	"Spacebar"
+]);
+function TreeItem({ item, className, children, onActivate, onClick: userOnClick, onKeyDown: userOnKeyDown, style: userStyle, ...props }) {
+	const { indent } = useTreeContext();
+	const { style: itemStyle, onClick: _headlessOnClick, ...restItemProps } = typeof item.getProps === "function" ? item.getProps() : {};
+	const activate = () => {
+		if (typeof item.setFocused === "function") item.setFocused();
+		if (onActivate) onActivate(item);
+		else {
+			if (typeof item.primaryAction === "function") item.primaryAction();
+			if (typeof item.isFolder === "function" && item.isFolder()) item.isExpanded() ? item.collapse() : item.expand();
+		}
+	};
+	const handleClick = (event) => {
+		userOnClick?.(event);
+		if (event.defaultPrevented) return;
+		if (event.target.closest("button, [role=\"checkbox\"], input, a")) return;
+		activate();
+	};
+	const handleKeyDown = (event) => {
+		userOnKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.target !== event.currentTarget) return;
+		if (ACTIVATION_KEYS.has(event.key)) {
+			event.preventDefault();
+			activate();
+		}
+	};
+	const mergedStyle = {
+		...userStyle,
+		...itemStyle,
+		"--tree-padding": `${item.getItemMeta().level * indent}px`
+	};
+	return /* @__PURE__ */ jsx(TreeContext.Provider, {
+		value: {
+			currentItem: item,
+			indent
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			role: "treeitem",
+			className: cn("relative z-10 flex w-full cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1.5 text-start text-sm transition-colors not-last:mb-0.5 outline-hidden select-none hover:bg-accent/50 focus:z-20 focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[drag-target=true]:bg-accent data-[search-match=true]:bg-blue-400/20! data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+			"data-drag-target": typeof item.isDragTarget === "function" ? item.isDragTarget() || false : void 0,
+			"data-focus": typeof item.isFocused === "function" ? item.isFocused() || false : void 0,
+			"data-folder": typeof item.isFolder === "function" ? item.isFolder() || false : void 0,
+			"data-search-match": typeof item.isMatchingSearch === "function" ? item.isMatchingSearch() || false : void 0,
+			"data-selected": typeof item.isSelected === "function" ? item.isSelected() || false : void 0,
+			"data-slot": "tree-item",
+			style: mergedStyle,
+			...restItemProps,
+			onClick: handleClick,
+			onKeyDown: handleKeyDown,
+			...props,
+			children
+		})
+	});
+}
+function TreeItemLabel({ item: propItem, children, className, ...props }) {
+	const { currentItem } = useTreeContext();
+	const t = useDsTranslation("ds");
+	const item = propItem || currentItem;
+	if (!item) {
+		console.warn("TreeItemLabel: No item provided via props or context");
+		return null;
+	}
+	const isFolder = typeof item.isFolder === "function" && item.isFolder();
+	const isExpanded = typeof item.isExpanded === "function" && item.isExpanded();
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("flex flex-1 items-center gap-1 ps-(--tree-padding) text-start", className),
+		"data-slot": "tree-item-label",
+		...props,
+		children: [isFolder ? /* @__PURE__ */ jsx(Button, {
+			"aria-label": isExpanded ? t("tree.collapse") : t("tree.expand"),
+			className: "shrink-0 text-muted-foreground",
+			onClick: (event) => {
+				event.stopPropagation();
+				if (isExpanded) item.collapse();
+				else item.expand();
+			},
+			size: "icon-sm",
+			tabIndex: -1,
+			variant: "ghost",
+			children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4", !isExpanded && "-rotate-90") })
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "size-6 shrink-0"
+		}), children || (typeof item.getItemName === "function" ? item.getItemName() : null)]
+	});
+}
+function TreeDragLine({ className, ...props }) {
+	const { tree } = useTreeContext();
+	if (!tree || typeof tree.getDragLineStyle !== "function") {
+		console.warn("TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method");
+		return null;
+	}
+	const dragLine = tree.getDragLineStyle();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("-mt-px absolute z-30 h-0.5 w-[unset] bg-primary before:absolute before:-top-[3px] before:left-0 before:size-2 before:rounded-full before:border-2 before:border-primary before:bg-background", className),
+		style: dragLine,
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/data-tree.tsx
+const ROOT_ID = "__data_tree_root__";
+/** Bridges headless-tree's `SetStateFn` (value-or-updater) onto a plain setter. */
+function applyUpdater(updaterOrValue, prev) {
+	return typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
+}
+function buildIndex(items, getKey, getChildren) {
+	const data = /* @__PURE__ */ new Map();
+	const children = /* @__PURE__ */ new Map();
+	const walk = (nodes) => {
+		const ids = [];
+		for (const node of nodes) {
+			const key = getKey(node);
+			data.set(key, node);
+			ids.push(key);
+			const kids = getChildren?.(node);
+			if (kids && kids.length > 0) children.set(key, walk(kids));
+		}
+		return ids;
+	};
+	return {
+		data,
+		children,
+		roots: walk(items)
+	};
+}
+function DataTree(componentProps) {
+	const { items, getKey, getLabel, getChildren, getIcon, getTextValue, selectionMode = "none", selectedKeys, defaultSelectedKeys = [], onSelectionChange, expandedKeys, defaultExpandedKeys = [], onExpandedChange, indent = 20, className, "aria-label": ariaLabel } = componentProps;
+	const selectable = selectionMode !== "none";
+	const multiple = selectionMode === "multiple";
+	const index = React.useMemo(() => buildIndex(items, getKey, getChildren), [
+		items,
+		getKey,
+		getChildren
+	]);
+	const [expandedItems = [], setExpandedState] = useControllableState({
+		prop: expandedKeys,
+		defaultProp: defaultExpandedKeys,
+		onChange: onExpandedChange
+	});
+	const [selectedItems = [], setSelectedState] = useControllableState({
+		prop: selectedKeys,
+		defaultProp: defaultSelectedKeys,
+		onChange: onSelectionChange
+	});
+	const setExpandedItems = (next) => setExpandedState((prev) => applyUpdater(next, prev ?? []));
+	const setSelectedItems = (next) => setSelectedState((prev) => applyUpdater(next, prev ?? []));
+	const tree = useTree({
+		rootItemId: ROOT_ID,
+		getItemName: (item) => {
+			const id = item.getId();
+			if (id === ROOT_ID) return "";
+			const node = index.data.get(id);
+			if (!node) return id;
+			if (getTextValue) return getTextValue(node);
+			const label = getLabel(node);
+			return typeof label === "string" ? label : id;
+		},
+		isItemFolder: (item) => (index.children.get(item.getId())?.length ?? 0) > 0,
+		dataLoader: {
+			getItem: (id) => id === ROOT_ID ? void 0 : index.data.get(id),
+			getChildren: (id) => id === ROOT_ID ? index.roots : index.children.get(id) ?? []
+		},
+		indent,
+		state: {
+			expandedItems,
+			...multiple ? { checkedItems: selectedItems } : selectable ? { selectedItems } : {}
+		},
+		setExpandedItems,
+		...multiple ? { setCheckedItems: setSelectedItems } : selectable ? { setSelectedItems } : {},
+		features: [
+			syncDataLoaderFeature,
+			...selectable ? [selectionFeature] : [],
+			...multiple ? [checkboxesFeature] : [],
+			hotkeysCoreFeature
+		]
+	});
+	const renderLabel = (item) => {
+		const node = index.data.get(item.getId());
+		if (!node) return /* @__PURE__ */ jsx(TreeItemLabel, {});
+		const label = getLabel(node);
+		if (!getIcon) return /* @__PURE__ */ jsx(TreeItemLabel, { children: label });
+		return /* @__PURE__ */ jsx(TreeItemLabel, { children: /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2",
+			children: [getIcon(node, {
+				isFolder: item.isFolder(),
+				isExpanded: item.isExpanded()
+			}) ?? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "size-4 shrink-0"
+			}), label]
+		}) });
+	};
+	return /* @__PURE__ */ jsx(Tree, {
+		"aria-label": ariaLabel,
+		className,
+		indent,
+		tree,
+		children: tree.getItems().map((item) => {
+			const checkedState = multiple ? item.getCheckedState() : void 0;
+			return /* @__PURE__ */ jsxs(TreeItem, {
+				item,
+				onActivate: multiple ? () => item.toggleCheckedState() : selectable ? () => item.select() : void 0,
+				children: [multiple ? /* @__PURE__ */ jsx(Checkbox, {
+					"aria-label": item.getItemName(),
+					checked: checkedState === "checked",
+					indeterminate: checkedState === "indeterminate",
+					onClick: (event) => event.stopPropagation(),
+					onCheckedChange: (checked) => item.getCheckboxProps().onChange?.({ target: { checked } })
+				}) : null, renderLabel(item)]
+			}, item.getId());
+		})
+	});
+}
+
 //#endregion
 //#region src/components/drawer.tsx
 const DrawerContext = createContext({ position: "bottom" });
@@ -2323,42 +3022,57 @@ function Drawer({ swipeDirection, position = "bottom", ...props }) {
 	});
 }
 const DrawerPortal = DrawerPrimitive.Portal;
-function DrawerTrigger(props) {
+const DrawerTrigger = React.forwardRef((componentProps, forwardRef) => {
 	return /* @__PURE__ */ jsx(DrawerPrimitive.Trigger, {
+		ref: forwardRef,
 		"data-slot": "drawer-trigger",
-		...props
+		...componentProps
 	});
-}
-function DrawerClose(props) {
+});
+DrawerTrigger.displayName = "DrawerTrigger";
+const DrawerClose = React.forwardRef((componentProps, forwardRef) => {
 	return /* @__PURE__ */ jsx(DrawerPrimitive.Close, {
+		ref: forwardRef,
 		"data-slot": "drawer-close",
-		...props
+		...componentProps
 	});
-}
-function DrawerSwipeArea({ className, position: positionProp, ...props }) {
+});
+DrawerClose.displayName = "DrawerClose";
+const DrawerSwipeArea = React.forwardRef((componentProps, forwardRef) => {
+	const { className, position: positionProp, ...props } = componentProps;
 	const { position: contextPosition } = useContext(DrawerContext);
 	const position = positionProp ?? contextPosition;
 	return /* @__PURE__ */ jsx(DrawerPrimitive.SwipeArea, {
+		ref: forwardRef,
 		className: cn("fixed z-50 touch-none", position === "bottom" && "inset-x-0 bottom-0 h-8", position === "top" && "inset-x-0 top-0 h-8", position === "left" && "inset-y-0 left-0 w-8", position === "right" && "inset-y-0 right-0 w-8", className),
 		"data-slot": "drawer-swipe-area",
 		...props
 	});
-}
-function DrawerBackdrop({ className, inContainer, ...props }) {
+});
+DrawerSwipeArea.displayName = "DrawerSwipeArea";
+const DrawerBackdrop = React.forwardRef((componentProps, forwardRef) => {
+	const { className, inContainer, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(DrawerPrimitive.Backdrop, {
+		ref: forwardRef,
 		className: cn("inset-0 z-50 bg-black/10 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute", inContainer ? "absolute" : "fixed", className),
 		"data-slot": "drawer-backdrop",
 		...props
 	});
-}
-function DrawerViewport({ className, position, variant = "default", inContainer, ...props }) {
+});
+DrawerBackdrop.displayName = "DrawerBackdrop";
+const DrawerViewport = React.forwardRef((componentProps, forwardRef) => {
+	const { className, position, variant = "default", inContainer, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(DrawerPrimitive.Viewport, {
+		ref: forwardRef,
 		className: cn("inset-0 z-50 [--bleed:--spacing(12)] [--inset:--spacing(0)]", inContainer ? "absolute" : "fixed", "touch-none", position === "bottom" && "grid grid-rows-[1fr_auto] pt-12", position === "top" && "grid grid-rows-[auto_1fr] pb-12", position === "left" && "flex justify-start", position === "right" && "flex justify-end", variant === "inset" && "px-(--inset) sm:[--inset:--spacing(4)]", variant === "inset" && position !== "bottom" && "pt-(--inset)", variant === "inset" && position !== "top" && "pb-(--inset)", className),
 		"data-slot": "drawer-viewport",
 		...props
 	});
-}
-function DrawerPopup({ className, children, showCloseButton = false, position: positionProp, variant = "default", showBar = false, container, ...props }) {
+});
+DrawerViewport.displayName = "DrawerViewport";
+const DrawerPopup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, showCloseButton = false, position: positionProp, variant = "default", showBar = false, container, ...props } = componentProps;
+	const t = useDsTranslation("ds");
 	const { position: contextPosition } = useContext(DrawerContext);
 	const position = positionProp ?? contextPosition;
 	const inContainer = !!container;
@@ -2369,13 +3083,14 @@ function DrawerPopup({ className, children, showCloseButton = false, position: p
 			variant,
 			inContainer,
 			children: /* @__PURE__ */ jsxs(DrawerPrimitive.Popup, {
+				ref: forwardRef,
 				className: cn("relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", "touch-none", position === "bottom" && "transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] border-t pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 data-ending-style:pb-0 data-starting-style:pb-0", position === "top" && "data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2", position === "left" && "data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:end-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2", position === "right" && "transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:start-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2", variant !== "straight" && cn(position === "bottom" && "rounded-t-2xl", position === "top" && "rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]", position === "left" && "rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]", position === "right" && "rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]"), variant === "default" && cn(position === "bottom" && "before:rounded-t-[calc(var(--radius-2xl)-1px)]", position === "top" && "before:rounded-b-[calc(var(--radius-2xl)-1px)]", position === "left" && "before:rounded-e-[calc(var(--radius-2xl)-1px)]", position === "right" && "before:rounded-s-[calc(var(--radius-2xl)-1px)]"), variant === "inset" && "before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]", variant === "straight" && "[--stack-step:0]", (position === "bottom" || position === "top") && "h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)", position === "bottom" && "data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]", position === "top" && "data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]", position === "left" && "data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right", position === "right" && "data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left", className),
 				"data-slot": "drawer-popup",
 				...props,
 				children: [
 					children,
 					showCloseButton && /* @__PURE__ */ jsx(DrawerPrimitive.Close, {
-						"aria-label": "Close",
+						"aria-label": t("drawer.close"),
 						className: "absolute end-2 top-2",
 						render: /* @__PURE__ */ jsx(Button, {
 							size: "icon",
@@ -2388,46 +3103,61 @@ function DrawerPopup({ className, children, showCloseButton = false, position: p
 			})
 		})]
 	});
-}
-function DrawerHeader({ className, allowSelection = false, render, ...props }) {
+});
+DrawerPopup.displayName = "DrawerPopup";
+const DrawerHeader = React.forwardRef((componentProps, forwardRef) => {
+	const { className, allowSelection = false, render, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "div",
 		props: mergeProps({
 			className: cn("flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4", !allowSelection && "cursor-default", className),
+			ref: forwardRef,
 			"data-slot": "drawer-header"
 		}, props),
 		render: allowSelection ? /* @__PURE__ */ jsx(DrawerContent, { render }) : render
 	});
-}
-function DrawerFooter({ className, variant = "default", allowSelection = true, render, ...props }) {
+});
+DrawerHeader.displayName = "DrawerHeader";
+const DrawerFooter = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant = "default", allowSelection = true, render, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "div",
 		props: mergeProps({
 			className: cn("flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end", !allowSelection && "cursor-default", variant === "default" && "border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]", variant === "bare" && "in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]", className),
+			ref: forwardRef,
 			"data-slot": "drawer-footer"
 		}, props),
 		render: allowSelection ? /* @__PURE__ */ jsx(DrawerContent, { render }) : render
 	});
-}
-function DrawerTitle({ className, ...props }) {
+});
+DrawerFooter.displayName = "DrawerFooter";
+const DrawerTitle = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(DrawerPrimitive.Title, {
+		ref: forwardRef,
 		className: cn("font-heading font-semibold text-xl leading-none", className),
 		"data-slot": "drawer-title",
 		...props
 	});
-}
-function DrawerDescription({ className, ...props }) {
+});
+DrawerTitle.displayName = "DrawerTitle";
+const DrawerDescription = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(DrawerPrimitive.Description, {
+		ref: forwardRef,
 		className: cn("text-muted-foreground text-sm", className),
 		"data-slot": "drawer-description",
 		...props
 	});
-}
-function DrawerPanel({ className, scrollFade = true, scrollable = true, allowSelection = true, render, ...props }) {
+});
+DrawerDescription.displayName = "DrawerDescription";
+const DrawerPanel = React.forwardRef((componentProps, forwardRef) => {
+	const { className, scrollFade = true, scrollable = true, allowSelection = true, render, ...props } = componentProps;
 	const content = useRender({
 		defaultTagName: "div",
 		props: mergeProps({
 			className: cn("p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1", !allowSelection && "cursor-default", className),
+			ref: forwardRef,
 			"data-slot": "drawer-panel"
 		}, props),
 		render: allowSelection ? /* @__PURE__ */ jsx(DrawerContent, { render }) : render
@@ -2438,8 +3168,10 @@ function DrawerPanel({ className, scrollFade = true, scrollable = true, allowSel
 		children: content
 	});
 	return content;
-}
-function DrawerBar({ className, position: positionProp, render, ...props }) {
+});
+DrawerPanel.displayName = "DrawerPanel";
+const DrawerBar = React.forwardRef((componentProps, forwardRef) => {
+	const { className, position: positionProp, render, ...props } = componentProps;
 	const { position: contextPosition } = useContext(DrawerContext);
 	const position = positionProp ?? contextPosition;
 	const horizontal = position === "left" || position === "right";
@@ -2448,27 +3180,34 @@ function DrawerBar({ className, position: positionProp, render, ...props }) {
 		props: mergeProps({
 			"aria-hidden": true,
 			className: cn("absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input", horizontal ? "inset-y-0 before:h-12 before:w-1" : "inset-x-0 before:h-1 before:w-12", position === "top" && "bottom-0", position === "bottom" && "top-0", position === "left" && "right-0", position === "right" && "left-0", className),
+			ref: forwardRef,
 			"data-slot": "drawer-bar"
 		}, props),
 		render
 	});
-}
+});
+DrawerBar.displayName = "DrawerBar";
 const DrawerContent = DrawerPrimitive.Content;
-function DrawerMenu({ className, render, ...props }) {
+const DrawerMenu = React.forwardRef((componentProps, forwardRef) => {
+	const { className, render, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "nav",
 		props: mergeProps({
 			className: cn("-m-2 flex flex-col", className),
+			ref: forwardRef,
 			"data-slot": "drawer-menu"
 		}, props),
 		render
 	});
-}
-function DrawerMenuItem({ className, variant = "default", render, disabled, ...props }) {
+});
+DrawerMenu.displayName = "DrawerMenu";
+const DrawerMenuItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant = "default", render, disabled, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "button",
 		props: mergeProps({
 			className: cn("flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0", className),
+			ref: forwardRef,
 			"data-slot": "drawer-menu-item",
 			"data-variant": variant,
 			disabled,
@@ -2476,47 +3215,62 @@ function DrawerMenuItem({ className, variant = "default", render, disabled, ...p
 		}, props),
 		render
 	});
-}
-function DrawerMenuSeparator({ className, render, ...props }) {
+});
+DrawerMenuItem.displayName = "DrawerMenuItem";
+const DrawerMenuSeparator = React.forwardRef((componentProps, forwardRef) => {
+	const { className, render, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "div",
 		props: mergeProps({
 			className: cn("mx-2 my-1 h-px bg-border", className),
+			ref: forwardRef,
 			"data-slot": "drawer-menu-separator"
 		}, props),
 		render
 	});
-}
-function DrawerMenuGroup({ className, render, ...props }) {
+});
+DrawerMenuSeparator.displayName = "DrawerMenuSeparator";
+const DrawerMenuGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, render, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "div",
 		props: mergeProps({
 			className: cn("flex flex-col", className),
+			ref: forwardRef,
 			"data-slot": "drawer-menu-group"
 		}, props),
 		render
 	});
-}
-function DrawerMenuGroupLabel({ className, render, ...props }) {
+});
+DrawerMenuGroup.displayName = "DrawerMenuGroup";
+const DrawerMenuGroupLabel = React.forwardRef((componentProps, forwardRef) => {
+	const { className, render, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "div",
 		props: mergeProps({
 			className: cn("px-2 py-1.5 font-medium text-muted-foreground text-xs", className),
+			ref: forwardRef,
 			"data-slot": "drawer-menu-group-label"
 		}, props),
 		render
 	});
-}
-function DrawerMenuTrigger({ className, children, ...props }) {
+});
+DrawerMenuGroupLabel.displayName = "DrawerMenuGroupLabel";
+const DrawerMenuTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(DrawerTrigger, {
+		ref: forwardRef,
 		className: cn("flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground sm:min-h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
 		"data-slot": "drawer-menu-trigger",
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ms-auto -me-0.5 opacity-80" })]
 	});
-}
-function DrawerMenuCheckboxItem({ className, children, checked, defaultChecked, onCheckedChange, variant = "default", disabled, render, ...props }) {
+});
+DrawerMenuTrigger.displayName = "DrawerMenuTrigger";
+const DrawerMenuCheckboxItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, checked, defaultChecked, onCheckedChange, variant = "default", disabled, render, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		ref: forwardRef,
 		checked,
 		className: cn("grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0", variant === "switch" ? "grid-cols-[1fr_auto] gap-4 pe-1.5" : "grid-cols-[1rem_1fr] pe-4", className),
 		"data-slot": "drawer-menu-checkbox-item",
@@ -2551,16 +3305,22 @@ function DrawerMenuCheckboxItem({ className, children, checked, defaultChecked,
 			children
 		})] })
 	});
-}
-function DrawerMenuRadioGroup({ className, ...props }) {
+});
+DrawerMenuCheckboxItem.displayName = "DrawerMenuCheckboxItem";
+const DrawerMenuRadioGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		ref: forwardRef,
 		className: cn("flex flex-col", className),
 		"data-slot": "drawer-menu-radio-group",
 		...props
 	});
-}
-function DrawerMenuRadioItem({ className, children, value, disabled, render, ...props }) {
+});
+DrawerMenuRadioGroup.displayName = "DrawerMenuRadioGroup";
+const DrawerMenuRadioItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, value, disabled, render, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Radio.Root, {
+		ref: forwardRef,
 		className: cn("grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0", "grid-cols-[1rem_1fr] items-center pe-4", className),
 		"data-slot": "drawer-menu-radio-item",
 		disabled,
@@ -2586,29 +3346,34 @@ function DrawerMenuRadioItem({ className, children, value, disabled, render, ...
 			children
 		})]
 	});
-}
+});
+DrawerMenuRadioItem.displayName = "DrawerMenuRadioItem";
 
 //#endregion
 //#region src/components/dropdown-menu.tsx
-function DropdownMenu({ ...props }) {
+function DropdownMenu(componentProps) {
 	return /* @__PURE__ */ jsx(Menu.Root, {
 		"data-slot": "dropdown-menu",
-		...props
+		...componentProps
 	});
 }
-function DropdownMenuPortal({ ...props }) {
+function DropdownMenuPortal(componentProps) {
 	return /* @__PURE__ */ jsx(Menu.Portal, {
 		"data-slot": "dropdown-menu-portal",
-		...props
+		...componentProps
 	});
 }
-function DropdownMenuTrigger({ ...props }) {
+const DropdownMenuTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		ref: forwardRef,
 		"data-slot": "dropdown-menu-trigger",
 		...props
 	});
-}
-function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, container, ...props }) {
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+const DropdownMenuContent = React.forwardRef((componentProps, forwardRef) => {
+	const { align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, container, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Menu.Portal, {
 		container,
 		children: /* @__PURE__ */ jsx(Menu.Positioner, {
@@ -2618,53 +3383,69 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
 			side,
 			sideOffset,
 			children: /* @__PURE__ */ jsx(Menu.Popup, {
+				ref: forwardRef,
 				"data-slot": "dropdown-menu-content",
 				className: cn("z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
 				...props
 			})
 		})
 	});
-}
-function DropdownMenuGroup({ ...props }) {
+});
+DropdownMenuContent.displayName = "DropdownMenuContent";
+const DropdownMenuGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Menu.Group, {
+		ref: forwardRef,
 		"data-slot": "dropdown-menu-group",
 		...props
 	});
-}
-function DropdownMenuLabel({ className, inset, ...props }) {
+});
+DropdownMenuGroup.displayName = "DropdownMenuGroup";
+const DropdownMenuLabel = React.forwardRef((componentProps, forwardRef) => {
+	const { className, inset, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		ref: forwardRef,
 		"data-slot": "dropdown-menu-label",
 		"data-inset": inset,
 		className: cn("px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8", className),
 		...props
 	});
-}
-function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+});
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+const DropdownMenuItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, inset, variant = "default", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Menu.Item, {
+		ref: forwardRef,
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
 		className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className),
 		...props
 	});
-}
-function DropdownMenuSub({ ...props }) {
+});
+DropdownMenuItem.displayName = "DropdownMenuItem";
+function DropdownMenuSub(componentProps) {
 	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
 		"data-slot": "dropdown-menu-sub",
-		...props
+		...componentProps
 	});
 }
-function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+const DropdownMenuSubTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { className, inset, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		ref: forwardRef,
 		"data-slot": "dropdown-menu-sub-trigger",
 		"data-inset": inset,
 		className: cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
 	});
-}
-function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
+});
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+const DropdownMenuSubContent = React.forwardRef((componentProps, forwardRef) => {
+	const { align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		ref: forwardRef,
 		"data-slot": "dropdown-menu-sub-content",
 		className: cn("w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 		align,
@@ -2673,9 +3454,12 @@ function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "rig
 		sideOffset,
 		...props
 	});
-}
-function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+});
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+const DropdownMenuCheckboxItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, checked, inset, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		ref: forwardRef,
 		"data-slot": "dropdown-menu-checkbox-item",
 		"data-inset": inset,
 		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
@@ -2687,15 +3471,21 @@ function DropdownMenuCheckboxItem({ className, children, checked, inset, ...prop
 			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});
-}
-function DropdownMenuRadioGroup({ ...props }) {
+});
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+const DropdownMenuRadioGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		ref: forwardRef,
 		"data-slot": "dropdown-menu-radio-group",
 		...props
 	});
-}
-function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+});
+DropdownMenuRadioGroup.displayName = "DropdownMenuRadioGroup";
+const DropdownMenuRadioItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, inset, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		ref: forwardRef,
 		"data-slot": "dropdown-menu-radio-item",
 		"data-inset": inset,
 		className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
@@ -2706,45 +3496,61 @@ function DropdownMenuRadioItem({ className, children, inset, ...props }) {
 			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 		}), children]
 	});
-}
-function DropdownMenuSeparator({ className, ...props }) {
+});
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+const DropdownMenuSeparator = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Menu.Separator, {
+		ref: forwardRef,
 		"data-slot": "dropdown-menu-separator",
 		className: cn("-mx-1 my-1 h-px bg-border", className),
 		...props
 	});
-}
-function DropdownMenuShortcut({ className, ...props }) {
+});
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+const DropdownMenuShortcut = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("span", {
+		ref: forwardRef,
 		"data-slot": "dropdown-menu-shortcut",
 		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className),
 		...props
 	});
-}
-function DropdownMenuAddon({ className, ...props }) {
+});
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+const DropdownMenuAddon = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("span", {
+		ref: forwardRef,
 		"data-slot": "dropdown-menu-addon",
 		className: cn("ml-auto shrink-0 inline-flex items-center", className),
 		...props
 	});
-}
+});
+DropdownMenuAddon.displayName = "DropdownMenuAddon";
 
 //#endregion
 //#region src/components/empty.tsx
-function Empty({ className, ...props }) {
+const Empty = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "empty",
 		className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg p-6 text-center text-balance md:p-12", className),
 		...props
 	});
-}
-function EmptyHeader({ className, ...props }) {
+});
+Empty.displayName = "Empty";
+const EmptyHeader = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "empty-header",
 		className: cn("flex max-w-sm flex-col items-center gap-2 text-center", className),
 		...props
 	});
-}
+});
+EmptyHeader.displayName = "EmptyHeader";
 const emptyMediaVariants = cva("flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
 	variants: { variant: {
 		default: "bg-transparent",
@@ -2752,8 +3558,10 @@ const emptyMediaVariants = cva("flex shrink-0 items-center justify-center mb-2 [
 	} },
 	defaultVariants: { variant: "default" }
 });
-function EmptyMedia({ className, variant = "default", ...props }) {
+const EmptyMedia = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant = "default", ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "empty-icon",
 		"data-variant": variant,
 		className: cn(emptyMediaVariants({
@@ -2762,34 +3570,44 @@ function EmptyMedia({ className, variant = "default", ...props }) {
 		})),
 		...props
 	});
-}
-function EmptyTitle({ className, ...props }) {
+});
+EmptyMedia.displayName = "EmptyMedia";
+const EmptyTitle = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "empty-title",
 		className: cn("text-sm font-medium tracking-tight", className),
 		...props
 	});
-}
-function EmptyDescription({ className, ...props }) {
+});
+EmptyTitle.displayName = "EmptyTitle";
+const EmptyDescription = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "empty-description",
 		className: cn("text-muted-foreground [&>a:hover]:text-primary text-sm [&>a]:underline [&>a]:underline-offset-4", className),
 		...props
 	});
-}
-function EmptyContent({ className, ...props }) {
+});
+EmptyDescription.displayName = "EmptyDescription";
+const EmptyContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "empty-content",
 		className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className),
 		...props
 	});
-}
+});
+EmptyContent.displayName = "EmptyContent";
 
 //#endregion
 //#region src/components/dropzone.tsx
-const DropzoneContext = React$1.createContext(null);
+const DropzoneContext = React.createContext(null);
 function useDropzoneContext() {
-	const ctx = React$1.useContext(DropzoneContext);
+	const ctx = React.useContext(DropzoneContext);
 	if (!ctx) throw new Error("Dropzone subcomponents must be rendered inside <Dropzone>.");
 	return ctx;
 }
@@ -2867,17 +3685,18 @@ function validateFiles(files, options) {
 * standard dashed-border look, or compose around any other control (textarea,
 * etc.) for file-drop on an arbitrary surface.
 */
-const Dropzone = React$1.forwardRef(({ className, children, onFiles, onError, accept, multiple = false, maxFiles, maxSize, minSize, disabled = false, hoverMessage = "Drop your file here to upload", dragRejectMessage, onDragEnter, onDragLeave, onDragOver, ...props }, ref) => {
-	const inputRef = React$1.useRef(null);
-	const [isDragging, setIsDragging] = React$1.useState(false);
-	const [isDragReject, setIsDragReject] = React$1.useState(false);
-	const dragCounterRef = React$1.useRef(0);
-	const acceptPatterns = React$1.useMemo(() => parseAccept(accept), [accept]);
-	const open = React$1.useCallback(() => {
+const Dropzone = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, onFiles, onError, accept, multiple = false, maxFiles, maxSize, minSize, disabled = false, hoverMessage = "Drop your file here to upload", dragRejectMessage, onDragEnter, onDragLeave, onDragOver, ...props } = componentProps;
+	const inputRef = React.useRef(null);
+	const [isDragging, setIsDragging] = React.useState(false);
+	const [isDragReject, setIsDragReject] = React.useState(false);
+	const dragCounterRef = React.useRef(0);
+	const acceptPatterns = React.useMemo(() => parseAccept(accept), [accept]);
+	const open = React.useCallback(() => {
 		if (disabled) return;
 		inputRef.current?.click();
 	}, [disabled]);
-	const ctx = React$1.useMemo(() => ({
+	const ctx = React.useMemo(() => ({
 		inputRef,
 		disabled,
 		open
@@ -2938,7 +3757,7 @@ const Dropzone = React$1.forwardRef(({ className, children, onFiles, onError, ac
 	return /* @__PURE__ */ jsx(DropzoneContext.Provider, {
 		value: ctx,
 		children: /* @__PURE__ */ jsxs("div", {
-			ref,
+			ref: forwardRef,
 			"data-slot": "dropzone",
 			"data-state": overlayState,
 			"data-disabled": disabled || void 0,
@@ -2983,10 +3802,11 @@ Dropzone.displayName = "Dropzone";
 * Space / Enter open the picker. Omit it (and use `<DropzoneTrigger>`)
 * when you want file-drop on an existing surface instead.
 */
-const DropzoneContent = React$1.forwardRef(({ className, error = false, onClick, onKeyDown, ...props }, ref) => {
+const DropzoneContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, error = false, onClick, onKeyDown, ...props } = componentProps;
 	const { open, disabled } = useDropzoneContext();
 	return /* @__PURE__ */ jsx("div", {
-		ref,
+		ref: forwardRef,
 		role: "button",
 		tabIndex: disabled ? -1 : 0,
 		"aria-disabled": disabled || void 0,
@@ -3011,45 +3831,57 @@ const DropzoneContent = React$1.forwardRef(({ className, error = false, onClick,
 });
 DropzoneContent.displayName = "DropzoneContent";
 /** `<EmptyMedia>` with `variant="icon"` baked in. */
-function DropzoneIcon({ variant = "icon", ...props }) {
+const DropzoneIcon = React.forwardRef((componentProps, forwardRef) => {
+	const { variant = "icon", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(EmptyMedia, {
+		ref: forwardRef,
 		"data-slot": "dropzone-icon",
 		variant,
 		...props
 	});
-}
-function DropzoneTitle({ className, ...props }) {
+});
+DropzoneIcon.displayName = "DropzoneIcon";
+const DropzoneTitle = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(EmptyTitle, {
+		ref: forwardRef,
 		"data-slot": "dropzone-title",
 		className: cn("text-foreground", className),
 		...props
 	});
-}
-function DropzoneDescription(props) {
+});
+DropzoneTitle.displayName = "DropzoneTitle";
+const DropzoneDescription = React.forwardRef((componentProps, forwardRef) => {
 	return /* @__PURE__ */ jsx(EmptyDescription, {
+		ref: forwardRef,
 		"data-slot": "dropzone-description",
-		...props
+		...componentProps
 	});
-}
-function DropzoneActions({ className, ...props }) {
+});
+DropzoneDescription.displayName = "DropzoneDescription";
+const DropzoneActions = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "dropzone-actions",
 		className: cn("mt-2 flex items-center gap-2", className),
 		onClick: (event) => event.stopPropagation(),
 		onKeyDown: (event) => event.stopPropagation(),
 		...props
 	});
-}
+});
+DropzoneActions.displayName = "DropzoneActions";
 /**
 * Opens the file picker on click. Default-renders a DS `<Button>`; pass
 * `render` (Base UI convention) to substitute another element.
 */
-const DropzoneTrigger = React$1.forwardRef(({ render, onClick, ...props }, ref) => {
+const DropzoneTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { render, onClick, ...props } = componentProps;
 	const { open, disabled } = useDropzoneContext();
 	return useRender({
 		defaultTagName: "button",
 		props: mergeProps({
-			ref,
+			ref: forwardRef,
 			type: "button",
 			"data-slot": "dropzone-trigger",
 			disabled,
@@ -3066,21 +3898,23 @@ DropzoneTrigger.displayName = "DropzoneTrigger";
 
 //#endregion
 //#region src/components/popover.tsx
-function Popover({ ...props }) {
+function Popover(componentProps) {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Popover$1.Root, {
 		"data-slot": "popover",
 		...props
 	});
 }
-const PopoverTrigger = React$1.forwardRef((props, ref) => {
+const PopoverTrigger = React.forwardRef((componentProps, forwardRef) => {
 	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
 		"data-slot": "popover-trigger",
-		ref,
-		...props
+		ref: forwardRef,
+		...componentProps
 	});
 });
 PopoverTrigger.displayName = "PopoverTrigger";
-function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
+const PopoverContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
 		align,
 		alignOffset,
@@ -3088,37 +3922,49 @@ function PopoverContent({ className, align = "center", alignOffset = 0, side = "
 		sideOffset,
 		className: "isolate z-50",
 		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
+			ref: forwardRef,
 			"data-slot": "popover-content",
 			className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 			...props
 		})
 	}) });
-}
-function PopoverHeader({ className, ...props }) {
+});
+PopoverContent.displayName = "PopoverContent";
+const PopoverHeader = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "popover-header",
 		className: cn("flex flex-col gap-0.5 text-sm", className),
 		...props
 	});
-}
-function PopoverTitle({ className, ...props }) {
+});
+PopoverHeader.displayName = "PopoverHeader";
+const PopoverTitle = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Popover$1.Title, {
+		ref: forwardRef,
 		"data-slot": "popover-title",
 		className: cn("font-bold", className),
 		...props
 	});
-}
-function PopoverDescription({ className, ...props }) {
+});
+PopoverTitle.displayName = "PopoverTitle";
+const PopoverDescription = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Popover$1.Description, {
+		ref: forwardRef,
 		"data-slot": "popover-description",
 		className: cn("text-muted-foreground", className),
 		...props
 	});
-}
+});
+PopoverDescription.displayName = "PopoverDescription";
 
 //#endregion
 //#region src/components/theme-provider.tsx
-function ThemeProvider({ children, ...props }) {
+function ThemeProvider(componentProps) {
+	const { children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(ThemeProvider$1, {
 		attribute: "data-theme",
 		defaultTheme: "system",
@@ -3142,19 +3988,19 @@ const EmojiPickerCategories = {
 	SYMBOLS: Categories.SYMBOLS,
 	FLAGS: Categories.FLAGS
 };
-const EmojiPickerContext = React$1.createContext(null);
+const EmojiPickerContext = React.createContext(null);
 function useEmojiPickerContext() {
-	const context = React$1.useContext(EmojiPickerContext);
+	const context = React.useContext(EmojiPickerContext);
 	if (!context) throw new Error("EmojiPicker compound components must be used inside <EmojiPicker>");
 	return context;
 }
 function EmojiPicker({ onEmojiSelect, children }) {
-	const [open, setOpen] = React$1.useState(false);
-	const onSelect = React$1.useCallback((emoji) => {
+	const [open, setOpen] = React.useState(false);
+	const onSelect = React.useCallback((emoji) => {
 		onEmojiSelect?.(emoji);
 		setOpen(false);
 	}, [onEmojiSelect]);
-	const contextValue = React$1.useMemo(() => ({ onSelect }), [onSelect]);
+	const contextValue = React.useMemo(() => ({ onSelect }), [onSelect]);
 	return /* @__PURE__ */ jsx(EmojiPickerContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx(Popover, {
@@ -3164,24 +4010,29 @@ function EmojiPicker({ onEmojiSelect, children }) {
 		})
 	});
 }
-const EmojiPickerTrigger = React$1.forwardRef(({ render, children, ...props }, ref) => /* @__PURE__ */ jsx(PopoverTrigger, {
-	ref,
-	"aria-label": "Emoji",
-	render: render ?? /* @__PURE__ */ jsx(Button, {
-		variant: "outline",
-		size: "icon"
-	}),
-	...props,
-	children: children ?? /* @__PURE__ */ jsx(Smile, { "aria-hidden": "true" })
-}));
+const EmojiPickerTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { render, children, ...props } = componentProps;
+	const t = useDsTranslation("ds");
+	return /* @__PURE__ */ jsx(PopoverTrigger, {
+		ref: forwardRef,
+		"aria-label": t("emojiPicker.emoji"),
+		render: render ?? /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "icon"
+		}),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Smile, { "aria-hidden": "true" })
+	});
+});
 EmojiPickerTrigger.displayName = "EmojiPickerTrigger";
 function EmojiPickerContent({ className, align = "start", searchPlaceholder, categories, width = 300, suggestedEmojisMode = SuggestionMode.RECENT, ...props }) {
 	const { onSelect } = useEmojiPickerContext();
 	const { resolvedTheme } = useTheme();
+	const t = useDsTranslation("ds");
 	const pickerTheme = resolvedTheme === "dark" ? Theme.DARK : Theme.LIGHT;
-	const handleClick = React$1.useCallback((emojiData) => onSelect(emojiData.emoji), [onSelect]);
+	const handleClick = React.useCallback((emojiData) => onSelect(emojiData.emoji), [onSelect]);
 	return /* @__PURE__ */ jsx(PopoverContent, {
-		"aria-label": "Choose an emoji",
+		"aria-label": t("emojiPicker.choose"),
 		className: cn("p-0 w-auto overflow-hidden ring-foreground/5", className),
 		align,
 		...props,
@@ -3220,9 +4071,10 @@ const fabVariants = cva("group/fab inline-flex shrink-0 items-center justify-cen
 		size: "icon-lg"
 	}
 });
-const FAB = React$1.forwardRef(({ className, variant, size, ...props }, ref) => {
+const FAB = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant, size, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Button$1, {
-		ref,
+		ref: forwardRef,
 		"data-slot": "fab",
 		className: cn(fabVariants({
 			variant,
@@ -3236,38 +4088,50 @@ FAB.displayName = "FAB";
 
 //#endregion
 //#region src/components/label.tsx
-function Label({ className, ...props }) {
+const Label = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("label", {
+		ref: forwardRef,
 		"data-slot": "label",
 		className: cn("flex items-center gap-2 text-sm leading-normal font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-disabled:opacity-50", className),
 		...props
 	});
-}
+});
+Label.displayName = "Label";
 
 //#endregion
 //#region src/components/field.tsx
-function FieldSet({ className, ...props }) {
+const FieldSet = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("fieldset", {
+		ref: forwardRef,
 		"data-slot": "field-set",
 		className: cn("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
 		...props
 	});
-}
-function FieldLegend({ className, variant = "legend", ...props }) {
+});
+FieldSet.displayName = "FieldSet";
+const FieldLegend = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant = "legend", ...props } = componentProps;
 	return /* @__PURE__ */ jsx("legend", {
+		ref: forwardRef,
 		"data-slot": "field-legend",
 		"data-variant": variant,
 		className: cn("mb-1.5 font-medium leading-normal data-[variant=label]:text-sm data-[variant=legend]:text-base", className),
 		...props
 	});
-}
-function FieldGroup({ className, ...props }) {
+});
+FieldLegend.displayName = "FieldLegend";
+const FieldGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "field-group",
 		className: cn("group/field-group @container/field-group flex w-full flex-col gap-6 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className),
 		...props
 	});
-}
+});
+FieldGroup.displayName = "FieldGroup";
 const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
 	variants: { orientation: {
 		vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
@@ -3276,45 +4140,62 @@ const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:tex
 	} },
 	defaultVariants: { orientation: "vertical" }
 });
-function Field({ className, orientation = "vertical", ...props }) {
+const Field = React.forwardRef((componentProps, forwardRef) => {
+	const { className, orientation = "vertical", ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		role: "group",
 		"data-slot": "field",
 		"data-orientation": orientation,
 		className: cn(fieldVariants({ orientation }), className),
 		...props
 	});
-}
-function FieldContent({ className, ...props }) {
+});
+Field.displayName = "Field";
+const FieldContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "field-content",
 		className: cn("group/field-content flex flex-1 flex-col gap-2 leading-normal", className),
 		...props
 	});
-}
-function FieldLabel({ className, ...props }) {
+});
+FieldContent.displayName = "FieldContent";
+const FieldLabel = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Label, {
+		ref: forwardRef,
 		"data-slot": "field-label",
 		className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-normal group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className),
 		...props
 	});
-}
-function FieldTitle({ className, ...props }) {
+});
+FieldLabel.displayName = "FieldLabel";
+const FieldTitle = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "field-label",
 		className: cn("flex w-fit items-center gap-2 text-sm leading-normal font-medium group-data-[disabled=true]/field:opacity-50", className),
 		...props
 	});
-}
-function FieldDescription({ className, ...props }) {
+});
+FieldTitle.displayName = "FieldTitle";
+const FieldDescription = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("p", {
+		ref: forwardRef,
 		"data-slot": "field-description",
 		className: cn("text-left text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
 		...props
 	});
-}
-function FieldSeparator({ children, className, ...props }) {
+});
+FieldDescription.displayName = "FieldDescription";
+const FieldSeparator = React.forwardRef((componentProps, forwardRef) => {
+	const { children, className, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs("div", {
+		ref: forwardRef,
 		"data-slot": "field-separator",
 		"data-content": !!children,
 		className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
@@ -3325,9 +4206,11 @@ function FieldSeparator({ children, className, ...props }) {
 			children
 		})]
 	});
-}
-function FieldError({ className, children, errors, ...props }) {
-	const content = useMemo(() => {
+});
+FieldSeparator.displayName = "FieldSeparator";
+const FieldError = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, errors, ...props } = componentProps;
+	const content = React.useMemo(() => {
 		if (children) return children;
 		if (!errors?.length) return null;
 		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
@@ -3339,13 +4222,15 @@ function FieldError({ className, children, errors, ...props }) {
 	}, [children, errors]);
 	if (!content) return null;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		role: "alert",
 		"data-slot": "field-error",
 		className: cn("text-sm leading-normal font-normal text-destructive", className),
 		...props,
 		children: content
 	});
-}
+});
+FieldError.displayName = "FieldError";
 
 //#endregion
 //#region src/components/gauge.tsx
@@ -3358,9 +4243,11 @@ function getSegmentState(index, value) {
 	if (distanceFromHead === 1) return "trailing";
 	return "filled";
 }
-function Gauge({ className, value, ...props }) {
+const Gauge = React.forwardRef((componentProps, forwardRef) => {
+	const { className, value, ...props } = componentProps;
 	const clampedValue = Math.max(0, Math.min(value, GAUGES));
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		role: "meter",
 		"aria-valuenow": clampedValue,
 		"aria-valuemin": 0,
@@ -3382,28 +4269,37 @@ function Gauge({ className, value, ...props }) {
 			}, index);
 		})
 	});
-}
+});
+Gauge.displayName = "Gauge";
 
 //#endregion
 //#region src/components/input-otp.tsx
-function InputOTP({ className, containerClassName, ...props }) {
+const InputOTP = React.forwardRef((componentProps, forwardRef) => {
+	const { className, containerClassName, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(OTPInput, {
+		ref: forwardRef,
 		"data-slot": "input-otp",
 		containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50 **:data-[slot=input-otp-slot]:h-12 **:data-[slot=input-otp-slot]:w-12 has-[input[aria-invalid=true]]:**:data-[slot=input-otp-slot]:border-destructive has-[input[aria-invalid=true]]:**:data-[slot=input-otp-slot]:data-[active=true]:ring-destructive/20 dark:has-[input[aria-invalid=true]]:**:data-[slot=input-otp-slot]:data-[active=true]:ring-destructive/40", containerClassName),
 		className: cn("disabled:cursor-not-allowed", className),
 		...props
 	});
-}
-function InputOTPGroup({ className, ...props }) {
+});
+InputOTP.displayName = "InputOTP";
+const InputOTPGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "input-otp-group",
 		className: cn("flex items-center", className),
 		...props
 	});
-}
-function InputOTPSlot({ index, className, ...props }) {
-	const { char, hasFakeCaret, isActive } = React$1.useContext(OTPInputContext)?.slots[index] ?? {};
+});
+InputOTPGroup.displayName = "InputOTPGroup";
+const InputOTPSlot = React.forwardRef((componentProps, forwardRef) => {
+	const { index, className, ...props } = componentProps;
+	const { char, hasFakeCaret, isActive } = React.useContext(OTPInputContext)?.slots[index] ?? {};
 	return /* @__PURE__ */ jsxs("div", {
+		ref: forwardRef,
 		"data-slot": "input-otp-slot",
 		"data-active": isActive,
 		className: cn("data-[active=true]:border-ring data-[active=true]:ring-ring/50 dark:bg-input/30 border-input relative flex items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-3", className),
@@ -3413,21 +4309,26 @@ function InputOTPSlot({ index, className, ...props }) {
 			children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" })
 		})]
 	});
-}
-function InputOTPSeparator({ ...props }) {
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+const InputOTPSeparator = React.forwardRef((componentProps, forwardRef) => {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "input-otp-separator",
 		role: "separator",
 		...props,
 		children: /* @__PURE__ */ jsx(MinusIcon, {})
 	});
-}
+});
+InputOTPSeparator.displayName = "InputOTPSeparator";
 
 //#endregion
 //#region src/components/item.tsx
-const ItemGroup = React$1.forwardRef(({ className, stackedItems = false, ...props }, ref) => {
+const ItemGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, stackedItems = false, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
-		ref,
+		ref: forwardRef,
 		role: "list",
 		"data-slot": "item-group",
 		"data-stacked": stackedItems ? "" : void 0,
@@ -3436,14 +4337,17 @@ const ItemGroup = React$1.forwardRef(({ className, stackedItems = false, ...prop
 	});
 });
 ItemGroup.displayName = "ItemGroup";
-function ItemSeparator({ className, ...props }) {
+const ItemSeparator = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Separator, {
+		ref: forwardRef,
 		"data-slot": "item-separator",
 		orientation: "horizontal",
 		className: cn("my-2", className),
 		...props
 	});
-}
+});
+ItemSeparator.displayName = "ItemSeparator";
 const itemVariants = cva("group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted", {
 	variants: {
 		variant: {
@@ -3462,7 +4366,8 @@ const itemVariants = cva("group/item flex w-full flex-wrap items-center rounded-
 		size: "default"
 	}
 });
-const Item = React$1.forwardRef(({ className, variant = "default", size = "default", render, ...props }, ref) => {
+const Item = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant = "default", size = "default", render, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "div",
 		props: mergeProps({
@@ -3471,7 +4376,7 @@ const Item = React$1.forwardRef(({ className, variant = "default", size = "defau
 				size,
 				className
 			})),
-			ref
+			ref: forwardRef
 		}, props),
 		render,
 		state: {
@@ -3490,9 +4395,10 @@ const itemMediaVariants = cva("flex shrink-0 items-center justify-center gap-2 g
 	} },
 	defaultVariants: { variant: "default" }
 });
-const ItemMedia = React$1.forwardRef(({ className, variant = "default", ...props }, ref) => {
+const ItemMedia = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant = "default", ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
-		ref,
+		ref: forwardRef,
 		"data-slot": "item-media",
 		"data-variant": variant,
 		className: cn(itemMediaVariants({
@@ -3503,54 +4409,60 @@ const ItemMedia = React$1.forwardRef(({ className, variant = "default", ...props
 	});
 });
 ItemMedia.displayName = "ItemMedia";
-const ItemContent = React$1.forwardRef(({ className, ...props }, ref) => {
+const ItemContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
-		ref,
+		ref: forwardRef,
 		"data-slot": "item-content",
 		className: cn("flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", className),
 		...props
 	});
 });
 ItemContent.displayName = "ItemContent";
-const ItemTitle = React$1.forwardRef(({ className, ...props }, ref) => {
+const ItemTitle = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
-		ref,
+		ref: forwardRef,
 		"data-slot": "item-title",
 		className: cn("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", className),
 		...props
 	});
 });
 ItemTitle.displayName = "ItemTitle";
-const ItemDescription = React$1.forwardRef(({ className, ...props }, ref) => {
+const ItemDescription = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("p", {
-		ref,
+		ref: forwardRef,
 		"data-slot": "item-description",
 		className: cn("line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
 		...props
 	});
 });
 ItemDescription.displayName = "ItemDescription";
-const ItemActions = React$1.forwardRef(({ className, ...props }, ref) => {
+const ItemActions = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
-		ref,
+		ref: forwardRef,
 		"data-slot": "item-actions",
 		className: cn("flex items-center gap-2", className),
 		...props
 	});
 });
 ItemActions.displayName = "ItemActions";
-const ItemHeader = React$1.forwardRef(({ className, ...props }, ref) => {
+const ItemHeader = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
-		ref,
+		ref: forwardRef,
 		"data-slot": "item-header",
 		className: cn("flex basis-full items-center justify-between gap-2", className),
 		...props
 	});
 });
 ItemHeader.displayName = "ItemHeader";
-const ItemFooter = React$1.forwardRef(({ className, ...props }, ref) => {
+const ItemFooter = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
-		ref,
+		ref: forwardRef,
 		"data-slot": "item-footer",
 		className: cn("flex basis-full items-center justify-between gap-2", className),
 		...props
@@ -3560,55 +4472,75 @@ ItemFooter.displayName = "ItemFooter";
 
 //#endregion
 //#region src/components/list.tsx
-const List = ({ children, className, ...props }) => {
+const List = React.forwardRef((componentProps, forwardRef) => {
+	const { children, className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		className: cn("flex flex-col", className),
 		...props,
 		children
 	});
-};
-const ListRow = React$1.forwardRef(({ children, className, ...props }, ref) => {
+});
+List.displayName = "List";
+const ListRow = React.forwardRef((componentProps, forwardRef) => {
+	const { children, className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
-		ref,
+		ref: forwardRef,
 		className: cn("grid grid-flow-col gap-x-2.5 gap-y-2 p-3 relative rounded-lg", "grid-cols-[minmax(0,auto)_1fr]", className),
 		...props,
 		children
 	});
 });
-const ListCol = ({ grow, wrap, children, className, ...props }) => {
+ListRow.displayName = "ListRow";
+const ListCol = React.forwardRef((componentProps, forwardRef) => {
+	const { grow, wrap, children, className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		className: cn(!wrap && "row-start-1", className),
 		...props,
 		children
 	});
-};
+});
+ListCol.displayName = "ListCol";
 
 //#endregion
 //#region src/components/pagination.tsx
-function Pagination({ className, ...props }) {
+const Pagination = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	const t = useDsTranslation("ds");
 	return /* @__PURE__ */ jsx("nav", {
+		ref: forwardRef,
 		role: "navigation",
-		"aria-label": "pagination",
+		"aria-label": t("pagination.label"),
 		"data-slot": "pagination",
 		className: cn("mx-auto flex w-full justify-center", className),
 		...props
 	});
-}
-function PaginationContent({ className, ...props }) {
+});
+Pagination.displayName = "Pagination";
+const PaginationContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("ul", {
+		ref: forwardRef,
 		"data-slot": "pagination-content",
 		className: cn("flex items-center gap-1", className),
 		...props
 	});
-}
-function PaginationItem({ ...props }) {
+});
+PaginationContent.displayName = "PaginationContent";
+const PaginationItem = React.forwardRef((componentProps, forwardRef) => {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx("li", {
+		ref: forwardRef,
 		"data-slot": "pagination-item",
 		...props
 	});
-}
-function PaginationLink({ className, isActive, size = "icon", ...props }) {
+});
+PaginationItem.displayName = "PaginationItem";
+const PaginationLink = React.forwardRef((componentProps, forwardRef) => {
+	const { className, isActive, size = "icon", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Button, {
+		ref: forwardRef,
 		variant: isActive ? "outline" : "ghost",
 		size,
 		className: cn(className),
@@ -3620,33 +4552,46 @@ function PaginationLink({ className, isActive, size = "icon", ...props }) {
 			...props
 		})
 	});
-}
-function PaginationPrevious({ className, text = "Previous", ...props }) {
+});
+PaginationLink.displayName = "PaginationLink";
+const PaginationPrevious = React.forwardRef((componentProps, forwardRef) => {
+	const { className, text, ...props } = componentProps;
+	const t = useDsTranslation("ds");
+	const resolvedText = text ?? t("pagination.previous");
 	return /* @__PURE__ */ jsxs(PaginationLink, {
-		"aria-label": "Go to previous page",
+		ref: forwardRef,
+		"aria-label": t("pagination.previousPage"),
 		size: "default",
 		className: cn("pl-2!", className),
 		...props,
 		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { "data-icon": "inline-start" }), /* @__PURE__ */ jsx("span", {
 			className: "hidden sm:block",
-			children: text
+			children: resolvedText
 		})]
 	});
-}
-function PaginationNext({ className, text = "Next", ...props }) {
+});
+PaginationPrevious.displayName = "PaginationPrevious";
+const PaginationNext = React.forwardRef((componentProps, forwardRef) => {
+	const { className, text, ...props } = componentProps;
+	const t = useDsTranslation("ds");
+	const resolvedText = text ?? t("pagination.next");
 	return /* @__PURE__ */ jsxs(PaginationLink, {
-		"aria-label": "Go to next page",
+		ref: forwardRef,
+		"aria-label": t("pagination.nextPage"),
 		size: "default",
 		className: cn("pr-2!", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "hidden sm:block",
-			children: text
+			children: resolvedText
 		}), /* @__PURE__ */ jsx(ChevronRightIcon, { "data-icon": "inline-end" })]
 	});
-}
-function PaginationEllipsis({ className, ...props }) {
+});
+PaginationNext.displayName = "PaginationNext";
+const PaginationEllipsis = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs("span", {
+		ref: forwardRef,
 		"aria-hidden": true,
 		"data-slot": "pagination-ellipsis",
 		className: cn("flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className),
@@ -3656,59 +4601,80 @@ function PaginationEllipsis({ className, ...props }) {
 			children: "More pages"
 		})]
 	});
-}
+});
+PaginationEllipsis.displayName = "PaginationEllipsis";
 
 //#endregion
 //#region src/components/progress.tsx
-function Progress({ className, children, value, ...props }) {
+const Progress = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, value, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Progress$1.Root, {
+		ref: forwardRef,
 		value,
 		"data-slot": "progress",
 		className: cn("flex flex-wrap gap-3", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ProgressTrack, { children: /* @__PURE__ */ jsx(ProgressIndicator, {}) })]
 	});
-}
-function ProgressTrack({ className, ...props }) {
+});
+Progress.displayName = "Progress";
+const ProgressTrack = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Progress$1.Track, {
+		ref: forwardRef,
 		className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className),
 		"data-slot": "progress-track",
 		...props
 	});
-}
-function ProgressIndicator({ className, ...props }) {
+});
+ProgressTrack.displayName = "ProgressTrack";
+const ProgressIndicator = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Progress$1.Indicator, {
+		ref: forwardRef,
 		"data-slot": "progress-indicator",
 		className: cn("h-full bg-primary transition-all", className),
 		...props
 	});
-}
-function ProgressLabel({ className, ...props }) {
+});
+ProgressIndicator.displayName = "ProgressIndicator";
+const ProgressLabel = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Progress$1.Label, {
+		ref: forwardRef,
 		className: cn("text-sm font-medium", className),
 		"data-slot": "progress-label",
 		...props
 	});
-}
-function ProgressValue({ className, ...props }) {
+});
+ProgressLabel.displayName = "ProgressLabel";
+const ProgressValue = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Progress$1.Value, {
+		ref: forwardRef,
 		className: cn("ml-auto text-sm text-muted-foreground tabular-nums", className),
 		"data-slot": "progress-value",
 		...props
 	});
-}
+});
+ProgressValue.displayName = "ProgressValue";
 
 //#endregion
 //#region src/components/radio-group.tsx
-function RadioGroup({ className, ...props }) {
+const RadioGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		ref: forwardRef,
 		"data-slot": "radio-group",
 		className: cn("grid w-full gap-3", className),
 		...props
 	});
-}
-function RadioGroupItem({ className, ...props }) {
+});
+RadioGroup.displayName = "RadioGroup";
+const RadioGroupItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Radio.Root, {
+		ref: forwardRef,
 		"data-slot": "radio-group-item",
 		className: cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none transition-[color,box-shadow,opacity] active:opacity-60 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive focus-visible:aria-invalid:ring-3 focus-visible:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:focus-visible:aria-invalid:ring-destructive/40 data-checked:border-primary aria-invalid:data-checked:border-destructive", className),
 		...props,
@@ -3718,7 +4684,8 @@ function RadioGroupItem({ className, ...props }) {
 			children: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-primary group-aria-invalid/radio-group-item:bg-destructive" })
 		})
 	});
-}
+});
+RadioGroupItem.displayName = "RadioGroupItem";
 
 //#endregion
 //#region src/components/select.tsx
@@ -3730,30 +4697,38 @@ const selectTriggerVariants = cva("flex w-fit items-center justify-between round
 	defaultVariants: { size: "default" }
 });
 const Select = Select$1.Root;
-function SelectGroup({ className, ...props }) {
+const SelectGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Select$1.Group, {
+		ref: forwardRef,
 		"data-slot": "select-group",
 		className: cn("scroll-my-1", className),
 		...props
 	});
-}
-function SelectValue({ className, ...props }) {
+});
+SelectGroup.displayName = "SelectGroup";
+function SelectValue(componentProps) {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Select$1.Value, {
 		"data-slot": "select-value",
 		className: cn("flex flex-1 text-left", className),
 		...props
 	});
 }
-function SelectTrigger({ className, size = "default", children, ...props }) {
+const SelectTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { className, size = "default", children, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
+		ref: forwardRef,
 		"data-slot": "select-trigger",
 		"data-size": size,
 		className: cn(selectTriggerVariants({ size }), className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })]
 	});
-}
-function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, alignItemWithTrigger = false, ...props }) {
+});
+SelectTrigger.displayName = "SelectTrigger";
+const SelectContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, side = "bottom", sideOffset = 4, align = "start", alignOffset = 0, alignItemWithTrigger = false, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
 		side,
 		sideOffset,
@@ -3762,9 +4737,10 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
 		alignItemWithTrigger,
 		className: "isolate z-50",
 		children: /* @__PURE__ */ jsxs(Select$1.Popup, {
+			ref: forwardRef,
 			"data-slot": "select-content",
 			"data-align-trigger": alignItemWithTrigger,
-			className: cn("relative isolate z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			className: cn("relative isolate z-50 max-h-(--available-height) min-w-36 min-w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 			...props,
 			children: [
 				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
@@ -3773,16 +4749,22 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
 			]
 		})
 	}) });
-}
-function SelectLabel({ className, ...props }) {
+});
+SelectContent.displayName = "SelectContent";
+const SelectLabel = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
+		ref: forwardRef,
 		"data-slot": "select-label",
 		className: cn("p-2 text-xs text-muted-foreground", className),
 		...props
 	});
-}
-function SelectItem({ className, children, ...props }) {
+});
+SelectLabel.displayName = "SelectLabel";
+const SelectItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Select$1.Item, {
+		ref: forwardRef,
 		"data-slot": "select-item",
 		className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md p-2 pr-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
 		...props,
@@ -3795,70 +4777,89 @@ function SelectItem({ className, children, ...props }) {
 			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
 		})]
 	});
-}
-function SelectSeparator({ className, ...props }) {
+});
+SelectItem.displayName = "SelectItem";
+const SelectSeparator = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Select$1.Separator, {
+		ref: forwardRef,
 		"data-slot": "select-separator",
 		className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
 		...props
 	});
-}
-function SelectScrollUpButton({ className, ...props }) {
+});
+SelectSeparator.displayName = "SelectSeparator";
+const SelectScrollUpButton = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
+		ref: forwardRef,
 		"data-slot": "select-scroll-up-button",
 		className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
 	});
-}
-function SelectScrollDownButton({ className, ...props }) {
+});
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+const SelectScrollDownButton = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
+		ref: forwardRef,
 		"data-slot": "select-scroll-down-button",
 		className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
 	});
-}
+});
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
 
 //#endregion
 //#region src/components/sheet.tsx
-function Sheet({ ...props }) {
+function Sheet(componentProps) {
 	return /* @__PURE__ */ jsx(Dialog$1.Root, {
 		"data-slot": "sheet",
-		...props
+		...componentProps
 	});
 }
-function SheetTrigger({ ...props }) {
+const SheetTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		ref: forwardRef,
 		"data-slot": "sheet-trigger",
 		...props
 	});
-}
-function SheetClose({ ...props }) {
+});
+SheetTrigger.displayName = "SheetTrigger";
+const SheetClose = React.forwardRef((componentProps, forwardRef) => {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		ref: forwardRef,
 		"data-slot": "sheet-close",
 		...props
 	});
-}
-function SheetPortal({ ...props }) {
+});
+SheetClose.displayName = "SheetClose";
+function SheetPortal(componentProps) {
 	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
 		"data-slot": "sheet-portal",
-		...props
+		...componentProps
 	});
 }
-const SheetOverlay = React$1.forwardRef(({ className, ...props }, ref) => {
+const SheetOverlay = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
 		"data-slot": "sheet-overlay",
 		className: cn("fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs", className),
 		...props,
-		ref
+		ref: forwardRef
 	});
 });
 SheetOverlay.displayName = "SheetOverlay";
-function SheetContent({ className, children, side = "right", showCloseButton = true, container, ...props }) {
+const SheetContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, side = "right", showCloseButton = true, container, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(SheetPortal, {
 		container,
 		children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
+			ref: forwardRef,
 			"data-slot": "sheet-content",
 			"data-side": side,
 			className: cn("fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className),
@@ -3877,58 +4878,77 @@ function SheetContent({ className, children, side = "right", showCloseButton = t
 			})]
 		})]
 	});
-}
-function SheetHeader({ className, ...props }) {
+});
+SheetContent.displayName = "SheetContent";
+const SheetHeader = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "sheet-header",
 		className: cn("flex flex-col gap-1.5 p-4", className),
 		...props
 	});
-}
-function SheetFooter({ className, ...props }) {
+});
+SheetHeader.displayName = "SheetHeader";
+const SheetFooter = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "sheet-footer",
 		className: cn("mt-auto flex flex-col gap-2 p-4", className),
 		...props
 	});
-}
-function SheetTitle({ className, ...props }) {
+});
+SheetFooter.displayName = "SheetFooter";
+const SheetTitle = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		ref: forwardRef,
 		"data-slot": "sheet-title",
 		className: cn("font-medium text-foreground", className),
 		...props
 	});
-}
-function SheetDescription({ className, ...props }) {
+});
+SheetTitle.displayName = "SheetTitle";
+const SheetDescription = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		ref: forwardRef,
 		"data-slot": "sheet-description",
 		className: cn("text-sm text-muted-foreground", className),
 		...props
 	});
-}
+});
+SheetDescription.displayName = "SheetDescription";
 
 //#endregion
 //#region src/components/tooltip.tsx
-function TooltipProvider({ delay = 0, ...props }) {
+function TooltipProvider(componentProps) {
+	const { delay = 0, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
 		"data-slot": "tooltip-provider",
 		delay,
 		...props
 	});
 }
-function Tooltip({ ...props }) {
+function Tooltip(componentProps) {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Tooltip$1.Root, {
 		"data-slot": "tooltip",
 		...props
 	});
 }
-function TooltipTrigger({ ...props }) {
+const TooltipTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+		ref: forwardRef,
 		"data-slot": "tooltip-trigger",
 		...props
 	});
-}
-const TooltipContent = React$1.forwardRef(({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }, ref) => {
+});
+TooltipTrigger.displayName = "TooltipTrigger";
+const TooltipContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
 		align,
 		alignOffset,
@@ -3936,7 +4956,7 @@ const TooltipContent = React$1.forwardRef(({ className, side = "top", sideOffset
 		sideOffset,
 		className: "isolate z-50",
 		children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
-			ref,
+			ref: forwardRef,
 			"data-slot": "tooltip-content",
 			className: cn("z-50 inline-flex w-fit max-w-sm origin-(--transform-origin) items-center gap-2 rounded-md bg-accent-foreground p-2 text-sm font-medium text-primary-foreground has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 			...props,
@@ -3950,8 +4970,8 @@ TooltipContent.displayName = "TooltipContent";
 //#region src/hooks/use-mobile.ts
 const MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-	const [isMobile, setIsMobile] = React$1.useState(void 0);
-	React$1.useEffect(() => {
+	const [isMobile, setIsMobile] = React.useState(void 0);
+	React.useEffect(() => {
 		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
 		const onChange = () => {
 			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -3971,31 +4991,32 @@ const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-const SidebarContext = React$1.createContext(null);
+const SidebarContext = React.createContext(null);
 function useSidebar() {
-	const context = React$1.useContext(SidebarContext);
+	const context = React.useContext(SidebarContext);
 	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
 	return context;
 }
-function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
+const SidebarProvider = React.forwardRef((componentProps, forwardRef) => {
+	const { defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props } = componentProps;
 	const isMobile = useIsMobile();
-	const [openMobile, setOpenMobile] = React$1.useState(false);
-	const [_open, _setOpen] = React$1.useState(defaultOpen);
+	const [openMobile, setOpenMobile] = React.useState(false);
+	const [_open, _setOpen] = React.useState(defaultOpen);
 	const open = openProp ?? _open;
-	const setOpen = React$1.useCallback((value) => {
+	const setOpen = React.useCallback((value) => {
 		const openState = typeof value === "function" ? value(open) : value;
 		if (setOpenProp) setOpenProp(openState);
 		else _setOpen(openState);
 		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 	}, [setOpenProp, open]);
-	const toggleSidebar = React$1.useCallback(() => {
+	const toggleSidebar = React.useCallback(() => {
 		return isMobile ? setOpenMobile((open$1) => !open$1) : setOpen((open$1) => !open$1);
 	}, [
 		isMobile,
 		setOpen,
 		setOpenMobile
 	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		const handleKeyDown = (event) => {
 			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
 				event.preventDefault();
@@ -4006,7 +5027,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 		return () => window.removeEventListener("keydown", handleKeyDown);
 	}, [toggleSidebar]);
 	const state = open ? "expanded" : "collapsed";
-	const contextValue = React$1.useMemo(() => ({
+	const contextValue = React.useMemo(() => ({
 		state,
 		open,
 		setOpen,
@@ -4026,6 +5047,7 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
+			ref: forwardRef,
 			"data-slot": "sidebar-wrapper",
 			style: {
 				"--sidebar-width": SIDEBAR_WIDTH,
@@ -4037,10 +5059,13 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
 			children
 		})
 	});
-}
-function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, dir, ...props }) {
+});
+SidebarProvider.displayName = "SidebarProvider";
+const Sidebar = React.forwardRef((componentProps, forwardRef) => {
+	const { side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, dir, ...props } = componentProps;
 	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "sidebar",
 		className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className),
 		...props,
@@ -4078,6 +5103,7 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			"data-slot": "sidebar-gap",
 			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
 		}), /* @__PURE__ */ jsx("div", {
+			ref: forwardRef,
 			"data-slot": "sidebar-container",
 			"data-side": side,
 			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
@@ -4090,10 +5116,14 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			})
 		})]
 	});
-}
-function SidebarTrigger({ className, onClick, ...props }) {
+});
+Sidebar.displayName = "Sidebar";
+const SidebarTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { className, onClick, ...props } = componentProps;
 	const { toggleSidebar } = useSidebar();
+	const t = useDsTranslation("ds");
 	return /* @__PURE__ */ jsxs(Button, {
+		ref: forwardRef,
 		"data-sidebar": "trigger",
 		"data-slot": "sidebar-trigger",
 		variant: "ghost",
@@ -4106,124 +5136,169 @@ function SidebarTrigger({ className, onClick, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx(PanelLeftIcon, {}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: "Toggle Sidebar"
+			children: t("sidebar.toggle")
 		})]
 	});
-}
-function SidebarRail({ className, ...props }) {
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+const SidebarRail = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	const { toggleSidebar } = useSidebar();
+	const t = useDsTranslation("ds");
 	return /* @__PURE__ */ jsx("button", {
+		ref: forwardRef,
 		"data-sidebar": "rail",
 		"data-slot": "sidebar-rail",
-		"aria-label": "Toggle Sidebar",
+		"aria-label": t("sidebar.toggle"),
 		tabIndex: -1,
 		onClick: toggleSidebar,
-		title: "Toggle Sidebar",
+		title: t("sidebar.toggle"),
 		className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
 		...props
 	});
-}
-function SidebarInset({ className, ...props }) {
+});
+SidebarRail.displayName = "SidebarRail";
+const SidebarInset = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("main", {
+		ref: forwardRef,
 		"data-slot": "sidebar-inset",
 		className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
 		...props
 	});
-}
-function SidebarInput({ className, ...props }) {
+});
+SidebarInset.displayName = "SidebarInset";
+const SidebarInput = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Input, {
+		ref: forwardRef,
 		"data-slot": "sidebar-input",
 		"data-sidebar": "input",
 		className: cn("h-8 w-full bg-background shadow-none", className),
 		...props
 	});
-}
-function SidebarHeader({ className, ...props }) {
+});
+SidebarInput.displayName = "SidebarInput";
+const SidebarHeader = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "sidebar-header",
 		"data-sidebar": "header",
 		className: cn("flex flex-col gap-2 p-2", className),
 		...props
 	});
-}
-function SidebarFooter({ className, ...props }) {
+});
+SidebarHeader.displayName = "SidebarHeader";
+const SidebarFooter = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "sidebar-footer",
 		"data-sidebar": "footer",
 		className: cn("flex flex-col gap-2 p-2", className),
 		...props
 	});
-}
-function SidebarSeparator({ className, ...props }) {
+});
+SidebarFooter.displayName = "SidebarFooter";
+const SidebarSeparator = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Separator, {
+		ref: forwardRef,
 		"data-slot": "sidebar-separator",
 		"data-sidebar": "separator",
 		className: cn("mx-2 w-auto bg-sidebar-border", className),
 		...props
 	});
-}
-function SidebarContent({ className, ...props }) {
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+const SidebarContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "sidebar-content",
 		"data-sidebar": "content",
 		className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
 		...props
 	});
-}
-function SidebarGroup({ className, ...props }) {
+});
+SidebarContent.displayName = "SidebarContent";
+const SidebarGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "sidebar-group",
 		"data-sidebar": "group",
 		className: cn("relative flex w-full min-w-0 flex-col p-2", className),
 		...props
 	});
-}
-function SidebarGroupLabel({ className, render, ...props }) {
+});
+SidebarGroup.displayName = "SidebarGroup";
+const SidebarGroupLabel = React.forwardRef((componentProps, forwardRef) => {
+	const { className, render, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
+		props: mergeProps({
+			className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className),
+			ref: forwardRef
+		}, props),
 		render,
 		state: {
 			slot: "sidebar-group-label",
 			sidebar: "group-label"
 		}
 	});
-}
-function SidebarGroupAction({ className, render, ...props }) {
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+const SidebarGroupAction = React.forwardRef((componentProps, forwardRef) => {
+	const { className, render, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "button",
-		props: mergeProps({ className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
+		props: mergeProps({
+			className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className),
+			ref: forwardRef
+		}, props),
 		render,
 		state: {
 			slot: "sidebar-group-action",
 			sidebar: "group-action"
 		}
 	});
-}
-function SidebarGroupContent({ className, ...props }) {
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+const SidebarGroupContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "sidebar-group-content",
 		"data-sidebar": "group-content",
 		className: cn("w-full text-sm", className),
 		...props
 	});
-}
-function SidebarMenu({ className, ...props }) {
+});
+SidebarGroupContent.displayName = "SidebarGroupContent";
+const SidebarMenu = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("ul", {
+		ref: forwardRef,
 		"data-slot": "sidebar-menu",
 		"data-sidebar": "menu",
 		className: cn("flex w-full min-w-0 flex-col gap-1", className),
 		...props
 	});
-}
-function SidebarMenuItem({ className, ...props }) {
+});
+SidebarMenu.displayName = "SidebarMenu";
+const SidebarMenuItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("li", {
+		ref: forwardRef,
 		"data-slot": "sidebar-menu-item",
 		"data-sidebar": "menu-item",
 		className: cn("group/menu-item relative", className),
 		...props
 	});
-}
+});
+SidebarMenuItem.displayName = "SidebarMenuItem";
 const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
 	variants: {
 		variant: {
@@ -4241,7 +5316,9 @@ const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w
 		size: "default"
 	}
 });
-const SidebarMenuButton = React$1.forwardRef(({ render, isActive = false, variant = "default", size = "default", tooltip, className, ...props }, ref) => {
+const SidebarMenuButton = React.forwardRef((componentProps, forwardRef) => {
+	const { render, isActive = false, variant = "default", size = "default", tooltip: tooltipProp, className, ...props } = componentProps;
+	let tooltip = tooltipProp;
 	const { isMobile, state } = useSidebar();
 	const comp = useRender({
 		defaultTagName: "button",
@@ -4250,7 +5327,7 @@ const SidebarMenuButton = React$1.forwardRef(({ render, isActive = false, varian
 				variant,
 				size
 			}), className),
-			ref
+			ref: forwardRef
 		}, props),
 		render: !tooltip ? render : /* @__PURE__ */ jsx(TooltipTrigger, { render }),
 		state: {
@@ -4270,12 +5347,13 @@ const SidebarMenuButton = React$1.forwardRef(({ render, isActive = false, varian
 	})] });
 });
 SidebarMenuButton.displayName = "SidebarMenuButton";
-const SidebarMenuAction = React$1.forwardRef(({ className, render, showOnHover = false, ...props }, ref) => {
+const SidebarMenuAction = React.forwardRef((componentProps, forwardRef) => {
+	const { className, render, showOnHover = false, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "button",
 		props: mergeProps({
 			className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0", className),
-			ref
+			ref: forwardRef
 		}, props),
 		render,
 		state: {
@@ -4285,20 +5363,25 @@ const SidebarMenuAction = React$1.forwardRef(({ className, render, showOnHover =
 	});
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-function SidebarMenuBadge({ className, ...props }) {
+const SidebarMenuBadge = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "sidebar-menu-badge",
 		"data-sidebar": "menu-badge",
 		className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className),
 		...props
 	});
-}
-function SidebarMenuSkeleton({ className, showIcon = false, width: widthProp, ...props }) {
-	const [fallbackWidth] = React$1.useState(() => {
+});
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+const SidebarMenuSkeleton = React.forwardRef((componentProps, forwardRef) => {
+	const { className, showIcon = false, width: widthProp, ...props } = componentProps;
+	const [fallbackWidth] = React.useState(() => {
 		return `${Math.floor(Math.random() * 40) + 50}%`;
 	});
 	const width = widthProp ?? fallbackWidth;
 	return /* @__PURE__ */ jsxs("div", {
+		ref: forwardRef,
 		"data-slot": "sidebar-menu-skeleton",
 		"data-sidebar": "menu-skeleton",
 		className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
@@ -4312,27 +5395,38 @@ function SidebarMenuSkeleton({ className, showIcon = false, width: widthProp, ..
 			style: { "--skeleton-width": width }
 		})]
 	});
-}
-function SidebarMenuSub({ className, ...props }) {
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+const SidebarMenuSub = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("ul", {
+		ref: forwardRef,
 		"data-slot": "sidebar-menu-sub",
 		"data-sidebar": "menu-sub",
 		className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className),
 		...props
 	});
-}
-function SidebarMenuSubItem({ className, ...props }) {
+});
+SidebarMenuSub.displayName = "SidebarMenuSub";
+const SidebarMenuSubItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("li", {
+		ref: forwardRef,
 		"data-slot": "sidebar-menu-sub-item",
 		"data-sidebar": "menu-sub-item",
 		className: cn("group/menu-sub-item relative", className),
 		...props
 	});
-}
-function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
+});
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+const SidebarMenuSubButton = React.forwardRef((componentProps, forwardRef) => {
+	const { render, size = "md", isActive = false, className, ...props } = componentProps;
 	return useRender({
 		defaultTagName: "a",
-		props: mergeProps({ className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className) }, props),
+		props: mergeProps({
+			className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className),
+			ref: forwardRef
+		}, props),
 		render,
 		state: {
 			slot: "sidebar-menu-sub-button",
@@ -4341,18 +5435,21 @@ function SidebarMenuSubButton({ render, size = "md", isActive = false, className
 			active: isActive
 		}
 	});
-}
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 
 //#endregion
 //#region src/components/slider.tsx
-function Slider({ className, defaultValue, value, min = 0, max = 100, orientation = "horizontal", ...props }) {
-	const _values = React$1.useMemo(() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [
+const Slider = React.forwardRef((componentProps, forwardRef) => {
+	const { className, defaultValue, value, min = 0, max = 100, orientation = "horizontal", ...props } = componentProps;
+	const _values = React.useMemo(() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [
 		value,
 		defaultValue,
 		min,
 		max
 	]);
 	return /* @__PURE__ */ jsx(Slider$1.Root, {
+		ref: forwardRef,
 		className: cn("data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full", className),
 		"data-slot": "slider",
 		"data-orientation": orientation,
@@ -4381,11 +5478,13 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, orientatio
 			}, index))]
 		})
 	});
-}
+});
+Slider.displayName = "Slider";
 
 //#endregion
 //#region src/components/sonner.tsx
-const Toaster = ({ ...props }) => {
+const Toaster = (componentProps) => {
+	const { ...props } = componentProps;
 	const { theme = "system" } = useTheme$1();
 	return /* @__PURE__ */ jsx(Toaster$1, {
 		theme,
@@ -4418,22 +5517,22 @@ const Toaster = ({ ...props }) => {
 
 //#endregion
 //#region src/components/stepper.tsx
-const StepperContext = React$1.createContext(void 0);
+const StepperContext = React.createContext(void 0);
 function useStepper() {
-	const ctx = React$1.useContext(StepperContext);
+	const ctx = React.useContext(StepperContext);
 	if (!ctx) throw new Error("useStepper must be used within a Stepper");
 	return ctx;
 }
-const Stepper = React$1.forwardRef((componentProps, forwardRef) => {
+const Stepper = React.forwardRef((componentProps, forwardRef) => {
 	const { steps, defaultValue, className, children, value, onValueChange, ...props } = componentProps;
 	const [activeId = "", setActiveId] = useControllableState({
 		prop: value,
 		defaultProp: defaultValue ?? steps[0]?.id,
 		onChange: onValueChange
 	});
-	const goTo = React$1.useCallback((id) => setActiveId(id), [setActiveId]);
-	const getIndex = React$1.useCallback((id) => steps.findIndex((s) => s.id === id), [steps]);
-	const contextValue = React$1.useMemo(() => ({
+	const goTo = React.useCallback((id) => setActiveId(id), [setActiveId]);
+	const getIndex = React.useCallback((id) => steps.findIndex((s) => s.id === id), [steps]);
+	const contextValue = React.useMemo(() => ({
 		activeId,
 		goTo,
 		getIndex,
@@ -4456,7 +5555,7 @@ const Stepper = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 Stepper.displayName = "Stepper";
-const StepperProgress = React$1.forwardRef((componentProps, forwardRef) => {
+const StepperProgress = React.forwardRef((componentProps, forwardRef) => {
 	const { steps: stepIds, className, ...props } = componentProps;
 	const { activeId, getIndex, steps } = useStepper();
 	const ids = stepIds ?? steps.map((s) => s.id);
@@ -4479,7 +5578,7 @@ const StepperProgress = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 StepperProgress.displayName = "StepperProgress";
-const StepperCounter = React$1.forwardRef((componentProps, forwardRef) => {
+const StepperCounter = React.forwardRef((componentProps, forwardRef) => {
 	const { steps: stepIds, className, children, ...props } = componentProps;
 	const { activeId, steps } = useStepper();
 	const ids = stepIds ?? steps.map((s) => s.id);
@@ -4499,7 +5598,7 @@ const StepperCounter = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 StepperCounter.displayName = "StepperCounter";
-const StepperPanel = React$1.forwardRef((componentProps, forwardRef) => {
+const StepperPanel = React.forwardRef((componentProps, forwardRef) => {
 	const { className, ...props } = componentProps;
 	const { activeId } = useStepper();
 	return /* @__PURE__ */ jsx("div", {
@@ -4511,7 +5610,7 @@ const StepperPanel = React$1.forwardRef((componentProps, forwardRef) => {
 	});
 });
 StepperPanel.displayName = "StepperPanel";
-const StepperContent = React$1.forwardRef((componentProps, forwardRef) => {
+const StepperContent = React.forwardRef((componentProps, forwardRef) => {
 	const { value, forceMount, className, ...props } = componentProps;
 	const { activeId } = useStepper();
 	const isActive = value === activeId;
@@ -4529,8 +5628,10 @@ StepperContent.displayName = "StepperContent";
 
 //#endregion
 //#region src/components/switch.tsx
-function Switch({ className, ...props }) {
+const Switch = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		ref: forwardRef,
 		"data-slot": "switch",
 		className: cn("peer relative inline-flex h-6 w-10 shrink-0 items-center rounded-full border border-transparent p-1 transition-all outline-none active:opacity-60 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive focus-visible:aria-invalid:ring-3 focus-visible:aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:focus-visible:aria-invalid:ring-destructive/40 data-checked:bg-primary aria-invalid:data-checked:bg-destructive data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
 		...props,
@@ -4539,39 +5640,52 @@ function Switch({ className, ...props }) {
 			className: "pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform data-unchecked:translate-x-0 data-checked:translate-x-4 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground"
 		})
 	});
-}
+});
+Switch.displayName = "Switch";
 
 //#endregion
 //#region src/components/tabs.tsx
-function Tabs({ className, orientation = "horizontal", ...props }) {
+const Tabs = React.forwardRef((componentProps, forwardRef) => {
+	const { className, orientation = "horizontal", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Tabs$1.Root, {
+		ref: forwardRef,
 		"data-slot": "tabs",
 		"data-orientation": orientation,
 		className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className),
 		...props
 	});
-}
-function TabsList({ className, ...props }) {
+});
+Tabs.displayName = "Tabs";
+const TabsList = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Tabs$1.List, {
+		ref: forwardRef,
 		"data-slot": "tabs-list",
 		className: cn("group/tabs-list inline-flex w-fit items-center justify-center gap-4 text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col", className),
 		...props
 	});
-}
-function TabsTrigger({ className, ...props }) {
+});
+TabsList.displayName = "TabsList";
+const TabsTrigger = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Tabs$1.Tab, {
+		ref: forwardRef,
 		"data-slot": "tabs-trigger",
 		className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground data-active:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "after:absolute after:rounded-full after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-1.5 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0.5 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 data-active:after:opacity-100", className),
 		...props
 	});
-}
-function TabsContent({ className, ...props }) {
+});
+TabsTrigger.displayName = "TabsTrigger";
+const TabsContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
+		ref: forwardRef,
 		"data-slot": "tabs-content",
 		className: cn("flex-1 text-sm outline-none", className),
 		...props
 	});
-}
+});
+TabsContent.displayName = "TabsContent";
 
 //#endregion
 //#region src/components/toggle.tsx
@@ -4592,8 +5706,10 @@ const toggleVariants = cva("group/toggle inline-flex items-center justify-center
 		size: "default"
 	}
 });
-function Toggle({ className, variant = "default", size = "default", ...props }) {
+const Toggle = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant = "default", size = "default", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Toggle$1, {
+		ref: forwardRef,
 		"data-slot": "toggle",
 		className: cn(toggleVariants({
 			variant,
@@ -4602,19 +5718,22 @@ function Toggle({ className, variant = "default", size = "default", ...props })
 		})),
 		...props
 	});
-}
+});
+Toggle.displayName = "Toggle";
 
 //#endregion
 //#region src/components/toggle-group.tsx
-const ToggleGroupContext = React$1.createContext({
+const ToggleGroupContext = React.createContext({
 	size: "default",
 	variant: "default",
 	spacing: 0,
 	orientation: "horizontal",
 	block: false
 });
-function ToggleGroup({ className, variant, size, spacing = 0, orientation = "horizontal", block = false, children, ...props }) {
+const ToggleGroup = React.forwardRef((componentProps, forwardRef) => {
+	const { className, variant, size, spacing = 0, orientation = "horizontal", block = false, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(ToggleGroup$1, {
+		ref: forwardRef,
 		"data-slot": "toggle-group",
 		"data-variant": variant,
 		"data-size": size,
@@ -4635,10 +5754,13 @@ function ToggleGroup({ className, variant, size, spacing = 0, orientation = "hor
 			children
 		})
 	});
-}
-function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
-	const context = React$1.useContext(ToggleGroupContext);
+});
+ToggleGroup.displayName = "ToggleGroup";
+const ToggleGroupItem = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, variant = "default", size = "default", ...props } = componentProps;
+	const context = React.useContext(ToggleGroupContext);
 	return /* @__PURE__ */ jsx(Toggle$1, {
+		ref: forwardRef,
 		"data-slot": "toggle-group-item",
 		"data-variant": context.variant || variant,
 		"data-size": context.size || size,
@@ -4650,6 +5772,48 @@ function ToggleGroupItem({ className, children, variant = "default", size = "def
 		...props,
 		children
 	});
+});
+ToggleGroupItem.displayName = "ToggleGroupItem";
+
+//#endregion
+//#region src/components/ds-i18n-provider.tsx
+/**
+* Drives the language of the shared `dsI18n` singleton from React.
+*
+* PRODUCTION INVARIANT — mount EXACTLY ONE `DsI18nProvider` at the app root, as an
+* ancestor of all DS components. This is NOT a context provider: it mutates the single
+* shared `dsI18n` singleton inside an effect. Therefore NEVER nest two providers with
+* differing languages — they are competing singleton mutators, and because React runs
+* effects inside-out, the OUTERMOST provider's effect runs last and wins, silently
+* overriding the inner one. DS apps are single-locale, so one root provider is correct.
+*
+* Use either `DsI18nProvider` (React apps) OR `syncDsLanguage` (non-React startup) — not
+* both, for the same reason: each mutates the same singleton and they would compete.
+*/
+function DsI18nProvider(componentProps) {
+	const { language, children } = componentProps;
+	React.useEffect(() => {
+		const target = language ?? detectInitialLanguage();
+		if (dsI18n.language !== target) dsI18n.changeLanguage(target);
+	}, [language]);
+	return children;
+}
+/**
+* Escape hatch for non-React / global-instance startup (e.g. the browser extension).
+* Mirrors `instance`'s current language onto the ds instance and follows its changes.
+* Returns an unsubscribe function.
+*
+* PRODUCTION INVARIANT — call this OR mount `DsI18nProvider`, never both. Both mutate the
+* same `dsI18n` singleton, so running them together makes them compete (last writer wins).
+* Like the provider, the singleton is single-locale: drive it from exactly one source.
+*/
+function syncDsLanguage(instance) {
+	if (instance.language && dsI18n.language !== instance.language) dsI18n.changeLanguage(instance.language);
+	const handler = (lng) => {
+		dsI18n.changeLanguage(lng);
+	};
+	instance.on("languageChanged", handler);
+	return () => instance.off("languageChanged", handler);
 }
 
 //#endregion
@@ -4674,11 +5838,11 @@ function ToggleGroupItem({ className, children, variant = "default", size = "def
 */
 function useAudioGauge(options = {}) {
 	const { intervalMs = 16, fftSize = 32, smoothing = .3, gain = 2 } = options;
-	const [value, setValue] = React$1.useState(0);
-	const [error, setError] = React$1.useState(null);
-	const gainRef = React$1.useRef(gain);
+	const [value, setValue] = React.useState(0);
+	const [error, setError] = React.useState(null);
+	const gainRef = React.useRef(gain);
 	gainRef.current = gain;
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		let cancelled = false;
 		let stream;
 		let ctx;
@@ -4727,4 +5891,4 @@ function useAudioGauge(options = {}) {
 }
 
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionBar, ActionBarButton, ActionBarContext, ActionBarHeight, Alert, AlertAction, AlertAction as BannerAction, AlertDescription, AlertDescription as BannerDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTitle as BannerTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BadgeGroup, BadgeGroupCount, Banner, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Chip, ChipRemove, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CounterBadge, CountryFlag, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBackdrop, DrawerBar, DrawerClose, DrawerContent, DrawerCreateHandle, DrawerDescription, DrawerFooter, DrawerHeader, DrawerMenu, DrawerMenuCheckboxItem, DrawerMenuGroup, DrawerMenuGroupLabel, DrawerMenuItem, DrawerMenuRadioGroup, DrawerMenuRadioItem, DrawerMenuSeparator, DrawerMenuTrigger, DrawerPanel, DrawerPopup, DrawerPortal, DrawerPrimitive, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, DropdownMenu, DropdownMenuAddon, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneActions, DropzoneContent, DropzoneDescription, DropzoneIcon, DropzoneTitle, DropzoneTrigger, EmojiPicker, EmojiPickerCategories, EmojiPickerContent, EmojiPickerTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FAB, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Filter, FilterClearAllButton, FilterGroup, Gauge, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, List, ListCol, ListRow, NotificationQueueProvider, NotificationSlot, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, ScrollArea, ScrollAreaPrimitive, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Stepper, StepperContent, StepperCounter, StepperPanel, StepperProgress, Switch, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, bannerVariants, buttonGroupVariants, buttonVariants, cn, counterBadgeVariants, fabVariants, selectTriggerVariants, spinnerVariants, toast, toggleVariants, useAudioGauge, useComboboxAnchor, useNotification, useNotificationQueue, useSidebar, useStepper, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionBar, ActionBarButton, ActionBarContext, ActionBarHeight, Alert, AlertAction, AlertAction as BannerAction, AlertDescription, AlertDescription as BannerDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTitle as BannerTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BadgeGroup, BadgeGroupCount, Banner, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Chip, ChipRemove, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CounterBadge, CountryFlag, DataTable, DataTree, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBackdrop, DrawerBar, DrawerClose, DrawerContent, DrawerCreateHandle, DrawerDescription, DrawerFooter, DrawerHeader, DrawerMenu, DrawerMenuCheckboxItem, DrawerMenuGroup, DrawerMenuGroupLabel, DrawerMenuItem, DrawerMenuRadioGroup, DrawerMenuRadioItem, DrawerMenuSeparator, DrawerMenuTrigger, DrawerPanel, DrawerPopup, DrawerPortal, DrawerPrimitive, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, DropdownMenu, DropdownMenuAddon, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneActions, DropzoneContent, DropzoneDescription, DropzoneIcon, DropzoneTitle, DropzoneTrigger, DsI18nProvider, EmojiPicker, EmojiPickerCategories, EmojiPickerContent, EmojiPickerTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FAB, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Filter, FilterClearAllButton, FilterGroup, Gauge, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, List, ListCol, ListRow, NotificationQueueProvider, NotificationSlot, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, SUPPORTED_LANGUAGES, ScrollArea, ScrollAreaPrimitive, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Stepper, StepperContent, StepperCounter, StepperPanel, StepperProgress, Switch, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tree, TreeDragLine, TreeItem, TreeItemLabel, alertVariants, bannerVariants, buttonGroupVariants, buttonVariants, cn, counterBadgeVariants, detectInitialLanguage, fabVariants, registerI18nNamespace, selectTriggerVariants, spinnerVariants, syncDsLanguage, toast, toggleVariants, useAudioGauge, useComboboxAnchor, useDsTranslation, useNotification, useNotificationQueue, useSidebar, useStepper, useTheme };