@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.3

package/dist/kernel/components/mdx/components/video.cjs

@@ -0,0 +1,185 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/mdx/components/video.tsx
+var video_exports = {};
+__export(video_exports, {
+  Video: () => Video
+});
+module.exports = __toCommonJS(video_exports);
+var import_figure_caption = require("./figure-caption.js");
+var import_video_player = require("./video-player.js");
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/kernel/components/mdx/components/video.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function toNumber(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return void 0;
+}
+function youtubeId(url) {
+  if (url.hostname === "youtu.be") return url.pathname.replace(/^\/+/, "");
+  if (url.hostname.endsWith("youtube.com")) {
+    if (url.pathname.startsWith("/embed/")) {
+      return url.pathname.split("/")[2];
+    }
+    return url.searchParams.get("v") ?? void 0;
+  }
+  return void 0;
+}
+function resolveEmbed(src, title) {
+  let url;
+  try {
+    url = new URL(src);
+  } catch {
+    return void 0;
+  }
+  const id = youtubeId(url);
+  if (id) {
+    return {
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+      src: `https://www.youtube-nocookie.com/embed/${encodeURIComponent(id)}?autoplay=1`,
+      title
+    };
+  }
+  if (url.hostname.endsWith("vimeo.com")) {
+    const id2 = url.pathname.split("/").filter(Boolean).at(-1);
+    if (id2) {
+      return {
+        allow: "autoplay; fullscreen; picture-in-picture",
+        src: `https://player.vimeo.com/video/${encodeURIComponent(id2)}?autoplay=1`,
+        title
+      };
+    }
+  }
+  if (url.hostname.endsWith("loom.com")) {
+    const parts = url.pathname.split("/").filter(Boolean);
+    const id2 = parts.at(-1);
+    if (id2) {
+      return {
+        allow: "autoplay; fullscreen",
+        src: `https://www.loom.com/embed/${encodeURIComponent(id2)}?autoplay=1`,
+        title
+      };
+    }
+  }
+  if (url.hostname.endsWith("wistia.com")) {
+    const parts = url.pathname.split("/").filter(Boolean);
+    const id2 = parts.at(-1);
+    if (id2) {
+      return {
+        allow: "autoplay; fullscreen",
+        src: `https://fast.wistia.net/embed/iframe/${encodeURIComponent(id2)}?autoPlay=true`,
+        title
+      };
+    }
+  }
+  if (url.hostname === "watch.cloudflarestream.com" || url.hostname === "iframe.videodelivery.net") {
+    const id2 = url.pathname.split("/").filter(Boolean).at(-1);
+    if (id2) {
+      return {
+        allow: "accelerometer; autoplay; encrypted-media; picture-in-picture",
+        src: `https://iframe.videodelivery.net/${encodeURIComponent(id2)}?autoplay=true`,
+        title
+      };
+    }
+  }
+  return void 0;
+}
+function Video({
+  caption,
+  className,
+  frame = "default",
+  height,
+  poster,
+  src,
+  title,
+  width
+}) {
+  if (!src) return null;
+  const videoTitle = title?.trim() || "Video";
+  const numericWidth = toNumber(width);
+  const numericHeight = toNumber(height);
+  const framed = frame !== false && frame !== "none";
+  const embed = resolveEmbed(src, videoTitle);
+  const reservedWidth = numericWidth ?? 1280;
+  const reservedHeight = numericHeight ?? 720;
+  const frameStyle = {
+    aspectRatio: `${reservedWidth} / ${reservedHeight}`,
+    width: numericWidth ? `min(100%, ${numericWidth}px)` : "100%"
+  };
+  const player = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: cn(
+        "not-markdown-prose relative mx-auto max-w-full overflow-hidden bg-surface-3",
+        framed && "rounded-media border border-stroke-2",
+        className
+      ),
+      style: frameStyle,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_video_player.VideoPlayer,
+        {
+          embed,
+          height: numericHeight,
+          poster,
+          src,
+          title: videoTitle,
+          width: numericWidth
+        }
+      )
+    }
+  );
+  if (caption) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { className: "not-markdown-prose my-8", children: [
+      player,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_figure_caption.FigureCaption, { className: "mx-auto max-w-prose text-center", children: caption })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "not-markdown-prose my-6", children: player });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Video
+});

