@solostylist/ui-kit 1.0.223 → 1.0.225

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

@@ -1,9 +1,9 @@
-import { Breakpoint } from '@mui/material';
+import { Breakpoint, DialogProps } from '@mui/material';
 import * as React from 'react';
 /**
  * Props for the SDialog component.
  */
-export interface SDialogProps {
+export interface SDialogProps extends Omit<DialogProps, 'title' | 'content' | 'onClose' | 'open' | 'maxWidth' | 'children'> {
     /** Dialog title - can be string or React element */
     title?: string | React.ReactNode;
     /** Dialog content - can be string (auto-wrapped in Typography) or React element */
@@ -23,5 +23,5 @@ export interface SDialogProps {
     /** Whether to show the close button in the title bar */
     showClose?: boolean;
 }
-export declare const SDialog: React.ForwardRefExoticComponent<SDialogProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SDialog: React.ForwardRefExoticComponent<Omit<SDialogProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SDialog;

package/dist/s-dialog/s-dialog.js

@@ -3,9 +3,9 @@ import * as t from "react";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Dialog as a, DialogActions as o, DialogContent as s, DialogTitle as c, IconButton as l, Stack as u, Typography as d } from "@mui/material";
 //#region lib/s-dialog/s-dialog.tsx
-var f = t.forwardRef(({ title: t, content: f, actions: p, onClose: m = () => {}, open: h = !1, maxWidth: g = "sm", useForm: _ = !1, onSubmit: v = () => {}, showClose: y = !0 }, b) => {
-	let x = /* @__PURE__ */ i(n, { children: [f && /* @__PURE__ */ r(s, {
-		ref: b,
+var f = t.forwardRef(({ title: t, content: f, actions: p, onClose: m = () => {}, open: h = !1, maxWidth: g = "sm", useForm: _ = !1, onSubmit: v = () => {}, showClose: y = !0, ...b }, x) => {
+	let S = /* @__PURE__ */ i(n, { children: [f && /* @__PURE__ */ r(s, {
+		ref: x,
 		children: typeof f == "string" ? /* @__PURE__ */ r(d, {
 			variant: "body2",
 			sx: { color: "text.secondary" },
@@ -17,6 +17,7 @@ var f = t.forwardRef(({ title: t, content: f, actions: p, onClose: m = () => {},
 		maxWidth: g,
 		onClose: m,
 		open: h,
+		...b,
 		children: [t && /* @__PURE__ */ r(c, { children: /* @__PURE__ */ i(u, {
 			direction: "row",
 			spacing: 3,
@@ -34,8 +35,8 @@ var f = t.forwardRef(({ title: t, content: f, actions: p, onClose: m = () => {},
 			})]
 		}) }), _ ? /* @__PURE__ */ r("form", {
 			onSubmit: v,
-			children: x
-		}) : x]
+			children: S
+		}) : S]
 	});
 });
 f.displayName = "SDialog";

package/dist/s-dialog-confirm/s-dialog-confirm.d.ts

@@ -20,9 +20,15 @@ export interface SDialogConfirmProps {
     showClose?: boolean;
     /** Whether the dialog is in loading state (disables buttons) */
     loading?: boolean;
+    /** Text for the cancel button */
+    cancelText?: string;
+    /** Text for the confirm button */
+    confirmText?: string;
+    /** Accessible text for the close button */
+    closeText?: string;
 }
 export declare const SDialogConfirm: {
-    ({ title, content, onConfirm, onClose, open, maxWidth, showClose, loading, }: SDialogConfirmProps): React.JSX.Element;
+    ({ title, content, onConfirm, onClose, open, maxWidth, showClose, loading, cancelText, confirmText, closeText, }: SDialogConfirmProps): React.JSX.Element;
     displayName: string;
 };
 export default SDialogConfirm;

package/dist/s-dialog-confirm/s-dialog-confirm.js

@@ -5,7 +5,7 @@ import * as r from "react";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 import { Button as s, Dialog as c, DialogActions as l, DialogContent as u, DialogTitle as d, IconButton as f, Stack as p } from "@mui/material";
 //#region lib/s-dialog-confirm/s-dialog-confirm.tsx
-var m = ({ title: n, content: r, onConfirm: m = () => {}, onClose: h = () => {}, open: g = !1, maxWidth: _ = "sm", showClose: v = !0, loading: y = !1 }) => /* @__PURE__ */ o(c, {
+var m = ({ title: n, content: r, onConfirm: m = () => {}, onClose: h = () => {}, open: g = !1, maxWidth: _ = "sm", showClose: v = !0, loading: y = !1, cancelText: b = "Cancel", confirmText: x = "Confirm", closeText: S = "Close" }) => /* @__PURE__ */ o(c, {
 	fullWidth: !0,
 	maxWidth: _,
 	onClose: h,
@@ -20,9 +20,9 @@ var m = ({ title: n, content: r, onConfirm: m = () => {}, onClose: h = () => {},
 			},
 			children: [typeof n == "string" ? /* @__PURE__ */ a(e, {
 				variant: "h5",
-				sx: { textTransform: "capitalize" },
 				children: n
 			}) : /* @__PURE__ */ a("div", { children: n }), v && /* @__PURE__ */ a(f, {
+				"aria-label": S,
 				onClick: h,
 				children: /* @__PURE__ */ a(t, {})
 			})]
@@ -36,11 +36,11 @@ var m = ({ title: n, content: r, onConfirm: m = () => {}, onClose: h = () => {},
 			onClick: h,
 			variant: "outlined",
 			disabled: y,
-			children: "Cancel"
+			children: b
 		}), /* @__PURE__ */ a(s, {
 			onClick: m,
 			loading: y,
-			children: "Confirm"
+			children: x
 		})] }) })
 	]
 });

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

@@ -1,4 +1,4 @@
-import { n as e } from "../s-image-modal-DA3DBNbv.js";
+import { n as e } from "../s-image-modal-Za71QD3d.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";

package/dist/s-glow-button/s-glow-button.d.ts

@@ -16,7 +16,7 @@ export interface SGlowButtonProps extends ButtonProps {
     height?: string;
     /** Size of the glow effect in pixels (defaults to 60) */
     glowSize?: number;
-    /** Color of the glow effect (defaults to blue[500]) */
+    /** Color of the glow effect (defaults to the theme info color) */
     glowColor?: string;
 }
 /**

package/dist/s-glow-button/s-glow-button.js

@@ -1,29 +1,28 @@
-import { a as e } from "../theme-primitives-OrQ-xFJR.js";
-import { SMovingBorder as t } from "../s-moving-border/s-moving-border.js";
+import { SMovingBorder as e } from "../s-moving-border/s-moving-border.js";
 import "react";
-import { jsx as n } from "react/jsx-runtime";
-import { Button as r, hslToRgb as i } from "@mui/material";
+import { jsx as t } from "react/jsx-runtime";
+import { Button as n } from "@mui/material";
 //#region lib/s-glow-button/s-glow-button.tsx
-var a = ({ borderRadius: a = 12, children: o, duration: s = 3e3, width: c = "fit-content", height: l = "60px", glowSize: u = 60, glowColor: d = i(e[500]), ...f }) => /* @__PURE__ */ n(t, {
-	width: c,
-	height: l,
-	duration: s,
-	borderRadius: a,
-	glowSize: u,
-	glowColor: d,
+var r = ({ borderRadius: r = 12, children: i, duration: a = 3e3, width: o = "fit-content", height: s = "60px", glowSize: c = 60, glowColor: l = "var(--s-palette-info-main)", ...u }) => /* @__PURE__ */ t(e, {
+	width: o,
+	height: s,
+	duration: a,
+	borderRadius: r,
+	glowSize: c,
+	glowColor: l,
 	padding: .3,
-	children: /* @__PURE__ */ n(r, {
+	children: /* @__PURE__ */ t(n, {
 		sx: {
-			borderRadius: a,
-			width: c,
-			height: l
+			borderRadius: r,
+			width: o,
+			height: s
 		},
 		disableRipple: !0,
-		...f,
+		...u,
 		fullWidth: !0,
-		children: o
+		children: i
 	})
 });
-a.displayName = "SGlowButton";
+r.displayName = "SGlowButton";
 //#endregion
-export { a as default };
+export { r as default };

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

@@ -1,2 +1,2 @@
-import { n as e, t } from "../s-image-modal-DA3DBNbv.js";
+import { n as e, t } from "../s-image-modal-Za71QD3d.js";
 export { t as DefaultMediaItem, e as SImageModal, e as default };

package/dist/s-image-modal/s-image-modal.d.ts

@@ -43,6 +43,12 @@ export interface SImageModalProps {
     showCounter?: boolean;
     /** Custom modal styling */
     modalSx?: ModalProps['sx'];
+    /** Accessible text for the close button */
+    closeText?: string;
+    /** Accessible text for the previous-image navigation button */
+    previousText?: string;
+    /** Accessible text for the next-image navigation button */
+    nextText?: string;
 }
 export declare const DefaultMediaItem: React.FC<{
     item: MediaItemType;

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

@@ -1,2 +1,2 @@
-import { n as e, t } from "../s-image-modal-DA3DBNbv.js";
+import { n as e, t } from "../s-image-modal-Za71QD3d.js";
 export { t as DefaultMediaItem, e as SImageModal, e as default };

package/dist/{s-image-modal-DA3DBNbv.js → s-image-modal-Za71QD3d.js}

@@ -33,30 +33,30 @@ var v = e(/* @__PURE__ */ c("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10
 		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;
+}), b = ({ selectedItem: e, isOpen: r, onClose: b, onItemChange: x, mediaItems: S = [], renderMediaItem: C, showNavigation: w = !0, showThumbnailDock: T = !0, showCounter: E = !0, modalSx: D = {}, closeText: O = "Close", previousText: k = "Previous image", nextText: A = "Next image" }) => {
+	let [j, M] = o(e ?? null), N = e ?? j;
 	a(() => {
-		e && k(e);
+		e && M(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);
+	let P = w && S.length > 1 && N, F = N ? S.findIndex((e) => e.id === N.id) : -1, I = S.length, L = i.useCallback(() => {
+		if (P && F > 0) {
+			let e = S[F - 1];
+			x ? x(e) : M(e);
 		}
 	}, [
-		j,
-		M,
+		P,
+		F,
 		S,
 		x
-	]), F = i.useCallback(() => {
-		if (j && M < N - 1) {
-			let e = S[M + 1];
-			x ? x(e) : k(e);
+	]), R = i.useCallback(() => {
+		if (P && F < I - 1) {
+			let e = S[F + 1];
+			x ? x(e) : M(e);
 		}
 	}, [
-		j,
-		M,
-		N,
+		P,
+		F,
+		I,
 		S,
 		x
 	]);
@@ -64,10 +64,10 @@ var v = e(/* @__PURE__ */ c("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10
 		let e = (e) => {
 			if (r) switch (e.key) {
 				case "ArrowLeft":
-					P();
+					L();
 					break;
 				case "ArrowRight":
-					F();
+					R();
 					break;
 				case "Escape":
 					b();
@@ -77,13 +77,13 @@ var v = e(/* @__PURE__ */ c("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
 	}, [
 		r,
-		M,
-		N,
-		j,
-		P,
 		F,
+		I,
+		P,
+		L,
+		R,
 		b
-	]), !r || !A ? null : /* @__PURE__ */ c(f, {
+	]), !r || !N ? null : /* @__PURE__ */ c(f, {
 		open: r,
 		onClose: b,
 		sx: {
@@ -173,7 +173,7 @@ var v = e(/* @__PURE__ */ c("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10
 											borderColor: "divider",
 											overflow: "hidden"
 										},
-										children: [C ? C(A) : /* @__PURE__ */ c(y, { item: A }), (A.title || A.desc) && /* @__PURE__ */ l(u, {
+										children: [C ? C(N) : /* @__PURE__ */ c(y, { item: N }), (N.title || N.desc) && /* @__PURE__ */ l(u, {
 											sx: {
 												position: "absolute",
 												left: 0,
@@ -188,27 +188,27 @@ var v = e(/* @__PURE__ */ c("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10
 												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, {
+											children: [N.title && /* @__PURE__ */ c(h, {
 												variant: "h6",
 												sx: { fontSize: {
 													xs: 14,
 													sm: 18,
 													md: 20
 												} },
-												children: A.title
-											}), A.desc && /* @__PURE__ */ c(h, {
+												children: N.title
+											}), N.desc && /* @__PURE__ */ c(h, {
 												variant: "body2",
 												sx: { mt: .5 },
-												children: A.desc
+												children: N.desc
 											})]
 										})]
 									})
-								}, A.id)
+								}, N.id)
 							})
 						})
 					}),
 					/* @__PURE__ */ c(d, {
-						"aria-label": "Close",
+						"aria-label": O,
 						onClick: b,
 						sx: {
 							position: "absolute",
@@ -226,7 +226,7 @@ var v = e(/* @__PURE__ */ c("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10
 						},
 						children: /* @__PURE__ */ c(n, {})
 					}),
-					E && j && /* @__PURE__ */ l(u, {
+					E && P && /* @__PURE__ */ l(u, {
 						sx: {
 							position: "absolute",
 							top: {
@@ -249,17 +249,17 @@ var v = e(/* @__PURE__ */ c("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10
 							color: "text.primary"
 						},
 						children: [
-							M + 1,
+							F + 1,
 							" / ",
-							N
+							I
 						]
 					}),
-					j && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(d, {
-						"aria-label": "Previous image",
+					P && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(d, {
+						"aria-label": k,
 						onClick: (e) => {
-							e.stopPropagation(), P();
+							e.stopPropagation(), L();
 						},
-						disabled: M === 0,
+						disabled: F === 0,
 						sx: {
 							position: "absolute",
 							left: {
@@ -274,11 +274,11 @@ var v = e(/* @__PURE__ */ c("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10
 						},
 						children: /* @__PURE__ */ c(v, {})
 					}), /* @__PURE__ */ c(d, {
-						"aria-label": "Next image",
+						"aria-label": A,
 						onClick: (e) => {
-							e.stopPropagation(), F();
+							e.stopPropagation(), R();
 						},
-						disabled: M === N - 1,
+						disabled: F === I - 1,
 						sx: {
 							position: "absolute",
 							right: {
@@ -295,7 +295,7 @@ var v = e(/* @__PURE__ */ c("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10
 					})] })
 				]
 			})
-		}), T && j && S.length > 1 && /* @__PURE__ */ c(u, {
+		}), T && P && S.length > 1 && /* @__PURE__ */ c(u, {
 			sx: {
 				position: "fixed",
 				zIndex: 1502,
@@ -319,8 +319,8 @@ var v = e(/* @__PURE__ */ c("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10
 					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);
+						let n = N.id === e.id, r = t % 2 == 0 ? -15 : 15, i = () => {
+							x ? x(e) : M(e);
 						};
 						return /* @__PURE__ */ l(_.div, {
 							onClick: (e) => {

package/dist/s-nav-item/index.d.ts

@@ -1,3 +1,2 @@
 export { SNavItem, type SNavItemProps } from './s-nav-item';
-export { SNavItems, SNavGroupItem, type SNavItemConfig, type SNavItemsProps } from './s-nav-items';
 export { default } from './s-nav-item';

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

@@ -1,3 +1,2 @@
 import { SNavItem as e } from "./s-nav-item.js";
-import { SNavGroupItem as t, SNavItems as n } from "./s-nav-items.js";
-export { t as SNavGroupItem, e as SNavItem, e as default, n as SNavItems };
+export { e as SNavItem, e as default };

package/dist/s-nav-items/index.d.ts

@@ -0,0 +1,2 @@
+export { SNavItems, SNavGroupItem, type SNavItemConfig, type SNavItemsProps } from './s-nav-items';
+export { default } from './s-nav-items';

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

@@ -0,0 +1,2 @@
+import { SNavGroupItem as e, SNavItems as t } from "./s-nav-items.js";
+export { e as SNavGroupItem, t as SNavItems, t as default };

package/dist/{s-nav-item → s-nav-items}/s-nav-items.d.ts

@@ -59,4 +59,4 @@ export declare function SNavItems({ items, pathname, depth, component }: Readonl
 export declare namespace SNavItems {
     var displayName: string;
 }
-export {};
+export default SNavItems;

package/dist/{s-nav-item → s-nav-items}/s-nav-items.js

@@ -2,11 +2,11 @@ import { t as e } from "../Box-BlmynALm.js";
 import { t } from "../Stack-BQkLmLFp.js";
 import { t as n } from "../Typography-EsraKPZO.js";
 import { t as r } from "../ExpandMore-Bu7_1g6Q.js";
-import { SNavItem as i } from "./s-nav-item.js";
+import { SNavItem as i } from "../s-nav-item/s-nav-item.js";
 import { t as a } from "../Collapse-CnXmaDqT.js";
 import * as o from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region lib/s-nav-item/s-nav-items.tsx
+//#region lib/s-nav-items/s-nav-items.tsx
 function l(e, t) {
 	return e.some((e) => e.href && (t === e.href || t.startsWith(e.href + "/")) ? !0 : e.items ? l(e.items, t) : !1);
 }
@@ -151,4 +151,4 @@ function p({ items: e, pathname: n = "", depth: r = 0, component: i }) {
 }
 p.displayName = "SNavItems";
 //#endregion
-export { f as SNavGroupItem, p as SNavItems };
+export { f as SNavGroupItem, p as SNavItems, p as default };

package/dist/s-pixel-reveal/s-pixel-reveal.d.ts

@@ -7,7 +7,7 @@ export interface SPixelRevealProps extends Omit<React.HTMLAttributes<HTMLDivElem
     gap?: number;
     /** Animation speed multiplier (0-100) */
     speed?: number;
-    /** Array of color values randomly assigned to pixels */
+    /** Array of color values randomly assigned to pixels (defaults to theme primary shades) */
     colors?: string[];
     /** Controls pixel animation state */
     loading?: boolean;

package/dist/s-pixel-reveal/s-pixel-reveal.js

@@ -1,6 +1,6 @@
-import { o as e } from "../theme-primitives-OrQ-xFJR.js";
-import { forwardRef as t, useCallback as n, useEffect as r, useRef as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { forwardRef as e, useCallback as t, useEffect as n, useRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useTheme as o } from "@mui/material";
 //#region lib/s-pixel-reveal/s-pixel-reveal.tsx
 var s = class {
 	x;
@@ -47,100 +47,105 @@ function c({ x: e, y: t, gap: n, logicalWidth: r, logicalHeight: i, instant: a,
 	let c = e + n / 2, l = t + n / 2, u = r / 2, d = i / 2;
 	return Math.sqrt(s(c, l, u, d));
 }
-function l(e, t, n) {
+function l(e, t) {
+	let n = /^var\((--[^),\s]+)\s*(?:,\s*([^)]+))?\)$/.exec(e.trim());
+	return n && (getComputedStyle(t).getPropertyValue(n[1]).trim() || n[2]?.trim()) || e;
+}
+function u(e, t, n) {
 	e.has(t) || e.set(t, []), e.get(t)?.push(n);
 }
-var u = t(({ gap: t = 5, speed: u = 100, colors: d = [
-	e[400],
-	e[500],
-	e[600]
-], loading: f = !0, src: p, alt: m = "", style: h, children: g, instant: _ = !0, ...v }, y) => {
-	let b = i(null), x = i(null), S = i(null), C = i(/* @__PURE__ */ new Map()), w = i(null), T = i(1e3 / 60), E = i(0), D = i(!1);
-	r(() => {
-		D.current = typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1;
+var d = e(({ gap: e = 5, speed: d = 100, colors: f, loading: p = !0, src: m, alt: h = "", style: g, children: _, instant: v = !0, ...y }, b) => {
+	let x = o(), S = r(null), C = r(null), w = r(null), T = r(/* @__PURE__ */ new Map()), E = r(null), D = r(1e3 / 60), O = r(0), k = r(!1);
+	n(() => {
+		k.current = typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1;
 	}, []);
-	let O = n((e, t, n, r) => {
+	let A = t((e, t, n, r) => {
 		let i = e - n, a = t - r;
 		return i * i + a * a;
-	}, []), k = n((e, n, r) => {
-		w.current && cancelAnimationFrame(w.current), E.current = performance.now();
+	}, []), j = t((t, n, r) => {
+		E.current && cancelAnimationFrame(E.current), O.current = performance.now();
 		let i = () => {
-			w.current = requestAnimationFrame(i);
-			let a = performance.now(), o = a - E.current;
-			if (o < T.current) return;
-			E.current = a - o % T.current, e.clearRect(0, 0, n, r);
+			E.current = requestAnimationFrame(i);
+			let a = performance.now(), o = a - O.current;
+			if (o < D.current) return;
+			O.current = a - o % D.current, t.clearRect(0, 0, n, r);
 			let s = !1;
-			C.current.forEach((n, r) => {
-				e.fillStyle = r;
+			T.current.forEach((n, r) => {
+				t.fillStyle = r;
 				for (let r of n) {
-					if (f) {
-						r.updateWhileLoading(), r.draw(e, t), s = !0;
+					if (p) {
+						r.updateWhileLoading(), r.draw(t, e), s = !0;
 						continue;
 					}
-					r.updateWhileIdle() && (r.draw(e, t), s = !0);
+					r.updateWhileIdle() && (r.draw(t, e), s = !0);
 				}
-			}), !f && !s && w.current && (cancelAnimationFrame(w.current), w.current = null);
+			}), !p && !s && E.current && (cancelAnimationFrame(E.current), E.current = null);
 		};
 		i();
-	}, [f, t]), A = n(() => {
-		let e = b.current, n = e?.getContext("2d");
-		if (!e || !n) return;
-		C.current = /* @__PURE__ */ new Map();
-		let r = D.current ? 0 : Math.max(0, Math.min(100, u)) * .001, i = window.devicePixelRatio ?? 1, a = e.width / i, o = e.height / i, f = .5, p = (a + o) * .01, m = a % t / 2, h = o % t / 2;
-		for (let e = m; e < a; e += t) for (let n = h; n < o; n += t) {
-			let i = d[Math.floor(Math.random() * d.length)], u = c({
-				x: e,
+	}, [p, e]), M = t(() => {
+		let t = S.current, n = t?.getContext("2d");
+		if (!t || !n) return;
+		T.current = /* @__PURE__ */ new Map();
+		let r = k.current ? 0 : Math.max(0, Math.min(100, d)) * .001, i = (x.vars ?? x).palette, a = (f ?? [
+			i.primary[400],
+			i.primary[500],
+			i.primary[600]
+		]).map((e) => l(e, t)), o = window.devicePixelRatio ?? 1, p = t.width / o, m = t.height / o, h = .5, g = (p + m) * .01, _ = p % e / 2, y = m % e / 2;
+		for (let t = _; t < p; t += e) for (let n = y; n < m; n += e) {
+			let i = a[Math.floor(Math.random() * a.length)], o = c({
+				x: t,
 				y: n,
-				gap: t,
-				logicalWidth: a,
-				logicalHeight: o,
-				instant: _,
-				reducedMotion: D.current,
-				getDistanceSq: O
-			}), m = Math.random() * 4 + p, h = Math.random() * (2 - f) + f;
-			l(C.current, i, new s(e, n, i, r, u, m, h));
+				gap: e,
+				logicalWidth: p,
+				logicalHeight: m,
+				instant: v,
+				reducedMotion: k.current,
+				getDistanceSq: A
+			}), l = Math.random() * 4 + g, d = Math.random() * (2 - h) + h;
+			u(T.current, i, new s(t, n, i, r, o, l, d));
 		}
-		k(n, a, o);
+		j(n, p, m);
 	}, [
-		t,
-		u,
+		e,
 		d,
-		_,
-		O,
-		k
-	]), j = n(() => {
-		let e = b.current, t = x.current, n = e?.getContext("2d");
+		f,
+		x,
+		v,
+		A,
+		j
+	]), N = t(() => {
+		let e = S.current, t = C.current, n = e?.getContext("2d");
 		if (!e || !t || !n) return;
 		let r = t.getBoundingClientRect();
 		if (r.width === 0 || r.height === 0) return;
 		let i = Math.floor(r.width), a = Math.floor(r.height), o = window.devicePixelRatio ?? 1;
-		e.width = i * o, e.height = a * o, e.style.width = `${i}px`, e.style.height = `${a}px`, n.setTransform(1, 0, 0, 1, 0, 0), n.scale(o, o), A();
-	}, [A]);
-	return r(() => {
-		j();
+		e.width = i * o, e.height = a * o, e.style.width = `${i}px`, e.style.height = `${a}px`, n.setTransform(1, 0, 0, 1, 0, 0), n.scale(o, o), M();
+	}, [M]);
+	return n(() => {
+		N();
 		let e = new ResizeObserver(() => {
-			requestAnimationFrame(() => j());
+			requestAnimationFrame(() => N());
 		});
-		return x.current && e.observe(x.current), () => {
-			e.disconnect(), w.current && cancelAnimationFrame(w.current);
+		return C.current && e.observe(C.current), () => {
+			e.disconnect(), E.current && cancelAnimationFrame(E.current);
 		};
-	}, [j]), /* @__PURE__ */ o("div", {
+	}, [N]), /* @__PURE__ */ a("div", {
 		ref: (e) => {
-			x.current = e, typeof y == "function" ? y(e) : y && (y.current = e);
+			C.current = e, typeof b == "function" ? b(e) : b && (b.current = e);
 		},
 		style: {
 			position: "relative",
 			width: "100%",
 			height: "100%",
 			overflow: "hidden",
-			...h
+			...g
 		},
-		...v,
+		...y,
 		children: [
-			p && /* @__PURE__ */ a("img", {
-				ref: S,
-				src: p,
-				alt: m,
+			m && /* @__PURE__ */ i("img", {
+				ref: w,
+				src: m,
+				alt: h,
 				style: {
 					position: "absolute",
 					inset: 0,
@@ -150,9 +155,9 @@ var u = t(({ gap: t = 5, speed: u = 100, colors: d = [
 					display: "block"
 				}
 			}),
-			g,
-			/* @__PURE__ */ a("canvas", {
-				ref: b,
+			_,
+			/* @__PURE__ */ i("canvas", {
+				ref: S,
 				style: {
 					position: "absolute",
 					inset: 0,
@@ -166,6 +171,6 @@ var u = t(({ gap: t = 5, speed: u = 100, colors: d = [
 		]
 	});
 });
-u.displayName = "SPixelReveal";
+d.displayName = "SPixelReveal";
 //#endregion
-export { u as SPixelReveal, u as default };
+export { d as SPixelReveal, d as default };

package/dist/s-review/index.js

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