@solostylist/ui-kit 2.0.0 → 2.0.2

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

@@ -0,0 +1,430 @@
+import { toSxArray as e } from "./utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "./utils/slots.js";
+import { t as n } from "./useForkRef-BuNFTXxE.js";
+import { t as r } from "./useEventCallback-DGCsaRIu.js";
+import { t as i } from "./appendOwnerState-CFQTq3pb.js";
+import { t as a } from "./createSvgIcon-3y-gS0r1.js";
+import { t as o } from "./useControlled-DqNPBJNp.js";
+import { t as s } from "./mergeSlotProps-DC8r4QzS.js";
+import { t as c } from "./s-carousel-CAyAl3ka.js";
+import { SLazyImage as l } from "./s-lazy-image/s-lazy-image.js";
+import { SIconButton as u } from "./s-icon-button/s-icon-button.js";
+import * as d from "react";
+import { createElement as ee } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Box as m, ButtonBase as h, CircularProgress as te, styled as g, useTheme as ne, useThemeProps as re } from "@mui/material";
+//#region ../../node_modules/@mui/icons-material/PlayArrowRounded.mjs
+var _ = a(/* @__PURE__ */ f("path", { d: "M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82" }), "PlayArrowRounded"), ie = g(m, {
+	name: "SProductGallery",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({ width: "100%" }), ae = g(m, {
+	name: "SProductGallery",
+	slot: "Stage",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ ownerState: e, theme: t }) => ({
+	aspectRatio: String(e.aspectRatio),
+	backgroundColor: (t.vars ?? t).palette.background.paper,
+	borderRadius: t.radius.md,
+	overflow: "hidden",
+	position: "relative",
+	width: "100%"
+})), oe = g(m, {
+	name: "SProductGallery",
+	slot: "Media",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	display: "grid",
+	height: "100%",
+	minWidth: 0,
+	position: "relative",
+	width: "100%",
+	"& > *": {
+		gridArea: "1 / 1",
+		minWidth: 0
+	}
+}), se = g(l, {
+	name: "SProductGallery",
+	slot: "Image",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), ce = g(c, {
+	name: "SProductGallery",
+	slot: "Carousel",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), le = g("video", {
+	name: "SProductGallery",
+	slot: "Video",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	display: "block",
+	height: "100%",
+	inset: 0,
+	maxHeight: "100%",
+	minHeight: 0,
+	objectFit: "cover",
+	position: "absolute",
+	width: "100%"
+}), ue = g(m, {
+	name: "SProductGallery",
+	slot: "VideoFrame"
+})({
+	height: "100%",
+	minHeight: 0,
+	position: "relative",
+	width: "100%"
+}), de = g(u, {
+	name: "SProductGallery",
+	slot: "VideoPlayButton"
+})(({ theme: e }) => {
+	let t = (e.vars ?? e).palette;
+	return {
+		height: e.spacing(7),
+		left: "50%",
+		position: "absolute",
+		top: "50%",
+		transform: "translate(-50%, -50%)",
+		width: e.spacing(7),
+		zIndex: 2,
+		"&.Mui-disabled": {
+			backgroundColor: t.blackAlpha.medium,
+			color: t.common.white
+		},
+		"& svg": { fontSize: e.typography.pxToRem(32) }
+	};
+}), fe = g(m, {
+	name: "SProductGallery",
+	slot: "Thumbnails",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	marginTop: e.spacing(1),
+	width: "100%"
+})), pe = g(h, {
+	name: "SProductGallery",
+	slot: "Thumbnail",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	backgroundColor: (e.vars ?? e).palette.background.paper,
+	boxSizing: "border-box",
+	borderRadius: e.radius.md,
+	display: "block",
+	height: e.spacing(7),
+	minHeight: e.spacing(5.5),
+	minWidth: e.spacing(5.5),
+	opacity: .72,
+	overflow: "hidden",
+	padding: 0,
+	position: "relative",
+	transition: e.transitions.create("opacity"),
+	marginInline: e.spacing(.5),
+	width: `calc(100% - ${e.spacing(1)})`,
+	[e.breakpoints.down("sm")]: { height: e.spacing(6.5) },
+	"&.Mui-focusVisible": {
+		outline: 0,
+		boxShadow: `0 0 0 2px ${(e.vars ?? e).palette.primary.main}`,
+		zIndex: 2
+	},
+	"&::after": {
+		border: "2px solid transparent",
+		borderRadius: "inherit",
+		content: "\"\"",
+		inset: 0,
+		pointerEvents: "none",
+		position: "absolute",
+		transition: e.transitions.create("border-color"),
+		zIndex: 1
+	},
+	"@media (hover: hover) and (pointer: fine)": { "&:hover": { opacity: 1 } },
+	"@media (prefers-reduced-motion: reduce)": {
+		transition: "none",
+		"&::after": { transition: "none" }
+	},
+	variants: [{
+		props: ({ ownerState: e }) => e.selected,
+		style: {
+			"&::after": { borderColor: (e.vars ?? e).palette.primary.main },
+			opacity: 1
+		}
+	}]
+})), me = g(m, {
+	name: "SProductGallery",
+	slot: "VideoIndicator"
+})(({ theme: e }) => {
+	let t = (e.vars ?? e).palette;
+	return {
+		alignItems: "center",
+		backgroundColor: e.alpha(t.common.black, .58),
+		borderRadius: e.radius.full,
+		boxShadow: e.shadows[2],
+		color: t.common.white,
+		display: "flex",
+		height: e.spacing(3.5),
+		justifyContent: "center",
+		left: "50%",
+		pointerEvents: "none",
+		position: "absolute",
+		top: "50%",
+		transform: "translate(-50%, -50%)",
+		width: e.spacing(3.5),
+		zIndex: 2,
+		"& svg": { fontSize: e.typography.pxToRem(20) }
+	};
+}), v = 1, he = 6;
+function ge(e, t) {
+	return e !== void 0 && Number.isFinite(e) && e > 0 ? e : t;
+}
+function _e(e, t) {
+	return typeof e == "number" ? ge(e, typeof t == "number" ? t : v) : typeof e == "string" && e.trim() ? e : t;
+}
+function ve(e) {
+	return e.type === "video" ? e.thumbnailSrc ?? e.poster ?? "" : e.thumbnailSrc ?? e.src;
+}
+function y(e) {
+	return e.type === "video" ? e.ariaLabel : e.alt;
+}
+function b(e) {
+	return e ? `${e.type ?? "image"}:${e.id}:${e.src}` : "";
+}
+var ye = (e, t, n) => {
+	let r = y(e);
+	return r ? `Show ${r}, ${t + 1} of ${n}` : `Show ${e.type === "video" ? "video" : "image"} ${t + 1} of ${n}`;
+};
+function be(e, t, n) {
+	return `${y(e) || (e.type === "video" ? "Product video" : "Product image")} ${t + 1} of ${n}`;
+}
+function xe(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+var x = d.forwardRef(function(a, c) {
+	let { aspectRatio: u = v, defaultValue: m, getThumbnailAriaLabel: h = ye, items: g, onChange: y, slotProps: x, slots: S, sx: C, thumbnailsLabel: w = "Choose product media", thumbnailsToShow: Se = he, value: T, ...E } = re({
+		props: a,
+		name: "SProductGallery"
+	}), Ce = ne(), we = _e(u, v), D = Math.max(1, Math.floor(ge(Se, he))), Te = d.useRef(g[0]?.id ?? ""), Ee = d.useRef(m === void 0), [O, k] = o({
+		controlled: T,
+		default: m ?? Te.current,
+		name: "SProductGallery",
+		state: "value"
+	}), A = T !== void 0, j = g.findIndex((e) => e.id === O), De = !A && g.length > 0 && j < 0 && (O !== "" || Ee.current), M = j >= 0 ? j : De ? 0 : -1, N = g[M] ?? null, P = N?.id ?? "", Oe = b(N), F = N?.type === "video" ? Oe : "", I = d.useRef(null), L = d.useRef(null), R = d.useRef(!1), [ke, z] = d.useState({
+		mediaKey: "",
+		loading: !1,
+		started: !1
+	}), B = ke.mediaKey === F ? ke : null, V = B?.loading ?? !1, H = B?.started ?? !1, U = d.useId(), W = {
+		...E,
+		aspectRatio: we,
+		activeItem: N,
+		activeIndex: M,
+		defaultValue: m,
+		getThumbnailAriaLabel: h,
+		items: g,
+		onChange: y,
+		sx: C,
+		thumbnailsLabel: w,
+		thumbnailsToShow: D,
+		value: P
+	}, G = t(x?.video, W), Ae = n(L, G?.ref);
+	d.useEffect(() => {
+		!A && N && O !== P && k(P);
+	}, [
+		N,
+		P,
+		A,
+		k,
+		O
+	]), d.useEffect(() => {
+		M >= 0 && I.current?.scrollTo(M);
+	}, [M]), d.useEffect(() => {
+		R.current = !1;
+	}, [F]);
+	let je = r((e, t) => {
+		let n = g[t];
+		!n || n.id === N?.id || (k(n.id), y?.(e, n.id));
+	}), Me = r(() => {
+		let e = L.current;
+		if (!e || N?.type !== "video") return;
+		let t = b(N);
+		R.current = !0, z({
+			mediaKey: t,
+			loading: !0,
+			started: !1
+		}), e.play().catch(() => {
+			R.current = !1, z((n) => L.current === e && n.mediaKey === t ? {
+				...n,
+				loading: !1,
+				started: !1
+			} : n);
+		});
+	}), K = S?.root ?? ie, q = S?.stage ?? ae, Ne = S?.media ?? oe, Pe = S?.image ?? se, Fe = S?.video ?? le, J = S?.thumbnails ?? fe, Ie = S?.carousel ?? ce, Le = S?.thumbnail ?? pe, { ref: Re, sx: ze, ...Y } = i(K, s(t(x?.root, W), E), W), Be = n(Re, c), X = i(q, t(x?.stage, W) ?? {}, W), Ve = i(Ne, t(x?.media, W) ?? {}, W), Z = i(J, t(x?.thumbnails, W) ?? {}, W), He = t(x?.carousel, W), Q = Math.min(g.length, D), $ = He?.slotProps, Ue = i(Ie, s(He, {
+		arrows: g.length > Q,
+		slotProps: {
+			...$,
+			viewport: {
+				...$?.viewport,
+				sx: [{ py: .5 }, ...e($?.viewport?.sx)]
+			}
+		}
+	}), W), We = () => {
+		if (!N) return null;
+		if (N.type === "video") {
+			let e = b(N), t = (e) => e.currentTarget === L.current, { children: n, controls: r = !0, ...a } = i(Fe, s(G, {
+				controls: !0,
+				onCanPlay: (n) => {
+					t(n) && z((t) => t.mediaKey === e && t.started ? {
+						...t,
+						loading: !1
+					} : t);
+				},
+				onEnded: (n) => {
+					t(n) && (R.current = !1, z({
+						mediaKey: e,
+						loading: !1,
+						started: !1
+					}));
+				},
+				onError: (n) => {
+					t(n) && (R.current = !1, z({
+						mediaKey: e,
+						loading: !1,
+						started: !1
+					}));
+				},
+				onPause: (n) => {
+					t(n) && (R.current = !1, z({
+						mediaKey: e,
+						loading: !1,
+						started: !1
+					}));
+				},
+				onPlay: (n) => {
+					t(n) && z({
+						mediaKey: e,
+						loading: !0,
+						started: !1
+					});
+				},
+				onPlaying: (n) => {
+					if (!t(n)) return;
+					let r = n.currentTarget, i = R.current;
+					R.current = !1, z({
+						mediaKey: e,
+						loading: !1,
+						started: !0
+					}), i && requestAnimationFrame(() => {
+						L.current === r && r.focus({ preventScroll: !0 });
+					});
+				},
+				onWaiting: (n) => {
+					t(n) && z((t) => ({
+						mediaKey: e,
+						loading: !0,
+						started: t.mediaKey === e && t.started
+					}));
+				},
+				playsInline: !0,
+				preload: "metadata"
+			}), W);
+			return /* @__PURE__ */ p(ue, {
+				"aria-busy": V || void 0,
+				children: [/* @__PURE__ */ f(Fe, {
+					...a,
+					"aria-label": N.ariaLabel,
+					controls: r && H,
+					poster: N.poster,
+					ref: Ae,
+					src: N.src,
+					children: n
+				}), !H || V ? /* @__PURE__ */ f(de, {
+					"aria-busy": V || void 0,
+					"aria-label": V ? `Loading ${N.ariaLabel}` : `Play ${N.ariaLabel}`,
+					disabled: V,
+					onClick: Me,
+					variant: "overlay",
+					children: V ? /* @__PURE__ */ f(te, {
+						"aria-label": `Loading ${N.ariaLabel}`,
+						color: "inherit",
+						size: 28
+					}) : /* @__PURE__ */ f(_, {})
+				}) : null]
+			}, `${N.type}:${N.id}:${N.src}`);
+		}
+		let { slotProps: e, ...n } = s(t(x?.image, W), { variant: "rectangular" }), r = i(Pe, n, W), a = {
+			...e,
+			image: s(e?.image, { sx: { objectFit: "cover" } })
+		};
+		return /* @__PURE__ */ ee(Pe, {
+			...r,
+			alt: N.alt,
+			key: `${N.type ?? "image"}:${N.id}:${N.src}`,
+			slotProps: a,
+			src: N.src
+		});
+	};
+	return /* @__PURE__ */ p(K, {
+		...Y,
+		"aria-label": Y["aria-label"] ?? "Product media gallery",
+		"aria-roledescription": Y["aria-roledescription"] ?? "carousel",
+		ref: Be,
+		role: Y.role ?? "group",
+		sx: [...e(ze), ...e(C)],
+		children: [/* @__PURE__ */ f(q, {
+			...X,
+			"aria-hidden": X["aria-hidden"] ?? !N,
+			"aria-label": X["aria-label"] ?? (N ? be(N, M, g.length) : void 0),
+			"aria-roledescription": X["aria-roledescription"] ?? (N ? "slide" : void 0),
+			id: U,
+			role: X.role ?? (N ? "group" : void 0),
+			children: /* @__PURE__ */ f(Ne, {
+				...Ve,
+				children: We()
+			})
+		}), g.length > 1 ? /* @__PURE__ */ f(J, {
+			...Z,
+			"aria-label": Z["aria-label"] ?? w,
+			role: Z.role ?? "group",
+			children: /* @__PURE__ */ f(Ie, {
+				...Ue,
+				apiRef: I,
+				autoplay: !1,
+				centerMode: !1,
+				infinite: !1,
+				responsive: [{
+					breakpoint: Ce.breakpoints.values.sm,
+					settings: { slidesToShow: Math.max(Math.ceil(Q / 2), 1) }
+				}],
+				slidesToShow: Q,
+				spaceBetween: 0,
+				children: g.map((e, n) => {
+					let r = n === M, a = {
+						...W,
+						index: n,
+						item: e,
+						selected: r
+					}, o = t(x?.thumbnail, a), { ref: s, ...c } = i(Le, o ?? {}, a), u = `${U}-thumbnail-${n}`;
+					return /* @__PURE__ */ p(Le, {
+						...c,
+						"aria-controls": U,
+						"aria-label": h(e, n, g.length),
+						"aria-pressed": r,
+						id: u,
+						onClick: (e) => {
+							o?.onClick?.(e), e.defaultPrevented || je(e, n);
+						},
+						ref: (e) => {
+							xe(s, e);
+						},
+						children: [/* @__PURE__ */ f(l, {
+							alt: "",
+							src: ve(e),
+							variant: "rectangular",
+							slotProps: { image: { sx: { objectFit: "cover" } } }
+						}), e.type === "video" ? /* @__PURE__ */ f(me, {
+							"aria-hidden": !0,
+							children: /* @__PURE__ */ f(_, {})
+						}) : null]
+					}, e.id);
+				})
+			})
+		}) : null]
+	});
+});
+x.displayName = "SProductGallery";
+//#endregion
+export { x as t };

package/dist/s-quantity-input/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-quantity-input-mYCixlJc.js";
+import { SQuantityInput as e } from "./s-quantity-input.js";
 export { e as SQuantityInput, e as default };

package/dist/s-quantity-input/s-quantity-input.js

@@ -1,2 +1,246 @@
-import { t as e } from "../s-quantity-input-mYCixlJc.js";
-export { e as SQuantityInput, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { t } from "../useControlled-DqNPBJNp.js";
+import { t as n } from "../Add-CEnTWsXs.js";
+import { t as r } from "../Remove-DDEn8ek8.js";
+import { SIconButton as i } from "../s-icon-button/s-icon-button.js";
+import { forwardRef as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Box as l, Typography as u, styled as d, useThemeProps as f } from "@mui/material";
+//#region lib/s-quantity-input/s-quantity-input.tsx
+var p = {
+	small: {
+		height: 32,
+		iconButton: "small",
+		valueMinWidth: 28,
+		typography: "body2"
+	},
+	medium: {
+		height: 40,
+		iconButton: "medium",
+		valueMinWidth: 36,
+		typography: "body1"
+	},
+	large: {
+		height: 48,
+		iconButton: "large",
+		valueMinWidth: 44,
+		typography: "body1"
+	}
+}, m = (e, t, n) => {
+	let r = Math.max(e, t);
+	return n == null ? r : Math.min(r, n);
+}, h = d(l, {
+	name: "SQuantityInput",
+	slot: "Root"
+})({}), g = a((a, d) => {
+	let g = f({
+		props: a,
+		name: "SQuantityInput"
+	}), { value: _, defaultValue: v, onChange: y, min: b = 0, max: x, step: S = 1, color: C = "default", variant: w = "outlined", size: T = "medium", editable: E = !1, disabled: D = !1, "aria-label": O, "aria-labelledby": k, onKeyDown: A, role: j = "spinbutton", sx: M, tabIndex: N = D ? -1 : 0, ...P } = g, F = p[T], [I, L] = t({
+		controlled: _,
+		default: m(v ?? b, b, x),
+		name: "SQuantityInput",
+		state: "value"
+	}), R = {
+		...g,
+		color: C,
+		disabled: D,
+		editable: E,
+		min: b,
+		size: T,
+		step: S,
+		value: I,
+		variant: w
+	}, z = (e, t) => {
+		let n = m(t, b, x);
+		n !== I && (L(n), y?.(e, n));
+	}, B = D || I <= b, V = D || x != null && I >= x, H = w === "contained", U = w === "outlined", W = x == null ? null : String(x).length >= String(b).length ? String(x) : String(b), G = {
+		alignSelf: "stretch",
+		height: "auto",
+		width: F.height,
+		borderRadius: 0
+	}, K = { "&.Mui-disabled": { opacity: .5 } }, q = (e) => {
+		if (A?.(e), e.defaultPrevented || D) return;
+		let t = e.target.tagName === "INPUT";
+		switch (e.key) {
+			case "ArrowUp":
+				e.preventDefault(), z(e, I + S);
+				break;
+			case "ArrowDown":
+				e.preventDefault(), z(e, I - S);
+				break;
+			case "ArrowRight":
+				if (t) break;
+				e.preventDefault(), z(e, I + S);
+				break;
+			case "ArrowLeft":
+				if (t) break;
+				e.preventDefault(), z(e, I - S);
+				break;
+			case "Home":
+				if (t) break;
+				e.preventDefault(), z(e, b);
+				break;
+			case "End":
+				if (t || x == null) break;
+				e.preventDefault(), z(e, x);
+				break;
+			default: break;
+		}
+	}, J = /* @__PURE__ */ s(l, {
+		component: "input",
+		inputMode: "numeric",
+		value: String(I),
+		disabled: D,
+		role: j,
+		"aria-label": O,
+		"aria-labelledby": k,
+		"aria-valuenow": I,
+		"aria-valuemin": b,
+		"aria-valuemax": x,
+		"aria-disabled": D || void 0,
+		tabIndex: N,
+		onChange: (e) => {
+			let t = e.target.value, n = parseInt(t.replace(/[^0-9-]/g, ""), 10);
+			Number.isNaN(n) ? (t === "" || t === "-") && z(e, b) : z(e, n);
+		},
+		onFocus: (e) => e.target.select(),
+		sx: {
+			border: 0,
+			outline: "none",
+			p: 0,
+			background: "transparent",
+			font: "inherit",
+			color: "inherit",
+			WebkitTextFillColor: "currentcolor",
+			textAlign: "center",
+			fontVariantNumeric: "tabular-nums",
+			...W == null ? {
+				minWidth: "1ch",
+				width: `${String(I).length || 1}ch`
+			} : {
+				position: "absolute",
+				inset: 0,
+				width: "100%"
+			}
+		}
+	}), Y = (e) => {
+		let t = C === "default" ? (e.vars ?? e).palette.grey : (e.vars ?? e).palette[C];
+		return {
+			backgroundColor: t[800],
+			color: t[50],
+			"&:hover": {
+				backgroundColor: t[900],
+				color: t[100]
+			},
+			"&:active": { backgroundColor: t[900] },
+			"&.Mui-disabled": {
+				backgroundColor: t[800],
+				color: t[50],
+				opacity: .5
+			},
+			...e.applyStyles("dark", {
+				color: t[100],
+				"&:hover": { color: t[50] },
+				"&.Mui-disabled": { color: t[100] }
+			})
+		};
+	};
+	return /* @__PURE__ */ c(h, {
+		...P,
+		ref: d,
+		ownerState: R,
+		role: E ? void 0 : j,
+		"aria-label": E ? void 0 : O,
+		"aria-labelledby": E ? void 0 : k,
+		"aria-valuenow": E ? void 0 : I,
+		"aria-valuemin": E ? void 0 : b,
+		"aria-valuemax": E ? void 0 : x,
+		"aria-disabled": E ? void 0 : D || void 0,
+		tabIndex: E ? void 0 : N,
+		onKeyDown: q,
+		sx: [(e) => ({
+			display: "inline-flex",
+			alignItems: "center",
+			height: F.height,
+			borderRadius: `${e.shape.borderRadius}px`,
+			outline: "none",
+			[E ? "&:has(input:focus-visible)" : "&:focus-visible"]: {
+				outline: "2px solid",
+				outlineColor: (e.vars ?? e).palette.primary[800],
+				outlineOffset: 2
+			},
+			...U ? {
+				border: "1px solid",
+				borderColor: (e.vars ?? e).palette.divider,
+				overflow: "hidden"
+			} : { gap: 1 },
+			...D ? { opacity: .5 } : {}
+		}), ...e(M)],
+		children: [
+			/* @__PURE__ */ s(i, {
+				"aria-label": "Decrease",
+				size: F.iconButton,
+				color: H ? void 0 : C,
+				disabled: B,
+				sx: H ? Y : U ? [G, K] : K,
+				onClick: (e) => z(e, I - S),
+				children: /* @__PURE__ */ s(r, {})
+			}),
+			U && /* @__PURE__ */ s(l, { sx: {
+				width: "1px",
+				alignSelf: "stretch",
+				bgcolor: "divider"
+			} }),
+			/* @__PURE__ */ s(u, {
+				component: "span",
+				variant: F.typography,
+				sx: {
+					position: "relative",
+					minWidth: F.valueMinWidth,
+					px: 1,
+					alignSelf: "stretch",
+					display: "inline-flex",
+					alignItems: "center",
+					justifyContent: "center",
+					fontWeight: 500,
+					color: "text.primary",
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: W == null ? E ? J : I : /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(l, {
+					component: "span",
+					"aria-hidden": !0,
+					sx: { visibility: "hidden" },
+					children: W
+				}), E ? J : /* @__PURE__ */ s(l, {
+					component: "span",
+					sx: {
+						position: "absolute",
+						inset: 0,
+						display: "inline-flex",
+						alignItems: "center",
+						justifyContent: "center"
+					},
+					children: I
+				})] })
+			}),
+			U && /* @__PURE__ */ s(l, { sx: {
+				width: "1px",
+				alignSelf: "stretch",
+				bgcolor: "divider"
+			} }),
+			/* @__PURE__ */ s(i, {
+				"aria-label": "Increase",
+				size: F.iconButton,
+				color: H ? void 0 : C,
+				disabled: V,
+				sx: H ? Y : U ? [G, K] : K,
+				onClick: (e) => z(e, I + S),
+				children: /* @__PURE__ */ s(n, {})
+			})
+		]
+	});
+});
+g.displayName = "SQuantityInput";
+//#endregion
+export { g as SQuantityInput, g as default };

package/dist/s-review/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-review-DSXXtWlL.js";
+import { t as e } from "../s-review--Q2C0ngO.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-DSXXtWlL.js";
+import { t as e } from "../s-review--Q2C0ngO.js";
 export { e as SReview, e as default };

package/dist/{s-review-DSXXtWlL.js → s-review--Q2C0ngO.js}

@@ -1,8 +1,8 @@
-import { i as e } from "./utils-DaSrTYUS.js";
+import { i as e } from "./utils-DOY6v6ln.js";
 import { toSxArray as t } from "./utils/sx.js";
-import { t as n } from "./createSvgIcon-B0SZlJF1.js";
-import { t as r } from "./useControlled-BeB0W_Ui.js";
-import { t as i } from "./s-image-viewer-DNIEYdtL.js";
+import { t as n } from "./createSvgIcon-3y-gS0r1.js";
+import { t as r } from "./useControlled-DqNPBJNp.js";
+import { t as i } from "./s-image-viewer-CjK67-rs.js";
 import { SLazyImage as 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";