@hanzo/ui 5.3.33 → 5.3.35

package/dist/primitives-export.js

@@ -9,8 +9,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
-var React2 = require('react');
+var React19 = require('react');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
+var SeparatorPrimitive = require('@radix-ui/react-separator');
 var useEmblaCarousel = require('embla-carousel-react');
 var cmdk = require('cmdk');
 var SheetPrimitive = require('@radix-ui/react-dialog');
@@ -18,7 +19,6 @@ var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
 var vaul = require('vaul');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-var SeparatorPrimitive = require('@radix-ui/react-separator');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var inputOtp = require('input-otp');
 var MenubarPrimitive = require('@radix-ui/react-menubar');
@@ -67,14 +67,14 @@ function _interopNamespace(e) {
 
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
-var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var React19__namespace = /*#__PURE__*/_interopNamespace(React19);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
+var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
-var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
 var MenubarPrimitive__namespace = /*#__PURE__*/_interopNamespace(MenubarPrimitive);
 var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
@@ -147,15 +147,15 @@ var AccordionContent = /* @__PURE__ */ __name(({
 ), "AccordionContent");
 AccordionContent.displayName = AccordionPrimitive__namespace.Content.displayName;
 var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
         // Keep the additional Hanzo variants for backward compatibility
         primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
@@ -163,10 +163,12 @@ var buttonVariants = classVarianceAuthority.cva(
         linkMuted: "text-muted-foreground underline-offset-4 hover:underline hover:text-foreground"
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9"
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
       }
     },
     defaultVariants: {
@@ -175,12 +177,15 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React2__namespace.forwardRef(
-  ({ className, variant, size, asChild = false, isLoading = false, children, ...props }, ref) => {
+var Button = React19__namespace.forwardRef(
+  ({ className, variant = "default", size = "default", asChild = false, isLoading = false, children, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Comp,
       {
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
         className: cn(buttonVariants({ variant, size, className })),
         ref,
         ...props,
@@ -188,10 +193,10 @@ var Button = React2__namespace.forwardRef(
           isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.Loader2,
             {
-              className: cn("h-4 w-4 animate-spin", size !== "icon" && "mr-2")
+              className: cn("h-4 w-4 animate-spin", size !== "icon" && size !== "icon-sm" && size !== "icon-lg" && "mr-2")
             }
           ) : null,
-          isLoading && size === "icon" ? null : children
+          isLoading && (size === "icon" || size === "icon-sm" || size === "icon-lg") ? null : children
         ]
       }
     );
@@ -317,16 +322,17 @@ var AlertDialogCancel = /* @__PURE__ */ __name(({
 ), "AlertDialogCancel");
 AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
 var alertVariants = classVarianceAuthority.cva(
-  "[&>svg]:text-text-default relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7",
+  "group/alert relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7 [&>svg]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-bg-tertiary text-text-default",
-        info: "text-text-secondary [&>svg]:text-text-secondary bg-gray-250 border-gray-100 border-gray-200",
-        destructive: "border-[#4d0408] bg-[#2d0607] text-[#ff9ea1] [&>svg]:text-[#ff9ea1]",
-        warning: "border-yellow-800 bg-yellow-900 text-yellow-400 [&>svg]:text-yellow-400",
-        success: "border-green-800 bg-green-900 text-green-400 [&>svg]:text-green-400",
-        download: "border-gray-800 bg-gray-900 text-cyan-400 [&>svg]:text-cyan-400"
+        default: "bg-background text-foreground [&>svg]:text-foreground",
+        destructive: "border-destructive/50 text-destructive bg-destructive/10 dark:border-destructive [&>svg]:text-destructive",
+        // Hanzo-specific variants for backward compatibility
+        info: "text-muted-foreground bg-muted border-border [&>svg]:text-muted-foreground",
+        warning: "border-yellow-500/50 bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-400",
+        success: "border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-400 [&>svg]:text-green-600 dark:[&>svg]:text-green-400",
+        download: "border-cyan-500/50 bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 [&>svg]:text-cyan-600 dark:[&>svg]:text-cyan-400"
       }
     },
     defaultVariants: {
@@ -334,38 +340,65 @@ var alertVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Alert = /* @__PURE__ */ __name(({ className, variant, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn(alertVariants({ variant }), className),
-    ref,
-    role: "alert",
-    ...props
-  }
-), "Alert");
-Alert.displayName = "Alert";
-var AlertTitle = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "h5",
-  {
-    className: cn("mb-1 leading-none font-medium tracking-tight", className),
-    ref,
-    ...props
-  }
-), "AlertTitle");
-AlertTitle.displayName = "AlertTitle";
-var AlertDescription = /* @__PURE__ */ __name(({
+function Alert({
   className,
-  ref,
+  variant = "default",
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn("text-sm [&_p]:leading-relaxed", className),
-    ref,
-    ...props
-  }
-), "AlertDescription");
-AlertDescription.displayName = "AlertDescription";
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert",
+      "data-variant": variant,
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+__name(Alert, "Alert");
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn(
+        "mb-1 leading-none font-medium tracking-tight [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(AlertTitle, "AlertTitle");
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn(
+        "text-sm [&_p]:leading-relaxed [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(AlertDescription, "AlertDescription");
+function AlertAction({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "alert-action",
+      className: cn("mt-3 flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+__name(AlertAction, "AlertAction");
 var Avatar = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   AvatarPrimitive__namespace.Root,
   {
@@ -483,63 +516,180 @@ var BreadcrumbEllipsis = /* @__PURE__ */ __name(({
   }
 ), "BreadcrumbEllipsis");
 BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-var Card = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(Card, "Card");
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(CardHeader, "CardHeader");
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+__name(CardTitle, "CardTitle");
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+__name(CardDescription, "CardDescription");
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(CardAction, "CardAction");
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+__name(CardContent, "CardContent");
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      ...props
+    }
+  );
+}
+__name(CardFooter, "CardFooter");
+var Separator = /* @__PURE__ */ __name(({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  SeparatorPrimitive__namespace.Root,
   {
     className: cn(
-      "bg-card text-card-foreground rounded-lg border shadow-xs",
+      "bg-divider shrink-0",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
       className
     ),
-    ref,
-    ...props
-  }
-), "Card");
-Card.displayName = "Card";
-var CardHeader = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ref,
+    decorative,
+    orientation,
     ...props
   }
-), "CardHeader");
-CardHeader.displayName = "CardHeader";
-var CardTitle = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "h3",
+), "Separator");
+Separator.displayName = SeparatorPrimitive__namespace.Root.displayName;
+var separator_default = Separator;
+var buttonGroupVariants = classVarianceAuthority.cva(
+  'flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*="w-"])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2',
   {
-    className: cn(
-      "text-2xl leading-none font-semibold tracking-tight",
-      className
-    ),
-    ref,
-    ...props
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
   }
-), "CardTitle");
-CardTitle.displayName = "CardTitle";
-var CardDescription = /* @__PURE__ */ __name(({
+);
+function ButtonGroup({
   className,
-  ref,
+  orientation,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "p",
-  {
-    className: cn("text-text-secondary text-sm", className),
-    ref,
-    ...props
-  }
-), "CardDescription");
-CardDescription.displayName = "CardDescription";
-var CardContent = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 pt-0", className), ref, ...props }), "CardContent");
-CardContent.displayName = "CardContent";
-var CardFooter = /* @__PURE__ */ __name(({ className, ref, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn("flex items-center p-6 pt-0", className),
-    ref,
-    ...props
-  }
-), "CardFooter");
-CardFooter.displayName = "CardFooter";
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+__name(ButtonGroup, "ButtonGroup");
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      className: cn(
+        'bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4',
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(ButtonGroupText, "ButtonGroupText");
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Separator,
+    {
+      "data-slot": "button-group-separator",
+      orientation,
+      className: cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(ButtonGroupSeparator, "ButtonGroupSeparator");
 
 // util/copy-to-clipboard.ts
 async function copyToClipboard(text) {
@@ -603,15 +753,15 @@ function constrain(value, minOrConstrainTo, max) {
   throw new Error("Invalid parameters for constrain function");
 }
 __name(constrain, "constrain");
-var CarouselContext = React2__namespace.createContext(null);
+var CarouselContext = React19__namespace.createContext(null);
 var useCarousel = /* @__PURE__ */ __name(() => {
-  const service = React2__namespace.useContext(CarouselContext);
+  const service = React19__namespace.useContext(CarouselContext);
   if (!service) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
   return service;
 }, "useCarousel");
-var Carousel = React2__namespace.forwardRef(
+var Carousel = React19__namespace.forwardRef(
   ({
     orientation = "horizontal",
     options,
@@ -623,9 +773,9 @@ var Carousel = React2__namespace.forwardRef(
     ...props
   }, ref) => {
     const [carouselRef, api] = useEmblaCarousel__default.default({ ...options, axis: orientation === "horizontal" ? "x" : "y" }, plugins);
-    const [canScrollPrev, setCanScrollPrev] = React2__namespace.useState(false);
-    const [canScrollNext, setCanScrollNext] = React2__namespace.useState(false);
-    const onSelect = React2__namespace.useCallback((api2) => {
+    const [canScrollPrev, setCanScrollPrev] = React19__namespace.useState(false);
+    const [canScrollNext, setCanScrollNext] = React19__namespace.useState(false);
+    const onSelect = React19__namespace.useCallback((api2) => {
       if (!api2) {
         return;
       }
@@ -635,13 +785,13 @@ var Carousel = React2__namespace.forwardRef(
         onCarouselSelect(api2);
       }
     }, []);
-    const scrollPrev = React2__namespace.useCallback(() => {
+    const scrollPrev = React19__namespace.useCallback(() => {
       api?.scrollPrev();
     }, [api]);
-    const scrollNext = React2__namespace.useCallback(() => {
+    const scrollNext = React19__namespace.useCallback(() => {
       api?.scrollNext();
     }, [api]);
-    const handleKeyDown = React2__namespace.useCallback((event) => {
+    const handleKeyDown = React19__namespace.useCallback((event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
         scrollPrev();
@@ -650,13 +800,13 @@ var Carousel = React2__namespace.forwardRef(
         scrollNext();
       }
     }, [scrollPrev, scrollNext]);
-    React2__namespace.useEffect(() => {
+    React19__namespace.useEffect(() => {
       if (!api || !setApi) {
         return;
       }
       setApi(api);
     }, [api, setApi]);
-    React2__namespace.useEffect(() => {
+    React19__namespace.useEffect(() => {
       if (!api) {
         return;
       }
@@ -698,7 +848,7 @@ var Carousel = React2__namespace.forwardRef(
   }
 );
 Carousel.displayName = "Carousel";
-var CarouselContent = React2__namespace.forwardRef(({ className, ...props }, ref) => {
+var CarouselContent = React19__namespace.forwardRef(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: carouselRef, className: "overflow-hidden", "data-vaul-no-drag": true, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -714,7 +864,7 @@ var CarouselContent = React2__namespace.forwardRef(({ className, ...props }, ref
   ) });
 });
 CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React2__namespace.forwardRef(({ className, ...props }, ref) => {
+var CarouselItem = React19__namespace.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -733,7 +883,7 @@ var CarouselItem = React2__namespace.forwardRef(({ className, ...props }, ref) =
   );
 });
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React2__namespace.forwardRef(({ className, variant = "ghost", size = "icon", ...props }, ref) => {
+var CarouselPrevious = React19__namespace.forwardRef(({ className, variant = "ghost", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     button_default,
@@ -757,7 +907,7 @@ var CarouselPrevious = React2__namespace.forwardRef(({ className, variant = "gho
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React2__namespace.forwardRef(({ className, variant = "ghost", size = "icon", ...props }, ref) => {
+var CarouselNext = React19__namespace.forwardRef(({ className, variant = "ghost", size = "icon", ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     button_default,
@@ -781,112 +931,145 @@ var CarouselNext = React2__namespace.forwardRef(({ className, variant = "ghost",
   );
 });
 CarouselNext.displayName = "CarouselNext";
-var Dialog = SheetPrimitive__namespace.Root;
-var DialogTrigger = SheetPrimitive__namespace.Trigger;
-var DialogPortal = SheetPrimitive__namespace.Portal;
-var DialogOverlay = /* @__PURE__ */ __name(({
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
+}
+__name(Dialog, "Dialog");
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+__name(DialogTrigger, "DialogTrigger");
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
+}
+__name(DialogPortal, "DialogPortal");
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Close, { "data-slot": "dialog-close", ...props });
+}
+__name(DialogClose, "DialogClose");
+function DialogOverlay({
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  SheetPrimitive__namespace.Overlay,
-  {
-    className: cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50",
-      "bg-bg-dark/90",
-      className
-    ),
-    ...props
-  }
-), "DialogOverlay");
-DialogOverlay.displayName = SheetPrimitive__namespace.Overlay.displayName;
-var DialogContent = /* @__PURE__ */ __name(({
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SheetPrimitive__namespace.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 isolate z-50",
+        "bg-black/80",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(DialogOverlay, "DialogOverlay");
+function DialogContent({
   className,
   children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      SheetPrimitive__namespace.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg duration-200",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon-sm",
+              className: "absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+__name(DialogContent, "DialogContent");
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-1.5 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+__name(DialogHeader, "DialogHeader");
+function DialogFooter({
+  className,
   showCloseButton = false,
+  children,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxRuntime.jsxs(
-    SheetPrimitive__namespace.Content,
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
+      "data-slot": "dialog-footer",
       className: cn(
-        "bg-bg-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 border-divider fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          SheetPrimitive__namespace.Close,
-          {
-            className: cn(
-              "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-text-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
-              !showCloseButton && "hidden"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-            ]
-          }
-        )
+        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(SheetPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", children: "Close" }) })
       ]
     }
-  )
-] }), "DialogContent");
-DialogContent.displayName = SheetPrimitive__namespace.Content.displayName;
-var DialogHeader = /* @__PURE__ */ __name(({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-), "DialogHeader");
-DialogHeader.displayName = "DialogHeader";
-var DialogFooter = /* @__PURE__ */ __name(({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    ),
-    ...props
-  }
-), "DialogFooter");
-DialogFooter.displayName = "DialogFooter";
-var DialogTitle = /* @__PURE__ */ __name(({
+  );
+}
+__name(DialogFooter, "DialogFooter");
+function DialogTitle({
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  SheetPrimitive__namespace.Title,
-  {
-    className: cn(
-      "text-lg leading-none font-semibold tracking-tight",
-      className
-    ),
-    ...props
-  }
-), "DialogTitle");
-DialogTitle.displayName = SheetPrimitive__namespace.Title.displayName;
-var DialogDescription = /* @__PURE__ */ __name(({
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SheetPrimitive__namespace.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold tracking-tight", className),
+      ...props
+    }
+  );
+}
+__name(DialogTitle, "DialogTitle");
+function DialogDescription({
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  SheetPrimitive__namespace.Description,
-  {
-    className: cn("text-text-secondary text-sm", className),
-    ...props
-  }
-), "DialogDescription");
-DialogDescription.displayName = SheetPrimitive__namespace.Description.displayName;
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SheetPrimitive__namespace.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+__name(DialogDescription, "DialogDescription");
 var Command = /* @__PURE__ */ __name(({
   className,
   ...props
@@ -1246,6 +1429,103 @@ var DrawerDescription = /* @__PURE__ */ __name(({
   }
 ), "DrawerDescription");
 DrawerDescription.displayName = vaul.Drawer.Description.displayName;
+function Empty({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "empty",
+      className: cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(Empty, "Empty");
+function EmptyHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "empty-header",
+      className: cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(EmptyHeader, "EmptyHeader");
+var emptyMediaVariants = classVarianceAuthority.cva(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: 'bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*="size-"])]:size-6'
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "empty-icon",
+      "data-variant": variant,
+      className: cn(emptyMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+__name(EmptyMedia, "EmptyMedia");
+function EmptyTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "empty-title",
+      className: cn("text-lg font-medium tracking-tight", className),
+      ...props
+    }
+  );
+}
+__name(EmptyTitle, "EmptyTitle");
+function EmptyDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "empty-description",
+      className: cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(EmptyDescription, "EmptyDescription");
+function EmptyContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "empty-content",
+      className: cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(EmptyContent, "EmptyContent");
 var DropdownMenu = DropdownMenuPrimitive__namespace.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
@@ -1397,27 +1677,7 @@ var DropdownMenuShortcut = /* @__PURE__ */ __name(({
   );
 }, "DropdownMenuShortcut");
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var Separator3 = /* @__PURE__ */ __name(({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  SeparatorPrimitive__namespace.Root,
-  {
-    className: cn(
-      "bg-divider shrink-0",
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-      className
-    ),
-    decorative,
-    orientation,
-    ...props
-  }
-), "Separator");
-Separator3.displayName = SeparatorPrimitive__namespace.Root.displayName;
-var separator_default = Separator3;
-var Field = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Field = React19__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1427,7 +1687,7 @@ var Field = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 Field.displayName = "Field";
-var FieldLabel = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var FieldLabel = React19__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "label",
   {
     ref,
@@ -1440,7 +1700,7 @@ var FieldLabel = React2__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 FieldLabel.displayName = "FieldLabel";
-var FieldDescription = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var FieldDescription = React19__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "p",
   {
     ref,
@@ -1454,7 +1714,7 @@ var FieldDescription = React2__namespace.forwardRef(({ className, ...props }, re
   }
 ));
 FieldDescription.displayName = "FieldDescription";
-var FieldGroup = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var FieldGroup = React19__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1468,7 +1728,7 @@ var FieldGroup = React2__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 FieldGroup.displayName = "FieldGroup";
-var FieldSeparator = React2__namespace.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var FieldSeparator = React19__namespace.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
     ref,
@@ -1513,7 +1773,7 @@ var HoverCardContent = /* @__PURE__ */ __name(({
   }
 ), "HoverCardContent");
 HoverCardContent.displayName = HoverCardPrimitive__namespace.Content.displayName;
-var InputOTP = React2__namespace.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var InputOTP = React19__namespace.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   inputOtp.OTPInput,
   {
     ref,
@@ -1524,33 +1784,356 @@ var InputOTP = React2__namespace.forwardRef(({ className, containerClassName, ..
     className: cn("disabled:cursor-not-allowed", className),
     ...props
   }
-));
-InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center", className), ...props }));
-InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React2__namespace.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React2__namespace.useContext(inputOtp.OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+));
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React19__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center", className), ...props }));
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React19__namespace.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React19__namespace.useContext(inputOtp.OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React19__namespace.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Dot, {}) }));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(InputGroup, "InputGroup");
+var inputGroupAddonVariants = classVarianceAuthority.cva(
+  'text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*="size-"])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50',
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+__name(InputGroupAddon, "InputGroupAddon");
+var inputGroupButtonVariants = classVarianceAuthority.cva("text-sm shadow-none flex gap-2 items-center", {
+  variants: {
+    size: {
+      xs: 'h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*="size-"])]:size-3.5 has-[>svg]:px-2',
+      sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+    }
+  },
+  defaultVariants: {
+    size: "xs"
+  }
+});
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+__name(InputGroupButton, "InputGroupButton");
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4',
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(InputGroupText, "InputGroupText");
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent h-9 px-3 text-sm outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(InputGroupInput, "InputGroupInput");
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent px-3 text-sm outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(InputGroupTextarea, "InputGroupTextarea");
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "list",
+      "data-slot": "item-group",
+      className: cn("group/item-group flex flex-col", className),
+      ...props
+    }
+  );
+}
+__name(ItemGroup, "ItemGroup");
+function ItemSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Separator,
+    {
+      "data-slot": "item-separator",
+      orientation: "horizontal",
+      className: cn("my-0", className),
+      ...props
+    }
+  );
+}
+__name(ItemSeparator, "ItemSeparator");
+var itemVariants = classVarianceAuthority.cva(
+  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50"
+      },
+      size: {
+        default: "p-4 gap-4 ",
+        sm: "py-3 px-4 gap-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item4({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(itemVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+__name(Item4, "Item");
+var itemMediaVariants = classVarianceAuthority.cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: 'size-8 border rounded-sm bg-muted [&_svg:not([class*="size-"])]:size-4',
+        image: "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref,
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: cn(itemMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+__name(ItemMedia, "ItemMedia");
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-content",
       className: cn(
-        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-1 ring-ring",
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
         className
       ),
-      ...props,
-      children: [
-        char,
-        hasFakeCaret && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
-      ]
+      ...props
     }
   );
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React2__namespace.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Dot, {}) }));
-InputOTPSeparator.displayName = "InputOTPSeparator";
+}
+__name(ItemContent, "ItemContent");
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(ItemTitle, "ItemTitle");
+function ItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "item-description",
+      className: cn(
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(ItemDescription, "ItemDescription");
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: cn("flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+__name(ItemActions, "ItemActions");
+function ItemHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-header",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(ItemHeader, "ItemHeader");
+function ItemFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "item-footer",
+      className: cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(ItemFooter, "ItemFooter");
 function Kbd({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "kbd",
@@ -1608,7 +2191,7 @@ function MenubarSub({
   return /* @__PURE__ */ jsxRuntime.jsx(MenubarPrimitive__namespace.Sub, { "data-slot": "menubar-sub", ...props });
 }
 __name(MenubarSub, "MenubarSub");
-var Menubar = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Menubar = React19__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   MenubarPrimitive__namespace.Root,
   {
     ref,
@@ -1620,7 +2203,7 @@ var Menubar = React2__namespace.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 Menubar.displayName = MenubarPrimitive__namespace.Root.displayName;
-var MenubarTrigger = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var MenubarTrigger = React19__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   MenubarPrimitive__namespace.Trigger,
   {
     ref,
@@ -1632,7 +2215,7 @@ var MenubarTrigger = React2__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 MenubarTrigger.displayName = MenubarPrimitive__namespace.Trigger.displayName;
-var MenubarSubTrigger = React2__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var MenubarSubTrigger = React19__namespace.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   MenubarPrimitive__namespace.SubTrigger,
   {
     ref,
@@ -1649,7 +2232,7 @@ var MenubarSubTrigger = React2__namespace.forwardRef(({ className, inset, childr
   }
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive__namespace.SubTrigger.displayName;
-var MenubarSubContent = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var MenubarSubContent = React19__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   MenubarPrimitive__namespace.SubContent,
   {
     ref,
@@ -1661,7 +2244,7 @@ var MenubarSubContent = React2__namespace.forwardRef(({ className, ...props }, r
   }
 ));
 MenubarSubContent.displayName = MenubarPrimitive__namespace.SubContent.displayName;
-var MenubarContent = React2__namespace.forwardRef(
+var MenubarContent = React19__namespace.forwardRef(
   ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(MenubarPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     MenubarPrimitive__namespace.Content,
     {
@@ -1678,7 +2261,7 @@ var MenubarContent = React2__namespace.forwardRef(
   ) })
 );
 MenubarContent.displayName = MenubarPrimitive__namespace.Content.displayName;
-var MenubarItem = React2__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var MenubarItem = React19__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   MenubarPrimitive__namespace.Item,
   {
     ref,
@@ -1691,7 +2274,7 @@ var MenubarItem = React2__namespace.forwardRef(({ className, inset, ...props },
   }
 ));
 MenubarItem.displayName = MenubarPrimitive__namespace.Item.displayName;
-var MenubarCheckboxItem = React2__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var MenubarCheckboxItem = React19__namespace.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   MenubarPrimitive__namespace.CheckboxItem,
   {
     ref,
@@ -1708,7 +2291,7 @@ var MenubarCheckboxItem = React2__namespace.forwardRef(({ className, children, c
   }
 ));
 MenubarCheckboxItem.displayName = MenubarPrimitive__namespace.CheckboxItem.displayName;
-var MenubarRadioItem = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var MenubarRadioItem = React19__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   MenubarPrimitive__namespace.RadioItem,
   {
     ref,
@@ -1724,7 +2307,7 @@ var MenubarRadioItem = React2__namespace.forwardRef(({ className, children, ...p
   }
 ));
 MenubarRadioItem.displayName = MenubarPrimitive__namespace.RadioItem.displayName;
-var MenubarLabel = React2__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var MenubarLabel = React19__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   MenubarPrimitive__namespace.Label,
   {
     ref,
@@ -1737,7 +2320,7 @@ var MenubarLabel = React2__namespace.forwardRef(({ className, inset, ...props },
   }
 ));
 MenubarLabel.displayName = MenubarPrimitive__namespace.Label.displayName;
-var MenubarSeparator = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var MenubarSeparator = React19__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   MenubarPrimitive__namespace.Separator,
   {
     ref,
@@ -1762,7 +2345,7 @@ var MenubarShortcut = /* @__PURE__ */ __name(({
   );
 }, "MenubarShortcut");
 MenubarShortcut.displayName = "MenubarShortcut";
-var NavigationMenu = React2__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var NavigationMenu = React19__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   NavigationMenuPrimitive__namespace.Root,
   {
     ref,
@@ -1775,7 +2358,7 @@ var NavigationMenu = React2__namespace.default.forwardRef(({ className, children
   }
 ));
 NavigationMenu.displayName = NavigationMenuPrimitive__namespace.Root.displayName;
-var NavigationMenuList = React2__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var NavigationMenuList = React19__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   NavigationMenuPrimitive__namespace.List,
   {
     ref,
@@ -1787,7 +2370,7 @@ var NavigationMenuList = React2__namespace.default.forwardRef(({ className, ...p
   }
 ));
 NavigationMenuList.displayName = NavigationMenuPrimitive__namespace.List.displayName;
-var NavigationMenuItem = React2__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var NavigationMenuItem = React19__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   NavigationMenuPrimitive__namespace.Item,
   {
     ref,
@@ -1799,7 +2382,7 @@ NavigationMenuItem.displayName = "NavigationMenuItem";
 var navigationMenuTriggerStyle = classVarianceAuthority.cva(
   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-level-1 text-foreground hover:text-accent  focus:text-accent focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-level-1/50 data-[state=open]:bg-level-1/50"
 );
-var NavigationMenuTrigger = React2__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var NavigationMenuTrigger = React19__namespace.default.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   NavigationMenuPrimitive__namespace.Trigger,
   {
     ref,
@@ -1819,7 +2402,7 @@ var NavigationMenuTrigger = React2__namespace.default.forwardRef(({ className, c
   }
 ));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive__namespace.Trigger.displayName;
-var NavigationMenuContent = React2__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var NavigationMenuContent = React19__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   NavigationMenuPrimitive__namespace.Content,
   {
     ref,
@@ -1834,7 +2417,7 @@ var NavigationMenuContent = React2__namespace.default.forwardRef(({ className, .
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive__namespace.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive__namespace.Link;
-var NavigationMenuViewport = React2__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsxRuntime.jsx(
+var NavigationMenuViewport = React19__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsxRuntime.jsx(
   NavigationMenuPrimitive__namespace.Viewport,
   {
     className: cn(
@@ -1847,7 +2430,7 @@ var NavigationMenuViewport = React2__namespace.default.forwardRef(({ className,
   }
 ) }));
 NavigationMenuViewport.displayName = NavigationMenuPrimitive__namespace.Viewport.displayName;
-var NavigationMenuIndicator = React2__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var NavigationMenuIndicator = React19__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   NavigationMenuPrimitive__namespace.Indicator,
   {
     ref,
@@ -2201,49 +2784,93 @@ var TableCaption = /* @__PURE__ */ __name(({
   }
 ), "TableCaption");
 TableCaption.displayName = "TableCaption";
-var Tabs = TabsPrimitive__namespace.Root;
-var TabsList = /* @__PURE__ */ __name(({
+function Tabs({
   className,
+  orientation = "horizontal",
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.List,
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      orientation,
+      className: cn(
+        "group/tabs flex data-[orientation=horizontal]:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(Tabs, "Tabs");
+var tabsListVariants = classVarianceAuthority.cva(
+  "group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
   {
-    className: cn(
-      "text-text-tertiary inline-flex h-10 items-center justify-center rounded-md bg-[#27252B] p-1",
-      className
-    ),
-    ...props
+    variants: {
+      variant: {
+        default: "bg-muted rounded-lg p-1",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
   }
-), "TabsList");
-TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var TabsTrigger = /* @__PURE__ */ __name(({
+);
+function TabsList({
   className,
+  variant = "default",
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.Trigger,
-  {
-    className: cn(
-      "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-[#2D3239] data-[state=active]:text-white data-[state=active]:shadow-xs",
-      className
-    ),
-    ...props
-  }
-), "TabsTrigger");
-TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = /* @__PURE__ */ __name(({
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn(tabsListVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+__name(TabsList, "TabsList");
+function TabsTrigger({
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  TabsPrimitive__namespace.Content,
-  {
-    className: cn(
-      "ring-offset-background focus-visible:ring-ring mt-3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
-      className
-    ),
-    ...props
-  }
-), "TabsContent");
-TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        // Default variant styles
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        // Active state
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        // Line variant indicator
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+__name(TabsTrigger, "TabsTrigger");
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 outline-none mt-2", className),
+      ...props
+    }
+  );
+}
+__name(TabsContent, "TabsContent");
 var TooltipProvider = TooltipPrimitive__namespace.Provider;
 var Tooltip = TooltipPrimitive__namespace.Root;
 var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
@@ -2273,7 +2900,7 @@ TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
 var DialogVideoController = /* @__PURE__ */ __name(({
   children
 }) => {
-  const [open, setOpen] = React2.useState(false);
+  const [open, setOpen] = React19.useState(false);
   const onOpenChange = /* @__PURE__ */ __name((b) => {
     setOpen(b);
     const videos = document.getElementsByTagName("video");
@@ -2286,9 +2913,9 @@ var DialogVideoController = /* @__PURE__ */ __name(({
       }
     });
   }, "onOpenChange");
-  const updatedChildren = React2__namespace.default.Children.map(
+  const updatedChildren = React19__namespace.default.Children.map(
     children,
-    (child) => React2__namespace.default.cloneElement(
+    (child) => React19__namespace.default.cloneElement(
       child,
       { open, onOpenChange }
     )
@@ -2356,16 +2983,19 @@ var ApplyTypography = /* @__PURE__ */ __name(({
 var AspectRatio = AspectRatioPrimitive__namespace.Root;
 var aspect_ratio_default = AspectRatio;
 var badgeVariants = classVarianceAuthority.cva(
-  "focus:ring-ring border-divider inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden",
+  "inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive [&>svg]:pointer-events-none overflow-hidden",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 border-transparent shadow-sm",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
-        outline: "hover:bg-bg-secondary text-text-secondary hover:text-text-default border border-gray-500 bg-transparent shadow-xs",
-        inputAdornment: "bg-gray-600 px-2 font-medium text-white",
-        tags: "text-text-secondary border-divider bg-bg-quaternary rounded-lg px-2 py-1 font-normal capitalize"
+        destructive: "bg-destructive text-white hover:bg-destructive/90 border-transparent shadow-sm focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground border-transparent",
+        link: "text-primary underline-offset-4 hover:underline border-transparent",
+        // Hanzo-specific variants for backward compatibility
+        inputAdornment: "bg-gray-600 px-2 font-medium text-white border-transparent",
+        tags: "text-muted-foreground border-border bg-muted rounded-lg px-2 py-1 font-normal capitalize"
       }
     },
     defaultVariants: {
@@ -2373,12 +3003,24 @@ var badgeVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Badge = React2__namespace.forwardRef(
-  ({ className, variant, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn(badgeVariants({ variant }), className), ...props });
-  }
-);
-Badge.displayName = "Badge";
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+__name(Badge, "Badge");
 var badge_default = Badge;
 var BreakpointIndicator = /* @__PURE__ */ __name(() => {
   if (process?.env?.NODE_ENV !== void 0 && process.env.NODE_ENV === "production") return null;
@@ -2518,7 +3160,7 @@ var DefaultTriggerInner = /* @__PURE__ */ __name(({
     ]
   }
 ), "DefaultTriggerInner");
-var DefaultTrigger = React2__namespace.default.forwardRef(DefaultTriggerInner);
+var DefaultTrigger = React19__namespace.default.forwardRef(DefaultTriggerInner);
 var Combobox = /* @__PURE__ */ __name(({
   elements,
   initial,
@@ -2541,8 +3183,8 @@ var Combobox = /* @__PURE__ */ __name(({
   Trigger: Trigger14,
   triggerProps
 }) => {
-  const [_open, _setOpen] = React2.useState(false);
-  const [_current, _setCurrent] = React2.useState(initial ?? null);
+  const [_open, _setOpen] = React19.useState(false);
+  const [_current, _setCurrent] = React19.useState(initial ?? null);
   const handleSelect = /* @__PURE__ */ __name((selString) => {
     const found = elements.find((el) => adaptor.valueEquals(el, selString));
     if (found) {
@@ -2624,10 +3266,10 @@ var Input = /* @__PURE__ */ __name(({
   ref,
   ...props
 }) => {
-  const inputRef = React2.useRef(null);
-  const startAdornmentRef = React2.useRef(null);
-  const endAdornmentRef = React2.useRef(null);
-  const [showPassword, setShowPassword] = React2__namespace.useState(false);
+  const inputRef = React19.useRef(null);
+  const startAdornmentRef = React19.useRef(null);
+  const endAdornmentRef = React19.useRef(null);
+  const [showPassword, setShowPassword] = React19__namespace.useState(false);
   const togglePasswordVisibility = /* @__PURE__ */ __name(() => {
     setShowPassword(!showPassword);
   }, "togglePasswordVisibility");
@@ -2638,8 +3280,8 @@ var Input = /* @__PURE__ */ __name(({
   if (endAdornment) {
     style.paddingRight = `${(endAdornmentRef?.current?.offsetWidth ?? 0) + 20}px`;
   }
-  React2.useImperativeHandle(ref, () => inputRef.current, []);
-  React2.useEffect(() => {
+  React19.useImperativeHandle(ref, () => inputRef.current, []);
+  React19.useEffect(() => {
     if (props.autoFocus) {
       setTimeout(() => {
         inputRef?.current?.focus();
@@ -2684,7 +3326,7 @@ var Input = /* @__PURE__ */ __name(({
         children: endAdornment
       }
     ) : null,
-    endAdornment && typeof endAdornment !== "string" && React2__namespace.isValidElement(endAdornment) ? React2__namespace.cloneElement(endAdornment, {
+    endAdornment && typeof endAdornment !== "string" && React19__namespace.isValidElement(endAdornment) ? React19__namespace.cloneElement(endAdornment, {
       ref: endAdornmentRef
     }) : null,
     type === "password" && !hidePasswordToggle && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2712,7 +3354,7 @@ var Label5 = /* @__PURE__ */ __name(({
 }) => /* @__PURE__ */ jsxRuntime.jsx(LabelPrimitive__namespace.Root, { className: cn(labelVariants(), className), ...props }), "Label");
 Label5.displayName = LabelPrimitive__namespace.Root.displayName;
 var label_default = Label5;
-function Item7({
+function Item8({
   value,
   label,
   className,
@@ -2737,7 +3379,7 @@ function Item7({
     }
   );
 }
-__name(Item7, "Item");
+__name(Item8, "Item");
 function ListBox({
   values,
   labels,
@@ -2748,7 +3390,7 @@ function ListBox({
   itemClx = ""
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border rounded-md select-none", clx), children: values.map((val, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    Item7,
+    Item8,
     {
       value: val,
       label: labels[i],
@@ -2786,6 +3428,55 @@ var LoadingSpinner = /* @__PURE__ */ __name(({
   );
 }, "LoadingSpinner");
 var loading_spinner_default = LoadingSpinner;
+var NativeSelect = React19__namespace.forwardRef(
+  ({ className, size = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+        "data-slot": "native-select-wrapper",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              ref,
+              "data-slot": "native-select",
+              "data-size": size,
+              className: cn(
+                "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
+                "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+                "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+                className
+              ),
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronDown,
+            {
+              className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none",
+              "aria-hidden": "true",
+              "data-slot": "native-select-icon"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+NativeSelect.displayName = "NativeSelect";
+var NativeSelectOption = React19__namespace.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("option", { ref, "data-slot": "native-select-option", ...props }));
+NativeSelectOption.displayName = "NativeSelectOption";
+var NativeSelectOptGroup = React19__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "optgroup",
+  {
+    ref,
+    "data-slot": "native-select-optgroup",
+    className: cn(className),
+    ...props
+  }
+));
+NativeSelectOptGroup.displayName = "NativeSelectOptGroup";
 var Progress = /* @__PURE__ */ __name(({
   className,
   value,
@@ -2954,7 +3645,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React2__namespace.useMemo(
+  const _values = React19__namespace.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -3018,6 +3709,18 @@ function Skeleton({
 }
 __name(Skeleton, "Skeleton");
 var skeleton_default = Skeleton;
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lucideReact.Loader2,
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("size-4 animate-spin", className),
+      ...props
+    }
+  );
+}
+__name(Spinner, "Spinner");
 var StepIndicator = /* @__PURE__ */ __name(({
   steps,
   currentStep,
@@ -3098,7 +3801,7 @@ Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
 var switch_default = Switch;
 var DEFAULT_MIN_TEXTAREA_HEIGHT = 32;
 var DEFAULT_MAX_TEXTAREA_HEIGHT = 300;
-var Textarea = React2__namespace.forwardRef(
+var Textarea = React19__namespace.forwardRef(
   ({
     className,
     minHeight = DEFAULT_MIN_TEXTAREA_HEIGHT,
@@ -3106,9 +3809,9 @@ var Textarea = React2__namespace.forwardRef(
     resize = "none",
     ...props
   }, ref) => {
-    const textareaRef = React2__namespace.useRef(null);
+    const textareaRef = React19__namespace.useRef(null);
     const mergedRef = ref || textareaRef;
-    React2__namespace.useLayoutEffect(() => {
+    React19__namespace.useLayoutEffect(() => {
       if (!mergedRef.current) return;
       mergedRef.current.style.height = "inherit";
       mergedRef.current.style.height = `${Math.max(
@@ -3190,7 +3893,7 @@ var Toggle = /* @__PURE__ */ __name(({
   }
 ), "Toggle");
 Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
-var ToggleGroupContext = React2__namespace.createContext({
+var ToggleGroupContext = React19__namespace.createContext({
   size: "default",
   variant: "default"
 });
@@ -3216,7 +3919,7 @@ var ToggleGroupItem = /* @__PURE__ */ __name(({
   size,
   ...props
 }) => {
-  const context = React2__namespace.useContext(ToggleGroupContext);
+  const context = React19__namespace.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToggleGroupPrimitive__namespace.Item,
     {
@@ -3233,7 +3936,7 @@ var ToggleGroupItem = /* @__PURE__ */ __name(({
   );
 }, "ToggleGroupItem");
 ToggleGroupItem.displayName = ToggleGroupPrimitive__namespace.Item.displayName;
-var VideoPlayer = React2__namespace.default.forwardRef(
+var VideoPlayer = React19__namespace.default.forwardRef(
   ({
     sources,
     ...rest
@@ -3243,9 +3946,9 @@ var VideoPlayer = React2__namespace.default.forwardRef(
 );
 var video_player_default = VideoPlayer;
 var useAutoResizeTextarea = /* @__PURE__ */ __name((ref, value, autoResize = true) => {
-  const textAreaRef = React2__namespace.useRef(null);
-  React2__namespace.useImperativeHandle(ref, () => textAreaRef.current);
-  React2__namespace.useEffect(() => {
+  const textAreaRef = React19__namespace.useRef(null);
+  React19__namespace.useImperativeHandle(ref, () => textAreaRef.current);
+  React19__namespace.useEffect(() => {
     const ref2 = textAreaRef?.current;
     const updateTextareaHeight = /* @__PURE__ */ __name(() => {
       if (ref2 && autoResize) {
@@ -3289,10 +3992,10 @@ var ChatInputBase = /* @__PURE__ */ __name(({
   );
 }, "ChatInputBase");
 ChatInputBase.displayName = "ChatInput";
-var ChatInput = React2__namespace.memo(ChatInputBase);
+var ChatInput = React19__namespace.memo(ChatInputBase);
 function useCombinedRefs(...refs) {
-  const targetRef = React2.useRef(null);
-  React2.useEffect(() => {
+  const targetRef = React19.useRef(null);
+  React19.useEffect(() => {
     refs.forEach((ref) => {
       if (!ref) return;
       if (typeof ref === "function") {
@@ -3383,7 +4086,7 @@ var useCopyClipboard = /* @__PURE__ */ __name(({
   string,
   onCopyClipboard
 }) => {
-  const [isCopied, setIsCopied] = React2.useState(false);
+  const [isCopied, setIsCopied] = React19.useState(false);
   let timeout;
   const onCopy = /* @__PURE__ */ __name(async () => {
     if (!string) return;
@@ -3412,7 +4115,7 @@ var CopyToClipboardIcon = /* @__PURE__ */ __name(({
   });
   const ClipboardIcon = isCopied ? lucideReact.CheckCircle2 : lucideReact.CopyIcon;
   if (asChild && children) {
-    return React2.cloneElement(children, {
+    return React19.cloneElement(children, {
       onClick: onCopy,
       className: cn(children.props?.className, className)
     });
@@ -3456,7 +4159,7 @@ var PrettyJsonPrint = /* @__PURE__ */ __name(({
   json,
   className
 }) => {
-  const formattedJson = React2.useMemo(() => {
+  const formattedJson = React19.useMemo(() => {
     let formattedValue = `Unparseable JSON: String(${json})`;
     if (typeof json === "object") {
       formattedValue = JSON.stringify(json, null, 2);
@@ -3670,7 +4373,7 @@ var LinkElement = /* @__PURE__ */ __name(({
     ...linkProps
   };
   const Contents = /* @__PURE__ */ __name(() => {
-    if (React2__namespace.default.Children.count(children) > 0) return children;
+    if (React19__namespace.default.Children.count(children) > 0) return children;
     const _icon = icon ? icon : def.icon ? def.icon : void 0;
     const _iconAfter = iconAfter ? iconAfter : def.iconAfter ? def.iconAfter : false;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -3774,7 +4477,7 @@ var YouTubeEmbed = /* @__PURE__ */ __name(({
   caption,
   className = ""
 }) => {
-  const [showVideo, setShowVideo] = React2.useState(false);
+  const [showVideo, setShowVideo] = React19.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: showVideo ? /* @__PURE__ */ jsxRuntime.jsx(
     "iframe",
     {
@@ -3830,6 +4533,437 @@ var YouTubeEmbed = /* @__PURE__ */ __name(({
   ) });
 }, "YouTubeEmbed");
 var youtube_embed_default = YouTubeEmbed;
+var pipPositionStyles = {
+  "bottom-right": { defaultX: /* @__PURE__ */ __name((w, pipW) => w - pipW - 24, "defaultX"), defaultY: /* @__PURE__ */ __name((h, pipH) => h - pipH - 24, "defaultY") },
+  "bottom-left": { defaultX: /* @__PURE__ */ __name(() => 24, "defaultX"), defaultY: /* @__PURE__ */ __name((h, pipH) => h - pipH - 24, "defaultY") },
+  "top-right": { defaultX: /* @__PURE__ */ __name((w, pipW) => w - pipW - 24, "defaultX"), defaultY: /* @__PURE__ */ __name(() => 24, "defaultY") },
+  "top-left": { defaultX: /* @__PURE__ */ __name(() => 24, "defaultX"), defaultY: /* @__PURE__ */ __name(() => 24, "defaultY") }
+};
+var youtubePipPlayerVariants = classVarianceAuthority.cva(
+  "relative bg-black rounded-[30px] overflow-hidden",
+  {
+    variants: {
+      size: {
+        sm: "aspect-video max-w-md",
+        md: "aspect-video max-w-2xl",
+        lg: "aspect-video max-w-4xl",
+        full: "w-full aspect-video",
+        hero: "w-full max-h-[calc(100vh-160px)]"
+      }
+    },
+    defaultVariants: {
+      size: "hero"
+    }
+  }
+);
+var YouTubePipPlayer = React19__namespace.forwardRef(
+  ({
+    className,
+    size,
+    videoId,
+    rotationInterval = 3e4,
+    enablePip = true,
+    defaultMuted = true,
+    showLiveIndicator = true,
+    enableTvEffects = true,
+    pipPosition = "bottom-right",
+    onPlay,
+    onPause,
+    onPipEnter,
+    onPipExit,
+    onMuteChange,
+    ...props
+  }, ref) => {
+    const videoIds = React19__namespace.useMemo(
+      () => Array.isArray(videoId) ? videoId : [videoId],
+      [videoId]
+    );
+    const [currentVideoIndex, setCurrentVideoIndex] = React19__namespace.useState(0);
+    const [isMuted, setIsMuted] = React19__namespace.useState(defaultMuted);
+    const [isPip, setIsPip] = React19__namespace.useState(false);
+    const [showPip, setShowPip] = React19__namespace.useState(true);
+    const [pipSize, setPipSize] = React19__namespace.useState("normal");
+    const [isMobile, setIsMobile] = React19__namespace.useState(false);
+    const [isHovered, setIsHovered] = React19__namespace.useState(false);
+    const [isPipHovered, setIsPipHovered] = React19__namespace.useState(false);
+    const [showStatic, setShowStatic] = React19__namespace.useState(false);
+    const [pipPos, setPipPos] = React19__namespace.useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = React19__namespace.useState(false);
+    const [dragStart, setDragStart] = React19__namespace.useState({ x: 0, y: 0 });
+    const [hasDragged, setHasDragged] = React19__namespace.useState(false);
+    const containerRef = React19__namespace.useRef(null);
+    const pipContainerRef = React19__namespace.useRef(null);
+    const PIP_WIDTH_BASE = 384;
+    const PIP_MARGIN = 24;
+    const getCurrentPipWidth = React19__namespace.useCallback(() => {
+      return pipSize === "double" ? PIP_WIDTH_BASE * 2 : PIP_WIDTH_BASE;
+    }, [pipSize]);
+    const getYouTubeEmbedUrl = React19__namespace.useCallback(
+      (forPip = false) => {
+        const currentId = videoIds[currentVideoIndex];
+        const muteParam = forPip && isPip ? isMuted ? "1" : "0" : isMuted ? "1" : "0";
+        return `https://www.youtube.com/embed/${currentId}?autoplay=1&mute=${muteParam}&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1`;
+      },
+      [videoIds, currentVideoIndex, isMuted, isPip]
+    );
+    React19__namespace.useEffect(() => {
+      const checkMobile = /* @__PURE__ */ __name(() => setIsMobile(window.innerWidth < 768), "checkMobile");
+      checkMobile();
+      window.addEventListener("resize", checkMobile);
+      return () => window.removeEventListener("resize", checkMobile);
+    }, []);
+    React19__namespace.useEffect(() => {
+      if (videoIds.length <= 1) return;
+      const interval = setInterval(() => {
+        setCurrentVideoIndex((prev) => (prev + 1) % videoIds.length);
+      }, rotationInterval);
+      return () => clearInterval(interval);
+    }, [videoIds.length, rotationInterval]);
+    React19__namespace.useEffect(() => {
+      if (!enableTvEffects) return;
+      const interval = setInterval(() => {
+        setShowStatic(true);
+        setTimeout(() => setShowStatic(false), 200);
+      }, 3e4);
+      return () => clearInterval(interval);
+    }, [enableTvEffects]);
+    React19__namespace.useEffect(() => {
+      if (!enablePip) return;
+      const handleScroll = /* @__PURE__ */ __name(() => {
+        if (!containerRef.current) return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const shouldShowPip = rect.bottom < 100;
+        const wasInPip = isPip;
+        setIsPip(shouldShowPip);
+        if (shouldShowPip !== wasInPip) {
+          if (shouldShowPip) {
+            onPipEnter?.();
+          } else {
+            onPipExit?.();
+          }
+        }
+      }, "handleScroll");
+      window.addEventListener("scroll", handleScroll);
+      return () => window.removeEventListener("scroll", handleScroll);
+    }, [enablePip, isPip, onPipEnter, onPipExit]);
+    React19__namespace.useEffect(() => {
+      if (typeof window === "undefined") return;
+      const pipWidth = getCurrentPipWidth();
+      const pipHeight = pipWidth * 9 / 16;
+      const pos = pipPositionStyles[pipPosition];
+      setPipPos({
+        x: pos.defaultX(window.innerWidth, pipWidth),
+        y: pos.defaultY(window.innerHeight, pipHeight)
+      });
+    }, [getCurrentPipWidth, pipPosition]);
+    React19__namespace.useEffect(() => {
+      if (pipSize === "fullscreen" || typeof window === "undefined") return;
+      const pipWidth = getCurrentPipWidth();
+      const pipHeight = pipWidth * 9 / 16;
+      const pos = pipPositionStyles[pipPosition];
+      setPipPos({
+        x: pos.defaultX(window.innerWidth, pipWidth),
+        y: pos.defaultY(window.innerHeight, pipHeight)
+      });
+    }, [pipSize, getCurrentPipWidth, pipPosition]);
+    const handleMouseDown = React19__namespace.useCallback((e) => {
+      if (pipSize === "fullscreen") return;
+      setIsDragging(true);
+      setHasDragged(false);
+      setDragStart({
+        x: e.clientX - pipPos.x,
+        y: e.clientY - pipPos.y
+      });
+    }, [pipSize, pipPos]);
+    const handleMouseMove = React19__namespace.useCallback((e) => {
+      if (!isDragging || pipSize === "fullscreen") return;
+      const newX = e.clientX - dragStart.x;
+      const newY = e.clientY - dragStart.y;
+      const distanceMoved = Math.sqrt(Math.pow(newX - pipPos.x, 2) + Math.pow(newY - pipPos.y, 2));
+      if (distanceMoved > 5) setHasDragged(true);
+      const pipWidth = getCurrentPipWidth();
+      const maxX = window.innerWidth - pipWidth - PIP_MARGIN;
+      const maxY = window.innerHeight - pipWidth * 9 / 16 - PIP_MARGIN;
+      setPipPos({
+        x: Math.max(PIP_MARGIN, Math.min(newX, maxX)),
+        y: Math.max(PIP_MARGIN, Math.min(newY, maxY))
+      });
+    }, [isDragging, pipSize, dragStart, pipPos, getCurrentPipWidth]);
+    const handleMouseUp = React19__namespace.useCallback(() => {
+      if (isDragging && hasDragged) {
+        const pipWidth = getCurrentPipWidth();
+        const pipHeight = pipWidth * 9 / 16;
+        const pos = pipPositionStyles[pipPosition];
+        setPipPos({
+          x: pos.defaultX(window.innerWidth, pipWidth),
+          y: pos.defaultY(window.innerHeight, pipHeight)
+        });
+      }
+      setIsDragging(false);
+      setHasDragged(false);
+    }, [isDragging, hasDragged, getCurrentPipWidth, pipPosition]);
+    React19__namespace.useEffect(() => {
+      if (!isDragging) return;
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    }, [isDragging, handleMouseMove, handleMouseUp]);
+    const toggleMute = React19__namespace.useCallback((e) => {
+      e.stopPropagation();
+      const newMuted = !isMuted;
+      setIsMuted(newMuted);
+      onMuteChange?.(newMuted);
+    }, [isMuted, onMuteChange]);
+    const cyclePipSize = React19__namespace.useCallback((e) => {
+      e.stopPropagation();
+      setPipSize((prev) => {
+        if (prev === "normal") return "double";
+        if (prev === "double") return "fullscreen";
+        return "normal";
+      });
+    }, []);
+    const closePip = React19__namespace.useCallback((e) => {
+      e.stopPropagation();
+      setShowPip(false);
+    }, []);
+    const requestFullscreen = React19__namespace.useCallback((e) => {
+      e.stopPropagation();
+      if (!containerRef.current) return;
+      if (document.fullscreenElement) {
+        document.exitFullscreen();
+      } else {
+        containerRef.current.requestFullscreen();
+      }
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(
+            youtubePipPlayerVariants({ size }),
+            "group transition-all duration-500",
+            className
+          ),
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false),
+          ...props,
+          children: [
+            enableTvEffects && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-24 bg-gradient-radial from-white/40 via-white/20 to-transparent blur-[100px] opacity-80 pointer-events-none" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-12 bg-gradient-radial from-white/30 via-white/15 to-transparent blur-[60px] opacity-70 pointer-events-none" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-2 rounded-[30px] bg-gradient-to-r from-white/80 via-white/60 to-white/80 opacity-100 blur-2xl animate-pulse pointer-events-none" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-[30px] border-2 border-white/30 shadow-[0_0_60px_rgba(255,255,255,0.5)] pointer-events-none" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute inset-0 rounded-[30px] border-2 border-white/10 bg-gradient-to-b from-white/5 to-transparent",
+                style: {
+                  boxShadow: "inset 0 2px 20px rgba(255,255,255,0.1), inset 0 -2px 20px rgba(0,0,0,0.5)"
+                }
+              }
+            ) }),
+            enableTvEffects && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute inset-0 z-20 pointer-events-none",
+                style: { boxShadow: "inset 0 0 120px 60px rgba(0,0,0,0.8)" }
+              }
+            ),
+            showStatic && enableTvEffects && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 z-40 pointer-events-none", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full bg-white/3 animate-pulse" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0 opacity-20",
+                  style: {
+                    backgroundImage: `url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E")`
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "iframe",
+              {
+                className: "absolute inset-0 w-full h-full",
+                src: getYouTubeEmbedUrl(),
+                title: "Video",
+                frameBorder: "0",
+                allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                allowFullScreen: true
+              }
+            ),
+            enableTvEffects && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none opacity-[0.02] z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full w-full",
+                style: {
+                  backgroundImage: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.05) 2px, rgba(255,255,255,0.05) 4px)"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "absolute bottom-6 left-6 flex items-center gap-3 z-30 transition-opacity duration-300",
+                  isHovered ? "opacity-100" : "opacity-0"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      onClick: toggleMute,
+                      className: "flex items-center gap-2 bg-black/80 backdrop-blur-md px-4 py-2 rounded-full hover:bg-black transition-all duration-300 border border-white/10",
+                      children: [
+                        isMuted ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { className: "h-4 w-4 text-white" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { className: "h-4 w-4 text-white" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white/90 font-medium tracking-wider uppercase", children: isMuted ? "Unmute" : "Mute" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      onClick: requestFullscreen,
+                      className: "flex items-center gap-2 bg-black/80 backdrop-blur-md px-4 py-2 rounded-full hover:bg-black transition-all duration-300 border border-white/10",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, { className: "h-4 w-4 text-white" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white/90 font-medium tracking-wider uppercase", children: "Fullscreen" })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            showLiveIndicator && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-6 left-6 flex items-center gap-2 bg-black/80 backdrop-blur-md px-4 py-2 rounded-full border border-white/10 z-30", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-red-600 rounded-full animate-pulse shadow-[0_0_10px_rgba(220,38,38,0.8)]" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white/90 font-medium tracking-widest uppercase", children: "Live" })
+            ] })
+          ]
+        }
+      ),
+      enablePip && isPip && showPip && !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: pipContainerRef,
+          className: cn(
+            "fixed z-50 transition-all ease-out group",
+            pipSize === "fullscreen" ? "inset-0 bg-black/98 backdrop-blur-xl duration-500" : isDragging ? "duration-75" : "duration-300",
+            isDragging ? "cursor-grabbing scale-105 shadow-2xl" : pipSize === "fullscreen" ? "" : "cursor-grab hover:scale-105"
+          ),
+          style: pipSize !== "fullscreen" ? {
+            left: `${pipPos.x}px`,
+            top: `${pipPos.y}px`,
+            filter: isDragging ? "brightness(1.1) drop-shadow(0 20px 40px rgba(0,0,0,0.5))" : "brightness(1)"
+          } : {},
+          onMouseDown: handleMouseDown,
+          onMouseEnter: () => setIsPipHovered(true),
+          onMouseLeave: () => setIsPipHovered(false),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "relative bg-black overflow-hidden transition-all duration-500",
+                pipSize === "fullscreen" ? "w-full h-full" : pipSize === "double" ? "aspect-video rounded-2xl" : "w-96 aspect-video rounded-2xl"
+              ),
+              style: pipSize === "double" ? { width: "768px" } : {},
+              children: [
+                enableTvEffects && pipSize !== "fullscreen" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-12 rounded-full bg-gradient-radial from-white/30 via-white/10 to-transparent blur-3xl opacity-60 pointer-events-none" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-1 rounded-2xl bg-gradient-to-r from-white/40 via-white/20 to-white/40 opacity-75 blur-xl animate-pulse pointer-events-none" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "absolute inset-0 rounded-2xl border-2 border-white/10 bg-gradient-to-b from-white/5 to-transparent",
+                      style: {
+                        boxShadow: "inset 0 2px 20px rgba(255,255,255,0.1), inset 0 -2px 20px rgba(0,0,0,0.5)"
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none z-10 opacity-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "h-full w-full animate-scan",
+                      style: {
+                        backgroundImage: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px)"
+                      }
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 overflow-hidden", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "iframe",
+                    {
+                      className: cn(
+                        "absolute top-0 left-0 w-full h-full object-cover",
+                        pipSize !== "fullscreen" && "rounded-2xl"
+                      ),
+                      style: { aspectRatio: "16 / 9", pointerEvents: "none" },
+                      src: getYouTubeEmbedUrl(true),
+                      title: "Video PiP",
+                      frameBorder: "0",
+                      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                      allowFullScreen: true
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-5" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute flex items-center gap-2 z-30 transition-opacity duration-300",
+                      pipSize === "fullscreen" ? "bottom-10 right-10" : "bottom-3 right-3",
+                      isPipHovered ? "opacity-100" : "opacity-0"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          onClick: toggleMute,
+                          className: "relative p-2.5 bg-black/90 backdrop-blur-md rounded-full hover:bg-black transition-all duration-300 shadow-lg hover:scale-110 border border-white/10",
+                          title: isMuted ? "Unmute" : "Mute",
+                          children: isMuted ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, { className: "h-4 w-4 text-white" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, { className: "h-4 w-4 text-white" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          onClick: cyclePipSize,
+                          className: "relative p-2.5 bg-black/90 backdrop-blur-md rounded-full hover:bg-black transition-all duration-300 shadow-lg hover:scale-110 border border-white/10",
+                          title: pipSize === "fullscreen" ? "Normal Size" : pipSize === "double" ? "Fullscreen" : "Double Size",
+                          children: pipSize === "fullscreen" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-4 w-4 text-white" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-4 w-4 text-white" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          onClick: closePip,
+                          className: "relative p-2.5 bg-black/90 backdrop-blur-md rounded-full hover:bg-red-600 transition-all duration-300 shadow-lg hover:scale-110 border border-white/10",
+                          title: "Close",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4 text-white" })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                showLiveIndicator && pipSize !== "fullscreen" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 right-3 z-20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 bg-black/80 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-red-600 rounded-full animate-pulse shadow-[0_0_10px_rgba(220,38,38,0.8)]" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-white/80 font-medium tracking-widest uppercase", children: "Live" })
+                ] }) })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+YouTubePipPlayer.displayName = "YouTubePipPlayer";
 var fileIconMap = {
   aep: "",
   ai: "",
@@ -8136,6 +9270,7 @@ exports.AgentIcon = AgentIcon;
 exports.AiTasksIcon = AiTasksIcon;
 exports.AisIcon = AisIcon;
 exports.Alert = Alert;
+exports.AlertAction = AlertAction;
 exports.AlertDescription = AlertDescription;
 exports.AlertDialog = AlertDialog;
 exports.AlertDialogAction = AlertDialogAction;
@@ -8170,8 +9305,12 @@ exports.BreadcrumbSeparator = BreadcrumbSeparator;
 exports.BreakpointIndicator = breakpoint_indicator_default;
 exports.BrowseSubscriptionIcon = BrowseSubscriptionIcon;
 exports.Button = button_default;
+exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupSeparator = ButtonGroupSeparator;
+exports.ButtonGroupText = ButtonGroupText;
 exports.Calendar = calendar_default;
 exports.Card = Card;
+exports.CardAction = CardAction;
 exports.CardContent = CardContent;
 exports.CardDescription = CardDescription;
 exports.CardFooter = CardFooter;
@@ -8222,6 +9361,7 @@ exports.CreateAIIcon = CreateAIIcon;
 exports.CryptoWalletIcon = CryptoWalletIcon;
 exports.DeepSeekIcon = DeepSeekIcon;
 exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;
 exports.DialogFooter = DialogFooter;
@@ -8262,6 +9402,12 @@ exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EmbeddingsGeneratedIcon = EmbeddingsGeneratedIcon;
+exports.Empty = Empty;
+exports.EmptyContent = EmptyContent;
+exports.EmptyDescription = EmptyDescription;
+exports.EmptyHeader = EmptyHeader;
+exports.EmptyMedia = EmptyMedia;
+exports.EmptyTitle = EmptyTitle;
 exports.EthereumIcon = EthereumIcon;
 exports.ExoIcon = ExoIcon;
 exports.ExportIcon = ExportIcon;
@@ -8294,10 +9440,26 @@ exports.ImportIcon = ImportIcon;
 exports.InboxIcon = InboxIcon;
 exports.InlineIcon = inline_icon_default;
 exports.Input = input_default;
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupButton = InputGroupButton;
+exports.InputGroupInput = InputGroupInput;
+exports.InputGroupText = InputGroupText;
+exports.InputGroupTextarea = InputGroupTextarea;
 exports.InputOTP = InputOTP;
 exports.InputOTPGroup = InputOTPGroup;
 exports.InputOTPSeparator = InputOTPSeparator;
 exports.InputOTPSlot = InputOTPSlot;
+exports.Item = Item4;
+exports.ItemActions = ItemActions;
+exports.ItemContent = ItemContent;
+exports.ItemDescription = ItemDescription;
+exports.ItemFooter = ItemFooter;
+exports.ItemGroup = ItemGroup;
+exports.ItemHeader = ItemHeader;
+exports.ItemMedia = ItemMedia;
+exports.ItemSeparator = ItemSeparator;
+exports.ItemTitle = ItemTitle;
 exports.JobBubbleIcon = JobBubbleIcon;
 exports.JsonForm = json_form_default;
 exports.Kbd = Kbd;
@@ -8332,6 +9494,9 @@ exports.MetadataIcon = MetadataIcon;
 exports.MicrosoftIcon = MicrosoftIcon;
 exports.MistralIcon = MistralIcon;
 exports.MySubscriptionsIcon = MySubscriptionsIcon;
+exports.NativeSelect = NativeSelect;
+exports.NativeSelectOptGroup = NativeSelectOptGroup;
+exports.NativeSelectOption = NativeSelectOption;
 exports.NavItems = nav_items_default;
 exports.NavigationMenu = NavigationMenu;
 exports.NavigationMenuContent = NavigationMenuContent;
@@ -8403,6 +9568,7 @@ exports.Skeleton = skeleton_default;
 exports.Slider = slider_default;
 exports.SortingAToZ = SortingAToZ;
 exports.SortingZToA = SortingZToA;
+exports.Spinner = Spinner;
 exports.StepIndicator = step_indicator_default;
 exports.StoreIcon = StoreIcon;
 exports.Switch = switch_default;
@@ -8442,7 +9608,12 @@ exports.VideoPlayer = video_player_default;
 exports.WebSearchDisabledIcon = WebSearchDisabledIcon;
 exports.WebSearchIcon = WebSearchIcon;
 exports.YouTubeEmbed = youtube_embed_default;
+exports.YouTubePipPlayer = YouTubePipPlayer;
+exports.alertVariants = alertVariants;
+exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
 exports.fileIconMap = fileIconMap;
 exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
+exports.tabsListVariants = tabsListVariants;
 exports.toggleVariants = toggleVariants;
+exports.youtubePipPlayerVariants = youtubePipPlayerVariants;