chop-logic-components 4.2.0 → 4.3.0

package/dist/components/atoms/avatar/Avatar.css

@@ -0,0 +1 @@
+.cl-avatar{border:var(--cl-light-border);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.cl-avatar__image{width:var(--cl-xl-gap);height:var(--cl-xl-gap);object-fit:cover;border-radius:50%}.cl-avatar__fallback{width:var(--cl-xl-gap);height:var(--cl-xl-gap);background-color:var(--cl-surface-tonal-a10);color:var(--cl-base-font-color);font-family:var(--cl-core-font);font-size:var(--cl-typography-base-mobile);border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:inline-flex}.cl-avatar__link{color:inherit;border-radius:50%;text-decoration:none;display:inline-flex}.cl-avatar__link:focus{outline:2px solid var(--cl-accent-a0);outline-offset:2px}

package/dist/components/atoms/avatar/Avatar.d.ts

@@ -0,0 +1,7 @@
+import { AvatarProps } from '../../../types';
+import { FC } from 'react';
+declare const Avatar: FC<AvatarProps & {
+    tooltip?: string;
+    visibleOn?: "hover" | "click" | "focus" | "contextmenu";
+}>;
+export default Avatar;

package/dist/components/atoms/avatar/Avatar2.js

@@ -0,0 +1,44 @@
+import { withTooltip as e } from "../../hocs/with-tooltip/with-tooltip.js";
+import './Avatar.css';/* empty css       */
+import { LinkTarget as t } from "../../../enums/link-target.js";
+import { getClassName as n } from "../../../utils/get-class-name.js";
+import { useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+var a = e(({ name: e, imageUrl: a, link: o, linkTarget: s = t.Self, className: c, tooltip: l, ...u }) => {
+	let [d, f] = r(!1), p = n(["cl-avatar", c]), m = d ? /* @__PURE__ */ i("span", {
+		className: "cl-avatar__fallback",
+		role: "img",
+		"aria-label": e,
+		children: /* @__PURE__ */ i("span", {
+			"aria-hidden": "true",
+			children: e.charAt(0).toUpperCase()
+		})
+	}) : /* @__PURE__ */ i("img", {
+		className: "cl-avatar__image",
+		src: a,
+		alt: e,
+		onError: () => f(!0)
+	});
+	if (o) {
+		let n = s === t.Blank;
+		return /* @__PURE__ */ i("span", {
+			className: p,
+			...u,
+			children: /* @__PURE__ */ i("a", {
+				href: o,
+				target: s,
+				rel: n ? "noopener noreferrer" : void 0,
+				"aria-label": n ? `${e} (opens in new window)` : e,
+				className: "cl-avatar__link",
+				children: m
+			})
+		});
+	}
+	return /* @__PURE__ */ i("span", {
+		className: p,
+		...u,
+		children: m
+	});
+});
+//#endregion
+export { a as default };

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

@@ -1,43 +1,43 @@
-import { getClassName as e } from "../../../utils/get-class-name.js";
-import { withTooltip as t } from "../../hocs/with-tooltip/with-tooltip.js";
+import { withTooltip as e } from "../../hocs/with-tooltip/with-tooltip.js";
+import { ButtonView as t } from "../../../enums/button-view.js";
+import { getClassName as n } from "../../../utils/get-class-name.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([
+var c = e(({ text: e, icon: c, tooltip: l, extended: u = !1, view: d = t.Primary, label: f, className: p, iconSize: m, ...h }) => {
+	let g = n([
 		p,
 		"cl-button",
 		{ "cl-button_extended": u }
 	]);
 	switch (d) {
-		case n.Primary: return /* @__PURE__ */ s(a, {
+		case t.Primary: return /* @__PURE__ */ s(a, {
 			className: g,
 			icon: c,
-			text: t,
+			text: e,
 			"aria-label": f,
 			iconSize: m,
 			...h
 		});
-		case n.Secondary: return /* @__PURE__ */ s(o, {
+		case t.Secondary: return /* @__PURE__ */ s(o, {
 			className: g,
 			icon: c,
-			text: t,
+			text: e,
 			"aria-label": f,
 			iconSize: m,
 			...h
 		});
-		case n.Icon: return /* @__PURE__ */ s(r, {
+		case t.Icon: return /* @__PURE__ */ s(r, {
 			label: f,
 			icon: c,
 			iconSize: m,
 			...h,
 			className: p
 		});
-		case n.Inner: return /* @__PURE__ */ s(i, {
+		case t.Inner: return /* @__PURE__ */ s(i, {
 			label: f,
 			icon: c,
 			iconSize: m,

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

@@ -1,13 +1,13 @@
-import { getClassName as e } from "../../../../utils/get-class-name.js";
-import { ElementSize as t } from "../../../../enums/element-size.js";
+import { ElementSize as e } from "../../../../enums/element-size.js";
+import { getClassName as t } from "../../../../utils/get-class-name.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", {
+var i = ({ icon: i, className: a, label: o, iconSize: s = e.Medium, ...c }) => /* @__PURE__ */ r("button", {
 	...c,
 	"aria-label": o,
-	className: e(["cl-icon-button", a]),
+	className: t(["cl-icon-button", a]),
 	children: i && /* @__PURE__ */ r(n, {
 		name: i,
 		className: "cl-icon-button__icon",

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

@@ -1,11 +1,11 @@
-import { getClassName as e } from "../../../../utils/get-class-name.js";
-import { ElementSize as t } from "../../../../enums/element-size.js";
+import { ElementSize as e } from "../../../../enums/element-size.js";
+import { getClassName as t } from "../../../../utils/get-class-name.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]),
+var i = ({ onClick: i, label: a, icon: o, disabled: s, className: c, iconSize: l = e.Small, ...u }) => /* @__PURE__ */ r("button", {
+	className: t(["cl-inner-button", c]),
 	onClick: i,
 	"aria-label": a,
 	type: "button",

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

@@ -1,12 +1,12 @@
-import { getClassName as e } from "../../../../utils/get-class-name.js";
-import { ElementSize as t } from "../../../../enums/element-size.js";
+import { ElementSize as e } from "../../../../enums/element-size.js";
+import { getClassName as t } from "../../../../utils/get-class-name.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", {
+var a = ({ icon: a, text: o, className: s, iconSize: c = e.Small, ...l }) => /* @__PURE__ */ i("button", {
 	...l,
-	className: e(["cl-primary-button", s]),
+	className: t(["cl-primary-button", s]),
 	children: [a && /* @__PURE__ */ r(n, {
 		name: a,
 		className: "cl-primary-button__icon",

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

@@ -1,12 +1,12 @@
-import { getClassName as e } from "../../../../utils/get-class-name.js";
-import { ElementSize as t } from "../../../../enums/element-size.js";
+import { ElementSize as e } from "../../../../enums/element-size.js";
+import { getClassName as t } from "../../../../utils/get-class-name.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", {
+var a = ({ icon: a, text: o, className: s, iconSize: c = e.Small, ...l }) => /* @__PURE__ */ i("button", {
 	...l,
-	className: e(["cl-secondary-button", s]),
+	className: t(["cl-secondary-button", s]),
 	children: [a && /* @__PURE__ */ r(n, {
 		name: a,
 		className: "cl-secondary-button__icon",

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

@@ -1,10 +1,10 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useCallback as t } from "react";
+import { useCallback as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
 //#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", {
+var n = ({ multiline: n, value: r, placeholder: i, onChange: a, onBlur: o, onKeyDown: s, className: c, inputRef: l, ...u }) => /* @__PURE__ */ t(n ? "textarea" : "input", {
 	ref: l,
 	value: r,
-	onChange: t((e) => {
+	onChange: e((e) => {
 		a(e.target.value);
 	}, [a]),
 	onBlur: o,

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

@@ -5,17 +5,17 @@ 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";
+import { useCallback as o, useRef as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
 //#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);
+	let y = s(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) => {
+	let D = o((e) => {
 		f?.(e), x();
-	}, [f, x]), O = s(() => {
+	}, [f, x]), O = o(() => {
 		S(), T();
-	}, [S, T]), k = s((e) => {
+	}, [S, T]), k = o((e) => {
 		e.key === "Enter" && !h && (e.preventDefault(), O()), e.key === "Escape" && (E(), S());
 	}, [
 		h,
@@ -31,7 +31,7 @@ var l = ({ value: l, isEditMode: u, onChange: d, onClick: f, className: p, autoS
 			"cl-editable-text_empty": !C
 		}
 	]);
-	return b && !_ ? /* @__PURE__ */ o(t, {
+	return b && !_ ? /* @__PURE__ */ c(t, {
 		multiline: h,
 		value: C,
 		placeholder: g,
@@ -41,7 +41,7 @@ var l = ({ value: l, isEditMode: u, onChange: d, onClick: f, className: p, autoS
 		className: A,
 		inputRef: y,
 		...v
-	}) : /* @__PURE__ */ o(n, {
+	}) : /* @__PURE__ */ c(n, {
 		value: C,
 		placeholder: g,
 		onClick: D,

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

@@ -1,21 +1,21 @@
-import { getClassName as e } from "../../../utils/get-class-name.js";
-import { ElementSize as t } from "../../../enums/element-size.js";
+import { ElementSize as e } from "../../../enums/element-size.js";
+import { getClassName as t } from "../../../utils/get-class-name.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 }) => r ? /* @__PURE__ */ n("span", {
+var r = ({ name: r, testId: i, className: a, hidden: o, size: s = e.Medium, ...c }) => r ? /* @__PURE__ */ n("span", {
 	"data-testid": i,
-	className: e([
+	className: t([
 		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
+			"cl-icon_extra-small": s === e.ExtraSmall,
+			"cl-icon_small": s === e.Small,
+			"cl-icon_medium": s === e.Medium,
+			"cl-icon_large": s === e.Large,
+			"cl-icon_xlarge": s === e.ExtraLarge,
+			"cl-icon_2xlarge": s === e.ExtraExtraLarge
 		}
 	]),
 	"aria-hidden": o,

package/dist/components/atoms/image/BasicImage.d.ts

@@ -2,11 +2,13 @@ import { FC } from 'react';
 type Props = {
     src: string;
     alt: string;
+    srcSet?: string;
     sizes?: string;
     width?: number | string;
     height?: number | string;
     loading?: 'lazy' | 'eager';
     decoding?: 'sync' | 'async' | 'auto';
+    aspectRatio?: string;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 };
 export declare const BasicImage: FC<Props>;

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

@@ -1,15 +1,10 @@
 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,
+var t = ({ aspectRatio: t, alt: n, ...r }) => /* @__PURE__ */ e("img", {
+	...r,
 	alt: n,
-	width: r,
-	height: i,
-	loading: o,
-	decoding: s,
-	sizes: a,
-	className: "cl-image__img",
-	onError: c
+	style: { aspectRatio: t },
+	className: "cl-image__img"
 });
 //#endregion
 export { t as BasicImage };

package/dist/components/atoms/image/Image.css

@@ -1 +1 @@
-.cl-image{object-fit:cover;border-radius:var(--cl-border-radius)}.cl-image__img{border-radius:var(--cl-border-radius);max-width:100%;height:auto}.cl-image__picture{object-fit:cover;border-radius:var(--cl-border-radius);display:block}.cl-image__fallback{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.cl-image__fallback-icon{width:148px;height:148px}.cl-image__fallback-icon:before{font-size:6rem}.cl-image__fallback-text{text-align:center;padding-top: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}@media (width>=640px){.cl-image__fallback-text{font-size:var(--cl-typography-small-tablet)}}@media (width>=1024px){.cl-image__fallback-text{font-size:var(--cl-typography-small-desktop)}}
+.cl-image{border-radius:var(--cl-border-radius);line-height:0}.cl-image__img{object-fit:cover;border-radius:inherit;max-width:100%;height:auto;display:block}.cl-image__picture{object-fit:cover;border-radius:inherit;display:block}.cl-image__fallback{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.cl-image__fallback-icon{width:148px;height:148px}.cl-image__fallback-icon:before{font-size:6rem}.cl-image__fallback-text{text-align:center;padding-top: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}@media (width>=640px){.cl-image__fallback-text{font-size:var(--cl-typography-small-tablet)}}@media (width>=1024px){.cl-image__fallback-text{font-size:var(--cl-typography-small-desktop)}}

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

@@ -1,24 +1,24 @@
-import { getClassName as e } from "../../../utils/get-class-name.js";
-import { withFigureCaption as t } from "../../hocs/with-figure-caption/with-figure-caption.js";
+import { withFigureCaption as e } from "../../hocs/with-figure-caption/with-figure-caption.js";
+import { getClassName as t } from "../../../utils/get-class-name.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);
+import { useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+var s = e(({ alt: e, sources: s = [], decorative: c = !1, onError: l, className: u, ...d }) => {
+	let [f, p] = a(!1), m = s.length > 0, h = c ? "" : e, g = t(["cl-image", u]), _ = (e) => {
+		p(!0), l?.(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,
+	return f ? /* @__PURE__ */ o(r, {}) : /* @__PURE__ */ o("div", {
+		className: g,
+		children: m ? /* @__PURE__ */ o(i, {
+			alt: h,
+			sources: s,
+			onError: _,
+			...d
+		}) : /* @__PURE__ */ o(n, {
+			alt: h,
 			onError: _,
 			...d
 		})

package/dist/components/atoms/image/ResponsivePicture.d.ts

@@ -9,6 +9,7 @@ type Props = {
     height?: number | string;
     loading?: 'lazy' | 'eager';
     decoding?: 'sync' | 'async' | 'auto';
+    aspectRatio?: string;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 };
 export declare const ResponsivePicture: FC<Props>;

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

@@ -1,13 +1,20 @@
 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 })]
-});
+var r = (e) => "media" in e && !!e.media, i = (e) => "descriptor" in e && !!e.descriptor, a = ({ sources: a = [], sizes: o, ...s }) => {
+	let c = a.filter(r), l = a.filter(i), u = l.length > 0 ? l.map((e) => `${e.src} ${e.descriptor}`).join(", ") : void 0;
+	return /* @__PURE__ */ n("picture", {
+		className: "cl-image__picture",
+		children: [c.map((e) => /* @__PURE__ */ t("source", {
+			srcSet: e.src,
+			media: e.media,
+			type: e.type
+		}, e.src)), /* @__PURE__ */ t(e, {
+			srcSet: u,
+			sizes: u ? o : void 0,
+			...s
+		})]
+	});
+};
 //#endregion
-export { r as ResponsivePicture };
+export { a as ResponsivePicture };

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

@@ -1,3 +1,4 @@
+export { default as Avatar } from './avatar/Avatar';
 export { default as Button } from './button/Button';
 export { default as EditableText } from './editable-text/EditableText';
 export { default as ErrorMessage } from './error-message/ErrorMessage';
@@ -8,4 +9,5 @@ export { default as Input } from './input/Input';
 export { default as Label } from './label/Label';
 export { default as Link } from './link/Link';
 export { default as Portal } from './portal/Portal';
+export { default as Tag } from './tag/Tag';
 export { default as Tooltip } from './tooltip/Tooltip';

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

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

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

@@ -1,16 +1,16 @@
-import { getClassName as e } from "../../../utils/get-class-name.js";
-import { ElementSize as t } from "../../../enums/element-size.js";
+import { ElementSize as e } from "../../../enums/element-size.js";
+import { getClassName as t } from "../../../utils/get-class-name.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 }) => {
+var a = ({ label: a, required: o, inputId: s, icon: c, iconPosition: l, isTextHidden: u = !1, iconSize: d = e.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([
+		className: t([
 			"cl-label",
 			p,
 			{ "cl-label_disabled": f }

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

@@ -1,11 +1,11 @@
-import { getClassName as e } from "../../../utils/get-class-name.js";
-import { ElementSize as t } from "../../../enums/element-size.js";
+import { ElementSize as e } from "../../../enums/element-size.js";
+import { getClassName as t } from "../../../utils/get-class-name.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([
+	let m = t([
 		"cl-link",
 		d,
 		{ "cl-link_disabled": u }
@@ -13,7 +13,7 @@ var a = ({ href: a, children: o, icon: s, iconPosition: c = "left", external: l
 		name: s,
 		className: "cl-link__icon",
 		hidden: !0,
-		size: t.Small
+		size: e.Small
 	}) : null, v = s && c === "left", y = s && c === "right";
 	return /* @__PURE__ */ i("a", {
 		href: a,

package/dist/components/atoms/tag/Tag.css

@@ -0,0 +1 @@
+.cl-tag{padding:var(--cl-xs-gap) var(--cl-m-gap);border-radius:var(--cl-l-gap);background-color:var(--cl-tag-color,var(--cl-surface-tonal-a0));white-space:nowrap;text-wrap:wrap;text-align:center;text-overflow:ellipsis;max-width:30vw;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:inline-block;overflow:hidden}@media (width>=640px){.cl-tag{font-size:var(--cl-typography-small-tablet);padding:var(--cl-s-gap) var(--cl-l-gap);max-width:20vw}}@media (width>=1024px){.cl-tag{font-size:var(--cl-typography-small-desktop);max-width:10vw}}

package/dist/components/atoms/tag/Tag.d.ts

@@ -0,0 +1,7 @@
+import { TagProps } from '../../../types';
+import { FC } from 'react';
+declare const Tag: FC<TagProps & {
+    tooltip?: string;
+    visibleOn?: "hover" | "click" | "focus" | "contextmenu";
+}>;
+export default Tag;

package/dist/components/atoms/tag/Tag2.js

@@ -0,0 +1,15 @@
+import { withTooltip as e } from "../../hocs/with-tooltip/with-tooltip.js";
+import { getClassName as t } from "../../../utils/get-class-name.js";
+import './Tag.css';/* empty css    */
+import { jsx as n } from "react/jsx-runtime";
+var r = e(({ name: e, color: r, className: i, style: a, tooltip: o, ...s }) => /* @__PURE__ */ n("span", {
+	className: t(["cl-tag", i]),
+	style: {
+		...a,
+		...r ? { "--cl-tag-color": r } : {}
+	},
+	...s,
+	children: e
+}));
+//#endregion
+export { r as default };

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

@@ -1,25 +1,26 @@
-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 { SemanticColor as e } from "../../../enums/semantic-color.js";
+import { TooltipContainer as t } from "../../../enums/tooltip-container.js";
+import { getClassName as n } from "../../../utils/get-class-name.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, ..._ }) => {
+var s = ({ children: s, tooltipContent: c, id: l, style: u, className: d, containerTag: f = t.Span, visibleOn: p = "hover", autoClose: m = !1, autoCloseDelay: h = 3e3, color: g = e.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([
+	}), k = n([
 		"cl-tooltip",
 		d,
-		{ [`cl-tooltip_${g}`]: g !== t.Default }
+		{ [`cl-tooltip_${g}`]: g !== e.Default }
 	]);
 	return /* @__PURE__ */ o(v, {
 		style: {
 			position: "relative",
-			cursor: "pointer"
+			cursor: "pointer",
+			lineHeight: 0
 		},
 		onClick: p === "click" ? x : void 0,
 		onMouseOver: p === "hover" ? y : void 0,
@@ -29,7 +30,7 @@ var s = ({ children: s, tooltipContent: c, id: l, style: u, className: d, contai
 		onContextMenu: p === "contextmenu" ? (e) => S(e) : void 0,
 		tabIndex: -1,
 		ref: D,
-		"aria-describedby": C,
+		"aria-describedby": E ? C : void 0,
 		children: [s, E && /* @__PURE__ */ a(r, { children: /* @__PURE__ */ a("div", {
 			style: {
 				...u,

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

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

package/dist/components/hocs/with-error-boundary/with-error-boundary.js

@@ -1,8 +1,8 @@
 import e from "../../atoms/error-message/ErrorMessage2.js";
-import { jsx as t } from "react/jsx-runtime";
-import { Component as n, useId as r } from "react";
+import { Component as t, useId as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/components/hocs/with-error-boundary/with-error-boundary.tsx
-var i = class extends n {
+var i = class extends t {
 	constructor(e) {
 		super(e), this.state = { hasError: !1 };
 	}
@@ -13,7 +13,7 @@ var i = class extends n {
 		this.props.onError?.();
 	}
 	render() {
-		return this.state.hasError ? /* @__PURE__ */ t(e, {
+		return this.state.hasError ? /* @__PURE__ */ r(e, {
 			errorId: this.props.errorId,
 			message: this.props.errorMessage,
 			visible: !0
@@ -21,11 +21,11 @@ var i = class extends n {
 	}
 };
 function a(e) {
-	return ({ errorMessage: n, onError: a, ...o }) => /* @__PURE__ */ t(i, {
-		errorId: `cl-error-boundary-${r().replace(/:/g, "")}`,
-		errorMessage: n,
+	return ({ errorMessage: t, onError: a, ...o }) => /* @__PURE__ */ r(i, {
+		errorId: `cl-error-boundary-${n().replaceAll(":", "")}`,
+		errorMessage: t,
 		onError: a,
-		children: /* @__PURE__ */ t(e, { ...o })
+		children: /* @__PURE__ */ r(e, { ...o })
 	});
 }
 //#endregion