@alexgorbatchev/shadcn 0.0.0-stage → 0.0.16

package/dist/chunk-b2jkgq4n.js

@@ -0,0 +1,22 @@
+import {
+  InputGroupInput2
+} from "./chunk-1jeg5z55.js";
+
+// src/components/assistant-ui/elements/ComposerInput.tsx
+import { jsx } from "react/jsx-runtime";
+function ComposerInput2({ onSubmit, onKeyDown, ...props }) {
+  return /* @__PURE__ */ jsx(InputGroupInput2, {
+    "data-testid": "ComposerInput",
+    onKeyDown: (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented)
+        return;
+      if (event.key !== "Enter" || event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229)
+        return;
+      onSubmit?.();
+    },
+    ...props
+  });
+}
+
+export { ComposerInput2 };

package/dist/chunk-b3b2tvkg.js

@@ -0,0 +1,41 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  take
+} from "./chunk-v8ks0cfq.js";
+
+// src/components/assistant-ui/elements/StreamingText.tsx
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StreamingText2({ segments, count, streaming, className, ...props }) {
+  const words = useMemo(() => segments.flatMap((segment) => segment.text.split(" ").map((word) => ({ word, mono: segment.mono ?? false }))), [segments]);
+  const shown = take(words, count);
+  return /* @__PURE__ */ jsxs("p", {
+    "data-testid": "StreamingText",
+    "data-slot": "streaming-text",
+    className: cn2(cn2("min-h-[136px] max-w-sm text-sm leading-relaxed text-pretty"), className),
+    ...props,
+    children: [
+      shown.map(({ word, mono: isMono }, i) => {
+        const fresh = streaming && shown.length - 1 - i < 2;
+        return /* @__PURE__ */ jsxs("span", {
+          className: "fade-in animate-in fill-mode-both duration-500 motion-reduce:animate-none",
+          children: [
+            /* @__PURE__ */ jsx("span", {
+              className: cn2("transition-colors duration-700 motion-reduce:transition-none", fresh && "text-primary text-primary", isMono && "bg-foreground/[0.06] rounded-md px-1.5 py-0.5 font-mono text-[0.85em]"),
+              children: word
+            }),
+            " "
+          ]
+        }, i);
+      }),
+      streaming && shown.length > 0 && /* @__PURE__ */ jsx("span", {
+        "aria-hidden": true,
+        className: "-mb-0.5 ml-0.5 inline-block h-4 w-0.5 animate-pulse rounded-full bg-primary bg-primary"
+      })
+    ]
+  });
+}
+
+export { StreamingText2 };

package/dist/chunk-bhejvd5q.js

