npm - @flamingo-stack/openframe-frontend-core - Versions diffs - 0.0.748 → 0.0.749 - Mend

@flamingo-stack/openframe-frontend-core 0.0.748 → 0.0.749

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (546) hide show

package/dist/components/loading/page-layout-skeleton.js CHANGED Viewed

@@ -2,20 +2,21 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { CardSkeletonGrid } from "./card-skeleton.js";
+import { LoadingRegion } from "./loading-region.js";
 import { UnifiedSkeleton, TextSkeleton, MediaSkeleton, InteractiveSkeleton } from "./unified-skeleton.js";
 function AnnouncementBarSkeleton() {
-  return /* @__PURE__ */ jsx("div", { className: "relative w-full animate-pulse bg-ods-skeleton", children: /* @__PURE__ */ jsx("div", { className: "relative flex w-full flex-row items-center", children: /* @__PURE__ */ jsxs("div", { className: "relative box-border flex w-full flex-row items-center justify-start gap-4 py-3 pl-4 pr-12 content-md:gap-6 content-md:py-4 content-md:pl-6 content-md:pr-16", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative h-6 w-6 shrink-0 rounded bg-ods-border content-md:h-8 content-md:w-8" }),
+  return /* @__PURE__ */ jsx("div", { className: "relative w-full bg-ods-card", children: /* @__PURE__ */ jsx("div", { className: "relative flex w-full flex-row items-center", children: /* @__PURE__ */ jsxs("div", { className: "relative box-border flex w-full flex-row items-center justify-start gap-4 py-3 pl-4 pr-12 content-md:gap-6 content-md:py-4 content-md:pl-6 content-md:pr-16", children: [
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "relative h-6 w-6 shrink-0 rounded content-md:h-8 content-md:w-8" }),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1 content-md:space-y-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-[14px] w-3/4 max-w-md rounded bg-ods-border content-md:h-[18px]" }),
-      /* @__PURE__ */ jsx("div", { className: "hidden h-[12px] w-full max-w-lg rounded bg-ods-border content-md:block content-md:h-[18px]" })
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[14px] w-3/4 max-w-md rounded content-md:h-[18px]" }),
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "hidden h-[12px] w-full max-w-lg rounded content-md:block content-md:h-[18px]" })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 h-6 w-6 rounded bg-ods-border" })
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "absolute right-2 top-2 h-6 w-6 rounded" })
   ] }) }) });
 }
 function HeaderSkeleton() {
-  return /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-40 flex w-full animate-pulse items-center justify-between border-b border-ods-border bg-ods-card bg-ods-card/95 px-4 py-3 backdrop-blur-sm content-md:px-[80px] content-md:py-[12px]", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-start", children: /* @__PURE__ */ jsx("div", { className: "h-[26px] w-[110px] rounded bg-ods-skeleton content-md:h-8 content-md:w-[137px]" }) }),
+  return /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-40 flex w-full items-center justify-between border-b border-ods-border bg-ods-card bg-ods-card/95 px-4 py-3 backdrop-blur-sm content-md:px-[80px] content-md:py-[12px]", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-start", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[26px] w-[110px] rounded content-md:h-8 content-md:w-[137px]" }) }),
     /* @__PURE__ */ jsx("nav", { className: "hidden min-w-0 flex-1 basis-1/3 items-center justify-center gap-2 content-md:flex", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { className: "h-10 w-24" }),
       /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { className: "h-10 w-24" }),
@@ -35,7 +36,7 @@ function HeroSkeleton() {
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      className: "flex w-full animate-pulse flex-col items-center justify-center px-4 py-12 text-center content-md:px-8 content-md:py-20",
+      className: "flex w-full flex-col items-center justify-center px-4 py-12 text-center content-md:px-8 content-md:py-20",
       style: {
         background: "radial-gradient(circle at 50% 0%, #242323 0%, #1A1A1A 100%)"
       },
@@ -116,6 +117,9 @@ function BreadcrumbSkeleton({ className }) {
     /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-24" })
   ] });
 }
