@opensite/ui 0.6.6 → 0.6.8

package/dist/registry.cjs

@@ -26,10 +26,10 @@ var AutoScroll3 = require('embla-carousel-auto-scroll');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var react = require('motion/react');
 var dateFns = require('date-fns');
+var PopoverPrimitive = require('@radix-ui/react-popover');
 var SheetPrimitive = require('@radix-ui/react-dialog');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var NavigationMenuPrimitive = require('@radix-ui/react-navigation-menu');
-var PopoverPrimitive = require('@radix-ui/react-popover');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var pdfViewer = require('@page-speed/pdf-viewer');
@@ -67,10 +67,10 @@ var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive)
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var AutoScroll3__default = /*#__PURE__*/_interopDefault(AutoScroll3);
 var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
-var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 
@@ -32336,30 +32336,39 @@ function BlogCardsTaglineCta({
             containerClassName
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", headerClassName), children: [
-              badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-              ctaActionContent
-            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "text-center flex flex-col items-center px-6 md:px-0",
+                  headerClassName
+                ),
+                children: [
+                  badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg text-balance",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+                  ctaActionContent
+                ]
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -32474,11 +32483,11 @@ function BlogCardsReadTime({
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center",
+              "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center px-8 md:px-0",
               headerClassName
             ),
             children: [
-              badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", className: "gap-1 py-1", children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "outline", className: "gap-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   DynamicIcon,
                   {
@@ -32500,7 +32509,16 @@ function BlogCardsReadTime({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-muted-foreground text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
             ]
           }
         ),
@@ -32508,7 +32526,7 @@ function BlogCardsReadTime({
           "div",
           {
             className: cn(
-              "mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+              "mt-6 md:mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3",
               postsClassName
             ),
             children: renderedPosts
@@ -32592,9 +32610,9 @@ function BlogCategoryOverlay({
           (post.category || post.label) && /* @__PURE__ */ jsxRuntime.jsx(
             Badge,
             {
-              variant: "secondary",
+              variant: "default",
               className: cn(
-                "absolute top-4 right-4 bg-background/70 px-3 py-1 text-sm backdrop-blur-sm",
+                "absolute top-4 right-4 px-3 py-1 text-sm backdrop-blur-sm",
                 categoryBadgeClassName
               ),
               children: post.category || post.label
@@ -32651,7 +32669,7 @@ function BlogCategoryOverlay({
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-3xl flex-col items-center gap-6 text-center",
+              "mx-auto flex max-w-3xl flex-col items-center gap-6 text-center px-8 md:px-0",
               headerClassName
             ),
             children: [
@@ -32666,7 +32684,16 @@ function BlogCategoryOverlay({
                   children: heading
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-muted-foreground text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
               viewAllActionContent
             ]
           }
@@ -32675,7 +32702,7 @@ function BlogCategoryOverlay({
           "div",
           {
             className: cn(
-              "mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
+              "mt-6 md:mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3",
               postsClassName
             ),
             children: postsContent
@@ -32732,7 +32759,7 @@ function BlogFeaturedPopular({
               src: featuredPost.image,
               alt: typeof featuredPost.title === "string" ? featuredPost.title : "Featured post",
               className: cn(
-                "aspect-video rounded-lg object-cover",
+                "aspect-video rounded-lg object-cover w-full h-auto",
                 featuredImageClassName
               ),
               optixFlowConfig
@@ -32804,28 +32831,37 @@ function BlogFeaturedPopular({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-16 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-5xl font-medium md:text-6xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "mx-auto mt-4 max-w-xl text-lg text-muted-foreground",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
+        (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-6 md:mb-16 text-center px-8 md:px-0",
+              headerClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold md:text-5xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto mt-4 max-w-xl text-lg text-muted-foreground text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-7xl", children: [
           renderedFeaturedPost,
           popularHeading && (typeof popularHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -32957,7 +32993,7 @@ function BlogRelatedArticles({
           "div",
           {
             className: cn(
-              "grid grid-cols-1 gap-16 md:grid-cols-2 lg:grid-cols-4 lg:gap-10",
+              "grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4 lg:gap-10",
               articlesClassName
             ),
             children: renderedArticles
@@ -33025,7 +33061,7 @@ function BlogTechInsights({
   const featuredPostContent = React52.useMemo(() => {
     if (featuredSlot) return featuredSlot;
     if (!featuredPost) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-4", featuredClassName), children: [
+    const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-4", featuredClassName), children: [
       featuredPost.image && /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
@@ -33047,6 +33083,17 @@ function BlogTechInsights({
         ] })
       ] })
     ] });
+    if (featuredPost.href) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          href: featuredPost.href,
+          className: "block transition-opacity hover:opacity-90",
+          children: content
+        }
+      );
+    }
+    return content;
   }, [
     featuredSlot,
     featuredPost,
@@ -33059,7 +33106,9 @@ function BlogTechInsights({
     if (!secondaryPosts || secondaryPosts.length === 0) return null;
     return secondaryPosts.map((post) => {
       const postId = post.id || String(post.title) || Math.random().toString();
-      return /* @__PURE__ */ jsxRuntime.jsxs(
+      const descriptionText = post.description || post.summary;
+      const truncatedDescription = typeof descriptionText === "string" && descriptionText.length > 100 ? `${descriptionText.slice(0, 100)}...` : descriptionText;
+      const postContent = /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
@@ -33076,11 +33125,25 @@ function BlogTechInsights({
                 optixFlowConfig
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-3/4 md:w-4/5", children: (post.description || post.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed md:text-base", children: post.description || post.summary }) })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-3/4 md:w-4/5", children: [
+              post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-foreground md:text-lg", children: post.title }),
+              truncatedDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm leading-relaxed text-muted-foreground md:text-base", children: truncatedDescription })
+            ] })
           ]
-        },
-        postId
+        }
       );
+      if (post.href) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Pressable,
+          {
+            href: post.href,
+            className: "block transition-opacity hover:opacity-80",
+            children: postContent
+          },
+          postId
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: postContent }, postId);
     });
   }, [
     secondaryPostsSlot,
@@ -33391,7 +33454,7 @@ var BlogCard = React52__namespace.memo(function BlogCard2({
   const postSummary = post.summary || post.description;
   const postCta = post.cta || "Read more";
   return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: postHref, className: cn("block h-full w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "size-full rounded-lg border py-0", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-0", children: [
-    postCategory && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b p-2.5 text-sm leading-[1.2] font-medium text-muted-foreground", children: postCategory }),
+    postCategory && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b p-2.5 text-xs leading-[1.2] font-bold text-muted-foreground/70 uppercase", children: postCategory }),
     postImage && /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.520833333, className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
       img.Img,
       {
@@ -33426,7 +33489,7 @@ var FilterForm = React52__namespace.memo(function FilterForm2({
         return /* @__PURE__ */ jsxRuntime.jsxs(
           Label,
           {
-            className: "flex cursor-pointer items-center gap-2.5 rounded-full bg-muted px-2.5 py-1.5",
+            className: "flex cursor-pointer items-center gap-2.5 bg-none px-2.5 py-1.5",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { children: category.label }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -33622,10 +33685,10 @@ function BlogFilteredResultsComponent({
           "div",
           {
             className: cn(
-              "bg-muted bg-size-[3.125rem_3.125rem] bg-repeat",
+              "bg-muted bg-size-[3.125rem_3.125rem] bg-repeat rounded-2xl shadow-xl",
               heroClassName
             ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container flex flex-col items-start justify-start gap-16 py-20 lg:flex-row lg:items-center lg:justify-between", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-start justify-start gap-6 md:gap-16 p-12 md:p-20 lg:flex-row lg:items-center lg:justify-between", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col justify-between gap-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-xl flex-col gap-8", children: [
                 breadcrumbContent,
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-5", children: [
@@ -33673,7 +33736,7 @@ function BlogFilteredResultsComponent({
                 "div",
                 {
                   className: cn(
-                    "grid gap-10 md:grid-cols-2 lg:grid-cols-3",
+                    "grid gap-4 md:gap-6 lg:gap-10 md:grid-cols-2 lg:grid-cols-3",
                     postsClassName
                   ),
                   children: postsContent
@@ -33805,7 +33868,7 @@ function BlogMasonryFeaturedComponent({
           "h1",
           {
             className: cn(
-              "mb-12 text-center text-4xl font-medium md:text-7xl",
+              "mb-6 md:mb-12 text-center text-4xl font-medium md:text-6xl text-balance",
               headingClassName
             ),
             children: heading
@@ -33815,7 +33878,7 @@ function BlogMasonryFeaturedComponent({
           "div",
           {
             className: cn(
-              "xs:grid-cols-1 mt-24 grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
+              "xs:grid-cols-1 mt-6 md:mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
               postsClassName
             ),
             children: [
@@ -33859,7 +33922,7 @@ function BlogHorizontalTimelineComponent({
         "div",
         {
           className: cn(
-            "flex flex-col items-center gap-16 md:flex-row",
+            "flex flex-col items-center gap-6 md:flex-row md:gap-16",
             postItemClassName
           ),
           children: [
@@ -33867,7 +33930,7 @@ function BlogHorizontalTimelineComponent({
               "div",
               {
                 className: cn(
-                  "flex h-80 w-full items-center justify-center overflow-hidden rounded-3xl bg-muted md:w-140",
+                  "flex h-48 w-full shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-muted md:h-80 md:w-140 md:rounded-3xl",
                   postImageClassName
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -33881,36 +33944,42 @@ function BlogHorizontalTimelineComponent({
                 )
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("border-none shadow-none", postCardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Card,
               {
-                className: cn(
-                  "mb-5 flex h-90 items-start border-b py-10 md:mb-0 lg:gap-32",
-                  index === 0 && "md:border-t"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col items-start justify-between pr-8", children: [
-                    post.title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold tracking-tight text-foreground md:text-3xl", children: post.title }),
-                    postDate && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm font-semibold tracking-widest text-muted-foreground uppercase", children: postDate })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col items-start justify-between gap-6", children: [
-                    postDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg leading-relaxed font-normal tracking-tight text-muted-foreground md:text-xl", children: postDescription }),
-                    readText && /* @__PURE__ */ jsxRuntime.jsxs(
-                      Pressable,
-                      {
-                        href: postHref,
-                        variant: "ghost",
-                        className: "inline-flex items-center justify-center gap-4 px-0 text-primary transition-all ease-in-out hover:gap-6 hover:text-accent-foreground",
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tight", children: readText }),
-                          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
-                        ]
-                      }
-                    )
-                  ] })
-                ]
+                className: cn("w-full border-none shadow-none", postCardClassName),
+                children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-col gap-4 border-b py-4 md:h-90 md:flex-row md:items-start md:gap-0 md:py-10 lg:gap-32",
+                      index === 0 && "md:border-t"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-2 md:h-full md:justify-between md:pr-8", children: [
+                        post.title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold tracking-tight text-foreground md:text-3xl", children: post.title }),
+                        postDate && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-widest text-muted-foreground uppercase md:mt-2 md:text-sm", children: postDate })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-start gap-4 md:h-full md:justify-between md:gap-6", children: [
+                        postDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base leading-relaxed font-normal tracking-tight text-muted-foreground md:text-xl", children: postDescription }),
+                        readText && /* @__PURE__ */ jsxRuntime.jsxs(
+                          Pressable,
+                          {
+                            href: postHref,
+                            variant: "ghost",
+                            className: "inline-flex items-center justify-center gap-4 px-0 text-primary transition-all ease-in-out hover:gap-6 hover:text-accent-foreground",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold tracking-tight md:text-lg", children: readText }),
+                              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
+                            ]
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ) })
               }
-            ) }) })
+            )
           ]
         },
         postId
@@ -34018,7 +34087,7 @@ function BlogGridNinePosts({
               }
             ) }) }),
             (post.label || post.category) && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: post.label || post.category }) }),
-            post.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-2xl lg:pt-4 lg:text-3xl", children: post.title }),
+            post.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3", children: post.title }),
             (post.summary || post.description) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 line-clamp-2 text-sm text-muted-foreground md:mb-5 md:text-base", children: post.summary || post.description }),
             (post.author || post.authorAvatar) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-12", children: [
@@ -34046,11 +34115,11 @@ function BlogGridNinePosts({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 md:mb-14 lg:mb-16", headerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap:4 md:gap-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
               className: cn(
-                "mb-4 w-full text-4xl font-medium md:mb-5 md:text-5xl lg:mb-6 lg:text-6xl",
+                "mb-4 w-full text-4xl font-bold md:mb-5 lg:mb-6 lg:text-5xl text-balance",
                 headingClassName
               ),
               children: heading
@@ -34062,7 +34131,7 @@ function BlogGridNinePosts({
           "div",
           {
             className: cn(
-              "grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3",
+              "grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 lg:grid-cols-3",
               postsClassName
             ),
             children: renderedPosts
@@ -34143,7 +34212,7 @@ var AppleCarousel = ({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-10 [scrollbar-width:none] md:py-20",
+            className: "flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-4 [scrollbar-width:none] md:py-10",
             ref: carouselRef,
             onScroll: checkScrollability,
             children: [
@@ -34194,33 +34263,21 @@ var AppleCarousel = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
-              className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50",
+              className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full disabled:opacity-50",
               onClick: scrollLeftHandler,
               disabled: !canScrollLeft,
               asButton: true,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                DynamicIcon,
-                {
-                  name: "lucide/arrow-left",
-                  className: "h-6 w-6 text-gray-500"
-                }
-              )
+              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", className: "h-6 w-6" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
-              className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 disabled:opacity-50",
+              className: "relative z-40 flex h-10 w-10 items-center justify-center rounded-full disabled:opacity-50",
               onClick: scrollRightHandler,
               disabled: !canScrollRight,
               asButton: true,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                DynamicIcon,
-                {
-                  name: "lucide/arrow-right",
-                  className: "h-6 w-6 text-gray-500"
-                }
-              )
+              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", className: "h-6 w-6" })
             }
           )
         ] })
@@ -34388,8 +34445,8 @@ function BlogCarouselAppleComponent({
     {
       title,
       subtitle,
-      background: background || "white",
-      spacing: spacing || "lg",
+      background,
+      spacing,
       pattern,
       patternOpacity,
       className: cn(className),
@@ -34424,24 +34481,49 @@ function ArticleHeroProseComponent({
   pattern,
   patternOpacity
 }) {
-  const { title, authorName, authorHref, image, pubDate, description, authorImage } = post ?? {};
+  const {
+    title,
+    authorName,
+    authorHref,
+    image,
+    pubDate,
+    description,
+    authorImage
+  } = post ?? {};
   const authorContent = React52__namespace.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3 text-sm md:text-base", authorClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "h-8 w-8 border", children: [
-        authorImage && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: authorImage }),
-        /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: authorName.charAt(0) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: authorHref || "#", className: "font-semibold", children: authorName }),
-        pubDate && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1", children: [
-          "on ",
-          dateFns.format(pubDate, dateFormat)
-        ] })
-      ] })
-    ] });
-  }, [authorSlot, authorName, authorImage, authorHref, pubDate, dateFormat, authorClassName]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-3 text-sm md:text-base",
+          authorClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "h-8 w-8 border", children: [
+            authorImage && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: authorImage }),
+            /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: authorName.charAt(0) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: authorHref || "#", className: "font-semibold", children: authorName }),
+            pubDate && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1", children: [
+              "on ",
+              dateFns.format(pubDate, dateFormat)
+            ] })
+          ] })
+        ]
+      }
+    );
+  }, [
+    authorSlot,
+    authorName,
+    authorImage,
+    authorHref,
+    pubDate,
+    dateFormat,
+    authorClassName
+  ]);
   const heroMediaContent = React52__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!image) return null;
@@ -34450,7 +34532,10 @@ function ArticleHeroProseComponent({
       {
         src: image,
         alt: "Hero media",
-        className: cn("mt-4 mb-8 aspect-video w-full rounded-lg border object-cover", heroImageClassName),
+        className: cn(
+          "mt-4 mb-8 aspect-video w-full rounded-lg border object-cover",
+          heroImageClassName
+        ),
         optixFlowConfig
       }
     );
@@ -34464,13 +34549,49 @@ function ArticleHeroProseComponent({
       patternOpacity,
       className,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-5xl flex-col items-center gap-4 text-center", headerClassName), children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-3xl text-5xl font-semibold text-pretty md:text-6xl", titleClassName), children: title }),
-          description && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("max-w-3xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }),
-          authorContent,
-          heroMediaContent
-        ] }) }),
-        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto prose max-w-3xl dark:prose-invert", proseClassName), children }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex max-w-5xl flex-col items-center gap-4 text-center",
+              headerClassName
+            ),
+            children: [
+              title && /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "max-w-3xl text-5xl font-semibold text-pretty md:text-6xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ),
+              description && /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  className: cn(
+                    "max-w-3xl text-lg text-muted-foreground md:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ),
+              authorContent,
+              heroMediaContent
+            ]
+          }
+        ) }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mx-auto prose max-w-3xl dark:prose-invert",
+              proseClassName
+            ),
+            children
+          }
+        ) })
       ]
     }
   );
