@opensite/ui 3.7.5 → 3.7.7

package/dist/badge.d.cts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+    variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+    variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/blog-featured-popular.cjs

@@ -451,7 +451,8 @@ function BlogFeaturedPopular({
   featuredSlot,
   postsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -463,7 +464,6 @@ function BlogFeaturedPopular({
   postCardClassName,
   optixFlowConfig,
   background,
-  spacing,
   pattern,
   patternOpacity
 }) {
@@ -504,9 +504,9 @@ function BlogFeaturedPopular({
                 featuredContentClassName
               ),
               children: [
-                (featuredPost.category || featuredPost.label) && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "shrink", children: featuredPost.category || featuredPost.label }),
-                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title })),
-                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground md:max-w-lg", children: featuredPost.description || featuredPost.summary })
+                (featuredPost.category || featuredPost.label) && /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: featuredPost.category || featuredPost.label }),
+                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title }) : featuredPost.title),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-70", children: featuredPost.description || featuredPost.summary })
               ]
             }
           )
@@ -544,9 +544,9 @@ function BlogFeaturedPopular({
                 optixFlowConfig
               }
             ),
-            (post.category || post.label) && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "shrink", children: post.category || post.label }),
-            post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-balance md:max-w-md", children: post.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xl font-semibold text-balance md:max-w-md", children: post.title })),
-            (post.description || post.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground md:max-w-md", children: post.description || post.summary })
+            (post.category || post.label) && /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: post.category || post.label }),
+            post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-balance md:max-w-md", children: post.title }) : post.title),
+            (post.description || post.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-70", children: post.description || post.summary })
           ]
         },
         postId
@@ -562,7 +562,8 @@ function BlogFeaturedPopular({
       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 || description) && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -580,17 +581,17 @@ function BlogFeaturedPopular({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              ) : 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",
+                    "mx-auto mt-4 max-w-full md:max-w-md text-lg opacity-70 text-balance",
                     descriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              ) : description)
             ]
           }
         ),

package/dist/blog-featured-popular.d.cts

@@ -98,6 +98,6 @@ interface BlogFeaturedPopularProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function BlogFeaturedPopular({ sectionId, heading, description, popularHeading, posts, featuredSlot, postsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, featuredClassName, featuredImageClassName, featuredContentClassName, popularHeadingClassName, postsClassName, postCardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: BlogFeaturedPopularProps): React.JSX.Element;
+declare function BlogFeaturedPopular({ sectionId, heading, description, popularHeading, posts, featuredSlot, postsSlot, className, containerClassName, spacing, headerClassName, headingClassName, descriptionClassName, featuredClassName, featuredImageClassName, featuredContentClassName, popularHeadingClassName, postsClassName, postCardClassName, optixFlowConfig, background, pattern, patternOpacity, }: BlogFeaturedPopularProps): React.JSX.Element;
 
 export { BlogFeaturedPopular, type BlogFeaturedPopularProps };

package/dist/blog-featured-popular.d.ts

@@ -98,6 +98,6 @@ interface BlogFeaturedPopularProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function BlogFeaturedPopular({ sectionId, heading, description, popularHeading, posts, featuredSlot, postsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, featuredClassName, featuredImageClassName, featuredContentClassName, popularHeadingClassName, postsClassName, postCardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: BlogFeaturedPopularProps): React.JSX.Element;
+declare function BlogFeaturedPopular({ sectionId, heading, description, popularHeading, posts, featuredSlot, postsSlot, className, containerClassName, spacing, headerClassName, headingClassName, descriptionClassName, featuredClassName, featuredImageClassName, featuredContentClassName, popularHeadingClassName, postsClassName, postCardClassName, optixFlowConfig, background, pattern, patternOpacity, }: BlogFeaturedPopularProps): React.JSX.Element;
 
 export { BlogFeaturedPopular, type BlogFeaturedPopularProps };

package/dist/blog-featured-popular.js

@@ -430,7 +430,8 @@ function BlogFeaturedPopular({
   featuredSlot,
   postsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -442,7 +443,6 @@ function BlogFeaturedPopular({
   postCardClassName,
   optixFlowConfig,
   background,
-  spacing,
   pattern,
   patternOpacity
 }) {
@@ -483,9 +483,9 @@ function BlogFeaturedPopular({
                 featuredContentClassName
               ),
               children: [
-                (featuredPost.category || featuredPost.label) && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "shrink", children: featuredPost.category || featuredPost.label }),
-                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title }) : /* @__PURE__ */ jsx("div", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title })),
-                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground md:max-w-lg", children: featuredPost.description || featuredPost.summary })
+                (featuredPost.category || featuredPost.label) && /* @__PURE__ */ jsx(Badge, { children: featuredPost.category || featuredPost.label }),
+                featuredPost.title && (typeof featuredPost.title === "string" ? /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-balance md:max-w-lg lg:text-3xl", children: featuredPost.title }) : featuredPost.title),
+                (featuredPost.description || featuredPost.summary) && /* @__PURE__ */ jsx("p", { className: "opacity-70", children: featuredPost.description || featuredPost.summary })
               ]
             }
           )
