@opensite/ui 0.7.2 → 0.7.4

package/dist/carousel-animated-sections.cjs

@@ -931,13 +931,23 @@ var Section = React6__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var BRIGHTNESS_CLASS_MAP = {
+  "10": "brightness-[.1]",
+  "20": "brightness-[.2]",
+  "25": "brightness-[.25]",
+  "30": "brightness-[.3]",
+  "40": "brightness-[.4]",
+  "50": "brightness-50",
+  "75": "brightness-75",
+  "100": "brightness-100"
+};
 function CarouselAnimatedSections({
   sections,
   sectionsSlot,
   actionsSlot,
   actions,
   className,
-  containerClassName = "h-full",
+  containerClassName = "h-full flex flex-col justify-center",
   contentClassName,
   subtitleClassName,
   titleClassName,
@@ -946,7 +956,7 @@ function CarouselAnimatedSections({
   navigationClassName,
   arrowsClassName,
   counterClassName,
-  overlayClassName,
+  slideMediaBrightness = "50",
   optixFlowConfig,
   background = "dark",
   spacing = "py-0",
@@ -1001,7 +1011,7 @@ function CarouselAnimatedSections({
     })
   };
   const currentSection = sections?.[currentIndex];
-  const renderActions = () => {
+  const actionElements = React6__namespace.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1011,11 +1021,8 @@ function CarouselAnimatedSections({
           onClick: action.onClick,
           asButton: true,
           variant: action.variant,
-          size: action.size || "lg",
-          className: cn(
-            "bg-white text-black hover:bg-white/90",
-            action.className
-          ),
+          size: action.size,
+          className: cn(action.className),
           children: [
             action.label,
             action.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: action.icon }),
@@ -1026,7 +1033,7 @@ function CarouselAnimatedSections({
       ));
     }
     return null;
-  };
+  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1038,7 +1045,7 @@ function CarouselAnimatedSections({
       containerMaxWidth,
       containerClassName,
       children: [
-        sectionsSlot ? sectionsSlot : currentSection ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        sectionsSlot ? sectionsSlot : currentSection ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
             custom: direction,
@@ -1049,26 +1056,19 @@ function CarouselAnimatedSections({
             transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] },
             onAnimationComplete: () => setIsAnimating(false),
             className: cn("absolute inset-0", currentSection?.className),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
-                {
-                  src: currentSection?.image,
-                  alt: typeof currentSection?.title === "string" ? currentSection?.title : `Section ${currentSection?.id}`,
-                  className: cn(
-                    "h-full w-full object-cover",
-                    currentSection?.imageClassName
-                  ),
-                  optixFlowConfig
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn("absolute inset-0 bg-black/50", overlayClassName)
-                }
-              )
-            ]
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: currentSection?.image,
+                alt: typeof currentSection?.title === "string" ? currentSection?.title : `Section ${currentSection?.id}`,
+                className: cn(
+                  "h-full w-full object-cover",
+                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                  currentSection?.imageClassName
+                ),
+                optixFlowConfig
+              }
+            )
           },
           currentIndex
         ) }) : null,
