@opensite/ui 3.0.5 → 3.0.7

package/dist/components.cjs

@@ -1312,6 +1312,7 @@ var ContentGroup = React4__namespace.forwardRef(
 );
 ContentGroup.displayName = "ContentGroup";
 function AlternatingBlocks({
+  sectionId = "alternating-blocks",
   sections,
   sectionsSlot,
   title,
@@ -1399,6 +1400,7 @@ function AlternatingBlocks({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -1565,6 +1567,7 @@ function AboutSplitHero({
   ] }) });
 }
 function AboutMissionPrinciples({
+  sectionId = "about-mission-principles",
   badgeText,
   badgeClassName,
   missionHeading,
@@ -1683,6 +1686,7 @@ function AboutMissionPrinciples({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -1804,6 +1808,7 @@ function ActionComponent({ action }) {
   );
 }
 function AboutExpandableValues({
+  sectionId = "about-expandable-values",
   badgeText,
   heading,
   description,
@@ -1923,6 +1928,7 @@ function AboutExpandableValues({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -2038,6 +2044,7 @@ function TabsContent({
   );
 }
 function CommunityInitiatives({
+  sectionId = "community-initiatives",
   badgeText,
   heading,
   description,
@@ -2216,6 +2223,7 @@ function CommunityInitiatives({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -2300,6 +2308,7 @@ function CommunityInitiatives({
   );
 }
 function AboutCultureTabs({
+  sectionId = "about-culture-tabs",
   badgeText,
   heading,
   description,
@@ -2402,6 +2411,7 @@ function AboutCultureTabs({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -2533,6 +2543,7 @@ function AboutCultureTabs({
   );
 }
 function MediaHoverCtas({
+  sectionId = "media-hover-ctas",
   className,
   sectionClassName,
   gridClassName,
@@ -2599,6 +2610,7 @@ function MediaHoverCtas({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className: cn(className, sectionClassName),
@@ -2618,6 +2630,7 @@ function MediaHoverCtas({
   );
 }
 function BannerAnnouncementDismissible({
+  sectionId = "banner-announcement-dismissible",
   icon,
   iconName,
   message,
@@ -2692,29 +2705,39 @@ function BannerAnnouncementDismissible({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className: cn("border-b", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-2", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4", contentClassName), children: [
-      iconContent,
-      messageContent,
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      pressable.Pressable,
-      {
-        onClick: handleDismiss,
-        variant: "outline",
-        size: "icon",
-        asButton: true,
-        className: cn("size-8", dismissButtonClassName),
-        children: [
-          dismissIconContent,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
-        ]
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      id: sectionId,
+      background,
+      spacing: "none",
+      className: cn("border-b", className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-2", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4", contentClassName), children: [
+          iconContent,
+          messageContent,
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          pressable.Pressable,
+          {
+            onClick: handleDismiss,
+            variant: "outline",
+            size: "icon",
+            asButton: true,
+            className: cn("size-8", dismissButtonClassName),
+            children: [
+              dismissIconContent,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
+            ]
+          }
+        )
+      ] })
+    }
+  );
 }
 function BannerCountdownSale({
+  sectionId = "banner-countdown-sale",
   endTime,
   message,
   description,
@@ -2780,13 +2803,23 @@ function BannerCountdownSale({
     if (!description) return null;
     return typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-destructive-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description });
   }, [description, descriptionClassName]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className: cn("bg-destructive text-destructive-foreground", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-sm", contentClassName), children: [
-    messageContent,
-    timerContent,
-    descriptionContent
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      id: sectionId,
+      background,
+      spacing: "none",
+      className: cn("bg-destructive text-destructive-foreground", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-sm", contentClassName), children: [
+        messageContent,
+        timerContent,
+        descriptionContent
+      ] }) })
+    }
+  );
 }
 function BannerDeliveryCountdown({
+  sectionId = "banner-delivery-countdown",
   icon,
   iconName,
   deliveryDate,
@@ -2860,15 +2893,25 @@ function BannerDeliveryCountdown({
       (part) => part !== null && part !== void 0
     );
   }, [prefixText, timerContent, middleText, deliveryDateContent]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className: cn("bg-accent text-accent-foreground", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-3 text-sm", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", messageClassName), children: [
-    iconContent,
-    messageParts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: messageParts.map((part, index) => /* @__PURE__ */ jsxRuntime.jsxs(React4__namespace.Fragment, { children: [
-      index > 0 ? " " : null,
-      part
-    ] }, index)) })
-  ] }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      id: sectionId,
+      background,
+      spacing: "none",
+      className: cn("bg-accent text-accent-foreground", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-3 text-sm", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", messageClassName), children: [
+        iconContent,
+        messageParts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: messageParts.map((part, index) => /* @__PURE__ */ jsxRuntime.jsxs(React4__namespace.Fragment, { children: [
+          index > 0 ? " " : null,
+          part
+        ] }, index)) })
+      ] }) }) })
+    }
+  );
 }
 function BannerEventPromo({
+  sectionId = "banner-event-promo",
   eventName,
   eventDetails,
   separator,
@@ -2932,14 +2975,23 @@ function BannerEventPromo({
     if (!eventDetails) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: eventDetailsClassName, children: eventDetails });
   }, [eventDetails, eventDetailsClassName]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container mx-auto px-4 md:px-6 2xl:max-w-[1400px]", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-between gap-x-6 p-4", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap justify-between w-full items-center gap-x-4 gap-y-2", textClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm leading-6", children: [
-      eventNameContent,
-      eventNameContent && eventDetailsContent && separatorContent,
-      eventDetailsContent
-    ] }),
-    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
-  ] }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      id: sectionId,
+      background,
+      spacing: "none",
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container mx-auto px-4 md:px-6 2xl:max-w-[1400px]", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-between gap-x-6 p-4", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap justify-between w-full items-center gap-x-4 gap-y-2", textClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm leading-6", children: [
+          eventNameContent,
+          eventNameContent && eventDetailsContent && separatorContent,
+          eventDetailsContent
+        ] }),
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
+      ] }) }) })
+    }
+  );
 }
 function BannerFloatingOffer({
   offerTitle,
@@ -3070,6 +3122,7 @@ function BannerFloatingOffer({
   );
 }
 function BannerGdprRights({
+  sectionId = "banner-gdpr-rights",
   icon,
   iconName,
   title,
@@ -3152,31 +3205,41 @@ function BannerGdprRights({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className: cn("border-t fixed bottom-0 left-0 right-0 z-50", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-4 max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start gap-3", contentClassName), children: [
-      iconContent,
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        titleContent,
-        descriptionContent
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      id: sectionId,
+      background,
+      spacing: "none",
+      className: cn("border-t fixed bottom-0 left-0 right-0 z-50", className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-4 max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start gap-3", contentClassName), children: [
+          iconContent,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            titleContent,
+            descriptionContent
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          pressable.Pressable,
+          {
+            onClick: handleDismiss,
+            variant: "ghost",
+            size: "icon",
+            asButton: true,
+            className: cn("size-8", dismissButtonClassName),
+            children: [
+              dismissIconContent,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
+            ]
+          }
+        )
       ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      pressable.Pressable,
-      {
-        onClick: handleDismiss,
-        variant: "ghost",
-        size: "icon",
-        asButton: true,
-        className: cn("size-8", dismissButtonClassName),
-        children: [
-          dismissIconContent,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
-        ]
-      }
-    )
-  ] }) });
+    }
+  );
 }
 function BannerPrivacyNotice({
+  sectionId = "banner-privacy-notice",
   icon,
   iconName,
   title,
@@ -3256,32 +3319,42 @@ function BannerPrivacyNotice({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className: cn("border-t fixed bottom-0 left-0 right-0 z-50", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-4 max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start gap-4", contentClassName), children: [
-      iconContent,
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        titleContent,
-        descriptionContent,
-        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      id: sectionId,
+      background,
+      spacing: "none",
+      className: cn("border-t fixed bottom-0 left-0 right-0 z-50", className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-4 max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-start gap-4", contentClassName), children: [
+          iconContent,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            titleContent,
+            descriptionContent,
+            (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: actionsContent })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          pressable.Pressable,
+          {
+            onClick: handleDismiss,
+            variant: "outline",
+            size: "icon",
+            asButton: true,
+            className: cn("size-8", dismissButtonClassName),
+            children: [
+              dismissIconContent,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
+            ]
+          }
+        )
       ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      pressable.Pressable,
-      {
-        onClick: handleDismiss,
-        variant: "outline",
-        size: "icon",
-        asButton: true,
-        className: cn("size-8", dismissButtonClassName),
-        children: [
-          dismissIconContent,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
-        ]
-      }
-    )
-  ] }) });
+    }
+  );
 }
 function BannerPromoCta({
+  sectionId = "banner-promo-cta",
   message,
   discount,
   separator,
@@ -3335,14 +3408,24 @@ function BannerPromoCta({
     if (!discount) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: discountClassName, children: discount });
   }, [discount, discountClassName]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-center text-sm", contentClassName), children: [
-    messageContent,
-    messageContent && discountContent && separatorContent,
-    discountContent,
-    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionsClassName, children: actionsContent })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      id: sectionId,
+      background,
+      spacing: "none",
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-center text-sm", contentClassName), children: [
+        messageContent,
+        messageContent && discountContent && separatorContent,
+        discountContent,
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionsClassName, children: actionsContent })
+      ] }) })
+    }
+  );
 }
 function BannerSocialFollow({
+  sectionId = "banner-social-follow",
   icon,
   iconName,
   message,
@@ -3416,27 +3499,37 @@ function BannerSocialFollow({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-7xl mx-auto px-3 py-3 flex items-center justify-center text-left md:text-center gap-2", containerClassName), children: [
-    iconContent,
-    messageContent,
-    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionsClassName, children: actionsContent }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      pressable.Pressable,
-      {
-        onClick: handleDismiss,
-        variant: "ghost",
-        size: "icon",
-        asButton: true,
-        className: cn("size-8", dismissButtonClassName),
-        children: [
-          dismissIconContent,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
-        ]
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      id: sectionId,
+      background,
+      spacing: "none",
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-7xl mx-auto px-3 py-3 flex items-center justify-center text-left md:text-center gap-2", containerClassName), children: [
+        iconContent,
+        messageContent,
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: actionsClassName, children: actionsContent }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          pressable.Pressable,
+          {
+            onClick: handleDismiss,
+            variant: "ghost",
+            size: "icon",
+            asButton: true,
+            className: cn("size-8", dismissButtonClassName),
+            children: [
+              dismissIconContent,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
+            ]
+          }
+        )
+      ] })
+    }
+  );
 }
 function BannerSurveyIncentive({
+  sectionId = "banner-survey-incentive",
   icon,
   iconName,
   title,
@@ -3518,32 +3611,41 @@ function BannerSurveyIncentive({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Section, { background, spacing: "none", className: cn("border-b text-sm", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex md:items-center justify-between max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", contentClassName), children: [
-      iconContent,
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col md:flex-row gap-1", textClassName), children: [
-        titleContent,
-        descriptionContent
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
+    {
+      id: sectionId,
+      background,
+      spacing: "none",
+      className: cn("border-b text-sm", className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex md:items-center justify-between max-w-7xl mx-auto px-4 py-4", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", contentClassName), children: [
+          iconContent,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col md:flex-row gap-1", textClassName), children: [
+            titleContent,
+            descriptionContent
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-2", actionsClassName), children: [
+          actionsContent,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            pressable.Pressable,
+            {
+              onClick: handleDismiss,
+              variant: "outline",
+              size: "icon",
+              asButton: true,
+              className: cn("size-8", dismissButtonClassName),
+              children: [
+                dismissIconContent,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
+              ]
+            }
+          )
+        ] })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-2", actionsClassName), children: [
-      actionsContent,
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        pressable.Pressable,
-        {
-          onClick: handleDismiss,
-          variant: "outline",
-          size: "icon",
-          asButton: true,
-          className: cn("size-8", dismissButtonClassName),
-          children: [
-            dismissIconContent,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: dismissLabel })
-          ]
-        }
-      )
-    ] })
-  ] }) });
+    }
+  );
 }
 function isThemedLogo(logo) {
   return "light" in logo || "dark" in logo;
@@ -4490,6 +4592,7 @@ function FooterSocialApps({
   );
 }
 function FooterSimpleCentered({
+  sectionId = "footer-simple-centered",
   logo,
   tagline,
   sitemap,
@@ -4558,6 +4661,7 @@ function FooterSimpleCentered({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -4968,6 +5072,7 @@ function FooterNewsletterGrid({
   );
 }
 function FooterCtaBanner({
+  sectionId = "footer-cta-banner",
   logo,
   ctaHeading,
   ctaDescription,
@@ -5013,6 +5118,7 @@ function FooterCtaBanner({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -5048,7 +5154,16 @@ function FooterCtaBanner({
                   children: ctaDescription
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: ctaButtonUrl, asButton: true, variant: "default", children: ctaButtonText })
+              /* @__PURE__ */ jsxRuntime.jsx(
+                pressable.Pressable,
+                {
+                  href: ctaButtonUrl,
+                  asButton: true,
+                  variant: "default",
+                  className: ctaButtonClassName,
+                  children: ctaButtonText
+                }
+              )
             ]
           }
         ),
@@ -5184,6 +5299,7 @@ function FooterCtaBanner({
   );
 }
 function FooterContactCard({
+  sectionId = "footer-contact-card",
   logo,
   heading,
   email,
@@ -5223,6 +5339,7 @@ function FooterContactCard({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -5360,6 +5477,7 @@ function FooterContactCard({
   );
 }
 function FooterBackgroundCard({
+  sectionId = "footer-background-card",
   logo,
   backgroundImage,
   profileImage,
@@ -5406,6 +5524,7 @@ function FooterBackgroundCard({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -5647,6 +5766,7 @@ var itemVariants = {
   }
 };
 function FooterAnimatedSocial({
+  sectionId = "footer-animated-social",
   heading,
   description,
   ctaText,
@@ -5704,6 +5824,7 @@ function FooterAnimatedSocial({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -5851,6 +5972,7 @@ var DEFAULT_FORM_FIELDS2 = [
   }
 ];
 function FooterNewsletterMinimal({
+  sectionId = "footer-newsletter-minimal",
   heading,
   supportLabel,
   supportEmail,
@@ -5970,6 +6092,7 @@ function FooterNewsletterMinimal({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -6139,6 +6262,7 @@ function FooterNewsletterMinimal({
   );
 }
 function FooterCtaSocial({
+  sectionId = "footer-cta-social",
   preHeading,
   heading,
   description,
@@ -6185,6 +6309,7 @@ function FooterCtaSocial({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,