@pixelated-tech/components 3.1.6 → 3.2.0

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

@@ -9,9 +9,9 @@ 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";	
+import { SmartImage } from "./cloudinary.image";
 import "../../css/pixelated.grid.scss";
 import "./contentful.items.css";
-import { SmartImage } from "./cloudinary.image";
 const debug = false;
 let ContentfulApiProps = {
     proxyURL: 'https://proxy.pixelated.tech/prod/proxy?url=',
@@ -98,12 +98,12 @@ export function ContentfulItems(props) {
         // ToggleLoading(false);
     }, []);
     if (items.length > 0) {
-        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "contentfulItemsHeader", children: items.length === 1
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "contentful-items-header", children: items.length === 1
                         ? _jsx(ContentfulItemHeader, { title: `${items.length} Featured Item` })
-                        : _jsx(ContentfulItemHeader, { title: `${items.length} Featured Items` }) }), _jsx("div", { id: "contentfulItems", className: "contentfulItems", children: paintItems({ items: items, assets: assets, cloudinaryProductEnv: props.cloudinaryProductEnv }) })] }));
+                        : _jsx(ContentfulItemHeader, { title: `${items.length} Featured Items` }) }), _jsx("div", { id: "contentful-items", className: "contentful-items", children: paintItems({ items: items, assets: assets, cloudinaryProductEnv: props.cloudinaryProductEnv }) })] }));
     }
     else {
-        return (_jsx("div", { id: "contentfulItems", className: "contentfulItems" }));
+        return (_jsx("div", { id: "contentful-items", className: "contentful-items" }));
     }
 }
 /* ========== CONTENTFUL LIST ITEM ========== */
