import "../Message.css";
import { jsxs, jsx } from "react/jsx-runtime";
import Icon from "./Icon.js";
import { useTheme } from "./Theme/UI.js";
import "./Theme/themeUtils.js";
import "./Theme/themes.js";
import { a as Title } from "../Typography-Q-0_2LT9.js";
const base = "Message_base_5b975";
const description = "Message_description_5b975";
const css = {
  base,
  description
};
const Message = ({ action, description: description2, title, icon }) => {
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const classes = [css.base, themeClass];
  const getIcon = (icon2) => {
    if (typeof icon2 === "string") {
      return /* @__PURE__ */ jsx(Icon, { decorative: true, name: icon2, size: "jumbo" });
    } else {
      return icon2;
    }
  };
  return /* @__PURE__ */ jsxs("div", { className: classes.join(" "), children: [
    icon && getIcon(icon),
    title && /* @__PURE__ */ jsx(Title, { children: title }),
    description2 && /* @__PURE__ */ jsx("span", { className: css.description, children: description2 }),
    action
  ] });
};
export {
  Message as default
};
