@solostylist/ui-kit 1.0.171 → 1.0.172

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

@@ -1,193 +1,44 @@
-import { j as i } from "../jsx-runtime-OVHDjVDe.js";
-import { useRef as x } from "react";
-import { useColorScheme as g, useTheme as b, Button as u, alpha as e, Box as o } from "@mui/material";
-import { SMovingBorder as h } from "../s-moving-border/s-moving-border.js";
-const n = ({
-  borderRadius: r = 12,
-  children: p,
-  duration: l = 6e3,
-  ...m
-}) => {
-  const s = x(null), { mode: a } = g(), t = b(), c = a === "light" ? (t.vars || t).palette.primary.main : (t.vars || t).palette.primary.light, d = a === "light" ? 90 : 110;
-  return /* @__PURE__ */ i.jsx(
-    h,
-    {
-      duration: l,
-      borderRadius: r,
-      height: 60,
-      glowSize: d,
-      glowColor: c,
-      children: /* @__PURE__ */ i.jsx(
-        u,
-        {
-          variant: "text",
-          sx: {
-            height: "100%",
-            borderRadius: r,
-            position: "relative",
-            overflow: "hidden",
-            background: a === "light" ? `linear-gradient(0deg, ${(t.vars || t).palette.background.paper}, ${(t.vars || t).palette.background.paper}),
-                 linear-gradient(45deg, ${e(t.palette.primary.main, 0.04)} 0%, transparent 60%)` : `linear-gradient(0deg, ${(t.vars || t).palette.background.default}, ${(t.vars || t).palette.background.default}),
-                 linear-gradient(45deg, ${e(t.palette.primary.light, 0.06)} 0%, transparent 60%)`,
-            border: `1px solid ${a === "light" ? e(t.palette.divider, 0.25) : e(t.palette.divider, 0.4)}`,
-            "&::before": {
-              content: '""',
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              height: "1px",
-              background: a === "light" ? `linear-gradient(90deg, transparent, ${e(t.palette.common.white, 0.6)}, transparent)` : `linear-gradient(90deg, transparent, ${e(t.palette.common.white, 0.2)}, transparent)`,
-              borderRadius: `${r}px ${r}px 0 0`
-            },
-            "&::after": {
-              content: '""',
-              position: "absolute",
-              inset: "1px",
-              borderRadius: `${Number(r) - 1}px`,
-              background: a === "light" ? `linear-gradient(180deg, ${e(t.palette.common.white, 0.1)} 0%, transparent 50%)` : `linear-gradient(180deg, ${e(t.palette.common.white, 0.05)} 0%, transparent 50%)`,
-              pointerEvents: "none"
-            },
-            boxShadow: a === "light" ? `0 1px 3px ${e(t.palette.common.black, 0.08)}, 
-                 0 4px 12px ${e(t.palette.common.black, 0.05)}, 
-                 0 16px 24px ${e(t.palette.common.black, 0.03)}, 
-                 inset 0 1px 0 ${e(t.palette.common.white, 0.2)}` : `0 2px 8px ${e(t.palette.common.black, 0.3)}, 
-                 0 8px 24px ${e(t.palette.common.black, 0.2)}, 
-                 0 16px 32px ${e(t.palette.common.black, 0.1)}, 
-                 inset 0 1px 0 ${e(t.palette.common.white, 0.1)}`,
-            backdropFilter: "blur(20px) saturate(1.2)",
-            WebkitBackdropFilter: "blur(20px) saturate(1.2)",
-            transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)",
-            "&:hover": {
-              background: a === "light" ? `linear-gradient(0deg, ${(t.vars || t).palette.background.paper}, ${(t.vars || t).palette.background.paper}),
-                   linear-gradient(45deg, ${e(t.palette.primary.main, 0.08)} 0%, transparent 60%)` : `linear-gradient(0deg, ${(t.vars || t).palette.background.default}, ${(t.vars || t).palette.background.default}),
-                   linear-gradient(45deg, ${e(t.palette.primary.light, 0.1)} 0%, transparent 60%)`,
-              boxShadow: a === "light" ? `0 6px 18px ${e(t.palette.common.black, 0.12)}` : `0 10px 24px ${e(t.palette.common.black, 0.4)}`,
-              transform: "translateY(-1px)",
-              border: `1px solid ${a === "light" ? e(t.palette.primary.main, 0.2) : e(t.palette.primary.light, 0.25)}`
-            },
-            "&:active": {
-              transform: "translateY(-1px) scale(1.01)",
-              transition: "all 0.15s cubic-bezier(0.4, 0, 0.6, 1)",
-              boxShadow: a === "light" ? `0 2px 8px ${e(t.palette.common.black, 0.1)}, 
-                   0 8px 24px ${e(t.palette.common.black, 0.06)}, 
-                   inset 0 1px 0 ${e(t.palette.common.white, 0.2)}` : `0 4px 16px ${e(t.palette.common.black, 0.35)}, 
-                   0 12px 32px ${e(t.palette.common.black, 0.25)}, 
-                   inset 0 1px 0 ${e(t.palette.common.white, 0.1)}`
-            },
-            "&:focus-visible": {
-              outline: "none",
-              boxShadow: a === "light" ? `0 4px 12px ${e(t.palette.common.black, 0.12)}, 
-                   0 12px 32px ${e(t.palette.common.black, 0.08)}, 
-                   0 0 0 3px ${e(t.palette.primary.main, 0.3)}, 
-                   0 0 20px ${e(t.palette.primary.main, 0.2)}, 
-                   inset 0 1px 0 ${e(t.palette.common.white, 0.3)}` : `0 8px 24px ${e(t.palette.common.black, 0.4)}, 
-                   0 16px 48px ${e(t.palette.common.black, 0.3)}, 
-                   0 0 0 3px ${e(t.palette.primary.light, 0.4)}, 
-                   0 0 30px ${e(t.palette.primary.light, 0.3)}, 
-                   inset 0 1px 0 ${e(t.palette.common.white, 0.15)}`,
-              transform: "translateY(-1px)"
-            }
-          },
-          ref: s,
-          disableRipple: !0,
-          ...m,
-          fullWidth: !0,
-          children: /* @__PURE__ */ i.jsxs(
-            o,
-            {
-              sx: {
-                position: "relative",
-                zIndex: 2,
-                fontSize: 16,
-                background: `
-              ${(t.vars || t).palette.gradient.primary}, 
-              linear-gradient(135deg, 
-                ${a === "light" ? e(t.palette.primary.dark, 0.1) : e(t.palette.primary.light, 0.1)} 0%, 
-                transparent 50%, 
-                ${a === "light" ? e(t.palette.primary.main, 0.1) : e(t.palette.primary.light, 0.1)} 100%)
-            `,
-                backgroundSize: "100% 100%, 200% 200%",
-                backgroundClip: "text",
-                WebkitBackgroundClip: "text",
-                color: "transparent",
-                WebkitTextFillColor: "transparent",
-                transition: "all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-position 0.6s ease",
-                textShadow: a === "light" ? `0 1px 3px ${e(t.palette.common.black, 0.08)}, 
-                   0 2px 6px ${e(t.palette.primary.main, 0.1)}` : `0 2px 4px ${e(t.palette.common.black, 0.4)}, 
-                   0 4px 8px ${e(t.palette.primary.light, 0.2)}`,
-                letterSpacing: "0.025em",
-                lineHeight: 1.2,
-                WebkitFontSmoothing: "antialiased",
-                MozOsxFontSmoothing: "grayscale",
-                textRendering: "optimizeLegibility",
-                "&:hover": {
-                  backgroundPosition: "100% 0, 50% 50%",
-                  transform: "scale(1.02)",
-                  textShadow: a === "light" ? `0 2px 4px ${e(t.palette.common.black, 0.12)}, 
-                     0 4px 12px ${e(t.palette.primary.main, 0.15)}, 
-                     0 0 20px ${e(t.palette.primary.main, 0.1)}` : `0 3px 6px ${e(t.palette.common.black, 0.5)}, 
-                     0 6px 16px ${e(t.palette.primary.light, 0.25)}, 
-                     0 0 30px ${e(t.palette.primary.light, 0.15)}`
-                },
-                "button:hover &": {
-                  backgroundPosition: "100% 0, 50% 50%",
-                  transform: "scale(1.02)",
-                  textShadow: a === "light" ? `0 2px 4px ${e(t.palette.common.black, 0.12)}, 
-                     0 4px 12px ${e(t.palette.primary.main, 0.15)}, 
-                     0 0 20px ${e(t.palette.primary.main, 0.1)}` : `0 3px 6px ${e(t.palette.common.black, 0.5)}, 
-                     0 6px 16px ${e(t.palette.primary.light, 0.25)}, 
-                     0 0 30px ${e(t.palette.primary.light, 0.15)}`,
-                  animation: "textGlow 2s ease-in-out infinite alternate"
-                },
-                "@keyframes textGlow": {
-                  "0%": {
-                    filter: "brightness(1) contrast(1)"
-                  },
-                  "100%": {
-                    filter: "brightness(1.1) contrast(1.05)"
-                  }
-                }
-              },
-              children: [
-                p,
-                /* @__PURE__ */ i.jsx(
-                  o,
-                  {
-                    sx: {
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      right: 0,
-                      bottom: 0,
-                      background: a === "light" ? `linear-gradient(180deg, ${e(t.palette.common.white, 0.3)} 0%, transparent 50%)` : `linear-gradient(180deg, ${e(t.palette.common.white, 0.1)} 0%, transparent 50%)`,
-                      backgroundClip: "text",
-                      WebkitBackgroundClip: "text",
-                      color: "transparent",
-                      WebkitTextFillColor: "transparent",
-                      pointerEvents: "none",
-                      opacity: 0.6,
-                      transition: "opacity 0.3s ease",
-                      "button:hover &": {
-                        opacity: 0.8
-                      }
-                    },
-                    children: p
-                  }
-                )
-              ]
-            }
-          )
-        }
-      )
-    }
-  );
-};
-n.displayName = "SGlowButton";
+import { j as r } from "../jsx-runtime-OVHDjVDe.js";
+import { hslToRgb as d, Button as s } from "@mui/material";
+import { SMovingBorder as f } from "../s-moving-border/s-moving-border.js";
+import { blue as m } from "../theme/theme-primitives.js";
+const t = ({
+  borderRadius: e = 12,
+  children: i,
+  duration: n = 3e3,
+  width: o = "fit-content",
+  glowSize: a = 60,
+  glowColor: l = d(m[500]),
+  ...u
+}) => /* @__PURE__ */ r.jsx(
+  f,
+  {
+    width: o,
+    duration: n,
+    borderRadius: e,
+    glowSize: a,
+    glowColor: l,
+    padding: 0.3,
+    children: /* @__PURE__ */ r.jsx(
+      s,
+      {
+        sx: {
+          borderRadius: e,
+          width: o
+        },
+        disableRipple: !0,
+        ...u,
+        fullWidth: !0,
+        children: i
+      }
+    )
+  }
+);
+t.displayName = "SGlowButton";
 try {
-  n.displayName = "SGlowButton", n.__docgenInfo = { description: "A visually striking button with animated glowing border effects and gradient text.", displayName: "SGlowButton", props: { borderRadius: { defaultValue: { value: "12" }, description: "Border radius for the button (defaults to 12px)", name: "borderRadius", required: !1, type: { name: "string | number" } }, children: { defaultValue: null, description: "Button content", name: "children", required: !0, type: { name: "ReactNode" } }, duration: { defaultValue: { value: "6000" }, description: "Duration of the moving border animation in milliseconds (defaults to 6000ms)", name: "duration", required: !1, type: { name: "number" } } } };
+  t.displayName = "SGlowButton", t.__docgenInfo = { description: "A visually striking button with animated glowing border effects and gradient text.", displayName: "SGlowButton", props: { borderRadius: { defaultValue: { value: "12" }, description: "Border radius for the button (defaults to 12px)", name: "borderRadius", required: !1, type: { name: "string | number" } }, children: { defaultValue: null, description: "Button content", name: "children", required: !0, type: { name: "ReactNode" } }, duration: { defaultValue: { value: "3000" }, description: "Duration of the moving border animation in milliseconds (defaults to 6000ms)", name: "duration", required: !1, type: { name: "number" } }, width: { defaultValue: { value: "fit-content" }, description: "Button width (defaults to 'fit-content')", name: "width", required: !1, type: { name: "string" } }, glowSize: { defaultValue: { value: "60" }, description: "Size of the glow effect in pixels (defaults to 60)", name: "glowSize", required: !1, type: { name: "number" } }, glowColor: { defaultValue: { value: "hslToRgb(blue[500])" }, description: "Color of the glow effect (defaults to blue[500])", name: "glowColor", required: !1, type: { name: "string" } } } };
 } catch {
 }
 export {
-  n as default
+  t as default
 };

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

