@opensite/ui 1.2.9 → 1.3.0

package/dist/carousel-scale-focus.cjs

@@ -1139,7 +1139,8 @@ function CarouselScaleFocus({
   indicatorClassName,
   startIndex = 1,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -1249,7 +1250,7 @@ function CarouselScaleFocus({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
-      containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:px-45", children: [
           title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 text-center", children: [

package/dist/carousel-scale-focus.d.cts

@@ -109,6 +109,10 @@ interface CarouselScaleFocusProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * CarouselScaleFocus displays images with a scale and opacity focus effect.
@@ -130,6 +134,6 @@ interface CarouselScaleFocusProps {
  * />
  * ```
  */
-declare function CarouselScaleFocus({ title, description, titleClassName, descriptionClassName, images, imagesSlot, className, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, indicatorsClassName, indicatorClassName, startIndex, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselScaleFocusProps): React.JSX.Element;
+declare function CarouselScaleFocus({ title, description, titleClassName, descriptionClassName, images, imagesSlot, className, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, indicatorsClassName, indicatorClassName, startIndex, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselScaleFocusProps): React.JSX.Element;
 
 export { CarouselScaleFocus, type CarouselScaleFocusImage, type CarouselScaleFocusProps };

package/dist/carousel-scale-focus.d.ts

@@ -109,6 +109,10 @@ interface CarouselScaleFocusProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
 /**
  * CarouselScaleFocus displays images with a scale and opacity focus effect.
@@ -130,6 +134,6 @@ interface CarouselScaleFocusProps {
  * />
  * ```
  */
-declare function CarouselScaleFocus({ title, description, titleClassName, descriptionClassName, images, imagesSlot, className, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, indicatorsClassName, indicatorClassName, startIndex, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselScaleFocusProps): React.JSX.Element;
+declare function CarouselScaleFocus({ title, description, titleClassName, descriptionClassName, images, imagesSlot, className, carouselClassName, carouselContentClassName, itemClassName, imageClassName, controlsClassName, indicatorsClassName, indicatorClassName, startIndex, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: CarouselScaleFocusProps): React.JSX.Element;
 
 export { CarouselScaleFocus, type CarouselScaleFocusImage, type CarouselScaleFocusProps };

package/dist/carousel-scale-focus.js

@@ -1115,7 +1115,8 @@ function CarouselScaleFocus({
   indicatorClassName,
   startIndex = 1,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
@@ -1225,7 +1226,7 @@ function CarouselScaleFocus({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
-      containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "md:px-45", children: [
           title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 text-center", children: [

package/dist/feature-badge-grid-six.cjs

@@ -997,7 +997,8 @@ function FeatureBadgeGridSix({
   action,
   actionSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   headerClassName,
   badgeClassName,
   titleClassName,
@@ -1005,7 +1006,6 @@ function FeatureBadgeGridSix({
   cardClassName,
   actionContainerClassName,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName
@@ -1037,12 +1037,54 @@ function FeatureBadgeGridSix({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: cn("flex gap-6 space-y-4 rounded-lg md:block", cardClassName, feature.className),
+          className: cn(
+            "flex gap-6 space-y-4 rounded-lg md:block",
+            cardClassName,
+            feature.className
+          ),
           children: [
-            iconContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground md:size-12", children: iconContent }),
+            iconContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-card text-card-foreground md:size-12 shadow-sm border", children: iconContent }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading })),
-              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }))
+              feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  className: cn(
+                    "font-medium md:mb-2 md:text-xl",
+                    feature.headingClassName
+                  ),
+                  children: feature.heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "font-medium md:mb-2 md:text-xl",
+                    feature.headingClassName
+                  ),
+                  children: feature.heading
+                }
+              )),
+              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-sm md:text-base",
+                    getTextColor(background, "muted"),
+                    feature.descriptionClassName
+                  ),
+                  children: feature.description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-sm md:text-base",
+                    getTextColor(background, "muted"),
+                    feature.descriptionClassName
+                  ),
+                  children: feature.description
+                }
+              ))
             ] })
           ]
         },
@@ -1086,7 +1128,7 @@ function FeatureBadgeGridSix({
       }
     );
   }, [actionSlot, action]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -1096,14 +1138,47 @@ function FeatureBadgeGridSix({
       patternClassName,
       className,
       containerClassName,
-      children: [
-        (label || badgeSlot || title) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 flex max-w-3xl flex-col gap-4", headerClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        (label || badgeSlot || title) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4", headerClassName), children: [
           badgeContent,
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium md:text-4xl lg:text-5xl", titleClassName), children: title }))
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-2xl font-bold md:text-3xl lg:text-4xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "text-2xl font-bold md:text-3xl lg:text-4xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-12 md:grid-cols-2", gridClassName), children: featuresContent }),
-        (action || actionSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex justify-center", actionContainerClassName), children: actionContent })
-      ]
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-6 md:gap-12 grid-cols-1 md:grid-cols-2",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        ),
+        (action || actionSlot) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn("mt-8 flex justify-center", actionContainerClassName),
+            children: actionContent
+          }
+        )
+      ] })
     }
   );
 }

