@serendie/ui/dist/components/Toast/Toast.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsx as o, jsxs as n } from "react/jsx-runtime";
import { createToaster as l } from "../../node_modules/@ark-ui/react/dist/components/toast/create-toaster.js";
import { Toaster as m } from "../../node_modules/@ark-ui/react/dist/components/toast/toaster.js";
import { toast_exports as r } from "../../node_modules/@ark-ui/react/dist/components/toast/toast.js";
import { SerendieSymbolAlertCircleFilled as c, SerendieSymbolCheckCircleFilled as d } from "@serendie/symbols";
import { sva as p } from "../../styled-system/css/sva.js";
const y = p({
  slots: ["root", "textGroup", "text", "icon"],
  base: {
    root: {
      display: "flex",
      alignItems: "center",
      paddingX: "sd.system.dimension.spacing.extraLarge",
      borderRadius: "sd.system.dimension.radius.medium",
      boxShadow: "sd.system.elevation.shadow.level3",
      height: 40
    },
    textGroup: {
      display: "flex",
      alignItems: "center",
      gap: "sd.system.dimension.spacing.twoExtraSmall"
    },
    text: {
      textStyle: "sd.system.typography.body.small_compact",
      _expanded: {
        textStyle: "sd.system.typography.body.small_expanded"
      }
    },
    icon: {
      color: "sd.system.color.component.inverseOnSurface"
    }
  },
  variants: {
    variant: {
      default: {
        root: {
          background: "sd.system.color.impression.positiveContainer"
        },
        text: {
          color: "sd.system.color.impression.onPositiveContainer"
        },
        icon: {
          color: "sd.system.color.impression.onPositiveContainer"
        }
      },
      error: {
        root: {
          background: "sd.system.color.impression.negativeContainer"
        },
        text: {
          color: "sd.system.color.impression.negative"
        },
        icon: {
          color: "sd.system.color.impression.negative"
        }
      }
    }
  },
  defaultVariants: {
    variant: "default"
  }
}), b = l({
  placement: "bottom"
}), S = ({ toaster: i }) => /* @__PURE__ */ o(m, { toaster: i, children: (t) => {
  const s = t.type === "error" ? "error" : "default", e = y({ variant: s }), a = s === "error" ? /* @__PURE__ */ o(c, { className: e.icon }) : /* @__PURE__ */ o(d, { className: e.icon });
  return /* @__PURE__ */ o(r.Root, { className: e.root, children: /* @__PURE__ */ n("div", { className: e.textGroup, children: [
    a,
    /* @__PURE__ */ o(r.Title, { className: e.text, children: t.title })
  ] }) }, t.id);
} });
export {
  S as Toast,
  y as ToastStyle,
  b as toaster
};