@spteck/react-controls-v2 2.6.5 → 2.6.7

package/dist/index.js

@@ -57563,34 +57563,41 @@ var CC = Object.assign(SC, {
 		borderColor: `${G.colorBrandStroke1} !important`,
 		boxShadow: `0 0 0 2px ${G.colorBrandBackground2} !important`
 	}
-}) }), TC = ({ options: e, onChange: t, renderItem: n, validate: r, label: i, placeholder: a, defaultValue: o, message: s, messageType: c, required: l, size: u, hint: d }) => {
-	let f = o ? e.find((e) => e.value === o) : void 0, [p, m] = L(o || ""), [h, g] = L(f?.text || ""), [_, v] = L(""), y = wC(), b = (e, n) => {
-		let i = n.optionValue || "", a = n.optionText || "";
-		m(i), g(a);
+}) }), TC = ({ options: e, onChange: t, renderItem: n, validate: r, label: i, placeholder: a, defaultValue: o, value: s, message: c, messageType: l, required: u, size: d, hint: f }) => {
+	let p = s !== void 0, m = (t) => t ? e.find((e) => e.value === t) : void 0, h = p ? s : o ?? "", g = m(h), [_, v] = L(h), [y, b] = L(g?.text ?? ""), [x, S] = L("");
+	j.useEffect(() => {
+		if (p) {
+			let e = m(s);
+			v(s ?? ""), b(e?.text ?? "");
+		}
+	}, [s, p]);
+	let C = p ? s ?? "" : _, w = p ? m(s)?.text ?? y : y, T = wC(), E = (e, n) => {
+		let i = n.optionValue ?? "", a = n.optionText ?? "";
+		p || (v(i), b(a));
 		let o = r ? r(i) : "";
-		v(o), !o && t && t(i);
-	}, x = j.useMemo(() => _ ? "error" : c === "warning" ? "warning" : c === "info" ? "success" : "none", [_, c]);
+		S(o), !o && t && t(i);
+	}, D = j.useMemo(() => x ? "error" : l === "warning" ? "warning" : l === "info" ? "success" : "none", [x, l]);
 	return /* @__PURE__ */ z(Zn, {
 		label: i,
-		required: l,
-		validationMessage: j.useMemo(() => _ || s, [_, s]),
+		required: u,
+		validationMessage: j.useMemo(() => x || c, [x, c]),
 		validationMessageIcon: j.useCallback(() => {
-			switch (x) {
+			switch (D) {
 				case "error": return /* @__PURE__ */ z(fa, {});
 				case "warning": return /* @__PURE__ */ z(Aa, {});
 				case "success": return /* @__PURE__ */ z(Qi, {});
 				default: return null;
 			}
-		}, [x])(),
-		size: u,
-		hint: d,
-		validationState: x,
+		}, [D])(),
+		size: d,
+		hint: f,
+		validationState: D,
 		children: /* @__PURE__ */ z(Xn, {
 			placeholder: a,
-			onOptionSelect: b,
-			value: h,
-			selectedOptions: p ? [p] : [],
-			className: y.dropdownRoot,
+			onOptionSelect: E,
+			value: w,
+			selectedOptions: C ? [C] : [],
+			className: T.dropdownRoot,
 			children: e.map((e) => {
 				let t = e.icon ?? e.checkIcon;
 				return /* @__PURE__ */ z(Er, {
@@ -67507,44 +67514,99 @@ var Ak = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/, jk = (e) => {
 		textAlign: "right"
 	}
 }, Lk = (e, t, n = "image") => {
-	let { borderRadius: r } = e, { getBaseStyles: i } = C_(), a = r ?? G.borderRadiusMedium;
-	return {
-		heroRootStyles: j.useCallback((t, n) => ({
-			...i(e, t, n),
-			overflow: "hidden"
-		}), [i, e]),
-		item: K({
-			position: "relative",
-			overflow: "hidden",
-			width: "100%",
-			height: "100%",
-			borderRadius: a,
-			animation: `${Fk} 0.5s ease-out`
-		}),
-		overlayRoot: K({
-			position: "absolute",
-			inset: 0,
-			display: "flex",
-			flexDirection: "column",
-			borderRadius: a,
-			overflow: "hidden",
-			zIndex: 1,
-			pointerEvents: "none",
-			background: `color-mix(in srgb, ${G.colorBackgroundOverlay} 50%, transparent)`
-		}),
-		overlayScrim: (e) => K({
-			position: "absolute",
-			inset: 0,
-			background: `linear-gradient(
+	let { borderRadius: r } = e, { getBaseStyles: i } = C_(), a = r ?? G.borderRadiusMedium, o = t > 0 && t < 576, s = j.useCallback((t, n) => ({
+		...i(e, t, n),
+		overflow: "hidden"
+	}), [i, e]), c = K({
+		position: "relative",
+		overflow: "hidden",
+		width: "100%",
+		height: "100%",
+		borderRadius: a,
+		animation: `${Fk} 0.5s ease-out`
+	}), l = K({
+		position: "absolute",
+		inset: 0,
+		display: "flex",
+		flexDirection: "column",
+		borderRadius: a,
+		overflow: "hidden",
+		zIndex: 1,
+		pointerEvents: "none",
+		background: `color-mix(in srgb, ${G.colorBackgroundOverlay} 50%, transparent)`
+	}), u = (e) => K({
+		position: "absolute",
+		inset: 0,
+		background: `linear-gradient(
         to top,
         color-mix(in srgb, black ${Math.min(Math.round(e * 100), 100)}%, transparent) 0%,
         color-mix(in srgb, black ${Math.min(Math.round(e * 30), 100)}%, transparent) 55%,
         transparent 100%
       )`,
-			zIndex: 0
-		}),
+		zIndex: 0
+	}), d = G.spacingHorizontalXL, f = G.spacingHorizontalXXL, p = "40px", m = {
+		"top-left": {
+			paddingTop: p,
+			paddingRight: d,
+			paddingBottom: d,
+			paddingLeft: p
+		},
+		"top-center": {
+			paddingTop: f,
+			paddingRight: d,
+			paddingBottom: d,
+			paddingLeft: d
+		},
+		"top-right": {
+			paddingTop: p,
+			paddingRight: p,
+			paddingBottom: d,
+			paddingLeft: d
+		},
+		"center-left": {
+			paddingTop: d,
+			paddingRight: d,
+			paddingBottom: d,
+			paddingLeft: f
+		},
+		center: {
+			paddingTop: d,
+			paddingRight: d,
+			paddingBottom: d,
+			paddingLeft: d
+		},
+		"center-right": {
+			paddingTop: d,
+			paddingRight: f,
+			paddingBottom: d,
+			paddingLeft: d
+		},
+		"bottom-left": {
+			paddingTop: d,
+			paddingRight: d,
+			paddingBottom: p,
+			paddingLeft: p
+		},
+		"bottom-center": {
+			paddingTop: d,
+			paddingRight: d,
+			paddingBottom: f,
+			paddingLeft: d
+		},
+		"bottom-right": {
+			paddingTop: d,
+			paddingRight: p,
+			paddingBottom: p,
+			paddingLeft: d
+		}
+	};
+	return {
+		heroRootStyles: s,
+		item: c,
+		overlayRoot: l,
+		overlayScrim: u,
 		overlayContent: (e) => {
-			let { justify: t, align: r, textAlign: i } = Ik[e] ?? Ik["bottom-left"];
+			let { justify: t, align: r, textAlign: i } = Ik[e] ?? Ik["bottom-left"], a = m[e] ?? m["bottom-left"], o = n === "video" ? "74px" : a.paddingBottom;
 			return K({
 				position: "relative",
 				flex: 1,
@@ -67554,8 +67616,10 @@ var Ak = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/, jk = (e) => {
 				alignItems: r,
 				textAlign: i,
 				zIndex: 1,
-				padding: G.spacingHorizontalXL,
-				paddingBottom: n === "video" ? "74px" : G.spacingHorizontalL,
+				paddingTop: a.paddingTop,
+				paddingRight: a.paddingRight,
+				paddingBottom: o,
+				paddingLeft: a.paddingLeft,
 				gap: G.spacingVerticalS,
 				pointerEvents: "none"
 			});
@@ -67571,13 +67635,16 @@ var Ak = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/, jk = (e) => {
 		overlayTitle: K({
 			textShadow: "0 1px 4px color-mix(in srgb, black 65%, transparent)",
 			color: G.colorNeutralForegroundStaticInverted,
-			margin: 0
+			margin: 0,
+			maxWidth: "80ch",
+			lineHeight: 1.1
 		}),
 		overlayDescription: K({
 			textShadow: "0 1px 3px color-mix(in srgb, black 50%, transparent)",
 			color: G.colorNeutralForegroundStaticInverted,
 			opacity: .9,
-			margin: 0
+			margin: 0,
+			maxWidth: "80ch"
 		}),
 		overlayCta: K({
 			flexShrink: 0,
@@ -67591,7 +67658,7 @@ var Ak = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/, jk = (e) => {
 		}),
 		splitRoot: K({
 			display: "grid",
-			gridTemplateColumns: t < 576 ? "1fr" : "1fr 1fr",
+			gridTemplateColumns: o ? "1fr" : "1fr 1fr",
 			gap: "3px",
 			width: "100%",
 			height: "100%",
@@ -67599,7 +67666,7 @@ var Ak = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/, jk = (e) => {
 		}),
 		featuredRoot: K({
 			display: "grid",
-			gridTemplateColumns: t < 576 ? "1fr" : "2fr 1fr",
+			gridTemplateColumns: o ? "1fr" : "2fr 1fr",
 			gap: "3px",
 			width: "100%",
 			height: "100%",
@@ -67607,44 +67674,45 @@ var Ak = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/, jk = (e) => {
 		}),
 		mosaicWrapper: K({
 			width: "100%",
-			height: t < 576 ? "auto" : "100%",
+			height: o ? "auto" : "100%",
 			gap: "3px",
-			overflow: t < 576 ? "visible" : "hidden"
+			overflow: o ? "visible" : "hidden"
 		}),
 		mosaicPrimary: K({
-			flex: t < 576 ? "none" : "3 0 0",
+			flex: o ? "none" : "3 0 0",
 			minWidth: 0,
 			width: "100%",
-			height: t < 576 ? "260px" : "100%"
+			height: o ? "260px" : "100%"
 		}),
 		mosaicRightGrid: (e) => {
-			let n = t >= 1100 && e >= 3, r = t < 576 ? "1fr" : n ? "1fr 1fr" : "1fr", i = t < 576 ? void 0 : e === 1 ? "1fr" : n ? "1fr 1fr" : `repeat(${e}, 1fr)`;
+			let n = t >= 1100 && e >= 3, r = o ? "1fr" : n ? "1fr 1fr" : "1fr", i = o ? void 0 : e === 1 ? "1fr" : n ? "1fr 1fr" : `repeat(${e}, 1fr)`;
 			return K({
-				flex: t < 576 ? "none" : "2 0 0",
-				width: t < 576 ? "100%" : void 0,
+				flex: o ? "none" : "2 0 0",
+				width: o ? "100%" : void 0,
 				minWidth: 0,
 				display: "grid",
 				gap: "3px",
 				gridTemplateColumns: r,
 				gridTemplateRows: i,
-				height: t < 576 ? "auto" : "100%"
+				height: o ? "auto" : "100%"
 			});
 		},
 		mosaicSpanFull: K({ gridColumn: "1 / -1" }),
 		mosaicMarqueeLane: K({
-			flex: t < 576 ? "none" : "2 0 0",
+			flex: o ? "none" : "2 0 0",
 			minWidth: 0,
-			height: t < 576 ? "320px" : "100%",
+			height: o ? "320px" : "100%",
 			overflow: "hidden"
 		}),
 		mosaicMarqueeItem: K({
 			flex: "0 0 auto",
-			minHeight: t < 576 ? "160px" : "120px"
+			height: o ? "160px" : "180px",
+			width: "100%"
 		}),
 		mosaicScrollLane: K({
-			flex: t < 576 ? "none" : "2 0 0",
+			flex: o ? "none" : "2 0 0",
 			minWidth: 0,
-			height: t < 576 ? "320px" : "100%",
+			height: o ? "320px" : "100%",
 			overflowY: "auto",
 			overflowX: "hidden",
 			scrollbarWidth: "thin",
@@ -67661,7 +67729,7 @@ var Ak = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/, jk = (e) => {
 		}),
 		gridRoot: K({
 			display: "grid",
-			gridTemplateColumns: `repeat(${t >= 1200 ? 4 : t >= 992 ? 3 : t >= 576 ? 2 : 1}, 1fr)`,
+			gridTemplateColumns: `repeat(${t === 0 ? 2 : t >= 1200 ? 4 : t >= 992 ? 3 : t >= 576 ? 2 : 1}, 1fr)`,
 			gap: "3px",
 			width: "100%"
 		}),
@@ -67677,7 +67745,7 @@ var Ak = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/, jk = (e) => {
 			paddingBottom: G.spacingVerticalXS
 		}),
 		filmstripItem: K({
-			flex: `0 0 ${t >= 1200 ? "400px" : t >= 992 ? "340px" : t >= 576 ? "280px" : "220px"}`,
+			flex: `0 0 ${t === 0 ? "280px" : t >= 1200 ? "400px" : t >= 992 ? "340px" : t >= 576 ? "280px" : "220px"}`,
 			scrollSnapAlign: "start"
 		}),
 		carouselWrapper: K({
@@ -67774,24 +67842,24 @@ Vk.displayName = "BackgroundVideo";
 //#region src/components/Hero/HeroOverlay.tsx
 var Hk = j.memo(({ item: e, heroProps: t, containerWidth: n, mediaType: r = "image" }) => {
 	let { title: i, description: a, callToActionLabel: o, callToActionUrl: s, textPosition: c = "bottom-left", overlayOpacity: l = .45 } = e, u = i || a || o, { overlayRoot: d, overlayScrim: f, overlayContent: p, overlayTextGroup: m, overlayTitle: h, overlayDescription: g, overlayCta: _ } = Lk(t, n, r);
-	return u ? /* @__PURE__ */ B(Y, {
+	return u ? /* @__PURE__ */ B("div", {
 		className: d,
-		children: [/* @__PURE__ */ z(Y, {
+		children: [/* @__PURE__ */ z("div", {
 			className: f(l),
 			"aria-hidden": "true"
-		}), /* @__PURE__ */ B(Y, {
+		}), /* @__PURE__ */ B("div", {
 			className: p(c),
 			children: [(i || a) && /* @__PURE__ */ B("div", {
 				className: m,
 				children: [i && /* @__PURE__ */ z(Dv, {
-					fontSize: "l",
+					fontSize: "xl",
 					fontWeight: "bold",
 					numberOfLines: 2,
 					truncate: !0,
 					className: h,
 					children: i
 				}), a && /* @__PURE__ */ z(Dv, {
-					fontSize: "s",
+					fontSize: "m",
 					numberOfLines: 2,
 					className: g,
 					children: a
@@ -67808,11 +67876,7 @@ var Hk = j.memo(({ item: e, heroProps: t, containerWidth: n, mediaType: r = "ima
 			})]
 		})]
 	}) : null;
-});
-Hk.displayName = "HeroOverlay";
-//#endregion
-//#region src/components/Hero/HeroItem.tsx
-var Uk = j.memo(({ item: e, heroProps: t, containerWidth: n, className: r, itemHeight: i }) => {
+}), Uk = j.memo(({ item: e, heroProps: t, containerWidth: n, className: r, itemHeight: i }) => {
 	let { item: a } = Lk(t, n), o = i === void 0 ? "100%" : typeof i == "number" ? `${i}px` : i, s = e.mediaType === "video" && e.videoControls === !1 && e.autoPlay;
 	return /* @__PURE__ */ z(Y, {
 		className: W(a, r),
@@ -67835,7 +67899,7 @@ var Uk = j.memo(({ item: e, heroProps: t, containerWidth: n, className: r, itemH
 			item: e,
 			heroProps: t,
 			containerWidth: n,
-			mediaType: "image"
+			mediaType: "video"
 		})] }) : /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z(IT, {
 			url: e.src,
 			width: "100%",
@@ -67852,11 +67916,7 @@ var Uk = j.memo(({ item: e, heroProps: t, containerWidth: n, className: r, itemH
 			mediaType: e.videoControls === !1 ? "image" : "video"
 		})] })
 	});
-});
-Uk.displayName = "HeroItem";
-//#endregion
-//#region src/components/Hero/useHeroLayout.ts
-var Wk = (e) => ({
+}), Wk = (e) => ({
 	resolvedHeight: j.useMemo(() => typeof e == "number" ? `${e}px` : e, [e]),
 	numericHeight: j.useMemo(() => typeof e == "number" ? e : parseInt(String(e), 10) || 480, [e]),
 	mosaicHeight: j.useMemo(() => typeof e == "number" ? `${e + 30}px` : `calc(${e} + 30px)`, [e])
@@ -67871,121 +67931,99 @@ var Wk = (e) => ({
 			containerWidth: r
 		})
 	}) : null;
-};
-Gk.displayName = "HeroFullscreen";
-//#endregion
-//#region src/components/Hero/layouts/HeroSplit.tsx
-var Kk = ({ items: e, height: t, heroProps: n, containerWidth: r }) => {
-	let { splitRoot: i } = Lk(n, r), a = Ds(e, 2, n.rotation), { resolvedHeight: o } = Wk(t);
-	return /* @__PURE__ */ z(Y, {
-		className: i,
-		height: o,
-		children: a.map((e) => /* @__PURE__ */ z(Uk, {
+}, Kk = ({ items: e, height: t, heroProps: n, containerWidth: r }) => {
+	let i = Ds(e, 2, n.rotation), { resolvedHeight: a } = Wk(t);
+	return /* @__PURE__ */ z(Q_, {
+		styles: {
+			gridTemplateColumns: r > 0 && r < 576 ? "1fr" : "1fr 1fr",
+			height: a,
+			gap: "3px",
+			overflow: "hidden"
+		},
+		children: i.map((e) => /* @__PURE__ */ z(Uk, {
 			item: e,
 			heroProps: n,
 			containerWidth: r
 		}, e.id))
 	});
-};
-Kk.displayName = "HeroSplit";
-//#endregion
-//#region src/components/Hero/layouts/HeroFeatured.tsx
-var qk = ({ items: e, height: t, heroProps: n, containerWidth: r }) => {
-	let { featuredRoot: i } = Lk(n, r), a = Ds(e, 2, n.rotation), { resolvedHeight: o } = Wk(t);
-	return /* @__PURE__ */ z(Y, {
-		className: i,
-		height: o,
-		children: a.map((e) => /* @__PURE__ */ z(Uk, {
+}, qk = ({ items: e, height: t, heroProps: n, containerWidth: r }) => {
+	let i = Ds(e, 2, n.rotation), { resolvedHeight: a } = Wk(t);
+	return /* @__PURE__ */ z(Q_, {
+		styles: {
+			gridTemplateColumns: r > 0 && r < 576 ? "1fr" : "2fr 1fr",
+			height: a,
+			gap: "3px",
+			overflow: "hidden"
+		},
+		children: i.map((e) => /* @__PURE__ */ z(Uk, {
 			item: e,
 			heroProps: n,
 			containerWidth: r
 		}, e.id))
 	});
-};
-qk.displayName = "HeroFeatured";
-//#endregion
-//#region src/components/Hero/layouts/HeroMosaic.tsx
-var Jk = ({ items: e, height: t, heroProps: n, containerWidth: r, mosaicOverflowMode: i = "marquee" }) => {
-	let { mosaicWrapper: a, mosaicPrimary: o, mosaicRightGrid: s, mosaicSpanFull: c, mosaicScrollLane: l } = Lk(n, r), { mosaicHeight: u } = Wk(t), d = e.length > 5, f = d ? e : e.slice(0, 5), p = f[0], m = f.slice(1), h = r < 576;
-	if (!p) return null;
-	let g = h ? 160 : 180;
+}, Jk = ({ items: e, height: t, heroProps: n, containerWidth: r, mosaicOverflowMode: i = "marquee" }) => {
+	let { mosaicWrapper: a, mosaicPrimary: o, mosaicRightGrid: s, mosaicSpanFull: c, mosaicMarqueeLane: l, mosaicMarqueeItem: u, mosaicScrollLane: d } = Lk(n, r), { mosaicHeight: f } = Wk(t), p = e.length > 5, m = p ? e : e.slice(0, 5), h = m[0], g = m.slice(1), _ = r > 0 && r < 576;
+	if (!h) return null;
+	let v = _ ? 160 : 180;
 	return /* @__PURE__ */ B(Y, {
-		direction: h ? "vertical" : "horizontal",
+		direction: _ ? "vertical" : "horizontal",
 		className: a,
-		height: h ? void 0 : u,
+		height: _ ? void 0 : f,
 		children: [
 			/* @__PURE__ */ z(Uk, {
-				item: p,
+				item: h,
 				heroProps: n,
 				containerWidth: r,
 				className: o,
-				itemHeight: h ? 260 : void 0
+				itemHeight: _ ? 260 : void 0
 			}),
-			m.length > 0 && !d && /* @__PURE__ */ z("div", {
-				className: s(m.length),
-				children: m.map((e, t) => /* @__PURE__ */ z(Uk, {
+			g.length > 0 && !p && /* @__PURE__ */ z("div", {
+				className: s(g.length),
+				children: g.map((e, t) => /* @__PURE__ */ z(Uk, {
 					item: e,
 					heroProps: n,
 					containerWidth: r,
-					itemHeight: h ? 180 : void 0,
-					className: m.length === 3 && t === 2 && r >= 1100 ? c : void 0
+					itemHeight: _ ? 180 : void 0,
+					className: g.length === 3 && t === 2 && r >= 1100 ? c : void 0
 				}, e.id))
 			}),
-			m.length > 0 && d && i === "marquee" && /* @__PURE__ */ z("div", {
-				style: {
-					flex: h ? "none" : "2 0 0",
-					minWidth: 0,
-					height: h ? "320px" : "100%",
-					overflow: "hidden",
-					scrollbarWidth: "none"
-				},
+			g.length > 0 && p && i === "marquee" && /* @__PURE__ */ z("div", {
+				className: l,
 				children: /* @__PURE__ */ z(jD, {
 					orientation: "vertical",
 					duration: 6e4,
 					pauseOnHover: !0,
 					repeat: 2,
 					gap: "3px",
-					fadeEdgeSize: "8%",
-					children: m.map((e) => /* @__PURE__ */ z("div", {
-						style: {
-							flex: "0 0 auto",
-							height: `${g}px`,
-							width: "100%"
-						},
+					fadeEdgeSize: "2%",
+					children: g.map((e) => /* @__PURE__ */ z("div", {
+						className: u,
 						children: /* @__PURE__ */ z(Uk, {
 							item: e,
 							heroProps: n,
 							containerWidth: r,
-							itemHeight: g
+							itemHeight: v
 						})
 					}, e.id))
 				})
 			}),
-			m.length > 0 && d && i === "scroll" && /* @__PURE__ */ z("div", {
-				className: l,
-				children: m.map((e) => /* @__PURE__ */ z("div", {
-					style: {
-						flex: "0 0 auto",
-						height: `${g}px`,
-						width: "100%"
-					},
+			g.length > 0 && p && i === "scroll" && /* @__PURE__ */ z("div", {
+				className: d,
+				children: g.map((e) => /* @__PURE__ */ z("div", {
+					className: u,
 					children: /* @__PURE__ */ z(Uk, {
 						item: e,
 						heroProps: n,
 						containerWidth: r,
-						itemHeight: g
+						itemHeight: v
 					})
 				}, e.id))
 			})
 		]
 	});
-};
-Jk.displayName = "HeroMosaic";
-//#endregion
-//#region src/components/Hero/layouts/HeroGrid.tsx
-var Yk = ({ items: e, height: t, heroProps: n, containerWidth: r }) => {
+}, Yk = ({ items: e, height: t, heroProps: n, containerWidth: r }) => {
 	let { gridRoot: i } = Lk(n, r), { resolvedHeight: a } = Wk(t);
-	return /* @__PURE__ */ z(Y, {
+	return /* @__PURE__ */ z("div", {
 		className: i,
 		children: e.map((e) => /* @__PURE__ */ z(Uk, {
 			item: e,
@@ -67994,11 +68032,7 @@ var Yk = ({ items: e, height: t, heroProps: n, containerWidth: r }) => {
 			itemHeight: a
 		}, e.id))
 	});
-};
-Yk.displayName = "HeroGrid";
-//#endregion
-//#region src/components/Hero/layouts/HeroFilmstrip.tsx
-var Xk = ({ items: e, height: t, heroProps: n, containerWidth: r }) => {
+}, Xk = ({ items: e, height: t, heroProps: n, containerWidth: r }) => {
 	let { filmstripRoot: i, filmstripItem: a } = Lk(n, r), { resolvedHeight: o } = Wk(t);
 	return /* @__PURE__ */ z(Y, {
 		direction: "horizontal",
@@ -68013,11 +68047,7 @@ var Xk = ({ items: e, height: t, heroProps: n, containerWidth: r }) => {
 			})
 		}, e.id))
 	});
-};
-Xk.displayName = "HeroFilmstrip";
-//#endregion
-//#region src/components/Hero/layouts/HeroCarousel.tsx
-var Zk = ({ items: e, height: t, heroProps: n, containerWidth: r }) => {
+}, Zk = ({ items: e, height: t, heroProps: n, containerWidth: r }) => {
 	let { carouselWrapper: i } = Lk(n, r), { numericHeight: a } = Wk(t), o = a - 50;
 	return /* @__PURE__ */ z(Y, {
 		className: i,
@@ -68032,23 +68062,23 @@ var Zk = ({ items: e, height: t, heroProps: n, containerWidth: r }) => {
 			height: a
 		})
 	});
-};
-Zk.displayName = "HeroCarousel";
-//#endregion
-//#region src/components/Hero/Hero.tsx
-var Qk = "480px", $k = (e) => {
+}, Qk = "480px", $k = (e) => {
 	let { items: t, layout: n = "fullscreen", height: r = Qk, className: i } = e, a = j.useRef(null), [o, s] = j.useState(0), [c, l] = j.useState(0), { heroRootStyles: u } = Lk(e, o);
 	j.useEffect(() => {
-		let e;
-		return a.current && (e = new Oi((e) => {
+		if (!a.current) return;
+		s(a.current.clientWidth), l(a.current.clientHeight);
+		let e = new Oi((e) => {
 			for (let t of e) {
 				let { width: e, height: n } = t.contentRect;
-				s(e), l(n);
+				e > 0 && s(e), l(n);
 			}
-		}), s(a.current.clientWidth), l(a.current.clientHeight), e.observe(a.current)), () => {
-			e && e.disconnect();
-		};
-	}, []);
+		});
+		return e.observe(a.current), () => e.disconnect();
+	}, []), j.useLayoutEffect(() => {
+		if (!a.current) return;
+		let e = a.current.getBoundingClientRect().width;
+		e > 0 && s(e);
+	}, [r]);
 	let d = {
 		items: t,
 		height: r,
@@ -68090,7 +68120,6 @@ var Qk = "480px", $k = (e) => {
 		children: f()
 	});
 };
-$k.displayName = "Hero";
 //#endregion
 export { cD as AIAssistant, HE as AISearchControl, RE as AISearchIcon, WE as AISearchIconExample, jE as AdaptiveCardHost, QT as AdaptiveCardHostThemeType, uC as AddColumnAfterControl, lC as AddColumnBeforeControl, pC as AddRowAfterControl, fC as AddRowBeforeControl, qS as AlignCenterControl, JS as AlignJustifyControl, GS as AlignLeftControl, KS as AlignRightControl, GO as AppDashboard, av as AspectRatio, LD as BackgroundImage, CD as Blockquote, WS as BlockquoteControl, AS as BoldControl, Nv as Breadcrumb, IS as BulletListControl, kv as ButtonMenu, by as CalendarControl, Cy as CalendarGrid, wy as CalendarHeader, oy as CalendarMonth, X_ as Card, hv as Carousel, cv as Center, KE as ChatInput, ZE as ChatInputWithMensions, lD as ChatInputWithMensionsV1, aD as ChatList, Nw as ChromeInputType, PS as ClearFormattingControl, QS as CodeBlockControl, ZS as CodeControl, cT as ColorPicker, Sw as ColorPickerAlpha, Zw as ColorPickerBlock, Rw as ColorPickerChrome, Kw as ColorPickerCircle, zw as ColorPickerColorful, Yw as ColorPickerCompact, Ow as ColorPickerEditableInput, Aw as ColorPickerEditableInputHSLA, kw as ColorPickerEditableInputRGBA, bw as ColorPickerHue, mw as ColorPickerInteractive, gw as ColorPickerSaturation, ww as ColorPickerShadeSlider, Mw as ColorPickerSketch, $w as ColorPickerSlider, Ew as ColorPickerSwatch, oT as ColorPickerTheme, Uw as ColorPickerWheel, Fy as CompactCalendar, Ty as CompactCalendarToolbar, _ as ConsoleLoggingProvider, uv as Container, iD as ContentRenderer, V_ as ContentType, OT as CustomControlBar, fT as DataGrid, hT as DataGridV2, i as DefaultGraphClient, o as DefaultLocalizationProvider, dC as DeleteColumnControl, mC as DeleteRowControl, cC as DeleteTableControl, TC as DropdownField, Ob as Dropzone, Cb as DropzoneAccept, kb as DropzoneFullScreen, Tb as DropzoneIdle, bb as DropzoneProvider, wb as DropzoneReject, vs as EBreakPoints, ey as ECalendarViews, YO as EGoalMetric, ys as EMessageType, Ib as EXE_MIME_TYPE, DS as EmojiPicker, e as ErrorType, Ey as EventsList, Pk as FluentUIProvider, MT as GenericOverFlowMenu, Q_ as Grid, RS as H1Control, zS as H2Control, BS as H3Control, VS as H4Control, HS as H5Control, US as H6Control, $k as Hero, $S as HighlightControl, eC as HrControl, jb as IMAGE_MIME_TYPE, Pv as IconButton, aO as InlineSVG, DC as InputField, sC as InsertTableControl, jS as ItalicControl, BC as ItemPicker, XO as KPICard, ek as KPICardCompact, ZO as KPICardSkeleton, nk as Kpis, tv as Layout, nv as LayoutItem, Vb as Link, FO as ListItemActivityMessage, xO as ListToolbar, pO as LivePersona, O as LocalStorageProvider, T as LocalizationProvider, g as LogLevel, Ab as MIME_TYPES, Pb as MS_EXCEL_MIME_TYPE, Fb as MS_POWERPOINT_MIME_TYPE, Nb as MS_WORD_MIME_TYPE, ZT as MaplibreWorldMap, nD as MarkdownRenderer, jD as Marquee, JE as Mensions, YE as MensionsExample, hC as MergeOrSplitCellControl, mD as MermaidDiagram, NT as Navigation, $O as NoKpisCard, fO as OTPField, IC as OptionTime, LS as OrderedListControl, Mb as PDF_MIME_TYPE, yv as Popup, rC as RedoControl, ME as RenderAdaptiveCard, vT as RenderDialog, yT as RenderDrawer, bT as RenderHeader, xv as RenderLabel, Cv as RenderSpinner, CC as RichTextEditor, sS as RichTextEditorBgColorPickerControl, tS as RichTextEditorColorControl, nS as RichTextEditorColorPickerControl, Zb as RichTextEditorContent, $b as RichTextEditorControl, ex as RichTextEditorControlBase, Qb as RichTextEditorControlsGroup, cS as RichTextEditorDragHandle, aS as RichTextEditorFontFamilyControl, go as RichTextEditorImage, oS as RichTextEditorImageUploadControl, eS as RichTextEditorLinkControl, Wb as RichTextEditorResizableImage, rS as RichTextEditorSourceCodeControl, kS as RichTextEditorTableControls, Kb as RichTextEditorToolbar, ib as SearchControl, ry as SelectDay, sy as SelectMonth, RC as SelectTime, OC as SelectView, dy as SelectWeek, ST as ShareDialog, wT as ShowError, ET as ShowMessage, Mk as SkeletonLoader, iv as Space, vv as SplitPane, PD as Spoiler, vb as Spotlight, sb as SpotlightAction, cb as SpotlightActionsGroup, lb as SpotlightActionsList, ub as SpotlightEmpty, db as SpotlightFooter, nb as SpotlightRoot, ab as SpotlightSearch, Y as StackV2, AO as StackedUsers, JD as Stepper, NS as StrikeThroughControl, YS as SubscriptControl, XS as SuperscriptControl, jC as TIME_RADIO_GROUP, mo as TableKit, iC as TaskListControl, oC as TaskListLiftControl, aC as TaskListSinkControl, HD as Timeline, gC as ToggleHeaderColumnControl, _C as ToggleHeaderRowControl, vC as ToggleTableColumnLinesControl, yC as ToggleTableRowLinesControl, Dv as TypographyControl, MS as UnderlineControl, nC as UndoControl, xs as UniversalProvider, FS as UnlinkControl, tC as UnsetColorControl, OO as UserCard, IT as VideoPlayer, __ as applyHeaderStyles, v_ as autoFitColumns, g_ as buildHeaderCellStyle, dw as clampHsva, QD as clearInlineSVGCache, A_ as cloneDeep, Vy as closeOnActionTriggerAtom, Yy as closeSpotlight, Q as color, vk as configureSkeletonLoader, X as createControl, Zy as createSpotlight, Uy as createSpotlightStore, O_ as debounce, r as deepMerge, gy as defaultCalendarControlStrings, ay as defaultCalendarMonthStrings, cy as defaultSelectWeekStrings, gb as defaultSpotlightFilter, q_ as detectContentType, n as en, lw as equalColorObjects, uw as equalHex, y_ as escapeCsvCell, B_ as every, R_ as filter, NC as formatTime, M_ as get, J_ as getContentType, cw as getContrastingColor, Hb as getTaskListExtension, I_ as groupBy, qC as hexToHsva, XC as hexToRgba, iw as hslaStringToHsva, KC as hslaToHsva, JC as hsvaToHex, YC as hsvaToHexa, $C as hsvaToHslString, GC as hsvaToHsla, ew as hsvaToHslaString, tw as hsvaToRgbString, UC as hsvaToRgba, nw as hsvaToRgbaString, pb as isActionsGroup, j_ as isEmpty, _b as limitActions, Ry as listIdAtom, L_ as map, Hy as onQueryChangeCallbackAtom, Jy as openSpotlight, Iy as openedAtom, rw as parseHue, zy as queryAtom, dk as registerBones, By as registeredActionsAtom, Xb as renderContentAsEmailHtml, My as resolveLocale, aw as rgbaStringToHsva, ZC as rgbaToHex, QC as rgbaToHexa, WC as rgbaToHsva, Ly as selectedAtom, N_ as set, ak as snapshotBones, z_ as some, qy as spotlight, Ky as spotlightActions, Wy as spotlightStore, k_ as throttle, PC as timeKey, m_ as toasterId, Xy as toggleSpotlight, P_ as uniq, F_ as uniqBy, b as useAIAssistantStrings, C as useAISearchControlStrings, h as useAppDashboardStrings, h_ as useAppToast, Ss as useApplicationContext, ov as useAspectRatioStyles, yD as useBlockquoteStyles, Hs as useBrandCenterFonts, Yv as useCalendar, c as useCalendarStrings, Hv as useCalendarStyles, sv as useCenterStyles, fw as useColorPickerStyles, x as useCommonStrings, Ay as useCompactCalendarEvents, u as useComponentStrings, C_ as useComponentUtils, dT as useDataGridStyles, w_ as useDateUtils, Xv as useDayViewStyles, xb as useDropzoneContext, Eb as useDropzoneStyles, S_ as useExportData, p_ as useFluentEmoji, ws as useGraphAPI, Z_ as useGridStyles, D_ as useImageUtils, Ts as useIndexedDBCache, E as useInputFieldStrings, d as useItemPickerStrings, f as useKpiStrings, $_ as useLayoutStyles, S as useListItemActivityStrings, y as useLocalization, Cs as useLogging, ED as useMarqueeStyles, m as useMensionsStrings, qE as useMensionsStyles, p as useMermaidDiagramStrings, dD as useMermaidDiagramStyles, PT as useNavigationStyles, s as useNoKpiStrings, AC as useOptionTimeStyles, Es as usePolling, xT as useRenderHeaderStyles, Gb as useRichTextEditor, D as useSearchControlStrings, kC as useSelectTimeStyles, A as useShareDialogStrings, CT as useShowErrorStyles, TT as useShowMessageStyles, ok as useSkeletonExtract, rv as useSpaceStyles, gv as useSplitPaneStyles, Qy as useSpotlight, eb as useSpotlightShortcut, l as useSpotlightStrings, k as useStrings, uD as useStyles, ks as useTimeZoneHelper, a as useUserCardStrings, Iv as useUtils, FT as useVideoStyles, Gv as useWeekViewStyles, t as useWorldMapStrings, sw as validHex };
 

package/package.json

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