@@ -0,0 +1,76 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  ShimmerLabel2
+} from "./chunk-s3wqwhxc.js";
+import {
+  take
+} from "./chunk-v8ks0cfq.js";
+import {
+  field,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/WebSearch.tsx
+import { SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function WebSearch2({
+  query,
+  results,
+  visibleResults,
+  searching,
+  cycle,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "WebSearch",
+    "data-slot": "web-search",
+    className: cn2(cn2("flex w-full max-w-sm flex-col gap-2.5"), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("span", {
+        className: cn2(field, "text-muted-foreground inline-flex w-fit items-center gap-1.5 rounded-full px-3.5 py-2 text-sm"),
+        children: [
+          /* @__PURE__ */ jsx(SearchIcon, {
+            "aria-hidden": "true",
+            className: cn2("size-4")
+          }),
+          query
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "text-muted-foreground text-sm",
+        children: searching ? /* @__PURE__ */ jsx(ShimmerLabel2, {
+          children: "Searching"
+        }) : /* @__PURE__ */ jsx("span", {
+          className: "fade-in animate-in duration-300",
+          children: "Read 3 sources"
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "flex min-h-[92px] flex-col",
+        children: take(results, visibleResults).map((result) => /* @__PURE__ */ jsxs("div", {
+          className: "fade-in slide-in-from-bottom-1 animate-in fill-mode-both hover:bg-foreground/[0.03] -mx-2.5 flex items-center gap-2.5 rounded-md px-2.5 py-1.5 transition-colors duration-300",
+          children: [
+            /* @__PURE__ */ jsx("span", {
+              className: "bg-foreground/[0.06] text-muted-foreground flex size-4 shrink-0 items-center justify-center rounded text-[9px] font-medium",
+              children: result.domain.charAt(0).toUpperCase()
+            }),
+            /* @__PURE__ */ jsx("span", {
+              className: "text-foreground min-w-0 flex-1 truncate text-base",
+              children: result.title
+            }),
+            /* @__PURE__ */ jsx("span", {
+              className: cn2(mono, "text-muted-foreground shrink-0"),
+              children: result.domain
+            })
+          ]
+        }, `${cycle}-${result.domain}`))
+      })
+    ]
+  });
+}
+
+export { WebSearch2 };

package/dist/chunk-bnaejcfx.js

@@ -0,0 +1,43 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  diffLineVariants2,
+  diffLineTextVariants2,
+  DiffViewerText
+} from "./chunk-ynkpdpn0.js";
+
+// src/components/assistant-ui/elements/DiffViewerLine.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DiffViewerLine2({
+  line,
+  showLineNumbers = true,
+  className,
+  ...props
+}) {
+  const indicator = line.type === "add" ? "+" : line.type === "del" ? "-" : line.type === "marker" ? "" : " ";
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "DiffViewerLine",
+    "data-slot": "diff-viewer-line",
+    "data-type": line.type,
+    className: cn2(diffLineVariants2({ type: line.type }), className),
+    ...props,
+    children: [
+      showLineNumbers && /* @__PURE__ */ jsx("span", {
+        "data-slot": "diff-viewer-line-number",
+        className: "text-muted-foreground w-10 shrink-0 px-2 text-end tabular-nums select-none",
+        children: line.type === "marker" ? "" : line.type === "del" ? line.oldLineNumber : line.type === "add" ? line.newLineNumber : line.oldLineNumber
+      }),
+      /* @__PURE__ */ jsx("span", {
+        "data-slot": "diff-viewer-indicator",
+        className: cn2("w-4 shrink-0 text-center select-none", diffLineTextVariants2({ type: line.type })),
+        children: indicator
+      }),
+      /* @__PURE__ */ jsx(DiffViewerText, {
+        line
+      })
+    ]
+  });
+}
+
+export { DiffViewerLine2 };

package/dist/chunk-bt5ksk3z.js