@@ -34563,7 +34684,7 @@ function ArticleSidebarStickyComponent({
         /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 lg:hidden", children: backLinkContent }),
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 lg:hidden", children: renderAuthor(true) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "not-prose mt-4 lg:hidden", children: renderAuthor(true) }),
           heroMediaContent,
           children
         ] })
@@ -34793,15 +34914,25 @@ function ArticleBreadcrumbSocialComponent({
   const author = authorProp ?? (authorName ? { name: authorName, image: authorImage, role: authorRole } : void 0);
   const platformLabels = {
     twitter: "Twitter",
+    x: "X",
     facebook: "Facebook",
     linkedin: "LinkedIn",
     instagram: "Instagram",
     github: "GitHub"
   };
+  const socialIconMap2 = {
+    twitter: "simple-icons/x",
+    // Twitter is now X
+    x: "simple-icons/x",
+    facebook: "simple-icons/facebook",
+    linkedin: "simple-icons/linkedin",
+    instagram: "simple-icons/instagram",
+    github: "simple-icons/github"
+  };
   const socialLinks = socialLinksProp ?? (shareUrls ? Object.entries(shareUrls).filter(([, href]) => href).map(([platform, href]) => ({
     platform,
     href,
-    icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: `lucide/${platform}`, size: 16 }),
+    icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: socialIconMap2[platform] || `simple-icons/${platform}`, size: 16 }),
     "aria-label": `Share on ${platformLabels[platform] || platform.charAt(0).toUpperCase() + platform.slice(1)}`,
     className: void 0
   })) : []);
