@connectif/ui-components 2.0.15 → 2.0.17

package/dist/components/input/TextField.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { SxProps } from '@mui/material';
+import { TypographyVariant } from '../../theme/Typography';
 import { InputLabelProps } from './InputLabel';
 import { IconId } from '../icon';
 export type TextFieldProps = {
@@ -144,6 +145,10 @@ export type TextFieldProps = {
      * IconButton and MenuIconButton size must be 'M' or smaller.
      */
     groupElements?: boolean;
+    /**
+     * Specify typography variant on input
+     */
+    typographyVariant?: TypographyVariant;
 };
 /**
  * TextField is a component that renders an input field with type="text" or a textarea.

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

@@ -4,8 +4,14 @@ type MarkdownContainerProps = {
     color: string;
     backgroundColor?: string;
     variant?: TypographyVariant;
+    lineHeight?: number;
+    codeLineHeight?: number;
+    /**
+     * Class Name to append to container
+     */
+    className?: string;
 };
-declare const MarkdownRenderer: ({ text, ...rest }: MarkdownContainerProps & {
+declare const MarkdownRenderer: ({ text, className, ...rest }: MarkdownContainerProps & {
     text: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default MarkdownRenderer;

package/dist/index.js

@@ -13801,7 +13801,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
                         borderStyle: "solid",
                         borderColor: !backgroundColor2 ? messageType === "incoming" ? grey200 : primary300 : backgroundColor2,
                         color: messageType === "incoming" ? grey900 : white,
-                        borderRadius: "12px",
+                        borderRadius: "16px",
                         ...highlightStartEdge && messageType === "outgoing" && {
                           borderTopRightRadius: "4px"
                         },
@@ -18411,11 +18411,14 @@ var InputHelperText_default = InputHelperText;
 // src/components/input/TextField.tsx
 import { Fragment as Fragment20, jsx as jsx98, jsxs as jsxs43 } from "react/jsx-runtime";
 var commonInputStylesOptions = {
-  shouldForwardProp: (prop) => prop !== "variant"
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "typographyVariant"
 };
-function getCommonInputStyles({ disabled }) {
+function getCommonInputStyles({
+  disabled,
+  typographyVariant
+}) {
   return {
-    ...variants["body2"],
+    ...variants[typographyVariant ?? "body2"],
     backgroundColor: "transparent",
     display: "block",
     width: "0",
@@ -18483,6 +18486,7 @@ var TextField = React50.forwardRef(function TextField2({
   readOnly = false,
   className = "",
   groupElements,
+  typographyVariant,
   ...restProps
 }, ref) {
   const [id] = React50.useState(Math.random().toString(10));
@@ -18581,6 +18585,7 @@ var TextField = React50.forwardRef(function TextField2({
                   maxLength,
                   onKeyDown,
                   className: "Slim-Vertical-Scroll",
+                  ...typographyVariant && { typographyVariant },
                   onScroll: () => {
                     if (onScroll) {
                       const reference = ref || inputRef;
@@ -18613,6 +18618,7 @@ var TextField = React50.forwardRef(function TextField2({
                   autoComplete,
                   maxLength,
                   onKeyDown,
+                  ...typographyVariant && { typographyVariant },
                   ...restProps
                 }
               )
@@ -24259,83 +24265,96 @@ var KatexRenderer_default = KatexRenderer;
 // src/components/markdown/MarkdownRenderer.tsx
 import { jsx as jsx137 } from "react/jsx-runtime";
 var MarkdownContainer = styled8("div")(
-  ({ color: color2, backgroundColor: backgroundColor2 = "transparent", variant }) => ({
+  ({
+    color: color2,
+    backgroundColor: backgroundColor2 = "transparent",
+    variant,
+    lineHeight,
+    codeLineHeight
+  }) => ({
     color: color2,
     backgroundColor: backgroundColor2,
     borderRadius: "8px",
     overflowWrap: "break-word",
-    "& h1, & h2, & h3": {
-      color: color2
-    },
+    "& 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"
+      margin: "0.5em 0",
+      ...lineHeight && { lineHeight: `${lineHeight}px` }
     },
     "& ul, & ol": {
       ...variants[variant || "body2"],
       paddingLeft: "1.5em",
-      margin: "0.5em 0"
-    },
-    "& li": {
-      marginBottom: "0.25em"
+      margin: "0.5em 0",
+      ...lineHeight && { lineHeight: `${lineHeight}px` }
     },
+    "& li": { marginBottom: "0.25em" },
     "& code": {
       background: grey800,
       padding: "2px 6px",
       borderRadius: "4px",
       fontFamily: "Courier New, monospace",
       fontSize: "0.9em",
-      color: white
+      color: white,
+      ...(codeLineHeight || lineHeight) && {
+        lineHeight: `${codeLineHeight ?? lineHeight}px`
+      }
     },
     "& pre code": {
       display: "block",
       padding: "12px",
-      overflowX: "auto"
+      overflowX: "auto",
+      ...(codeLineHeight || lineHeight) && {
+        lineHeight: `${codeLineHeight ?? lineHeight}px`
+      }
     },
     "& table": {
       width: "100%",
       borderCollapse: "collapse",
-      margin: "1em 0"
+      margin: "1em 0",
+      ...lineHeight && { lineHeight: `${lineHeight}px` }
     },
     "& th, & td": {
       border: `1px solid ${grey800}`,
       padding: "8px",
-      textAlign: "left"
-    },
-    "& th": {
-      backgroundColor: grey900,
-      color: white
-    },
-    "& a": {
-      color: primary200,
-      textDecoration: "none"
+      textAlign: "left",
+      ...lineHeight && { lineHeight: `${lineHeight}px` }
     },
-    "& a:hover": {
-      textDecoration: "underline"
-    }
+    "& th": { backgroundColor: grey900, color: white },
+    "& a": { color: primary200, textDecoration: "none" },
+    "& a:hover": { textDecoration: "underline" }
   })
 );
+var normalizeLatexDelimiters = (s) => {
+  if (!s) {
+    return s;
+  }
+  s = s.replace(/\\\\?\[([\s\S]*?)\\\\?\]/g, (_, inner) => `$$${inner}$$`);
+  s = s.replace(/\\\\?\(([\s\S]*?)\\\\?\)/g, (_, inner) => `$${inner}$`);
+  return s;
+};
 var renderWithMath = (text) => {
   const parts = [];
-  const regex = /\$\$([\s\S]+?)\$\$|\$([\s\S]+?)\$/g;
+  const regex = /\$\$([\s\S]+?)\$\$|\$(?!\$)([\s\S]+?)\$/g;
   let lastIndex = 0;
   let match;
   while ((match = regex.exec(text)) !== null) {
-    const [full, blockExpr, inlineExpr] = match;
     const start = match.index;
     if (start > lastIndex) {
       parts.push(text.slice(lastIndex, start));
     }
-    if (blockExpr) {
+    const block = match[1];
+    const inline = match[2];
+    if (block !== void 0) {
       parts.push(
-        /* @__PURE__ */ jsx137(KatexRenderer_default, { block: true, children: blockExpr.trim() }, start)
+        /* @__PURE__ */ jsx137(KatexRenderer_default, { block: true, children: block.trim() }, start)
       );
-    } else if (inlineExpr) {
+    } else if (inline !== void 0) {
       parts.push(
-        /* @__PURE__ */ jsx137(KatexRenderer_default, { children: inlineExpr.trim() }, start)
+        /* @__PURE__ */ jsx137(KatexRenderer_default, { children: inline.trim() }, start)
       );
     }
     lastIndex = regex.lastIndex;
@@ -24345,34 +24364,61 @@ var renderWithMath = (text) => {
   }
   return parts;
 };
+var renderChildrenWithMath = (children) => React76.Children.map(children, (child) => {
+  if (typeof child === "string") {
+    return renderWithMath(child);
+  }
+  if (React76.isValidElement(child)) {
+    return React76.cloneElement(child, {
+      ...child.props,
+      children: renderChildrenWithMath(child.props.children)
+    });
+  }
+  return child;
+});
+var CodeOrMath = ({ children, ...props }) => {
+  const raw = Array.isArray(children) ? children.map((c) => typeof c === "string" ? c : "").join("") : typeof children === "string" ? children : "";
+  const s = raw.trim();
+  const fullMath = /^\$\$([\s\S]+)\$\$$|^\$(?!\$)([\s\S]+)\$$/;
+  const m = s.match(fullMath);
+  if (m) {
+    const expr = m[1] || m[2] || "";
+    const isBlock = Boolean(m[1]);
+    return /* @__PURE__ */ jsx137(KatexRenderer_default, { block: isBlock, children: expr.trim() });
+  }
+  const maybe = renderWithMath(s);
+  const onlyText = maybe.length === 1 && typeof maybe[0] === "string";
+  return onlyText ? /* @__PURE__ */ jsx137("code", { ...props, children }) : /* @__PURE__ */ jsx137("span", { children: maybe });
+};
 var MarkdownRenderer = ({
   text,
+  className,
   ...rest
-}) => /* @__PURE__ */ jsx137(MarkdownContainer, { ...rest, children: /* @__PURE__ */ jsx137(
-  Markdown,
-  {
-    options: {
-      forceBlock: true,
-      overrides: {
-        p: {
-          component: ({ children, ...props }) => {
-            const renderChildren = React76.Children.map(
-              children,
-              (child) => {
-                if (typeof child === "string") {
-                  return renderWithMath(child);
-                }
-                return child;
-              }
-            );
-            return /* @__PURE__ */ jsx137("p", { ...props, children: renderChildren });
-          }
+}) => {
+  const normalized = normalizeLatexDelimiters(text || "");
+  return /* @__PURE__ */ jsx137(
+    MarkdownContainer,
+    {
+      className: `markdown-container ${className || ""}`,
+      ...rest,
+      children: /* @__PURE__ */ jsx137(
+        Markdown,
+        {
+          options: {
+            forceBlock: true,
+            overrides: {
+              p: {
+                component: ({ children, ...props }) => /* @__PURE__ */ jsx137("p", { ...props, children: renderChildrenWithMath(children) })
+              },
+              code: { component: CodeOrMath }
+            }
+          },
+          children: normalized
         }
-      }
-    },
-    children: text
-  }
-) });
+      )
+    }
+  );
+};
 var MarkdownRenderer_default = MarkdownRenderer;
 
 // src/components/navbar/Navbar.tsx
@@ -25928,7 +25974,7 @@ import { Fragment as Fragment35, jsx as jsx169, jsxs as jsxs80 } from "react/jsx
 var sizes6 = {
   M: 400,
   L: 500,
-  XL: 600
+  XL: 640
 };
 var styles2 = {
   backgroundColor: dark900,