@pixelated-tech/components 3.7.1 → 3.7.4

package/dist/components/admin/site-health/site-health-on-site-seo.integration.js

@@ -841,6 +841,17 @@ async function analyzeSinglePage(url) {
             console.warn(`Failed to load page: ${url} - no response received`);
             // Continue with analysis using available data, but mark header-dependent metrics as unavailable
         }
+        // Check Content-Type header - only analyze HTML pages
+        const contentType = response?.headers()['content-type'] || '';
+        if (!contentType.startsWith('text/html')) {
+            return {
+                url,
+                title: '',
+                statusCode: response ? response.status() : 200,
+                audits: [],
+                crawledAt: new Date().toISOString()
+            };
+        }
         // Wait for H1 elements to be rendered (if any) with a short timeout
         try {
             await page.waitForSelector('h1', { timeout: 1000 }); // Reduced from 2000 to 1000
@@ -1186,6 +1197,10 @@ export async function performOnSiteSEOAnalysis(baseUrl) {
         for (const pageUrl of pagesToAnalyze) {
             try {
                 const pageAnalysis = await analyzeSinglePage(pageUrl);
+                // Skip pages that aren't HTML (no audits)
+                if (pageAnalysis.audits.length === 0) {
+                    continue;
+                }
                 // Extract and remove schema audits from page-level audits to avoid duplication
                 const schemaIds = Object.keys(schemaResults);
                 pageAnalysis.audits = pageAnalysis.audits.filter(audit => {

package/dist/components/general/callout.js

@@ -38,7 +38,8 @@ Callout.propTypes = {
     imgClick: PropTypes.func,
     title: PropTypes.string,
     subtitle: PropTypes.string,
-    content: PropTypes.string,
+    content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    children: PropTypes.node,
     buttonText: PropTypes.string,
     // SmartImage props
     aboveFold: PropTypes.bool,
@@ -46,13 +47,13 @@ Callout.propTypes = {
     cloudinaryDomain: PropTypes.string,
     cloudinaryTransforms: PropTypes.string, */
 };
-export function Callout({ variant = 'default', boxShape = "squircle", layout = "horizontal", direction = 'left', gridColumns = { left: 1, right: 2 }, url, img, imgAlt, imgShape = 'square', imgClick, title, subtitle, content, buttonText, aboveFold,
+export function Callout({ variant = 'default', boxShape = "squircle", layout = "horizontal", direction = 'left', gridColumns = { left: 1, right: 2 }, url, img, imgAlt, imgShape = 'square', imgClick, title, subtitle, content, children, buttonText, aboveFold,
 /* cloudinaryEnv,
 cloudinaryDomain,
 cloudinaryTransforms */  }) {
     const target = url && url.substring(0, 4).toLowerCase() === 'http' ? '_blank' : '_self';
     const friendlyTitle = title ? title.toLowerCase().replace(/\s+/g, '-') : undefined;
-    const body = _jsxs("div", { className: "callout-body", children: [(title) ? _jsx(CalloutHeader, { title: title, url: url, target: target }) : null, (subtitle) ? _jsx("div", { className: "callout-subtitle", children: _jsx("h3", { children: subtitle }) }) : null, content ? _jsx("div", { className: "callout-content", children: _jsx(_Fragment, { children: content }) }) : null, url && buttonText
+    const body = _jsxs("div", { className: "callout-body", children: [(title) ? _jsx(CalloutHeader, { title: title, url: url, target: target }) : null, (subtitle) ? _jsx("div", { className: "callout-subtitle", children: _jsx("h3", { children: subtitle }) }) : null, children ? _jsx("div", { className: "callout-content", children: children }) : content ? _jsx("div", { className: "callout-content", children: _jsx(_Fragment, { children: content }) }) : null, url && buttonText
                 ? _jsx(CalloutButton, { title: buttonText, url: url, target: target })
                 : url && title
                     ? _jsx(CalloutButton, { title: title || "", url: url, target: target })

package/dist/components/general/intersection-observer.js

@@ -0,0 +1,117 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Custom hook for IntersectionObserver
+ *
+ * @param callback - Function to call when intersection changes
+ * @param options - IntersectionObserver options
+ * @returns Ref to attach to the element to observe
+ *
+ * @example
+ * ```tsx
+ * const elementRef = useIntersectionObserver((entry) => {
+ *   if (entry.isIntersecting) {
+ *     console.log('Element is visible!');
+ *   }
+ * }, { threshold: 0.5 });
+ *
+ * return <div ref={elementRef}>Observed content</div>
+ * ```
+ */
+export function useIntersectionObserver(callback, options = {}) {
+    const elementRef = useRef(null);
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const { root = null, rootMargin = '0px', threshold = 0, disconnectAfterIntersection = false } = options;
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                callback(entry, observer);
+                if (disconnectAfterIntersection && entry.isIntersecting) {
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, {
+            root,
+            rootMargin,
+            threshold
+        });
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, [callback, options.root, options.rootMargin, options.threshold, options.disconnectAfterIntersection]);
+    return elementRef;
+}
+/**
+ * Utility function to observe multiple elements with the same configuration
+ * Useful for observing a list of elements or when you need more control than the hook provides
+ *
+ * @param selector - CSS selector for elements to observe
+ * @param callback - Function to call when intersection changes
+ * @param options - IntersectionObserver options
+ * @returns Cleanup function to disconnect the observer
+ *
+ * @example
+ * ```tsx
+ * useEffect(() => {
+ *   const cleanup = observeIntersection('.fade-in', (entry) => {
+ *     if (entry.isIntersecting) {
+ *       entry.target.classList.add('visible');
+ *     }
+ *   }, { threshold: 0.1 });
+ *
+ *   return cleanup;
+ * }, []);
+ * ```
+ */
+export function observeIntersection(selector, callback, options = {}) {
+    const { root = null, rootMargin = '0px', threshold = 0, disconnectAfterIntersection = false } = options;
+    const elements = document.querySelectorAll(selector);
+    if (elements.length === 0) {
+        return () => { }; // Return no-op cleanup if no elements found
+    }
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            callback(entry, observer);
+            if (disconnectAfterIntersection && entry.isIntersecting) {
+                observer.unobserve(entry.target);
+            }
+        });
+    }, {
+        root,
+        rootMargin,
+        threshold
+    });
+    elements.forEach((element) => {
+        observer.observe(element);
+    });
+    // Return cleanup function
+    return () => {
+        observer.disconnect();
+    };
+}
+/**
+ * Utility functions for viewport detection
+ * These are useful for initial checks before setting up observers
+ */
+/**
+ * Check if an element is fully in the viewport
+ */
+export function isElementInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return (rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
+}
+/**
+ * Check if an element is partially in the viewport
+ */
+export function isElementPartiallyInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return (rect.top < (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
+        rect.bottom > 0 &&
+        rect.right > 0);
+}

package/dist/components/general/microinteractions.js

@@ -1,7 +1,14 @@
-// import React, { useState, useEffect } from 'react';
 import PropTypes from "prop-types";
+import { observeIntersection, isElementPartiallyInViewport } from './intersection-observer';
 import './microinteractions.css';
 /* ========== MICRO ANIMATIONS ========== */
+/**
+ * MicroInteractions handles global site animations and interactions.
+ * It is typically called once in a top-level component or effect.
+ *
+ * @param props - Configuration props for enabling/disabling interactions
+ * @returns A cleanup function if scrollfadeElements is used
+ */
 MicroInteractions.propTypes = {
     buttonring: PropTypes.bool,
     cartpulse: PropTypes.bool,
@@ -14,10 +21,9 @@ MicroInteractions.propTypes = {
     scrollfadeElements: PropTypes.string,
 };
 export function MicroInteractions(props) {
-    // const debug = true ;
     const body = document.body;
     for (const propName in props) {
-        if (Object.prototype.hasOwnProperty.call(props, propName)) {
+        if (Object.prototype.hasOwnProperty.call(props, propName) && propName !== 'scrollfadeElements') {
             if (props[propName] === true) {
                 body.classList.add(propName);
             }
@@ -26,61 +32,44 @@ export function MicroInteractions(props) {
             }
         }
     }
-    if (props.scrollfadeElements)
-        ScrollFade(props.scrollfadeElements);
-}
-function isElementInViewport(el) {
-    const rect = el.getBoundingClientRect();
-    return (rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
-}
-function isElementPartiallyInViewport(el) {
-    const rect = el.getBoundingClientRect();
-    return (rect.top < (window.innerHeight || document.documentElement.clientHeight) &&
-        rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
-        rect.bottom > 0 &&
-        rect.right > 0);
+    if (props.scrollfadeElements) {
+        return ScrollFade(props.scrollfadeElements);
+    }
 }
+/**
+ * Applies a fade-in animation to elements as they enter the viewport
+ * @param elements - CSS selector for elements to animate
+ * @returns Cleanup function for the intersection observer
+ */
 function ScrollFade(elements) {
-    const options = {
-        root: null, // Observes intersection with the viewport
-        rootMargin: "0px 0px -100px 0px", // Shrinks the top of the root by 200px
-        threshold: 0 // Triggers when any part of the element intersects the adjusted root
-    };
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-                // if (entry.intersectionRatio > 0.5) {
-                // Add the animation class when the element enters the viewport
-                entry.target.classList.add('scrollfade');
-                entry.target.classList.remove('hidden');
-                // Optionally, stop observing once animated if you only want it to animate once
-                observer.unobserve(entry.target);
-            }
-            else {
-                // Optionally, remove the animation class if you want it to re-animate on re-entry
-                // entry.target.classList.remove('hidden');
-                // entry.target.classList.remove('scrollfade');
-            }
-        });
-    }, options);
-    // Select the elements you want to observe and initially hide them
     const elementsToAnimate = document.querySelectorAll(elements);
+    // Initial state setup
     elementsToAnimate.forEach((element) => {
         if (isElementPartiallyInViewport(element)) {
-            if (element.classList.contains('hidden')) {
-                element.classList.remove('hidden');
-            }
-            if (element.classList.contains('scrollfade')) {
-                element.classList.remove('scrollfade');
-            }
+            // If already in viewport, make sure it's visible without animation
+            element.classList.remove('hidden');
+            element.classList.remove('scrollfade');
         }
         else {
             // Apply initial hidden state to elements NOT on the screen
-            element.classList.add('hidden'); // Apply initial hidden state
-            observer.observe(element); // Start observing each element
+            element.classList.add('hidden');
+        }
+    });
+    // Setup observer for elements not yet visible
+    const cleanup = observeIntersection(elements, (entry, observer) => {
+        if (entry.isIntersecting) {
+            const element = entry.target;
+            // Only animate if it was hidden
+            if (element.classList.contains('hidden')) {
+                element.classList.add('scrollfade');
+                element.classList.remove('hidden');
+                // Stop observing after animation triggers
+                observer.unobserve(element);
+            }
         }
+    }, {
+        rootMargin: "0px 0px -100px 0px",
+        threshold: 0
     });
+    return cleanup;
 }

package/dist/components/general/schema-services.js

@@ -1,23 +1,35 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
-ServicesSchema.propTypes = {
+const servicesSchemaPropTypes = {
+    siteInfo: PropTypes.object,
     provider: PropTypes.shape({
         name: PropTypes.string.isRequired,
         url: PropTypes.string.isRequired,
         logo: PropTypes.string,
         telephone: PropTypes.string,
         email: PropTypes.string,
-    }).isRequired,
+    }),
     services: PropTypes.arrayOf(PropTypes.shape({
         name: PropTypes.string.isRequired,
         description: PropTypes.string.isRequired,
         url: PropTypes.string,
         image: PropTypes.string,
         areaServed: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    })).isRequired,
+    })),
 };
 export function ServicesSchema(props) {
-    const { provider, services } = props;
+    const siteInfo = props.siteInfo;
+    const services = (siteInfo?.services || props.services || []);
+    const provider = props.provider || {
+        name: siteInfo?.name || '',
+        url: siteInfo?.url || '',
+        logo: siteInfo?.image,
+        telephone: siteInfo?.telephone,
+        email: siteInfo?.email
+    };
+    if (!services.length || !provider.name) {
+        return null;
+    }
     const serviceObjects = services.map((service) => ({
         '@type': 'Service',
         name: service.name,
@@ -39,4 +51,5 @@ export function ServicesSchema(props) {
                     ...service
                 }) } }, idx))) }));
 }