@@ -523,9 +523,9 @@ function BlogFeaturedPopular({
                 optixFlowConfig
               }
             ),
-            (post.category || post.label) && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "shrink", children: post.category || post.label }),
-            post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-balance md:max-w-md", children: post.title }) : /* @__PURE__ */ jsx("div", { className: "text-xl font-semibold text-balance md:max-w-md", children: post.title })),
-            (post.description || post.summary) && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground md:max-w-md", children: post.description || post.summary })
+            (post.category || post.label) && /* @__PURE__ */ jsx(Badge, { children: post.category || post.label }),
+            post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-balance md:max-w-md", children: post.title }) : post.title),
+            (post.description || post.summary) && /* @__PURE__ */ jsx("p", { className: "opacity-70", children: post.description || post.summary })
           ]
         },
         postId
@@ -541,7 +541,8 @@ function BlogFeaturedPopular({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         (heading || description) && /* @__PURE__ */ jsxs(
           "div",
           {
@@ -559,17 +560,17 @@ function BlogFeaturedPopular({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
                   className: cn(
-                    "mx-auto mt-4 max-w-xl text-lg text-muted-foreground text-balance",
+                    "mx-auto mt-4 max-w-full md:max-w-md text-lg opacity-70 text-balance",
                     descriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ) : description)
             ]
           }
         ),

package/dist/blog-horizontal-cards.cjs

@@ -67,19 +67,6 @@ function Badge({
     }
   );
 }
-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
-    }
-  );
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React4__namespace.memo(function DynamicIcon2({
   apiKey,
@@ -480,7 +467,8 @@ function BlogHorizontalCards({
   postsSlot,
   readMoreText,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -490,7 +478,6 @@ function BlogHorizontalCards({
   ctaClassName,
   optixFlowConfig,
   background,
-  spacing,
   pattern,
   patternOpacity
 }) {
@@ -530,7 +517,7 @@ function BlogHorizontalCards({
       const postSummary = post.summary || post.description;
       const postDate = post.published || post.date;
       return /* @__PURE__ */ jsxRuntime.jsx(
-        Card,
+        "div",
         {
           className: cn(
             "overflow-hidden border-0 bg-transparent shadow-none",
@@ -548,37 +535,31 @@ function BlogHorizontalCards({
                     src: post.image,
                     alt: postTitle,
                     className: "aspect-video w-full rounded-lg object-cover object-center sm:w-[260px]",
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 )
               }
             ) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-sm opacity-70", children: [
                 postLabel && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: postLabel }),
                 post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: post.author }),
                 postDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: postDate })
               ] }),
               post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl leading-tight font-bold lg:text-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: postHref, className: "hover:underline", children: post.title }) }),
-              postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-muted-foreground", children: postSummary }),
-              readMoreText && /* @__PURE__ */ jsxRuntime.jsxs(
-                pressable.Pressable,
-                {
-                  href: postHref,
-                  className: "inline-flex items-center text-primary hover:underline",
-                  children: [
-                    readMoreText,
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/arrow-right",
-                        size: 16,
-                        className: "ml-2 size-4"
-                      }
-                    )
-                  ]
-                }
-              )
+              postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base opacity-70", children: postSummary }),
+              readMoreText && /* @__PURE__ */ jsxRuntime.jsxs(pressable.Pressable, { href: postHref, variant: "outline", children: [
+                readMoreText,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/arrow-right",
+                    size: 16,
+                    className: "size-4"
+                  }
+                )
+              ] })
             ] })
           ] })
         },
