@solostylist/ui-kit 1.0.230 → 2.0.1

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

@@ -1,75 +1,93 @@
 import { useScrollAnimation as e } from "../hooks/use-scroll-animation.js";
-import t from "react";
-import { jsx as n } from "react/jsx-runtime";
-import { Box as r } from "@mui/material";
-import { motion as i } from "framer-motion";
+import { styled as t, useThemeProps as n } from "@mui/material/styles";
+import r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { Box as a } from "@mui/material";
+import { motion as o, useReducedMotion as s } from "framer-motion";
 //#region lib/s-scroll-reveal/s-scroll-reveal.tsx
-function a(e) {
-	return t.isValidElement(e) && e.key != null ? e.key : typeof e == "string" || typeof e == "number" ? e : null;
+var c = t(a, {
+	name: "SScrollReveal",
+	slot: "Root"
+})({ overflow: "hidden" });
+function l(e) {
+	return r.isValidElement(e) && e.key != null ? e.key : typeof e == "string" || typeof e == "number" ? e : null;
 }
-function o(e, t, n, r) {
+function u(e, t, n, r) {
 	return t ? e ? "visible" : "hidden" : e ? r : n;
 }
-var s = ({ children: s, duration: c = .6, ease: l = "easeOut", threshold: u, rootMargin: d, delay: f, direction: p, distance: m, scale: h = !0, rotate: g = !1, stagger: _ = !0, staggerDelay: v = .1, sx: y, ...b }) => {
-	let { ref: x, animate: S, initialPosition: C, finalPosition: w } = e({
-		threshold: u,
-		rootMargin: d,
-		delay: f,
-		direction: p,
-		distance: m
-	}), T = h ? {
-		...C,
+var d = r.forwardRef(function(t, d) {
+	let f = n({
+		props: t,
+		name: "SScrollReveal"
+	}), { children: p, duration: m = .6, ease: h = "easeOut", threshold: g, rootMargin: _, delay: v, direction: y, distance: b, scaleOnReveal: x = !0, rotateOnReveal: S = !1, stagger: C = !0, staggerDelay: w = .1, sx: T, ...E } = f, D = {
+		...f,
+		duration: m,
+		ease: h,
+		rotateOnReveal: S,
+		scaleOnReveal: x,
+		stagger: C,
+		staggerDelay: w
+	}, O = s(), { ref: k, animate: A, initialPosition: j, finalPosition: M } = e({
+		threshold: g,
+		rootMargin: _,
+		delay: v,
+		direction: y,
+		distance: b
+	}), N = x ? {
+		...j,
 		scale: .85
-	} : C, E = h ? {
-		...w,
+	} : j, P = x ? {
+		...M,
 		scale: 1
-	} : w, D = g ? {
-		...T,
+	} : M, F = S ? {
+		...N,
 		rotate: -2
-	} : T, O = g ? {
-		...E,
+	} : N, I = S ? {
+		...P,
 		rotate: 0
-	} : E, k = {
-		hidden: { opacity: 0 },
+	} : P, L = {
+		duration: m,
+		ease: h,
+		type: "tween"
+	}, R = {
+		hidden: {},
+		visible: { transition: { staggerChildren: C ? w : 0 } }
+	}, z = {
+		hidden: F,
 		visible: {
-			opacity: 1,
-			transition: {
-				staggerChildren: _ ? v : 0,
-				delayChildren: f ? f / 1e3 : 0
-			}
+			...I,
+			transition: L
 		}
-	}, A = {
-		hidden: D,
-		visible: O
-	}, j = o(S, _, D, O);
-	return /* @__PURE__ */ n(r, {
-		sx: {
-			overflow: "hidden",
-			...y
-		},
-		...b,
-		children: /* @__PURE__ */ n(r, {
-			component: i.div,
-			ref: x,
-			variants: _ ? k : void 0,
-			initial: _ ? "hidden" : D,
-			animate: j,
-			transition: {
-				duration: c,
-				ease: l,
-				type: "spring",
-				stiffness: 80,
-				damping: 20,
-				mass: .8
-			},
-			children: _ ? t.Children.toArray(s).map((e) => /* @__PURE__ */ n(r, {
-				component: i.div,
-				variants: A,
+	}, B = u(A, C, F, I);
+	return O ? /* @__PURE__ */ i(c, {
+		...E,
+		ownerState: D,
+		ref: d,
+		sx: T,
+		children: /* @__PURE__ */ i(a, {
+			ref: k,
+			children: p
+		})
+	}) : /* @__PURE__ */ i(c, {
+		...E,
+		ownerState: D,
+		ref: d,
+		sx: T,
+		children: /* @__PURE__ */ i(a, {
+			component: o.div,
+			ref: k,
+			variants: C ? R : void 0,
+			initial: C ? "hidden" : F,
+			animate: B,
+			transition: C ? void 0 : L,
+			children: C ? r.Children.toArray(p).map((e) => /* @__PURE__ */ i(a, {
+				component: o.div,
+				variants: z,
 				children: e
-			}, a(e))) : s
+			}, l(e))) : p
 		})
 	});
-};
-s.displayName = "SScrollReveal";
+});
+d.displayName = "SScrollReveal";
 //#endregion
-export { s as SScrollReveal, s as default };
+export { d as SScrollReveal, d as default };

package/dist/s-scroll-to-top/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SScrollToTop } from './s-scroll-to-top';
-export type { SScrollToTopProps } from './s-scroll-to-top';
+export type { SScrollToTopOwnerState, SScrollToTopProps } from './s-scroll-to-top';
+export type {} from '../theme/component-augmentation';

package/dist/s-scroll-to-top/s-scroll-to-top.d.ts

@@ -1,19 +1,18 @@
-import { default as React } from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-/**
- * Props interface for SScrollToTop component
- */
-export interface SScrollToTopProps {
-    /** Handler called when the scroll-to-top button is clicked */
-    onClick?: () => void;
-    /** ID of the scrollable element to monitor. If not provided, monitors the window scroll */
-    scrollElementId?: string;
-    /** Scroll position (in pixels) after which the button becomes visible (default: 100) */
-    threshold?: number;
-    /** Custom icon to display instead of the default arrow */
+import { SIconButtonProps } from '../s-icon-button';
+import * as React from 'react';
+export interface SScrollToTopProps extends Omit<SIconButtonProps, 'children' | 'component' | 'variant'> {
+    /** Icon rendered inside the button. */
     icon?: React.ReactNode;
-    /** System prop for custom styling */
-    sx?: SxProps<Theme>;
+    /** Scroll target monitored by MUI's scroll trigger; defaults to the window. */
+    target?: Node | Window | null;
+    /** If true, visibility depends only on the threshold instead of scroll direction. @default true */
+    disableHysteresis?: boolean;
+    /** Scroll position after which the button becomes visible. */
+    threshold?: number;
 }
-export declare const SScrollToTop: React.MemoExoticComponent<({ onClick, scrollElementId, threshold, icon, sx }: SScrollToTopProps) => import("react/jsx-runtime").JSX.Element>;
+export type SScrollToTopOwnerState = Omit<SScrollToTopProps, 'target'> & {
+    isScrolled: boolean;
+    threshold: number;
+};
+export declare const SScrollToTop: React.NamedExoticComponent<Omit<SScrollToTopProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default SScrollToTop;

package/dist/s-scroll-to-top/s-scroll-to-top.js

@@ -1,35 +1,62 @@
-import { t as e } from "../styled-BTDmdi4c.js";
-import { t } from "../ArrowUpward-CNiENJp2.js";
-import { useIsPassedPosition as n } from "../hooks/use-is-passed-position.js";
-import { SIconButton as r } from "../s-icon-button/s-icon-button.js";
-import i from "react";
+import { reducedMotionMedia as e } from "../theme/components/action-styles.js";
+import { SIconButton as t } from "../s-icon-button/s-icon-button.js";
+import { styled as n, useThemeProps as r } from "@mui/material/styles";
+import * as i from "react";
 import { jsx as a } from "react/jsx-runtime";
+import { useMediaQuery as o, useScrollTrigger as s } from "@mui/material";
+import c from "@mui/icons-material/ArrowUpward";
 //#region lib/s-scroll-to-top/s-scroll-to-top.tsx
-var o = e(r)({
-	position: "fixed",
-	bottom: 20,
-	right: 20,
-	zIndex: 100
-}), s = i.memo(({ onClick: e, scrollElementId: r, threshold: i = 100, icon: s, sx: c }) => {
-	let l = n(r ?? window, i), u = () => {
-		e ? e() : r ? document.getElementById(r)?.scrollTo({
-			top: 0,
-			behavior: "smooth"
-		}) : window.scrollTo({
+var l = n(t, {
+	name: "SScrollToTop",
+	slot: "Root"
+})(({ theme: t, ownerState: n }) => {
+	let r = t.vars ?? t;
+	return {
+		position: "fixed",
+		bottom: t.spacing(2),
+		right: t.spacing(2),
+		zIndex: r.zIndex.fab,
+		opacity: +!!n.isScrolled,
+		visibility: n.isScrolled ? "visible" : "hidden",
+		transition: [t.transitions.create(["opacity", "visibility"]), t.transitions.create(["background-color", "color"], { duration: t.transitions.duration.shorter })].join(","),
+		[e]: { transition: "none" }
+	};
+}), u = i.forwardRef(function(e, t) {
+	let { target: n, ...i } = r({
+		props: e,
+		name: "SScrollToTop"
+	}), { "aria-label": u = "Scroll to top", disableHysteresis: d = !0, icon: f, onClick: p, sx: m, tabIndex: h = 0, threshold: g = 100, ..._ } = i, v = s({
+		disableHysteresis: d,
+		target: n,
+		threshold: g
+	}), y = o("(prefers-reduced-motion: reduce)"), b = {
+		...i,
+		"aria-label": u,
+		disableHysteresis: d,
+		isScrolled: v,
+		tabIndex: h,
+		threshold: g
+	}, x = (e) => {
+		if (p?.(e), e.defaultPrevented) return;
+		let t = n === void 0 ? typeof window > "u" ? null : window : n;
+		typeof t?.scrollTo == "function" && t.scrollTo({
 			top: 0,
-			behavior: "smooth"
+			behavior: y ? "auto" : "smooth"
 		});
 	};
-	return /* @__PURE__ */ a(o, {
-		sx: {
-			opacity: +!!l,
-			visibility: l ? "visible" : "hidden",
-			...c
-		},
-		onClick: u,
-		children: s ?? /* @__PURE__ */ a(t, {})
+	return /* @__PURE__ */ a(l, {
+		..._,
+		ref: t,
+		"aria-hidden": v ? void 0 : !0,
+		"aria-label": u,
+		onClick: x,
+		ownerState: b,
+		tabIndex: v ? h : -1,
+		variant: "overlay",
+		sx: m,
+		children: f ?? /* @__PURE__ */ a(c, {})
 	});
-});
-s.displayName = "SScrollToTop";
+}), d = i.memo(u);
+d.displayName = "SScrollToTop";
 //#endregion
-export { s as SScrollToTop, s as default };
+export { d as SScrollToTop, d as default };

package/dist/s-scroll-velocity/index.d.ts

@@ -1,6 +1,7 @@
 export { default, default as SScrollVelocity } from './s-scroll-velocity';
-export type { SScrollVelocityProps } from './s-scroll-velocity';
+export type { SScrollVelocityOwnerState, SScrollVelocityProps } from './s-scroll-velocity';
 export { ScrollVelocityContainer } from './scroll-velocity-container';
 export type { ScrollVelocityContainerProps } from './scroll-velocity-container';
 export { ScrollVelocityRow } from './scroll-velocity-row';
 export type { ScrollVelocityRowProps } from './scroll-velocity-row';
+export type {} from '../theme/component-augmentation';

package/dist/s-scroll-velocity/s-scroll-velocity.d.ts

@@ -1,18 +1,22 @@
-import { default as React } from 'react';
 import { BoxProps } from '@mui/material';
+import * as React from 'react';
 /**
  * Props for the SScrollVelocity component
  */
-export interface SScrollVelocityProps extends BoxProps {
-    /** Content to display in the scrolling marquee */
+export interface SScrollVelocityProps extends Omit<BoxProps, 'component'> {
+    /** Items to display in the scrolling marquee */
     children: React.ReactNode;
     /** Base scrolling speed (default: 5) */
     baseVelocity?: number;
     /** Scroll direction: 1 for right, -1 for left (default: 1) */
     direction?: 1 | -1;
+    /** Continuous spacing between direct children, in theme spacing units (default: 0) */
+    spacing?: number;
 }
-export declare const SScrollVelocity: {
-    ({ children, baseVelocity, direction, sx, ...props }: SScrollVelocityProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export interface SScrollVelocityOwnerState {
+    baseVelocity: number;
+    direction: 1 | -1;
+    spacing: number;
+}
+export declare const SScrollVelocity: React.ForwardRefExoticComponent<Omit<SScrollVelocityProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SScrollVelocity;

package/dist/s-scroll-velocity/s-scroll-velocity.js

@@ -1,14 +1,31 @@
 import { ScrollVelocityRow as e } from "./scroll-velocity-row.js";
-import "react";
-import { jsx as t } from "react/jsx-runtime";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { styled as r, useThemeProps as i } from "@mui/material";
 //#region lib/s-scroll-velocity/s-scroll-velocity.tsx
-var n = ({ children: n, baseVelocity: r, direction: i, sx: a, ...o }) => /* @__PURE__ */ t(e, {
-	baseVelocity: r,
-	direction: i,
-	sx: a,
-	...o,
-	children: n
+var a = r(e, {
+	name: "SScrollVelocity",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), o = t.forwardRef(function(e, t) {
+	let { baseVelocity: r = 5, children: o, direction: s = 1, spacing: c = 0, ...l } = i({
+		props: e,
+		name: "SScrollVelocity"
+	}), u = {
+		baseVelocity: r,
+		direction: s,
+		spacing: c
+	};
+	return /* @__PURE__ */ n(a, {
+		...l,
+		baseVelocity: r,
+		direction: s,
+		ownerState: u,
+		ref: t,
+		spacing: c,
+		children: o
+	});
 });
-n.displayName = "SScrollVelocity";
+o.displayName = "SScrollVelocity";
 //#endregion
-export { n as SScrollVelocity, n as default };
+export { o as SScrollVelocity, o as default };

package/dist/s-scroll-velocity/scroll-velocity-container.d.ts

@@ -5,9 +5,9 @@ export declare const ScrollVelocityContext: React.Context<MotionValue<number> |
 /**
  * Props for the ScrollVelocityContainer component
  */
-export interface ScrollVelocityContainerProps extends BoxProps {
+export interface ScrollVelocityContainerProps extends Omit<BoxProps, 'component'> {
     /** Content to render inside the container */
     readonly children: React.ReactNode;
 }
-export declare function ScrollVelocityContainer({ children, sx, ...props }: ScrollVelocityContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare const ScrollVelocityContainer: React.ForwardRefExoticComponent<Omit<ScrollVelocityContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default ScrollVelocityContainer;

package/dist/s-scroll-velocity/scroll-velocity-container.js

@@ -1,26 +1,26 @@
-import e from "react";
-import { jsx as t } from "react/jsx-runtime";
-import { Box as n } from "@mui/material";
-import { useScroll as r, useSpring as i, useTransform as a, useVelocity as o } from "framer-motion";
+import { toSxArray as e } from "../utils/sx.js";
+import t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Box as r } from "@mui/material";
+import { useScroll as i, useSpring as a, useTransform as o, useVelocity as s } from "framer-motion";
 //#region lib/s-scroll-velocity/scroll-velocity-container.tsx
-var s = e.createContext(null);
-function c({ children: e, sx: c, ...l }) {
-	let { scrollY: u } = r(), d = a(i(o(u), {
+var c = t.createContext(null), l = t.forwardRef(function({ children: t, sx: l, ...u }, d) {
+	let { scrollY: f } = i(), p = o(a(s(f), {
 		damping: 50,
 		stiffness: 400
 	}), (e) => (e < 0 ? -1 : 1) * Math.min(5, Math.abs(e) / 1e3 * 5));
-	return /* @__PURE__ */ t(s.Provider, {
-		value: d,
-		children: /* @__PURE__ */ t(n, {
-			sx: {
+	return /* @__PURE__ */ n(c.Provider, {
+		value: p,
+		children: /* @__PURE__ */ n(r, {
+			ref: d,
+			sx: [{
 				position: "relative",
-				width: "100%",
-				...c
-			},
-			...l,
-			children: e
+				width: "100%"
+			}, ...e(l)],
+			...u,
+			children: t
 		})
 	});
-}
+});
 //#endregion
-export { c as ScrollVelocityContainer, c as default, s as ScrollVelocityContext };
+export { l as ScrollVelocityContainer, l as default, c as ScrollVelocityContext };

package/dist/s-scroll-velocity/scroll-velocity-row.d.ts

@@ -11,13 +11,15 @@ export declare const wrap: (min: number, max: number, v: number) => number;
 /**
  * Props for the ScrollVelocityRow component
  */
-export interface ScrollVelocityRowProps extends BoxProps {
-    /** Content to repeat in the scrolling row */
+export interface ScrollVelocityRowProps extends Omit<BoxProps, 'component'> {
+    /** Items to display in the scrolling row */
     readonly children: React.ReactNode;
     /** Base scrolling speed (default: 5) */
     readonly baseVelocity?: number;
     /** Scroll direction: 1 for right, -1 for left (default: 1) */
     readonly direction?: 1 | -1;
+    /** Continuous spacing between direct children, in theme spacing units (default: 0) */
+    readonly spacing?: number;
 }
-export declare function ScrollVelocityRow(props: ScrollVelocityRowProps): import("react/jsx-runtime").JSX.Element;
+export declare const ScrollVelocityRow: React.ForwardRefExoticComponent<Omit<ScrollVelocityRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default ScrollVelocityRow;

package/dist/s-scroll-velocity/scroll-velocity-row.js

@@ -1,104 +1,118 @@
-import { ScrollVelocityContext as e } from "./scroll-velocity-container.js";
-import t, { useContext as n, useEffect as r, useRef as i, useState as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
-import { Box as s } from "@mui/material";
-import { motion as c, useAnimationFrame as l, useMotionValue as u, useScroll as d, useSpring as f, useTransform as p, useVelocity as m } from "framer-motion";
+import { toSxArray as e } from "../utils/sx.js";
+import { ScrollVelocityContext as t } from "./scroll-velocity-container.js";
+import n, { useContext as r, useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { Box as c, useTheme as l } from "@mui/material";
+import { useForkRef as u } from "@mui/material/utils";
+import { motion as d, useAnimationFrame as f, useMotionValue as p, useScroll as m, useSpring as h, useTransform as g, useVelocity as _ } from "framer-motion";
 //#region lib/s-scroll-velocity/scroll-velocity-row.tsx
-var h = (e, t, n) => {
+var v = (e, t, n) => {
 	let r = t - e;
 	return ((n - e) % r + r) % r + e;
 };
-function g(e) {
+function y(e) {
 	return Array.from({ length: e }, (e, t) => `scroll-velocity-copy-${t + 1}`);
 }
-function _({ children: e, baseVelocity: n = 5, direction: d = 1, sx: f, velocityFactor: m, ..._ }) {
-	let v = i(null), y = i(null), [b, x] = a(1), S = u(0), C = i(d >= 0 ? 1 : -1), w = i(d >= 0 ? 1 : -1), T = u(0), E = i(!0), D = i(!0), O = i(!1), k = t.useMemo(() => g(b), [b]);
-	r(() => {
-		let e = v.current, t = y.current;
-		if (!e || !t) return;
-		let n = () => {
-			let n = e.offsetWidth ?? 0, r = t.scrollWidth ?? 0;
-			T.set(r);
-			let i = r > 0 ? Math.max(3, Math.ceil(n / r) + 2) : 1;
-			x((e) => e === i ? e : i);
+var b = n.forwardRef(function({ children: t, baseVelocity: r = 5, direction: m = 1, spacing: h = 0, sx: _, velocityFactor: b, ...x }, S) {
+	let C = l(), w = a(null), T = u(w, S), E = a(null), [D, O] = o(1), k = p(0), A = a(m >= 0 ? -1 : 1), j = a(m >= 0 ? -1 : 1), M = p(0), N = a(!0), P = a(!0), F = a(!1), I = n.useMemo(() => y(D), [D]), L = C.spacing(h);
+	i(() => {
+		let e = m >= 0 ? -1 : 1, t = A.current;
+		A.current = e, j.current *= e / t;
+	}, [m]), i(() => {
+		let e = w.current, t = E.current, n = t?.parentElement;
+		if (!e || !t || !n) return;
+		let r = () => {
+			let r = e.offsetWidth ?? 0, i = Math.max(t.scrollWidth, t.getBoundingClientRect().width) + (Number.parseFloat(getComputedStyle(n).columnGap) || 0);
+			M.set(i);
+			let a = i > 0 ? Math.max(3, Math.ceil(r / i) + 2) : 1;
+			O((e) => e === a ? e : a);
 		};
-		n();
-		let r = new ResizeObserver(n);
-		r.observe(e), r.observe(t);
-		let i = new IntersectionObserver(([e]) => {
-			E.current = e.isIntersecting;
+		r();
+		let i = new ResizeObserver(r);
+		i.observe(e), i.observe(t), i.observe(n);
+		let a = new IntersectionObserver(([e]) => {
+			N.current = e.isIntersecting;
 		});
-		i.observe(e);
-		let a = () => {
-			D.current = document.visibilityState === "visible";
+		a.observe(e);
+		let o = () => {
+			P.current = document.visibilityState === "visible";
 		};
-		document.addEventListener("visibilitychange", a, { passive: !0 }), a();
-		let o = window.matchMedia("(prefers-reduced-motion: reduce)"), s = () => {
-			O.current = o.matches;
+		document.addEventListener("visibilitychange", o, { passive: !0 }), o();
+		let s = window.matchMedia("(prefers-reduced-motion: reduce)"), c = () => {
+			F.current = s.matches;
 		};
-		return o.addEventListener("change", s), s(), () => {
-			r.disconnect(), i.disconnect(), document.removeEventListener("visibilitychange", a), o.removeEventListener("change", s);
+		return s.addEventListener("change", c), c(), () => {
+			i.disconnect(), a.disconnect(), document.removeEventListener("visibilitychange", o), s.removeEventListener("change", c);
 		};
-	}, [e, T]);
-	let A = p([S, T], ([e, t]) => `${-h(0, Number(t) || 1, Number(e) || 0)}px`);
-	return l((e, t) => {
-		if (!E.current || !D.current) return;
-		let r = t / 1e3, i = m.get(), a = Math.min(5, Math.abs(i)), o = O.current ? 1 : 1 + a;
+	}, [
+		t,
+		L,
+		M
+	]);
+	let R = g([k, M], ([e, t]) => `${-v(0, Number(t) || 1, -(Number(e) || 0))}px`);
+	return f((e, t) => {
+		if (!N.current || !P.current || F.current) return;
+		let n = t / 1e3, i = b.get(), a = Math.min(5, Math.abs(i)), o = 1 + a;
 		if (a > .1) {
 			let e = i >= 0 ? 1 : -1;
-			w.current = C.current * e;
+			j.current = A.current * e;
 		}
-		let s = T.get() ?? 0;
+		let s = M.get() ?? 0;
 		if (s <= 0) return;
-		let c = s * n / 100, l = w.current * c * o * r;
-		S.set(S.get() + l);
-	}), /* @__PURE__ */ o(s, {
-		ref: v,
-		sx: {
+		let c = s * r / 100, l = j.current * c * o * n;
+		k.set(k.get() + l);
+	}), /* @__PURE__ */ s(c, {
+		ref: T,
+		sx: [{
 			width: "100%",
 			overflow: "hidden",
-			whiteSpace: "nowrap",
-			...f
-		},
-		..._,
-		children: /* @__PURE__ */ o(c.div, {
+			whiteSpace: "nowrap"
+		}, ...e(_)],
+		...x,
+		children: /* @__PURE__ */ s(d.div, {
 			style: {
 				display: "inline-flex",
 				alignItems: "center",
+				columnGap: L,
 				willChange: "transform",
 				userSelect: "none",
-				x: A
+				x: R
 			},
-			children: k.map((t, n) => /* @__PURE__ */ o(s, {
-				ref: n === 0 ? y : null,
+			children: I.map((e, n) => /* @__PURE__ */ s(c, {
+				ref: n === 0 ? E : null,
 				"aria-hidden": n !== 0,
+				inert: n !== 0,
 				sx: {
 					display: "inline-flex",
 					flexShrink: 0,
-					alignItems: "center"
+					alignItems: "center",
+					columnGap: L
 				},
 				component: "div",
-				children: e
-			}, t))
+				children: t
+			}, e))
 		})
 	});
-}
-function v(e) {
-	let { scrollY: t } = d(), n = p(f(m(t), {
+}), x = n.forwardRef(function(e, t) {
+	let { scrollY: n } = m(), r = g(h(_(n), {
 		damping: 50,
 		stiffness: 400
 	}), (e) => (e < 0 ? -1 : 1) * Math.min(5, Math.abs(e) / 1e3 * 5));
-	return /* @__PURE__ */ o(_, {
+	return /* @__PURE__ */ s(b, {
 		...e,
-		velocityFactor: n
-	});
-}
-function y(t) {
-	let r = n(e);
-	return r ? /* @__PURE__ */ o(_, {
-		...t,
+		ref: t,
 		velocityFactor: r
-	}) : /* @__PURE__ */ o(v, { ...t });
-}
+	});
+}), S = n.forwardRef(function(e, n) {
+	let i = r(t);
+	return i ? /* @__PURE__ */ s(b, {
+		...e,
+		ref: n,
+		velocityFactor: i
+	}) : /* @__PURE__ */ s(x, {
+		...e,
+		ref: n
+	});
+});
 //#endregion
-export { y as ScrollVelocityRow, y as default, h as wrap };
+export { S as ScrollVelocityRow, S as default, v as wrap };

package/dist/s-select/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SSelect } from './s-select';
-export type { SSelectProps } from './s-select';
+export type { SSelectComponent, SSelectOwnerState, SSelectProps } from './s-select';
+export type {} from '../theme/component-augmentation';