@q2devel/q2-storybook 1.0.196 → 1.0.197

package/dist/components/Base/blog-builder/BlogBuilder.d.ts

@@ -17,6 +17,14 @@ interface BlogBuilderProps {
     emptyState?: ReactNode;
     /** Hide the meta row (date + tags) when empty. */
     hideMetaIfEmpty?: boolean;
+    classNames?: {
+        container?: string;
+        heading?: string;
+        meta?: string;
+        tags?: string;
+        content?: string;
+        skeleton?: string;
+    };
 }
-export declare const BlogBuilder: ({ post, contentType, createdText, textClassName, tags: propTags, tagUrls, skeleton, emptyState, hideMetaIfEmpty, }: BlogBuilderProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const BlogBuilder: ({ post, contentType, createdText, textClassName, tags: propTags, tagUrls, skeleton, emptyState, hideMetaIfEmpty, classNames, }: BlogBuilderProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Base/blog-builder/BlogBuilder.js

@@ -6,8 +6,9 @@ import Heading from '../heading/Heading';
 import { VideoParagraph } from './video-paragraph/VideoParagraph';
 import { CarouselParagraph } from './carousel-paragraph/CarouselParagraph';
 import { formatDate } from '../../../utils/generalHelperFunction';
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
 const SkeletonLine = ({ className = '' }) => (_jsx("div", { className: `animate-pulse rounded bg-gray-200 ${className}` }));
-export const BlogBuilder = ({ post, contentType = 'l-text-r-image', createdText = 'Publikováno:', textClassName = '', tags: propTags, tagUrls, skeleton = false, emptyState = null, hideMetaIfEmpty = true, }) => {
+export const BlogBuilder = ({ post, contentType = 'l-text-r-image', createdText = 'Publikováno:', textClassName = '', tags: propTags, tagUrls, skeleton = false, emptyState = null, hideMetaIfEmpty = true, classNames, }) => {
     // Normalize fields so the component never explodes if post is missing/partial.
     const title = post?.title ?? '';
     const body = post?.body ?? '';
@@ -75,7 +76,7 @@ export const BlogBuilder = ({ post, contentType = 'l-text-r-image', createdText
         const baseClass = 'inline-block px-3 py-1 text-sm rounded-full transition-colors';
         const neutralClass = 'bg-gray-100 text-gray-700';
         const hoverable = 'hover:bg-gray-200 cursor-pointer';
-        return (_jsx("div", { className: "flex flex-wrap items-center gap-2", children: tags.map((tag, idx) => {
+        return (_jsx("div", { className: buildClassesByJoining("flex flex-wrap items-center gap-2", classNames?.tags), children: tags.map((tag, idx) => {
                 const href = tagUrls?.[tag];
                 return href ? (_jsx("a", { href: href, className: `${baseClass} ${neutralClass} ${hoverable}`, "aria-label": `Zobrazit články s tagem ${tag}`, children: tag }, `${tag}-${idx}`)) : (_jsx("span", { className: `${baseClass} ${neutralClass}`, children: tag }, `${tag}-${idx}`));
             }) }));
@@ -84,5 +85,5 @@ export const BlogBuilder = ({ post, contentType = 'l-text-r-image', createdText
     if (!post && !skeleton) {
         return emptyState ? _jsx(_Fragment, { children: emptyState }) : null;
     }
-    return (_jsxs("div", { className: "mx-auto max-w-2xl lg:mx-0 lg:max-w-none", children: [skeleton ? (_jsx(SkeletonLine, { className: "h-8 w-4/5 mb-2" })) : (_jsx(Heading, { level: 1, className: "label", children: title })), (!hideMetaIfEmpty || hasMeta || skeleton) && (_jsxs("div", { className: "mb-6 space-y-3", children: [skeleton ? (_jsx(SkeletonLine, { className: "h-4 w-40" })) : created ? (_jsxs("p", { className: "text-sm text-gray-500", children: [createdText, " ", formatDate(created)] })) : null, renderTags()] })), renderContent()] }));
+    return (_jsxs("div", { className: buildClassesByJoining("mx-auto max-w-2xl lg:mx-0 lg:max-w-none", classNames?.container), children: [skeleton ? (_jsx(SkeletonLine, { className: buildClassesByJoining("h-8 w-4/5 mb-2", classNames?.skeleton) })) : (_jsx(Heading, { level: 1, className: buildClassesByJoining("label", classNames?.heading), children: title })), (!hideMetaIfEmpty || hasMeta || skeleton) && (_jsxs("div", { className: buildClassesByJoining("mb-6 space-y-3", classNames?.meta), children: [skeleton ? (_jsx(SkeletonLine, { className: "h-4 w-40" })) : created ? (_jsxs("p", { className: "text-sm text-gray-500", children: [createdText, " ", formatDate(created)] })) : null, renderTags()] })), renderContent()] }));
 };

package/dist/components/Base/blog-builder/text-and-media-paragraph/TextAndMediaParagraph.d.ts

@@ -8,6 +8,11 @@ type TextAndMediaParagraphProps = {
     };
     mediaPosition: 'left' | 'right';
     textClassName?: string;
+    classNames?: {
+        container?: string;
+        textColumn?: string;
+        mediaColumn?: string;
+    };
 };
-export declare const TextAndMediaParagraph: ({ content, mediaPosition, textClassName, }: TextAndMediaParagraphProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextAndMediaParagraph: ({ content, mediaPosition, textClassName, classNames, }: TextAndMediaParagraphProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Base/blog-builder/text-and-media-paragraph/TextAndMediaParagraph.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import HTMLReactParser from 'html-react-parser/lib/index';
 import { getYoutubeEmbedUrl } from '../../../../utils/Helper';
-import classNames from 'classnames';
-export const TextAndMediaParagraph = ({ content, mediaPosition, textClassName = 'mt-8', }) => {
+import cn from 'classnames';
+import { buildClassesByJoining } from '../../../../utils/StyleHelper';
+export const TextAndMediaParagraph = ({ content, mediaPosition, textClassName = 'mt-8', classNames, }) => {
     const hasVideo = content.videoLink && content.videoLink.trim() !== '';
     const hasImage = content.image && content.image.trim() !== '';
     const renderMedia = () => {
@@ -16,5 +17,5 @@ export const TextAndMediaParagraph = ({ content, mediaPosition, textClassName =
             return (_jsx("div", { className: "flex items-center justify-center h-48 bg-gray-100 text-gray-500", children: "No media content" }));
         }
     };
-    return (_jsxs("div", { className: "mt-10 grid max-w-xl grid-cols-1 gap-8 text-base/7 text-gray-700 lg:max-w-none lg:grid-cols-2 items-start", children: [_jsx("div", { className: classNames('[&_a]:underline [&_a]:text-[var(--primary)] [&_a:hover]:text-[var(--accent)] [&_a]:transition-colors [&_a]:duration-200', mediaPosition === 'right' ? 'lg:order-1' : 'lg:order-2', textClassName), children: HTMLReactParser(content.text) }), _jsx("div", { className: mediaPosition === 'right' ? 'lg:order-2' : 'lg:order-1', children: renderMedia() })] }));
+    return (_jsxs("div", { className: buildClassesByJoining("mt-10 grid max-w-xl grid-cols-1 gap-8 text-base/7 text-gray-700 lg:max-w-none lg:grid-cols-2 items-start", classNames?.container), children: [_jsx("div", { className: cn('[&_a]:underline [&_a]:text-[var(--primary)] [&_a:hover]:text-[var(--accent)] [&_a]:transition-colors [&_a]:duration-200', mediaPosition === 'right' ? 'lg:order-1' : 'lg:order-2', textClassName, classNames?.textColumn), children: HTMLReactParser(content.text) }), _jsx("div", { className: buildClassesByJoining(mediaPosition === 'right' ? 'lg:order-2' : 'lg:order-1', classNames?.mediaColumn), children: renderMedia() })] }));
 };

package/dist/components/Base/image-gallery-modal/ImageGalleryModal.d.ts

@@ -7,5 +7,16 @@ export type ImageGalleryProps = {
     initialIndex?: number;
     onClose: () => void;
     onImageChange?: (index: number) => void;
+    classNames?: {
+        backdrop?: string;
+        container?: string;
+        closeButton?: string;
+        image?: string;
+        prevButton?: string;
+        nextButton?: string;
+        thumbnails?: string;
+        thumbnail?: string;
+        counter?: string;
+    };
 };
-export declare const ImageGalleryModal: ({ images, isOpen, initialIndex, onClose, onImageChange, }: ImageGalleryProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ImageGalleryModal: ({ images, isOpen, initialIndex, onClose, onImageChange, classNames, }: ImageGalleryProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Base/image-gallery-modal/ImageGalleryModal.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
 import { ChevronLeftIcon, ChevronRightIcon, XMarkIcon, } from '@heroicons/react/24/outline';
 import { useEffect, useState } from 'react';
-export const ImageGalleryModal = ({ images, isOpen, initialIndex = 0, onClose, onImageChange, }) => {
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
+export const ImageGalleryModal = ({ images, isOpen, initialIndex = 0, onClose, onImageChange, classNames, }) => {
     const [currentImageIndex, setCurrentImageIndex] = useState(initialIndex);
     useEffect(() => {
         setCurrentImageIndex(initialIndex);
@@ -43,11 +44,11 @@ export const ImageGalleryModal = ({ images, isOpen, initialIndex = 0, onClose, o
     };
     if (!isOpen || images.length === 0)
         return null;
-    return (_jsxs(Dialog, { open: isOpen, onClose: onClose, className: "relative z-50", children: [_jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/75" }), _jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", children: _jsxs(DialogPanel, { className: "relative w-full max-w-7xl max-h-full", children: [_jsx("button", { onClick: onClose, className: "absolute top-4 right-4 z-10 bg-black/50 text-white p-2 rounded-full hover:bg-black/70 transition-colors", "aria-label": "Close gallery", children: _jsx(XMarkIcon, { className: "h-6 w-6" }) }), _jsxs("div", { className: "relative bg-white rounded-lg overflow-hidden", children: [_jsx("img", { src: images[currentImageIndex]?.href, alt: images[currentImageIndex]?.alt, className: "w-full h-auto max-h-[80vh] object-contain" }), images.length > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: goToPrevImage, className: "absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70 transition-colors", "aria-label": "Previous image", children: _jsx(ChevronLeftIcon, { className: "h-6 w-6" }) }), _jsx("button", { onClick: goToNextImage, className: "absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70 transition-colors", "aria-label": "Next image", children: _jsx(ChevronRightIcon, { className: "h-6 w-6" }) })] }))] }), images.length > 1 && (_jsx("div", { className: "mt-4 flex gap-2 overflow-x-auto overflow-y-hidden pb-2 no-scrollbar", style: {
+    return (_jsxs(Dialog, { open: isOpen, onClose: onClose, className: "relative z-50", children: [_jsx(DialogBackdrop, { className: buildClassesByJoining("fixed inset-0 bg-black/75", classNames?.backdrop) }), _jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", children: _jsxs(DialogPanel, { className: "relative w-full max-w-7xl max-h-full", children: [_jsx("button", { onClick: onClose, className: buildClassesByJoining("absolute top-4 right-4 z-10 bg-black/50 text-white p-2 rounded-full hover:bg-black/70 transition-colors", classNames?.closeButton), "aria-label": "Close gallery", children: _jsx(XMarkIcon, { className: "h-6 w-6" }) }), _jsxs("div", { className: buildClassesByJoining("relative bg-white rounded-lg overflow-hidden", classNames?.container), children: [_jsx("img", { src: images[currentImageIndex]?.href, alt: images[currentImageIndex]?.alt, className: buildClassesByJoining("w-full h-auto max-h-[80vh] object-contain", classNames?.image) }), images.length > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: goToPrevImage, className: buildClassesByJoining("absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70 transition-colors", classNames?.prevButton), "aria-label": "Previous image", children: _jsx(ChevronLeftIcon, { className: "h-6 w-6" }) }), _jsx("button", { onClick: goToNextImage, className: buildClassesByJoining("absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70 transition-colors", classNames?.nextButton), "aria-label": "Next image", children: _jsx(ChevronRightIcon, { className: "h-6 w-6" }) })] }))] }), images.length > 1 && (_jsx("div", { className: buildClassesByJoining("mt-4 flex gap-2 overflow-x-auto overflow-y-hidden pb-2 no-scrollbar", classNames?.thumbnails), style: {
                                 scrollbarWidth: 'none',
                                 msOverflowStyle: 'none',
                                 WebkitOverflowScrolling: 'touch',
-                            }, children: images.map((image, index) => (_jsx("button", { onClick: () => goToImage(index), className: `flex-shrink-0 w-16 h-16 border-2 rounded overflow-hidden transition-colors ${index === currentImageIndex
+                            }, children: images.map((image, index) => (_jsx("button", { onClick: () => goToImage(index), className: buildClassesByJoining(`flex-shrink-0 w-16 h-16 border-2 rounded overflow-hidden transition-colors ${index === currentImageIndex
                                     ? 'border-[var(--primary)]'
-                                    : 'border-gray-300 hover:border-gray-400'}`, "aria-label": `View image ${index + 1}`, children: _jsx("img", { src: image.href, alt: image.alt, className: "w-full h-full object-contain" }) }, index))) })), _jsxs("div", { className: "absolute -bottom-[35px] left-1/2 -translate-x-1/2 bg-black/50 text-white px-3 py-1 rounded-full text-sm", children: [currentImageIndex + 1, " / ", images.length] })] }) })] }));
+                                    : 'border-gray-300 hover:border-gray-400'}`, classNames?.thumbnail), "aria-label": `View image ${index + 1}`, children: _jsx("img", { src: image.href, alt: image.alt, className: "w-full h-full object-contain" }) }, index))) })), _jsxs("div", { className: buildClassesByJoining("absolute -bottom-[35px] left-1/2 -translate-x-1/2 bg-black/50 text-white px-3 py-1 rounded-full text-sm", classNames?.counter), children: [currentImageIndex + 1, " / ", images.length] })] }) })] }));
 };

package/dist/components/Base/modal/Modal.d.ts

@@ -21,6 +21,15 @@ interface ModalProps {
     showCloseButton?: boolean;
     closeButtonClassName?: string;
     className?: string;
+    classNames?: {
+        backdrop?: string;
+        panel?: string;
+        title?: string;
+        description?: string;
+        content?: string;
+        closeButton?: string;
+        footer?: string;
+    };
 }
-export declare const Modal: ({ title, titleClassName, description, descriptionClassName, buttonText, showIcon, icon, iconBackgroundColor, iconColor, buttonClassName, secondButtonText, secondButtonClassName, onSecondButtonClick, showSecondButton, panelClassName, backdropClassName, onClose, isOpen, showCloseButton, closeButtonClassName, className, }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ title, titleClassName, description, descriptionClassName, buttonText, showIcon, icon, iconBackgroundColor, iconColor, buttonClassName, secondButtonText, secondButtonClassName, onSecondButtonClick, showSecondButton, panelClassName, backdropClassName, onClose, isOpen, showCloseButton, closeButtonClassName, className, classNames, }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/dist/components/Base/modal/Modal.js

@@ -3,11 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, } from '@headlessui/react';
 import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { buildClassesByJoining } from '../../../utils/StyleHelper';
-export const Modal = ({ title, titleClassName, description, descriptionClassName, buttonText, showIcon = true, icon = _jsx(CheckIcon, { "aria-hidden": "true", className: "size-6" }), iconBackgroundColor = 'bg-green-100', iconColor = 'text-green-600', buttonClassName, secondButtonText, secondButtonClassName, onSecondButtonClick, showSecondButton = false, panelClassName, backdropClassName, onClose, isOpen, showCloseButton = false, closeButtonClassName, className, }) => {
+export const Modal = ({ title, titleClassName, description, descriptionClassName, buttonText, showIcon = true, icon = _jsx(CheckIcon, { "aria-hidden": "true", className: "size-6" }), iconBackgroundColor = 'bg-green-100', iconColor = 'text-green-600', buttonClassName, secondButtonText, secondButtonClassName, onSecondButtonClick, showSecondButton = false, panelClassName, backdropClassName, onClose, isOpen, showCloseButton = false, closeButtonClassName, className, classNames, }) => {
     const handleClose = (value) => {
         onClose?.();
     };
-    return (_jsxs(Dialog, { open: isOpen, onClose: handleClose, className: buildClassesByJoining('relative z-10', className), children: [_jsx(DialogBackdrop, { transition: true, className: buildClassesByJoining('fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in', backdropClassName) }), _jsx("div", { className: "fixed inset-0 z-10 w-screen overflow-y-auto", children: _jsx("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: _jsxs(DialogPanel, { transition: true, className: buildClassesByJoining('relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-sm sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95', panelClassName), children: [showCloseButton && (_jsxs("button", { type: "button", className: buildClassesByJoining('absolute top-4 right-4 text-gray-400 hover:text-gray-500 focus:outline-none', closeButtonClassName), onClick: () => onClose?.(), children: [_jsx("span", { className: "sr-only", children: "Close" }), _jsx(XMarkIcon, { className: "h-6 w-6", "aria-hidden": "true" })] })), _jsxs("div", { children: [showIcon && (_jsx("div", { className: buildClassesByJoining('mx-auto flex size-12 items-center justify-center rounded-full', iconBackgroundColor), children: _jsx("div", { className: iconColor, children: icon }) })), _jsxs("div", { className: "mt-3 text-center sm:mt-5", children: [title && (_jsx(DialogTitle, { as: "h3", className: buildClassesByJoining('text-base font-semibold text-gray-900', titleClassName), children: title })), _jsx("div", { className: buildClassesByJoining('mt-2', descriptionClassName), children: description })] })] }), (buttonText ||
-                                (showSecondButton && secondButtonText)) && (_jsxs("div", { className: "mt-5 sm:mt-6 space-y-3", children: [buttonText && (_jsx("button", { type: "button", onClick: () => onClose?.(), className: buildClassesByJoining('inline-flex w-full justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-green-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600', buttonClassName), children: buttonText })), showSecondButton && secondButtonText && (_jsx("button", { type: "button", onClick: () => onSecondButtonClick?.(), className: buildClassesByJoining('inline-flex w-full justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-green-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600', secondButtonClassName), children: secondButtonText }))] }))] }) }) })] }));
+    return (_jsxs(Dialog, { open: isOpen, onClose: handleClose, className: buildClassesByJoining('relative z-10', className), children: [_jsx(DialogBackdrop, { transition: true, className: buildClassesByJoining('fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in', backdropClassName, classNames?.backdrop) }), _jsx("div", { className: "fixed inset-0 z-10 w-screen overflow-y-auto", children: _jsx("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: _jsxs(DialogPanel, { transition: true, className: buildClassesByJoining('relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-sm sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95', panelClassName, classNames?.panel), children: [showCloseButton && (_jsxs("button", { type: "button", className: buildClassesByJoining('absolute top-4 right-4 text-gray-400 hover:text-gray-500 focus:outline-none', closeButtonClassName, classNames?.closeButton), onClick: () => onClose?.(), children: [_jsx("span", { className: "sr-only", children: "Close" }), _jsx(XMarkIcon, { className: "h-6 w-6", "aria-hidden": "true" })] })), _jsxs("div", { className: buildClassesByJoining(classNames?.content), children: [showIcon && (_jsx("div", { className: buildClassesByJoining('mx-auto flex size-12 items-center justify-center rounded-full', iconBackgroundColor), children: _jsx("div", { className: iconColor, children: icon }) })), _jsxs("div", { className: "mt-3 text-center sm:mt-5", children: [title && (_jsx(DialogTitle, { as: "h3", className: buildClassesByJoining('text-base font-semibold text-gray-900', titleClassName, classNames?.title), children: title })), _jsx("div", { className: buildClassesByJoining('mt-2', descriptionClassName, classNames?.description), children: description })] })] }), (buttonText ||
+                                (showSecondButton && secondButtonText)) && (_jsxs("div", { className: buildClassesByJoining("mt-5 sm:mt-6 space-y-3", classNames?.footer), children: [buttonText && (_jsx("button", { type: "button", onClick: () => onClose?.(), className: buildClassesByJoining('inline-flex w-full justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-green-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600', buttonClassName), children: buttonText })), showSecondButton && secondButtonText && (_jsx("button", { type: "button", onClick: () => onSecondButtonClick?.(), className: buildClassesByJoining('inline-flex w-full justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-green-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600', secondButtonClassName), children: secondButtonText }))] }))] }) }) })] }));
 };
 export default Modal;

package/dist/components/Base/price/Price.d.ts

@@ -7,5 +7,10 @@ export type PriceProps = {
     quantUnit?: string;
     quantUnitClassName?: string;
     containerClassName?: string;
+    classNames?: {
+        container?: string;
+        value?: string;
+        quantUnit?: string;
+    };
 };
-export declare const Price: ({ value, locale, options, className, quantUnit, quantUnitClassName, containerClassName, }: PriceProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Price: ({ value, locale, options, className, quantUnit, quantUnitClassName, containerClassName, classNames, }: PriceProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Base/price/Price.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatPrice, } from '../../../utils/generalHelperFunction';
-export const Price = ({ value, locale = 'cs', options, className = '', quantUnit, quantUnitClassName = 'font-bold text-black', containerClassName = 'flex items-baseline gap-1', }) => {
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
+export const Price = ({ value, locale = 'cs', options, className = '', quantUnit, quantUnitClassName = 'font-bold text-black', containerClassName = 'flex items-baseline gap-1', classNames, }) => {
     const { number, currency, position } = formatPrice(value, locale, options);
-    return (_jsxs("span", { className: containerClassName, children: [position === 'before' && (_jsx("span", { className: options?.currencyClassName, children: currency })), _jsx("span", { className: `${className} ${options?.numberClassName || ''}`, children: number }), position === 'after' && (_jsxs("span", { className: options?.currencyClassName, children: [" ", currency] })), quantUnit && (_jsx("span", { className: quantUnitClassName, children: quantUnit }))] }));
+    return (_jsxs("span", { className: buildClassesByJoining(containerClassName, classNames?.container), children: [position === 'before' && (_jsx("span", { className: options?.currencyClassName, children: currency })), _jsx("span", { className: buildClassesByJoining(`${className} ${options?.numberClassName || ''}`, classNames?.value), children: number }), position === 'after' && (_jsxs("span", { className: options?.currencyClassName, children: [" ", currency] })), quantUnit && (_jsx("span", { className: buildClassesByJoining(quantUnitClassName, classNames?.quantUnit), children: quantUnit }))] }));
 };

package/dist/components/Base/switch/Switch.d.ts

@@ -7,6 +7,13 @@ export interface SwitchProps {
     simpleToggle?: boolean;
     shortToggle?: boolean;
     toggleIcon?: boolean;
+    classNames?: {
+        container?: string;
+        track?: string;
+        thumb?: string;
+        label?: string;
+        description?: string;
+    };
 }
-declare const SwitchToggle: ({ description, color, bgColor, ringColor, selected, simpleToggle, shortToggle, toggleIcon, }: SwitchProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const SwitchToggle: ({ description, color, bgColor, ringColor, selected, simpleToggle, shortToggle, toggleIcon, classNames, }: SwitchProps) => import("react/jsx-runtime").JSX.Element | null;
 export default SwitchToggle;

package/dist/components/Base/switch/Switch.js

@@ -2,25 +2,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Switch } from '@headlessui/react';
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
 const SwitchToggle = ({ description, color = '#3b82f6', // default blue
 bgColor = '#e5e7eb', // default gray-200
 ringColor = '#2563eb', // default blue-600
-selected = false, simpleToggle, shortToggle, toggleIcon, }) => {
+selected = false, simpleToggle, shortToggle, toggleIcon, classNames, }) => {
     const [enabled, setEnabled] = useState(selected);
     if (simpleToggle) {
         return (_jsxs(Switch, { checked: enabled, onChange: setEnabled, style: {
                 backgroundColor: enabled ? color : bgColor,
                 boxShadow: enabled ? `0 0 0 2px ${ringColor}` : 'none',
-            }, className: "group relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-offset-2", children: [_jsx("span", { className: "sr-only", children: description || 'Use setting' }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out", style: {
+            }, className: buildClassesByJoining("group relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-offset-2", classNames?.container, classNames?.track), children: [_jsx("span", { className: buildClassesByJoining("sr-only", classNames?.label, classNames?.description), children: description || 'Use setting' }), _jsx("span", { "aria-hidden": "true", className: buildClassesByJoining("pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out", classNames?.thumb), style: {
                         transform: enabled
                             ? 'translateX(1.25rem)'
                             : 'translateX(0)',
                     } })] }));
     }
     if (shortToggle) {
-        return (_jsxs(Switch, { checked: enabled, onChange: setEnabled, className: "group relative inline-flex h-5 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none", children: [_jsx("span", { className: "sr-only", children: description || 'Use setting' }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute size-full rounded-md bg-white" }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out", style: {
+        return (_jsxs(Switch, { checked: enabled, onChange: setEnabled, className: buildClassesByJoining("group relative inline-flex h-5 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none", classNames?.container, classNames?.track), children: [_jsx("span", { className: buildClassesByJoining("sr-only", classNames?.label, classNames?.description), children: description || 'Use setting' }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute size-full rounded-md bg-white" }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out", style: {
                         backgroundColor: enabled ? color : bgColor,
-                    } }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute left-0 inline-block size-5 transform rounded-full border border-gray-200 bg-white shadow-sm ring-0 transition-transform duration-200 ease-in-out", style: {
+                    } }), _jsx("span", { "aria-hidden": "true", className: buildClassesByJoining("pointer-events-none absolute left-0 inline-block size-5 transform rounded-full border border-gray-200 bg-white shadow-sm ring-0 transition-transform duration-200 ease-in-out", classNames?.thumb), style: {
                         transform: enabled
                             ? 'translateX(1.25rem)'
                             : 'translateX(0)',
@@ -30,7 +31,7 @@ selected = false, simpleToggle, shortToggle, toggleIcon, }) => {
         return (_jsxs(Switch, { checked: enabled, onChange: setEnabled, style: {
                 backgroundColor: enabled ? color : bgColor,
                 boxShadow: enabled ? `0 0 0 2px ${ringColor}` : 'none',
-            }, className: "group relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-offset-2", children: [_jsx("span", { className: "sr-only", children: description || 'Use setting' }), _jsxs("span", { className: "pointer-events-none relative inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out", style: {
+            }, className: buildClassesByJoining("group relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-offset-2", classNames?.container, classNames?.track), children: [_jsx("span", { className: buildClassesByJoining("sr-only", classNames?.label, classNames?.description), children: description || 'Use setting' }), _jsxs("span", { className: buildClassesByJoining("pointer-events-none relative inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out", classNames?.thumb), style: {
                         transform: enabled
                             ? 'translateX(1.25rem)'
                             : 'translateX(0)',

package/dist/components/Base/tooltip/Tooltip.d.ts

@@ -20,6 +20,11 @@ export type TooltipProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'co
     lazy?: boolean;
     size?: 'sm' | 'md' | 'lg';
     variant?: 'default' | 'dark' | 'light' | 'error' | 'warning' | 'success';
+    classNames?: {
+        trigger?: string;
+        content?: string;
+        arrow?: string;
+    };
 };
 declare const _default: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children" | "content"> & {
     content: ((ref: Ref<HTMLElement>, props: Record<string, unknown>) => ReactNode) | ReactNode;
@@ -36,5 +41,10 @@ declare const _default: import("react").ForwardRefExoticComponent<Omit<HTMLAttri
     lazy?: boolean;
     size?: "sm" | "md" | "lg";
     variant?: "default" | "dark" | "light" | "error" | "warning" | "success";
+    classNames?: {
+        trigger?: string;
+        content?: string;
+        arrow?: string;
+    };
 } & import("react").RefAttributes<TooltipRef>>;
 export default _default;

package/dist/components/Base/tooltip/Tooltip.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import buildClassesByJoining from '../../../utils/StyleHelper';
 import { FloatingPortal, arrow, autoUpdate, hide, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, useTransitionStyles, } from '@floating-ui/react';
 import { forwardRef, useImperativeHandle, useRef, useState, } from 'react';
-const Tooltip = ({ className, children, content, placement = 'top', strategy: strategyProp = 'absolute', contentClassName, zIndex = 30, portalTarget, backgroundColor, textColor, disabled = false, disableAutoHide, lazy = true, size = 'md', variant = 'default', ...props }, ref) => {
+const Tooltip = ({ className, children, content, placement = 'top', strategy: strategyProp = 'absolute', contentClassName, zIndex = 30, portalTarget, backgroundColor, textColor, disabled = false, disableAutoHide, lazy = true, size = 'md', variant = 'default', classNames, ...props }, ref) => {
     const [open, setOpen] = useState(false);
     const arrowRef = useRef(null);
     const { x, y, refs, strategy, context, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: hideMiddleware, }, placement: floatingPlacement, } = useFloating({
@@ -88,6 +88,7 @@ const Tooltip = ({ className, children, content, placement = 'top', strategy: st
         // Image max width
         '[&_img]:max-w-[420px]',
         contentClassName,
+        classNames?.content,
     ]);
     const tooltipStyles = {
         zIndex,
@@ -122,7 +123,7 @@ const Tooltip = ({ className, children, content, placement = 'top', strategy: st
         if (typeof children === 'function') {
             return children(refs.setReference, getReferenceProps(), disabled);
         }
-        return (_jsx("div", { ...props, ...getAllReferenceProps(), className: buildClassesByJoining(['inline-block', className]), children: children }));
+        return (_jsx("div", { ...props, ...getAllReferenceProps(), className: buildClassesByJoining(['inline-block', className, classNames?.trigger]), children: children }));
     };
     const renderTooltipContent = () => {
         if (disabled || (lazy && !isMounted)) {
@@ -136,7 +137,7 @@ const Tooltip = ({ className, children, content, placement = 'top', strategy: st
         }
         return (_jsxs("div", { className: tooltipClasses, ref: refs.setFloating, style: tooltipStyles, ...getFloatingProps(), children: [_jsx("span", { className: "relative z-10", dangerouslySetInnerHTML: typeof content === 'string'
                         ? { __html: content }
-                        : undefined, children: typeof content !== 'string' ? content : null }), _jsx("div", { ref: arrowRef, style: {
+                        : undefined, children: typeof content !== 'string' ? content : null }), _jsx("div", { ref: arrowRef, className: buildClassesByJoining(classNames?.arrow), style: {
                         position: 'absolute',
                         width: '10px',
                         height: '10px',

package/dist/components/Ecommerce/instructions-list/Instruction.d.ts

@@ -6,6 +6,20 @@ interface InstructionProps {
     phoneNumber?: string;
     email?: string;
     fontClass?: string;
+    className?: string;
+    classNames?: {
+        container?: string;
+        title?: string;
+        idNumber?: string;
+        contactBlock?: string;
+        contactInfo?: string;
+        phoneRow?: string;
+        phoneIcon?: string;
+        emailRow?: string;
+        emailIcon?: string;
+        description?: string;
+        borderLeft?: string;
+    };
 }
-export declare const Instruction: ({ id, title, hasContactIcons, description, phoneNumber, email, fontClass, }: InstructionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Instruction: ({ id, title, hasContactIcons, description, phoneNumber, email, fontClass, className, classNames, }: InstructionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Ecommerce/instructions-list/Instruction.js

@@ -1,12 +1,25 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { EnvelopeIcon, PhoneIcon } from '@heroicons/react/24/outline';
 import parse from 'html-react-parser';
-export const Instruction = ({ id, title, hasContactIcons, description, phoneNumber = '+420 000 000 000', email = 'info@rezidencevavrineckaka.cz', fontClass = '', }) => {
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
+export const Instruction = ({ id, title, hasContactIcons, description, phoneNumber = '+420 000 000 000', email = 'info@rezidencevavrineckaka.cz', fontClass = '', className, classNames = {
+    container: '',
+    title: '',
+    idNumber: '',
+    contactBlock: '',
+    contactInfo: '',
+    phoneRow: '',
+    phoneIcon: '',
+    emailRow: '',
+    emailIcon: '',
+    description: '',
+    borderLeft: '',
+}, }) => {
     const renderDescription = () => {
         if (typeof description === 'string') {
             return parse(description);
         }
         return description;
     };
-    return (_jsx("div", { className: `flex flex-col gap-4 py-6 ${fontClass}`, children: _jsx("div", { className: "flex items-start gap-4", children: _jsxs("div", { className: `flex flex-col gap-4 w-full ${fontClass}`, children: [_jsxs("h2", { className: `text-xl font-bold text-gray-800 mb-4 ${fontClass}`, children: [_jsxs("span", { className: "mr-4", children: [id, "."] }), title] }), hasContactIcons ? (_jsxs("div", { className: "flex flex-col lg:flex-row! gap-6 border-l-2 border-[#C9A96E]", children: [_jsxs("div", { className: `flex flex-col justify-around gap-4 w-max min-w-[310px] pl-8 text-gray-800 ${fontClass}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PhoneIcon, { className: "w-5 h-5" }), _jsx("a", { href: `tel:${phoneNumber}`, children: phoneNumber })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(EnvelopeIcon, { className: "w-5 h-5" }), _jsx("a", { href: `mailto:${email}`, children: email })] })] }), _jsx("p", { className: `text-gray-600 pl-8 lg:pl-28! ${fontClass}`, children: renderDescription() })] })) : (_jsx("p", { className: `text-gray-600 pl-8 border-l-2 border-[#C9A96E] ${fontClass}`, children: renderDescription() }))] }) }) }));
+    return (_jsx("div", { className: buildClassesByJoining('flex flex-col gap-4 py-6', fontClass, className, classNames?.container), children: _jsx("div", { className: "flex items-start gap-4", children: _jsxs("div", { className: buildClassesByJoining('flex flex-col gap-4 w-full', fontClass), children: [_jsxs("h2", { className: buildClassesByJoining('text-xl font-bold text-gray-800 mb-4', fontClass, classNames?.title), children: [_jsxs("span", { className: buildClassesByJoining('mr-4', classNames?.idNumber), children: [id, "."] }), title] }), hasContactIcons ? (_jsxs("div", { className: buildClassesByJoining('flex flex-col lg:flex-row! gap-6 border-l-2 border-[#C9A96E]', classNames?.contactBlock, classNames?.borderLeft), children: [_jsxs("div", { className: buildClassesByJoining('flex flex-col justify-around gap-4 w-max min-w-[310px] pl-8 text-gray-800', fontClass, classNames?.contactInfo), children: [_jsxs("div", { className: buildClassesByJoining('flex items-center gap-2', classNames?.phoneRow), children: [_jsx(PhoneIcon, { className: buildClassesByJoining('w-5 h-5', classNames?.phoneIcon) }), _jsx("a", { href: `tel:${phoneNumber}`, children: phoneNumber })] }), _jsxs("div", { className: buildClassesByJoining('flex items-center gap-2', classNames?.emailRow), children: [_jsx(EnvelopeIcon, { className: buildClassesByJoining('w-5 h-5', classNames?.emailIcon) }), _jsx("a", { href: `mailto:${email}`, children: email })] })] }), _jsx("p", { className: buildClassesByJoining('text-gray-600 pl-8 lg:pl-28!', fontClass, classNames?.description), children: renderDescription() })] })) : (_jsx("p", { className: buildClassesByJoining('text-gray-600 pl-8 border-l-2 border-[#C9A96E]', fontClass, classNames?.description, classNames?.borderLeft), children: renderDescription() }))] }) }) }));
 };

package/dist/components/Ecommerce/instructions-list/InstructionsList.d.ts

@@ -9,6 +9,11 @@ interface InstructionData {
 }
 interface InstructionsListProps {
     instructions: InstructionData[];
+    className?: string;
+    classNames?: {
+        container?: string;
+        item?: string;
+    };
 }
-export declare const InstructionsList: ({ instructions }: InstructionsListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InstructionsList: ({ instructions, className, classNames, }: InstructionsListProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Ecommerce/instructions-list/InstructionsList.js

@@ -1,5 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
 import { Instruction } from './Instruction';
-export const InstructionsList = ({ instructions }) => {
-    return (_jsx("div", { className: "", children: instructions.map((item) => (_jsx(Instruction, { id: item.id, title: item.title, hasContactIcons: item.hasContactIcons, phoneNumber: item.phoneNumber, email: item.email, description: item.description, fontClass: item.fontClass }, item.id))) }));
+export const InstructionsList = ({ instructions, className, classNames = {
+    container: '',
+    item: '',
+}, }) => {
+    return (_jsx("div", { className: buildClassesByJoining(className, classNames?.container), children: instructions.map((item) => (_jsx(Instruction, { id: item.id, title: item.title, hasContactIcons: item.hasContactIcons, phoneNumber: item.phoneNumber, email: item.email, description: item.description, fontClass: item.fontClass, className: classNames?.item }, item.id))) }));
 };

package/dist/components/Ecommerce/product-card/ProductCard.js

@@ -208,7 +208,9 @@ mainPriceFormatOptions, discountPriceFormatOptions, mainPriceClassName, discount
             onDelete(product);
         }
     }, [onDelete, product]);
-    return (_jsxs("div", { className: buildClassesByJoining('group relative h-full', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', borderOnHoverClassName, className, classNames?.container), onClick: handleCardClick, children: [renderHeader && renderHeader(product), _jsxs("div", { className: buildClassesByJoining(imageLayoutClass, 'relative', classNames?.imageLayout), children: [product.badges && renderBadges && (_jsx("div", { className: buildClassesByJoining("absolute top-2 left-2 z-10 flex flex-wrap gap-1", classNames?.badges?.container), children: product.badges.map((badge, index) => (_jsx(Badge, { color: badge.color, className: classNames?.badges?.badge, children: badge.text }, index))) })), showDeleteButton ? (_jsx(DeleteButton, { show: showDeleteButton, onDelete: handleDelete, deleteButtonClassName: buildClassesByJoining(deleteButtonClassName, classNames?.deleteButton), isDeletePending: isDeletePending, size: deleteButtonSize, position: deleteButtonPosition })) : (_jsx(LikeButton, { show: showWishlistButton, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, wishlistButtonClassName: buildClassesByJoining(wishlistButtonClassName, classNames?.wishlistButton), wishlistDropdownClassName: wishlistDropdownClassName, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle })), _jsx("img", { alt: product.all_images[0]?.alt, src: product.all_images[0]?.href, className: buildClassesByJoining(aspectRatioClass, objectFitClass, objectPositionClass, hoverEffect !== 'none' ? hoverClass : '', roundedClass, 'bg-gray-200', onImageClick ? 'cursor-pointer' : '', imageClassName, classNames?.image), onClick: handleImageClick }), addButtonPosition === 'overlay' && (_jsx(AddToCart, { buttonClassName: buildClassesByJoining(buttonClassName, classNames?.button), addButtonIcon: getButtonIcon(), handleAddToCart: handleAddToCart, showAddButton: shouldShowAddButton(), disabled: disabled, customAddButton: customAddButton }))] }), _jsxs("div", { className: buildClassesByJoining('mt-4 h-full flex flex-col justify-between grow', contentLayoutClass, compactClass, contentClassName, classNames?.content), children: [_jsxs("div", { className: "flex flex-col h-full justify-between", children: [_jsxs("div", { children: [_jsx(Heading, { level: 3, className: buildClassesByJoining('text-lg text-gray-700', classNames?.title, titleLineClampClass, titleClassName), children: _jsxs(Button, { asLink: true, unstyled: true, href: href, children: [!onCardClick && (_jsx("span", { "aria-hidden": "true", className: buildClassesByJoining("absolute inset-0", classNames?.button?.link) })), product.product_name] }) }), renderVariationName && product.variation_name && (_jsx("span", { className: buildClassesByJoining('text-md', variationNameClassName, classNames?.variationName), children: product.variation_name })), (product.country || product.field_volume) && (_jsxs("p", { className: buildClassesByJoining(classNames?.label), children: [showCountry && product.country && (_jsxs("span", { className: buildClassesByJoining('text-sm', labelClassName, classNames?.label?.country), children: [product.country, showVolume &&
+    return (_jsxs("div", { className: buildClassesByJoining('group relative h-full', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', borderOnHoverClassName, className, classNames?.container), onClick: handleCardClick, children: [renderHeader && renderHeader(product), _jsxs("div", { className: buildClassesByJoining(imageLayoutClass, 'relative', classNames?.imageLayout), children: [product.badges && renderBadges && (_jsx("div", { className: buildClassesByJoining("absolute top-2 left-2 z-10 flex flex-wrap gap-1", classNames?.badges?.container), children: product.badges.map((badge, index) => (_jsx(Badge, { color: badge.color, className: classNames?.badges?.badge, children: badge.text }, index))) })), showDeleteButton ? (_jsx(DeleteButton, { show: showDeleteButton, onDelete: handleDelete, className: buildClassesByJoining(deleteButtonClassName, classNames?.deleteButton), isDeletePending: isDeletePending, size: deleteButtonSize, position: deleteButtonPosition })) : (_jsx(LikeButton, { show: showWishlistButton, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, className: buildClassesByJoining(wishlistButtonClassName, classNames?.wishlistButton), classNames: {
+                            dropdown: wishlistDropdownClassName,
+                        }, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle })), _jsx("img", { alt: product.all_images[0]?.alt, src: product.all_images[0]?.href, className: buildClassesByJoining(aspectRatioClass, objectFitClass, objectPositionClass, hoverEffect !== 'none' ? hoverClass : '', roundedClass, 'bg-gray-200', onImageClick ? 'cursor-pointer' : '', imageClassName, classNames?.image), onClick: handleImageClick }), addButtonPosition === 'overlay' && (_jsx(AddToCart, { buttonClassName: buildClassesByJoining(buttonClassName, classNames?.button), addButtonIcon: getButtonIcon(), handleAddToCart: handleAddToCart, showAddButton: shouldShowAddButton(), disabled: disabled, customAddButton: customAddButton }))] }), _jsxs("div", { className: buildClassesByJoining('mt-4 h-full flex flex-col justify-between grow', contentLayoutClass, compactClass, contentClassName, classNames?.content), children: [_jsxs("div", { className: "flex flex-col h-full justify-between", children: [_jsxs("div", { children: [_jsx(Heading, { level: 3, className: buildClassesByJoining('text-lg text-gray-700', classNames?.title, titleLineClampClass, titleClassName), children: _jsxs(Button, { asLink: true, unstyled: true, href: href, children: [!onCardClick && (_jsx("span", { "aria-hidden": "true", className: buildClassesByJoining("absolute inset-0", classNames?.button?.link) })), product.product_name] }) }), renderVariationName && product.variation_name && (_jsx("span", { className: buildClassesByJoining('text-md', variationNameClassName, classNames?.variationName), children: product.variation_name })), (product.country || product.field_volume) && (_jsxs("p", { className: buildClassesByJoining(classNames?.label), children: [showCountry && product.country && (_jsxs("span", { className: buildClassesByJoining('text-sm', labelClassName, classNames?.label?.country), children: [product.country, showVolume &&
                                                         product.field_volume &&
                                                         ', '] })), showVolume && product.field_volume && (_jsx("span", { className: buildClassesByJoining('text-sm', labelClassName, classNames?.label?.volume), children: product.field_volume }))] })), renderDescription && product.description && (_jsx("span", { className: buildClassesByJoining('mt-1 text-sm text-gray-500 line-clamp-2', descriptionClassName, classNames?.description), children: parseHTML(product.description) }))] }), _jsx("div", { className: "flex flex-col justify-between", children: _jsxs("div", { className: buildClassesByJoining("flex flex-col justify-between", classNames?.price?.container), children: [_jsx(Price, { value: product.price, locale: locale, options: mainPriceFormatOptions, className: buildClassesByJoining('text-md font-bold text-gray-900', mainPriceClassName, classNames?.price?.mainPrice), quantUnit: quantUnit, quantUnitClassName: buildClassesByJoining('text-md font-bold text-black', mainQuantUnitClassName, classNames?.price?.mainQuantUnit) }), product?.discountPercent != null &&
                                             product.discountPercent > 0 && (_jsx(Price, { value: product.price /

package/dist/components/Ecommerce/product-detail/ProductDetail.js

@@ -195,11 +195,11 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
                                                                     variation.id && (_jsx("div", { className: buildClassesByJoining('absolute inset-0 pointer-events-none', classNames
                                                                     ?.variations
                                                                     ?.variationActiveButton), style: {
-                                                                    background: `
-                                                                radial-gradient(circle at top left, var(--primary) 0%, transparent 20%),
-                                                                radial-gradient(circle at top right, var(--primary) 0%, transparent 20%),
-                                                                radial-gradient(circle at bottom left, var(--primary) 0%, transparent 20%),
-                                                                radial-gradient(circle at bottom right, var(--primary) 0%, transparent 20%)
+                                                                    background: `
+                                                                radial-gradient(circle at top left, var(--primary) 0%, transparent 20%),
+                                                                radial-gradient(circle at top right, var(--primary) 0%, transparent 20%),
+                                                                radial-gradient(circle at bottom left, var(--primary) 0%, transparent 20%),
+                                                                radial-gradient(circle at bottom right, var(--primary) 0%, transparent 20%)
                                                             `,
                                                                     opacity: 0.2,
                                                                 } })), _jsxs("div", { className: buildClassesByJoining('flex flex-col justify-between gap-1 relative z-10 flex-1 min-w-0 pr-2', classNames?.variations

package/dist/components/Ecommerce/product-detail/ProductDetailGallery.js

@@ -32,6 +32,8 @@ const ProductDetailGallery = ({ product, classNames, showWishlistButton, enableM
             onCreateWishlist(name, product);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(TabGroup, { className: buildClassesByJoining('flex flex-col-reverse items-center', classNames?.container), children: [_jsx("div", { className: "mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none", children: _jsx(TabList, { className: buildClassesByJoining('grid grid-cols-4 gap-6', classNames?.list), children: product.all_images.map((image, i) => (_jsxs(Tab, { className: buildClassesByJoining('group relative flex h-24 cursor-pointer items-center justify-center bg-white text-sm font-medium text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-[var(--primary)]/50 focus:ring-offset-4 focus:outline-hidden', classNames?.image), children: [_jsx("span", { className: "sr-only", children: image.alt }), _jsx("span", { className: "absolute inset-0 overflow-hidden", children: _jsx("img", { src: image.href, alt: "", className: buildClassesByJoining('size-full object-contain', classNames?.imageThumbnail) }) }), _jsx("span", { "aria-hidden": "true", className: buildClassesByJoining('pointer-events-none absolute inset-0 ring-2 ring-transparent ring-offset-2 group-data-selected:ring-[var(--primary)]', classNames?.imageActiveBorder) })] }, i))) }) }), _jsxs(TabPanels, { className: "relative w-full", children: [product.all_images.map((image, i) => (_jsx(TabPanel, { className: buildClassesByJoining('relative', classNames?.imageActivePanel), children: _jsx("img", { src: image.href, alt: image.alt, onClick: () => openGallery(i), className: buildClassesByJoining('aspect-[7/5] w-full object-contain border-1 border-gray-200 cursor-pointer hover:opacity-90 transition-opacity', classNames?.imageActive) }) }, i))), showWishlistButton && (_jsx("div", { className: "absolute top-3 right-3 z-10", children: _jsx(LikeButton, { show: true, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle, wishlistButtonClassName: "bg-white/90 backdrop-blur-sm border border-gray-200 shadow-lg hover:shadow-xl" }) }))] })] }), _jsx(ImageGalleryModal, { images: product.all_images, isOpen: isGalleryOpen, initialIndex: galleryInitialIndex, onClose: closeGallery })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(TabGroup, { className: buildClassesByJoining('flex flex-col-reverse items-center', classNames?.container), children: [_jsx("div", { className: "mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none", children: _jsx(TabList, { className: buildClassesByJoining('grid grid-cols-4 gap-6', classNames?.list), children: product.all_images.map((image, i) => (_jsxs(Tab, { className: buildClassesByJoining('group relative flex h-24 cursor-pointer items-center justify-center bg-white text-sm font-medium text-gray-900 uppercase hover:bg-gray-50 focus:ring-3 focus:ring-[var(--primary)]/50 focus:ring-offset-4 focus:outline-hidden', classNames?.image), children: [_jsx("span", { className: "sr-only", children: image.alt }), _jsx("span", { className: "absolute inset-0 overflow-hidden", children: _jsx("img", { src: image.href, alt: "", className: buildClassesByJoining('size-full object-contain', classNames?.imageThumbnail) }) }), _jsx("span", { "aria-hidden": "true", className: buildClassesByJoining('pointer-events-none absolute inset-0 ring-2 ring-transparent ring-offset-2 group-data-selected:ring-[var(--primary)]', classNames?.imageActiveBorder) })] }, i))) }) }), _jsxs(TabPanels, { className: "relative w-full", children: [product.all_images.map((image, i) => (_jsx(TabPanel, { className: buildClassesByJoining('relative', classNames?.imageActivePanel), children: _jsx("img", { src: image.href, alt: image.alt, onClick: () => openGallery(i), className: buildClassesByJoining('aspect-[7/5] w-full object-contain border-1 border-gray-200 cursor-pointer hover:opacity-90 transition-opacity', classNames?.imageActive) }) }, i))), showWishlistButton && (_jsx("div", { className: "absolute top-3 right-3 z-10", children: _jsx(LikeButton, { show: true, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle, classNames: {
+                                        button: 'bg-white/90 backdrop-blur-sm border border-gray-200 shadow-lg hover:shadow-xl',
+                                    } }) }))] })] }), _jsx(ImageGalleryModal, { images: product.all_images, isOpen: isGalleryOpen, initialIndex: galleryInitialIndex, onClose: closeGallery })] }));
 };
 export default ProductDetailGallery;

package/dist/components/Ecommerce/progress-stepper/ProgressStepper.d.ts

@@ -17,10 +17,30 @@ export interface ProgressStepperProps {
     completeColor?: string;
     currentColor?: string;
     upcomingColor?: string;
-    completeIconClassName?: string;
-    currentIconClassName?: string;
-    upcomingIconClassName?: string;
     showStepNumbers?: boolean;
     renderCustomStep?: (step: Step, index: number, totalSteps: number) => ReactNode;
+    classNames?: {
+        list?: string;
+        step?: string;
+        stepLink?: {
+            complete?: string;
+            current?: string;
+            upcoming?: string;
+        };
+        stepContent?: string;
+        icon?: {
+            complete?: string;
+            current?: string;
+            upcoming?: string;
+            checkIcon?: string;
+        };
+        stepName?: {
+            complete?: string;
+            current?: string;
+            upcoming?: string;
+        };
+        arrow?: string;
+        arrowSvg?: string;
+    };
 }
-export declare const ProgressStepper: ({ steps, className, orientation, showArrows, clickable, completeColor, currentColor, upcomingColor, completeIconClassName, currentIconClassName, upcomingIconClassName, showStepNumbers, renderCustomStep, }: ProgressStepperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressStepper: ({ steps, className, orientation, showArrows, clickable, completeColor, currentColor, upcomingColor, showStepNumbers, renderCustomStep, classNames, }: ProgressStepperProps) => import("react/jsx-runtime").JSX.Element;