@solostylist/ui-kit 1.0.224 → 1.0.226

package/dist/{s-localization-provider-YCsec18c.js → s-localization-provider-DDO9UEu_.js}

@@ -1,6 +1,6 @@
 import { n as e, t } from "./chunk-C_CI6nMA.js";
-import { i as n, r, t as i } from "./LocalizationProvider-BdaUKqz3.js";
-import { t as a } from "./extends-D8CDMpIy.js";
+import { i as n, n as r, t as i } from "./warning-CFMmJJnf.js";
+import { t as a } from "./extends-DM-C9PwL.js";
 import o from "dayjs";
 import "react";
 import { jsx as s } from "react/jsx-runtime";
@@ -398,7 +398,7 @@ var S = class {
 	};
 	getLocaleFormats = () => {
 		let e = o.Ls, t = e[this.locale || "en"];
-		return t === void 0 && (process.env.NODE_ENV !== "production" && r([
+		return t === void 0 && (process.env.NODE_ENV !== "production" && i([
 			"MUI X: Your locale has not been found.",
 			"Either the locale key is not a supported one. Locales supported by dayjs are available here: https://github.com/iamkun/dayjs/tree/dev/src/locale.",
 			"Or you forget to import the locale from 'dayjs/locale/{localeUsed}'",
@@ -510,7 +510,7 @@ var S = class {
 		for (; this.isBefore(a, r);) i.push(a), a = this.addYears(a, 1);
 		return i;
 	};
-}, C = ({ children: e }) => /* @__PURE__ */ s(i, {
+}, C = ({ children: e }) => /* @__PURE__ */ s(r, {
 	dateAdapter: S,
 	children: e
 });

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

@@ -1,5 +1,5 @@
 import { t as e } from "../Box-BlmynALm.js";
-import { t } from "../Typography-EsraKPZO.js";
+import { t } from "../Typography-DqtTB0ZJ.js";
 import "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region lib/s-nav-item/s-nav-item.tsx

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

@@ -1,9 +1,9 @@
 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 { t as n } from "../Typography-DqtTB0ZJ.js";
+import { t as r } from "../ExpandMore-DIsT5FOp.js";
 import { SNavItem as i } from "../s-nav-item/s-nav-item.js";
-import { t as a } from "../Collapse-CnXmaDqT.js";
+import { t as a } from "../Collapse-Dtji6IrM.js";
 import * as o from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region lib/s-nav-items/s-nav-items.tsx
@@ -93,10 +93,7 @@ function f({ item: t, pathname: l, depth: u, component: f }) {
 					children: t.icon(y)
 				}) : null, /* @__PURE__ */ s(n, {
 					component: "span",
-					sx: {
-						fontWeight: 500,
-						fontSize: "0.875rem"
-					},
+					variant: "body1",
 					children: t.title
 				})]
 			}), /* @__PURE__ */ s(e, {

package/dist/s-pagination/s-pagination.js

@@ -1,15 +1,15 @@
 import { SSkeleton as e } from "../s-skeleton/s-skeleton.js";
 import "react";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Box as i, Pagination as a, Stack as o, useMediaQuery as s, useTheme as c } from "@mui/material";
+import { Pagination as i, Stack as a, useMediaQuery as o, useTheme as s } from "@mui/material";
 //#region lib/s-pagination/s-pagination.tsx
-var l = ({ style: t }) => /* @__PURE__ */ r(o, {
+var c = ({ style: t }) => /* @__PURE__ */ r(a, {
 	direction: "row",
 	style: t,
 	sx: {
+		display: "inline-flex",
 		flexWrap: "wrap",
-		gap: 1,
-		justifyContent: "center"
+		gap: 1
 	},
 	children: [
 		/* @__PURE__ */ n(e, { component: "icon-button" }),
@@ -19,17 +19,14 @@ var l = ({ style: t }) => /* @__PURE__ */ r(o, {
 		}),
 		/* @__PURE__ */ n(e, { component: "icon-button" })
 	]
-}), u = ({ loading: e, count: r = 0, ...o }) => {
-	let u = s(c().breakpoints.down("sm"));
-	return r === 0 ? /* @__PURE__ */ n(t, {}) : e ? /* @__PURE__ */ n(l, { style: o.style }) : /* @__PURE__ */ n(i, {
-		sx: { width: "100%" },
-		children: /* @__PURE__ */ n(a, {
-			size: u ? "small" : "medium",
-			count: r,
-			...o
-		})
+}), l = ({ loading: e, count: r = 0, ...a }) => {
+	let l = o(s().breakpoints.down("sm"));
+	return r === 0 ? /* @__PURE__ */ n(t, {}) : e ? /* @__PURE__ */ n(c, { style: a.style }) : /* @__PURE__ */ n(i, {
+		size: l ? "small" : "medium",
+		count: r,
+		...a
 	});
 };
-u.displayName = "SPagination";
+l.displayName = "SPagination";
 //#endregion
-export { u as SPagination, u as default };
+export { l as SPagination, l 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-f0OI1oqM.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-f0OI1oqM.js";
 export { e as SReview, e as default };

package/dist/{s-review-D4FBfBPF.js → s-review-f0OI1oqM.js}

@@ -1,6 +1,6 @@
 import { i as e } from "./utils-B5Rl6Zwv.js";
-import { t } from "./createSvgIcon-BdNZIlKS.js";
-import { n } from "./s-image-modal-DA3DBNbv.js";
+import { t } from "./createSvgIcon-HW-tbFcL.js";
+import { t as n } from "./s-image-modal-hhRD4727.js";
 import r from "./s-lazy-image/s-lazy-image.js";
 import { SSkeleton as i } from "./s-skeleton/s-skeleton.js";
 import { SAvatar as a } from "./s-avatar/s-avatar.js";
@@ -116,34 +116,25 @@ var _ = t(/* @__PURE__ */ u("path", { d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02
 				}), /* @__PURE__ */ d(f, {
 					sx: { flex: 1 },
 					children: [
-						/* @__PURE__ */ d(h, {
-							direction: "row",
-							spacing: 2,
-							sx: {
-								alignItems: "center",
-								mb: 1
-							},
-							children: [/* @__PURE__ */ u(g, { children: y }), /* @__PURE__ */ u("div", { children: /* @__PURE__ */ u(g, {
-								variant: "caption",
-								children: $
-							}) })]
-						}),
-						/* @__PURE__ */ u(f, {
-							sx: { mb: 1 },
-							children: /* @__PURE__ */ u(o, {
-								value: x,
-								max: j,
-								readOnly: M
-							})
+						/* @__PURE__ */ u(g, {
+							variant: "subtitle1",
+							children: y
 						}),
+						/* @__PURE__ */ u(f, { children: /* @__PURE__ */ u(o, {
+							value: x,
+							max: j,
+							readOnly: M
+						}) }),
 						/* @__PURE__ */ u(g, {
-							variant: "body2",
-							sx: {
-								mb: 2,
-								lineHeight: 1.6
-							},
+							variant: "body1",
+							sx: { lineHeight: 1.6 },
 							children: S
 						}),
+						/* @__PURE__ */ u(f, { children: /* @__PURE__ */ u(g, {
+							variant: "caption",
+							sx: { mb: 2 },
+							children: $
+						}) }),
 						w && w.length > 0 && /* @__PURE__ */ u(h, {
 							direction: "row",
 							spacing: 1,
@@ -179,7 +170,7 @@ var _ = t(/* @__PURE__ */ u("path", { d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02
 							},
 							children: [
 								/* @__PURE__ */ u(g, {
-									variant: "caption",
+									variant: "body2",
 									sx: { mr: 2 },
 									children: "Was this review helpful?"
 								}),

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

@@ -8,7 +8,7 @@ function a(e) {
 	return t.isValidElement(e) && e.key != null ? e.key : typeof e == "string" || typeof e == "number" ? e : null;
 }
 function o(e, t, n, r) {
-	return e ? t ? "visible" : r : n;
+	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({

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

@@ -1,5 +1,5 @@
 import { t as e } from "../styled-BTDmdi4c.js";
-import { t } from "../ArrowUpward-BMKLosZj.js";
+import { t } from "../ArrowUpward-DONVUi9Q.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";

package/dist/s-select/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-select-b8CHbeCf.js";
+import { t as e } from "../s-select-BqWS_5Bs.js";
 export { e as SSelect, e as default };

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

@@ -32,6 +32,8 @@ export type SSelectProps<T extends BaseOption = string> = Omit<SelectProps, 'err
     searchable?: boolean;
     /** Placeholder text for the search input */
     searchPlaceholder?: string;
+    /** Message shown when a search yields no matching options */
+    noResultsText?: string;
     /** Custom render function for options */
     renderOption?: (option: T) => ReactNode;
 };

package/dist/s-select/s-select.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-select-b8CHbeCf.js";
+import { t as e } from "../s-select-BqWS_5Bs.js";
 export { e as SSelect, e as default };

package/dist/{s-select-b8CHbeCf.js → s-select-BqWS_5Bs.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./createSvgIcon-BdNZIlKS.js";
+import { t as e } from "./createSvgIcon-HW-tbFcL.js";
 import { SForm as t } from "./s-form/s-form.js";
 import { forwardRef as n, useState as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
@@ -75,10 +75,10 @@ function w(e) {
 		} } }
 	};
 }
-var T = n(({ options: e = [], getOptionKey: n, optionLabel: p = "name", optionValue: g = "id", placeholder: _, label: x = "", error: S, required: T = !1, simple: E = !1, htmlFor: D, searchable: O = !1, searchPlaceholder: k = "", renderOption: A, ...j }, M) => {
-	let N = j.value !== void 0, [P, F] = r(j.multiple ? [] : null), I = N ? j.value : P, [L, R] = r(""), [z, B] = r(!1), V = (e) => m(e, p), H = (e) => h(e, g), U = b(e, O, L, V), W = () => {
-		O && (B(!1), R(""));
-	}, G = (t) => j.multiple ? y(t, e, _, V, H) : v(t, E, e, _, V, H), K = () => O ? U.length > 0 ? C(U, H, V, A, n) : L ? /* @__PURE__ */ i(l, {
+var T = n(({ options: e = [], getOptionKey: n, optionLabel: p = "name", optionValue: g = "id", placeholder: _, label: x = "", error: S, required: T = !1, simple: E = !1, htmlFor: D, searchable: O = !1, searchPlaceholder: k = "", noResultsText: A = "No results found", renderOption: j, ...M }, N) => {
+	let P = M.value !== void 0, [F, I] = r(M.multiple ? [] : null), L = P ? M.value : F, [R, z] = r(""), [B, V] = r(!1), H = (e) => m(e, p), U = (e) => h(e, g), W = b(e, O, R, H), G = () => {
+		O && (V(!1), z(""));
+	}, K = (t) => M.multiple ? y(t, e, _, H, U) : v(t, E, e, _, H, U), q = () => O ? W.length > 0 ? C(W, U, H, j, n) : R ? /* @__PURE__ */ i(l, {
 		disabled: !0,
 		children: /* @__PURE__ */ i(o, {
 			sx: {
@@ -86,9 +86,9 @@ var T = n(({ options: e = [], getOptionKey: n, optionLabel: p = "name", optionVa
 				textAlign: "center",
 				width: "100%"
 			},
-			children: "No results found"
+			children: A
 		})
-	}) : C(e, H, V, A, n) : C(e, H, V, A, n), q = w(O);
+	}) : C(e, U, H, j, n) : C(e, U, H, j, n), J = w(O);
 	return /* @__PURE__ */ i(t, {
 		error: S,
 		label: x,
@@ -99,19 +99,19 @@ var T = n(({ options: e = [], getOptionKey: n, optionLabel: p = "name", optionVa
 			displayEmpty: !0,
 			fullWidth: !0,
 			defaultValue: "",
-			ref: M,
-			open: O ? z : void 0,
-			onOpen: O ? () => B(!0) : void 0,
-			onClose: O ? W : void 0,
-			MenuProps: q,
-			renderValue: G,
-			...j,
-			value: e.length ? I ?? "" : "",
+			ref: N,
+			open: O ? B : void 0,
+			onOpen: O ? () => V(!0) : void 0,
+			onClose: O ? G : void 0,
+			MenuProps: J,
+			renderValue: K,
+			...M,
+			value: e.length ? L ?? "" : "",
 			onChange: (e, t) => {
-				if (j.onChange) j.onChange(e, t);
-				else if (!N) {
+				if (M.onChange) M.onChange(e, t);
+				else if (!P) {
 					let t = e.target.value;
-					F(t);
+					I(t);
 				}
 			},
 			children: [O && /* @__PURE__ */ i(c, {
@@ -127,8 +127,8 @@ var T = n(({ options: e = [], getOptionKey: n, optionLabel: p = "name", optionVa
 					fullWidth: !0,
 					autoFocus: !0,
 					placeholder: k,
-					value: L,
-					onChange: (e) => R(e.target.value),
+					value: R,
+					onChange: (e) => z(e.target.value),
 					onKeyDown: (e) => {
 						e.key !== "Escape" && e.stopPropagation();
 					},
@@ -140,7 +140,7 @@ var T = n(({ options: e = [], getOptionKey: n, optionLabel: p = "name", optionVa
 						children: /* @__PURE__ */ i(f, {})
 					}) } }
 				})
-			}), K()]
+			}), q()]
 		})
 	});
 });

package/dist/s-select-list/s-select-list.js

@@ -6,7 +6,7 @@ var s = o(n, { shouldForwardProp: (e) => e !== "selected" })(({ theme: e, select
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "space-between",
-	borderRadius: 8,
+	borderRadius: e.radius.md,
 	padding: e.spacing(1),
 	paddingLeft: e.spacing(2),
 	paddingRight: e.spacing(2),
@@ -20,16 +20,7 @@ var s = o(n, { shouldForwardProp: (e) => e !== "selected" })(({ theme: e, select
 		return /* @__PURE__ */ t(n, { children: [/* @__PURE__ */ t(s, {
 			selected: o,
 			onClick: () => l(a.id),
-			children: [/* @__PURE__ */ e(n, {
-				sx: {
-					display: "flex",
-					alignItems: "center",
-					gap: 2,
-					flex: 1,
-					borderRadius: 8
-				},
-				children: u(a, o)
-			}), f && /* @__PURE__ */ e(i, { checked: o })]
+			children: [u(a, o), f && /* @__PURE__ */ e(i, { checked: o })]
 		}), p && /* @__PURE__ */ e(r, {
 			in: o,
 			children: /* @__PURE__ */ e(n, {

package/dist/s-spotlight-cursor/s-spotlight-cursor.js

@@ -9,24 +9,32 @@ var i = (n) => {
 		if (!e) return;
 		let t = e.getContext("2d");
 		if (!t) return;
-		let i, a = -1e3, o = -1e3, s = () => {
-			e.width = window.innerWidth, e.height = window.innerHeight;
-		}, c = (e) => {
-			a = e.clientX, o = e.clientY;
-		}, l = () => {
-			a = -1e3, o = -1e3;
-		}, u = (e) => {
+		let i, a = 0, o = 0, s = -1e3, c = -1e3, l = e.parentElement, u = l ?? e, d = l?.style.position, f = () => {
+			let n = u.getBoundingClientRect(), r = window.devicePixelRatio || 1;
+			a = n.width, o = n.height, e.width = Math.max(1, Math.round(a * r)), e.height = Math.max(1, Math.round(o * r)), t.setTransform(r, 0, 0, r, 0, 0);
+		}, p = (t) => {
+			let n = e.getBoundingClientRect(), r = t.clientX - n.left, i = t.clientY - n.top;
+			if (r < 0 || r > n.width || i < 0 || i > n.height) {
+				s = -1e3, c = -1e3;
+				return;
+			}
+			s = r, c = i;
+		}, m = () => {
+			s = -1e3, c = -1e3;
+		}, h = (e) => {
 			let t = parseInt(e.slice(1), 16);
 			return `${t >> 16 & 255},${t >> 8 & 255},${t & 255}`;
-		}, d = () => {
-			if (t.clearRect(0, 0, e.width, e.height), a !== -1e3 && o !== -1e3) {
-				let r = t.createRadialGradient(a, o, 0, a, o, n.radius || 200), i = u(n.color);
-				r.addColorStop(0, `rgba(${i}, ${n.brightness})`), r.addColorStop(1, "rgba(0,0,0,0)"), t.fillStyle = r, t.fillRect(0, 0, e.width, e.height);
+		}, g = () => {
+			if (t.clearRect(0, 0, a, o), s !== -1e3 && c !== -1e3) {
+				let e = t.createRadialGradient(s, c, 0, s, c, n.radius || 200), r = h(n.color);
+				e.addColorStop(0, `rgba(${r}, ${n.brightness})`), e.addColorStop(1, "rgba(0,0,0,0)"), t.fillStyle = e, t.fillRect(0, 0, a, o);
 			}
-			i = requestAnimationFrame(d);
+			i = requestAnimationFrame(g);
 		};
-		return s(), window.addEventListener("resize", s), window.addEventListener("mousemove", c), window.addEventListener("mouseleave", l), i = requestAnimationFrame(d), () => {
-			window.removeEventListener("resize", s), window.removeEventListener("mousemove", c), window.removeEventListener("mouseleave", l), cancelAnimationFrame(i);
+		l && window.getComputedStyle(l).position === "static" && (l.style.position = "relative"), f();
+		let _ = new ResizeObserver(f);
+		return _.observe(u), window.addEventListener("resize", f), u.addEventListener("mousemove", p), u.addEventListener("mouseleave", m), i = requestAnimationFrame(g), () => {
+			_.disconnect(), window.removeEventListener("resize", f), u.removeEventListener("mousemove", p), u.removeEventListener("mouseleave", m), l && d !== void 0 && (l.style.position = d), cancelAnimationFrame(i);
 		};
 	}, [
 		n.radius,
@@ -43,7 +51,7 @@ var i = (n) => {
 	ref: i(e),
 	className: t,
 	sx: {
-		position: "fixed",
+		position: "absolute",
 		top: 0,
 		left: 0,
 		pointerEvents: "none",

package/dist/s-stripe/s-stripe-cvc.d.ts

@@ -1,7 +1,3 @@
-import { CardCvcElement } from '@stripe/react-stripe-js';
 import { StripeTextFieldProps } from './s-stripe';
-export declare function SStripeCVC(props: Readonly<StripeTextFieldProps<typeof CardCvcElement>>): import("react/jsx-runtime").JSX.Element;
-export declare namespace SStripeCVC {
-    var displayName: string;
-}
+export declare const SStripeCVC: import('react').ForwardRefExoticComponent<Omit<StripeTextFieldProps<import('@stripe/react-stripe-js').CardCvcElementComponent>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default SStripeCVC;

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

@@ -1,14 +1,14 @@
 import { StripeTextField as e } from "./s-stripe.js";
-import { jsx as t } from "react/jsx-runtime";
-import { CardCvcElement as n } from "@stripe/react-stripe-js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { CardCvcElement as r } from "@stripe/react-stripe-js";
 //#region lib/s-stripe/s-stripe-cvc.tsx
-function r(r) {
-	return /* @__PURE__ */ t(e, {
-		label: "CVC",
-		stripeElement: n,
-		...r
-	});
-}
-r.displayName = "SStripeCVC";
+var i = t((t, i) => /* @__PURE__ */ n(e, {
+	ref: i,
+	label: "CVC",
+	stripeElement: r,
+	...t
+}));
+i.displayName = "SStripeCVC";
 //#endregion
-export { r as SStripeCVC, r as default };
+export { i as SStripeCVC, i as default };

package/dist/s-stripe/s-stripe-expiry.d.ts

@@ -1,7 +1,3 @@
-import { CardExpiryElement } from '@stripe/react-stripe-js';
 import { StripeTextFieldProps } from './s-stripe';
-export declare function SStripeExpiry(props: Readonly<StripeTextFieldProps<typeof CardExpiryElement>>): import("react/jsx-runtime").JSX.Element;
-export declare namespace SStripeExpiry {
-    var displayName: string;
-}
+export declare const SStripeExpiry: import('react').ForwardRefExoticComponent<Omit<StripeTextFieldProps<import('@stripe/react-stripe-js').CardExpiryElementComponent>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default SStripeExpiry;

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

@@ -1,14 +1,14 @@
 import { StripeTextField as e } from "./s-stripe.js";
-import { jsx as t } from "react/jsx-runtime";
-import { CardExpiryElement as n } from "@stripe/react-stripe-js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { CardExpiryElement as r } from "@stripe/react-stripe-js";
 //#region lib/s-stripe/s-stripe-expiry.tsx
-function r(r) {
-	return /* @__PURE__ */ t(e, {
-		label: "Expiration",
-		stripeElement: n,
-		...r
-	});
-}
-r.displayName = "SStripeExpiry";
+var i = t((t, i) => /* @__PURE__ */ n(e, {
+	ref: i,
+	label: "Expiration",
+	stripeElement: r,
+	...t
+}));
+i.displayName = "SStripeExpiry";
 //#endregion
-export { r as SStripeExpiry, r as default };
+export { i as SStripeExpiry, i as default };

package/dist/s-stripe/s-stripe-number.d.ts

@@ -1,7 +1,3 @@
-import { CardNumberElement } from '@stripe/react-stripe-js';
 import { StripeTextFieldProps } from './s-stripe';
-export declare function SStripeNumber(props: Readonly<StripeTextFieldProps<typeof CardNumberElement>>): import("react/jsx-runtime").JSX.Element;
-export declare namespace SStripeNumber {
-    var displayName: string;
-}
+export declare const SStripeNumber: import('react').ForwardRefExoticComponent<Omit<StripeTextFieldProps<import('@stripe/react-stripe-js').CardNumberElementComponent>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default SStripeNumber;

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

@@ -1,14 +1,14 @@
 import { StripeTextField as e } from "./s-stripe.js";
-import { jsx as t } from "react/jsx-runtime";
-import { CardNumberElement as n } from "@stripe/react-stripe-js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { CardNumberElement as r } from "@stripe/react-stripe-js";
 //#region lib/s-stripe/s-stripe-number.tsx
-function r(r) {
-	return /* @__PURE__ */ t(e, {
-		label: "Card Number",
-		stripeElement: n,
-		...r
-	});
-}
-r.displayName = "SStripeNumber";
+var i = t((t, i) => /* @__PURE__ */ n(e, {
+	ref: i,
+	label: "Card Number",
+	stripeElement: r,
+	...t
+}));
+i.displayName = "SStripeNumber";
 //#endregion
-export { r as SStripeNumber, r as default };
+export { i as SStripeNumber, i as default };

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { AuBankAccountElement, CardCvcElement, CardExpiryElement, CardNumberElement, IbanElement } from '@stripe/react-stripe-js';
 import { STextFieldProps } from '../s-text-field';
 /**
@@ -19,8 +20,14 @@ export interface StripeTextFieldProps<T extends StripeElement> extends Omit<STex
     /** The Stripe Element component to render */
     stripeElement?: T;
 }
-export declare const StripeTextField: {
-    <T extends StripeElement>(props: StripeTextFieldProps<T>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Type definition for StripeTextField component with generic Stripe Element support
+ */
+export interface StripeTextFieldComponent {
+    <T extends StripeElement>(props: StripeTextFieldProps<T> & {
+        ref?: React.ForwardedRef<HTMLDivElement>;
+    }): React.JSX.Element;
+    displayName?: string;
+}
+export declare const StripeTextField: StripeTextFieldComponent;
 export default StripeTextField;

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

@@ -1,31 +1,33 @@
-import { t as e } from "../s-text-field-Ck5QMhYI.js";
+import { t as e } from "../s-text-field-DLSDoq7u.js";
 import t from "./stripe-input.js";
-import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region lib/s-stripe/s-stripe.tsx
-var r = (r) => {
-	let { helperText: i, slotProps: a, inputProps: o, error: s, labelErrorMessage: c, stripeElement: l, onChange: u, ...d } = r, f = typeof a?.input == "object" ? a.input.inputProps : void 0;
-	return /* @__PURE__ */ n(e, {
+var i = n((n, i) => {
+	let { helperText: a, slotProps: o, inputProps: s, error: c, labelErrorMessage: l, stripeElement: u, onChange: d, ...f } = n, p = typeof o?.input == "object" ? o.input.inputProps : void 0;
+	return /* @__PURE__ */ r(e, {
+		ref: i,
 		slotProps: {
 			inputLabel: {
-				...a?.inputLabel,
+				...o?.inputLabel,
 				shrink: !0
 			},
 			input: {
-				...a?.input,
+				...o?.input,
 				inputProps: {
-					...o,
-					...f,
-					component: l
+					...s,
+					...p,
+					component: u
 				},
 				inputComponent: t
 			}
 		},
-		error: s,
-		helperText: s ? c : i,
-		onChange: u,
-		...d
+		error: c,
+		helperText: c ? l : a,
+		onChange: d,
+		...f
 	});
-};
-r.displayName = "StripeTextField";
+});
+i.displayName = "StripeTextField";
 //#endregion
-export { r as StripeTextField, r as default };
+export { i as StripeTextField, i as default };