+ServicesSchema.propTypes = servicesSchemaPropTypes;
 export default ServicesSchema;

package/dist/components/general/schema-website.js

@@ -12,31 +12,124 @@ WebsiteSchema.propTypes = {
     name: PropTypes.string,
     url: PropTypes.string,
     description: PropTypes.string,
+    keywords: PropTypes.string,
+    inLanguage: PropTypes.string,
+    sameAs: PropTypes.arrayOf(PropTypes.string),
     potentialAction: PropTypes.shape({
         '@type': PropTypes.string,
         target: PropTypes.shape({
             '@type': PropTypes.string,
             urlTemplate: PropTypes.string
-        }),
-        query: PropTypes.string
+        }).isRequired,
+        'query-input': PropTypes.string
     }),
-    siteInfo: PropTypes.object // Required siteinfo from parent component
+    publisher: PropTypes.shape({
+        '@type': PropTypes.string,
+        name: PropTypes.string.isRequired,
+        url: PropTypes.string,
+        logo: PropTypes.shape({
+            '@type': PropTypes.string,
+            url: PropTypes.string.isRequired,
+            width: PropTypes.number,
+            height: PropTypes.number
+        })
+    }),
+    copyrightYear: PropTypes.number,
+    copyrightHolder: PropTypes.shape({
+        '@type': PropTypes.string,
+        name: PropTypes.string.isRequired,
+        url: PropTypes.string
+    }),
+    siteInfo: PropTypes.object
 };
 export function WebsiteSchema(props) {
-    // const config = usePixelatedConfig();
     const siteInfo = props.siteInfo;
-    // Use props if provided, otherwise fall back to siteInfo
     const name = props.name || siteInfo?.name;
     const url = props.url || siteInfo?.url;
+    if (!name || !url) {
+        return null;
+    }
     const description = props.description || siteInfo?.description;
-    const potentialAction = props.potentialAction;
+    const keywords = props.keywords || siteInfo?.keywords;
+    const inLanguage = props.inLanguage || siteInfo?.default_locale;
+    const sameAs = props.sameAs || siteInfo?.sameAs;
+    const publisher = props.publisher || buildPublisher(siteInfo);
+    const potentialAction = props.potentialAction || buildPotentialAction(siteInfo?.potentialAction);
+    const copyrightYear = props.copyrightYear ?? siteInfo?.copyrightYear;
+    const copyrightHolder = props.copyrightHolder || buildCopyrightHolder(siteInfo);
     const schemaData = {
         '@context': 'https://schema.org',
         '@type': 'WebSite',
         name,
         url,
         ...(description && { description }),
-        ...(potentialAction && { potentialAction })
+        ...(keywords && { keywords }),
+        ...(inLanguage && { inLanguage }),
+        ...(sameAs && sameAs.length ? { sameAs } : {}),
+        ...(publisher && { publisher }),
+        ...(potentialAction && { potentialAction }),
+        ...(copyrightYear != null && { copyrightYear }),
+        ...(copyrightHolder && { copyrightHolder })
     };
     return (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(schemaData) } }));
 }
