@solostylist/ui-kit 1.0.220 → 1.0.221

package/dist/s-image-modal-DxwMFMNS.js

@@ -0,0 +1,397 @@
+import { t as e } from "./createSvgIcon-BdNZIlKS.js";
+import { t } from "./ChevronRight-DHulYS1l.js";
+import { t as n } from "./Close-oXeOGTZb.js";
+import r from "./s-lazy-image/s-lazy-image.js";
+import i, { useEffect as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Box as u, IconButton as d, Modal as f, Paper as p, Stack as m, Typography as h } from "@mui/material";
+import { AnimatePresence as g, motion as _ } from "framer-motion";
+//#region ../../node_modules/@mui/icons-material/ChevronLeft.mjs
+var v = e(/* @__PURE__ */ c("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" }), "ChevronLeft"), y = ({ item: e, onClick: t, style: n = {}, objectFit: i = "contain", disableVideoControls: a = !1 }) => e.type === "video" ? /* @__PURE__ */ c(u, {
+	component: "video",
+	onClick: t,
+	controls: !a,
+	sx: {
+		width: "100%",
+		height: "100%",
+		objectFit: i,
+		bgcolor: "background.paper",
+		...n
+	},
+	children: /* @__PURE__ */ c("source", {
+		src: e.url,
+		type: "video/mp4"
+	})
+}) : /* @__PURE__ */ c(r, {
+	src: e.url,
+	alt: e.title ?? "",
+	onClick: t,
+	style: {
+		width: "100%",
+		height: "100%",
+		objectFit: i,
+		backgroundColor: "background.paper",
+		...n
+	}
+}), b = ({ selectedItem: e, isOpen: r, onClose: b, onItemChange: x, mediaItems: S = [], renderMediaItem: C, showNavigation: w = !0, showThumbnailDock: T = !0, showCounter: E = !0, modalSx: D = {} }) => {
+	let [O, k] = o(e ?? null), A = e ?? O;
+	a(() => {
+		e && k(e);
+	}, [e]);
+	let j = w && S.length > 1 && A, M = A ? S.findIndex((e) => e.id === A.id) : -1, N = S.length, P = i.useCallback(() => {
+		if (j && M > 0) {
+			let e = S[M - 1];
+			x ? x(e) : k(e);
+		}
+	}, [
+		j,
+		M,
+		S,
+		x
+	]), F = i.useCallback(() => {
+		if (j && M < N - 1) {
+			let e = S[M + 1];
+			x ? x(e) : k(e);
+		}
+	}, [
+		j,
+		M,
+		N,
+		S,
+		x
+	]);
+	return a(() => {
+		let e = (e) => {
+			if (r) switch (e.key) {
+				case "ArrowLeft":
+					P();
+					break;
+				case "ArrowRight":
+					F();
+					break;
+				case "Escape":
+					b();
+					break;
+			}
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		r,
+		M,
+		N,
+		j,
+		P,
+		F,
+		b
+	]), !r || !A ? null : /* @__PURE__ */ c(f, {
+		open: r,
+		onClose: b,
+		sx: {
+			zIndex: (e) => e.zIndex.modal + 100,
+			...D
+		},
+		slotProps: { backdrop: { sx: {
+			backdropFilter: "blur(8px)",
+			zIndex: (e) => e.zIndex.modal + 99
+		} } },
+		children: /* @__PURE__ */ l(u, { children: [/* @__PURE__ */ c(_.div, {
+			initial: { scale: .98 },
+			animate: { scale: 1 },
+			exit: { scale: .98 },
+			transition: {
+				type: "spring",
+				stiffness: 400,
+				damping: 30
+			},
+			children: /* @__PURE__ */ l(p, {
+				sx: {
+					position: "fixed",
+					inset: 0,
+					width: "100%",
+					minHeight: "100vh",
+					borderRadius: 0,
+					overflow: "hidden",
+					zIndex: (e) => e.zIndex.modal + 101
+				},
+				children: [
+					/* @__PURE__ */ c(u, {
+						sx: {
+							height: "100%",
+							display: "flex",
+							flexDirection: "column"
+						},
+						children: /* @__PURE__ */ c(u, {
+							sx: {
+								flex: 1,
+								p: {
+									xs: 1,
+									sm: 2,
+									md: 3
+								},
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								bgcolor: "background.default"
+							},
+							children: /* @__PURE__ */ c(g, {
+								mode: "wait",
+								children: /* @__PURE__ */ c(_.div, {
+									style: { position: "relative" },
+									initial: {
+										y: 20,
+										scale: .97
+									},
+									animate: {
+										y: 0,
+										scale: 1,
+										transition: {
+											type: "spring",
+											stiffness: 500,
+											damping: 30,
+											mass: .5
+										}
+									},
+									exit: {
+										y: 20,
+										scale: .97,
+										transition: { duration: .15 }
+									},
+									children: /* @__PURE__ */ l(p, {
+										onClick: (e) => e.stopPropagation(),
+										sx: {
+											position: "relative",
+											width: "100%",
+											aspectRatio: "16 / 9",
+											maxWidth: {
+												xs: "95%",
+												sm: "85%",
+												md: 960
+											},
+											height: "70vh",
+											borderRadius: 1,
+											border: "1px solid",
+											borderColor: "divider",
+											overflow: "hidden"
+										},
+										children: [C ? C(A) : /* @__PURE__ */ c(y, { item: A }), (A.title || A.desc) && /* @__PURE__ */ l(u, {
+											sx: {
+												position: "absolute",
+												left: 0,
+												right: 0,
+												bottom: 0,
+												p: {
+													xs: 1.5,
+													sm: 2,
+													md: 3
+												},
+												color: "common.white",
+												background: "linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) 45%, transparent)"
+											},
+											onClick: (e) => e.stopPropagation(),
+											children: [A.title && /* @__PURE__ */ c(h, {
+												variant: "h6",
+												sx: { fontSize: {
+													xs: 14,
+													sm: 18,
+													md: 20
+												} },
+												children: A.title
+											}), A.desc && /* @__PURE__ */ c(h, {
+												variant: "body2",
+												sx: { mt: .5 },
+												children: A.desc
+											})]
+										})]
+									})
+								}, A.id)
+							})
+						})
+					}),
+					/* @__PURE__ */ c(d, {
+						"aria-label": "Close",
+						onClick: b,
+						sx: {
+							position: "absolute",
+							top: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							right: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							zIndex: (e) => e.zIndex.modal + 102
+						},
+						children: /* @__PURE__ */ c(n, {})
+					}),
+					E && j && /* @__PURE__ */ l(u, {
+						sx: {
+							position: "absolute",
+							top: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							left: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							zIndex: (e) => e.zIndex.modal + 102,
+							padding: 1,
+							px: 2,
+							fontSize: {
+								xs: 14,
+								sm: 16
+							},
+							color: "text.primary"
+						},
+						children: [
+							M + 1,
+							" / ",
+							N
+						]
+					}),
+					j && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(d, {
+						"aria-label": "Previous image",
+						onClick: (e) => {
+							e.stopPropagation(), P();
+						},
+						disabled: M === 0,
+						sx: {
+							position: "absolute",
+							left: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							top: "50%",
+							transform: "translateY(-50%)",
+							zIndex: (e) => e.zIndex.modal + 102,
+							"&:disabled": { opacity: .5 }
+						},
+						children: /* @__PURE__ */ c(v, {})
+					}), /* @__PURE__ */ c(d, {
+						"aria-label": "Next image",
+						onClick: (e) => {
+							e.stopPropagation(), F();
+						},
+						disabled: M === N - 1,
+						sx: {
+							position: "absolute",
+							right: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							top: "50%",
+							transform: "translateY(-50%)",
+							zIndex: (e) => e.zIndex.modal + 102,
+							"&:disabled": { opacity: .5 }
+						},
+						children: /* @__PURE__ */ c(t, {})
+					})] })
+				]
+			})
+		}), T && j && S.length > 1 && /* @__PURE__ */ c(u, {
+			sx: {
+				position: "fixed",
+				zIndex: 1502,
+				left: "50%",
+				bottom: 16,
+				transform: "translateX(-50%)"
+			},
+			children: /* @__PURE__ */ c(p, {
+				sx: {
+					position: "relative",
+					borderRadius: 1,
+					bgcolor: "background.paper",
+					border: "1px solid",
+					borderColor: "divider",
+					backdropFilter: "blur(12px)",
+					px: 1.5,
+					py: 1
+				},
+				children: /* @__PURE__ */ c(m, {
+					direction: "row",
+					spacing: -1.5,
+					sx: { alignItems: "center" },
+					children: S.map((e, t) => {
+						let n = A.id === e.id, r = t % 2 == 0 ? -15 : 15, i = () => {
+							x ? x(e) : k(e);
+						};
+						return /* @__PURE__ */ l(_.div, {
+							onClick: (e) => {
+								e.stopPropagation(), i();
+							},
+							style: {
+								position: "relative",
+								width: 40,
+								height: 40,
+								borderRadius: 8,
+								overflow: "hidden",
+								flexShrink: 0,
+								zIndex: n ? 30 : S.length - t,
+								border: n ? "1px solid" : void 0,
+								borderColor: n ? "divider" : void 0,
+								cursor: "pointer"
+							},
+							initial: { rotate: r },
+							animate: {
+								scale: n ? 1.2 : 1,
+								rotate: n ? 0 : r,
+								y: n ? -8 : 0
+							},
+							whileHover: {
+								scale: 1.3,
+								rotate: 0,
+								y: -10,
+								transition: {
+									type: "spring",
+									stiffness: 400,
+									damping: 25
+								}
+							},
+							children: [
+								C ? C(e, i) : /* @__PURE__ */ c(y, {
+									item: e,
+									objectFit: "cover",
+									style: {
+										width: "100%",
+										height: "100%",
+										borderRadius: 0,
+										pointerEvents: e.type === "video" ? "none" : "auto"
+									},
+									disableVideoControls: !0
+								}),
+								/* @__PURE__ */ c(u, { sx: {
+									position: "absolute",
+									inset: 0,
+									background: (e) => `linear-gradient(to bottom, transparent, ${(e.vars ?? e).palette.action.hover}, ${(e.vars ?? e).palette.action.selected})`,
+									pointerEvents: "none"
+								} }),
+								n && /* @__PURE__ */ c(_.div, {
+									layoutId: "activeGlow",
+									style: {
+										position: "absolute",
+										inset: -8,
+										background: "primary.main",
+										filter: "blur(16px)"
+									},
+									initial: { opacity: 0 },
+									animate: { opacity: 1 },
+									transition: { duration: .2 }
+								})
+							]
+						}, e.id);
+					})
+				})
+			})
+		})] })
+	});
+};
+b.displayName = "SImageModal";
+//#endregion
+export { b as n, y as t };