package/dist/kernel/components/mdx/components/video.d.cts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type VideoProps = Omit<React.ComponentPropsWithoutRef<"video">, "height" | "poster" | "src" | "title" | "width"> & {
+    caption?: React.ReactNode;
+    frame?: boolean | "default" | "none";
+    height?: number | string;
+    poster?: string;
+    provider?: "self-hosted" | "youtube" | "vimeo" | "loom" | "wistia" | "cloudflare-stream";
+    src?: string;
+    title?: string;
+    width?: number | string;
+};
+declare function Video({ caption, className, frame, height, poster, src, title, width, }: VideoProps): react_jsx_runtime.JSX.Element | null;
+
+export { Video, type VideoProps };

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

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type VideoProps = Omit<React.ComponentPropsWithoutRef<"video">, "height" | "poster" | "src" | "title" | "width"> & {
+    caption?: React.ReactNode;
+    frame?: boolean | "default" | "none";
+    height?: number | string;
+    poster?: string;
+    provider?: "self-hosted" | "youtube" | "vimeo" | "loom" | "wistia" | "cloudflare-stream";
+    src?: string;
+    title?: string;
+    width?: number | string;
+};
+declare function Video({ caption, className, frame, height, poster, src, title, width, }: VideoProps): react_jsx_runtime.JSX.Element | null;
+
+export { Video, type VideoProps };

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

