@opensite/ui 3.1.8 → 3.2.0

package/dist/blog-filtered-results.cjs

@@ -40,36 +40,6 @@ var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 function AspectRatio({
   ...props
 }) {
@@ -693,8 +663,9 @@ function BlogFilteredResultsComponent({
   loadMoreClassName,
   optixFlowConfig,
   background,
-  spacing = "pt-6 pb-16 lg:pt-12 lg:pb-32",
+  spacing = "hero",
   pattern,
+  containerClassName = "mx-auto w-full px-4 lg:px-8 max-w-full md:max-w-7xl relative z-10 flex justify-center",
   patternOpacity
 }) {
   const effectivePostsPerPage = postsPerPage || POSTS_PER_PAGE;
@@ -828,14 +799,14 @@ function BlogFilteredResultsComponent({
       className: cn(className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
               "bg-size-[3.125rem_3.125rem] bg-repeat rounded-2xl shadow-xl",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background),
+              "bg-muted text-muted-foreground",
               heroClassName
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-start justify-start gap-6 md:gap-16 p-6 md:p-20 lg:flex-row lg:items-center lg:justify-between", children: [

package/dist/blog-filtered-results.d.cts

@@ -133,6 +133,10 @@ interface BlogFilteredResultsProps {
      * Vertical spacing for the section
      */
     spacing?: SectionSpacing;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Optional background pattern name or URL
      */
@@ -144,6 +148,6 @@ interface BlogFilteredResultsProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function BlogFilteredResultsComponent({ sectionId, heading, description, allContentHeading, breadcrumb, breadcrumbSlot, primaryPost, primaryPostSlot, posts, postsSlot, categories, categoriesSlot, postsPerPage, loadMoreAction, loadMoreSlot, className, heroClassName, headingClassName, descriptionClassName, primaryPostClassName, allContentClassName, allContentHeadingClassName, categoriesClassName, postsClassName, postCardClassName, loadMoreClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: BlogFilteredResultsProps): React.JSX.Element;
+declare function BlogFilteredResultsComponent({ sectionId, heading, description, allContentHeading, breadcrumb, breadcrumbSlot, primaryPost, primaryPostSlot, posts, postsSlot, categories, categoriesSlot, postsPerPage, loadMoreAction, loadMoreSlot, className, heroClassName, headingClassName, descriptionClassName, primaryPostClassName, allContentClassName, allContentHeadingClassName, categoriesClassName, postsClassName, postCardClassName, loadMoreClassName, optixFlowConfig, background, spacing, pattern, containerClassName, patternOpacity, }: BlogFilteredResultsProps): React.JSX.Element;
 
 export { BlogFilteredResultsComponent as BlogFilteredResults, type BlogFilteredResultsProps, type BreadcrumbItemType, type CategoryFilter };

package/dist/blog-filtered-results.d.ts

@@ -133,6 +133,10 @@ interface BlogFilteredResultsProps {
      * Vertical spacing for the section
      */
     spacing?: SectionSpacing;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Optional background pattern name or URL
      */
@@ -144,6 +148,6 @@ interface BlogFilteredResultsProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function BlogFilteredResultsComponent({ sectionId, heading, description, allContentHeading, breadcrumb, breadcrumbSlot, primaryPost, primaryPostSlot, posts, postsSlot, categories, categoriesSlot, postsPerPage, loadMoreAction, loadMoreSlot, className, heroClassName, headingClassName, descriptionClassName, primaryPostClassName, allContentClassName, allContentHeadingClassName, categoriesClassName, postsClassName, postCardClassName, loadMoreClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: BlogFilteredResultsProps): React.JSX.Element;
+declare function BlogFilteredResultsComponent({ sectionId, heading, description, allContentHeading, breadcrumb, breadcrumbSlot, primaryPost, primaryPostSlot, posts, postsSlot, categories, categoriesSlot, postsPerPage, loadMoreAction, loadMoreSlot, className, heroClassName, headingClassName, descriptionClassName, primaryPostClassName, allContentClassName, allContentHeadingClassName, categoriesClassName, postsClassName, postCardClassName, loadMoreClassName, optixFlowConfig, background, spacing, pattern, containerClassName, patternOpacity, }: BlogFilteredResultsProps): React.JSX.Element;
 
 export { BlogFilteredResultsComponent as BlogFilteredResults, type BlogFilteredResultsProps, type BreadcrumbItemType, type CategoryFilter };

package/dist/blog-filtered-results.js

@@ -16,36 +16,6 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 function AspectRatio({
   ...props
 }) {
@@ -669,8 +639,9 @@ function BlogFilteredResultsComponent({
   loadMoreClassName,
   optixFlowConfig,
   background,
-  spacing = "pt-6 pb-16 lg:pt-12 lg:pb-32",
+  spacing = "hero",
   pattern,
+  containerClassName = "mx-auto w-full px-4 lg:px-8 max-w-full md:max-w-7xl relative z-10 flex justify-center",
   patternOpacity
 }) {
   const effectivePostsPerPage = postsPerPage || POSTS_PER_PAGE;
@@ -804,14 +775,14 @@ function BlogFilteredResultsComponent({
       className: cn(className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
               "bg-size-[3.125rem_3.125rem] bg-repeat rounded-2xl shadow-xl",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background),
+              "bg-muted text-muted-foreground",
               heroClassName
             ),
             children: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-start justify-start gap-6 md:gap-16 p-6 md:p-20 lg:flex-row lg:items-center lg:justify-between", children: [

package/dist/blog-horizontal-timeline.cjs

@@ -6,8 +6,8 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
 var pressable = require('@page-speed/pressable');
-var jsxRuntime = require('react/jsx-runtime');
 var icon = require('@page-speed/icon');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -33,29 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card",
-      className: cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6", className),
-      ...props
-    }
-  );
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   apiKey,
@@ -447,7 +424,7 @@ function BlogHorizontalTimelineComponent({
   postsSlot,
   readText,
   className,
-  containerClassName,
+  containerClassName = "mx-auto w-full px-4 lg:px-8 max-w-full md:max-w-7xl relative z-10 flex justify-center",
   headingClassName,
   postsClassName,
   postItemClassName,
@@ -495,13 +472,13 @@ function BlogHorizontalTimelineComponent({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              Card,
+              "div",
               {
                 className: cn(
                   "w-full border-none shadow-none pt-0 pb-6 md:pt-6 md:pb-6",
                   postCardClassName
                 ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
                     className: cn(
@@ -511,11 +488,11 @@ function BlogHorizontalTimelineComponent({
                     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-lg font-bold tracking-tight line-clamp-2", 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 })
+                        postDate && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-widest uppercase md:mt-2 md:text-sm opacity-75", 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 line-clamp-3", children: postDescription }),
-                        readText && /* @__PURE__ */ jsxRuntime.jsxs(pressable.Pressable, { href: postHref, asButton: true, variant: "ghost", children: [
+                        readText && /* @__PURE__ */ jsxRuntime.jsxs(pressable.Pressable, { href: postHref, asButton: true, variant: "outline", children: [
                           readText,
                           /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
                         ] })
@@ -548,7 +525,8 @@ function BlogHorizontalTimelineComponent({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
           "h1",
           {
@@ -558,7 +536,7 @@ function BlogHorizontalTimelineComponent({
             ),
             children: heading
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12", headingClassName), children: heading })),
+        ) : heading),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-0 md:gap-20", postsClassName), children: renderPosts })
       ] })
     }

package/dist/blog-horizontal-timeline.js

@@ -5,36 +5,13 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
 import { Pressable } from '@page-speed/pressable';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { Icon } from '@page-speed/icon';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // components/blocks/blog/blog-horizontal-timeline.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card",
-      className: cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6", className),
-      ...props
-    }
-  );
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React.memo(function DynamicIcon2({
   apiKey,
@@ -426,7 +403,7 @@ function BlogHorizontalTimelineComponent({
   postsSlot,
   readText,
   className,
-  containerClassName,
+  containerClassName = "mx-auto w-full px-4 lg:px-8 max-w-full md:max-w-7xl relative z-10 flex justify-center",
   headingClassName,
   postsClassName,
   postItemClassName,
@@ -474,13 +451,13 @@ function BlogHorizontalTimelineComponent({
               }
             ),
             /* @__PURE__ */ jsx(
-              Card,
+              "div",
               {
                 className: cn(
                   "w-full border-none shadow-none pt-0 pb-6 md:pt-6 md:pb-6",
                   postCardClassName
                 ),
-                children: /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxs(
+                children: /* @__PURE__ */ jsx("div", { className: "p-0", children: /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: cn(
@@ -490,11 +467,11 @@ function BlogHorizontalTimelineComponent({
                     children: [
                       /* @__PURE__ */ 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__ */ jsx("h2", { className: "text-lg font-bold tracking-tight line-clamp-2", children: post.title }),
-                        postDate && /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-widest text-muted-foreground uppercase md:mt-2 md:text-sm", children: postDate })
+                        postDate && /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-widest uppercase md:mt-2 md:text-sm opacity-75", children: postDate })
                       ] }),
                       /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start gap-4 md:h-full md:justify-between md:gap-6", children: [
                         postDescription && /* @__PURE__ */ jsx("p", { className: "text-base leading-relaxed font-normal tracking-tight text-muted-foreground md:text-xl line-clamp-3", children: postDescription }),
-                        readText && /* @__PURE__ */ jsxs(Pressable, { href: postHref, asButton: true, variant: "ghost", children: [
+                        readText && /* @__PURE__ */ jsxs(Pressable, { href: postHref, asButton: true, variant: "outline", children: [
                           readText,
                           /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
                         ] })
@@ -527,7 +504,8 @@ function BlogHorizontalTimelineComponent({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
           "h1",
           {
@@ -537,7 +515,7 @@ function BlogHorizontalTimelineComponent({
             ),
             children: heading
           }
-        ) : /* @__PURE__ */ jsx("div", { className: cn("mb-12", headingClassName), children: heading })),
+        ) : heading),
         /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-0 md:gap-20", postsClassName), children: renderPosts })
       ] })
     }

package/dist/carousel-gallery-thumbnails.cjs

@@ -624,7 +624,7 @@ function CarouselGalleryThumbnails({
               "button",
               {
                 className: cn(
-                  "relative h-20 w-20 shrink-0 transition-all duration-200",
+                  "relative h-20 w-20 shrink-0 transition-all duration-200 rounded-lg",
                   index === currentIndex ? "ring-2 ring-primary ring-offset-2" : "opacity-70 hover:opacity-100",
                   thumbnailClassName
                 ),

package/dist/carousel-gallery-thumbnails.js

@@ -603,7 +603,7 @@ function CarouselGalleryThumbnails({
               "button",
               {
                 className: cn(
-                  "relative h-20 w-20 shrink-0 transition-all duration-200",
+                  "relative h-20 w-20 shrink-0 transition-all duration-200 rounded-lg",
                   index === currentIndex ? "ring-2 ring-primary ring-offset-2" : "opacity-70 hover:opacity-100",
                   thumbnailClassName
                 ),

package/dist/carousel-image-hero.cjs

@@ -536,7 +536,7 @@ function CarouselImageHero({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing = "py-0 md:py-32",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {

package/dist/carousel-image-hero.js

@@ -515,7 +515,7 @@ function CarouselImageHero({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing = "py-0 md:py-32",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {

package/dist/carousel-product-feature-showcase.cjs

@@ -465,7 +465,7 @@ function CarouselProductFeatureShowcase({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {

package/dist/carousel-product-feature-showcase.js

@@ -444,7 +444,7 @@ function CarouselProductFeatureShowcase({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {

package/dist/registry.cjs

@@ -20555,7 +20555,7 @@ function CarouselGalleryThumbnails({
               "button",
               {
                 className: cn(
-                  "relative h-20 w-20 shrink-0 transition-all duration-200",
+                  "relative h-20 w-20 shrink-0 transition-all duration-200 rounded-lg",
                   index === currentIndex ? "ring-2 ring-primary ring-offset-2" : "opacity-70 hover:opacity-100",
                   thumbnailClassName
                 ),
@@ -20809,7 +20809,7 @@ function CarouselImageHero({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing = "py-0 md:py-32",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -21526,7 +21526,7 @@ function CarouselProductFeatureShowcase({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -37067,8 +37067,9 @@ function BlogFilteredResultsComponent({
   loadMoreClassName,
   optixFlowConfig,
   background,
-  spacing = "pt-6 pb-16 lg:pt-12 lg:pb-32",
+  spacing = "hero",
   pattern,
+  containerClassName = "mx-auto w-full px-4 lg:px-8 max-w-full md:max-w-7xl relative z-10 flex justify-center",
   patternOpacity
 }) {
   const effectivePostsPerPage = postsPerPage || POSTS_PER_PAGE;
@@ -37202,14 +37203,14 @@ function BlogFilteredResultsComponent({
       className: cn(className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
               "bg-size-[3.125rem_3.125rem] bg-repeat rounded-2xl shadow-xl",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background),
+              "bg-muted text-muted-foreground",
               heroClassName
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-start justify-start gap-6 md:gap-16 p-6 md:p-20 lg:flex-row lg:items-center lg:justify-between", children: [
@@ -37427,7 +37428,7 @@ function BlogHorizontalTimelineComponent({
   postsSlot,
   readText,
   className,
-  containerClassName,
+  containerClassName = "mx-auto w-full px-4 lg:px-8 max-w-full md:max-w-7xl relative z-10 flex justify-center",
   headingClassName,
   postsClassName,
   postItemClassName,
@@ -37475,13 +37476,13 @@ function BlogHorizontalTimelineComponent({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              Card,
+              "div",
               {
                 className: cn(
                   "w-full border-none shadow-none pt-0 pb-6 md:pt-6 md:pb-6",
                   postCardClassName
                 ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
                     className: cn(
@@ -37491,11 +37492,11 @@ function BlogHorizontalTimelineComponent({
                     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-lg font-bold tracking-tight line-clamp-2", 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 })
+                        postDate && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold tracking-widest uppercase md:mt-2 md:text-sm opacity-75", 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 line-clamp-3", children: postDescription }),
-                        readText && /* @__PURE__ */ jsxRuntime.jsxs(pressable.Pressable, { href: postHref, asButton: true, variant: "ghost", children: [
+                        readText && /* @__PURE__ */ jsxRuntime.jsxs(pressable.Pressable, { href: postHref, asButton: true, variant: "outline", children: [
                           readText,
                           /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
                         ] })
@@ -37528,7 +37529,8 @@ function BlogHorizontalTimelineComponent({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
           "h1",
           {
@@ -37538,7 +37540,7 @@ function BlogHorizontalTimelineComponent({
             ),
             children: heading
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-12", headingClassName), children: heading })),
+        ) : heading),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-0 md:gap-20", postsClassName), children: renderPosts })
       ] })
     }

package/dist/registry.js

@@ -20515,7 +20515,7 @@ function CarouselGalleryThumbnails({
               "button",
               {
                 className: cn(
-                  "relative h-20 w-20 shrink-0 transition-all duration-200",
+                  "relative h-20 w-20 shrink-0 transition-all duration-200 rounded-lg",
                   index === currentIndex ? "ring-2 ring-primary ring-offset-2" : "opacity-70 hover:opacity-100",
                   thumbnailClassName
                 ),
@@ -20769,7 +20769,7 @@ function CarouselImageHero({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing = "py-0 md:py-32",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -21486,7 +21486,7 @@ function CarouselProductFeatureShowcase({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -37027,8 +37027,9 @@ function BlogFilteredResultsComponent({
   loadMoreClassName,
   optixFlowConfig,
   background,
-  spacing = "pt-6 pb-16 lg:pt-12 lg:pb-32",
+  spacing = "hero",
   pattern,
+  containerClassName = "mx-auto w-full px-4 lg:px-8 max-w-full md:max-w-7xl relative z-10 flex justify-center",
   patternOpacity
 }) {
   const effectivePostsPerPage = postsPerPage || POSTS_PER_PAGE;
@@ -37162,14 +37163,14 @@ function BlogFilteredResultsComponent({
       className: cn(className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
               "bg-size-[3.125rem_3.125rem] bg-repeat rounded-2xl shadow-xl",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background),
+              "bg-muted text-muted-foreground",
               heroClassName
             ),
             children: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-start justify-start gap-6 md:gap-16 p-6 md:p-20 lg:flex-row lg:items-center lg:justify-between", children: [
@@ -37387,7 +37388,7 @@ function BlogHorizontalTimelineComponent({
   postsSlot,
   readText,
   className,
-  containerClassName,
+  containerClassName = "mx-auto w-full px-4 lg:px-8 max-w-full md:max-w-7xl relative z-10 flex justify-center",
   headingClassName,
   postsClassName,
   postItemClassName,
@@ -37435,13 +37436,13 @@ function BlogHorizontalTimelineComponent({
               }
             ),
             /* @__PURE__ */ jsx(
-              Card,
+              "div",
               {
                 className: cn(
                   "w-full border-none shadow-none pt-0 pb-6 md:pt-6 md:pb-6",
                   postCardClassName
                 ),
-                children: /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: /* @__PURE__ */ jsxs(
+                children: /* @__PURE__ */ jsx("div", { className: "p-0", children: /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: cn(
@@ -37451,11 +37452,11 @@ function BlogHorizontalTimelineComponent({
                     children: [
                       /* @__PURE__ */ 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__ */ jsx("h2", { className: "text-lg font-bold tracking-tight line-clamp-2", children: post.title }),
-                        postDate && /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-widest text-muted-foreground uppercase md:mt-2 md:text-sm", children: postDate })
+                        postDate && /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold tracking-widest uppercase md:mt-2 md:text-sm opacity-75", children: postDate })
                       ] }),
                       /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-start gap-4 md:h-full md:justify-between md:gap-6", children: [
                         postDescription && /* @__PURE__ */ jsx("p", { className: "text-base leading-relaxed font-normal tracking-tight text-muted-foreground md:text-xl line-clamp-3", children: postDescription }),
-                        readText && /* @__PURE__ */ jsxs(Pressable, { href: postHref, asButton: true, variant: "ghost", children: [
+                        readText && /* @__PURE__ */ jsxs(Pressable, { href: postHref, asButton: true, variant: "outline", children: [
                           readText,
                           /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
                         ] })
@@ -37488,7 +37489,8 @@ function BlogHorizontalTimelineComponent({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
           "h1",
           {
@@ -37498,7 +37500,7 @@ function BlogHorizontalTimelineComponent({
             ),
             children: heading
           }
-        ) : /* @__PURE__ */ jsx("div", { className: cn("mb-12", headingClassName), children: heading })),
+        ) : heading),
         /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-0 md:gap-20", postsClassName), children: renderPosts })
       ] })
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.1.8",
+  "version": "3.2.0",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",