import { jsxs, jsx } from "react/jsx-runtime";
import { tcv, tcx, MdRender } from "@choiceform/design-system";
import { WarningTriangle } from "@choiceform/icons-react";
import { memo } from "react";
import { t } from "../../../../i18n/index.js";
const MessageErrorTv = tcv({
  slots: {
    root: "error-message border-danger-foreground/50 flex flex-col gap-2 rounded-lg border border-dashed p-2",
    content: "text-danger-foreground flex items-center gap-2 font-strong"
  }
});
const MessageError = memo(function MessageError2(props) {
  const { children, className } = props;
  const tv = MessageErrorTv();
  const title = t("response", "error-title");
  const content = typeof children === "string" ? children : children?.toString();
  return /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
    /* @__PURE__ */ jsxs("div", { className: tv.content(), children: [
      /* @__PURE__ */ jsx(WarningTriangle, {}),
      /* @__PURE__ */ jsx("span", { className: "text-message", children: title })
    ] }),
    content && /* @__PURE__ */ jsx(MdRender, { content })
  ] });
});
export {
  MessageError
};
//# sourceMappingURL=message-error.js.map