package/dist/s-language-switcher/index.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../s-language-switcher-Cg3Gh8_i.js";
+import { n as e, r as t, t as n } from "../s-language-switcher-vievp2VS.js";
 export { n as SLanguagePopover, e as SLanguageSwitcher, e as default, t as defaultLanguageOptions };

package/dist/s-language-switcher/s-language-switcher.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../s-language-switcher-Cg3Gh8_i.js";
+import { n as e, r as t, t as n } from "../s-language-switcher-vievp2VS.js";
 export { n as SLanguagePopover, e as SLanguageSwitcher, e as default, t as defaultLanguageOptions };

package/dist/{s-language-switcher-Cg3Gh8_i.js → s-language-switcher-vievp2VS.js}

@@ -6,8 +6,8 @@ import { t as o } from "./styled-BTDmdi4c.js";
 import { u as s } from "./Modal-C1VRVWBZ.js";
 import { t as c } from "./Menu-C-0KEauj.js";
 import { t as l } from "./Typography-EsraKPZO.js";
-import { r as u, t as d } from "./MenuItem-DWivWkNb.js";
-import { SIconButton as f } from "./s-icon-button/s-icon-button.js";
+import { SIconButton as u } from "./s-icon-button/s-icon-button.js";
+import { r as d, t as f } from "./MenuItem-DWivWkNb.js";
 import * as p from "react";
 import m, { createElement as h } from "react";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