@@ -0,0 +1,76 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  field,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/StoppedRun.tsx
+import { ArrowRightIcon, SquareIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function StoppedRun2({
+  words,
+  reason,
+  onContinue,
+  onDiscard,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "StoppedRun",
+    "data-slot": "stopped-run",
+    className: cn2(cn2("flex w-full max-w-sm flex-col gap-3"), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("p", {
+        className: "text-foreground text-base leading-relaxed",
+        children: [
+          words.join(" "),
+          /* @__PURE__ */ jsx("span", {
+            "aria-hidden": true,
+            className: "bg-foreground/20 ms-1 inline-block h-[1em] w-[2px] translate-y-[0.15em] rounded-full"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsxs("span", {
+            className: cn2(field, mono, "text-muted-foreground inline-flex items-center gap-1.5 rounded-full px-2.5 py-1"),
+            children: [
+              /* @__PURE__ */ jsx(SquareIcon, {
+                "aria-hidden": "true",
+                className: cn2("size-4")
+              }),
+              reason
+            ]
+          }),
+          /* @__PURE__ */ jsxs(Button2, {
+            type: "button",
+            onClick: onContinue,
+            variant: "ghost",
+            children: [
+              "Continue",
+              /* @__PURE__ */ jsx(ArrowRightIcon, {
+                "aria-hidden": "true",
+                "data-icon": "inline-start"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx(Button2, {
+            type: "button",
+            onClick: onDiscard,
+            variant: "ghost",
+            children: "Discard"
+          })
+        ]
+      })
+    ]
+  });
+}
+
+export { StoppedRun2 };

package/dist/chunk-c2vcrwjp.js

@@ -0,0 +1,70 @@
+// src/components/assistant-ui/native/FollowupSuggestionsRow.tsx
+import { AuiIf, useAuiState, ThreadPrimitive } from "@assistant-ui/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var FollowupSuggestionsRow = () => {
+  const suggestions = useAuiState((s) => s.thread.suggestions);
+  const scrollRef = useRef(null);
+  const rtlRef = useRef(null);
+  const [fades, setFades] = useState({ left: false, right: false });
+  const updateFades = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el)
+      return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    const fromStart = Math.abs(el.scrollLeft);
+    const rtl = rtlRef.current ??= getComputedStyle(el).direction === "rtl";
+    const [left, right] = rtl ? [maxScroll - fromStart, fromStart] : [fromStart, maxScroll - fromStart];
+    setFades((prev) => {
+      const next = { left: left > 1, right: right > 1 };
+      return prev.left === next.left && prev.right === next.right ? prev : next;
+    });
+  }, []);
+  useEffect(() => {
+    updateFades();
+    const el = scrollRef.current;
+    if (!el?.firstElementChild)
+      return;
+    const observer = new ResizeObserver(updateFades);
+    observer.observe(el);
+    observer.observe(el.firstElementChild);
+    return () => observer.disconnect();
+  }, [updateFades]);
+  const maskImage = `linear-gradient(to right, ${fades.left ? "transparent, black 32px" : "black"}, ${fades.right ? "black calc(100% - 32px), transparent" : "black"})`;
+  return /* @__PURE__ */ jsx("div", {
+    ref: scrollRef,
+    onScroll: updateFades,
+    className: "aui-thread-followup-suggestions -my-1 w-full [scrollbar-width:none] overflow-x-auto py-1 [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+    style: { maskImage, WebkitMaskImage: maskImage },
+    children: /* @__PURE__ */ jsx("div", {
+      className: "mx-auto flex min-h-control-sm w-max items-center gap-2 px-0.5",
+      children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsxs(ThreadPrimitive.Suggestion, {
+        prompt: suggestion.prompt,
+        send: true,
+        render: /* @__PURE__ */ jsx("button", {
+          className: "aui-thread-followup-suggestion border-frame-edge hover:bg-foreground/[0.03] hover:border-foreground/25 rounded-md border px-2.5 py-1 text-sm whitespace-nowrap transition-colors ease-in motion-reduce:transition-none"
+        }),
+        children: [
+          suggestion.title ?? suggestion.prompt,
+          suggestion.label && /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              " ",
+              /* @__PURE__ */ jsx("span", {
+                className: "aui-thread-followup-suggestion-label text-muted-foreground ms-1",
+                children: suggestion.label
+              })
+            ]
+          })
+        ]
+      }, idx))
+    })
+  });
+};
+function ThreadFollowupSuggestions2() {
+  return /* @__PURE__ */ jsx(AuiIf, {
+    condition: (s) => !s.thread.isEmpty && !s.thread.isRunning && s.thread.suggestions.length > 0,
+    children: /* @__PURE__ */ jsx(FollowupSuggestionsRow, {})
+  });
+}
+
+export { ThreadFollowupSuggestions2 };

package/dist/chunk-cn1ns1xj.js

