@solostylist/ui-kit 1.0.220 → 1.0.221

package/dist/{s-chat-message-DeP8O6TO.js → s-chat-message-DVfbqSAQ.js}

@@ -1,15 +1,15 @@
 import { n as e, r as t } from "./utils-B5Rl6Zwv.js";
 import { t as n } from "./createSvgIcon-BdNZIlKS.js";
-import { t as r } from "./Download-DMm8oiCF.js";
-import i from "./s-lazy-image/s-lazy-image.js";
-import { SSkeleton as a } from "./s-skeleton/s-skeleton.js";
-import { SAvatar as o } from "./s-avatar/s-avatar.js";
-import { SImageModal as s } from "./s-image-modal/s-image-modal.js";
+import { n as r } from "./s-image-modal-DxwMFMNS.js";
+import { t as i } from "./Download-DMm8oiCF.js";
+import a from "./s-lazy-image/s-lazy-image.js";
+import { SSkeleton as o } from "./s-skeleton/s-skeleton.js";
+import { SAvatar as s } from "./s-avatar/s-avatar.js";
 import { useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { Box as d, IconButton as f, Paper as p, Typography as m } from "@mui/material";
 //#region ../../node_modules/@mui/icons-material/ErrorOutlined.mjs
-var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z" }), "ErrorOutlined"), g = n(/* @__PURE__ */ l("path", { d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm7 7V3.5L18.5 9z" }), "InsertDriveFile"), _ = n(/* @__PURE__ */ l("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z" }), "Refresh"), v = ({ isSent: e, showAvatar: t, showTimestamp: n, senderName: r, maxWidth: i, sx: o, ...s }) => /* @__PURE__ */ u(d, {
+var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z" }), "ErrorOutlined"), g = n(/* @__PURE__ */ l("path", { d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm7 7V3.5L18.5 9z" }), "InsertDriveFile"), _ = n(/* @__PURE__ */ l("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z" }), "Refresh"), v = ({ isSent: e, showAvatar: t, showTimestamp: n, senderName: r, maxWidth: i, sx: a, ...s }) => /* @__PURE__ */ u(d, {
 	...s,
 	sx: [{
 		display: "flex",
@@ -19,9 +19,9 @@ var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
 		mb: 1,
 		maxWidth: i,
 		alignSelf: e ? "flex-end" : "flex-start"
-	}, ...Array.isArray(o) ? o : [o]],
+	}, ...Array.isArray(a) ? a : [a]],
 	children: [
-		t && !e && /* @__PURE__ */ l(a, {
+		t && !e && /* @__PURE__ */ l(o, {
 			component: "rounded-avatar",
 			width: 36,
 			height: 36
@@ -35,7 +35,7 @@ var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
 				minWidth: 0
 			},
 			children: [
-				r && !e && /* @__PURE__ */ l(a, {
+				r && !e && /* @__PURE__ */ l(o, {
 					width: 100,
 					height: 12,
 					sx: { ml: .5 }
@@ -49,22 +49,22 @@ var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
 						ml: .5
 					},
 					children: [
-						/* @__PURE__ */ l(a, {
+						/* @__PURE__ */ l(o, {
 							height: 16,
 							sx: { mb: .5 }
 						}),
-						/* @__PURE__ */ l(a, {
+						/* @__PURE__ */ l(o, {
 							width: "85%",
 							height: 16,
 							sx: { mb: .5 }
 						}),
-						/* @__PURE__ */ l(a, {
+						/* @__PURE__ */ l(o, {
 							width: "70%",
 							height: 16
 						})
 					]
 				}),
-				n && /* @__PURE__ */ l(a, {
+				n && /* @__PURE__ */ l(o, {
 					width: 60,
 					height: 10,
 					sx: {
@@ -74,14 +74,14 @@ var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
 				})
 			]
 		}),
-		t && e && /* @__PURE__ */ l(a, {
+		t && e && /* @__PURE__ */ l(o, {
 			component: "rounded-avatar",
 			width: 36,
 			height: 36
 		})
 	]
-}), y = ({ message: n, variant: a = "received", timestamp: y, avatar: b, senderName: x, showAvatar: S = !0, showTimestamp: C = !1, maxWidth: w = "70%", attachments: T = [], onAttachmentClick: E, onDownload: D, hasError: O = !1, errorMessage: k = "Failed to send message", onRetry: A, loading: j = !1, sx: M, ...N }) => {
-	let [P, F] = c(null), [I, L] = c(!1), R = a === "sent", z = (e) => {
+}), y = ({ message: n, variant: o = "received", timestamp: y, avatar: b, senderName: x, showAvatar: S = !0, showTimestamp: C = !1, maxWidth: w = "70%", attachments: T = [], onAttachmentClick: E, onDownload: D, hasError: O = !1, errorMessage: k = "Failed to send message", onRetry: A, loading: j = !1, sx: M, ...N }) => {
+	let [P, F] = c(null), [I, L] = c(!1), R = o === "sent", z = (e) => {
 		E ? E(e) : (F(e), L(!0));
 	}, B = (e) => {
 		E ? E(e) : D && D(e);
@@ -106,7 +106,7 @@ var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
 			alignSelf: R ? "flex-end" : "flex-start"
 		}, ...Array.isArray(M) ? M : [M]],
 		children: [
-			S && !R && /* @__PURE__ */ l(o, {
+			S && !R && /* @__PURE__ */ l(s, {
 				avatar: b,
 				name: x,
 				size: 36
@@ -124,7 +124,7 @@ var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
 					/* @__PURE__ */ u(d, {
 						sx: {
 							display: "inline-block",
-							borderRadius: 2,
+							borderRadius: 1,
 							wordBreak: "break-word",
 							maxWidth: "100%",
 							border: "1px solid",
@@ -146,12 +146,11 @@ var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
 										position: "relative",
 										paddingTop: V.length === 1 ? "66.67%" : "100%",
 										cursor: "pointer",
-										borderRadius: 1.5,
 										overflow: "hidden",
 										"&:hover": { opacity: .9 }
 									},
 									onClick: () => z(e),
-									children: /* @__PURE__ */ l(i, {
+									children: /* @__PURE__ */ l(a, {
 										src: e.thumbnailUrl ?? e.url,
 										alt: e.name ?? "Image",
 										style: {
@@ -170,14 +169,14 @@ var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
 									sx: {
 										display: "flex",
 										alignItems: "center",
-										gap: 1.5,
+										gap: 1,
 										p: 1,
 										mt: +(n > 0),
 										cursor: "pointer"
 									},
 									onClick: () => B(t),
 									children: [
-										/* @__PURE__ */ l(g, { sx: { fontSize: 32 } }),
+										/* @__PURE__ */ l(g, { sx: { fontSize: 36 } }),
 										/* @__PURE__ */ u(d, {
 											sx: {
 												flex: 1,
@@ -186,8 +185,6 @@ var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
 											children: [/* @__PURE__ */ l(m, {
 												variant: "body2",
 												sx: {
-													fontSize: "0.875rem",
-													fontWeight: 500,
 													overflow: "hidden",
 													textOverflow: "ellipsis",
 													whiteSpace: "nowrap"
@@ -195,6 +192,7 @@ var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
 												children: t.name ?? "Unnamed File"
 											}), t.size && /* @__PURE__ */ l(m, {
 												variant: "caption",
+												sx: { fontSize: "0.75rem" },
 												children: e(t.size)
 											})]
 										}),
@@ -202,7 +200,7 @@ var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
 											onClick: (e) => {
 												e.stopPropagation(), D(t);
 											},
-											children: /* @__PURE__ */ l(r, {})
+											children: /* @__PURE__ */ l(i, {})
 										})
 									]
 								}, t.id))
@@ -237,9 +235,10 @@ var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
 							color: "error.main"
 						},
 						children: [
-							/* @__PURE__ */ l(h, { sx: { fontSize: "1rem" } }),
+							/* @__PURE__ */ l(h, {}),
 							/* @__PURE__ */ l(m, {
 								sx: { color: "inherit" },
+								variant: "caption",
 								children: k
 							}),
 							A && /* @__PURE__ */ l(f, {
@@ -250,12 +249,12 @@ var h = n(/* @__PURE__ */ l("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10
 					})
 				]
 			}),
-			S && R && /* @__PURE__ */ l(o, {
+			S && R && /* @__PURE__ */ l(s, {
 				avatar: b,
 				name: x,
 				size: 36
 			}),
-			P && /* @__PURE__ */ l(s, {
+			P && /* @__PURE__ */ l(r, {
 				isOpen: I,
 				onClose: () => {
 					L(!1), F(null);

package/dist/s-checkbox/s-checkbox.js

@@ -5,7 +5,8 @@ import { Box as i, Checkbox as a, Stack as o, Typography as s } from "@mui/mater
 var c = e(({ content: e, disabled: c, ...l }, u) => {
 	let d = t(), f = l.id ?? d, p = {
 		color: c ? "text.disabled" : "inherit",
-		cursor: c ? "not-allowed" : "pointer"
+		cursor: c ? "not-allowed" : "pointer",
+		userSelect: "none"
 	};
 	return /* @__PURE__ */ r(o, {
 		direction: "row",

package/dist/s-code-block/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-code-block-DTzppazr.js";
+import { t as e } from "../s-code-block-CHIgPLsL.js";
 export { e as SCodeBlock, e as default };

package/dist/s-code-block/s-code-block.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-code-block-DTzppazr.js";
+import { t as e } from "../s-code-block-CHIgPLsL.js";
 export { e as SCodeBlock, e as default };

package/dist/{s-code-block-DTzppazr.js → s-code-block-CHIgPLsL.js}

@@ -1,10 +1,10 @@
 import { n as e, t } from "./ContentCopy-Bh_TA5Eo.js";
-import { useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Box as a, IconButton as o, useColorScheme as s } from "@mui/material";
-import { Prism as c } from "react-syntax-highlighter";
+import { useMemo as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Box as o, IconButton as s, useColorScheme as c } from "@mui/material";
+import { Prism as l } from "react-syntax-highlighter";
 //#region ../../node_modules/react-syntax-highlighter/dist/esm/styles/prism/one-dark.js
-var l = {
+var u = {
 	"code[class*=\"language-\"]": {
 		background: "hsl(220, 13%, 18%)",
 		color: "hsl(220, 14%, 71%)",
@@ -292,7 +292,7 @@ var l = {
 	},
 	".prism-previewer-easing.prism-previewer-easing path": { stroke: "hsl(220, 14%, 71%)" },
 	".prism-previewer-easing.prism-previewer-easing line": { stroke: "hsl(220, 14%, 71%)" }
-}, u = {
+}, d = {
 	"code[class*=\"language-\"]": {
 		background: "hsl(230, 1%, 98%)",
 		color: "hsl(230, 8%, 24%)",
@@ -560,17 +560,26 @@ var l = {
 	},
 	".prism-previewer-easing.prism-previewer-easing path": { stroke: "hsl(230, 8%, 24%)" },
 	".prism-previewer-easing.prism-previewer-easing line": { stroke: "hsl(230, 8%, 24%)" }
-}, d = ({ code: d, language: f = "typescript", showLineNumbers: p = !0, showCopyButton: m = !0, customStyle: h, onCopied: g }) => {
-	let [_, v] = n(!1), { mode: y } = s();
-	return d ? /* @__PURE__ */ i(a, {
+}, f = ({ code: f, language: p = "typescript", showLineNumbers: m = !0, showCopyButton: h = !0, customStyle: g, onCopied: _ }) => {
+	let [v, y] = r(!1), { mode: b } = c(), x = n(() => {
+		let e = b === "dark" ? u : d;
+		return {
+			...e,
+			linenumber: {
+				...e.linenumber,
+				fontStyle: "normal"
+			}
+		};
+	}, [b]);
+	return f ? /* @__PURE__ */ a(o, {
 		sx: {
 			position: "relative",
 			width: "100%"
 		},
-		children: [m && /* @__PURE__ */ r(o, {
+		children: [h && /* @__PURE__ */ i(s, {
 			onClick: async () => {
-				if (d) try {
-					await navigator.clipboard.writeText(d), v(!0), setTimeout(() => v(!1), 2e3), g?.();
+				if (f) try {
+					await navigator.clipboard.writeText(f), y(!0), setTimeout(() => y(!1), 2e3), _?.();
 				} catch (e) {
 					console.error("Failed to copy code:", e);
 				}
@@ -580,14 +589,14 @@ var l = {
 				top: 8,
 				right: 8,
 				zIndex: 1,
-				color: _ ? "success.main" : "text.primary",
+				color: v ? "success.main" : "text.primary",
 				backdropFilter: "blur(8px)"
 			},
-			children: r(_ ? e : t, {})
-		}), /* @__PURE__ */ r(c, {
-			language: f,
-			style: y === "dark" ? l : u,
-			showLineNumbers: p,
+			children: i(v ? e : t, {})
+		}), /* @__PURE__ */ i(l, {
+			language: p,
+			style: x,
+			showLineNumbers: m,
 			customStyle: {
 				margin: 0,
 				borderRadius: "var(--s-shape-borderRadius)",
@@ -595,14 +604,14 @@ var l = {
 				backgroundColor: "var(--s-palette-background-paper)",
 				border: "1px solid",
 				borderColor: "var(--s-palette-divider)",
-				...h
+				...g
 			},
 			wrapLines: !0,
 			wrapLongLines: !0,
-			children: d
+			children: f
 		})]
 	}) : null;
 };
-d.displayName = "SCodeBlock";
+f.displayName = "SCodeBlock";
 //#endregion
-export { d as t };
+export { f as t };

package/dist/s-comment-message/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-comment-message-C-7IZOqA.js";
+import { t as e } from "../s-comment-message-DuJPcZFR.js";
 export { e as SCommentMessage, e as default };

package/dist/s-comment-message/s-comment-message.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-comment-message-C-7IZOqA.js";
+import { t as e } from "../s-comment-message-DuJPcZFR.js";
 export { e as SCommentMessage, e as default };

package/dist/{s-comment-message-C-7IZOqA.js → s-comment-message-DuJPcZFR.js}

@@ -107,14 +107,10 @@ var _ = t(/* @__PURE__ */ l("path", { d: "m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58
 							alignItems: "center",
 							mb: 1
 						},
-						children: [/* @__PURE__ */ l(g, {
-							variant: "subtitle2",
-							sx: { fontWeight: "600" },
-							children: x
-						}), /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(g, {
+						children: [/* @__PURE__ */ l(g, { children: x }), /* @__PURE__ */ l(g, {
 							variant: "caption",
 							children: X
-						}) })]
+						})]
 					}),
 					/* @__PURE__ */ l(g, {
 						variant: "body2",

package/dist/s-date-picker/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-date-picker-CKSRNJ_A.js";
+import { t as e } from "../s-date-picker-Mynq297P.js";
 export { e as SDatePicker, e as default };

package/dist/s-date-picker/s-date-picker.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-date-picker-CKSRNJ_A.js";
+import { t as e } from "../s-date-picker-Mynq297P.js";
 export { e as SDatePicker, e as default };

package/dist/{s-date-picker-CKSRNJ_A.js → s-date-picker-Mynq297P.js}

@@ -590,7 +590,7 @@ var $ = ({ label: e, required: t = !1, error: r, htmlFor: i, hint: a, slots: o,
 								height: l.spacing(5),
 								minHeight: l.spacing(5),
 								px: 1.5,
-								py: 0,
+								py: 1,
 								color: (l.vars ?? l).palette.text.primary,
 								borderRadius: (l.vars ?? l).shape.borderRadius,
 								border: `1px solid ${(l.vars ?? l).palette.divider}`,

package/dist/s-datetime-picker/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-datetime-picker-BlStwMie.js";
+import { t as e } from "../s-datetime-picker-D78dPyAo.js";
 export { e as SDateTimePicker, e as default };

package/dist/s-datetime-picker/s-datetime-picker.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-datetime-picker-BlStwMie.js";
+import { t as e } from "../s-datetime-picker-D78dPyAo.js";
 export { e as SDateTimePicker, e as default };

package/dist/{s-datetime-picker-BlStwMie.js → s-datetime-picker-D78dPyAo.js}

@@ -3786,7 +3786,7 @@ var Wr = ({ label: e, required: t = !1, error: n, htmlFor: i, hint: a, slots: o,
 								height: l.spacing(5),
 								minHeight: l.spacing(5),
 								px: 1.5,
-								py: 0,
+								py: 1,
 								color: (l.vars ?? l).palette.text.primary,
 								borderRadius: (l.vars ?? l).shape.borderRadius,
 								border: `1px solid ${(l.vars ?? l).palette.divider}`,

package/dist/s-gallery/s-gallery.js

@@ -1,5 +1,5 @@
-import e from "../s-lazy-image/s-lazy-image.js";
-import { SImageModal as t } from "../s-image-modal/s-image-modal.js";
+import { n as e } from "../s-image-modal-DxwMFMNS.js";
+import t from "../s-lazy-image/s-lazy-image.js";
 import { useEffect as n, useId as r, useRef as i, useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { Box as c, Paper as l, Skeleton as u, Typography as d } from "@mui/material";
@@ -16,7 +16,7 @@ function m(e) {
 function h(e) {
 	return e % 3 == 0 ? 3 : e % 2 == 0 ? 2 : 4;
 }
-var g = ({ item: t, sx: r, onClick: l }) => {
+var g = ({ item: e, sx: r, onClick: l }) => {
 	let u = i(null), [d, f] = a(!1), [p, h] = a(!0);
 	if (n(() => {
 		let e = new IntersectionObserver((e) => {
@@ -41,7 +41,7 @@ var g = ({ item: t, sx: r, onClick: l }) => {
 		})() : t && t.pause(), () => {
 			e = !1, t && (t.pause(), t.removeAttribute("src"), t.load());
 		};
-	}, [d]), t.type === "video") return /* @__PURE__ */ s(c, {
+	}, [d]), e.type === "video") return /* @__PURE__ */ s(c, {
 		sx: {
 			position: "relative",
 			overflow: "hidden",
@@ -68,7 +68,7 @@ var g = ({ item: t, sx: r, onClick: l }) => {
 				display: "block"
 			},
 			children: /* @__PURE__ */ o("source", {
-				src: t.url,
+				src: e.url,
 				type: "video/mp4"
 			})
 		}), p && /* @__PURE__ */ o(c, {
@@ -100,9 +100,9 @@ var g = ({ item: t, sx: r, onClick: l }) => {
 			height: "100%",
 			...r
 		},
-		children: /* @__PURE__ */ o(e, {
-			src: t.url,
-			alt: t.title ?? "",
+		children: /* @__PURE__ */ o(t, {
+			src: e.url,
+			alt: e.title ?? "",
 			style: {
 				objectFit: g,
 				cursor: l ? "pointer" : "default",
@@ -155,11 +155,11 @@ var g = ({ item: t, sx: r, onClick: l }) => {
 		colSpan: r,
 		rowSpan: i
 	};
-}), y = ({ mediaItems: e, variant: i = "masonry", loading: m = !1, skeletonCount: h = 6 }) => {
-	let [y, b] = a(null), [x, S] = a(() => v(e, i)), [C, w] = a(!1), T = r();
+}), y = ({ mediaItems: t, variant: i = "masonry", loading: m = !1, skeletonCount: h = 6 }) => {
+	let [y, b] = a(null), [x, S] = a(() => v(t, i)), [C, w] = a(!1), T = r();
 	n(() => {
-		S(v(e, i));
-	}, [e, i]);
+		S(v(t, i));
+	}, [t, i]);
 	let E = Array.from({ length: h }, (e, t) => ({
 		id: `${i}-skeleton-${t + 1}`,
 		..._(t, i)
@@ -170,7 +170,7 @@ var g = ({ item: t, sx: r, onClick: l }) => {
 			position: "relative",
 			zIndex: 1
 		},
-		children: [/* @__PURE__ */ o(t, {
+		children: [/* @__PURE__ */ o(e, {
 			selectedItem: y,
 			isOpen: !!y,
 			onClose: () => b(null),
@@ -205,7 +205,7 @@ var g = ({ item: t, sx: r, onClick: l }) => {
 						sx: {
 							position: "relative",
 							overflow: "hidden",
-							borderRadius: 2,
+							borderRadius: 1,
 							gridRow: `span ${n}`,
 							gridColumn: `span ${t}`
 						},
@@ -269,7 +269,7 @@ var g = ({ item: t, sx: r, onClick: l }) => {
 							sx: {
 								position: "relative",
 								overflow: "hidden",
-								borderRadius: 2,
+								borderRadius: 1,
 								width: "100%",
 								height: "100%",
 								cursor: "grab",
@@ -297,21 +297,28 @@ var g = ({ item: t, sx: r, onClick: l }) => {
 									pointerEvents: "none",
 									opacity: 0,
 									transition: "opacity 0.2s ease-in-out",
-									backdropFilter: "blur(8px)"
+									color: "common.white",
+									background: "linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) 45%, transparent)"
 								},
 								children: [e.title && /* @__PURE__ */ o(d, {
-									variant: "subtitle2",
+									variant: "h6",
 									sx: {
 										position: "relative",
+										fontSize: {
+											xs: 14,
+											sm: 18,
+											md: 20
+										},
 										whiteSpace: "nowrap",
 										overflow: "hidden",
 										textOverflow: "ellipsis"
 									},
 									children: e.title
 								}), e.desc && /* @__PURE__ */ o(d, {
-									variant: "caption",
+									variant: "body2",
 									sx: {
 										position: "relative",
+										mt: .5,
 										display: "-webkit-box",
 										WebkitLineClamp: 2,
 										WebkitBoxOrient: "vertical",