chop-logic-components 4.0.1 → 4.0.3

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

@@ -0,0 +1,28 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { withFigureCaption as t } from "../../hocs/with-figure-caption/with-figure-caption.js";
+import { BasicImage as n } from "./BasicImage.js";
+import { FallbackImage as r } from "./FallBackImage.js";
+import './Image.css';/* empty css      */
+import { ResponsivePicture as i } from "./ResponsivePicture.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useState as o } from "react";
+var s = t(({ alt: t, sources: s = [], className: c, decorative: l = !1, onError: u, ...d }) => {
+	let [f, p] = o(!1), m = e(["cl-image", c]), h = s.length > 0, g = l ? "" : t, _ = (e) => {
+		p(!0), u?.(e);
+	};
+	return f ? /* @__PURE__ */ a(r, {}) : h ? /* @__PURE__ */ a(i, {
+		alt: g,
+		sources: s,
+		onError: _,
+		...d
+	}) : /* @__PURE__ */ a("div", {
+		className: m,
+		children: /* @__PURE__ */ a(n, {
+			alt: g,
+			onError: _,
+			...d
+		})
+	});
+});
+//#endregion
+export { s as default };

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

@@ -1,17 +1,13 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { BasicImage as s } from "./BasicImage.js";
-const d = ({ sources: i = [], ...t }) => /* @__PURE__ */ m("picture", { className: "cl-image__picture", children: [
-  i.map((r, p) => /* @__PURE__ */ e(
-    "source",
-    {
-      srcSet: r.descriptor ? `${r.src} ${r.descriptor}` : r.src,
-      media: r.media,
-      type: r.type
-    },
-    `${r.src}-${p}`
-  )),
-  /* @__PURE__ */ e(s, { ...t })
-] });
-export {
-  d as ResponsivePicture
-};
+import { BasicImage as e } from "./BasicImage.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/atoms/image/ResponsivePicture.tsx
+var r = ({ sources: r = [], ...i }) => /* @__PURE__ */ n("picture", {
+	className: "cl-image__picture",
+	children: [r.map((e) => /* @__PURE__ */ t("source", {
+		srcSet: e.descriptor ? `${e.src} ${e.descriptor}` : e.src,
+		media: e.media,
+		type: e.type
+	}, e.src)), /* @__PURE__ */ t(e, { ...i })]
+});
+//#endregion
+export { r as ResponsivePicture };

package/dist/components/atoms/input/Input.css