@@ -1,6 +1,6 @@
 import { j as e } from "../jsx-runtime-OVHDjVDe.js";
 import { useState as v, useEffect as P } from "react";
-import { Box as d, Stack as s, Divider as T, Typography as c, IconButton as H } from "@mui/material";
+import { Box as d, Stack as o, Divider as T, Typography as c, IconButton as H } from "@mui/material";
 import { SAvatar as G } from "../s-avatar/s-avatar.js";
 import { SImageModal as J } from "../s-image-modal/s-image-modal.js";
 import "../s-lazy-image/index.js";
@@ -12,18 +12,18 @@ const X = N(/* @__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"), Z = N(/* @__PURE__ */ e.jsx("path", {
   d: "M1 21h4V9H1zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73z"
-}), "ThumbUp"), ee = (o) => {
-  const m = /* @__PURE__ */ new Date(), w = typeof o == "string" ? new Date(o) : o, j = m.getTime() - w.getTime(), y = Math.floor(j / 1e3), u = Math.floor(y / 60), r = Math.floor(u / 60), i = Math.floor(r / 24), f = Math.floor(i / 7), h = Math.floor(i / 30), p = Math.floor(i / 365);
-  return y < 60 ? "just now" : u < 60 ? u === 1 ? "1 minute ago" : `${u} minutes ago` : r < 24 ? r === 1 ? "1 hour ago" : `${r} hours ago` : i < 7 ? i === 1 ? "1 day ago" : `${i} days ago` : f < 4 ? f === 1 ? "1 week ago" : `${f} weeks ago` : h < 12 ? h === 1 ? "1 month ago" : `${h} months ago` : p === 1 ? "1 year ago" : `${p} years ago`;
+}), "ThumbUp"), ee = (s) => {
+  const m = /* @__PURE__ */ new Date(), y = typeof s == "string" ? new Date(s) : s, j = m.getTime() - y.getTime(), w = Math.floor(j / 1e3), u = Math.floor(w / 60), i = Math.floor(u / 60), r = Math.floor(i / 24), f = Math.floor(r / 7), h = Math.floor(r / 30), p = Math.floor(r / 365);
+  return w < 60 ? "just now" : u < 60 ? u === 1 ? "1 minute ago" : `${u} minutes ago` : i < 24 ? i === 1 ? "1 hour ago" : `${i} hours ago` : r < 7 ? r === 1 ? "1 day ago" : `${r} days ago` : f < 4 ? f === 1 ? "1 week ago" : `${f} weeks ago` : h < 12 ? h === 1 ? "1 month ago" : `${h} months ago` : p === 1 ? "1 year ago" : `${p} years ago`;
 }, q = ({
-  id: o = Date.now(),
+  id: s = Date.now(),
   userName: m,
-  userAvatar: w,
+  userAvatar: y,
   rating: j,
-  reviewContent: y,
+  reviewContent: w,
   datetime: u,
-  images: r,
-  userHelpfulVote: i = null,
+  images: i,
+  userHelpfulVote: r = null,
   helpfulYes: f = 0,
   helpfulNo: h = 0,
   onHelpfulVote: p,
@@ -35,11 +35,11 @@ const X = N(/* @__PURE__ */ e.jsx("path", {
   loading: W = !1,
   sx: k = {}
 }) => {
-  const [_, I] = v(f), [U, V] = v(h), [x, M] = v(i), [Y, D] = v(!1), [A, S] = v(null), R = (a) => {
+  const [_, I] = v(f), [U, V] = v(h), [x, M] = v(r), [Y, D] = v(!1), [A, S] = v(null), R = (a) => {
     let n = a;
-    x === a ? (a === "yes" ? I((t) => Math.max(0, t - 1)) : V((t) => Math.max(0, t - 1)), M(null), n = null) : (x === "yes" ? I((t) => Math.max(0, t - 1)) : x === "no" && V((t) => Math.max(0, t - 1)), a === "yes" ? I((t) => t + 1) : V((t) => t + 1), M(a), n = a), p && p(o, n);
-  }, g = (r == null ? void 0 : r.map((a, n) => ({
-    id: `review-${o}-image-${n}`,
+    x === a ? (a === "yes" ? I((t) => Math.max(0, t - 1)) : V((t) => Math.max(0, t - 1)), M(null), n = null) : (x === "yes" ? I((t) => Math.max(0, t - 1)) : x === "no" && V((t) => Math.max(0, t - 1)), a === "yes" ? I((t) => t + 1) : V((t) => t + 1), M(a), n = a), p && p(s, n);
+  }, g = (i == null ? void 0 : i.map((a, n) => ({
+    id: `review-${s}-image-${n}`,
     type: "image",
     url: a,
     title: `Review image ${n + 1}`,
@@ -53,18 +53,18 @@ const X = N(/* @__PURE__ */ e.jsx("path", {
     S(a);
   }, F = ee(u);
   return P(() => {
-    M(i);
-  }, [i]), W ? /* @__PURE__ */ e.jsxs(d, { sx: { py: 2, ...k }, children: [
-    /* @__PURE__ */ e.jsxs(s, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+    M(r);
+  }, [r]), W ? /* @__PURE__ */ e.jsxs(d, { sx: { py: 2, ...k }, children: [
+    /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
       /* @__PURE__ */ e.jsx(l, { component: "rounded-avatar", width: b, height: b }),
       /* @__PURE__ */ e.jsxs(d, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ e.jsxs(s, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+        /* @__PURE__ */ e.jsxs(o, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
           /* @__PURE__ */ e.jsx(l, { variant: "text", width: 120, height: 20 }),
           /* @__PURE__ */ e.jsx(l, { variant: "text", width: 80, height: 16 })
         ] }),
         /* @__PURE__ */ e.jsx(d, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(l, { variant: "text", width: 100, height: 20 }) }),
         /* @__PURE__ */ e.jsx(l, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
-        /* @__PURE__ */ e.jsxs(s, { 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(l, { variant: "text", width: 140, height: 16, sx: { mr: 2 } }),
           /* @__PURE__ */ e.jsx(l, { component: "icon-button" }),
           /* @__PURE__ */ e.jsx(l, { variant: "text", width: 20, height: 16 }),
@@ -75,16 +75,16 @@ const X = N(/* @__PURE__ */ e.jsx("path", {
     ] }),
     C && /* @__PURE__ */ e.jsx(T, { sx: { mt: 2 } })
   ] }) : /* @__PURE__ */ e.jsxs(d, { sx: { py: 2, ...k }, children: [
-    /* @__PURE__ */ e.jsxs(s, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
-      /* @__PURE__ */ e.jsx(G, { avatar: w, name: m, size: b }),
+    /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 2, alignItems: "flex-start", children: [
+      /* @__PURE__ */ e.jsx(G, { avatar: y, name: m, size: b }),
       /* @__PURE__ */ e.jsxs(d, { sx: { flex: 1 }, children: [
-        /* @__PURE__ */ e.jsxs(s, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
+        /* @__PURE__ */ e.jsxs(o, { direction: "row", alignItems: "center", spacing: 2, mb: 1, children: [
           /* @__PURE__ */ e.jsx(c, { variant: "subtitle2", fontWeight: "600", children: m }),
-          /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(c, { variant: "caption", color: "text.secondary", children: F }) })
+          /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(c, { variant: "caption", children: F }) })
         ] }),
         /* @__PURE__ */ e.jsx(d, { sx: { mb: 1 }, children: /* @__PURE__ */ e.jsx(K, { value: j, max: z, readOnly: L, size: "small" }) }),
-        /* @__PURE__ */ e.jsx(c, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: y }),
-        r && r.length > 0 && /* @__PURE__ */ e.jsx(s, { direction: "row", spacing: 1, sx: { mb: 2, flexWrap: "wrap", gap: 1 }, children: r.map((a, n) => /* @__PURE__ */ e.jsx(
+        /* @__PURE__ */ e.jsx(c, { variant: "body2", sx: { mb: 2, lineHeight: 1.6 }, children: w }),
+        i && i.length > 0 && /* @__PURE__ */ e.jsx(o, { direction: "row", spacing: 1, sx: { mb: 2, flexWrap: "wrap", gap: 1 }, children: i.map((a, n) => /* @__PURE__ */ e.jsx(
           Q,
           {
             src: a,
@@ -106,8 +106,8 @@ const X = N(/* @__PURE__ */ e.jsx("path", {
           },
           n
         )) }),
-        $ && /* @__PURE__ */ e.jsxs(s, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
-          /* @__PURE__ */ e.jsx(c, { variant: "caption", color: "text.secondary", sx: { mr: 2 }, children: "Was this review helpful?" }),
+        $ && /* @__PURE__ */ e.jsxs(o, { direction: "row", spacing: 1, sx: { display: "inline-flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ e.jsx(c, { variant: "caption", sx: { mr: 2 }, children: "Was this review helpful?" }),
           /* @__PURE__ */ e.jsx(
             H,
             {
@@ -122,7 +122,7 @@ const X = N(/* @__PURE__ */ e.jsx("path", {
               children: /* @__PURE__ */ e.jsx(Z, { fontSize: "small" })
             }
           ),
-          /* @__PURE__ */ e.jsx(c, { variant: "caption", color: "text.secondary", children: _ }),
+          /* @__PURE__ */ e.jsx(c, { variant: "caption", children: _ }),
           /* @__PURE__ */ e.jsx(
             H,
             {
@@ -138,7 +138,7 @@ const X = N(/* @__PURE__ */ e.jsx("path", {
               children: /* @__PURE__ */ e.jsx(X, { fontSize: "small" })
             }
           ),
-          /* @__PURE__ */ e.jsx(c, { variant: "caption", color: "text.secondary", children: U })
+          /* @__PURE__ */ e.jsx(c, { variant: "caption", children: U })
         ] })
       ] })
     ] }),

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

@@ -31,11 +31,11 @@ const o = ({
 };
 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: '"typography"' }, { value: '"button"' }, { value: '"checkbox"' }, { value: '"radio-button"' }, { value: '"avatar"' }, { value: '"rounded-avatar"' }, { value: '"icon-button"' }, { value: '"title-typography"' }] } } } };
+  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: '"radio-button"' }, { value: '"avatar"' }, { 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: '"typography"' }, { value: '"button"' }, { value: '"checkbox"' }, { value: '"radio-button"' }, { value: '"avatar"' }, { value: '"rounded-avatar"' }, { value: '"icon-button"' }, { value: '"title-typography"' }] } } } };
+  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: '"radio-button"' }, { value: '"avatar"' }, { value: '"rounded-avatar"' }, { value: '"icon-button"' }, { value: '"title-typography"' }] } } } };
 } catch {
 }
 export {

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

@@ -34,11 +34,11 @@ const r = (t) => {
 };
 r.displayName = "StripeTextField";
 try {
-  r.displayName = "StripeTextField", r.__docgenInfo = { description: "Generic Stripe text field component that integrates Stripe Elements with Material-UI styling.", displayName: "StripeTextField", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardExpiryElementProps | CardNumberElementProps | AuBankAccountElementProps | CardCvcElementProps | FpxBankElementProps | IbanElementProps | IdealBankElementProps" } }, 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) | ((event: StripeCardNumberElementChangeEvent) => any) | ... 5 more ..." } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "StripeElement" } } } };
+  r.displayName = "StripeTextField", r.__docgenInfo = { description: "Generic Stripe text field component that integrates Stripe Elements with Material-UI styling.", displayName: "StripeTextField", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardNumberElementProps | CardExpiryElementProps | AuBankAccountElementProps | CardCvcElementProps | FpxBankElementProps | IbanElementProps | IdealBankElementProps" } }, 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) | ((event: StripeCardExpiryElementChangeEvent) => any) | ... 5 more ..." } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "StripeElement" } } } };
 } catch {
 }
 try {
-  sstripe.displayName = "sstripe", sstripe.__docgenInfo = { description: "Generic Stripe text field component that integrates Stripe Elements with Material-UI styling.", displayName: "sstripe", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardExpiryElementProps | CardNumberElementProps | AuBankAccountElementProps | CardCvcElementProps | FpxBankElementProps | IbanElementProps | IdealBankElementProps" } }, 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) | ((event: StripeCardNumberElementChangeEvent) => any) | ... 5 more ..." } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "StripeElement" } } } };
+  sstripe.displayName = "sstripe", sstripe.__docgenInfo = { description: "Generic Stripe text field component that integrates Stripe Elements with Material-UI styling.", displayName: "sstripe", props: { inputProps: { defaultValue: null, description: "Props passed directly to the Stripe Element", name: "inputProps", required: !1, type: { name: "CardNumberElementProps | CardExpiryElementProps | AuBankAccountElementProps | CardCvcElementProps | FpxBankElementProps | IbanElementProps | IdealBankElementProps" } }, 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) | ((event: StripeCardExpiryElementChangeEvent) => any) | ... 5 more ..." } }, stripeElement: { defaultValue: null, description: "The Stripe Element component to render", name: "stripeElement", required: !1, type: { name: "StripeElement" } } } };
 } catch {
 }
 export {

package/dist/s-tabs/s-tab-panel.js

@@ -24,11 +24,11 @@ const t = u(
 );
 t.displayName = "STabPanel";
 try {
-  t.displayName = "STabPanel", t.__docgenInfo = { description: "Individual tab content panel component with advanced mounting controls.", displayName: "STabPanel", props: { children: { defaultValue: null, description: "Content to display in the tab panel", name: "children", required: !1, type: { name: "ReactNode" } }, index: { defaultValue: null, description: "Index of this specific tab panel (0-based)", name: "index", required: !0, type: { name: "number" } }, value: { defaultValue: null, description: "Current active tab index from the parent tabs component", name: "value", required: !0, type: { name: "number" } }, keepMounted: { defaultValue: { value: "false" }, description: "Keep the panel mounted in the DOM when not active", name: "keepMounted", required: !1, type: { name: "boolean" } } } };
+  t.displayName = "STabPanel", t.__docgenInfo = { description: "Individual tab content panel component with advanced mounting controls.", displayName: "STabPanel", props: { children: { defaultValue: null, description: "Content to display in the tab panel", name: "children", required: !1, type: { name: "ReactNode" } }, value: { defaultValue: null, description: "Current active tab index from the parent tabs component", name: "value", required: !0, type: { name: "number" } }, index: { defaultValue: null, description: "Index of this specific tab panel (0-based)", name: "index", required: !0, type: { name: "number" } }, keepMounted: { defaultValue: { value: "false" }, description: "Keep the panel mounted in the DOM when not active", name: "keepMounted", required: !1, type: { name: "boolean" } } } };
 } catch {
 }
 try {
-  stabpanel.displayName = "stabpanel", stabpanel.__docgenInfo = { description: "Individual tab content panel component with advanced mounting controls.", displayName: "stabpanel", props: { children: { defaultValue: null, description: "Content to display in the tab panel", name: "children", required: !1, type: { name: "ReactNode" } }, index: { defaultValue: null, description: "Index of this specific tab panel (0-based)", name: "index", required: !0, type: { name: "number" } }, value: { defaultValue: null, description: "Current active tab index from the parent tabs component", name: "value", required: !0, type: { name: "number" } }, keepMounted: { defaultValue: { value: "false" }, description: "Keep the panel mounted in the DOM when not active", name: "keepMounted", required: !1, type: { name: "boolean" } } } };
+  stabpanel.displayName = "stabpanel", stabpanel.__docgenInfo = { description: "Individual tab content panel component with advanced mounting controls.", displayName: "stabpanel", props: { children: { defaultValue: null, description: "Content to display in the tab panel", name: "children", required: !1, type: { name: "ReactNode" } }, value: { defaultValue: null, description: "Current active tab index from the parent tabs component", name: "value", required: !0, type: { name: "number" } }, index: { defaultValue: null, description: "Index of this specific tab panel (0-based)", name: "index", required: !0, type: { name: "number" } }, keepMounted: { defaultValue: { value: "false" }, description: "Keep the panel mounted in the DOM when not active", name: "keepMounted", required: !1, type: { name: "boolean" } } } };
 } catch {
 }
 export {