package/dist/feature-badge-grid-six.d.cts

@@ -141,6 +141,6 @@ interface FeatureBadgeGridSixProps {
  * />
  * ```
  */
-declare function FeatureBadgeGridSix({ label, badgeSlot, title, features, featuresSlot, action, actionSlot, className, containerClassName, headerClassName, badgeClassName, titleClassName, gridClassName, cardClassName, actionContainerClassName, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureBadgeGridSixProps): React.JSX.Element;
+declare function FeatureBadgeGridSix({ label, badgeSlot, title, features, featuresSlot, action, actionSlot, className, containerClassName, spacing, headerClassName, badgeClassName, titleClassName, gridClassName, cardClassName, actionContainerClassName, background, pattern, patternOpacity, patternClassName, }: FeatureBadgeGridSixProps): React.JSX.Element;
 
 export { FeatureBadgeGridSix, type FeatureBadgeGridSixProps };

package/dist/feature-badge-grid-six.d.ts

@@ -141,6 +141,6 @@ interface FeatureBadgeGridSixProps {
  * />
  * ```
  */
-declare function FeatureBadgeGridSix({ label, badgeSlot, title, features, featuresSlot, action, actionSlot, className, containerClassName, headerClassName, badgeClassName, titleClassName, gridClassName, cardClassName, actionContainerClassName, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureBadgeGridSixProps): React.JSX.Element;
+declare function FeatureBadgeGridSix({ label, badgeSlot, title, features, featuresSlot, action, actionSlot, className, containerClassName, spacing, headerClassName, badgeClassName, titleClassName, gridClassName, cardClassName, actionContainerClassName, background, pattern, patternOpacity, patternClassName, }: FeatureBadgeGridSixProps): React.JSX.Element;
 
 export { FeatureBadgeGridSix, type FeatureBadgeGridSixProps };

package/dist/feature-badge-grid-six.js

@@ -976,7 +976,8 @@ function FeatureBadgeGridSix({
   action,
   actionSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   headerClassName,
   badgeClassName,
   titleClassName,
@@ -984,7 +985,6 @@ function FeatureBadgeGridSix({
   cardClassName,
   actionContainerClassName,
   background,
-  spacing,
   pattern,
   patternOpacity,
   patternClassName
@@ -1016,12 +1016,54 @@ function FeatureBadgeGridSix({
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn("flex gap-6 space-y-4 rounded-lg md:block", cardClassName, feature.className),
+          className: cn(
+            "flex gap-6 space-y-4 rounded-lg md:block",
+            cardClassName,
+            feature.className
+          ),
           children: [
-            iconContent && /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground md:size-12", children: iconContent }),
+            iconContent && /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-card text-card-foreground md:size-12 shadow-sm border", children: iconContent }),
             /* @__PURE__ */ jsxs("div", { children: [
-              feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading }) : /* @__PURE__ */ jsx("div", { className: cn("font-medium md:mb-2 md:text-xl", feature.headingClassName), children: feature.heading })),
-              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), feature.descriptionClassName), children: feature.description }))
+              feature.heading && (typeof feature.heading === "string" ? /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: cn(
+                    "font-medium md:mb-2 md:text-xl",
+                    feature.headingClassName
+                  ),
+                  children: feature.heading
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "font-medium md:mb-2 md:text-xl",
+                    feature.headingClassName
+                  ),
+                  children: feature.heading
+                }
+              )),
+              feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-sm md:text-base",
+                    getTextColor(background, "muted"),
+                    feature.descriptionClassName
+                  ),
+                  children: feature.description
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-sm md:text-base",
+                    getTextColor(background, "muted"),
+                    feature.descriptionClassName
+                  ),
+                  children: feature.description
+                }
+              ))
             ] })
           ]
         },
