@spteck/react-controls-v2 2.7.1 → 2.7.2

package/dist/index.js

@@ -50321,51 +50321,63 @@ var wv = {
 		color: e,
 		verticalAlign: "middle"
 	}),
-	buttonIcon: J({
-		"&&": {
-			fontSize: n - 3,
-			color: e,
-			verticalAlign: "middle"
-		},
-		"&&:hover": {
-			color: q.colorBrandBackground,
-			backdropFilter: "blur(6px)"
-		}
-	})
+	buttonIcon: J({ "&&": {
+		fontSize: n - 3,
+		color: e,
+		verticalAlign: "middle"
+	} })
 }), Mv = ({ views: e, likes: t, comments: n, showComments: r = !0, color: i, isOverDue: a = !1, iconSize: o = 20, heartSize: s = 16, paddingTop: c, showShare: l = !1, onShare: u }) => {
 	let d = N_().getEmoji("heart"), f = a ? q.colorStatusWarningForeground1 : i, p = jv(i, f, o);
-	return e === void 0 && t === void 0 && (!r || n === void 0 || n <= 0) && !l ? null : /* @__PURE__ */ H(Y, {
+	if (e === void 0 && (t === void 0 || t <= 0) && (!r || n === void 0 || n <= 0) && !l) return null;
+	let m = {
+		backgroundColor: q.colorNeutralBackgroundAlpha,
+		border: `1px solid ${q.colorNeutralStroke2}`,
+		backdropFilter: "blur(6px)"
+	}, h = M.useMemo(() => e === void 0 ? void 0 : gv(e), [e]), g = M.useMemo(() => t === void 0 ? void 0 : gv(t), [t]), _ = M.useMemo(() => n === void 0 ? void 0 : gv(n), [n]);
+	return /* @__PURE__ */ H(Y, {
 		direction: "horizontal",
-		gap: "s",
-		alignItems: "center",
+		gap: "xs",
+		alignItems: "flex-start",
 		style: c ? { paddingTop: c } : void 0,
 		children: [
-			e !== void 0 && /* @__PURE__ */ V(Y, {
-				direction: "horizontal",
-				gap: "2px",
+			e !== void 0 && /* @__PURE__ */ H(Y, {
+				direction: "vertical",
 				alignItems: "center",
-				children: /* @__PURE__ */ V(di, {
-					content: "Views",
+				gap: "0px",
+				children: [/* @__PURE__ */ V(di, {
+					content: `${h} views`,
 					relationship: "label",
-					children: /* @__PURE__ */ H("div", { children: [/* @__PURE__ */ V(ha, {
-						className: p.viewIcon,
-						"aria-hidden": !0
-					}), /* @__PURE__ */ V(X, {
-						fontSize: "xs",
-						color: f,
-						fontWeight: "bold",
-						paddingLeft: "xs",
-						children: gv(e)
-					})] })
-				})
+					withArrow: !0,
+					children: /* @__PURE__ */ V("div", { children: /* @__PURE__ */ V(W, {
+						appearance: "subtle",
+						shape: "circular",
+						size: "small",
+						icon: /* @__PURE__ */ V(ha, {
+							className: p.viewIcon,
+							"aria-hidden": !0
+						}),
+						"aria-label": "Views",
+						style: {
+							cursor: "default",
+							...m
+						}
+					}) })
+				}), /* @__PURE__ */ V(X, {
+					fontSize: "xs",
+					color: f,
+					fontWeight: "bold",
+					style: { textAlign: "center" },
+					children: h
+				})]
 			}),
-			(t === void 0 || t > 0) && /* @__PURE__ */ H(Y, {
-				direction: "horizontal",
-				gap: "2px",
+			t !== void 0 && t > 0 && /* @__PURE__ */ H(Y, {
+				direction: "vertical",
 				alignItems: "center",
+				gap: "0px",
 				children: [d && /* @__PURE__ */ V(di, {
-					content: "Likes",
+					content: `${g} likes`,
 					relationship: "label",
+					withArrow: !0,
 					children: /* @__PURE__ */ V("div", { children: /* @__PURE__ */ V(W, {
 						appearance: "subtle",
 						shape: "circular",
@@ -50378,50 +50390,65 @@ var wv = {
 							height: s
 						}),
 						"aria-label": "Likes",
-						style: { cursor: "default" }
+						style: {
+							cursor: "default",
+							...m
+						}
 					}) })
 				}), /* @__PURE__ */ V(X, {
 					fontSize: "xs",
 					color: i,
 					fontWeight: "bold",
-					children: t !== void 0 && gv(t)
+					style: { textAlign: "center" },
+					children: g
 				})]
 			}),
-			r && n !== void 0 && n > 0 && /* @__PURE__ */ V(Y, {
-				direction: "horizontal",
-				gap: "2px",
+			r && n !== void 0 && n > 0 && /* @__PURE__ */ H(Y, {
+				direction: "vertical",
 				alignItems: "center",
-				children: /* @__PURE__ */ V(di, {
-					content: "Comments",
+				gap: "0px",
+				children: [/* @__PURE__ */ V(di, {
+					content: `${_} comments`,
 					relationship: "label",
-					children: /* @__PURE__ */ H("div", { children: [
-						/* @__PURE__ */ V(sa, {
-							className: p.commentIcon,
-							"aria-hidden": !0
-						}),
-						/* @__PURE__ */ V(X, {
-							fontSize: "xs",
-							color: i,
-							fontWeight: "bold",
-							children: gv(n)
-						}),
-						"/",
-						" "
-					] })
-				})
+					withArrow: !0,
+					children: /* @__PURE__ */ V("div", { children: /* @__PURE__ */ V(W, {
+						appearance: "subtle",
+						shape: "circular",
+						size: "small",
+						icon: /* @__PURE__ */ V(sa, { className: p.commentIcon }),
+						"aria-label": "Comments",
+						style: {
+							cursor: "default",
+							...m
+						}
+					}) })
+				}), /* @__PURE__ */ V(X, {
+					fontSize: "xs",
+					color: i,
+					fontWeight: "bold",
+					style: { textAlign: "center" },
+					children: _
+				})]
 			}),
-			l && /* @__PURE__ */ V(di, {
-				content: "Share",
-				relationship: "label",
-				children: /* @__PURE__ */ V(W, {
-					appearance: "subtle",
-					shape: "circular",
-					size: "small",
-					icon: /* @__PURE__ */ V(ja, { className: p.buttonIcon }),
-					"aria-label": "Share",
-					onClick: (e) => {
-						e.stopPropagation(), e.preventDefault(), u?.();
-					}
+			l && /* @__PURE__ */ V(Y, {
+				direction: "vertical",
+				alignItems: "center",
+				gap: "0px",
+				children: /* @__PURE__ */ V(di, {
+					content: "Share",
+					relationship: "label",
+					withArrow: !0,
+					children: /* @__PURE__ */ V(W, {
+						appearance: "subtle",
+						shape: "circular",
+						size: "small",
+						icon: /* @__PURE__ */ V(ja, { className: p.buttonIcon }),
+						"aria-label": "Share",
+						style: { ...m },
+						onClick: (e) => {
+							e.stopPropagation(), e.preventDefault(), u?.();
+						}
+					})
 				})
 			})
 		]
@@ -50430,29 +50457,33 @@ var wv = {
 	let m = c && !!e, h = c && !!t, g = l && (n !== void 0 || r !== void 0 || a && i !== void 0) || u;
 	if (!m && !h && !g) return null;
 	let _ = o ? q.colorNeutralForegroundStaticInverted : q.colorNeutralForeground2, v = s ? Ov : o ? q.colorNeutralForegroundStaticInverted : q.colorNeutralForeground3, y = o ? q.colorNeutralForegroundStaticInverted : q.colorNeutralForeground3;
-	return /* @__PURE__ */ H(Y, {
+	return /* @__PURE__ */ V(Y, {
 		direction: "vertical",
 		gap: "0px",
 		className: f,
-		style: p,
+		style: { ...p },
 		paddingTop: "s",
-		children: [m && /* @__PURE__ */ V(X, {
-			fontWeight: "semibold",
-			fontSize: "12px",
-			color: _,
-			style: { lineHeight: "1.3" },
-			children: e
-		}), (h || g) && /* @__PURE__ */ H(Y, {
+		children: /* @__PURE__ */ H(Y, {
 			direction: "horizontal",
 			gap: "0px",
 			justifyContent: "space-between",
-			alignItems: "center",
-			children: [h ? /* @__PURE__ */ V(X, {
-				fontSize: "11px",
-				color: v,
-				style: { lineHeight: "1.2" },
-				children: t
-			}) : /* @__PURE__ */ V("span", {}), g && /* @__PURE__ */ V(Mv, {
+			children: [/* @__PURE__ */ H(Y, {
+				direction: "vertical",
+				gap: "0px",
+				justifyContent: "end",
+				children: [m && /* @__PURE__ */ V(X, {
+					fontWeight: "semibold",
+					fontSize: "12px",
+					color: _,
+					style: { lineHeight: "1.3" },
+					children: e
+				}), h && /* @__PURE__ */ V(X, {
+					fontSize: "11px",
+					color: v,
+					style: { lineHeight: "1.2" },
+					children: t
+				})]
+			}), g && /* @__PURE__ */ V(Mv, {
 				views: n,
 				likes: r,
 				comments: i,
@@ -50462,7 +50493,7 @@ var wv = {
 				showShare: u,
 				onShare: d
 			})]
-		})]
+		})
 	});
 }, Pv = (e) => {
 	let { item: t, linkUrl: n, onClick: r, isOverDue: i = !1, variant: a = "default", className: o, styles: s, maxWidth: c, locale: l = navigator.language, timeZone: u = Intl.DateTimeFormat().resolvedOptions().timeZone, headlineLines: d, bodyLines: f, showBodyText: p = !0, showAuthorDate: m = !0, showStats: h = !0, showComments: g = !0, showShare: _ = !1, onShare: v } = e, y = a ?? "default", { category: b, headline: x, bodyText: S, author: C, date: w, imageUrl: T, views: E, likes: D, comments: O } = t, k = Av(i), { formatUtcDate: A } = G_(l, u), { dateText: j, isInteractive: ee } = U_({
@@ -50993,19 +51024,19 @@ var wv = {
 		})
 	});
 }, Uv = (e) => {
-	let { item: t, imageWidth: n = 120, height: r, imagePosition: i = "left", variant: a = "default", linkUrl: o, onClick: s, isOverDue: c = !1, className: l, styles: u, maxWidth: d, locale: f = navigator.language, timeZone: p = Intl.DateTimeFormat().resolvedOptions().timeZone, headlineLines: m, bodyLines: h, showBodyText: g = !0, showAuthorDate: _ = !0, showStats: v = !0, showComments: y = !0, showShare: b = !1, onShare: x } = e, { category: S, headline: C, bodyText: w, author: T, date: E, imageUrl: D, views: O, likes: k, comments: A } = t, j = Vv(c, i, a, D), { formatUtcDate: ee } = G_(f, p), { dateText: M, isInteractive: N, interactiveProps: P } = U_({
+	let { item: t, imageWidth: n = 120, height: r, imagePosition: i = "left", variant: a = "default", linkUrl: o, onClick: s, isOverDue: c = !1, className: l, styles: u, maxWidth: d, locale: f = navigator.language, timeZone: p = Intl.DateTimeFormat().resolvedOptions().timeZone, headlineLines: m, bodyLines: h, showBodyText: g = !0, showAuthorDate: _ = !0, showStats: v = !0, showShare: y = !1, onShare: b } = e, { category: x, headline: S, bodyText: C, author: w, date: T, imageUrl: E, views: D, likes: O, comments: k } = t, A = Vv(c, i, a, E), { formatUtcDate: j } = G_(f, p), { dateText: ee, isInteractive: M, interactiveProps: N } = U_({
 		linkUrl: o,
 		onClick: s,
-		date: E,
-		headline: C,
-		formatUtcDate: ee
-	}), te = (e) => /* @__PURE__ */ H(B, { children: [
-		S && /* @__PURE__ */ V(X, {
+		date: T,
+		headline: S,
+		formatUtcDate: j
+	}), P = (e) => /* @__PURE__ */ H(B, { children: [
+		x && /* @__PURE__ */ V(X, {
 			fontSize: "xs",
 			fontWeight: "bold",
 			color: e ? q.colorBrandBackground : c ? zv : q.colorBrandForeground1,
-			className: e ? j.overlayCategoryLabel : j.categoryLabel,
-			children: S
+			className: e ? A.overlayCategoryLabel : A.categoryLabel,
+			children: x
 		}),
 		/* @__PURE__ */ V(X, {
 			fontSize: "m",
@@ -51013,47 +51044,48 @@ var wv = {
 			color: e ? q.colorNeutralForegroundStaticInverted : q.colorNeutralForeground1,
 			style: { lineHeight: q.lineHeightBase400 },
 			numberOfLines: m,
-			children: C
+			children: S
 		}),
-		g !== !1 && w && /* @__PURE__ */ V(X, {
+		g !== !1 && C && /* @__PURE__ */ V(X, {
 			fontSize: "s",
 			color: e ? q.colorNeutralForegroundStaticInverted : q.colorNeutralForeground2,
 			numberOfLines: h ?? 1,
 			block: !0,
-			children: w
+			children: C
 		}),
 		/* @__PURE__ */ V(Y, {
 			direction: "vertical",
 			gap: "xs",
 			paddingRight: "xl",
+			justifyContent: "end",
+			marginTop: "auto",
 			children: /* @__PURE__ */ V(Hv, {
-				author: T,
-				dateText: M,
-				views: O,
-				likes: k,
-				comments: A,
+				author: w,
+				dateText: ee,
+				views: D,
+				likes: O,
+				comments: k,
 				isOverlay: e,
 				isOverDue: c,
 				showAuthorDate: _,
 				showStats: v,
-				showComments: y,
-				showShare: b,
-				onShare: x ? () => x(t) : void 0
+				showShare: y,
+				onShare: b ? () => b(t) : void 0
 			})
 		})
 	] });
 	return a === "overlay" ? /* @__PURE__ */ H(Y, {
 		direction: "vertical",
-		className: K(j.overlayCard, l),
+		className: K(A.overlayCard, l),
 		style: {
 			maxWidth: d ?? "100%",
 			minHeight: r ?? 160,
-			cursor: N ? "pointer" : void 0,
+			cursor: M ? "pointer" : void 0,
 			...u
 		},
-		...P,
+		...N,
 		children: [
-			/* @__PURE__ */ V("div", { className: j.overlayContent }),
+			/* @__PURE__ */ V("div", { className: A.overlayContent }),
 			/* @__PURE__ */ V("div", { style: { flex: 1 } }),
 			/* @__PURE__ */ V(Y, {
 				direction: "vertical",
@@ -51065,29 +51097,29 @@ var wv = {
 					position: "relative",
 					zIndex: 1
 				},
-				children: te(!0)
+				children: P(!0)
 			})
 		]
 	}) : /* @__PURE__ */ H(Y, {
 		direction: "horizontal",
-		className: K(j.card, l),
+		className: K(A.card, l),
 		style: {
 			maxWidth: d ?? "100%",
 			height: r ?? void 0,
 			flexDirection: i === "right" ? "row-reverse" : "row",
-			cursor: N ? "pointer" : "default",
+			cursor: M ? "pointer" : "default",
 			...u
 		},
-		...P,
-		children: [D && /* @__PURE__ */ V("div", {
-			className: j.imageContainer,
+		...N,
+		children: [E && /* @__PURE__ */ V("div", {
+			className: A.imageContainer,
 			style: { width: n },
 			children: /* @__PURE__ */ V(yv, {
 				ratio: 1,
 				children: /* @__PURE__ */ V("img", {
-					src: D,
-					alt: C,
-					className: j.image,
+					src: E,
+					alt: S,
+					className: A.image,
 					loading: "lazy"
 				})
 			})
@@ -51098,8 +51130,8 @@ var wv = {
 			paddingBottom: "m",
 			paddingLeft: "l",
 			paddingRight: "l",
-			className: j.contentArea,
-			children: te(!1)
+			className: A.contentArea,
+			children: P(!1)
 		})]
 	});
 }, Wv = (e) => {
@@ -69283,8 +69315,8 @@ var EA = M.memo(({ item: e, heroProps: t, containerWidth: n, mediaType: r = "ima
 			draggable: f,
 			children: /* @__PURE__ */ V(Uv, {
 				item: e,
-				imageWidth: 140,
-				height: 140,
+				imageWidth: 180,
+				height: 180,
 				linkUrl: e.linkUrl,
 				variant: "flat",
 				locale: t,
@@ -69364,6 +69396,8 @@ var EA = M.memo(({ item: e, heroProps: t, containerWidth: n, mediaType: r = "ima
 					locale: n,
 					timeZone: r,
 					maxWidth: "100%",
+					imageWidth: 180,
+					height: 180,
 					headlineLines: a,
 					bodyLines: o,
 					showBodyText: s,
@@ -69371,9 +69405,7 @@ var EA = M.memo(({ item: e, heroProps: t, containerWidth: n, mediaType: r = "ima
 					showStats: l,
 					showComments: u,
 					showShare: d,
-					onShare: f,
-					imageWidth: 140,
-					height: 140
+					onShare: f
 				})
 			}, e.id))
 		})

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@spteck/react-controls-v2",
-   "version": "2.7.1",
+   "version": "2.7.2",
    "description": "Framework-agnostic React controls for Vite, Next.js, and SPFx - based on Fluent UI 9",
    "license": "Elastic-2.0",
    "author": "João Mendes",