@keboola/design 9.1.0 → 10.1.0

package/dist/chunk-XV3UUOYF.js

@@ -0,0 +1,845 @@
+import { ScrollArea } from './chunk-SYIEF644.js';
+import { ChevronRight, Loader2, X, AlertCircle, CircleCheck, Info, AlertTriangle, ToggleRight, Circle, Check } from './chunk-BOHNXTMM.js';
+import { useArgoDesign } from './chunk-63NSN2VL.js';
+import { cn } from './chunk-JP7PNHLH.js';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useMemo, use } from 'react';
+import * as DropdownMenuPrimitive3 from '@radix-ui/react-dropdown-menu';
+import { Root, Group, Trigger } from '@radix-ui/react-dropdown-menu';
+import { Root as Root$1, Slottable } from '@radix-ui/react-slot';
+import { toast as toast$1 } from 'sonner';
+
+var buttonGroupVariant = cva(
+  ["tailwindcss-preflight", "tw:inline-flex", "tw:items-center", "tw:group/button-group"],
+  {
+    defaultVariants: {
+      variant: "inline",
+      space: "small"
+    },
+    variants: {
+      variant: {
+        inline: [],
+        block: [
+          "tw:w-full",
+          "tw:flex-col",
+          "tw:sm:flex-row",
+          "tw:[&_a]:flex-1",
+          "tw:[&>button:not([data-icon-only=true])]:flex-1"
+        ]
+      },
+      space: {
+        "extra-small": "tw:gap-1",
+        "little-small": "tw:gap-2",
+        small: "tw:gap-3",
+        medium: "tw:gap-4",
+        large: "tw:gap-6",
+        compact: [
+          "tw:border-collapse",
+          "tw:!gap-0",
+          // ensure that focus visible outline is at the top
+          "tw:[&>*:focus-visible]:!z-10",
+          "tw:[&>*:not(:first-child)]:rounded-l-none",
+          "tw:[&>*:not(:last-child)]:rounded-r-none",
+          "tw:[&>*:not(:last-child)]:border-r-0",
+          "tw:[&>*:not(:first-child)]:border-l-0",
+          // separator
+          "tw:[&>*:not(:first-child)]:before:content",
+          "tw:[&>*:not(:first-child)]:before:absolute",
+          "tw:[&>*:not(:first-child)]:before:left-0",
+          "tw:[&>*:not(:first-child)]:before:h-full",
+          "tw:[&>*:not(:first-child)]:before:w-px",
+          "tw:[&>*:not(:first-child)]:before:bg-black/10"
+        ]
+      }
+    }
+  }
+);
+var ButtonGroup = ({
+  ref,
+  children,
+  space = "small",
+  className,
+  variant,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...rest,
+      role: "group",
+      "data-variant": variant,
+      className: cn(buttonGroupVariant({ variant, space }), className),
+      children
+    }
+  );
+};
+var variants = cva(
+  [
+    "tailwindcss-preflight",
+    "tw:pointer-events-none",
+    // sizing
+    "tw:size-4",
+    "tw:aspect-square",
+    "tw:shrink-0",
+    // layout
+    "tw:flex",
+    "tw:items-center",
+    "tw:justify-center"
+  ],
+  {
+    variants: {
+      variant: {
+        none: [],
+        radio: [
+          "tw:border",
+          "tw:border-solid",
+          "tw:border-border",
+          "tw:rounded-full",
+          "tw:group-data-[variant=default]/dropdown-menu-content:bg-white",
+          "tw:group-data-[variant=argo]/dropdown-menu-content:bg-background",
+          'tw:[&_svg:not([class*="tw:size-"])]:size-2',
+          "tw:data-[state=unchecked]:[&_svg]:hidden",
+          // Lucide Circle is stroke-only — force fill to match the stroke
+          // (currentColor) so the indicator reads as a solid dot.
+          "tw:[&_svg]:fill-current",
+          "tw:group-data-[variant=argo]/dropdown-menu-content:[&_svg]:text-primary",
+          "tw:group-data-[variant=default]/dropdown-menu-content:[&_svg]:text-primary"
+        ],
+        check: ['tw:[&_svg:not([class*="tw:size-"])]:size-3.5', "tw:[&_svg]:text-primary"],
+        checkbox: [
+          "tw:[&_svg]:text-primary-foreground",
+          "tw:border",
+          "tw:border-solid",
+          "tw:rounded",
+          "tw:group-data-[variant=default]/dropdown-menu-content:border-neutral-200",
+          "tw:group-data-[variant=argo]/dropdown-menu-content:border-input",
+          'tw:[&_svg:not([class*="tw:size-"])]:size-3',
+          "tw:data-[state=unchecked]:[&_svg]:hidden",
+          "tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:border-primary",
+          "tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:bg-primary",
+          "tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:border-primary",
+          "tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:bg-primary"
+        ],
+        switch: [
+          "tw:size-5",
+          // Lucide SVGs default to 24×24 — constrain the rendered ToggleRight
+          // to the indicator slot so it doesn't overflow.
+          'tw:[&_svg:not([class*="tw:size-"])]:size-5',
+          "tw:text-neutral-400",
+          "tw:data-[state=unchecked]:rotate-180",
+          "tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:text-primary",
+          "tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:text-primary"
+        ]
+      }
+    }
+  }
+);
+var DropdownMenuItemIndicator = ({
+  variant,
+  className,
+  forceMount: forceMountProp,
+  ...rest
+}) => {
+  const IconComp = (() => {
+    if (variant === "switch") return ToggleRight;
+    if (variant === "radio") return Circle;
+    return Check;
+  })();
+  const forceMount = (() => {
+    if (forceMountProp) return true;
+    return variant === "check" ? void 0 : true;
+  })();
+  if (variant === "none") return null;
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive3.ItemIndicator,
+    {
+      ...rest,
+      forceMount,
+      className: variants({ variant, className }),
+      children: /* @__PURE__ */ jsx(IconComp, {})
+    }
+  );
+};
+var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    ...props,
+    className: cn(
+      "tw:inline-flex",
+      "tw:items-center",
+      "tw:justify-center",
+      "tw:aspect-square",
+      // 20px container fits the 16px Lucide glyph plus 2px breathing room
+      // each side — the previous tw:size-4 + tw:p-0.5 clipped the 16px child.
+      "tw:size-5",
+      'tw:[&_svg:not([class*="tw:size-"])]:size-4',
+      "tw:group-data-[variant=default]/dropdown-menu-content:text-neutral-400",
+      "tw:group-data-[variant=argo]/dropdown-menu-content:text-primary",
+      "tw:group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:text-muted-foreground",
+      "tw:group-data-[variant=default]/dropdown-menu-content:group-hover:text-primary",
+      className
+    ),
+    children
+  }
+);
+
+// src/components/DropdownMenu/styles.ts
+var itemVariants = cn(
+  // reset
+  "tailwindcss-preflight",
+  "tw:outline-hidden",
+  "tw:group",
+  "tw:peer",
+  "tw:relative",
+  // positioning
+  "tw:flex",
+  "tw:flex-1",
+  "tw:items-center",
+  "tw:gap-2",
+  // An icon passed as `children` rather than via the `icon` prop misses `ItemIcon`,
+  // so without this it falls back to Lucide's 24px default and towers over the
+  // siblings this row is laid out for. The `:not()` keeps a call-site size winning.
+  'tw:[&_svg:not([class*="tw:size-"])]:size-4',
+  "tw:cursor-pointer",
+  "tw:select-none",
+  "tw:transition-colors",
+  // spacing
+  "tw:p-2",
+  // typography
+  "tw:font-sans",
+  "tw:text-sm",
+  "tw:aria-disabled:pointer-events-none",
+  "tw:aria-disabled:opacity-50",
+  "tw:focus-visible:outline-hidden",
+  "tw:group-data-[variant=default]/dropdown-menu-content:rounded",
+  "tw:group-data-[variant=default]/dropdown-menu-content:focus:bg-neutral-100",
+  "tw:group-data-[variant=default]/dropdown-menu-content:focus:text-neutral-900",
+  "tw:group-data-[variant=default]/dropdown-menu-content:hover:bg-neutral-100",
+  "tw:group-data-[variant=default]/dropdown-menu-content:hover:text-neutral-900",
+  "tw:group-data-[variant=argo]/dropdown-menu-content:rounded-md",
+  "tw:group-data-[variant=argo]/dropdown-menu-content:text-popover-foreground",
+  "tw:group-data-[variant=argo]/dropdown-menu-content:focus:text-primary",
+  "tw:group-data-[variant=argo]/dropdown-menu-content:focus:bg-primary/10",
+  "tw:group-data-[variant=argo]/dropdown-menu-content:hover:text-primary",
+  "tw:group-data-[variant=argo]/dropdown-menu-content:hover:bg-primary/10"
+);
+var contentVariants = cn(
+  "tailwindcss-preflight",
+  "tw:group/dropdown-menu-content",
+  // Sit above Modal/Sheet (z-1051), matching the other floating overlays (Popover/Select z-1055)
+  "tw:z-[1055]",
+  // positioning
+  "tw:flex",
+  "tw:flex-col",
+  "tw:origin-(--radix-dropdown-menu-content-transform-origin)",
+  // sizing
+  "tw:max-h-[var(--radix-dropdown-menu-content-available-height)]",
+  "tw:min-w-32",
+  // border
+  "tw:border",
+  "tw:shadow-md",
+  // Legacy surface — fixed white panel.
+  "tw:data-[variant=default]:rounded-md",
+  "tw:data-[variant=default]:bg-white",
+  "tw:data-[variant=default]:border-neutral-100",
+  "tw:data-[variant=default]:text-neutral-800",
+  // Argo surface — semantic popover tokens (brand + dark aware).
+  "tw:data-[variant=argo]:rounded-2xl",
+  "tw:data-[variant=argo]:bg-popover",
+  "tw:data-[variant=argo]:text-popover-foreground",
+  "tw:data-[variant=argo]:border-border",
+  // animations
+  "tw:data-[state=open]:animate-in",
+  "tw:data-[state=open]:fade-in-0",
+  "tw:data-[state=open]:zoom-in-95",
+  "tw:data-[state=closed]:animate-out",
+  "tw:data-[state=closed]:fade-out-0",
+  "tw:data-[state=closed]:zoom-out-95",
+  "tw:data-[side=bottom]:slide-in-from-top-2",
+  "tw:data-[side=left]:slide-in-from-right-2",
+  "tw:data-[side=right]:slide-in-from-left-2",
+  "tw:data-[side=top]:slide-in-from-bottom-2"
+);
+var DropdownMenuCheckboxItem = ({
+  className,
+  children,
+  checked,
+  closeOnSelect = false,
+  onSelect,
+  indicatorAlign = "start",
+  indicator = "checkbox",
+  isLoading = false,
+  ...props
+}) => {
+  const isAtStart = indicatorAlign === "start";
+  const indicatorEle = isLoading ? /* @__PURE__ */ jsx(ItemIcon, { className: isAtStart ? "" : "tw:ml-auto", children: /* @__PURE__ */ jsx(Loader2, { className: "tw:animate-spin" }) }) : /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { variant: indicator, className: isAtStart ? "" : "tw:ml-auto" });
+  const handleSelect = (event) => {
+    if (!closeOnSelect) event.preventDefault();
+    onSelect?.(event);
+  };
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive3.CheckboxItem,
+    {
+      className: cn(itemVariants, className),
+      checked,
+      onSelect: handleSelect,
+      ...props,
+      children: [
+        isAtStart && indicatorEle,
+        children,
+        !isAtStart && indicatorEle
+      ]
+    }
+  );
+};
+var DropdownMenuContext = createContext({
+  variant: "default"
+});
+var useDropdownMenuContext = () => use(DropdownMenuContext);
+var DropdownMenuContent = ({
+  className,
+  sideOffset = 4,
+  forceMount,
+  children,
+  viewPortClassName,
+  container,
+  ...props
+}) => {
+  const { variant } = useDropdownMenuContext();
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive3.Portal, { forceMount: forceMount || void 0, container, children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive3.Content,
+    {
+      ...props,
+      "data-variant": variant,
+      sideOffset,
+      className: contentVariants,
+      children: /* @__PURE__ */ jsx(
+        ScrollArea,
+        {
+          className,
+          viewPortClassName: cn(
+            "tw:p-2",
+            "tw:max-h-[var(--radix-dropdown-menu-content-available-height)]",
+            viewPortClassName
+          ),
+          scrollBarClassName: "tw:w-1.5",
+          children
+        }
+      )
+    }
+  ) });
+};
+var DropdownMenuItem = ({
+  ref,
+  className,
+  asModalTrigger = false,
+  onSelect,
+  onPointerLeave,
+  onPointerMove,
+  children,
+  asChild,
+  icon,
+  iconClassName,
+  isLoading = false,
+  ...props
+}) => {
+  const Comp = asChild ? Root$1 : "div";
+  const adornment = isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "tw:animate-spin" }) : icon;
+  const handleOnSelect = (event) => {
+    if (asModalTrigger) event.preventDefault();
+    onSelect?.(event);
+  };
+  const handlePointerLeave = (event) => {
+    if (asModalTrigger) event.preventDefault();
+    onPointerLeave?.(event);
+  };
+  const handlePointerMove = (event) => {
+    if (asModalTrigger) event.preventDefault();
+    onPointerMove?.(event);
+  };
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive3.Item,
+    {
+      ...props,
+      ref,
+      onSelect: handleOnSelect,
+      onPointerLeave: handlePointerLeave,
+      onPointerMove: handlePointerMove,
+      className: cn(itemVariants, asChild && "tw:text-inherit", className),
+      asChild: true,
+      children: /* @__PURE__ */ jsxs(Comp, { children: [
+        adornment && /* @__PURE__ */ jsx(ItemIcon, { className: iconClassName, children: adornment }),
+        /* @__PURE__ */ jsx(Slottable, { children })
+      ] })
+    }
+  );
+};
+var descriptionVariants = cva(
+  [
+    "tw:box-border",
+    "tw:ml-auto",
+    "tw:font-sans",
+    "tw:tracking-normal",
+    "tw:font-normal",
+    "tw:text-xs",
+    "tw:text-muted-foreground"
+  ],
+  {
+    variants: {
+      hideOnHover: {
+        true: ["tw:group-focus-within:hidden", "tw:group-hover:hidden"],
+        false: []
+      }
+    },
+    defaultVariants: {}
+  }
+);
+var DropdownMenuItemDescription = ({
+  className,
+  children,
+  hideOnHover = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("span", { ...props, className: cn(descriptionVariants({ hideOnHover }), className), children });
+};
+var DropdownMenuLabel = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive3.Label,
+    {
+      className: cn(
+        "tw:p-2",
+        "tw:font-medium",
+        "tw:text-xs",
+        "tw:text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+};
+var DropdownMenuRadioGroup = ({
+  value,
+  defaultValue,
+  onValueChange,
+  ...props
+}) => {
+  const handleChange = (value2) => {
+    onValueChange?.(value2);
+  };
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive3.RadioGroup,
+    {
+      ...props,
+      value,
+      defaultValue,
+      onValueChange: handleChange
+    }
+  );
+};
+var DropdownMenuRadioItem = ({
+  className,
+  children,
+  closeOnSelect,
+  onSelect,
+  indicatorAlign = "start",
+  indicator = "radio",
+  icon,
+  iconClassName,
+  isLoading = false,
+  ...props
+}) => {
+  const isAtStart = indicatorAlign === "start";
+  const indicatorEle = isLoading ? /* @__PURE__ */ jsx(ItemIcon, { className: iconClassName, children: /* @__PURE__ */ jsx(Loader2, { className: "tw:animate-spin" }) }) : /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { variant: indicator });
+  const handleSelect = (event) => {
+    if (!closeOnSelect) event.preventDefault();
+    onSelect?.(event);
+  };
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive3.RadioItem,
+    {
+      className: cn(
+        itemVariants,
+        "tw:data-[state=checked]:cursor-default",
+        {
+          "tw:data-[state=checked]:bg-neutral-100": indicator === "none",
+          // Semantic brand tint (flips under `[data-theme='dark']`) instead of a
+          // hardcoded `tw:bg-sky-100`, which stayed light in dark mode and left the
+          // checked item's text near-invisible.
+          "tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:bg-primary/10": indicator === "check"
+        },
+        className
+      ),
+      onSelect: handleSelect,
+      ...props,
+      children: [
+        isAtStart && indicatorEle,
+        icon && /* @__PURE__ */ jsx(ItemIcon, { className: iconClassName, children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "tw:flex tw:min-w-0 tw:flex-1 tw:items-center tw:gap-2", children }),
+        !isAtStart && indicatorEle
+      ]
+    }
+  );
+};
+var DropdownMenuSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive3.Separator,
+  {
+    className: cn(
+      "tw:relative",
+      "tw:z-10",
+      // layout
+      "tw:flex",
+      "tw:items-center",
+      "tw:justify-center",
+      "tw:w-full",
+      // separator line
+      'tw:before:content-[""]',
+      "tw:before:w-full",
+      "tw:before:h-px",
+      "tw:group-data-[variant=default]/dropdown-menu-content:py-2",
+      "tw:group-data-[variant=default]/dropdown-menu-content:before:bg-neutral-150",
+      "tw:group-data-[variant=argo]/dropdown-menu-content:py-1",
+      "tw:group-data-[variant=argo]/dropdown-menu-content:before:bg-border",
+      className
+    ),
+    ...props
+  }
+);
+var DropdownMenuSub = DropdownMenuPrimitive3.Sub;
+var DropdownMenuSubContent = ({ className, ...props }) => {
+  const { variant } = useDropdownMenuContext();
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive3.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive3.SubContent,
+    {
+      "data-variant": variant,
+      className: cn(contentVariants, "tw:z-[1041]", "tw:p-2", className),
+      ...props
+    }
+  ) });
+};
+var DropdownMenuSubTrigger = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxs(DropdownMenuPrimitive3.SubTrigger, { className: cn(itemVariants, className), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx(ChevronRight, { className: "tw:ml-auto tw:size-5" })
+  ] });
+};
+var DropdownMenuTrigger = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(
+  Trigger,
+  {
+    ...props,
+    ref,
+    "data-slot": "dropdown-menu-trigger",
+    className: cn("tw:group/dropdown-menu-trigger", className)
+  }
+);
+var DropdownMenu = ({
+  // change a default value to false, for modal property, as it is not used in most cases
+  modal = false,
+  ...props
+}) => {
+  const effectiveVariant = useArgoDesign() ? "argo" : "default";
+  const contextValue = useMemo(() => ({ variant: effectiveVariant }), [effectiveVariant]);
+  return /* @__PURE__ */ jsx(DropdownMenuContext, { value: contextValue, children: /* @__PURE__ */ jsx(Root, { ...props, modal }) });
+};
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Group = Group;
+DropdownMenu.Sub = DropdownMenuSub;
+DropdownMenu.SubContent = DropdownMenuSubContent;
+DropdownMenu.SubTrigger = DropdownMenuSubTrigger;
+DropdownMenu.Separator = DropdownMenuSeparator;
+DropdownMenu.Label = DropdownMenuLabel;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.CheckboxItem = DropdownMenuCheckboxItem;
+DropdownMenu.RadioGroup = DropdownMenuRadioGroup;
+DropdownMenu.RadioItem = DropdownMenuRadioItem;
+DropdownMenu.ItemDescription = DropdownMenuItemDescription;
+var ToastAction = ({ ref, className, ...rest }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    ...rest,
+    ref,
+    "data-slot": "toast-action",
+    type: "button",
+    className: cn(
+      // layout
+      "tw:col-start-3",
+      "tw:row-start-1",
+      "tw:flex",
+      "tw:items-center",
+      "tw:justify-center",
+      // font
+      "tw:text-xs",
+      "tw:font-medium",
+      "tw:text-primary",
+      // sizing
+      "tw:px-2",
+      "tw:h-6",
+      // styles
+      "tw:bg-primary-foreground",
+      "tw:rounded",
+      className
+    )
+  }
+);
+var ToastDescription = ({ ref, className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "toast-description",
+    className: cn(
+      "tw:col-start-2",
+      "tw:font-normal",
+      "tw:break-words",
+      "tw:text-white",
+      "tw:group-data-[variant=default]/toast:text-muted-foreground",
+      className
+    ),
+    ...rest,
+    children
+  }
+);
+var ToastDismiss = ({ ref, className, ...rest }) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    ref,
+    "data-slot": "toast-dismiss",
+    className: cn(
+      "tw:flex",
+      "tw:justify-center",
+      "tw:col-start-4",
+      "tw:row-start-1",
+      "tailwindcss-preflight",
+      "tw:[&_svg]:aspect-square",
+      'tw:[&_svg:not([class*="tw:size-"])]:size-4',
+      "tw:[&_svg]:m-1",
+      "tw:text-white",
+      "tw:group-data-[variant=default]/toast:[&_svg]:text-popover-foreground",
+      "tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:[&_svg]:text-foreground",
+      className
+    ),
+    type: "button",
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsx(X, {}),
+      /* @__PURE__ */ jsx("span", { className: "tw:sr-only", children: "Dismiss" })
+    ]
+  }
+);
+var ToastDuration = ({ ref, duration, className, style, ...rest }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    ...rest,
+    ref,
+    className: cn(
+      "tw:bg-white/30",
+      "tw:group-data-[variant=default]/toast:bg-popover-foreground/20",
+      "tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:bg-foreground/20",
+      "tw:rounded-bl-lg",
+      "tw:mx-px",
+      // positioning
+      "tw:absolute",
+      "tw:bottom-0",
+      "tw:left-0",
+      // sizing
+      "tw:h-1",
+      // animation
+      "tw:animate-toast-progress",
+      "tw:group-hover/toast:[animation-play-state:paused]",
+      className
+    ),
+    style: {
+      animationDuration: `${duration}ms`,
+      ...style
+    }
+  }
+);
+var ToastTitle = ({ ref, className, children, ...rest }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "toast-title",
+    className: cn(
+      "tw:col-start-2",
+      "tw:text-sm",
+      "tw:leading-6",
+      "tw:min-h-6",
+      "tw:self-center",
+      "tw:text-white",
+      "tw:group-data-[variant=default]/toast:text-popover-foreground",
+      "tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:text-foreground",
+      "tw:break-words",
+      "tw:font-medium",
+      className
+    ),
+    ...rest,
+    children
+  }
+);
+var variants2 = cva(
+  [
+    "tailwindcss-preflight",
+    "tw:group/toast",
+    "tw:relative",
+    // layout
+    "tw:grid",
+    "tw:grid-cols-[0_1fr_auto_auto]",
+    "tw:items-start",
+    "tw:has-[[data-slot=toast-description]]:grid-rows-[auto_auto]",
+    "tw:has-[[data-slot=toast-icon]]:grid-cols-[auto_1fr_auto_auto]",
+    "tw:[&_[data-slot=toast-icon]]:mr-2",
+    "tw:[&_[data-slot=toast-title]]:mr-2.5",
+    "tw:[&_[data-slot=toast-description]]:mr-2.5",
+    "tw:[&_[data-slot=toast-action]]:mr-2",
+    "tw:[&_[data-slot=toast-description]]:col-end-3",
+    "tw:gap-y-0",
+    // styles
+    "tw:p-4",
+    "tw:rounded-lg",
+    "tw:shadow-md"
+  ],
+  {
+    defaultVariants: {
+      variant: "info"
+    },
+    variants: {
+      variant: {
+        default: "tw:border tw:border-border tw:bg-popover",
+        error: "tw:bg-error-550",
+        info: "tw:bg-blue-600",
+        success: "tw:bg-green-700",
+        warning: "tw:bg-warning-550"
+      }
+    }
+  }
+);
+var DEFAULT_VARIANT_ICON = {
+  error: /* @__PURE__ */ jsx(AlertTriangle, {}),
+  info: /* @__PURE__ */ jsx(Info, {}),
+  success: /* @__PURE__ */ jsx(CircleCheck, {}),
+  warning: /* @__PURE__ */ jsx(AlertCircle, {})
+};
+var ToastRoot = ({
+  id,
+  title,
+  description,
+  action,
+  duration = Infinity,
+  variant = "info",
+  loading = false,
+  icon: iconProp
+}) => {
+  const renderArgo = useArgoDesign();
+  const icon = (() => {
+    if (loading) return /* @__PURE__ */ jsx(Loader2, { className: "tw:animate-spin" });
+    if (iconProp) return iconProp;
+    if (variant === "default" || variant === null) return null;
+    return DEFAULT_VARIANT_ICON[variant];
+  })();
+  const handleActionClick = (event) => {
+    toast$1.dismiss(id);
+    action?.onClick(event);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-variant": variant,
+      "data-argo": renderArgo,
+      className: cn(
+        variants2({ variant }),
+        "tw:data-[variant=default]:data-[argo=true]:bg-background"
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "toast-icon",
+            className: cn(
+              "tw:inline-flex",
+              "tw:items-center",
+              "tw:justify-center",
+              "tw:self-center",
+              "tw:aspect-square",
+              "tw:size-5",
+              "tw:shrink-0",
+              'tw:[&_svg:not([class*="tw:size-"])]:size-5',
+              "tw:text-white",
+              "tw:group-data-[variant=default]/toast:text-popover-foreground",
+              "tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:text-foreground"
+            ),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsx(ToastTitle, { children: title }),
+        description && /* @__PURE__ */ jsx(ToastDescription, { children: description }),
+        action && /* @__PURE__ */ jsx(ToastAction, { style: action?.actionButtonStyle, onClick: handleActionClick, children: action.label }),
+        /* @__PURE__ */ jsx(ToastDismiss, { onClick: () => toast$1.dismiss(id) }),
+        duration !== Infinity && /* @__PURE__ */ jsx(ToastDuration, { duration })
+      ]
+    }
+  );
+};
+var toast = ({
+  onAutoClose,
+  onDismiss,
+  testId,
+  toasterId,
+  dismissible = true,
+  position,
+  title: titleProp,
+  ...toast2
+}) => {
+  const duration = (() => {
+    if (typeof toast2.duration === "number") return toast2.duration;
+    if (toast2.variant === "error" || toast2.variant === "warning") return Infinity;
+    return toast2.duration ?? 5e3;
+  })();
+  const renderCustomToast = (id) => {
+    const title = typeof titleProp === "function" ? titleProp({ dismiss: () => toast$1.dismiss(id) }) : titleProp;
+    return /* @__PURE__ */ jsx(ToastRoot, { ...toast2, id, title, duration });
+  };
+  return toast$1.custom(renderCustomToast, {
+    // toast generated by sonner will always have an id, but we want to allow users to specify their own id if they want to
+    // can not pass undefined, as it will break dismiss
+    ...toast2.id != null ? { id: toast2.id } : {},
+    unstyled: true,
+    position,
+    onAutoClose,
+    onDismiss,
+    testId,
+    toasterId,
+    dismissible,
+    duration,
+    // override default focus-visible styles to match our design
+    className: cn("tw:rounded-lg", "tw:focus-visible:!ring-4", "tw:focus-visible:!ring-ring/50")
+  });
+};
+toast.success = (title, options) => toast({
+  ...options,
+  title,
+  variant: "success"
+});
+toast.error = (title, options) => toast({
+  ...options,
+  title,
+  variant: "error",
+  duration: options?.duration ?? Infinity
+});
+toast.warning = (title, options) => toast({
+  ...options,
+  title,
+  variant: "warning",
+  duration: options?.duration ?? Infinity
+});
+toast.info = (title, options) => toast({
+  ...options,
+  title,
+  variant: "info"
+});
+toast.dismiss = (toastId) => toast$1.dismiss(toastId);
+toast.dismissAll = () => toast$1.dismiss();
+
+export { ButtonGroup, DropdownMenu, toast };
+//# sourceMappingURL=chunk-XV3UUOYF.js.map
+//# sourceMappingURL=chunk-XV3UUOYF.js.map