"use client";
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Toaster as Sonner } from "sonner";
import { CloseIcon } from "./close-icon";
const Toaster = ({ ...props }) => {
    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
        [data-sonner-toast] [data-description] {
          color: var(--color-neutral-grey-100) !important; /* gray-700 for better contrast on white */
          opacity: 1 !important;
        }

        [data-sonner-toast]:has([data-close-button]) {
          padding-right: 48px !important;
        }

        [data-sonner-toast] [data-close-button] {
          top: 10px !important;
          right: 10px !important;
          left: auto !important;
          height: 26px !important;
          width: 26px !important;
          transform: none !important;
          border-radius: 4px !important;
          color: var(--color-neutral-grey-50) !important;
          background: var(--color-white) !important;
          border-color: var(--color-border-default) !important;
        }

        [data-sonner-toast] [data-close-button]:hover {
          color: var(--color-neutral-grey-100) !important;
          background: var(--color-neutral-grey-5) !important;
          border-color: var(--color-neutral-grey-10) !important;
        }
      ` }), _jsx(Sonner, { closeButton: true, duration: 4000, theme: "dark", className: "toaster group ![--width:340px] xl:![--width:660px]", icons: {
                    close: _jsx(CloseIcon, { size: "xs" }),
                }, toastOptions: {
                    className: "w-[400px] max-h-64 overflow-y-auto",
                }, style: {
                    "--normal-bg": "var(--popover)",
                    "--normal-text": "var(--popover-foreground)",
                    "--normal-border": "var(--border)",
                }, ...props })] }));
};
export { Toaster };
//# sourceMappingURL=sonner.js.map