@opensite/ui 1.2.5 → 1.2.6

package/dist/feature-accordion-image.cjs

@@ -637,7 +637,7 @@ function FeatureAccordionImage({
             AccordionTrigger,
             {
               className: cn(
-                "text-left text-lg font-medium",
+                "text-left text-md md:text-lg font-medium",
                 item.triggerClassName
               ),
               children: item.title
@@ -685,12 +685,12 @@ function FeatureAccordionImage({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-6 md:space-y-16", children: [
         (title || description) && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "text-center max-w-full md:max-w-md text-balance",
+              "text-left md:text-center max-w-full md:max-w-md text-balance",
               headerClassName
             ),
             children: [
@@ -698,7 +698,7 @@ function FeatureAccordionImage({
                 "h2",
                 {
                   className: cn(
-                    "text-xl font-semibold md:text-2xl lg:text-3xl",
+                    "text-2xl font-semibold md:text-3xl lg:text-4xl",
                     titleClassName
                   ),
                   children: title

package/dist/feature-accordion-image.js

@@ -615,7 +615,7 @@ function FeatureAccordionImage({
             AccordionTrigger,
             {
               className: cn(
-                "text-left text-lg font-medium",
+                "text-left text-md md:text-lg font-medium",
                 item.triggerClassName
               ),
               children: item.title
@@ -663,12 +663,12 @@ function FeatureAccordionImage({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-6 md:space-y-16", children: [
         (title || description) && /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "text-center max-w-full md:max-w-md text-balance",
+              "text-left md:text-center max-w-full md:max-w-md text-balance",
               headerClassName
             ),
             children: [
@@ -676,7 +676,7 @@ function FeatureAccordionImage({
                 "h2",
                 {
                   className: cn(
-                    "text-xl font-semibold md:text-2xl lg:text-3xl",
+                    "text-2xl font-semibold md:text-3xl lg:text-4xl",
                     titleClassName
                   ),
                   children: title

package/dist/feature-animated-carousel.cjs

@@ -33,36 +33,6 @@ var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1022,17 +992,17 @@ var FeatureCard = React6__namespace.memo(
           borderRadius: "24px"
         },
         className: cn(
-          "relative flex items-start gap-4 overflow-hidden bg-background text-foreground md:w-fit md:max-w-sm",
-          isActive ? "shadow-xl" : "cursor-pointer shadow-none"
+          "relative flex items-start gap-4 bg-background text-foreground md:w-fit md:max-w-sm",
+          isActive ? "shadow-xl overflow-visible" : "cursor-pointer shadow-none hover:shadow-xl transition-shadow duration-500 overflow-hidden"
         ),
         onClick,
         children: [
-          isActive && feature.href && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 right-4 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          isActive && feature.href && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
               href: feature.href,
               size: "icon-lg",
-              className: "text-foreground",
+              className: "bg-primary text-primary-foreground",
               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
             }
           ) }),
@@ -1187,7 +1157,7 @@ var FeaturesMobile = React6__namespace.memo(
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
+            className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
             onClick: handlePrevious,
             disabled: isPreviousDisabled,
             type: "button",
@@ -1197,7 +1167,7 @@ var FeaturesMobile = React6__namespace.memo(
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
+            className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
             onClick: handleNext,
             disabled: isNextDisabled,
             type: "button",
@@ -1221,6 +1191,7 @@ function FeatureAnimatedCarousel({
   patternOpacity,
   patternClassName,
   headerClassName,
+  blockCardClassName,
   spacing = "py-12 md:py-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
@@ -1279,9 +1250,7 @@ function FeatureAnimatedCarousel({
           "div",
           {
             className: cn(
-              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background)
+              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl bg-muted p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
             )
           }
         )
@@ -1298,40 +1267,51 @@ function FeatureAnimatedCarousel({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-6 text-left", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h2",
-            {
-              className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
-                titleClassName
-              ),
-              children: title
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
-                titleClassName
-              ),
-              children: title
-            }
-          )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn("max-w-lg md:max-w-md", descriptionClassName),
-              children: description
-            }
-          ))
-        ] }) : null,
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-4 md:gap-6 text-left",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
+              "relative flex min-h-full md:min-h-[500px] flex-col-reverse gap-5 md:gap-8 bg-muted overflow-hidden rounded-3xl p-4 md:p-6 md:flex-row md:items-center lg:p-12 lg:min-h-[600px]",
+              blockCardClassName
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1358,13 +1338,13 @@ function FeatureAnimatedCarousel({
                   isNextDisabled
                 }
               ),
-              currentFeature?.image && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-[250px] md:h-auto overflow-hidden rounded-2xl md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2 shadow-xl", children: [
-                currentFeature.href && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center md:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+              currentFeature?.image && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-[250px] md:h-auto md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2", children: [
+                currentFeature.href && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10 rounded-full h-fit w-fit shadow-md hover:shadow-2xl flex items-center justify-center md:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
                   Pressable,
                   {
                     href: currentFeature.href,
                     size: "icon-lg",
-                    className: "text-foreground",
+                    className: "bg-primary text-primary-foreground",
                     children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
                   }
                 ) }),
@@ -1378,9 +1358,9 @@ function FeatureAnimatedCarousel({
                     exit: "exit",
                     transition: {
                       x: { type: "spring", stiffness: 300, damping: 30 },
-                      opacity: { duration: 0.2 }
+                      opacity: { duration: 0.3 }
                     },
-                    className: "h-full w-full",
+                    className: "h-full w-full shadow-xl overflow-hidden rounded-2xl",
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       img.Img,
                       {

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

@@ -77,6 +77,10 @@ interface FeatureAnimatedCarouselProps {
      * Additional CSS classes for the content wrapper
      */
     contentClassName?: string;
+    /**
+     * CSS classes for the block's card container
+     */
+    blockCardClassName?: string;
     /**
      * OptixFlow image optimization configuration
      */
@@ -123,6 +127,6 @@ interface FeatureAnimatedCarouselProps {
  * />
  * ```
  */
-declare function FeatureAnimatedCarousel({ title, description, titleClassName, descriptionClassName, features, className, optixFlowConfig, background, pattern, patternOpacity, patternClassName, headerClassName, spacing, containerClassName, }: FeatureAnimatedCarouselProps): react_jsx_runtime.JSX.Element;
+declare function FeatureAnimatedCarousel({ title, description, titleClassName, descriptionClassName, features, className, optixFlowConfig, background, pattern, patternOpacity, patternClassName, headerClassName, blockCardClassName, spacing, containerClassName, }: FeatureAnimatedCarouselProps): react_jsx_runtime.JSX.Element;
 
 export { FeatureAnimatedCarousel, type FeatureAnimatedCarouselItem, type FeatureAnimatedCarouselProps };

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

@@ -77,6 +77,10 @@ interface FeatureAnimatedCarouselProps {
      * Additional CSS classes for the content wrapper
      */
     contentClassName?: string;
+    /**
+     * CSS classes for the block's card container
+     */
+    blockCardClassName?: string;
     /**
      * OptixFlow image optimization configuration
      */
@@ -123,6 +127,6 @@ interface FeatureAnimatedCarouselProps {
  * />
  * ```
  */
-declare function FeatureAnimatedCarousel({ title, description, titleClassName, descriptionClassName, features, className, optixFlowConfig, background, pattern, patternOpacity, patternClassName, headerClassName, spacing, containerClassName, }: FeatureAnimatedCarouselProps): react_jsx_runtime.JSX.Element;
+declare function FeatureAnimatedCarousel({ title, description, titleClassName, descriptionClassName, features, className, optixFlowConfig, background, pattern, patternOpacity, patternClassName, headerClassName, blockCardClassName, spacing, containerClassName, }: FeatureAnimatedCarouselProps): react_jsx_runtime.JSX.Element;
 
 export { FeatureAnimatedCarousel, type FeatureAnimatedCarouselItem, type FeatureAnimatedCarouselProps };

package/dist/feature-animated-carousel.js

@@ -12,36 +12,6 @@ import { cva } from 'class-variance-authority';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1001,17 +971,17 @@ var FeatureCard = React6.memo(
           borderRadius: "24px"
         },
         className: cn(
-          "relative flex items-start gap-4 overflow-hidden bg-background text-foreground md:w-fit md:max-w-sm",
-          isActive ? "shadow-xl" : "cursor-pointer shadow-none"
+          "relative flex items-start gap-4 bg-background text-foreground md:w-fit md:max-w-sm",
+          isActive ? "shadow-xl overflow-visible" : "cursor-pointer shadow-none hover:shadow-xl transition-shadow duration-500 overflow-hidden"
         ),
         onClick,
         children: [
-          isActive && feature.href && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 right-4 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          isActive && feature.href && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center z-10", children: /* @__PURE__ */ jsx(
             Pressable,
             {
               href: feature.href,
               size: "icon-lg",
-              className: "text-foreground",
+              className: "bg-primary text-primary-foreground",
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
             }
           ) }),
@@ -1166,7 +1136,7 @@ var FeaturesMobile = React6.memo(
         /* @__PURE__ */ jsx(
           "button",
           {
-            className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
+            className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
             onClick: handlePrevious,
             disabled: isPreviousDisabled,
             type: "button",
@@ -1176,7 +1146,7 @@ var FeaturesMobile = React6.memo(
         /* @__PURE__ */ jsx(
           "button",
           {
-            className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
+            className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
             onClick: handleNext,
             disabled: isNextDisabled,
             type: "button",
@@ -1200,6 +1170,7 @@ function FeatureAnimatedCarousel({
   patternOpacity,
   patternClassName,
   headerClassName,
+  blockCardClassName,
   spacing = "py-12 md:py-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
@@ -1258,9 +1229,7 @@ function FeatureAnimatedCarousel({
           "div",
           {
             className: cn(
-              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background)
+              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl bg-muted p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
             )
           }
         )
@@ -1277,40 +1246,51 @@ function FeatureAnimatedCarousel({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 text-left", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
-            "h2",
-            {
-              className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
-                titleClassName
-              ),
-              children: title
-            }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
-                titleClassName
-              ),
-              children: title
-            }
-          )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn("max-w-lg md:max-w-md", descriptionClassName),
-              children: description
-            }
-          ))
-        ] }) : null,
+        title || description ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-4 md:gap-6 text-left",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ) : null,
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
+              "relative flex min-h-full md:min-h-[500px] flex-col-reverse gap-5 md:gap-8 bg-muted overflow-hidden rounded-3xl p-4 md:p-6 md:flex-row md:items-center lg:p-12 lg:min-h-[600px]",
+              blockCardClassName
             ),
             children: [
               /* @__PURE__ */ jsx(
@@ -1337,13 +1317,13 @@ function FeatureAnimatedCarousel({
                   isNextDisabled
                 }
               ),
-              currentFeature?.image && /* @__PURE__ */ jsxs("div", { className: "relative w-full h-[250px] md:h-auto overflow-hidden rounded-2xl md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2 shadow-xl", children: [
-                currentFeature.href && /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center md:hidden", children: /* @__PURE__ */ jsx(
+              currentFeature?.image && /* @__PURE__ */ jsxs("div", { className: "relative w-full h-[250px] md:h-auto md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2", children: [
+                currentFeature.href && /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10 rounded-full h-fit w-fit shadow-md hover:shadow-2xl flex items-center justify-center md:hidden", children: /* @__PURE__ */ jsx(
                   Pressable,
                   {
                     href: currentFeature.href,
                     size: "icon-lg",
-                    className: "text-foreground",
+                    className: "bg-primary text-primary-foreground",
                     children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
                   }
                 ) }),
@@ -1357,9 +1337,9 @@ function FeatureAnimatedCarousel({
                     exit: "exit",
                     transition: {
                       x: { type: "spring", stiffness: 300, damping: 30 },
-                      opacity: { duration: 0.2 }
+                      opacity: { duration: 0.3 }
                     },
-                    className: "h-full w-full",
+                    className: "h-full w-full shadow-xl overflow-hidden rounded-2xl",
                     children: /* @__PURE__ */ jsx(
                       Img,
                       {

package/dist/feature-carousel-progress.cjs

@@ -1357,10 +1357,22 @@ function FeatureCarouselProgress({
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
                   children: description
                 }
               ))

package/dist/feature-carousel-progress.js

@@ -1332,10 +1332,22 @@ function FeatureCarouselProgress({
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
                   children: description
                 }
               ))

package/dist/registry.cjs

@@ -24432,10 +24432,22 @@ function FeatureCarouselProgress({
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
                   children: description
                 }
               ))
@@ -27411,7 +27423,7 @@ function FeatureAccordionImage({
             AccordionTrigger,
             {
               className: cn(
-                "text-left text-lg font-medium",
+                "text-left text-md md:text-lg font-medium",
                 item.triggerClassName
               ),
               children: item.title
@@ -27459,12 +27471,12 @@ function FeatureAccordionImage({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-6 md:space-y-16", children: [
         (title || description) && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "text-center max-w-full md:max-w-md text-balance",
+              "text-left md:text-center max-w-full md:max-w-md text-balance",
               headerClassName
             ),
             children: [
@@ -27472,7 +27484,7 @@ function FeatureAccordionImage({
                 "h2",
                 {
                   className: cn(
-                    "text-xl font-semibold md:text-2xl lg:text-3xl",
+                    "text-2xl font-semibold md:text-3xl lg:text-4xl",
                     titleClassName
                   ),
                   children: title
@@ -41856,17 +41868,17 @@ var FeatureCard = React52__namespace.memo(
           borderRadius: "24px"
         },
         className: cn(
-          "relative flex items-start gap-4 overflow-hidden bg-background text-foreground md:w-fit md:max-w-sm",
-          isActive ? "shadow-xl" : "cursor-pointer shadow-none"
+          "relative flex items-start gap-4 bg-background text-foreground md:w-fit md:max-w-sm",
+          isActive ? "shadow-xl overflow-visible" : "cursor-pointer shadow-none hover:shadow-xl transition-shadow duration-500 overflow-hidden"
         ),
         onClick,
         children: [
-          isActive && feature.href && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 right-4 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          isActive && feature.href && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
               href: feature.href,
               size: "icon-lg",
-              className: "text-foreground",
+              className: "bg-primary text-primary-foreground",
               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
             }
           ) }),
@@ -42021,7 +42033,7 @@ var FeaturesMobile = React52__namespace.memo(
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
+            className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
             onClick: handlePrevious,
             disabled: isPreviousDisabled,
             type: "button",
@@ -42031,7 +42043,7 @@ var FeaturesMobile = React52__namespace.memo(
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
+            className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
             onClick: handleNext,
             disabled: isNextDisabled,
             type: "button",
@@ -42055,6 +42067,7 @@ function FeatureAnimatedCarousel({
   patternOpacity,
   patternClassName,
   headerClassName,
+  blockCardClassName,
   spacing = "py-12 md:py-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
@@ -42113,9 +42126,7 @@ function FeatureAnimatedCarousel({
           "div",
           {
             className: cn(
-              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background)
+              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl bg-muted p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
             )
           }
         )
@@ -42132,40 +42143,51 @@ function FeatureAnimatedCarousel({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-6 text-left", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h2",
-            {
-              className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
-                titleClassName
-              ),
-              children: title
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
-                titleClassName
-              ),
-              children: title
-            }
-          )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn("max-w-lg md:max-w-md", descriptionClassName),
-              children: description
-            }
-          ))
-        ] }) : null,
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-4 md:gap-6 text-left",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
+              "relative flex min-h-full md:min-h-[500px] flex-col-reverse gap-5 md:gap-8 bg-muted overflow-hidden rounded-3xl p-4 md:p-6 md:flex-row md:items-center lg:p-12 lg:min-h-[600px]",
+              blockCardClassName
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -42192,13 +42214,13 @@ function FeatureAnimatedCarousel({
                   isNextDisabled
                 }
               ),
-              currentFeature?.image && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-[250px] md:h-auto overflow-hidden rounded-2xl md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2 shadow-xl", children: [
-                currentFeature.href && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center md:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+              currentFeature?.image && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-[250px] md:h-auto md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2", children: [
+                currentFeature.href && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10 rounded-full h-fit w-fit shadow-md hover:shadow-2xl flex items-center justify-center md:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
                   Pressable,
                   {
                     href: currentFeature.href,
                     size: "icon-lg",
-                    className: "text-foreground",
+                    className: "bg-primary text-primary-foreground",
                     children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
                   }
                 ) }),
@@ -42212,9 +42234,9 @@ function FeatureAnimatedCarousel({
                     exit: "exit",
                     transition: {
                       x: { type: "spring", stiffness: 300, damping: 30 },
-                      opacity: { duration: 0.2 }
+                      opacity: { duration: 0.3 }
                     },
-                    className: "h-full w-full",
+                    className: "h-full w-full shadow-xl overflow-hidden rounded-2xl",
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       img.Img,
                       {

package/dist/registry.js

@@ -24392,10 +24392,22 @@ function FeatureCarouselProgress({
                   children: title
                 }
               )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  className: cn(
+                    "max-w-lg md:max-w-md text-balance",
+                    descriptionClassName
+                  ),
                   children: description
                 }
               ))
@@ -27371,7 +27383,7 @@ function FeatureAccordionImage({
             AccordionTrigger,
             {
               className: cn(
-                "text-left text-lg font-medium",
+                "text-left text-md md:text-lg font-medium",
                 item.triggerClassName
               ),
               children: item.title
@@ -27419,12 +27431,12 @@ function FeatureAccordionImage({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-6 md:space-y-16", children: [
         (title || description) && /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "text-center max-w-full md:max-w-md text-balance",
+              "text-left md:text-center max-w-full md:max-w-md text-balance",
               headerClassName
             ),
             children: [
@@ -27432,7 +27444,7 @@ function FeatureAccordionImage({
                 "h2",
                 {
                   className: cn(
-                    "text-xl font-semibold md:text-2xl lg:text-3xl",
+                    "text-2xl font-semibold md:text-3xl lg:text-4xl",
                     titleClassName
                   ),
                   children: title
@@ -41816,17 +41828,17 @@ var FeatureCard = React52.memo(
           borderRadius: "24px"
         },
         className: cn(
-          "relative flex items-start gap-4 overflow-hidden bg-background text-foreground md:w-fit md:max-w-sm",
-          isActive ? "shadow-xl" : "cursor-pointer shadow-none"
+          "relative flex items-start gap-4 bg-background text-foreground md:w-fit md:max-w-sm",
+          isActive ? "shadow-xl overflow-visible" : "cursor-pointer shadow-none hover:shadow-xl transition-shadow duration-500 overflow-hidden"
         ),
         onClick,
         children: [
-          isActive && feature.href && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 right-4 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          isActive && feature.href && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center z-10", children: /* @__PURE__ */ jsx(
             Pressable,
             {
               href: feature.href,
               size: "icon-lg",
-              className: "text-foreground",
+              className: "bg-primary text-primary-foreground",
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
             }
           ) }),
@@ -41981,7 +41993,7 @@ var FeaturesMobile = React52.memo(
         /* @__PURE__ */ jsx(
           "button",
           {
-            className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
+            className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
             onClick: handlePrevious,
             disabled: isPreviousDisabled,
             type: "button",
@@ -41991,7 +42003,7 @@ var FeaturesMobile = React52.memo(
         /* @__PURE__ */ jsx(
           "button",
           {
-            className: "rounded-full border bg-background/50 p-2 hover:bg-background disabled:opacity-50",
+            className: "rounded-full border p-2 flex items-center justify-center disabled:opacity-50 h-fit w-fit bg-card text-card-foreground",
             onClick: handleNext,
             disabled: isNextDisabled,
             type: "button",
@@ -42015,6 +42027,7 @@ function FeatureAnimatedCarousel({
   patternOpacity,
   patternClassName,
   headerClassName,
+  blockCardClassName,
   spacing = "py-12 md:py-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8"
 }) {
@@ -42073,9 +42086,7 @@ function FeatureAnimatedCarousel({
           "div",
           {
             className: cn(
-              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background)
+              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl bg-muted p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
             )
           }
         )
@@ -42092,40 +42103,51 @@ function FeatureAnimatedCarousel({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 text-left", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
-            "h2",
-            {
-              className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
-                titleClassName
-              ),
-              children: title
-            }
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
-                titleClassName
-              ),
-              children: title
-            }
-          )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn("max-w-lg md:max-w-md", descriptionClassName),
-              children: description
-            }
-          ))
-        ] }) : null,
+        title || description ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-4 md:gap-6 text-left",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn("max-w-lg md:max-w-md", descriptionClassName),
+                  children: description
+                }
+              ))
+            ]
+          }
+        ) : null,
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
+              "relative flex min-h-full md:min-h-[500px] flex-col-reverse gap-5 md:gap-8 bg-muted overflow-hidden rounded-3xl p-4 md:p-6 md:flex-row md:items-center lg:p-12 lg:min-h-[600px]",
+              blockCardClassName
             ),
             children: [
               /* @__PURE__ */ jsx(
@@ -42152,13 +42174,13 @@ function FeatureAnimatedCarousel({
                   isNextDisabled
                 }
               ),
-              currentFeature?.image && /* @__PURE__ */ jsxs("div", { className: "relative w-full h-[250px] md:h-auto overflow-hidden rounded-2xl md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2 shadow-xl", children: [
-                currentFeature.href && /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center md:hidden", children: /* @__PURE__ */ jsx(
+              currentFeature?.image && /* @__PURE__ */ jsxs("div", { className: "relative w-full h-[250px] md:h-auto md:absolute md:right-8 md:top-8 md:bottom-8 md:w-1/2", children: [
+                currentFeature.href && /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10 rounded-full h-fit w-fit shadow-md hover:shadow-2xl flex items-center justify-center md:hidden", children: /* @__PURE__ */ jsx(
                   Pressable,
                   {
                     href: currentFeature.href,
                     size: "icon-lg",
-                    className: "text-foreground",
+                    className: "bg-primary text-primary-foreground",
                     children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right" })
                   }
                 ) }),
@@ -42172,9 +42194,9 @@ function FeatureAnimatedCarousel({
                     exit: "exit",
                     transition: {
                       x: { type: "spring", stiffness: 300, damping: 30 },
-                      opacity: { duration: 0.2 }
+                      opacity: { duration: 0.3 }
                     },
-                    className: "h-full w-full",
+                    className: "h-full w-full shadow-xl overflow-hidden rounded-2xl",
                     children: /* @__PURE__ */ jsx(
                       Img,
                       {

package/package.json

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