@@ -0,0 +1,162 @@
+// src/kernel/components/mdx/components/video.tsx
+import { FigureCaption } from "./figure-caption.js";
+import {
+  VideoPlayer
+} from "./video-player.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/video.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function toNumber(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim() !== "") {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return void 0;
+}
+function youtubeId(url) {
+  if (url.hostname === "youtu.be") return url.pathname.replace(/^\/+/, "");
+  if (url.hostname.endsWith("youtube.com")) {
+    if (url.pathname.startsWith("/embed/")) {
+      return url.pathname.split("/")[2];
+    }
+    return url.searchParams.get("v") ?? void 0;
+  }
+  return void 0;
+}
+function resolveEmbed(src, title) {
+  let url;
+  try {
+    url = new URL(src);
+  } catch {
+    return void 0;
+  }
+  const id = youtubeId(url);
+  if (id) {
+    return {
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+      src: `https://www.youtube-nocookie.com/embed/${encodeURIComponent(id)}?autoplay=1`,
+      title
+    };
+  }
+  if (url.hostname.endsWith("vimeo.com")) {
+    const id2 = url.pathname.split("/").filter(Boolean).at(-1);
+    if (id2) {
+      return {
+        allow: "autoplay; fullscreen; picture-in-picture",
+        src: `https://player.vimeo.com/video/${encodeURIComponent(id2)}?autoplay=1`,
+        title
+      };
+    }
+  }
+  if (url.hostname.endsWith("loom.com")) {
+    const parts = url.pathname.split("/").filter(Boolean);
+    const id2 = parts.at(-1);
+    if (id2) {
+      return {
+        allow: "autoplay; fullscreen",
+        src: `https://www.loom.com/embed/${encodeURIComponent(id2)}?autoplay=1`,
+        title
+      };
+    }
+  }
+  if (url.hostname.endsWith("wistia.com")) {
+    const parts = url.pathname.split("/").filter(Boolean);
+    const id2 = parts.at(-1);
+    if (id2) {
+      return {
+        allow: "autoplay; fullscreen",
+        src: `https://fast.wistia.net/embed/iframe/${encodeURIComponent(id2)}?autoPlay=true`,
+        title
+      };
+    }
+  }
+  if (url.hostname === "watch.cloudflarestream.com" || url.hostname === "iframe.videodelivery.net") {
+    const id2 = url.pathname.split("/").filter(Boolean).at(-1);
+    if (id2) {
+      return {
+        allow: "accelerometer; autoplay; encrypted-media; picture-in-picture",
+        src: `https://iframe.videodelivery.net/${encodeURIComponent(id2)}?autoplay=true`,
+        title
+      };
+    }
+  }
+  return void 0;
+}
+function Video({
+  caption,
+  className,
+  frame = "default",
+  height,
+  poster,
+  src,
+  title,
+  width
+}) {
+  if (!src) return null;
+  const videoTitle = title?.trim() || "Video";
+  const numericWidth = toNumber(width);
+  const numericHeight = toNumber(height);
+  const framed = frame !== false && frame !== "none";
+  const embed = resolveEmbed(src, videoTitle);
+  const reservedWidth = numericWidth ?? 1280;
+  const reservedHeight = numericHeight ?? 720;
+  const frameStyle = {
+    aspectRatio: `${reservedWidth} / ${reservedHeight}`,
+    width: numericWidth ? `min(100%, ${numericWidth}px)` : "100%"
+  };
+  const player = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "not-markdown-prose relative mx-auto max-w-full overflow-hidden bg-surface-3",
+        framed && "rounded-media border border-stroke-2",
+        className
+      ),
+      style: frameStyle,
+      children: /* @__PURE__ */ jsx(
+        VideoPlayer,
+        {
+          embed,
+          height: numericHeight,
+          poster,
+          src,
+          title: videoTitle,
+          width: numericWidth
+        }
+      )
+    }
+  );
+  if (caption) {
+    return /* @__PURE__ */ jsxs("figure", { className: "not-markdown-prose my-8", children: [
+      player,
+      /* @__PURE__ */ jsx(FigureCaption, { className: "mx-auto max-w-prose text-center", children: caption })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "not-markdown-prose my-6", children: player });
+}
+export {
+  Video
+};

package/dist/kernel/components/mdx/error-boundary.cjs

@@ -0,0 +1,62 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/mdx/error-boundary.tsx
+var error_boundary_exports = {};
+__export(error_boundary_exports, {
+  MDXErrorBoundary: () => MDXErrorBoundary
+});
+module.exports = __toCommonJS(error_boundary_exports);
+var import_error_fallback = require("./error-fallback.js");
+var import_error = require("next/error");
+var import_jsx_runtime = require("react/jsx-runtime");
+function MDXRenderErrorFallback(props, { error }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_error_fallback.MDXErrorFallback,
+    {
+      errorMessage: props.errorMessage ?? error.message,
+      pageId: props.pageId,
+      slug: props.slug
+    }
+  );
+}
+var MDXRenderErrorBoundary = (0, import_error.unstable_catchError)(MDXRenderErrorFallback);
+function MDXErrorBoundary({
+  errorMessage,
+  pageId,
+  slug,
+  children
+}) {
+  if (errorMessage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_error_fallback.MDXErrorFallback,
+      {
+        errorMessage,
+        pageId,
+        slug
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MDXRenderErrorBoundary, { pageId, slug, children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MDXErrorBoundary
+});

package/dist/{mdx → kernel/components/mdx}/error-boundary.d.cts

@@ -1,12 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-type MdxErrorBoundaryProps = {
-    errorMessage?: string;
-    pageId?: string;
-    slug?: string;
-    children: ReactNode;
-};
+import { MdxErrorBoundaryProps } from './types.cjs';
+import 'mdx/types.js';
+import 'react';
 
 declare function MDXErrorBoundary({ errorMessage, pageId, slug, children, }: MdxErrorBoundaryProps): react_jsx_runtime.JSX.Element;
 

package/dist/{mdx → kernel/components/mdx}/error-boundary.d.ts

@@ -1,12 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-type MdxErrorBoundaryProps = {
-    errorMessage?: string;
-    pageId?: string;
-    slug?: string;
-    children: ReactNode;
-};
+import { MdxErrorBoundaryProps } from './types.js';
+import 'mdx/types.js';
+import 'react';
 
 declare function MDXErrorBoundary({ errorMessage, pageId, slug, children, }: MdxErrorBoundaryProps): react_jsx_runtime.JSX.Element;
 

package/dist/kernel/components/mdx/error-boundary.js

@@ -0,0 +1,38 @@
+"use client";
+
+// src/kernel/components/mdx/error-boundary.tsx
+import { MDXErrorFallback } from "./error-fallback.js";
+import { unstable_catchError as catchError } from "next/error";
+import { jsx } from "react/jsx-runtime";
+function MDXRenderErrorFallback(props, { error }) {
+  return /* @__PURE__ */ jsx(
+    MDXErrorFallback,
+    {
+      errorMessage: props.errorMessage ?? error.message,
+      pageId: props.pageId,
+      slug: props.slug
+    }
+  );
+}
+var MDXRenderErrorBoundary = catchError(MDXRenderErrorFallback);
+function MDXErrorBoundary({
+  errorMessage,
+  pageId,
+  slug,
+  children
+}) {
+  if (errorMessage) {
+    return /* @__PURE__ */ jsx(
+      MDXErrorFallback,
+      {
+        errorMessage,
+        pageId,
+        slug
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(MDXRenderErrorBoundary, { pageId, slug, children });
+}
+export {
+  MDXErrorBoundary
+};

package/dist/{mdx → kernel/components/mdx}/error-fallback.cjs

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/mdx/error-fallback.tsx
+// src/kernel/components/mdx/error-fallback.tsx
 var error_fallback_exports = {};
 __export(error_fallback_exports, {
   MDXErrorFallback: () => MDXErrorFallback
@@ -31,10 +31,10 @@ function MDXErrorFallback({
 }) {
   const isMdxError = errorMessage.includes("[next-mdx-remote]");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-lg border border-red-500/25 bg-red-500/10 p-6 text-red-800", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-card border border-red-500/25 bg-red-500/10 p-6 text-red-800", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-semibold", children: "Content Error" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-2 text-sm", children: isMdxError ? "There is an issue with the MDX content formatting." : errorMessage }),
-      isMdxError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "mt-3 max-h-40 overflow-auto rounded bg-red-500/10 p-3 text-xs", children: errorMessage }),
+      isMdxError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "mt-3 max-h-40 overflow-auto rounded-codeblock bg-red-500/10 p-3 text-xs", children: errorMessage }),
       (pageId || slug) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "mt-3 text-xs opacity-80", children: [
         "Page: ",
         pageId ?? "unknown",
@@ -44,11 +44,11 @@ function MDXErrorFallback({
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-3 text-sm", children: "If you are the owner of this site, update your page to fix the error." })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-6 flex flex-col gap-2 opacity-60", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 rounded bg-foreground-4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 rounded bg-foreground-4 w-3/5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-1/3 rounded bg-foreground-4 mb-4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 rounded bg-foreground-4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-2/3 rounded bg-foreground-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 rounded-card bg-foreground-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 rounded-card bg-foreground-4 w-3/5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-1/3 rounded-card bg-foreground-4 mb-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 rounded-card bg-foreground-4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-2/3 rounded-card bg-foreground-4" })
     ] })
   ] });
 }

