@opensite/ui 1.4.4 → 1.4.5

package/dist/feature-integration-cards.js

@@ -37,6 +37,32 @@ function getTextColor(parentBg, variant = "default", options) {
     }
   }
 }
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -971,11 +997,22 @@ function FeatureIntegrationCards({
   const renderLinkLabel = useCallback((integration) => {
     if (integration.linkLabelSlot) return integration.linkLabelSlot;
     if (!integration.linkLabel) return null;
-    return /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-1 rounded-full border px-3 py-2.5 text-sm", integration.linkLabelClassName), children: [
-      integration.linkLabel,
-      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-    ] });
-  }, []);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "flex items-center gap-1.5 rounded-full border px-3 py-2 text-sm font-medium transition-colors",
+          getBorderColor(background),
+          getAccentColor(background),
+          integration.linkLabelClassName
+        ),
+        children: [
+          integration.linkLabel,
+          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 14 })
+        ]
+      }
+    );
+  }, [background]);
   const integrationsContent = useMemo(() => {
     if (integrationsSlot) return integrationsSlot;
     if (!integrations || integrations.length === 0) return null;
@@ -984,35 +1021,84 @@ function FeatureIntegrationCards({
       const linkLabelContent = renderLinkLabel(integration);
       const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          iconContent && /* @__PURE__ */ jsx("span", { className: "grid size-12 shrink-0 place-content-center rounded-md border", children: iconContent }),
+          iconContent && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "grid size-12 shrink-0 place-content-center rounded-lg border bg-background/50",
+                getBorderColor(background)
+              ),
+              children: iconContent
+            }
+          ),
           linkLabelContent
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title }) : /* @__PURE__ */ jsx("div", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title })),
-          integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), integration.descriptionClassName), children: integration.description }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), integration.descriptionClassName), children: integration.description }))
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: cn(
+                "font-semibold md:text-lg",
+                getTextColor(background),
+                integration.titleClassName
+              ),
+              children: integration.title
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "font-semibold md:text-lg",
+                getTextColor(background),
+                integration.titleClassName
+              ),
+              children: integration.title
+            }
+          )),
+          integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-sm leading-relaxed md:text-base",
+                getTextColor(background, "muted"),
+                integration.descriptionClassName
+              ),
+              children: integration.description
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "text-sm leading-relaxed md:text-base",
+                getTextColor(background, "muted"),
+                integration.descriptionClassName
+              ),
+              children: integration.description
+            }
+          ))
         ] })
       ] });
+      const cardClasses = cn(
+        "flex flex-col gap-5 rounded-xl border p-6 transition-all duration-300",
+        getBorderColor(background),
+        "hover:shadow-lg",
+        cardClassName,
+        integration.className
+      );
       if (integration.link) {
         return /* @__PURE__ */ jsx(
           Pressable,
           {
             href: integration.link,
-            className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
+            className: cardClasses,
             children: cardContent
           },
           index
         );
       }
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
-          children: cardContent
-        },
-        index
-      );
+      return /* @__PURE__ */ jsx("div", { className: cardClasses, children: cardContent }, index);
     });
-  }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon, renderLinkLabel]);
+  }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon, renderLinkLabel, background]);
   return /* @__PURE__ */ jsxs(
     Section,
     {

package/dist/feature-utility-cards-grid.cjs

@@ -34,6 +34,32 @@ var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrim
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 function getAccentColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-accent-foreground" : "text-primary";
@@ -1017,8 +1043,7 @@ function FeatureUtilityCardsGrid({
           href: learnMoreAction.href,
           onClick: learnMoreAction.onClick,
           className: cn(
-            "hover:underline",
-            `hover:${getAccentColor(background)}`,
+            "font-medium transition-opacity hover:opacity-80",
             learnMoreAction.className
           ),
           "aria-label": learnMoreAction["aria-label"],
@@ -1031,7 +1056,10 @@ function FeatureUtilityCardsGrid({
       {
         href: learnMoreAction.href,
         onClick: learnMoreAction.onClick,
-        className: cn(learnMoreAction.className),
+        className: cn(
+          "flex items-center gap-1 font-medium transition-opacity hover:opacity-80",
+          learnMoreAction.className
+        ),
         "aria-label": learnMoreAction["aria-label"],
         children: [
           learnMoreAction.icon,
@@ -1069,18 +1097,60 @@ function FeatureUtilityCardsGrid({
     return utilities.map((utility, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       Card,
       {
-        className: cn("overflow-hidden pt-0", cardClassName, utility.className),
+        className: cn(
+          "overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
+          cardClassName,
+          utility.className
+        ),
         children: [
-          renderUtilityImage(utility),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
-            utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title })),
-            utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("", utility.descriptionClassName), children: utility.description }))
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: renderUtilityImage(utility) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 md:p-6", children: [
+            utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h3",
+              {
+                className: cn(
+                  "mb-2 text-lg font-semibold",
+                  utility.titleClassName
+                ),
+                children: utility.title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "mb-2 text-lg font-semibold",
+                  utility.titleClassName
+                ),
+                children: utility.title
+              }
+            )),
+            utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm leading-relaxed",
+                  getTextColor(background, "muted"),
+                  utility.descriptionClassName
+                ),
+                children: utility.description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-sm leading-relaxed",
+                  getTextColor(background, "muted"),
+                  utility.descriptionClassName
+                ),
+                children: utility.description
+              }
+            ))
           ] })
         ]
       },
       index
     ));
