@ceed/cds 1.2.2-next.3 → 1.2.2-next.5

package/dist/components/Markdown/Markdown.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { Options } from "react-markdown";
+import { type Options } from "react-markdown";
 import { MotionProps } from "framer-motion";
 import { TypographyProps } from "@mui/joy";
 import { TypographySystem } from "@mui/joy";
@@ -27,7 +27,7 @@ declare const Markdown: {
         defaultLinkAction?: "_self" | "_blank" | "_parent" | "_top" | "_unfencedTop" | undefined;
         markdownOptions?: import("react-markdown").Options | undefined;
         boldFontWeight?: "sm" | "md" | "lg" | "xl" | undefined;
-    }): React.JSX.Element;
+    }): React.JSX.Element | null;
     displayName: string;
 };
 export { Markdown };

package/dist/index.cjs

@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,6 +30,53 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/libs/rehype-accent/index.ts
+var rehype_accent_exports = {};
+__export(rehype_accent_exports, {
+  rehypeAccent: () => rehypeAccent
+});
+function rehypeAccent(options) {
+  const { accentColor } = options;
+  return (tree) => {
+    (0, import_unist_util_visit.visit)(tree, "text", (node, index, parent) => {
+      const value = node.value;
+      const regex = /\|\|.*?\|\|/g;
+      let match;
+      let lastIndex = 0;
+      const newNodes = [];
+      while ((match = regex.exec(value)) !== null) {
+        if (match.index > lastIndex) {
+          newNodes.push({
+            type: "text",
+            value: value.slice(lastIndex, match.index)
+          });
+        }
+        const innerText = match[0].split("||")[1];
+        newNodes.push({
+          type: "element",
+          tagName: "p",
+          properties: { textColor: accentColor },
+          children: [{ type: "text", value: innerText }]
+        });
+        lastIndex = match.index + match[0].length;
+      }
+      if (lastIndex < value.length) {
+        newNodes.push({ type: "text", value: value.slice(lastIndex) });
+      }
+      if (newNodes.length) {
+        parent.children.splice(index, 1, ...newNodes);
+      }
+    });
+  };
+}
+var import_unist_util_visit;
+var init_rehype_accent = __esm({
+  "src/libs/rehype-accent/index.ts"() {
+    "use strict";
+    import_unist_util_visit = require("unist-util-visit");
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -4235,48 +4285,17 @@ var import_joy41 = require("@mui/joy");
 
 // src/components/Markdown/Markdown.tsx
 var import_react31 = __toESM(require("react"));
-var import_react_markdown = __toESM(require("react-markdown"));
 var import_joy42 = require("@mui/joy");
-
-// src/libs/rehype-accent/index.ts
-var import_unist_util_visit = require("unist-util-visit");
-function rehypeAccent(options) {
-  const { accentColor } = options;
-  return (tree) => {
-    (0, import_unist_util_visit.visit)(tree, "text", (node, index, parent) => {
-      const value = node.value;
-      const regex = /\|\|.*?\|\|/g;
-      let match;
-      let lastIndex = 0;
-      const newNodes = [];
-      while ((match = regex.exec(value)) !== null) {
-        if (match.index > lastIndex) {
-          newNodes.push({
-            type: "text",
-            value: value.slice(lastIndex, match.index)
-          });
-        }
-        const innerText = match[0].split("||")[1];
-        newNodes.push({
-          type: "element",
-          tagName: "p",
-          properties: { textColor: accentColor },
-          children: [{ type: "text", value: innerText }]
-        });
-        lastIndex = match.index + match[0].length;
-      }
-      if (lastIndex < value.length) {
-        newNodes.push({ type: "text", value: value.slice(lastIndex) });
-      }
-      if (newNodes.length) {
-        parent.children.splice(index, 1, ...newNodes);
-      }
-    });
-  };
-}
-
-// src/components/Markdown/Markdown.tsx
+var LazyReactMarkdown = (0, import_react31.lazy)(() => import("react-markdown"));
 var Markdown = (props) => {
+  const [rehypeAccent2, setRehypeAccent] = (0, import_react31.useState)(null);
+  (0, import_react31.useEffect)(() => {
+    const loadRehypeAccent = async () => {
+      const module2 = await Promise.resolve().then(() => (init_rehype_accent(), rehype_accent_exports));
+      setRehypeAccent(() => module2.rehypeAccent);
+    };
+    loadRehypeAccent();
+  }, []);
   const {
     color,
     textColor,
@@ -4288,6 +4307,9 @@ var Markdown = (props) => {
     content,
     ...innerProps
   } = props;
+  if (!rehypeAccent2) {
+    return null;
+  }
   return /* @__PURE__ */ import_react31.default.createElement(
     Typography,
     {
@@ -4297,29 +4319,27 @@ var Markdown = (props) => {
       level: defaultLevel,
       ...innerProps
     },
-    /* @__PURE__ */ import_react31.default.createElement(
-      import_react_markdown.default,
+    /* @__PURE__ */ import_react31.default.createElement(import_react31.Suspense, { fallback: null }, /* @__PURE__ */ import_react31.default.createElement(
+      LazyReactMarkdown,
       {
         ...markdownOptions,
         children: content,
-        rehypePlugins: [[rehypeAccent, { accentColor }]],
+        rehypePlugins: [[rehypeAccent2, { accentColor }]],
         components: {
           h1: ({ children }) => /* @__PURE__ */ import_react31.default.createElement(Typography, { color, textColor, level: "h1" }, children),
           h2: ({ children }) => /* @__PURE__ */ import_react31.default.createElement(Typography, { color, textColor, level: "h2" }, children),
           h3: ({ children }) => /* @__PURE__ */ import_react31.default.createElement(Typography, { color, textColor, level: "h3" }, children),
           h4: ({ children }) => /* @__PURE__ */ import_react31.default.createElement(Typography, { color, textColor, level: "h4" }, children),
-          p: ({ children, node }) => {
-            return /* @__PURE__ */ import_react31.default.createElement(
-              Typography,
-              {
-                color,
-                textColor,
-                level: defaultLevel,
-                ...node?.properties
-              },
-              children
-            );
-          },
+          p: ({ children, node }) => /* @__PURE__ */ import_react31.default.createElement(
+            Typography,
+            {
+              color,
+              textColor,
+              level: defaultLevel,
+              ...node?.properties
+            },
+            children
+          ),
           a: ({ children, href }) => /* @__PURE__ */ import_react31.default.createElement(import_joy42.Link, { href, target: defaultLinkAction }, children),
           hr: () => /* @__PURE__ */ import_react31.default.createElement(Divider, null),
           b: ({ children }) => /* @__PURE__ */ import_react31.default.createElement(Typography, { fontWeight: boldFontWeight }, children),
@@ -4327,7 +4347,7 @@ var Markdown = (props) => {
           ...markdownOptions?.components
         }
       }
-    )
+    ))
   );
 };
 Markdown.displayName = "Markdown";

package/dist/index.js

@@ -1,3 +1,59 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/libs/rehype-accent/index.ts
+var rehype_accent_exports = {};
+__export(rehype_accent_exports, {
+  rehypeAccent: () => rehypeAccent
+});
+import { visit } from "unist-util-visit";
+function rehypeAccent(options) {
+  const { accentColor } = options;
+  return (tree) => {
+    visit(tree, "text", (node, index, parent) => {
+      const value = node.value;
+      const regex = /\|\|.*?\|\|/g;
+      let match;
+      let lastIndex = 0;
+      const newNodes = [];
+      while ((match = regex.exec(value)) !== null) {
+        if (match.index > lastIndex) {
+          newNodes.push({
+            type: "text",
+            value: value.slice(lastIndex, match.index)
+          });
+        }
+        const innerText = match[0].split("||")[1];
+        newNodes.push({
+          type: "element",
+          tagName: "p",
+          properties: { textColor: accentColor },
+          children: [{ type: "text", value: innerText }]
+        });
+        lastIndex = match.index + match[0].length;
+      }
+      if (lastIndex < value.length) {
+        newNodes.push({ type: "text", value: value.slice(lastIndex) });
+      }
+      if (newNodes.length) {
+        parent.children.splice(index, 1, ...newNodes);
+      }
+    });
+  };
+}
+var init_rehype_accent = __esm({
+  "src/libs/rehype-accent/index.ts"() {
+    "use strict";
+  }
+});
+
 // src/index.ts
 import {
   useTheme as useTheme3,
@@ -4202,49 +4258,18 @@ InsetDrawer.displayName = "InsetDrawer";
 import { Grid } from "@mui/joy";
 
 // src/components/Markdown/Markdown.tsx
-import React29 from "react";
-import ReactMarkdown from "react-markdown";
+import React29, { lazy, Suspense, useEffect as useEffect7, useState as useState8 } from "react";
 import { Link as Link2 } from "@mui/joy";
-
-// src/libs/rehype-accent/index.ts
-import { visit } from "unist-util-visit";
-function rehypeAccent(options) {
-  const { accentColor } = options;
-  return (tree) => {
-    visit(tree, "text", (node, index, parent) => {
-      const value = node.value;
-      const regex = /\|\|.*?\|\|/g;
-      let match;
-      let lastIndex = 0;
-      const newNodes = [];
-      while ((match = regex.exec(value)) !== null) {
-        if (match.index > lastIndex) {
-          newNodes.push({
-            type: "text",
-            value: value.slice(lastIndex, match.index)
-          });
-        }
-        const innerText = match[0].split("||")[1];
-        newNodes.push({
-          type: "element",
-          tagName: "p",
-          properties: { textColor: accentColor },
-          children: [{ type: "text", value: innerText }]
-        });
-        lastIndex = match.index + match[0].length;
-      }
-      if (lastIndex < value.length) {
-        newNodes.push({ type: "text", value: value.slice(lastIndex) });
-      }
-      if (newNodes.length) {
-        parent.children.splice(index, 1, ...newNodes);
-      }
-    });
-  };
-}
-
-// src/components/Markdown/Markdown.tsx
+var LazyReactMarkdown = lazy(() => import("react-markdown"));
 var Markdown = (props) => {
+  const [rehypeAccent2, setRehypeAccent] = useState8(null);
+  useEffect7(() => {
+    const loadRehypeAccent = async () => {
+      const module = await Promise.resolve().then(() => (init_rehype_accent(), rehype_accent_exports));
+      setRehypeAccent(() => module.rehypeAccent);
+    };
+    loadRehypeAccent();
+  }, []);
   const {
     color,
     textColor,
@@ -4256,6 +4281,9 @@ var Markdown = (props) => {
     content,
     ...innerProps
   } = props;
+  if (!rehypeAccent2) {
+    return null;
+  }
   return /* @__PURE__ */ React29.createElement(
     Typography,
     {
@@ -4265,29 +4293,27 @@ var Markdown = (props) => {
       level: defaultLevel,
       ...innerProps
     },
-    /* @__PURE__ */ React29.createElement(
-      ReactMarkdown,
+    /* @__PURE__ */ React29.createElement(Suspense, { fallback: null }, /* @__PURE__ */ React29.createElement(
+      LazyReactMarkdown,
       {
         ...markdownOptions,
         children: content,
-        rehypePlugins: [[rehypeAccent, { accentColor }]],
+        rehypePlugins: [[rehypeAccent2, { accentColor }]],
         components: {
           h1: ({ children }) => /* @__PURE__ */ React29.createElement(Typography, { color, textColor, level: "h1" }, children),
           h2: ({ children }) => /* @__PURE__ */ React29.createElement(Typography, { color, textColor, level: "h2" }, children),
           h3: ({ children }) => /* @__PURE__ */ React29.createElement(Typography, { color, textColor, level: "h3" }, children),
           h4: ({ children }) => /* @__PURE__ */ React29.createElement(Typography, { color, textColor, level: "h4" }, children),
-          p: ({ children, node }) => {
-            return /* @__PURE__ */ React29.createElement(
-              Typography,
-              {
-                color,
-                textColor,
-                level: defaultLevel,
-                ...node?.properties
-              },
-              children
-            );
-          },
+          p: ({ children, node }) => /* @__PURE__ */ React29.createElement(
+            Typography,
+            {
+              color,
+              textColor,
+              level: defaultLevel,
+              ...node?.properties
+            },
+            children
+          ),
           a: ({ children, href }) => /* @__PURE__ */ React29.createElement(Link2, { href, target: defaultLinkAction }, children),
           hr: () => /* @__PURE__ */ React29.createElement(Divider, null),
           b: ({ children }) => /* @__PURE__ */ React29.createElement(Typography, { fontWeight: boldFontWeight }, children),
@@ -4295,7 +4321,7 @@ var Markdown = (props) => {
           ...markdownOptions?.components
         }
       }
-    )
+    ))
   );
 };
 Markdown.displayName = "Markdown";
@@ -4367,10 +4393,10 @@ MenuButton.displayName = "MenuButton";
 import React31, {
   forwardRef as forwardRef9,
   useCallback as useCallback11,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useImperativeHandle as useImperativeHandle4,
   useRef as useRef6,
-  useState as useState8
+  useState as useState9
 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
@@ -4483,9 +4509,9 @@ var MonthPicker = forwardRef9(
       ),
       { disableStrict: true }
     );
-    const [anchorEl, setAnchorEl] = useState8(null);
+    const [anchorEl, setAnchorEl] = useState9(null);
     const open = Boolean(anchorEl);
-    useEffect7(() => {
+    useEffect8(() => {
       if (!anchorEl) {
         innerRef.current?.blur();
       }
@@ -4616,11 +4642,11 @@ var MonthPicker = forwardRef9(
 import React32, {
   forwardRef as forwardRef10,
   useCallback as useCallback12,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo10,
   useRef as useRef7,
-  useState as useState9
+  useState as useState10
 } from "react";
 import { IMaskInput as IMaskInput4, IMask as IMask4 } from "react-imask";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
@@ -4742,13 +4768,13 @@ var MonthRangePicker = forwardRef10(
       ),
       { disableStrict: true }
     );
-    const [anchorEl, setAnchorEl] = useState9(null);
+    const [anchorEl, setAnchorEl] = useState10(null);
     const open = Boolean(anchorEl);
     const calendarValue = useMemo10(
       () => value ? parseDates2(value) : void 0,
       [value]
     );
-    useEffect8(() => {
+    useEffect9(() => {
       if (!anchorEl) {
         innerRef.current?.blur();
       }
@@ -4997,7 +5023,7 @@ function Navigator(props) {
 Navigator.displayName = "Navigator";
 
 // src/components/PercentageInput/PercentageInput.tsx
-import React36, { useCallback as useCallback13, useMemo as useMemo11, useState as useState10 } from "react";
+import React36, { useCallback as useCallback13, useMemo as useMemo11, useState as useState11 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
 import { styled as styled21, useThemeProps as useThemeProps8 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
@@ -5060,7 +5086,7 @@ var PercentageInput = React36.forwardRef(function PercentageInput2(inProps, ref)
       [onChange, name]
     )
   );
-  const [internalError, setInternalError] = useState10(
+  const [internalError, setInternalError] = useState11(
     max && _value && _value > max || min && _value && _value < min
   );
   const value = useMemo11(() => {
@@ -5543,10 +5569,10 @@ ThemeProvider.displayName = "ThemeProvider";
 // src/components/Uploader/Uploader.tsx
 import React41, {
   useCallback as useCallback14,
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useMemo as useMemo12,
   useRef as useRef8,
-  useState as useState11
+  useState as useState12
 } from "react";
 import { styled as styled24, Input as Input2 } from "@mui/joy";
 import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
@@ -5728,12 +5754,12 @@ var Uploader = React41.memo(
     } = props;
     const dropZoneRef = useRef8(null);
     const inputRef = useRef8(null);
-    const [errorText, setErrorText] = useState11();
-    const [files, setFiles] = useState11([]);
-    const [uploaded, setUploaded] = useState11(
+    const [errorText, setErrorText] = useState12();
+    const [files, setFiles] = useState12([]);
+    const [uploaded, setUploaded] = useState12(
       props.uploaded || []
     );
-    const [previewState, setPreviewState] = useState11("idle");
+    const [previewState, setPreviewState] = useState12("idle");
     const accepts = useMemo12(
       () => accept.split(",").map((accept2) => accept2.trim()),
       [accept]
@@ -5845,7 +5871,7 @@ var Uploader = React41.memo(
         onChange
       ]
     );
-    useEffect9(() => {
+    useEffect10(() => {
       if (!dropZoneRef.current || disabled) {
         return;
       }
@@ -5893,7 +5919,7 @@ var Uploader = React41.memo(
       );
       return () => cleanup?.();
     }, [disabled, addFiles]);
-    useEffect9(() => {
+    useEffect10(() => {
       if (inputRef.current && minCount) {
         if (files.length < minCount) {
           inputRef.current.setCustomValidity(