@pixelated-tech/components 3.11.9 → 3.13.0

package/dist/components/admin/componentusage/componentAnalysis.js

@@ -62,6 +62,8 @@ export async function getAllFiles(dirPath, extensions = []) {
  */
 export async function checkComponentUsage(sitePath, componentName) {
     try {
+        if (!sitePath)
+            return false; // nothing to scan
         const files = await getAllFiles(sitePath, ['.tsx', '.ts', '.jsx', '.js']);
         // Special case for semantic components that export multiple functions
         if (componentName === 'general/semantic') {

package/dist/components/admin/deploy/deployment.integration.js

@@ -22,6 +22,14 @@ export async function executeDeployment(request, siteConfig, isLocalExecution =
  */
 async function executeScript(siteName, versionType, commitMessage, environments, localPath, remote) {
     const sourceBranch = 'dev'; // Always deploy from dev branch
+    // Guard against missing localPath — callers may omit for non-local checks
+    if (!localPath) {
+        throw new Error('localPath is required for deployment execution');
+    }
+    // Guard against missing remote — required for git operations
+    if (!remote) {
+        throw new Error('remote is required for deployment execution');
+    }
     try {
         // Get current branch and ensure we're on dev
         const { stdout: currentBranch } = await execAsync('git branch --show-current', { cwd: localPath });

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.js

@@ -1,7 +1,10 @@
+import { SECRET_CONFIG_KEYS } from './config.types';
 import { decrypt, isEncrypted } from './crypto';
-import { getClientOnlyPixelatedConfig as stripSecrets } from './config.utils';
 import fs from 'fs';
 import path from 'path';
+// NOTE: getClientOnlyPixelatedConfig implementation moved here from
+// src/components/config/config.utils.ts — this consolidates the public
+// config API into one module.
 const debug = false;
 /**
  * Read the full master config blob from local file.
@@ -108,5 +111,41 @@ export function getClientOnlyPixelatedConfig(full) {
     const src = (full === undefined) ? getFullPixelatedConfig() : full;
     if (src === null || typeof src !== 'object')
         return (src || {});
-    return stripSecrets(src);
+    // Inlined secret stripping logic (previously in config.utils)
+    const visited = new WeakSet();
+    function isSecretKey(key, serviceName) {
+        if (SECRET_CONFIG_KEYS.global.includes(key))
+            return true;
+        if (serviceName && SECRET_CONFIG_KEYS.services[serviceName]) {
+            const serviceSecrets = SECRET_CONFIG_KEYS.services[serviceName];
+            if (serviceSecrets.includes(key))
+                return true;
+        }
+        return false;
+    }
+    function strip(obj, serviceName) {
+        if (obj === null || typeof obj !== 'object')
+            return obj;
+        if (visited.has(obj))
+            return '[Circular]';
+        visited.add(obj);
+        if (Array.isArray(obj)) {
+            return obj.map((item) => strip(item, serviceName));
+        }
+        const out = {};
+        for (const k of Object.keys(obj)) {
+            const currentService = serviceName || k;
+            if (isSecretKey(k, serviceName))
+                continue;
+            out[k] = strip(obj[k], currentService);
+        }
+        return out;
+    }
+    try {
+        return strip(src);
+    }
+    catch (err) {
+        console.error('Failed to strip secrets from config', err);
+        return {};
+    }
 }

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) {