@pixelated-tech/components 3.11.8 → 3.12.0

package/dist/components/general/sitemap.js

@@ -210,13 +210,29 @@ export async function createWordPressURLs(props) {
     }
     return sitemap;
 }
+/**
+ * createContentfulURLs — Create sitemap entries for Contentful content by fetching a content type field.
+ *
+ * @param {shape} [props.apiProps] - Contentful API props: { base_url, space_id, environment, delivery_access_token }.
+ * @param {string} [props.base_url] - Contentful base API URL.
+ * @param {string} [props.space_id] - Contentful space id.
+ * @param {string} [props.environment] - Contentful environment (e.g., 'master').
+ * @param {string} [props.delivery_access_token] - Delivery API token (read-only) for Contentful.
+ * @param {string} [props.origin] - Origin to prefix generated URLs (e.g., 'https://example.com').
+ */
 createContentfulURLs.propTypes = {
+    /** Contentful API properties */
     apiProps: PropTypes.shape({
+        /** Contentful base URL */
         base_url: PropTypes.string.isRequired,
+        /** Contentful space id */
         space_id: PropTypes.string.isRequired,
+        /** Contentful environment */
         environment: PropTypes.string.isRequired,
+        /** Delivery API token */
         delivery_access_token: PropTypes.string.isRequired,
     }).isRequired,
+    /** Origin used to build absolute URLs */
     origin: PropTypes.string.isRequired,
 };
 export async function createContentfulURLs(props) {
@@ -241,13 +257,29 @@ export async function createContentfulURLs(props) {
     }
     return sitemap;
 }
+/**
+ * createContentfulPageBuilderURLs — Generate page URLs for Contentful Page Builder pages.
+ *
+ * @param {shape} [props.apiProps] - Contentful API props (base_url, space_id, environment, delivery_access_token).
+ * @param {string} [props.base_url] - Contentful base API URL.
+ * @param {string} [props.space_id] - Contentful space id.
+ * @param {string} [props.environment] - Contentful environment.
+ * @param {string} [props.delivery_access_token] - Delivery API token for read-only access.
+ * @param {string} [props.origin] - Origin used to build absolute page URLs.
+ */
 createContentfulPageBuilderURLs.propTypes = {
+    /** Contentful API properties */
     apiProps: PropTypes.shape({
+        /** Contentful base URL */
         base_url: PropTypes.string.isRequired,
+        /** Contentful space id */
         space_id: PropTypes.string.isRequired,
+        /** Contentful environment */
         environment: PropTypes.string.isRequired,
+        /** Delivery API token */
         delivery_access_token: PropTypes.string.isRequired,
     }).isRequired,
+    /** Origin used to build absolute URLs */
     origin: PropTypes.string.isRequired,
 };
 export async function createContentfulPageBuilderURLs(props) {
@@ -267,14 +299,32 @@ export async function createContentfulPageBuilderURLs(props) {
     }
     return sitemap;
 }
+/**
+ * createContentfulImageURLs — Fetch Contentful assets and generate absolute image URLs for the sitemap.
+ *
+ * @param {shape} [props.apiProps] - Contentful API props (proxyURL optional, base_url, space_id, environment, access_token).
+ * @param {string} [props.proxyURL] - Optional proxy base URL to route image requests through.
+ * @param {string} [props.base_url] - Contentful base API URL.
+ * @param {string} [props.space_id] - Contentful space id.
+ * @param {string} [props.environment] - Contentful environment.
+ * @param {string} [props.access_token] - Access token to read assets from Contentful.
+ * @param {string} [props.origin] - Origin used to convert relative image paths to absolute URLs.
+ */
 createContentfulImageURLs.propTypes = {
+    /** Contentful API properties */
     apiProps: PropTypes.shape({
+        /** Optional proxy URL */
         proxyURL: PropTypes.string,
+        /** Contentful base URL */
         base_url: PropTypes.string.isRequired,
+        /** Contentful space id */
         space_id: PropTypes.string.isRequired,
+        /** Contentful environment */
         environment: PropTypes.string.isRequired,
+        /** Access token to read assets */
         access_token: PropTypes.string.isRequired,
     }).isRequired,
+    /** Origin used to convert relative URLs to absolute */
     origin: PropTypes.string.isRequired,
 };
 export async function createContentfulImageURLs(props) {

package/dist/components/general/skeleton-loading.css

@@ -30,7 +30,7 @@
 	border: 0;
 }
 
