chop-logic-components 4.0.0 → 4.0.3

package/README.md

@@ -13,10 +13,15 @@
 [![Code Style: Prettier](https://img.shields.io/badge/Code_Style-Prettier-ff69b4.svg?style=flat)](https://prettier.io)
 [![Keep a changelog](https://img.shields.io/badge/Keep%20a%20changelog-1.1.0-E05735?logo=keep-a-changelog&labelColor)](https://keepachangelog.com/en/1.1.0/)
 [![Semantic versioning](https://img.shields.io/badge/SemVer-2.0.0-3F4551?logo=semver&labelColor)](https://semver.org/spec/v2.0.0)
+[![Mutation testing badge](https://img.shields.io/endpoint?style=flat&url=https%3A%2F%2Fbadge-api.stryker-mutator.io%2Fgithub.com%2FChopLogic%2Fchop-logic-components%2Fmain)](https://dashboard.stryker-mutator.io/reports/github.com/ChopLogic/chop-logic-components/main)
 
 Welcome to **Chop Logic Components**, a React components library packed with a variety of **styled
 components** and **custom hooks** that are easy to integrate into any React project.
 
+## 📚 About This Library
+
+Chop Logic Components follows **Atomic Design** principles with **Fully Typed TypeScript** components. All styling uses **pure CSS with CSS variables** (BEM naming convention with `cl-` prefix) for consistent theming across light and dark modes. Built for developer productivity with comprehensive Storybook documentation and accessibility-first approach.
+
 ## ✨ Features
 
 Chop Logic is designed to speed up development by providing reusable, accessible, and highly customizable components.
@@ -60,6 +65,7 @@ yarn add chop-logic-components
 | `test`            | Runs unit tests using Vitest in watch mode (interactive).                                                                                             |
 | `test:ci`         | Runs tests once in CI mode and allows empty test sets.                                                                                                |
 | `coverage`        | Runs tests and generates a coverage report using Vitest.                                                                                              |
+| `test:mutation`   | Runs mutation testing using Stryker to verify test quality.                                                                                           |
 | `release:version` | Bumps the version (`patch`, `minor`, or `major`), commits the change, creates a Git tag, and pushes to `main`. Usage: `npm run release:version patch` |
 
 ## 🛠 Contributing

package/dist/components/atoms/button/Button.css

@@ -1 +1 @@
-.cl-button{font-size:var(--cl-typography-base-mobile);padding:var(--cl-m-gap);display:flex;align-items:center;justify-content:center;width:fit-content}.cl-button:focus-visible{outline:var(--cl-outline-border);outline-offset:var(--cl-s-gap)}.cl-button[disabled]{pointer-events:none;opacity:.5}.cl-button_extended{width:100%}@media(min-width:640px){.cl-button{font-size:var(--cl-typography-base-tablet);padding:var(--cl-m-gap) var(--cl-l-gap)}}@media(min-width:1024px){.cl-button{font-size:var(--cl-typography-base-desktop)}}
+.cl-button{font-size:var(--cl-typography-base-mobile);padding:var(--cl-m-gap);justify-content:center;align-items:center;width:fit-content;display:flex}.cl-button:focus-visible{outline:var(--cl-outline-border);outline-offset:var(--cl-s-gap)}.cl-button[disabled]{pointer-events:none;opacity:.5}.cl-button_extended{width:100%}@media (width>=640px){.cl-button{font-size:var(--cl-typography-base-tablet);padding:var(--cl-m-gap) var(--cl-l-gap)}}@media (width>=1024px){.cl-button{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/atoms/button/Button2.js

@@ -0,0 +1,51 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { withTooltip as t } from "../../hocs/with-tooltip/with-tooltip.js";
+import './Button.css';/* empty css       */
+import { ButtonView as n } from "../../../enums/button-view.js";
+import { IconButton as r } from "./icon-button/IconButton2.js";
+import { InnerButton as i } from "./inner-button/InnerButton2.js";
+import { PrimaryButton as a } from "./primary-button/PrimaryButton2.js";
+import { SecondaryButton as o } from "./secondary-button/SecondaryButton2.js";
+import { jsx as s } from "react/jsx-runtime";
+var c = t(({ text: t, icon: c, tooltip: l, extended: u = !1, view: d = n.Primary, label: f, className: p, iconSize: m, ...h }) => {
+	let g = e([
+		p,
+		"cl-button",
+		{ "cl-button_extended": u }
+	]);
+	switch (d) {
+		case n.Primary: return /* @__PURE__ */ s(a, {
+			className: g,
+			icon: c,
+			text: t,
+			"aria-label": f,
+			iconSize: m,
+			...h
+		});
+		case n.Secondary: return /* @__PURE__ */ s(o, {
+			className: g,
+			icon: c,
+			text: t,
+			"aria-label": f,
+			iconSize: m,
+			...h
+		});
+		case n.Icon: return /* @__PURE__ */ s(r, {
+			label: f,
+			icon: c,
+			iconSize: m,
+			...h,
+			className: p
+		});
+		case n.Inner: return /* @__PURE__ */ s(i, {
+			label: f,
+			icon: c,
+			iconSize: m,
+			...h,
+			className: p
+		});
+		default: return null;
+	}
+});
+//#endregion
+export { c as default };

package/dist/components/atoms/button/icon-button/IconButton.css

@@ -1 +1 @@
-.cl-icon-button{border:none;cursor:pointer;padding:var(--cl-m-gap);border-radius:50%;background:transparent;width:fit-content;transition:all .15s ease}.cl-icon-button__icon:before{color:var(--cl-base-font-color)}.cl-icon-button:hover{transform:scale(1.1);filter:drop-shadow(0 2px 4px hsla(0,0%,0%,.15))}.cl-icon-button:hover .cl-icon-button__icon:before{color:var(--cl-accent-a0)}.cl-icon-button:active{transform:scale(.95)}.cl-icon-button[disabled]{pointer-events:none;opacity:.5}
+.cl-icon-button{cursor:pointer;padding:var(--cl-m-gap);background:0 0;border:none;border-radius:50%;width:fit-content;transition:all .15s}.cl-icon-button__icon:before{color:var(--cl-base-font-color)}.cl-icon-button:hover{filter:drop-shadow(0 2px 4px #00000026);transform:scale(1.1)}.cl-icon-button:hover .cl-icon-button__icon:before{color:var(--cl-accent-a0)}.cl-icon-button:active{transform:scale(.95)}.cl-icon-button[disabled]{pointer-events:none;opacity:.5}

package/dist/components/atoms/button/icon-button/IconButton2.js

@@ -0,0 +1,18 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../../enums/element-size.js";
+import './IconButton.css';/* empty css           */
+import n from "../../icon/Icon2.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/atoms/button/icon-button/IconButton.tsx
+var i = ({ icon: i, className: a, label: o, iconSize: s = t.Medium, ...c }) => /* @__PURE__ */ r("button", {
+	...c,
+	"aria-label": o,
+	className: e(["cl-icon-button", a]),
+	children: i && /* @__PURE__ */ r(n, {
+		name: i,
+		className: "cl-icon-button__icon",
+		size: s
+	})
+});
+//#endregion
+export { i as IconButton };

package/dist/components/atoms/button/inner-button/InnerButton.css

@@ -1 +1 @@
-.cl-inner-button{background:transparent;border:none;padding:0;cursor:pointer;height:var(--cl-icon-size);width:var(--cl-icon-size);transition:all .15s ease}.cl-inner-button:focus-visible{outline:var(--cl-outline-border);outline-offset:-1px}.cl-inner-button:hover{transform:scale(1.15);filter:var(--cl-drop-shadow)}.cl-inner-button:hover .cl-inner-button__icon:before{color:var(--cl-accent-a10)}.cl-inner-button:active{transform:scale(.95)}.cl-inner-button[disabled]{pointer-events:none;opacity:.5}
+.cl-inner-button{cursor:pointer;height:var(--cl-icon-size);width:var(--cl-icon-size);background:0 0;border:none;padding:0;transition:all .15s}.cl-inner-button:focus-visible{outline:var(--cl-outline-border);outline-offset:-1px}.cl-inner-button:hover{filter:var(--cl-drop-shadow);transform:scale(1.15)}.cl-inner-button:hover .cl-inner-button__icon:before{color:var(--cl-accent-a10)}.cl-inner-button:active{transform:scale(.95)}.cl-inner-button[disabled]{pointer-events:none;opacity:.5}

package/dist/components/atoms/button/inner-button/InnerButton2.js

@@ -0,0 +1,21 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../../enums/element-size.js";
+import './InnerButton.css';/* empty css            */
+import n from "../../icon/Icon2.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/atoms/button/inner-button/InnerButton.tsx
+var i = ({ onClick: i, label: a, icon: o, disabled: s, className: c, iconSize: l = t.Small, ...u }) => /* @__PURE__ */ r("button", {
+	className: e(["cl-inner-button", c]),
+	onClick: i,
+	"aria-label": a,
+	type: "button",
+	disabled: s,
+	...u,
+	children: /* @__PURE__ */ r(n, {
+		name: o,
+		size: l,
+		className: "cl-inner-button__icon"
+	})
+});
+//#endregion
+export { i as InnerButton };

package/dist/components/atoms/button/primary-button/PrimaryButton.css

@@ -1 +1 @@
-.cl-primary-button{border:none;cursor:pointer;border-radius:var(--cl-border-radius);background:var(--cl-accent-gradient);box-shadow:var(--cl-box-shadow);gap:var(--cl-s-gap);transition:all .15s ease}.cl-primary-button:hover{filter:brightness(1.1);box-shadow:var(--cl-box-shadow-extended)}.cl-primary-button:active{transform:scale(.98);box-shadow:var(--cl-box-shadow)}.cl-primary-button__text{font-family:var(--cl-core-font);font-size:inherit;color:var(--cl-base-background-color);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cl-primary-button__icon:before{color:var(--cl-base-background-color)}
+.cl-primary-button{cursor:pointer;border-radius:var(--cl-border-radius);background:var(--cl-accent-gradient);box-shadow:var(--cl-box-shadow);gap:var(--cl-s-gap);border:none;transition:all .15s}.cl-primary-button:hover{filter:brightness(1.1);box-shadow:var(--cl-box-shadow-extended)}.cl-primary-button:active{box-shadow:var(--cl-box-shadow);transform:scale(.98)}.cl-primary-button__text{font-family:var(--cl-core-font);font-size:inherit;color:var(--cl-base-background-color);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}.cl-primary-button__icon:before{color:var(--cl-base-background-color)}

package/dist/components/atoms/button/primary-button/PrimaryButton2.js

@@ -0,0 +1,20 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../../enums/element-size.js";
+import './PrimaryButton.css';/* empty css              */
+import n from "../../icon/Icon2.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/atoms/button/primary-button/PrimaryButton.tsx
+var a = ({ icon: a, text: o, className: s, iconSize: c = t.Small, ...l }) => /* @__PURE__ */ i("button", {
+	...l,
+	className: e(["cl-primary-button", s]),
+	children: [a && /* @__PURE__ */ r(n, {
+		name: a,
+		className: "cl-primary-button__icon",
+		size: c
+	}), /* @__PURE__ */ r("span", {
+		className: "cl-primary-button__text",
+		children: o
+	})]
+});
+//#endregion
+export { a as PrimaryButton };

package/dist/components/atoms/button/secondary-button/SecondaryButton.css

@@ -1 +1 @@
-.cl-secondary-button{background:var(--cl-surface-a10);cursor:pointer;border-radius:var(--cl-border-radius);border:none;gap:var(--cl-s-gap);transition:all .15s ease;box-shadow:var(--cl-box-shadow)}.cl-secondary-button:hover{box-shadow:var(--cl-box-shadow-extended)}.cl-secondary-button:active{transform:scale(.98);box-shadow:var(--cl-box-shadow)}.cl-secondary-button__text{font-family:var(--cl-core-font);font-size:inherit;color:var(--cl-base-font-color);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cl-secondary-button__icon:before{color:var(--cl-base-font-color);margin-right:var(--cl-s-gap)}
+.cl-secondary-button{background:var(--cl-surface-a10);cursor:pointer;border-radius:var(--cl-border-radius);gap:var(--cl-s-gap);box-shadow:var(--cl-box-shadow);border:none;transition:all .15s}.cl-secondary-button:hover{box-shadow:var(--cl-box-shadow-extended)}.cl-secondary-button:active{box-shadow:var(--cl-box-shadow);transform:scale(.98)}.cl-secondary-button__text{font-family:var(--cl-core-font);font-size:inherit;color:var(--cl-base-font-color);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}.cl-secondary-button__icon:before{color:var(--cl-base-font-color);margin-right:var(--cl-s-gap)}

package/dist/components/atoms/button/secondary-button/SecondaryButton2.js

@@ -0,0 +1,20 @@
+import { getClassName as e } from "../../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../../enums/element-size.js";
+import './SecondaryButton.css';/* empty css                */
+import n from "../../icon/Icon2.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/atoms/button/secondary-button/SecondaryButton.tsx
+var a = ({ icon: a, text: o, className: s, iconSize: c = t.Small, ...l }) => /* @__PURE__ */ i("button", {
+	...l,
+	className: e(["cl-secondary-button", s]),
+	children: [a && /* @__PURE__ */ r(n, {
+		name: a,
+		className: "cl-secondary-button__icon",
+		size: c
+	}), /* @__PURE__ */ r("span", {
+		className: "cl-secondary-button__text",
+		children: o
+	})]
+});
+//#endregion
+export { a as SecondaryButton };

package/dist/components/atoms/editable-text/EditView.js

@@ -1,37 +1,18 @@
-import { jsx as d } from "react/jsx-runtime";
-import { useCallback as f } from "react";
-const g = ({
-  multiline: t,
-  value: e,
-  placeholder: r,
-  onChange: o,
-  onBlur: n,
-  onKeyDown: a,
-  className: p,
-  inputRef: s,
-  ...c
-}) => {
-  const i = t ? "textarea" : "input", m = f(
-    (u) => {
-      o(u.target.value);
-    },
-    [o]
-  );
-  return /* @__PURE__ */ d(
-    i,
-    {
-      ref: s,
-      value: e,
-      onChange: m,
-      onBlur: n,
-      onKeyDown: a,
-      placeholder: r,
-      className: p,
-      rows: t ? 3 : void 0,
-      ...c
-    }
-  );
-};
-export {
-  g as EditView
-};
+import { jsx as e } from "react/jsx-runtime";
+import { useCallback as t } from "react";
+//#region src/components/atoms/editable-text/EditView.tsx
+var n = ({ multiline: n, value: r, placeholder: i, onChange: a, onBlur: o, onKeyDown: s, className: c, inputRef: l, ...u }) => /* @__PURE__ */ e(n ? "textarea" : "input", {
+	ref: l,
+	value: r,
+	onChange: t((e) => {
+		a(e.target.value);
+	}, [a]),
+	onBlur: o,
+	onKeyDown: s,
+	placeholder: i,
+	className: c,
+	rows: n ? 3 : void 0,
+	...u
+});
+//#endregion
+export { n as EditView };

package/dist/components/atoms/editable-text/EditableText.css

@@ -1 +1 @@
-.cl-editable-text{color:var(--cl-base-font-color);border-radius:var(--cl-border-radius);display:inline-block;font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cl-editable-text:hover,.cl-editable-text:focus{outline:var(--cl-accent-border);outline-offset:var(--cl-xs-gap)}.cl-editable-text_edit-mode{border:none;background:transparent;outline:var(--cl-accent-border);outline-offset:var(--cl-xs-gap);min-width:var(--cl-l-gap)}.cl-editable-text_read-only:hover,.cl-editable-text_read-only:focus{outline:none}.cl-editable-text_empty{min-width:var(--cl-l-gap);min-height:24px;outline:var(--cl-accent-border);outline-offset:var(--cl-xs-gap)}@media(min-width:640px){.cl-editable-text{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-editable-text{font-size:var(--cl-typography-base-desktop)}}
+.cl-editable-text{color:var(--cl-base-font-color);border-radius:var(--cl-border-radius);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.5;display:inline-block}.cl-editable-text:hover,.cl-editable-text:focus{outline:var(--cl-accent-border);outline-offset:var(--cl-xs-gap)}.cl-editable-text_edit-mode{outline:var(--cl-accent-border);outline-offset:var(--cl-xs-gap);min-width:var(--cl-l-gap);background:0 0;border:none}.cl-editable-text_read-only:hover,.cl-editable-text_read-only:focus{outline:none}.cl-editable-text_empty{min-width:var(--cl-l-gap);outline:var(--cl-accent-border);outline-offset:var(--cl-xs-gap);min-height:24px}@media (width>=640px){.cl-editable-text{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-editable-text{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/atoms/editable-text/EditableText2.js

@@ -0,0 +1,53 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import './EditableText.css';/* empty css             */
+import { EditView as t } from "./EditView.js";
+import { ReadView as n } from "./ReadView.js";
+import { useEditModeState as r } from "./useEditModeState.js";
+import { useInputFocus as i } from "./useInputFocus.js";
+import { useValueState as a } from "./useValueState.js";
+import { jsx as o } from "react/jsx-runtime";
+import { useCallback as s, useRef as c } from "react";
+//#region src/components/atoms/editable-text/EditableText.tsx
+var l = ({ value: l, isEditMode: u, onChange: d, onClick: f, className: p, autoSelectTextOnEditMode: m = !1, multiline: h = !1, placeholder: g = "Click to edit...", readOnly: _ = !1, ...v }) => {
+	let y = c(null), { editMode: b, enterEditMode: x, exitEditMode: S } = r(u, _), { internalValue: C, updateValue: w, commitValue: T, resetValue: E } = a(l, d);
+	i(y, b, m, _);
+	let D = s((e) => {
+		f?.(e), x();
+	}, [f, x]), O = s(() => {
+		S(), T();
+	}, [S, T]), k = s((e) => {
+		e.key === "Enter" && !h && (e.preventDefault(), O()), e.key === "Escape" && (E(), S());
+	}, [
+		h,
+		O,
+		E,
+		S
+	]), A = e([
+		"cl-editable-text",
+		p,
+		{
+			"cl-editable-text_edit-mode": b,
+			"cl-editable-text_read-only": _,
+			"cl-editable-text_empty": !C
+		}
+	]);
+	return b && !_ ? /* @__PURE__ */ o(t, {
+		multiline: h,
+		value: C,
+		placeholder: g,
+		onChange: w,
+		onBlur: O,
+		onKeyDown: k,
+		className: A,
+		inputRef: y,
+		...v
+	}) : /* @__PURE__ */ o(n, {
+		value: C,
+		placeholder: g,
+		onClick: D,
+		className: A,
+		...v
+	});
+};
+//#endregion
+export { l as default };

package/dist/components/atoms/editable-text/ReadView.js

@@ -1,25 +1,16 @@
-import { jsx as l } from "react/jsx-runtime";
-const y = ({
-  value: t,
-  placeholder: a,
-  onClick: n,
-  className: o,
-  ...r
-}) => /* @__PURE__ */ l(
-  "span",
-  {
-    onClick: n,
-    className: o,
-    role: "button",
-    tabIndex: 0,
-    onKeyDown: (e) => {
-      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), n(e));
-    },
-    "aria-label": "Editable text",
-    ...r,
-    children: t || a
-  }
-);
-export {
-  y as ReadView
-};
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/atoms/editable-text/ReadView.tsx
+var t = ({ value: t, placeholder: n, onClick: r, className: i, ...a }) => /* @__PURE__ */ e("span", {
+	onClick: r,
+	className: i,
+	role: "button",
+	tabIndex: 0,
+	onKeyDown: (e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r(e));
+	},
+	"aria-label": "Editable text",
+	...a,
+	children: t || n
+});
+//#endregion
+export { t as ReadView };

package/dist/components/atoms/editable-text/useEditModeState.js

@@ -1,17 +1,17 @@
-import { useState as d } from "react";
-const c = (e, i) => {
-  const [s, o] = d(!1), [t] = d(e !== void 0);
-  return {
-    editMode: t ? !!e : s,
-    enterEditMode: () => {
-      !t && !i && o(!0);
-    },
-    exitEditMode: () => {
-      t || o(!1);
-    },
-    isControlled: t
-  };
-};
-export {
-  c as useEditModeState
+import { useState as e } from "react";
+//#region src/components/atoms/editable-text/useEditModeState.ts
+var t = (t, n) => {
+	let [r, i] = e(!1), [a] = e(t !== void 0);
+	return {
+		editMode: a ? !!t : r,
+		enterEditMode: () => {
+			!a && !n && i(!0);
+		},
+		exitEditMode: () => {
+			a || i(!1);
+		},
+		isControlled: a
+	};
 };
+//#endregion
+export { t as useEditModeState };

package/dist/components/atoms/editable-text/useInputFocus.js

@@ -1,9 +1,14 @@
-import { useEffect as t } from "react";
-const n = (c, u, s, r) => {
-  t(() => {
-    u && c.current && !r && (c.current.focus(), s && c.current.select());
-  }, [u, s, r, c]);
-};
-export {
-  n as useInputFocus
+import { useEffect as e } from "react";
+//#region src/components/atoms/editable-text/useInputFocus.ts
+var t = (t, n, r, i) => {
+	e(() => {
+		n && t.current && !i && (t.current.focus(), r && t.current.select());
+	}, [
+		n,
+		r,
+		i,
+		t
+	]);
 };
+//#endregion
+export { t as useInputFocus };

package/dist/components/atoms/editable-text/useValueState.js

@@ -1,21 +1,21 @@
-import { useState as n, useEffect as o } from "react";
-const m = (e, s) => {
-  const [t, a] = n(e);
-  return o(() => {
-    a(e);
-  }, [e]), {
-    internalValue: t,
-    updateValue: (u) => {
-      a(u);
-    },
-    commitValue: () => {
-      t !== e && s?.(t);
-    },
-    resetValue: () => {
-      a(e);
-    }
-  };
-};
-export {
-  m as useValueState
+import { useEffect as e, useState as t } from "react";
+//#region src/components/atoms/editable-text/useValueState.ts
+var n = (n, r) => {
+	let [i, a] = t(n);
+	return e(() => {
+		a(n);
+	}, [n]), {
+		internalValue: i,
+		updateValue: (e) => {
+			a(e);
+		},
+		commitValue: () => {
+			i !== n && r?.(i);
+		},
+		resetValue: () => {
+			a(n);
+		}
+	};
 };
+//#endregion
+export { n as useValueState };

package/dist/components/atoms/error-message/ErrorMessage.css

@@ -1 +1 @@
-.cl-error-message{display:none;max-width:100%;z-index:var(--cl-z-index-popup);background-color:var(--cl-surface-a10);color:var(--cl-base-font-color);padding:var(--cl-s-gap) var(--cl-m-gap);border-radius:var(--cl-border-radius);border:var(--cl-danger-border);box-shadow:var(--cl-box-shadow);pointer-events:none;animation:cl-fade-in ease .4s;font-family:var(--cl-core-font);font-size:var(--cl-typography-small-mobile);font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-error-message{font-size:var(--cl-typography-small-tablet)}}@media(min-width:1024px){.cl-error-message{font-size:var(--cl-typography-small-desktop)}}.cl-error-message_visible{display:block}
+.cl-error-message{max-width:100%;z-index:var(--cl-z-index-popup);background-color:var(--cl-surface-a10);color:var(--cl-base-font-color);padding:var(--cl-s-gap) var(--cl-m-gap);border-radius:var(--cl-border-radius);border:var(--cl-danger-border);box-shadow:var(--cl-box-shadow);pointer-events:none;font-family:var(--cl-core-font);font-size:var(--cl-typography-small-mobile);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5;animation:.4s cl-fade-in;display:none}@media (width>=640px){.cl-error-message{font-size:var(--cl-typography-small-tablet)}}@media (width>=1024px){.cl-error-message{font-size:var(--cl-typography-small-desktop)}}.cl-error-message_visible{display:block}

package/dist/components/atoms/error-message/ErrorMessage2.js

@@ -0,0 +1,18 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import './ErrorMessage.css';/* empty css             */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/atoms/error-message/ErrorMessage.tsx
+var n = ({ errorId: n, testId: r, message: i = "Error!", visible: a = !1, className: o }) => /* @__PURE__ */ t("span", {
+	id: n,
+	className: e([
+		"cl-error-message",
+		o,
+		{ "cl-error-message_visible": a }
+	]),
+	"data-testid": r,
+	"aria-hidden": !a,
+	"aria-live": "polite",
+	children: i
+});
+//#endregion
+export { n as default };

package/dist/components/atoms/header/Header.css

@@ -1 +1 @@
-.cl-header{margin:0;color:var(--cl-base-font-color)}.cl-header:before{padding-right:var(--cl-m-gap)}.cl-header__h1{border-bottom:var(--cl-light-border);font-family:var(--cl-fancy-font);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--cl-typography-h1-mobile)}@media(min-width:640px){.cl-header__h1{font-size:var(--cl-typography-h1-tablet)}}@media(min-width:1024px){.cl-header__h1{font-size:var(--cl-typography-h1-desktop)}}.cl-header__h2{border-bottom:var(--cl-light-border);font-family:var(--cl-fancy-font);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--cl-typography-h2-mobile)}@media(min-width:640px){.cl-header__h2{font-size:var(--cl-typography-h2-tablet)}}@media(min-width:1024px){.cl-header__h2{font-size:var(--cl-typography-h2-desktop)}}.cl-header__h3{border-bottom:var(--cl-light-border);font-family:var(--cl-fancy-font);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--cl-typography-h3-mobile)}@media(min-width:640px){.cl-header__h3{font-size:var(--cl-typography-h3-tablet)}}@media(min-width:1024px){.cl-header__h3{font-size:var(--cl-typography-h3-desktop)}}.cl-header__h4{font-family:var(--cl-fancy-font);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--cl-typography-h4-mobile)}@media(min-width:640px){.cl-header__h4{font-size:var(--cl-typography-h4-tablet)}}@media(min-width:1024px){.cl-header__h4{font-size:var(--cl-typography-h4-desktop)}}.cl-header__h5{font-family:var(--cl-fancy-font);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--cl-typography-h5-mobile)}@media(min-width:640px){.cl-header__h5{font-size:var(--cl-typography-h5-tablet)}}@media(min-width:1024px){.cl-header__h5{font-size:var(--cl-typography-h5-desktop)}}.cl-header__h6{font-family:var(--cl-fancy-font);font-weight:700;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--cl-typography-h6-mobile)}@media(min-width:640px){.cl-header__h6{font-size:var(--cl-typography-h6-tablet)}}@media(min-width:1024px){.cl-header__h6{font-size:var(--cl-typography-h6-desktop)}}
+.cl-header{color:var(--cl-base-font-color);margin:0}.cl-header:before{padding-right:var(--cl-m-gap)}.cl-header__h1{border-bottom:var(--cl-light-border);font-family:var(--cl-fancy-font);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;line-height:1.5;font-size:var(--cl-typography-h1-mobile)}@media (width>=640px){.cl-header__h1{font-size:var(--cl-typography-h1-tablet)}}@media (width>=1024px){.cl-header__h1{font-size:var(--cl-typography-h1-desktop)}}.cl-header__h2{border-bottom:var(--cl-light-border);font-family:var(--cl-fancy-font);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;line-height:1.5;font-size:var(--cl-typography-h2-mobile)}@media (width>=640px){.cl-header__h2{font-size:var(--cl-typography-h2-tablet)}}@media (width>=1024px){.cl-header__h2{font-size:var(--cl-typography-h2-desktop)}}.cl-header__h3{border-bottom:var(--cl-light-border);font-family:var(--cl-fancy-font);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;line-height:1.5;font-size:var(--cl-typography-h3-mobile)}@media (width>=640px){.cl-header__h3{font-size:var(--cl-typography-h3-tablet)}}@media (width>=1024px){.cl-header__h3{font-size:var(--cl-typography-h3-desktop)}}.cl-header__h4{font-family:var(--cl-fancy-font);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;line-height:1.5;font-size:var(--cl-typography-h4-mobile)}@media (width>=640px){.cl-header__h4{font-size:var(--cl-typography-h4-tablet)}}@media (width>=1024px){.cl-header__h4{font-size:var(--cl-typography-h4-desktop)}}.cl-header__h5{font-family:var(--cl-fancy-font);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;line-height:1.5;font-size:var(--cl-typography-h5-mobile)}@media (width>=640px){.cl-header__h5{font-size:var(--cl-typography-h5-tablet)}}@media (width>=1024px){.cl-header__h5{font-size:var(--cl-typography-h5-desktop)}}.cl-header__h6{font-family:var(--cl-fancy-font);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;line-height:1.5;font-size:var(--cl-typography-h6-mobile)}@media (width>=640px){.cl-header__h6{font-size:var(--cl-typography-h6-tablet)}}@media (width>=1024px){.cl-header__h6{font-size:var(--cl-typography-h6-desktop)}}

package/dist/components/atoms/header/Header2.js

@@ -0,0 +1,23 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import './Header.css';/* empty css       */
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/atoms/header/Header.tsx
+var n = ({ as: n = "h1", icon: r, children: i, className: a, ...o }) => /* @__PURE__ */ t(n, {
+	className: e([
+		a,
+		"cl-header",
+		r,
+		{
+			"cl-header__h1": n === "h1",
+			"cl-header__h2": n === "h2",
+			"cl-header__h3": n === "h3",
+			"cl-header__h4": n === "h4",
+			"cl-header__h5": n === "h5",
+			"cl-header__h6": n === "h6"
+		}
+	]),
+	...o,
+	children: i
+});
+//#endregion
+export { n as default };

package/dist/components/atoms/icon/Icon.css

@@ -1 +1 @@
-.cl-icon{color:var(--cl-base-font-color);display:inline-flex;width:var(--cl-icon-size);height:var(--cl-icon-size);align-items:center;justify-content:center}.cl-icon_extra-small{font-size:var(--cl-typography-small-mobile)}.cl-icon_small{font-size:var(--cl-typography-base-mobile)}.cl-icon_medium{font-size:var(--cl-typography-h5-mobile)}.cl-icon_large{font-size:var(--cl-typography-h4-mobile)}.cl-icon_xlarge{font-size:var(--cl-typography-h3-mobile)}.cl-icon_2xlarge{font-size:var(--cl-typography-h2-mobile)}@media(min-width:640px){.cl-icon_extra-small{font-size:var(--cl-typography-small-tablet)}.cl-icon_small{font-size:var(--cl-typography-base-tablet)}.cl-icon_medium{font-size:var(--cl-typography-h5-tablet)}.cl-icon_large{font-size:var(--cl-typography-h4-tablet)}.cl-icon_xlarge{font-size:var(--cl-typography-h3-tablet)}.cl-icon_2xlarge{font-size:var(--cl-typography-h2-tablet)}}@media(min-width:1024px){.cl-icon_extra-small{font-size:var(--cl-typography-small-desktop)}.cl-icon_small{font-size:var(--cl-typography-base-desktop)}.cl-icon_medium{font-size:var(--cl-typography-h5-desktop)}.cl-icon_large{font-size:var(--cl-typography-h4-desktop)}.cl-icon_xlarge{font-size:var(--cl-typography-h3-desktop)}.cl-icon_2xlarge{font-size:var(--cl-typography-h2-desktop)}}
+.cl-icon{color:var(--cl-base-font-color);width:var(--cl-icon-size);height:var(--cl-icon-size);justify-content:center;align-items:center;display:inline-flex}.cl-icon_extra-small{font-size:var(--cl-typography-small-mobile)}.cl-icon_small{font-size:var(--cl-typography-base-mobile)}.cl-icon_medium{font-size:var(--cl-typography-h5-mobile)}.cl-icon_large{font-size:var(--cl-typography-h4-mobile)}.cl-icon_xlarge{font-size:var(--cl-typography-h3-mobile)}.cl-icon_2xlarge{font-size:var(--cl-typography-h2-mobile)}@media (width>=640px){.cl-icon_extra-small{font-size:var(--cl-typography-small-tablet)}.cl-icon_small{font-size:var(--cl-typography-base-tablet)}.cl-icon_medium{font-size:var(--cl-typography-h5-tablet)}.cl-icon_large{font-size:var(--cl-typography-h4-tablet)}.cl-icon_xlarge{font-size:var(--cl-typography-h3-tablet)}.cl-icon_2xlarge{font-size:var(--cl-typography-h2-tablet)}}@media (width>=1024px){.cl-icon_extra-small{font-size:var(--cl-typography-small-desktop)}.cl-icon_small{font-size:var(--cl-typography-base-desktop)}.cl-icon_medium{font-size:var(--cl-typography-h5-desktop)}.cl-icon_large{font-size:var(--cl-typography-h4-desktop)}.cl-icon_xlarge{font-size:var(--cl-typography-h3-desktop)}.cl-icon_2xlarge{font-size:var(--cl-typography-h2-desktop)}}

package/dist/components/atoms/icon/Icon2.js

@@ -0,0 +1,29 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../enums/element-size.js";
+import './Icon.css';/* empty css     */
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/atoms/icon/Icon.tsx
+var r = ({ name: r, testId: i, className: a, hidden: o, size: s = t.Medium, ...c }) => {
+	if (!r) return null;
+	let l = e([
+		a,
+		"cl-icon",
+		r,
+		{
+			"cl-icon_extra-small": s === t.ExtraSmall,
+			"cl-icon_small": s === t.Small,
+			"cl-icon_medium": s === t.Medium,
+			"cl-icon_large": s === t.Large,
+			"cl-icon_xlarge": s === t.ExtraLarge,
+			"cl-icon_2xlarge": s === t.ExtraExtraLarge
+		}
+	]);
+	return /* @__PURE__ */ n("span", {
+		"data-testid": i,
+		className: l,
+		"aria-hidden": o,
+		...c
+	});
+};
+//#endregion
+export { r as default };

package/dist/components/atoms/image/BasicImage.js

@@ -1,27 +1,15 @@
-import { jsx as o } from "react/jsx-runtime";
-const l = ({
-  src: a,
-  alt: m,
-  width: s,
-  height: c,
-  sizes: e,
-  loading: i = "lazy",
-  decoding: r = "async",
-  onError: g
-}) => /* @__PURE__ */ o(
-  "img",
-  {
-    src: a,
-    alt: m,
-    width: s,
-    height: c,
-    loading: i,
-    decoding: r,
-    sizes: e,
-    className: "cl-image__img",
-    onError: g
-  }
-);
-export {
-  l as BasicImage
-};
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/atoms/image/BasicImage.tsx
+var t = ({ src: t, alt: n, width: r, height: i, sizes: a, loading: o = "lazy", decoding: s = "async", onError: c }) => /* @__PURE__ */ e("img", {
+	src: t,
+	alt: n,
+	width: r,
+	height: i,
+	loading: o,
+	decoding: s,
+	sizes: a,
+	className: "cl-image__img",
+	onError: c
+});
+//#endregion
+export { t as BasicImage };

package/dist/components/atoms/image/FallBackImage.js

@@ -1,10 +1,16 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import m from "../icon/Icon.js";
-import { IconName as c } from "../../../enums/icon-name.js";
-const s = () => /* @__PURE__ */ l("div", { className: "cl-image__fallback", children: [
-  /* @__PURE__ */ a(m, { name: c.Image, className: "cl-image__fallback-icon" }),
-  /* @__PURE__ */ a("span", { className: "cl-image__fallback-text", children: "Image not available" })
-] });
-export {
-  s as FallbackImage
-};
+import { IconName as e } from "../../../enums/icon-name.js";
+import t from "../icon/Icon2.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/atoms/image/FallBackImage.tsx
+var i = () => /* @__PURE__ */ r("div", {
+	className: "cl-image__fallback",
+	children: [/* @__PURE__ */ n(t, {
+		name: e.Image,
+		className: "cl-image__fallback-icon"
+	}), /* @__PURE__ */ n("span", {
+		className: "cl-image__fallback-text",
+		children: "Image not available"
+	})]
+});
+//#endregion
+export { i as FallbackImage };