@olwiba/cn 0.1.27 → 0.1.29

package/dist/index.js

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React37 from 'react';
+import * as React38 from 'react';
 import { useMemo, useCallback, useRef, useState, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -35,7 +35,6 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SliderPrimitive from '@radix-ui/react-slider';
-import { useTheme } from 'next-themes';
 import { Toaster as Toaster$1 } from 'sonner';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -46,7 +45,7 @@ import confetti from 'canvas-confetti';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var UIVariantContext = React37.createContext(void 0);
+var UIVariantContext = React38.createContext(void 0);
 function UIVariantProvider({
   mode,
   children
@@ -54,17 +53,17 @@ function UIVariantProvider({
   return /* @__PURE__ */ jsx(UIVariantContext.Provider, { value: mode, children });
 }
 function useUIVariant() {
-  return React37.useContext(UIVariantContext);
+  return React38.useContext(UIVariantContext);
 }
-var AccordionContext = React37.createContext({});
-var Accordion = React37.forwardRef(({ mode: modeProp, size, ...props }, ref) => {
+var AccordionContext = React38.createContext({});
+var Accordion = React38.forwardRef(({ mode: modeProp, size, ...props }, ref) => {
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? inheritedMode;
   return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { mode, size }, children: /* @__PURE__ */ jsx(AccordionPrimitive.Root, { ref, ...props }) });
 });
 Accordion.displayName = "Accordion";
-var AccordionItem = React37.forwardRef(({ className, ...props }, ref) => {
-  const { mode } = React37.useContext(AccordionContext);
+var AccordionItem = React38.forwardRef(({ className, ...props }, ref) => {
+  const { mode } = React38.useContext(AccordionContext);
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Item,
     {
@@ -81,8 +80,8 @@ var AccordionItem = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React37.forwardRef(({ className, children, ...props }, ref) => {
-  const { mode, size } = React37.useContext(AccordionContext);
+var AccordionTrigger = React38.forwardRef(({ className, children, ...props }, ref) => {
+  const { mode, size } = React38.useContext(AccordionContext);
   return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
     AccordionPrimitive.Trigger,
     {
@@ -107,8 +106,8 @@ var AccordionTrigger = React37.forwardRef(({ className, children, ...props }, re
   ) });
 });
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React37.forwardRef(({ className, children, ...props }, ref) => {
-  const { mode, size } = React37.useContext(AccordionContext);
+var AccordionContent = React38.forwardRef(({ className, children, ...props }, ref) => {
+  const { mode, size } = React38.useContext(AccordionContext);
   return /* @__PURE__ */ jsx(
     AccordionPrimitive.Content,
     {
@@ -142,7 +141,7 @@ var alertVariants = cva(
     }
   }
 );
-var Alert = React37.forwardRef(({ className, variant, mode: modeProp, size, disabled, ...props }, ref) => {
+var Alert = React38.forwardRef(({ className, variant, mode: modeProp, size, disabled, ...props }, ref) => {
   const mode = modeProp ?? useUIVariant();
   return /* @__PURE__ */ jsx(
     "div",
@@ -163,7 +162,7 @@ var Alert = React37.forwardRef(({ className, variant, mode: modeProp, size, disa
   );
 });
 Alert.displayName = "Alert";
-var AlertTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h5",
   {
     ref,
@@ -172,7 +171,7 @@ var AlertTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDescription = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -218,7 +217,7 @@ var glassButtonBg = {
   outline: "bg-background/40 hover:bg-background/60",
   secondary: "bg-secondary/50 hover:bg-secondary/40"
 };
-var Button = React37.forwardRef(
+var Button = React38.forwardRef(
   ({ className, variant, size, asChild = false, mode: modeProp, ...props }, ref) => {
     const mode = modeProp ?? useUIVariant();
     const Comp = asChild ? Slot : "button";
@@ -274,7 +273,7 @@ Button.displayName = "Button";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Overlay,
   {
     className: cn(
@@ -286,7 +285,7 @@ var AlertDialogOverlay = React37.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+var AlertDialogContent = React38.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
   const mode = modeProp ?? useUIVariant();
   return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
@@ -336,7 +335,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -345,7 +344,7 @@ var AlertDialogTitle = React37.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogDescription = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -354,12 +353,12 @@ var AlertDialogDescription = React37.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React37.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx(Button, { children }) }));
+var AlertDialogAction = React38.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx(Button, { children }) }));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React37.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "mt-2 sm:mt-0", children }) }));
+var AlertDialogCancel = React38.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "mt-2 sm:mt-0", children }) }));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 var AspectRatio = AspectRatioPrimitive.Root;
-var AvatarContext = React37.createContext({});
+var AvatarContext = React38.createContext({});
 var sizeClasses = {
   sm: "h-8 w-8",
   default: "h-10 w-10",
@@ -396,7 +395,7 @@ var blobKeyframes = `
     100% { border-radius: 51% 49% 50% 50% / 52% 48% 51% 49%; transform: rotate(360deg)  scale(0.83); }
   }
 `;
-var Avatar = React37.forwardRef(({ className, mode: modeProp, size = "default", disabled, ...props }, ref) => {
+var Avatar = React38.forwardRef(({ className, mode: modeProp, size = "default", disabled, ...props }, ref) => {
   const mode = modeProp ?? useUIVariant();
   if (mode === "playful") {
     return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { mode }, children: /* @__PURE__ */ jsxs("div", { className: cn("relative overflow-visible", sizeClasses[size], disabled && "opacity-50 pointer-events-none"), children: [
@@ -452,7 +451,7 @@ var Avatar = React37.forwardRef(({ className, mode: modeProp, size = "default",
   ) });
 });
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarImage = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Image,
   {
     ref,
@@ -461,8 +460,8 @@ var AvatarImage = React37.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React37.forwardRef(({ className, ...props }, ref) => {
-  const { mode } = React37.useContext(AvatarContext);
+var AvatarFallback = React38.forwardRef(({ className, ...props }, ref) => {
+  const { mode } = React38.useContext(AvatarContext);
   return /* @__PURE__ */ jsx(
     AvatarPrimitive.Fallback,
     {
@@ -549,14 +548,14 @@ function Badge({ className, variant, size, disabled = false, mode: modeProp, ...
     }
   );
 }
-var Breadcrumb = React37.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
+var Breadcrumb = React38.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
 Breadcrumb.displayName = "Breadcrumb";
 var breadcrumbListSizeClasses = {
   sm: "gap-1 text-xs sm:gap-1.5",
   default: "gap-1.5 text-sm sm:gap-2.5",
   lg: "gap-2 text-base sm:gap-3"
 };
-var BreadcrumbList = React37.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+var BreadcrumbList = React38.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ jsx(
   "ol",
   {
     ref,
@@ -569,7 +568,7 @@ var BreadcrumbList = React37.forwardRef(({ className, size = "default", ...props
   }
 ));
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var BreadcrumbItem = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "li",
   {
     ref,
@@ -578,7 +577,7 @@ var BreadcrumbItem = React37.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React37.forwardRef(({ asChild, className, disabled, ...props }, ref) => {
+var BreadcrumbLink = React38.forwardRef(({ asChild, className, disabled, ...props }, ref) => {
   const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
     Comp,
@@ -594,7 +593,7 @@ var BreadcrumbLink = React37.forwardRef(({ asChild, className, disabled, ...prop
   );
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var BreadcrumbPage = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "span",
   {
     ref,
@@ -638,7 +637,7 @@ var BreadcrumbEllipsis = ({
   }
 );
 BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-var Separator = React37.forwardRef(
+var Separator = React38.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
     SeparatorPrimitive.Root,
     {
@@ -725,7 +724,7 @@ var calendarCellSizes = {
   default: "2rem",
   lg: "2.5rem"
 };
-var CalendarUIContext = React37.createContext({});
+var CalendarUIContext = React38.createContext({});
 function Calendar({
   className,
   classNames,
@@ -889,10 +888,10 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const { uiMode } = React37.useContext(CalendarUIContext);
+  const { uiMode } = React38.useContext(CalendarUIContext);
   const defaultClassNames = getDefaultClassNames();
-  const ref = React37.useRef(null);
-  React37.useEffect(() => {
+  const ref = React38.useRef(null);
+  React38.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   const isSelectedSingle = modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle;
@@ -932,7 +931,7 @@ function CalendarDayButton({
   }
   return button;
 }
-var Card = React37.forwardRef(
+var Card = React38.forwardRef(
   ({ className, mode: modeProp, ...props }, ref) => {
     const mode = modeProp ?? useUIVariant();
     if (mode === "playful") {
@@ -973,7 +972,7 @@ var Card = React37.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -982,7 +981,7 @@ var CardHeader = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -994,7 +993,7 @@ var CardTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1003,9 +1002,9 @@ var CardDescription = React37.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -1024,13 +1023,13 @@ var navOffset = {
   default: { prevH: "-left-12", nextH: "-right-12", prevV: "-top-12", nextV: "-bottom-12" },
   lg: { prevH: "-left-14", nextH: "-right-14", prevV: "-top-14", nextV: "-bottom-14" }
 };
-var CarouselContext = React37.createContext(null);
+var CarouselContext = React38.createContext(null);
 function useCarousel() {
-  const context = React37.useContext(CarouselContext);
+  const context = React38.useContext(CarouselContext);
   if (!context) throw new Error("useCarousel must be used within a <Carousel />");
   return context;
 }
-var Carousel = React37.forwardRef(
+var Carousel = React38.forwardRef(
   ({
     orientation = "horizontal",
     opts,
@@ -1048,20 +1047,20 @@ var Carousel = React37.forwardRef(
       { ...opts, axis: orientation === "horizontal" ? "x" : "y" },
       plugins
     );
-    const [canScrollPrev, setCanScrollPrev] = React37.useState(false);
-    const [canScrollNext, setCanScrollNext] = React37.useState(false);
-    const onSelect = React37.useCallback((api2) => {
+    const [canScrollPrev, setCanScrollPrev] = React38.useState(false);
+    const [canScrollNext, setCanScrollNext] = React38.useState(false);
+    const onSelect = React38.useCallback((api2) => {
       if (!api2) return;
       setCanScrollPrev(api2.canScrollPrev());
       setCanScrollNext(api2.canScrollNext());
     }, []);
-    const scrollPrev = React37.useCallback(() => {
+    const scrollPrev = React38.useCallback(() => {
       api?.scrollPrev();
     }, [api]);
-    const scrollNext = React37.useCallback(() => {
+    const scrollNext = React38.useCallback(() => {
       api?.scrollNext();
     }, [api]);
-    const handleKeyDown = React37.useCallback(
+    const handleKeyDown = React38.useCallback(
       (event) => {
         if (event.key === "ArrowLeft") {
           event.preventDefault();
@@ -1073,11 +1072,11 @@ var Carousel = React37.forwardRef(
       },
       [scrollPrev, scrollNext]
     );
-    React37.useEffect(() => {
+    React38.useEffect(() => {
       if (!api || !setApi) return;
       setApi(api);
     }, [api, setApi]);
-    React37.useEffect(() => {
+    React38.useEffect(() => {
       if (!api) return;
       onSelect(api);
       api.on("reInit", onSelect);
@@ -1119,7 +1118,7 @@ var Carousel = React37.forwardRef(
   }
 );
 Carousel.displayName = "Carousel";
-var CarouselContent = React37.forwardRef(({ className, ...props }, ref) => {
+var CarouselContent = React38.forwardRef(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel();
   return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
     "div",
@@ -1131,7 +1130,7 @@ var CarouselContent = React37.forwardRef(({ className, ...props }, ref) => {
   ) });
 });
 CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React37.forwardRef(({ className, ...props }, ref) => {
+var CarouselItem = React38.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useCarousel();
   return /* @__PURE__ */ jsx(
     "div",
@@ -1149,7 +1148,7 @@ var CarouselItem = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React37.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+var CarouselPrevious = React38.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev, mode, carouselSize } = useCarousel();
   const dim = navDim[carouselSize];
   const posH = `${navOffset[carouselSize].prevH} top-1/2 -translate-y-1/2`;
@@ -1207,7 +1206,7 @@ var CarouselPrevious = React37.forwardRef(({ className, variant = "outline", siz
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React37.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+var CarouselNext = React38.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext, mode, carouselSize } = useCarousel();
   const dim = navDim[carouselSize];
   const posH = `${navOffset[carouselSize].nextH} top-1/2 -translate-y-1/2`;
@@ -1266,16 +1265,16 @@ var CarouselNext = React37.forwardRef(({ className, variant = "outline", size =
 });
 CarouselNext.displayName = "CarouselNext";
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React37.createContext(null);
+var ChartContext = React38.createContext(null);
 function useChart() {
-  const context = React37.useContext(ChartContext);
+  const context = React38.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
   return context;
 }
-var ChartContainer = React37.forwardRef(({ id, className, children, config, disabled = false, ...props }, ref) => {
-  const uniqueId = React37.useId();
+var ChartContainer = React38.forwardRef(({ id, className, children, config, disabled = false, ...props }, ref) => {
+  const uniqueId = React38.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
@@ -1322,7 +1321,7 @@ ${colorConfig.map(([key, itemConfig]) => {
   );
 };
 var ChartTooltip = RechartsPrimitive.Tooltip;
-var ChartTooltipContent = React37.forwardRef(
+var ChartTooltipContent = React38.forwardRef(
   ({
     active,
     payload,
@@ -1339,7 +1338,7 @@ var ChartTooltipContent = React37.forwardRef(
     labelKey
   }, ref) => {
     const { config } = useChart();
-    const tooltipLabel = React37.useMemo(() => {
+    const tooltipLabel = React38.useMemo(() => {
       if (hideLabel || !payload?.length) {
         return null;
       }
@@ -1435,7 +1434,7 @@ var ChartTooltipContent = React37.forwardRef(
 );
 ChartTooltipContent.displayName = "ChartTooltip";
 var ChartLegend = RechartsPrimitive.Legend;
-var ChartLegendContent = React37.forwardRef(
+var ChartLegendContent = React38.forwardRef(
   ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
     const { config } = useChart();
     if (!payload?.length) {
@@ -1493,7 +1492,7 @@ function getPayloadConfigFromPayload(config, payload, key) {
   }
   return configLabelKey in config ? config[configLabelKey] : config[key];
 }
-var Checkbox = React37.forwardRef(({ className, mode: modeProp, ...props }, ref) => {
+var Checkbox = React38.forwardRef(({ className, mode: modeProp, ...props }, ref) => {
   const mode = modeProp ?? useUIVariant();
   if (mode === "playful") {
     return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex", children: [
@@ -1540,7 +1539,7 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -1552,7 +1551,7 @@ var DialogOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+var DialogContent = React38.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
   const mode = modeProp ?? useUIVariant();
   return /* @__PURE__ */ jsxs(DialogPortal, { children: [
     /* @__PURE__ */ jsx(DialogOverlay, { className: mode === "glass" ? "bg-black/40" : void 0 }),
@@ -1609,7 +1608,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -1621,7 +1620,7 @@ var DialogTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -1664,15 +1663,15 @@ function formatShortcut(shortcut, isMac) {
   return key ? `${modStr}+${key}` : `${modStr}+`;
 }
 function useIsMac() {
-  const [isMac, setIsMac] = React37.useState(false);
-  React37.useEffect(() => {
+  const [isMac, setIsMac] = React38.useState(false);
+  React38.useEffect(() => {
     setIsMac(
       typeof navigator !== "undefined" && navigator.platform.toUpperCase().includes("MAC")
     );
   }, []);
   return isMac;
 }
-var Hotkey = React37.forwardRef(
+var Hotkey = React38.forwardRef(
   ({ shortcut, asKbd = false, mode: modeProp, className, ...props }, ref) => {
     const isMac = useIsMac();
     const content = formatShortcut(shortcut, isMac);
@@ -1721,7 +1720,7 @@ var Hotkey = React37.forwardRef(
   }
 );
 Hotkey.displayName = "Hotkey";
-var Command = React37.forwardRef(({ className, mode, disabled, ...props }, ref) => {
+var Command = React38.forwardRef(({ className, mode, disabled, ...props }, ref) => {
   const inner = /* @__PURE__ */ jsx(UIVariantProvider, { mode, children: /* @__PURE__ */ jsx(
     Command$1,
     {
@@ -1755,7 +1754,7 @@ Command.displayName = Command$1.displayName;
 var CommandDialog = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
 };
-var CommandInput = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+var CommandInput = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ jsx(
     Command$1.Input,
@@ -1770,7 +1769,7 @@ var CommandInput = React37.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = Command$1.Input.displayName;
-var CommandList = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandList = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.List,
   {
     ref,
@@ -1779,7 +1778,7 @@ var CommandList = React37.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = Command$1.List.displayName;
-var CommandEmpty = React37.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var CommandEmpty = React38.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Command$1.Empty,
   {
     ref,
@@ -1788,7 +1787,7 @@ var CommandEmpty = React37.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }
 ));
 CommandEmpty.displayName = Command$1.Empty.displayName;
-var CommandGroup = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandGroup = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Group,
   {
     ref,
@@ -1800,7 +1799,7 @@ var CommandGroup = React37.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = Command$1.Group.displayName;
-var CommandSeparator = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandSeparator = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Separator,
   {
     ref,
@@ -1809,7 +1808,7 @@ var CommandSeparator = React37.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = Command$1.Separator.displayName;
-var CommandItem = React37.forwardRef(({ className, ...props }, ref) => {
+var CommandItem = React38.forwardRef(({ className, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsx(
     Command$1.Item,
@@ -1852,7 +1851,7 @@ var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var ContextMenuSubTrigger = React37.forwardRef(({ className, inset, children, ...props }, ref) => {
+var ContextMenuSubTrigger = React38.forwardRef(({ className, inset, children, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsxs(
     ContextMenuPrimitive.SubTrigger,
@@ -1875,7 +1874,7 @@ var ContextMenuSubTrigger = React37.forwardRef(({ className, inset, children, ..
   );
 });
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+var ContextMenuSubContent = React38.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? inheritedMode;
   return /* @__PURE__ */ jsx(
@@ -1895,7 +1894,7 @@ var ContextMenuSubContent = React37.forwardRef(({ className, mode: modeProp, chi
   );
 });
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+var ContextMenuContent = React38.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? inheritedMode;
   return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
@@ -1915,7 +1914,7 @@ var ContextMenuContent = React37.forwardRef(({ className, mode: modeProp, childr
   ) });
 });
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React37.forwardRef(({ className, inset, ...props }, ref) => {
+var ContextMenuItem = React38.forwardRef(({ className, inset, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsx(
     ContextMenuPrimitive.Item,
@@ -1934,7 +1933,7 @@ var ContextMenuItem = React37.forwardRef(({ className, inset, ...props }, ref) =
   );
 });
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React37.forwardRef(({ className, children, checked, ...props }, ref) => {
+var ContextMenuCheckboxItem = React38.forwardRef(({ className, children, checked, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsxs(
     ContextMenuPrimitive.CheckboxItem,
@@ -1957,7 +1956,7 @@ var ContextMenuCheckboxItem = React37.forwardRef(({ className, children, checked
   );
 });
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React37.forwardRef(({ className, children, ...props }, ref) => {
+var ContextMenuRadioItem = React38.forwardRef(({ className, children, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsxs(
     ContextMenuPrimitive.RadioItem,
@@ -1979,7 +1978,7 @@ var ContextMenuRadioItem = React37.forwardRef(({ className, children, ...props }
   );
 });
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React37.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuLabel = React38.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -1992,7 +1991,7 @@ var ContextMenuLabel = React37.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuSeparator = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -2034,7 +2033,7 @@ Drawer.displayName = "Drawer";
 var DrawerTrigger = Drawer$1.Trigger;
 var DrawerPortal = Drawer$1.Portal;
 var DrawerClose = Drawer$1.Close;
-var DrawerOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerOverlay = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Overlay,
   {
     ref,
@@ -2043,7 +2042,7 @@ var DrawerOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
-var DrawerContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+var DrawerContent = React38.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
   const mode = modeProp ?? useUIVariant();
   return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
     /* @__PURE__ */ jsx(DrawerOverlay, {}),
@@ -2090,7 +2089,7 @@ var DrawerFooter = ({
   }
 );
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Title,
   {
     ref,
@@ -2102,7 +2101,7 @@ var DrawerTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = Drawer$1.Title.displayName;
-var DrawerDescription = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerDescription = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Description,
   {
     ref,
@@ -2117,7 +2116,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React37.forwardRef(({ className, inset, children, ...props }, ref) => {
+var DropdownMenuSubTrigger = React38.forwardRef(({ className, inset, children, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.SubTrigger,
@@ -2140,7 +2139,7 @@ var DropdownMenuSubTrigger = React37.forwardRef(({ className, inset, children, .
   );
 });
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+var DropdownMenuSubContent = React38.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? inheritedMode;
   return /* @__PURE__ */ jsx(
@@ -2160,7 +2159,7 @@ var DropdownMenuSubContent = React37.forwardRef(({ className, mode: modeProp, ch
   );
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React37.forwardRef(({ className, sideOffset = 4, mode: modeProp, children, ...props }, ref) => {
+var DropdownMenuContent = React38.forwardRef(({ className, sideOffset = 4, mode: modeProp, children, ...props }, ref) => {
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? inheritedMode;
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
@@ -2181,7 +2180,7 @@ var DropdownMenuContent = React37.forwardRef(({ className, sideOffset = 4, mode:
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React37.forwardRef(({ className, inset, ...props }, ref) => {
+var DropdownMenuItem = React38.forwardRef(({ className, inset, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Item,
@@ -2200,7 +2199,7 @@ var DropdownMenuItem = React37.forwardRef(({ className, inset, ...props }, ref)
   );
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React37.forwardRef(({ className, children, checked, ...props }, ref) => {
+var DropdownMenuCheckboxItem = React38.forwardRef(({ className, children, checked, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.CheckboxItem,
@@ -2223,7 +2222,7 @@ var DropdownMenuCheckboxItem = React37.forwardRef(({ className, children, checke
   );
 });
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React37.forwardRef(({ className, children, ...props }, ref) => {
+var DropdownMenuRadioItem = React38.forwardRef(({ className, children, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsxs(
     DropdownMenuPrimitive.RadioItem,
@@ -2245,7 +2244,7 @@ var DropdownMenuRadioItem = React37.forwardRef(({ className, children, ...props
   );
 });
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React37.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuLabel = React38.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -2258,7 +2257,7 @@ var DropdownMenuLabel = React37.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSeparator = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -2389,7 +2388,7 @@ var labelVariants = cva(
     }
   }
 );
-var Label3 = React37.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label3 = React38.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
@@ -2616,15 +2615,15 @@ function FieldError({
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React37.createContext(null);
+var FormFieldContext = React38.createContext(null);
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React37.useContext(FormFieldContext);
-  const itemContext = React37.useContext(FormItemContext);
+  const fieldContext = React38.useContext(FormFieldContext);
+  const itemContext = React38.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
@@ -2643,13 +2642,13 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React37.createContext(null);
-var FormItem = React37.forwardRef(({ className, ...props }, ref) => {
-  const id = React37.useId();
+var FormItemContext = React38.createContext(null);
+var FormItem = React38.forwardRef(({ className, ...props }, ref) => {
+  const id = React38.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React37.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React38.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
   return /* @__PURE__ */ jsx(
     Label3,
@@ -2662,7 +2661,7 @@ var FormLabel = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React37.forwardRef(({ ...props }, ref) => {
+var FormControl = React38.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
   return /* @__PURE__ */ jsx(
     Slot,
@@ -2676,7 +2675,7 @@ var FormControl = React37.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React37.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React38.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
   return /* @__PURE__ */ jsx(
     "p",
@@ -2689,7 +2688,7 @@ var FormDescription = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React37.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React38.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message ?? "") : children;
   if (!body) {
@@ -2709,7 +2708,7 @@ var FormMessage = React37.forwardRef(({ className, children, ...props }, ref) =>
 FormMessage.displayName = "FormMessage";
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React37.forwardRef(({ className, align = "center", sideOffset = 4, mode: modeProp, children, ...props }, ref) => {
+var HoverCardContent = React38.forwardRef(({ className, align = "center", sideOffset = 4, mode: modeProp, children, ...props }, ref) => {
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? inheritedMode;
   return /* @__PURE__ */ jsx(
@@ -2731,15 +2730,18 @@ var HoverCardContent = React37.forwardRef(({ className, align = "center", sideOf
   );
 });
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-var Input = React37.forwardRef(
+var inputBase = "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/20";
+var inputPlayfulBacking = "absolute inset-0 z-0 translate-x-[3px] translate-y-[3px] -rotate-[0.4deg] rounded-md bg-foreground/8 transition-transform duration-200 group-hover/playful:-rotate-[1deg] group-focus-within/playful:-rotate-[1deg] dark:bg-foreground/10";
+var Input = React38.forwardRef(
   ({ className, type, mode: modeProp, ...props }, ref) => {
-    const mode = modeProp ?? useUIVariant();
+    const contextMode = useUIVariant();
+    const mode = modeProp ?? contextMode;
     const input = /* @__PURE__ */ jsx(
       "input",
       {
         type,
         className: cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/20",
+          inputBase,
           mode === "smooth" && "rounded-full",
           mode === "playful" && "relative z-10",
           mode === "glass" && glassControl,
@@ -2751,13 +2753,7 @@ var Input = React37.forwardRef(
     );
     if (mode === "playful") {
       return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex w-full", children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "absolute inset-0 z-0 translate-x-[3px] translate-y-[3px] -rotate-[0.4deg] rounded-md bg-foreground/8 transition-transform duration-200 group-hover/playful:-rotate-[1deg] group-focus-within/playful:-rotate-[1deg] dark:bg-foreground/10"
-          }
-        ),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: inputPlayfulBacking }),
         input
       ] });
     }
@@ -2770,7 +2766,7 @@ var textareaSizes = {
   default: "min-h-20 px-3 py-2 text-base md:text-sm",
   lg: "min-h-28 px-4 py-3 text-base"
 };
-var Textarea = React37.forwardRef(
+var Textarea = React38.forwardRef(
   ({ className, size = "default", mode: modeProp, ...props }, ref) => {
     const mode = modeProp ?? useUIVariant();
     const textarea = /* @__PURE__ */ jsx(
@@ -2950,11 +2946,11 @@ function InputGroupTextarea({
     }
   );
 }
-var InputOTPSizeContext = React37.createContext("default");
+var InputOTPSizeContext = React38.createContext("default");
 function useInputOTPSize() {
-  return React37.useContext(InputOTPSizeContext);
+  return React38.useContext(InputOTPSizeContext);
 }
-var InputOTP = React37.forwardRef(({ className, containerClassName, mode, size = "default", ...props }, ref) => {
+var InputOTP = React38.forwardRef(({ className, containerClassName, mode, size = "default", ...props }, ref) => {
   const otpInputProps = props;
   return /* @__PURE__ */ jsx(UIVariantProvider, { mode, children: /* @__PURE__ */ jsx(InputOTPSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
     OTPInput,
@@ -2971,10 +2967,10 @@ var InputOTP = React37.forwardRef(({ className, containerClassName, mode, size =
   ) }) });
 });
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props }));
+var InputOTPGroup = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React37.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React37.useContext(OTPInputContext);
+var InputOTPSlot = React38.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React38.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
   const mode = useUIVariant();
   const size = useInputOTPSize();
@@ -3001,8 +2997,141 @@ var InputOTPSlot = React37.forwardRef(({ index, className, ...props }, ref) => {
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React37.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Dot, {}) }));
+var InputOTPSeparator = React38.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Dot, {}) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
+var spinnerReset = "[appearance:textfield] [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none";
+function toNumber(value) {
+  if (value === void 0 || value === null || value === "") return null;
+  const parsed = Number.parseFloat(String(value));
+  return Number.isNaN(parsed) ? null : parsed;
+}
+function decimalsOf(step) {
+  const fraction = String(step).split(".")[1];
+  return fraction ? fraction.length : 0;
+}
+function writeValue(input, next) {
+  const setter = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype,
+    "value"
+  )?.set;
+  setter?.call(input, next);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+var NumberInput = React38.forwardRef(
+  ({
+    className,
+    mode: modeProp,
+    hideStepper = false,
+    incrementLabel = "Increase",
+    decrementLabel = "Decrease",
+    min,
+    max,
+    step,
+    disabled,
+    ...props
+  }, forwardedRef) => {
+    const contextMode = useUIVariant();
+    const mode = modeProp ?? contextMode;
+    const innerRef = React38.useRef(null);
+    React38.useImperativeHandle(forwardedRef, () => innerRef.current);
+    const [current, setCurrent] = React38.useState(
+      () => toNumber(props.value ?? props.defaultValue)
+    );
+    React38.useEffect(() => {
+      if (props.value !== void 0) setCurrent(toNumber(props.value));
+    }, [props.value]);
+    const minNum = toNumber(min);
+    const maxNum = toNumber(max);
+    const stepNum = toNumber(step) ?? 1;
+    const atMin = minNum !== null && current !== null && current <= minNum;
+    const atMax = maxNum !== null && current !== null && current >= maxNum;
+    const stepBy = (direction) => {
+      const input = innerRef.current;
+      if (!input || disabled) return;
+      const start = toNumber(input.value);
+      const base = start ?? minNum ?? 0;
+      let next = start === null ? base : base + direction * stepNum;
+      if (minNum !== null) next = Math.max(minNum, next);
+      if (maxNum !== null) next = Math.min(maxNum, next);
+      const places = decimalsOf(stepNum);
+      writeValue(input, places > 0 ? next.toFixed(places) : String(next));
+      input.focus();
+    };
+    const stepperButton = (direction) => {
+      const isUp = direction === 1;
+      const Icon2 = isUp ? ChevronUp : ChevronDown;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-label": isUp ? incrementLabel : decrementLabel,
+          disabled: disabled || (isUp ? atMax : atMin),
+          onClick: () => stepBy(direction),
+          className: cn(
+            "flex h-1/2 w-full items-center justify-center text-muted-foreground transition-colors",
+            "hover:text-foreground hover:bg-accent/60",
+            "disabled:pointer-events-none disabled:opacity-30",
+            mode === "smooth" ? "rounded-full" : "rounded-sm",
+            isUp ? "rounded-b-none" : "rounded-t-none"
+          ),
+          children: /* @__PURE__ */ jsx(Icon2, { className: "size-3", "aria-hidden": "true" })
+        }
+      );
+    };
+    const field = /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex w-full", mode === "playful" && "z-10"), children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...props,
+          type: "number",
+          ref: innerRef,
+          min,
+          max,
+          step,
+          disabled,
+          onInput: (event) => {
+            setCurrent(toNumber(event.currentTarget.value));
+            props.onInput?.(event);
+          },
+          className: cn(
+            inputBase,
+            spinnerReset,
+            !hideStepper && "pr-9",
+            mode === "smooth" && "rounded-full",
+            mode === "glass" && glassControl,
+            className
+          )
+        }
+      ),
+      !hideStepper && // Inside the border, so the control reads as one field. `tabIndex={-1}`
+      // on the buttons keeps Tab moving between fields — the keyboard already
+      // has ArrowUp/ArrowDown for stepping, natively, and a keyboard user
+      // gains nothing from two extra stops per number.
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "absolute inset-y-1 flex w-7 flex-col",
+            mode === "smooth" ? "right-1.5" : "right-1"
+          ),
+          children: [
+            stepperButton(1),
+            stepperButton(-1)
+          ]
+        }
+      )
+    ] });
+    if (mode === "playful") {
+      return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex w-full", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: inputPlayfulBacking }),
+        field
+      ] });
+    }
+    return field;
+  }
+);
+NumberInput.displayName = "NumberInput";
 function ItemGroup({
   className,
   mode: modeProp,
@@ -3290,7 +3419,7 @@ function MenubarSub({
 }) {
   return /* @__PURE__ */ jsx(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
 }
-var Menubar = React37.forwardRef(({ className, mode, ...props }, ref) => /* @__PURE__ */ jsx(UIVariantProvider, { mode, children: /* @__PURE__ */ jsx(
+var Menubar = React38.forwardRef(({ className, mode, ...props }, ref) => /* @__PURE__ */ jsx(UIVariantProvider, { mode, children: /* @__PURE__ */ jsx(
   MenubarPrimitive.Root,
   {
     ref,
@@ -3305,7 +3434,7 @@ var Menubar = React37.forwardRef(({ className, mode, ...props }, ref) => /* @__P
   }
 ) }));
 Menubar.displayName = MenubarPrimitive.Root.displayName;
-var MenubarTrigger = React37.forwardRef(({ className, ...props }, ref) => {
+var MenubarTrigger = React38.forwardRef(({ className, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsx(
     MenubarPrimitive.Trigger,
@@ -3323,7 +3452,7 @@ var MenubarTrigger = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-var MenubarSubTrigger = React37.forwardRef(({ className, inset, children, ...props }, ref) => {
+var MenubarSubTrigger = React38.forwardRef(({ className, inset, children, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsxs(
     MenubarPrimitive.SubTrigger,
@@ -3346,7 +3475,7 @@ var MenubarSubTrigger = React37.forwardRef(({ className, inset, children, ...pro
   );
 });
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-var MenubarSubContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+var MenubarSubContent = React38.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? inheritedMode;
   return /* @__PURE__ */ jsx(
@@ -3366,7 +3495,7 @@ var MenubarSubContent = React37.forwardRef(({ className, mode: modeProp, childre
   );
 });
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-var MenubarContent = React37.forwardRef(
+var MenubarContent = React38.forwardRef(
   ({ className, align = "start", alignOffset = -4, sideOffset = 8, mode: modeProp, children, ...props }, ref) => {
     const inheritedMode = useUIVariant();
     const mode = modeProp ?? inheritedMode;
@@ -3391,7 +3520,7 @@ var MenubarContent = React37.forwardRef(
   }
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-var MenubarItem = React37.forwardRef(({ className, inset, ...props }, ref) => {
+var MenubarItem = React38.forwardRef(({ className, inset, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsx(
     MenubarPrimitive.Item,
@@ -3410,7 +3539,7 @@ var MenubarItem = React37.forwardRef(({ className, inset, ...props }, ref) => {
   );
 });
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-var MenubarCheckboxItem = React37.forwardRef(({ className, children, checked, ...props }, ref) => {
+var MenubarCheckboxItem = React38.forwardRef(({ className, children, checked, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsxs(
     MenubarPrimitive.CheckboxItem,
@@ -3433,7 +3562,7 @@ var MenubarCheckboxItem = React37.forwardRef(({ className, children, checked, ..
   );
 });
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-var MenubarRadioItem = React37.forwardRef(({ className, children, ...props }, ref) => {
+var MenubarRadioItem = React38.forwardRef(({ className, children, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsxs(
     MenubarPrimitive.RadioItem,
@@ -3455,7 +3584,7 @@ var MenubarRadioItem = React37.forwardRef(({ className, children, ...props }, re
   );
 });
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-var MenubarLabel = React37.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarLabel = React38.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Label,
   {
     ref,
@@ -3468,7 +3597,7 @@ var MenubarLabel = React37.forwardRef(({ className, inset, ...props }, ref) => /
   }
 ));
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-var MenubarSeparator = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarSeparator = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Separator,
   {
     ref,
@@ -3496,7 +3625,7 @@ var MenubarShortcut = ({
   );
 };
 MenubarShortcut.displayName = "MenubarShortcut";
-var NavigationMenu = React37.forwardRef(({ className, children, mode: modeProp, ...props }, ref) => {
+var NavigationMenu = React38.forwardRef(({ className, children, mode: modeProp, ...props }, ref) => {
   const mode = modeProp ?? useUIVariant();
   return /* @__PURE__ */ jsx(UIVariantProvider, { mode, children: /* @__PURE__ */ jsxs(
     NavigationMenuPrimitive.Root,
@@ -3515,7 +3644,7 @@ var NavigationMenu = React37.forwardRef(({ className, children, mode: modeProp,
   ) });
 });
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-var NavigationMenuList = React37.forwardRef(({ className, ...props }, ref) => {
+var NavigationMenuList = React38.forwardRef(({ className, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsx(
     NavigationMenuPrimitive.List,
@@ -3535,7 +3664,7 @@ var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var navigationMenuTriggerStyle = cva(
   "group inline-flex h-10 w-max cursor-pointer items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
 );
-var NavigationMenuTrigger = React37.forwardRef(({ className, children, ...props }, ref) => {
+var NavigationMenuTrigger = React38.forwardRef(({ className, children, ...props }, ref) => {
   const mode = useUIVariant();
   const trigger = /* @__PURE__ */ jsxs(
     NavigationMenuPrimitive.Trigger,
@@ -3577,7 +3706,7 @@ var NavigationMenuTrigger = React37.forwardRef(({ className, children, ...props
   return trigger;
 });
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-var NavigationMenuContent = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuContent = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Content,
   {
     ref,
@@ -3589,7 +3718,7 @@ var NavigationMenuContent = React37.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
-var NavigationMenuLink = React37.forwardRef(({ className, asChild, children, ...props }, ref) => {
+var NavigationMenuLink = React38.forwardRef(({ className, asChild, children, ...props }, ref) => {
   const mode = useUIVariant();
   if (!asChild && mode === "playful") {
     return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex", children: [
@@ -3627,7 +3756,7 @@ var NavigationMenuLink = React37.forwardRef(({ className, asChild, children, ...
   );
 });
 NavigationMenuLink.displayName = NavigationMenuPrimitive.Link.displayName;
-var NavigationMenuViewport = React37.forwardRef(({ className, ...props }, ref) => {
+var NavigationMenuViewport = React38.forwardRef(({ className, ...props }, ref) => {
   const mode = useUIVariant();
   if (mode === "playful") {
     return /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-full flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -3665,7 +3794,7 @@ var NavigationMenuViewport = React37.forwardRef(({ className, ...props }, ref) =
   ) });
 });
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-var NavigationMenuIndicator = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuIndicator = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Indicator,
   {
     ref,
@@ -3695,7 +3824,7 @@ var Pagination = ({
   ) });
 };
 Pagination.displayName = "Pagination";
-var PaginationContent = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var PaginationContent = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "ul",
   {
     ref,
@@ -3704,7 +3833,7 @@ var PaginationContent = React37.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
+var PaginationItem = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
 PaginationItem.displayName = "PaginationItem";
 var paginationLinkSizes = {
   sm: "h-9 w-9",
@@ -3801,7 +3930,7 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React37.forwardRef(({ className, align = "center", sideOffset = 4, mode: modeProp, children, ...props }, ref) => {
+var PopoverContent = React38.forwardRef(({ className, align = "center", sideOffset = 4, mode: modeProp, children, ...props }, ref) => {
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? inheritedMode;
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
@@ -3824,7 +3953,7 @@ var PopoverContent = React37.forwardRef(({ className, align = "center", sideOffs
   ) });
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var Progress = React37.forwardRef(({ className, value, disabled = false, mode: modeProp, ...props }, ref) => {
+var Progress = React38.forwardRef(({ className, value, disabled = false, mode: modeProp, ...props }, ref) => {
   const mode = modeProp ?? useUIVariant();
   const bar = /* @__PURE__ */ jsx(
     ProgressPrimitive.Root,
@@ -3862,7 +3991,7 @@ var Progress = React37.forwardRef(({ className, value, disabled = false, mode: m
   return bar;
 });
 Progress.displayName = ProgressPrimitive.Root.displayName;
-var RadioGroup4 = React37.forwardRef(({ className, ...props }, ref) => {
+var RadioGroup4 = React38.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
@@ -3873,7 +4002,7 @@ var RadioGroup4 = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroup4.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React37.forwardRef(({ className, mode: modeProp, ...props }, ref) => {
+var RadioGroupItem = React38.forwardRef(({ className, mode: modeProp, ...props }, ref) => {
   const mode = modeProp ?? useUIVariant();
   if (mode === "playful") {
     return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex", children: [
@@ -3940,7 +4069,7 @@ var ResizableHandle = ({
     children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx(GripVertical, { className: "h-2.5 w-2.5" }) })
   }
 );
-var ScrollArea = React37.forwardRef(({ className, children, scrollbars = "vertical", ...props }, ref) => /* @__PURE__ */ jsxs(
+var ScrollArea = React38.forwardRef(({ className, children, scrollbars = "vertical", ...props }, ref) => /* @__PURE__ */ jsxs(
   ScrollAreaPrimitive.Root,
   {
     ref,
@@ -3955,7 +4084,7 @@ var ScrollArea = React37.forwardRef(({ className, children, scrollbars = "vertic
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React37.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React38.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -3974,7 +4103,7 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React37.forwardRef(({ className, children, mode: modeProp, size = "default", ...props }, ref) => {
+var SelectTrigger = React38.forwardRef(({ className, children, mode: modeProp, size = "default", ...props }, ref) => {
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? inheritedMode;
   return /* @__PURE__ */ jsxs(
@@ -3999,7 +4128,7 @@ var SelectTrigger = React37.forwardRef(({ className, children, mode: modeProp, s
   );
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -4012,7 +4141,7 @@ var SelectScrollUpButton = React37.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -4025,7 +4154,7 @@ var SelectScrollDownButton = React37.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React37.forwardRef(({ className, children, position = "popper", mode: modeProp, ...props }, ref) => {
+var SelectContent = React38.forwardRef(({ className, children, position = "popper", mode: modeProp, ...props }, ref) => {
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? inheritedMode;
   return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
@@ -4060,7 +4189,7 @@ var SelectContent = React37.forwardRef(({ className, children, position = "poppe
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -4069,7 +4198,7 @@ var SelectLabel = React37.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React37.forwardRef(({ className, children, ...props }, ref) => {
+var SelectItem = React38.forwardRef(({ className, children, ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Item,
@@ -4090,7 +4219,7 @@ var SelectItem = React37.forwardRef(({ className, children, ...props }, ref) =>
   );
 });
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -4103,7 +4232,7 @@ var Sheet = DialogPrimitive.Root;
 var SheetTrigger = DialogPrimitive.Trigger;
 var SheetClose = DialogPrimitive.Close;
 var SheetPortal = DialogPrimitive.Portal;
-var SheetOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetOverlay = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     className: cn(
@@ -4143,7 +4272,7 @@ var sideRoundingPlayful = {
   top: "rounded-b-xl",
   bottom: "rounded-t-xl"
 };
-var SheetContent = React37.forwardRef(({ side = "right", className, children, container, mode: modeProp, ...props }, ref) => {
+var SheetContent = React38.forwardRef(({ side = "right", className, children, container, mode: modeProp, ...props }, ref) => {
   const mode = modeProp ?? useUIVariant();
   return /* @__PURE__ */ jsxs(SheetPortal, { container: container ?? void 0, children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
@@ -4198,7 +4327,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -4207,7 +4336,7 @@ var SheetTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = DialogPrimitive.Title.displayName;
-var SheetDescription = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetDescription = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -4218,8 +4347,8 @@ var SheetDescription = React37.forwardRef(({ className, ...props }, ref) => /* @
 SheetDescription.displayName = DialogPrimitive.Description.displayName;
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React37.useState(void 0);
-  React37.useEffect(() => {
+  const [isMobile, setIsMobile] = React38.useState(void 0);
+  React38.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -4245,7 +4374,7 @@ function Skeleton({
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip2 = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React37.forwardRef(({ className, sideOffset = 4, mode: modeProp, children, ...props }, ref) => {
+var TooltipContent = React38.forwardRef(({ className, sideOffset = 4, mode: modeProp, children, ...props }, ref) => {
   const mode = modeProp ?? useUIVariant();
   return /* @__PURE__ */ jsx(
     TooltipPrimitive.Content,
@@ -4271,15 +4400,15 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React37.createContext(null);
+var SidebarContext = React38.createContext(null);
 function useSidebar() {
-  const context = React37.useContext(SidebarContext);
+  const context = React38.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React37.forwardRef(
+var SidebarProvider = React38.forwardRef(
   ({
     defaultOpen = true,
     open: openProp,
@@ -4294,14 +4423,14 @@ var SidebarProvider = React37.forwardRef(
     ...props
   }, ref) => {
     const viewportIsMobile = useIsMobile();
-    const wrapperRef = React37.useRef(null);
-    const [portalContainer, setPortalContainer] = React37.useState(null);
-    const [isContainerMobile, setIsContainerMobile] = React37.useState(null);
+    const wrapperRef = React38.useRef(null);
+    const [portalContainer, setPortalContainer] = React38.useState(null);
+    const [isContainerMobile, setIsContainerMobile] = React38.useState(null);
     const isMobile = isContainerMobile ?? viewportIsMobile;
-    const [openMobile, setOpenMobile] = React37.useState(false);
-    const [_open, _setOpen] = React37.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React38.useState(false);
+    const [_open, _setOpen] = React38.useState(defaultOpen);
     const open = openProp ?? _open;
-    const setOpen = React37.useCallback(
+    const setOpen = React38.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -4313,10 +4442,10 @@ var SidebarProvider = React37.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React37.useCallback(() => {
+    const toggleSidebar = React38.useCallback(() => {
       return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
     }, [isMobile, setOpen, setOpenMobile]);
-    React37.useEffect(() => {
+    React38.useEffect(() => {
       const node = wrapperRef.current;
       if (!node) return;
       setPortalContainer(node.ownerDocument?.body ?? null);
@@ -4336,7 +4465,7 @@ var SidebarProvider = React37.forwardRef(
       observer.observe(node);
       return () => observer.disconnect();
     }, [mobileBreakpoint]);
-    React37.useEffect(() => {
+    React38.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -4347,7 +4476,7 @@ var SidebarProvider = React37.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React37.useMemo(
+    const contextValue = React38.useMemo(
       () => ({
         state,
         open,
@@ -4397,7 +4526,7 @@ var SidebarProvider = React37.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React37.forwardRef(
+var Sidebar = React38.forwardRef(
   ({
     side = "left",
     variant = "sidebar",
@@ -4531,7 +4660,7 @@ var Sidebar = React37.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React37.forwardRef(({ className, onClick, ...props }, ref) => {
+var SidebarTrigger = React38.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsxs(
     Button,
@@ -4554,7 +4683,7 @@ var SidebarTrigger = React37.forwardRef(({ className, onClick, ...props }, ref)
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React37.forwardRef(({ className, ...props }, ref) => {
+var SidebarRail = React38.forwardRef(({ className, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
   return /* @__PURE__ */ jsx(
     "button",
@@ -4579,7 +4708,7 @@ var SidebarRail = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React37.forwardRef(({ className, ...props }, ref) => {
+var SidebarInset = React38.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "main",
     {
@@ -4596,7 +4725,7 @@ var SidebarInset = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React37.forwardRef(({ className, ...props }, ref) => {
+var SidebarInput = React38.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     Input,
     {
@@ -4611,7 +4740,7 @@ var SidebarInput = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React37.forwardRef(({ className, ...props }, ref) => {
+var SidebarHeader = React38.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -4623,7 +4752,7 @@ var SidebarHeader = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React37.forwardRef(({ className, ...props }, ref) => {
+var SidebarFooter = React38.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -4635,7 +4764,7 @@ var SidebarFooter = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React37.forwardRef(({ className, ...props }, ref) => {
+var SidebarSeparator = React38.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     Separator,
     {
@@ -4647,7 +4776,7 @@ var SidebarSeparator = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React37.forwardRef(({ className, ...props }, ref) => {
+var SidebarContent = React38.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -4662,7 +4791,7 @@ var SidebarContent = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React37.forwardRef(({ className, ...props }, ref) => {
+var SidebarGroup = React38.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -4674,7 +4803,7 @@ var SidebarGroup = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React37.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupLabel = React38.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "div";
   return /* @__PURE__ */ jsx(
     Comp,
@@ -4691,7 +4820,7 @@ var SidebarGroupLabel = React37.forwardRef(({ className, asChild = false, ...pro
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React37.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupAction = React38.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx(
     Comp,
@@ -4710,7 +4839,7 @@ var SidebarGroupAction = React37.forwardRef(({ className, asChild = false, ...pr
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SidebarGroupContent = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -4720,7 +4849,7 @@ var SidebarGroupContent = React37.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SidebarMenu = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "ul",
   {
     ref,
@@ -4730,7 +4859,7 @@ var SidebarMenu = React37.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SidebarMenuItem = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "li",
   {
     ref,
@@ -4765,7 +4894,7 @@ var sidebarMenuButtonVariants = cva(
     }
   }
 );
-var SidebarMenuButton = React37.forwardRef(
+var SidebarMenuButton = React38.forwardRef(
   ({
     asChild = false,
     isActive = false,
@@ -4833,7 +4962,7 @@ var SidebarMenuButton = React37.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React37.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+var SidebarMenuAction = React38.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx(
     Comp,
@@ -4856,7 +4985,7 @@ var SidebarMenuAction = React37.forwardRef(({ className, asChild = false, showOn
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SidebarMenuBadge = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -4874,8 +5003,8 @@ var SidebarMenuBadge = React37.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React37.forwardRef(({ className, showIcon = false, ...props }, ref) => {
-  const width = React37.useMemo(() => {
+var SidebarMenuSkeleton = React38.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+  const width = React38.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -4908,7 +5037,7 @@ var SidebarMenuSkeleton = React37.forwardRef(({ className, showIcon = false, ...
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SidebarMenuSub = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "ul",
   {
     ref,
@@ -4922,9 +5051,9 @@ var SidebarMenuSub = React37.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React37.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, ...props }));
+var SidebarMenuSubItem = React38.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React37.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+var SidebarMenuSubButton = React38.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
   const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
     Comp,
@@ -4956,7 +5085,7 @@ var sliderThumbSizes = {
   default: "h-5 w-5",
   lg: "h-6 w-6"
 };
-var Slider = React37.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(
+var Slider = React38.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(
   SliderPrimitive.Root,
   {
     ref,
@@ -4989,10 +5118,57 @@ var Slider = React37.forwardRef(({ className, size = "default", ...props }, ref)
   }
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
+function useDocumentTheme() {
+  const [theme, setTheme] = React38.useState("light");
+  React38.useEffect(() => {
+    const root = document.documentElement;
+    const read = () => setTheme(
+      root.classList.contains("dark") || root.dataset.theme === "dark" ? "dark" : "light"
+    );
+    read();
+    const observer = new MutationObserver(read);
+    observer.observe(root, { attributes: true, attributeFilter: ["class", "data-theme"] });
+    return () => observer.disconnect();
+  }, []);
+  return theme;
+}
 var Toaster = ({ mode: modeProp, className, style, ...props }) => {
-  const { theme = "system" } = useTheme();
-  const mode = modeProp ?? useUIVariant();
+  const theme = useDocumentTheme();
+  const ctxVariant = useUIVariant();
+  const mode = modeProp ?? ctxVariant;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        [data-sonner-toaster] {
+          --toast-close-button-start: unset;
+          --toast-close-button-end: 0.5rem;
+          --toast-close-button-transform: translateY(0.5rem);
+        }
+        [data-sonner-toaster] [data-sonner-toast][data-styled='true'] [data-close-button] {
+          height: 1.25rem;
+          width: 1.25rem;
+          padding: 0;
+          border: none;
+          border-radius: var(--radius-sm);
+          background: transparent;
+          /* Inherited rather than a fixed token: on a richColors toast the
+             text is already the only colour guaranteed to read against that
+             background, so borrowing it keeps the button legible on every
+             variant without a rule per type. */
+          color: inherit;
+          opacity: 0.6;
+          transition: opacity 150ms ease, background-color 150ms ease;
+        }
+        [data-sonner-toaster] [data-sonner-toast][data-styled='true'] [data-close-button] svg {
+          height: 0.75rem;
+          width: 0.75rem;
+        }
+        [data-sonner-toaster] [data-sonner-toast][data-styled='true']:hover [data-close-button]:hover {
+          background: color-mix(in oklab, currentColor 12%, transparent);
+          border-color: transparent;
+          color: inherit;
+          opacity: 1;
+        }
+      ` }),
     mode === "smooth" && /* @__PURE__ */ jsx("style", { children: `[data-sonner-toaster].toaster-smooth { --border-radius: 1.5rem; }` }),
     mode === "playful" && /* @__PURE__ */ jsx("style", { children: `
           [data-sonner-toaster].toaster-playful [data-sonner-toast][data-mounted=true] {
@@ -5067,7 +5243,7 @@ function StatusIndicator({
   children,
   ...props
 }) {
-  const hasAccessibleLabel = props["aria-label"] != null || props["aria-labelledby"] != null || React37.Children.count(children) > 0;
+  const hasAccessibleLabel = props["aria-label"] != null || props["aria-labelledby"] != null || React38.Children.count(children) > 0;
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -5118,7 +5294,7 @@ var switchSizes = {
     thumb: "size-6 data-[state=checked]:translate-x-7"
   }
 };
-var Switch = React37.forwardRef(({ className, size = "default", mode: modeProp, ...props }, ref) => {
+var Switch = React38.forwardRef(({ className, size = "default", mode: modeProp, ...props }, ref) => {
   const mode = modeProp ?? useUIVariant();
   const sizes = switchSizes[size];
   if (mode === "playful") {
@@ -5176,7 +5352,7 @@ var Switch = React37.forwardRef(({ className, size = "default", mode: modeProp,
   );
 });
 Switch.displayName = SwitchPrimitives.Root.displayName;
-var TableSizeContext = React37.createContext("default");
+var TableSizeContext = React38.createContext("default");
 var tableTextSizes = {
   sm: "text-xs",
   default: "text-sm",
@@ -5197,7 +5373,7 @@ var tableCaptionSizes = {
   default: "mt-4 text-sm",
   lg: "mt-4 text-sm"
 };
-var Table = React37.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
+var Table = React38.forwardRef(({ className, size = "default", ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
   "table",
   {
     ref,
@@ -5206,9 +5382,9 @@ var Table = React37.forwardRef(({ className, size = "default", ...props }, ref)
   }
 ) }) }));
 Table.displayName = "Table";
-var TableHeader = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableBody = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
   {
     ref,
@@ -5217,7 +5393,7 @@ var TableBody = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -5229,7 +5405,7 @@ var TableFooter = React37.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableRow = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
     ref,
@@ -5241,8 +5417,8 @@ var TableRow = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React37.forwardRef(({ className, ...props }, ref) => {
-  const size = React37.useContext(TableSizeContext);
+var TableHead = React38.forwardRef(({ className, ...props }, ref) => {
+  const size = React38.useContext(TableSizeContext);
   return /* @__PURE__ */ jsx(
     "th",
     {
@@ -5257,8 +5433,8 @@ var TableHead = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableHead.displayName = "TableHead";
-var TableCell = React37.forwardRef(({ className, ...props }, ref) => {
-  const size = React37.useContext(TableSizeContext);
+var TableCell = React38.forwardRef(({ className, ...props }, ref) => {
+  const size = React38.useContext(TableSizeContext);
   return /* @__PURE__ */ jsx(
     "td",
     {
@@ -5273,8 +5449,8 @@ var TableCell = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableCaption = React37.forwardRef(({ className, ...props }, ref) => {
-  const size = React37.useContext(TableSizeContext);
+var TableCaption = React38.forwardRef(({ className, ...props }, ref) => {
+  const size = React38.useContext(TableSizeContext);
   return /* @__PURE__ */ jsx(
     "caption",
     {
@@ -5285,7 +5461,7 @@ var TableCaption = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableCaption.displayName = "TableCaption";
-var TabsSizeContext = React37.createContext("default");
+var TabsSizeContext = React38.createContext("default");
 var tabsListSizes = {
   sm: "h-8 p-1",
   default: "h-10 p-1",
@@ -5296,13 +5472,13 @@ var tabsTriggerSizes = {
   default: "px-3 py-1.5 text-sm",
   lg: "px-4 py-2 text-sm"
 };
-var Tabs = React37.forwardRef(({ mode: modeProp, ...props }, ref) => {
+var Tabs = React38.forwardRef(({ mode: modeProp, ...props }, ref) => {
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? inheritedMode;
   return /* @__PURE__ */ jsx(UIVariantProvider, { mode, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props }) });
 });
 Tabs.displayName = TabsPrimitive.Root.displayName;
-var TabsList = React37.forwardRef(({ className, size = "default", ...props }, ref) => {
+var TabsList = React38.forwardRef(({ className, size = "default", ...props }, ref) => {
   const mode = useUIVariant();
   return /* @__PURE__ */ jsx(TabsSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
     TabsPrimitive.List,
@@ -5320,8 +5496,8 @@ var TabsList = React37.forwardRef(({ className, size = "default", ...props }, re
   ) });
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React37.forwardRef(({ className, ...props }, ref) => {
-  const size = React37.useContext(TabsSizeContext);
+var TabsTrigger = React38.forwardRef(({ className, ...props }, ref) => {
+  const size = React38.useContext(TabsSizeContext);
   const mode = useUIVariant();
   const trigger = /* @__PURE__ */ jsx(
     TabsPrimitive.Trigger,
@@ -5352,7 +5528,7 @@ var TabsTrigger = React37.forwardRef(({ className, ...props }, ref) => {
   return trigger;
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsContent = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
@@ -5384,7 +5560,7 @@ var toggleVariants = cva(
     }
   }
 );
-var Toggle = React37.forwardRef(({ className, variant, size, mode: modeProp, ...props }, ref) => {
+var Toggle = React38.forwardRef(({ className, variant, size, mode: modeProp, ...props }, ref) => {
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? inheritedMode;
   const toggle = /* @__PURE__ */ jsx(
@@ -5415,11 +5591,11 @@ var Toggle = React37.forwardRef(({ className, variant, size, mode: modeProp, ...
   return toggle;
 });
 Toggle.displayName = TogglePrimitive.Root.displayName;
-var ToggleGroupContext = React37.createContext({
+var ToggleGroupContext = React38.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React37.forwardRef(({ className, variant, size, mode: modeProp, children, ...props }, ref) => {
+var ToggleGroup = React38.forwardRef(({ className, variant, size, mode: modeProp, children, ...props }, ref) => {
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? inheritedMode;
   return /* @__PURE__ */ jsx(UIVariantProvider, { mode, children: /* @__PURE__ */ jsx(
@@ -5433,8 +5609,8 @@ var ToggleGroup = React37.forwardRef(({ className, variant, size, mode: modeProp
   ) });
 });
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React37.forwardRef(({ className, children, variant, size, mode: modeProp, ...props }, ref) => {
-  const context = React37.useContext(ToggleGroupContext);
+var ToggleGroupItem = React38.forwardRef(({ className, children, variant, size, mode: modeProp, ...props }, ref) => {
+  const context = React38.useContext(ToggleGroupContext);
   const inheritedMode = useUIVariant();
   const mode = modeProp ?? context.mode ?? inheritedMode;
   const item = /* @__PURE__ */ jsx(
@@ -6971,7 +7147,7 @@ function AsciiText({
               const isAccent = accentCols.has(cell.col);
               const multiAccentColor = multiAccentCols?.get(cell.col);
               const shineAlpha = shineBounds && shineCols.has(cell.col) ? getShineAlpha(cell.col, cell.row, 0.2, shineBounds) * (cell.ch === "\u2591" ? 0.55 : 1) : 0;
-              return /* @__PURE__ */ jsxs(React37.Fragment, { children: [
+              return /* @__PURE__ */ jsxs(React38.Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   "rect",
                   {
@@ -7179,6 +7355,6 @@ function Enchanted({ children, className, hoverOnly = false, glintClassName, ...
   ] });
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AsciiText, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Enchanted, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item4 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label3 as Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup4 as RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, 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, StatusIndicator, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeScript, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UIVariantProvider, badgeVariants, buttonGroupVariants, buttonVariants, cn, fireConfetti, navigationMenuTriggerStyle, statusIndicatorDotVariants, toggleVariants, useCopyToClipboard, useFormField, useIsMobile, useSidebar, useUIVariant };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AsciiText, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Enchanted, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item4 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label3 as Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup4 as RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, 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, StatusIndicator, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeScript, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UIVariantProvider, badgeVariants, buttonGroupVariants, buttonVariants, cn, fireConfetti, inputBase, inputPlayfulBacking, navigationMenuTriggerStyle, statusIndicatorDotVariants, toggleVariants, useCopyToClipboard, useFormField, useIsMobile, useSidebar, useUIVariant };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map