@pixelated-tech/components 3.4.2 → 3.5.0

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

@@ -1,6 +1,10 @@
 'use client';
 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.propTypes = {
+    siteName: PropTypes.string.isRequired,
+};
 export function SiteHealthUptime({ siteName }) {
     const fetchUptimeData = async (site) => {
         const response = await fetch(`/api/site-health/uptime?siteName=${encodeURIComponent(site)}`);

package/dist/components/callout/callout.js

@@ -89,16 +89,6 @@ CalloutButton.propTypes = {
     url: PropTypes.string.isRequired,
     target: PropTypes.string
 };
-/* export function CalloutButton( { title, url, target } : CalloutButtonType) {
-    return (
-        <div className="callout-button">
-            { (url)
-                ? <button type="button" className="callout-button"><a href={url || ""} target={target || ""} rel={target=="_blank" ? "noopener noreferrer" : ""}>{title}</a></button>
-                : null
-            }
-        </div>
-    );
-} */
 export function CalloutButton({ title, url, target }) {
     const handleClick = () => {
         if (target === '_blank') {

package/dist/components/carousel/carousel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import PropTypes /* , { InferProps } */ from 'prop-types';
+import PropTypes from 'prop-types';
 import { SmartImage } from '../cms/smartimage';
 import { usePixelatedConfig } from '../config/config.client';
 import { DragHandler } from './carousel.drag';
@@ -11,11 +11,22 @@ function capitalize(str) {
 }
 /* ========== CAROUSEL ========== */
 Carousel.propTypes = {
-    cards: PropTypes.array.isRequired,
+    cards: PropTypes.arrayOf(PropTypes.shape({
+        index: PropTypes.number.isRequired,
+        cardIndex: PropTypes.number.isRequired,
+        cardLength: PropTypes.number.isRequired,
+        link: PropTypes.string,
+        linkTarget: PropTypes.string,
+        image: PropTypes.string.isRequired,
+        imageAlt: PropTypes.string,
+        imgFit: PropTypes.oneOf(['contain', 'cover', 'fill']),
+        headerText: PropTypes.string,
+        subHeaderText: PropTypes.string,
+        bodyText: PropTypes.string,
+    })).isRequired,
     draggable: PropTypes.bool,
     imgFit: PropTypes.oneOf(['contain', 'cover', 'fill'])
 };
-// export type CarouselType = InferProps<typeof Carousel.propTypes>;
 export function Carousel(props) {
     const debug = false;
     let timer = useRef(null);
@@ -74,7 +85,7 @@ export function Carousel(props) {
             console.log('CarouselSimple: Dragging disabled');
     }
     if (props.cards && props.cards.length > 0) {
-        return (_jsxs("div", { className: "carousel-container", children: [_jsx("div", { className: "carousel-cards-container", children: props.cards.map((card, i) => (_jsx(CarouselCard, { index: i, cardIndex: cardIndex, cardLength: props.cards.length, link: card.link, linkTarget: card.linkTarget || '_self', image: card.image, imageAlt: card.imageAlt, imgFit: props.imgFit ? props.imgFit : 'fill', headerText: card.headerText, subHeaderText: card.subHeaderText, bodyText: card.bodyText }, i))) }), _jsxs("div", { className: "carousel-buttons", children: [_jsx(CarouselButton, { clickFunction: previousCard, glyph: '\u25C0' }), _jsx(CarouselButton, { clickFunction: stopTimer, glyph: '\u23F8' }), _jsx(CarouselButton, { clickFunction: nextCard, glyph: '\u25B6' })] })] }));
+        return (_jsxs("div", { className: "carousel-container", children: [_jsx("div", { className: "carousel-cards-container", children: props.cards.map((card, i) => (_jsx(CarouselCard, { index: i, cardIndex: cardIndex, cardLength: props.cards.length, link: card.link, linkTarget: card.linkTarget || '_self', image: card.image, imageAlt: card.imageAlt, imgFit: (props.imgFit || 'fill'), headerText: card.headerText, subHeaderText: card.subHeaderText, bodyText: card.bodyText }, i))) }), _jsxs("div", { className: "carousel-buttons", children: [_jsx(CarouselButton, { clickFunction: previousCard, glyph: '\u25C0' }), _jsx(CarouselButton, { clickFunction: stopTimer, glyph: '\u23F8' }), _jsx(CarouselButton, { clickFunction: nextCard, glyph: '\u25B6' })] })] }));
     }
     else {
         return (_jsx("div", { className: 'section-container', children: _jsx("div", { className: "carousel-container", children: _jsx(CarouselLoading, {}) }) }));

package/dist/components/carousel/tiles.js

@@ -7,7 +7,7 @@ import { usePixelatedConfig } from '../config/config.client';
 import "../../css/pixelated.grid.scss";
 import "./tiles.css";
 Tiles.propTypes = {
-    cards: PropTypes.object.isRequired,
+    cards: PropTypes.array.isRequired,
     rowCount: PropTypes.number,
 };
 export function Tiles(props) {

package/dist/components/cms/contentful.items.components.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { Carousel } from '../carousel/carousel';
 import { getContentfulEntriesByType, getContentfulEntryByEntryID } from "./contentful.delivery";
 import { usePixelatedConfig } from '../config/config.client';
-import { AddToShoppingCart } from "../shoppingcart/shoppingcart.functions";
+import { addToShoppingCart } from "../shoppingcart/shoppingcart.functions";
 import { AddToCartButton, /* GoToCartButton */ ViewItemDetails } from "../shoppingcart/shoppingcart.components";
 import { getCloudinaryRemoteFetchURL as getImg } from "./cloudinary";
 // import { Loading, ToggleLoading } from "../general/pixelated.loading";	
@@ -135,7 +135,7 @@ export function ContentfulListItem(props) {
                             ? _jsx(ContentfulItemHeader, { url: itemURL, target: itemURLTarget, title: thisItem.fields.title })
                             : _jsx(ContentfulItemHeader, { title: thisItem.fields.title }) }), _jsxs("div", { className: "contentful-item-details grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.sys.id] }), _jsxs("div", { children: [_jsx("b", { children: "UPC ID: " }), thisItem.fields.id] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.fields.quantity] }), _jsxs("div", { children: [_jsx("b", { children: "Brand / Model: " }), thisItem.fields.brand, " ", thisItem.fields.model] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.fields.date] })] }), _jsx("div", { className: "contentful-item-price", children: itemURL
                             ? _jsxs("a", { href: itemURL, target: itemURLTarget, rel: "noreferrer", children: ["$", thisItem.fields.price, " USD"] })
-                            : "$" + thisItem.fields.price + " USD" }), _jsx("br", {}), _jsxs("div", { className: "contentful-item-addtocart", children: [_jsx(ViewItemDetails, { href: "/store", itemID: thisItem.sys.id }), _jsx(AddToCartButton, { handler: AddToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id })] })] })] }));
+                            : "$" + thisItem.fields.price + " USD" }), _jsx("br", {}), _jsxs("div", { className: "contentful-item-addtocart", children: [_jsx(ViewItemDetails, { href: "/store", itemID: thisItem.sys.id }), _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id })] })] })] }));
 }
 /* ========== CONTENTFUL ITEM HEADER ========== */
 ContentfulItemHeader.propTypes = {
@@ -156,7 +156,6 @@ ContentfulItemDetail.propTypes = {
 };
 export function ContentfulItemDetail(props) {
     const [item, setItem] = useState({});
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [assets, setAssets] = useState({});
     const [cards, setCards] = useState([]);
     const providerContentfulApiProps = usePixelatedConfig()?.contentful;
@@ -235,7 +234,7 @@ export function ContentfulItemDetail(props) {
                             ? _jsx(ContentfulItemHeader, { url: itemURL, title: thisItem.fields.title })
                             : _jsx(ContentfulItemHeader, { title: thisItem.fields.title }) }), _jsx("br", {}), _jsx("div", { className: "contentful-item-photo-carousel grid-s1-e7", children: _jsx(Carousel, { cards: cards, draggable: true, imgFit: "contain" }) }), _jsxs("div", { className: "grid-s7-e13", children: [_jsx("div", { className: "contentful-item-details grid12", children: _jsx("div", { dangerouslySetInnerHTML: { __html: thisItem.fields.description.replace(/(<br\s*\/?>\s*){2,}/gi, '') } }) }), _jsx("br", {}), _jsxs("div", { className: "contentful-item-details grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.sys.id] }), _jsxs("div", { children: [_jsx("b", { children: "UPC ID: " }), thisItem.fields.id] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.fields.quantity] }), _jsxs("div", { children: [_jsx("b", { children: "Brand / Model: " }), thisItem.fields.brand, " ", thisItem.fields.model] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.fields.date] }), _jsx("br", {})] }), _jsx("div", { className: "contentful-item-price", children: itemURL
                                     ? _jsxs("a", { href: itemURL, target: itemURLTarget, rel: "noreferrer", children: ["$", thisItem.fields.price, " USD"] })
-                                    : "$" + thisItem.fields.price + " USD" }), _jsx("br", {}), _jsx("div", { className: "contentful-item-addtocart", children: _jsx(AddToCartButton, { handler: AddToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id }) })] })] }) }));
+                                    : "$" + thisItem.fields.price + " USD" }), _jsx("br", {}), _jsx("div", { className: "contentful-item-addtocart", children: _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id }) })] })] }) }));
     }
     else {
         return (_jsx(_Fragment, { children: _jsx("div", { id: "contentful-items", className: "contentful-items", children: _jsx("div", { className: "centered", children: "Loading..." }) }) }));

package/dist/components/cms/flickr.js

@@ -41,7 +41,7 @@ function getFlickrSize(size) {
         default: return '';
     }
 }