@@ -34942,7 +35073,8 @@ function ArticleBreadcrumbSocialComponent({
               authorContent,
               /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
               heroMediaContent,
-              children
+              children,
+              shareButtonsContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "not-prose mt-8 lg:hidden", children: shareButtonsContent })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
               tocContent,
@@ -34963,6 +35095,36 @@ function ArticleBreadcrumbSocialComponent({
     }
   );
 }
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    PopoverPrimitive__namespace.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
 function ArticleCompactTocComponent({
   className,
   containerClassName,
@@ -35023,7 +35185,7 @@ function ArticleCompactTocComponent({
   const breadcrumbsContent = React52__namespace.useMemo(() => {
     if (breadcrumbsSlot) return breadcrumbsSlot;
     if (!breadcrumbs && !currentPage) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: cn("mb-6", breadcrumbClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(BreadcrumbList, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: cn("mb-6 md:mb-20", breadcrumbClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(BreadcrumbList, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/home", size: 16 }) }) }) }),
       breadcrumbs?.map((crumb, index) => /* @__PURE__ */ jsxRuntime.jsxs(React52__namespace.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
@@ -35050,14 +35212,38 @@ function ArticleCompactTocComponent({
       ))
     ] });
   }, [shareSlot, socialLinks, shareClassName]);
+  const renderTocLinks = React52__namespace.useCallback(
+    (onLinkClick) => {
+      if (!sections) return null;
+      return sections.map((section) => {
+        const isActive = activeSection === section.id;
+        if (renderSectionLink) {
+          return /* @__PURE__ */ jsxRuntime.jsx(React52__namespace.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Pressable,
+          {
+            href: `#${section.id}`,
+            className: cn(
+              "block text-sm transition-colors",
+              isActive ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
+            ),
+            onClick: onLinkClick,
+            children: section.title
+          },
+          section.id
+        );
+      });
+    },
+    [sections, activeSection, renderSectionLink]
+  );
   const tocContent = React52__namespace.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 lg:hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isTocOpen, onOpenChange: setIsTocOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
-          onClick: () => setIsTocOpen(!isTocOpen),
           className: cn(
             "flex w-full items-center justify-between rounded-lg border p-4",
             tocClassName
@@ -35073,28 +35259,34 @@ function ArticleCompactTocComponent({
             )
           ]
         }
-      ),
-      isTocOpen && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "mt-2 space-y-2 rounded-lg border p-4", children: sections.map((section) => {
-        const isActive = activeSection === section.id;
-        if (renderSectionLink) {
-          return /* @__PURE__ */ jsxRuntime.jsx(React52__namespace.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PopoverContent,
+        {
+          align: "start",
+          className: "w-[var(--radix-popover-trigger-width)] space-y-2 p-4",
+          children: renderTocLinks(() => setIsTocOpen(false))
         }
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            href: `#${section.id}`,
-            className: cn(
-              "block text-sm transition-colors",
-              isActive ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
-            ),
-            onClick: () => setIsTocOpen(false),
-            children: section.title
-          },
-          section.id
-        );
-      }) })
-    ] });
-  }, [tocSlot, sections, isTocOpen, activeSection, renderSectionLink, tocClassName]);
+      )
+    ] }) });
+  }, [tocSlot, sections, isTocOpen, tocClassName, renderTocLinks]);
+  const desktopTocContent = React52__namespace.useMemo(() => {
+    if (tocSlot) return null;
+    if (!sections || sections.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "aside",
+      {
+        className: cn(
+          "hidden lg:block fixed top-24 right-8 w-64 max-h-[calc(100vh-8rem)] overflow-y-auto",
+          tocClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "space-y-2 rounded-lg border bg-background p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-3 block text-sm font-semibold", children: "Table of Contents" }),
+          renderTocLinks()
+        ] })
+      }
+    );
+  }, [tocSlot, sections, tocClassName, renderTocLinks]);
   const heroMediaContent = React52__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