+function BreadcrumbLinkSkeleton({ className }) {
+  return /* @__PURE__ */ jsx(UnifiedSkeleton, { as: "span", className: cn("inline-block h-5 w-16", className) });
+}
 function ResultsHeaderSkeleton({ className }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -132,13 +136,16 @@ function TwoColumnLayoutSkeleton({
   className,
   sidebarContent,
   mainContent,
-  sidebarPosition = "left"
+  sidebarPosition = "left",
+  region = true
 }) {
   const sidebar = sidebarContent || /* @__PURE__ */ jsx(CategorySidebarSkeleton, {});
-  const main = mainContent || /* @__PURE__ */ jsx(CardSkeletonGrid, { count: 6 });
+  const main = mainContent || /* @__PURE__ */ jsx(CardSkeletonGrid, { count: 6, region: false });
   return /* @__PURE__ */ jsx(
-    "div",
+    LoadingRegion,
     {
+      label: "Loading",
+      announce: region,
       className: cn(
         "grid grid-cols-1 gap-6 content-lg:grid-cols-[320px_1fr] content-lg:gap-8",
         sidebarPosition === "right" && "content-lg:grid-cols-[1fr_320px]",
@@ -154,252 +161,258 @@ function TwoColumnLayoutSkeleton({
     }
   );
 }
-function ArticleLayoutSkeleton({ className }) {
-  return /* @__PURE__ */ jsxs("article", { className: cn("mx-auto max-w-4xl", className), children: [
-    /* @__PURE__ */ jsxs("header", { className: "mb-8 space-y-4 content-md:mb-12 content-md:space-y-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(InteractiveSkeleton.Chip, {}),
-        /* @__PURE__ */ jsx(InteractiveSkeleton.Chip, { className: "w-16" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx(TextSkeleton.Heading, { className: "w-full" }),
-        /* @__PURE__ */ jsx(TextSkeleton.Heading, { className: "w-3/4" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border-t border-ods-divider pt-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(MediaSkeleton.Avatar, { size: "sm" }),
-          /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-24" })
-        ] }),
-        /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-20" }),
-        /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-16" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "mb-8 content-md:mb-12", children: /* @__PURE__ */ jsx(MediaSkeleton.CardImage, { className: "h-64 w-full content-md:h-96" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "prose prose-invert max-w-none space-y-6", children: [
-      Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-full" }),
-        /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-full" }),
-        /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-5/6" }),
-        /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-3/4" })
-      ] }, index)),
-      /* @__PURE__ */ jsxs("div", { className: "py-4", children: [
-        /* @__PURE__ */ jsx(TextSkeleton.Subheading, { className: "mb-4 w-2/3" }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-full" }),
-          /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-4/5" })
-        ] })
-      ] })
-    ] })
-  ] });
-}
-function VendorDetailLayoutSkeleton({ className }) {
-  return /* @__PURE__ */ jsx("main", { className: cn("min-h-screen bg-ods-bg", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-[1920px] px-6 py-6 content-md:px-20 content-md:py-10", children: [
-    /* @__PURE__ */ jsx(BreadcrumbSkeleton, { className: "mb-6" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col content-lg:flex-row content-lg:gap-10", children: [
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-10", children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-6 flex gap-6", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-20 w-20 flex-shrink-0 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-12 w-80 max-w-full animate-pulse rounded bg-ods-skeleton content-md:h-16 content-lg:h-20" }),
-                /* @__PURE__ */ jsx("div", { className: "h-5 w-32 animate-pulse rounded bg-ods-skeleton content-md:h-6" })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-8 w-20 animate-pulse rounded bg-ods-skeleton" }),
-                /* @__PURE__ */ jsx("div", { className: "h-8 w-16 animate-pulse rounded bg-ods-skeleton" })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "mb-2 h-[300px] w-full animate-pulse rounded-lg border border-ods-border bg-ods-card content-md:h-[400px] content-lg:h-[500px]" }),
-          /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("div", { className: "mx-auto h-4 w-24 animate-pulse rounded bg-ods-skeleton" }) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "mb-10 content-lg:hidden", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
-            /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-lg border border-ods-border", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 bg-ods-card p-4", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-pulse rounded bg-ods-skeleton" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-4 w-20 animate-pulse rounded bg-ods-skeleton" }),
-                /* @__PURE__ */ jsx("div", { className: "h-6 w-12 animate-pulse rounded bg-ods-skeleton" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-skeleton" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-4 w-12 animate-pulse rounded bg-ods-skeleton" }),
-                /* @__PURE__ */ jsx("div", { className: "h-3 w-8 animate-pulse rounded bg-ods-skeleton" })
-              ] })
-            ] }, i)) })
+function ArticleLayoutSkeleton({ className, region = true }) {
+  return /* @__PURE__ */ jsxs(
+    LoadingRegion,
+    {
+      label: "Loading the article",
+      as: "article",
+      announce: region,
+      className: cn("mx-auto max-w-4xl", className),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "mb-8 space-y-4 content-md:mb-12 content-md:space-y-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(InteractiveSkeleton.Chip, {}),
+            /* @__PURE__ */ jsx(InteractiveSkeleton.Chip, { className: "w-16" })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
-            /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
-            /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "mb-20 flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-8 w-48 animate-pulse rounded bg-ods-skeleton content-md:h-10" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-5 w-48 animate-pulse rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "h-10 w-24 animate-pulse rounded-lg border border-ods-border bg-ods-card"
-              },
-              i
-            )) })
+            /* @__PURE__ */ jsx(TextSkeleton.Heading, { className: "w-full" }),
+            /* @__PURE__ */ jsx(TextSkeleton.Heading, { className: "w-3/4" })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-5 w-52 animate-pulse rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "h-10 w-28 animate-pulse rounded-lg border border-ods-border bg-ods-card"
-              },
-              i
-            )) })
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border-t border-ods-divider pt-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(MediaSkeleton.Avatar, { size: "sm" }),
+              /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-24" })
+            ] }),
+            /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-20" }),
+            /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-16" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mb-20 flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-8 w-64 animate-pulse rounded bg-ods-skeleton content-md:h-10" }),
-          /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6 content-md:p-8", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-6 animate-pulse rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsx("div", { className: "h-6 animate-pulse rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsx("div", { className: "h-6 w-5/6 animate-pulse rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsx("div", { className: "h-6 w-4/5 animate-pulse rounded bg-ods-skeleton" })
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mb-20 flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-8 w-72 animate-pulse rounded bg-ods-skeleton content-md:h-10" }),
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4 rounded-lg border border-ods-border bg-ods-card p-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-12 w-12 flex-shrink-0 animate-pulse rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-5 w-3/4 animate-pulse rounded bg-ods-skeleton" }),
-              /* @__PURE__ */ jsx("div", { className: "h-4 animate-pulse rounded bg-ods-skeleton" })
+        /* @__PURE__ */ jsx("div", { className: "mb-8 content-md:mb-12", children: /* @__PURE__ */ jsx(MediaSkeleton.CardImage, { className: "h-64 w-full content-md:h-96" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "prose prose-invert max-w-none space-y-6", children: [
+          Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-full" }),
+            /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-full" }),
+            /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-5/6" }),
+            /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-3/4" })
+          ] }, index)),
+          /* @__PURE__ */ jsxs("div", { className: "py-4", children: [
+            /* @__PURE__ */ jsx(TextSkeleton.Subheading, { className: "mb-4 w-2/3" }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-full" }),
+              /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-4/5" })
             ] })
-          ] }, i)) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mb-20 flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-8 w-80 animate-pulse rounded bg-ods-skeleton content-md:h-10" }),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 content-lg:grid-cols-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-5 w-16 animate-pulse rounded bg-ods-skeleton" }),
-              Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3 rounded-lg border border-ods-border bg-ods-card p-4", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-12 w-12 flex-shrink-0 animate-pulse rounded border border-ods-border bg-ods-bg" }),
-                /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "h-5 w-2/3 animate-pulse rounded bg-ods-skeleton" }),
-                  /* @__PURE__ */ jsx("div", { className: "h-4 animate-pulse rounded bg-ods-skeleton" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function VendorDetailLayoutSkeleton({ className, region = true }) {
+  return /* @__PURE__ */ jsx(
+    LoadingRegion,
+    {
+      label: "Loading the vendor",
+      as: "main",
+      announce: region,
+      className: cn("min-h-screen bg-ods-bg", className),
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-[1920px] px-6 py-6 content-md:px-20 content-md:py-10", children: [
+        /* @__PURE__ */ jsx(BreadcrumbSkeleton, { className: "mb-6" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col content-lg:flex-row content-lg:gap-10", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-10", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-6 flex gap-6", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-20 w-20 flex-shrink-0 rounded-lg border border-ods-border" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-80 max-w-full rounded content-md:h-16 content-lg:h-20" }),
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-32 rounded content-md:h-6" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-20 rounded" }),
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-16 rounded" })
+                  ] })
                 ] })