@@ -595,9 +576,10 @@ function BlogHorizontalCards({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl 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 })),
+          badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
@@ -607,17 +589,17 @@ function BlogHorizontalCards({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
               className: cn(
-                "mb-12 text-muted-foreground md:text-base lg:text-lg",
+                "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
                 descriptionClassName
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          ) : description)
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-5xl space-y-12", postsClassName), children: postsContent }),
         (ctaSlot || ctaAction) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 text-center", ctaClassName), children: ctaContent })

package/dist/blog-horizontal-cards.d.cts

@@ -98,6 +98,6 @@ interface BlogHorizontalCardsProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function BlogHorizontalCards({ sectionId, badge, heading, description, ctaAction, ctaSlot, posts, postsSlot, readMoreText, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, postsClassName, postCardClassName, ctaClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: BlogHorizontalCardsProps): React.JSX.Element;
+declare function BlogHorizontalCards({ sectionId, badge, heading, description, ctaAction, ctaSlot, posts, postsSlot, readMoreText, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, postsClassName, postCardClassName, ctaClassName, optixFlowConfig, background, pattern, patternOpacity, }: BlogHorizontalCardsProps): React.JSX.Element;
 
 export { BlogHorizontalCards, type BlogHorizontalCardsProps };

package/dist/blog-horizontal-cards.d.ts

@@ -98,6 +98,6 @@ interface BlogHorizontalCardsProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function BlogHorizontalCards({ sectionId, badge, heading, description, ctaAction, ctaSlot, posts, postsSlot, readMoreText, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, postsClassName, postCardClassName, ctaClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: BlogHorizontalCardsProps): React.JSX.Element;
+declare function BlogHorizontalCards({ sectionId, badge, heading, description, ctaAction, ctaSlot, posts, postsSlot, readMoreText, className, containerClassName, spacing, headerClassName, badgeClassName, headingClassName, descriptionClassName, postsClassName, postCardClassName, ctaClassName, optixFlowConfig, background, pattern, patternOpacity, }: BlogHorizontalCardsProps): React.JSX.Element;
 
 export { BlogHorizontalCards, type BlogHorizontalCardsProps };

package/dist/blog-horizontal-cards.js

@@ -46,19 +46,6 @@ function Badge({
     }
   );
 }
-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
-    }
-  );
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var DynamicIcon = React4.memo(function DynamicIcon2({
   apiKey,
@@ -459,7 +446,8 @@ function BlogHorizontalCards({
   postsSlot,
   readMoreText,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -469,7 +457,6 @@ function BlogHorizontalCards({
   ctaClassName,
   optixFlowConfig,
   background,
-  spacing,
   pattern,
   patternOpacity
 }) {
@@ -509,7 +496,7 @@ function BlogHorizontalCards({
       const postSummary = post.summary || post.description;
       const postDate = post.published || post.date;
       return /* @__PURE__ */ jsx(
-        Card,
+        "div",
         {
           className: cn(
             "overflow-hidden border-0 bg-transparent shadow-none",
@@ -527,37 +514,31 @@ function BlogHorizontalCards({
                     src: post.image,
                     alt: postTitle,
                     className: "aspect-video w-full rounded-lg object-cover object-center sm:w-[260px]",
-                    optixFlowConfig
+                    optixFlowConfig,
+                    loading: "eager"
                   }
                 )
               }
             ) }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm opacity-70", children: [
                 postLabel && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: postLabel }),
                 post.author && /* @__PURE__ */ jsx("span", { children: post.author }),
                 postDate && /* @__PURE__ */ jsx("span", { children: postDate })
               ] }),
               post.title && /* @__PURE__ */ jsx("h3", { className: "text-xl leading-tight font-bold lg:text-2xl", children: /* @__PURE__ */ jsx(Pressable, { href: postHref, className: "hover:underline", children: post.title }) }),
-              postSummary && /* @__PURE__ */ jsx("p", { className: "text-base text-muted-foreground", children: postSummary }),
-              readMoreText && /* @__PURE__ */ jsxs(
-                Pressable,
-                {
-                  href: postHref,
-                  className: "inline-flex items-center text-primary hover:underline",
-                  children: [
-                    readMoreText,
-                    /* @__PURE__ */ jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/arrow-right",
-                        size: 16,
-                        className: "ml-2 size-4"
-                      }
-                    )
-                  ]
-                }
-              )
+              postSummary && /* @__PURE__ */ jsx("p", { className: "text-base opacity-70", children: postSummary }),
+              readMoreText && /* @__PURE__ */ jsxs(Pressable, { href: postHref, variant: "outline", children: [
+                readMoreText,
+                /* @__PURE__ */ jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/arrow-right",
+                    size: 16,
+                    className: "size-4"
+                  }
+                )
+              ] })
             ] })
           ] })
         },
@@ -574,9 +555,10 @@ function BlogHorizontalCards({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
-          badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
+          badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
@@ -586,17 +568,17 @@ function BlogHorizontalCards({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
               className: cn(
-                "mb-12 text-muted-foreground md:text-base lg:text-lg",
+                "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
                 descriptionClassName
               ),
               children: description
             }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+          ) : description)
         ] }),
         /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-5xl space-y-12", postsClassName), children: postsContent }),
         (ctaSlot || ctaAction) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 text-center", ctaClassName), children: ctaContent })

