chop-logic-components 4.2.0 → 4.4.0

package/dist/components/organisms/dialog/Dialog2.js

@@ -1,6 +1,6 @@
-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 i from "../../atoms/header/Header2.js";
 import a from "../../atoms/portal/Portal.js";
@@ -8,11 +8,11 @@ import { useIsMounted as o } from "../../../hooks/use-is-mounted/use-is-mounted.
 import { useKeyPress as s } from "../../../hooks/use-key-press/use-key-press.js";
 import { useModalFocusTrap as c } from "../../../hooks/use-modal-focus-trap/use-modal-focus-trap.js";
 import './Dialog.css';/* empty css       */
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useRef as d } from "react";
+import { useRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/organisms/dialog/Dialog.tsx
 var f = ({ isOpened: f, onClose: p, title: m, children: h, icon: g, ..._ }) => {
-	let v = o(f), y = v && !f, b = d(null);
+	let v = o(f), y = v && !f, b = l(null);
 	return c({
 		modalRef: b,
 		isOpened: f
@@ -20,28 +20,28 @@ var f = ({ isOpened: f, onClose: p, title: m, children: h, icon: g, ..._ }) => {
 		keyCode: "Escape",
 		ref: b,
 		onKeyPress: p
-	}), v ? /* @__PURE__ */ l(a, { children: /* @__PURE__ */ l("div", {
-		className: e(["cl-dialog", { "cl-dialog_closing": y }]),
-		children: /* @__PURE__ */ u("div", {
+	}), v ? /* @__PURE__ */ u(a, { children: /* @__PURE__ */ u("div", {
+		className: n(["cl-dialog", { "cl-dialog_closing": y }]),
+		children: /* @__PURE__ */ d("div", {
 			ref: b,
 			role: "dialog",
 			"aria-modal": "true",
 			..._,
 			className: "cl-dialog__layout",
 			children: [
-				/* @__PURE__ */ l(r, {
-					icon: n.X,
-					view: t.Icon,
+				/* @__PURE__ */ u(r, {
+					icon: t.X,
+					view: e.Icon,
 					label: "Close modal window",
 					onClick: p,
 					className: "cl-dialog__button"
 				}),
-				/* @__PURE__ */ l("header", { children: /* @__PURE__ */ l(i, {
+				/* @__PURE__ */ u("header", { children: /* @__PURE__ */ u(i, {
 					as: "h3",
 					icon: g,
 					children: m
 				}) }),
-				/* @__PURE__ */ l("div", { children: h })
+				/* @__PURE__ */ u("div", { children: h })
 			]
 		})
 	}) }) : null;

package/dist/components/organisms/form/Form.controller.d.ts

@@ -1,14 +1,22 @@
 import { FormInputParams, FormValues } from '../../../types';
-import { FormEvent, FormEventHandler } from 'react';
-export declare function useFormController({ initialValues, onReset, onSubmit, onClickSubmit, }: {
+import { SubmitEvent, SubmitEventHandler } from 'react';
+interface UseFormControllerParams<TActionState = void> {
     initialValues?: FormValues;
-    onReset?: FormEventHandler<HTMLFormElement>;
-    onSubmit?: FormEventHandler<HTMLFormElement>;
-    onClickSubmit?: (data: FormValues) => void;
-}): {
+    resetOnSuccess?: boolean;
+    onReset?: SubmitEventHandler<HTMLFormElement>;
+    action?: (prevState: TActionState, formData: FormData) => TActionState | Promise<TActionState>;
+    actionInitialState?: TActionState;
+    onActionComplete?: (state: TActionState) => void;
+    onSubmit?: (data: FormValues) => void | Promise<void>;
+}
+interface UseFormControllerReturn {
     handleInputChange: (params: FormInputParams) => void;
-    handleSubmit: (event: FormEvent<HTMLFormElement>) => void;
-    handleReset: (event: FormEvent<HTMLFormElement>) => void;
+    handleReset: (event: SubmitEvent<HTMLFormElement>) => void;
     resetSignal: number;
     valid: boolean;
-};
+    isPending: boolean;
+    formAction?: (formData: FormData) => void;
+    handleSubmit?: (event: SubmitEvent<HTMLFormElement>) => void;
+}
+export declare function useFormController<TActionState = void>({ initialValues, resetOnSuccess, onReset, action, actionInitialState, onActionComplete, onSubmit, }: UseFormControllerParams<TActionState>): UseFormControllerReturn;
+export {};

package/dist/components/organisms/form/Form.controller.js

@@ -1,29 +1,49 @@
 import { getInitialValidationState as e, isFormDataValid as t, updateValidationState as n } from "./Form.helpers.js";
-import { useState as r } from "react";
+import { useActionState as r, useCallback as i, useState as a } from "react";
 //#region src/components/organisms/form/Form.controller.ts
-function i({ initialValues: i, onReset: a, onSubmit: o, onClickSubmit: s }) {
-	let [c, l] = r(i), [u, d] = r(e(i)), [f, p] = r(0);
-	return {
-		handleInputChange: (e) => {
-			l({
-				...c,
-				[e.name]: e.value
-			}), d(n(u, e));
-		},
-		handleSubmit: (e) => {
-			e.preventDefault();
+function o({ initialValues: o, resetOnSuccess: s = !1, onReset: c, action: l, actionInitialState: u, onActionComplete: d, onSubmit: f }) {
+	let [p, m] = a(o), [h, g] = a(e(o)), [_, v] = a(0), [y, b] = a(!1), x = (e) => {
+		let t = {
+			...p,
+			[e.name]: e.value
+		};
+		m(t), g(n(h, e));
+	}, S = i(() => {
+		m(o), v((e) => e + 1), g(e(o));
+	}, [o]), C = (e) => {
+		c?.(e), S();
+	}, w = t(h), [, T, E] = r(async (e, t) => {
+		if (!l) return e;
+		let n = await l(e, t);
+		return d?.(n), s && S(), n;
+	}, u);
+	return l ? {
+		handleInputChange: x,
+		handleReset: C,
+		resetSignal: _,
+		valid: w,
+		isPending: E,
+		formAction: T
+	} : {
+		handleInputChange: x,
+		handleReset: C,
+		resetSignal: _,
+		valid: w,
+		isPending: y,
+		handleSubmit: async (e) => {
+			if (e.preventDefault(), !w || !f) return;
 			let t = {
 				...Object.fromEntries(new FormData(e.target)),
-				...c
+				...p
 			};
-			o?.(e), s?.(t);
-		},
-		handleReset: (e) => {
-			a?.(e), l(i), p(f + 1);
-		},
-		resetSignal: f,
-		valid: t(u)
+			b(!0);
+			try {
+				await f(t), s && S();
+			} finally {
+				b(!1);
+			}
+		}
 	};
 }
 //#endregion
-export { i as useFormController };
+export { o as useFormController };

package/dist/components/organisms/form/Form.css

@@ -1 +1 @@
-.cl-form{align-items:end;gap:var(--cl-l-gap);grid-template-rows:auto;grid-template-columns:auto;display:grid}@media screen and (width>=640px){.cl-form{grid-template-columns:repeat(2,1fr)}}@media screen and (width>=1024px){.cl-form{grid-template-columns:repeat(3,1fr)}}@media screen and (width>=1280px){.cl-form{grid-template-columns:repeat(4,1fr)}}.cl-form__buttons{padding-top:var(--cl-l-gap);grid-column:1/-1;justify-content:space-between;align-items:center;display:flex}
+.cl-form{align-items:end;gap:var(--cl-l-gap);grid-template-rows:auto;grid-template-columns:auto;display:grid}@media screen and (width>=640px){.cl-form{grid-template-columns:repeat(2,1fr)}}@media screen and (width>=1024px){.cl-form{grid-template-columns:repeat(3,1fr)}}@media screen and (width>=1280px){.cl-form{grid-template-columns:repeat(4,1fr)}}.cl-form__buttons{padding-top:var(--cl-l-gap);grid-column:1/-1;justify-content:space-between;align-items:center;display:flex}.cl-form_pending{opacity:.7;pointer-events:none}

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

@@ -1,48 +1,57 @@
-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({
+var l = ({ children: l, initialValues: u, onReset: d, onSubmit: f, action: p, actionInitialState: m, onActionComplete: h, resetOnSuccess: g = !1, hasReset: _ = !0, className: v }) => {
+	let { handleInputChange: y, handleSubmit: b, handleReset: x, formAction: S, resetSignal: C, valid: w, isPending: T } = a({
 		initialValues: u,
+		resetOnSuccess: g,
 		onReset: d,
 		onSubmit: f,
-		onClickSubmit: p
-	}), S = e(["cl-form", h]), C = c(() => ({
-		onChangeFormInput: _,
+		action: p,
+		actionInitialState: m,
+		onActionComplete: h
+	}), E = n([
+		"cl-form",
+		v,
+		{ "cl-form_pending": T }
+	]), D = o(() => ({
+		onChangeFormInput: y,
 		initialValues: u,
-		resetSignal: b
+		resetSignal: C,
+		isPending: T
 	}), [
-		_,
+		y,
 		u,
-		b
+		C,
+		T
 	]);
-	return /* @__PURE__ */ o("form", {
-		onSubmit: v,
-		onReset: y,
-		...g,
-		className: S,
-		children: /* @__PURE__ */ s(i.Provider, {
-			value: C,
-			children: [l, /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ s("form", {
+		...p ? { action: S } : { onSubmit: b },
+		onReset: x,
+		className: E,
+		children: /* @__PURE__ */ c(i.Provider, {
+			value: D,
+			children: [l, /* @__PURE__ */ c("div", {
 				className: "cl-form__buttons",
-				children: [m && /* @__PURE__ */ o(r, {
+				children: [_ && /* @__PURE__ */ s(r, {
 					type: "reset",
-					text: "Reset",
-					icon: n.Delete,
-					view: t.Secondary
-				}), /* @__PURE__ */ o(r, {
+					text: "Clear",
+					icon: t.Trash,
+					view: e.Secondary,
+					disabled: T
+				}), /* @__PURE__ */ s(r, {
 					type: "submit",
 					text: "Submit",
-					icon: n.ArrowRight,
-					extended: !m,
-					disabled: !x
+					icon: t.ArrowRight,
+					extended: !_,
+					disabled: !w || T
 				})]
 			})]
 		})

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

@@ -4,7 +4,7 @@ var e = (e) => {
 	let t, n = 0;
 	for (let r of e) {
 		let e = r.descriptor?.trim();
-		if (e && e.endsWith("w")) {
+		if (e?.endsWith("w")) {
 			let i = e.slice(0, -1), a = Number.parseInt(i, 10);
 			!Number.isNaN(a) && a > n && (n = a, t = r);
 		}
@@ -26,4 +26,4 @@ var e = (e) => {
 	};
 };
 //#endregion
-export { t as getFullscreenImageProps };
+export { t as getFullscreenImageProps, e as getLargestImageSource };

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

@@ -5,11 +5,11 @@ 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 { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useRef as c } from "react";
+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 = c(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([
+	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" },
@@ -19,31 +19,31 @@ var l = ({ images: l = [], layout: u = "grid", columns: d = 3, rows: f, gap: p,
 		"--gallery-rows": f,
 		"--gallery-gap": p
 	};
-	return /* @__PURE__ */ s("section", {
+	return /* @__PURE__ */ c("section", {
 		className: k,
 		"aria-label": m ?? g ?? "Image gallery",
 		title: g,
 		...v,
 		children: [
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ s("div", {
 				ref: y,
 				className: A,
 				style: j,
 				tabIndex: u === "carousel" ? 0 : void 0,
-				children: l.map((e, t) => /* @__PURE__ */ o(r, {
+				children: l.map((e, t) => /* @__PURE__ */ s(r, {
 					item: e,
 					index: t,
 					enableFullscreen: _,
 					onOpenViewer: S
 				}, e.src))
 			}),
-			u === "carousel" && /* @__PURE__ */ o(t, {
+			u === "carousel" && /* @__PURE__ */ s(t, {
 				showPrev: T,
 				showNext: E,
 				onScrollBackward: O,
 				onScrollForward: D
 			}),
-			_ && /* @__PURE__ */ o(n, {
+			_ && /* @__PURE__ */ s(n, {
 				images: l,
 				currentIndex: x,
 				isOpen: b,

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

@@ -7,11 +7,11 @@ 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 { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useEffect as u, useMemo as d, useRef as f } from "react";
+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 = f(null), y = n(h, 300), b = y && !h;
+	let v = u(null), y = n(h, 300), b = y && !h;
 	i({
 		modalRef: v,
 		isOpened: h
@@ -19,7 +19,7 @@ var p = ({ images: p, currentIndex: m, isOpen: h, onClose: g, onNavigate: _ }) =
 		keyCode: "Escape",
 		ref: v,
 		onKeyPress: g
-	}), u(() => {
+	}), c(() => {
 		let e = (e) => {
 			e.code === "ArrowLeft" && m > 0 ? _(m - 1) : e.code === "ArrowRight" && m < p.length - 1 && _(m + 1);
 		};
@@ -29,12 +29,12 @@ var p = ({ images: p, currentIndex: m, isOpen: h, onClose: g, onNavigate: _ }) =
 		p.length,
 		_
 	]);
-	let x = p[m], S = d(() => x ? a(x) : null, [x]);
-	return !y || !x || !S ? null : /* @__PURE__ */ c(t, { children: /* @__PURE__ */ l("div", {
+	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__ */ c(o, { onClose: g }), /* @__PURE__ */ c(s, {
+		children: [/* @__PURE__ */ d(o, { onClose: g }), /* @__PURE__ */ d(s, {
 			fullscreenImageProps: S,
 			caption: x.caption,
 			currentIndex: m,

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

@@ -1,6 +1,6 @@
-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 './ViewerNavigation.css';/* empty css                 */
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
@@ -10,16 +10,16 @@ var s = ({ currentIndex: s, totalImages: c, onNavigate: l }) => {
 		l(s - 1);
 	}, p = () => {
 		l(s + 1);
-	}, m = e(["cl-fullscreen-viewer__nav-button", "cl-fullscreen-viewer__nav-button_prev"]), h = e(["cl-fullscreen-viewer__nav-button", "cl-fullscreen-viewer__nav-button_next"]);
+	}, 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: t.Icon,
-		icon: n.ChevronLeft,
+		view: e.Icon,
+		icon: t.ChevronLeft,
 		label: "Previous image",
 		onClick: f,
 		className: m
 	}), d && /* @__PURE__ */ a(r, {
-		view: t.Icon,
-		icon: n.ChevronRight,
+		view: e.Icon,
+		icon: t.ChevronRight,
 		label: "Next image",
 		onClick: p,
 		className: h

package/dist/components/organisms/grid/Grid.controller.js

@@ -17,10 +17,12 @@ var n = ({ data: n, id: r, onSelect: i }) => {
 			d([]);
 		},
 		handleSelectRowById: (e) => {
-			d([...o, e]);
+			let t = [...o, e];
+			d(t);
 		},
 		handleDeselectRowById: (e) => {
-			d(o.filter((t) => t !== e));
+			let t = o.filter((t) => t !== e);
+			d(t);
 		}
 	};
 };

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

@@ -3,4 +3,5 @@ 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,

package/dist/components/organisms/menu/list-item/MenuListItem2.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 { MenuLeaf as n } from "../leaf/MenuLeaf2.js";
 import { SubMenu as r } from "../sub-menu/SubMenu2.js";
 import './MenuListItem.css';/* empty css             */
-import { jsx as i } from "react/jsx-runtime";
-import { useState as a } from "react";
+import { useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/components/organisms/menu/list-item/MenuListItem.tsx
 var o = ({ item: s, mode: c, openedOn: l }) => {
-	let u = !s?.nestedItems?.length, [d, f] = a(!1), p = e(["cl-sub-menu-bar", { "cl-sub-menu-bar_horizontal": c === t.Horizontal }]);
-	return u ? /* @__PURE__ */ i(n, { item: s }) : /* @__PURE__ */ i(r, {
+	let u = !s?.nestedItems?.length, [d, f] = i(!1), p = t(["cl-sub-menu-bar", { "cl-sub-menu-bar_horizontal": c === e.Horizontal }]);
+	return u ? /* @__PURE__ */ a(n, { item: s }) : /* @__PURE__ */ a(r, {
 		item: s,
 		isSubMenuOpened: d,
 		toggleSubMenu: () => {
@@ -22,11 +22,11 @@ var o = ({ item: s, mode: c, openedOn: l }) => {
 		},
 		mode: c,
 		openedOn: l,
-		children: /* @__PURE__ */ i("ul", {
+		children: /* @__PURE__ */ a("ul", {
 			className: p,
 			role: "menu",
 			"aria-label": s.label,
-			children: s?.nestedItems?.map((e) => /* @__PURE__ */ i(o, {
+			children: s?.nestedItems?.map((e) => /* @__PURE__ */ a(o, {
 				item: e,
 				mode: c,
 				openedOn: l

package/dist/components/organisms/menu/sub-menu/SubMenu2.js

@@ -1,25 +1,25 @@
-import { getClassName as e } from "../../../../utils/get-class-name.js";
-import { ElementSize as t } from "../../../../enums/element-size.js";
-import { IconName as n } from "../../../../enums/icon-name.js";
-import { OrientationMode as r } from "../../../../enums/orientation-mode.js";
+import { ElementSize as e } from "../../../../enums/element-size.js";
+import { IconName as t } from "../../../../enums/icon-name.js";
+import { OrientationMode as n } from "../../../../enums/orientation-mode.js";
+import { getClassName as r } from "../../../../utils/get-class-name.js";
 import i from "../../../atoms/icon/Icon2.js";
 import { useClickOutside as a } from "../../../../hooks/use-click-outside/use-click-outside.js";
 import './SubMenu.css';/* empty css        */
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useRef as c } from "react";
+import { useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/organisms/menu/sub-menu/SubMenu.tsx
 var l = ({ item: l, isSubMenuOpened: u, toggleSubMenu: d, closeSubMenu: f, openSubMenu: p, openedOn: m, mode: h, children: g }) => {
-	let { icon: _, link: v, label: y } = l, b = c(null), x = c(null), S = e(["cl-sub-menu__icon", { "cl-sub-menu__icon_opened": u }]), C = v ? /* @__PURE__ */ s("a", {
+	let { icon: _, link: v, label: y } = l, b = o(null), x = o(null), S = r(["cl-sub-menu__icon", { "cl-sub-menu__icon_opened": u }]), C = v ? /* @__PURE__ */ c("a", {
 		href: v,
 		target: "_blank",
 		rel: "noreferrer",
-		children: [/* @__PURE__ */ o(i, {
+		children: [/* @__PURE__ */ s(i, {
 			name: _,
-			size: t.Small
+			size: e.Small
 		}), y]
-	}) : /* @__PURE__ */ s("span", { children: [/* @__PURE__ */ o(i, {
+	}) : /* @__PURE__ */ c("span", { children: [/* @__PURE__ */ s(i, {
 		name: _,
-		size: t.Small
+		size: e.Small
 	}), y] }), w = (e) => {
 		e.stopPropagation(), e.key === " " && d();
 	};
@@ -27,9 +27,9 @@ var l = ({ item: l, isSubMenuOpened: u, toggleSubMenu: d, closeSubMenu: f, openS
 		ref: b,
 		dependentRef: x,
 		onClickOutsideHandler: () => {
-			h !== r.Vertical && f();
+			h !== n.Vertical && f();
 		}
-	}), /* @__PURE__ */ s("li", {
+	}), /* @__PURE__ */ c("li", {
 		className: "cl-sub-menu",
 		tabIndex: 0,
 		role: "menuitem",
@@ -39,15 +39,15 @@ var l = ({ item: l, isSubMenuOpened: u, toggleSubMenu: d, closeSubMenu: f, openS
 		onMouseEnter: m === "hover" ? p : void 0,
 		onMouseLeave: m === "hover" ? f : void 0,
 		ref: b,
-		children: [/* @__PURE__ */ s("span", {
+		children: [/* @__PURE__ */ c("span", {
 			className: "cl-sub-menu__text",
 			ref: x,
 			onClick: d,
 			onKeyDown: w,
-			children: [C, /* @__PURE__ */ o(i, {
-				name: n.ChevronDown,
+			children: [C, /* @__PURE__ */ s(i, {
+				name: t.ChevronDown,
 				className: S,
-				size: t.Small
+				size: e.Small
 			})]
 		}), u && g]
 	});

package/dist/components/organisms/preview-card/PreviewCard.css

@@ -0,0 +1 @@
+.cl-preview-card{border:var(--cl-light-border);border-radius:var(--cl-border-radius);background-color:var(--cl-surface-a0);color:var(--cl-base-font-color);font-family:var(--cl-core-font);box-shadow:var(--cl-box-shadow);flex-direction:column;width:30rem;display:flex;overflow:hidden}.cl-preview-card__image{border-bottom:var(--cl-light-border);border-radius:0!important}.cl-preview-card__image-link{line-height:0;text-decoration:none;display:block}.cl-preview-card__image-link:focus{outline:2px solid var(--cl-accent-a0);outline-offset:-2px}.cl-preview-card__title{padding:var(--cl-l-gap) var(--cl-l-gap) var(--cl-s-gap);margin:0}.cl-preview-card__summary{padding:0 var(--cl-l-gap) var(--cl-m-gap);margin:0}.cl-preview-card__authors{gap:var(--cl-m-gap);padding:var(--cl-m-gap) var(--cl-l-gap);flex-wrap:wrap;margin:0;list-style:none;display:flex}.cl-preview-card__author-item{align-items:center;gap:var(--cl-s-gap);font-style:italic;display:inline-flex}.cl-preview-card__tags{gap:var(--cl-s-gap);padding:var(--cl-m-gap) var(--cl-l-gap) var(--cl-l-gap);flex-wrap:wrap;margin:0;list-style:none;display:flex}.cl-preview-card__tag-item{display:inline-flex}.cl-preview-card__summary,.cl-preview-card__author-item{font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.2}@media (width>=640px){.cl-preview-card__summary,.cl-preview-card__author-item{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-preview-card__summary,.cl-preview-card__author-item{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/organisms/preview-card/PreviewCard.d.ts

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