@solostylist/ui-kit 2.0.0 → 2.0.1

package/dist/s-accordion/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-accordion-B8nlrdFc.js";
+import { SAccordion as e } from "./s-accordion.js";
 export { e as SAccordion, e as default };

package/dist/s-accordion/s-accordion.js

@@ -1,2 +1,70 @@
-import { t as e } from "../s-accordion-B8nlrdFc.js";
-export { e as SAccordion, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { styled as t, useThemeProps as n } from "@mui/material/styles";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@mui/icons-material/ExpandMore";
+import s from "@mui/material/Typography";
+import { useControlled as c } from "@mui/material/utils";
+import l from "@mui/utils/appendOwnerState";
+import u from "@mui/material/Stack";
+import d from "@mui/material/Accordion";
+import f from "@mui/material/AccordionDetails";
+import p from "@mui/material/AccordionSummary";
+//#region lib/s-accordion/s-accordion.tsx
+var m = t(d, {
+	name: "SAccordion",
+	slot: "Root"
+})({});
+function h(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var g = r.forwardRef(function(t, r) {
+	let d = n({
+		props: t,
+		name: "SAccordion"
+	}), { children: g, defaultExpanded: _ = !1, disabled: v = !1, expandIcon: y = /* @__PURE__ */ i(o, {}), expanded: b, onChange: x, slotProps: S, slots: C, startIcon: w, title: T, ...E } = d, [D, O] = c({
+		controlled: b,
+		default: _,
+		name: "SAccordion",
+		state: "expanded"
+	}), k = {
+		...d,
+		disabled: v,
+		expanded: D
+	}, { details: A = f, summary: j = p, summaryContent: M = u, title: N = s, ...P } = C ?? {}, { details: F, summary: I, summaryContent: L, title: R, ...z } = S ?? {}, B = l(C?.summary, h(I, k) ?? {}, k), V = l(C?.summaryContent, h(L, k) ?? {}, k), H = l(C?.title, h(R, k) ?? {}, k), U = l(C?.details, h(F, k) ?? {}, k), { sx: W, ...G } = V, { sx: K, ...q } = H;
+	return /* @__PURE__ */ a(m, {
+		elevation: 0,
+		...E,
+		disabled: v,
+		expanded: D,
+		onChange: (e, t) => {
+			O(t), x?.(e, t);
+		},
+		ownerState: k,
+		ref: r,
+		slots: P,
+		slotProps: z,
+		children: [T != null || w ? /* @__PURE__ */ i(j, {
+			expandIcon: y,
+			...B,
+			children: /* @__PURE__ */ a(M, {
+				direction: "row",
+				spacing: 1,
+				...G,
+				sx: [{ alignItems: "center" }, ...e(W)],
+				children: [w, /* @__PURE__ */ i(N, {
+					variant: "subtitle1",
+					...q,
+					sx: [{ fontWeight: 600 }, ...e(K)],
+					children: T
+				})]
+			})
+		}) : null, /* @__PURE__ */ i(A, {
+			...U,
+			children: g
+		})]
+	});
+});
+g.displayName = "SAccordion";
+//#endregion
+export { g as SAccordion, g as default };

package/dist/s-action-overlay/s-action-overlay.js

@@ -1,11 +1,11 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../appendOwnerState-CELpvdMz.js";
-import { SIconButton as n } from "../s-icon-button/s-icon-button.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Box as o, Grid as s, styled as c, useThemeProps as l } from "@mui/material";
+import { SIconButton as t } from "../s-icon-button/s-icon-button.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Box as a, Grid as o, styled as s, useThemeProps as c } from "@mui/material";
+import l from "@mui/utils/appendOwnerState";
 //#region lib/s-action-overlay/s-action-overlay.tsx
-var u = 40, d = 16, f = c(o, {
+var u = 40, d = 16, f = s(a, {
 	name: "SActionOverlay",
 	slot: "Root"
 })({});
@@ -19,18 +19,18 @@ function m(e) {
 		justifyContent: t
 	};
 }
-var h = r.forwardRef(function(c, h) {
-	let g = l({
-		props: c,
+var h = n.forwardRef(function(s, h) {
+	let g = c({
+		props: s,
 		name: "SActionOverlay"
-	}), { "aria-label": _, actions: v, backdropColor: y = "background.paper", backdropOpacity: b = .9, borderRadius: x = 0, blurAmount: S = 10, children: C, columns: w = 3, maxWidth: T, onBlur: E, onFocus: D, onMouseEnter: O, onMouseLeave: k, onVisibilityChange: A, position: j = "center", showOnHover: M = !0, slotProps: N, slots: P, sx: F, tabIndex: I, visible: L, ...R } = g, [z, B] = r.useState(!1), V = L ?? z, H = {
+	}), { "aria-label": _, actions: v, backdropColor: y = "background.paper", backdropOpacity: b = .9, borderRadius: x = 0, blurAmount: S = 10, children: C, columns: w = 3, maxWidth: T, onBlur: E, onFocus: D, onMouseEnter: O, onMouseLeave: k, onVisibilityChange: A, position: j = "center", showOnHover: M = !0, slotProps: N, slots: P, sx: F, tabIndex: I, visible: L, ...R } = g, [z, B] = n.useState(!1), V = L ?? z, H = {
 		...g,
 		position: j,
 		visible: V
-	}, U = P?.overlay ?? o, W = P?.actions ?? s, G = t(P?.overlay, p(N?.overlay, H) ?? {}, H), K = t(P?.actions, p(N?.actions, H) ?? {}, H), { sx: q, ...J } = G, { sx: Y, ...X } = K, Z = m(j), Q = w > 0 ? w * u + (w - 1) * d + w * 16 : void 0, $ = (e, t) => {
+	}, U = P?.overlay ?? a, W = P?.actions ?? o, G = l(P?.overlay, p(N?.overlay, H) ?? {}, H), K = l(P?.actions, p(N?.actions, H) ?? {}, H), { sx: q, ...J } = G, { sx: Y, ...X } = K, Z = m(j), Q = w > 0 ? w * u + (w - 1) * d + w * 16 : void 0, $ = (e, t) => {
 		M && (L === void 0 && B(t), A?.(e, t));
 	};
-	return /* @__PURE__ */ a(f, {
+	return /* @__PURE__ */ i(f, {
 		...R,
 		"aria-label": _ ?? (M ? "Show actions" : void 0),
 		onBlur: (e) => {
@@ -52,7 +52,7 @@ var h = r.forwardRef(function(c, h) {
 			display: "inline-flex",
 			position: "relative"
 		}, ...e(F)],
-		children: [C, V ? /* @__PURE__ */ i(U, {
+		children: [C, V ? /* @__PURE__ */ r(U, {
 			...J,
 			sx: [{
 				...Z,
@@ -66,7 +66,7 @@ var h = r.forwardRef(function(c, h) {
 				transform: "translateZ(0)",
 				transition: "opacity 200ms ease-in-out"
 			}, ...e(q)],
-			children: /* @__PURE__ */ i(W, {
+			children: /* @__PURE__ */ r(W, {
 				container: !0,
 				spacing: 2,
 				...X,
@@ -74,16 +74,16 @@ var h = r.forwardRef(function(c, h) {
 					justifyContent: Z.justifyContent,
 					maxWidth: T ?? Q
 				}, ...e(Y)],
-				children: v.map(({ icon: t, label: r, selected: a, sx: o, ...c }, l) => /* @__PURE__ */ i(s, {
+				children: v.map(({ icon: n, label: i, selected: a, sx: s, ...c }, l) => /* @__PURE__ */ r(o, {
 					sx: {
 						display: "flex",
 						justifyContent: "center"
 					},
-					children: /* @__PURE__ */ i(n, {
+					children: /* @__PURE__ */ r(t, {
 						...c,
-						"aria-label": r,
+						"aria-label": i,
 						"aria-pressed": a,
-						tooltip: r,
+						tooltip: i,
 						slotProps: { tooltip: { placement: "top" } },
 						sx: [{
 							bgcolor: a ? "primary.main" : void 0,
@@ -99,10 +99,10 @@ var h = r.forwardRef(function(c, h) {
 								bgcolor: a ? "primary.main" : void 0,
 								color: a ? "primary.contrastText" : void 0
 							}
-						}, ...e(o)],
-						children: t
+						}, ...e(s)],
+						children: n
 					})
-				}, `${r}-${l}`))
+				}, `${i}-${l}`))
 			})
 		}) : null]
 	});

package/dist/s-autocomplete/s-autocomplete.js

@@ -1,4 +1,4 @@
-import { t as e } from "../s-text-field-BM4qk0mf.js";
+import { STextField as e } from "../s-text-field/s-text-field.js";
 import { forwardRef as t, useId as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
 import { Autocomplete as i, styled as a, useThemeProps as o } from "@mui/material";

package/dist/s-avatar/s-avatar.js

@@ -1,43 +1,43 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../appendOwnerState-CELpvdMz.js";
-import { SLazyImage as n } from "../s-lazy-image/s-lazy-image.js";
-import * as r from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Avatar as o, Box as s, Typography as c, styled as l, useThemeProps as u } from "@mui/material";
+import { SLazyImage as t } from "../s-lazy-image/s-lazy-image.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Avatar as a, Box as o, Typography as s, styled as c, useThemeProps as l } from "@mui/material";
+import u from "@mui/utils/appendOwnerState";
 //#region lib/s-avatar/s-avatar.tsx
-var d = l(s, {
+var d = c(o, {
 	name: "SAvatar",
 	slot: "Root"
 })({}), f = (e) => e <= 32 ? 12 : e <= 40 ? 16 : e <= 56 ? 18 : Math.round(e * .4);
 function p(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-var m = r.forwardRef(function(r, s) {
-	let l = u({
-		props: r,
+var m = n.forwardRef(function(n, o) {
+	let c = l({
+		props: n,
 		name: "SAvatar"
-	}), { alt: m, children: h, name: g, showName: _ = !1, size: v = 40, slotProps: y, slots: b, src: x, sx: S, ...C } = l, w = {
-		...l,
+	}), { alt: m, children: h, name: g, showName: _ = !1, size: v = 40, slotProps: y, slots: b, src: x, sx: S, ...C } = c, w = {
+		...c,
 		showName: _,
 		size: v
-	}, T = b?.avatar ?? o, E = b?.image ?? n, D = b?.name ?? c, O = t(b?.avatar, p(y?.avatar, w) ?? {}, w), k = t(b?.image, p(y?.image, w) ?? {}, w), A = t(b?.name, p(y?.name, w) ?? {}, w), { sx: j, ...M } = O;
-	return /* @__PURE__ */ a(d, {
+	}, T = b?.avatar ?? a, E = b?.image ?? t, D = b?.name ?? s, O = u(b?.avatar, p(y?.avatar, w) ?? {}, w), k = u(b?.image, p(y?.image, w) ?? {}, w), A = u(b?.name, p(y?.name, w) ?? {}, w), { sx: j, ...M } = O;
+	return /* @__PURE__ */ i(d, {
 		...C,
 		ownerState: w,
-		ref: s,
+		ref: o,
 		sx: [{
 			alignItems: "center",
 			display: "flex",
 			gap: 2
 		}, ...e(S)],
-		children: [/* @__PURE__ */ i(T, {
+		children: [/* @__PURE__ */ r(T, {
 			...M,
 			sx: [{
 				fontSize: f(v),
 				height: v,
 				width: v
 			}, ...e(j)],
-			children: h ?? (x ? /* @__PURE__ */ i(E, {
+			children: h ?? (x ? /* @__PURE__ */ r(E, {
 				...k,
 				alt: m ?? (typeof g == "string" ? g : "Avatar"),
 				height: v,
@@ -45,7 +45,7 @@ var m = r.forwardRef(function(r, s) {
 				variant: "circular",
 				width: v
 			}) : (typeof g == "string" ? g[0] : void 0) ?? "A")
-		}), _ && g != null ? /* @__PURE__ */ i(D, {
+		}), _ && g != null ? /* @__PURE__ */ r(D, {
 			...A,
 			children: g
 		}) : null]

package/dist/s-blur-text/s-blur-text.js

@@ -1,10 +1,10 @@
-import { t as e } from "../useForkRef-CKneCEtr.js";
-import t, { useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Typography as c, styled as l, useThemeProps as u } from "@mui/material";
+import e, { useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Typography as s, styled as c, useThemeProps as l } from "@mui/material";
+import { useForkRef as u } from "@mui/material/utils";
 import { motion as d, useReducedMotion as f } from "framer-motion";
 //#region lib/s-blur-text/s-blur-text.tsx
-var p = l(c, {
+var p = c(s, {
 	name: "SBlurText",
 	slot: "Root"
 })({}), m = (e, t) => {
@@ -23,12 +23,12 @@ function h(e, t) {
 		};
 	});
 }
-var g = t.forwardRef(function(t, c) {
-	let l = u({
-		props: t,
+var g = e.forwardRef(function(e, s) {
+	let c = l({
+		props: e,
 		name: "SBlurText"
-	}), { children: g, delay: _ = 100, animateBy: v = "words", direction: y = "top", threshold: b = .1, rootMargin: x = "0px", animationFrom: S, animationTo: C, easing: w = (e) => e, onAnimationComplete: T, stepDuration: E = .35, variant: D = "body1", sx: O, ...k } = l, A = r(() => h(g, v), [g, v]), [j, M] = a(!1), N = i(null), P = i(null), F = e(N, c), I = f();
-	n(() => {
+	}), { children: g, delay: _ = 100, animateBy: v = "words", direction: y = "top", threshold: b = .1, rootMargin: x = "0px", animationFrom: S, animationTo: C, easing: w = (e) => e, onAnimationComplete: T, stepDuration: E = .35, variant: D = "body1", sx: O, ...k } = c, A = n(() => h(g, v), [g, v]), [j, M] = i(!1), N = r(null), P = r(null), F = u(N, s), I = f();
+	t(() => {
 		if (I) {
 			M(!0);
 			return;
@@ -45,7 +45,7 @@ var g = t.forwardRef(function(t, c) {
 		x,
 		I,
 		b
-	]), n(() => {
+	]), t(() => {
 		if (!I) return;
 		let e = `${v}:${g}`;
 		P.current !== e && (P.current = e, T?.());
@@ -55,7 +55,7 @@ var g = t.forwardRef(function(t, c) {
 		I,
 		g
 	]);
-	let L = r(() => y === "top" ? {
+	let L = n(() => y === "top" ? {
 		filter: "blur(10px)",
 		opacity: 0,
 		y: -50
@@ -63,7 +63,7 @@ var g = t.forwardRef(function(t, c) {
 		filter: "blur(10px)",
 		opacity: 0,
 		y: 50
-	}, [y]), R = r(() => [{
+	}, [y]), R = n(() => [{
 		filter: "blur(5px)",
 		opacity: .5,
 		y: y === "top" ? 5 : -5
@@ -72,10 +72,10 @@ var g = t.forwardRef(function(t, c) {
 		opacity: 1,
 		y: 0
 	}], [y]), z = S ?? L, B = C ?? R, V = B[B.length - 1] ?? z, H = {
-		...l,
+		...c,
 		inView: j
 	}, U = B.length + 1, W = E * (U - 1), G = Array.from({ length: U }, (e, t) => U === 1 ? 0 : t / (U - 1));
-	return /* @__PURE__ */ o(p, {
+	return /* @__PURE__ */ a(p, {
 		...k,
 		ownerState: H,
 		ref: F,
@@ -88,7 +88,7 @@ var g = t.forwardRef(function(t, c) {
 				delay: n * _ / 1e3,
 				ease: w
 			};
-			return /* @__PURE__ */ s(d.span, {
+			return /* @__PURE__ */ o(d.span, {
 				initial: I ? !1 : z,
 				animate: I ? V : j ? r : z,
 				transition: I ? { duration: 0 } : i,

package/dist/s-brand-logo/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-brand-logo-jtAJZQIv.js";
+import { t as e } from "../s-brand-logo-CErW9Slg.js";
 export { e as SBrandLogo, e as default };

package/dist/s-brand-logo/s-brand-logo.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-brand-logo-jtAJZQIv.js";
+import { t as e } from "../s-brand-logo-CErW9Slg.js";
 export { e as SBrandLogo, e as default };

package/dist/s-breadcrumbs/s-breadcrumbs.js

@@ -1,12 +1,12 @@
 import { toSxArray as e } from "../utils/sx.js";
 import { actionHoverMedia as t, getFocusVisibleStyle as n } from "../theme/components/action-styles.js";
 import { paginationDimensions as r } from "../s-pagination/types.js";
-import { t as i } from "../ChevronRight-BxsM4W78.js";
-import { forwardRef as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
-import { Breadcrumbs as s, Link as c, Typography as l, styled as u, useThemeProps as d } from "@mui/material";
+import { forwardRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { Breadcrumbs as o, Link as s, Typography as c, styled as l, useThemeProps as u } from "@mui/material";
+import d from "@mui/icons-material/ChevronRight";
 //#region lib/s-breadcrumbs/s-breadcrumbs.tsx
-var f = u(s, {
+var f = l(o, {
 	name: "SBreadcrumbs",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -27,11 +27,11 @@ var f = u(s, {
 		"&:active": { backgroundColor: i.action.selected },
 		[t]: { "&:hover": { backgroundColor: i.action.hover } }
 	} };
-}), p = a((t, n) => {
-	let r = d({
+}), p = i((t, n) => {
+	let r = u({
 		props: t,
 		name: "SBreadcrumbs"
-	}), { items: a, separator: s = /* @__PURE__ */ o(i, { fontSize: "small" }), LinkComponent: u, currentColor: p = "text.primary", linkColor: m = "primary.main", sx: h, ...g } = r, _ = {
+	}), { items: i, separator: o = /* @__PURE__ */ a(d, { fontSize: "small" }), LinkComponent: l, currentColor: p = "text.primary", linkColor: m = "primary.main", sx: h, ...g } = r, _ = {
 		...r,
 		currentColor: p,
 		linkColor: m
@@ -44,18 +44,18 @@ var f = u(s, {
 		"&::before": { display: "none" },
 		"&:hover": { textDecoration: "underline" }
 	};
-	return /* @__PURE__ */ o(f, {
+	return /* @__PURE__ */ a(f, {
 		ref: n,
 		ownerState: _,
-		separator: s,
+		separator: o,
 		sx: h,
 		...g,
-		children: a.map((t, n) => {
-			let r = n === a.length - 1, i = t.isCurrent ?? r, s = `${t.label}-${n}`;
-			return i ? /* @__PURE__ */ o(l, {
+		children: i.map((t, n) => {
+			let r = n === i.length - 1, o = t.isCurrent ?? r, u = `${t.label}-${n}`;
+			return o ? /* @__PURE__ */ a(c, {
 				sx: { color: p },
 				children: t.label
-			}, s) : t.onClick ? /* @__PURE__ */ o(c, {
+			}, u) : t.onClick ? /* @__PURE__ */ a(s, {
 				component: "button",
 				type: "button",
 				onClick: t.onClick,
@@ -68,18 +68,18 @@ var f = u(s, {
 					font: "inherit"
 				}],
 				children: t.label
-			}, s) : t.to ? /* @__PURE__ */ o(c, {
+			}, u) : t.to ? /* @__PURE__ */ a(s, {
 				color: m,
 				sx: v,
-				...u ? {
-					component: u,
+				...l ? {
+					component: l,
 					to: t.to
 				} : { href: t.to },
 				children: t.label
-			}, s) : /* @__PURE__ */ o(l, {
+			}, u) : /* @__PURE__ */ a(c, {
 				sx: { color: p },
 				children: t.label
-			}, s);
+			}, u);
 		})
 	});
 });

package/dist/s-carousel/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-carousel-Dnjke4JQ.js";
+import { SCarousel as e } from "./s-carousel.js";
 export { e as SCarousel, e as default };

package/dist/s-carousel/s-carousel.js

@@ -1,2 +1,184 @@
-import { t as e } from "../s-carousel-Dnjke4JQ.js";
-export { e as SCarousel, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { SIconButton as t } from "../s-icon-button/s-icon-button.js";
+import * as n from "react";
+import { Children as r, forwardRef as i, useCallback as a, useEffect as o, useMemo as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { ArrowBackIosNew as f, ArrowForwardIos as p } from "@mui/icons-material";
+import { Box as m, styled as h, useTheme as g, useThemeProps as ee } from "@mui/material";
+import _ from "embla-carousel-autoplay";
+import v from "embla-carousel-react";
+//#region lib/s-carousel/s-carousel.tsx
+var y = h(m, {
+	name: "SCarousel",
+	slot: "Root"
+})({
+	position: "relative",
+	".carousel-arrow": {
+		position: "absolute",
+		top: "50%",
+		transform: "translate(0, -50%)",
+		zIndex: 1,
+		opacity: 0,
+		transition: "opacity 0.3s ease-in-out",
+		pointerEvents: "none",
+		"&.next": { right: 6 },
+		"&.prev": { left: 6 }
+	},
+	":hover": { ".carousel-arrow": {
+		opacity: 1,
+		pointerEvents: "auto"
+	} },
+	".carousel-arrow.Mui-focusVisible": {
+		opacity: 1,
+		pointerEvents: "auto"
+	}
+}), b = h("div", { shouldForwardProp: (e) => e !== "centerPadding" })(({ centerPadding: e }) => ({
+	overflow: "hidden",
+	...e && { padding: `0 ${e}` }
+})), te = h("div")({
+	display: "flex",
+	touchAction: "pan-y pinch-zoom"
+}), ne = h("div", { shouldForwardProp: (e) => e !== "slidesToShow" && e !== "spaceBetween" })(({ slidesToShow: e, spaceBetween: t }) => ({
+	flex: `0 0 calc(100% / ${e})`,
+	minWidth: 0,
+	paddingInline: `${t / 2}px`,
+	boxSizing: "border-box"
+})), re = h("ul")(({ theme: e }) => ({
+	gap: 6,
+	zIndex: 1,
+	margin: 0,
+	padding: 0,
+	listStyle: "none",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	color: (e.vars ?? e).palette.primary.main,
+	"& li": {
+		width: 13,
+		height: 7,
+		display: "flex",
+		cursor: "pointer",
+		alignItems: "center",
+		justifyContent: "center",
+		transition: "all 0.4s",
+		"&.active span": { opacity: 1 },
+		"&.active": { width: 18 }
+	}
+})), ie = h("span", { shouldForwardProp: (e) => e !== "dotColor" })(({ dotColor: e, theme: t }) => ({
+	width: "100%",
+	height: "100%",
+	borderRadius: t.radius.full,
+	cursor: "pointer",
+	position: "relative",
+	backgroundColor: e ?? (t.vars ?? t).palette.primary.main,
+	opacity: .35
+}));
+function ae(e, t) {
+	return typeof e == "string" || typeof e == "number" ? e : e && typeof e == "object" && "key" in e && e.key != null ? e.key : `slide-${t + 1}`;
+}
+function x(e, t) {
+	let [n, r] = c(e);
+	return o(() => {
+		function n() {
+			if (!t?.length) {
+				r(e);
+				return;
+			}
+			let n = window.innerWidth, i = [...t].sort((e, t) => e.breakpoint - t.breakpoint), a = e;
+			for (let t of i) if (n <= t.breakpoint) {
+				a = t.settings.slidesToShow ?? e;
+				break;
+			}
+			r(a);
+		}
+		return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+	}, [e, t]), n;
+}
+var S = i(function(i, h) {
+	let S = ee({
+		props: i,
+		name: "SCarousel"
+	}), { apiRef: C, children: w, dotColor: T, dots: E = !1, arrows: D = !0, slidesToShow: O = 4, spaceBetween: k = 4, autoplay: A = !1, autoplaySpeed: j = 3e3, infinite: M = !0, speed: N = 500, centerMode: P = !1, centerPadding: F = "60px", responsive: I, slotProps: L, sx: R, ...z } = S, B = g(), V = x(O, I), H = s(() => A ? [_({
+		delay: j,
+		stopOnInteraction: !1
+	})] : [], [A, j]), [U, W] = v({
+		loop: M,
+		duration: Math.round(N / 20),
+		align: P ? "center" : "start",
+		direction: B.direction === "rtl" ? "rtl" : "ltr",
+		slidesToScroll: 1
+	}, H), [G, K] = c([]), [q, J] = c(0), [oe, se] = c(!1), [ce, le] = c(!1), Y = a(() => {
+		W && (K(W.scrollSnapList()), J(W.selectedScrollSnap()), se(W.canScrollPrev()), le(W.canScrollNext()));
+	}, [W]);
+	o(() => {
+		if (W) return Y(), W.on("select", Y), W.on("reInit", Y), () => {
+			W.off("select", Y), W.off("reInit", Y);
+		};
+	}, [W, Y]), n.useImperativeHandle(C, () => W ?? null, [W]);
+	let X = r.toArray(w), Z = L?.previousButton, Q = L?.nextButton, $ = L?.dots, ue = {
+		...S,
+		activeSlidesToShow: V,
+		selectedIndex: q
+	};
+	return /* @__PURE__ */ d(y, {
+		...z,
+		ownerState: ue,
+		ref: h,
+		sx: R,
+		children: [
+			/* @__PURE__ */ u(b, {
+				ref: U,
+				centerPadding: P ? F : void 0,
+				children: /* @__PURE__ */ u(te, { children: X.map((e, t) => /* @__PURE__ */ u(ne, {
+					slidesToShow: V,
+					spaceBetween: k,
+					children: e
+				}, ae(e, t))) })
+			}),
+			D && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(t, {
+				"aria-label": "Previous slide",
+				...Z,
+				className: ["carousel-arrow prev", Z?.className].filter(Boolean).join(" "),
+				onClick: (e) => {
+					Z?.onClick?.(e), e.defaultPrevented || W?.scrollPrev();
+				},
+				disabled: Z?.disabled || !M && !oe,
+				sx: e(Z?.sx),
+				children: /* @__PURE__ */ u(f, {})
+			}), /* @__PURE__ */ u(t, {
+				"aria-label": "Next slide",
+				...Q,
+				className: ["carousel-arrow next", Q?.className].filter(Boolean).join(" "),
+				onClick: (e) => {
+					Q?.onClick?.(e), e.defaultPrevented || W?.scrollNext();
+				},
+				disabled: Q?.disabled || !M && !ce,
+				sx: e(Q?.sx),
+				children: /* @__PURE__ */ u(p, {})
+			})] }),
+			E && G.length > 0 && /* @__PURE__ */ u(re, {
+				...$,
+				sx: [{ mt: 4 }, ...e($?.sx)],
+				children: G.map((e, n) => /* @__PURE__ */ u(m, {
+					component: "li",
+					className: n === q ? "active" : "",
+					sx: { display: "flex" },
+					children: /* @__PURE__ */ u(t, {
+						"aria-label": `Go to slide ${n + 1}`,
+						onClick: () => W?.scrollTo(n),
+						sx: {
+							width: "100%",
+							height: "100%",
+							minWidth: 0,
+							p: 0
+						},
+						children: /* @__PURE__ */ u(ie, { dotColor: T })
+					})
+				}, e))
+			})
+		]
+	});
+});
+S.displayName = "SCarousel";
+//#endregion
+export { S as SCarousel, S as default };