@mintlify/components 0.4.16 → 1.0.0

package/dist/components/tile/tile.js

@@ -0,0 +1,108 @@
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { Classes as f } from "../../constants/selectors.js";
+import { cn as o } from "../../utils/cn.js";
+import { isRemoteUrl as g } from "../../utils/is-remote-url.js";
+const a = 24, s = 10, e = a / 2, m = (t) => {
+  const i = `
+    <svg width="${a}" height="${a}" xmlns="http://www.w3.org/2000/svg">
+      <g opacity="0.5">
+        <line x1="${e}" y1="${e - s / 2}" x2="${e}" y2="${e + s / 2}" 
+              stroke="${t}" stroke-width="1" stroke-linecap="round"/>
+        <line x1="${e - s / 2}" y1="${e}" x2="${e + s / 2}" y2="${e}" 
+              stroke="${t}" stroke-width="1" stroke-linecap="round"/>
+      </g>
+    </svg>
+  `;
+  return `data:image/svg+xml,${encodeURIComponent(i)}`;
+}, x = m("#F0F0F0"), b = m("#232323"), u = `${a}px ${a}px`, $ = ({ href: t, children: i, title: n, description: l, className: p }) => {
+  const d = o(
+    "pointer-events-none size-full select-none bg-center bg-repeat-round [grid-area:1/1]",
+    "after:absolute after:left-0 after:h-full after:w-[7px] after:bg-neutral-50 after:content-[''] dark:after:bg-neutral-900",
+    "before:absolute before:right-0 before:h-full before:w-[7px] before:bg-neutral-50 before:content-[''] dark:before:bg-neutral-900"
+  );
+  return /* @__PURE__ */ c(
+    "a",
+    {
+      href: t,
+      ...g(t) ? { target: "_blank", rel: "noreferrer" } : {},
+      className: o(
+        f.Tile,
+        "group not-prose flex w-full min-w-0 cursor-pointer flex-col items-center justify-center gap-1",
+        p
+      ),
+      children: [
+        /* @__PURE__ */ c(
+          "div",
+          {
+            className: "relative grid h-[170px] w-full place-items-center overflow-hidden rounded-2xl bg-neutral-50 py-1 dark:bg-neutral-900",
+            "data-component-part": "tile-children-container",
+            children: [
+              /* @__PURE__ */ r(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: o(d, "block dark:hidden"),
+                  "data-component-part": "tile-background-light",
+                  style: {
+                    backgroundImage: `url("${x}")`,
+                    backgroundSize: u
+                  }
+                }
+              ),
+              /* @__PURE__ */ r(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: o(d, "hidden dark:block"),
+                  "data-component-part": "tile-background-dark",
+                  style: {
+                    backgroundImage: `url("${b}")`,
+                    backgroundSize: u
+                  }
+                }
+              ),
+              /* @__PURE__ */ r(
+                "div",
+                {
+                  className: "flex size-full items-center justify-center p-8 [grid-area:1/1] [&_svg]:h-auto [&_svg]:max-h-full [&_svg]:w-auto [&_svg]:max-w-full",
+                  "data-component-part": "tile-children-inner-container",
+                  children: i
+                }
+              )
+            ]
+          }
+        ),
+        (!!n || !!l) && /* @__PURE__ */ c(
+          "div",
+          {
+            className: "flex w-full min-w-0 flex-col items-center justify-center gap-1 p-2",
+            "data-component-part": "tile-text-container",
+            children: [
+              !!n && /* @__PURE__ */ r(
+                "p",
+                {
+                  className: "m-0 max-w-full truncate font-medium text-base text-neutral-900 tracking-[-0.2px] dark:text-neutral-200",
+                  "data-component-part": "tile-title",
+                  title: n,
+                  children: n
+                }
+              ),
+              !!l && /* @__PURE__ */ r(
+                "p",
+                {
+                  className: "m-0 max-w-full truncate font-normal text-neutral-600 text-sm tracking-[-0.1px] dark:text-neutral-400",
+                  "data-component-part": "tile-description",
+                  title: l,
+                  children: l
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  $ as Tile
+};

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,110 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { useState as h, useMemo as _, isValidElement as d } from "react";
+import { Classes as k } from "../../constants/selectors.js";
+import { useHasHover as T } from "../../hooks/use-has-hover.js";
+import { cn as u } from "../../utils/cn.js";
+import { isRemoteUrl as C } from "../../utils/is-remote-url.js";
+import { renderAsChild as N } from "../../utils/render-as-child.js";
+import P from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-right.js";
+import { TooltipProvider as w } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tooltip/provider/TooltipProvider.js";
+import { TooltipRoot as O } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tooltip/root/TooltipRoot.js";
+import { TooltipTrigger as j } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tooltip/trigger/TooltipTrigger.js";
+import { TooltipPortal as H } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tooltip/portal/TooltipPortal.js";
+import { TooltipPositioner as R } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tooltip/positioner/TooltipPositioner.js";
+import { TooltipPopup as z } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/tooltip/popup/TooltipPopup.js";
+const K = ({
+  description: e,
+  children: i,
+  title: t,
+  cta: p,
+  href: s,
+  className: c
+}) => {
+  const [g, a] = h(!1), m = T(), o = E(i), x = m ? void 0 : () => {
+    a((n) => !n);
+  }, y = (n, v) => {
+    const { reason: f } = v;
+    if (m) {
+      a(n);
+      return;
+    }
+    n ? a(!0) : (f === "escape-key" || f === "outside-press") && a(!1);
+  }, b = _(() => {
+    if (!o)
+      return t && e ? `${t}: ${e}` : t || e;
+  }, [t, e, o]);
+  return i == null ? null : /* @__PURE__ */ r(w, { delay: 0, children: /* @__PURE__ */ l(O, { onOpenChange: y, open: g, children: [
+    /* @__PURE__ */ r(
+      j,
+      {
+        "aria-label": b,
+        className: u(
+          c,
+          !o && "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+        ),
+        onClick: x,
+        render: o ? N(i) : void 0,
+        children: o ? null : I(i)
+      }
+    ),
+    /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(R, { collisionPadding: 8, sideOffset: 4, children: /* @__PURE__ */ l(
+      z,
+      {
+        className: "z-50 flex max-w-[16rem] flex-col gap-1 rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-[0_10px_16px_-3px_rgb(10_10_10/0.05),0_3px_10px_-2px_rgb(10_10_10/0.02)] dark:border-gray-900 dark:bg-gray-950",
+        "data-component-part": "tooltip-content",
+        children: [
+          !!t && /* @__PURE__ */ r(
+            "p",
+            {
+              className: "font-medium text-gray-900 text-xs leading-4 dark:text-gray-200",
+              "data-component-part": "tooltip-title",
+              children: t
+            }
+          ),
+          !!e && /* @__PURE__ */ r(
+            "p",
+            {
+              className: "text-gray-600 text-xs leading-4 dark:text-gray-400",
+              "data-component-part": "tooltip-description",
+              children: e
+            }
+          ),
+          p && s && /* @__PURE__ */ l(
+            "a",
+            {
+              href: s,
+              ...C(s) ? { target: "_blank", rel: "noreferrer" } : {},
+              className: "mt-2! flex items-center gap-0.5 rounded-sm font-medium text-gray-600 text-xs leading-4 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 dark:text-gray-400 dark:hover:text-primary-light",
+              "data-component-part": "tooltip-cta",
+              children: [
+                p,
+                /* @__PURE__ */ r(
+                  P,
+                  {
+                    "aria-hidden": "true",
+                    className: "size-3",
+                    strokeWidth: 2.5
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ) }) })
+  ] }) });
+}, E = (e) => d(e) ? typeof e.type == "function" || typeof e.type == "object" ? !0 : typeof e.type == "string" ? ["button", "a", "input", "select", "textarea"].includes(
+  e.type.toLowerCase()
+) : !1 : !1, I = (e) => d(e) ? e : /* @__PURE__ */ r(
+  "span",
+  {
+    className: u(
+      k.Tooltip,
+      "underline decoration-2 decoration-gray-400 decoration-dotted underline-offset-4 dark:decoration-gray-500"
+    ),
+    children: e
+  }
+);
+export {
+  K as Tooltip
+};

package/dist/components/tree/context.js

@@ -0,0 +1,14 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+import { TreeLevelContext as s } from "./tree-level-context.js";
+const p = ({
+  children: o,
+  level: r,
+  parentId: e
+}) => {
+  const t = i(() => ({ level: r, parentId: e }), [r, e]);
+  return /* @__PURE__ */ m(s.Provider, { value: t, children: o });
+};
+export {
+  p as TreeLevelProvider
+};

package/dist/components/tree/file.js

@@ -0,0 +1,46 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { Classes as l } from "../../constants/selectors.js";
+import { FileIcon as i } from "../../icons/index.js";
+import { cn as o } from "../../utils/cn.js";
+import { useTreeLevel as n } from "./use-tree-level.js";
+import { calculatePaddingLeft as s } from "./utils.js";
+const g = ({ name: e }) => {
+  const { level: t } = n();
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "aria-level": t,
+      "aria-selected": !1,
+      className: o(
+        "flex cursor-default items-center gap-1.5 rounded-lg py-1 pr-1.5 pl-[calc(var(--padding-left)*1px)] text-gray-700 -outline-offset-1 hover:bg-neutral-100 dark:text-gray-400 dark:hover:bg-neutral-900",
+        l.TreeFile
+      ),
+      "data-component-part": "tree-file",
+      role: "treeitem",
+      style: { "--padding-left": s(t) },
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ r(
+          i,
+          {
+            "aria-hidden": "true",
+            className: "size-4 shrink-0 select-none",
+            "data-component-part": "tree-file-icon"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "span",
+          {
+            className: "truncate font-medium text-sm leading-5 -tracking-[0.1px]",
+            "data-component-part": "tree-file-title",
+            title: e,
+            children: e
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  g as TreeFile
+};

package/dist/components/tree/folder.js

@@ -0,0 +1,87 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { useId as v, useState as g } from "react";
+import { Classes as x } from "../../constants/selectors.js";
+import { Folder2OpenIcon as h, Folder2Icon as I } from "../../icons/index.js";
+import { cn as b } from "../../utils/cn.js";
+import { TreeLevelProvider as k } from "./context.js";
+import { useTreeLevel as F } from "./use-tree-level.js";
+import { calculatePaddingLeft as N } from "./utils.js";
+const P = ({
+  name: l,
+  defaultOpen: p = !1,
+  children: n,
+  openable: s = !0
+}) => {
+  const d = v(), i = `tree-folder-${d}`, c = `tree-group-${d}`, e = s && !!n, { level: o } = F(), [r, m] = g(e && p), f = e && r ? h : I;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-component-part": "tree-folder",
+      role: "none",
+      style: { "--padding-left": N(o) },
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            "aria-expanded": e ? r : void 0,
+            "aria-level": o,
+            "aria-owns": e && r ? c : void 0,
+            "aria-selected": !1,
+            className: b(
+              "flex items-center gap-1.5 rounded-lg py-1 pr-1.5 pl-[calc(var(--padding-left)*1px)] text-gray-700 -outline-offset-1 hover:bg-neutral-100 dark:text-gray-400 dark:hover:bg-neutral-900",
+              e ? "cursor-pointer" : "cursor-default",
+              x.TreeFolder
+            ),
+            id: i,
+            onClick: e ? () => m((u) => !u) : void 0,
+            role: "treeitem",
+            tabIndex: -1,
+            children: [
+              /* @__PURE__ */ t(
+                f,
+                {
+                  "aria-hidden": "true",
+                  className: "size-4 shrink-0 select-none",
+                  "data-component-part": e && r ? "tree-folder-icon-open" : "tree-folder-icon-closed"
+                }
+              ),
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  className: "truncate font-medium text-sm leading-5 -tracking-[0.1px]",
+                  "data-component-part": "tree-folder-title",
+                  title: l,
+                  children: l
+                }
+              )
+            ]
+          }
+        ),
+        e && r && // biome-ignore lint/a11y/useSemanticElements: TODO
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "relative",
+            "data-component-part": "tree-folder-children-wrapper",
+            id: c,
+            role: "group",
+            children: [
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "absolute left-[calc((var(--padding-left)+8)*1px)] z-10 h-full w-px select-none bg-neutral-200 dark:bg-neutral-800",
+                  "data-component-part": "tree-folder-children-line"
+                }
+              ),
+              /* @__PURE__ */ t(k, { level: o + 1, parentId: i, children: n })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  P as TreeFolder
+};

package/dist/components/tree/index.js

@@ -0,0 +1,10 @@
+import { TreeFile as e } from "./file.js";
+import { TreeFolder as r } from "./folder.js";
+import { TreeRoot as o } from "./root.js";
+const l = Object.assign(o, {
+  File: e,
+  Folder: r
+});
+export {
+  l as Tree
+};

package/dist/components/tree/root.js

@@ -0,0 +1,98 @@
+import { jsx as T } from "react/jsx-runtime";
+import { useRef as f, useEffect as k, useCallback as h } from "react";
+import { Classes as E } from "../../constants/selectors.js";
+import { cn as F } from "../../utils/cn.js";
+import { TreeLevelProvider as L } from "./context.js";
+import { updateRovingTabindex as m, getVisibleTreeItems as R, getTreeItemLabel as C, getSiblingFolders as K, getParentTreeItem as S, getFirstChildTreeItem as H } from "./utils.js";
+const M = 500, N = ({ className: v, children: A }) => {
+  const n = f(null), i = f(""), a = f(
+    null
+  );
+  k(() => {
+    if (!n.current || n.current.querySelector(
+      '[role="treeitem"][tabindex="0"]'
+    ))
+      return;
+    const r = n.current.querySelector('[role="treeitem"]');
+    r && m(n.current, r);
+  }, []), k(() => () => {
+    a.current && clearTimeout(a.current);
+  }, []);
+  const c = h((e) => {
+    e && n.current && (m(n.current, e), e.focus());
+  }, []), x = h((e) => {
+    const r = e.target;
+    !(r instanceof HTMLElement) || r.getAttribute("role") !== "treeitem" || n.current && m(n.current, r);
+  }, []), D = (e) => {
+    const r = e.currentTarget, t = e.target;
+    if (!(t instanceof HTMLElement) || t.getAttribute("role") !== "treeitem")
+      return;
+    const o = R(r), l = o.indexOf(t), d = t.getAttribute("aria-expanded") !== null, p = t.getAttribute("aria-expanded") === "true";
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault(), c(o[l + 1]);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault(), c(o[l - 1]);
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault(), d && (p ? c(H(t)) : t.click());
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault(), d && p ? t.click() : c(S(t, r));
+        break;
+      }
+      case "Home": {
+        e.preventDefault(), c(o[0]);
+        break;
+      }
+      case "End": {
+        e.preventDefault(), c(o.at(-1));
+        break;
+      }
+      case " ":
+      case "Enter": {
+        e.preventDefault(), t.click();
+        break;
+      }
+      case "*": {
+        e.preventDefault(), K(t, r).forEach((s) => {
+          s.getAttribute("aria-expanded") === "false" && s.click();
+        });
+        break;
+      }
+      default: {
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+          e.preventDefault(), a.current && clearTimeout(a.current), i.current += e.key.toLowerCase();
+          const b = i.current, s = l + 1, y = o.slice(s), I = o.slice(0, s), g = [...y, ...I].find((w) => {
+            const u = C(w);
+            return u == null ? void 0 : u.toLowerCase().startsWith(b);
+          });
+          g && c(g), a.current = setTimeout(() => {
+            i.current = "";
+          }, M);
+        }
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ T(
+    "div",
+    {
+      "aria-label": "File tree",
+      className: F(E.Tree, v),
+      "data-component-part": "tree-root",
+      onFocus: x,
+      onKeyDown: D,
+      ref: n,
+      role: "tree",
+      children: /* @__PURE__ */ T(L, { level: 1, parentId: null, children: A })
+    }
+  );
+};
+export {
+  N as TreeRoot
+};

package/dist/components/tree/tree-level-context.js

@@ -0,0 +1,8 @@
+import { createContext as e } from "react";
+const t = {
+  level: 1,
+  parentId: null
+}, n = e(t);
+export {
+  n as TreeLevelContext
+};

package/dist/components/tree/use-tree-level.js

@@ -0,0 +1,6 @@
+import { useContext as e } from "react";
+import { TreeLevelContext as o } from "./tree-level-context.js";
+const m = () => e(o);
+export {
+  m as useTreeLevel
+};

package/dist/components/tree/utils.js

@@ -0,0 +1,54 @@
+const a = (r, t) => {
+  const l = (n) => {
+    if (!n || n === t)
+      return null;
+    if (n.getAttribute("role") === "group") {
+      const e = n.previousElementSibling;
+      if (e instanceof HTMLElement && e.getAttribute("role") === "treeitem")
+        return e;
+    }
+    return l(n.parentElement);
+  };
+  return l(r.parentElement);
+}, c = (r) => {
+  const t = r.nextElementSibling;
+  return (t == null ? void 0 : t.getAttribute("role")) === "group" ? t.querySelector('[role="treeitem"]') : null;
+}, s = (r, t) => {
+  const l = (n) => {
+    if (!n || n === t)
+      return !1;
+    if (n.getAttribute("role") === "group") {
+      const e = n.previousElementSibling;
+      if ((e == null ? void 0 : e.getAttribute("aria-expanded")) === "false")
+        return !0;
+    }
+    return l(n.parentElement);
+  };
+  return l(r.parentElement);
+}, f = (r) => Array.from(
+  r.querySelectorAll('[role="treeitem"]')
+).filter((t) => !s(t, r)), m = (r) => 6 + (r - 1) * 22, g = (r) => {
+  const t = r.querySelector("[title]");
+  return (t == null ? void 0 : t.textContent) ?? r.textContent ?? null;
+}, b = (r, t) => {
+  const l = (e) => !e || e === t ? null : e.getAttribute("role") === "group" || e.getAttribute("role") === "tree" ? e : l(e.parentElement), n = l(r.parentElement) ?? t;
+  return Array.from(n.children).flatMap((e) => {
+    const o = e.querySelector(
+      ':scope > [role="treeitem"][aria-expanded]'
+    ), i = e instanceof HTMLElement && e.getAttribute("role") === "treeitem" && e.hasAttribute("aria-expanded") ? e : null;
+    return [o, i].filter((u) => u !== null);
+  });
+}, d = (r, t) => {
+  r.querySelectorAll('[role="treeitem"]').forEach((n) => {
+    n.setAttribute("tabindex", n === t ? "0" : "-1");
+  });
+};
+export {
+  m as calculatePaddingLeft,
+  c as getFirstChildTreeItem,
+  a as getParentTreeItem,
+  b as getSiblingFolders,
+  g as getTreeItemLabel,
+  f as getVisibleTreeItems,
+  d as updateRovingTabindex
+};

package/dist/components/update/update.js

@@ -0,0 +1,116 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { forwardRef as v, useState as N, useMemo as j, useCallback as I, useEffect as E } from "react";
+import { useRect as $ } from "../../node_modules/.pnpm/react-use-rect@2.0.6_react@18.3.1/node_modules/react-use-rect/dist/index.esm.js";
+import { Classes as R } from "../../constants/selectors.js";
+import { LinkIcon as S } from "../../icons/index.js";
+import { cn as z } from "../../utils/cn.js";
+import { copyToClipboard as B } from "../../utils/copy-to-clipboard.js";
+const C = v(
+  ({
+    children: f,
+    label: u,
+    id: e,
+    description: p,
+    tags: d,
+    className: x,
+    "aria-label": h = "Navigate to changelog",
+    onRegisterHeading: a,
+    onUnregisterHeading: l,
+    hasContext: n,
+    isVisible: c,
+    onCopyAnchorLink: o,
+    ...w
+  }, y) => {
+    const [s, g] = N(null), [k] = $(g), i = j(
+      () => [...new Set((d ?? []).map((r) => r.trim()).filter(Boolean))],
+      [d]
+    ), b = I(async () => {
+      if (typeof window > "u")
+        return;
+      await B(
+        `${window.location.href.split("#")[0]}#${encodeURIComponent(e)}`
+      ) === "success" && (window.location.hash = encodeURIComponent(e), o == null || o(e));
+    }, [e, o]);
+    return E(() => {
+      if (n && c && s)
+        return a == null || a(e, s), () => {
+          l == null || l(e);
+        };
+    }, [
+      s,
+      e,
+      n,
+      c,
+      a,
+      l
+    ]), c ? /* @__PURE__ */ m(
+      "div",
+      {
+        className: z(
+          R.Update,
+          "update-container relative flex w-full flex-col items-start gap-2 py-8 lg:flex-row lg:gap-6",
+          x
+        ),
+        id: e,
+        ref: y,
+        ...w,
+        children: [
+          /* @__PURE__ */ m("div", { className: "group top-(--scroll-mt) flex w-full shrink-0 flex-col items-start justify-start lg:sticky lg:w-[160px]", children: [
+            /* @__PURE__ */ t("div", { className: "absolute", children: /* @__PURE__ */ m(
+              "a",
+              {
+                "aria-label": h,
+                className: "group/link -ml-10 flex items-center border-0 opacity-0 focus:opacity-100 focus:outline-0 group-hover:opacity-100",
+                href: `#${encodeURIComponent(e)}`,
+                children: [
+                  "​",
+                  /* @__PURE__ */ t("div", { className: "flex size-6 items-center justify-center rounded-md bg-white text-gray-400 shadow-sm ring-1 ring-gray-400/30 hover:ring-gray-400/60 group-focus/link:border-2 group-focus/link:border-primary dark:bg-background-dark dark:text-white/50 dark:ring-1 dark:ring-gray-700/25 dark:brightness-[1.35] dark:group-focus/link:border-primary-light dark:hover:ring-white/20 dark:hover:brightness-150", children: /* @__PURE__ */ t(S, {}) })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: "flex grow-0 cursor-pointer items-center justify-center rounded-lg bg-primary/10 px-2 py-1 font-medium text-primary text-sm dark:text-primary-light",
+                contentEditable: !1,
+                "data-component-part": "update-label",
+                onClick: b,
+                children: u
+              }
+            ),
+            i.length > 0 && /* @__PURE__ */ t(
+              "div",
+              {
+                className: "mt-3 flex flex-wrap gap-2 px-1 text-secondary text-sm dark:text-secondary-light",
+                "data-component-part": "update-tag-list",
+                children: i.map((r) => /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: "inline-block rounded-lg font-medium text-sm",
+                    "data-component-part": "update-tag",
+                    children: r
+                  },
+                  r
+                ))
+              }
+            ),
+            p && /* @__PURE__ */ t(
+              "div",
+              {
+                className: "wrap-break-word mt-3 max-w-[160px] px-1 text-secondary text-sm dark:text-secondary-light",
+                contentEditable: !1,
+                "data-component-part": "update-description",
+                children: p
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t("div", { className: "max-w-full flex-1 overflow-hidden px-0.5", ref: k, children: /* @__PURE__ */ t("div", { className: "prose-sm", "data-component-part": "update-content", children: f }) })
+        ]
+      }
+    ) : null;
+  }
+);
+C.displayName = "Update";
+export {
+  C as Update
+};