@@ -129,13 +129,13 @@ export function ContentfulListItem(props) {
     const config = usePixelatedConfig();
     const imgComponent = _jsx(SmartImage, { src: itemImage, title: thisItem.fields.title, alt: thisItem.fields.title, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined });
     // <img src={itemImage} title={thisItem.fields.title} alt={thisItem.fields.title} />
-    return (_jsxs("div", { className: "contentfulItem row-12col", children: [_jsx("div", { className: "contentfulItemPhoto grid-s1-e5", children: itemURL
+    return (_jsxs("div", { className: "contentful-item row-12col", children: [_jsx("div", { className: "contentful-item-photo grid-s1-e5", children: itemURL
                     ? _jsx("a", { href: itemURL, target: itemURLTarget, rel: "noopener noreferrer", children: imgComponent })
-                    : (imgComponent) }), _jsxs("div", { className: "contentfulItemBody grid-s5-e13", children: [_jsx("div", { className: "contentfulItemHeader", children: itemURL
+                    : (imgComponent) }), _jsxs("div", { className: "contentful-item-body grid-s5-e13", children: [_jsx("div", { className: "contentful-item-header", children: itemURL
                             ? _jsx(ContentfulItemHeader, { url: itemURL, target: itemURLTarget, title: thisItem.fields.title })
-                            : _jsx(ContentfulItemHeader, { title: thisItem.fields.title }) }), _jsxs("div", { className: "contentfulItemDetails 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: "contentfulItemPrice", children: itemURL
+                            : _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: "contentfulItemAddToCart", 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-itemAddToCart", children: [_jsx(ViewItemDetails, { href: "/store", itemID: thisItem.sys.id }), _jsx(AddToCartButton, { handler: AddToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id })] })] })] }));
 }
 /* ========== CONTENTFUL ITEM HEADER ========== */
 ContentfulItemHeader.propTypes = {
@@ -231,13 +231,13 @@ export function ContentfulItemDetail(props) {
             itemCost: thisItem.fields.price,
         };
         shoppingCartItem.itemURL = itemURL;
-        return (_jsx(_Fragment, { children: _jsxs("div", { className: "contentfulItem row-12col", children: [_jsx("div", { className: "contentfulItemHeader grid-s1-e13", children: itemURL
+        return (_jsx(_Fragment, { children: _jsxs("div", { className: "contentful-item row-12col", children: [_jsx("div", { className: "contentful-item-header grid-s1-e13", children: itemURL
                             ? _jsx(ContentfulItemHeader, { url: itemURL, title: thisItem.fields.title })
-                            : _jsx(ContentfulItemHeader, { title: thisItem.fields.title }) }), _jsx("br", {}), _jsx("div", { className: "contentfulItemPhotoCarousel grid-s1-e7", children: _jsx(Carousel, { cards: cards, draggable: true, imgFit: "contain" }) }), _jsxs("div", { className: "grid-s7-e13", children: [_jsx("div", { className: "contentfulItemDetails grid12", children: _jsx("div", { dangerouslySetInnerHTML: { __html: thisItem.fields.description.replace(/(<br\s*\/?>\s*){2,}/gi, '') } }) }), _jsx("br", {}), _jsxs("div", { className: "contentfulItemDetails 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: "contentfulItemPrice", children: itemURL
+                            : _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: "contentfulItemAddToCart", children: _jsx(AddToCartButton, { handler: AddToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id }) })] })] }) }));
+                                    : "$" + thisItem.fields.price + " USD" }), _jsx("br", {}), _jsx("div", { className: "contentful-itemAddToCart", children: _jsx(AddToCartButton, { handler: AddToShoppingCart, item: shoppingCartItem, itemID: thisItem.sys.id }) })] })] }) }));
     }
     else {
-        return (_jsx(_Fragment, { children: _jsx("div", { id: "contentfulItems", className: "contentfulItems", children: _jsx("div", { className: "centered", children: "Loading..." }) }) }));
+        return (_jsx(_Fragment, { children: _jsx("div", { id: "contentful-items", className: "contentful-items", children: _jsx("div", { className: "centered", children: "Loading..." }) }) }));
     }
 }

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

@@ -2,29 +2,29 @@
 =========    CONTENTFUL ITEMS     =========
 ======================================== */
 
-.contentfulItems {
+.contentful-items {
     text-align: center;
 }
 
 @media screen and (max-width: 480px) {
-	.contentfulItems {
+	.contentful-items {
 		padding: 20px;
 	}
 }
 
-.contentfulItemsHeader {
+.contentful-items-header {
     font-size: 1.25em;
     font-weight: bold;
     text-align: center;
 }
 
-#contentfulItemsFilter {
+#contentful-items-filter {
     font-size: 0.8em;
     margin: 20px auto;
 }
 
 @media screen and (max-width: 480px) {
-    #contentfulItemsFilter {
+    #contentful-items-filter {
         text-align: left;
     }
 	.filterInput { 
@@ -32,90 +32,90 @@
     }
 }
 
-.contentfulItem {
+.contentful-item {
     border: 1px solid #DDD;
     text-align: left;
     padding: 20px 5px !important;
 }
 
 @media screen and (max-width: 480px) {
-	.contentfulItem {
+	.contentful-item {
 		text-align: center;
 	}
 }
 
-.contentfulItemBody {
+.contentful-item-body {
     grid-auto-rows: min-content;
     margin: 10px 0;
 }
 
-.contentfulItemHeader {
+.contentful-item-header {
     margin: 0 auto;
 }
 
-.contentfulItemHeader h2 {
+.contentful-item-header h2 {
     font-size: 1.25em;
     font-weight: bold;
 }
 
 /* ===== PHOTO CAROUSEL ON CONTENTFUL ITEM DETAIL PAGE ===== */
-.contentfulItemPhotoCarousel {
+.contentful-item-photo-carousel {
     width: 100%;
     height: 400px;
 }
 
-.contentfulItemPhotoCarousel { 
+.contentful-item-photo-carousel { 
 
-    .carouselContainer {
+    .carousel-container {
         background: none;
         border: none;
         height: 400px;
     }
 
-    .carouselCardsContainer {
+    .carousel-cards-container {
         height: 100%;
     }
 
-    .carouselButtons,
-    .carouselButton {
+    .carousel-buttons,
+    .carousel-button {
         display: inline-block;
     }
 
 }
 
 @media screen and (max-width: 480px) {
-	.contentfulItemPhotoCarousel {
+	.contentful-item-photo-carousel {
         height: 350px;
     }
-    .contentfulItemPhotoCarousel .carouselContainer {
+    .contentful-item-photo-carousel .carousel-container {
         height: 300px;
     }
 }
 
-.contentfulItemPhoto {
+.contentful-item-photo {
     overflow: hidden;
 }
 
-.contentfulItemPhoto img {
+.contentful-item-photo img {
     padding: 10px 0;
     width: 100%;
 }
 
-.contentfulItems .contentfulItemDetails {
+.contentful-items .contentful-item-details {
     display: none;
 }
 
-.contentfulItemDetails {
+.contentful-item-details {
     padding-bottom: 10px;
 }
 
 @media screen and (max-width: 480px) {
-	.contentfulItemDetails {
+	.contentful-item-details {
         text-align: left;
     }
 }
 
-.contentfulItemPrice{
+.contentful-item-price {
     font-size: 1.5em;
     font-weight: bold;
     /* background-image: url(/images/pix/pix-bg-sm-bw.gif); */

package/dist/components/cms/gravatar.components.js

@@ -1,7 +1,89 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+// import { type GravatarProfile } from './gravatar.functions';
 import { SmartImage } from './cloudinary.image';
 import { usePixelatedConfig } from '../config/config.client';
+/* export type GravatarCardProps = {
+    // Gravatar profile data (fetched server-side)
+    profile?: GravatarProfile | null;
+    // Field overrides (if provided, these override profile data)
+    displayName?: string;
+    thumbnailUrl?: string;
+    aboutMe?: string;
+    currentLocation?: string;
+    job_title?: string;
+    company?: string;
+    pronouns?: string;
+    profileUrl?: string;
+    // Additional custom fields not in Gravatar
+    customRole?: string; // Alternative to job_title
+    socialLinks?: {
+        github?: string;
+        linkedin?: string;
+        twitter?: string;
+        instagram?: string;
+        website?: string;
+    };
+    // Layout options
+    layout?: 'horizontal' | 'vertical';
+    direction?: 'left' | 'right'; // photo position (for horizontal layout)
+    avatarSize?: number; // in pixels
+    compact?: boolean; // compact variant
+}; */
+GravatarCard.propTypes = {
+    // Gravatar profile data (fetched server-side)
+    profile: PropTypes.shape({
+        hash: PropTypes.string,
+        requestHash: PropTypes.string,
+        profileUrl: PropTypes.string,
+        preferredUsername: PropTypes.string,
+        thumbnailUrl: PropTypes.string,
+        displayName: PropTypes.string,
+        pronouns: PropTypes.string,
+        aboutMe: PropTypes.string,
+        currentLocation: PropTypes.string,
+        job_title: PropTypes.string,
+        company: PropTypes.string,
+        accounts: PropTypes.arrayOf(PropTypes.shape({
+            domain: PropTypes.string,
+            display: PropTypes.string,
+            url: PropTypes.string,
+            iconUrl: PropTypes.string,
+            username: PropTypes.string,
+            verified: PropTypes.bool,
+            name: PropTypes.string,
+            shortname: PropTypes.string,
+        })),
+        emails: PropTypes.arrayOf(PropTypes.shape({
+            primary: PropTypes.string,
+            value: PropTypes.string,
+        })),
+    }),
+    // Field overrides (if provided, these override profile data)
+    displayName: PropTypes.string,
+    thumbnailUrl: PropTypes.string,
+    aboutMe: PropTypes.string,
+    currentLocation: PropTypes.string,
+    job_title: PropTypes.string,
+    company: PropTypes.string,
+    pronouns: PropTypes.string,
+    profileUrl: PropTypes.string,
+    // Additional custom fields not in Gravatar
+    customRole: PropTypes.string, // Alternative to job_title
+    socialLinks: PropTypes.shape({
+        github: PropTypes.string,
+        linkedin: PropTypes.string,
+        twitter: PropTypes.string,
+        instagram: PropTypes.string,
+        website: PropTypes.string,
+    }),
+    // Layout options
+    layout: PropTypes.oneOf(['horizontal', 'vertical']),
+    direction: PropTypes.oneOf(['left', 'right']), // photo position (for horizontal layout)
+    avatarSize: PropTypes.number, // in pixels
+    compact: PropTypes.bool, // compact variant
+};
 export function GravatarCard(props) {
     const { profile, layout = 'horizontal', direction = 'left', avatarSize = 120, compact = false, } = props;
     // Merge: prop overrides take precedence over Gravatar data
@@ -14,15 +96,15 @@ export function GravatarCard(props) {
     const pronouns = props.pronouns ?? profile?.pronouns;
     const profileLink = props.profileUrl ?? profile?.profileUrl;
     // Social links: props override, fallback to Gravatar accounts
-    const githubUrl = props.socialLinks?.github ?? profile?.accounts?.find((a) => a.shortname === 'github')?.url;
-    const linkedinUrl = props.socialLinks?.linkedin ?? profile?.accounts?.find((a) => a.shortname === 'linkedin')?.url;
-    const twitterUrl = props.socialLinks?.twitter ?? profile?.accounts?.find((a) => a.shortname === 'twitter')?.url;
-    const instagramUrl = props.socialLinks?.instagram ?? profile?.accounts?.find((a) => a.shortname === 'instagram')?.url;
+    const githubUrl = props.socialLinks?.github ?? profile?.accounts?.find((a) => a && a.shortname === 'github')?.url;
+    const linkedinUrl = props.socialLinks?.linkedin ?? profile?.accounts?.find((a) => a && a.shortname === 'linkedin')?.url;
+    const twitterUrl = props.socialLinks?.twitter ?? profile?.accounts?.find((a) => a && a.shortname === 'twitter')?.url;
+    const instagramUrl = props.socialLinks?.instagram ?? profile?.accounts?.find((a) => a && a.shortname === 'instagram')?.url;
     const websiteUrl = props.socialLinks?.website;
     const isHorizontal = layout === 'horizontal';
     const photoOnRight = direction === 'right';
     const config = usePixelatedConfig();
-    const avatarElement = (_jsx("div", { style: { flexShrink: 0 }, children: _jsx(SmartImage, { src: avatarUrl, alt: displayName, title: displayName, width: avatarSize, height: avatarSize, style: {
+    const avatarElement = (_jsx("div", { style: { flexShrink: 0 }, children: _jsx(SmartImage, { src: avatarUrl, alt: displayName, title: displayName, width: avatarSize ?? 120, height: avatarSize ?? 120, style: {
                 borderRadius: '50%',
                 objectFit: 'cover',
                 display: 'block',

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { getInstagramTiles } from './instagram.functions';
-import { Tiles } from '../tiles/tiles';
+import { Tiles } from '../carousel/tiles';
 export function InstagramTiles(props) {
     const [tiles, setTiles] = useState([]);
     const [loading, setLoading] = useState(true);

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import { usePixelatedConfig } from "../config/config.client";
 import { SmartImage } from './cloudinary.image';
-import { GridItem } from '../general/layout';
+import { PageGridItem } from '../general/semantic';
 import { getWordPressItems } from './wordpress.functions';
 import { Loading, ToggleLoading } from '../general/loading';
 import "./wordpress.css";
@@ -26,13 +26,13 @@ export function BlogPostList(props) {
             ToggleLoading({ show: false });
         })();
     }, [site, count]);
-    return (_jsxs(_Fragment, { children: [_jsx(Loading, {}), posts.map((post) => (_jsx(GridItem, { 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 }) }, post.ID)))] }));
+    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 }) }, post.ID)))] }));
 }
 export function BlogPostSummary(props) {
     const myCategoryImages = 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: "blogPostSummary", 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: { borderRadius: '20px' }, 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 } }) })] })) :
+    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: { borderRadius: '20px' }, 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 } }) }), _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));
 }
 export function BlogPostCategories(props) {

package/dist/components/cms/wordpress.css

@@ -2,7 +2,7 @@
 /* https://microformats.org/wiki/h-entry */
 
 
-.blogPostSummary { 
+.blog-post-summary { 
     border: 1px solid #ccc;
     margin: 10px; 
     padding: 20px; 
@@ -16,7 +16,7 @@
     border-radius: 25px;
 }
 
-.blogPostSummary { 
+.blog-post-summary { 
 
     article {
         .p-name { --do-nothing: true; }
@@ -46,7 +46,7 @@
 
 }
 
-    .blogPostSummary .p-category img,
+    .blog-post-summary .p-category img,
     .blogPostCategories .p-category img { 
         width: 30px;
         height: 30px;

package/dist/components/general/microinteractions.css

@@ -10,7 +10,7 @@
 body.buttonring {
   button,
   .button,
-  .centeredbutton {
+  .centered-button {
     /* ALSO USE CLASS = BUTTON */
     outline: 0px solid transparent !important; /* Initial transparent outline */
     outline-offset: 3px; /* Optional: Adjusts the distance of the outline from the border */
@@ -19,7 +19,7 @@ body.buttonring {
   }
   button:hover,
   .button:hover,
-  .centeredbutton:hover {
+  .centered-button:hover {
     outline-width: 5px !important; /* Outline animates out 5px */
     outline-color: #369 !important; /* Or a different color for the outline */
   }
@@ -146,7 +146,7 @@ body.imgtwist {
 
 /* 
 /* ========== SIMPLE MENU BUTTON LEFT FILL HOVER ==========
-.menuItem a:before {
+.menu-item a:before {
   position: absolute;
   content: "";
   top: 0;
@@ -157,12 +157,12 @@ body.imgtwist {
   transition: all .25s;
   z-index: -1;
 }
-.menuItem a:hover {
+.menu-item a:hover {
   border-left: 0px solid transparent !important;
   text-indent: 0px !important;
   color: #fff;
 }
-.menuItem a:hover:before {
+.menu-item a:hover:before {
   width: 100%;
 }
 */
@@ -171,10 +171,10 @@ body.imgtwist {
 
 
 /* ========== SIMPLE MENU BUTTON CENTER FILL HOVER ========== */
-body.simplemenubutton .menu .menuItem {
+body.simplemenubutton .menu .menu-item {
   	--do-nothing: true;
 }
-body.simplemenubutton .menu .menuItem {
+body.simplemenubutton .menu .menu-item {
 	a {
 		text-align: center;
 		position: relative;

package/dist/components/general/modal.css

@@ -14,7 +14,7 @@
   }
   
   /* Modal Content/Box */
-  .modalContent {
+  .modal-content {
     background-color: #fefefe;
     margin: 15% auto; /* 15% from the top and centered */
     padding: 20px;
@@ -24,12 +24,12 @@
     position: relative;
   }
 
-  .modalContent img {
+  .modal-content img {
     border: 2px solid #aaa;
   }
   
   /* The Close Button */
-  .modalClose {
+  .modal-close {
     color: #aaa;
     font-size: 28px;
     line-height: 26px;
@@ -49,8 +49,8 @@
     z-index: 10;
   }
   
-  .modalClose:hover,
-  .modalClose:focus {
+  .modal-close:hover,
+  .modal-close:focus {
     color: black;
     text-decoration: none;
     cursor: pointer;

package/dist/components/general/modal.js

@@ -39,7 +39,7 @@ export function Modal(props) {
             ;
         };
     }, []);
-    return (_jsx("div", { id: myModalID, className: "modal", style: { display: 'none' }, children: _jsxs("div", { className: "modalContent", children: [_jsx("span", { id: myModalCloseID, className: "modalClose", "aria-hidden": "true", children: "\u00D7" }), props.modalContent] }) }));
+    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] }) }));
 }
 export const handleModalOpen = (event, modalID) => {
     const myModalID = "myModal" + (modalID ?? '');