@@ -1065,7 +1107,7 @@ function FeatureBadgeGridSix({
       }
     );
   }, [actionSlot, action]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
@@ -1075,14 +1117,47 @@ function FeatureBadgeGridSix({
       patternClassName,
       className,
       containerClassName,
-      children: [
-        (label || badgeSlot || title) && /* @__PURE__ */ jsxs("div", { className: cn("mb-12 flex max-w-3xl flex-col gap-4", headerClassName), children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        (label || badgeSlot || title) && /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", headerClassName), children: [
           badgeContent,
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-medium md:text-4xl lg:text-5xl", titleClassName), children: title }))
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-2xl font-bold md:text-3xl lg:text-4xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "text-2xl font-bold md:text-3xl lg:text-4xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ))
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("grid gap-12 md:grid-cols-2", gridClassName), children: featuresContent }),
-        (action || actionSlot) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex justify-center", actionContainerClassName), children: actionContent })
-      ]
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-6 md:gap-12 grid-cols-1 md:grid-cols-2",
+              gridClassName
+            ),
+            children: featuresContent
+          }
+        ),
+        (action || actionSlot) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("mt-8 flex justify-center", actionContainerClassName),
+            children: actionContent
+          }
+        )
+      ] })
     }
   );
 }

package/dist/feature-category-image-cards.cjs