+function buildPublisher(siteInfo) {
+    if (!siteInfo) {
+        return undefined;
+    }
+    if (!siteInfo.name) {
+        return undefined;
+    }
+    const logoUrl = siteInfo.image;
+    const logoWidth = parseDimension(siteInfo.image_width);
+    const logoHeight = parseDimension(siteInfo.image_height);
+    const logo = logoUrl
+        ? {
+            '@type': 'ImageObject',
+            url: logoUrl,
+            ...(logoWidth !== undefined && { width: logoWidth }),
+            ...(logoHeight !== undefined && { height: logoHeight })
+        }
+        : undefined;
+    return {
+        '@type': siteInfo.publisherType || 'Organization',
+        name: siteInfo.name,
+        ...(siteInfo.url && { url: siteInfo.url }),
+        ...(logo && { logo })
+    };
+}
+function buildCopyrightHolder(siteInfo) {
+    if (!siteInfo?.name) {
+        return undefined;
+    }
+    const holderType = siteInfo.publisherType || 'Organization';
+    return {
+        '@type': holderType,
+        name: siteInfo.name,
+        ...(siteInfo.url && { url: siteInfo.url })
+    };
+}
+function buildPotentialAction(action) {
+    if (!action || !action.target) {
+        return undefined;
+    }
+    const queryInput = action['query-input'] ?? action.queryInput;
+    return {
+        '@type': action['@type'] ?? 'SearchAction',
+        target: {
+            '@type': 'EntryPoint',
+            urlTemplate: action.target
+        },
+        ...(queryInput && { 'query-input': queryInput })
+    };
+}
+function parseDimension(value) {
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (!value) {
+        return undefined;
+    }
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? undefined : parsed;
+}

