@kloudlite/design-system/mjs/molecule/toast.js

A design system for building ambitious products.

// components/molecule/toast.tsx
import {
  ToastContainer as Container2,
  toast as t
} from "react-toastify";

// components/icons.tsx
import {
  BellSimple,
  Warning,
  WarningCircleFill,
  Domain,
  ArrowLeftLg,
  ArrowRightLg,
  ArrowUpLg,
  ArrowDownLg,
  ArrowsDownUp,
  Plus,
  Trash,
  PencilLine,
  PencilSimple,
  GithubLogoFill,
  GitlabLogoFill,
  GitBranchFill,
  Users,
  Check,
  ChevronLeft,
  ChevronRight,
  X,
  SmileySad,
  InfoFill,
  CheckCircleFill,
  WarningFill,
  WarningOctagonFill,
  LockSimple,
  XCircleFill,
  LockSimpleOpen,
  MinusCircle,
  Search,
  ArrowsCounterClockwise,
  ArrowClockwise,
  Copy,
  GearSix,
  QrCode,
  WireGuardlogo,
  ChevronUpDown,
  ChevronDown,
  Buildings,
  Project,
  InfraAsCode,
  Container,
  File,
  TreeStructure,
  CirclesFour,
  BackingServices,
  VirtualMachine,
  Database,
  ArrowsClockwise,
  Info,
  Fan,
  WarningCircle,
  ChecksFill,
  CircleNotch,
  Circle,
  CircleFill,
  Spinner,
  Globe,
  ShieldCheck,
  NoOps,
  Nodeless,
  GitMerge,
  PencilLine as PencilLine2,
  AWSlogoFill,
  GoogleCloudlogo,
  ArrowCounterClockwise,
  CopySimple,
  RecordFill,
  CheckCircle,
  ArrowLeftLg as ArrowLeftLg2,
  EyeSlash,
  Eye,
  CaretUpFill,
  CaretDownFill,
  XFill,
  HamburgerFill,
  CalendarCheckFill,
  GearFill,
  EnvelopeSimple
} from "@jengaicons/react";
import { jsx } from "react/jsx-runtime";

// components/molecule/toast.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var toast = {
  info: t.info,
  success: t.success,
  error: t.error,
  warn: t.warn,
  isActive: t.isActive,
  update: t.update
};
var classes = {
  info: "kl-bg-surface-basic-default dark:kl-bg-surface-darktheme-basic-default kl-text-text-default dark:kl-text-text-darktheme-default kl-bodyMd kl-border-border-disabled dark:kl-border-border-darktheme-disabled",
  error: "kl-bg-surface-basic-default dark:kl-bg-surface-darktheme-basic-default kl-text-text-default dark:kl-text-text-darktheme-default kl-bodyMd kl-border-border-disabled dark:kl-border-border-darktheme-disabled",
  success: "kl-bg-surface-basic-default dark:kl-bg-surface-darktheme-basic-default kl-text-text-default dark:kl-text-text-darktheme-default kl-bodyMd kl-border-border-disabled dark:kl-border-border-darktheme-disabled",
  warning: "kl-bg-surface-basic-default dark:kl-bg-surface-darktheme-basic-default kl-text-text-default dark:kl-text-text-darktheme-default kl-bodyMd kl-border-border-disabled dark:kl-border-border-darktheme-disabled",
  default: "kl-bg-surface-basic-default dark:kl-bg-surface-darktheme-basic-default kl-text-text-default dark:kl-text-text-darktheme-default kl-bodyMd kl-border-border-disabled dark:kl-border-border-darktheme-disabled"
};
var icons = {
  info: /* @__PURE__ */ jsx2(Info, { size: 14 }),
  error: /* @__PURE__ */ jsx2(WarningCircle, { size: 14 }),
  success: /* @__PURE__ */ jsx2(CheckCircle, { size: 14 }),
  warning: /* @__PURE__ */ jsx2(Warning, { size: 14 }),
  default: null
};
var CloseButton = () => /* @__PURE__ */ jsx2("span", { className: "kl-text-text-default dark:kl-text-text-darktheme-default hover:kl-text-text-default/50 dark:kl-hover:text-text-darktheme-default/50 kl-h-[24px] kl-flex kl-items-center", children: /* @__PURE__ */ jsx2(X, { color: "currentColor", size: 12 }) });
var ToastContainer = ({ autoClose, position }) => {
  return /* @__PURE__ */ jsx2(
    Container2,
    {
      toastClassName: ({ type }) => `kl-z-[9999999999] kl-shadow-popover kl-relative kl-flex kl-items-start kl-gap-xl kl-p-xl kl-mb-xl kl-rounded-md kl-justify-between kl-overflow-hidden kl-cursor-pointer kl-border 
        ${classes[type || "default"]}`,
      bodyClassName: () => "kl-text-text-default dark:kl-text-text-darktheme-default kl-py-sm kl-bodyMd-medium kl-flex kl-flex-row kl-items-center [&>*]:!kl-w-auto [&>*]:kl-break-all [&>*]:kl-whitespace-break-spaces",
      hideProgressBar: true,
      icon: ({ type }) => icons[type],
      closeButton: /* @__PURE__ */ jsx2(CloseButton, {}),
      position: position || "top-right",
      autoClose
    }
  );
};
export {
  ToastContainer,
  toast
};