@connectif/ui-components 1.0.6 → 1.0.8

package/dist/components/markdown/MarkdownRenderer.d.ts

@@ -1,4 +1,10 @@
-declare const MarkdownRenderer: ({ text }: {
+import { TypographyVariant } from '../../theme/Typography';
+type MarkdownContainerProps = {
+    color: string;
+    backgroundColor?: string;
+    variant?: TypographyVariant;
+};
+declare const MarkdownRenderer: ({ text, ...rest }: MarkdownContainerProps & {
     text: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default MarkdownRenderer;

package/dist/index.js

@@ -23652,65 +23652,69 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { styled as styled9 } from "@mui/material/styles";
 import { jsx as jsx136 } from "react/jsx-runtime";
-var MarkdownContainer = styled9("div")(() => ({
-  fontFamily: "Segoe UI, sans-serif",
-  lineHeight: 1.6,
-  color: "#f1f1f1",
-  backgroundColor: "#1a1a1a",
-  padding: "16px",
-  borderRadius: "8px",
-  overflowWrap: "break-word",
-  "& h1, & h2, & h3": {
-    color: "#ffffff",
-    marginTop: "1.5em"
-  },
-  "& h1": { fontSize: "1.75rem" },
-  "& h2": { fontSize: "1.5rem" },
-  "& h3": { fontSize: "1.25rem" },
-  "& p": {
-    margin: "0.5em 0"
-  },
-  "& ul, & ol": {
-    paddingLeft: "1.5em",
-    margin: "0.5em 0"
-  },
-  "& li": {
-    marginBottom: "0.25em"
-  },
-  "& code": {
-    background: "#333",
-    padding: "2px 6px",
-    borderRadius: "4px",
-    fontFamily: "Courier New, monospace",
-    fontSize: "0.9em"
-  },
-  "& pre code": {
-    display: "block",
-    padding: "12px",
-    overflowX: "auto"
-  },
-  "& table": {
-    width: "100%",
-    borderCollapse: "collapse",
-    margin: "1em 0"
-  },
-  "& th, & td": {
-    border: "1px solid #444",
-    padding: "8px",
-    textAlign: "left"
-  },
-  "& th": {
-    backgroundColor: "#2a2a2a"
-  },
-  "& a": {
-    color: "#61dafb",
-    textDecoration: "none"
-  },
-  "& a:hover": {
-    textDecoration: "underline"
-  }
-}));
-var MarkdownRenderer = ({ text }) => /* @__PURE__ */ jsx136(MarkdownContainer, { children: /* @__PURE__ */ jsx136(ReactMarkdown, { remarkPlugins: [remarkGfm], skipHtml: true, children: text }) });
+var MarkdownContainer = styled9("div")(
+  ({ color: color2, backgroundColor: backgroundColor2 = "transparent", variant }) => ({
+    color: color2,
+    backgroundColor: backgroundColor2,
+    borderRadius: "8px",
+    overflowWrap: "break-word",
+    "& h1, & h2, & h3": {
+      color: color2
+    },
+    "& h1": { fontSize: "1.75rem" },
+    "& h2": { fontSize: "1.5rem" },
+    "& h3": { fontSize: "1.25rem" },
+    "& p": {
+      ...variants[variant || "body2"],
+      margin: "0.5em 0"
+    },
+    "& ul, & ol": {
+      paddingLeft: "1.5em",
+      margin: "0.5em 0"
+    },
+    "& li": {
+      marginBottom: "0.25em"
+    },
+    "& code": {
+      background: grey800,
+      padding: "2px 6px",
+      borderRadius: "4px",
+      fontFamily: "Courier New, monospace",
+      fontSize: "0.9em",
+      color: white
+    },
+    "& pre code": {
+      display: "block",
+      padding: "12px",
+      overflowX: "auto"
+    },
+    "& table": {
+      width: "100%",
+      borderCollapse: "collapse",
+      margin: "1em 0"
+    },
+    "& th, & td": {
+      border: `1px solid ${grey800}`,
+      padding: "8px",
+      textAlign: "left"
+    },
+    "& th": {
+      backgroundColor: grey900,
+      color: white
+    },
+    "& a": {
+      color: primary200,
+      textDecoration: "none"
+    },
+    "& a:hover": {
+      textDecoration: "underline"
+    }
+  })
+);
+var MarkdownRenderer = ({
+  text,
+  ...rest
+}) => /* @__PURE__ */ jsx136(MarkdownContainer, { ...rest, children: /* @__PURE__ */ jsx136(ReactMarkdown, { remarkPlugins: [remarkGfm], skipHtml: true, children: text }) });
 var MarkdownRenderer_default = MarkdownRenderer;
 
 // src/components/navbar/Navbar.tsx