@@ -35103,39 +35295,78 @@ function ArticleCompactTocComponent({
       {
         src: heroImageSrc,
         alt: heroImageAlt,
-        className: cn("my-8 aspect-video w-full rounded-lg object-cover", heroImageClassName),
+        className: cn(
+          "my-8 aspect-video w-full rounded-lg object-cover",
+          heroImageClassName
+        ),
         optixFlowConfig
       }
     );
-  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  }, [
+    heroMediaSlot,
+    heroImageSrc,
+    heroImageAlt,
+    heroImageClassName,
+    optixFlowConfig
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        breadcrumbsContent,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          (authorName || publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground", metaClassName), children: [
-            authorName && (authorHref ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: authorHref, className: "hover:underline", children: authorName }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: authorName })),
-            authorName && publishDate && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
-            publishDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: publishDate }),
-            publishDate && readTime && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
-            readTime && /* @__PURE__ */ jsxRuntime.jsx("span", { children: readTime })
-          ] }),
-          shareContent,
-          /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
-          tocContent,
-          children && /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-            heroMediaContent,
-            children
+      className: cn("relative", className),
+      children: [
+        desktopTocContent,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+          breadcrumbsContent,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
+            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+            (authorName || publishDate || readTime) && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: cn(
+                  "mt-4 flex flex-wrap items-center gap-4 text-sm text-muted-foreground",
+                  metaClassName
+                ),
+                children: [
+                  authorName && (authorHref ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: authorHref, className: "hover:underline", children: authorName }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: authorName })),
+                  authorName && publishDate && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
+                  publishDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: publishDate }),
+                  publishDate && readTime && /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-4" }),
+                  readTime && /* @__PURE__ */ jsxRuntime.jsx("span", { children: readTime })
+                ]
+              }
+            ),
+            shareContent,
+            /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-8" }),
+            tocContent,
+            children && /* @__PURE__ */ jsxRuntime.jsxs(
+              "article",
+              {
+                className: cn(
+                  "prose max-w-none dark:prose-invert",
+                  articleClassName
+                ),
+                children: [
+                  heroMediaContent,
+                  children
+                ]
+              }
+            )
           ] })
         ] })