-              ] }, i))
+              ] }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-[300px] w-full rounded-lg border border-ods-border content-md:h-[400px] content-lg:h-[500px]" }),
+              /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mx-auto h-4 w-24 rounded" }) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mb-10 content-lg:hidden", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-lg border border-ods-border" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-lg border border-ods-border" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-lg border border-ods-border" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-lg border border-ods-border", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 bg-ods-card p-4", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 rounded" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-20 rounded" }),
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-12 rounded" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-6 rounded" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1", children: [
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-12 rounded" }),
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-8 rounded" })
+                  ] })
+                ] }, i)) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-lg border border-ods-border" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-lg border border-ods-border" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-lg border border-ods-border" })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-20 flex flex-col gap-6", children: [
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-48 rounded content-md:h-10" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-48 rounded" }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-24 rounded-lg border border-ods-border" }, i)) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-52 rounded" }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-28 rounded-lg border border-ods-border" }, i)) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-20 flex flex-col gap-6", children: [
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-64 rounded content-md:h-10" }),
+              /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6 content-md:p-8", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 rounded" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 rounded" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-5/6 rounded" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-4/5 rounded" })
+              ] }) })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-5 w-16 animate-pulse rounded bg-ods-skeleton" }),
-              Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3 rounded-lg border border-ods-border bg-ods-card p-4", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-12 w-12 flex-shrink-0 animate-pulse rounded border border-ods-border bg-ods-bg" }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-20 flex flex-col gap-6", children: [
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-72 rounded content-md:h-10" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4 rounded-lg border border-ods-border bg-ods-card p-4", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 flex-shrink-0 rounded" }),
                 /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "h-5 w-2/3 animate-pulse rounded bg-ods-skeleton" }),
