@solostylist/ui-kit 1.0.167 → 1.0.169

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

@@ -1,8 +1,7 @@
 import { default as React } from 'react';
 import { SkeletonProps } from '@mui/material';
 /**
- * Props interface for SSkeleton component - extends Material-UI SkeletonProps
- * with enhanced component presets and customization options
+ * Props interface for SSkeleton component
  */
 export interface SSkeletonProps extends Omit<SkeletonProps, 'variant' | 'height' | 'width' | 'component'> {
     /** Visual variant of the skeleton */
@@ -17,25 +16,10 @@ export interface SSkeletonProps extends Omit<SkeletonProps, 'variant' | 'height'
     component?: 'button' | 'checkbox' | 'radio-button' | 'avatar' | 'rounded-avatar' | 'icon-button' | 'typography' | 'title-typography';
 }
 /**
- * SSkeleton - An enhanced skeleton loading component with pre-defined component presets.
- * Wraps Material-UI Skeleton with common UI element configurations for consistent loading states.
- *
- * Key features:
- * - Pre-defined presets for common UI components (buttons, avatars, checkboxes, etc.)
- * - Customizable dimensions and font sizes
- * - All Material-UI Skeleton variants supported
- * - Consistent sizing across the design system
- * - Fallback to custom configuration when no preset is specified
- *
- * Component presets provide standardized skeleton sizes that match actual component dimensions:
- * - button: 32px height, rounded variant
- * - checkbox/radio-button: 24px square/circle
- * - avatar: 54px square or 48px circle
- * - icon-button: 32px circle
- * - typography: Full width text or 200px title
- *
- * @param props - SSkeletonProps with preset options and Material-UI Skeleton props
- * @returns JSX.Element - Configured skeleton based on preset or custom settings
+ * An enhanced skeleton loading component with pre-defined component presets for consistent loading states.
  */
-declare const SSkeleton: ({ variant, width, height, fontSize, component, ...props }: SSkeletonProps) => React.JSX.Element;
+export declare const SSkeleton: {
+    ({ variant, width, height, fontSize, component, ...props }: SSkeletonProps): React.JSX.Element;
+    displayName: string;
+};
 export default SSkeleton;

package/dist/s-skeleton/s-skeleton.js

@@ -1,34 +1,44 @@
-import { j as e } from "../jsx-runtime-OVHDjVDe.js";
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
 import { Skeleton as a } from "@mui/material";