-      ] })
+      ]
     }
   );
 }
@@ -35179,7 +35410,13 @@ function ArticleChaptersAuthorComponent({
   pattern,
   patternOpacity
 }) {
-  const conclusionActions = conclusionActionsProp ?? (conclusionButtonText ? [{ label: conclusionButtonText, href: conclusionButtonHref || "#", variant: "default" }] : []);
+  const conclusionActions = conclusionActionsProp ?? (conclusionButtonText ? [
+    {
+      label: conclusionButtonText,
+      href: conclusionButtonHref || "#",
+      variant: "default"
+    }
+  ] : []);
   const [activeChapter, setActiveChapter] = React52__namespace.useState(
     chapters?.[0]?.id || ""
   );
@@ -35204,7 +35441,7 @@ function ArticleChaptersAuthorComponent({
   const breadcrumbsContent = React52__namespace.useMemo(() => {
     if (breadcrumbsSlot) return breadcrumbsSlot;
     if (!breadcrumbs || breadcrumbs.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: cn("mb-8", breadcrumbClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(BreadcrumbList, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: cn("mb-8 md:mb-20", breadcrumbClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(BreadcrumbList, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: "#", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/home", size: 16 }) }) }) }),
       breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxRuntime.jsxs(React52__namespace.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
@@ -35241,7 +35478,13 @@ function ArticleChaptersAuthorComponent({
         );
       }) })
     ] });
-  }, [chaptersSlot, chapters, activeChapter, renderChapterLink, chaptersClassName]);
+  }, [
+    chaptersSlot,
+    chapters,
+    activeChapter,
+    renderChapterLink,
+    chaptersClassName
+  ]);
   const authorCardContent = React52__namespace.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!author) return null;
