@opensite/ui 3.0.5 → 3.0.6

package/dist/article-toc-sidebar.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React3 from 'react';
-import React3__default from 'react';
+import * as React4 from 'react';
+import React4__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
@@ -9,8 +9,8 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { Markdown } from '@page-speed/markdown-to-jsx/core';
 import { SocialShare } from '@page-speed/social-share';
+import { Markdown } from '@page-speed/markdown-to-jsx/core';
 
 // components/blocks/article/article-toc-sidebar.tsx
 function cn(...inputs) {
@@ -109,7 +109,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React3__default.forwardRef(
+var Container = React4__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -415,7 +415,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React3__default.forwardRef(
+var Section = React4__default.forwardRef(
   ({
     id,
     title,
@@ -476,7 +476,37 @@ var Section = React3__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function LongformContent({
+  children,
+  renderMode = "jsx",
+  markdownString,
+  optixFlowConfig,
+  markdownStyles
+}) {
+  const shouldRenderMarkdown = React4.useMemo(() => {
+    return renderMode === "markdown" && typeof markdownString === "string" && markdownString.length > 0;
+  }, [renderMode, markdownString]);
+  if (shouldRenderMarkdown && markdownString) {
+    return /* @__PURE__ */ jsx(
+      Markdown,
+      {
+        markdownStyles,
+        optixFlowConfig,
+        overrides: {
+          img: Img,
+          a: Pressable
+        },
+        children: markdownString
+      }
+    );
+  }
+  if (children) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return null;
+}
 function ArticleTocSidebarComponent({
+  sectionId = "article-toc-sidebar",
   className,
   articleClassName,
   sidebarClassName,
@@ -520,10 +550,10 @@ function ArticleTocSidebarComponent({
   patternOpacity,
   patternClassName
 }) {
-  const [activeSection, setActiveSection] = React3.useState(
+  const [activeSection, setActiveSection] = React4.useState(
     sections?.[0]?.id || ""
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!enableTocTracking || !sections || sections.length === 0) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -541,12 +571,12 @@ function ArticleTocSidebarComponent({
     });
     return () => observer.disconnect();
   }, [sections, enableTocTracking]);
-  const categoryContent = React3.useMemo(() => {
+  const categoryContent = React4.useMemo(() => {
     if (categorySlot) return categorySlot;
     if (!category) return null;
     return /* @__PURE__ */ jsx(Badge, { children: category });
   }, [categorySlot, category]);
-  const authorContent = React3.useMemo(() => {
+  const authorContent = React4.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-6 flex items-center gap-4", authorClassName), children: [
@@ -581,7 +611,7 @@ function ArticleTocSidebarComponent({
     readTime,
     authorClassName
   ]);
-  const heroMediaContent = React3.useMemo(() => {
+  const heroMediaContent = React4.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsx(
@@ -590,7 +620,7 @@ function ArticleTocSidebarComponent({
         src: heroImageSrc,
         alt: heroImageAlt,
         className: cn(
-          "my-8 aspect-video w-full rounded-lg object-cover",
+          "my-8 aspect-video w-full rounded-xl shadow-xl object-cover",
           heroImageClassName
         ),
         optixFlowConfig
@@ -603,7 +633,7 @@ function ArticleTocSidebarComponent({
     heroImageClassName,
     optixFlowConfig
   ]);
-  const tocContent = React3.useMemo(() => {
+  const tocContent = React4.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-4", tocClassName), children: [
@@ -611,15 +641,15 @@ function ArticleTocSidebarComponent({
       /* @__PURE__ */ jsx("nav", { className: "space-y-2", children: sections.map((section) => {
         const isActive = activeSection === section.id;
         if (renderSectionLink) {
-          return /* @__PURE__ */ jsx(React3.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+          return /* @__PURE__ */ jsx(React4.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
         }
         return /* @__PURE__ */ jsx(
           Pressable,
           {
             href: `#${section.id}`,
             className: cn(
-              "block text-sm transition-colors",
-              isActive ? "font-medium" : ""
+              "block text-sm transition-all duration-500",
+              isActive ? "font-medium" : "font-base"
             ),
             children: section.title
           },
@@ -628,7 +658,7 @@ function ArticleTocSidebarComponent({
       }) })
     ] });
   }, [tocSlot, sections, activeSection, renderSectionLink, tocClassName]);
-  const ctaContent = React3.useMemo(() => {
+  const ctaContent = React4.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaTitle && !ctaDescription && (!ctaActions || ctaActions.length === 0))
       return null;
@@ -664,6 +694,7 @@ function ArticleTocSidebarComponent({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,
@@ -696,25 +727,22 @@ function ArticleTocSidebarComponent({
                 authorContent
               ] }),
               heroMediaContent,
-              renderMode === "markdown" && markdownString ? /* @__PURE__ */ jsx(
-                Markdown,
+              /* @__PURE__ */ jsx(
+                LongformContent,
                 {
-                  overrides: {
-                    img: (props) => /* @__PURE__ */ jsx(Img, { ...props, optixFlowConfig }),
-                    a: Pressable
-                  },
+                  renderMode,
+                  markdownString,
+                  optixFlowConfig,
                   markdownStyles,
-                  children: markdownString
+                  children
                 }
-              ) : children,
-              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-24", children: /* @__PURE__ */ jsx(
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(
                 SocialShare,
                 {
                   variant: "combo",
-                  postTitle: title && typeof title === "string" ? title : "",
-                  shareUrl: window?.location?.href,
-                  summaryContent: description && typeof description === "string" ? description : "",
-                  disableImageAttachments: true
+                  postTitle: title,
+                  summaryContent: description
                 }
               ) })
             ]

package/dist/auto-scroll-carousel.cjs

@@ -553,6 +553,7 @@ var Section = React2__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function AutoScrollCarousel({
+  sectionId = "auto-scroll-carousel",
   heading,
   description,
   action,
@@ -633,6 +634,7 @@ function AutoScrollCarousel({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/auto-scroll-carousel.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-D8cbIf_y.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -113,6 +113,8 @@ interface AutoScrollCarouselProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * AutoScrollCarousel displays images in a continuously auto-scrolling carousel.
@@ -136,6 +138,6 @@ interface AutoScrollCarouselProps {
  * />
  * ```
  */
-declare function AutoScrollCarousel({ heading, description, action, actionSlot, images, imagesSlot, autoScrollSpeed, className, headerClassName, headingClassName, descriptionClassName, actionClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: AutoScrollCarouselProps): React.JSX.Element;
+declare function AutoScrollCarousel({ sectionId, heading, description, action, actionSlot, images, imagesSlot, autoScrollSpeed, className, headerClassName, headingClassName, descriptionClassName, actionClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: AutoScrollCarouselProps): React.JSX.Element;
 
 export { AutoScrollCarousel, type AutoScrollCarouselProps };

package/dist/auto-scroll-carousel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-qC2HCInM.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -113,6 +113,8 @@ interface AutoScrollCarouselProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * AutoScrollCarousel displays images in a continuously auto-scrolling carousel.
@@ -136,6 +138,6 @@ interface AutoScrollCarouselProps {
  * />
  * ```
  */
-declare function AutoScrollCarousel({ heading, description, action, actionSlot, images, imagesSlot, autoScrollSpeed, className, headerClassName, headingClassName, descriptionClassName, actionClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: AutoScrollCarouselProps): React.JSX.Element;
+declare function AutoScrollCarousel({ sectionId, heading, description, action, actionSlot, images, imagesSlot, autoScrollSpeed, className, headerClassName, headingClassName, descriptionClassName, actionClassName, carouselClassName, carouselContentClassName, itemClassName, imageClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: AutoScrollCarouselProps): React.JSX.Element;
 
 export { AutoScrollCarousel, type AutoScrollCarouselProps };

package/dist/auto-scroll-carousel.js

@@ -528,6 +528,7 @@ var Section = React2__default.forwardRef(
 );
 Section.displayName = "Section";
 function AutoScrollCarousel({
+  sectionId = "auto-scroll-carousel",
   heading,
   description,
   action,
@@ -608,6 +609,7 @@ function AutoScrollCarousel({
   return /* @__PURE__ */ jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/banner-announcement-dismissible.cjs

@@ -417,6 +417,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function BannerAnnouncementDismissible({
+  sectionId = "banner-announcement-dismissible",
   icon,
   iconName,
   message,
@@ -491,27 +492,36 @@ 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 })
+            ]
+          }
+        )
+      ] })
+    }
+  );
 }
 
 exports.BannerAnnouncementDismissible = BannerAnnouncementDismissible;

package/dist/banner-announcement-dismissible.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { S as SectionBackground } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground } from './community-initiatives-D8cbIf_y.cjs';
 import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -75,6 +75,8 @@ interface BannerAnnouncementDismissibleProps {
      * Additional CSS classes for the dismiss button
      */
     dismissButtonClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * BannerAnnouncementDismissible - A top announcement banner with icon, message, CTA button, and dismiss button.
@@ -93,6 +95,6 @@ interface BannerAnnouncementDismissibleProps {
  * />
  * ```
  */
-declare function BannerAnnouncementDismissible({ icon, iconName, message, actions, actionsSlot, onDismiss, dismissIcon, dismissAriaLabel, background, className, containerClassName, contentClassName, iconClassName, messageClassName, actionsClassName, dismissButtonClassName, }: BannerAnnouncementDismissibleProps): react_jsx_runtime.JSX.Element | null;
+declare function BannerAnnouncementDismissible({ sectionId, icon, iconName, message, actions, actionsSlot, onDismiss, dismissIcon, dismissAriaLabel, background, className, containerClassName, contentClassName, iconClassName, messageClassName, actionsClassName, dismissButtonClassName, }: BannerAnnouncementDismissibleProps): react_jsx_runtime.JSX.Element | null;
 
 export { BannerAnnouncementDismissible, type BannerAnnouncementDismissibleProps };

package/dist/banner-announcement-dismissible.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { S as SectionBackground } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground } from './community-initiatives-qC2HCInM.js';
 import { A as ActionConfig } from './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -75,6 +75,8 @@ interface BannerAnnouncementDismissibleProps {
      * Additional CSS classes for the dismiss button
      */
     dismissButtonClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * BannerAnnouncementDismissible - A top announcement banner with icon, message, CTA button, and dismiss button.
@@ -93,6 +95,6 @@ interface BannerAnnouncementDismissibleProps {
  * />
  * ```
  */
-declare function BannerAnnouncementDismissible({ icon, iconName, message, actions, actionsSlot, onDismiss, dismissIcon, dismissAriaLabel, background, className, containerClassName, contentClassName, iconClassName, messageClassName, actionsClassName, dismissButtonClassName, }: BannerAnnouncementDismissibleProps): react_jsx_runtime.JSX.Element | null;
+declare function BannerAnnouncementDismissible({ sectionId, icon, iconName, message, actions, actionsSlot, onDismiss, dismissIcon, dismissAriaLabel, background, className, containerClassName, contentClassName, iconClassName, messageClassName, actionsClassName, dismissButtonClassName, }: BannerAnnouncementDismissibleProps): react_jsx_runtime.JSX.Element | null;
 
 export { BannerAnnouncementDismissible, type BannerAnnouncementDismissibleProps };

package/dist/banner-announcement-dismissible.js

@@ -396,6 +396,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function BannerAnnouncementDismissible({
+  sectionId = "banner-announcement-dismissible",
   icon,
   iconName,
   message,
@@ -470,27 +471,36 @@ function BannerAnnouncementDismissible({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Section, { background, spacing: "none", className: cn("border-b", className), children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-2", containerClassName), children: [
-    /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", contentClassName), children: [
-      iconContent,
-      messageContent,
-      (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        onClick: handleDismiss,
-        variant: "outline",
-        size: "icon",
-        asButton: true,
-        className: cn("size-8", dismissButtonClassName),
-        children: [
-          dismissIconContent,
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissLabel })
-        ]
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      id: sectionId,
+      background,
+      spacing: "none",
+      className: cn("border-b", className),
+      children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-2", containerClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", contentClassName), children: [
+          iconContent,
+          messageContent,
+          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionsContent })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            onClick: handleDismiss,
+            variant: "outline",
+            size: "icon",
+            asButton: true,
+            className: cn("size-8", dismissButtonClassName),
+            children: [
+              dismissIconContent,
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: dismissLabel })
+            ]
+          }
+        )
+      ] })
+    }
+  );
 }
 
 export { BannerAnnouncementDismissible };

package/dist/banner-countdown-sale.cjs

@@ -391,6 +391,7 @@ var Section = React__default.default.forwardRef(
 );
 Section.displayName = "Section";
 function BannerCountdownSale({
+  sectionId = "banner-countdown-sale",
   endTime,
   message,
   description,
@@ -456,11 +457,20 @@ 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
+      ] }) })
+    }
+  );
 }
 
 exports.BannerCountdownSale = BannerCountdownSale;

package/dist/banner-countdown-sale.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { S as SectionBackground } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground } from './community-initiatives-D8cbIf_y.cjs';
 import './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -75,6 +75,8 @@ interface BannerCountdownSaleProps {
      * Additional CSS classes for the separator
      */
     separatorClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * BannerCountdownSale - A flash sale banner with live countdown timer.
@@ -92,6 +94,6 @@ interface BannerCountdownSaleProps {
  * />
  * ```
  */
-declare function BannerCountdownSale({ endTime, message, description, timerSlot, renderTimer, background, className, containerClassName, contentClassName, messageClassName, descriptionClassName, timerClassName, timeUnitClassName, separatorClassName, }: BannerCountdownSaleProps): react_jsx_runtime.JSX.Element;
+declare function BannerCountdownSale({ sectionId, endTime, message, description, timerSlot, renderTimer, background, className, containerClassName, contentClassName, messageClassName, descriptionClassName, timerClassName, timeUnitClassName, separatorClassName, }: BannerCountdownSaleProps): react_jsx_runtime.JSX.Element;
 
 export { BannerCountdownSale, type BannerCountdownSaleProps };

package/dist/banner-countdown-sale.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { S as SectionBackground } from './community-initiatives-RgHoLtLt.js';
+import { S as SectionBackground } from './community-initiatives-qC2HCInM.js';
 import './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -75,6 +75,8 @@ interface BannerCountdownSaleProps {
      * Additional CSS classes for the separator
      */
     separatorClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * BannerCountdownSale - A flash sale banner with live countdown timer.
@@ -92,6 +94,6 @@ interface BannerCountdownSaleProps {
  * />
  * ```
  */
-declare function BannerCountdownSale({ endTime, message, description, timerSlot, renderTimer, background, className, containerClassName, contentClassName, messageClassName, descriptionClassName, timerClassName, timeUnitClassName, separatorClassName, }: BannerCountdownSaleProps): react_jsx_runtime.JSX.Element;
+declare function BannerCountdownSale({ sectionId, endTime, message, description, timerSlot, renderTimer, background, className, containerClassName, contentClassName, messageClassName, descriptionClassName, timerClassName, timeUnitClassName, separatorClassName, }: BannerCountdownSaleProps): react_jsx_runtime.JSX.Element;
 
 export { BannerCountdownSale, type BannerCountdownSaleProps };

package/dist/banner-countdown-sale.js

@@ -385,6 +385,7 @@ var Section = React.forwardRef(
 );
 Section.displayName = "Section";
 function BannerCountdownSale({
+  sectionId = "banner-countdown-sale",
   endTime,
   message,
   description,
@@ -450,11 +451,20 @@ function BannerCountdownSale({
     if (!description) return null;
     return typeof description === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-destructive-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description });
   }, [description, descriptionClassName]);
-  return /* @__PURE__ */ jsx(Section, { background, spacing: "none", className: cn("bg-destructive text-destructive-foreground", className), children: /* @__PURE__ */ jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ 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__ */ jsx(
+    Section,
+    {
+      id: sectionId,
+      background,
+      spacing: "none",
+      className: cn("bg-destructive text-destructive-foreground", className),
+      children: /* @__PURE__ */ jsx("div", { className: cn("container py-2.5", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-sm", contentClassName), children: [
+        messageContent,
+        timerContent,
+        descriptionContent
+      ] }) })
+    }
+  );
 }
 
 export { BannerCountdownSale };

package/dist/banner-delivery-countdown.cjs

@@ -416,6 +416,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function BannerDeliveryCountdown({
+  sectionId = "banner-delivery-countdown",
   icon,
   iconName,
   deliveryDate,
@@ -489,13 +490,22 @@ 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(React__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(React__namespace.Fragment, { children: [
+          index > 0 ? " " : null,
+          part
+        ] }, index)) })
+      ] }) }) })
+    }
+  );
 }
 
 exports.BannerDeliveryCountdown = BannerDeliveryCountdown;

