import { jsxs, jsx } from "react/jsx-runtime";
import { tcv, tcx, MdRender } from "@choiceform/design-system";
import { WarningSquare } from "@choiceform/icons-react";
import { memo } from "react";
import { t } from "../../../../i18n/index.js";
const MessageWarningTv = tcv({
  slots: {
    root: "warning-message border-warning-foreground/50 flex flex-col gap-2 rounded-lg border border-dashed p-2",
    content: "text-warning-foreground flex items-center gap-2 font-strong"
  }
});
const MessageWarning = memo(function MessageWarning2(props) {
  const { children, className } = props;
  const tv = MessageWarningTv();
  const title = t("response", "warning-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(WarningSquare, {}),
      /* @__PURE__ */ jsx("span", { className: "text-message", children: title })
    ] }),
    content && /* @__PURE__ */ jsx(MdRender, { content })
  ] });
});
export {
  MessageWarning
};
//# sourceMappingURL=message-warning.js.map