package/dist/components/general/splitscroll.css

@@ -0,0 +1,125 @@
+/**
+ * SplitScroll Styles
+ * 
+ * Provides the sticky image behavior and layered parallax effect
+ * for the SplitScroll component
+ */
+
+.splitscroll-container {
+	position: relative;
+	width: 100%;
+}
+
+.splitscroll-section {
+	position: relative;
+	min-height: 100vh;
+}
+
+/* Split variant callout adjustments for splitscroll */
+.splitscroll-section .callout.split {
+	min-height: 100vh;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 0;
+}
+
+/* Left side - sticky image */
+.splitscroll-section .callout.split .callout-image {
+	position: sticky;
+	top: 0;
+	height: 100vh;
+	overflow: hidden;
+	z-index: 1;
+	transition: opacity 0.3s ease;
+	width: 50vw;
+
+}
+
+/* Layer images on top of each other */
+.splitscroll-section .callout-image {
+	z-index: calc(var(--section-index, 0) + 1);
+}
+
+/* Active section has highest z-index */
+.splitscroll-section.active .callout-image {
+	z-index: 100;
+	opacity: 1;
+}
+
+/* Non-active sections fade slightly */
+.splitscroll-section:not(.active) .callout-image {
+	opacity: 0.95;
+}
+
+/* Right side - scrolling content */
+.splitscroll-section .callout.split .callout-body {
+	position: relative;
+	padding: 4rem 2rem;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	z-index: 2;
+	width: 50vw;
+
+}
+
+/* Image fills container and is centered */
+.splitscroll-section .callout-image img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: center;
+}
+
+/* Smooth transitions for section changes */
+.splitscroll-section {
+	transition: transform 0.3s ease;
+}
+
+/* Responsive behavior */
+@media (max-width: 768px) {
+	.splitscroll-section .callout.split {
+		grid-template-columns: 1fr;
+		grid-template-rows: 50vh auto;
+		min-height: auto;
+	}
+
+	.splitscroll-section .callout.split .callout-image {
+		position: relative;
+		height: 50vh;
+	}
+
+	.splitscroll-section .callout.split .callout-body {
+		min-height: 50vh;
+		padding: 2rem 1rem;
+	}
+}
+
+/* Optional: Add subtle parallax effect to content */
+@media (prefers-reduced-motion: no-preference) {
+	.splitscroll-section.active .callout-body {
+		animation: fadeInUp 0.6s ease forwards;
+	}
+
+	@keyframes fadeInUp {
+		from {
+			opacity: 0.8;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+}
+
+/* Respect reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+	.splitscroll-section,
+	.splitscroll-section .callout-image,
+	.splitscroll-section .callout-body {
+		transition: none;
+		animation: none;
+	}
+}

package/dist/components/general/splitscroll.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { Children, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Callout } from './callout';
+import { observeIntersection } from './intersection-observer';
+import './splitscroll.css';
+/**
+ * SplitScroll - A scrolling split-page layout with sticky images
+ *
+ * Creates a splitscroll-style layout where the left side shows sticky images
+ * that layer over each other as you scroll, while the right side contains
+ * scrolling content sections.
+ *
+ * @example
+ * ```tsx
+ * <SplitScroll>
+ *   <SplitScroll.Section img="/image1.jpg" title="Section 1">
+ *     <YourContent />
+ *   </SplitScroll.Section>
+ *   <SplitScroll.Section img="/image2.jpg" title="Section 2">
+ *     <MoreContent />
+ *   </SplitScroll.Section>
+ * </SplitScroll>
+ * ```
+ */
+SplitScroll.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+export function SplitScroll({ children }) {
+    const [activeSectionIndex, setActiveSectionIndex] = useState(0);
+    const childArray = Children.toArray(children);
+    const sectionCount = childArray.length;
+    useEffect(() => {
+        // Set up intersection observers for each section
+        const cleanup = observeIntersection('.splitscroll-section', (entry) => {
+            if (entry.isIntersecting) {
+                const index = parseInt(entry.target.getAttribute('data-section-index') || '0', 10);
+                setActiveSectionIndex(index);
+            }
+        }, {
+            rootMargin: '-20% 0px -60% 0px', // Trigger when section is 20% from top
+            threshold: 0
+        });
+        return cleanup;
+    }, [sectionCount]);
+    // Clone children and add props for active state and index
+    const enhancedChildren = Children.map(children, (child, index) => {
+        if (React.isValidElement(child)) {
+            const additionalProps = {
+                isActive: index === activeSectionIndex,
+                sectionIndex: index,
+                totalSections: sectionCount
+            };
+            return React.cloneElement(child, additionalProps);
+        }
+        return child;
+    });
+    return (_jsx("div", { className: "splitscroll-container", children: enhancedChildren }));
+}
+/**
+ * SplitScroll.Section - Individual section within a SplitScroll
+ *
+ * A facade for the Callout component with variant="split" preset.
+ * Automatically configured for the splitscroll layout.
+ */
+const splitscrollSectionPropTypes = {
+    img: PropTypes.string.isRequired,
+    imgAlt: PropTypes.string,
+    imgShape: PropTypes.oneOf(['square', 'bevel', 'squircle', 'round']),
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    url: PropTypes.string,
+    buttonText: PropTypes.string,
+    children: PropTypes.node,
+    aboveFold: PropTypes.bool,
+    // Internal props added by SplitScroll parent
+    isActive: PropTypes.bool,
+    sectionIndex: PropTypes.number,
+    totalSections: PropTypes.number,
+};
+const SplitScrollSectionComponent = function SplitScrollSection({ img, imgAlt, imgShape = 'square', title, subtitle, url, buttonText, children, aboveFold, isActive, sectionIndex, totalSections, }) {
+    return (_jsx("div", { className: `splitscroll-section ${isActive ? 'active' : ''}`, "data-section-index": sectionIndex, style: {
+            '--section-index': sectionIndex,
+            '--total-sections': totalSections
+        }, children: _jsx(Callout, { variant: "split", img: img, imgAlt: imgAlt, imgShape: imgShape, title: title, subtitle: subtitle, url: url, buttonText: buttonText, aboveFold: aboveFold ?? (sectionIndex === 0), children: children }) }));
+};
+SplitScrollSectionComponent.propTypes = splitscrollSectionPropTypes;
+SplitScroll.Section = SplitScrollSectionComponent;