-                  /* @__PURE__ */ jsx("div", { className: "h-4 animate-pulse rounded bg-ods-skeleton" })
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-3/4 rounded" }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 rounded" })
                 ] })
-              ] }, i))
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mb-20 flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-8 w-72 animate-pulse rounded bg-ods-skeleton content-md:h-10" }),
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-lg border border-ods-border bg-ods-card p-6", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-16 w-16 flex-shrink-0 animate-pulse rounded-lg border border-ods-border bg-ods-bg" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-6 w-3/4 animate-pulse rounded bg-ods-skeleton" }),
-                /* @__PURE__ */ jsx("div", { className: "h-4 w-1/2 animate-pulse rounded bg-ods-skeleton" })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "h-6 w-20 animate-pulse rounded bg-ods-skeleton" })
+              ] }, i)) })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-4 animate-pulse rounded bg-ods-skeleton" }),
-              /* @__PURE__ */ jsx("div", { className: "h-4 w-5/6 animate-pulse rounded bg-ods-skeleton" }),
-              /* @__PURE__ */ jsx("div", { className: "h-4 w-4/5 animate-pulse rounded bg-ods-skeleton" })
+            /* @__PURE__ */ jsxs("div", { className: "mb-20 flex flex-col gap-6", children: [
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-80 rounded content-md:h-10" }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 content-lg:grid-cols-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-16 rounded" }),
+                  Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3 rounded-lg border border-ods-border bg-ods-card p-4", children: [
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 flex-shrink-0 rounded border border-ods-border" }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+                      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-2/3 rounded" }),
+                      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 rounded" })
+                    ] })
+                  ] }, i))
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-16 rounded" }),
+                  Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3 rounded-lg border border-ods-border bg-ods-card p-4", children: [
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 flex-shrink-0 rounded border border-ods-border" }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+                      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-2/3 rounded" }),
+                      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 rounded" })
+                    ] })
+                  ] }, i))
+                ] })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-ods-border pt-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-4 w-16 animate-pulse rounded bg-ods-skeleton" }),
-              /* @__PURE__ */ jsx("div", { className: "h-4 w-20 animate-pulse rounded bg-ods-skeleton" })
-            ] })
-          ] }, i)) }),
-          /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded-md bg-ods-skeleton" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mb-20 flex flex-col gap-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-8 w-64 animate-pulse rounded bg-ods-skeleton content-md:h-10" }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden rounded-lg border border-ods-border bg-ods-bg", children: [
-              /* @__PURE__ */ jsxs("div", { className: "border-b border-ods-border p-3", children: [
-                /* @__PURE__ */ jsx("div", { className: "mb-2 h-3 w-8 animate-pulse rounded bg-ods-skeleton" }),
-                /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-ods-skeleton" })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
-                /* @__PURE__ */ jsx("div", { className: "mb-2 h-3 w-16 animate-pulse rounded bg-ods-skeleton" }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-20 flex flex-col gap-6", children: [
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-72 rounded content-md:h-10" }),
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-lg border border-ods-border bg-ods-card p-6", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-16 w-16 flex-shrink-0 rounded-lg border border-ods-border" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-3/4 rounded" }),
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-1/2 rounded" })
+                  ] }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-20 rounded" })
+                ] }),
                 /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "h-4 w-full animate-pulse rounded bg-ods-skeleton" }),