-  }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage]);
+  }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage, background]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {

package/dist/feature-utility-cards-grid.js

@@ -12,6 +12,32 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 function getAccentColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-accent-foreground" : "text-primary";
@@ -995,8 +1021,7 @@ function FeatureUtilityCardsGrid({
           href: learnMoreAction.href,
           onClick: learnMoreAction.onClick,
           className: cn(
-            "hover:underline",
-            `hover:${getAccentColor(background)}`,
+            "font-medium transition-opacity hover:opacity-80",
             learnMoreAction.className
           ),
           "aria-label": learnMoreAction["aria-label"],
@@ -1009,7 +1034,10 @@ function FeatureUtilityCardsGrid({
       {
         href: learnMoreAction.href,
         onClick: learnMoreAction.onClick,
-        className: cn(learnMoreAction.className),
+        className: cn(
+          "flex items-center gap-1 font-medium transition-opacity hover:opacity-80",
+          learnMoreAction.className
+        ),
         "aria-label": learnMoreAction["aria-label"],
         children: [
           learnMoreAction.icon,
@@ -1047,18 +1075,60 @@ function FeatureUtilityCardsGrid({
     return utilities.map((utility, index) => /* @__PURE__ */ jsxs(
       Card,
       {
-        className: cn("overflow-hidden pt-0", cardClassName, utility.className),
+        className: cn(
+          "overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
+          cardClassName,
+          utility.className
+        ),
         children: [
-          renderUtilityImage(utility),
-          /* @__PURE__ */ jsxs("div", { className: "p-5", children: [
-            utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title })),
-            utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsx("div", { className: cn("", utility.descriptionClassName), children: utility.description }))
+          /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: renderUtilityImage(utility) }),
+          /* @__PURE__ */ jsxs("div", { className: "p-5 md:p-6", children: [
+            utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: cn(
+                  "mb-2 text-lg font-semibold",
+                  utility.titleClassName
+                ),
+                children: utility.title
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "mb-2 text-lg font-semibold",
+                  utility.titleClassName
+                ),
+                children: utility.title
+              }
+            )),
+            utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm leading-relaxed",
+                  getTextColor(background, "muted"),
+                  utility.descriptionClassName
+                ),
+                children: utility.description
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "text-sm leading-relaxed",
+                  getTextColor(background, "muted"),
+                  utility.descriptionClassName
+                ),
+                children: utility.description
+              }
+            ))
           ] })
         ]
       },
       index
     ));
-  }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage]);
+  }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage, background]);
   return /* @__PURE__ */ jsxs(
     Section,
     {

package/dist/footer-animated-social.cjs

@@ -1581,7 +1581,8 @@ function FooterAnimatedSocial({
   separatorClassName,
   copyrightClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -1604,7 +1605,10 @@ function FooterAnimatedSocial({
             label: link.label,
             iconNameOverride: link.iconNameOverride,
             iconSize: 24,
-            className: cn("group flex items-center gap-2 py-2 transition-colors hover:opacity-70", socialLinkClassName)
+            className: cn(
+              "group flex items-center gap-2 py-2 transition-colors hover:opacity-70",
+              socialLinkClassName
+            )
           }
         )
       },
@@ -1619,6 +1623,7 @@ function FooterAnimatedSocial({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxRuntime.jsx("footer", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           framerMotion.motion.div,
@@ -1627,23 +1632,56 @@ function FooterAnimatedSocial({
             initial: "hidden",
             whileInView: "visible",
             viewport: { once: true },
-            className: cn("flex flex-col justify-between md:flex-row md:items-center", layoutClassName),
+            className: cn(
+              "flex flex-col justify-between md:flex-row md:items-center",
+              layoutClassName
+            ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-8", leftColumnClassName), children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.div, { variants: itemVariants, className: "space-y-6", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl leading-tight font-bold lg:text-5xl", headingClassName), children: heading }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-md text-lg leading-relaxed opacity-80", descriptionClassName), children: description })
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "text-4xl leading-tight font-bold lg:text-5xl",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "max-w-md text-lg leading-relaxed opacity-80",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  )
                 ] }),
                 ctaUrl && ctaText && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx(
                   Pressable,
                   {
                     href: ctaUrl,
-                    className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border h-11 px-8 hover:opacity-80", ctaClassName),
+                    className: cn(
+                      "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border h-11 px-8 hover:opacity-80",
+                      ctaClassName
+                    ),
                     children: ctaText
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-5 space-y-8 md:mt-0", rightColumnClassName), children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-6", socialLinksClassName), children: socialLinksContent }) }) })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-row md:flex-col flex-wrap items-center justify-center gap-4 md:gap-2",
+                    rightColumnClassName
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-row md:flex-col items-center gap-4 md:gap-6", socialLinksClassName), children: socialLinksContent }) })
+                }
+              )
             ]
           }
         ),