package/dist/banner-delivery-countdown.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { S as SectionBackground } from './community-initiatives-2nI4WPsD.cjs';
+import { S as SectionBackground } from './community-initiatives-D8cbIf_y.cjs';
 import './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -83,6 +83,8 @@ interface BannerDeliveryCountdownProps {
      * Additional CSS classes for the delivery date
      */
     deliveryDateClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * BannerDeliveryCountdown - A delivery deadline banner with countdown timer and gift icon.
@@ -99,6 +101,6 @@ interface BannerDeliveryCountdownProps {
  * />
  * ```
  */
-declare function BannerDeliveryCountdown({ icon, iconName, deliveryDate, cutoffTime, prefixText, middleText, timerSlot, renderTimer, background, className, containerClassName, contentClassName, iconClassName, messageClassName, timerClassName, deliveryDateClassName, }: BannerDeliveryCountdownProps): react_jsx_runtime.JSX.Element;
+declare function BannerDeliveryCountdown({ sectionId, icon, iconName, deliveryDate, cutoffTime, prefixText, middleText, timerSlot, renderTimer, background, className, containerClassName, contentClassName, iconClassName, messageClassName, timerClassName, deliveryDateClassName, }: BannerDeliveryCountdownProps): react_jsx_runtime.JSX.Element;
 
 export { BannerDeliveryCountdown, type BannerDeliveryCountdownProps };