-.hero {
+.hero-loading {
 	display: block;
 	gap: 1.5rem;
 	padding: 0;
@@ -51,25 +51,25 @@
 	gap: .75rem
 }
 
-.cards-grid {
+.cards-loading {
 	display: grid;
 	grid-template-columns: 1fr;
 	gap: 1.5rem
 }
 
 @media(min-width:640px) {
-	.cards-grid {
+	.cards-loading {
 		grid-template-columns: repeat(2, 1fr)
 	}
 }
 
 @media(min-width:1024px) {
-	.cards-grid {
+	.cards-loading {
 		grid-template-columns: repeat(3, 1fr)
 	}
 }
 
-.card-skeleton {
+.card-article {
 	padding: 1rem;
 	border-radius: .5rem;
 	border: 1px solid rgba(17, 24, 39, 0.06);

package/dist/components/general/skeleton-loading.js

@@ -5,9 +5,19 @@ import PropTypes from 'prop-types';
 import { ToggleLoading } from './loading';
 import { Skeleton } from './skeleton';
 import './skeleton-loading.css';
+/**
+ * SkeletonLoading — Accessible skeleton page used while content or data is loading.
+ *
+ * @param {number} [props.heroHeight] - Height in pixels for the hero skeleton block.
+ * @param {number} [props.cardCount] - Number of placeholder cards to render in the cards section.
+ * @param {string} [props.className] - Optional additional CSS classes applied to the root element.
+ */
 SkeletonLoading.propTypes = {
+    /** Hero skeleton height (px) */
     heroHeight: PropTypes.number,
+    /** Number of placeholder cards to render */
     cardCount: PropTypes.number,
+    /** Extra CSS classes for the root element */
     className: PropTypes.string,
 };
 export function SkeletonLoading({ heroHeight = 220, cardCount = 6, className = '' }) {
@@ -21,6 +31,5 @@ export function SkeletonLoading({ heroHeight = 220, cardCount = 6, className = '
         }
     }, []);
     const count = Math.max(0, Number(cardCount || 0));
-    return (_jsx("main", { className: `loading-page ${className}`, children: _jsxs("div", { className: "loading-container", children: [_jsx("div", { className: "visually-hidden", role: "status", "aria-live": "polite", children: "Loading\u2026" }), _jsx("section", { id: "hero-loading", "aria-hidden": true, className: "hero", children: _jsx(Skeleton, { variant: "rect", height: heroHeight }) }), _jsx("section", { id: "cards-loading", className: "cards-grid", "aria-hidden": true, children: Array.from({ length: count }).map((_, i) => (_jsx("article", { className: "card-skeleton", children: _jsxs("div", { className: "card-row", children: [_jsx(Skeleton, { variant: "avatar" }), _jsxs("div", { className: "card-body", children: [_jsx(Skeleton, { lines: 2 }), _jsx("div", { className: "card-body-extra", children: _jsx(Skeleton, { lines: 3, width: "90%" }) })] })] }) }, i))) })] }) }));
+    return (_jsx("main", { className: `loading-page ${className}`, children: _jsxs("div", { className: "loading-container", children: [_jsx("div", { className: "visually-hidden", role: "status", "aria-live": "polite", children: "Loading\u2026" }), _jsx("section", { id: "hero-loading", "aria-hidden": true, className: "hero-loading", children: _jsx(Skeleton, { variant: "rect", height: heroHeight }) }), _jsx("section", { id: "cards-loading", className: "cards-loading", "aria-hidden": true, children: Array.from({ length: count }).map((_, i) => (_jsx("article", { className: "card-article", children: _jsxs("div", { className: "card-row", children: [_jsx(Skeleton, { variant: "avatar" }), _jsxs("div", { className: "card-body", children: [_jsx(Skeleton, { lines: 2 }), _jsx("div", { className: "card-body-extra", children: _jsx(Skeleton, { lines: 3, width: "90%" }) })] })] }) }, i))) })] }) }));
 }
-export default SkeletonLoading;

package/dist/components/general/skeleton.js

@@ -1,11 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 import './skeleton.css';
+/**
+ * Skeleton — renders an accessible placeholder skeleton for text, rectangular blocks, or avatars.
+ *
+ * Props:
+ * @param {('text'|'rect'|'avatar')} [variant='text'] Visual variant to render.
+ * @param {number} [lines=1] Number of text lines when variant is 'text'.
+ * @param {string|number} [width] Width for text lines (percent) or explicit width for rect/avatar.
+ * @param {string|number} [height] Height in pixels (rect/avatar) or CSS string.
+ * @param {boolean} [animated=true] Whether the skeleton should animate (respects prefers-reduced-motion).
+ */
 Skeleton.propTypes = {
+    /** Visual variant to render: 'text' (lines), 'rect' (rectangle), or 'avatar' (circle). */
     variant: PropTypes.oneOf(['text', 'rect', 'avatar']),
+    /** Number of text lines to render when variant is 'text'. */
     lines: PropTypes.number,
+    /** Width for text lines (percentage number) or explicit CSS/string width for rect/avatar. */
     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Height in pixels or CSS string for rect/avatar; ignored for text lines. */
     height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Whether the skeleton should animate (respects prefers-reduced-motion). */
     animated: PropTypes.bool,
 };
 export function Skeleton({ variant = 'text', lines = 1, width, height, animated = true, }) {

package/dist/components/general/smartimage.js

@@ -37,31 +37,77 @@ function generateSrcSet(src, productEnv, widths, opts) {
         cloudinaryDomain: opts.cloudinaryDomain
     })} ${w}w`).join(', ');
 }
+/**
+ * SmartImage — unified image component that picks the best delivery variant (Cloudinary, Next.js Image, or plain <img>), generates srcset, and manages loading behavior.
+ *
+ * @param {string} [props.cloudinaryEnv] - Cloudinary environment key for constructing CDN URLs (product env).
+ * @param {string} [props.cloudinaryDomain] - Optional Cloudinary domain override.
+ * @param {string} [props.cloudinaryTransforms] - Optional transform presets for Cloudinary.
+ * @param {string} [props.src] - Source URL or path for the image (required).
+ * @param {string} [props.alt] - Alt text for the image (required for accessibility).
+ * @param {number|string} [props.width] - Preferred width in pixels or CSS value; used to build srcset when possible.
+ * @param {number|string} [props.height] - Preferred height in pixels or CSS value.
+ * @param {boolean} [props.aboveFold] - Hint that the image is above the fold and should be prioritized (eager loading / high fetch priority).
+ * @param {oneOf} [props.loading] - Loading strategy: 'lazy' or 'eager'.
+ * @param {boolean} [props.preload] - If true, suggests the image should be preloaded (best-effort).
+ * @param {oneOf} [props.decoding] - Decoding hint: 'async', 'auto' or 'sync'.
+ * @param {oneOf} [props.fetchPriority] - Fetch priority: 'high', 'low', or 'auto'.
+ * @param {string} [props.sizes] - Sizes attribute override for responsive images.
+ * @param {string} [props.srcSet] - Srcset override (if you want to supply your own).
+ * @param {string} [props.className] - Additional CSS classes for the rendered element.
+ * @param {object} [props.style] - Inline style object for the image element.
+ * @param {string} [props.id] - DOM id to set on the image element.
+ * @param {string} [props.name] - Name used to derive a stable id when none is provided.
+ * @param {string} [props.title] - Optional title attribute for the image.
+ * @param {number} [props.quality] - Quality hint used by Cloudinary when generating URLs (0-100).
+ * @param {oneOf} [props.placeholder] - Placeholder behavior: 'blur' to use blur placeholder, 'empty' to use none.
+ * @param {oneOf} [props.variant] - Force variant: 'cloudinary' | 'nextjs' | 'img'.
+ */
 SmartImage.propTypes = {
+    /** Cloudinary environment key (product environment) for URL generation. */
     cloudinaryEnv: PropTypes.string,
+    /** Cloudinary domain override. */
     cloudinaryDomain: PropTypes.string,
+    /** Optional Cloudinary transform presets. */
     cloudinaryTransforms: PropTypes.string,
     // shared props
+    /** Image source URL or path. */
     src: PropTypes.string.isRequired,
+    /** Accessible alt text for the image. */
     alt: PropTypes.string.isRequired,
-    // width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    // height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** Preferred width in pixels (used to build srcset when available). */
     width: PropTypes.number,
+    /** Preferred height in pixels. */
     height: PropTypes.number,
+    /** Hint that the image is above the fold and should be prioritized for loading. */
     aboveFold: PropTypes.bool,
+    /** Loading hint: 'lazy' or 'eager'. */
     loading: PropTypes.oneOf(['lazy', 'eager']),
+    /** When true suggests the image should be preloaded. */
     preload: PropTypes.bool,
+    /** Decoding hint for the browser. */
     decoding: PropTypes.oneOf(['async', 'auto', 'sync']),
+    /** Fetch priority hint for modern browsers. */
     fetchPriority: PropTypes.oneOf(['high', 'low', 'auto']),
+    /** Sizes attribute override for responsive images. */
     sizes: PropTypes.string,
+    /** Srcset override to pass explicit srcset values. */
     srcSet: PropTypes.string,
+    /** Additional CSS class names for the image element. */
     className: PropTypes.string,
+    /** Inline style object for the image element. */
     style: PropTypes.object,
+    /** DOM id for the image. */
     id: PropTypes.string,
+    /** Name used to derive a stable id or identification. */
     name: PropTypes.string,
+    /** Optional title attribute for the image. */
     title: PropTypes.string,
+    /** Quality hint (0-100) used for Cloudinary URL generation. */
     quality: PropTypes.number,
+    /** Placeholder behavior for Next.js Image ('blur' for blurred placeholder). */
     placeholder: PropTypes.oneOf(['blur', 'empty']),
+    /** Variant to force: 'cloudinary' | 'nextjs' | 'img'. */
     variant: PropTypes.oneOf(['cloudinary', 'nextjs', 'img']),
 };
 export function SmartImage(props) {

package/dist/components/general/splitscroll.js

@@ -15,16 +15,22 @@ import './splitscroll.css';
  * @example
  * ```tsx
  * <SplitScroll>
- *   <SplitScroll.Section img="/image1.jpg" title="Section 1">
+ *   <SplitScrollSection img="/image1.jpg" title="Section 1">
  *     <YourContent />
- *   </SplitScroll.Section>
- *   <SplitScroll.Section img="/image2.jpg" title="Section 2">
+ *   </SplitScrollSection>
+ *   <SplitScrollSection img="/image2.jpg" title="Section 2">
  *     <MoreContent />
- *   </SplitScroll.Section>
+ *   </SplitScrollSection>
  * </SplitScroll>
  * ```
  */
+/**
+ * SplitScroll — a split-page layout where the left column shows sticky, layered images and the right column contains scrolling content sections.
+ *
+ * @param {node} [props.children] - One or more `SplitScrollSection` components that contain content for each section.
+ */
 SplitScroll.propTypes = {
+    /** Collection of `SplitScrollSection` children used to build the layout. */
     children: PropTypes.node.isRequired,
 };
 export function SplitScroll({ children }) {
@@ -59,12 +65,18 @@ export function SplitScroll({ children }) {
     return (_jsx("div", { className: "splitscroll-container", children: enhancedChildren }));
 }
 /**
- * SplitScroll.Section - Individual section within a SplitScroll
+ * SplitScrollSection — Individual section within a SplitScroll.
  *
  * A facade for the Callout component with variant="split" preset.
  * Automatically configured for the splitscroll layout.
+ *
+ * @param {string} [props.img] - Image URL shown on the left column.
+ * @param {string} [props.imgAlt] - Alt text for the image.
+ * @param {('square'|'bevel'|'squircle'|'round')} [props.imgShape] - Image shape style.
+ * @param {string} [props.title] - Section title text shown on the right column.
+ * @param {node} [props.children] - Content for the section's right column.
  */
-const splitscrollSectionPropTypes = {
+SplitScrollSection.propTypes = {
     img: PropTypes.string.isRequired,
     imgAlt: PropTypes.string,
     imgShape: PropTypes.oneOf(['square', 'bevel', 'squircle', 'round']),
@@ -79,11 +91,10 @@ const splitscrollSectionPropTypes = {
     sectionIndex: PropTypes.number,
     totalSections: PropTypes.number,
 };
-const SplitScrollSectionComponent = function SplitScrollSection({ img, imgAlt, imgShape = 'square', title, subtitle, url, buttonText, children, aboveFold, isActive, sectionIndex, totalSections, }) {
+export 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;
+}
+;

package/dist/components/general/styleguide.js

@@ -5,7 +5,13 @@ import { PageTitleHeader, PageSection } from "@pixelated-tech/components";
 import { flattenRoutes } from "@pixelated-tech/components";
 import routesData from '../../data/routes.json';
 const routes = routesData.routes;
+/**
+ * StyleGuideUI — developer style guide and design tokens viewer (colors, fonts, IA routes).
+ *
+ * @param {array} [props.routes] - Route definitions used to display site information and navigation structure.
+ */
 StyleGuideUI.propTypes = {
+    /** Array of route objects used to build example navigation and IA references. */
     routes: PropTypes.array,
 };
 export function StyleGuideUI(props) {

package/dist/components/general/tab.js

@@ -9,10 +9,22 @@ const TabItemPropTypes = {
     content: PropTypes.node.isRequired,
 };
 // type TabItemType = InferProps<typeof TabItemPropTypes>;
+/**
+ * Tab — simple tabbed UI: clickable headers with content panes.
+ *
+ * @param {arrayOf} [props.tabs] - Array of tab items: { id, label, content }.
+ * @param {oneOf} [props.orientation] - Tab orientation: 'top' | 'bottom' | 'left' | 'right'.
+ * @param {string} [props.defaultActiveTab] - Id of the tab that should be active initially.
+ * @param {function} [props.onTabChange] - Callback invoked when the active tab changes (tabId).
+ */
 Tab.propTypes = {
+    /** Array of tabs to render, each should include id, label, and content. */
     tabs: PropTypes.arrayOf(PropTypes.shape(TabItemPropTypes).isRequired).isRequired,
+    /** Layout orientation for the tab headers. */
     orientation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+    /** Optional default active tab id. */
     defaultActiveTab: PropTypes.string,
+    /** Optional change handler called with the new tab id. */
     onTabChange: PropTypes.func,
 };
 export function Tab({ tabs, orientation = 'top', defaultActiveTab, onTabChange }) {

package/dist/components/general/table.js

@@ -15,10 +15,22 @@ function isImageURL(url) {
     } };
     return isImage && isURL;
 }
+/**
+ * Table — renders a simple data table with optional client-side column sorting.
+ *
+ * @param {array} [props.data] - Array of row objects (each object's keys become column headers).
+ * @param {string} [props.id] - DOM id for the table element (required for sortable headers to find the table).
+ * @param {boolean} [props.sortable] - Enable click-to-sort on column headers when true.
+ * @param {string} [props.altRowColor] - Optional alternate-row background color for zebra striping.
+ */
 Table.propTypes = {
+    /** Array of row objects; object keys become table columns. */
     data: PropTypes.array.isRequired,
+    /** DOM id used for sorting and header lookups. */
     id: PropTypes.string.isRequired,
+    /** Enable clickable column headers for client-side sorting. */
     sortable: PropTypes.bool,
+    /** CSS color value used for alternate rows when zebra striping is desired. */
     altRowColor: PropTypes.string,
 };
 export function Table(props) {

package/dist/components/general/tiles.js

@@ -7,14 +7,26 @@ import { usePixelatedConfig } from '../config/config.client';
 import "../../css/pixelated.grid.scss";
 import "./tiles.css";
 export const TilesVariants = ['caption', 'overlay'];
+/**
+ * Tiles — renders a responsive grid of image tiles with optional click handlers and visual variants.
+ *
+ * @param {array} [props.cards] - Array of card objects to render (image, link, imageAlt, bodyText).
+ * @param {number} [props.rowCount] - Number of rows to display; affects column sizing.
+ * @param {function} [props.imgClick] - Optional (event, imageUrl) click handler for tile images.
+ * @param {oneOf} [props.variant] - Visual variant: 'caption' (caption beneath image) or 'overlay' (overlay on hover).
+ */
 Tiles.propTypes = {
+    /** Array of card objects used to populate the tile grid (image, link, imageAlt, bodyText). */
     cards: PropTypes.array.isRequired,
+    /** Number of rows to display in the grid (controls layout). */
     rowCount: PropTypes.number,
+    /** Optional click handler for tile images; called with (event, imageUrl). */
     imgClick: PropTypes.func,
     /**
      * Optional visual variant. Allowed values are enumerated so consumers get
      * a discoverable, typed API.
      */
+    /** Visual variant for tile rendering (e.g. 'caption' or 'overlay'). */
     variant: PropTypes.oneOf(TilesVariants),
 };
 export function Tiles(props) {
@@ -27,15 +39,34 @@ export function Tiles(props) {
     }
 }
 /* ========== TILE ========== */
+/**
+ * Tile — single grid tile that displays an image with optional link and caption/overlay.
+ *
+ * @param {number} [props.index] - Zero-based index for the tile (used for IDs).
+ * @param {number} [props.cardLength] - Total number of tiles in the current set.
+ * @param {string} [props.link] - Optional href for the whole tile.
+ * @param {string} [props.image] - Image URL to display (required).
+ * @param {string} [props.imageAlt] - Alt text for the image; used as caption fallback.
+ * @param {string} [props.bodyText] - Optional caption or descriptive text for the tile.
+ * @param {function} [props.imgClick] - Optional click handler for the image (event, imageUrl).
+ * @param {oneOf} [props.variant] - Visual variant: 'caption' | 'overlay'.
+ */
 Tile.propTypes = {
+    /** Zero-based index of the tile. */
     index: PropTypes.number.isRequired,
+    /** Total number of tiles in this grid. */
     cardLength: PropTypes.number.isRequired,
+    /** Optional href for this tile. */
     link: PropTypes.string,
+    /** Image source URL to display (required). */
     image: PropTypes.string.isRequired,
+    /** Alt text for the image; also used as caption fallback. */
     imageAlt: PropTypes.string,
+    /** Optional caption or descriptive body text shown with the tile. */
     bodyText: PropTypes.string,
+    /** Click handler invoked when the tile image is clicked; receives (event, imageUrl). */
     imgClick: PropTypes.func,
-    /** 'caption' - visual caption beneath image (prefers bodyText, falls back to imageAlt) */
+    /** 'caption' - caption beneath image; 'overlay' - overlay displayed on hover. */
     variant: PropTypes.oneOf(TilesVariants),
 };
 function Tile(props) {

package/dist/components/general/timeline.js

@@ -6,7 +6,17 @@ import { SmartImage } from './smartimage';
 import "../../css/pixelated.grid.scss";
 import "./timeline.css";
 // https://www.w3schools.com/howto/howto_css_timeline.asp
+/**
+ * Timeline — vertical timeline display composed of dated or staged items with optional images and directional layout.
+ *
+ * @param {arrayOf} [props.timelineData] - Array of items each containing title, content, image, and direction.
+ * @param {string} [props.title] - Item title text.
+ * @param {string} [props.content] - Item content or description.
+ * @param {string} [props.image] - Optional image URL for the timeline item.
+ * @param {string} [props.direction] - Visual positioning key (e.g., 'left' or 'right').
+ */
 Timeline.propTypes = {
+    /** Array of timeline item objects with title, content, image and direction. */
     timelineData: PropTypes.arrayOf(PropTypes.shape({
         title: PropTypes.string.isRequired,
         content: PropTypes.string,
@@ -17,10 +27,22 @@ Timeline.propTypes = {
 export function Timeline(props) {
     return (_jsx("div", { className: "timeline", children: props.timelineData.map((item, index) => item ? (_jsx(TimelineItem, { title: item.title ?? '', content: item.content, image: item.image, direction: item.direction }, index)) : null) }));
 }
+/**
+ * TimelineItem — Single item for the vertical timeline, including optional image and placement direction.
+ *
+ * @param {string} [props.title] - Title text for the timeline item (required).
+ * @param {string} [props.content] - Description or content of the timeline item.
+ * @param {string} [props.image] - Optional image URL to display for the item.
+ * @param {string} [props.direction] - Visual alignment for the item (e.g., 'left' or 'right').
+ */
 TimelineItem.propTypes = {
+    /** Item title */
     title: PropTypes.string.isRequired,
+    /** Item content or description */
     content: PropTypes.string,
+    /** Optional image URL for the item */
     image: PropTypes.string,
+    /** Placement direction ('left'|'right') */
     direction: PropTypes.string.isRequired
 };
 export default function TimelineItem(props) {

package/dist/components/integrations/calendly.js

@@ -1,9 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import PropTypes from 'prop-types';
+/**
+ * Calendly — Embed a Calendly scheduling widget using the provided URL.
+ *
+ * @param {string} [props.url] - The Calendly widget URL (required).
+ * @param {string} [props.width] - Minimum width for the widget container (e.g., '320px').
+ * @param {string} [props.height] - Height for the widget container (e.g., '700px').
+ */
 Calendly.propTypes = {
+    /** Calendly widget URL */
     url: PropTypes.string.isRequired,
+    /** Minimum width for the widget container */
     width: PropTypes.string.isRequired,
+    /** Height for the widget container */
     height: PropTypes.string.isRequired,
 };
 export function Calendly({ url, width, height }) {

package/dist/components/integrations/cloudinary.js

@@ -59,8 +59,16 @@ export function buildCloudinaryUrl(params) {
     const encodedUrl = url.includes("?") ? encodeURIComponent(url) : url;
     return `${domainAndCloud}/image/fetch/${t}/${encodedUrl}`;
 }
+/**
+ * getCloudinaryRemoteFetchURL — Build a Cloudinary remote fetch URL for a provided image path.
+ *
+ * @param {string} [props.url] - Image URL or path to convert to Cloudinary fetch URL.
+ * @param {string} [props.product_env] - Cloudinary product environment (cloud name) to use when building the URL.
+ */
 getCloudinaryRemoteFetchURL.propTypes = {
+    /** Image URL or path to transform via Cloudinary */
     url: PropTypes.string.isRequired,
+    /** Cloudinary product environment (cloud name) */
     product_env: PropTypes.string.isRequired
 };
 export function getCloudinaryRemoteFetchURL(props) {
@@ -77,8 +85,16 @@ export function userIsMobile() {
     }
     return match;
 }
+/**
+ * loadAllImagesFromCloudinary — Replace <img> sources with Cloudinary-built remote fetch URLs for improved delivery in production.
+ *
+ * @param {string} [props.origin] - Optional origin to validate local development environments (ignored in local dev).
+ * @param {string} [props.product_env] - Cloudinary product environment (cloud name) to use when building URLs.
+ */
 loadAllImagesFromCloudinary.propTypes = {
+    /** Optional origin string to detect local dev */
     origin: PropTypes.string,
+    /** Cloudinary product environment (cloud name) */
     product_env: PropTypes.string.isRequired
 };
 export function loadAllImagesFromCloudinary(props) {