@pixelated-tech/components 3.1.6 → 3.2.0

package/dist/components/callout/callout.js

@@ -51,25 +51,26 @@ export function Callout({ variant = 'default', boxShape = "squircle", layout = "
 cloudinaryDomain,
 cloudinaryTransforms */  }) {
     const target = url && url.substring(0, 4).toLowerCase() === 'http' ? '_blank' : '_self';
-    const body = _jsxs("div", { className: "calloutBody", children: [(title) ? _jsx(CalloutHeader, { title: title, url: url, target: target }) : null, (subtitle) ? _jsx("div", { className: "calloutSubtitle", children: _jsx("h3", { children: subtitle }) }) : null, content ? _jsx("div", { className: "calloutContent", children: _jsx(_Fragment, { children: content }) }) : null, url && buttonText
+    const friendlyTitle = title ? title.toLowerCase().replace(/\s+/g, '-') : undefined;
+    const body = _jsxs("div", { className: "callout-body", children: [(title) ? _jsx(CalloutHeader, { title: title, url: url, target: target }) : null, (subtitle) ? _jsx("div", { className: "callout-subtitle", children: _jsx("h3", { children: subtitle }) }) : null, content ? _jsx("div", { className: "callout-content", children: _jsx(_Fragment, { children: content }) }) : null, url && buttonText
                 ? _jsx(CalloutButton, { title: buttonText, url: url, target: target })
                 : url && title
                     ? _jsx(CalloutButton, { title: title || "", url: url, target: target })
                     : null] });
     const config = usePixelatedConfig();
     const image = (img) ?
-        _jsx("div", { className: "calloutImage" + (imgShape ? " " + imgShape : ""), children: (url && !imgClick)
+        _jsx("div", { className: "callout-image" + (imgShape ? " " + imgShape : ""), children: (url && !imgClick)
                 ? _jsx("a", { href: url, target: target, rel: target == "_blank" ? "noopener noreferrer" : "", children: _jsx(SmartImage, { src: img, title: title ?? imgAlt ?? undefined, alt: imgAlt ?? title ?? "", aboveFold: aboveFold, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined, suppressHydrationWarning: true }) })
                 : (url && imgClick)
                     ? _jsx(SmartImage, { src: img, title: title ?? imgAlt ?? undefined, alt: imgAlt ?? title ?? "", onClick: (event) => imgClick(event, url), aboveFold: aboveFold, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined, suppressHydrationWarning: true })
                     /* <img src={img} title={title ?? imgAlt ?? undefined} alt={imgAlt ?? title ?? undefined} onClick={(event) => imgClick(event, url)} /> */
                     : _jsx(SmartImage, { src: img, title: title ?? imgAlt ?? undefined, alt: imgAlt ?? title ?? "", aboveFold: aboveFold, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined, suppressHydrationWarning: true }) }) : null;
-    return (_jsx("div", { className: "callout" +
+    return (_jsx("div", { id: friendlyTitle ? "callout-" + friendlyTitle : undefined, className: "callout" +
             (variant ? " " + variant : "") +
             ((variant === 'boxed' || variant === 'boxed grid') && boxShape ? " " + boxShape : "") +
             (layout && variant !== 'split' ? " " + layout : "") +
             (direction && layout !== 'vertical' ? " " + direction : "") +
-            (variant && (variant === 'boxed grid' || variant === 'grid') && gridColumns ? ` calloutGrid-${gridColumns.left}-${gridColumns.right}` : ''), children: (direction === "right") ? _jsxs(_Fragment, { children: [body, image] }) : _jsxs(_Fragment, { children: [image, body] }) }));
+            (variant && (variant === 'boxed grid' || variant === 'grid') && gridColumns ? ` callout-grid-${gridColumns.left}-${gridColumns.right}` : ''), children: (direction === "right") ? _jsxs(_Fragment, { children: [body, image] }) : _jsxs(_Fragment, { children: [image, body] }) }));
 }
 /* ========== CALLOUT HEADER ========== */
 CalloutHeader.propTypes = {
@@ -78,9 +79,9 @@ CalloutHeader.propTypes = {
     target: PropTypes.string
 };
 export function CalloutHeader({ title, url, target }) {
-    return (_jsx("div", { className: "calloutHeader", children: (url)
-            ? _jsx("a", { href: url, target: target ? target : "", rel: target == "_blank" ? "noopener noreferrer" : "", children: _jsx("h2", { className: "calloutTitle", children: title }) })
-            : _jsx("h2", { className: "calloutTitle", children: title }) }));
+    return (_jsx("div", { className: "callout-header", children: (url)
+            ? _jsx("a", { href: url, target: target ? target : "", rel: target == "_blank" ? "noopener noreferrer" : "", children: _jsx("h2", { className: "callout-title", children: title }) })
+            : _jsx("h2", { className: "callout-title", children: title }) }));
 }
 /* ========== CALLOUT BUTTON ========== */
 CalloutButton.propTypes = {
@@ -89,7 +90,7 @@ CalloutButton.propTypes = {
     target: PropTypes.string
 };
 export function CalloutButton({ title, url, target }) {
-    return (_jsx("div", { className: "calloutButton", children: (url)
-            ? _jsx("button", { type: "button", className: "calloutButton", children: _jsx("a", { href: url || "", target: target || "", rel: target == "_blank" ? "noopener noreferrer" : "", children: title }) })
+    return (_jsx("div", { className: "callout-button", children: (url)
+            ? _jsx("button", { type: "button", className: "callout-button", children: _jsx("a", { href: url || "", target: target || "", rel: target == "_blank" ? "noopener noreferrer" : "", children: title }) })
             : null }));
 }

package/dist/components/callout/callout.scss

@@ -22,7 +22,7 @@
     padding: 0;
 }
 
-.callout .calloutImage {
+.callout .callout-image {
     overflow: hidden;
     width: 100%;
     background-color: white;
@@ -32,41 +32,41 @@
     /* aspect-ratio: 1/1;  */
 }
 
-.callout.vertical .calloutImage {
+.callout.vertical .callout-image {
     width: 70%;
     margin: 0 auto;
     aspect-ratio: 1;
 }
 
-.callout .calloutImage a,
-.callout .calloutImage img {
+.callout .callout-image a,
+.callout .callout-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: top;
 }
 
-.callout .calloutImage.square {
+.callout .callout-image.square {
     border-radius: 0%;
 }
 
-.callout .calloutImage.bevel {
+.callout .callout-image.bevel {
     clip-path: rect(1% 98% 98% 1% round 5%);
 }
 
-.callout .calloutImage.squircle {
+.callout .callout-image.squircle {
     clip-path: rect(1% 98% 98% 1% round 25%);
 }
 
-.callout .calloutImage.round {
+.callout .callout-image.round {
     clip-path: rect(1% 98% 98% 1% round 100%);
 }
 
-.callout .calloutBody {
+.callout .callout-body {
     flex-flow: column;
 }
 
-.callout .calloutBody > * {
+.callout .callout-body > * {
     padding: 5px 20px;
 }
 
@@ -75,58 +75,58 @@
     float: unset !important; /* OVERRIDE pixelated.global.css */
 }
 
-.callout.left .calloutBody > * {
+.callout.left .callout-body > * {
     text-align: left;
     margin-left: 0;
     margin-right: auto;
 }
 
-.callout.right .calloutBody > * {
+.callout.right .callout-body > * {
     text-align: right;
     margin-right: 0;
     margin-left: auto;
 }
 
-.callout .calloutHeader {
+.callout .callout-header {
     text-align: center;
     margin: 0 auto;
 }
 
-.callout .calloutHeader a {
+.callout .callout-header a {
     --do-nothing: true;
 }
 
-.callout .calloutHeader h2 {
+.callout .callout-header h2 {
     --do-nothing: true;
 }
 
-.callout .calloutTitle {
+.callout .callout-title {
     text-align: center;
 }
 
-.callout .calloutSubtitle {
+.callout .callout-subtitle {
     text-align: left;
 }
 
-.callout.vertical .calloutSubtitle {
+.callout.vertical .callout-subtitle {
     text-align: center;
     margin: 0 auto;
 }
 
-.callout .calloutSubtitle h3 {
+.callout .callout-subtitle h3 {
     padding: 0;
     --do-nothing: true;
 }
 
-.callout .calloutContent {
+.callout .callout-content {
     --do-nothing: true;
 }
 
-.callout .calloutButton { 
+.callout .callout-button { 
     --do-nothing: true;
 }
 
-.callout .calloutButton button { 
+.callout .callout-button button { 
     display: inline-block;
     max-width: 250px;
     margin: 10px auto !important;
@@ -142,7 +142,7 @@
     /* cursor: pointer */
 }
 
-.callout .calloutButton a {
+.callout .callout-button a {
     display: inline-block;
 }
 
@@ -174,19 +174,19 @@
     border-radius: 100%;
 }
 
-.callout.boxed .calloutImage {
+.callout.boxed .callout-image {
 	clip-path: none;
     aspect-ratio: 1/1;
     background-color: white;
     width: 100% !important;
 }
 
-.callout.boxed .calloutBody { 
+.callout.boxed .callout-body { 
     --do-nothing: true;
     padding: 5px 20px;
 }
 
-.callout.boxed.vertical .calloutBody { 
+.callout.boxed.vertical .callout-body { 
     --do-nothing: true;
     padding: 20px 0px;
 }
@@ -199,11 +199,11 @@
     padding: 0px;
 }
 
-.callout.full.vertical .calloutImage {
+.callout.full.vertical .callout-image {
     width: 100%;
 }
 
-.callout.full .calloutBody > * {
+.callout.full .callout-body > * {
     padding: 5px 5px;
 }
 
@@ -218,9 +218,9 @@
 
 @for $i from 1 through 11 {
     @for $k from 1 through 11 {
-        .calloutGrid-#{$i}-#{$k} { grid-template-columns: #{$i}fr #{$k}fr; }
+        .callout-grid-#{$i}-#{$k} { grid-template-columns: #{$i}fr #{$k}fr; }
         @media screen and (max-width: 480px) {
-			.calloutGrid-#{$i}-#{$k} { grid-template-columns: 1fr; }
+			.callout-grid-#{$i}-#{$k} { grid-template-columns: 1fr; }
 		}
     }
 }
@@ -242,15 +242,15 @@
 
 }
 
-.callout.grid .calloutImage img {
-    /* duplicate of .callout .calloutImage img */
+.callout.grid .callout-image img {
+    /* duplicate of .callout .callout-image img */
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: top;
 }
 
-.callout.grid .calloutBody {
+.callout.grid .callout-body {
 	grid-auto-rows: min-content;
 }
 
@@ -264,12 +264,12 @@
     overflow: hidden;
 }
 
-.callout.overlay .calloutImage {
+.callout.overlay .callout-image {
     width: 100%;
     height: 100%;
 }
 
-.callout.overlay .calloutBody {
+.callout.overlay .callout-body {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -287,12 +287,12 @@
     padding: 0px;
 }
 
-.callout.split .calloutImage,
-.callout.split .calloutBody {
+.callout.split .callout-image,
+.callout.split .callout-body {
     flex: 1;
 }
 
-.callout.split .calloutBody > * {
+.callout.split .callout-body > * {
     padding: 5px 20px;
 }
 
@@ -312,20 +312,20 @@
     .callout.grid {
 	    grid-template-columns: 1fr;
     }
-    .callout .calloutImage { 
+    .callout .callout-image { 
         width: 70%;
         margin: 0 auto;
     }
-    .callout.full .calloutImage,
-    .callout.split .calloutImage { 
+    .callout.full .callout-image,
+    .callout.split .callout-image { 
         width: 100%;
         margin: 0 auto;
     }
-    .callout .calloutBody > * { 
+    .callout .callout-body > * { 
         margin: 0 auto !important;
         text-align: center !important;
     }
-    .callout .calloutContent  { 
+    .callout .callout-content  { 
         text-align: left !important;
     }
 } 

package/dist/components/carousel/carousel.css

@@ -2,26 +2,26 @@
 ===============  CAROUSEL   ===============
 ======================================== */
 
-.carouselContainer {
+.carousel-container {
 	height: 600px;
     background: #FFF;
     border: 1px solid #AAA;
 }
-.carouselCardsContainer {
+.carousel-cards-container {
 	height: 550px;
 	position: relative;
     overflow: hidden;
 }
 @media screen and (max-width: 480px) {
-    .carouselContainer {
+    .carousel-container {
 		height: 350px;
 	}
-	.carouselCardsContainer {
+	.carousel-cards-container {
         height: 300px;
     }
 }
 
-#carouselCardsContainer {
+#carousel-cards-container {
 	--do-nothing: true;
 }
 
@@ -36,7 +36,7 @@
 	user-select: none;
 } */
 
-.carouselCardWrapper {
+.carousel-card-wrapper {
 	display: inline-block;
 	position: absolute;
 	top: 0;
@@ -49,19 +49,19 @@
 	overflow: hidden;
 }
 
-.carouselCard {
+.carousel-card {
 	width: 100%;
 	margin: 0 auto;
 	
 }
 
-/* .carouselCard {
+/* .carousel-card {
 	width: 100%;
 	height: 100%;
     margin: 0 auto;
 } */
 
-.carouselCardHeader {
+.carousel-card-header {
 	font-size: 1.5em;
 	font-weight: bold;
 	text-align: center;
@@ -69,7 +69,7 @@
 	width: 100%;
 }
 
-.carouselCardSubHeader {
+.carousel-card-subheader {
 	font-size: 1.1em;
 	font-weight: bold;
 	text-align: center;
@@ -77,12 +77,12 @@
 	width: 100%;
 }
 
-.carouselCardBody {
+.carousel-card-body {
 	margin: 5px auto;
 	width: 90%;
 }
 
-.carouselCardImage {
+.carousel-card-image {
 	margin: 0 auto;
 	max-width: 100%;
 	max-height: 100%;
@@ -93,7 +93,7 @@
 	overflow: clip;
 }
 
-.carouselCardImage { 
+.carousel-card-image { 
 	img {
 		/* max-height: auto; 
 		max-width: 100%;
@@ -131,22 +131,24 @@
 
 }
 
-.carouselButtons {
+.carousel-buttons {
 	width: 100%;
 	height: 50px;
 	text-align: center;
 }
 
-.carouselButton {
+.carousel-button {
     font-size: 24px;
 	z-index: 900;
     padding: 5px;
 	display: inline-block;
+	border: none;
+    background-color: transparent;
 }
 
-.carouselArrow,
-.carouselArrowLeft, 
-.carouselArrowRight {
+.carousel-arrow,
+.carousel-arrow-left, 
+.carousel-arrow-right {
 	position: absolute;
     font-size: 24px;
 	top: 50%;
@@ -155,15 +157,15 @@
     padding: 5px;
 }
 
-.carouselArrowLeft {
+.carousel-arrow-left {
 	left: 0; 
 }
 
-.carouselArrowRight {
+.carousel-arrow-right {
 	right: 0;
 } 
 
-.carouselDetails {
+.carousel-details {
 	position: absolute;
 	bottom: 20px;
 	z-index: 1000;
@@ -172,7 +174,7 @@
 	text-align: center;
 }
 
-.carouselLoading {
+.carousel-loading {
     column-span: all;
 	text-align: center;
 }

package/dist/components/carousel/carousel.drag.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 /*
     if (props.draggable && props.draggable === true) {
         if (debug) console.log('CarouselSimple: Dragging enabled');
-        DragHandler(cardIndex, 'carouselCardWrapper', nextCard, previousCard);
+        DragHandler(cardIndex, 'carousel-card-wrapper', nextCard, previousCard);
     } else {
         if (debug) console.log('CarouselSimple: Dragging disabled');
     }

package/dist/components/carousel/carousel.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import PropTypes /* , { InferProps } */ from 'prop-types';
-import { DragHandler } from './carousel.drag';
-import './carousel.css';
 import { SmartImage } from '../cms/cloudinary.image';
 import { usePixelatedConfig } from '../config/config.client';
+import { DragHandler } from './carousel.drag';
+import './carousel.css';
 function capitalize(str) {
     return str && String(str[0]).toUpperCase() + String(str).slice(1);
 }
@@ -64,7 +64,7 @@ export function Carousel(props) {
             console.log('CarouselSimple: Dragging enabled');
         DragHandler({
             activeIndex: cardIndex,
-            targetDiv: 'carouselCardWrapper',
+            targetDiv: 'carousel-card-wrapper',
             nextImage: nextCard,
             previousImage: previousCard
         });
@@ -74,10 +74,10 @@ export function Carousel(props) {
             console.log('CarouselSimple: Dragging disabled');
     }
     if (props.cards && props.cards.length > 0) {
-        return (_jsxs("div", { className: "carouselContainer", children: [_jsx("div", { className: "carouselCardsContainer", 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: "carouselButtons", 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 ? 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: "carouselContainer", children: _jsx(CarouselLoading, {}) }) }));
+        return (_jsx("div", { className: 'section-container', children: _jsx("div", { className: "carousel-container", children: _jsx(CarouselLoading, {}) }) }));
     }
 }
 /* ========== CAROUSEL CARD ========== */
@@ -98,8 +98,8 @@ function CarouselCard(props) {
     }
     const imgFit = props.imgFit ? "img" + capitalize(props.imgFit) : 'imgFill';
     const config = usePixelatedConfig();
-    const cardBody = (_jsxs("div", { draggable: 'false', children: [(props.link) ? _jsx("div", { draggable: 'false', className: "carouselCardLink" }) : null, (props.image) ? _jsx("div", { draggable: 'false', className: "carouselCardImage", children: _jsx(SmartImage, { draggable: false, src: props.image, title: props?.imageAlt, alt: props?.imageAlt || "", className: imgFit, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }) : null, (props.headerText) ? _jsx("div", { draggable: 'false', className: "carouselCardHeader", children: _jsx("h3", { draggable: 'false', children: props.headerText }) }) : null, (props.subHeaderText) ? _jsx("div", { draggable: 'false', className: "carouselCardSubHeader", children: _jsx("h4", { draggable: 'false', children: props.subHeaderText }) }) : null, (props.bodyText) ? _jsx("div", { draggable: 'false', className: "carouselCardBody", children: props.bodyText }) : null] }));
-    return (_jsx("div", { draggable: 'true', id: 'c-' + props.index, className: "carouselCardWrapper", style: styles, children: _jsx("div", { draggable: 'false', className: "carouselCard", children: (props.link) ? _jsx("a", { draggable: 'false', href: props.link, target: props.linkTarget, children: cardBody }) : cardBody }) }));
+    const cardBody = (_jsxs("div", { draggable: 'false', children: [(props.link) ? _jsx("div", { draggable: 'false', className: "carousel-card-link" }) : null, (props.image) ? _jsx("div", { draggable: 'false', className: "carousel-card-image", children: _jsx(SmartImage, { draggable: false, src: props.image, title: props?.imageAlt, alt: props?.imageAlt || "", className: imgFit, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }) : null, (props.headerText) ? _jsx("div", { draggable: 'false', className: "carousel-card-header", children: _jsx("h3", { draggable: 'false', children: props.headerText }) }) : null, (props.subHeaderText) ? _jsx("div", { draggable: 'false', className: "carousel-card-subheader", children: _jsx("h4", { draggable: 'false', children: props.subHeaderText }) }) : null, (props.bodyText) ? _jsx("div", { draggable: 'false', className: "carousel-card-body", children: props.bodyText }) : null] }));
+    return (_jsx("div", { draggable: 'true', id: 'c-' + props.index, className: "carousel-card-wrapper", style: styles, children: _jsx("div", { draggable: 'false', className: "carousel-card", children: (props.link) ? _jsx("a", { draggable: 'false', href: props.link, target: props.linkTarget, children: cardBody }) : cardBody }) }));
 }
 // REMOVED PROPTYPE AS TYPESCRIPT TYPE COVERS THIS
 /* ========== CAROUSEL  ARROW ========== */
@@ -108,7 +108,7 @@ CarouselButton.propTypes = {
     glyph: PropTypes.string.isRequired
 };
 function CarouselButton(props) {
-    return (_jsx("div", { className: `carouselButton textOutline`, onClick: props.clickFunction, children: props.glyph }));
+    return (_jsx("button", { className: `carousel-button text-outline`, onClick: props.clickFunction, children: props.glyph }));
 }
 CarouselArrow.propTypes = {
     direction: PropTypes.string.isRequired,
@@ -116,9 +116,9 @@ CarouselArrow.propTypes = {
     glyph: PropTypes.string.isRequired
 };
 function CarouselArrow(props) {
-    return (_jsx("div", { className: `carouselButton${capitalize(props.direction)} textOutline`, onClick: props.clickFunction, children: props.glyph }));
+    return (_jsx("button", { className: `carousel-button${capitalize(props.direction)} text-outline`, onClick: props.clickFunction, children: props.glyph }));
 }
 /* ========== CAROUSEL LOADING ========== */
 function CarouselLoading() {
-    return (_jsx("div", { className: "carouselLoading horizontal-centered vertical-centered centered", children: _jsx("div", { children: "Loading..." }) }));
+    return (_jsx("div", { className: "carousel-loading horizontal-centered vertical-centered centered", children: _jsx("div", { children: "Loading..." }) }));
 }

package/dist/components/{tiles → carousel}/tiles.css

@@ -1,8 +1,8 @@
-.tilesContainer { 
+.tiles-container { 
     --do-nothing: true;
 }
 
-.tileContainer {
+.tile-container {
     --do-nothing: true;
 }
 
@@ -10,7 +10,7 @@
     --do-nothing: true;
 }
 
-.tileImage {
+.tile-image {
     position: relative;
     aspect-ratio: 1;
     border: 2px solid #CCC;
@@ -19,7 +19,7 @@
     margin: 10px;
 }
 
-.tileImage img {
+.tile-image img {
     width: 100%;
     height: 100% !important;
     position: relative;
@@ -28,7 +28,7 @@
     object-fit: cover;
 }
 
-.tileImageOverlay {
+.tile-image-overlay {
     visibility: hidden;
     position: absolute;
     width: 0%;
@@ -44,12 +44,12 @@
     }
 }
 
-.tileImage:hover .tileImageOverlay {
+.tile-image:hover .tile-image-overlay {
     visibility: visible;
     width: 100% !important;
 }
 
-.tileImageOverlayText {
+.tile-image-overlay-text {
     position: absolute;
     padding: 20px;
     left: 0;
@@ -62,16 +62,16 @@
     transition-delay: 0s; 
 }
 
-.tileImage:hover .tileImageOverlayText {
+.tile-image:hover .tile-image-overlay-text {
     visibility: visible;
     transition-delay: 0.25s; 
 }
 
-.tileImageOverlayTitle{
+.tile-image-overlay-title{
     margin-bottom: 10px;
 }
 
-.tileImageOverlayBody{
+.tile-image-overlay-body{
     font-size: 16px;
     font-weight: initial;
 }

package/dist/components/{tiles → carousel}/tiles.js

@@ -4,8 +4,8 @@ import PropTypes from "prop-types";
 import { Loading } from "../general/loading";
 import { SmartImage } from "../cms/cloudinary.image";
 import { usePixelatedConfig } from '../config/config.client';
-import "./tiles.css";
 import "../../css/pixelated.grid.scss";
+import "./tiles.css";
 Tiles.propTypes = {
     cards: PropTypes.object.isRequired,
     rowCount: PropTypes.number,
@@ -13,7 +13,7 @@ Tiles.propTypes = {
 export function Tiles(props) {
     const rowCount = props.rowCount ?? 2;
     if (props.cards && props.cards.length > 0) {
-        return (_jsx("div", { className: "tilesContainer", children: _jsx("div", { className: `tileContainer 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 }) }, 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: "gridItem", children: _jsx(Tile, { index: i, cardLength: props.cards.length, link: card.link, image: card.image, imageAlt: card.imageAlt, bodyText: card.bodyText }) }, i))) }) }));
     }
     else {
         return (_jsx(Loading, {}));
@@ -30,7 +30,7 @@ Tile.propTypes = {
 };
 function Tile(props) {
     const config = usePixelatedConfig();
-    const tileBody = _jsxs("div", { className: "tileImage", children: [_jsx(SmartImage, { src: props.image, title: props?.imageAlt ?? undefined, alt: props?.imageAlt ?? "", cloudinaryEnv: config?.cloudinary?.product_env ?? undefined }), _jsx("div", { className: "tileImageOverlay", children: _jsxs("div", { className: "tileImageOverlayText", children: [_jsx("div", { className: "tileImageOverlayTitle", children: props.imageAlt }), _jsx("div", { className: "tileImageOverlayBody", children: props.bodyText })] }) })] });
+    const tileBody = _jsxs("div", { className: "tile-image", children: [_jsx(SmartImage, { src: props.image, title: props?.imageAlt ?? undefined, alt: props?.imageAlt ?? "", 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 })] }) })] });
     return (_jsx("div", { className: "tile", id: 'tile-' + props.index, children: props.link ?
             _jsx("a", { href: props.link, className: "tileLink", children: tileBody })
             :