@pixelated-tech/components 3.11.8 → 3.12.0

package/dist/components/general/resume.js

@@ -29,31 +29,63 @@ const defaultDateFormat = 'MM/yyyy';
 type simpleResumeProps = {
     data: any
 } */
+/**
+ * Resume — Render a microformatted resume (h-resume) object into sections like contact, education, experience, and skills.
+ *
+ * @param {any} [props.data] - Resume data object (h-resume structured data expected).
+ */
 Resume.propTypes = {
+    /** Resume data object (h-resume) */
     data: PropTypes.any.isRequired,
 };
 export function Resume(props) {
     return (_jsx("section", { className: "p-resume", id: "resume-section", children: _jsx("div", { className: "section-container", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "p-name grid-s1-e13", children: _jsx(ResumeName, { data: props.data?.items?.[0]?.properties?.name || '' }) }), _jsxs("div", { className: "divider grid-s1-e4", children: [_jsx("div", { className: "p-contact", children: _jsx(ResumeContact, { title: "Contact Information", data: props.data?.items?.[0]?.properties?.contact || [] }) }), _jsx("div", { className: "p-education", children: _jsx(ResumeEvents, { title: "Education", data: props.data?.items?.[0]?.properties?.education || [], dateFormat: "MM/yyyy", collapsible: false }) }), _jsx("div", { className: "p-skills", children: _jsx(ResumeSkills, { title: "Skills", data: props.data?.items?.[0]?.properties?.skills || [] }) })] }), _jsxs("div", { className: "grid-s4-e13", children: [_jsx("div", { className: "p-summary", children: _jsx(ResumeSummary, { title: "Professional Summary", data: props.data?.items?.[0]?.properties?.summary || '' }) }), _jsx("div", { className: "p-qualifications", children: _jsx(ResumeQualifications, { title: "Professional Qualifications", data: props.data?.items?.[0]?.properties?.qualifications || [] }) }), _jsx("div", { className: "p-experience", children: _jsx(ResumeEvents, { title: "Work History", data: props.data?.items?.[0]?.properties?.experience || [], dateFormat: "MM/yyyy", collapsible: false }) }), _jsx("div", { className: "p-projects", children: _jsx(ResumeProjects, { title: "Projects", data: props.data?.items?.[0]?.properties?.experience || [], collapsible: true }) }), _jsx("div", { className: "p-volunteer", children: _jsx(ResumeEvents, { title: "Volunteer Work", data: props.data?.items?.[0]?.properties?.volunteer || [], dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-certifications", children: _jsx(ResumeEvents, { title: "Certifications", data: props.data?.items?.[0]?.properties?.certifications || [], dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-awards", children: _jsx(ResumeEvents, { title: "Honors & Awards", data: props.data?.items?.[0]?.properties?.awards || [], dateFormat: "MM/yyyy", collapsible: true }) }), _jsx("div", { className: "p-training", children: _jsx(ResumeEvents, { title: "Training & Conferences", data: props.data?.items?.[0]?.properties?.training || [], dateFormat: "MM/dd/yyyy", collapsible: true }) }), _jsx("div", { className: "p-references", children: _jsx(ResumeReferences, { title: "References", data: props.data?.items?.[0]?.properties?.references || [], collapsible: true }) })] })] }) }) }));
 }
+/**
+ * ResumeName — Render the candidate's name from the resume data.
+ *
+ * @param {any} [props.data] - Array containing name values; the first entry is used as the display name.
+ */
 ResumeName.propTypes = {
+    /** Array containing the name value(s) */
     data: PropTypes.any.isRequired,
 };
 export function ResumeName(props) {
     const myName = props.data[0];
     return (_jsx(_Fragment, { children: _jsx("h1", { className: "p-name", children: myName }) }));
 }
