@opensite/ui 3.0.4 → 3.0.6

package/dist/services-list-image-cards.cjs

@@ -418,6 +418,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListImageCards({
+  sectionId = "services-list-image-cards",
   heading,
   description,
   primaryAction,
@@ -527,6 +528,7 @@ function ServicesListImageCards({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-image-cards.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';
@@ -123,6 +123,8 @@ interface ServicesListImageCardsProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListImageCards - An asymmetric layout with introductory text on the left and 2 featured service cards on the right.
@@ -141,6 +143,6 @@ interface ServicesListImageCardsProps {
  * />
  * ```
  */
-declare function ServicesListImageCards({ heading, description, primaryAction, secondaryAction, actionsSlot, services, servicesSlot, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: ServicesListImageCardsProps): React.JSX.Element;
+declare function ServicesListImageCards({ sectionId, heading, description, primaryAction, secondaryAction, actionsSlot, services, servicesSlot, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: ServicesListImageCardsProps): React.JSX.Element;
 
 export { ServicesListImageCards, type ServicesListImageCardsProps };

package/dist/services-list-image-cards.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';
@@ -123,6 +123,8 @@ interface ServicesListImageCardsProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListImageCards - An asymmetric layout with introductory text on the left and 2 featured service cards on the right.
@@ -141,6 +143,6 @@ interface ServicesListImageCardsProps {
  * />
  * ```
  */
-declare function ServicesListImageCards({ heading, description, primaryAction, secondaryAction, actionsSlot, services, servicesSlot, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: ServicesListImageCardsProps): React.JSX.Element;
+declare function ServicesListImageCards({ sectionId, heading, description, primaryAction, secondaryAction, actionsSlot, services, servicesSlot, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: ServicesListImageCardsProps): React.JSX.Element;
 
 export { ServicesListImageCards, type ServicesListImageCardsProps };

package/dist/services-list-image-cards.js

@@ -397,6 +397,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListImageCards({
+  sectionId = "services-list-image-cards",
   heading,
   description,
   primaryAction,
@@ -506,6 +507,7 @@ function ServicesListImageCards({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-image-overlay-grid.cjs

@@ -418,6 +418,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListImageOverlayGrid({
+  sectionId = "services-list-image-overlay-grid",
   heading,
   description,
   primaryAction,
@@ -505,6 +506,7 @@ function ServicesListImageOverlayGrid({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-image-overlay-grid.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';
@@ -111,6 +111,8 @@ interface ServicesListImageOverlayGridProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListImageOverlayGrid - An asymmetric layout with introductory text on the left and a 5-service grid on the right.
@@ -129,6 +131,6 @@ interface ServicesListImageOverlayGridProps {
  * />
  * ```
  */
-declare function ServicesListImageOverlayGrid({ heading, description, primaryAction, actionsSlot, services, servicesSlot, className, containerClassName, contentClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: ServicesListImageOverlayGridProps): React.JSX.Element;
+declare function ServicesListImageOverlayGrid({ sectionId, heading, description, primaryAction, actionsSlot, services, servicesSlot, className, containerClassName, contentClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: ServicesListImageOverlayGridProps): React.JSX.Element;
 
 export { ServicesListImageOverlayGrid, type ServicesListImageOverlayGridProps };

package/dist/services-list-image-overlay-grid.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';
@@ -111,6 +111,8 @@ interface ServicesListImageOverlayGridProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListImageOverlayGrid - An asymmetric layout with introductory text on the left and a 5-service grid on the right.
@@ -129,6 +131,6 @@ interface ServicesListImageOverlayGridProps {
  * />
  * ```
  */
-declare function ServicesListImageOverlayGrid({ heading, description, primaryAction, actionsSlot, services, servicesSlot, className, containerClassName, contentClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: ServicesListImageOverlayGridProps): React.JSX.Element;
+declare function ServicesListImageOverlayGrid({ sectionId, heading, description, primaryAction, actionsSlot, services, servicesSlot, className, containerClassName, contentClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: ServicesListImageOverlayGridProps): React.JSX.Element;
 
 export { ServicesListImageOverlayGrid, type ServicesListImageOverlayGridProps };

package/dist/services-list-image-overlay-grid.js

@@ -397,6 +397,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListImageOverlayGrid({
+  sectionId = "services-list-image-overlay-grid",
   heading,
   description,
   primaryAction,
@@ -484,6 +485,7 @@ function ServicesListImageOverlayGrid({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-masonry.cjs

@@ -447,6 +447,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListMasonry({
+  sectionId = "services-list-masonry",
   heading,
   description,
   services,
@@ -546,6 +547,7 @@ function ServicesListMasonry({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-masonry.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';
@@ -116,6 +116,8 @@ interface ServicesListMasonryProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListMasonry - A masonry-style grid layout with variable card heights based on content.
@@ -136,6 +138,6 @@ interface ServicesListMasonryProps {
  * />
  * ```
  */
-declare function ServicesListMasonry({ heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListMasonryProps): React.JSX.Element;
+declare function ServicesListMasonry({ sectionId, heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListMasonryProps): React.JSX.Element;
 
 export { ServicesListMasonry, type ServicesListMasonryProps };

package/dist/services-list-masonry.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';
@@ -116,6 +116,8 @@ interface ServicesListMasonryProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListMasonry - A masonry-style grid layout with variable card heights based on content.
@@ -136,6 +138,6 @@ interface ServicesListMasonryProps {
  * />
  * ```
  */
-declare function ServicesListMasonry({ heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListMasonryProps): React.JSX.Element;
+declare function ServicesListMasonry({ sectionId, heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListMasonryProps): React.JSX.Element;
 
 export { ServicesListMasonry, type ServicesListMasonryProps };

package/dist/services-list-masonry.js

@@ -426,6 +426,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListMasonry({
+  sectionId = "services-list-masonry",
   heading,
   description,
   services,
@@ -525,6 +526,7 @@ function ServicesListMasonry({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-methodology-steps.cjs

@@ -447,6 +447,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListMethodologySteps({
+  sectionId = "services-list-methodology-steps",
   heading,
   description,
   primaryAction,
@@ -540,6 +541,7 @@ function ServicesListMethodologySteps({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-methodology-steps.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 } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -104,6 +104,8 @@ interface ServicesListMethodologyStepsProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListMethodologySteps - A structured methodology layout displaying numbered service steps with options.
@@ -122,6 +124,6 @@ interface ServicesListMethodologyStepsProps {
  * />
  * ```
  */
-declare function ServicesListMethodologySteps({ heading, description, primaryAction, actionsSlot, steps, stepsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, stepsClassName, stepClassName, numberClassName, background, spacing, pattern, patternOpacity, }: ServicesListMethodologyStepsProps): React.JSX.Element;
+declare function ServicesListMethodologySteps({ sectionId, heading, description, primaryAction, actionsSlot, steps, stepsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, stepsClassName, stepClassName, numberClassName, background, spacing, pattern, patternOpacity, }: ServicesListMethodologyStepsProps): React.JSX.Element;
 
 export { ServicesListMethodologySteps, type ServicesListMethodologyStepsProps };

package/dist/services-list-methodology-steps.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 } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -104,6 +104,8 @@ interface ServicesListMethodologyStepsProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListMethodologySteps - A structured methodology layout displaying numbered service steps with options.
@@ -122,6 +124,6 @@ interface ServicesListMethodologyStepsProps {
  * />
  * ```
  */
-declare function ServicesListMethodologySteps({ heading, description, primaryAction, actionsSlot, steps, stepsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, stepsClassName, stepClassName, numberClassName, background, spacing, pattern, patternOpacity, }: ServicesListMethodologyStepsProps): React.JSX.Element;
+declare function ServicesListMethodologySteps({ sectionId, heading, description, primaryAction, actionsSlot, steps, stepsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, stepsClassName, stepClassName, numberClassName, background, spacing, pattern, patternOpacity, }: ServicesListMethodologyStepsProps): React.JSX.Element;
 
 export { ServicesListMethodologySteps, type ServicesListMethodologyStepsProps };

package/dist/services-list-methodology-steps.js

@@ -426,6 +426,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListMethodologySteps({
+  sectionId = "services-list-methodology-steps",
   heading,
   description,
   primaryAction,
@@ -519,6 +520,7 @@ function ServicesListMethodologySteps({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-minimal-grid.cjs

@@ -417,6 +417,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListMinimalGrid({
+  sectionId = "services-list-minimal-grid",
   heading,
   description,
   services,
@@ -499,6 +500,7 @@ function ServicesListMinimalGrid({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-minimal-grid.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';
@@ -108,6 +108,8 @@ interface ServicesListMinimalGridProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListMinimalGrid - A clean, minimal 3-column grid layout for displaying services.
@@ -128,6 +130,6 @@ interface ServicesListMinimalGridProps {
  * />
  * ```
  */
-declare function ServicesListMinimalGrid({ heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListMinimalGridProps): React.JSX.Element;
+declare function ServicesListMinimalGrid({ sectionId, heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListMinimalGridProps): React.JSX.Element;
 
 export { ServicesListMinimalGrid, type ServicesListMinimalGridProps };

package/dist/services-list-minimal-grid.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';
@@ -108,6 +108,8 @@ interface ServicesListMinimalGridProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListMinimalGrid - A clean, minimal 3-column grid layout for displaying services.
@@ -128,6 +130,6 @@ interface ServicesListMinimalGridProps {
  * />
  * ```
  */
-declare function ServicesListMinimalGrid({ heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListMinimalGridProps): React.JSX.Element;
+declare function ServicesListMinimalGrid({ sectionId, heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListMinimalGridProps): React.JSX.Element;
 
 export { ServicesListMinimalGrid, type ServicesListMinimalGridProps };

package/dist/services-list-minimal-grid.js

@@ -396,6 +396,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListMinimalGrid({
+  sectionId = "services-list-minimal-grid",
   heading,
   description,
   services,
@@ -478,6 +479,7 @@ function ServicesListMinimalGrid({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-muted-cards.cjs

@@ -446,6 +446,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListMutedCards({
+  sectionId = "services-list-muted-cards",
   heading,
   description,
   services,
@@ -520,6 +521,7 @@ function ServicesListMutedCards({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-muted-cards.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';
@@ -104,6 +104,8 @@ interface ServicesListMutedCardsProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListMutedCards - A 2x2 grid layout with muted background cards featuring icons in bordered boxes.
@@ -123,6 +125,6 @@ interface ServicesListMutedCardsProps {
  * />
  * ```
  */
-declare function ServicesListMutedCards({ heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListMutedCardsProps): React.JSX.Element;
+declare function ServicesListMutedCards({ sectionId, heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListMutedCardsProps): React.JSX.Element;
 
 export { ServicesListMutedCards, type ServicesListMutedCardsProps };

package/dist/services-list-muted-cards.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';
@@ -104,6 +104,8 @@ interface ServicesListMutedCardsProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListMutedCards - A 2x2 grid layout with muted background cards featuring icons in bordered boxes.
@@ -123,6 +125,6 @@ interface ServicesListMutedCardsProps {
  * />
  * ```
  */
-declare function ServicesListMutedCards({ heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListMutedCardsProps): React.JSX.Element;
+declare function ServicesListMutedCards({ sectionId, heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListMutedCardsProps): React.JSX.Element;
 
 export { ServicesListMutedCards, type ServicesListMutedCardsProps };

package/dist/services-list-muted-cards.js

@@ -425,6 +425,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListMutedCards({
+  sectionId = "services-list-muted-cards",
   heading,
   description,
   services,
@@ -499,6 +500,7 @@ function ServicesListMutedCards({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-numbered-steps.cjs

@@ -447,6 +447,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListNumberedSteps({
+  sectionId = "services-list-numbered-steps",
   heading,
   description,
   primaryAction,
@@ -542,6 +543,7 @@ function ServicesListNumberedSteps({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-numbered-steps.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 } from './blocks-DL92rOxr.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -100,6 +100,8 @@ interface ServicesListNumberedStepsProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListNumberedSteps - A numbered steps layout displaying services as a sequential process.
@@ -119,6 +121,6 @@ interface ServicesListNumberedStepsProps {
  * />
  * ```
  */
-declare function ServicesListNumberedSteps({ heading, description, primaryAction, actionsSlot, steps, stepsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, stepsClassName, stepClassName, numberClassName, background, spacing, pattern, patternOpacity, }: ServicesListNumberedStepsProps): React.JSX.Element;
+declare function ServicesListNumberedSteps({ sectionId, heading, description, primaryAction, actionsSlot, steps, stepsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, stepsClassName, stepClassName, numberClassName, background, spacing, pattern, patternOpacity, }: ServicesListNumberedStepsProps): React.JSX.Element;
 
 export { ServicesListNumberedSteps, type ServicesListNumberedStepsProps };

package/dist/services-list-numbered-steps.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 } from './blocks-DL92rOxr.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
@@ -100,6 +100,8 @@ interface ServicesListNumberedStepsProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListNumberedSteps - A numbered steps layout displaying services as a sequential process.
@@ -119,6 +121,6 @@ interface ServicesListNumberedStepsProps {
  * />
  * ```
  */
-declare function ServicesListNumberedSteps({ heading, description, primaryAction, actionsSlot, steps, stepsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, stepsClassName, stepClassName, numberClassName, background, spacing, pattern, patternOpacity, }: ServicesListNumberedStepsProps): React.JSX.Element;
+declare function ServicesListNumberedSteps({ sectionId, heading, description, primaryAction, actionsSlot, steps, stepsSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, stepsClassName, stepClassName, numberClassName, background, spacing, pattern, patternOpacity, }: ServicesListNumberedStepsProps): React.JSX.Element;
 
 export { ServicesListNumberedSteps, type ServicesListNumberedStepsProps };

package/dist/services-list-numbered-steps.js

@@ -426,6 +426,7 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListNumberedSteps({
+  sectionId = "services-list-numbered-steps",
   heading,
   description,
   primaryAction,
@@ -521,6 +522,7 @@ function ServicesListNumberedSteps({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-pricing-grid.cjs

@@ -417,6 +417,7 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function ServicesListPricingGrid({
+  sectionId = "services-list-pricing-grid",
   heading,
   description,
   services,
@@ -522,6 +523,7 @@ function ServicesListPricingGrid({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       className,

package/dist/services-list-pricing-grid.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';
@@ -120,6 +120,8 @@ interface ServicesListPricingGridProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListPricingGrid - A 2x2 grid layout displaying services with duration and pricing information.
@@ -139,6 +141,6 @@ interface ServicesListPricingGridProps {
  * />
  * ```
  */
-declare function ServicesListPricingGrid({ heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListPricingGridProps): React.JSX.Element;
+declare function ServicesListPricingGrid({ sectionId, heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListPricingGridProps): React.JSX.Element;
 
 export { ServicesListPricingGrid, type ServicesListPricingGridProps };

package/dist/services-list-pricing-grid.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';
@@ -120,6 +120,8 @@ interface ServicesListPricingGridProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ServicesListPricingGrid - A 2x2 grid layout displaying services with duration and pricing information.
@@ -139,6 +141,6 @@ interface ServicesListPricingGridProps {
  * />
  * ```
  */
-declare function ServicesListPricingGrid({ heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListPricingGridProps): React.JSX.Element;
+declare function ServicesListPricingGrid({ sectionId, heading, description, services, servicesSlot, className, containerClassName, headerClassName, headingClassName, descriptionClassName, gridClassName, cardClassName, iconClassName, background, spacing, pattern, patternOpacity, }: ServicesListPricingGridProps): React.JSX.Element;
 
 export { ServicesListPricingGrid, type ServicesListPricingGridProps };