chop-logic-components 4.2.0 → 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.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/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;

package/dist/components/organisms/preview-card/PreviewCard2.js

@@ -0,0 +1,57 @@
+import { LinkTarget as e } from "../../../enums/link-target.js";
+import { getClassName as t } from "../../../utils/get-class-name.js";
+import n from "../../atoms/avatar/Avatar2.js";
+import r from "../../atoms/header/Header2.js";
+import i from "../../atoms/image/Image2.js";
+import a from "../../atoms/tag/Tag2.js";
+import './PreviewCard.css';/* empty css            */
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/organisms/preview-card/PreviewCard.tsx
+var c = ({ link: c, linkTarget: l = e.Self, image: u, title: d, summary: f, authors: p = [], tags: m = [], className: h, ...g }) => {
+	let _ = t(["cl-preview-card", h]), v = l === e.Blank, y = d || "Preview card", b = `View article: ${d}`;
+	return /* @__PURE__ */ s("article", {
+		className: _,
+		"aria-label": y,
+		...g,
+		children: [
+			/* @__PURE__ */ o("a", {
+				href: c,
+				target: l,
+				rel: v ? "noopener noreferrer" : void 0,
+				"aria-label": b,
+				className: "cl-preview-card__image-link",
+				children: /* @__PURE__ */ o(i, {
+					...u,
+					className: "cl-preview-card__image"
+				})
+			}),
+			/* @__PURE__ */ o(r, {
+				as: "h6",
+				className: "cl-preview-card__title",
+				children: d
+			}),
+			f && /* @__PURE__ */ o("p", {
+				className: "cl-preview-card__summary",
+				children: f
+			}),
+			p.length > 0 && /* @__PURE__ */ o("ul", {
+				className: "cl-preview-card__authors",
+				"aria-label": "Authors",
+				children: p.map((e) => /* @__PURE__ */ s("li", {
+					className: "cl-preview-card__author-item",
+					children: [/* @__PURE__ */ o(n, { ...e }), /* @__PURE__ */ o("span", { children: e.name })]
+				}, e.id))
+			}),
+			m.length > 0 && /* @__PURE__ */ o("ul", {
+				className: "cl-preview-card__tags",
+				"aria-label": "Tags",
+				children: m.map((e) => /* @__PURE__ */ o("li", {
+					className: "cl-preview-card__tag-item",
+					children: /* @__PURE__ */ o(a, { ...e })
+				}, e.id))
+			})
+		]
+	});
+};
+//#endregion
+export { c as default };

package/dist/components/organisms/tabs/Tabs2.js

