@opensite/ui 3.0.5 → 3.0.7

package/dist/project-showcase-alternating.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-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';
@@ -66,6 +66,8 @@ interface ProjectShowcaseAlternatingProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectShowcaseAlternating - Elegant alternating layout with large images and descriptive text.
@@ -77,6 +79,6 @@ interface ProjectShowcaseAlternatingProps {
  * design portfolios, or any showcase where storytelling and visual impact are equally
  * important.
  */
-declare function ProjectShowcaseAlternating({ heading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, listClassName, cardClassName, }: ProjectShowcaseAlternatingProps): react_jsx_runtime.JSX.Element;
+declare function ProjectShowcaseAlternating({ sectionId, heading, projects, projectsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, listClassName, cardClassName, }: ProjectShowcaseAlternatingProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectShowcaseAlternating, type ProjectShowcaseAlternatingItem, type ProjectShowcaseAlternatingProps };

package/dist/project-showcase-alternating.js

@@ -386,6 +386,7 @@ var Section = React.forwardRef(
 );
 Section.displayName = "Section";
 function ProjectShowcaseAlternating({
+  sectionId = "project-showcase-alternating",
   heading,
   projects,
   projectsSlot,
@@ -432,6 +433,7 @@ function ProjectShowcaseAlternating({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-sticky-scroll.cjs

@@ -422,6 +422,7 @@ var Section = React__default.default.forwardRef(
 );
 Section.displayName = "Section";
 function ProjectStickyScroll({
+  sectionId = "project-sticky-scroll",
   content,
   contentSlot,
   backgroundColors,
@@ -503,6 +504,7 @@ function ProjectStickyScroll({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-sticky-scroll.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 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';
@@ -68,6 +68,8 @@ interface ProjectStickyScrollProps {
      * Additional CSS classes for each description
      */
     descriptionClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectStickyScroll - Scroll-driven content reveal with sticky gradient sidebar.
@@ -79,6 +81,6 @@ interface ProjectStickyScrollProps {
  * custom React content for each section. Perfect for storytelling, case study walkthroughs,
  * or any narrative content where visual context should remain visible while scrolling.
  */
-declare function ProjectStickyScroll({ content, contentSlot, backgroundColors, linearGradients, background, spacing, pattern, patternOpacity, className, scrollContainerClassName, textContentClassName, contentClassName, titleClassName, descriptionClassName, }: ProjectStickyScrollProps): react_jsx_runtime.JSX.Element;
+declare function ProjectStickyScroll({ sectionId, content, contentSlot, backgroundColors, linearGradients, background, spacing, pattern, patternOpacity, className, scrollContainerClassName, textContentClassName, contentClassName, titleClassName, descriptionClassName, }: ProjectStickyScrollProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectStickyScroll, type ProjectStickyScrollItem, type ProjectStickyScrollProps };

package/dist/project-sticky-scroll.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 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';
@@ -68,6 +68,8 @@ interface ProjectStickyScrollProps {
      * Additional CSS classes for each description
      */
     descriptionClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectStickyScroll - Scroll-driven content reveal with sticky gradient sidebar.
@@ -79,6 +81,6 @@ interface ProjectStickyScrollProps {
  * custom React content for each section. Perfect for storytelling, case study walkthroughs,
  * or any narrative content where visual context should remain visible while scrolling.
  */
-declare function ProjectStickyScroll({ content, contentSlot, backgroundColors, linearGradients, background, spacing, pattern, patternOpacity, className, scrollContainerClassName, textContentClassName, contentClassName, titleClassName, descriptionClassName, }: ProjectStickyScrollProps): react_jsx_runtime.JSX.Element;
+declare function ProjectStickyScroll({ sectionId, content, contentSlot, backgroundColors, linearGradients, background, spacing, pattern, patternOpacity, className, scrollContainerClassName, textContentClassName, contentClassName, titleClassName, descriptionClassName, }: ProjectStickyScrollProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectStickyScroll, type ProjectStickyScrollItem, type ProjectStickyScrollProps };

package/dist/project-sticky-scroll.js

@@ -416,6 +416,7 @@ var Section = React.forwardRef(
 );
 Section.displayName = "Section";
 function ProjectStickyScroll({
+  sectionId = "project-sticky-scroll",
   content,
   contentSlot,
   backgroundColors,
@@ -497,6 +498,7 @@ function ProjectStickyScroll({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-studio-hover-preview.cjs

@@ -393,6 +393,7 @@ var Section = React__default.default.forwardRef(
 );
 Section.displayName = "Section";
 function ProjectStudioHoverPreview({
+  sectionId = "project-studio-hover-preview",
   heading,
   projects,
   projectsSlot,
@@ -478,6 +479,7 @@ function ProjectStudioHoverPreview({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-studio-hover-preview.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-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';
@@ -74,6 +74,8 @@ interface ProjectStudioHoverPreviewProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectStudioHoverPreview - Studio gallery grid with floating cursor-following tooltip.
@@ -86,6 +88,6 @@ interface ProjectStudioHoverPreviewProps {
  * Perfect for design studios, architecture firms, or creative agencies showcasing
  * their portfolio with an interactive, premium feel.
  */
-declare function ProjectStudioHoverPreview({ heading, projects, projectsSlot, tooltipLabel, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, gridClassName, cardClassName, }: ProjectStudioHoverPreviewProps): react_jsx_runtime.JSX.Element;
+declare function ProjectStudioHoverPreview({ sectionId, heading, projects, projectsSlot, tooltipLabel, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, gridClassName, cardClassName, }: ProjectStudioHoverPreviewProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectStudioHoverPreview, type ProjectStudioHoverPreviewItem, type ProjectStudioHoverPreviewProps };

package/dist/project-studio-hover-preview.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-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';
@@ -74,6 +74,8 @@ interface ProjectStudioHoverPreviewProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectStudioHoverPreview - Studio gallery grid with floating cursor-following tooltip.
@@ -86,6 +88,6 @@ interface ProjectStudioHoverPreviewProps {
  * Perfect for design studios, architecture firms, or creative agencies showcasing
  * their portfolio with an interactive, premium feel.
  */
-declare function ProjectStudioHoverPreview({ heading, projects, projectsSlot, tooltipLabel, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, gridClassName, cardClassName, }: ProjectStudioHoverPreviewProps): react_jsx_runtime.JSX.Element;
+declare function ProjectStudioHoverPreview({ sectionId, heading, projects, projectsSlot, tooltipLabel, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, gridClassName, cardClassName, }: ProjectStudioHoverPreviewProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectStudioHoverPreview, type ProjectStudioHoverPreviewItem, type ProjectStudioHoverPreviewProps };

package/dist/project-studio-hover-preview.js

@@ -387,6 +387,7 @@ var Section = React.forwardRef(
 );
 Section.displayName = "Section";
 function ProjectStudioHoverPreview({
+  sectionId = "project-studio-hover-preview",
   heading,
   projects,
   projectsSlot,
@@ -472,6 +473,7 @@ function ProjectStudioHoverPreview({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-table-list.cjs

@@ -392,6 +392,7 @@ var Section = React__default.default.forwardRef(
 );
 Section.displayName = "Section";
 function ProjectTableList({
+  sectionId = "project-table-list",
   projects,
   projectsSlot,
   projectsHeaderLabel,
@@ -481,6 +482,7 @@ function ProjectTableList({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-table-list.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-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';
@@ -87,6 +87,8 @@ interface ProjectTableListProps {
      * Additional CSS classes for the gallery column
      */
     galleryColumnClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectTableList - Table-style project list with numbered rows and gallery thumbnails.
@@ -98,6 +100,6 @@ interface ProjectTableListProps {
  * case studies, portfolio items, or any project listing where detailed descriptions
  * and chronological ordering are important. Responsive layout stacks columns on mobile.
  */
-declare function ProjectTableList({ projects, projectsSlot, projectsHeaderLabel, descriptionHeaderLabel, galleryHeaderLabel, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, listClassName, headerClassName, rowClassName, infoColumnClassName, descriptionColumnClassName, galleryColumnClassName, }: ProjectTableListProps): react_jsx_runtime.JSX.Element;
+declare function ProjectTableList({ sectionId, projects, projectsSlot, projectsHeaderLabel, descriptionHeaderLabel, galleryHeaderLabel, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, listClassName, headerClassName, rowClassName, infoColumnClassName, descriptionColumnClassName, galleryColumnClassName, }: ProjectTableListProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectTableList, type ProjectTableListItem, type ProjectTableListProps };

package/dist/project-table-list.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-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';
@@ -87,6 +87,8 @@ interface ProjectTableListProps {
      * Additional CSS classes for the gallery column
      */
     galleryColumnClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectTableList - Table-style project list with numbered rows and gallery thumbnails.
@@ -98,6 +100,6 @@ interface ProjectTableListProps {
  * case studies, portfolio items, or any project listing where detailed descriptions
  * and chronological ordering are important. Responsive layout stacks columns on mobile.
  */
-declare function ProjectTableList({ projects, projectsSlot, projectsHeaderLabel, descriptionHeaderLabel, galleryHeaderLabel, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, listClassName, headerClassName, rowClassName, infoColumnClassName, descriptionColumnClassName, galleryColumnClassName, }: ProjectTableListProps): react_jsx_runtime.JSX.Element;
+declare function ProjectTableList({ sectionId, projects, projectsSlot, projectsHeaderLabel, descriptionHeaderLabel, galleryHeaderLabel, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, listClassName, headerClassName, rowClassName, infoColumnClassName, descriptionColumnClassName, galleryColumnClassName, }: ProjectTableListProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectTableList, type ProjectTableListItem, type ProjectTableListProps };

package/dist/project-table-list.js

@@ -386,6 +386,7 @@ var Section = React.forwardRef(
 );
 Section.displayName = "Section";
 function ProjectTableList({
+  sectionId = "project-table-list",
   projects,
   projectsSlot,
   projectsHeaderLabel,
@@ -475,6 +476,7 @@ function ProjectTableList({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-video-carousel.cjs

@@ -682,6 +682,7 @@ var VideoSection = ({
   );
 };
 function ProjectVideoCarousel({
+  sectionId = "project-video-carousel",
   heading,
   subheading,
   videoSections,
@@ -726,6 +727,7 @@ function ProjectVideoCarousel({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-video-carousel.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-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';
@@ -78,6 +78,8 @@ interface ProjectVideoCarouselProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectVideoCarousel - Full-width video carousel with hover-to-play and navigation controls.
@@ -89,6 +91,6 @@ interface ProjectVideoCarouselProps {
  * Perfect for showcasing video reels, film portfolios, or any video content that benefits
  * from a cinematic, browsable presentation.
  */
-declare function ProjectVideoCarousel({ heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, carouselClassName, cardClassName, }: ProjectVideoCarouselProps): react_jsx_runtime.JSX.Element;
+declare function ProjectVideoCarousel({ sectionId, heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, carouselClassName, cardClassName, }: ProjectVideoCarouselProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectVideoCarousel, type ProjectVideoCarouselItem, type ProjectVideoCarouselProps };

package/dist/project-video-carousel.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-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';
@@ -78,6 +78,8 @@ interface ProjectVideoCarouselProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectVideoCarousel - Full-width video carousel with hover-to-play and navigation controls.
@@ -89,6 +91,6 @@ interface ProjectVideoCarouselProps {
  * Perfect for showcasing video reels, film portfolios, or any video content that benefits
  * from a cinematic, browsable presentation.
  */
-declare function ProjectVideoCarousel({ heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, carouselClassName, cardClassName, }: ProjectVideoCarouselProps): react_jsx_runtime.JSX.Element;
+declare function ProjectVideoCarousel({ sectionId, heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, carouselClassName, cardClassName, }: ProjectVideoCarouselProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectVideoCarousel, type ProjectVideoCarouselItem, type ProjectVideoCarouselProps };

package/dist/project-video-carousel.js

@@ -658,6 +658,7 @@ var VideoSection = ({
   );
 };
 function ProjectVideoCarousel({
+  sectionId = "project-video-carousel",
   heading,
   subheading,
   videoSections,
@@ -702,6 +703,7 @@ function ProjectVideoCarousel({
   return /* @__PURE__ */ jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-video-hover-bento.cjs

@@ -488,6 +488,7 @@ var VideoSection = ({
   );
 };
 function ProjectVideoHoverBento({
+  sectionId = "project-video-hover-bento",
   heading,
   subheading,
   videoSections,
@@ -521,6 +522,7 @@ function ProjectVideoHoverBento({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-video-hover-bento.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-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';
@@ -74,6 +74,8 @@ interface ProjectVideoHoverBentoProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectVideoHoverBento - Bento-style video grid with integrated header cell.
@@ -85,6 +87,6 @@ interface ProjectVideoHoverBentoProps {
  * for modern, asymmetric layouts that integrate branding with video content in a
  * cohesive grid presentation.
  */
-declare function ProjectVideoHoverBento({ heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, gridClassName, headerClassName, headingClassName, subheadingClassName, cardClassName, }: ProjectVideoHoverBentoProps): react_jsx_runtime.JSX.Element;
+declare function ProjectVideoHoverBento({ sectionId, heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, gridClassName, headerClassName, headingClassName, subheadingClassName, cardClassName, }: ProjectVideoHoverBentoProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectVideoHoverBento, type ProjectVideoHoverBentoItem, type ProjectVideoHoverBentoProps };

package/dist/project-video-hover-bento.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-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';
@@ -74,6 +74,8 @@ interface ProjectVideoHoverBentoProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectVideoHoverBento - Bento-style video grid with integrated header cell.
@@ -85,6 +87,6 @@ interface ProjectVideoHoverBentoProps {
  * for modern, asymmetric layouts that integrate branding with video content in a
  * cohesive grid presentation.
  */
-declare function ProjectVideoHoverBento({ heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, gridClassName, headerClassName, headingClassName, subheadingClassName, cardClassName, }: ProjectVideoHoverBentoProps): react_jsx_runtime.JSX.Element;
+declare function ProjectVideoHoverBento({ sectionId, heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, gridClassName, headerClassName, headingClassName, subheadingClassName, cardClassName, }: ProjectVideoHoverBentoProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectVideoHoverBento, type ProjectVideoHoverBentoItem, type ProjectVideoHoverBentoProps };

package/dist/project-video-hover-bento.js

@@ -467,6 +467,7 @@ var VideoSection = ({
   );
 };
 function ProjectVideoHoverBento({
+  sectionId = "project-video-hover-bento",
   heading,
   subheading,
   videoSections,
@@ -500,6 +501,7 @@ function ProjectVideoHoverBento({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-video-hover-grid.cjs

@@ -488,6 +488,7 @@ var VideoSection = ({
   );
 };
 function ProjectVideoHoverGrid({
+  sectionId = "project-video-hover-grid",
   heading,
   subheading,
   videoSections,
@@ -522,6 +523,7 @@ function ProjectVideoHoverGrid({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-video-hover-grid.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-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';
@@ -78,6 +78,8 @@ interface ProjectVideoHoverGridProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectVideoHoverGrid - Two-column video grid with hover-to-play functionality.
@@ -89,6 +91,6 @@ interface ProjectVideoHoverGridProps {
  * multiple video projects in a balanced grid layout while maintaining the immersive
  * hover-to-play interaction.
  */
-declare function ProjectVideoHoverGrid({ heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, cardClassName, }: ProjectVideoHoverGridProps): react_jsx_runtime.JSX.Element;
+declare function ProjectVideoHoverGrid({ sectionId, heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, cardClassName, }: ProjectVideoHoverGridProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectVideoHoverGrid, type ProjectVideoHoverGridItem, type ProjectVideoHoverGridProps };

package/dist/project-video-hover-grid.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-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';
@@ -78,6 +78,8 @@ interface ProjectVideoHoverGridProps {
      * Additional CSS classes for each card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectVideoHoverGrid - Two-column video grid with hover-to-play functionality.
@@ -89,6 +91,6 @@ interface ProjectVideoHoverGridProps {
  * multiple video projects in a balanced grid layout while maintaining the immersive
  * hover-to-play interaction.
  */
-declare function ProjectVideoHoverGrid({ heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, cardClassName, }: ProjectVideoHoverGridProps): react_jsx_runtime.JSX.Element;
+declare function ProjectVideoHoverGrid({ sectionId, heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, gridClassName, cardClassName, }: ProjectVideoHoverGridProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectVideoHoverGrid, type ProjectVideoHoverGridItem, type ProjectVideoHoverGridProps };

package/dist/project-video-hover-grid.js

@@ -467,6 +467,7 @@ var VideoSection = ({
   );
 };
 function ProjectVideoHoverGrid({
+  sectionId = "project-video-hover-grid",
   heading,
   subheading,
   videoSections,
@@ -501,6 +502,7 @@ function ProjectVideoHoverGrid({
   return /* @__PURE__ */ jsxs(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-video-hover-rounded.cjs

@@ -488,6 +488,7 @@ var VideoSection = ({
   );
 };
 function ProjectVideoHoverRounded({
+  sectionId = "project-video-hover-rounded",
   heading,
   subheading,
   videoSections,
@@ -522,6 +523,7 @@ function ProjectVideoHoverRounded({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,

package/dist/project-video-hover-rounded.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-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';
@@ -78,6 +78,8 @@ interface ProjectVideoHoverRoundedProps {
      * Additional CSS classes for each video card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectVideoHoverRounded - Rounded video cards with vertical spacing and hover-to-play.
@@ -89,6 +91,6 @@ interface ProjectVideoHoverRoundedProps {
  * edge-to-edge layouts. Ideal for portfolios that want a cleaner, more contained
  * presentation of video content.
  */
-declare function ProjectVideoHoverRounded({ heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, listClassName, cardClassName, }: ProjectVideoHoverRoundedProps): react_jsx_runtime.JSX.Element;
+declare function ProjectVideoHoverRounded({ sectionId, heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, listClassName, cardClassName, }: ProjectVideoHoverRoundedProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectVideoHoverRounded, type ProjectVideoHoverRoundedItem, type ProjectVideoHoverRoundedProps };

package/dist/project-video-hover-rounded.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-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';
@@ -78,6 +78,8 @@ interface ProjectVideoHoverRoundedProps {
      * Additional CSS classes for each video card
      */
     cardClassName?: string;
+    /** Optional Section ID */
+    sectionId?: string;
 }
 /**
  * ProjectVideoHoverRounded - Rounded video cards with vertical spacing and hover-to-play.
@@ -89,6 +91,6 @@ interface ProjectVideoHoverRoundedProps {
  * edge-to-edge layouts. Ideal for portfolios that want a cleaner, more contained
  * presentation of video content.
  */
-declare function ProjectVideoHoverRounded({ heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, listClassName, cardClassName, }: ProjectVideoHoverRoundedProps): react_jsx_runtime.JSX.Element;
+declare function ProjectVideoHoverRounded({ sectionId, heading, subheading, videoSections, videoSectionsSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, subheadingClassName, listClassName, cardClassName, }: ProjectVideoHoverRoundedProps): react_jsx_runtime.JSX.Element;
 
 export { ProjectVideoHoverRounded, type ProjectVideoHoverRoundedItem, type ProjectVideoHoverRoundedProps };

package/dist/project-video-hover-rounded.js

@@ -467,6 +467,7 @@ var VideoSection = ({
   );
 };
 function ProjectVideoHoverRounded({
+  sectionId = "project-video-hover-rounded",
   heading,
   subheading,
   videoSections,
@@ -501,6 +502,7 @@ function ProjectVideoHoverRounded({
   return /* @__PURE__ */ jsx(
     Section,
     {
+      id: sectionId,
       background,
       spacing,
       pattern,