+/**
+ * ResumeContact — Renders contact information (email, address, phone, website) from resume data.
+ *
+ * @param {any} [props.data] - Contact microformat data array (expects typical contact properties).
+ * @param {string} [props.title] - Section heading to display above contact information.
+ */
 ResumeContact.propTypes = {
+    /** Contact microformat data array */
     data: PropTypes.any.isRequired,
+    /** Section title */
     title: PropTypes.string.isRequired,
 };
 export function ResumeContact(props) {
     const myContact = props.data[0];
     return (_jsxs(_Fragment, { children: [_jsx("h2", { children: props.title }), _jsxs("ul", { children: [_jsx("li", { children: _jsx("span", { className: "p-email", children: _jsx("a", { href: `mailto:${myContact?.properties.email[0]}`, target: "_blank", rel: "noopener noreferrer", children: myContact?.properties.email[0] }) }) }), _jsxs("li", { children: [_jsxs("span", { className: "p-street-address", children: [myContact?.properties.adr[0].properties["street-address"], ", "] }), _jsxs("span", { className: "p-locality", children: [myContact?.properties.adr[0].properties.locality, ", "] }), _jsxs("span", { className: "p-region", children: [myContact?.properties.adr[0].properties.region, " "] }), _jsx("span", { className: "p-postal-code", children: myContact?.properties.adr[0].properties["postal-code"] })] }), _jsx("li", { children: _jsx("span", { className: "p-tel", children: myContact?.properties.tel[0] }) }), _jsx("li", { children: _jsx("span", { className: "p-url", children: _jsx("a", { href: myContact?.properties.url[0], target: "_blank", rel: "noopener", children: myContact?.properties.url[0] }) }) })] })] }));
 }
+/**
+ * ResumeEvents — Render a list of dated events (education, work, volunteer) with optional collapsible behavior.
+ *
+ * @param {any} [props.data] - Array of event objects with `properties` including start/end and location metadata.
+ * @param {string} [props.dateFormat] - Date format string passed to `date-fns` for rendering dates (e.g., 'MM/yyyy').
+ * @param {boolean} [props.collapsible] - If true, the event list is rendered inside a collapsible `<details>` element.
+ * @param {string} [props.title] - Section title for the events list.
+ */
 ResumeEvents.propTypes = {
+    /** Array of event objects (work, education, etc.) */
     data: PropTypes.any.isRequired,
+    /** Date format string for display */
     dateFormat: PropTypes.string.isRequired,
+    /** When true, events are shown inside a collapsible details element */
     collapsible: PropTypes.bool,
+    /** Section title */
     title: PropTypes.string.isRequired,
 };
 export function ResumeEvents(props) {
@@ -90,8 +122,16 @@ export function ResumeEvents(props) {
         return (_jsxs(_Fragment, { children: [_jsx("h2", { children: props.title }), _jsx("ul", { children: myElems })] }));
     }
 }
+/**
+ * ResumeQualifications — Render grouped qualification lists (e.g., certifications, licenses) by category.
+ *
+ * @param {any} [props.data] - Object mapping qualification categories to arrays of items.
+ * @param {string} [props.title] - Section title to display above qualifications.
+ */
 ResumeQualifications.propTypes = {
+    /** Qualifications data by category */
     data: PropTypes.any.isRequired,
+    /** Section title */
     title: PropTypes.string.isRequired,
 };
 export function ResumeQualifications(props) {
@@ -106,8 +146,16 @@ export function ResumeQualifications(props) {
     }
     return (_jsxs(_Fragment, { children: [_jsx("h2", { children: props.title }), myElems] }));
 }
+/**
+ * ResumeSkills — Render skill categories and values from the resume data.
+ *
+ * @param {any} [props.data] - Skills data (typically an object or array of categories and skill lists).
+ * @param {string} [props.title] - Section title for the skills block.
+ */
 ResumeSkills.propTypes = {
+    /** Skills data (categories and lists) */
     data: PropTypes.any.isRequired,
+    /** Section title */
     title: PropTypes.string.isRequired,
 };
 export function ResumeSkills(props) {
@@ -121,8 +169,16 @@ export function ResumeSkills(props) {
     }
     return (_jsxs(_Fragment, { children: [_jsx("h2", { children: props.title }), _jsx("div", { className: "p-skills", children: myElems })] }));
 }
+/**
+ * ResumeSummary — Render a short professional summary paragraph or bullets.
+ *
+ * @param {any} [props.data] - Summary text or array of summary paragraphs.
+ * @param {string} [props.title] - Section title for the summary block.
+ */
 ResumeSummary.propTypes = {
+    /** Summary text or paragraphs */
     data: PropTypes.any.isRequired,
+    /** Section title */
     title: PropTypes.string.isRequired,
 };
 export function ResumeSummary(props) {
@@ -135,9 +191,19 @@ export function ResumeSummary(props) {
     }
     return (_jsxs(_Fragment, { children: [_jsx("h2", { children: props.title }), _jsx("ul", { className: "p-summary", children: myElems })] }));
 }