-GetFlickrData.PropTypes = {
+GetFlickrData.propTypes = {
     flickr: PropTypes.object,
     config: PropTypes.object,
 };

package/dist/components/cms/google.reviews.components.js

@@ -22,9 +22,9 @@ export function GoogleReviewsCard(props) {
             try {
                 const result = await getGoogleReviewsByPlaceId({
                     placeId: props.placeId,
-                    language: props.language,
-                    maxReviews: props.maxReviews,
-                    proxyBase: props.proxyBase,
+                    language: props.language ?? undefined,
+                    maxReviews: props.maxReviews ?? undefined,
+                    proxyBase: props.proxyBase ?? undefined,
                     apiKey: props.apiKey || GOOGLE_MAPS_API_KEY,
                 });
                 setPlace(result.place);

package/dist/components/cms/instagram.components.js

@@ -1,8 +1,18 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import { getInstagramTiles } from './instagram.functions';
 import { Tiles } from '../carousel/tiles';
+InstagramTiles.propTypes = {
+    accessToken: PropTypes.string,
+    userId: PropTypes.string,
+    limit: PropTypes.number,
+    rowCount: PropTypes.number,
+    useThumbnails: PropTypes.bool,
+    includeVideos: PropTypes.bool,
+    includeCaptions: PropTypes.bool,
+};
 export function InstagramTiles(props) {
     const [tiles, setTiles] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -11,12 +21,12 @@ export function InstagramTiles(props) {
         (async () => {
             try {
                 const result = await getInstagramTiles({
-                    accessToken: props.accessToken,
-                    userId: props.userId,
+                    accessToken: props.accessToken ?? undefined,
+                    userId: props.userId ?? undefined,
                     limit: props.limit ?? 12,
-                    useThumbnails: props.useThumbnails,
-                    includeVideos: props.includeVideos,
-                    includeCaptions: props.includeCaptions,
+                    useThumbnails: props.useThumbnails ?? undefined,
+                    includeVideos: props.includeVideos ?? undefined,
+                    includeCaptions: props.includeCaptions ?? undefined,
                 });
                 setTiles(result);
                 setLoading(false);

package/dist/components/cms/smartimage.js

@@ -80,8 +80,8 @@ export function SmartImage(props) {
     newProps.name = safeString(name);
     newProps.title = safeString(title);
     newProps.alt = safeString(alt) ?? '';
-    newProps.width = parseNumber(width) || 500;
-    newProps.height = parseNumber(height) || 500;
+    newProps.width = parseNumber(width ?? undefined) ?? 500;
+    newProps.height = parseNumber(height ?? undefined) ?? 500;
     const filename = (newProps.src).split('/').pop()?.split('?')[0] || '';
     const imageName = filename.replace(/\.[^.]+$/, '');
     newProps.id = newProps.id || newProps.name || sanitizeString(newProps.title) || sanitizeString(newProps.alt) || sanitizeString(imageName);

package/dist/components/cms/wordpress.components.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import { usePixelatedConfig } from "../config/config.client";
 import { SmartImage } from './smartimage';
 import { PageGridItem } from '../general/semantic';
@@ -13,6 +14,13 @@ function decodeString(str) {
     textarea.innerHTML = str;
     return textarea.value;
 }
+BlogPostList.propTypes = {
+    site: PropTypes.string,
+    baseURL: PropTypes.string,
+    count: PropTypes.number,
+    posts: PropTypes.array,
+    showCategories: PropTypes.bool,
+};
 export function BlogPostList(props) {
     const { site: propSite, baseURL: propBaseURL, count, posts: cachedPosts, showCategories = true } = props;
     const config = usePixelatedConfig();
@@ -34,7 +42,12 @@ export function BlogPostList(props) {
         // Otherwise, fetch from WordPress
         ToggleLoading({ show: true });
         (async () => {
-            const data = (await getWordPressItems({ site, count, baseURL })) ?? [];
+            const params = { site };
+            if (count !== null && count !== undefined)
+                params.count = count;
+            if (baseURL !== null && baseURL !== undefined)
+                params.baseURL = baseURL;
+            const data = (await getWordPressItems(params)) ?? [];
             const sorted = data.sort((a, b) => ((a.date ?? '') < (b.date ?? '')) ? 1 : -1);
             setPosts(sorted);
             ToggleLoading({ show: false });
@@ -42,20 +55,33 @@ export function BlogPostList(props) {
     }, [site, baseURL, count, cachedPosts]);
     return (_jsxs(_Fragment, { children: [_jsx(Loading, {}), posts.map((post) => (_jsx(PageGridItem, { children: _jsx(BlogPostSummary, { ID: post.ID, title: post.title, date: post.date, excerpt: post.excerpt, URL: post.URL, categories: post.categories, featured_image: post.featured_image, showCategories: showCategories }) }, post.ID)))] }));
 }
+BlogPostSummary.propTypes = {
+    ID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    title: PropTypes.string,
+    date: PropTypes.string,
+    excerpt: PropTypes.string,
+    URL: PropTypes.string,
+    categories: PropTypes.object,
+    featured_image: PropTypes.string,
+    showCategories: PropTypes.bool,
+};
 export function BlogPostSummary(props) {
-    const myCategoryImages = Object.entries(props.categories).map(([category, index]) => [category.trim().toLowerCase().replace(/[ /]+/g, '-'), index]).sort();
+    const myCategoryImages = props.categories ? Object.entries(props.categories).map(([category, index]) => [category?.trim().toLowerCase().replace(/[ /]+/g, '-'), index]).sort() : [];
     const config = usePixelatedConfig();
-    const myExcerpt = decodeString(props.excerpt).replace(/\[…\]/g, '<a href="' + props.URL + '" target="_blank" rel="noopener noreferrer">[…]</a>');
-    return (_jsx("div", { className: "blog-post-summary", children: _jsxs("article", { className: "h-entry", children: [_jsx("h2", { className: "p-name", children: _jsx("a", { className: "u-url blog-post-url", href: props.URL, target: "_blank", rel: "noopener noreferrer", children: decodeString(props.title) }) }), _jsxs("div", { className: "dt-published", children: ["Published: ", new Date(props.date).toLocaleDateString()] }), props.featured_image ? (_jsxs("div", { className: "article-body row-12col", children: [_jsx("div", { className: "article-featured-image grid-s1-e4", children: _jsx(SmartImage, { className: "u-photo", src: props.featured_image, alt: decodeString(props.title), title: decodeString(props.title), style: {}, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }), _jsx("div", { className: "article-excerpt grid-s4-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) })] })) :
+    const myExcerpt = props.excerpt ? decodeString(props.excerpt).replace(/\[…\]/g, '<a href="' + (props.URL || '') + '" target="_blank" rel="noopener noreferrer">[…]</a>') : '';
+    return (_jsx("div", { className: "blog-post-summary", children: _jsxs("article", { className: "h-entry", children: [_jsx("h2", { className: "p-name", children: _jsx("a", { className: "u-url blog-post-url", href: props.URL || '', target: "_blank", rel: "noopener noreferrer", children: props.title ? decodeString(props.title) : '' }) }), _jsxs("div", { className: "dt-published", children: ["Published: ", props.date ? new Date(props.date).toLocaleDateString() : ''] }), props.featured_image ? (_jsxs("div", { className: "article-body row-12col", children: [_jsx("div", { className: "article-featured-image grid-s1-e4", children: _jsx(SmartImage, { className: "u-photo", src: props.featured_image, alt: props.title ? decodeString(props.title) : '', title: props.title ? decodeString(props.title) : '', style: {}, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }), _jsx("div", { className: "article-excerpt grid-s4-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) })] })) :
                     _jsx("div", { className: "article-excerpt grid-s1-e13", children: _jsx("div", { className: "p-summary", dangerouslySetInnerHTML: { __html: myExcerpt } }) }), props.showCategories !== false && (_jsxs("div", { children: ["Categories:", myCategoryImages.map(([categoryImg, index]) => (_jsx("span", { className: "p-category", children: _jsx(SmartImage, { src: `/images/icons/${categoryImg}.png`, title: String(categoryImg), alt: String(categoryImg), cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }, categoryImg + "-" + index)))] }))] }) }, props.ID));
 }
+BlogPostCategories.propTypes = {
+    categories: PropTypes.arrayOf(PropTypes.string),
+};
 export function BlogPostCategories(props) {
     if (!props.categories || props.categories.length === 0) {
         return null;
     }
-    const myCategoryImages = props.categories.map((category) => (category !== "Uncategorized")
+    const myCategoryImages = props.categories.map((category) => (category && category !== "Uncategorized")
         ? category.trim().toLowerCase().replace(/[ /]+/g, '-')
-        : undefined).sort();
+        : undefined).filter(Boolean).sort();
     const config = usePixelatedConfig();
     return (_jsxs("div", { className: "blogPostCategories", children: [_jsx("div", { children: "Categories: " }), myCategoryImages.map((categoryImg, index) => categoryImg ? (_jsx("span", { className: "p-category", children: _jsx(SmartImage, { className: "u-photo", src: `/images/icons/${categoryImg}.png`, title: String(categoryImg), alt: String(categoryImg), cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }, categoryImg + "-" + index)) : null)] }));
 }

package/dist/components/cms/yelp.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
+import PropTypes from 'prop-types';
 /*
 NOTE : development has stopped for this component
 as Yelp Base API Access costs $229 per month.
@@ -12,6 +13,10 @@ https://www.google.com/search?q=yelp+reviews+react+component&oq=yelp+reviews+rea
 https://www.reddit.com/r/nextjs/comments/16smhqa/next_js_fetching_data_from_yelp_api/
 https://helloputnam.medium.com/easiest-way-to-include-business-reviews-on-a-web-app-google-facebook-yelp-etc-de3e243bbe75
 */
+YelpReviews.propTypes = {
+    businessID: PropTypes.string.isRequired,
+    key: PropTypes.string,
+};
 export function YelpReviews(props) {
     const [reviews, setReviews] = useState([]);
     const [loading, setLoading] = useState(true);

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

@@ -1,9 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
 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.
-export async function PixelatedServerConfigProvider({ config, children, }) {
+PixelatedServerConfigProvider.propTypes = {
+    config: PropTypes.object,
+    children: PropTypes.node.isRequired,
+};
+export async function PixelatedServerConfigProvider(props) {
+    const { config, children } = props;
     const cfg = config ?? getClientOnlyPixelatedConfig();
     const mod = await import('./config.client');
     const Provider = mod.PixelatedClientConfigProvider;

package/dist/components/general/css.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function isPartialMatchInArray(searchString, array) {
     // Convert both the search string and array items to lowercase for case-insensitive matching
     const lowerCaseSearchString = searchString.toLowerCase();

package/dist/components/general/image.js

@@ -20,7 +20,6 @@
         imageObserver.observe(image);
     });
 } */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function isInViewport(el) {
     const rect = el.getBoundingClientRect();
     return (rect.top >= 0 &&

package/dist/components/general/loading.js

@@ -7,7 +7,8 @@ https://signalvnoise.com/posts/2577-loading-spinner-animation-using-css-and-webk
 https://www.andreaverlicchi.eu/blog/css-3-only-spinning-loading-animation/
 */
 /* ========== MARKDOWN ========== */
-export function Loading() {
+Loading.propTypes = {};
+export function Loading(props) {
     return (_jsx(_Fragment, { children: _jsx("div", { id: "loadingSpinner", className: "loading", children: _jsxs("div", { className: "spinner", children: [_jsx("div", { className: "bar1" }), _jsx("div", { className: "bar2" }), _jsx("div", { className: "bar3" }), _jsx("div", { className: "bar4" }), _jsx("div", { className: "bar5" }), _jsx("div", { className: "bar6" }), _jsx("div", { className: "bar7" }), _jsx("div", { className: "bar8" }), _jsx("div", { className: "bar9" }), _jsx("div", { className: "bar10" }), _jsx("div", { className: "bar11" }), _jsx("div", { className: "bar12" })] }) }) }));
 }
 ToggleLoading.propTypes = {

package/dist/components/general/microinteractions.js

@@ -29,7 +29,6 @@ export function MicroInteractions(props) {
     if (props.scrollfadeElements)
         ScrollFade(props.scrollfadeElements);
 }
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function isElementInViewport(el) {
     const rect = el.getBoundingClientRect();
     return (rect.top >= 0 &&

package/dist/components/general/modal.css

@@ -1,11 +1,9 @@
 
 .modal {
-
     position: fixed; /* Stay in place */
     z-index: 1000; /* Sit on top */
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 0;
+    left: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */

package/dist/components/general/modal.js

@@ -1,45 +1,87 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
 import './modal.css';
 /*
 https://www.w3schools.com/howto/howto_css_modals.asp
 */
-export function Modal(props) {
-    const myModalID = "myModal" + (props.modalID ?? '');
-    const myModalCloseID = "myModalClose" + (props.modalID ?? '');
+Modal.propTypes = {
+    modalContent: PropTypes.node.isRequired,
+    modalID: PropTypes.string,
+    isOpen: PropTypes.bool,
+    handleCloseEvent: PropTypes.func,
+};
+export function Modal({ modalContent, modalID, isOpen = false, handleCloseEvent }) {
+    const myModalID = "myModal" + (modalID ?? '');
+    const myModalCloseID = "myModalClose" + (modalID ?? '');
+    const modalRef = useRef(null);
     useEffect(() => {
-        const handleModalClose = (event) => {
-            event.preventDefault();
-            const myModal = document.getElementById(myModalID);
-            if (myModal) {
-                myModal.style.display = 'none';
-            }
-        };
-        const myModalClose = document.getElementById(myModalCloseID);
-        if (myModalClose) {
-            myModalClose.addEventListener('click', handleModalClose);
-        }
-        ;
-        const handleWindowOnClick = (event) => {
-            const myModal = document.getElementById(myModalID);
-            if (event.target == myModal) {
+        // Only use DOM event listeners for backward compatibility when handleCloseEvent is not provided
+        if (!handleCloseEvent) {
+            const handleModalClose = (event) => {
+                event.preventDefault();
+                const myModal = document.getElementById(myModalID);
                 if (myModal) {
-                    myModal.style.display = "none";
+                    myModal.style.display = 'none';
                 }
-                ;
-            }
-        };
-        window.addEventListener('click', handleWindowOnClick);
-        return () => {
-            window.removeEventListener('click', handleWindowOnClick);
+            };
+            const myModalClose = document.getElementById(myModalCloseID);
             if (myModalClose) {
-                myModalClose.removeEventListener('click', handleModalClose);
+                myModalClose.addEventListener('click', handleModalClose);
             }
             ;
-        };
-    }, []);
-    return (_jsx("div", { id: myModalID, className: "modal", style: { display: 'none' }, children: _jsxs("div", { className: "modal-content", children: [_jsx("span", { id: myModalCloseID, className: "modal-close", "aria-hidden": "true", children: "\u00D7" }), props.modalContent] }) }));
+            const handleWindowOnClick = (event) => {
+                const myModal = document.getElementById(myModalID);
+                if (event.target == myModal) {
+                    if (myModal) {
+                        myModal.style.display = 'none';
+                    }
+                }
+            };
+            window.addEventListener('click', handleWindowOnClick);
+            return () => {
+                window.removeEventListener('click', handleWindowOnClick);
+                if (myModalClose) {
+                    myModalClose.removeEventListener('click', handleModalClose);
+                }
+                ;
+            };
+        }
+        else {
+            // For React approach, add escape key listener
+            const handleEscape = (event) => {
+                if (event.key === 'Escape') {
+                    handleCloseEvent();
+                }
+            };
+            document.addEventListener('keydown', handleEscape);
+            return () => {
+                document.removeEventListener('keydown', handleEscape);
+            };
+        }
+    }, [myModalID, myModalCloseID, handleCloseEvent]);
+    const handleCloseClick = handleCloseEvent ? (event) => {
+        event.preventDefault();
+        handleCloseEvent();
+    } : undefined;
+    const handleCloseKeyDown = handleCloseEvent ? (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleCloseEvent();
+        }
+    } : undefined;
+    const handleModalClick = handleCloseEvent ? (event) => {
+        if (event.target === modalRef.current) {
+            handleCloseEvent();
+        }
+    } : undefined;
+    const handleModalKeyDown = handleCloseEvent ? (event) => {
+        if (event.key === 'Escape' && event.target === modalRef.current) {
+            handleCloseEvent();
+        }
+    } : undefined;
+    return (_jsx("div", { id: myModalID, className: "modal", style: { display: isOpen ? 'block' : 'none' }, ref: modalRef, onClick: handleModalClick, children: _jsxs("div", { className: "modal-content", role: "dialog", "aria-modal": "true", children: [_jsx("button", { id: myModalCloseID, className: "modal-close", "aria-label": "Close modal", onClick: handleCloseClick, onKeyDown: handleCloseKeyDown, type: "button", children: "\u00D7" }), modalContent] }) }));
 }
 export const handleModalOpen = (event, modalID) => {
     const myModalID = "myModal" + (modalID ?? '');

package/dist/components/general/sidepanel.js

@@ -3,7 +3,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+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.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onToggle: PropTypes.func,
+    position: PropTypes.oneOf([...positions]),
+    width: PropTypes.string,
+    showOverlay: PropTypes.bool,
+    showTab: PropTypes.bool,
+    tabIcon: PropTypes.node,
+    tabLabel: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
 export default function SidePanel({ isOpen, onClose, onToggle, position = 'left', width = '300px', showOverlay = true, showTab = false, tabIcon /* = "≡" */, tabLabel, children, className = '' }) {
     const portalRootRef = useRef(null);
     const wrapperRef = useRef(null);

package/dist/components/general/tab.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import PropTypes from 'prop-types';

package/dist/components/menu/menu-accordion.css

@@ -26,7 +26,7 @@
 .panelMenuButton .hamburger{
     cursor: pointer;
    	font-family: Verdana;
-	font-size: 1.5rem;
+	font-size: 1.75rem;
     color: #CCC;
 
 }

package/dist/components/menu/menu-accordion.js

@@ -4,6 +4,15 @@ import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './menu-accordion.css';
 const hamburgerIcon = "≡"; /* (U+2261) */ /* ||| */
+const menuItemShape = PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    path: PropTypes.string,
+    target: PropTypes.string,
+    routes: PropTypes.array, // Will be refined after function declaration
+    hidden: PropTypes.bool,
+});
+// Update the recursive reference after the shape is defined
+menuItemShape.routes = PropTypes.arrayOf(menuItemShape);
 function generateMenuItems({ menuData, state = "hide" }) {
     const myItems = [];
     let index = 0;
@@ -27,9 +36,8 @@ function generateMenuItems({ menuData, state = "hide" }) {
     }
     return myItems;
 }
-/* ========== MENU ========== */
 MenuAccordion.propTypes = {
-    menuItems: PropTypes.any.isRequired,
+    menuItems: PropTypes.arrayOf(menuItemShape).isRequired,
     showHidden: PropTypes.bool,
 };
 export function MenuAccordion(props) {
@@ -145,7 +153,10 @@ export function MenuAccordion(props) {
 }
 /* ========== MENU GROUP ========== */
 MenuAccordionGroup.propTypes = {
-    menuItems: PropTypes.object.isRequired,
+    menuItems: PropTypes.oneOfType([
+        menuItemShape,
+        PropTypes.arrayOf(menuItemShape)
+    ]).isRequired,
     state: PropTypes.string,
 };
 export function MenuAccordionGroup(props) {
@@ -168,7 +179,7 @@ export function MenuAccordionItem(props) {
 https://www.unclebigbay.com/blog/building-the-world-simplest-hamburger-with-html-and-css
 */
 MenuAccordionButton.propTypes = {};
-export function MenuAccordionButton() {
+export function MenuAccordionButton(props) {
     function slideMobilePanel() {
         if (typeof window !== 'undefined' && window.moveMenu) {
             window.moveMenu();