@@ -1656,14 +1694,32 @@ function FooterAnimatedSocial({
             viewport: { once: true },
             className: cn("mt-16", bottomClassName),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 h-px w-full opacity-20", separatorClassName), style: { backgroundColor: "currentColor" } }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "mb-8 h-px w-full opacity-20",
+                    separatorClassName
+                  ),
+                  style: { backgroundColor: "currentColor" }
+                }
+              ) }),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 framerMotion.motion.div,
                 {
                   variants: itemVariants,
-                  className: cn("flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center", copyrightClassName),
+                  className: cn(
+                    "flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center",
+                    copyrightClassName
+                  ),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright, className: "text-sm opacity-70" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      FooterCopyright,
+                      {
+                        copyright,
+                        className: "text-sm opacity-70"
+                      }
+                    ),
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6 text-sm opacity-70", children: /* @__PURE__ */ jsxRuntime.jsx(
                       BrandAttribution,
                       {

package/dist/footer-animated-social.d.cts

@@ -51,6 +51,10 @@ interface FooterAnimatedSocialProps {
     copyrightClassName?: string;
     /** Section background variant */
     background?: SectionBackground;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /** Section spacing variant */
     spacing?: SectionSpacing;
     /** Optional background pattern */
@@ -66,6 +70,6 @@ interface FooterAnimatedSocialProps {
  * modern websites, portfolios, and creative projects that want to add visual
  * polish and interactivity to their footer.
  */
-declare function FooterAnimatedSocial({ heading, description, ctaText, ctaUrl, socialLinks, copyright, className, contentClassName, layoutClassName, leftColumnClassName, headingClassName, descriptionClassName, ctaClassName, rightColumnClassName, socialLinksClassName, socialLinkClassName, bottomClassName, separatorClassName, copyrightClassName, background, spacing, pattern, patternOpacity, }: FooterAnimatedSocialProps): React.JSX.Element;
+declare function FooterAnimatedSocial({ heading, description, ctaText, ctaUrl, socialLinks, copyright, className, contentClassName, layoutClassName, leftColumnClassName, headingClassName, descriptionClassName, ctaClassName, rightColumnClassName, socialLinksClassName, socialLinkClassName, bottomClassName, separatorClassName, copyrightClassName, background, containerClassName, spacing, pattern, patternOpacity, }: FooterAnimatedSocialProps): React.JSX.Element;
 
 export { FooterAnimatedSocial, type FooterAnimatedSocialProps };

package/dist/footer-animated-social.d.ts

@@ -51,6 +51,10 @@ interface FooterAnimatedSocialProps {
     copyrightClassName?: string;
     /** Section background variant */
     background?: SectionBackground;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /** Section spacing variant */
     spacing?: SectionSpacing;
     /** Optional background pattern */
@@ -66,6 +70,6 @@ interface FooterAnimatedSocialProps {
  * modern websites, portfolios, and creative projects that want to add visual
  * polish and interactivity to their footer.
  */
-declare function FooterAnimatedSocial({ heading, description, ctaText, ctaUrl, socialLinks, copyright, className, contentClassName, layoutClassName, leftColumnClassName, headingClassName, descriptionClassName, ctaClassName, rightColumnClassName, socialLinksClassName, socialLinkClassName, bottomClassName, separatorClassName, copyrightClassName, background, spacing, pattern, patternOpacity, }: FooterAnimatedSocialProps): React.JSX.Element;
+declare function FooterAnimatedSocial({ heading, description, ctaText, ctaUrl, socialLinks, copyright, className, contentClassName, layoutClassName, leftColumnClassName, headingClassName, descriptionClassName, ctaClassName, rightColumnClassName, socialLinksClassName, socialLinkClassName, bottomClassName, separatorClassName, copyrightClassName, background, containerClassName, spacing, pattern, patternOpacity, }: FooterAnimatedSocialProps): React.JSX.Element;
 
 export { FooterAnimatedSocial, type FooterAnimatedSocialProps };