+/**
+ * ResumeReferences — Render a list of professional references with contact details.
+ *
+ * @param {any} [props.data] - Array of reference objects (microformat references).
+ * @param {any} [props.title] - Section title for references.
+ * @param {boolean} [props.collapsible] - When true, the reference list is collapsible.
+ */
 ResumeReferences.propTypes = {
+    /** Reference objects array */
     data: PropTypes.any.isRequired,
+    /** Section title */
     title: PropTypes.any.isRequired,
+    /** When true, make the section collapsible */
     collapsible: PropTypes.bool,
 };
 export function ResumeReferences(props) {
@@ -156,16 +222,32 @@ export function ResumeReferences(props) {
         return (_jsxs(_Fragment, { children: [_jsx("h2", { children: props.title }), _jsx("div", { children: myElems })] }));
     }
 }
+/**
+ * ResumeReference — Render a single reference entry (name, organization, contact info).
+ *
+ * @param {any} [props.data] - Reference object with contact properties used for display.
+ */
 ResumeReference.propTypes = {
+    /** Reference object with contact details */
     data: PropTypes.any.isRequired,
 };
 export function ResumeReference(props) {
     const myReference = props.data.properties;
     return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [(myReference?.url[0]) ? _jsx("a", { href: myReference?.url[0], target: "_blank", className: "u-url", rel: "noopener noreferrer", children: _jsx("span", { className: "p-name", children: myReference?.name[0] }) }) : _jsx("span", { className: "p-name", children: myReference?.name[0] }), ",", ' ', " ", _jsx("span", { className: "p-locality", children: myReference?.locality[0] }), ",", ' ', " ", _jsx("span", { className: "p-region", children: myReference?.region[0] })] }), _jsxs("div", { children: [_jsx("span", { className: "p-job-title", children: myReference["job-title"][0] }), ",", ' ', " ", _jsx("span", { className: "p-org", children: myReference?.org[0] })] }), _jsxs("div", { children: ["email : ", _jsx("a", { href: `mailto:${myReference?.email[0]}`, target: "_blank", rel: "noopener noreferrer", className: "u-email", children: myReference?.email[0] }), ' ', " || phone : ", _jsx("a", { href: `tel:${myReference?.tel[0]}`, className: "p-tel", children: myReference?.tel[0] })] }), _jsx("br", {}), _jsx("hr", {}), _jsx("br", {})] }));
 }