@@ -1086,7 +1086,7 @@ function CarouselAnimatedSections({
                 animate: { opacity: 1, y: 0 },
                 exit: { opacity: 0, y: -40 },
                 transition: { duration: 0.4, delay: 0.2 },
-                className: "max-w-2xl text-white",
+                className: "max-w-2xl text-white text-shadow",
                 children: [
                   currentSection?.subtitle && (typeof currentSection?.subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                     "p",
@@ -1118,7 +1118,7 @@ function CarouselAnimatedSections({
                       children: currentSection?.description
                     }
                   ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", descriptionClassName), children: currentSection?.description })),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: renderActions() || currentSection?.ctaText && /* @__PURE__ */ jsxRuntime.jsxs(
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionElements || currentSection?.ctaText && /* @__PURE__ */ jsxRuntime.jsxs(
                     Pressable,
                     {
                       href: currentSection?.ctaHref,

package/dist/carousel-animated-sections.d.cts

@@ -121,9 +121,10 @@ interface CarouselAnimatedSectionsProps {
      */
     counterClassName?: string;
     /**
-     * Additional CSS classes for the overlay
+     * Granular control of brightness for slide media
+     * Values 10-40 use arbitrary Tailwind values for finer control on bright images
      */
-    overlayClassName?: string;
+    slideMediaBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
     /**
      * OptixFlow image optimization configuration
      */
@@ -149,6 +150,6 @@ interface CarouselAnimatedSectionsProps {
      */
     containerMaxWidth?: ContainerMaxWidth;
 }
-declare function CarouselAnimatedSections({ sections, sectionsSlot, actionsSlot, actions, className, containerClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, arrowsClassName, counterClassName, overlayClassName, optixFlowConfig, background, spacing, containerMaxWidth, pattern, patternOpacity, }: CarouselAnimatedSectionsProps): React.JSX.Element;
+declare function CarouselAnimatedSections({ sections, sectionsSlot, actionsSlot, actions, className, containerClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, arrowsClassName, counterClassName, slideMediaBrightness, optixFlowConfig, background, spacing, containerMaxWidth, pattern, patternOpacity, }: CarouselAnimatedSectionsProps): React.JSX.Element;
 
 export { type AnimatedSection, CarouselAnimatedSections, type CarouselAnimatedSectionsProps };

package/dist/carousel-animated-sections.d.ts

@@ -121,9 +121,10 @@ interface CarouselAnimatedSectionsProps {
      */
     counterClassName?: string;
     /**
-     * Additional CSS classes for the overlay
+     * Granular control of brightness for slide media
+     * Values 10-40 use arbitrary Tailwind values for finer control on bright images
      */
-    overlayClassName?: string;
+    slideMediaBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
     /**
      * OptixFlow image optimization configuration
      */
@@ -149,6 +150,6 @@ interface CarouselAnimatedSectionsProps {
      */
     containerMaxWidth?: ContainerMaxWidth;
 }
-declare function CarouselAnimatedSections({ sections, sectionsSlot, actionsSlot, actions, className, containerClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, arrowsClassName, counterClassName, overlayClassName, optixFlowConfig, background, spacing, containerMaxWidth, pattern, patternOpacity, }: CarouselAnimatedSectionsProps): React.JSX.Element;
+declare function CarouselAnimatedSections({ sections, sectionsSlot, actionsSlot, actions, className, containerClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, arrowsClassName, counterClassName, slideMediaBrightness, optixFlowConfig, background, spacing, containerMaxWidth, pattern, patternOpacity, }: CarouselAnimatedSectionsProps): React.JSX.Element;
 
 export { type AnimatedSection, CarouselAnimatedSections, type CarouselAnimatedSectionsProps };

package/dist/carousel-animated-sections.js

@@ -910,13 +910,23 @@ var Section = React6__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var BRIGHTNESS_CLASS_MAP = {
+  "10": "brightness-[.1]",
+  "20": "brightness-[.2]",
+  "25": "brightness-[.25]",
+  "30": "brightness-[.3]",
+  "40": "brightness-[.4]",
+  "50": "brightness-50",
+  "75": "brightness-75",
+  "100": "brightness-100"
+};
 function CarouselAnimatedSections({
   sections,
   sectionsSlot,
   actionsSlot,
   actions,
   className,
-  containerClassName = "h-full",
+  containerClassName = "h-full flex flex-col justify-center",
   contentClassName,
   subtitleClassName,
   titleClassName,
@@ -925,7 +935,7 @@ function CarouselAnimatedSections({
   navigationClassName,
   arrowsClassName,
   counterClassName,
-  overlayClassName,
+  slideMediaBrightness = "50",
   optixFlowConfig,
   background = "dark",
   spacing = "py-0",
@@ -980,7 +990,7 @@ function CarouselAnimatedSections({
     })
   };
   const currentSection = sections?.[currentIndex];
-  const renderActions = () => {
+  const actionElements = React6.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => /* @__PURE__ */ jsxs(
@@ -990,11 +1000,8 @@ function CarouselAnimatedSections({
           onClick: action.onClick,
           asButton: true,
           variant: action.variant,
-          size: action.size || "lg",
-          className: cn(
-            "bg-white text-black hover:bg-white/90",
-            action.className
-          ),
+          size: action.size,
+          className: cn(action.className),
           children: [
             action.label,
             action.icon && /* @__PURE__ */ jsx("span", { className: "ml-2", children: action.icon }),
@@ -1005,7 +1012,7 @@ function CarouselAnimatedSections({
       ));
     }
     return null;
-  };
+  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1017,7 +1024,7 @@ function CarouselAnimatedSections({
       containerMaxWidth,
       containerClassName,
       children: [
-        sectionsSlot ? sectionsSlot : currentSection ? /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxs(
+        sectionsSlot ? sectionsSlot : currentSection ? /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsx(
           motion.div,
           {
             custom: direction,
@@ -1028,26 +1035,19 @@ function CarouselAnimatedSections({
             transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] },
             onAnimationComplete: () => setIsAnimating(false),
             className: cn("absolute inset-0", currentSection?.className),
-            children: [
-              /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: currentSection?.image,
-                  alt: typeof currentSection?.title === "string" ? currentSection?.title : `Section ${currentSection?.id}`,
-                  className: cn(
-                    "h-full w-full object-cover",
-                    currentSection?.imageClassName
-                  ),
-                  optixFlowConfig
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn("absolute inset-0 bg-black/50", overlayClassName)
-                }
-              )
-            ]
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: currentSection?.image,
+                alt: typeof currentSection?.title === "string" ? currentSection?.title : `Section ${currentSection?.id}`,
+                className: cn(
+                  "h-full w-full object-cover",
+                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                  currentSection?.imageClassName
+                ),
+                optixFlowConfig
+              }
+            )
           },
           currentIndex
         ) }) : null,
@@ -1065,7 +1065,7 @@ function CarouselAnimatedSections({
                 animate: { opacity: 1, y: 0 },
                 exit: { opacity: 0, y: -40 },
                 transition: { duration: 0.4, delay: 0.2 },
-                className: "max-w-2xl text-white",
+                className: "max-w-2xl text-white text-shadow",
                 children: [
                   currentSection?.subtitle && (typeof currentSection?.subtitle === "string" ? /* @__PURE__ */ jsx(
                     "p",
@@ -1097,7 +1097,7 @@ function CarouselAnimatedSections({
                       children: currentSection?.description
                     }
                   ) : /* @__PURE__ */ jsx("div", { className: cn("mb-8", descriptionClassName), children: currentSection?.description })),
-                  /* @__PURE__ */ jsx("div", { className: actionsClassName, children: renderActions() || currentSection?.ctaText && /* @__PURE__ */ jsxs(
+                  /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionElements || currentSection?.ctaText && /* @__PURE__ */ jsxs(
                     Pressable,
                     {
                       href: currentSection?.ctaHref,

package/dist/carousel-feature-badge.cjs

@@ -1154,6 +1154,11 @@ var Section = React4__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var SLIDE_LAYOUT_ASPECT_MAP = {
+  horizontal: "aspect-video",
+  vertical: "aspect-[9/16]",
+  square: "aspect-square"
+};
 function CarouselFeatureBadge({
   badge,
   heading,
@@ -1169,23 +1174,34 @@ function CarouselFeatureBadge({
   carouselClassName,
   carouselItemClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
-  patternOpacity
+  patternOpacity,
+  slideLayoutVariant = "square",
+  containerMaxWidth = "2xl"
 }) {
   const renderCarouselItems = () => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: carouselItemClassName, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-video items-center justify-center overflow-hidden rounded-md bg-muted p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
+    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: carouselItemClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        src: item.src,
-        alt: item.alt,
-        className: cn("h-full w-full object-cover", item.className),
-        optixFlowConfig
+        className: cn(
+          "flex items-center justify-center overflow-hidden rounded-2xl",
+          SLIDE_LAYOUT_ASPECT_MAP[slideLayoutVariant]
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: item.src,
+            alt: item.alt,
+            className: cn("h-full w-full object-cover", item.className),
+            optixFlowConfig
+          }
+        )
       }
-    ) }) }, index));
+    ) }, index));
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -1195,14 +1211,39 @@ function CarouselFeatureBadge({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container mx-auto", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-end justify-end gap-10 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-start gap-4", contentClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: badge }) : badge }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-left text-xl font-normal tracking-tighter md:text-3xl lg:max-w-xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-xl text-left text-lg leading-relaxed tracking-tight text-muted-foreground lg:max-w-sm", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-          ] })
-        ] }),
+      containerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-end justify-end gap-6 md:gap-20 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("flex flex-col items-start gap-4", contentClassName),
+            children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: badge }) : badge }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-left text-xl font-semibold md:text-3xl lg:max-w-xl lg:text-4xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "max-w-xl text-left text-lg leading-snug lg:max-w-sm",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full max-w-full px-6", carouselClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(Carousel, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { children: renderCarouselItems() }),
           /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, {}),

package/dist/carousel-feature-badge.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+import { f as SectionBackground, g as SectionSpacing, e as ContainerMaxWidth } from './community-initiatives-Sm_ZSgyv.cjs';
 import { I as ImageItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -21,6 +21,10 @@ import 'class-variance-authority/types';
  */
 
 interface CarouselFeatureBadgeProps {
+    /**
+     * Variant of the slide layout
+     */
+    slideLayoutVariant?: "horizontal" | "vertical" | "square";
     /**
      * Badge/eyebrow content above heading
      */
@@ -93,7 +97,11 @@ interface CarouselFeatureBadgeProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Optional max width for the content container
+     */
+    containerMaxWidth?: ContainerMaxWidth;
 }
-declare function CarouselFeatureBadge({ badge, heading, description, items, itemsSlot, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, carouselClassName, carouselItemClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselFeatureBadgeProps): React.JSX.Element;
+declare function CarouselFeatureBadge({ badge, heading, description, items, itemsSlot, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, carouselClassName, carouselItemClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideLayoutVariant, containerMaxWidth, }: CarouselFeatureBadgeProps): React.JSX.Element;
 
 export { CarouselFeatureBadge, type CarouselFeatureBadgeProps };

package/dist/carousel-feature-badge.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+import { f as SectionBackground, g as SectionSpacing, e as ContainerMaxWidth } from './community-initiatives-BeWIIjA4.js';
 import { I as ImageItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -21,6 +21,10 @@ import 'class-variance-authority/types';
  */
 
 interface CarouselFeatureBadgeProps {
+    /**
+     * Variant of the slide layout
+     */
+    slideLayoutVariant?: "horizontal" | "vertical" | "square";
     /**
      * Badge/eyebrow content above heading
      */
@@ -93,7 +97,11 @@ interface CarouselFeatureBadgeProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Optional max width for the content container
+     */
+    containerMaxWidth?: ContainerMaxWidth;
 }
-declare function CarouselFeatureBadge({ badge, heading, description, items, itemsSlot, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, carouselClassName, carouselItemClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselFeatureBadgeProps): React.JSX.Element;
+declare function CarouselFeatureBadge({ badge, heading, description, items, itemsSlot, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, carouselClassName, carouselItemClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideLayoutVariant, containerMaxWidth, }: CarouselFeatureBadgeProps): React.JSX.Element;
 
 export { CarouselFeatureBadge, type CarouselFeatureBadgeProps };

package/dist/carousel-feature-badge.js

@@ -1130,6 +1130,11 @@ var Section = React4__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var SLIDE_LAYOUT_ASPECT_MAP = {
+  horizontal: "aspect-video",
+  vertical: "aspect-[9/16]",
+  square: "aspect-square"
+};
 function CarouselFeatureBadge({
   badge,
   heading,
@@ -1145,23 +1150,34 @@ function CarouselFeatureBadge({
   carouselClassName,
   carouselItemClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
-  patternOpacity
+  patternOpacity,
+  slideLayoutVariant = "square",
+  containerMaxWidth = "2xl"
 }) {
   const renderCarouselItems = () => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, { className: carouselItemClassName, children: /* @__PURE__ */ jsx("div", { className: "flex aspect-video items-center justify-center overflow-hidden rounded-md bg-muted p-6", children: /* @__PURE__ */ jsx(
-      Img,
+    return items.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, { className: carouselItemClassName, children: /* @__PURE__ */ jsx(
+      "div",
       {
-        src: item.src,
-        alt: item.alt,
-        className: cn("h-full w-full object-cover", item.className),
-        optixFlowConfig
+        className: cn(
+          "flex items-center justify-center overflow-hidden rounded-2xl",
+          SLIDE_LAYOUT_ASPECT_MAP[slideLayoutVariant]
+        ),
+        children: /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: item.src,
+            alt: item.alt,
+            className: cn("h-full w-full object-cover", item.className),
+            optixFlowConfig
+          }
+        )
       }
-    ) }) }, index));
+    ) }, index));
   };
   return /* @__PURE__ */ jsx(
     Section,
@@ -1171,14 +1187,39 @@ function CarouselFeatureBadge({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container mx-auto", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-end justify-end gap-10 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start gap-4", contentClassName), children: [
-          badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { children: badge }) : badge }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-left text-xl font-normal tracking-tighter md:text-3xl lg:max-w-xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-xl text-left text-lg leading-relaxed tracking-tight text-muted-foreground lg:max-w-sm", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] })
-        ] }),
+      containerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-end justify-end gap-6 md:gap-20 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex flex-col items-start gap-4", contentClassName),
+            children: [
+              badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { children: badge }) : badge }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-left text-xl font-semibold md:text-3xl lg:max-w-xl lg:text-4xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "max-w-xl text-left text-lg leading-snug lg:max-w-sm",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: cn("w-full max-w-full px-6", carouselClassName), children: /* @__PURE__ */ jsxs(Carousel, { children: [
           /* @__PURE__ */ jsx(CarouselContent, { children: renderCarouselItems() }),
           /* @__PURE__ */ jsx(CarouselPrevious, {}),