@solostylist/ui-kit 1.0.196 → 1.0.198

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

@@ -3,6 +3,7 @@ import { SxProps } from '@mui/material';
 /**
  * Props interface for SReview component
  */
+export type HelpfulVote = 'yes' | 'no' | null;
 export interface SReviewProps {
     /** Unique identifier for the review (default: Date.now()) */
     id?: string | number;
@@ -19,13 +20,13 @@ export interface SReviewProps {
     /** Array of image URLs to display with the review */
     images?: string[];
     /** Current user vote status for this review (default: null) */
-    userHelpfulVote?: 'yes' | 'no' | null;
+    userHelpfulVote?: HelpfulVote;
     /** Number of "Yes" votes for helpfulness (default: 0) */
     helpfulYes?: number;
     /** Number of "No" votes for helpfulness (default: 0) */
     helpfulNo?: number;
     /** Callback when user votes on helpfulness (returns null when un-voting) */
-    onHelpfulVote?: (reviewId: string | number, vote: 'yes' | 'no' | null) => void;
+    onHelpfulVote?: (reviewId: string | number, vote: HelpfulVote) => void;
     /** Whether to show the helpful voting section (default: true) */
     showHelpfulSection?: boolean;
     /** Size of the avatar in pixels (default: 48) */

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

@@ -1,13 +1,13 @@
 import { j as e } from "../jsx-runtime-tc70JA_2.js";
 import { useId as K, useState as h, useEffect as P } from "react";
-import { Box as o, Stack as a, Divider as M, Typography as r, IconButton as S } from "@mui/material";
+import { Box as a, Stack as o, Divider as M, Typography as r, IconButton as S } from "@mui/material";
 import { SAvatar as Q } from "../s-avatar/s-avatar.js";
 import { SImageModal as X } from "../s-image-modal/s-image-modal.js";
 import Z from "../s-lazy-image/s-lazy-image.js";
 import { SRating as _ } from "../s-rating/s-rating.js";
 import { SSkeleton as n } from "../s-skeleton/s-skeleton.js";
-import { c as T } from "../createSvgIcon-DTNHY3_v.js";
-import { g as ee } from "../utils-DJIrqgo5.js";
+import { c as T } from "../createSvgIcon-BkbeLOhM.js";
+import { g as ee } from "../utils-CHdpkEZx.js";
 const te = T(/* @__PURE__ */ e.jsx("path", {
   d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2m4 0v12h4V3z"
 }), "ThumbDown"), se = T(/* @__PURE__ */ e.jsx("path", {
@@ -33,15 +33,15 @@ const te = T(/* @__PURE__ */ e.jsx("path", {
   sx: y = {}
 }) => {
   const W = K(), I = k ?? W, [B, g] = h(H), [N, j] = h(V), [l, f] = h(d), [Y, b] = h(!1), [A, u] = h(null), C = (s) => {
-    let i = s;
-    l === s ? (s === "yes" ? g((t) => Math.max(0, t - 1)) : j((t) => Math.max(0, t - 1)), f(null), i = null) : (l === "yes" ? g((t) => Math.max(0, t - 1)) : l === "no" && j((t) => Math.max(0, t - 1)), s === "yes" ? g((t) => t + 1) : j((t) => t + 1), f(s), i = s), v && v(I, i);
+    let i = null;
+    l === s ? (s === "yes" ? g((t) => Math.max(0, t - 1)) : j((t) => Math.max(0, t - 1)), f(null)) : (l === "yes" ? g((t) => Math.max(0, t - 1)) : l === "no" && j((t) => Math.max(0, t - 1)), s === "yes" ? g((t) => t + 1) : j((t) => t + 1), f(s), i = s), v && v(I, i);
   }, c = x?.map((s, i) => ({
     id: `review-${I}-image-${i}`,
     type: "image",
     url: s,
     title: `Review image ${i + 1}`,
     desc: `Image ${i + 1} from ${m}'s review`
-  })) || [], F = (s) => {
+  })) ?? [], F = (s) => {
     const i = c[s];
     i && (u(i), b(!0));
   }, q = () => {
@@ -51,17 +51,17 @@ const te = T(/* @__PURE__ */ e.jsx("path", {
   }, J = ee(z);
   return P(() => {
     f(d);
-  }, [d]), U ? /* @__PURE__ */ e.jsxs(o, { sx: { py: 2, ...y }, children: [
-    /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+  }, [d]), U ? /* @__PURE__ */ e.jsxs(a, { sx: { py: 2, ...y }, children: [
+    /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
       /* @__PURE__ */ e.jsx(n, { component: "rounded-avatar", width: p, height: p }),
-      /* @__PURE__ */ e.jsxs(o, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ e.jsxs(a, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+      /* @__PURE__ */ e.jsxs(a, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsxs(o, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
           /* @__PURE__ */ e.jsx(n, { variant: "text", width: 120, height: 20 }),
           /* @__PURE__ */ e.jsx(n, { variant: "text", width: 80, height: 16 })
         ] }),
-        /* @__PURE__ */ e.jsx(o, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(n, { variant: "text", width: 100, height: 20 }) }),
+        /* @__PURE__ */ e.jsx(a, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(n, { variant: "text", width: 100, height: 20 }) }),
         /* @__PURE__ */ e.jsx(n, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
-        /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
           /* @__PURE__ */ e.jsx(n, { variant: "text", width: 140, height: 16, sx: { mr: 2 } }),
           /* @__PURE__ */ e.jsx(n, { component: "icon-button" }),
           /* @__PURE__ */ e.jsx(n, { variant: "text", width: 20, height: 16 }),
@@ -71,17 +71,17 @@ const te = T(/* @__PURE__ */ e.jsx("path", {
       ] })
     ] }),
     w && /* @__PURE__ */ e.jsx(M, { sx: { mt: 2 } })
-  ] }) : /* @__PURE__ */ e.jsxs(o, { sx: { py: 2, ...y }, children: [
-    /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+  ] }) : /* @__PURE__ */ e.jsxs(a, { sx: { py: 2, ...y }, children: [
+    /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
       /* @__PURE__ */ e.jsx(Q, { avatar: R, name: m, size: p }),
-      /* @__PURE__ */ e.jsxs(o, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ e.jsxs(a, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+      /* @__PURE__ */ e.jsxs(a, { sx: { flex: 1 }, children: [
+        /* @__PURE__ */ e.jsxs(o, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
           /* @__PURE__ */ e.jsx(r, { variant: "subtitle2", fontWeight: "600", children: m }),
           /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(r, { variant: "caption", children: J }) })
         ] }),
-        /* @__PURE__ */ e.jsx(o, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(_, { value: L, max: E, readOnly: O }) }),
+        /* @__PURE__ */ e.jsx(a, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(_, { value: L, max: E, readOnly: O }) }),
         /* @__PURE__ */ e.jsx(r, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: $ }),
-        x && x.length > 0 && /* @__PURE__ */ e.jsx(a, { direction: "row", spacing: 1, sx: { mb: 2, flexWrap: "wrap", gap: 1 }, children: x.map((s, i) => /* @__PURE__ */ e.jsx(
+        x && x.length > 0 && /* @__PURE__ */ e.jsx(o, { direction: "row", spacing: 1, sx: { mb: 2, flexWrap: "wrap", gap: 1 }, children: x.map((s, i) => /* @__PURE__ */ e.jsx(
           Z,
           {
             src: s,
@@ -103,7 +103,7 @@ const te = T(/* @__PURE__ */ e.jsx("path", {
           },
           i
         )) }),
-        D && /* @__PURE__ */ e.jsxs(a, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
+        D && /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
           /* @__PURE__ */ e.jsx(r, { variant: "caption", sx: { mr: 2 }, children: "Was this review helpful?" }),
           /* @__PURE__ */ e.jsx(
             S,

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

@@ -1,9 +1,9 @@
 import { j as r } from "../jsx-runtime-tc70JA_2.js";
 import l from "react";
-import { A as m } from "../ArrowUpward-JWPHrR6I.js";
+import { A as m } from "../ArrowUpward-D8eqD-si.js";
 import { useIsPassedPosition as d } from "../hooks/use-is-passed-position.js";
-import { s as c } from "../styled-BR6UL29H.js";
-import { B as p } from "../Box-p3bpOtdn.js";
+import { s as c } from "../styled-8Y5KoVix.js";
+import { B as p } from "../Box-BkXoTbe8.js";
 const f = c(p)({
   position: "fixed",
   bottom: 20,
@@ -22,7 +22,7 @@ const f = c(p)({
     transform: "scale(1.1)"
   }
 }), h = l.memo(({ onClick: e, scrollElementId: o, threshold: s = 100, icon: i, sx: n }) => {
-  const t = d(o || window, s), a = () => {
+  const t = d(o ?? window, s), a = () => {
     e ? e() : o ? document.getElementById(o)?.scrollTo({ top: 0, behavior: "smooth" }) : window.scrollTo({ top: 0, behavior: "smooth" });
   };
   return /* @__PURE__ */ r.jsx(
@@ -34,7 +34,7 @@ const f = c(p)({
         ...n
       },
       onClick: a,
-      children: i || /* @__PURE__ */ r.jsx(m, {})
+      children: i ?? /* @__PURE__ */ r.jsx(m, {})
     }
   );
 });

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

@@ -10,7 +10,7 @@ export declare const ScrollVelocityContext: React.Context<MotionValue<number> |
  */
 export interface ScrollVelocityContainerProps extends BoxProps {
     /** Content to render inside the container */
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
 }
 /**
  * Container component that provides scroll velocity context to child rows.

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

@@ -13,11 +13,11 @@ export declare const wrap: (min: number, max: number, v: number) => number;
  */
 export interface ScrollVelocityRowProps extends BoxProps {
     /** Content to repeat in the scrolling row */
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
     /** Base scrolling speed (default: 5) */
-    baseVelocity?: number;
+    readonly baseVelocity?: number;
     /** Scroll direction: 1 for right, -1 for left (default: 1) */
-    direction?: 1 | -1;
+    readonly direction?: 1 | -1;
 }
 /**
  * A horizontal scrolling row component that responds to page scroll velocity.

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

@@ -20,7 +20,7 @@ function L({
     const o = x.current, t = v.current;
     if (!o || !t) return;
     const l = () => {
-      const h = o.offsetWidth || 0, p = t.scrollWidth || 0;
+      const h = o.offsetWidth ?? 0, p = t.scrollWidth ?? 0;
       y.set(p);
       const j = p > 0 ? Math.max(3, Math.ceil(h / p) + 2) : 1;
       z((C) => C === j ? C : j);
@@ -56,7 +56,7 @@ function L({
       const p = r >= 0 ? 1 : -1;
       R.current = D.current * p;
     }
-    const a = y.get() || 0;
+    const a = y.get() ?? 0;
     if (a <= 0) return;
     const d = a * n / 100, h = R.current * d * m * l;
     w.set(w.get() + h);

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { SelectProps } from '@mui/material';
 /** Base type constraint for select options - can be primitives or objects */
 type BaseOption = string | number | Record<string, unknown>;
@@ -29,6 +30,8 @@ export type SSelectProps<T extends BaseOption = string> = Omit<SelectProps, 'err
     searchable?: boolean;
     /** Placeholder text for the search input */
     searchPlaceholder?: string;
+    /** Custom render function for options */
+    renderOption?: (option: T) => ReactNode;
 };
 /**
  * A flexible select component that handles both primitive and object options with form integration.

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

@@ -1,38 +1,39 @@
-import { j as t } from "../jsx-runtime-tc70JA_2.js";
-import { forwardRef as A, useState as f } from "react";
-import { c as E } from "../createSvgIcon-DTNHY3_v.js";
-import { Select as F, ListSubheader as M, TextField as T, InputAdornment as B, MenuItem as c, Box as p } from "@mui/material";
-import { SForm as D } from "../s-form/s-form.js";
-const K = E(/* @__PURE__ */ t.jsx("path", {
+import { j as r } from "../jsx-runtime-tc70JA_2.js";
+import { forwardRef as E, useState as c } from "react";
+import { c as F } from "../createSvgIcon-BkbeLOhM.js";
+import { Select as T, ListSubheader as B, TextField as D, InputAdornment as K, MenuItem as j, Box as f } from "@mui/material";
+import { SForm as N } from "../s-form/s-form.js";
+const R = F(/* @__PURE__ */ r.jsx("path", {
   d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
-}), "Search"), N = A(
+}), "Search"), W = E(
   ({
-    options: r = [],
-    optionLabel: m = "name",
-    optionValue: y = "id",
-    placeholder: x,
-    label: C = "",
-    error: b,
-    required: I = !1,
-    simple: w = !1,
-    htmlFor: g,
+    options: o = [],
+    optionLabel: y = "name",
+    optionValue: C = "id",
+    placeholder: p,
+    label: I = "",
+    error: w,
+    required: P = !1,
+    simple: V = !1,
+    htmlFor: x,
     searchable: l = !1,
-    searchPlaceholder: P = "",
+    searchPlaceholder: b = "",
+    renderOption: g,
     ...s
-  }, O) => {
-    const v = s.value !== void 0, [V, $] = f(s.multiple ? [] : null), L = v ? s.value : V, [u, h] = f(""), [k, j] = f(!1), a = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[m]), o = (e) => typeof e == "string" || typeof e == "number" ? e : e[y], S = l && u ? r.filter((e) => a(e).toLowerCase().includes(u.toLowerCase())) : r;
-    return /* @__PURE__ */ t.jsx(D, { error: b, label: C, required: I, htmlFor: g, children: /* @__PURE__ */ t.jsxs(
-      F,
+  }, L) => {
+    const m = s.value !== void 0, [O, k] = c(s.multiple ? [] : null), M = m ? s.value : O, [d, v] = c(""), [z, h] = c(!1), i = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[y]), a = (e) => typeof e == "string" || typeof e == "number" ? e : e[C], S = l && d ? o.filter((e) => i(e).toLowerCase().includes(d.toLowerCase())) : o;
+    return /* @__PURE__ */ r.jsx(N, { error: w, label: I, required: P, htmlFor: x, children: /* @__PURE__ */ r.jsxs(
+      T,
       {
-        id: g,
+        id: x,
         displayEmpty: !0,
         fullWidth: !0,
         defaultValue: "",
-        ref: O,
-        open: l ? k : void 0,
-        onOpen: l ? () => j(!0) : void 0,
+        ref: L,
+        open: l ? z : void 0,
+        onOpen: l ? () => h(!0) : void 0,
         onClose: l ? () => {
-          j(!1), h("");
+          h(!1), v("");
         } : void 0,
         MenuProps: l ? {
           autoFocus: !1,
@@ -44,38 +45,38 @@ const K = E(/* @__PURE__ */ t.jsx("path", {
         } : void 0,
         renderValue: s.multiple ? (e) => {
           const n = e;
-          return n.length === 0 ? /* @__PURE__ */ t.jsx(p, { component: "span", sx: { color: "divider" }, children: x }) : n?.map((i) => {
-            const d = r.find((z) => o(z) === o(i));
-            return d ? a(d) : "";
+          return n.length === 0 ? /* @__PURE__ */ r.jsx(f, { component: "span", sx: { color: "divider" }, children: p }) : n?.map((t) => {
+            const u = o.find((A) => a(A) === a(t));
+            return u ? i(u) : "";
           }).filter(Boolean).join(", ");
         } : (e) => {
           const n = e;
           if (n == null || n === "")
-            return /* @__PURE__ */ t.jsx(p, { component: "span", sx: { color: "divider" }, children: x });
-          if (w)
-            return a(n);
-          const i = r.find((d) => o(d) === o(n));
-          return i ? a(i) : "";
+            return /* @__PURE__ */ r.jsx(f, { component: "span", sx: { color: "divider" }, children: p });
+          if (V)
+            return i(n);
+          const t = o.find((u) => a(u) === a(n));
+          return t ? i(t) : "";
         },
         ...s,
-        value: r.length ? L ?? "" : "",
+        value: o.length ? M ?? "" : "",
         onChange: (e, n) => {
           if (s.onChange)
             s.onChange(e, n);
-          else if (!v) {
-            const i = e.target.value;
-            $(i);
+          else if (!m) {
+            const t = e.target.value;
+            k(t);
           }
         },
         children: [
-          l && /* @__PURE__ */ t.jsx(M, { sx: { px: 2, py: 1, position: "sticky", top: 0, bgcolor: "background.paper", zIndex: 1 }, children: /* @__PURE__ */ t.jsx(
-            T,
+          l && /* @__PURE__ */ r.jsx(B, { sx: { px: 2, py: 1, position: "sticky", top: 0, bgcolor: "background.paper", zIndex: 1 }, children: /* @__PURE__ */ r.jsx(
+            D,
             {
               fullWidth: !0,
               autoFocus: !0,
-              placeholder: P,
-              value: u,
-              onChange: (e) => h(e.target.value),
+              placeholder: b,
+              value: d,
+              onChange: (e) => v(e.target.value),
               onKeyDown: (e) => {
                 e.key !== "Escape" && e.stopPropagation();
               },
@@ -83,42 +84,29 @@ const K = E(/* @__PURE__ */ t.jsx("path", {
                 e.stopPropagation();
               },
               InputProps: {
-                startAdornment: /* @__PURE__ */ t.jsx(B, { position: "start", children: /* @__PURE__ */ t.jsx(K, { fontSize: "small" }) })
+                startAdornment: /* @__PURE__ */ r.jsx(K, { position: "start", children: /* @__PURE__ */ r.jsx(R, { fontSize: "small" }) })
               }
             }
           ) }),
-          l ? S?.length > 0 ? S.map((e, n) => /* @__PURE__ */ t.jsx(
-            c,
-            {
-              disabled: e?.disabled ?? !1,
-              value: o(e),
-              children: a(e)
-            },
-            `${o(e)}-${n}`
-          )) : u ? /* @__PURE__ */ t.jsx(c, { disabled: !0, children: /* @__PURE__ */ t.jsx(p, { sx: { color: "text.secondary", textAlign: "center", width: "100%" }, children: "No results found" }) }) : r?.map((e, n) => /* @__PURE__ */ t.jsx(
-            c,
-            {
-              disabled: e?.disabled ?? !1,
-              value: o(e),
-              children: a(e)
-            },
-            `${o(e)}-${n}`
-          )) : r?.map((e, n) => /* @__PURE__ */ t.jsx(
-            c,
-            {
-              disabled: e?.disabled ?? !1,
-              value: o(e),
-              children: a(e)
-            },
-            `${o(e)}-${n}`
-          ))
+          (() => {
+            const e = (n) => n.map((t, u) => /* @__PURE__ */ r.jsx(
+              j,
+              {
+                disabled: t?.disabled ?? !1,
+                value: a(t),
+                children: g ? g(t) : i(t)
+              },
+              `${a(t)}-${u}`
+            ));
+            return l ? S.length > 0 ? e(S) : d ? /* @__PURE__ */ r.jsx(j, { disabled: !0, children: /* @__PURE__ */ r.jsx(f, { sx: { color: "text.secondary", textAlign: "center", width: "100%" }, children: "No results found" }) }) : e(o) : e(o);
+          })()
         ]
       }
     ) });
   }
 );
-N.displayName = "SSelect";
+W.displayName = "SSelect";
 export {
-  N as SSelect,
-  N as default
+  W as SSelect,
+  W as default
 };

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

@@ -12,7 +12,7 @@ const u = p(i, {
   paddingRight: s.spacing(2),
   border: "1px solid",
   cursor: "pointer",
-  borderColor: a ? (s.vars || s).palette.primary.dark : (s.vars || s).palette.divider
+  borderColor: a ? (s.vars ?? s).palette.primary.dark : (s.vars ?? s).palette.divider
 })), f = ({
   items: s,
   selectedId: a,

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

@@ -1,7 +1,7 @@
 import { CardCvcElement } from '@stripe/react-stripe-js';
 import { StripeTextFieldProps } from './s-stripe';
 /** Card security code (CVC/CVV) input field with Stripe integration. */
-export declare function SStripeCVC(props: StripeTextFieldProps<typeof CardCvcElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SStripeCVC(props: Readonly<StripeTextFieldProps<typeof CardCvcElement>>): import("react/jsx-runtime").JSX.Element;
 export declare namespace SStripeCVC {
     var displayName: string;
 }

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

@@ -1,7 +1,7 @@
 import { CardExpiryElement } from '@stripe/react-stripe-js';
 import { StripeTextFieldProps } from './s-stripe';
 /** Card expiration date input field with Stripe integration. */
-export declare function SStripeExpiry(props: StripeTextFieldProps<typeof CardExpiryElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SStripeExpiry(props: Readonly<StripeTextFieldProps<typeof CardExpiryElement>>): import("react/jsx-runtime").JSX.Element;
 export declare namespace SStripeExpiry {
     var displayName: string;
 }

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

@@ -1,7 +1,7 @@
 import { CardNumberElement } from '@stripe/react-stripe-js';
 import { StripeTextFieldProps } from './s-stripe';
 /** Card number input field with Stripe integration. */
-export declare function SStripeNumber(props: StripeTextFieldProps<typeof CardNumberElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SStripeNumber(props: Readonly<StripeTextFieldProps<typeof CardNumberElement>>): import("react/jsx-runtime").JSX.Element;
 export declare namespace SStripeNumber {
     var displayName: string;
 }

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

@@ -7,5 +7,5 @@ import * as React from 'react';
  * @param ref - Forward ref for focus management
  * @returns JSX element containing configured Stripe element
  */
-declare const StripeInput: React.ForwardRefExoticComponent<Omit<InputBaseComponentProps, "ref"> & React.RefAttributes<any>>;
+declare const StripeInput: React.ForwardRefExoticComponent<Omit<InputBaseComponentProps, "ref"> & React.RefAttributes<unknown>>;
 export default StripeInput;