@opensite/ui 3.0.5 → 3.0.6

package/dist/contact-emergency.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-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 './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -90,6 +90,8 @@ interface ContactEmergencyProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactEmergency - Urgent support form with priority level selection.
@@ -103,6 +105,6 @@ interface ContactEmergencyProps {
  * />
  * ```
  */
-declare function ContactEmergency({ heading, description, contactItems, formEngineSetup, className, headerClassName, headingClassName, descriptionClassName, spacing, containerClassName, background, pattern, patternOpacity, }: ContactEmergencyProps): React.JSX.Element;
+declare function ContactEmergency({ sectionId, heading, description, contactItems, formEngineSetup, className, headerClassName, headingClassName, descriptionClassName, spacing, containerClassName, background, pattern, patternOpacity, }: ContactEmergencyProps): React.JSX.Element;
 
 export { ContactEmergency, type ContactEmergencyProps };

package/dist/contact-emergency.js

@@ -506,6 +506,7 @@ var DEFAULT_FORM_FIELDS = [
   }
 ];
 function ContactEmergency({
+  sectionId = "contact-emergency",
   heading,
   description,
   contactItems,
@@ -557,6 +558,7 @@ function ContactEmergency({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-event.cjs

@@ -464,6 +464,7 @@ var DEFAULT_FORM_FIELDS = [
   }
 ];
 function ContactEvent({
+  sectionId = "contact-event",
   heading,
   description,
   className,
@@ -482,6 +483,7 @@ function ContactEvent({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-event.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-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 './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -36,6 +36,8 @@ interface ContactEventProps {
     patternOpacity?: number;
     /** Full form engine setup and props */
     formEngineSetup?: FormEngineProps;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactEvent - Contact form with flexible field configuration
@@ -48,6 +50,6 @@ interface ContactEventProps {
  * />
  * ```
  */
-declare function ContactEvent({ heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactEventProps): React.JSX.Element;
+declare function ContactEvent({ sectionId, heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactEventProps): React.JSX.Element;
 
 export { ContactEvent, type ContactEventProps };

package/dist/contact-event.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-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 './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -36,6 +36,8 @@ interface ContactEventProps {
     patternOpacity?: number;
     /** Full form engine setup and props */
     formEngineSetup?: FormEngineProps;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactEvent - Contact form with flexible field configuration
@@ -48,6 +50,6 @@ interface ContactEventProps {
  * />
  * ```
  */
-declare function ContactEvent({ heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactEventProps): React.JSX.Element;
+declare function ContactEvent({ sectionId, heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactEventProps): React.JSX.Element;
 
 export { ContactEvent, type ContactEventProps };

package/dist/contact-event.js

@@ -458,6 +458,7 @@ var DEFAULT_FORM_FIELDS = [
   }
 ];
 function ContactEvent({
+  sectionId = "contact-event",
   heading,
   description,
   className,
@@ -476,6 +477,7 @@ function ContactEvent({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-faq.cjs

@@ -543,6 +543,7 @@ var DEFAULT_FORM_FIELDS = [
   }
 ];
 function ContactFaq({
+  sectionId = "contact-faq",
   heading,
   description,
   formHeading,
@@ -606,6 +607,7 @@ function ContactFaq({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-faq.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-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 './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -117,10 +117,12 @@ interface ContactFaqProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactFaq - FAQ contact form with flexible field configuration
  */
-declare function ContactFaq({ heading, description, formHeading, items, itemsSlot, faqHeading, formEngineSetup, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formHeadingClassName, faqHeadingClassName, faqContainerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, gridClassName, background, spacing, pattern, patternOpacity, }: ContactFaqProps): React.JSX.Element;
+declare function ContactFaq({ sectionId, heading, description, formHeading, items, itemsSlot, faqHeading, formEngineSetup, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formHeadingClassName, faqHeadingClassName, faqContainerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, gridClassName, background, spacing, pattern, patternOpacity, }: ContactFaqProps): React.JSX.Element;
 
 export { ContactFaq, type ContactFaqProps, type FaqItem };

package/dist/contact-faq.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-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 './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -117,10 +117,12 @@ interface ContactFaqProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactFaq - FAQ contact form with flexible field configuration
  */
-declare function ContactFaq({ heading, description, formHeading, items, itemsSlot, faqHeading, formEngineSetup, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formHeadingClassName, faqHeadingClassName, faqContainerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, gridClassName, background, spacing, pattern, patternOpacity, }: ContactFaqProps): React.JSX.Element;
+declare function ContactFaq({ sectionId, heading, description, formHeading, items, itemsSlot, faqHeading, formEngineSetup, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formHeadingClassName, faqHeadingClassName, faqContainerClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, gridClassName, background, spacing, pattern, patternOpacity, }: ContactFaqProps): React.JSX.Element;
 
 export { ContactFaq, type ContactFaqProps, type FaqItem };

package/dist/contact-faq.js

@@ -521,6 +521,7 @@ var DEFAULT_FORM_FIELDS = [
   }
 ];
 function ContactFaq({
+  sectionId = "contact-faq",
   heading,
   description,
   formHeading,
@@ -584,6 +585,7 @@ function ContactFaq({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-feedback.cjs

@@ -464,6 +464,7 @@ var DEFAULT_FORM_FIELDS = [
   }
 ];
 function ContactFeedback({
+  sectionId = "contact-feedback",
   heading,
   description,
   className,
@@ -482,6 +483,7 @@ function ContactFeedback({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-feedback.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-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 './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -36,6 +36,8 @@ interface ContactFeedbackProps {
     patternOpacity?: number;
     /** Full form engine setup and props */
     formEngineSetup?: FormEngineProps;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactFeedback - Contact form with flexible field configuration
@@ -48,6 +50,6 @@ interface ContactFeedbackProps {
  * />
  * ```
  */
-declare function ContactFeedback({ heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactFeedbackProps): React.JSX.Element;
+declare function ContactFeedback({ sectionId, heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactFeedbackProps): React.JSX.Element;
 
 export { ContactFeedback, type ContactFeedbackProps };

package/dist/contact-feedback.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-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 './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -36,6 +36,8 @@ interface ContactFeedbackProps {
     patternOpacity?: number;
     /** Full form engine setup and props */
     formEngineSetup?: FormEngineProps;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactFeedback - Contact form with flexible field configuration
@@ -48,6 +50,6 @@ interface ContactFeedbackProps {
  * />
  * ```
  */
-declare function ContactFeedback({ heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactFeedbackProps): React.JSX.Element;
+declare function ContactFeedback({ sectionId, heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactFeedbackProps): React.JSX.Element;
 
 export { ContactFeedback, type ContactFeedbackProps };

package/dist/contact-feedback.js

@@ -458,6 +458,7 @@ var DEFAULT_FORM_FIELDS = [
   }
 ];
 function ContactFeedback({
+  sectionId = "contact-feedback",
   heading,
   description,
   className,
@@ -476,6 +477,7 @@ function ContactFeedback({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-fitness.cjs

@@ -464,6 +464,7 @@ var DEFAULT_FORM_FIELDS = [
   }
 ];
 function ContactFitness({
+  sectionId = "contact-fitness",
   heading,
   description,
   className,
@@ -482,6 +483,7 @@ function ContactFitness({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-fitness.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-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 './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -36,6 +36,8 @@ interface ContactFitnessProps {
     patternOpacity?: number;
     /** Full form engine setup and props */
     formEngineSetup?: FormEngineProps;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactFitness - Contact form with flexible field configuration
@@ -48,6 +50,6 @@ interface ContactFitnessProps {
  * />
  * ```
  */
-declare function ContactFitness({ heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactFitnessProps): React.JSX.Element;
+declare function ContactFitness({ sectionId, heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactFitnessProps): React.JSX.Element;
 
 export { ContactFitness, type ContactFitnessProps };

package/dist/contact-fitness.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-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 './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -36,6 +36,8 @@ interface ContactFitnessProps {
     patternOpacity?: number;
     /** Full form engine setup and props */
     formEngineSetup?: FormEngineProps;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactFitness - Contact form with flexible field configuration
@@ -48,6 +50,6 @@ interface ContactFitnessProps {
  * />
  * ```
  */
-declare function ContactFitness({ heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactFitnessProps): React.JSX.Element;
+declare function ContactFitness({ sectionId, heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactFitnessProps): React.JSX.Element;
 
 export { ContactFitness, type ContactFitnessProps };

package/dist/contact-fitness.js

@@ -458,6 +458,7 @@ var DEFAULT_FORM_FIELDS = [
   }
 ];
 function ContactFitness({
+  sectionId = "contact-fitness",
   heading,
   description,
   className,
@@ -476,6 +477,7 @@ function ContactFitness({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-floating-banner.cjs

@@ -417,6 +417,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ContactFloatingBanner({
+  sectionId = "contact-floating-banner",
   badgeText,
   message,
   buttonText,
@@ -468,6 +469,7 @@ function ContactFloatingBanner({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-floating-banner.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { A as ActionConfig } from './blocks-DL92rOxr.cjs';
-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 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';
@@ -75,6 +75,8 @@ interface ContactFloatingBannerProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactFloatingBanner - A fixed floating banner at the bottom of the page
@@ -92,6 +94,6 @@ interface ContactFloatingBannerProps {
  * />
  * ```
  */
-declare function ContactFloatingBanner({ badgeText, message, buttonText, buttonIcon, buttonHref, actions, actionsSlot, className, bannerClassName, bannerContentClassName, messageClassName, badgeClassName, background, spacing, containerClassName, pattern, patternOpacity, }: ContactFloatingBannerProps): React.JSX.Element;
+declare function ContactFloatingBanner({ sectionId, badgeText, message, buttonText, buttonIcon, buttonHref, actions, actionsSlot, className, bannerClassName, bannerContentClassName, messageClassName, badgeClassName, background, spacing, containerClassName, pattern, patternOpacity, }: ContactFloatingBannerProps): React.JSX.Element;
 
 export { ContactFloatingBanner, type ContactFloatingBannerProps };

package/dist/contact-floating-banner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { A as ActionConfig } from './blocks-DL92rOxr.js';
-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 'class-variance-authority';
 import '@page-speed/pressable';
 import '@opensite/hooks/usePlatformFromUrl';
@@ -75,6 +75,8 @@ interface ContactFloatingBannerProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactFloatingBanner - A fixed floating banner at the bottom of the page
@@ -92,6 +94,6 @@ interface ContactFloatingBannerProps {
  * />
  * ```
  */
-declare function ContactFloatingBanner({ badgeText, message, buttonText, buttonIcon, buttonHref, actions, actionsSlot, className, bannerClassName, bannerContentClassName, messageClassName, badgeClassName, background, spacing, containerClassName, pattern, patternOpacity, }: ContactFloatingBannerProps): React.JSX.Element;
+declare function ContactFloatingBanner({ sectionId, badgeText, message, buttonText, buttonIcon, buttonHref, actions, actionsSlot, className, bannerClassName, bannerContentClassName, messageClassName, badgeClassName, background, spacing, containerClassName, pattern, patternOpacity, }: ContactFloatingBannerProps): React.JSX.Element;
 
 export { ContactFloatingBanner, type ContactFloatingBannerProps };

package/dist/contact-floating-banner.js

@@ -396,6 +396,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function ContactFloatingBanner({
+  sectionId = "contact-floating-banner",
   badgeText,
   message,
   buttonText,
@@ -447,6 +448,7 @@ function ContactFloatingBanner({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-guest.cjs

@@ -464,6 +464,7 @@ var DEFAULT_FORM_FIELDS = [
   }
 ];
 function ContactGuest({
+  sectionId = "contact-guest",
   heading,
   description,
   className,
@@ -482,6 +483,7 @@ function ContactGuest({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-guest.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-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 './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -36,6 +36,8 @@ interface ContactGuestProps {
     patternOpacity?: number;
     /** Full form engine setup and props */
     formEngineSetup?: FormEngineProps;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactGuest - Contact form with flexible field configuration
@@ -48,6 +50,6 @@ interface ContactGuestProps {
  * />
  * ```
  */
-declare function ContactGuest({ heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactGuestProps): React.JSX.Element;
+declare function ContactGuest({ sectionId, heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactGuestProps): React.JSX.Element;
 
 export { ContactGuest, type ContactGuestProps };

package/dist/contact-guest.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-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 './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -36,6 +36,8 @@ interface ContactGuestProps {
     patternOpacity?: number;
     /** Full form engine setup and props */
     formEngineSetup?: FormEngineProps;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactGuest - Contact form with flexible field configuration
@@ -48,6 +50,6 @@ interface ContactGuestProps {
  * />
  * ```
  */
-declare function ContactGuest({ heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactGuestProps): React.JSX.Element;
+declare function ContactGuest({ sectionId, heading, description, className, formEngineSetup, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, background, spacing, pattern, patternOpacity, }: ContactGuestProps): React.JSX.Element;
 
 export { ContactGuest, type ContactGuestProps };

package/dist/contact-guest.js

@@ -458,6 +458,7 @@ var DEFAULT_FORM_FIELDS = [
   }
 ];
 function ContactGuest({
+  sectionId = "contact-guest",
   heading,
   description,
   className,
@@ -476,6 +477,7 @@ function ContactGuest({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-help-center.cjs

@@ -417,6 +417,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ContactHelpCenter({
+  sectionId = "contact-help-center",
   eyebrow,
   heading,
   description,
@@ -460,6 +461,7 @@ function ContactHelpCenter({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-help-center.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 './blocks-DL92rOxr.cjs';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -107,12 +107,14 @@ interface ContactHelpCenterProps {
      * Additional CSS classes for the contact items container
      */
     contactItemsClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactHelpCenter - Split layout with help copy on the left and
  * a contact card stack on the right. Works well for service centers,
  * support hubs, and onboarding touchpoints.
  */
-declare function ContactHelpCenter({ eyebrow, heading, description, cardTitle, contactItems, background, pattern, patternOpacity, className, contactItemsSlot, spacing, containerClassName, contentClassName, leftColumnClassName, eyebrowClassName, headingClassName, descriptionClassName, cardPanelClassName, cardTitleClassName, contactItemsClassName, }: ContactHelpCenterProps): React.JSX.Element;
+declare function ContactHelpCenter({ sectionId, eyebrow, heading, description, cardTitle, contactItems, background, pattern, patternOpacity, className, contactItemsSlot, spacing, containerClassName, contentClassName, leftColumnClassName, eyebrowClassName, headingClassName, descriptionClassName, cardPanelClassName, cardTitleClassName, contactItemsClassName, }: ContactHelpCenterProps): React.JSX.Element;
 
 export { ContactHelpCenter, type ContactHelpCenterProps };

package/dist/contact-help-center.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 './blocks-DL92rOxr.js';
 import 'class-variance-authority';
 import '@page-speed/pressable';
@@ -107,12 +107,14 @@ interface ContactHelpCenterProps {
      * Additional CSS classes for the contact items container
      */
     contactItemsClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ContactHelpCenter - Split layout with help copy on the left and
  * a contact card stack on the right. Works well for service centers,
  * support hubs, and onboarding touchpoints.
  */
-declare function ContactHelpCenter({ eyebrow, heading, description, cardTitle, contactItems, background, pattern, patternOpacity, className, contactItemsSlot, spacing, containerClassName, contentClassName, leftColumnClassName, eyebrowClassName, headingClassName, descriptionClassName, cardPanelClassName, cardTitleClassName, contactItemsClassName, }: ContactHelpCenterProps): React.JSX.Element;
+declare function ContactHelpCenter({ sectionId, eyebrow, heading, description, cardTitle, contactItems, background, pattern, patternOpacity, className, contactItemsSlot, spacing, containerClassName, contentClassName, leftColumnClassName, eyebrowClassName, headingClassName, descriptionClassName, cardPanelClassName, cardTitleClassName, contactItemsClassName, }: ContactHelpCenterProps): React.JSX.Element;
 
 export { ContactHelpCenter, type ContactHelpCenterProps };

package/dist/contact-help-center.js

@@ -396,6 +396,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function ContactHelpCenter({
+  sectionId = "contact-help-center",
   eyebrow,
   heading,
   description,
@@ -439,6 +440,7 @@ function ContactHelpCenter({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/contact-image.cjs

@@ -500,6 +500,7 @@ var DEFAULT_FORM_FIELDS = [
   }
 ];
 function ContactImage({
+  sectionId = "contact-image",
   eyebrow,
   heading,
   description,
@@ -614,6 +615,7 @@ function ContactImage({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,