@@ -35311,36 +35554,68 @@ function ArticleChaptersAuthorComponent({
       {
         src: heroImageSrc,
         alt: heroImageAlt,
-        className: cn("my-8 aspect-video w-full rounded-lg object-cover", heroImageClassName),
+        className: cn(
+          "my-8 aspect-video w-full rounded-lg object-cover",
+          heroImageClassName
+        ),
         optixFlowConfig
       }
     );
-  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
+  }, [
+    heroMediaSlot,
+    heroImageSrc,
+    heroImageAlt,
+    heroImageClassName,
+    optixFlowConfig
+  ]);
   const conclusionContent = React52__namespace.useMemo(() => {
     if (conclusionSlot) return conclusionSlot;
-    if (!conclusionTitle && !conclusionDescription && (!conclusionActions || conclusionActions.length === 0)) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12 rounded-lg border bg-muted/50 p-6 not-prose", conclusionClassName), children: [
-      conclusionTitle && (typeof conclusionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: conclusionTitle }) : conclusionTitle),
-      conclusionDescription && (typeof conclusionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: conclusionDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: conclusionDescription })),
-      conclusionActions && conclusionActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: conclusionActions.map((action, index) => {
-        const { label, icon, iconAfter, children: actionChildren, className: actionClassName, ...pressableProps } = action;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: actionClassName,
-            ...pressableProps,
-            children: actionChildren ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              icon,
+    if (!conclusionTitle && !conclusionDescription && (!conclusionActions || conclusionActions.length === 0))
+      return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "mt-12 rounded-lg border bg-muted/50 p-6 not-prose",
+          conclusionClassName
+        ),
+        children: [
+          conclusionTitle && (typeof conclusionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: conclusionTitle }) : conclusionTitle),
+          conclusionDescription && (typeof conclusionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: conclusionDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: conclusionDescription })),
+          conclusionActions && conclusionActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: conclusionActions.map((action, index) => {
+            const {
               label,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      }) })