-const s = ({
-  variant: r = "text",
-  width: i = "100%",
+const o = ({
+  variant: n = "text",
+  width: r = "100%",
   height: u = 32,
-  fontSize: n = "16px",
-  component: x,
-  ...t
+  fontSize: i = "16px",
+  component: l,
+  ...e
 }) => {
-  switch (x) {
+  switch (l) {
     case "button":
-      return /* @__PURE__ */ e.jsx(a, { height: 32, variant: "rounded", width: i, ...t });
+      return /* @__PURE__ */ t.jsx(a, { height: 32, variant: "rounded", width: r, ...e });
     case "checkbox":
-      return /* @__PURE__ */ e.jsx(a, { height: 24, variant: "rounded", width: 24, ...t });
+      return /* @__PURE__ */ t.jsx(a, { height: 24, variant: "rounded", width: 24, ...e });
     case "radio-button":
-      return /* @__PURE__ */ e.jsx(a, { height: 24, variant: "circular", width: 24, ...t });
+      return /* @__PURE__ */ t.jsx(a, { height: 24, variant: "circular", width: 24, ...e });
     case "avatar":
-      return /* @__PURE__ */ e.jsx(a, { height: 54, variant: "rectangular", width: 54, ...t });
+      return /* @__PURE__ */ t.jsx(a, { height: 54, variant: "rectangular", width: 54, ...e });
     case "rounded-avatar":
-      return /* @__PURE__ */ e.jsx(a, { height: 48, variant: "circular", width: 48, ...t });
+      return /* @__PURE__ */ t.jsx(a, { height: 48, variant: "circular", width: 48, ...e });
     case "icon-button":
-      return /* @__PURE__ */ e.jsx(a, { height: 32, variant: "circular", width: 32, ...t });
+      return /* @__PURE__ */ t.jsx(a, { height: 32, variant: "circular", width: 32, ...e });
     case "typography":
-      return /* @__PURE__ */ e.jsx(a, { sx: { fontSize: n }, variant: "text", width: "100%", ...t });
+      return /* @__PURE__ */ t.jsx(a, { sx: { fontSize: i }, variant: "text", width: "100%", ...e });
     case "title-typography":
-      return /* @__PURE__ */ e.jsx(a, { sx: { fontSize: n }, variant: "text", width: 200, ...t });
+      return /* @__PURE__ */ t.jsx(a, { sx: { fontSize: i }, variant: "text", width: 200, ...e });
     default:
-      return r === "text" ? /* @__PURE__ */ e.jsx(a, { sx: { fontSize: n }, variant: r, width: i, ...t }) : /* @__PURE__ */ e.jsx(a, { height: u, variant: r, width: i, ...t });
+      return n === "text" ? /* @__PURE__ */ t.jsx(a, { sx: { fontSize: i }, variant: n, width: r, ...e }) : /* @__PURE__ */ t.jsx(a, { height: u, variant: n, width: r, ...e });
   }
 };
+o.displayName = "SSkeleton";
+try {
+  o.displayName = "SSkeleton", o.__docgenInfo = { description: "An enhanced skeleton loading component with pre-defined component presets for consistent loading states.", displayName: "SSkeleton", props: { variant: { defaultValue: { value: "text" }, description: "Visual variant of the skeleton", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } }, height: { defaultValue: { value: "32" }, description: "Height of the skeleton (number for px, string for CSS units)", name: "height", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Width of the skeleton (number for px, string for CSS units)", name: "width", required: !1, type: { name: "string | number" } }, fontSize: { defaultValue: { value: "16px" }, description: "Font size for text variant skeletons", name: "fontSize", required: !1, type: { name: "string | number" } }, component: { defaultValue: null, description: "Pre-defined component preset for common UI elements", name: "component", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"checkbox"' }, { value: '"typography"' }, { value: '"avatar"' }, { value: '"radio-button"' }, { value: '"rounded-avatar"' }, { value: '"icon-button"' }, { value: '"title-typography"' }] } } } };
+} catch {
+}
+try {
+  sskeleton.displayName = "sskeleton", sskeleton.__docgenInfo = { description: "An enhanced skeleton loading component with pre-defined component presets for consistent loading states.", displayName: "sskeleton", props: { variant: { defaultValue: { value: "text" }, description: "Visual variant of the skeleton", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } }, height: { defaultValue: { value: "32" }, description: "Height of the skeleton (number for px, string for CSS units)", name: "height", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Width of the skeleton (number for px, string for CSS units)", name: "width", required: !1, type: { name: "string | number" } }, fontSize: { defaultValue: { value: "16px" }, description: "Font size for text variant skeletons", name: "fontSize", required: !1, type: { name: "string | number" } }, component: { defaultValue: null, description: "Pre-defined component preset for common UI elements", name: "component", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"checkbox"' }, { value: '"typography"' }, { value: '"avatar"' }, { value: '"radio-button"' }, { value: '"rounded-avatar"' }, { value: '"icon-button"' }, { value: '"title-typography"' }] } } } };
+} catch {
+}
 export {
-  s as default
+  o as SSkeleton,
+  o as default
 };

package/dist/s-snackbar-message/index.js

@@ -1,6 +1,6 @@
-import { SnackbarMessageProvider as r, default as s, useSnackbarMessage as o } from "./s-snackbar-message.js";
+import { SnackbarMessageProvider as s, SSnackbarMessage as r, useSnackbarMessage as S } from "./s-snackbar-message.js";
 export {
-  r as SnackbarMessageProvider,
-  s as default,
-  o as useSnackbarMessage
+  s as SnackbarMessageProvider,
+  r as default,
+  S as useSnackbarMessage
 };

package/dist/s-snackbar-message/s-snackbar-message.d.ts

@@ -16,21 +16,12 @@ export interface SSnackbarMessageProps {
     alertProps?: AlertProps;
 }
 /**
- * SSnackbarMessage - A notification snackbar component that displays temporary messages.
- * Combines Material-UI Snackbar with Alert for styled notifications.
- *
- * Key features:
- * - Auto-hide after 10 seconds by default
- * - Positioned at top-center for better visibility
- * - Uses Alert component for consistent styling and severity levels
- * - Configurable Snackbar and Alert props for customization
- * - Default error severity (can be overridden via alertProps)
- * - Full-width alert for better readability
- *
- * @param props - SSnackbarMessageProps with message and configuration
- * @returns JSX.Element - Snackbar notification with Alert styling
+ * A notification snackbar component that displays temporary messages with Material-UI Alert styling.
  */
-declare const SSnackbarMessage: ({ message, onClose, open, snackbarProps, alertProps, }: SSnackbarMessageProps) => React.JSX.Element;
+export declare const SSnackbarMessage: {
+    ({ message, onClose, open, snackbarProps, alertProps, }: SSnackbarMessageProps): React.JSX.Element;
+    displayName: string;
+};
 export default SSnackbarMessage;
 /**
  * Options for opening a snackbar message
@@ -63,20 +54,11 @@ export interface SnackbarMessageContextProps {
 }
 /**
  * Provider component that manages a global snackbar notification system.
- * This enables any component in the app to display toast-like notifications
- * without managing snackbar state locally.
- *
- * @param children - Child components that can use the snackbar context
- * @returns JSX.Element - Provider with snackbar management and rendered snackbar
  */
 export declare const SnackbarMessageProvider: ({ children }: {
     children: React.ReactNode;
 }) => React.JSX.Element;
 /**
  * Hook to access the snackbar message context.
- * Must be used within a SnackbarMessageProvider.
- *
- * @returns SnackbarMessageContextProps - Context with snackbar management functions
- * @throws Error if used outside of SnackbarMessageProvider
  */
 export declare const useSnackbarMessage: () => SnackbarMessageContextProps;

package/dist/s-snackbar-message/s-snackbar-message.js

@@ -1,59 +1,66 @@
-import { j as t } from "../jsx-runtime-OVHDjVDe.js";
-import * as a from "react";
-import { Snackbar as h, Alert as S } from "@mui/material";
-import { useDialog as k } from "../hooks/use-dialog.js";
-const x = ({
-  message: s,
+import { j as n } from "../jsx-runtime-OVHDjVDe.js";
+import * as s from "react";
+import { Snackbar as k, Alert as f } from "@mui/material";
+import { useDialog as S } from "../hooks/use-dialog.js";
+const t = ({
+  message: a,
   onClose: e = () => {
   },
   open: r = !1,
-  snackbarProps: n,
-  alertProps: o
-}) => /* @__PURE__ */ t.jsx(
-  h,
+  snackbarProps: o,
+  alertProps: l
+}) => /* @__PURE__ */ n.jsx(
+  k,
   {
     open: r,
     autoHideDuration: 1e4,
     onClose: e,
     anchorOrigin: { vertical: "top", horizontal: "center" },
-    ...n,
-    children: /* @__PURE__ */ t.jsx(S, { onClose: e, severity: "info", sx: { width: "100%" }, ...o, children: s })
+    ...o,
+    children: /* @__PURE__ */ n.jsx(f, { onClose: e, severity: "info", sx: { width: "100%" }, ...l, children: a })
   }
-), c = a.createContext(null), M = ({ children: s }) => {
-  const e = k(), [r, n] = a.useState({
+);
+t.displayName = "SSnackbarMessage";
+const c = s.createContext(null), M = ({ children: a }) => {
+  const e = S(), [r, o] = s.useState({
     message: ""
-  }), [o, l] = a.useState({}), [i, u] = a.useState({}), p = {
-    handleOpen: a.useCallback(
-      ({ snackbarMessageOptions: d, snackbarProps: g = {}, alertProps: m = {} }) => {
-        const { message: b } = d || { message: "" };
-        n({ message: b }), l(g), u(m), e.handleOpen();
+  }), [l, i] = s.useState({}), [p, d] = s.useState({}), u = {
+    handleOpen: s.useCallback(
+      ({ snackbarMessageOptions: m, snackbarProps: b = {}, alertProps: g = {} }) => {
+        const { message: h } = m || { message: "" };
+        o({ message: h }), i(b), d(g), e.handleOpen();
       },
       [e]
     ),
     handleClose: e.handleClose,
     open: e.open
   };
-  return /* @__PURE__ */ t.jsxs(c.Provider, { value: p, children: [
-    /* @__PURE__ */ t.jsx(
-      x,
+  return /* @__PURE__ */ n.jsxs(c.Provider, { value: u, children: [
+    /* @__PURE__ */ n.jsx(
+      t,
       {
         open: e.open,
         message: r == null ? void 0 : r.message,
         onClose: e.handleClose,
-        snackbarProps: o,
-        alertProps: i
+        snackbarProps: l,
+        alertProps: p
       }
     ),
-    s
+    a
   ] });
-}, j = () => {
-  const s = a.useContext(c);
-  if (!s)
+}, C = () => {
+  const a = s.useContext(c);
+  if (!a)
     throw new Error("useSnackbarMessage must be used within a SnackbarMessageProvider");
-  return s;
+  return a;
 };
+try {
+  t.displayName = "SSnackbarMessage", t.__docgenInfo = { description: "A notification snackbar component that displays temporary messages with Material-UI Alert styling.", displayName: "SSnackbarMessage", props: { message: { defaultValue: null, description: "Message content - can be string or React element", name: "message", required: !1, type: { name: "ReactNode" } }, onClose: { defaultValue: { value: "() => {}" }, description: "Callback fired when snackbar should close", name: "onClose", required: !1, type: { name: "(() => void)" } }, open: { defaultValue: { value: "false" }, description: "Whether the snackbar is open", name: "open", required: !1, type: { name: "boolean" } }, snackbarProps: { defaultValue: null, description: "Additional props passed to the Snackbar component", name: "snackbarProps", required: !1, type: { name: "SnackbarProps" } }, alertProps: { defaultValue: null, description: "Additional props passed to the Alert component", name: "alertProps", required: !1, type: { name: "AlertProps" } } } };
+} catch {
+}
 export {
+  t as SSnackbarMessage,
   M as SnackbarMessageProvider,
-  x as default,
-  j as useSnackbarMessage
+  t as default,
+  C as useSnackbarMessage
 };

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

@@ -1,4 +1,4 @@
-import { default as o } from "./s-spotlight-cursor.js";
+import { SSpotlightCursor as t } from "./s-spotlight-cursor.js";
 export {
-  o as default
+  t as default
 };

package/dist/s-spotlight-cursor/s-spotlight-cursor.d.ts

@@ -3,61 +3,27 @@ import { HTMLAttributes } from 'react';
  * Configuration interface for spotlight effect appearance and behavior
  */
 export interface SpotlightConfig {
-    /** Radius of the spotlight effect in pixels (recommended: 50-500) */
+    /** Radius of the spotlight effect in pixels */
     radius: number;
-    /** Brightness/opacity of the spotlight effect (range: 0-1, where 0 is invisible and 1 is fully opaque) */
+    /** Brightness/opacity of the spotlight effect (0-1) */
     brightness: number;
-    /** Color of the spotlight effect in hexadecimal format (e.g., '#ff0000', '#00ff00') */
+    /** Color of the spotlight effect in hexadecimal format */
     color: string;
-    /** Smoothing factor for cursor movement - reserved for future implementation */
+    /** Smoothing factor for cursor movement */
     smoothing: number;
 }
 /**
  * Props interface for the SSpotlightCursor component
  */
 export interface SSpotlightCursorProps extends HTMLAttributes<HTMLCanvasElement> {
-    /** Configuration object for spotlight appearance and behavior. If not provided, uses default blue spotlight */
+    /** Configuration object for spotlight appearance and behavior */
     config?: SpotlightConfig;
 }
 /**
- * SSpotlightCursor - Creates an interactive spotlight effect that follows the mouse cursor
- *
- * This component renders a full-screen HTML5 canvas with a radial gradient spotlight that
- * smoothly tracks the user's mouse movement. The spotlight effect is highly customizable
- * and optimized for performance using requestAnimationFrame.
- *
- * Key features:
- * - Mouse-following spotlight with smooth animation
- * - Customizable radius, brightness, color, and smoothing
- * - Performance-optimized with proper cleanup
- * - Responsive design that adapts to window resizing
- * - Non-interfering overlay (pointer-events: none)
- * - Memory-safe event listener management
- *
- * Technical implementation:
- * - Uses HTML5 Canvas with 2D context for rendering
- * - Implements radial gradient for spotlight effect
- * - Leverages requestAnimationFrame for 60fps animations
- * - Automatically handles canvas sizing and viewport changes
- * - Converts hex colors to RGB for gradient creation
- *
- * @param props - SSpotlightCursorProps containing configuration and styling options
- * @returns JSX.Element - Fixed-positioned canvas element rendering the spotlight effect
- *
- * @example
- * // Basic usage with default blue spotlight
- * <SSpotlightCursor />
- *
- * @example
- * // Custom orange spotlight with larger radius
- * <SSpotlightCursor
- *   config={{
- *     radius: 300,
- *     brightness: 0.25,
- *     color: '#ff6b35',
- *     smoothing: 0.1
- *   }}
- * />
+ * Creates an interactive spotlight effect that follows the mouse cursor.
  */
-declare const SSpotlightCursor: ({ config, className, ...props }: SSpotlightCursorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SSpotlightCursor: {
+    ({ config, className, ...props }: SSpotlightCursorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default SSpotlightCursor;

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

@@ -1,45 +1,45 @@
-import { j as g } from "../jsx-runtime-OVHDjVDe.js";
-import { useRef as p, useEffect as x } from "react";
-import { Box as E } from "@mui/material";
-const b = (t) => {
-  const a = p(null);
-  return x(() => {
+import { j as w } from "../jsx-runtime-OVHDjVDe.js";
+import { useRef as S, useEffect as b } from "react";
+import { Box as C } from "@mui/material";
+const x = (t) => {
+  const a = S(null);
+  return b(() => {
     const e = a.current;
     if (!e) return;
-    const o = e.getContext("2d");
-    if (!o) return;
-    let d, r = -1e3, s = -1e3;
-    const c = () => {
+    const n = e.getContext("2d");
+    if (!n) return;
+    let c, r = -1e3, i = -1e3;
+    const d = () => {
       e.width = window.innerWidth, e.height = window.innerHeight;
-    }, l = (n) => {
-      r = n.clientX, s = n.clientY;
+    }, u = (o) => {
+      r = o.clientX, i = o.clientY;
+    }, h = () => {
+      r = -1e3, i = -1e3;
+    }, p = (o) => {
+      const s = parseInt(o.slice(1), 16), f = s >> 16 & 255, g = s >> 8 & 255, v = s & 255;
+      return `${f},${g},${v}`;
     }, m = () => {
-      r = -1e3, s = -1e3;
-    }, h = (n) => {
-      const i = parseInt(n.slice(1), 16), w = i >> 16 & 255, v = i >> 8 & 255, f = i & 255;
-      return `${w},${v},${f}`;
-    }, u = () => {
-      if (o.clearRect(0, 0, e.width, e.height), r !== -1e3 && s !== -1e3) {
-        const n = o.createRadialGradient(r, s, 0, r, s, t.radius || 200), i = h(t.color);
-        n.addColorStop(0, `rgba(${i}, ${t.brightness})`), n.addColorStop(1, "rgba(0,0,0,0)"), o.fillStyle = n, o.fillRect(0, 0, e.width, e.height);
+      if (n.clearRect(0, 0, e.width, e.height), r !== -1e3 && i !== -1e3) {
+        const o = n.createRadialGradient(r, i, 0, r, i, t.radius || 200), s = p(t.color);
+        o.addColorStop(0, `rgba(${s}, ${t.brightness})`), o.addColorStop(1, "rgba(0,0,0,0)"), n.fillStyle = o, n.fillRect(0, 0, e.width, e.height);
       }
-      d = requestAnimationFrame(u);
+      c = requestAnimationFrame(m);
     };
-    return c(), window.addEventListener("resize", c), window.addEventListener("mousemove", l), window.addEventListener("mouseleave", m), d = requestAnimationFrame(u), () => {
-      window.removeEventListener("resize", c), window.removeEventListener("mousemove", l), window.removeEventListener("mouseleave", m), cancelAnimationFrame(d);
+    return d(), window.addEventListener("resize", d), window.addEventListener("mousemove", u), window.addEventListener("mouseleave", h), c = requestAnimationFrame(m), () => {
+      window.removeEventListener("resize", d), window.removeEventListener("mousemove", u), window.removeEventListener("mouseleave", h), cancelAnimationFrame(c);
     };
   }, [t.radius, t.brightness, t.color]), a;
-}, S = ({
+}, l = ({
   config: t = { radius: 200, brightness: 0.15, color: "#0000ff", smoothing: 0.1 },
   className: a,
   ...e
 }) => {
-  const o = b(t);
-  return /* @__PURE__ */ g.jsx(
-    E,
+  const n = x(t);
+  return /* @__PURE__ */ w.jsx(
+    C,
     {
       component: "canvas",
-      ref: o,
+      ref: n,
       className: a,
       sx: {
         position: "fixed",
@@ -54,6 +54,12 @@ const b = (t) => {
     }
   );
 };
+l.displayName = "SSpotlightCursor";
+try {
+  l.displayName = "SSpotlightCursor", l.__docgenInfo = { description: "Creates an interactive spotlight effect that follows the mouse cursor.", displayName: "SSpotlightCursor", props: { config: { defaultValue: { value: "{ radius: 200, brightness: 0.15, color: '#0000ff', smoothing: 0.1 }" }, description: "Configuration object for spotlight appearance and behavior", name: "config", required: !1, type: { name: "SpotlightConfig" } } } };
+} catch {
+}
 export {
-  S as default
+  l as SSpotlightCursor,
+  l as default
 };

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

@@ -1,2 +1,5 @@
-export { SStripeNumber, SStripeExpiry, SStripeCVC, StripeTextField } from './s-stripe';
+export { StripeTextField } from './s-stripe';
+export { SStripeNumber } from './s-stripe-number';
+export { SStripeExpiry } from './s-stripe-expiry';
+export { SStripeCVC } from './s-stripe-cvc';
 export type { StripeTextFieldProps, StripeElement } from './s-stripe';

package/dist/s-stripe/index.js

@@ -1,7 +1,10 @@
-import { SStripeCVC as S, SStripeExpiry as i, SStripeNumber as p, StripeTextField as t } from "./s-stripe.js";
+import { StripeTextField as p } from "./s-stripe.js";
+import { SStripeNumber as o } from "./s-stripe-number.js";
+import { SStripeExpiry as i } from "./s-stripe-expiry.js";
+import { SStripeCVC as m } from "./s-stripe-cvc.js";
 export {
-  S as SStripeCVC,
+  m as SStripeCVC,
   i as SStripeExpiry,
-  p as SStripeNumber,
-  t as StripeTextField
+  o as SStripeNumber,
+  p as StripeTextField
 };

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

@@ -0,0 +1,8 @@
+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 namespace SStripeCVC {
+    var displayName: string;
+}
+export default SStripeCVC;

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

@@ -0,0 +1,15 @@
+import { j as r } from "../jsx-runtime-OVHDjVDe.js";
+import { CardCvcElement as n } from "@stripe/react-stripe-js";
+import { StripeTextField as a } from "./s-stripe.js";
+function e(t) {
+  return /* @__PURE__ */ r.jsx(a, { label: "CVC", stripeElement: n, ...t });
+}
+e.displayName = "SStripeCVC";
+try {
+  e.displayName = "SStripeCVC", e.__docgenInfo = { description: "Card security code (CVC/CVV) input field with Stripe integration.", displayName: "SStripeCVC", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardCvcElementProps" } }, labelErrorMessage: { defaultValue: null, description: "Custom error message to display when validation fails", name: "labelErrorMessage", required: !1, type: { name: "string" } }, onChange: { defaultValue: null, description: "Change handler for Stripe Element events", name: "onChange", required: !1, type: { name: "((event: StripeCardCvcElementChangeEvent) => any)" } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "CardCvcElementComponent" } } } };
+} catch {
+}
+export {
+  e as SStripeCVC,
+  e as default
+};

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

@@ -0,0 +1,8 @@
+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 namespace SStripeExpiry {
+    var displayName: string;
+}
+export default SStripeExpiry;

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

@@ -0,0 +1,15 @@
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import { CardExpiryElement as i } from "@stripe/react-stripe-js";
+import { StripeTextField as n } from "./s-stripe.js";
+function e(r) {
+  return /* @__PURE__ */ t.jsx(n, { label: "Expiration", stripeElement: i, ...r });
+}
+e.displayName = "SStripeExpiry";
+try {
+  e.displayName = "SStripeExpiry", e.__docgenInfo = { description: "Card expiration date input field with Stripe integration.", displayName: "SStripeExpiry", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardExpiryElementProps" } }, labelErrorMessage: { defaultValue: null, description: "Custom error message to display when validation fails", name: "labelErrorMessage", required: !1, type: { name: "string" } }, onChange: { defaultValue: null, description: "Change handler for Stripe Element events", name: "onChange", required: !1, type: { name: "((event: StripeCardExpiryElementChangeEvent) => any)" } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "CardExpiryElementComponent" } } } };
+} catch {
+}
+export {
+  e as SStripeExpiry,
+  e as default
+};

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

@@ -0,0 +1,8 @@
+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 namespace SStripeNumber {
+    var displayName: string;
+}
+export default SStripeNumber;

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

@@ -0,0 +1,15 @@
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import { CardNumberElement as n } from "@stripe/react-stripe-js";
+import { StripeTextField as a } from "./s-stripe.js";
+function e(r) {
+  return /* @__PURE__ */ t.jsx(a, { label: "Card Number", stripeElement: n, ...r });
+}
+e.displayName = "SStripeNumber";
+try {
+  e.displayName = "SStripeNumber", e.__docgenInfo = { description: "Card number input field with Stripe integration.", displayName: "SStripeNumber", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardNumberElementProps" } }, labelErrorMessage: { defaultValue: null, description: "Custom error message to display when validation fails", name: "labelErrorMessage", required: !1, type: { name: "string" } }, onChange: { defaultValue: null, description: "Change handler for Stripe Element events", name: "onChange", required: !1, type: { name: "((event: StripeCardNumberElementChangeEvent) => any)" } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "CardNumberElementComponent" } } } };
+} catch {
+}
+export {
+  e as SStripeNumber,
+  e as default
+};

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

@@ -19,88 +19,9 @@ export interface StripeTextFieldProps<T extends StripeElement> extends Omit<STex
     /** The Stripe Element component to render */
     stripeElement?: T;
 }
-/**
- * Generic Stripe text field component that integrates Stripe Elements with Material-UI styling
- *
- * Creates a seamless integration between Stripe payment elements and the application's
- * Material-UI design system. Handles the complex integration of Stripe's iframe-based
- * elements with Material-UI's text field styling and behavior.
- *
- * Features:
- * - Consistent Material-UI styling for Stripe elements
- * - Proper label shrinking behavior
- * - Error state handling with custom messages
- * - Theme-aware styling that adapts to dark/light modes
- * - Focus management integration
- *
- * @param props - Configuration props including Stripe element and styling options
- * @returns JSX element containing integrated Stripe element with Material-UI styling
- */
-export declare const StripeTextField: <T extends StripeElement>(props: StripeTextFieldProps<T>) => import("react/jsx-runtime").JSX.Element;
-/**
- * Card number input field with Stripe integration
- *
- * Pre-configured Stripe text field specifically for card number entry.
- * Handles card number formatting, validation, and brand detection automatically.
- *
- * @param props - StripeTextFieldProps configured for CardNumberElement
- * @returns JSX element containing card number input field
- *
- * @example
- * ```tsx
- * <SStripeNumber
- *   onChange={(event) => {
- *     if (event.complete) {
- *       console.log('Card number is valid');
- *     }
- *   }}
- *   inputProps={{
- *     placeholder: '1234 5678 9012 3456'
- *   }}
- * />
- * ```
- */
-export declare function SStripeNumber(props: StripeTextFieldProps<typeof CardNumberElement>): import("react/jsx-runtime").JSX.Element;
-/**
- * Card expiration date input field with Stripe integration
- *
- * Pre-configured Stripe text field for card expiration date entry.
- * Automatically formats input as MM/YY and validates expiration dates.
- *
- * @param props - StripeTextFieldProps configured for CardExpiryElement
- * @returns JSX element containing expiration date input field
- *
- * @example
- * ```tsx
- * <SStripeExpiry
- *   onChange={(event) => {
- *     if (event.error) {
- *       setError(event.error.message);
- *     }
- *   }}
- * />
- * ```
- */
-export declare function SStripeExpiry(props: StripeTextFieldProps<typeof CardExpiryElement>): import("react/jsx-runtime").JSX.Element;
-/**
- * Card security code (CVC/CVV) input field with Stripe integration
- *
- * Pre-configured Stripe text field for card security code entry.
- * Automatically adjusts expected length based on detected card brand
- * (3 digits for most cards, 4 for American Express).
- *
- * @param props - StripeTextFieldProps configured for CardCvcElement
- * @returns JSX element containing CVC input field
- *
- * @example
- * ```tsx
- * <SStripeCVC
- *   onChange={(event) => {
- *     if (event.complete) {
- *       console.log('CVC is valid');
- *     }
- *   }}
- * />
- * ```
- */
-export declare function SStripeCVC(props: StripeTextFieldProps<typeof CardCvcElement>): import("react/jsx-runtime").JSX.Element;
+/** Generic Stripe text field component that integrates Stripe Elements with Material-UI styling. */
+export declare const StripeTextField: {
+    <T extends StripeElement>(props: StripeTextFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default StripeTextField;