@@ -15,7 +15,7 @@ import { useTranslation as v } from "react-i18next";
 //#region ../../node_modules/@mui/material/ListItemIcon/ListItemIcon.mjs
 var y = /* @__PURE__ */ e(t(), 1), b = (e) => {
 	let { alignItems: t, classes: r } = e;
-	return n({ root: ["root", t === "flex-start" && "alignItemsFlexStart"] }, u, r);
+	return n({ root: ["root", t === "flex-start" && "alignItemsFlexStart"] }, d, r);
 }, x = o("div", {
 	name: "MuiListItemIcon",
 	slot: "Root",
@@ -133,7 +133,7 @@ var T = [
 			horizontal: "right",
 			vertical: "top"
 		},
-		children: i.map((e) => /* @__PURE__ */ _(d, {
+		children: i.map((e) => /* @__PURE__ */ _(f, {
 			onClick: () => {
 				u(e.code);
 			},
@@ -154,14 +154,14 @@ var T = [
 		}, e.code))
 	});
 }, M = ({ languages: e = A, onLanguageChange: t, currentLanguage: n, tooltipText: r, buttonFlagSize: i = 16, menuFlagSize: a = 20, menuWidth: o = "220px", sx: s, useI18n: c = !0 }) => {
-	let l = v(), u = c ? l.t : null, d = c ? l.i18n : null, [p, h] = m.useState(null), y = n ?? d?.language ?? e[0]?.code ?? "en", b = e.find((e) => e.code === y) || e[0], x = m.useCallback((e) => {
+	let l = v(), d = c ? l.t : null, f = c ? l.i18n : null, [p, h] = m.useState(null), y = n ?? f?.language ?? e[0]?.code ?? "en", b = e.find((e) => e.code === y) || e[0], x = m.useCallback((e) => {
 		h(e.currentTarget);
 	}, []), S = m.useCallback(() => {
 		h(null);
 	}, []), C = m.useCallback((e) => {
-		t ? t(e) : d && d.changeLanguage(e);
-	}, [t, d]), w = r ?? (u ? u("header:language.tooltip") : "Change language");
-	return /* @__PURE__ */ _(m.Fragment, { children: [/* @__PURE__ */ g(f, {
+		t ? t(e) : f && f.changeLanguage(e);
+	}, [t, f]), w = r ?? (d ? d("header:language.tooltip") : "Change language");
+	return /* @__PURE__ */ _(m.Fragment, { children: [/* @__PURE__ */ g(u, {
 		onClick: x,
 		sx: {
 			display: {

package/dist/s-link/s-link.js

@@ -14,7 +14,11 @@ var i = ({ onClick: i, beforeText: a = "", afterText: o = "", mainText: s = "",
 			onClick: i,
 			sx: {
 				cursor: "pointer",
-				fontSize: "inherit"
+				fontSize: "inherit",
+				textDecoration: "none",
+				textUnderlineOffset: "4px",
+				"&::before": { display: "none" },
+				"&:hover": { textDecoration: "underline" }
 			},
 			component: l,
 			target: u,

package/dist/s-nav-item/s-nav-item.js

@@ -3,77 +3,86 @@ import { t } from "../Typography-EsraKPZO.js";
 import "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region lib/s-nav-item/s-nav-item.tsx
-var i = ({ active: i, disabled: a, external: o, href: s, icon: c, onClick: l, rightAction: u, title: d, component: f, sx: p, innerSx: m, titleSx: h }) => /* @__PURE__ */ n(e, {
-	component: "li",
-	sx: {
-		userSelect: "none",
-		display: "block",
-		...p
-	},
-	children: /* @__PURE__ */ r(e, {
-		...s ? {
-			component: o ? "a" : f ?? "a",
-			href: s,
-			target: o ? "_blank" : void 0,
-			rel: o ? "noreferrer" : void 0
-		} : {
-			role: "button",
-			onClick: l,
-			component: "div"
-		},
+var i = ({ active: i, disabled: a, external: o, href: s, icon: c, onClick: l, rightAction: u, title: d, component: f, sx: p, innerSx: m, titleSx: h }) => {
+	let g = a ? void 0 : l, _ = s ? {
+		component: o ? "a" : f ?? "a",
+		href: a ? void 0 : s,
+		target: o ? "_blank" : void 0,
+		rel: o ? "noreferrer" : void 0,
+		onClick: g
+	} : {
+		role: "button",
+		component: "div",
+		onClick: g,
+		onKeyDown: (e) => {
+			a || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), l?.());
+		}
+	};
+	return /* @__PURE__ */ n(e, {
+		component: "li",
 		sx: {
-			alignItems: "center",
-			borderRadius: 1,
-			color: "var(--s-palette-text-secondary)",
-			cursor: a ? "not-allowed" : "pointer",
-			display: "flex",
-			flex: "0 0 auto",
-			gap: 1,
-			justifyContent: "space-between",
-			p: 1.5,
-			textDecoration: "none",
-			whiteSpace: "nowrap",
-			...a && { color: "var(--s-palette-text-disabled)" },
-			...i && {
-				bgcolor: "var(--s-palette-action-selected)",
-				color: "var(--s-palette-text-primary)"
-			},
-			"&:hover": { ...!i && !a && {
-				bgcolor: "var(--s-palette-action-hover)",
-				color: "var(--s-palette-text-primary)"
-			} },
-			...m
+			userSelect: "none",
+			display: "block",
+			...p
 		},
-		tabIndex: 0,
-		children: [/* @__PURE__ */ r(e, {
+		children: /* @__PURE__ */ r(e, {
+			..._,
+			"aria-current": i ? "page" : void 0,
+			"aria-disabled": a || void 0,
 			sx: {
 				alignItems: "center",
+				borderRadius: 1,
+				color: "text.secondary",
+				cursor: a ? "not-allowed" : "pointer",
 				display: "flex",
-				gap: 1
+				flex: "0 0 auto",
+				gap: 1,
+				justifyContent: "space-between",
+				p: 1.5,
+				textDecoration: "none",
+				whiteSpace: "nowrap",
+				...a && { color: "text.disabled" },
+				...i && {
+					bgcolor: "action.selected",
+					color: "text.primary"
+				},
+				"&:hover": { ...!i && !a && {
+					bgcolor: "action.hover",
+					color: "text.primary"
+				} },
+				...m
 			},
-			children: [c ? /* @__PURE__ */ n(e, {
-				component: "span",
+			tabIndex: a ? -1 : 0,
+			children: [/* @__PURE__ */ r(e, {
 				sx: {
-					display: "flex",
 					alignItems: "center",
-					justifyContent: "center"
+					display: "flex",
+					gap: 1
 				},
-				children: c
-			}) : null, /* @__PURE__ */ n(t, {
+				children: [c ? /* @__PURE__ */ n(e, {
+					component: "span",
+					sx: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center"
+					},
+					children: c
+				}) : null, /* @__PURE__ */ n(t, {
+					component: "span",
+					sx: { ...h },
+					children: d
+				})]
+			}), u ? /* @__PURE__ */ n(e, {
 				component: "span",
-				sx: { ...h },
-				children: d
-			})]
-		}), u ? /* @__PURE__ */ n(e, {
-			component: "span",
-			sx: {
-				display: "flex",
-				alignItems: "center"
-			},
-			children: u
-		}) : null]
-	})
-});
+				sx: {
+					display: "flex",
+					alignItems: "center"
+				},
+				children: u
+			}) : null]
+		})
+	});
+};
 i.displayName = "SNavItem";
 //#endregion
 export { i as SNavItem, i as default };

package/dist/s-nav-item/s-nav-items.js

@@ -51,7 +51,7 @@ function f({ item: t, pathname: l, depth: u, component: f }) {
 				background: "transparent",
 				border: 0,
 				borderRadius: 1,
-				color: y ? "var(--s-palette-text-primary)" : "var(--s-palette-text-secondary)",
+				color: y ? "text.primary" : "text.secondary",
 				cursor: t.disabled ? "not-allowed" : "pointer",
 				display: "flex",
 				flex: "0 0 auto",
@@ -65,11 +65,11 @@ function f({ item: t, pathname: l, depth: u, component: f }) {
 				textDecoration: "none",
 				whiteSpace: "nowrap",
 				width: "100%",
-				...t.disabled && { color: "var(--s-palette-text-disabled)" },
-				...y && { bgcolor: "var(--s-palette-action-selected)" },
+				...t.disabled && { color: "text.disabled" },
+				...y && { bgcolor: "action.selected" },
 				"&:hover": { ...!y && !t.disabled && {
-					bgcolor: "var(--s-palette-action-hover)",
-					color: "var(--s-palette-text-primary)"
+					bgcolor: "action.hover",
+					color: "text.primary"
 				} }
 			},
 			onKeyDown: (e) => {
@@ -104,7 +104,7 @@ function f({ item: t, pathname: l, depth: u, component: f }) {
 				sx: {
 					display: "flex",
 					alignItems: "center",
-					color: "var(--s-palette-text-secondary)",
+					color: "text.secondary",
 					transition: "transform 200ms ease",
 					transform: _ ? "rotate(0deg)" : "rotate(-90deg)"
 				},

package/dist/s-review/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-review-D5_TicCf.js";
+import { t as e } from "../s-review-Ca6JUgGr.js";
 export { e as SReview, e as default };

package/dist/s-review/s-review.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-review-D5_TicCf.js";
+import { t as e } from "../s-review-Ca6JUgGr.js";
 export { e as SReview, e as default };