-    ] });
-  }, [conclusionSlot, conclusionTitle, conclusionDescription, conclusionActions, conclusionClassName]);
+              icon,
+              iconAfter,
+              children: actionChildren,
+              className: actionClassName,
+              ...pressableProps
+            } = action;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Pressable,
+              {
+                asButton: true,
+                className: actionClassName,
+                ...pressableProps,
+                children: actionChildren ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  icon,
+                  label,
+                  iconAfter
+                ] })
+              },
+              index
+            );
+          }) })
+        ]
+      }
+    );
+  }, [
+    conclusionSlot,
+    conclusionTitle,
+    conclusionDescription,
+    conclusionActions,
+    conclusionClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -35351,20 +35626,47 @@ function ArticleChaptersAuthorComponent({
       className,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         breadcrumbsContent,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground md:text-xl", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center px-8 md:px-0", headerClassName), children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-4 text-lg text-muted-foreground md:text-xl text-balance",
+                subtitleClassName
+              ),
+              children: subtitle
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[280px_minmax(0,1fr)]", children: [
           /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
             chaptersNavContent,
             authorCardContent
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-            heroMediaContent,
-            children,
-            conclusionContent
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "article",
+            {
+              className: cn(
+                "prose max-w-none dark:prose-invert",
+                articleClassName
+              ),
+              children: [
+                heroMediaContent,
+                children,
+                conclusionContent
+              ]
+            }
+          )
         ] })
       ] })
     }
@@ -60447,36 +60749,6 @@ var NavbarSearchFocused = ({
     }
   );
 };
-function Popover({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    PopoverPrimitive__namespace.Content,
-    {
-      "data-slot": "popover-content",
-      align,
-      sideOffset,
-      className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
 var AnimatedHamburger = ({ isOpen }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "group relative size-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute flex size-full items-center justify-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(