+/**
+ * ResumeProjects — Render projects associated with work history or portfolios.
+ *
+ * @param {any} [props.data] - Array of project objects with properties like name, url, photo, and note.
+ * @param {any} [props.title] - Section title for the projects block.
+ * @param {boolean} [props.collapsible] - When true, projects render inside a collapsible element.
+ */
 ResumeProjects.propTypes = {
+    /** Projects array */
     data: PropTypes.any.isRequired,
+    /** Section title */
     title: PropTypes.any.isRequired,
+    /** When true, make the section collapsible */
     collapsible: PropTypes.bool,
 };
 export function ResumeProjects(props) {

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

@@ -1,6 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
+/**
+ * SchemaBlogPosting — Inject a JSON-LD <script> tag containing a BlogPosting schema object.
+ *
+ * @param {object} [props.post] - Structured JSON-LD object representing a blog post (BlogPosting schema).
+ */
 SchemaBlogPosting.propTypes = {
+    /** Structured BlogPosting JSON-LD object */
     post: PropTypes.object.isRequired,
 };
 export function SchemaBlogPosting(props) {

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

@@ -8,22 +8,58 @@ import PropTypes from "prop-types";
  * This component uses siteInfo passed as props to generate schema data.
  * It does not use client-side hooks and can be rendered on the server.
  */
+/**
+ * LocalBusinessSchema — generates JSON-LD for a LocalBusiness using provided props or a fallback `siteInfo`.
+ *
+ * @param {string} [props.name] - Business name (overrides siteInfo.name).
+ * @param {string} [props.streetAddress] - Street address line.
+ * @param {string} [props.addressLocality] - City or locality.
+ * @param {string} [props.addressRegion] - State, region or province.
+ * @param {string} [props.postalCode] - Postal/ZIP code.
+ * @param {string} [props.addressCountry] - Country (defaults to 'United States' when missing).
+ * @param {string} [props.telephone] - Contact phone number.
+ * @param {string} [props.url] - Canonical website URL.
+ * @param {string} [props.logo] - Logo image URL.
+ * @param {string} [props.image] - Representative image URL.
+ * @param {oneOfType} [props.openingHours] - Opening hours string or array in schema.org format.
+ * @param {string} [props.description] - Short business description.
+ * @param {string} [props.email] - Contact email address.
+ * @param {string} [props.priceRange] - Price range (e.g. '$$', optional).
+ * @param {arrayOf} [props.sameAs] - Array of social/profile URLs for schema 'sameAs'.
+ * @param {object} [props.siteInfo] - Site-level fallback information object.
+ */
 LocalBusinessSchema.propTypes = {
+    /** Business name to include in schema (falls back to siteInfo.name). */
     name: PropTypes.string,
+    /** Street address for the business. */
     streetAddress: PropTypes.string,
+    /** City or locality for the business address. */
     addressLocality: PropTypes.string,
+    /** State/region for the business address. */
     addressRegion: PropTypes.string,
+    /** Postal or ZIP code for the address. */
     postalCode: PropTypes.string,
+    /** Country for the address (defaults to United States when absent). */
     addressCountry: PropTypes.string,
+    /** Contact telephone number. */
     telephone: PropTypes.string,
+    /** Canonical website URL. */
     url: PropTypes.string,
+    /** Logo image URL for schema/logo property. */
     logo: PropTypes.string,
+    /** Representative image URL. */
     image: PropTypes.string,
+    /** Opening hours as a string or array in schema.org format (e.g., "Mo-Fr 09:00-17:00"). */
     openingHours: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    /** Short description for schema. */
     description: PropTypes.string,
+    /** Contact email address. */
     email: PropTypes.string,
+    /** Price range string (e.g. '$$'). */
     priceRange: PropTypes.string,
+    /** Array of profile/URL strings for sameAs (social links). */
     sameAs: PropTypes.arrayOf(PropTypes.string), // Social media profiles
+    /** Site-level fallback information object (used when props omitted). */
     siteInfo: PropTypes.object // Required siteinfo from parent component
 };
 export function LocalBusinessSchema(props) {

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

@@ -5,7 +5,27 @@ import PropTypes from 'prop-types';
  * Generates JSON-LD structured data for recipes
  * https://schema.org/Recipe
  */
+/**
+ * RecipeSchema — embeds a recipe as JSON-LD for SEO (schema.org/Recipe).
+ *
+ * @param {shape} [props.recipe] - Recipe object conforming to schema.org/Recipe; will be serialized as JSON-LD.
+ * @param {string} [props.name] - Recipe title.
+ * @param {string} [props.description] - Short recipe description.
+ * @param {shape} [props.author] - Author information (name and @type).
+ * @param {string} [props.datePublished] - ISO date the recipe was published.
+ * @param {string} [props.image] - Primary image URL for the recipe.
+ * @param {string} [props.recipeYield] - Yield or serving size (e.g., '4 servings').
+ * @param {string} [props.prepTime] - Prep time in ISO 8601 duration (e.g. 'PT20M').
+ * @param {string} [props.cookTime] - Cook time in ISO 8601 duration.
+ * @param {string} [props.totalTime] - Total time in ISO 8601 duration.
+ * @param {string} [props.recipeCategory] - Category of the recipe (e.g., 'Dessert').
+ * @param {string} [props.recipeCuisine] - Cuisine (e.g., 'Italian').
+ * @param {arrayOf} [props.recipeIngredient] - List of ingredient strings.
+ * @param {arrayOf} [props.recipeInstructions] - Structured list of instruction steps or paragraphs.
+ * @param {string} [props.license] - License URL or short string for the recipe content.
+ */
 RecipeSchema.propTypes = {
+    /** Recipe information object to be serialized as JSON-LD. */
     recipe: PropTypes.shape({
         '@context': PropTypes.string.isRequired,
         '@type': PropTypes.string.isRequired,

package/dist/components/general/semantic.js

@@ -19,8 +19,16 @@ export const flexWraps = ['nowrap', 'wrap', 'wrap-reverse'];
 export const justifyContentValues = ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'];
 export const alignItemsValues = ['start', 'center', 'end', 'stretch', 'baseline'];
 // ========== PAGE TITLE HEADER ==========
+/**
+ * PageTitleHeader — Small H1 header used primarily for page titles.
+ *
+ * @param {string} [props.title] - Title text to display (required).
+ * @param {string} [props.url] - Optional URL; when present, the title will be rendered as a link.
+ */
 PageTitleHeader.propTypes = {
+    /** Page title text (required) */
     title: PropTypes.string.isRequired,
+    /** Optional URL to wrap the title with */
     url: PropTypes.string
 };
 export function PageTitleHeader({ title, url }) {
@@ -31,31 +39,75 @@ export function PageTitleHeader({ title, url }) {
 }
 ;
 // ========== PAGE SECTION ==========
+/**
+ * PageSection — Flexible section wrapper used for page layout (grid or flex).
+ *
+ * @param {string} [props.id] - Optional element id for the section.
+ * @param {string} [props.className] - Optional additional CSS class names.
+ * @param {oneOf} [props.layoutType] - Layout mode: 'grid' | 'flex' | 'none'.
+ * @param {string} [props.gap] - Gap between child elements (CSS gap value).
+ * @param {string} [props.maxWidth] - Maximum content width (e.g., '1024px').
+ * @param {string} [props.padding] - Section padding (CSS shorthand).
+ * @param {string} [props.background] - Background color or CSS value.
+ * @param {string} [props.backgroundImage] - Background image URL.
+ * @param {number} [props.columns] - Number of grid columns when `layoutType` is 'grid'.
+ * @param {oneOf} [props.autoFlow] - Grid auto-flow property (e.g., 'row', 'column', 'dense').
+ * @param {oneOf} [props.justifyItems] - Grid justify-items value.
+ * @param {shape} [props.responsive] - Responsive column counts ({ mobile, tablet, desktop }).
+ * @param {number} [props.mobile] - Mobile column count (inside `responsive`).
+ * @param {number} [props.tablet] - Tablet column count (inside `responsive`).
+ * @param {number} [props.desktop] - Desktop column count (inside `responsive`).
+ * @param {oneOf} [props.direction] - Flex direction when `layoutType` is 'flex'.
+ * @param {oneOf} [props.wrap] - Flex wrap property when using flex layout.
+ * @param {oneOf} [props.justifyContent] - Flex justify-content value.
+ * @param {oneOf} [props.alignItems] - Alignment for cross-axis in grid/flex.
+ * @param {node} [props.children] - Child nodes to render inside the section.
+ */
 PageSection.propTypes = {
+    /** Optional element id */
     id: PropTypes.string,
+    /** Optional CSS classes */
     className: PropTypes.string,
+    /** Layout mode ('grid' | 'flex' | 'none') */
     layoutType: PropTypes.oneOf([...layoutTypes]),
     // Common props
+    /** Gap between children (CSS gap) */
     gap: PropTypes.string,
+    /** Max width of the content area */
     maxWidth: PropTypes.string,
+    /** Padding applied to content area */
     padding: PropTypes.string,
+    /** Background color/string */
     background: PropTypes.string,
+    /** Background image URL */
     backgroundImage: PropTypes.string,
     // Grid-specific props
+    /** Number of columns when using grid layout */
     columns: PropTypes.number,
+    /** Grid auto-flow value */
     autoFlow: PropTypes.oneOf([...autoFlowValues]),
+    /** Grid justify-items */
     justifyItems: PropTypes.oneOf([...justifyItemsValues]),
+    /** Responsive column config */
     responsive: PropTypes.shape({
+        /** Mobile column count */
         mobile: PropTypes.number,
+        /** Tablet column count */
         tablet: PropTypes.number,
+        /** Desktop column count */
         desktop: PropTypes.number,
     }),
     // Flex-specific props
+    /** Flex direction value */
     direction: PropTypes.oneOf([...flexDirections]),
+    /** Flex wrap behavior */
     wrap: PropTypes.oneOf([...flexWraps]),
+    /** Flex justify-content value */
     justifyContent: PropTypes.oneOf([...justifyContentValues]),
     // Shared alignment
+    /** Cross-axis alignment for children */
     alignItems: PropTypes.oneOf([...alignItemsValues]),
+    /** Child nodes */
     children: PropTypes.node,
 };
 export function PageSection({ id, className, layoutType = 'grid', gap = '10px', maxWidth = '1024px', padding = '0 20px', /* 5px */ background, backgroundImage, 
@@ -99,8 +151,16 @@ alignItems = 'stretch', children, }) {
     return (_jsxs("section", { id: id || undefined, className: "page-section page-section-none", style: sectionStyle, children: [backgroundImage && _jsx(PageSectionBackgroundImage, { backgroundImage: backgroundImage, id: id }), _jsx("div", { className: "page-section-content", style: contentStyle, children: children })] }));
 }
 // ========== PAGE SECTION HEADER ==========
+/**
+ * PageSectionHeader — Small header used to label a `PageSection`.
+ *
+ * @param {string} [props.title] - Section title text (required).
+ * @param {string} [props.url] - Optional URL to link the section title.
+ */
 PageSectionHeader.propTypes = {
+    /** Section title text */
     title: PropTypes.string.isRequired,
+    /** Optional URL to link the title */
     url: PropTypes.string
 };
 export function PageSectionHeader({ title, url }) {
@@ -111,8 +171,16 @@ export function PageSectionHeader({ title, url }) {
 }
 ;
 // ========== PAGE SECTION BACKGROUND IMAGE ==========
+/**
+ * PageSectionBackgroundImage — Decorative background image used by `PageSection`.
+ *
+ * @param {string} [props.backgroundImage] - Background image URL (required).
+ * @param {string} [props.id] - Optional id used for element ids and titles.
+ */
 PageSectionBackgroundImage.propTypes = {
+    /** Background image URL */
     backgroundImage: PropTypes.string.isRequired,
+    /** Optional id for the image element */
     id: PropTypes.string,
 };
 export function PageSectionBackgroundImage(props) {
@@ -122,17 +190,43 @@ export function PageSectionBackgroundImage(props) {
             title: props.id ? `${props.id} background image` : undefined, alt: props.id ? `${props.id} background image` : "", cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }));
 }
 // ========== GRID ITEM ==========
+/**
+ * PageGridItem — Single grid cell wrapper that supports span and positioning helpers.
+ *
+ * @param {string} [props.id] - Optional id for the grid item element.
+ * @param {string} [props.className] - Additional CSS classes for the item.
+ * @param {number} [props.columnSpan] - How many columns the item spans.
+ * @param {number} [props.rowSpan] - How many rows the item spans.
+ * @param {number} [props.columnStart] - Starting column index for the item.
+ * @param {number} [props.columnEnd] - Ending column index for the item.
+ * @param {number} [props.rowStart] - Starting row index for the item.
+ * @param {number} [props.rowEnd] - Ending row index for the item.
+ * @param {oneOf} [props.alignSelf] - Cross-axis alignment for the item.
+ * @param {oneOf} [props.justifySelf] - Main-axis alignment for the item.
+ * @param {node} [props.children] - Child nodes to render inside the grid cell.
+ */
 PageGridItem.propTypes = {
+    /** Optional element id */
     id: PropTypes.string,
+    /** Optional CSS classes */
     className: PropTypes.string,
+    /** Column span value */
     columnSpan: PropTypes.number,
+    /** Row span value */
     rowSpan: PropTypes.number,
+    /** Column start index */
     columnStart: PropTypes.number,
+    /** Column end index */
     columnEnd: PropTypes.number,
+    /** Row start index */
     rowStart: PropTypes.number,
+    /** Row end index */
     rowEnd: PropTypes.number,
+    /** Cross-axis alignment */
     alignSelf: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
+    /** Main-axis alignment */
     justifySelf: PropTypes.oneOf(['start', 'center', 'end', 'stretch']),
+    /** Child nodes */
     children: PropTypes.node,
 };
 export function PageGridItem({ id, className, columnSpan, rowSpan, columnStart, columnEnd, rowStart, rowEnd, alignSelf, justifySelf, children, }) {
@@ -155,10 +249,22 @@ export function PageGridItem({ id, className, columnSpan, rowSpan, columnStart,
             (columnStart && columnEnd && !columnSpan ? ` grid-s${columnStart}-e${columnEnd}` : ''), id: (id) ? id : undefined, style: itemStyle, children: children }));
 }
 // ========== FLEX ITEM ==========
+/**
+ * PageFlexItem — Simple flex item helper that exposes CSS flex and order helpers.
+ *
+ * @param {string} [props.flex] - CSS flex shorthand value (e.g., '1 1 auto').
+ * @param {number} [props.order] - Order value used by flexbox ordering.
+ * @param {oneOf} [props.alignSelf] - Override for cross-axis alignment on the item.
+ * @param {node} [props.children] - Child nodes to render inside the flex item.
+ */
 PageFlexItem.propTypes = {
+    /** CSS flex shorthand value */
     flex: PropTypes.string,
+    /** Flex order value */
     order: PropTypes.number,
+    /** Cross-axis alignment override */
     alignSelf: PropTypes.oneOf(['auto', 'start', 'center', 'end', 'stretch', 'baseline']),
+    /** Child nodes */
     children: PropTypes.node,
 };
 export function PageFlexItem({ flex = '1', order, alignSelf, children, }) {
@@ -176,15 +282,37 @@ const pageLinkShape = PropTypes.shape({
     target: PropTypes.oneOf(["_self", "_blank"]),
 });
 // ========== PAGE HEADER ==========
+/**
+ * PageHeader — Top page header block that can include eyebrow, headline, description and CTA.
+ *
+ * @param {string} [props.className] - Optional CSS classes to apply to the header.
+ * @param {string} [props.eyebrow] - Small eyebrow text shown above the headline.
+ * @param {string} [props.headline] - Main headline text.
+ * @param {string} [props.description] - Short description or subheading text.
+ * @param {string} [props.ctaLabel] - CTA button label text.
+ * @param {string} [props.ctaHref] - CTA URL to navigate to when clicked.
+ * @param {oneOf} [props.ctaTarget] - Optional target for CTA link ('_self' or '_blank').
+ * @param {node} [props.children] - Additional nodes to render inside the header.
+ * @param {boolean} [props.fixed] - When true, header becomes fixed and a spacer is inserted.
+ */
 PageHeader.propTypes = {
+    /** Optional CSS classes */
     className: PropTypes.string,
+    /** Eyebrow above the headline */
     eyebrow: PropTypes.string,
+    /** Headline text */
     headline: PropTypes.string,
+    /** Subheading or description */
     description: PropTypes.string,
+    /** CTA label */
     ctaLabel: PropTypes.string,
+    /** CTA href */
     ctaHref: PropTypes.string,
+    /** CTA target */
     ctaTarget: PropTypes.oneOf(["_self", "_blank"]),
+    /** Additional child nodes */
     children: PropTypes.node,
+    /** When true, header is fixed (sticky) */
     fixed: PropTypes.bool,
 };
 export function PageHeader({ className, eyebrow, headline, description, ctaLabel, ctaHref, ctaTarget, children, fixed = false, }) {
@@ -212,11 +340,25 @@ export function PageHeader({ className, eyebrow, headline, description, ctaLabel
     return (_jsxs(_Fragment, { children: [fixed && (_jsx("div", { className: "page-header-spacer", "aria-hidden": "true", style: spacerStyle })), _jsxs("header", { ref: headerRef, className: headerClasses, children: [eyebrow && _jsx("p", { className: "page-header-eyebrow", children: eyebrow }), headline && _jsx("h1", { children: headline }), description && _jsx("p", { className: "page-header-description", children: description }), ctaLabel && ctaHref && (_jsx("a", { className: "page-header-cta", href: ctaHref, target: resolvedTarget, rel: rel, children: ctaLabel })), children] })] }));
 }
 // ========== PAGE HERO ==========
+/**
+ * PageHero — Generic hero wrapper used within page layouts.
+ *
+ * @param {string} [props.id] - Optional id for the hero section.
+ * @param {string} [props.className] - Additional CSS classes for the hero.
+ * @param {string} [props.background] - Background color or CSS value.
+ * @param {string} [props.backgroundImage] - Background image URL to render behind content.
+ * @param {node} [props.children] - Content to display inside the hero.
+ */
 PageHero.propTypes = {
+    /** Optional id for hero */
     id: PropTypes.string,
+    /** Optional CSS classes */
     className: PropTypes.string,
+    /** Background color or CSS string */
     background: PropTypes.string,
+    /** Background image URL */
     backgroundImage: PropTypes.string,
+    /** Child nodes */
     children: PropTypes.node,
 };
 export function PageHero({ id, className, background, backgroundImage, children, }) {
@@ -226,11 +368,25 @@ export function PageHero({ id, className, background, backgroundImage, children,
     return (_jsxs("section", { id: id || undefined, className: `page-hero${className ? ` ${className}` : ""}`, style: wrapperStyle, children: [backgroundImage && _jsx(PageSectionBackgroundImage, { backgroundImage: backgroundImage, id: id }), _jsx("div", { className: "page-hero-content", children: children })] }));
 }
 // ========== PAGE MAIN ==========
+/**
+ * PageMain — Main content wrapper with optional width and padding controls.
+ *
+ * @param {string} [props.id] - Optional id attribute for the main element.
+ * @param {string} [props.className] - Additional CSS classes to apply.
+ * @param {string} [props.maxWidth] - Maximum content width (e.g., '1200px').
+ * @param {string} [props.padding] - Padding around the main content (CSS shorthand).
+ * @param {node} [props.children] - Main content nodes.
+ */
 PageMain.propTypes = {
+    /** Optional id */
     id: PropTypes.string,
+    /** Optional CSS classes */
     className: PropTypes.string,
+    /** Max content width */
     maxWidth: PropTypes.string,
+    /** Padding for main content */
     padding: PropTypes.string,
+    /** Child nodes */
     children: PropTypes.node,
 };
 export function PageMain({ id, className, maxWidth = "1200px", padding = "0 20px 60px", children, }) {
@@ -241,9 +397,19 @@ export function PageMain({ id, className, maxWidth = "1200px", padding = "0 20px
     return (_jsx("main", { id: id || undefined, className: `page-main${className ? ` ${className}` : ""}`, style: layoutStyle, children: children }));
 }
 // ========== PAGE NAV ==========
+/**
+ * PageNav — Simple navigation helper that renders link items horizontally or vertically.
+ *
+ * @param {string} [props.className] - Optional CSS classes for the nav wrapper.
+ * @param {oneOf} [props.orientation] - Layout orientation: 'horizontal' or 'vertical'.
+ * @param {arrayOf} [props.links] - Array of link objects ({label, href, target}).
+ */
 PageNav.propTypes = {
+    /** Optional CSS classes */
     className: PropTypes.string,
+    /** Orientation: 'horizontal' | 'vertical' */
     orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+    /** Array of link objects */
     links: PropTypes.arrayOf(pageLinkShape),
 };
 export function PageNav({ className, orientation = "horizontal", links, }) {
@@ -260,10 +426,22 @@ export function PageNav({ className, orientation = "horizontal", links, }) {
         }) }));
 }
 // ========== PAGE FOOTER ==========
+/**
+ * PageFooter — Page footer that optionally renders text, links and children.
+ *
+ * @param {string} [props.className] - Optional additional CSS classes.
+ * @param {string} [props.text] - Footer text or short copyright string.
+ * @param {arrayOf} [props.links] - Array of link objects to show in footer.
+ * @param {node} [props.children] - Additional nodes rendered inside the footer.
+ */
 PageFooter.propTypes = {
+    /** Optional CSS classes */
     className: PropTypes.string,
+    /** Footer text */
     text: PropTypes.string,
+    /** Footer links */
     links: PropTypes.arrayOf(pageLinkShape),
+    /** Child nodes */
     children: PropTypes.node,
 };
 export function PageFooter({ className, text, links, children, }) {

package/dist/components/general/sidepanel.js

@@ -7,17 +7,43 @@ import PropTypes from 'prop-types';
 import './sidepanel.css';
 // Define const arrays for options - used by both PropTypes and form generation
 export const positions = ['left', 'right'];
+/**
+ * SidePanel — off-canvas panel that can be opened from the left or right with optional overlay and tab toggle.
+ *
+ * @param {boolean} [props.isOpen] - Whether the panel is currently open.
+ * @param {function} [props.onClose] - Callback invoked to request the panel be closed.
+ * @param {function} [props.onToggle] - Callback to toggle the panel open/closed.
+ * @param {oneOf} [props.position] - Which side the panel appears on ('left' | 'right').
+ * @param {string} [props.width] - CSS width (e.g., '300px') used for panel size.
+ * @param {boolean} [props.showOverlay] - Whether to render a click-to-close overlay behind the panel.
+ * @param {boolean} [props.showTab] - Whether to display a persistent toggle tab.
+ * @param {node} [props.tabIcon] - Optional icon node to render inside the tab button.
+ * @param {string} [props.tabLabel] - Optional text label to show on the tab button.
+ * @param {node} [props.children] - Panel content to render inside the side panel.
+ * @param {string} [props.className] - Additional CSS class names to apply to the panel container.
+ */
 SidePanel.propTypes = {
+    /** Whether the panel is open (controls visible state). */
     isOpen: PropTypes.bool.isRequired,
+    /** Function called to request closing the panel. */
     onClose: PropTypes.func.isRequired,
+    /** Optional toggle callback to open/close the panel. */
     onToggle: PropTypes.func,
+    /** Position of the panel on the screen ('left' or 'right'). */
     position: PropTypes.oneOf([...positions]),
+    /** CSS width value for the panel (e.g., '300px'). */
     width: PropTypes.string,
+    /** When true an overlay is shown and clicking it closes the panel. */
     showOverlay: PropTypes.bool,
+    /** Whether to render a fixed tab toggle for the panel. */
     showTab: PropTypes.bool,
+    /** Optional icon node shown inside the persistent tab. */
     tabIcon: PropTypes.node,
+    /** Optional label text for the tab toggle. */
     tabLabel: PropTypes.string,
+    /** Panel content as React children. */
     children: PropTypes.node,
+    /** Extra CSS class names to apply to the component. */
     className: PropTypes.string,
 };
 export default function SidePanel({ isOpen, onClose, onToggle, position = 'left', width = '300px', showOverlay = true, showTab = false, tabIcon /* = "≡" */, tabLabel, children, className = '' }) {