@pixelated-tech/components 3.13.0 → 3.13.2

package/dist/components/general/sidepanel.css

@@ -110,7 +110,7 @@
 .sidepanel-tab-label { display: none; }
 
 /* Integration overrides for MenuAccordion inside SidePanel */
-.sidepanel-content .accordionMenuWrapper {
+.sidepanel-content .accordion-menu-wrapper {
 	position: relative !important;
 	top: auto !important;
 	left: auto !important;
@@ -123,7 +123,7 @@
 }
 
 /* Ensure the inner list takes full width */
-.sidepanel-content .accordionMenu,
-.sidepanel-content .accordionMenu ul {
+.sidepanel-content .accordion-menu,
+.sidepanel-content .accordion-menu ul {
 	width: 100% !important;
 }

package/dist/components/general/skeleton.css

@@ -8,18 +8,18 @@
   min-height: 0;
 }
 
-.skeleton--animated {
+.skeleton-animated {
   animation: pulse 1.5s ease-in-out infinite;
 }
 
-.skeleton--avatar {
+.skeleton-avatar {
   width: 3rem;
   height: 3rem;
   border-radius: 9999px;
   display: inline-block;
 }
 
-.skeleton--rect {
+.skeleton-rect {
   display: block;
   width: 100%;
   height: 160px;
@@ -44,5 +44,5 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .skeleton--animated { animation: none }
+  .skeleton-animated { animation: none }
 }

package/dist/components/general/skeleton.js

@@ -24,13 +24,13 @@ Skeleton.propTypes = {
     animated: PropTypes.bool,
 };
 export function Skeleton({ variant = 'text', lines = 1, width, height, animated = true, }) {
-    const base = `skeleton ${animated ? 'skeleton--animated' : ''}`;
+    const base = `skeleton ${animated ? 'skeleton-animated' : ''}`;
     if (variant === 'avatar') {
         const avatarStyle = width != null || height != null ? { ...(width != null ? { width } : {}), ...(height != null ? { height } : {}) } : undefined;
-        return _jsx("div", { "aria-hidden": "true", className: `${base} skeleton--avatar`, style: avatarStyle });
+        return _jsx("div", { "aria-hidden": "true", className: `${base} skeleton-avatar`, style: avatarStyle });
     }
     if (variant === 'rect') {
-        return (_jsx("div", { "aria-hidden": "true", className: `${base} skeleton--rect`, style: { width: width ?? '100%', height: height ?? 160 } }));
+        return (_jsx("div", { "aria-hidden": "true", className: `${base} skeleton-rect`, style: { width: width ?? '100%', height: height ?? 160 } }));
     }
     return (_jsx("div", { "aria-hidden": "true", className: "skeleton-text", children: Array.from({ length: Math.max(1, Number(lines || 1)) }).map((_, i) => (_jsx("div", { className: base + ' skeleton-line', style: { width: typeof width === 'number' ? `${width}%` : (width ?? (i === (lines || 1) - 1 ? '60%' : '100%')) } }, i))) }));
 }

package/dist/components/general/styleguide.js

@@ -24,8 +24,8 @@ export function StyleGuideUI(props) {
         const bodyFonts = getComputedStyle(document.documentElement).getPropertyValue("--body-font").trim();
         primaryBodyFont = bodyFonts.split(',')[0].replaceAll('"', '').replaceAll("'", '');
     }
-    return (_jsxs(_Fragment, { children: [_jsx(PageTitleHeader, { title: "Style Guide" }), _jsxs(PageSection, { columns: 1, maxWidth: "1024px", padding: "20px", id: "colors-section", children: [_jsx("h2", { children: "Color Palette" }), _jsxs("div", { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' }, children: [_jsx("div", { style: { backgroundColor: 'var(--primary-color)', color: '#fff' }, className: "colorSwatch", children: "Primary Color" }), _jsx("div", { style: { backgroundColor: 'var(--secondary-color)' }, className: "colorSwatch", children: "Secondary Color" }), _jsx("div", { style: { backgroundColor: 'var(--accent1-color)' }, className: "colorSwatch", children: "Accent 1 Color" }), _jsx("div", { style: { backgroundColor: 'var(--accent2-color)' }, className: "colorSwatch", children: "Accent 2 Color" }), _jsx("div", { style: { backgroundColor: 'var(--bg-color)' }, className: "colorSwatch", children: "Background Color" }), _jsx("div", { style: { backgroundColor: 'var(--text-color)' }, className: "colorSwatch", children: "Text Color" })] })] }), _jsx("style", { children: `
-			.colorSwatch {
+    return (_jsxs(_Fragment, { children: [_jsx(PageTitleHeader, { title: "Style Guide" }), _jsxs(PageSection, { columns: 1, maxWidth: "1024px", padding: "20px", id: "colors-section", children: [_jsx("h2", { children: "Color Palette" }), _jsxs("div", { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' }, children: [_jsx("div", { style: { backgroundColor: 'var(--primary-color)', color: '#fff' }, className: "color-swatch", children: "Primary Color" }), _jsx("div", { style: { backgroundColor: 'var(--secondary-color)' }, className: "color-swatch", children: "Secondary Color" }), _jsx("div", { style: { backgroundColor: 'var(--accent1-color)' }, className: "color-swatch", children: "Accent 1 Color" }), _jsx("div", { style: { backgroundColor: 'var(--accent2-color)' }, className: "color-swatch", children: "Accent 2 Color" }), _jsx("div", { style: { backgroundColor: 'var(--bg-color)' }, className: "color-swatch", children: "Background Color" }), _jsx("div", { style: { backgroundColor: 'var(--text-color)' }, className: "color-swatch", children: "Text Color" })] })] }), _jsx("style", { children: `
+			.color-swatch {
 				color: #000; 
 				border: 1px solid #ccc; 
 				padding: 10px; 

package/dist/components/general/table.css

@@ -1,13 +1,13 @@
-table.pixTable, .pixTable th, .pixTable tr, .pixTable td {
+table.pix-table, .pix-table th, .pix-table tr, .pix-table td {
 	border : 1px solid #ccc ;
 	text-align: left;
 }
 
-table.pixTable {
+table.pix-table {
 	width: 100%
 }
 
-table.pixTable {
+table.pix-table {
 	th {
 		text-transform: uppercase;
 		font-size: 1.2em;
@@ -60,14 +60,14 @@ dialog {
 }
 
 
-.sortArrow {
+.sort-arrow {
 	display: inline-block;
 	margin-left: 5px;
 	font-size: 0.8em;
 }
-.sortArrow.asc::before {
+.sort-arrow.asc::before {
 	content: '▲'; /* Up arrow for ascending */
 }
-.sortArrow.desc::before {
+.sort-arrow.desc::before {
 	content: '▼'; /* Down arrow for descending */
 }

package/dist/components/general/table.js

@@ -38,7 +38,7 @@ export function Table(props) {
     function getHeadings(data) {
         const headings = Object.keys(data[0]).map((key, i) => {
             return (props.sortable && props.sortable == true)
-                ? _jsxs("th", { onClick: () => { sortTable(key); }, children: [_jsx("span", { children: key }), " ", _jsx("span", { className: "sortArrow" })] }, i)
+                ? _jsxs("th", { onClick: () => { sortTable(key); }, children: [_jsx("span", { children: key }), " ", _jsx("span", { className: "sort-arrow" })] }, i)
                 : _jsx("th", { children: _jsx("span", { children: key }) }, i);
         });
         return _jsx("tr", { children: headings });
@@ -96,7 +96,7 @@ export function Table(props) {
         return (myHeader);
     }
     function getDirection(header) {
-        const arrow = header.querySelector('.sortArrow');
+        const arrow = header.querySelector('.sort-arrow');
         let oldDirection = '';
         if (arrow) {
             const oldClassList = arrow.classList;
@@ -113,7 +113,7 @@ export function Table(props) {
         const table = document.getElementById(props.id);
         const headers = table.querySelectorAll('th');
         headers.forEach(header => {
-            const arrow = header.querySelector('.sortArrow');
+            const arrow = header.querySelector('.sort-arrow');
             if (arrow) {
                 arrow.classList.remove('asc', 'desc');
             }
@@ -121,7 +121,7 @@ export function Table(props) {
     }
     function updateArrow(column, oldDirection) {
         const header = getHeader(column);
-        const arrow = header.querySelector('.sortArrow');
+        const arrow = header.querySelector('.sort-arrow');
         if (arrow) {
             if (oldDirection == 'asc') {
                 arrow.classList.add('desc');
@@ -146,6 +146,6 @@ export function Table(props) {
             updateArrow(column, oldDirection);
         }
     }
-    return (_jsx("div", { children: _jsxs("table", { id: props.id ?? undefined, className: "pixTable", children: [_jsx("thead", { children: getHeadings(tableData) }), _jsx("tbody", { children: getRows(tableData) })] }) }));
+    return (_jsx("div", { children: _jsxs("table", { id: props.id ?? undefined, className: "pix-table", children: [_jsx("thead", { children: getHeadings(tableData) }), _jsx("tbody", { children: getRows(tableData) })] }) }));
 }
 ;

package/dist/components/general/tiles.js

@@ -1,3 +1,4 @@
+/* eslint-disable pixelated/class-name-kebab-case */
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
@@ -32,7 +33,7 @@ Tiles.propTypes = {
 export function Tiles(props) {
     const rowCount = props.rowCount ?? 2;
     if (props.cards && props.cards.length > 0) {
-        return (_jsx("div", { className: "tiles-container", children: _jsx("div", { className: `tile-container row-${rowCount}col`, children: props.cards.map((card, i) => (_jsx("div", { className: "gridItem", children: _jsx(Tile, { index: i, cardLength: props.cards.length, link: card.link, image: card.image, imageAlt: card.imageAlt, bodyText: card.bodyText, imgClick: props.imgClick, variant: (props.variant ?? "overlay") }) }, i))) }) }));
+        return (_jsx("div", { className: "tiles-container", children: _jsx("div", { className: `tile-container row-${rowCount}col`, children: props.cards.map((card, i) => (_jsx("div", { className: "grid-item", children: _jsx(Tile, { index: i, cardLength: props.cards.length, link: card.link, image: card.image, imageAlt: card.imageAlt, bodyText: card.bodyText, imgClick: props.imgClick, variant: (props.variant ?? "overlay") }) }, i))) }) }));
     }
     else {
         return (_jsx(Loading, {}));
@@ -76,7 +77,7 @@ function Tile(props) {
     const tileBody = _jsxs("div", { className: "tile-image" + (imgClick ? " clickable" : ""), children: [_jsx(SmartImage, { src: props.image, title: props?.imageAlt ?? undefined, alt: props?.imageAlt ?? "", onClick: imgClick ? (event) => imgClick(event, props.image) : undefined, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined }), _jsx("div", { className: "tile-image-overlay", children: _jsxs("div", { className: "tile-image-overlay-text", children: [_jsx("div", { className: "tile-image-overlay-title", children: props.imageAlt }), _jsx("div", { className: "tile-image-overlay-body", children: props.bodyText })] }) })] });
     const rootClass = `tile${(props.variant) ? ' ' + props.variant : ''}`;
     return (_jsx("div", { className: rootClass, id: 'tile-' + props.index, children: props.link ?
-            _jsx("a", { href: props.link, className: "tileLink", children: tileBody })
+            _jsx("a", { href: props.link, className: "tile-link", children: tileBody })
             :
                 tileBody }));
 }

package/dist/components/integrations/socialcard.css

@@ -39,7 +39,7 @@
 }
 
 
-.masonryItem { /* Masonry bricks or child elements */
+.masonry-item { /* Masonry bricks or child elements */
     display: inline-block;
     padding: 5px;
     width: 100%;
@@ -76,7 +76,7 @@
 	white-space: normal;
 }
 
-.cardTitle {
+.card-title {
 	background-color: #EEE;
 	/* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
 	border-bottom: 1px solid #999;
@@ -88,7 +88,7 @@
 /* .cardTitle a {
 } */
 
-.cardIcon {
+.card-icon {
 	background: #FFF;
 	border: 0;
 	height: 20px;
@@ -97,7 +97,7 @@
 	margin: 0px 5px 0px 0px;
 }
 
-.cardDate {
+.card-date {
 	background-color: #DDD;
 	border-top: 1px solid #999;
 	font-size: 0.8em;
@@ -105,14 +105,14 @@
 	text-align: right;
 }
 
-.cardBody {
+.card-body {
 	background-color: #fff;
 	display: inline-block;
 	padding: 5px;
 	width: 100%;
 }
 
-.cardsLoading {
+.cards-loading {
     column-span: all;
 	text-align: center;
 }

package/dist/components/integrations/socialcard.js

@@ -312,7 +312,7 @@ SocialCard.propTypes = {
 };
 export function SocialCard(props) {
     const config = usePixelatedConfig();
-    return (_jsx("div", { className: "masonryItem", children: _jsxs("div", { className: "card", children: [_jsx("div", { className: "cardTitle", children: _jsxs("a", { href: props.card.link, target: "_blank", rel: "noopener noreferrer", children: [_jsx(SmartImage, { className: "cardIcon", src: props.iconSrc, title: props.iconSrcAlt, alt: props.iconSrcAlt, cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms }), props.card.title] }) }), _jsx("div", { className: "cardBody", dangerouslySetInnerHTML: { __html: removeDeadHrefs(props.card.description) } }), _jsx("div", { className: "cardDate", children: props.card.pubDate })] }) }, props.card.guid));
+    return (_jsx("div", { className: "masonry-item", children: _jsxs("div", { className: "card", children: [_jsx("div", { className: "card-title", children: _jsxs("a", { href: props.card.link, target: "_blank", rel: "noopener noreferrer", children: [_jsx(SmartImage, { className: "card-icon", src: props.iconSrc, title: props.iconSrcAlt, alt: props.iconSrcAlt, cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms }), props.card.title] }) }), _jsx("div", { className: "card-body", dangerouslySetInnerHTML: { __html: removeDeadHrefs(props.card.description) } }), _jsx("div", { className: "card-date", children: props.card.pubDate })] }) }, props.card.guid));
 }
 /* ========== SPINNER ========== */
 /** SocialCardsLoading.propTypes — No props (simple loading indicator).
@@ -320,5 +320,5 @@ export function SocialCard(props) {
  */
 SocialCardsLoading.propTypes = { /** no props */};
 export function SocialCardsLoading() {
-    return (_jsx("div", { className: "cardsLoading", children: _jsx("div", { children: "Loading..." }) }));
+    return (_jsx("div", { className: "cards-loading", children: _jsx("div", { children: "Loading..." }) }));
 }

package/dist/components/integrations/wordpress.components.js

@@ -123,5 +123,5 @@ export function BlogPostCategories(props) {
         ? category.trim().toLowerCase().replace(/[ /]+/g, '-')
         : 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)] }));
+    return (_jsxs("div", { className: "blog-post-categories", 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/integrations/wordpress.css

@@ -9,7 +9,7 @@
     border-radius: 25px;
 }
 
-.blogPostCategories { 
+.blog-post-categories { 
     /* border: 1px solid #ccc; */
     margin: 10px; 
     padding: 20px; 
@@ -54,7 +54,7 @@
 }
 
     .blog-post-summary .p-category img,
-    .blogPostCategories .p-category img { 
+    .blog-post-categories .p-category img { 
         width: 30px;
         height: 30px;
         margin: 0 5px;

package/dist/components/shoppingcart/ebay.components.js

@@ -98,10 +98,10 @@ export function EbayItems(props) {
         ToggleLoading(false);
     }, []);
     if (items && items.length > 0) {
-        return (_jsxs(_Fragment, { children: [_jsx(Loading, {}), _jsx("div", { className: "ebayItemsHeader", children: _jsx(EbayItemHeader, { title: `${items.length} Store Items` }) }), _jsx("div", { className: "ebayItemsHeader", children: _jsx(EbayListFilter, { aspects: aspects, callback: fetchItems }) }), _jsx("div", { id: "ebayItems", className: "ebayItems", children: paintItems({ items: items, cloudinaryProductEnv: props.cloudinaryProductEnv }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Loading, {}), _jsx("div", { className: "ebay-items-header", children: _jsx(EbayItemHeader, { title: `${items.length} Store Items` }) }), _jsx("div", { className: "ebay-items-header", children: _jsx(EbayListFilter, { aspects: aspects, callback: fetchItems }) }), _jsx("div", { id: "ebay-items", className: "ebay-items", children: paintItems({ items: items, cloudinaryProductEnv: props.cloudinaryProductEnv }) })] }));
     }
     else {
-        return (_jsx("div", { className: "section-container", children: _jsx("div", { id: "ebayItems", className: "ebayItems", children: _jsx(Loading, {}) }) }));
+        return (_jsx("div", { className: "section-container", children: _jsx("div", { id: "ebay-items", className: "ebay-items", children: _jsx(Loading, {}) }) }));
     }
 }
 /**
@@ -154,7 +154,7 @@ export function EbayListFilter(props) {
             props.callback({ aspectName: aspectName.value, aspectValue: aspectValue.value });
         }
     }
-    return (_jsxs("form", { name: "ebayItemsFilter", id: "ebayItemsFilter", children: [_jsxs("span", { className: "filterInput", children: [_jsx("label", { htmlFor: "aspectName", children: "Aspect:" }), _jsxs("select", { id: "aspectName", onChange: onAspectNameChange, children: [_jsx("option", { value: "" }), aspectNames.map((aspectName, index) => _jsx("option", { value: aspectName, children: aspectName }, index))] })] }), _jsxs("span", { className: "filterInput", children: [_jsx("label", { htmlFor: "aspectValue", onChange: onAspectValueChange, children: "Value:" }), _jsx("select", { id: "aspectValue", children: _jsx("option", { value: "" }) })] }), _jsx("span", { className: "filterInput", children: _jsx("button", { type: "button", onClick: handleAspectFilter, children: "Filter" }) })] }));
+    return (_jsxs("form", { name: "ebay-items-filter", id: "ebay-items-filter", children: [_jsxs("span", { className: "filter-input", children: [_jsx("label", { htmlFor: "aspectName", children: "Aspect:" }), _jsxs("select", { id: "aspectName", onChange: onAspectNameChange, children: [_jsx("option", { value: "" }), aspectNames.map((aspectName, index) => _jsx("option", { value: aspectName, children: aspectName }, index))] })] }), _jsxs("span", { className: "filter-input", children: [_jsx("label", { htmlFor: "aspectValue", onChange: onAspectValueChange, children: "Value:" }), _jsx("select", { id: "aspectValue", children: _jsx("option", { value: "" }) })] }), _jsx("span", { className: "filter-input", children: _jsx("button", { type: "button", onClick: handleAspectFilter, children: "Filter" }) })] }));
 }
 /**
  * EbayListItem — Render a single eBay item with thumbnail, metadata and add-to-cart actions.
@@ -185,13 +185,13 @@ export function EbayListItem(props) {
     shoppingCartItem.itemURL = itemURL;
     const config = usePixelatedConfig();
     const itemImageComponent = _jsx(SmartImage, { src: itemImage, title: thisItem.title, alt: thisItem.title, cloudinaryEnv: props.cloudinaryProductEnv ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined });
-    return (_jsxs("div", { className: "ebayItem row-12col", children: [_jsx("div", { className: "ebayItemPhoto grid-s1-e5", children: itemURL
+    return (_jsxs("div", { className: "ebay-item row-12col", children: [_jsx("div", { className: "ebay-item-photo grid-s1-e5", children: itemURL
                     ? _jsx("a", { href: itemURL, target: itemURLTarget, rel: "noopener noreferrer", children: itemImageComponent })
-                    : (itemImageComponent) }), _jsxs("div", { className: "ebayItemBody grid-s5-e13", children: [_jsx("div", { className: "ebayItemHeader", children: itemURL
+                    : (itemImageComponent) }), _jsxs("div", { className: "ebay-item-body grid-s5-e13", children: [_jsx("div", { className: "ebay-item-header", children: itemURL
                             ? _jsx(EbayItemHeader, { url: itemURL, target: itemURLTarget, title: thisItem.title })
-                            : _jsx(EbayItemHeader, { title: thisItem.title }) }), _jsxs("div", { className: "ebayItemDetails grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.legacyItemId] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.categories[0].categoryId == apiProps.itemCategory ? 1 : 10] }), _jsxs("div", { children: [_jsx("b", { children: "Condition: " }), thisItem.condition] }), _jsxs("div", { children: [_jsx("b", { children: "Seller: " }), thisItem.seller.username, " (", thisItem.seller.feedbackScore, ")", _jsx("br", {}), thisItem.seller.feedbackPercentage, "% positive"] }), _jsxs("div", { children: [_jsx("b", { children: "Buying Options: " }), thisItem.buyingOptions[0]] }), _jsxs("div", { children: [_jsx("b", { children: "Location: " }), thisItem.itemLocation.postalCode + ", " + thisItem.itemLocation.country] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.itemCreationDate] })] }), _jsx("div", { className: "ebayItemPrice", children: itemURL
+                            : _jsx(EbayItemHeader, { title: thisItem.title }) }), _jsxs("div", { className: "ebay-item-details grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.legacyItemId] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.categories[0].categoryId == apiProps.itemCategory ? 1 : 10] }), _jsxs("div", { children: [_jsx("b", { children: "Condition: " }), thisItem.condition] }), _jsxs("div", { children: [_jsx("b", { children: "Seller: " }), thisItem.seller.username, " (", thisItem.seller.feedbackScore, ")", _jsx("br", {}), thisItem.seller.feedbackPercentage, "% positive"] }), _jsxs("div", { children: [_jsx("b", { children: "Buying Options: " }), thisItem.buyingOptions[0]] }), _jsxs("div", { children: [_jsx("b", { children: "Location: " }), thisItem.itemLocation.postalCode + ", " + thisItem.itemLocation.country] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.itemCreationDate] })] }), _jsx("div", { className: "ebay-item-price", children: itemURL
                             ? _jsxs("a", { href: itemURL, target: itemURLTarget, rel: "noreferrer", children: ["$", thisItem.price.value + " " + thisItem.price.currency] })
-                            : "$" + thisItem.price.value + " " + thisItem.price.currency }), _jsx("br", {}), _jsxs("div", { className: "ebayItemAddToCart", children: [_jsx(ViewItemDetails, { href: "/store", itemID: thisItem.legacyItemId }), _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.legacyItemId })] })] })] }));
+                            : "$" + thisItem.price.value + " " + thisItem.price.currency }), _jsx("br", {}), _jsxs("div", { className: "ebay-item-add-to-cart", children: [_jsx(ViewItemDetails, { href: "/store", itemID: thisItem.legacyItemId }), _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.legacyItemId })] })] })] }));
 }
 /**
  * EbayItemHeader — Render a heading for an eBay item; optionally wrap in a link when a `url` is provided.
@@ -260,14 +260,14 @@ export function EbayItemDetail(props) {
         const itemURLTarget = "_self"; /* "_blank" */
         const shoppingCartItem = getShoppingCartItem({ thisItem: thisItem, cloudinaryProductEnv: props.cloudinaryProductEnv, apiProps: apiProps });
         shoppingCartItem.itemURL = itemURL;
-        return (_jsx(_Fragment, { children: _jsxs("div", { className: "ebayItem row-12col", children: [_jsx("div", { className: "ebayItemHeader grid-s1-e13", children: itemURL
+        return (_jsx(_Fragment, { children: _jsxs("div", { className: "ebay-item row-12col", children: [_jsx("div", { className: "ebay-item-header grid-s1-e13", children: itemURL
                             ? _jsx(EbayItemHeader, { url: itemURL, title: thisItem.title })
-                            : _jsx(EbayItemHeader, { title: thisItem.title }) }), _jsx("br", {}), _jsx("div", { className: "ebayItemPhotoCarousel grid-s1-e7", children: _jsx(Carousel, { cards: images, draggable: true, imgFit: "contain" }) }), _jsxs("div", { className: "grid-s7-e13", children: [_jsx("div", { className: "ebayItemDetails grid12", children: _jsx("div", { dangerouslySetInnerHTML: { __html: thisItem.description.replace(/(<br\s*\/?>\s*){2,}/gi, '') } }) }), _jsx("br", {}), _jsxs("div", { className: "ebayItemDetails grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.legacyItemId] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.categoryId == apiProps.itemCategory ? 1 : 10] }), _jsxs("div", { children: [_jsx("b", { children: "Category: " }), thisItem.categoryPath] }), _jsxs("div", { children: [_jsx("b", { children: "Condition: " }), thisItem.condition] }), _jsxs("div", { children: [_jsx("b", { children: "Seller: " }), thisItem.seller.username, " (", thisItem.seller.feedbackScore, ")", _jsx("br", {}), thisItem.seller.feedbackPercentage, "% positive"] }), _jsxs("div", { children: [_jsx("b", { children: "Buying Options: " }), thisItem.buyingOptions[0]] }), _jsxs("div", { children: [_jsx("b", { children: "Location: " }), thisItem.itemLocation.city + ", " + thisItem.itemLocation.stateOrProvince] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.itemCreationDate] }), _jsx("br", {})] }), _jsx("div", { className: "ebayItemPrice", children: itemURL
+                            : _jsx(EbayItemHeader, { title: thisItem.title }) }), _jsx("br", {}), _jsx("div", { className: "ebay-item-photo-carousel grid-s1-e7", children: _jsx(Carousel, { cards: images, draggable: true, imgFit: "contain" }) }), _jsxs("div", { className: "grid-s7-e13", children: [_jsx("div", { className: "ebay-item-details grid12", children: _jsx("div", { dangerouslySetInnerHTML: { __html: thisItem.description.replace(/(<br\s*\/?>\s*){2,}/gi, '') } }) }), _jsx("br", {}), _jsxs("div", { className: "ebay-item-details grid12", children: [_jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.legacyItemId] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.categoryId == apiProps.itemCategory ? 1 : 10] }), _jsxs("div", { children: [_jsx("b", { children: "Category: " }), thisItem.categoryPath] }), _jsxs("div", { children: [_jsx("b", { children: "Condition: " }), thisItem.condition] }), _jsxs("div", { children: [_jsx("b", { children: "Seller: " }), thisItem.seller.username, " (", thisItem.seller.feedbackScore, ")", _jsx("br", {}), thisItem.seller.feedbackPercentage, "% positive"] }), _jsxs("div", { children: [_jsx("b", { children: "Buying Options: " }), thisItem.buyingOptions[0]] }), _jsxs("div", { children: [_jsx("b", { children: "Location: " }), thisItem.itemLocation.city + ", " + thisItem.itemLocation.stateOrProvince] }), _jsxs("div", { children: [_jsx("b", { children: "Listing Date: " }), thisItem.itemCreationDate] }), _jsx("br", {})] }), _jsx("div", { className: "ebay-item-price", children: itemURL
                                     ? _jsxs("a", { href: itemURL, target: itemURLTarget, rel: "noreferrer", children: ["$", thisItem.price.value + " " + thisItem.price.currency] })
-                                    : "$" + thisItem.price.value + " " + thisItem.price.currency }), _jsx("br", {}), _jsx("div", { className: "ebayItemAddToCart", children: _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.legacyItemId }) })] })] }) }));
+                                    : "$" + thisItem.price.value + " " + thisItem.price.currency }), _jsx("br", {}), _jsx("div", { className: "ebay-item-add-to-cart", children: _jsx(AddToCartButton, { handler: addToShoppingCart, item: shoppingCartItem, itemID: thisItem.legacyItemId }) })] })] }) }));
     }
     else {
-        return (_jsx(_Fragment, { children: _jsx("div", { id: "ebayItems", className: "ebayItems", children: _jsx("div", { className: "centered", children: "Loading..." }) }) }));
+        return (_jsx(_Fragment, { children: _jsx("div", { id: "ebay-items", className: "ebay-items", children: _jsx("div", { className: "centered", children: "Loading..." }) }) }));
     }
 }
 /* ========== EBAY RATE LIMITS VISUALIZER ========== */

package/dist/components/shoppingcart/ebay.css

@@ -2,23 +2,23 @@
 ===============    EBAY     ===============
 ======================================== */
 
-.ebayItems {
+.ebay-items {
     text-align: center;
 }
 
 @media screen and (max-width: 480px) {
-	.ebayItems {
+	.ebay-items {
 		padding: 20px;
 	}
 }
 
-.ebayItemsHeader {
+.ebay-items-header {
     font-size: 1.25em;
     font-weight: bold;
     text-align: center;
 }
 
-#ebayItemsFilter {
+#ebay-items-filter {
     font-size: 0.8em;
     margin: 20px auto;
 }
@@ -27,44 +27,44 @@
     #ebayItemsFilter {
         text-align: left;
     }
-	.filterInput { 
+	.filter-input { 
         display: block;
     }
 }
 
-.ebayItem {
+.ebay-item {
     border: 1px solid #DDD;
     text-align: left;
     padding: 20px 5px !important;
 }
 
 @media screen and (max-width: 480px) {
-	.ebayItem {
+	.ebay-item {
 		text-align: center;
 	}
 }
 
-.ebayItemBody {
+.ebay-item-body {
     grid-auto-rows: min-content;
     margin: 10px 0;
 }
 
-.ebayItemHeader {
+.ebay-item-header {
     margin: 0 auto;
 }
 
-.ebayItemHeader h2 {
+.ebay-item-header h2 {
     font-size: 1.25em;
     font-weight: bold;
 }
 
 /* ===== PHOTO CAROUSEL ON EBAY ITEM DETAIL PAGE ===== */
-.ebayItemPhotoCarousel {
+.ebay-item-photo-carousel {
     width: 100%;
     height: 400px;
 }
 
-.ebayItemPhotoCarousel { 
+.ebay-item-photo-carousel { 
 
     .carousel-container {
         background: none;
@@ -84,38 +84,38 @@
 }
 
 @media screen and (max-width: 480px) {
-	.ebayItemPhotoCarousel {
+	.ebay-item-photo-carousel {
         height: 350px;
     }
-    .ebayItemPhotoCarousel .carousel-container {
+    .ebay-item-photo-carousel .carousel-container {
         height: 300px;
     }
 }
 
-.ebayItemPhoto {
+.ebay-item-photo {
     overflow: hidden;
 }
 
-.ebayItemPhoto img {
+.ebay-item-photo img {
     padding: 10px 0;
     width: 100%;
 }
 
-.ebayItems .ebayItemDetails {
+.ebay-items .ebay-item-details {
     display: none;
 }
 
-.ebayItemDetails {
+.ebay-item-details {
     padding-bottom: 10px;
 }
 
 @media screen and (max-width: 480px) {
-	.ebayItemDetails {
+	.ebay-item-details {
         text-align: left;
     }
 }
 
-.ebayItemPrice{
+.ebay-item-price{
     font-size: 1.5em;
     font-weight: bold;
     /* background-image: url(/images/pix/pix-bg-sm-bw.gif); */

package/dist/components/shoppingcart/shoppingcart.components.js

@@ -157,20 +157,20 @@ export function ShoppingCart(props) {
             console.log("SendMail Response:", sendMailResponse);
         // ========== THANK YOU ==========
         const pmt = orderData.purchase_units[0].payments.captures[0];
-        return (_jsxs("div", { className: "pixCart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), _jsx("br", {}), _jsx("div", { id: "paypal-button-container", className: "paypal-button-container" }), _jsxs("div", { children: [_jsx("h3", { children: "Thank you for your payment!" }), "Payment ID : ", pmt.id, " ", _jsx("br", {}), "Status : ", pmt.status, " ", _jsx("br", {}), "Amount : $", pmt.amount.value + " " + pmt.amount.currency_code, " ", _jsx("br", {}), "Created : ", pmt.create_time, " ", _jsx("br", {})] })] }));
+        return (_jsxs("div", { className: "pix-cart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), _jsx("br", {}), _jsx("div", { id: "paypal-button-container", className: "paypal-button-container" }), _jsxs("div", { children: [_jsx("h3", { children: "Thank you for your payment!" }), "Payment ID : ", pmt.id, " ", _jsx("br", {}), "Status : ", pmt.status, " ", _jsx("br", {}), "Amount : $", pmt.amount.value + " " + pmt.amount.currency_code, " ", _jsx("br", {}), "Created : ", pmt.create_time, " ", _jsx("br", {})] })] }));
     }
     else if (progressStep === "Checkout") {
         // ========== CHECKOUT ==========
-        return (_jsxs("div", { className: "pixCart", children: [_jsx(CalloutHeader, { title: "Checkout Summary : " }), checkoutData && _jsx(CheckoutItems, { ...checkoutData }), _jsx("br", {}), _jsx(FormButton, { className: "pixCartButton", type: "button", id: "backToCart", text: "<= Back To Cart", onClick: () => SetProgressStep("ShippingInfo") }), _jsx("br", {}), payPalClientID && (_jsx(PayPal, { payPalClientID: payPalClientID, checkoutData: getCheckoutData(), onApprove: handleOnApprove }))] }));
+        return (_jsxs("div", { className: "pix-cart", children: [_jsx(CalloutHeader, { title: "Checkout Summary : " }), checkoutData && _jsx(CheckoutItems, { ...checkoutData }), _jsx("br", {}), _jsx(FormButton, { className: "pix-cart-button", type: "button", id: "backToCart", text: "<= Back To Cart", onClick: () => SetProgressStep("ShippingInfo") }), _jsx("br", {}), payPalClientID && (_jsx(PayPal, { payPalClientID: payPalClientID, checkoutData: getCheckoutData(), onApprove: handleOnApprove }))] }));
     }
     else if (progressStep === "ShippingInfo") {
         // ========== SHOPPING CART ==========
         // ========== SHIPPING INFO ==========
-        return (_jsxs("div", { className: "pixCart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), paintCartItems(shoppingCart ?? []), _jsx("br", {}), _jsx("div", { children: _jsx(FormButton, { className: "pixCartButton", type: "button", id: "backToCart", text: "Clear Cart", onClick: () => clearShoppingCart() }) }), _jsx("br", {}), _jsx("br", {}), _jsx("hr", {}), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { children: [_jsx(CalloutHeader, { title: "Shipping To : " }), _jsx(FormEngine, { name: "address_to", id: "address_to", formData: shippingToData, onSubmitHandler: onShippingSubmit })] })] }));
+        return (_jsxs("div", { className: "pix-cart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), paintCartItems(shoppingCart ?? []), _jsx("br", {}), _jsx("div", { children: _jsx(FormButton, { className: "pix-cart-button", type: "button", id: "backToCart", text: "Clear Cart", onClick: () => clearShoppingCart() }) }), _jsx("br", {}), _jsx("br", {}), _jsx("hr", {}), _jsx("br", {}), _jsx("br", {}), _jsxs("div", { children: [_jsx(CalloutHeader, { title: "Shipping To : " }), _jsx(FormEngine, { name: "address_to", id: "address_to", formData: shippingToData, onSubmitHandler: onShippingSubmit })] })] }));
     }
     else {
         // ========== EMPTY SHOPPING CART ==========
-        return (_jsxs("div", { className: "pixCart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), _jsx("br", {}), _jsx("div", { className: "centered", children: "No items in your shopping cart" }), _jsx("div", { id: "paypal-button-container", className: "paypal-button-container" })] }));
+        return (_jsxs("div", { className: "pix-cart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), _jsx("br", {}), _jsx("div", { className: "centered", children: "No items in your shopping cart" }), _jsx("div", { id: "paypal-button-container", className: "paypal-button-container" })] }));
     }
 }
 /**
@@ -205,13 +205,13 @@ export function ShoppingCartItem(props) {
     const thisItem = props.item;
     const thisItemTarget = "_self"; // "_blank"
     const config = usePixelatedConfig();
-    return (_jsxs("div", { className: "pixCartItem row-12col", children: [_jsx("div", { className: "pixCartItemPhoto grid-s1-e4", children: thisItem.itemURL && thisItem.itemImageURL
+    return (_jsxs("div", { className: "pix-cart-item row-12col", children: [_jsx("div", { className: "pix-cart-item-photo grid-s1-e4", children: thisItem.itemURL && thisItem.itemImageURL
                     ? _jsx("a", { href: thisItem.itemURL, target: thisItemTarget, rel: "noopener noreferrer", children: _jsx(SmartImage, { src: thisItem.itemImageURL, alt: thisItem.itemTitle, cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms }) })
                     : thisItem.itemImageURL
                         ? (_jsx(SmartImage, { src: thisItem.itemImageURL, title: thisItem.itemTitle, alt: thisItem.itemTitle, cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms }))
-                        : _jsx(_Fragment, {}) }), _jsxs("div", { className: "grid-s4-e11", children: [_jsx("div", { className: "pixCartItemHeader", children: _jsx("span", { children: thisItem.itemURL
+                        : _jsx(_Fragment, {}) }), _jsxs("div", { className: "grid-s4-e11", children: [_jsx("div", { className: "pix-cart-item-header", children: _jsx("span", { children: thisItem.itemURL
                                 ? _jsx("a", { href: thisItem.itemURL, target: thisItemTarget, rel: "noopener noreferrer", children: _jsx("h2", { className: "", children: thisItem.itemTitle }) })
-                                : _jsx("h2", { className: "", children: thisItem.itemTitle }) }) }), _jsxs("div", { className: "pixCartItemDetails grid12", children: [_jsx("br", {}), _jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.itemID] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.itemQuantity] }), _jsx("br", {}), _jsx("div", { children: _jsx(FormButton, { className: "pixCartButton", type: "button", id: `btn-rm-${thisItem.itemID}`, text: "Remove Item From Cart", onClick: () => removeFromShoppingCart(thisItem) }) })] })] }), _jsx("div", { className: "grid-s11-e13", children: _jsx("div", { className: "pixCartItemPrice", children: formatAsUSD(thisItem.itemCost) }) })] }));
+                                : _jsx("h2", { className: "", children: thisItem.itemTitle }) }) }), _jsxs("div", { className: "pix-cart-item-details grid12", children: [_jsx("br", {}), _jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.itemID] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.itemQuantity] }), _jsx("br", {}), _jsx("div", { children: _jsx(FormButton, { className: "pix-cart-button", type: "button", id: `btn-rm-${thisItem.itemID}`, text: "Remove Item From Cart", onClick: () => removeFromShoppingCart(thisItem) }) })] })] }), _jsx("div", { className: "grid-s11-e13", children: _jsx("div", { className: "pix-cart-item-price", children: formatAsUSD(thisItem.itemCost) }) })] }));
 }
 /**
  * CheckoutItems — Display a checkout summary with itemized lines and shipping information.
@@ -338,7 +338,7 @@ export function CartButton(props) {
             MicroInteractions({ cartpulse: false });
         }
     }, [cartCount]);
-    return (_jsx("div", { className: "pixCart", children: _jsxs("button", { className: "pixCartButton", type: "button", id: "pixCartButton", onClick: () => window.location.href = props.href, children: [_jsx(SmartImage, { src: "/images/icons/cart-icon.png", title: "View Shopping Cart", alt: "View Shopping Cart", cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms }), _jsxs("span", { children: ["\u00A0", `(${cartCount})`] })] }) }));
+    return (_jsx("div", { className: "pix-cart", children: _jsxs("button", { className: "pix-cart-button", type: "button", id: "pix-cart-button", onClick: () => window.location.href = props.href, children: [_jsx(SmartImage, { src: "/images/icons/cart-icon.png", title: "View Shopping Cart", alt: "View Shopping Cart", cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms }), _jsxs("span", { children: ["\u00A0", `(${cartCount})`] })] }) }));
 }
 /**
  * ViewItemDetails — Button to navigate to an item detail page for a given item ID.
@@ -353,7 +353,7 @@ ViewItemDetails.propTypes = {
     itemID: PropTypes.string.isRequired,
 };
 export function ViewItemDetails(props) {
-    return (_jsx("div", { children: _jsx(FormButton, { className: "pixCartButton", type: "button", id: `btn-item-${props.itemID}`, text: "View Item Details", onClick: () => window.location.href = `${props.href}/${props.itemID}` }) }));
+    return (_jsx("div", { children: _jsx(FormButton, { className: "pix-cart-button", type: "button", id: `btn-item-${props.itemID}`, text: "View Item Details", onClick: () => window.location.href = `${props.href}/${props.itemID}` }) }));
 }
 /**
  * AddToCartButton — Button that adds an item to the shopping cart and displays a confirmation modal.
@@ -380,7 +380,7 @@ export function AddToCartButton(props) {
         props.handler(props.item);
         handleModalOpen(e.nativeEvent, "-" + props.itemID);
     }
-    return (_jsxs("div", { children: [_jsx(FormButton, { className: "pixCartButton", type: "button", id: `btn-add-${props.itemID}`, text: "Add to Shopping Cart", onClick: (e) => handleClick(e) }), modalContent && _jsx(Modal, { modalContent: modalContent, modalID: "-" + props.itemID })] }));
+    return (_jsxs("div", { children: [_jsx(FormButton, { className: "pix-cart-button", type: "button", id: `btn-add-${props.itemID}`, text: "Add to Shopping Cart", onClick: (e) => handleClick(e) }), modalContent && _jsx(Modal, { modalContent: modalContent, modalID: "-" + props.itemID })] }));
 }
 /**
  * GoToCartButton — Button that navigates the user to the shopping cart page.
@@ -395,5 +395,5 @@ GoToCartButton.propTypes = {
     itemID: PropTypes.string.isRequired,
 };
 export function GoToCartButton(props) {
-    return (_jsx("div", { children: _jsx(FormButton, { className: "pixCartButton", type: "button", id: `btn-cart-${props.itemID}`, text: "Go to Shopping Cart", onClick: () => window.location.href = props.href }) }));
+    return (_jsx("div", { children: _jsx(FormButton, { className: "pix-cart-button", type: "button", id: `btn-cart-${props.itemID}`, text: "Go to Shopping Cart", onClick: () => window.location.href = props.href }) }));
 }