-                  /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 animate-pulse rounded bg-ods-skeleton" }),
-                  /* @__PURE__ */ jsx("div", { className: "h-4 w-1/2 animate-pulse rounded bg-ods-skeleton" })
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 rounded" }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-5/6 rounded" }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-4/5 rounded" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-ods-border pt-2", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-16 rounded" }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-20 rounded" })
                 ] })
-              ] })
+              ] }, i)) }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-md" })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex items-stretch", children: /* @__PURE__ */ jsx("div", { className: "h-[120px] w-20 animate-pulse rounded-lg bg-ods-skeleton" }) })
-          ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ods-border bg-ods-card p-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-col gap-3 min-[420px]:flex-row min-[420px]:items-center min-[420px]:justify-between min-[420px]:gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-ods-border bg-ods-card px-3 py-2", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-pulse rounded-lg bg-ods-skeleton" }),
-                /* @__PURE__ */ jsx("div", { className: "h-4 w-20 animate-pulse rounded bg-ods-skeleton" })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "h-4 w-12 animate-pulse rounded bg-ods-skeleton" })
-            ] }) }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-6 w-2/3 animate-pulse rounded bg-ods-skeleton" }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-4 w-full animate-pulse rounded bg-ods-skeleton" }),
-                /* @__PURE__ */ jsx("div", { className: "h-4 w-4/5 animate-pulse rounded bg-ods-skeleton" }),
-                /* @__PURE__ */ jsx("div", { className: "h-4 w-3/5 animate-pulse rounded bg-ods-skeleton" })
-              ] })
-            ] })
-          ] }, i)) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "hidden w-[290px] flex-shrink-0 content-lg:block", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
-          /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-lg border border-ods-border", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 bg-ods-card p-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-pulse rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-4 w-20 animate-pulse rounded bg-ods-skeleton" }),
-              /* @__PURE__ */ jsx("div", { className: "h-6 w-12 animate-pulse rounded bg-ods-skeleton" })
+            /* @__PURE__ */ jsxs("div", { className: "mb-20 flex flex-col gap-6", children: [
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-64 rounded content-md:h-10" }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-hidden rounded-lg border border-ods-border bg-ods-bg", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "border-b border-ods-border p-3", children: [
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-3 w-8 rounded" }),
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-full rounded" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-3 w-16 rounded" }),
+                    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-full rounded" }),
+                      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-3/4 rounded" }),
+                      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-1/2 rounded" })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex items-stretch", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[120px] w-20 rounded-lg" }) })
+              ] }) }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ods-border bg-ods-card p-4", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-col gap-3 min-[420px]:flex-row min-[420px]:items-center min-[420px]:justify-between min-[420px]:gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-ods-border bg-ods-card px-3 py-2", children: [
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 rounded-lg" }),
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-20 rounded" })
+                  ] }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-12 rounded" })
+                ] }) }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-2/3 rounded" }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-full rounded" }),
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-4/5 rounded" }),
+                    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-3/5 rounded" })
+                  ] })
+                ] })
+              ] }, i)) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-pulse rounded bg-ods-skeleton" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-4 w-12 animate-pulse rounded bg-ods-skeleton" }),
-              /* @__PURE__ */ jsx("div", { className: "h-3 w-8 animate-pulse rounded bg-ods-skeleton" })
+          /* @__PURE__ */ jsx("div", { className: "hidden w-[290px] flex-shrink-0 content-lg:block", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-lg border border-ods-border" }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-lg border border-ods-border" }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-lg border border-ods-border" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-lg border border-ods-border", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 bg-ods-card p-4", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 rounded" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-20 rounded" }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-12 rounded" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-6 rounded" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-1", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-12 rounded" }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-8 rounded" })
+                ] })
+              ] }, i)) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-lg border border-ods-border" }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-lg border border-ods-border" }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 rounded-lg border border-ods-border" })
             ] })