@@ -487,7 +487,6 @@ function FeatureCategoryImageCards({
   features,
   featuresSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   titleClassName,
@@ -496,6 +495,7 @@ function FeatureCategoryImageCards({
   cardClassName,
   optixFlowConfig,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,

package/dist/feature-category-image-cards.d.cts

@@ -141,6 +141,6 @@ interface FeatureCategoryImageCardsProps {
  * />
  * ```
  */
-declare function FeatureCategoryImageCards({ badge, title, description, features, featuresSlot, className, containerClassName, headerClassName, badgeClassName, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureCategoryImageCardsProps): React.JSX.Element;
+declare function FeatureCategoryImageCards({ badge, title, description, features, featuresSlot, className, headerClassName, badgeClassName, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: FeatureCategoryImageCardsProps): React.JSX.Element;
 
 export { FeatureCategoryImageCards, type FeatureCategoryImageCardsProps };

package/dist/feature-category-image-cards.d.ts

@@ -141,6 +141,6 @@ interface FeatureCategoryImageCardsProps {
  * />
  * ```
  */
-declare function FeatureCategoryImageCards({ badge, title, description, features, featuresSlot, className, containerClassName, headerClassName, badgeClassName, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureCategoryImageCardsProps): React.JSX.Element;
+declare function FeatureCategoryImageCards({ badge, title, description, features, featuresSlot, className, headerClassName, badgeClassName, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, }: FeatureCategoryImageCardsProps): React.JSX.Element;
 
 export { FeatureCategoryImageCards, type FeatureCategoryImageCardsProps };

package/dist/feature-category-image-cards.js

@@ -481,7 +481,6 @@ function FeatureCategoryImageCards({
   features,
   featuresSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   titleClassName,
@@ -490,6 +489,7 @@ function FeatureCategoryImageCards({
   cardClassName,
   optixFlowConfig,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,

package/dist/feature-checklist-image.cjs

@@ -1036,7 +1036,7 @@ function FeatureChecklistImage({
       patternOpacity,
       patternClassName,
       className,
-      containerClassName: cn("max-w-6xl", containerClassName),
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -1050,7 +1050,7 @@ function FeatureChecklistImage({
               "div",
               {
                 className: cn(
-                  "px-4 md:px-6 lg:px-10 py-4 md:py-4 lg:py-0",
+                  "px-0 md:px-6 lg:px-10 py-4 md:py-0 flex flex-col gap-6 md:gap-10",
                   contentClassName
                 ),
                 children: [
@@ -1073,12 +1073,12 @@ function FeatureChecklistImage({
                       children: title
                     }
                   )),
-                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("relative", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", descriptionClassName), children: description })),
                   actionsContent && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       className: cn(
-                        "flex flex-wrap items-center gap-4 md:gap-2",
+                        "flex flex-wrap items-center gap-4",
                         actionsClassName
                       ),
                       children: actionsContent
@@ -1088,7 +1088,7 @@ function FeatureChecklistImage({
                     "ul",
                     {
                       className: cn(
-                        "mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0",
+                        "flex-wrap items-center space-y-2 md:flex",
                         checklistClassName
                       ),
                       children: checklistContent

package/dist/feature-checklist-image.js

@@ -1015,7 +1015,7 @@ function FeatureChecklistImage({
       patternOpacity,
       patternClassName,
       className,
-      containerClassName: cn("max-w-6xl", containerClassName),
+      containerClassName,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -1029,7 +1029,7 @@ function FeatureChecklistImage({
               "div",
               {
                 className: cn(
-                  "px-4 md:px-6 lg:px-10 py-4 md:py-4 lg:py-0",
+                  "px-0 md:px-6 lg:px-10 py-4 md:py-0 flex flex-col gap-6 md:gap-10",
                   contentClassName
                 ),
                 children: [
@@ -1052,12 +1052,12 @@ function FeatureChecklistImage({
                       children: title
                     }
                   )),
-                  description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("relative", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("relative", descriptionClassName), children: description })),
                   actionsContent && /* @__PURE__ */ jsx(
                     "div",
                     {
                       className: cn(
-                        "flex flex-wrap items-center gap-4 md:gap-2",
+                        "flex flex-wrap items-center gap-4",
                         actionsClassName
                       ),
                       children: actionsContent
@@ -1067,7 +1067,7 @@ function FeatureChecklistImage({
                     "ul",
                     {
                       className: cn(
-                        "mt-10 flex-wrap items-center gap-6 space-y-6 md:flex md:space-y-0",
+                        "flex-wrap items-center space-y-2 md:flex",
                         checklistClassName
                       ),
                       children: checklistContent

package/dist/feature-icon-grid-accent.cjs

@@ -543,7 +543,7 @@ function FeatureIconGridAccent({
   features,
   featuresSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   headerClassName,
   labelClassName,
   titleClassName,
@@ -551,7 +551,7 @@ function FeatureIconGridAccent({
   gridClassName,
   cardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -590,7 +590,7 @@ function FeatureIconGridAccent({
       );
     });
   }, [featuresSlot, features, cardClassName, background]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -600,7 +600,7 @@ function FeatureIconGridAccent({
       patternClassName,
       className,
       containerClassName,
-      children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
         (label || title || description) && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -634,13 +634,13 @@ function FeatureIconGridAccent({
           "div",
           {
             className: cn(
-              "mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2",
+              "mx-auto grid max-w-5xl gap-6 md:grid-cols-2",
               gridClassName
             ),
             children: featuresContent
           }
         )
-      ]
+      ] })
     }
   );
 }

package/dist/feature-icon-grid-accent.js

@@ -522,7 +522,7 @@ function FeatureIconGridAccent({
   features,
   featuresSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   headerClassName,
   labelClassName,
   titleClassName,
@@ -530,7 +530,7 @@ function FeatureIconGridAccent({
   gridClassName,
   cardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -569,7 +569,7 @@ function FeatureIconGridAccent({
       );
     });
   }, [featuresSlot, features, cardClassName, background]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
@@ -579,7 +579,7 @@ function FeatureIconGridAccent({
       patternClassName,
       className,
       containerClassName,
-      children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
         (label || title || description) && /* @__PURE__ */ jsx(
           "div",
           {
@@ -613,13 +613,13 @@ function FeatureIconGridAccent({
           "div",
           {
             className: cn(
-              "mx-auto mt-20 grid max-w-5xl gap-6 md:grid-cols-2",
+              "mx-auto grid max-w-5xl gap-6 md:grid-cols-2",
               gridClassName
             ),
             children: featuresContent
           }
         )
-      ]
+      ] })
     }
   );
 }