@pixelated-tech/components 3.11.8 → 3.12.0

package/dist/components/admin/site-health/site-health-accessibility.js

@@ -3,7 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
 import { formatAuditItem, getAuditScoreIcon, getScoreColor } from './site-health-utils';
+/**
+ * SiteHealthAccessibility — Accessibility report panel showing Lighthouse accessibility scores and audit details.
+ *
+ * @param {string} [props.siteName] - Site identifier used to fetch accessibility metrics (e.g., 'example.com').
+ */
 SiteHealthAccessibility.propTypes = {
+    /** Site identifier used to fetch accessibility data */
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthAccessibility({ siteName }) {

package/dist/components/admin/site-health/site-health-axe-core.js

@@ -6,7 +6,13 @@ import { SiteHealthTemplate } from './site-health-template';
 import { getImpactIndicator, getIncompleteIndicator, getPassingIndicator } from './site-health-indicators';
 // Debug logging: set to `true` temporarily when investigating issues locally. Keep `false` in production.
 const debug = false;
+/**
+ * SiteHealthAxeCore — Accessibility violations viewer powered by axe-core results.
+ *
+ * @param {string} [props.siteName] - Site identifier used to fetch axe-core scan results.
+ */
 SiteHealthAxeCore.propTypes = {
+    /** Site identifier used to fetch axe-core data */
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthAxeCore({ siteName }) {

package/dist/components/admin/site-health/site-health-cloudwatch.js

@@ -3,9 +3,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { ComposedChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 import { SiteHealthTemplate } from './site-health-template';
+/**
+ * SiteHealthCloudwatch — Displays CloudWatch health-check metrics and availability over time.
+ *
+ * @param {string} [props.siteName] - Site identifier used to fetch CloudWatch metrics.
+ * @param {string} [props.startDate] - Optional ISO date string to restrict the start of the range.
+ * @param {string} [props.endDate] - Optional ISO date string to restrict the end of the range.
+ */
 SiteHealthCloudwatch.propTypes = {
+    /** Site identifier used to fetch CloudWatch metrics */
     siteName: PropTypes.string.isRequired,
+    /** ISO start date for the metrics range (optional) */
     startDate: PropTypes.string,
+    /** ISO end date for the metrics range (optional) */
     endDate: PropTypes.string,
 };
 export function SiteHealthCloudwatch({ siteName, startDate, endDate }) {

package/dist/components/admin/site-health/site-health-dependency-vulnerabilities.js

@@ -2,7 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
+/**
+ * SiteHealthDependencyVulnerabilities — Shows known dependency vulnerabilities and their severities for the site.
+ *
+ * @param {string} [props.siteName] - Site identifier used to fetch dependency vulnerability data.
+ */
 SiteHealthDependencyVulnerabilities.propTypes = {
+    /** Site identifier used to fetch dependency vulnerability reports */
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthDependencyVulnerabilities({ siteName }) {

package/dist/components/admin/site-health/site-health-github.js

@@ -3,9 +3,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import PropTypes from 'prop-types';
 import { Table } from '@pixelated-tech/components';
 import { SiteHealthTemplate } from './site-health-template';
+/**
+ * SiteHealthGit — Shows recent Git commits and push notes retrieved for the site.
+ *
+ * @param {string} [props.siteName] - Site identifier used to fetch Git activity.
+ * @param {string} [props.startDate] - Optional ISO start date to filter commits.
+ * @param {string} [props.endDate] - Optional ISO end date to filter commits.
+ */
 SiteHealthGit.propTypes = {
+    /** Site identifier used to fetch Git activity */
     siteName: PropTypes.string.isRequired,
+    /** ISO start date to filter commits (optional) */
     startDate: PropTypes.string,
+    /** ISO end date to filter commits (optional) */
     endDate: PropTypes.string,
 };
 export function SiteHealthGit({ siteName, startDate, endDate }) {

package/dist/components/admin/site-health/site-health-google-analytics.js

@@ -3,9 +3,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { SiteHealthTemplate } from './site-health-template';
+/**
+ * SiteHealthGoogleAnalytics — Shows Google Analytics metrics (page views, sessions) over a date range.
+ *
+ * @param {string} [props.siteName] - Site identifier used to fetch analytics data.
+ * @param {string} [props.startDate] - Optional ISO start date for the metrics range.
+ * @param {string} [props.endDate] - Optional ISO end date for the metrics range.
+ */
 SiteHealthGoogleAnalytics.propTypes = {
+    /** Site identifier used to fetch analytics metrics */
     siteName: PropTypes.string.isRequired,
+    /** ISO start date for the metrics range (optional) */
     startDate: PropTypes.string,
+    /** ISO end date for the metrics range (optional) */
     endDate: PropTypes.string,
 };
 export function SiteHealthGoogleAnalytics({ siteName, startDate, endDate }) {

package/dist/components/admin/site-health/site-health-google-search-console.js

@@ -3,9 +3,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 import { SiteHealthTemplate } from './site-health-template';
+/**
+ * SiteHealthGoogleSearchConsole — Visualize search performance (impressions/clicks) from Google Search Console.
+ *
+ * @param {string} [props.siteName] - Site identifier used to fetch Search Console metrics.
+ * @param {string} [props.startDate] - Optional ISO start date for the analysis range.
+ * @param {string} [props.endDate] - Optional ISO end date for the analysis range.
+ */
 SiteHealthGoogleSearchConsole.propTypes = {
+    /** Site identifier used to fetch Search Console metrics */
     siteName: PropTypes.string.isRequired,
+    /** ISO start date for analysis (optional) */
     startDate: PropTypes.string,
+    /** ISO end date for analysis (optional) */
     endDate: PropTypes.string,
 };
 export function SiteHealthGoogleSearchConsole({ siteName, startDate, endDate }) {

package/dist/components/admin/site-health/site-health-mock-context.js

@@ -6,8 +6,16 @@ const SiteHealthMockDataContext = createContext(null);
 export const SiteHealthMockProvider = ({ mocks, children }) => {
     return (_jsx(SiteHealthMockDataContext.Provider, { value: mocks, children: children }));
 };
+/**
+ * SiteHealthMockProvider — Provider that injects mock site-health data into child components for development and testing.
+ *
+ * @param {object} [props.mocks] - Map of mock data keyed by site identifier.
+ * @param {node} [props.children] - Child nodes that will receive the mock data via context.
+ */
 SiteHealthMockProvider.propTypes = {
+    /** Map of mock site-health data */
     mocks: PropTypes.object.isRequired,
+    /** Child nodes that consume mock data */
     children: PropTypes.node.isRequired
 };
 export function useSiteHealthMockData() {

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

@@ -61,7 +61,13 @@ function restructureAuditsByType(pagesAnalyzed) {
     });
     return restructuredAudits.sort((a, b) => (b.score || 0) - (a.score || 0));
 }
+/**
+ * SiteHealthOnSiteSEO — On-site SEO checks and recommendations for the specified site (meta tags, headings, etc.).
+ *
+ * @param {string} [props.siteName] - Site identifier used to fetch on-site SEO analysis.
+ */
 SiteHealthOnSiteSEO.propTypes = {
+    /** Site identifier used to fetch on-site SEO data */
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthOnSiteSEO({ siteName }) {

package/dist/components/admin/site-health/site-health-overview.js

@@ -3,7 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
 import { formatScore, getScoreColor } from './site-health-utils';
+/**
+ * SiteHealthOverview — Aggregated site health dashboard combining multiple checks (uptime, performance, SEO).
+ *
+ * @param {string} [props.siteName] - Site identifier used to fetch consolidated site-health metrics.
+ */
 SiteHealthOverview.propTypes = {
+    /** Site identifier used to build the overview */
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthOverview({ siteName }) {

package/dist/components/admin/site-health/site-health-performance.js

@@ -3,7 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
 import { formatAuditItem, getAuditScoreIcon, getScoreColor, formatScore } from './site-health-utils';
+/**
+ * SiteHealthPerformance — Performance metrics panel showing Lighthouse Core Web Vitals and related scores.
+ *
+ * @param {string} [props.siteName] - Site identifier used to fetch performance data.
+ */
 SiteHealthPerformance.propTypes = {
+    /** Site identifier used to fetch performance metrics */
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthPerformance({ siteName }) {

package/dist/components/admin/site-health/site-health-security.js

@@ -3,7 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
 import { formatAuditItem, getAuditScoreIcon, getScoreColor } from './site-health-utils';
+/**
+ * SiteHealthSecurity — Security checks (certificate status, headers, known CVEs) for the site.
+ *
+ * @param {string} [props.siteName] - Site identifier used to fetch security scan results.
+ */
 SiteHealthSecurity.propTypes = {
+    /** Site identifier used to fetch security data */
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthSecurity({ siteName }) {

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

@@ -3,7 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
 import { formatAuditItem, getAuditScoreIcon, getScoreColor } from './site-health-utils';
+/**
+ * SiteHealthSEO — SEO report panel focused on searchability and structured data checks.
+ *
+ * @param {string} [props.siteName] - Site identifier used to fetch SEO-related metrics.
+ */
 SiteHealthSEO.propTypes = {
+    /** Site identifier used to fetch SEO data */
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthSEO({ siteName }) {

package/dist/components/admin/site-health/site-health-template.js

@@ -5,20 +5,48 @@ import PropTypes from 'prop-types';
 import { PageGridItem } from '../../general/semantic';
 import "./site-health.css";
 import { useSiteHealthMockData } from './site-health-mock-context';
+/**
+ * SiteHealthTemplate — Generic data-fetching and rendering wrapper used by site-health panels.
+ *
+ * @param {string} [props.siteName] - Site identifier used to query health endpoints.
+ * @param {string} [props.title] - Optional title rendered in the panel header.
+ * @param {function} [props.children] - Render prop that receives fetched data and returns JSX.
+ * @param {shape} [props.endpoint] - Endpoint configuration object including `endpoint`, optional `params`, and a `responseTransformer`.
+ * @param {oneOf} [props.method] - HTTP method used to call the endpoint (default: 'GET').
+ * @param {object} [props.headers] - Optional headers to include in the request.
+ * @param {object} [props.params] - Optional query params to include in the request.
+ * @param {any} [props.body] - Optional request body for non-GET requests.
+ * @param {function} [props.responseTransformer] - Function to transform the API response into the shape consumed by the children render prop.
+ * @param {boolean} [props.enableCacheControl] - When true, respects the `cache` query param to bypass or enable caching.
+ * @param {number} [props.columnSpan] - Optional grid column span when rendering as a card.
+ * @param {any} [props.data] - Optional pre-fetched data to render instead of calling the endpoint.
+ */
 SiteHealthTemplate.propTypes = {
+    /** Site identifier used to query health endpoints */
     siteName: PropTypes.string.isRequired,
+    /** Optional title for the panel */
     title: PropTypes.string,
+    /** Render prop receiving the fetched data */
     children: PropTypes.func.isRequired,
+    /** Endpoint configuration */
     endpoint: PropTypes.shape({
         endpoint: PropTypes.string.isRequired,
+        /** HTTP method (GET/POST/PUT/DELETE) */
         method: PropTypes.oneOf(['GET', 'POST', 'PUT', 'DELETE']),
+        /** Optional request headers */
         headers: PropTypes.object,
+        /** Optional query parameters */
         params: PropTypes.object,
+        /** Optional request body (for POST/PUT) */
         body: PropTypes.any,
+        /** Optional response transformer function */
         responseTransformer: PropTypes.func,
     }),
+    /** Respect cache control query param when true */
     enableCacheControl: PropTypes.bool,
+    /** Grid column span for card rendering */
     columnSpan: PropTypes.number,
+    /** Optional pre-fetched data to render */
     data: PropTypes.any,
 };
 export function SiteHealthTemplate(props) {

package/dist/components/admin/site-health/site-health-uptime.js

@@ -2,7 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
+/**
+ * SiteHealthUptime — Uptime report showing availability and recent failures for the site.
+ *
+ * @param {string} [props.siteName] - Site identifier used to fetch uptime metrics.
+ */
 SiteHealthUptime.propTypes = {
+    /** Site identifier used to fetch uptime metrics */
     siteName: PropTypes.string.isRequired,
 };
 export function SiteHealthUptime({ siteName }) {

package/dist/components/config/config.server.js

@@ -5,8 +5,16 @@ import { getClientOnlyPixelatedConfig } from './config';
 // Server wrapper: reads server env blob and sanitizes it, then mounts the client provider.
 // Important: do NOT import client components at module scope — dynamically import
 // the client provider inside the function so this module remains server-safe.
+/**
+ * PixelatedServerConfigProvider — Server-side wrapper that loads and sanitizes server config then mounts the client config provider.
+ *
+ * @param {object} [props.config] - Optional server config object (sanitized before passing to client provider).
+ * @param {node} [props.children] - Client-side UI rendered within the provider.
+ */
 PixelatedServerConfigProvider.propTypes = {
+    /** Optional sanitized server config object */
     config: PropTypes.object,
+    /** Child nodes rendered inside the client provider */
     children: PropTypes.node.isRequired,
 };
 export async function PixelatedServerConfigProvider(props) {

package/dist/components/general/404.js

@@ -6,7 +6,13 @@ import PropTypes from 'prop-types';
 import { SmartImage } from "../general/smartimage";
 import { usePixelatedConfig } from "../config/config.client";
 import "./404.css";
+/**
+ * FourOhFour — Simple 404 page that randomly displays an image and short message.
+ *
+ * @param {array} [props.images] - Array of image objects used to display the 404 page. Each object should contain { img: string, text: string, description?: string }.
+ */
 FourOhFour.propTypes = {
+    /** Array of image objects: { img: string, text: string, description?: string } */
     images: PropTypes.array.isRequired,
 };
 export function FourOhFour(props) {

package/dist/components/general/accordion.js

@@ -2,12 +2,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import './accordion.css';
+/**
+ * Accordion — a simple details/summary-based accordion component.
+ *
+ * @param {arrayOf} [props.items] - Array of items each with `title`, `content`, and optional `open` state.
+ * @param {string} [props.title] - Title or header for an accordion item.
+ * @param {oneOfType} [props.content] - Content for an accordion item, either string or React node.
+ * @param {boolean} [props.open] - Initial open state of an item (when true the item is expanded).
+ * @param {function} [props.onToggle] - Optional callback called when an item is toggled (index, isOpen).
+ */
 Accordion.propTypes = {
+    /** Array of accordion items to render. */
     items: PropTypes.arrayOf(PropTypes.shape({
         title: PropTypes.string.isRequired,
         content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
         open: PropTypes.bool,
     })).isRequired,
+    /** Called when an item is toggled with (index, isOpen). */
     onToggle: PropTypes.func,
 };
 export function Accordion({ items, onToggle }) {

package/dist/components/general/buzzwordbingo.js

@@ -10,7 +10,13 @@ function getBingoWords(arr, x) {
     myBingoWords.splice(12, 0, "FREE SPACE");
     return myBingoWords;
 }
+/**
+ * BuzzwordBingo — renders a bingo-style card populated with provided buzzwords (defaults to an internal list).
+ *
+ * @param {array} [props.buzzwords] - Array of words (strings) used to populate the bingo card; uses default list when omitted.
+ */
 BuzzwordBingo.propTypes = {
+    /** List of buzzwords used to populate the bingo card. */
     buzzwords: PropTypes.array,
 };
 export function BuzzwordBingo(props) {
@@ -22,13 +28,25 @@ export function BuzzwordBingo(props) {
     }, [buzzwords]);
     return (_jsxs("div", { className: "bingoCard rowfix-5col", children: [myBingoHeaders.map((word) => (_jsx(BingoHeader, { word: word }, word))), bingoWords.map((word) => (_jsx(BingoBox, { word: word }, word)))] }));
 }
+/**
+ * BingoHeader — renders a single header cell for the bingo card (letters B I N G O).
+ *
+ * @param {string} [props.word] - Single character header label (e.g., 'B', 'I', 'N', 'G', 'O').
+ */
 BingoHeader.propTypes = {
+    /** Header label character. */
     word: PropTypes.string.isRequired,
 };
 function BingoHeader({ word }) {
     return (_jsx("div", { className: "bingoHeader gridItem", children: _jsx("div", { className: "bingoBoxText", children: word }) }));
 }
+/**
+ * BingoBox — renders an individual bingo cell (word or 'FREE SPACE').
+ *
+ * @param {string} [props.word] - Word displayed in this cell; 'FREE SPACE' is treated specially.
+ */
 BingoBox.propTypes = {
+    /** Word displayed in the bingo cell. */
     word: PropTypes.string.isRequired,
 };
 function BingoBox({ word }) {

package/dist/components/general/callout.js

@@ -22,30 +22,73 @@ export const variants = ['default', 'boxed', 'boxed grid', 'full', 'grid', 'over
 export const shapes = ['square', 'bevel', 'squircle', 'round'];
 export const layouts = ['horizontal', 'vertical'];
 export const directions = ['left', 'right'];
+/**
+ * Callout — versatile content block used for banners, promotional sections, and feature callouts.
+ *
+ * @param {oneOf} [props.variant] - Visual variant (e.g., 'default', 'boxed', 'full', 'grid', 'overlay', 'split').
+ * @param {oneOf} [props.boxShape] - Corner shape for boxed variants (e.g., 'square', 'bevel', 'squircle', 'round').
+ * @param {oneOf} [props.layout] - Layout direction: 'horizontal' (image + content) or 'vertical'.
+ * @param {oneOf} [props.direction] - When horizontal, whether the image appears on the 'left' or 'right'.
+ * @param {shape} [props.gridColumns] - Optional grid column counts used for boxed grid variants ({ left, right }).
+ * @param {number} [props.left] - Left column width for grid layouts.
+ * @param {number} [props.right] - Right column width for grid layouts.
+ * @param {string} [props.url] - Optional CTA URL for the callout button.
+ * @param {string} [props.img] - Image URL to display in the callout.
+ * @param {string} [props.imgAlt] - Alternate text for the image (accessibility and caption fallback).
+ * @param {oneOf} [props.imgShape] - Visual shape applied to the image container.
+ * @param {function} [props.imgClick] - Optional image click handler (event, url).
+ * @param {string} [props.title] - Primary title text for the callout.
+ * @param {string} [props.subtitle] - Secondary title/subtitle text.
+ * @param {oneOfType} [props.content] - Content as string or React node to place inside the callout body.
+ * @param {node} [props.children] - React children to render in the content area (takes precedence over content).
+ * @param {string} [props.buttonText] - Button/CTA text to display when `url` is provided.
+ * @param {boolean} [props.aboveFold] - Hint to prioritize image loading (above-the-fold) for performance.
+ * @param {string} [props.cloudinaryEnv] - Cloudinary environment key (internal use for SmartImage).
+ * @param {string} [props.cloudinaryDomain] - Cloudinary domain to use for image hosts.
+ * @param {string} [props.cloudinaryTransforms] - Optional Cloudinary transform presets.
+ */
 Callout.propTypes = {
+    /** Visual variant selector (e.g., 'default', 'boxed', 'grid', 'full'). */
     variant: PropTypes.oneOf([...variants]),
+    /** Corner/box shape for boxed variants. */
     boxShape: PropTypes.oneOf([...shapes]),
+    /** Layout direction: 'horizontal' or 'vertical'. */
     layout: PropTypes.oneOf([...layouts]),
+    /** When horizontal layout is used, position image on 'left' or 'right'. */
     direction: PropTypes.oneOf([...directions]),
+    /** Grid column sizing used for 'boxed grid' variants. */
     gridColumns: PropTypes.shape({
+        /** Left column width in the grid configuration. */
         left: PropTypes.number,
+        /** Right column width in the grid configuration. */
         right: PropTypes.number
     }),
+    /** Optional CTA URL used by CalloutButton. */
     url: PropTypes.string,
+    /** Image URL to display in the callout. */
     img: PropTypes.string,
+    /** Alt text for the image (used for accessibility and caption fallback). */
     imgAlt: PropTypes.string,
+    /** Visual shape applied to the image container (e.g., 'square', 'round'). */
     imgShape: PropTypes.oneOf([...shapes]),
+    /** Optional click handler for the image (event, url). */
     imgClick: PropTypes.func,
+    /** Primary title text for the callout. */
     title: PropTypes.string,
+    /** Optional subtitle/secondary heading. */
     subtitle: PropTypes.string,
+    /** Content string or React node to render inside the body area. */
     content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    /** React children to render in the content area (takes precedence over content prop). */
     children: PropTypes.node,
+    /** Button or CTA text used when `url` is provided. */
     buttonText: PropTypes.string,
     // SmartImage props
+    /** Hint to prioritize image loading (treat as above-the-fold). */
     aboveFold: PropTypes.bool,
     /* cloudinaryEnv: PropTypes.string,
-    cloudinaryDomain: PropTypes.string,
-    cloudinaryTransforms: PropTypes.string, */
+        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, children, buttonText, aboveFold,
 /* cloudinaryEnv,
@@ -73,9 +116,19 @@ cloudinaryTransforms */  }) {
             (variant && (variant === 'boxed grid' || variant === 'grid') && gridColumns ? ` callout-grid-${gridColumns.left}-${gridColumns.right}` : ''), children: (direction === "right") ? _jsxs(_Fragment, { children: [body, image] }) : _jsxs(_Fragment, { children: [image, body] }) }));
 }
 /* ========== CALLOUT HEADER ========== */
+/**
+ * CalloutHeader — renders the primary title and optional link wrapper for a Callout.
+ *
+ * @param {string} [props.title] - Title text displayed as the heading.
+ * @param {string} [props.url] - Optional URL that wraps the title as a link.
+ * @param {string} [props.target] - Link target (e.g., '_self', '_blank').
+ */
 CalloutHeader.propTypes = {
+    /** Heading title text (required). */
     title: PropTypes.string.isRequired,
+    /** Optional link URL for the heading. */
     url: PropTypes.string,
+    /** Optional link target attribute. */
     target: PropTypes.string
 };
 export function CalloutHeader({ title, url, target }) {
@@ -84,9 +137,19 @@ export function CalloutHeader({ title, url, target }) {
             : _jsx("h2", { className: "callout-title", children: title }) }));
 }
 /* ========== CALLOUT BUTTON ========== */
+/**
+ * CalloutButton — renders a button that navigates to a provided CTA URL.
+ *
+ * @param {string} [props.title] - Button label text (required when URL is provided).
+ * @param {string} [props.url] - Required URL that the button navigates to.
+ * @param {string} [props.target] - Optional link target for cross-origin behavior.
+ */
 CalloutButton.propTypes = {
+    /** Button label text. */
     title: PropTypes.string.isRequired,
+    /** CTA URL that the button will navigate to when clicked. */
     url: PropTypes.string.isRequired,
+    /** Optional target attribute for link behavior. */
     target: PropTypes.string
 };
 export function CalloutButton({ title, url, target }) {

package/dist/components/general/carousel.drag.js

@@ -8,10 +8,22 @@ import PropTypes from 'prop-types';
         if (debug) console.log('CarouselSimple: Dragging disabled');
     }
 */
+/**
+ * DragHandler — attaches global drag/touch handlers to enable swipe navigation for a carousel-like container.
+ *
+ * @param {number} [props.activeIndex] - Current active slide index (used to calculate offsets).
+ * @param {string} [props.targetDiv] - CSS class name of the container that should be draggable (e.g., 'carousel-card-wrapper').
+ * @param {function} [props.nextImage] - Callback invoked to advance to the next slide.
+ * @param {function} [props.previousImage] - Callback invoked to go to the previous slide.
+ */
 DragHandler.propTypes = {
+    /** Current active slide index. */
     activeIndex: PropTypes.number.isRequired,
+    /** CSS class of the container element to attach drag handlers to (without the leading dot). */
     targetDiv: PropTypes.string.isRequired,
+    /** Callback to show the next image/slide. */
     nextImage: PropTypes.func.isRequired,
+    /** Callback to show the previous image/slide. */
     previousImage: PropTypes.func.isRequired,
 };
 export function DragHandler(props) {

package/dist/components/general/carousel.js

@@ -10,20 +10,50 @@ function capitalize(str) {
     return str && String(str[0]).toUpperCase() + String(str).slice(1);
 }
 /* ========== CAROUSEL ========== */
+/**
+ * Carousel — renders a rotating set of card slides (images and optional text) with autoplay and optional drag support.
+ *
+ * @param {arrayOf} [props.cards] - Array of cards to display; each card may include image, header, subHeader, body and link.
+ * @param {number} [props.index] - Initial active index for the carousel (zero-based).
+ * @param {number} [props.cardIndex] - Current active index managed by the component (zero-based).
+ * @param {number} [props.cardLength] - Total number of cards (used for stacking and calculations).
+ * @param {string} [props.link] - Optional fallback link for a card when provided at the card level.
+ * @param {string} [props.linkTarget] - Target attribute for links (e.g. '_self', '_blank').
+ * @param {string} [props.image] - Image URL for a card.
+ * @param {string} [props.imageAlt] - Alt text for the card image (accessibility).
+ * @param {oneOf} [props.imgFit] - How to fit images: 'contain' | 'cover' | 'fill'.
+ * @param {string} [props.headerText] - Optional card header/title text.
+ * @param {string} [props.subHeaderText] - Optional card subtitle text.
+ * @param {string} [props.bodyText] - Optional card body content.
+ * @param {boolean} [props.draggable] - Enable swipe/drag interactions on touch devices.
+ */
 Carousel.propTypes = {
+    /** Array of card objects used to render slides. */
     cards: PropTypes.arrayOf(PropTypes.shape({
+        /** Zero-based index of this card within the source array. */
         index: PropTypes.number.isRequired,
+        /** Index of the currently active card as passed to each card. */
         cardIndex: PropTypes.number.isRequired,
+        /** Total number of cards in the carousel (used for z-index/stacking). */
         cardLength: PropTypes.number.isRequired,
+        /** Optional href for this card. */
         link: PropTypes.string,
+        /** Optional link target attribute (e.g., '_self', '_blank'). */
         linkTarget: PropTypes.string,
+        /** Image URL for the slide (required). */
         image: PropTypes.string.isRequired,
+        /** Alt text for the image (used for accessibility). */
         imageAlt: PropTypes.string,
+        /** Image fitting mode: 'contain' | 'cover' | 'fill'. */
         imgFit: PropTypes.oneOf(['contain', 'cover', 'fill']),
+        /** Title or header text shown on the card. */
         headerText: PropTypes.string,
+        /** Optional subtitle text for the card. */
         subHeaderText: PropTypes.string,
+        /** Optional body content for the card. */
         bodyText: PropTypes.string,
     })).isRequired,
+    /** Enable swipe/drag interactions on touch and pointer devices. */
     draggable: PropTypes.bool,
     imgFit: PropTypes.oneOf(['contain', 'cover', 'fill'])
 };
@@ -114,16 +144,36 @@ function CarouselCard(props) {
 }
 // REMOVED PROPTYPE AS TYPESCRIPT TYPE COVERS THIS
 /* ========== CAROUSEL  ARROW ========== */
+/**
+ * CarouselButton — small interactive control used to navigate carousel slides.
+ *
+ * @param {function} [props.clickFunction] - Click handler invoked when the control is pressed.
+ * @param {string} [props.glyph] - Label or HTML entity used to visually render the button.
+ */
 CarouselButton.propTypes = {
+    /** Click handler invoked when the control is clicked. */
     clickFunction: PropTypes.func.isRequired,
+    /** Label or glyph to display inside the button. */
     glyph: PropTypes.string.isRequired
 };
 function CarouselButton(props) {
     return (_jsx("button", { className: `carousel-button text-outline`, onClick: props.clickFunction, children: props.glyph }));
 }
+/**
+ * CarouselArrow — Render a directional navigation control used by the Carousel.
+ *
+ * Renders a button styled for left or right placement and calls the provided handler when clicked.
+ *
+ * @param {('left'|'right')} [props.direction] - Direction used to determine button styling/placement.
+ * @param {function} [props.clickFunction] - Click handler invoked when the control is pressed.
+ * @param {string} [props.glyph] - Glyph or label text displayed inside the button.
+ */
 CarouselArrow.propTypes = {
+    /** Direction keyword used to choose button styling/placement ('left'|'right'). */
     direction: PropTypes.string.isRequired,
+    /** Click handler invoked by the arrow control. */
     clickFunction: PropTypes.func.isRequired,
+    /** Glyph or label text used for the arrow control. */
     glyph: PropTypes.string.isRequired
 };
 function CarouselArrow(props) {

package/dist/components/general/faq-accordion.js

@@ -13,11 +13,26 @@ const categoryIcons = {
     'Services': '💼',
     '': ''
 };
+/**
+ * FAQAccordion — list of frequently asked questions rendered as an accordion with search and expand controls.
+ *
+ * @param {shape} [props.faqsData] - Object containing FAQ data; expected to include a `mainEntity` array of question objects.
+ * @param {arrayOf} [props.mainEntity] - Array of FAQ objects each with `name`, `category`, and `acceptedAnswer`.
+ * @param {string} [props.name] - Question title text.
+ * @param {string} [props.category] - Category/section for the FAQ (used for grouping and icons).
+ * @param {shape} [props.acceptedAnswer] - Object with an answer, typically containing `text` as string or array of strings.
+ * @param {oneOfType} [props.text] - Answer text or an array of paragraphs.
+ */
 FAQAccordion.propTypes = {
+    /** FAQ data wrapper object; should contain mainEntity array. */
     faqsData: PropTypes.shape({
+        /** Array of FAQ objects to render as accordion items. */
         mainEntity: PropTypes.arrayOf(PropTypes.shape({
+            /** Question text/title. */
             name: PropTypes.string,
+            /** Category key for grouping or icons. */
             category: PropTypes.string,
+            /** Accepted answer object with text or list of paragraphs. */
             acceptedAnswer: PropTypes.shape({
                 text: PropTypes.oneOfType([
                     PropTypes.string,