package/dist/blog-related-articles.cjs

@@ -415,7 +415,7 @@ function BlogRelatedArticles({
   articles,
   articlesSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   seeAllClassName,
@@ -467,10 +467,10 @@ function BlogRelatedArticles({
           href: itemHref,
           className: cn("flex flex-col gap-2", articleCardClassName),
           children: [
-            (item.category || item.label) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-muted-foreground", children: item.category || item.label }),
-            item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-1 text-lg font-semibold", children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 text-lg font-semibold", children: item.title })),
-            (item.description || item.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: item.description || item.summary }),
-            (item.date || item.published) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-muted-foreground", children: item.date || item.published })
+            (item.category || item.label) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium opacity-70", children: item.category || item.label }),
+            item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-1 text-lg font-semibold", children: item.title }) : item.title),
+            (item.description || item.summary) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-4 text-sm opacity-70", children: item.description || item.summary }),
+            (item.date || item.published) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: item.date || item.published })
           ]
         },
         itemId
@@ -486,7 +486,8 @@ function BlogRelatedArticles({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -504,7 +505,7 @@ function BlogRelatedArticles({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               renderedSeeAllAction
             ]
           }

package/dist/blog-related-articles.js

@@ -394,7 +394,7 @@ function BlogRelatedArticles({
   articles,
   articlesSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   seeAllClassName,
@@ -446,10 +446,10 @@ function BlogRelatedArticles({
           href: itemHref,
           className: cn("flex flex-col gap-2", articleCardClassName),
           children: [
-            (item.category || item.label) && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: item.category || item.label }),
-            item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-1 text-lg font-semibold", children: item.title }) : /* @__PURE__ */ jsx("div", { className: "mb-1 text-lg font-semibold", children: item.title })),
-            (item.description || item.summary) && /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: item.description || item.summary }),
-            (item.date || item.published) && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: item.date || item.published })
+            (item.category || item.label) && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium opacity-70", children: item.category || item.label }),
+            item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "mb-1 text-lg font-semibold", children: item.title }) : item.title),
+            (item.description || item.summary) && /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm opacity-70", children: item.description || item.summary }),
+            (item.date || item.published) && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: item.date || item.published })
           ]
         },
         itemId
@@ -465,7 +465,8 @@ function BlogRelatedArticles({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -483,7 +484,7 @@ function BlogRelatedArticles({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               renderedSeeAllAction
             ]
           }

package/dist/carousel-icon-tabs.cjs

@@ -669,7 +669,8 @@ function CarouselIconTabs({
   tabClassName,
   controlsClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "hero",
   pattern,
   patternOpacity,
   patternClassName,
@@ -775,7 +776,7 @@ function CarouselIconTabs({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex cursor-pointer flex-col gap-2 md:hidden", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20 }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children: item.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg text-muted-foreground", children: item.text })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base", children: item.text })
           ] })
         ]
       },
@@ -810,8 +811,8 @@ function CarouselIconTabs({
                 "div",
                 {
                   className: cn(
-                    "text-lg hover:text-muted-foreground",
-                    index + 1 === current ? "text-muted-foreground" : "text-muted-foreground/50"
+                    "text-lg hover:opacity-100",
+                    index + 1 === current ? "opacity-100" : "opacity-70"
                   ),
                   children: section.text
                 }
@@ -833,6 +834,7 @@ function CarouselIconTabs({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName,
       children: [
         headerContent,
         /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/carousel-icon-tabs.d.cts

@@ -104,6 +104,10 @@ interface CarouselIconTabsProps {
      * Background style for the section
      */
     background?: SectionBackground;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Vertical spacing for the section
      */
@@ -152,6 +156,6 @@ interface CarouselIconTabsProps {
  * />
  * ```
  */
-declare function CarouselIconTabs({ sectionId, heading, badge, sections, sectionsSlot, headerSlot, className, headerClassName, headingClassName, badgeClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, tabsClassName, tabClassName, controlsClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselIconTabsProps): React.JSX.Element;
+declare function CarouselIconTabs({ sectionId, heading, badge, sections, sectionsSlot, headerSlot, className, headerClassName, headingClassName, badgeClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, tabsClassName, tabClassName, controlsClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselIconTabsProps): React.JSX.Element;
 
 export { type CarouselIconTabItem, CarouselIconTabs, type CarouselIconTabsProps };