chop-logic-components 4.1.1 → 4.3.0

package/dist/components/organisms/form/Form2.js

@@ -1,12 +1,12 @@
-import { getClassName as e } from "../../../utils/get-class-name.js";
-import { ButtonView as t } from "../../../enums/button-view.js";
-import { IconName as n } from "../../../enums/icon-name.js";
+import { ButtonView as e } from "../../../enums/button-view.js";
+import { IconName as t } from "../../../enums/icon-name.js";
+import { getClassName as n } from "../../../utils/get-class-name.js";
 import r from "../../atoms/button/Button2.js";
 import { FormContext as i } from "../../contexts/form/FormContext.js";
 import { useFormController as a } from "./Form.controller.js";
 import './Form.css';/* empty css     */
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useMemo as c } from "react";
+import { useMemo as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/organisms/form/Form.tsx
 var l = ({ children: l, initialValues: u, onReset: d, onSubmit: f, onClickSubmit: p, hasReset: m = !0, className: h, ...g }) => {
 	let { handleInputChange: _, handleSubmit: v, handleReset: y, resetSignal: b, valid: x } = a({
@@ -14,7 +14,7 @@ var l = ({ children: l, initialValues: u, onReset: d, onSubmit: f, onClickSubmit
 		onReset: d,
 		onSubmit: f,
 		onClickSubmit: p
-	}), S = e(["cl-form", h]), C = c(() => ({
+	}), S = n(["cl-form", h]), C = o(() => ({
 		onChangeFormInput: _,
 		initialValues: u,
 		resetSignal: b
@@ -23,24 +23,24 @@ var l = ({ children: l, initialValues: u, onReset: d, onSubmit: f, onClickSubmit
 		u,
 		b
 	]);
-	return /* @__PURE__ */ o("form", {
+	return /* @__PURE__ */ s("form", {
 		onSubmit: v,
 		onReset: y,
 		...g,
 		className: S,
-		children: /* @__PURE__ */ s(i.Provider, {
+		children: /* @__PURE__ */ c(i.Provider, {
 			value: C,
-			children: [l, /* @__PURE__ */ s("div", {
+			children: [l, /* @__PURE__ */ c("div", {
 				className: "cl-form__buttons",
-				children: [m && /* @__PURE__ */ o(r, {
+				children: [m && /* @__PURE__ */ s(r, {
 					type: "reset",
 					text: "Reset",
-					icon: n.Delete,
-					view: t.Secondary
-				}), /* @__PURE__ */ o(r, {
+					icon: t.Delete,
+					view: e.Secondary
+				}), /* @__PURE__ */ s(r, {
 					type: "submit",
 					text: "Submit",
-					icon: n.ArrowRight,
+					icon: t.ArrowRight,
 					extended: !m,
 					disabled: !x
 				})]

package/dist/components/organisms/gallery/Gallery.css

@@ -0,0 +1 @@
+.cl-gallery{position:relative}.cl-gallery__container{width:100%}.cl-gallery__container_grid{grid-template-columns:repeat(min(var(--gallery-columns), 2), 1fr);gap:var(--gallery-gap,var(--cl-m-gap));grid-auto-rows:1fr;display:grid}.cl-gallery__container_grid[style*=--gallery-rows]{grid-template-rows:repeat(var(--gallery-rows), 1fr);max-height:calc((100% / var(--gallery-columns)) * var(--gallery-rows) + var(--gallery-gap,var(--cl-m-gap)) * (var(--gallery-rows) - 1));overflow:hidden}.cl-gallery__container_grid .cl-gallery__item{width:100%;height:100%}.cl-gallery__container_grid .cl-gallery__item img{object-fit:cover;width:100%;height:100%}.cl-gallery__container_masonry{column-count:1;column-gap:var(--gallery-gap,var(--cl-m-gap))}.cl-gallery__container_masonry .cl-gallery__item{break-inside:avoid;margin-bottom:var(--gallery-gap,var(--cl-m-gap))}.cl-gallery__container_carousel{scroll-behavior:smooth;gap:var(--gallery-gap,var(--cl-m-gap));scrollbar-width:none;flex-wrap:nowrap;display:flex;overflow-x:scroll}.cl-gallery__container_carousel::-webkit-scrollbar{display:none}.cl-gallery__container_carousel .cl-gallery__item{flex-shrink:0}@media (width>=640px){.cl-gallery__container_grid{grid-template-columns:repeat(var(--gallery-columns), 1fr)}.cl-gallery__container_masonry{column-count:2}}@media (width>=1024px){.cl-gallery__container_masonry{column-count:var(--gallery-columns,3)}}

package/dist/components/organisms/gallery/Gallery.d.ts

@@ -0,0 +1,4 @@
+import { GalleryProps } from '../../../types';
+import { FC } from 'react';
+declare const Gallery: FC<GalleryProps>;
+export default Gallery;

package/dist/components/organisms/gallery/Gallery.helpers.d.ts

@@ -0,0 +1,3 @@
+import { GalleryItem, ImageProps, ImageSource } from '../../../types';
+export declare const getLargestImageSource: (sources: ImageSource[]) => ImageSource | undefined;
+export declare const getFullscreenImageProps: (image: GalleryItem) => Omit<ImageProps, "caption">;

package/dist/components/organisms/gallery/Gallery.helpers.js

@@ -0,0 +1,29 @@
+//#region src/components/organisms/gallery/Gallery.helpers.ts
+var e = (e) => {
+	if (e.length === 0) return;
+	let t, n = 0;
+	for (let r of e) {
+		let e = r.descriptor?.trim();
+		if (e?.endsWith("w")) {
+			let i = e.slice(0, -1), a = Number.parseInt(i, 10);
+			!Number.isNaN(a) && a > n && (n = a, t = r);
+		}
+	}
+	return t ?? e.at(-1);
+}, t = (t) => {
+	let { caption: n, sources: r, ...i } = t;
+	if (r && r.length > 0) {
+		let t = e(r);
+		if (t) return {
+			...i,
+			src: t.src,
+			sources: void 0
+		};
+	}
+	return {
+		...i,
+		sources: r
+	};
+};
+//#endregion
+export { t as getFullscreenImageProps, e as getLargestImageSource };

package/dist/components/organisms/gallery/Gallery2.js

@@ -0,0 +1,57 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import t from "./carousel-navigation/CarouselNavigation2.js";
+import n from "./full-screen-viewer/FullscreenViewer2.js";
+import './Gallery.css';/* empty css        */
+import r from "./gallery-image-item/GalleryImageItem2.js";
+import { useCarouselScroll as i } from "./hooks/use-carousel-scroll.js";
+import { useFullscreenViewer as a } from "./hooks/use-fullscreen-viewer.js";
+import { useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/Gallery.tsx
+var l = ({ images: l = [], layout: u = "grid", columns: d = 3, rows: f, gap: p, label: m, className: h, title: g, enableFullscreen: _ = !1, ...v }) => {
+	let y = o(null), { isViewerOpen: b, currentImageIndex: x, openViewer: S, closeViewer: C, handleNavigate: w } = a(), { showPrev: T, showNext: E, scrollForward: D, scrollBackward: O } = i(y, u), k = e(["cl-gallery", h]), A = e([
+		"cl-gallery__container",
+		{ "cl-gallery__container_grid": u === "grid" },
+		{ "cl-gallery__container_masonry": u === "masonry" },
+		{ "cl-gallery__container_carousel": u === "carousel" }
+	]), j = {
+		"--gallery-columns": d,
+		"--gallery-rows": f,
+		"--gallery-gap": p
+	};
+	return /* @__PURE__ */ c("section", {
+		className: k,
+		"aria-label": m ?? g ?? "Image gallery",
+		title: g,
+		...v,
+		children: [
+			/* @__PURE__ */ s("div", {
+				ref: y,
+				className: A,
+				style: j,
+				tabIndex: u === "carousel" ? 0 : void 0,
+				children: l.map((e, t) => /* @__PURE__ */ s(r, {
+					item: e,
+					index: t,
+					enableFullscreen: _,
+					onOpenViewer: S
+				}, e.src))
+			}),
+			u === "carousel" && /* @__PURE__ */ s(t, {
+				showPrev: T,
+				showNext: E,
+				onScrollBackward: O,
+				onScrollForward: D
+			}),
+			_ && /* @__PURE__ */ s(n, {
+				images: l,
+				currentIndex: x,
+				isOpen: b,
+				onClose: C,
+				onNavigate: w
+			})
+		]
+	});
+};
+//#endregion
+export { l as default };

package/dist/components/organisms/gallery/carousel-navigation/CarouselNavigation.css

@@ -0,0 +1 @@
+.cl-gallery__button{height:100%;position:absolute;top:0}.cl-gallery__button_prev{left:var(--cl-l-gap)}.cl-gallery__button_next{right:var(--cl-l-gap)}.cl-gallery__button_prev .cl-icon-button__icon:before,.cl-gallery__button_next .cl-icon-button__icon:before{color:#fff!important}

package/dist/components/organisms/gallery/carousel-navigation/CarouselNavigation.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+interface CarouselNavigationProps {
+    showPrev: boolean;
+    showNext: boolean;
+    onScrollBackward: () => void;
+    onScrollForward: () => void;
+}
+declare const CarouselNavigation: FC<CarouselNavigationProps>;
+export default CarouselNavigation;

package/dist/components/organisms/gallery/carousel-navigation/CarouselNavigation2.js

@@ -0,0 +1,25 @@
+import { ButtonView as e } from "../../../../enums/button-view.js";
+import { IconName as t } from "../../../../enums/icon-name.js";
+import n from "../../../atoms/button/Button2.js";
+import './CarouselNavigation.css';/* empty css                   */
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/carousel-navigation/CarouselNavigation.tsx
+var o = ({ showPrev: o, showNext: s, onScrollBackward: c, onScrollForward: l }) => /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(n, {
+	view: e.Icon,
+	icon: t.ChevronLeft,
+	label: "Previous images",
+	className: "cl-gallery__button cl-gallery__button_prev",
+	onClick: c,
+	style: { visibility: o ? "visible" : "hidden" },
+	"aria-hidden": !o
+}), /* @__PURE__ */ i(n, {
+	view: e.Icon,
+	icon: t.ChevronRight,
+	label: "Next images",
+	className: "cl-gallery__button cl-gallery__button_next",
+	onClick: l,
+	style: { visibility: s ? "visible" : "hidden" },
+	"aria-hidden": !s
+})] });
+//#endregion
+export { o as default };

package/dist/components/organisms/gallery/full-screen-viewer/FullscreenViewer.css

@@ -0,0 +1 @@
+.cl-fullscreen-viewer{width:100%;height:100%;z-index:var(--cl-z-index-modal);background-color:var(--cl-shadow-background-deep);justify-content:center;align-items:center;animation:.4s cl-fade-in;display:flex;position:fixed;top:0;left:0}.cl-fullscreen-viewer_closing{animation:.4s cl-fade-out}

package/dist/components/organisms/gallery/full-screen-viewer/FullscreenViewer.d.ts

@@ -0,0 +1,11 @@
+import { GalleryItem } from '../../../../types';
+import { FC } from 'react';
+interface FullscreenViewerProps {
+    images: GalleryItem[];
+    currentIndex: number;
+    isOpen: boolean;
+    onClose: () => void;
+    onNavigate: (index: number) => void;
+}
+declare const FullscreenViewer: FC<FullscreenViewerProps>;
+export default FullscreenViewer;

package/dist/components/organisms/gallery/full-screen-viewer/FullscreenViewer2.js

@@ -0,0 +1,48 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import t from "../../../atoms/portal/Portal.js";
+import { useIsMounted as n } from "../../../../hooks/use-is-mounted/use-is-mounted.js";
+import { useKeyPress as r } from "../../../../hooks/use-key-press/use-key-press.js";
+import { useModalFocusTrap as i } from "../../../../hooks/use-modal-focus-trap/use-modal-focus-trap.js";
+import './FullscreenViewer.css';/* empty css                 */
+import { getFullscreenImageProps as a } from "../Gallery.helpers.js";
+import o from "../viewer-close-button/ViewerCloseButton2.js";
+import s from "../viewer-overlay/ViewerOverlay2.js";
+import { useEffect as c, useMemo as l, useRef as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/full-screen-viewer/FullscreenViewer.tsx
+var p = ({ images: p, currentIndex: m, isOpen: h, onClose: g, onNavigate: _ }) => {
+	let v = u(null), y = n(h, 300), b = y && !h;
+	i({
+		modalRef: v,
+		isOpened: h
+	}), r({
+		keyCode: "Escape",
+		ref: v,
+		onKeyPress: g
+	}), c(() => {
+		let e = (e) => {
+			e.code === "ArrowLeft" && m > 0 ? _(m - 1) : e.code === "ArrowRight" && m < p.length - 1 && _(m + 1);
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		m,
+		p.length,
+		_
+	]);
+	let x = p[m], S = l(() => x ? a(x) : null, [x]);
+	return !y || !x || !S ? null : /* @__PURE__ */ d(t, { children: /* @__PURE__ */ f("div", {
+		ref: v,
+		className: e(["cl-fullscreen-viewer", { "cl-fullscreen-viewer_closing": b }]),
+		"data-testid": "fullscreen-image-viewer",
+		children: [/* @__PURE__ */ d(o, { onClose: g }), /* @__PURE__ */ d(s, {
+			fullscreenImageProps: S,
+			caption: x.caption,
+			currentIndex: m,
+			totalImages: p.length,
+			onClose: g,
+			onNavigate: _
+		})]
+	}) });
+};
+//#endregion
+export { p as default };

package/dist/components/organisms/gallery/gallery-image-item/GalleryImageItem.css

@@ -0,0 +1 @@
+.cl-gallery__item{overflow:hidden}.cl-gallery__item_fullscreen{cursor:pointer}

package/dist/components/organisms/gallery/gallery-image-item/GalleryImageItem.d.ts

@@ -0,0 +1,10 @@
+import { GalleryItem } from '../../../../types';
+import { FC } from 'react';
+interface GalleryImageItemProps {
+    item: GalleryItem;
+    index: number;
+    enableFullscreen: boolean;
+    onOpenViewer?: (index: number, element: HTMLElement) => void;
+}
+declare const GalleryImageItem: FC<GalleryImageItemProps>;
+export default GalleryImageItem;

package/dist/components/organisms/gallery/gallery-image-item/GalleryImageItem2.js

@@ -0,0 +1,17 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import t from "../../../atoms/image/Image2.js";
+import './GalleryImageItem.css';/* empty css                 */
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/gallery-image-item/GalleryImageItem.tsx
+var r = ({ item: r, index: i, enableFullscreen: a, onOpenViewer: o }) => /* @__PURE__ */ n("div", {
+	className: e(["cl-gallery__item", { "cl-gallery__item_fullscreen": a }]),
+	onClick: (e) => {
+		a && o && o(i, e.currentTarget);
+	},
+	onKeyDown: (e) => {
+		a && o && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), o(i, e.currentTarget));
+	},
+	children: /* @__PURE__ */ n(t, { ...r })
+});
+//#endregion
+export { r as default };

package/dist/components/organisms/gallery/hooks/use-carousel-scroll.d.ts

@@ -0,0 +1,10 @@
+import { GalleryMode } from '../../../../types';
+import { RefObject } from 'react';
+interface CarouselScrollState {
+    showPrev: boolean;
+    showNext: boolean;
+    scrollForward: () => void;
+    scrollBackward: () => void;
+}
+export declare const useCarouselScroll: (containerRef: RefObject<HTMLDivElement | null>, layout: GalleryMode) => CarouselScrollState;
+export {};

package/dist/components/organisms/gallery/hooks/use-carousel-scroll.js

@@ -0,0 +1,50 @@
+import { useCallback as e, useEffect as t, useState as n } from "react";
+//#region src/components/organisms/gallery/hooks/use-carousel-scroll.ts
+var r = (r, i) => {
+	let [a, o] = n(!1), [s, c] = n(!1), l = e(() => {
+		let e = r.current;
+		if (!e) return;
+		let { scrollLeft: t, scrollWidth: n, clientWidth: i } = e;
+		if (n <= i) {
+			o(!1), c(!1);
+			return;
+		}
+		o(t > 1), c(t < n - i - 1);
+	}, [r]);
+	return t(() => {
+		if (i !== "carousel") {
+			o(!1), c(!1);
+			return;
+		}
+		let e = r.current;
+		if (!e) return;
+		l();
+		let t = new ResizeObserver(l);
+		return t.observe(e), e.addEventListener("scroll", l), () => {
+			e.removeEventListener("scroll", l), t.disconnect();
+		};
+	}, [
+		i,
+		r,
+		l
+	]), {
+		showPrev: a,
+		showNext: s,
+		scrollForward: e(() => {
+			let e = r.current;
+			e && e.scrollBy({
+				left: e.clientWidth,
+				behavior: "smooth"
+			});
+		}, [r]),
+		scrollBackward: e(() => {
+			let e = r.current;
+			e && e.scrollBy({
+				left: -e.clientWidth,
+				behavior: "smooth"
+			});
+		}, [r])
+	};
+};
+//#endregion
+export { r as useCarouselScroll };

package/dist/components/organisms/gallery/hooks/use-fullscreen-viewer.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+interface FullscreenViewerState {
+    isViewerOpen: boolean;
+    currentImageIndex: number;
+    triggerRef: RefObject<HTMLElement | null>;
+    openViewer: (index: number, element: HTMLElement) => void;
+    closeViewer: () => void;
+    handleNavigate: (index: number) => void;
+}
+export declare const useFullscreenViewer: () => FullscreenViewerState;
+export {};

package/dist/components/organisms/gallery/hooks/use-fullscreen-viewer.js

@@ -0,0 +1,23 @@
+import { useCallback as e, useRef as t, useState as n } from "react";
+//#region src/components/organisms/gallery/hooks/use-fullscreen-viewer.ts
+var r = () => {
+	let [r, i] = n(!1), [a, o] = n(0), s = t(null);
+	return {
+		isViewerOpen: r,
+		currentImageIndex: a,
+		triggerRef: s,
+		openViewer: e((e, t) => {
+			s.current = t, o(e), i(!0);
+		}, []),
+		closeViewer: e(() => {
+			i(!1), setTimeout(() => {
+				s.current?.focus(), s.current = null;
+			}, 300);
+		}, []),
+		handleNavigate: e((e) => {
+			o(e);
+		}, [])
+	};
+};
+//#endregion
+export { r as useFullscreenViewer };

package/dist/components/organisms/gallery/viewer-close-button/ViewerCloseButton.css

@@ -0,0 +1 @@
+.cl-fullscreen-viewer__close-button{top:var(--cl-m-gap);right:var(--cl-m-gap);z-index:var(--cl-z-index-menu);position:absolute}.cl-fullscreen-viewer__close-button .cl-icon-button__icon:before{color:#fff!important}@media (width>=640px){.cl-fullscreen-viewer__close-button{top:var(--cl-l-gap);right:var(--cl-l-gap)}}

package/dist/components/organisms/gallery/viewer-close-button/ViewerCloseButton.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export interface ViewerCloseButtonProps {
+    onClose: () => void;
+}
+declare const ViewerCloseButton: FC<ViewerCloseButtonProps>;
+export default ViewerCloseButton;

package/dist/components/organisms/gallery/viewer-close-button/ViewerCloseButton2.js

@@ -0,0 +1,15 @@
+import { ButtonView as e } from "../../../../enums/button-view.js";
+import { IconName as t } from "../../../../enums/icon-name.js";
+import n from "../../../atoms/button/Button2.js";
+import './ViewerCloseButton.css';/* empty css                  */
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/viewer-close-button/ViewerCloseButton.tsx
+var i = ({ onClose: i }) => /* @__PURE__ */ r(n, {
+	view: e.Icon,
+	icon: t.X,
+	label: "Close fullscreen view",
+	onClick: i,
+	className: "cl-fullscreen-viewer__close-button"
+});
+//#endregion
+export { i as default };

package/dist/components/organisms/gallery/viewer-counter/ViewerCounter.css

@@ -0,0 +1 @@
+.cl-fullscreen-viewer__counter{bottom:var(--cl-l-gap);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);position:absolute;left:50%;color:#fff!important}@media (width>=640px){.cl-fullscreen-viewer__counter{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-fullscreen-viewer__counter{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/organisms/gallery/viewer-counter/ViewerCounter.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface ViewerCounterProps {
+    currentIndex: number;
+    totalImages: number;
+}
+declare const ViewerCounter: FC<ViewerCounterProps>;
+export default ViewerCounter;

package/dist/components/organisms/gallery/viewer-counter/ViewerCounter2.js

@@ -0,0 +1,14 @@
+import './ViewerCounter.css';/* empty css              */
+import { jsxs as e } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/viewer-counter/ViewerCounter.tsx
+var t = ({ currentIndex: t, totalImages: n }) => n <= 1 ? null : /* @__PURE__ */ e("span", {
+	className: "cl-fullscreen-viewer__counter",
+	"aria-live": "polite",
+	children: [
+		t + 1,
+		" / ",
+		n
+	]
+});
+//#endregion
+export { t as default };

package/dist/components/organisms/gallery/viewer-image-container/ViewerImageContainer.css

@@ -0,0 +1 @@
+.cl-fullscreen-viewer__image-container{flex-direction:column;align-items:center;max-width:90vw;max-height:90vh;display:flex}.cl-fullscreen-viewer__image-container .cl-image{min-height:0;display:flex}.cl-fullscreen-viewer__image-container .cl-figure{flex-direction:column;min-height:0;display:flex}.cl-fullscreen-viewer__image-container figcaption{color:#fff!important}@media (width>=640px){.cl-fullscreen-viewer__caption{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-fullscreen-viewer__caption{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/organisms/gallery/viewer-image-container/ViewerImageContainer.d.ts

@@ -0,0 +1,8 @@
+import { GalleryItem, ImageProps } from '../../../../types';
+import { FC } from 'react';
+interface ViewerImageContainerProps {
+    fullscreenImageProps: Omit<ImageProps, 'caption'>;
+    caption?: GalleryItem['caption'];
+}
+declare const ViewerImageContainer: FC<ViewerImageContainerProps>;
+export default ViewerImageContainer;

package/dist/components/organisms/gallery/viewer-image-container/ViewerImageContainer2.js

@@ -0,0 +1,14 @@
+import e from "../../../atoms/image/Image2.js";
+import './ViewerImageContainer.css';/* empty css                     */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/viewer-image-container/ViewerImageContainer.tsx
+var n = ({ fullscreenImageProps: n, caption: r }) => /* @__PURE__ */ t("div", {
+	className: "cl-fullscreen-viewer__image-container",
+	children: /* @__PURE__ */ t(e, {
+		...n,
+		caption: r,
+		loading: "eager"
+	})
+});
+//#endregion
+export { n as default };

package/dist/components/organisms/gallery/viewer-navigation/ViewerNavigation.css

@@ -0,0 +1 @@
+.cl-fullscreen-viewer__nav-button{height:90%;z-index:var(--cl-z-index-base);position:absolute;top:5%}.cl-fullscreen-viewer__nav-button .cl-icon-button__icon:before{color:#fff!important}.cl-fullscreen-viewer__nav-button_prev{left:var(--cl-l-gap)}.cl-fullscreen-viewer__nav-button_next{right:var(--cl-l-gap)}

package/dist/components/organisms/gallery/viewer-navigation/ViewerNavigation.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface ViewerNavigationProps {
+    currentIndex: number;
+    totalImages: number;
+    onNavigate: (index: number) => void;
+}
+declare const ViewerNavigation: FC<ViewerNavigationProps>;
+export default ViewerNavigation;

package/dist/components/organisms/gallery/viewer-navigation/ViewerNavigation2.js

@@ -0,0 +1,29 @@
+import { ButtonView as e } from "../../../../enums/button-view.js";
+import { IconName as t } from "../../../../enums/icon-name.js";
+import { getClassName as n } from "../../../../utils/get-class-name.js";
+import r from "../../../atoms/button/Button2.js";
+import './ViewerNavigation.css';/* empty css                 */
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/viewer-navigation/ViewerNavigation.tsx
+var s = ({ currentIndex: s, totalImages: c, onNavigate: l }) => {
+	let u = s > 0, d = s < c - 1, f = () => {
+		l(s - 1);
+	}, p = () => {
+		l(s + 1);
+	}, m = n(["cl-fullscreen-viewer__nav-button", "cl-fullscreen-viewer__nav-button_prev"]), h = n(["cl-fullscreen-viewer__nav-button", "cl-fullscreen-viewer__nav-button_next"]);
+	return /* @__PURE__ */ o(i, { children: [u && /* @__PURE__ */ a(r, {
+		view: e.Icon,
+		icon: t.ChevronLeft,
+		label: "Previous image",
+		onClick: f,
+		className: m
+	}), d && /* @__PURE__ */ a(r, {
+		view: e.Icon,
+		icon: t.ChevronRight,
+		label: "Next image",
+		onClick: p,
+		className: h
+	})] });
+};
+//#endregion
+export { s as default };

package/dist/components/organisms/gallery/viewer-overlay/ViewerOverlay.css

@@ -0,0 +1 @@
+.cl-fullscreen-viewer__overlay{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}

package/dist/components/organisms/gallery/viewer-overlay/ViewerOverlay.d.ts

@@ -0,0 +1,12 @@
+import { GalleryItem, ImageProps } from '../../../../types';
+import { FC } from 'react';
+export interface ViewerOverlayProps {
+    fullscreenImageProps: Omit<ImageProps, 'caption'>;
+    caption?: GalleryItem['caption'];
+    currentIndex: number;
+    totalImages: number;
+    onClose: () => void;
+    onNavigate: (index: number) => void;
+}
+declare const ViewerOverlay: FC<ViewerOverlayProps>;
+export default ViewerOverlay;

package/dist/components/organisms/gallery/viewer-overlay/ViewerOverlay2.js

@@ -0,0 +1,33 @@
+import e from "../viewer-counter/ViewerCounter2.js";
+import t from "../viewer-image-container/ViewerImageContainer2.js";
+import n from "../viewer-navigation/ViewerNavigation2.js";
+import './ViewerOverlay.css';/* empty css              */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/organisms/gallery/viewer-overlay/ViewerOverlay.tsx
+var a = ({ fullscreenImageProps: a, caption: o, currentIndex: s, totalImages: c, onClose: l, onNavigate: u }) => /* @__PURE__ */ i("div", {
+	className: "cl-fullscreen-viewer__overlay",
+	onClick: (e) => {
+		e.target === e.currentTarget && l();
+	},
+	onKeyDown: (e) => {
+		(e.key === "Enter" || e.key === " ") && e.target === e.currentTarget && (e.preventDefault(), l());
+	},
+	"data-testid": "viewer-overlay",
+	children: [
+		/* @__PURE__ */ r(t, {
+			fullscreenImageProps: a,
+			caption: o
+		}),
+		/* @__PURE__ */ r(e, {
+			currentIndex: s,
+			totalImages: c
+		}),
+		/* @__PURE__ */ r(n, {
+			currentIndex: s,
+			totalImages: c,
+			onNavigate: u
+		})
+	]
+});
+//#endregion
+export { a as default };

package/dist/components/organisms/grid/checkbox/GridCheckbox2.js

@@ -1,5 +1,5 @@
-import { getClassName as e } from "../../../../utils/get-class-name.js";
-import { IconName as t } from "../../../../enums/icon-name.js";
+import { IconName as e } from "../../../../enums/icon-name.js";
+import { getClassName as t } from "../../../../utils/get-class-name.js";
 import n from "../../../atoms/label/Label2.js";
 import { useElementIds as r } from "../../../../hooks/use-element-ids/use-element-ids.js";
 import './GridCheckbox.css';/* empty css             */
@@ -8,7 +8,7 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
 var o = ({ name: o, label: s, disabled: c, required: l = !1, onChange: u, checked: d = !1, ...f }) => {
 	let { elementId: p } = r(f?.id);
 	return /* @__PURE__ */ a("div", {
-		className: e(["cl-grid-checkbox", {
+		className: t(["cl-grid-checkbox", {
 			"cl-grid-checkbox_disabled": !!c,
 			"cl-grid-checkbox_checked": !!d
 		}]),
@@ -27,7 +27,7 @@ var o = ({ name: o, label: s, disabled: c, required: l = !1, onChange: u, checke
 			inputId: p,
 			isTextHidden: !0,
 			iconPosition: "left",
-			icon: d ? t.CheckSquare : t.Square
+			icon: d ? e.CheckSquare : e.Square
 		})]
 	});
 };

package/dist/components/organisms/index.d.ts

@@ -1,5 +1,7 @@
 export { default as Dialog } from './dialog/Dialog';
 export { default as Form } from './form/Form';
+export { default as Gallery } from './gallery/Gallery';
 export { default as Grid } from './grid/Grid';
 export { default as Menu } from './menu/Menu';
+export { default as PreviewCard } from './preview-card/PreviewCard';
 export { default as Tabs } from './tabs/Tabs';

package/dist/components/organisms/menu/Menu2.js

@@ -1,14 +1,14 @@
-import { getClassName as e } from "../../../utils/get-class-name.js";
-import { OrientationMode as t } from "../../../enums/orientation-mode.js";
+import { OrientationMode as e } from "../../../enums/orientation-mode.js";
+import { getClassName as t } from "../../../utils/get-class-name.js";
 import { MenuListItem as n } from "./list-item/MenuListItem2.js";
 import './Menu.css';/* empty css     */
 import { jsx as r } from "react/jsx-runtime";
 //#region src/components/organisms/menu/Menu.tsx
-var i = ({ items: i = [], mode: a = t.Vertical, openedOn: o = "click", className: s, ...c }) => {
-	let l = e([
+var i = ({ items: i = [], mode: a = e.Vertical, openedOn: o = "click", className: s, ...c }) => {
+	let l = t([
 		"cl-menu-bar",
 		s,
-		{ "cl-menu-bar_vertical": a === t.Vertical }
+		{ "cl-menu-bar_vertical": a === e.Vertical }
 	]);
 	return /* @__PURE__ */ r("menu", {
 		...c,