@@ -0,0 +1,98 @@
+import {
+  ShareMeter2
+} from "./chunk-mammcx1w.js";
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  ShimmerLabel2
+} from "./chunk-s3wqwhxc.js";
+import {
+  take,
+  pct,
+  announced
+} from "./chunk-v8ks0cfq.js";
+import {
+  paper,
+  field,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/RetrievalChunks.tsx
+import { DatabaseIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RetrievalChunks2({
+  query,
+  chunks,
+  visibleCount,
+  searching,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "RetrievalChunks",
+    "data-slot": "retrieval-chunks",
+    className: cn2(cn2("flex w-full max-w-sm flex-col gap-2.5"), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("span", {
+        className: cn2(field, "text-muted-foreground inline-flex w-fit items-center gap-1.5 rounded-full px-3.5 py-2 text-sm"),
+        children: [
+          /* @__PURE__ */ jsx(DatabaseIcon, {
+            "aria-hidden": "true",
+            className: cn2("size-4")
+          }),
+          query
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "text-muted-foreground text-sm",
+        children: searching ? /* @__PURE__ */ jsx(ShimmerLabel2, {
+          children: "Retrieving"
+        }) : /* @__PURE__ */ jsxs("span", {
+          className: "fade-in animate-in duration-300",
+          children: [
+            chunks.length,
+            " passages above threshold"
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "flex min-h-[112px] flex-col gap-1.5",
+        children: take(chunks, visibleCount).map((chunk) => /* @__PURE__ */ jsxs("div", {
+          className: cn2(paper, "fade-in slide-in-from-bottom-1 animate-in fill-mode-both flex flex-col gap-1.5 rounded-md px-3.5 py-2.5 duration-300"),
+          children: [
+            /* @__PURE__ */ jsxs("div", {
+              className: "flex items-baseline gap-2",
+              children: [
+                /* @__PURE__ */ jsx("span", {
+                  className: "text-foreground min-w-0 flex-1 truncate text-base font-medium",
+                  children: chunk.source
+                }),
+                /* @__PURE__ */ jsx("span", {
+                  className: cn2(mono, "text-muted-foreground shrink-0"),
+                  children: chunk.locator
+                }),
+                /* @__PURE__ */ jsx("span", {
+                  className: cn2(mono, "shrink-0 tabular-nums", chunk.score >= 0.8 ? "text-success text-success" : "text-muted-foreground"),
+                  children: chunk.score.toFixed(2)
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx("p", {
+              className: "text-muted-foreground line-clamp-2 text-sm leading-relaxed",
+              children: chunk.text
+            }),
+            /* @__PURE__ */ jsx(ShareMeter2, {
+              label: `${chunk.source} relevance score`,
+              percentage: announced(pct(chunk.score, 1)),
+              valueText: `${chunk.score.toFixed(2)} of 1.00`
+            })
+          ]
+        }, chunk.id))
+      })
+    ]
+  });
+}
+
+export { RetrievalChunks2 };

package/dist/chunk-cp2m7y7v.js

@@ -0,0 +1,26 @@
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var mergeClasses = extendTailwindMerge({
+  extend: {
+    theme: {
+      spacing: [
+        "control",
+        "control-xs",
+        "control-sm",
+        "control-lg",
+        "control-x",
+        "control-gap",
+        "tag",
+        "tag-x",
+        "panel",
+        "field-gap"
+      ]
+    }
+  }
+});
+function cn2(...inputs) {
+  return mergeClasses(clsx(inputs));
+}
+
+export { cn2 };

package/dist/chunk-czg9p52v.js

@@ -0,0 +1,74 @@
+import {
+  useDensity
+} from "./chunk-e6hk39ev.js";
+import {
+  usePortalContainer2
+} from "./chunk-j89xg1ak.js";
+import {
+  useDirection2
+} from "./chunk-jpvw9xqy.js";
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/Tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TooltipProvider2({ delay = 0, ...props }) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
+    "data-slot": "tooltip-provider",
+    delay,
+    ...props
+  });
+}
+function Tooltip2({ ...props }) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Root, {
+    "data-slot": "tooltip",
+    ...props
+  });
+}
+function TooltipTrigger2({ ...props }) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, {
+    "data-slot": "tooltip-trigger",
+    ...props
+  });
+}
+function TooltipContent2({
+  density,
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}) {
+  const resolvedDensity = useDensity(density);
+  const direction = useDirection2();
+  const container = usePortalContainer2();
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, {
+    container,
+    children: /* @__PURE__ */ jsx(TooltipPrimitive.Positioner, {
+      dir: direction,
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate ",
+      children: /* @__PURE__ */ jsxs(TooltipPrimitive.Popup, {
+        "data-density": resolvedDensity,
+        "data-slot": "tooltip-content",
+        className: (state) => cn2("inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-control-gap rounded-md border border-frame-edge shadow-frame bg-popover px-3 py-1.5 font-sans text-xs text-popover-foreground has-data-[slot=kbd]:pe-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **: **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", typeof className === "function" ? className(state) : className),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, {
+            className: " size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-popover fill-popover data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-start-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-end-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5"
+          })
+        ]
+      })
+    })
+  });
+}
+
+export { TooltipProvider2, Tooltip2, TooltipTrigger2, TooltipContent2 };