@@ -1 +1 @@
-.cl-input__wrapper{display:flex;gap:var(--cl-m-gap);align-items:center;border:var(--cl-light-border);border-radius:var(--cl-border-radius);padding:var(--cl-m-gap);background-color:var(--cl-surface-a10);position:relative}.cl-input__wrapper:has(input:focus){border:var(--cl-outline-border)}.cl-input__wrapper:has(input[aria-invalid=true]){border:var(--cl-danger-border)}.cl-input__wrapper:has(input[disabled]){pointer-events:none;opacity:.5}.cl-input__wrapper>span:nth-child(2){display:flex;gap:var(--cl-m-gap);align-items:center}.cl-input__field{color:var(--cl-base-font-color);padding:0;border:none;display:inline-block;background:transparent;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-grow:1;min-width:0;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-input__field:focus-visible{outline:none}.cl-input__field:placeholder-shown+span{display:none!important}.cl-input__field::-webkit-outer-spin-button,.cl-input__field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.cl-input__field[type=number]{-moz-appearance:textfield;appearance:textfield}@media(min-width:640px){.cl-input__field{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-input__field{font-size:var(--cl-typography-base-desktop)}}
+.cl-input__wrapper{gap:var(--cl-m-gap);border:var(--cl-light-border);border-radius:var(--cl-border-radius);padding:var(--cl-m-gap);background-color:var(--cl-surface-a10);align-items:center;display:flex;position:relative}.cl-input__wrapper:has(input:focus){border:var(--cl-outline-border)}.cl-input__wrapper:has(input[aria-invalid=true]){border:var(--cl-danger-border)}.cl-input__wrapper:has(input[disabled]){pointer-events:none;opacity:.5}.cl-input__wrapper>span:nth-child(2){gap:var(--cl-m-gap);align-items:center;display:flex}.cl-input__field{color:var(--cl-base-font-color);white-space:nowrap;text-overflow:ellipsis;min-width:0;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;background:0 0;border:none;flex-grow:1;padding:0;font-weight:400;line-height:1.5;display:inline-block;overflow:hidden}.cl-input__field:focus-visible{outline:none}.cl-input__field:placeholder-shown+span{display:none!important}.cl-input__field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cl-input__field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.cl-input__field[type=number]{appearance:textfield}@media (width>=640px){.cl-input__field{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-input__field{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/atoms/input/Input2.js

@@ -0,0 +1,13 @@
+import './Input.css';/* empty css      */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+var r = n(({ children: n, ...r }, i) => /* @__PURE__ */ t("div", {
+	className: "cl-input__wrapper",
+	children: [/* @__PURE__ */ e("input", {
+		...r,
+		className: "cl-input__field",
+		ref: i
+	}), n]
+}));
+//#endregion
+export { r as default };

package/dist/components/atoms/label/Label.css

@@ -1 +1 @@
-.cl-label{display:flex;align-items:baseline;gap:var(--cl-s-gap);color:var(--cl-base-font-color);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-label{font-size:var(--cl-typography-small-tablet)}}@media(min-width:1024px){.cl-label{font-size:var(--cl-typography-small-desktop)}}.cl-label:hover{text-shadow:var(--cl-text-shadow);cursor:pointer}.cl-label__text{text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.cl-label__required{text-decoration:none;cursor:pointer;color:var(--cl-accent-a0);margin-left:var(--cl-s-gap)}.cl-label_disabled{pointer-events:none;opacity:.5}
+.cl-label{align-items:baseline;gap:var(--cl-s-gap);color:var(--cl-base-font-color);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;display:flex}@media (width>=640px){.cl-label{font-size:var(--cl-typography-small-tablet)}}@media (width>=1024px){.cl-label{font-size:var(--cl-typography-small-desktop)}}.cl-label:hover{text-shadow:var(--cl-text-shadow);cursor:pointer}.cl-label__text{text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}.cl-label__required{cursor:pointer;color:var(--cl-accent-a0);margin-left:var(--cl-s-gap);text-decoration:none}.cl-label_disabled{pointer-events:none;opacity:.5}

package/dist/components/atoms/label/Label2.js

@@ -0,0 +1,35 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../enums/element-size.js";
+import n from "../icon/Icon2.js";
+import './Label.css';/* empty css      */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/atoms/label/Label.tsx
+var a = ({ label: a, required: o, inputId: s, icon: c, iconPosition: l, isTextHidden: u = !1, iconSize: d = t.ExtraSmall, disabled: f = !1, className: p, testId: m }) => {
+	let h = !!c && l === "left", g = !!c && l === "right", _ = /* @__PURE__ */ r(n, {
+		name: c,
+		size: d
+	});
+	return /* @__PURE__ */ i("label", {
+		className: e([
+			"cl-label",
+			p,
+			{ "cl-label_disabled": f }
+		]),
+		htmlFor: s,
+		"data-testid": m,
+		children: [
+			h && _,
+			!u && /* @__PURE__ */ i("span", {
+				className: "cl-label__text",
+				children: [a, o && /* @__PURE__ */ r("abbr", {
+					className: "cl-label__required",
+					title: "required",
+					children: "*"
+				})]
+			}),
+			g && _
+		]
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/atoms/link/Link.css

@@ -1 +1 @@
-.cl-link{display:inline-flex;align-items:center;gap:var(--cl-s-gap);text-decoration:none;transition:all .2s ease;color:var(--cl-info-a0)}.cl-link:focus{outline:var(--cl-outline-border);outline-offset:var(--cl-s-gap);border-radius:var(--cl-border-radius)}.cl-link:focus:not(:focus-visible){outline:none}.cl-link:visited{color:var(--cl-warning-a0)}.cl-link:hover{text-shadow:var(--cl-text-shadow)}.cl-link_disabled{pointer-events:none;opacity:.5}.cl-link__text{font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);color:inherit;font-weight:400;line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:underline}.cl-link__icon:before{color:var(--cl-info-a0)}@media(min-width:640px){.cl-link__text{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-link__text{font-size:var(--cl-typography-base-desktop)}}
+.cl-link{align-items:center;gap:var(--cl-s-gap);color:var(--cl-info-a0);text-decoration:none;transition:all .2s;display:inline-flex}.cl-link:focus{outline:var(--cl-outline-border);outline-offset:var(--cl-s-gap);border-radius:var(--cl-border-radius)}.cl-link:focus:not(:focus-visible){outline:none}.cl-link:visited{color:var(--cl-warning-a0)}.cl-link:hover{text-shadow:var(--cl-text-shadow)}.cl-link_disabled{pointer-events:none;opacity:.5}.cl-link__text{font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);color:inherit;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5;text-decoration:underline}.cl-link__icon:before{color:var(--cl-info-a0)}@media (width>=640px){.cl-link__text{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-link__text{font-size:var(--cl-typography-base-desktop)}}

package/dist/components/atoms/link/Link2.js

@@ -0,0 +1,36 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../enums/element-size.js";
+import n from "../icon/Icon2.js";
+import './Link.css';/* empty css     */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/atoms/link/Link.tsx
+var a = ({ href: a, children: o, icon: s, iconPosition: c = "left", external: l = !1, disabled: u = !1, className: d, target: f, ...p }) => {
+	let m = e([
+		"cl-link",
+		d,
+		{ "cl-link_disabled": u }
+	]), h = l || a.startsWith("http") || a.startsWith("//"), g = h ? f || "_blank" : f, _ = s ? /* @__PURE__ */ r(n, {
+		name: s,
+		className: "cl-link__icon",
+		hidden: !0,
+		size: t.Small
+	}) : null, v = s && c === "left", y = s && c === "right";
+	return /* @__PURE__ */ i("a", {
+		href: a,
+		className: m,
+		target: g,
+		...h && { "aria-label": typeof o == "string" ? `${o} (opens in new window)` : "Opens in new window" },
+		"aria-disabled": u,
+		...p,
+		children: [
+			v && _,
+			/* @__PURE__ */ r("span", {
+				className: "cl-link__text",
+				children: o
+			}),
+			y && _
+		]
+	});
+};
+//#endregion
+export { a as default };

package/dist/components/atoms/portal/Portal.js

@@ -1,11 +1,11 @@
-import { useState as r, useEffect as o } from "react";
-import a from "react-dom";
-const m = ({ children: t }) => {
-  const [e] = r(() => document.createElement("div"));
-  return o(() => (document.body.appendChild(e), () => {
-    e.remove();
-  }), [e]), a.createPortal(t, e);
-};
-export {
-  m as default
+import { useEffect as e, useState as t } from "react";
+import n from "react-dom";
+//#region src/components/atoms/portal/Portal.tsx
+var r = ({ children: r }) => {
+	let [i] = t(() => document.createElement("div"));
+	return e(() => (document.body.appendChild(i), () => {
+		i.remove();
+	}), [i]), n.createPortal(r, i);
 };
+//#endregion
+export { r as default };

package/dist/components/atoms/tooltip/Tooltip.controller.js

@@ -1,35 +1,43 @@
-import { useState as T, useRef as r } from "react";
-import { useTooltipPosition as O } from "../../../hooks/use-tooltip-position/use-tooltip-position.js";
-import { useElementIds as R } from "../../../hooks/use-element-ids/use-element-ids.js";
-import { useKeyPress as k } from "../../../hooks/use-key-press/use-key-press.js";
-import { useClickOutside as y } from "../../../hooks/use-click-outside/use-click-outside.js";
-import { useAutoClose as I } from "../../../hooks/use-auto-close/use-auto-close.js";
-const v = ({ id: p, autoClose: i, autoCloseDelay: u }) => {
-  const [e, s] = T(!1), n = r(null), o = r(null), { top: f, left: c } = O({ wrapperRef: n, tooltipRef: o, isOpened: e }), { elementId: m } = R(p), t = () => s(!1), d = () => s(!0), l = () => s(!e), a = (C) => {
-    C.preventDefault(), l();
-  };
-  return k({ keyCode: "Escape", ref: o, onKeyPress: t }), y({
-    ref: o,
-    onClickOutsideHandler: t,
-    dependentRef: n
-  }), I({
-    isOpened: e,
-    onClose: t,
-    autoClose: i,
-    autoCloseDelay: u
-  }), {
-    elementId: m,
-    openTooltip: d,
-    closeTooltip: t,
-    toggleTooltip: l,
-    handleContextMenu: a,
-    top: f,
-    left: c,
-    isOpened: e,
-    wrapperRef: n,
-    tooltipRef: o
-  };
-};
-export {
-  v as useTooltipController
+import { useAutoClose as e } from "../../../hooks/use-auto-close/use-auto-close.js";
+import { useClickOutside as t } from "../../../hooks/use-click-outside/use-click-outside.js";
+import { useElementIds as n } from "../../../hooks/use-element-ids/use-element-ids.js";
+import { useKeyPress as r } from "../../../hooks/use-key-press/use-key-press.js";
+import { useTooltipPosition as i } from "../../../hooks/use-tooltip-position/use-tooltip-position.js";
+import { useRef as a, useState as o } from "react";
+//#region src/components/atoms/tooltip/Tooltip.controller.ts
+var s = ({ id: s, autoClose: c, autoCloseDelay: l }) => {
+	let [u, d] = o(!1), f = a(null), p = a(null), { top: m, left: h } = i({
+		wrapperRef: f,
+		tooltipRef: p,
+		isOpened: u
+	}), { elementId: g } = n(s), _ = () => d(!1), v = () => d(!0), y = () => d(!u);
+	return r({
+		keyCode: "Escape",
+		ref: p,
+		onKeyPress: _
+	}), t({
+		ref: p,
+		onClickOutsideHandler: _,
+		dependentRef: f
+	}), e({
+		isOpened: u,
+		onClose: _,
+		autoClose: c,
+		autoCloseDelay: l
+	}), {
+		elementId: g,
+		openTooltip: v,
+		closeTooltip: _,
+		toggleTooltip: y,
+		handleContextMenu: (e) => {
+			e.preventDefault(), y();
+		},
+		top: m,
+		left: h,
+		isOpened: u,
+		wrapperRef: f,
+		tooltipRef: p
+	};
 };
+//#endregion
+export { s as useTooltipController };

package/dist/components/atoms/tooltip/Tooltip.css

@@ -1 +1 @@
-.cl-tooltip{color:var(--cl-base-font-color);position:absolute;left:0;top:0;z-index:var(--cl-z-index-popup);background-color:var(--cl-surface-a0);border:var(--cl-light-border);padding:var(--cl-m-gap);border-radius:var(--cl-border-radius);box-shadow:var(--cl-box-shadow);pointer-events:none;white-space:nowrap;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}.cl-tooltip_info{background-color:var(--cl-info-a0);color:#fff;border:none}.cl-tooltip_success{background-color:var(--cl-success-a0);color:#fff;border:none}.cl-tooltip_danger{background-color:var(--cl-danger-a0);color:#fff;border:none}.cl-tooltip_warning{background-color:var(--cl-warning-a0);color:#fff;border:none}@media(min-width:640px){.cl-tooltip{font-size:var(--cl-typography-small-tablet)}}@media(min-width:1024px){.cl-tooltip{font-size:var(--cl-typography-small-desktop)}}
+.cl-tooltip{color:var(--cl-base-font-color);z-index:var(--cl-z-index-popup);background-color:var(--cl-surface-a0);border:var(--cl-light-border);padding:var(--cl-m-gap);border-radius:var(--cl-border-radius);box-shadow:var(--cl-box-shadow);pointer-events:none;white-space:nowrap;text-wrap:wrap;text-align:center;text-overflow:ellipsis;max-width:80vw;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;position:absolute;top:0;left:0;overflow:hidden}.cl-tooltip_info{background-color:var(--cl-info-a0);color:#fff;border:none}.cl-tooltip_success{background-color:var(--cl-success-a0);color:#fff;border:none}.cl-tooltip_danger{background-color:var(--cl-danger-a0);color:#fff;border:none}.cl-tooltip_warning{background-color:var(--cl-warning-a0);color:#fff;border:none}@media (width>=640px){.cl-tooltip{font-size:var(--cl-typography-small-tablet);max-width:60vw}}@media (width>=1024px){.cl-tooltip{font-size:var(--cl-typography-small-desktop);max-width:30vw}}

package/dist/components/atoms/tooltip/Tooltip2.js

@@ -0,0 +1,49 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { SemanticColor as t } from "../../../enums/semantic-color.js";
+import { TooltipContainer as n } from "../../../enums/tooltip-container.js";
+import r from "../portal/Portal.js";
+import './Tooltip.css';/* empty css        */
+import { useTooltipController as i } from "./Tooltip.controller.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/atoms/tooltip/Tooltip.tsx
+var s = ({ children: s, tooltipContent: c, id: l, style: u, className: d, containerTag: f = n.Span, visibleOn: p = "hover", autoClose: m = !1, autoCloseDelay: h = 3e3, color: g = t.Default, ..._ }) => {
+	let v = f, { openTooltip: y, closeTooltip: b, toggleTooltip: x, handleContextMenu: S, elementId: C, top: w, left: T, isOpened: E, wrapperRef: D, tooltipRef: O } = i({
+		id: l,
+		autoClose: m,
+		autoCloseDelay: h
+	}), k = e([
+		"cl-tooltip",
+		d,
+		{ [`cl-tooltip_${g}`]: g !== t.Default }
+	]);
+	return /* @__PURE__ */ o(v, {
+		style: {
+			position: "relative",
+			cursor: "pointer"
+		},
+		onClick: p === "click" ? x : void 0,
+		onMouseOver: p === "hover" ? y : void 0,
+		onMouseLeave: p === "hover" ? b : void 0,
+		onFocus: p === "focus" ? y : void 0,
+		onBlur: p === "focus" ? b : void 0,
+		onContextMenu: p === "contextmenu" ? (e) => S(e) : void 0,
+		tabIndex: -1,
+		ref: D,
+		"aria-describedby": C,
+		children: [s, E && /* @__PURE__ */ a(r, { children: /* @__PURE__ */ a("div", {
+			style: {
+				...u,
+				top: w,
+				left: T
+			},
+			ref: O,
+			role: "tooltip",
+			id: C,
+			..._,
+			className: k,
+			children: c
+		}) })]
+	});
+};
+//#endregion
+export { s as default };

package/dist/components/contexts/form/FormContext.js

@@ -1,5 +1,5 @@
-import { createContext as t } from "react";
-const e = t({});
-export {
-  e as FormContext
-};
+import { createContext as e } from "react";
+//#region src/components/contexts/form/FormContext.tsx
+var t = e({});
+//#endregion
+export { t as FormContext };

package/dist/components/contexts/theme/ThemeContext.js

@@ -1,11 +1,8 @@
 import { createContext as e } from "react";
-const t = "cl-components-light-theme", n = "cl-components-dark-theme", c = e({
-  mode: t,
-  setMode: () => {
-  }
+//#region src/components/contexts/theme/ThemeContext.ts
+var t = "cl-components-light-theme", n = "cl-components-dark-theme", r = e({
+	mode: t,
+	setMode: () => {}
 });
-export {
-  n as CL_DARK_THEME_CLASS,
-  t as CL_LIGHT_THEME_CLASS,
-  c as ThemeContext
-};
+//#endregion
+export { n as CL_DARK_THEME_CLASS, t as CL_LIGHT_THEME_CLASS, r as ThemeContext };

package/dist/components/contexts/theme/ThemeProvider.js

@@ -1,21 +1,24 @@
-import { jsx as u } from "react/jsx-runtime";
-import '../../../styles/icons.css';import '../../../styles/main.css';/* empty css                       */
-/* empty css                        */
-import { useState as a, useEffect as s, useMemo as c } from "react";
-import { CL_LIGHT_THEME_CLASS as e, CL_DARK_THEME_CLASS as r, ThemeContext as f } from "./ThemeContext.js";
-const y = ({
-  children: m,
-  injectedMode: t
-}) => {
-  const [o, i] = a(e);
-  s(() => {
-    o && typeof o == "string" && (document.body.classList.remove(e, r), document.body.classList.add(o));
-  }, [o]), s(() => {
-    t && typeof t == "string" && (document.body.classList.remove(e, r), document.body.classList.add(t));
-  }, [t]);
-  const d = c(() => ({ mode: o, setMode: i }), [o]);
-  return /* @__PURE__ */ u(f.Provider, { value: d, children: m });
-};
-export {
-  y as ThemeProvider
+import { CL_DARK_THEME_CLASS as e, CL_LIGHT_THEME_CLASS as t, ThemeContext as n } from "./ThemeContext.js";
+import '../../../styles/main.css';import '../../../styles/icons.css';/* empty css                   */
+/* empty css                    */
+import { jsx as r } from "react/jsx-runtime";
+import { useEffect as i, useMemo as a, useState as o } from "react";
+//#region src/components/contexts/theme/ThemeProvider.tsx
+var s = ({ children: s, injectedMode: c }) => {
+	let [l, u] = o(t);
+	i(() => {
+		l && typeof l == "string" && (document.body.classList.remove(t, e), document.body.classList.add(l));
+	}, [l]), i(() => {
+		c && typeof c == "string" && (document.body.classList.remove(t, e), document.body.classList.add(c));
+	}, [c]);
+	let d = a(() => ({
+		mode: l,
+		setMode: u
+	}), [l]);
+	return /* @__PURE__ */ r(n.Provider, {
+		value: d,
+		children: s
+	});
 };
+//#endregion
+export { s as ThemeProvider };

package/dist/components/hocs/with-figure-caption/Figure.css

@@ -1 +1 @@
-.cl-figure{margin:0;display:block}.cl-figure__caption{text-align:center;padding-top:var(--cl-s-gap);color:var(--cl-base-font-color);font-size:var(--cl-typography-small-mobile)}@media(min-width:640px){.cl-figure__caption{font-size:var(--cl-typography-small-tablet)}}@media(min-width:1024px){.cl-figure__caption{font-size:var(--cl-typography-small-desktop)}}
+.cl-figure{margin:0;display:block}.cl-figure__caption{text-align:center;padding-top:var(--cl-s-gap);color:var(--cl-base-font-color);font-size:var(--cl-typography-small-mobile)}@media (width>=640px){.cl-figure__caption{font-size:var(--cl-typography-small-tablet)}}@media (width>=1024px){.cl-figure__caption{font-size:var(--cl-typography-small-desktop)}}

package/dist/components/hocs/with-figure-caption/with-figure-caption.js

@@ -1,11 +1,14 @@
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
-import './Figure.css';/* empty css           */
-function f(r) {
-  return ({ caption: e, ...t }) => e?.trim()?.length ? /* @__PURE__ */ c("figure", { className: "cl-figure", children: [
-    /* @__PURE__ */ i(r, { ...t }),
-    /* @__PURE__ */ i("figcaption", { className: "cl-figure__caption", children: e })
-  ] }) : /* @__PURE__ */ i(r, { ...t });
+import './Figure.css';/* empty css       */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/hocs/with-figure-caption/with-figure-caption.tsx
+function n(n) {
+	return ({ caption: r, ...i }) => r?.trim()?.length ? /* @__PURE__ */ t("figure", {
+		className: "cl-figure",
+		children: [/* @__PURE__ */ e(n, { ...i }), /* @__PURE__ */ e("figcaption", {
+			className: "cl-figure__caption",
+			children: r
+		})]
+	}) : /* @__PURE__ */ e(n, { ...i });
 }
-export {
-  f as withFigureCaption
-};
+//#endregion
+export { n as withFigureCaption };

package/dist/components/hocs/with-tooltip/with-tooltip.js

@@ -1,8 +1,12 @@
+import e from "../../atoms/tooltip/Tooltip2.js";
 import { jsx as t } from "react/jsx-runtime";
-import e from "../../atoms/tooltip/Tooltip.js";
-function h(o) {
-  return ({ tooltip: i, visibleOn: n, ...r }) => i?.length ? /* @__PURE__ */ t(e, { tooltipContent: i, visibleOn: n, children: /* @__PURE__ */ t(o, { ...r }) }) : /* @__PURE__ */ t(o, { ...r });
+//#region src/components/hocs/with-tooltip/with-tooltip.tsx
+function n(n) {
+	return ({ tooltip: r, visibleOn: i, ...a }) => r?.length ? /* @__PURE__ */ t(e, {
+		tooltipContent: r,
+		visibleOn: i,
+		children: /* @__PURE__ */ t(n, { ...a })
+	}) : /* @__PURE__ */ t(n, { ...a });
 }
-export {
-  h as withTooltip
-};
+//#endregion
+export { n as withTooltip };

package/dist/components/molecules/accordion/Accordion.css

@@ -1 +1 @@
-.cl-accordion{display:flex;flex-direction:column;width:100%}
+.cl-accordion{flex-direction:column;width:100%;display:flex}

package/dist/components/molecules/accordion/Accordion2.js

@@ -0,0 +1,11 @@
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import './Accordion.css';/* empty css          */
+import { AccordionItem as t } from "./AccordionItem2.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/molecules/accordion/Accordion.tsx
+var r = ({ items: r, className: i }) => /* @__PURE__ */ n("div", {
+	className: e(["cl-accordion", i]),
+	children: r.map((e) => /* @__PURE__ */ n(t, { ...e }, e.summary))
+});
+//#endregion
+export { r as default };

package/dist/components/molecules/accordion/AccordionItem.css

@@ -1 +1 @@
-.cl-accordion{display:flex;flex-direction:column;width:100%}.cl-accordion-item{display:flex;flex-direction:column}.cl-accordion-item__summary{font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);font-weight:700;color:var(--cl-base-font-color);cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:var(--cl-l-gap);border-bottom:var(--cl-light-border);line-height:1.5;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(min-width:640px){.cl-accordion-item__summary{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-accordion-item__summary{font-size:var(--cl-typography-base-desktop)}}.cl-accordion-item__summary:hover{text-shadow:var(--cl-text-shadow)}.cl-accordion-item__summary::-webkit-details-marker{display:none}.cl-accordion-item__summary:focus-visible{outline:var(--cl-outline-border);outline-offset:-4px}.cl-accordion-item__content{color:var(--cl-base-font-color);padding:var(--cl-l-gap);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}@media(min-width:640px){.cl-accordion-item__content{font-size:var(--cl-typography-base-tablet)}}@media(min-width:1024px){.cl-accordion-item__content{font-size:var(--cl-typography-base-desktop)}}.cl-accordion-item__icon{transition:transform .3s ease}.cl-accordion-item[open] .cl-accordion-item__summary{border-bottom:none}.cl-accordion-item[open] .cl-accordion-item__content{border-bottom:var(--cl-light-border)}.cl-accordion-item[open] .cl-accordion-item__icon{transform:rotate(180deg)}
+.cl-accordion{flex-direction:column;width:100%;display:flex}.cl-accordion-item{flex-direction:column;display:flex}.cl-accordion-item__summary{font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);color:var(--cl-base-font-color);cursor:pointer;padding:var(--cl-l-gap);border-bottom:var(--cl-light-border);letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;justify-content:space-between;align-items:center;font-weight:700;line-height:1.5;display:flex}@media (width>=640px){.cl-accordion-item__summary{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-accordion-item__summary{font-size:var(--cl-typography-base-desktop)}}.cl-accordion-item__summary:hover{text-shadow:var(--cl-text-shadow)}.cl-accordion-item__summary::-webkit-details-marker{display:none}.cl-accordion-item__summary:focus-visible{outline:var(--cl-outline-border);outline-offset:-4px}.cl-accordion-item__content{color:var(--cl-base-font-color);padding:var(--cl-l-gap);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}@media (width>=640px){.cl-accordion-item__content{font-size:var(--cl-typography-base-tablet)}}@media (width>=1024px){.cl-accordion-item__content{font-size:var(--cl-typography-base-desktop)}}.cl-accordion-item__icon{transition:transform .3s}.cl-accordion-item[open] .cl-accordion-item__summary{border-bottom:none}.cl-accordion-item[open] .cl-accordion-item__content{border-bottom:var(--cl-light-border)}.cl-accordion-item[open] .cl-accordion-item__icon{transform:rotate(180deg)}

package/dist/components/molecules/accordion/AccordionItem2.js

@@ -0,0 +1,24 @@
+import { ElementSize as e } from "../../../enums/element-size.js";
+import { IconName as t } from "../../../enums/icon-name.js";
+import n from "../../atoms/icon/Icon2.js";
+import './AccordionItem.css';/* empty css              */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/molecules/accordion/AccordionItem.tsx
+var a = ({ summary: a, children: o }) => /* @__PURE__ */ i("details", {
+	className: "cl-accordion-item",
+	children: [/* @__PURE__ */ i("summary", {
+		className: "cl-accordion-item__summary",
+		children: [a, /* @__PURE__ */ r(n, {
+			name: t.ChevronDown,
+			className: "cl-accordion-item__icon",
+			"aria-label": "Toggle Details",
+			testId: "accordion-icon",
+			size: e.Small
+		})]
+	}), /* @__PURE__ */ r("div", {
+		className: "cl-accordion-item__content",
+		children: o
+	})]
+});
+//#endregion
+export { a as AccordionItem };

package/dist/components/molecules/alert/Alert.css

@@ -1 +1 @@
-.cl-alert{animation:cl-fade-in ease .4s;position:fixed;bottom:var(--cl-l-gap);left:50%;transform:translate(-50%);z-index:var(--cl-z-index-popup);width:90vw}@media screen and (min-width:1024px){.cl-alert{width:50vw;transform:none;right:var(--cl-l-gap);left:auto}}.cl-alert__content{color:var(--cl-base-font-color);display:flex;flex-direction:column;gap:var(--cl-m-gap);background:var(--cl-base-background-color);padding:var(--cl-m-gap) var(--cl-l-gap);box-shadow:var(--cl-box-shadow);border:var(--cl-accent-border);border-radius:var(--cl-border-radius);position:relative;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}.cl-alert__header{padding-right:var(--cl-thumb-size)}@media(min-width:640px){.cl-alert__content{font-size:var(--cl-typography-small-tablet)}}@media(min-width:1024px){.cl-alert__content{font-size:var(--cl-typography-small-desktop)}}.cl-alert__message{margin:var(--cl-m-gap) 0}.cl-alert__button{position:absolute;right:var(--cl-m-gap);top:var(--cl-m-gap)}.cl-alert__progress-bar{-webkit-appearance:none;appearance:none;width:100%;height:var(--cl-s-gap);border:none;background-color:var(--cl-base-background-color)}.cl-alert__progress-bar::-webkit-progress-bar{background-color:var(--cl-base-background-color)}.cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-surface-tonal-a30)}.cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-surface-tonal-a30)}.cl-alert_closing{animation:cl-fade-out ease .4s}.cl-alert_success .cl-alert__content{border:var(--cl-success-border);color:var(--cl-success-a0)}.cl-alert_success .cl-alert__header{border-bottom:var(--cl-success-border);color:var(--cl-success-a0)}.cl-alert_success .cl-alert__button span:before{color:var(--cl-success-a0)}.cl-alert_success .cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-success-a0)}.cl-alert_success .cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-success-a0)}.cl-alert_error .cl-alert__content{border:var(--cl-danger-border);color:var(--cl-danger-a0)}.cl-alert_error .cl-alert__button span:before{color:var(--cl-danger-a0)}.cl-alert_error .cl-alert__header{border-bottom:var(--cl-danger-border);color:var(--cl-danger-a0)}.cl-alert_error .cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-danger-a0)}.cl-alert_error .cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-danger-a0)}.cl-alert_warning .cl-alert__content{border:var(--cl-warning-border);color:var(--cl-warning-a0)}.cl-alert_warning .cl-alert__header{border-bottom:var(--cl-warning-border);color:var(--cl-warning-a0)}.cl-alert_warning .cl-alert__button span:before{color:var(--cl-warning-a0)}.cl-alert_warning .cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-warning-a0)}.cl-alert_warning .cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-warning-a0)}.cl-alert_info .cl-alert__content{border:var(--cl-info-border);color:var(--cl-info-a0)}.cl-alert_info .cl-alert__header{border-bottom:var(--cl-info-border);color:var(--cl-info-a0)}.cl-alert_info .cl-alert__button span:before{color:var(--cl-info-a0)}.cl-alert_info .cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-info-a0)}.cl-alert_info .cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-info-a0)}.cl-alert_help .cl-alert__content{border:var(--cl-light-border)}
+.cl-alert{bottom:var(--cl-l-gap);z-index:var(--cl-z-index-popup);width:90vw;animation:.4s cl-fade-in;position:fixed;left:50%;transform:translate(-50%)}@media screen and (width>=1024px){.cl-alert{width:50vw;right:var(--cl-l-gap);left:auto;transform:none}}.cl-alert__content{color:var(--cl-base-font-color);gap:var(--cl-m-gap);background:var(--cl-base-background-color);padding:var(--cl-m-gap) var(--cl-l-gap);box-shadow:var(--cl-box-shadow);border:var(--cl-accent-border);border-radius:var(--cl-border-radius);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;flex-direction:column;font-weight:400;line-height:1.5;display:flex;position:relative}.cl-alert__header{padding-right:var(--cl-thumb-size)}@media (width>=640px){.cl-alert__content{font-size:var(--cl-typography-small-tablet)}}@media (width>=1024px){.cl-alert__content{font-size:var(--cl-typography-small-desktop)}}.cl-alert__message{margin:var(--cl-m-gap) 0}.cl-alert__button{right:var(--cl-m-gap);top:var(--cl-m-gap);position:absolute}.cl-alert__progress-bar{appearance:none;width:100%;height:var(--cl-s-gap);background-color:var(--cl-base-background-color);border:none}.cl-alert__progress-bar::-webkit-progress-bar{background-color:var(--cl-base-background-color)}.cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-surface-tonal-a30)}.cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-surface-tonal-a30)}.cl-alert_closing{animation:.4s cl-fade-out}.cl-alert_success .cl-alert__content{border:var(--cl-success-border);color:var(--cl-success-a0)}.cl-alert_success .cl-alert__header{border-bottom:var(--cl-success-border);color:var(--cl-success-a0)}.cl-alert_success .cl-alert__button span:before{color:var(--cl-success-a0)}.cl-alert_success .cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-success-a0)}.cl-alert_success .cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-success-a0)}.cl-alert_error .cl-alert__content{border:var(--cl-danger-border);color:var(--cl-danger-a0)}.cl-alert_error .cl-alert__button span:before{color:var(--cl-danger-a0)}.cl-alert_error .cl-alert__header{border-bottom:var(--cl-danger-border);color:var(--cl-danger-a0)}.cl-alert_error .cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-danger-a0)}.cl-alert_error .cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-danger-a0)}.cl-alert_warning .cl-alert__content{border:var(--cl-warning-border);color:var(--cl-warning-a0)}.cl-alert_warning .cl-alert__header{border-bottom:var(--cl-warning-border);color:var(--cl-warning-a0)}.cl-alert_warning .cl-alert__button span:before{color:var(--cl-warning-a0)}.cl-alert_warning .cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-warning-a0)}.cl-alert_warning .cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-warning-a0)}.cl-alert_info .cl-alert__content{border:var(--cl-info-border);color:var(--cl-info-a0)}.cl-alert_info .cl-alert__header{border-bottom:var(--cl-info-border);color:var(--cl-info-a0)}.cl-alert_info .cl-alert__button span:before{color:var(--cl-info-a0)}.cl-alert_info .cl-alert__progress-bar::-webkit-progress-value{background-color:var(--cl-info-a0)}.cl-alert_info .cl-alert__progress-bar::-moz-progress-bar{background-color:var(--cl-info-a0)}.cl-alert_help .cl-alert__content{border:var(--cl-light-border)}