-          ] }, i)) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
-          /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" }),
-          /* @__PURE__ */ jsx("div", { className: "h-12 animate-pulse rounded-lg border border-ods-border bg-ods-card" })
+          ] }) })
         ] })
-      ] }) })
-    ] })
-  ] }) });
+      ] })
+    }
+  );
 }
 function StatsSectionSkeleton({ className, columns = 3 }) {
   return /* @__PURE__ */ jsx(
@@ -422,76 +435,79 @@ function StatsSectionSkeleton({ className, columns = 3 }) {
     }
   );
 }
-function BlogCardGridSkeleton({ className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), children: /* @__PURE__ */ jsx(CardSkeletonGrid, { count: 4, variant: "blog", className: "grid-cols-1 content-md:grid-cols-2" }) });
+function BlogCardGridSkeleton({ className, region = true }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), children: /* @__PURE__ */ jsx(CardSkeletonGrid, { count: 4, variant: "blog", region, className: "grid-cols-1 content-md:grid-cols-2" }) });
 }
-function VendorGridSkeleton({ className }) {
+function VendorGridSkeleton({ className, region = true }) {
   return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), children: /* @__PURE__ */ jsx(
     CardSkeletonGrid,
     {
       count: 12,
       variant: "vendor",
+      region,
       className: "grid-cols-1 content-md:grid-cols-2 content-lg:grid-cols-3"
     }
   ) });
 }
-function SlackCommunitySkeleton() {
+function SlackCommunitySkeleton({ region = true } = {}) {
   return /* @__PURE__ */ jsx(
-    "section",
+    LoadingRegion,
     {
+      label: "Loading the Slack community",
+      as: "section",
+      announce: region,
       className: "w-full bg-ods-bg px-4 py-12 content-md:px-20 content-md:py-20 content-lg:px-20",
-      "aria-label": "Slack Community Loading",
       children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4 content-md:gap-6", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "h-8 max-w-md animate-pulse rounded-lg bg-ods-skeleton content-md:h-12 content-lg:h-14" }) }),
+        /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 max-w-md rounded-lg content-md:h-12 content-lg:h-14" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-col gap-4 content-md:gap-6 content-lg:flex-row content-lg:items-start content-lg:justify-end", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex w-full flex-shrink-0 animate-pulse flex-col overflow-hidden rounded border border-ods-border bg-ods-bg content-lg:w-[290px] content-lg:max-w-[290px]", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex w-full flex-shrink-0 flex-col overflow-hidden rounded border border-ods-border bg-ods-bg content-lg:w-[290px] content-lg:max-w-[290px]", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-4 w-24 rounded bg-ods-skeleton" }),
-                /* @__PURE__ */ jsx("div", { className: "h-3 w-16 rounded bg-ods-skeleton" })
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-24 rounded" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-16 rounded" })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "h-3 w-32 rounded bg-ods-skeleton" })
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-32 rounded" })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "mb-2 h-3 w-16 rounded bg-ods-skeleton" }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-3 w-16 rounded" }),
               Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex min-h-[48px] items-center gap-2 px-2 py-3", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded bg-ods-skeleton" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-4 rounded" }),
                 /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ jsx("div", { className: "mb-1 h-3 w-24 rounded bg-ods-skeleton" }),
