@publish.os/nextjs 0.0.1-alpha.6 → 0.0.1-alpha.8

package/dist/kernel/components/mdx/components/heading-copy-link.js

@@ -1,49 +1,25 @@
 "use client";
 
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/kernel/components/mdx/components/heading-copy-link.tsx
-import { Link as LinkIcon } from "lucide-react";
+// src/components/mdx/heading-copy-link.tsx
+import { FrameworkLinkIcon as Link } from "@publish.os/nextjs/kernel/framework-icons";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 function headingCopyUrl({ href, id }) {
-  const url = new URL(href);
-  url.hash = id;
-  return url.toString();
+  let url = new URL(href);
+  return url.hash = id, url.toString();
 }
 function HeadingCopyLink({
   className,
   id,
   children,
-  iconOnly = false
+  iconOnly = !1
 }) {
-  const handleClick = (e) => {
-    if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+  let handleClick = (e) => {
+    if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
       return;
-    }
-    const url = headingCopyUrl({ href: window.location.href, id });
+    let url = headingCopyUrl({ href: window.location.href, id });
     navigator.clipboard?.writeText(url).catch(() => {
-    });
-    window.setTimeout(() => {
+    }), window.setTimeout(() => {
       document.getElementById(id)?.scrollIntoView({ block: "start" });
     }, 0);
   };
@@ -54,7 +30,7 @@ function HeadingCopyLink({
       href: `#${id}`,
       onClick: handleClick,
       className: cn(
-        "not-markdown-prose group/heading-link rounded-button border-0 p-0 text-inherit no-underline decoration-transparent transition-colors duration-150 [--link-underline-offset:-0.08em] [--link-underline-thickness:1px] hover:text-inherit hover:no-underline active:text-inherit active:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+        "not-markdown-prose group/heading-link rounded-button border-0 p-0 text-inherit no-underline decoration-transparent transition-colors duration-150 [--link-underline-offset:-0.08em] [--link-underline-thickness:1px] hover:text-inherit hover:no-underline active:text-inherit active:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-stroke",
         iconOnly ? "inline-flex items-center align-[-0.05em]" : "inline",
         className
       ),
@@ -65,10 +41,10 @@ function HeadingCopyLink({
           {
             "aria-hidden": "true",
             className: cn(
-              "inline-flex h-[1em] items-center align-[-0.06em] text-foreground-3 transition-[color,opacity] duration-150 group-hover/heading-link:text-foreground-2 group-focus-visible/heading-link:text-foreground-2",
+              "inline-flex h-[1em] items-center align-[-0.06em] text-typography-caption-foreground transition-[color,opacity] duration-150 group-hover/heading-link:text-typography-body-foreground group-focus-visible/heading-link:text-typography-body-foreground",
               iconOnly ? "opacity-100" : "ml-1.5 opacity-0 group-hover/heading-link:opacity-100 group-focus-visible/heading-link:opacity-100"
             ),
-            children: /* @__PURE__ */ jsx(LinkIcon, { "aria-hidden": "true", className: "block size-[0.8em] shrink-0" })
+            children: /* @__PURE__ */ jsx(Link, { "aria-hidden": "true", className: "block size-[0.8em] shrink-0" })
           }
         )
       ]

package/dist/kernel/components/mdx/components/heading.d.ts

@@ -1,7 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { HeadingElement, HeadingProps } from '../types.js';
-import 'mdx/types.js';
-import 'react';
+import { ComponentPropsWithoutRef } from 'react';
+
+type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type HeadingProps<T extends HeadingElement> = {
+    as: T;
+} & Omit<ComponentPropsWithoutRef<T>, "className"> & {
+    className?: string;
+};
 
 declare function Heading<T extends HeadingElement>({ as: Tag, children, className, id, ...props }: HeadingProps<T>): react_jsx_runtime.JSX.Element;
 

package/dist/kernel/components/mdx/components/heading.js

@@ -1,105 +1,30 @@
-// src/kernel/components/mdx/components/heading.tsx
-import { HeadingCopyLink } from "./heading-copy-link.js";
-
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/utils/heading-ids.ts
-import { isValidElement } from "react";
-var SELF_CLOSING_TAG_RE = new RegExp("<[^>]+/>", "g");
-var PAIRED_TAG_RE = /<\/?\w[^>]*>/g;
-var MDX_BOLD_RE = /\*\*(.*?)\*\*/g;
-var MDX_ITALIC_RE = /\*(.*?)\*/g;
-var MDX_UNDERLINE_BOLD_RE = /__(.*?)__/g;
-var MDX_UNDERLINE_ITALIC_RE = /_(.*?)_/g;
-var MDX_STRIKETHROUGH_RE = /~~(.*?)~~/g;
-var MDX_INLINE_CODE_RE = /`(.*?)`/g;
-var MDX_LINK_RE = /\[(.*?)\]\(.*?\)/g;
-var NON_ALPHANUMERIC_RE = /[^a-z0-9]+/g;
-var LEADING_TRAILING_HYPHEN_RE = /^-+|-+$/g;
-var LEADING_DIGIT_RE = /^(\d)/;
-function extractText(node) {
-  if (typeof node === "string") return node;
-  if (typeof node === "number") return String(node);
-  if (node == null || typeof node === "boolean") return "";
-  if (Array.isArray(node)) {
-    return node.map(extractText).join("");
-  }
-  if (isValidElement(node)) {
-    const element = node;
-    return element.props.children === void 0 ? "" : extractText(element.props.children);
-  }
-  return "";
-}
-function cleanHeadingText(input) {
-  const text = typeof input === "string" ? input : extractText(input);
-  return text.replace(SELF_CLOSING_TAG_RE, "").replace(PAIRED_TAG_RE, "").replace(MDX_BOLD_RE, "$1").replace(MDX_ITALIC_RE, "$1").replace(MDX_UNDERLINE_BOLD_RE, "$1").replace(MDX_UNDERLINE_ITALIC_RE, "$1").replace(MDX_STRIKETHROUGH_RE, "$1").replace(MDX_INLINE_CODE_RE, "$1").replace(MDX_LINK_RE, "$1").trim();
-}
-function slugify(text) {
-  return text.toLowerCase().replace(NON_ALPHANUMERIC_RE, "-").replace(LEADING_TRAILING_HYPHEN_RE, "").replace(LEADING_DIGIT_RE, "id-$1");
-}
-function headingToHTMLId(input) {
-  try {
-    const id = slugify(cleanHeadingText(input));
-    return id || "empty-heading";
-  } catch {
-    return "empty-heading";
-  }
-}
-
-// src/kernel/components/mdx/components/heading.tsx
+// src/components/mdx/heading.tsx
+import { HeadingCopyLink } from "@publish.os/nextjs/kernel/components/mdx/components/heading-copy-link";
+import { cn } from "@publish.os/nextjs/utils/cn";
+import { headingToHTMLId } from "@publish.os/nextjs/utils/heading-ids";
 import {
   Children,
-  isValidElement as isValidElement2
+  isValidElement
 } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function isBrElement(node) {
-  return isValidElement2(node) && node.type === "br";
+  return isValidElement(node) && node.type === "br";
 }
 function cleanHeadingChildren(children) {
-  const childArray = Children.toArray(children).filter(
+  let childArray = Children.toArray(children).filter(
     (child) => !isBrElement(child)
   );
-  while (childArray.length > 0 && typeof childArray[0] === "string" && childArray[0].trim() === "") {
+  for (; childArray.length > 0 && typeof childArray[0] == "string" && childArray[0].trim() === ""; )
     childArray.shift();
-  }
-  while (childArray.length > 0 && typeof childArray[childArray.length - 1] === "string" && childArray[childArray.length - 1].trim() === "") {
+  for (; childArray.length > 0 && typeof childArray[childArray.length - 1] == "string" && childArray[childArray.length - 1].trim() === ""; )
     childArray.pop();
-  }
-  if (childArray.length === 0) return null;
-  if (childArray.length === 1) return childArray[0];
-  return childArray;
+  return childArray.length === 0 ? null : childArray.length === 1 ? childArray[0] : childArray;
 }
 function hasNestedLink(children) {
-  for (const child of Children.toArray(children)) {
-    if (!isValidElement2(child)) continue;
-    if (typeof child.props === "object" && child.props !== null && "href" in child.props) {
-      return true;
-    }
-    if (typeof child.props === "object" && child.props !== null && "children" in child.props && hasNestedLink(child.props.children)) {
-      return true;
-    }
-  }
-  return false;
+  for (let child of Children.toArray(children))
+    if (isValidElement(child) && (typeof child.props == "object" && child.props !== null && "href" in child.props || typeof child.props == "object" && child.props !== null && "children" in child.props && hasNestedLink(child.props.children)))
+      return !0;
+  return !1;
 }
 function Heading({
   as: Tag,
@@ -108,33 +33,24 @@ function Heading({
   id,
   ...props
 }) {
-  const cleaned = cleanHeadingChildren(children);
-  const headingId = id ?? headingToHTMLId(cleaned);
-  const isEmpty = !headingId || headingId === "empty-heading";
-  const classes = cn("scroll-mt-20", className);
-  if (isEmpty) {
-    return (
-      // @ts-expect-error — polymorphic `as` prop with spread is safe at runtime
-      /* @__PURE__ */ jsx(Tag, { className, ...props, children: cleaned })
-    );
-  }
-  if (hasNestedLink(cleaned)) {
-    return (
-      // @ts-expect-error — polymorphic `as` prop with spread is safe at runtime
-      /* @__PURE__ */ jsxs(Tag, { id: headingId, className: cn("group/heading", classes), ...props, children: [
-        cleaned,
-        /* @__PURE__ */ jsx(
-          HeadingCopyLink,
-          {
-            id: headingId,
-            iconOnly: true,
-            className: "ml-1.5 opacity-0 group-hover/heading:opacity-100 focus-visible:opacity-100 hover:opacity-100"
-          }
-        )
-      ] })
-    );
-  }
-  return (
+  let cleaned = cleanHeadingChildren(children), headingId = id ?? headingToHTMLId(cleaned), isEmpty = !headingId || headingId === "empty-heading", classes = cn("scroll-mt-20", className);
+  return isEmpty ? (
+    // @ts-expect-error — polymorphic `as` prop with spread is safe at runtime
+    /* @__PURE__ */ jsx(Tag, { className, ...props, children: cleaned })
+  ) : hasNestedLink(cleaned) ? (
+    // @ts-expect-error — polymorphic `as` prop with spread is safe at runtime
+    /* @__PURE__ */ jsxs(Tag, { id: headingId, className: cn("group/heading", classes), ...props, children: [
+      cleaned,
+      /* @__PURE__ */ jsx(
+        HeadingCopyLink,
+        {
+          id: headingId,
+          iconOnly: !0,
+          className: "ml-1.5 opacity-0 group-hover/heading:opacity-100 focus-visible:opacity-100 hover:opacity-100"
+        }
+      )
+    ] })
+  ) : (
     // @ts-expect-error — polymorphic `as` prop with spread is safe at runtime
     /* @__PURE__ */ jsx(Tag, { id: headingId, className: classes, ...props, children: /* @__PURE__ */ jsx(HeadingCopyLink, { id: headingId, children: cleaned }) })
   );

package/dist/kernel/components/mdx/components/hr.d.ts

@@ -1,7 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Separator } from '../../ui/separator.js';
-import '@base-ui/react/separator';
-import 'react';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
+import { ComponentPropsWithoutRef } from 'react';
+
+type SeparatorProps = ComponentPropsWithoutRef<typeof Separator$1>;
+declare function Separator({ className, orientation, ...props }: SeparatorProps): react_jsx_runtime.JSX.Element;
 
 type HrProps = React.ComponentPropsWithoutRef<typeof Separator>;
 declare function Hr({ className, ...props }: HrProps): react_jsx_runtime.JSX.Element;

package/dist/kernel/components/mdx/components/hr.js

@@ -1,5 +1,5 @@
-// src/kernel/components/mdx/components/hr.tsx
-import { Separator } from "../../ui/separator.js";
+// src/components/mdx/hr.tsx
+import { Separator } from "@publish.os/nextjs/kernel/components/ui/separator";
 import { jsx } from "react/jsx-runtime";
 function Hr({ className, ...props }) {
   return /* @__PURE__ */ jsx(Separator, { className, ...props });

package/dist/kernel/components/mdx/components/image-zoom.js

@@ -1,14 +1,13 @@
 "use client";
 
-// src/kernel/components/mdx/components/image-zoom.tsx
+// src/components/mdx/image-zoom.tsx
 import Zoom from "react-medium-image-zoom";
 import { jsx } from "react/jsx-runtime";
 function ImageZoom({
   children,
   enabled
 }) {
-  if (!enabled) return children;
-  return /* @__PURE__ */ jsx(Zoom, { zoomMargin: 40, children });
+  return enabled ? /* @__PURE__ */ jsx(Zoom, { zoomMargin: 40, children }) : children;
 }
 export {
   ImageZoom

package/dist/kernel/components/mdx/components/image.js

@@ -1,89 +1,53 @@
-// src/kernel/components/mdx/components/image.tsx
-import { FigureCaption } from "./figure-caption.js";
-import { ImageZoom } from "./image-zoom.js";
-
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/kernel/components/mdx/components/image.tsx
+// src/components/mdx/image.tsx
+import { FigureCaption } from "@publish.os/nextjs/kernel/components/mdx/components/figure-caption";
+import { ImageZoom } from "@publish.os/nextjs/kernel/components/mdx/components/image-zoom";
+import { cn } from "@publish.os/nextjs/utils/cn";
 import NextImage from "next/image";
 import { jsx, jsxs } from "react/jsx-runtime";
 function parseAspect(value) {
-  if (typeof value === "number" && Number.isFinite(value) && value > 0) {
+  if (typeof value == "number" && Number.isFinite(value) && value > 0)
     return value;
-  }
-  if (typeof value !== "string") return void 0;
-  const [width, height] = value.split("/").map((part) => Number(part.trim()));
-  if (!width || !height || !Number.isFinite(width) || !Number.isFinite(height)) {
-    return void 0;
-  }
-  return width / height;
+  if (typeof value != "string") return;
+  let [width, height] = value.split("/").map((part) => Number(part.trim()));
+  if (!(!width || !height || !Number.isFinite(width) || !Number.isFinite(height)))
+    return width / height;
 }
 function Image({
   alt,
   aspect,
   caption,
   className,
-  decorative = false,
-  fill = false,
+  decorative = !1,
+  fill = !1,
   frame = "default",
   height,
   intrinsicHeight,
   intrinsicWidth,
-  optimized = false,
+  optimized = !1,
   priority,
   quality,
   sizes,
   src,
   width,
-  zoom = true,
+  zoom = !0,
   ...props
 }) {
   if (!src) return null;
-  const resolvedWidth = width ?? intrinsicWidth;
-  const resolvedHeight = height ?? intrinsicHeight;
-  const resolvedAspect = parseAspect(aspect) ?? (resolvedWidth && resolvedHeight ? resolvedWidth / resolvedHeight : void 0);
-  const imageAlt = decorative ? "" : alt ?? "";
-  const framed = frame !== false && frame !== "none";
-  const stringSrc = String(src);
-  const useNextImage = optimized && stringSrc.startsWith("/");
-  const shouldFill = fill && resolvedAspect;
-  const frameStyle = {
+  let resolvedWidth = width ?? intrinsicWidth, resolvedHeight = height ?? intrinsicHeight, resolvedAspect = parseAspect(aspect) ?? (resolvedWidth && resolvedHeight ? resolvedWidth / resolvedHeight : void 0), imageAlt = decorative ? "" : alt ?? "", framed = frame !== !1 && frame !== "none", stringSrc = String(src), useNextImage = optimized && stringSrc.startsWith("/"), shouldFill = fill && resolvedAspect, frameStyle = {
     ...resolvedAspect ? { aspectRatio: String(resolvedAspect) } : {},
     width: fill ? "100%" : resolvedWidth ? `min(100%, ${resolvedWidth}px)` : "100%"
-  };
-  const imageClassName = cn(
+  }, imageClassName = cn(
     "block h-full w-full transition-opacity duration-200",
     fill ? "object-cover" : "object-contain",
     zoom && "cursor-zoom-in hover:opacity-90",
     className
-  );
-  const image = useNextImage ? shouldFill ? /* @__PURE__ */ jsx(
+  ), image = useNextImage ? shouldFill ? /* @__PURE__ */ jsx(
     NextImage,
     {
       alt: imageAlt,
       "aria-hidden": decorative || void 0,
       className: imageClassName,
-      fill: true,
+      fill: !0,
       priority,
       quality,
       sizes: sizes ?? "(max-width: 768px) 100vw, min(var(--publish-content-width, 72rem), 100vw)",
@@ -132,8 +96,7 @@ function Image({
         ...props
       }
     )
-  );
-  const content = /* @__PURE__ */ jsx(
+  ), content = /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
@@ -144,13 +107,10 @@ function Image({
       children: /* @__PURE__ */ jsx(ImageZoom, { enabled: zoom, children: image })
     }
   );
-  if (caption) {
-    return /* @__PURE__ */ jsxs("figure", { className: "not-markdown-prose my-8", children: [
-      content,
-      /* @__PURE__ */ jsx(FigureCaption, { className: "mx-auto max-w-prose text-center", children: caption })
-    ] });
-  }
-  return /* @__PURE__ */ jsx("div", { className: "not-markdown-prose my-6 flex justify-center", children: content });
+  return caption ? /* @__PURE__ */ jsxs("figure", { className: "not-markdown-prose my-8", children: [
+    content,
+    /* @__PURE__ */ jsx(FigureCaption, { className: "mx-auto max-w-prose text-center", children: caption })
+  ] }) : /* @__PURE__ */ jsx("div", { className: "not-markdown-prose my-6 flex justify-center", children: content });
 }
 export {
   Image

package/dist/kernel/components/mdx/components/inline-code.js

@@ -1,33 +1,12 @@
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/kernel/components/mdx/components/inline-code.tsx
+// src/components/mdx/inline-code.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function InlineCode({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "code",
     {
       className: cn(
-        "not-markdown-prose h-fit rounded-inline-code border border-stroke-2 bg-surface-2 px-[0.35em] py-[0.15em] font-mono text-[0.95em] font-normal leading-[1.25] text-foreground-1 [a_&]:text-accent-1 [pre_&]:border-0 [pre_&]:bg-transparent [pre_&]:p-0 [pre_&]:text-inherit",
+        "not-markdown-prose h-fit rounded-inline-code border border-typography-code-stroke bg-typography-code-surface px-[0.35em] py-[0.15em] font-mono text-[0.95em] font-normal leading-[1.25] text-typography-code-foreground [a_&]:text-typography-link-foreground [pre_&]:border-0 [pre_&]:bg-transparent [pre_&]:p-0 [pre_&]:text-inherit",
         className
       ),
       ...props

package/dist/kernel/components/mdx/components/kbd.d.ts

@@ -1,8 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { KbdProps as KbdProps$1 } from '../../ui/kbd.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-import 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { HTMLAttributes } from 'react';
+
+declare const kbdVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    square?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type KbdProps$1 = HTMLAttributes<HTMLElement> & VariantProps<typeof kbdVariants>;
 
 type KbdProps = KbdProps$1;
 declare function Kbd(props: KbdProps): react_jsx_runtime.JSX.Element;

package/dist/kernel/components/mdx/components/kbd.js

@@ -1,5 +1,5 @@
-// src/kernel/components/mdx/components/kbd.tsx
-import { Kbd as UiKbd } from "../../ui/kbd.js";
+// src/components/mdx/kbd.tsx
+import { Kbd as UiKbd } from "@publish.os/nextjs/kernel/components/ui/kbd";
 import { jsx } from "react/jsx-runtime";
 function Kbd(props) {
   return /* @__PURE__ */ jsx(UiKbd, { ...props });

package/dist/kernel/components/mdx/components/link.d.ts

@@ -1,7 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { LinkProps } from '../../ui/link.js';
+import { L as LinkProps } from '../../../../link-CYaCRDb6.js';
 import 'class-variance-authority/types';
-import '../../ui/button.js';
 import 'class-variance-authority';
 import 'react';
 

package/dist/kernel/components/mdx/components/link.js

@@ -1,7 +1,7 @@
-// src/kernel/components/mdx/components/link.tsx
+// src/components/mdx/link.tsx
 import {
   Link as UiLink
-} from "../../ui/link.js";
+} from "@publish.os/nextjs/kernel/components/ui/link";
 import { jsx } from "react/jsx-runtime";
 function Link({
   color = "accent",

package/dist/kernel/components/mdx/components/paragraph.js

@@ -1,55 +1,27 @@
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/kernel/components/mdx/components/paragraph.tsx
+// src/components/mdx/paragraph.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { Children, isValidElement } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 function isBlockMediaChild(child) {
-  if (!isValidElement(child)) return false;
-  const props = child.props;
-  if (typeof props.src === "string" && "alt" in props) return true;
-  if (typeof props.src === "string" && "title" in props) return true;
-  const type = child.type;
-  if (typeof type === "string") {
-    return type === "figure" || type === "img" || type === "video";
-  }
-  if (typeof type === "function") {
-    return ["Figure", "Image", "Video"].includes(type.name);
-  }
-  return false;
+  if (!isValidElement(child)) return !1;
+  let props = child.props;
+  if (typeof props.src == "string" && "alt" in props || typeof props.src == "string" && "title" in props) return !0;
+  let type = child.type;
+  return typeof type == "string" ? type === "figure" || type === "img" || type === "video" : typeof type == "function" ? ["Figure", "Image", "Video"].includes(type.name) : !1;
 }
 function Paragraph({
   children,
   className,
   ...props
 }) {
-  const childArray = Children.toArray(children);
-  if (childArray.length === 1 && isBlockMediaChild(childArray[0])) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(
+  let childArray = Children.toArray(children);
+  return childArray.length === 1 && isBlockMediaChild(childArray[0]) ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(
     "p",
     {
-      className: cn("my-5 text-base leading-7 text-foreground-2", className),
+      className: cn(
+        "my-5 text-base leading-7 text-typography-body-foreground",
+        className
+      ),
       ...props,
       children
     }

package/dist/kernel/components/mdx/components/pre.js

@@ -1,33 +1,12 @@
-// src/utils/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      z: [
-        "z-content",
-        "z-nav",
-        "z-overlay",
-        "z-modal",
-        "z-search",
-        "z-toast",
-        "z-progress"
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/kernel/components/mdx/components/pre.tsx
+// src/components/mdx/pre.tsx
+import { cn } from "@publish.os/nextjs/utils/cn";
 import { jsx } from "react/jsx-runtime";
 function Pre({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "pre",
     {
       className: cn(
-        "my-6 overflow-x-auto rounded-codeblock border border-stroke-2 bg-surface-3 p-4 text-sm leading-6 text-foreground-1",
+        "my-6 overflow-x-auto rounded-codeblock border border-typography-pre-stroke bg-typography-pre-surface p-4 text-sm leading-6 text-typography-pre-foreground",
         className
       ),
       ...props