package/dist/components/molecules/alert/Alert.helpers.js

@@ -1,41 +1,27 @@
-import { AlertMode as r } from "../../../enums/alert-mode.js";
+import { AlertMode as e } from "../../../enums/alert-mode.js";
 import { IconName as t } from "../../../enums/icon-name.js";
-function a(n, e) {
-  if (e) return e;
-  switch (n) {
-    case r.Info:
-      return "For your information";
-    case r.Warning:
-      return "Please pay attention";
-    case r.Error:
-      return "Something went wrong";
-    case r.Success:
-      return "Everything is okay";
-    case r.Help:
-      return "Useful tip";
-    default:
-      return "Alert";
-  }
+//#region src/components/molecules/alert/Alert.helpers.tsx
+function n(t, n) {
+	if (n) return n;
+	switch (t) {
+		case e.Info: return "For your information";
+		case e.Warning: return "Please pay attention";
+		case e.Error: return "Something went wrong";
+		case e.Success: return "Everything is okay";
+		case e.Help: return "Useful tip";
+		default: return "Alert";
+	}
 }
-function c(n, e) {
-  if (e)
-    return e;
-  switch (n) {
-    case r.Info:
-      return t.Info;
-    case r.Warning:
-      return t.AlertTriangle;
-    case r.Error:
-      return t.XOctagon;
-    case r.Success:
-      return t.CheckCircle;
-    case r.Help:
-      return t.LifeBuoy;
-    default:
-      return;
-  }
+function r(n, r) {
+	if (r) return r;
+	switch (n) {
+		case e.Info: return t.Info;
+		case e.Warning: return t.AlertTriangle;
+		case e.Error: return t.XOctagon;
+		case e.Success: return t.CheckCircle;
+		case e.Help: return t.LifeBuoy;
+		default: return;
+	}
 }
-export {
-  c as getAlertIcon,
-  a as getAlertTitle
-};
+//#endregion
+export { r as getAlertIcon, n as getAlertTitle };