package/dist/{mdx → kernel/components/mdx}/error-fallback.js

@@ -1,4 +1,4 @@
-// src/mdx/error-fallback.tsx
+// src/kernel/components/mdx/error-fallback.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function MDXErrorFallback({
   errorMessage = "An error occurred while rendering the content",
@@ -7,10 +7,10 @@ function MDXErrorFallback({
 }) {
   const isMdxError = errorMessage.includes("[next-mdx-remote]");
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-red-500/25 bg-red-500/10 p-6 text-red-800", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rounded-card border border-red-500/25 bg-red-500/10 p-6 text-red-800", children: [
       /* @__PURE__ */ jsx("p", { className: "font-semibold", children: "Content Error" }),
       /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm", children: isMdxError ? "There is an issue with the MDX content formatting." : errorMessage }),
-      isMdxError && /* @__PURE__ */ jsx("pre", { className: "mt-3 max-h-40 overflow-auto rounded bg-red-500/10 p-3 text-xs", children: errorMessage }),
+      isMdxError && /* @__PURE__ */ jsx("pre", { className: "mt-3 max-h-40 overflow-auto rounded-codeblock bg-red-500/10 p-3 text-xs", children: errorMessage }),
       (pageId || slug) && /* @__PURE__ */ jsxs("p", { className: "mt-3 text-xs opacity-80", children: [
         "Page: ",
         pageId ?? "unknown",
@@ -20,11 +20,11 @@ function MDXErrorFallback({
       /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm", children: "If you are the owner of this site, update your page to fix the error." })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-col gap-2 opacity-60", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-4 rounded bg-foreground-4" }),
-      /* @__PURE__ */ jsx("div", { className: "h-4 rounded bg-foreground-4 w-3/5" }),
-      /* @__PURE__ */ jsx("div", { className: "h-4 w-1/3 rounded bg-foreground-4 mb-4" }),
-      /* @__PURE__ */ jsx("div", { className: "h-4 rounded bg-foreground-4" }),
-      /* @__PURE__ */ jsx("div", { className: "h-4 w-2/3 rounded bg-foreground-4" })
+      /* @__PURE__ */ jsx("div", { className: "h-4 rounded-card bg-foreground-4" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 rounded-card bg-foreground-4 w-3/5" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-1/3 rounded-card bg-foreground-4 mb-4" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 rounded-card bg-foreground-4" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-2/3 rounded-card bg-foreground-4" })
     ] })
   ] });
 }