@@ -1,16 +1,16 @@
-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 { TabContent as n } from "./content/TabContent2.js";
 import { TabList as r } from "./list/TabList2.js";
 import './Tabs.css';/* empty css     */
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useState as o } from "react";
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/organisms/tabs/Tabs.tsx
-var s = ({ tabs: s, defaultTabId: c, className: l, mode: u = t.Horizontal, stretched: d = !1, editable: f = !1, extendable: p = !1, extendedTabLabel: m = "New Tab", extendedTabContent: h, onTabTitleChange: g, onTabAdd: _, onTabSelect: v, onTabDelete: y, ...b }) => {
-	let [x, S] = o(s), C = s.length, [w, T] = o(C + 1), E = x.map((e) => e.id), D = E.map((e) => `tabpanel_${e}`), [O, k] = o(c && E.includes(c) ? c : E[0]), A = e([
+var s = ({ tabs: s, defaultTabId: c, className: l, mode: u = e.Horizontal, stretched: d = !1, editable: f = !1, extendable: p = !1, extendedTabLabel: m = "New Tab", extendedTabContent: h, onTabTitleChange: g, onTabAdd: _, onTabSelect: v, onTabDelete: y, ...b }) => {
+	let [x, S] = i(s), C = s.length, [w, T] = i(C + 1), E = x.map((e) => e.id), D = E.map((e) => `tabpanel_${e}`), [O, k] = i(c && E.includes(c) ? c : E[0]), A = t([
 		"cl-tabs",
 		l,
-		{ "cl-tabs_vertical": u === t.Vertical }
+		{ "cl-tabs_vertical": u === e.Vertical }
 	]), j = (e) => {
 		k(e), v?.(e);
 	}, M = (e, t) => {
@@ -22,7 +22,7 @@ var s = ({ tabs: s, defaultTabId: c, className: l, mode: u = t.Horizontal, stret
 		let e = `added-tab-${w}`, t = {
 			id: e,
 			title: m || `Tab ${w}`,
-			content: h || /* @__PURE__ */ i("div", {})
+			content: h || /* @__PURE__ */ a("div", {})
 		};
 		S((e) => [...e, t]), T((e) => e + 1), _?.(), j(e);
 	}, P = (e) => {
@@ -32,10 +32,10 @@ var s = ({ tabs: s, defaultTabId: c, className: l, mode: u = t.Horizontal, stret
 		}
 		y?.(e);
 	};
-	return /* @__PURE__ */ a("div", {
+	return /* @__PURE__ */ o("div", {
 		...b,
 		className: A,
-		children: [/* @__PURE__ */ i(r, {
+		children: [/* @__PURE__ */ a(r, {
 			tabs: x,
 			selectedTabId: O,
 			tabPanelIds: D,
@@ -48,7 +48,7 @@ var s = ({ tabs: s, defaultTabId: c, className: l, mode: u = t.Horizontal, stret
 			extendable: p,
 			onTabAdd: N,
 			onTabDelete: P
-		}), /* @__PURE__ */ i(n, {
+		}), /* @__PURE__ */ a(n, {
 			tabs: x,
 			selectedTabId: O,
 			extendedTabContent: h,

package/dist/components/organisms/tabs/button/TabButton2.js

@@ -1,26 +1,26 @@
-import { getClassName as e } from "../../../../utils/get-class-name.js";
-import { ButtonView as t } from "../../../../enums/button-view.js";
-import { ElementSize as n } from "../../../../enums/element-size.js";
-import { IconName as r } from "../../../../enums/icon-name.js";
-import { OrientationMode as i } from "../../../../enums/orientation-mode.js";
+import { ButtonView as e } from "../../../../enums/button-view.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 { getClassName as i } from "../../../../utils/get-class-name.js";
 import a from "../../../atoms/button/Button2.js";
 import { TabEditInput as o } from "../edit-input/TabEditInput2.js";
 import './TabButton.css';/* empty css          */
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useEffect as u, useId as d, useRef as f, useState as p } from "react";
+import { useEffect as s, useId as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/organisms/tabs/button/TabButton.tsx
 var m = ({ title: m, onTabSelect: h, onTabTitleChange: g, onTabDelete: _, tabId: v, isSelected: y, isDisabled: b = !1, stretched: x = !1, editable: S = !1, extendable: C = !1, tabPanelId: w, mode: T }) => {
-	let [E, D] = p(!1), [O, k] = p(m), A = f(null), j = d(), M = S && !b && y, N = C && !b && !!_ && y, P = M || N, F = e(["cl-tab__wrapper", {
+	let [E, D] = u(!1), [O, k] = u(m), A = l(null), j = c(), M = S && !b && y, N = C && !b && !!_ && y, P = M || N, F = i(["cl-tab__wrapper", {
 		"cl-tab__wrapper_disabled": b,
-		"cl-tab__wrapper_vertical": T === i.Vertical,
+		"cl-tab__wrapper_vertical": T === r.Vertical,
 		"cl-tab__wrapper_selected": y,
 		"cl-tab__wrapper_stretched": x,
 		"cl-tab__wrapper_editable": S,
 		"cl-tab__wrapper_inactive": !y
 	}]);
-	u(() => {
+	s(() => {
 		E && A.current && (A.current.focus(), A.current.select());
-	}, [E]), u(() => {
+	}, [E]), s(() => {
 		k(m);
 	}, [m]);
 	let I = () => {
@@ -38,9 +38,9 @@ var m = ({ title: m, onTabSelect: h, onTabTitleChange: g, onTabDelete: _, tabId:
 	}, H = () => {
 		k(m), D(!1);
 	};
-	return /* @__PURE__ */ c("span", {
+	return /* @__PURE__ */ f("span", {
 		className: F,
-		children: E ? /* @__PURE__ */ c(o, {
+		children: E ? /* @__PURE__ */ f(o, {
 			tabId: v,
 			editValue: O,
 			isEditMode: E,
@@ -50,7 +50,7 @@ var m = ({ title: m, onTabSelect: h, onTabTitleChange: g, onTabDelete: _, tabId:
 			onSave: V,
 			onCancel: H,
 			cancelButtonId: j
-		}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("button", {
+		}) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("button", {
 			role: "tab",
 			id: v,
 			onClick: L,
@@ -59,22 +59,22 @@ var m = ({ title: m, onTabSelect: h, onTabTitleChange: g, onTabDelete: _, tabId:
 			className: "cl-tab",
 			disabled: b,
 			children: O
-		}), P && /* @__PURE__ */ l("span", {
+		}), P && /* @__PURE__ */ p("span", {
 			className: "cl-tab__buttons",
-			children: [M && /* @__PURE__ */ c(a, {
-				view: t.Icon,
-				icon: r.Edit3,
+			children: [M && /* @__PURE__ */ f(a, {
+				view: e.Icon,
+				icon: n.Edit3,
 				onClick: I,
 				label: "Edit tab",
 				tooltip: "Edit tab",
-				iconSize: n.Small
-			}), N && /* @__PURE__ */ c(a, {
-				view: t.Icon,
-				icon: r.Trash2,
+				iconSize: t.Small
+			}), N && /* @__PURE__ */ f(a, {
+				view: e.Icon,
+				icon: n.Trash2,
 				onClick: () => _?.(v),
 				label: "Delete tab",
 				tooltip: "Delete tab",
-				iconSize: n.Small
+				iconSize: t.Small
 			})]
 		})] })
 	});

package/dist/components/organisms/tabs/edit-input/TabEditInput2.js

@@ -3,16 +3,16 @@ import { ElementSize as t } from "../../../../enums/element-size.js";
 import { IconName as n } from "../../../../enums/icon-name.js";
 import r from "../../../atoms/button/Button2.js";
 import './TabEditInput.css';/* empty css             */
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useEffect as o, useRef as s } from "react";
+import { useEffect as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/organisms/tabs/edit-input/TabEditInput.tsx
 var c = ({ tabId: c, isEditMode: l, editValue: u, onInputChange: d, onInputBlur: f, onInputKeyDown: p, onSave: m, onCancel: h, cancelButtonId: g }) => {
-	let _ = s(null);
-	return o(() => {
+	let _ = a(null);
+	return i(() => {
 		l && _.current && (_.current.focus(), _.current.select());
-	}, [l]), /* @__PURE__ */ a("div", {
+	}, [l]), /* @__PURE__ */ s("div", {
 		className: "cl-tab-edit-container",
-		children: [/* @__PURE__ */ i("input", {
+		children: [/* @__PURE__ */ o("input", {
 			ref: _,
 			id: `${c}-input`,
 			type: "text",
@@ -22,15 +22,15 @@ var c = ({ tabId: c, isEditMode: l, editValue: u, onInputChange: d, onInputBlur:
 			onKeyDown: p,
 			className: "cl-tab-edit-container__input",
 			maxLength: 50
-		}), /* @__PURE__ */ a("span", {
+		}), /* @__PURE__ */ s("span", {
 			className: "cl-tab-edit-container__buttons",
-			children: [/* @__PURE__ */ i(r, {
+			children: [/* @__PURE__ */ o(r, {
 				view: e.Icon,
 				icon: n.Check,
 				onClick: m,
 				label: "Save tab title",
 				iconSize: t.Small
-			}), /* @__PURE__ */ i(r, {
+			}), /* @__PURE__ */ o(r, {
 				view: e.Icon,
 				icon: n.X,
 				onClick: h,