@dust-tt/sparkle 0.2.646-rc-3 → 0.2.646

package/src/components/markdown/TableBlock.tsx

@@ -1,12 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { memo, ReactNode, useMemo } from "react";
+import React, { ReactNode, useMemo } from "react";
 
 import { ScrollArea, ScrollBar } from "@sparkle/components";
 import { ContentBlockWrapper } from "@sparkle/components/markdown/ContentBlockWrapper";
 
-import { MarkdownNode } from "./types";
-import { sameNodePosition } from "./utils";
-
 const getNodeText = (node: ReactNode): string => {
   if (["string", "number"].includes(typeof node)) {
     return node as string;
@@ -21,127 +18,100 @@ const getNodeText = (node: ReactNode): string => {
   return "";
 };
 
-export const MemoTableBlock = memo(
-  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
-    const tableData = useMemo(() => {
-      const [headNode, bodyNode] = Array.from(children as [any, any]);
-      if (
-        !headNode ||
-        !bodyNode ||
-        !("props" in headNode) ||
-        !("props" in bodyNode)
-      ) {
-        return;
-      }
-
-      const headCells = headNode.props.children[0].props.children.map(
-        (c: any) => getNodeText(c.props.children)
-      );
-
-      const headHtml = `<thead><tr>${headCells
-        .map((c: any) => `<th><b>${c}</b></th>`)
-        .join("")}</tr></thead>`;
-      const headPlain = headCells.join("\t");
-
-      const bodyRows = bodyNode.props.children.map((row: any) =>
-        row.props.children.map((cell: any) => {
-          const children = cell.props.children;
-          return (Array.isArray(children) ? children : [children])
-            .map((child: any) =>
-              child?.type?.name === "CiteBlock" ? "" : getNodeText(child)
-            )
-            .join("");
-        })
-      );
-      const bodyHtml = `<tbody>${bodyRows
-        .map((row: any) => {
-          return `<tr>${row
-            .map((cell: any) => `<td>${cell}</td>`)
-            .join("")}</tr>`;
-        })
-        .join("")}</tbody>`;
-      const bodyPlain = bodyRows.map((row: any) => row.join("\t")).join("\n");
-
-      return {
-        "text/html": `<table>${headHtml}${bodyHtml}</table>`,
-        "text/plain": headPlain + "\n" + bodyPlain,
-      };
-    }, [children]);
-
-    return (
-      <ContentBlockWrapper
-        innerClassName="s-relative s-my-2 s-w-full s-border s-border-border dark:s-border-border-night s-rounded-2xl"
-        content={tableData}
-      >
-        <ScrollArea className="s-w-full s-rounded-2xl">
-          <table className="s-w-full">{children}</table>
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
-      </ContentBlockWrapper>
-    );
-  },
-  (prev, next) => sameNodePosition(prev.node, next.node)
-);
-
-MemoTableBlock.displayName = "TableBlock";
-
-export const MemoTableHeadBlock = memo(
-  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
-    return (
-      <thead className="s-bg-muted-background s-px-2 s-py-2 dark:s-bg-muted-background-night">
-        {children}
-      </thead>
-    );
-  },
-  (prev, next) => sameNodePosition(prev.node, next.node)
-);
-
-MemoTableHeadBlock.displayName = "TableHeadBlock";
-
-export const MemoTableBodyBlock = memo(
-  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
-    return (
-      <tbody className="s-bg-white dark:s-bg-background-night">
-        {children}
-      </tbody>
-    );
-  },
-  (prev, next) => sameNodePosition(prev.node, next.node)
-);
-
-MemoTableBodyBlock.displayName = "TableBodyBlock";
-
-export const MemoTableHeaderBlock = memo(
-  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
-    return (
-      <th className="s-truncate s-whitespace-nowrap s-break-words s-py-3.5 s-pl-4 s-text-left s-text-xs s-font-semibold s-text-muted-foreground dark:s-text-muted-foreground-night">
-        {children}
-      </th>
+export function TableBlock({ children }: { children: React.ReactNode }) {
+  const tableData = useMemo(() => {
+    const [headNode, bodyNode] = Array.from(children as [any, any]);
+    if (
+      !headNode ||
+      !bodyNode ||
+      !("props" in headNode) ||
+      !("props" in bodyNode)
+    ) {
+      return;
+    }
+
+    const headCells = headNode.props.children[0].props.children.map((c: any) =>
+      getNodeText(c.props.children)
     );
-  },
-  (prev, next) => sameNodePosition(prev.node, next.node)
-);
-
-MemoTableHeaderBlock.displayName = "TableHeaderBlock";
 
-export const MemoTableDataBlock = memo(
-  ({ children }: { children: React.ReactNode; node?: MarkdownNode }) => {
-    return (
-      <td className="s-px-4 s-py-3 s-text-sm s-text-foreground dark:s-text-foreground-night">
-        {Array.isArray(children) ? (
-          children.map((child: any, i) => {
-            if (child === "<br>") {
-              return <br key={i} />;
-            }
-            return <React.Fragment key={i}>{child}</React.Fragment>;
-          })
-        ) : (
-          <>{children}</>
-        )}
-      </td>
+    const headHtml = `<thead><tr>${headCells
+      .map((c: any) => `<th><b>${c}</b></th>`)
+      .join("")}</tr></thead>`;
+    const headPlain = headCells.join("\t");
+
+    const bodyRows = bodyNode.props.children.map((row: any) =>
+      row.props.children.map((cell: any) => {
+        const children = cell.props.children;
+        return (Array.isArray(children) ? children : [children])
+          .map((child: any) =>
+            child?.type?.name === "CiteBlock" ? "" : getNodeText(child)
+          )
+          .join("");
+      })
     );
-  },
-  (prev, next) => sameNodePosition(prev.node, next.node)
-);
-
-MemoTableDataBlock.displayName = "TableDataBlock";
+    const bodyHtml = `<tbody>${bodyRows
+      .map((row: any) => {
+        return `<tr>${row
+          .map((cell: any) => `<td>${cell}</td>`)
+          .join("")}</tr>`;
+      })
+      .join("")}</tbody>`;
+    const bodyPlain = bodyRows.map((row: any) => row.join("\t")).join("\n");
+
+    return {
+      "text/html": `<table>${headHtml}${bodyHtml}</table>`,
+      "text/plain": headPlain + "\n" + bodyPlain,
+    };
+  }, [children]);
+
+  return (
+    <ContentBlockWrapper
+      innerClassName="s-relative s-my-2 s-w-full s-border s-border-border dark:s-border-border-night s-rounded-2xl"
+      content={tableData}
+    >
+      <ScrollArea className="s-w-full s-rounded-2xl">
+        <table className="s-w-full">{children}</table>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </ContentBlockWrapper>
+  );
+}
+
+export function TableHeadBlock({ children }: { children: React.ReactNode }) {
+  return (
+    <thead className="s-bg-muted-background s-px-2 s-py-2 dark:s-bg-muted-background-night">
+      {children}
+    </thead>
+  );
+}
+
+export function TableBodyBlock({ children }: { children: React.ReactNode }) {
+  return (
+    <tbody className="s-bg-white dark:s-bg-background-night">{children}</tbody>
+  );
+}
+
+export function TableHeaderBlock({ children }: { children: React.ReactNode }) {
+  return (
+    <th className="s-truncate s-whitespace-nowrap s-break-words s-py-3.5 s-pl-4 s-text-left s-text-xs s-font-semibold s-text-muted-foreground dark:s-text-muted-foreground-night">
+      {children}
+    </th>
+  );
+}
+
+export function TableDataBlock({ children }: { children: React.ReactNode }) {
+  return (
+    <td className="s-px-4 s-py-3 s-text-sm s-text-foreground dark:s-text-foreground-night">
+      {Array.isArray(children) ? (
+        children.map((child: any, i) => {
+          if (child === "<br>") {
+            return <br key={i} />;
+          }
+          return <React.Fragment key={i}>{child}</React.Fragment>;
+        })
+      ) : (
+        <>{children}</>
+      )}
+    </td>
+  );
+}

package/src/components/markdown/index.ts

@@ -1,12 +1,8 @@
 export * from "./CodeBlock";
 export * from "./CodeBlockWithExtendedSupport";
 export * from "./ContentBlockWrapper";
-export * from "./HeaderBlocks";
-export * from "./InputBlock";
-export * from "./LinkBlock";
 export * from "./Markdown";
 export * from "./MarkdownContentContext";
 export * from "./PrettyJsonViewer";
 export * from "./TableBlock";
-export * from "./TextFormattingBlocks";
 export * from "./utils";

package/src/components/markdown/utils.ts

@@ -1,5 +1,3 @@
-import { MarkdownNode } from "./types";
-
 export function sanitizeContent(str: string): string {
   // (1) Add closing backticks if they are missing such that we render a code block or inline
   // element during streaming.
@@ -41,38 +39,3 @@ export function detectLanguage(children: React.ReactNode) {
 
   return "text";
 }
-
-export function sameNodePosition(
-  prev?: MarkdownNode,
-  next?: MarkdownNode
-): boolean {
-  if (!(prev?.position || next?.position)) {
-    return true;
-  }
-  if (!(prev?.position && next?.position)) {
-    return false;
-  }
-
-  const prevStart = prev.position.start;
-  const nextStart = next.position.start;
-  const prevEnd = prev.position.end;
-  const nextEnd = next.position.end;
-
-  return (
-    prevStart?.line === nextStart?.line &&
-    prevStart?.column === nextStart?.column &&
-    prevEnd?.line === nextEnd?.line &&
-    prevEnd?.column === nextEnd?.column
-  );
-}
-
-export function sameTextStyling(
-  prev: { textColor?: string; textSize?: string; forcedTextSize?: string },
-  next: { textColor?: string; textSize?: string; forcedTextSize?: string }
-): boolean {
-  return (
-    prev.textColor === next.textColor &&
-    prev.textSize === next.textSize &&
-    prev.forcedTextSize === next.forcedTextSize
-  );
-}

package/src/stories/DataTable.stories.tsx

@@ -52,6 +52,7 @@ type Data = {
   >;
   id?: number;
   roundedAvatar?: boolean;
+  avatarStack?: { name: string; visual?: string | React.ReactNode }[];
 };
 
 type TransformedData = {
@@ -181,6 +182,130 @@ const data: TransformedData[] = [
   },
 ];
 
+const avatarStackData: TransformedData[] = [
+  {
+    name: "Team Alpha",
+    description: "Development team",
+    usedBy: 12,
+    addedBy: "Project Manager",
+    lastUpdated: "2024-01-15",
+    size: "256kb",
+    avatarStack: [
+      {
+        name: "Alice Johnson",
+        visual: "https://avatars.githubusercontent.com/u/1?s=200&v=4",
+      },
+      {
+        name: "Bob Smith",
+        visual: "https://avatars.githubusercontent.com/u/2?s=200&v=4",
+      },
+      {
+        name: "Carol Davis",
+        visual: "https://avatars.githubusercontent.com/u/3?s=200&v=4",
+      },
+      {
+        name: "David Wilson",
+        visual: "https://avatars.githubusercontent.com/u/4?s=200&v=4",
+      },
+      {
+        name: "Eve Brown",
+        visual: "https://avatars.githubusercontent.com/u/5?s=200&v=4",
+      },
+    ],
+    onClick: () => alert("Team Alpha clicked"),
+  },
+  {
+    name: "Marketing Team",
+    description: "Marketing and communications",
+    usedBy: 8,
+    addedBy: "Marketing Director",
+    lastUpdated: "2024-01-14",
+    size: "128kb",
+    avatarStack: [
+      {
+        name: "Frank Miller",
+        visual: "https://avatars.githubusercontent.com/u/6?s=200&v=4",
+      },
+      {
+        name: "Grace Lee",
+        visual: "https://avatars.githubusercontent.com/u/7?s=200&v=4",
+      },
+      {
+        name: "Henry Taylor",
+        visual: "https://avatars.githubusercontent.com/u/8?s=200&v=4",
+      },
+    ],
+    onClick: () => alert("Marketing Team clicked"),
+  },
+  {
+    name: "Design Squad",
+    description: "UI/UX design team",
+    usedBy: 6,
+    addedBy: "Design Lead",
+    lastUpdated: "2024-01-13",
+    size: "512kb",
+    avatarStack: [
+      {
+        name: "Ivy Chen",
+        visual: "https://avatars.githubusercontent.com/u/9?s=200&v=4",
+      },
+      {
+        name: "Jack Rodriguez",
+        visual: "https://avatars.githubusercontent.com/u/10?s=200&v=4",
+      },
+      {
+        name: "Kate Anderson",
+        visual: "https://avatars.githubusercontent.com/u/11?s=200&v=4",
+      },
+      {
+        name: "Liam Thompson",
+        visual: "https://avatars.githubusercontent.com/u/12?s=200&v=4",
+      },
+    ],
+    roundedAvatar: true,
+    onClick: () => alert("Design Squad clicked"),
+  },
+  {
+    name: "Large Team",
+    description: "Cross-functional team with many members",
+    usedBy: 25,
+    addedBy: "Team Lead",
+    lastUpdated: "2024-01-12",
+    size: "1.2mb",
+    avatarStack: [
+      {
+        name: "Maya Patel",
+        visual: "https://avatars.githubusercontent.com/u/13?s=200&v=4",
+      },
+      {
+        name: "Noah Garcia",
+        visual: "https://avatars.githubusercontent.com/u/14?s=200&v=4",
+      },
+      {
+        name: "Olivia Martinez",
+        visual: "https://avatars.githubusercontent.com/u/15?s=200&v=4",
+      },
+      {
+        name: "Paul Kim",
+        visual: "https://avatars.githubusercontent.com/u/16?s=200&v=4",
+      },
+      {
+        name: "Quinn White",
+        visual: "https://avatars.githubusercontent.com/u/17?s=200&v=4",
+      },
+      {
+        name: "Rachel Green",
+        visual: "https://avatars.githubusercontent.com/u/18?s=200&v=4",
+      },
+      {
+        name: "Sam Johnson",
+        visual: "https://avatars.githubusercontent.com/u/19?s=200&v=4",
+      },
+    ],
+    onClick: () => alert("Large Team clicked"),
+  },
+];
+
 const columns: ColumnDef<Data>[] = [
   {
     accessorKey: "name",
@@ -770,3 +895,113 @@ export const DataTableWithRadioSelectionExample = () => {
     </div>
   );
 };
+
+// Column definition for avatar stack story
+const avatarStackColumns: ColumnDef<Data>[] = [
+  {
+    accessorKey: "name",
+    header: "Team Name",
+    sortingFn: "text",
+    id: "name",
+    meta: {
+      className: "s-w-full",
+      tooltip: "Team name with member avatars",
+    },
+    cell: (info) => (
+      <DataTable.CellContent
+        avatarStack={
+          info.row.original.avatarStack
+            ? {
+                items: info.row.original.avatarStack,
+                nbVisibleItems: 3,
+              }
+            : undefined
+        }
+        description={info.row.original.description}
+        roundedAvatar={info.row.original.roundedAvatar}
+      >
+        {info.row.original.name}
+      </DataTable.CellContent>
+    ),
+  },
+  {
+    accessorKey: "usedBy",
+    id: "usedBy",
+    meta: {
+      className: "s-w-[82px] s-hidden @xs/table:s-table-cell",
+    },
+    header: "Members",
+    cell: (info) => (
+      <DataTable.BasicCellContent label={info.row.original.usedBy} />
+    ),
+  },
+  {
+    accessorKey: "addedBy",
+    header: "Created by",
+    id: "addedBy",
+    meta: {
+      className: "s-w-[128px]",
+    },
+    cell: (info) => (
+      <DataTable.BasicCellContent
+        label={info.row.original.addedBy}
+        textToCopy={info.row.original.addedBy}
+        tooltip={info.row.original.addedBy}
+      />
+    ),
+  },
+  {
+    accessorKey: "lastUpdated",
+    id: "lastUpdated",
+    header: "Last updated",
+    meta: {
+      className: "s-w-[128px] s-hidden @sm/table:s-table-cell",
+    },
+    cell: (info) => (
+      <DataTable.BasicCellContent label={info.row.original.lastUpdated} />
+    ),
+    enableSorting: false,
+  },
+  {
+    accessorKey: "size",
+    id: "size",
+    header: "Size",
+    meta: {
+      className: "s-w-[48px] s-hidden @sm/table:s-table-cell",
+    },
+    cell: (info) => (
+      <DataTable.BasicCellContent label={info.row.original.size} />
+    ),
+  },
+];
+
+export const DataTableWithAvatarStackExample = () => {
+  const [filter, setFilter] = React.useState<string>("");
+
+  return (
+    <div className="s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6">
+      <h3 className="s-text-lg s-font-medium">DataTable with Avatar Stack</h3>
+      <p className="s-text-sm s-text-muted-foreground">
+        This example demonstrates the DataTable with avatar stacks showing team
+        members. The avatar stack displays up to 4 visible avatars with a count
+        indicator for additional members.
+      </p>
+
+      <div className="s-flex s-flex-col s-gap-4">
+        <Input
+          name="filter"
+          placeholder="Filter teams..."
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+
+        <DataTable
+          data={avatarStackData}
+          filter={filter}
+          filterColumn="name"
+          columns={avatarStackColumns}
+        />
+      </div>
+    </div>
+  );
+};

package/src/styles/global.css

@@ -51,3 +51,15 @@
     --tw-checker-color: theme("colors.slate.950"); /* Dark mode pattern color */
   }
 }
+
+.s-blinking-cursor > :not(pre):last-child::after {
+  content: "";
+  width: 8px;
+  height: 16px;
+  @apply s-bg-success-400;
+  display: inline-block;
+  @apply s-animate-cursor-blink;
+  margin-left: 5px;
+  position: relative;
+  top: 4px;
+}

package/src/styles/global_with_tw_base.css

@@ -2,6 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
+.s-blinking-cursor > :not(pre):last-child::after {
+  content: "";
+  width: 8px;
+  height: 16px;
+  @apply s-bg-success-400;
+  display: inline-block;
+  @apply s-animate-cursor-blink;
+  margin-left: 5px;
+  position: relative;
+  top: 4px;
+}
+
 @keyframes collapse-down {
   from {
     height: 0;

package/src/styles/tailwind.css

@@ -2,6 +2,17 @@
 @tailwind components;
 @tailwind utilities;
 
+.s-blinking-cursor > :not(pre):last-child::after {
+  content: "";
+  width: 8px;
+  height: 16px;
+  @apply s-bg-success-400;
+  display: inline-block;
+  @apply s-animate-cursor-blink;
+  margin-left: 5px;
+  position: relative;
+  top: 4px;
+}
 
 @keyframes bgblink {
   0%,

package/dist/esm/components/markdown/HeaderBlocks.d.ts

@@ -1,24 +0,0 @@
-import React from "react";
-import { MarkdownNode } from "./types";
-export declare const markdownHeaderClasses: {
-    h1: string;
-    h2: string;
-    h3: string;
-    h4: string;
-    h5: string;
-    h6: string;
-};
-interface HeaderBlockProps {
-    children: React.ReactNode;
-    textColor?: string;
-    forcedTextSize?: string;
-    node?: MarkdownNode;
-}
-export declare const MemoH1Block: React.MemoExoticComponent<({ children, textColor, forcedTextSize }: HeaderBlockProps) => React.JSX.Element>;
-export declare const MemoH2Block: React.MemoExoticComponent<({ children, textColor, forcedTextSize }: HeaderBlockProps) => React.JSX.Element>;
-export declare const MemoH3Block: React.MemoExoticComponent<({ children, textColor, forcedTextSize }: HeaderBlockProps) => React.JSX.Element>;
-export declare const MemoH4Block: React.MemoExoticComponent<({ children, textColor, forcedTextSize }: HeaderBlockProps) => React.JSX.Element>;
-export declare const MemoH5Block: React.MemoExoticComponent<({ children, textColor, forcedTextSize }: HeaderBlockProps) => React.JSX.Element>;
-export declare const MemoH6Block: React.MemoExoticComponent<({ children, textColor, forcedTextSize }: HeaderBlockProps) => React.JSX.Element>;
-export {};
-//# sourceMappingURL=HeaderBlocks.d.ts.map

package/dist/esm/components/markdown/HeaderBlocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderBlocks.d.ts","sourceRoot":"","sources":["../../../../src/components/markdown/HeaderBlocks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,eAAO,MAAM,qBAAqB;;;;;;;CAOjC,CAAC;AAEF,UAAU,gBAAgB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,sEACoB,gBAAgB,uBAkB3D,CAAC;AAIF,eAAO,MAAM,WAAW,sEACoB,gBAAgB,uBAkB3D,CAAC;AAIF,eAAO,MAAM,WAAW,sEACoB,gBAAgB,uBAkB3D,CAAC;AAIF,eAAO,MAAM,WAAW,sEACoB,gBAAgB,uBAkB3D,CAAC;AAIF,eAAO,MAAM,WAAW,sEACoB,gBAAgB,uBAkB3D,CAAC;AAIF,eAAO,MAAM,WAAW,sEACoB,gBAAgB,uBAkB3D,CAAC"}

package/dist/esm/components/markdown/HeaderBlocks.js

@@ -1,54 +0,0 @@
-import React, { memo } from "react";
-import { cn } from "../../lib/utils";
-import { sameNodePosition, sameTextStyling } from "./utils";
-export var markdownHeaderClasses = {
-    h1: "s-heading-2xl",
-    h2: "s-heading-xl",
-    h3: "s-heading-lg",
-    h4: "s-text-base s-font-semibold",
-    h5: "s-text-sm s-font-semibold",
-    h6: "s-text-sm s-font-regular s-italic",
-};
-export var MemoH1Block = memo(function (_a) {
-    var children = _a.children, textColor = _a.textColor, forcedTextSize = _a.forcedTextSize;
-    return (React.createElement("h1", { className: cn("s-pb-2 s-pt-4", forcedTextSize ? forcedTextSize : markdownHeaderClasses.h1, textColor) }, children));
-}, function (prev, next) {
-    return (sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next));
-});
-MemoH1Block.displayName = "H1Block";
-export var MemoH2Block = memo(function (_a) {
-    var children = _a.children, textColor = _a.textColor, forcedTextSize = _a.forcedTextSize;
-    return (React.createElement("h2", { className: cn("s-pb-2 s-pt-4", forcedTextSize ? forcedTextSize : markdownHeaderClasses.h2, textColor) }, children));
-}, function (prev, next) {
-    return (sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next));
-});
-MemoH2Block.displayName = "H2Block";
-export var MemoH3Block = memo(function (_a) {
-    var children = _a.children, textColor = _a.textColor, forcedTextSize = _a.forcedTextSize;
-    return (React.createElement("h3", { className: cn("s-pb-2 s-pt-4", forcedTextSize ? forcedTextSize : markdownHeaderClasses.h3, textColor) }, children));
-}, function (prev, next) {
-    return (sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next));
-});
-MemoH3Block.displayName = "H3Block";
-export var MemoH4Block = memo(function (_a) {
-    var children = _a.children, textColor = _a.textColor, forcedTextSize = _a.forcedTextSize;
-    return (React.createElement("h4", { className: cn("s-pb-2 s-pt-3", forcedTextSize ? forcedTextSize : markdownHeaderClasses.h4, textColor) }, children));
-}, function (prev, next) {
-    return (sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next));
-});
-MemoH4Block.displayName = "H4Block";
-export var MemoH5Block = memo(function (_a) {
-    var children = _a.children, textColor = _a.textColor, forcedTextSize = _a.forcedTextSize;
-    return (React.createElement("h5", { className: cn("s-pb-1.5 s-pt-2.5", forcedTextSize ? forcedTextSize : markdownHeaderClasses.h5, textColor) }, children));
-}, function (prev, next) {
-    return (sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next));
-});
-MemoH5Block.displayName = "H5Block";
-export var MemoH6Block = memo(function (_a) {
-    var children = _a.children, textColor = _a.textColor, forcedTextSize = _a.forcedTextSize;
-    return (React.createElement("h6", { className: cn("s-pb-1.5 s-pt-2.5", forcedTextSize ? forcedTextSize : markdownHeaderClasses.h6, textColor) }, children));
-}, function (prev, next) {
-    return (sameNodePosition(prev.node, next.node) && sameTextStyling(prev, next));
-});
-MemoH6Block.displayName = "H6Block";
-//# sourceMappingURL=HeaderBlocks.js.map