-                  /* @__PURE__ */ jsx("div", { className: "h-2 w-16 rounded bg-ods-skeleton" })
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-1 h-3 w-24 rounded" }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-2 w-16 rounded" })
                 ] })
               ] }, i))
             ] }),
             /* @__PURE__ */ jsx("div", { className: "mt-2 border-t border-ods-border pt-3", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-3 w-16 rounded bg-ods-skeleton" }),
-                /* @__PURE__ */ jsx("div", { className: "h-3 w-8 rounded bg-ods-skeleton" })
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-16 rounded" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-8 rounded" })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-3 w-20 rounded bg-ods-skeleton" }),
-                /* @__PURE__ */ jsx("div", { className: "h-3 w-8 rounded bg-ods-skeleton" })
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-20 rounded" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-8 rounded" })
               ] })
             ] }) })
           ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex h-[450px] min-h-[450px] min-w-0 flex-1 animate-pulse flex-col rounded-lg border border-ods-border bg-ods-card content-md:h-[500px] content-md:min-h-[500px] content-lg:h-[600px] content-lg:min-h-[600px]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex h-[450px] min-h-[450px] min-w-0 flex-1 flex-col rounded-lg border border-ods-border bg-ods-card content-md:h-[500px] content-md:min-h-[500px] content-lg:h-[600px] content-lg:min-h-[600px]", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex h-[56px] flex-shrink-0 items-center justify-between border-b border-ods-border bg-ods-bg p-4 content-md:h-[60px] content-md:p-6", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded bg-ods-skeleton content-md:h-4 content-md:w-4" }),
-                /* @__PURE__ */ jsx("div", { className: "h-3 w-24 rounded bg-ods-skeleton content-md:h-4 content-md:w-32" })
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-3 rounded content-md:h-4 content-md:w-4" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-24 rounded content-md:h-4 content-md:w-32" })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "h-3 w-12 rounded bg-ods-skeleton content-md:w-16" })
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-12 rounded content-md:w-16" })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "min-h-[280px] flex-1 space-y-3 overflow-hidden bg-ods-bg p-4 content-md:min-h-[320px] content-md:space-y-4 content-md:p-6 content-lg:min-h-[420px]", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 content-md:gap-3", children: [
-              /* @__PURE__ */ jsx("div", { className: "h-10 w-10 flex-shrink-0 rounded-lg bg-ods-skeleton content-md:h-12 content-md:w-12" }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-10 flex-shrink-0 rounded-lg content-md:h-12 content-md:w-12" }),
               /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
                 /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "h-3 w-16 rounded bg-ods-skeleton content-md:w-20" }),
-                  /* @__PURE__ */ jsx("div", { className: "h-3 w-12 rounded bg-ods-skeleton content-md:w-16" })
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-16 rounded content-md:w-20" }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-12 rounded content-md:w-16" })
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "h-3 w-full rounded bg-ods-skeleton content-md:h-4" })
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-full rounded content-md:h-4" })
               ] })
             ] }, i)) }),
-            /* @__PURE__ */ jsx("div", { className: "h-[72px] flex-shrink-0 border-t border-ods-border bg-ods-card p-4 content-md:h-[80px] content-md:p-6", children: /* @__PURE__ */ jsx("div", { className: "flex items-end justify-center gap-3 content-md:justify-end", children: /* @__PURE__ */ jsx("div", { className: "h-10 w-28 rounded-lg bg-ods-skeleton content-md:h-12 content-md:w-32" }) }) })
+            /* @__PURE__ */ jsx("div", { className: "h-[72px] flex-shrink-0 border-t border-ods-border bg-ods-card p-4 content-md:h-[80px] content-md:p-6", children: /* @__PURE__ */ jsx("div", { className: "flex items-end justify-center gap-3 content-md:justify-end", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-28 rounded-lg content-md:h-12 content-md:w-32" }) }) })
           ] })
         ] })
       ] })
@@ -502,6 +518,7 @@ export {
   AnnouncementBarSkeleton,
   ArticleLayoutSkeleton,
   BlogCardGridSkeleton,
+  BreadcrumbLinkSkeleton,
   BreadcrumbSkeleton,
   CategorySidebarSkeleton,
   HeaderSkeleton,