@solostylist/ui-kit 2.0.5 → 2.0.7

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

@@ -1,4 +1,4 @@
-import { i as e } from "../utils-CMeAWSRO.js";
+import { i as e } from "../utils-CXRJYVCd.js";
 import { toSxArray as t } from "../utils/sx.js";
 import { SLazyImage as n } from "../s-lazy-image/s-lazy-image.js";
 import { SSkeleton as r } from "../s-skeleton/s-skeleton.js";

package/dist/s-segmented-control/s-segmented-control.js

@@ -25,7 +25,7 @@ var x = [
 })(({ theme: e }) => ({
 	alignItems: "center",
 	backgroundColor: (e.vars ?? e).palette.action.hover,
-	borderRadius: e.radius.full,
+	borderRadius: e.radius.md,
 	display: "inline-flex",
 	gap: e.spacing(.5),
 	isolation: "isolate",
@@ -50,33 +50,27 @@ var x = [
 	name: "SSegmentedControl",
 	slot: "Indicator",
 	shouldForwardProp: (e) => e !== "ownerState"
-})(({ theme: e }) => {
-	let t = (e.vars ?? e).palette, n = i(e, "primary");
+})(({ ownerState: e, theme: t }) => {
+	let n = (t.vars ?? t).palette, r = i(t, "primary"), a = e.disabled || e.selectedDisabled;
 	return {
-		backgroundColor: n.light.containedBackground,
-		borderRadius: e.radius.full,
+		backgroundColor: a ? n.action.disabledBackground : r.light.containedBackground,
+		borderRadius: t.radius.sm,
+		boxShadow: a ? "none" : void 0,
 		left: 0,
 		pointerEvents: "none",
 		position: "absolute",
 		top: 0,
-		transition: e.transitions.create([
+		transition: t.transitions.create([
 			"height",
 			"opacity",
 			"transform",
 			"width"
 		], {
-			duration: e.transitions.duration.standard,
-			easing: e.transitions.easing.easeInOut
+			duration: t.transitions.duration.standard,
+			easing: t.transitions.easing.easeInOut
 		}),
 		zIndex: 0,
-		...e.applyStyles("dark", { backgroundColor: n.dark.containedBackground }),
-		variants: [{
-			props: ({ ownerState: e }) => e.disabled || e.selectedDisabled,
-			style: {
-				backgroundColor: t.action.disabledBackground,
-				boxShadow: "none"
-			}
-		}],
+		...t.applyStyles("dark", { backgroundColor: a ? n.action.disabledBackground : r.dark.containedBackground }),
 		"@media (prefers-reduced-motion: reduce)": { transition: "none" }
 	};
 }), T = p(d, {
@@ -86,7 +80,7 @@ var x = [
 })(({ theme: e }) => {
 	let t = (e.vars ?? e).palette, o = i(e, "primary");
 	return {
-		borderRadius: e.radius.full,
+		borderRadius: e.radius.sm,
 		color: t.text.secondary,
 		flex: "0 0 auto",
 		fontWeight: e.typography.fontWeightRegular,

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

@@ -1,4 +1,4 @@
-import { t as e } from "../theme-primitives-CRfnMsNy.js";
+import { t as e } from "../theme-primitives-DXekeATD.js";
 import * as t from "react";
 import { jsx as n } from "react/jsx-runtime";
 import "@fontsource/outfit";

package/dist/s-swatch/s-swatch.d.ts

@@ -76,8 +76,9 @@ export type SSwatchAccessibleNameProps = {
 export interface SSwatchBaseProps extends Omit<ButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'children' | 'color' | 'value'> {
     /**
      * Whether the swatch is an interactive option. Set to `false` for a
-     * presentational swatch; its root then fits the visual and has no button,
-     * ripple, focus, or pressed semantics.
+     * presentational swatch; its root then fits the visual, has no button,
+     * ripple, focus, or pressed semantics, and ignores every `onClick`,
+     * `slotProps.root` included.
      */
     interactive?: boolean;
     /** Marks the swatch as the current selection. */

package/dist/s-swatch/s-swatch.js

@@ -1,19 +1,19 @@
 import { resolveOwnerStateSlotProps as e } from "../utils/slots.js";
-import { getFocusVisibleStyle as t } from "../theme/components/action-styles.js";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Box as a, ButtonBase as o, styled as s, useThemeProps as c } from "@mui/material";
-import { mergeSlotProps as l, useForkRef as u } from "@mui/material/utils";
-import d from "@mui/utils/appendOwnerState";
+import { getFocusVisibleStyle as t, reducedPressMotionStyle as n } from "../theme/components/action-styles.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Box as o, ButtonBase as s, styled as c, useThemeProps as l } from "@mui/material";
+import { mergeSlotProps as u, useForkRef as d } from "@mui/material/utils";
+import f from "@mui/utils/appendOwnerState";
 //#region lib/s-swatch/s-swatch.tsx
-var f = {
+var p = {
 	small: 22,
 	medium: 32,
 	large: 44
-}, p = 24, m = 44, h = "@media (pointer: coarse)", g = 45, _ = (e) => Math.max(1, typeof e == "number" ? e : f[e]), v = ({ ownerState: e, theme: n }) => ({
+}, m = 24, h = 44, g = "@media (pointer: coarse)", _ = 45, v = (e) => Math.max(1, typeof e == "number" ? e : p[e]), y = ({ ownerState: e, theme: r }) => ({
 	alignItems: "center",
 	backgroundColor: "transparent",
-	borderRadius: n.radius.sm,
+	borderRadius: r.radius.sm,
 	boxSizing: "border-box",
 	cursor: e.interactive ? "pointer" : "default",
 	display: "inline-flex",
@@ -22,7 +22,7 @@ var f = {
 	justifyContent: "center",
 	padding: 0,
 	position: "relative",
-	transition: n.transitions.create("opacity", { duration: n.transitions.duration.shorter }),
+	transition: r.transitions.create("opacity", { duration: r.transitions.duration.shorter }),
 	width: e.controlSize,
 	...e.interactive ? {
 		"& .MuiTouchRipple-root": {
@@ -34,7 +34,7 @@ var f = {
 			zIndex: 1
 		},
 		"&.Mui-focusVisible::after": {
-			...t(n),
+			...t(r),
 			borderRadius: "inherit",
 			content: "\"\"",
 			height: e.swatchSize,
@@ -47,7 +47,7 @@ var f = {
 			zIndex: 4
 		},
 		"&.Mui-disabled": { cursor: "not-allowed" },
-		[h]: {
+		[g]: {
 			flex: `0 0 ${e.coarseControlSize}px`,
 			height: e.coarseControlSize,
 			width: e.coarseControlSize
@@ -55,21 +55,21 @@ var f = {
 	} : void 0,
 	variants: [{
 		props: ({ ownerState: e }) => e.shape === "circle",
-		style: { borderRadius: n.radius.full }
+		style: { borderRadius: r.radius.full }
 	}, {
 		props: ({ ownerState: e }) => e.disabled,
-		style: { opacity: (n.vars ?? n).palette.action.disabledOpacity }
+		style: { opacity: (r.vars ?? r).palette.action.disabledOpacity }
 	}],
-	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
-}), y = s(o, {
+	...n
+}), b = c(s, {
 	name: "SSwatch",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
-})(v), b = s(a, {
+})(y), x = c(o, {
 	name: "SSwatch",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
-})(v), x = s(a, {
+})(y), S = c(o, {
 	name: "SSwatch",
 	slot: "Swatch",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -77,14 +77,14 @@ var f = {
 	backgroundColor: (t.vars ?? t).palette.background.paper,
 	backgroundPosition: "center",
 	backgroundSize: "cover",
+	border: `1px solid ${(t.vars ?? t).palette.divider}`,
 	borderRadius: "inherit",
-	boxShadow: `inset 0 0 0 1px ${(t.vars ?? t).palette.divider}`,
 	boxSizing: "border-box",
 	flex: "0 0 auto",
 	height: e.swatchSize,
 	overflow: "hidden",
 	position: "relative",
-	transition: t.transitions.create(["box-shadow", "filter"], { duration: t.transitions.duration.shorter }),
+	transition: t.transitions.create(["border-color", "filter"], { duration: t.transitions.duration.shorter }),
 	width: e.swatchSize,
 	zIndex: 0,
 	variants: [
@@ -94,7 +94,10 @@ var f = {
 		},
 		{
 			props: ({ ownerState: e }) => e.selected,
-			style: { boxShadow: `inset 0 0 0 2px ${(t.vars ?? t).palette.primary.main}` }
+			style: {
+				borderColor: (t.vars ?? t).palette.primary.main,
+				borderWidth: 2
+			}
 		},
 		{
 			props: ({ ownerState: e }) => e.unavailable,
@@ -112,7 +115,7 @@ var f = {
 		}
 	],
 	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
-})), S = s(a, {
+})), C = c(o, {
 	name: "SSwatch",
 	slot: "Image",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -125,7 +128,7 @@ var f = {
 	objectPosition: "center",
 	position: "absolute",
 	width: "100%"
-}), C = s(a, {
+}), w = c(o, {
 	name: "SSwatch",
 	slot: "Indicator",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -141,7 +144,7 @@ var f = {
 	transform: "translate(-50%, -50%)",
 	width: Math.max(6, Math.round(e.swatchSize * .3)),
 	zIndex: 3
-})), w = s(a, {
+})), T = c(o, {
 	name: "SSwatch",
 	slot: "Strikethrough",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -153,66 +156,69 @@ var f = {
 	pointerEvents: "none",
 	position: "absolute",
 	top: "50%",
-	transform: `translate(-50%, -50%) rotate(-${g}deg)`,
+	transform: `translate(-50%, -50%) rotate(-${_}deg)`,
 	transformOrigin: "center",
 	width: "141.421%",
 	zIndex: 2
-})), T = n.forwardRef(function(t, n) {
-	let a = c({
+})), E = r.forwardRef(function(t, n) {
+	let r = l({
 		props: t,
 		name: "SSwatch"
-	}), { "aria-label": o, "aria-labelledby": s, color: f, colorSecondary: h, disabled: v = !1, image: T, interactive: E = !0, label: D, selected: O = !1, shape: k = "square", size: A = "medium", slotProps: j, slots: M, unavailable: N = !1, unavailableText: P = "Unavailable", value: F, ...I } = a, L = _(A), R = E ? Math.max(L, p) : L, z = {
-		...a,
-		coarseControlSize: E ? Math.max(L, m) : L,
+	}), { "aria-label": o, "aria-labelledby": s, color: c, colorSecondary: p, disabled: g = !1, image: y, interactive: E = !0, label: D, selected: O = !1, shape: k = "square", size: A = "medium", slotProps: j, slots: M, unavailable: N = !1, unavailableText: P = "Unavailable", value: F, ...I } = r, L = v(A), R = E ? Math.max(L, m) : L, z = {
+		...r,
+		coarseControlSize: E ? Math.max(L, h) : L,
 		controlSize: R,
-		disabled: v,
+		disabled: g,
 		interactive: E,
 		selected: O,
 		shape: k,
 		size: A,
 		swatchSize: L,
 		unavailable: N
-	}, B = M?.root ?? (E ? y : b), V = M?.swatch ?? x, H = M?.image ?? S, U = M?.indicator ?? C, W = M?.strikethrough ?? w, G = [o ?? D ?? F, N ? P : void 0].filter(Boolean).join(", "), { ref: K, ...q } = d(B, l(e(j?.root, z), E ? {
+	}, B = M?.root ?? (E ? b : x), V = M?.swatch ?? S, H = M?.image ?? C, U = M?.indicator ?? w, W = M?.strikethrough ?? T, G = [o ?? D ?? F, N ? P : void 0].filter(Boolean).join(", "), K = u(e(j?.root, z), E ? {
 		...I,
 		"aria-label": s ? void 0 : G || void 0,
 		"aria-labelledby": s,
 		"aria-pressed": O,
-		disabled: v
+		disabled: g
 	} : {
 		component: "span",
 		role: "img",
 		...I,
 		"aria-label": s ? void 0 : G || void 0,
 		"aria-labelledby": s
-	}), z), J = u(K, n), { style: Y, ...X } = e(j?.swatch, z) ?? {}, Z = d(V, X, z), Q = d(H, e(j?.image, z) ?? {}, z), $ = d(U, e(j?.indicator, z) ?? {}, z), ee = d(W, e(j?.strikethrough, z) ?? {}, z);
-	return /* @__PURE__ */ i(B, {
-		...q,
-		ref: J,
-		children: [/* @__PURE__ */ i(V, {
+	}), { ref: q, ...J } = f(B, E ? K : {
+		...K,
+		onClick: void 0
+	}, z), Y = d(q, n), { style: X, ...Z } = e(j?.swatch, z) ?? {}, Q = f(V, Z, z), $ = f(H, e(j?.image, z) ?? {}, z), ee = f(U, e(j?.indicator, z) ?? {}, z), te = f(W, e(j?.strikethrough, z) ?? {}, z);
+	return /* @__PURE__ */ a(B, {
+		...J,
+		ref: Y,
+		children: [/* @__PURE__ */ a(V, {
 			component: "span",
-			...Z,
+			...Q,
 			style: {
-				backgroundColor: f,
-				backgroundImage: h ? `linear-gradient(${180 - g}deg, ${f} 0 50%, ${h} 50% 100%)` : void 0,
-				...Y
+				backgroundColor: c,
+				backgroundImage: p ? `linear-gradient(${180 - _}deg, ${c} 0 50%, ${p} 50% 100%)` : void 0,
+				...X
 			},
-			children: [T ? /* @__PURE__ */ r(H, {
+			children: [y ? /* @__PURE__ */ i(H, {
 				alt: "",
 				component: "img",
-				...Q,
-				src: T
-			}) : null, N ? /* @__PURE__ */ r(W, {
+				...$,
+				src: y
+			}) : null, N ? /* @__PURE__ */ i(W, {
 				"aria-hidden": !0,
 				component: "span",
-				...ee
+				...te
 			}) : null]
-		}), O ? /* @__PURE__ */ r(U, {
+		}), O ? /* @__PURE__ */ i(U, {
 			"aria-hidden": !0,
 			component: "span",
-			...$
+			...ee
 		}) : null]
 	});
 });
-T.displayName = "SSwatch";
+E.displayName = "SSwatch";
 //#endregion
-export { T as SSwatch, T as default };
+export { E as SSwatch, E as default };

package/dist/s-theme-demo/theme-demo-color-ramps-section.js

@@ -1,4 +1,4 @@
-import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "../colors-CNjL5fhq.js";
+import { a as e, c as t, d as n, f as r, i, l as a, m as o, n as s, o as c, p as l, r as u, s as d, t as f, u as p } from "../colors-DscJqo7m.js";
 import "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 import { Box as g, Card as _, CardContent as v, Stack as y, Typography as b } from "@mui/material";

package/dist/s-theme-provider/s-theme-provider.js

@@ -1,5 +1,5 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "../theme-primitives-CRfnMsNy.js";
-import { components as s } from "../theme/components/components.js";
+import { t as e } from "../components-DWGB2MCO.js";
+import { a as t, i as n, n as r, o as i, r as a, s as o, t as s } from "../theme-primitives-DXekeATD.js";
 import * as c from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { CssBaseline as d, ThemeProvider as f, createTheme as p } from "@mui/material";
@@ -13,14 +13,14 @@ var h = ({ children: h, disableCssBaseline: g = !1, disableCustomTheme: _, theme
 				colorSchemeSelector: "data-mui-color-scheme",
 				cssVarPrefix: "s"
 			},
-			unstable_sxConfig: r,
-			colorSchemes: o,
-			interaction: n,
-			typography: a,
-			shadows: t,
-			shape: e,
-			radius: i,
-			components: s
+			unstable_sxConfig: i,
+			colorSchemes: s,
+			interaction: r,
+			typography: o,
+			shadows: n,
+			shape: t,
+			radius: a,
+			components: { ...e }
 		}, l = v ? m(c, { components: v }) : c;
 		return p(b ? m(l, b) : l);
 	}, [

package/dist/theme/component-augmentation.d.ts

@@ -211,7 +211,7 @@ declare module '@mui/material/styles' {
         SPopoverContent: 'root';
         SPopover: 'paper' | 'root';
         SProductCard: 'actions' | 'badge' | 'content' | 'favoriteButton' | 'footer' | 'hoverActions' | 'hoverImage' | 'image' | 'link' | 'media' | 'meta' | 'originalPrice' | 'price' | 'rating' | 'root' | 'swatches' | 'title';
-        SProductGallery: 'carousel' | 'image' | 'media' | 'root' | 'stage' | 'thumbnail' | 'thumbnails' | 'video' | 'videoFrame' | 'videoIndicator' | 'videoPlayButton';
+        SProductGallery: 'empty' | 'image' | 'media' | 'root' | 'stage' | 'thumbnail' | 'thumbnails' | 'video' | 'videoFrame' | 'videoIndicator' | 'videoPlayButton';
         SQuantityInput: 'root';
         SRadialPulseAnimate: 'label' | 'root';
         SReview: 'root';

package/dist/theme/components/accordion-details.d.ts

@@ -1,8 +1,2 @@
-export declare const MuiAccordionDetails: {
-    styleOverrides: {
-        root: {
-            mb: number;
-            border: string;
-        };
-    };
-};
+import { Slot } from './slot';
+export declare const MuiAccordionDetails: Slot<'MuiAccordionDetails'>;