package/dist/chunk-d70rcwk7.js

@@ -0,0 +1,16 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/Skeleton.tsx
+import { jsx } from "react/jsx-runtime";
+function Skeleton2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    "data-density": density,
+    "data-slot": "skeleton",
+    className: cn2("animate-pulse rounded-md bg-muted motion-reduce:animate-none", className),
+    ...props
+  });
+}
+
+export { Skeleton2 };

package/dist/chunk-dd53t01w.js

@@ -0,0 +1,14 @@
+import {
+  CommandSeparator2
+} from "./chunk-4gby2v61.js";
+
+// src/components/assistant-ui/elements/ModelSelectorSeparator.tsx
+import { jsx } from "react/jsx-runtime";
+function ModelSelectorSeparator2(props) {
+  return /* @__PURE__ */ jsx(CommandSeparator2, {
+    "data-slot": "model-selector-separator",
+    ...props
+  });
+}
+
+export { ModelSelectorSeparator2 };

package/dist/chunk-dg14mg3y.js

@@ -0,0 +1,56 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  take
+} from "./chunk-v8ks0cfq.js";
+import {
+  paper,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/Timeline.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Timeline2({ events, visibleCount, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    "data-testid": "Timeline",
+    "data-slot": "timeline",
+    className: cn2(cn2(paper, "flex w-full max-w-sm flex-col rounded-md p-4"), className),
+    ...props,
+    children: take(events, visibleCount).map((event, i, shown) => /* @__PURE__ */ jsxs("div", {
+      className: "fade-in slide-in-from-left-1 animate-in fill-mode-both grid grid-cols-[3.5rem_1rem_minmax(0,1fr)] gap-x-2 duration-300",
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          className: cn2(mono, "text-muted-foreground pt-[3px] text-end tabular-nums"),
+          children: event.time
+        }),
+        /* @__PURE__ */ jsxs("span", {
+          className: "flex flex-col items-center",
+          children: [
+            /* @__PURE__ */ jsx("span", {
+              className: cn2("mt-1 size-2 shrink-0 rounded-full", event.when === "now" && "bg-primary ring-4 ring-primary/15 bg-primary forced-colors:bg-[Highlight]", event.when === "past" && "bg-muted-foreground forced-colors:bg-[CanvasText]", event.when === "future" && "border-muted-foreground border bg-transparent")
+            }),
+            i < shown.length - 1 && /* @__PURE__ */ jsx("span", {
+              className: cn2("w-px flex-1", event.when === "future" ? "bg-foreground/[0.08]" : "bg-foreground/15")
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: cn2("flex flex-col gap-0.5", i < shown.length - 1 && "pb-3"),
+          children: [
+            /* @__PURE__ */ jsx("span", {
+              className: cn2("text-base break-words", event.when === "future" ? "text-muted-foreground" : "text-foreground", event.when === "now" && "font-medium"),
+              children: event.title
+            }),
+            event.detail && /* @__PURE__ */ jsx("span", {
+              className: "text-muted-foreground text-sm leading-relaxed break-words",
+              children: event.detail
+            })
+          ]
+        })
+      ]
+    }, event.id))
+  });
+}
+
+export { Timeline2 };