@snksergio/design-system 0.35.0 → 0.37.0

package/dist-lib/chunks/tooltip-DGI3hDFM.mjs

@@ -0,0 +1,1452 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { c as cn, t as tv, B as Button } from "./avatar-CIHTveDJ.mjs";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown, MoreHorizontal, ChevronRight, ArrowLeft, ArrowRight, Check, Circle, Dot } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import useEmblaCarousel from "embla-carousel-react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Drawer as Drawer$1 } from "vaul";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { OTPInput, OTPInputContext } from "input-otp";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+const Separator = React.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Item,
+  {
+    ref,
+    className: cn("border-b border-border-subtle", className),
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex flex-1 items-center justify-between py-pad-2xl text-body-md font-medium text-fg-default transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-fg-muted transition-transform duration-200" })
+    ]
+  }
+) }));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: "overflow-hidden text-body-md text-fg-muted transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: cn("pb-pad-2xl pt-0", className), children })
+  }
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+const alertVariants = cva(
+  "relative w-full rounded-radius-2xl border px-pad-2xl py-pad-xl text-body-md [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-fg-default",
+  {
+    variants: {
+      variant: {
+        default: "bg-bg-surface text-fg-default border-border-subtle",
+        destructive: "border-border-danger-muted/50 text-fg-danger [&>svg]:text-fg-danger"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const Alert = React.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "alert",
+    className: cn(alertVariants({ variant }), className),
+    ...props
+  }
+));
+Alert.displayName = "Alert";
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h5",
+  {
+    ref,
+    className: cn("text-body-md font-medium text-fg-default mb-sp-xs leading-none tracking-tight", className),
+    ...props
+  }
+));
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("text-body-md text-fg-muted [&_p]:leading-relaxed", className),
+    ...props
+  }
+));
+AlertDescription.displayName = "AlertDescription";
+const badgeVariants = tv({
+  base: [
+    "inline-flex items-center justify-center",
+    "border border-transparent",
+    "font-semibold leading-none whitespace-nowrap",
+    "transition-colors",
+    "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  variants: {
+    color: {
+      primary: "",
+      secondary: "",
+      critical: "",
+      success: "",
+      warning: "",
+      info: ""
+    },
+    variant: {
+      solid: "",
+      soft: "",
+      outline: "bg-transparent",
+      ghost: "bg-transparent border-transparent"
+    },
+    size: {
+      sm: "h-comp-2xs px-pad-sm text-caption-xs gap-gp-2xs [&_svg]:size-3",
+      // 20px / 6 / 10
+      md: "h-comp-xs px-pad-md text-body-xs gap-gp-xs [&_svg]:size-3.5",
+      // 24px / 8 / 12 (default)
+      lg: "h-comp-sm px-pad-lg text-body-sm font-normal gap-gp-sm [&_svg]:size-4"
+      // 28px / 10 / 13
+    },
+    shape: {
+      default: "rounded-radius-sm",
+      // 6px — counter, value tags
+      pill: "rounded-radius-full"
+      // pill — status chips
+    }
+  },
+  compoundVariants: [
+    /* ── Primary (brand) ─────────────────────────────────────────────── */
+    { color: "primary", variant: "solid", class: "bg-bg-brand text-fg-on-brand" },
+    { color: "primary", variant: "soft", class: "bg-bg-brand-subtle text-fg-brand" },
+    { color: "primary", variant: "outline", class: "border-border-brand text-fg-brand" },
+    { color: "primary", variant: "ghost", class: "text-fg-brand" },
+    /* ── Secondary (neutral) ─────────────────────────────────────────── */
+    { color: "secondary", variant: "solid", class: "bg-bg-emphasis text-fg-default" },
+    { color: "secondary", variant: "soft", class: "bg-bg-muted text-fg-muted" },
+    { color: "secondary", variant: "outline", class: "border-border-default text-fg-default" },
+    { color: "secondary", variant: "ghost", class: "text-fg-muted" },
+    /* ── Critical (danger) ───────────────────────────────────────────── */
+    { color: "critical", variant: "solid", class: "bg-bg-danger text-fg-on-danger" },
+    { color: "critical", variant: "soft", class: "bg-bg-danger-muted text-fg-danger" },
+    { color: "critical", variant: "outline", class: "border-border-danger-muted text-fg-danger" },
+    { color: "critical", variant: "ghost", class: "text-fg-danger" },
+    /* ── Success ─────────────────────────────────────────────────────── */
+    { color: "success", variant: "solid", class: "bg-bg-success text-fg-on-success" },
+    { color: "success", variant: "soft", class: "bg-bg-success-muted text-fg-success" },
+    { color: "success", variant: "outline", class: "border-border-success-muted text-fg-success" },
+    { color: "success", variant: "ghost", class: "text-fg-success" },
+    /* ── Warning ─────────────────────────────────────────────────────── */
+    { color: "warning", variant: "solid", class: "bg-bg-warning text-fg-on-warning" },
+    { color: "warning", variant: "soft", class: "bg-bg-warning-muted text-fg-warning" },
+    { color: "warning", variant: "outline", class: "border-border-warning-muted text-fg-warning" },
+    { color: "warning", variant: "ghost", class: "text-fg-warning" },
+    /* ── Info ────────────────────────────────────────────────────────── */
+    { color: "info", variant: "solid", class: "bg-bg-info text-fg-on-info" },
+    { color: "info", variant: "soft", class: "bg-bg-info-muted text-fg-info" },
+    { color: "info", variant: "outline", class: "border-border-info-muted text-fg-info" },
+    { color: "info", variant: "ghost", class: "text-fg-info" }
+  ],
+  defaultVariants: {
+    color: "secondary",
+    variant: "soft",
+    size: "md",
+    shape: "default"
+  }
+});
+function Badge({ className, color, variant, size, shape, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: badgeVariants({ color, variant, size, shape, className }),
+      ...props
+    }
+  );
+}
+const Breadcrumb = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
+Breadcrumb.displayName = "Breadcrumb";
+const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "ol",
+  {
+    ref,
+    className: cn(
+      "flex flex-wrap items-center gap-gp-sm break-words text-body-md text-fg-muted sm:gap-gp-lg",
+      className
+    ),
+    ...props
+  }
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    ref,
+    className: cn("inline-flex items-center gap-gp-sm", className),
+    ...props
+  }
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: cn("transition-colors hover:text-fg-default", className),
+      ...props
+    }
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    ref,
+    role: "link",
+    "aria-disabled": "true",
+    "aria-current": "page",
+    className: cn("font-normal text-fg-default", className),
+    ...props
+  }
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: cn("[&>svg]:w-3.5 [&>svg]:h-3.5 text-fg-subtle", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+  }
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: cn("flex h-9 w-9 items-center justify-center text-fg-subtle", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+    ]
+  }
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+const Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex flex-col gap-gp-4xl rounded-radius-base bg-bg-surface py-pad-4xl text-body-md text-fg-default shadow-sh-lg ring-1 ring-foreground/5 dark:ring-foreground/10",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "grid auto-rows-min items-start gap-gp-sm px-pad-4xl",
+      className
+    ),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("text-title-md font-medium text-fg-default", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("text-body-md text-fg-muted", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("px-pad-4xl", className), ...props }));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center px-pad-4xl", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+const CarouselContext = React.createContext(null);
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+const Carousel = React.forwardRef(
+  ({
+    orientation = "horizontal",
+    opts,
+    setApi,
+    plugins,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y"
+      },
+      plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+    const onSelect = React.useCallback((api2) => {
+      if (!api2) {
+        return;
+      }
+      setCanScrollPrev(api2.canScrollPrev());
+      setCanScrollNext(api2.canScrollNext());
+    }, []);
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+    const handleKeyDown = React.useCallback(
+      (event) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext]
+    );
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+      setApi(api);
+    }, [api, setApi]);
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+    return /* @__PURE__ */ jsx(
+      CarouselContext.Provider,
+      {
+        value: {
+          carouselRef,
+          api,
+          opts,
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref,
+            onKeyDownCapture: handleKeyDown,
+            className: cn("relative", className),
+            role: "region",
+            "aria-roledescription": "carousel",
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+const CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex",
+        orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+CarouselContent.displayName = "CarouselContent";
+const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-roledescription": "slide",
+      className: cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      ),
+      ...props
+    }
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+const CarouselPrevious = React.forwardRef(({ className, ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      color: "secondary",
+      variant: "outline",
+      size: "icon-xs",
+      className: cn(
+        "absolute rounded-radius-full",
+        orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollPrev,
+      onClick: scrollPrev,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ArrowLeft, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
+      ]
+    }
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+const CarouselNext = React.forwardRef(({ className, ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      color: "secondary",
+      variant: "outline",
+      size: "icon-xs",
+      className: cn(
+        "absolute rounded-radius-full",
+        orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollNext,
+      onClick: scrollNext,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ArrowRight, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-radius-sm px-pad-lg py-pad-md text-body-sm text-fg-muted outline-none transition-colors focus:bg-bg-muted focus:text-fg-default [&_svg]:text-fg-muted focus:[&_svg]:text-fg-default data-[state=open]:bg-bg-muted data-[state=open]:text-fg-default",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden relative rounded-[12px] border border-border-default bg-bg-dropdown p-pad-sm text-fg-muted shadow-sh-lg outline-float before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden relative rounded-[12px] border border-border-default bg-bg-dropdown p-pad-sm text-fg-muted shadow-sh-lg outline-float before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 animate-in fade-in-80 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+) }));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+const ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-radius-sm px-pad-lg py-pad-md text-body-sm text-fg-muted outline-none transition-colors focus:bg-bg-muted focus:text-fg-default [&_svg]:text-fg-muted focus:[&_svg]:text-fg-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-radius-sm py-pad-md pl-8 pr-2 text-body-sm text-fg-muted outline-none transition-colors focus:bg-bg-muted focus:text-fg-default [&_svg]:text-fg-muted focus:[&_svg]:text-fg-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-radius-sm py-pad-md pl-8 pr-2 text-body-sm text-fg-muted outline-none transition-colors focus:bg-bg-muted focus:text-fg-default [&_svg]:text-fg-muted focus:[&_svg]:text-fg-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-pad-lg py-pad-sm text-caption-sm font-semibold uppercase tracking-wider text-fg-subtle",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("mx-pad-xs my-pad-xs h-px bg-border-default", className),
+    ...props
+  }
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-caption-sm tracking-wider text-fg-subtle",
+        className
+      ),
+      ...props
+    }
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Drawer$1.Root,
+  {
+    shouldScaleBackground,
+    ...props
+  }
+);
+Drawer.displayName = "Drawer";
+const DrawerTrigger = Drawer$1.Trigger;
+const DrawerPortal = Drawer$1.Portal;
+const DrawerClose = Drawer$1.Close;
+const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer$1.Overlay,
+  {
+    ref,
+    className: cn("fixed inset-0 z-50 bg-black/80", className),
+    ...props
+  }
+));
+DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
+const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+  /* @__PURE__ */ jsx(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    Drawer$1.Content,
+    {
+      ref,
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-border-default bg-background",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
+        children
+      ]
+    }
+  )
+] }));
+DrawerContent.displayName = "DrawerContent";
+const DrawerHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("grid gap-1.5 p-4 text-center sm:text-left", className),
+    ...props
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+const DrawerFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("mt-auto flex flex-col gap-2 p-4", className),
+    ...props
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer$1.Title,
+  {
+    ref,
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+DrawerTitle.displayName = Drawer$1.Title.displayName;
+const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer$1.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = Drawer$1.Description.displayName;
+const HoverCard = ({
+  openDelay = 200,
+  closeDelay = 100,
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCardPrimitive.Root, { openDelay, closeDelay, ...props });
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+  HoverCardPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-64 relative rounded-[12px] border border-border-default bg-bg-dropdown p-pad-card-base text-fg-default shadow-sh-lg outline-float outline-none before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+  OTPInput,
+  {
+    ref,
+    containerClassName: cn(
+      "flex items-center gap-gp-xs has-[:disabled]:opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:cursor-not-allowed", className),
+    ...props
+  }
+));
+InputOTP.displayName = "InputOTP";
+const InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props }));
+InputOTPGroup.displayName = "InputOTPGroup";
+const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative flex size-form-lg items-center justify-center border-y border-r border-border-default text-body-md text-fg-default transition-all first:rounded-l-radius-md first:border-l last:rounded-r-radius-md",
+        isActive && "z-10 ring-4 ring-ring-brand",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-fg-default duration-1000" }) })
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+const InputOTPSeparator = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", className: "text-fg-muted", ...props, children: /* @__PURE__ */ jsx(Dot, {}) }));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+const labelVariants = cva(
+  "text-body-sm font-semibold tracking-[0.01em] text-fg-default dark:text-fg-muted leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+function MenubarMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(MenubarPrimitive.Menu, { ...props });
+}
+function MenubarGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(MenubarPrimitive.Group, { ...props });
+}
+function MenubarPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { ...props });
+}
+function MenubarRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(MenubarPrimitive.RadioGroup, { ...props });
+}
+function MenubarSub({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
+}
+const Menubar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "flex h-10 items-center space-x-1 rounded-radius-lg border border-border-default bg-bg-surface p-pad-xs",
+      className
+    ),
+    ...props
+  }
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+const MenubarTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-radius-sm px-pad-lg py-pad-md text-body-sm font-semibold outline-none focus:bg-bg-muted focus:text-fg-default data-[state=open]:bg-bg-muted data-[state=open]:text-fg-default",
+      className
+    ),
+    ...props
+  }
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+const MenubarSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  MenubarPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-radius-sm px-pad-lg py-pad-md text-body-sm text-fg-muted outline-none transition-colors focus:bg-bg-muted focus:text-fg-default [&_svg]:text-fg-muted focus:[&_svg]:text-fg-default data-[state=open]:bg-bg-muted data-[state=open]:text-fg-default",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+const MenubarSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden relative rounded-[12px] border border-border-default bg-bg-dropdown p-pad-sm text-fg-muted shadow-sh-lg outline-float before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+const MenubarContent = React.forwardRef(
+  ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    MenubarPrimitive.Content,
+    {
+      ref,
+      align,
+      alignOffset,
+      sideOffset,
+      className: cn(
+        "z-50 min-w-[12rem] overflow-hidden relative rounded-[12px] border border-border-default bg-bg-dropdown p-pad-sm text-fg-muted shadow-sh-lg outline-float before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
+        className
+      ),
+      ...props
+    }
+  ) })
+);
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+const MenubarItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-radius-sm px-pad-lg py-pad-md text-body-sm text-fg-muted outline-none transition-colors focus:bg-bg-muted focus:text-fg-default [&_svg]:text-fg-muted focus:[&_svg]:text-fg-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+const MenubarCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  MenubarPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-radius-sm py-pad-md pl-8 pr-2 text-body-sm text-fg-muted outline-none transition-colors focus:bg-bg-muted focus:text-fg-default [&_svg]:text-fg-muted focus:[&_svg]:text-fg-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+const MenubarRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  MenubarPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-radius-sm py-pad-md pl-8 pr-2 text-body-sm text-fg-muted outline-none transition-colors focus:bg-bg-muted focus:text-fg-default [&_svg]:text-fg-muted focus:[&_svg]:text-fg-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+const MenubarLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-pad-lg py-pad-md text-sm font-semibold",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+const MenubarSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+const MenubarShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-caption-sm tracking-wider text-fg-subtle",
+        className
+      ),
+      ...props
+    }
+  );
+};
+MenubarShortcut.displayname = "MenubarShortcut";
+const NavigationMenu = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  NavigationMenuPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(NavigationMenuViewport, {})
+    ]
+  }
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+const NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    ),
+    ...props
+  }
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex min-h-form-lg w-max items-center justify-center rounded-radius-md bg-transparent px-pad-lg py-pad-md text-body-sm font-semibold text-fg-muted transition-colors hover:bg-bg-muted hover:text-fg-default focus:bg-bg-muted focus:text-fg-default focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-bg-muted data-[state=open]:text-fg-default"
+);
+const NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  NavigationMenuPrimitive.Trigger,
+  {
+    ref,
+    className: cn(navigationMenuTriggerStyle(), "group", className),
+    ...props,
+    children: [
+      children,
+      " ",
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          className: "relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180",
+          "aria-hidden": "true"
+        }
+      )
+    ]
+  }
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    ),
+    ...props
+  }
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.Viewport,
+  {
+    className: cn(
+      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden relative rounded-[12px] border border-border-default bg-bg-dropdown text-fg-default shadow-sh-lg outline-float before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+      className
+    ),
+    ref,
+    ...props
+  }
+) }));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+const NavigationMenuIndicator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenuPrimitive.Indicator,
+  {
+    ref,
+    className: cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-bg-surface border border-border-default shadow-sh-md" })
+  }
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
+  ProgressPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex h-3 w-full items-center overflow-hidden rounded-radius-full",
+      "bg-bg-emphasis dark:bg-bg-accent",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      ProgressPrimitive.Indicator,
+      {
+        className: "size-full flex-1 bg-bg-brand transition-all",
+        style: { transform: `translateX(-${100 - (value || 0)}%)` }
+      }
+    )
+  }
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      className: cn("grid w-full gap-gp-xl", className),
+      ...props,
+      ref
+    }
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "peer relative flex aspect-square size-4 shrink-0 cursor-pointer",
+        "rounded-radius-full",
+        "bg-bg-input dark:bg-bg-muted",
+        "border-[1.5px] border-border-input",
+        "transition-[background-color,border-color,box-shadow] outline-none",
+        "hover:border-border-default",
+        "focus-visible:shadow-sh-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:bg-bg-brand data-[state=checked]:border-border-brand",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex size-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "size-[6px] rounded-radius-full bg-fg-on-brand" }) })
+    }
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border-default" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+const THUMB_CLASS = cn(
+  "block h-4 w-6 shrink-0 rounded-radius-full bg-white",
+  "shadow-sh-md",
+  "transition-[box-shadow] select-none outline-none",
+  "hover:shadow-sh-ring",
+  "focus-visible:shadow-sh-ring",
+  "disabled:pointer-events-none disabled:opacity-50"
+);
+const Slider = React.forwardRef(({ className, defaultValue, value, ...props }, ref) => {
+  const thumbCount = (value ?? defaultValue ?? [0]).length;
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      ref,
+      defaultValue,
+      value,
+      className: cn(
+        "relative flex w-full touch-none select-none items-center",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-radius-full bg-bg-emphasis dark:bg-bg-accent", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-bg-brand" }) }),
+        Array.from({ length: thumbCount }, (_, i) => /* @__PURE__ */ jsx(SliderPrimitive.Thumb, { className: THUMB_CLASS }, i))
+      ]
+    }
+  );
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
+const TabsVariantContext = React.createContext("segmented");
+const Tabs = React.forwardRef(({ variant = "segmented", ...props }, ref) => /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props }) }));
+Tabs.displayName = "Tabs";
+const TabsList = React.forwardRef(({ className, ...props }, ref) => {
+  const variant = React.useContext(TabsVariantContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      ref,
+      className: cn(
+        variant === "line" ? "inline-flex w-fit items-center gap-gp-xl border-b border-border-subtle" : "inline-flex h-form-lg w-fit items-center bg-bg-muted p-[3px] gap-gp-2xs rounded-radius-lg",
+        className
+      ),
+      ...props
+    }
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => {
+  const variant = React.useContext(TabsVariantContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center gap-gp-sm whitespace-nowrap text-body-sm font-medium text-fg-muted transition-colors",
+        "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary",
+        "hover:text-fg-default",
+        "disabled:pointer-events-none disabled:opacity-50",
+        variant === "line" ? "-mb-px h-[38px] px-[2px] pb-[8px] border-b-2 border-transparent data-[state=active]:border-border-brand data-[state=active]:text-fg-default data-[state=active]:font-semibold" : "h-[34px] px-[14px] rounded-radius-md data-[state=active]:bg-bg-accent data-[state=active]:text-fg-default data-[state=active]:font-semibold data-[state=active]:shadow-sh-sm",
+        className
+      ),
+      ...props
+    }
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-sp-md flex-1 text-body-md outline-none",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-gp-xs rounded-radius-md border border-transparent text-body-sm font-semibold transition-colors hover:bg-bg-muted hover:text-fg-muted focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-bg-brand-subtle data-[state=on]:text-fg-brand [&_svg]:pointer-events-none [&_svg]:size-icon-sm [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border-default bg-transparent hover:bg-bg-muted hover:text-fg-default"
+      },
+      size: {
+        default: "min-h-form-lg px-pad-lg min-w-form-lg",
+        sm: "min-h-form-md px-pad-md min-w-form-md",
+        lg: "min-h-form-xl px-pad-xl min-w-form-xl"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const Toggle = React.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+  TogglePrimitive.Root,
+  {
+    ref,
+    className: cn(toggleVariants({ variant, size, className })),
+    ...props
+  }
+));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+const ToggleGroupContext = React.createContext({
+  size: "default",
+  variant: "default"
+});
+const ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    className: cn("flex items-center justify-center gap-gp-xs", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+  }
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+const ToggleGroupItem = React.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const Tooltip = ({ children, ...props }) => /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { ...props, children }) });
+Tooltip.displayName = "Tooltip";
+const TooltipContent = React.forwardRef(({ className, sideOffset = 6, showArrow = true, children, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 max-w-[16rem] select-none",
+      "bg-bg-emphasis text-fg-default",
+      "rounded-radius-md px-pad-lg py-pad-xs",
+      "text-caption-sm",
+      "shadow-sh-md",
+      "origin-[--radix-tooltip-content-transform-origin]",
+      "data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=instant-open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      showArrow && /* @__PURE__ */ jsx(
+        TooltipPrimitive.Arrow,
+        {
+          width: 11,
+          height: 5,
+          className: "fill-bg-emphasis"
+        }
+      )
+    ]
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export {
+  DrawerTrigger as $,
+  Accordion as A,
+  Badge as B,
+  Card as C,
+  ContextMenu as D,
+  ContextMenuCheckboxItem as E,
+  ContextMenuContent as F,
+  ContextMenuGroup as G,
+  ContextMenuItem as H,
+  ContextMenuLabel as I,
+  ContextMenuPortal as J,
+  ContextMenuRadioGroup as K,
+  ContextMenuRadioItem as L,
+  ContextMenuSeparator as M,
+  ContextMenuShortcut as N,
+  ContextMenuSub as O,
+  ContextMenuSubContent as P,
+  ContextMenuSubTrigger as Q,
+  ContextMenuTrigger as R,
+  Drawer as S,
+  DrawerClose as T,
+  DrawerContent as U,
+  DrawerDescription as V,
+  DrawerFooter as W,
+  DrawerHeader as X,
+  DrawerOverlay as Y,
+  DrawerPortal as Z,
+  DrawerTitle as _,
+  AccordionContent as a,
+  HoverCard as a0,
+  HoverCardContent as a1,
+  HoverCardTrigger as a2,
+  InputOTP as a3,
+  InputOTPGroup as a4,
+  InputOTPSeparator as a5,
+  InputOTPSlot as a6,
+  Label as a7,
+  Menubar as a8,
+  MenubarCheckboxItem as a9,
+  ScrollBar as aA,
+  Separator as aB,
+  Slider as aC,
+  Tabs as aD,
+  TabsContent as aE,
+  TabsList as aF,
+  TabsTrigger as aG,
+  Toggle as aH,
+  ToggleGroup as aI,
+  ToggleGroupItem as aJ,
+  Tooltip as aK,
+  TooltipContent as aL,
+  TooltipProvider as aM,
+  TooltipTrigger as aN,
+  badgeVariants as aO,
+  navigationMenuTriggerStyle as aP,
+  toggleVariants as aQ,
+  MenubarContent as aa,
+  MenubarGroup as ab,
+  MenubarItem as ac,
+  MenubarLabel as ad,
+  MenubarMenu as ae,
+  MenubarPortal as af,
+  MenubarRadioGroup as ag,
+  MenubarRadioItem as ah,
+  MenubarSeparator as ai,
+  MenubarShortcut as aj,
+  MenubarSub as ak,
+  MenubarSubContent as al,
+  MenubarSubTrigger as am,
+  MenubarTrigger as an,
+  NavigationMenu as ao,
+  NavigationMenuContent as ap,
+  NavigationMenuIndicator as aq,
+  NavigationMenuItem as ar,
+  NavigationMenuLink as as,
+  NavigationMenuList as at,
+  NavigationMenuTrigger as au,
+  NavigationMenuViewport as av,
+  Progress as aw,
+  RadioGroup as ax,
+  RadioGroupItem as ay,
+  ScrollArea as az,
+  AccordionItem as b,
+  AccordionTrigger as c,
+  Alert as d,
+  AlertDescription as e,
+  AlertTitle as f,
+  Breadcrumb as g,
+  BreadcrumbEllipsis as h,
+  BreadcrumbItem as i,
+  BreadcrumbLink as j,
+  BreadcrumbList as k,
+  BreadcrumbPage as l,
+  BreadcrumbSeparator as m,
+  CardContent as n,
+  CardDescription as o,
+  CardFooter as p,
+  CardHeader as q,
+  CardTitle as r,
+  Carousel as s,
+  CarouselContent as t,
+  CarouselItem as u,
+  CarouselNext as v,
+  CarouselPrevious as w,
+  Collapsible as x,
+  CollapsibleContent as y,
+  CollapsibleTrigger as z
+};
+//# sourceMappingURL=tooltip-DGI3hDFM.mjs.map