@solostylist/ui-kit 1.0.175 → 1.0.176

package/dist/s-gallery/s-gallery.js

@@ -1,41 +1,40 @@
-import { j as a } from "../jsx-runtime-OVHDjVDe.js";
-import { useRef as L, useState as g, useEffect as v, useId as N } from "react";
-import { Box as u, Paper as j, Skeleton as R, Typography as _ } from "@mui/material";
-import { AnimatePresence as q, motion as k } from "framer-motion";
-import { SImageModal as A } from "../s-image-modal/s-image-modal.js";
-import "../s-lazy-image/index.js";
-import $ from "../s-lazy-image/s-lazy-image.js";
-const b = ({ item: t, sx: o, onClick: r }) => {
-  const e = L(null), [n, s] = g(!1), [p, m] = g(!0);
-  return v(() => {
+import { j as t } from "../jsx-runtime-tc70JA_2.js";
+import { useState as g, useId as $, useEffect as b, useRef as D } from "react";
+import { Box as p, Paper as w, Skeleton as E, Typography as j } from "@mui/material";
+import { AnimatePresence as M, motion as I } from "framer-motion";
+import { SImageModal as V } from "../s-image-modal/s-image-modal.js";
+import F from "../s-lazy-image/s-lazy-image.js";
+const P = ({ item: s, sx: o, onClick: r }) => {
+  const e = D(null), [n, a] = g(!1), [u, h] = g(!0);
+  return b(() => {
     const l = {
       root: null,
       rootMargin: "50px",
       // Start loading 50px before entering viewport
       threshold: 0.1
       // Trigger when 10% of video is visible
-    }, h = new IntersectionObserver((d) => {
-      d.forEach((i) => s(i.isIntersecting));
+    }, f = new IntersectionObserver((c) => {
+      c.forEach((i) => a(i.isIntersecting));
     }, l);
-    return e.current && h.observe(e.current), () => {
-      e.current && h.unobserve(e.current);
+    return e.current && f.observe(e.current), () => {
+      e.current && f.unobserve(e.current);
     };
-  }, []), v(() => {
+  }, []), b(() => {
     let l = !0;
     return n ? (async () => {
       if (!(!e.current || !n || !l))
         try {
-          e.current.readyState >= 3 ? (m(!1), await e.current.play()) : (m(!0), await new Promise((d) => {
-            e.current && (e.current.oncanplay = () => d());
-          }), l && (m(!1), await e.current.play()));
-        } catch (d) {
-          console.warn("Video playback failed:", d);
+          e.current.readyState >= 3 ? (h(!1), await e.current.play()) : (h(!0), await new Promise((c) => {
+            e.current && (e.current.oncanplay = () => c());
+          }), l && (h(!1), await e.current.play()));
+        } catch (c) {
+          console.warn("Video playback failed:", c);
         }
     })() : e.current && e.current.pause(), () => {
       l = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
     };
-  }, [n]), t.type === "video" ? /* @__PURE__ */ a.jsxs(
-    u,
+  }, [n]), s.type === "video" ? /* @__PURE__ */ t.jsxs(
+    p,
     {
       sx: {
         position: "relative",
@@ -45,8 +44,8 @@ const b = ({ item: t, sx: o, onClick: r }) => {
         ...o
       },
       children: [
-        /* @__PURE__ */ a.jsx(
-          u,
+        /* @__PURE__ */ t.jsx(
+          p,
           {
             component: "video",
             ref: e,
@@ -59,17 +58,17 @@ const b = ({ item: t, sx: o, onClick: r }) => {
               width: "100%",
               height: "100%",
               objectFit: "cover",
-              opacity: p ? 0.8 : 1,
+              opacity: u ? 0.8 : 1,
               transition: "opacity 0.2s",
               transform: "translateZ(0)",
               willChange: "transform",
               display: "block"
             },
-            children: /* @__PURE__ */ a.jsx("source", { src: t.url, type: "video/mp4" })
+            children: /* @__PURE__ */ t.jsx("source", { src: s.url, type: "video/mp4" })
           }
         ),
-        p && /* @__PURE__ */ a.jsx(
-          u,
+        u && /* @__PURE__ */ t.jsx(
+          p,
           {
             sx: {
               position: "absolute",
@@ -79,8 +78,8 @@ const b = ({ item: t, sx: o, onClick: r }) => {
               justifyContent: "center",
               bgcolor: "action.disabled"
             },
-            children: /* @__PURE__ */ a.jsx(
-              u,
+            children: /* @__PURE__ */ t.jsx(
+              p,
               {
                 sx: {
                   width: 24,
@@ -100,15 +99,15 @@ const b = ({ item: t, sx: o, onClick: r }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ a.jsx(u, { onClick: r, sx: { width: "100%", height: "100%", ...o }, children: /* @__PURE__ */ a.jsx(
-    $,
+  ) : /* @__PURE__ */ t.jsx(p, { onClick: r, sx: { width: "100%", height: "100%", ...o }, children: /* @__PURE__ */ t.jsx(
+    F,
     {
-      src: t.url,
-      alt: t.title || "",
+      src: s.url,
+      alt: s.title || "",
       width: "100%",
       height: "100%",
       style: {
-        objectFit: o != null && o.objectFit ? o.objectFit : "cover",
+        objectFit: o?.objectFit ? o.objectFit : "cover",
         cursor: r ? "pointer" : "default",
         display: "block",
         width: "100%",
@@ -116,54 +115,54 @@ const b = ({ item: t, sx: o, onClick: r }) => {
       }
     }
   ) });
-}, C = (t, o) => {
+}, k = (s, o) => {
   let r = 1, e = 2;
   switch (o) {
     case "grid":
       r = 1, e = 2;
       break;
     case "masonry":
-      r = 1, e = t % 3 === 0 ? 3 : t % 2 === 0 ? 2 : 4;
+      r = 1, e = s % 3 === 0 ? 3 : s % 2 === 0 ? 2 : 4;
       break;
     case "spotlight":
-      t === 0 ? (r = 2, e = 4) : (r = 1, e = 2);
+      s === 0 ? (r = 2, e = 4) : (r = 1, e = 2);
       break;
     case "featured":
-      t === 0 ? (r = 2, e = 6) : (r = 1, e = 2);
+      s === 0 ? (r = 2, e = 6) : (r = 1, e = 2);
       break;
     case "highlight":
-      t === 0 ? (r = 3, e = 6) : (r = 1, e = 2);
+      s === 0 ? (r = 3, e = 6) : (r = 1, e = 2);
       break;
     case "custom":
       r = 1, e = 2;
       break;
   }
   return { colSpan: r, rowSpan: e };
-}, S = (t, o) => o === "custom" ? t : t.map((r, e) => {
-  const { colSpan: n, rowSpan: s } = C(e, o);
-  return { ...r, colSpan: n, rowSpan: s };
-}), w = ({
-  mediaItems: t,
+}, S = (s, o) => o === "custom" ? s : s.map((r, e) => {
+  const { colSpan: n, rowSpan: a } = k(e, o);
+  return { ...r, colSpan: n, rowSpan: a };
+}), A = ({
+  mediaItems: s,
   variant: o = "masonry",
   loading: r = !1,
   skeletonCount: e = 6
 }) => {
-  const [n, s] = g(null), [p, m] = g(() => S(t, o)), [l, h] = g(!1), d = N();
-  return v(() => {
-    m(S(t, o));
-  }, [t, o]), /* @__PURE__ */ a.jsxs(u, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
-    /* @__PURE__ */ a.jsx(
-      A,
+  const [n, a] = g(null), [u, h] = g(() => S(s, o)), [l, f] = g(!1), c = $();
+  return b(() => {
+    h(S(s, o));
+  }, [s, o]), /* @__PURE__ */ t.jsxs(p, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
+    /* @__PURE__ */ t.jsx(
+      V,
       {
         selectedItem: n,
         isOpen: !!n,
-        onClose: () => s(null),
-        onItemChange: s,
-        mediaItems: p
+        onClose: () => a(null),
+        onItemChange: a,
+        mediaItems: u
       }
     ),
-    /* @__PURE__ */ a.jsx(q, { mode: "wait", children: !n && /* @__PURE__ */ a.jsx(
-      k.div,
+    /* @__PURE__ */ t.jsx(M, { mode: "wait", children: !n && /* @__PURE__ */ t.jsx(
+      I.div,
       {
         initial: "hidden",
         animate: "visible",
@@ -176,8 +175,8 @@ const b = ({ item: t, sx: o, onClick: r }) => {
             // Stagger child animations
           }
         },
-        children: /* @__PURE__ */ a.jsx(
-          u,
+        children: /* @__PURE__ */ t.jsx(
+          p,
           {
             sx: {
               display: "grid",
@@ -191,10 +190,10 @@ const b = ({ item: t, sx: o, onClick: r }) => {
               position: "relative"
               // Ensure proper stacking context
             },
-            children: r ? Array.from({ length: e }).map((i, c) => {
-              const { colSpan: x, rowSpan: y } = C(c, o);
-              return /* @__PURE__ */ a.jsx(
-                j,
+            children: r ? Array.from({ length: e }).map((i, d) => {
+              const { colSpan: x, rowSpan: y } = k(d, o);
+              return /* @__PURE__ */ t.jsx(
+                w,
                 {
                   sx: {
                     position: "relative",
@@ -203,8 +202,8 @@ const b = ({ item: t, sx: o, onClick: r }) => {
                     gridRow: `span ${y}`,
                     gridColumn: `span ${x}`
                   },
-                  children: /* @__PURE__ */ a.jsx(
-                    R,
+                  children: /* @__PURE__ */ t.jsx(
+                    E,
                     {
                       variant: "rectangular",
                       animation: "wave",
@@ -216,13 +215,13 @@ const b = ({ item: t, sx: o, onClick: r }) => {
                     }
                   )
                 },
-                c
+                d
               );
-            }) : p.map((i, c) => /* @__PURE__ */ a.jsx(
-              k.div,
+            }) : u.map((i, d) => /* @__PURE__ */ t.jsx(
+              I.div,
               {
-                layoutId: `media-${i.id}-${d}`,
-                onClick: () => !l && s(i),
+                layoutId: `media-${i.id}-${c}`,
+                onClick: () => !l && a(i),
                 variants: {
                   hidden: { y: 50, scale: 0.9, opacity: 0 },
                   visible: {
@@ -233,7 +232,7 @@ const b = ({ item: t, sx: o, onClick: r }) => {
                       type: "spring",
                       stiffness: 350,
                       damping: 25,
-                      delay: c * 0.05
+                      delay: d * 0.05
                     }
                   }
                 },
@@ -241,13 +240,13 @@ const b = ({ item: t, sx: o, onClick: r }) => {
                 drag: !0,
                 dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
                 dragElastic: 1,
-                onDragStart: () => h(!0),
+                onDragStart: () => f(!0),
                 onDragEnd: (x, y) => {
-                  h(!1);
-                  const I = y.offset.x + y.offset.y;
-                  if (Math.abs(I) > 50) {
-                    const f = [...p], V = f[c], M = I > 0 ? Math.min(c + 1, p.length - 1) : Math.max(c - 1, 0);
-                    f.splice(c, 1), f.splice(M, 0, V), m(f);
+                  f(!1);
+                  const v = y.offset.x + y.offset.y;
+                  if (Math.abs(v) > 50) {
+                    const m = [...u], C = m[d], R = v > 0 ? Math.min(d + 1, u.length - 1) : Math.max(d - 1, 0);
+                    m.splice(d, 1), m.splice(R, 0, C), h(m);
                   }
                 },
                 style: {
@@ -255,8 +254,8 @@ const b = ({ item: t, sx: o, onClick: r }) => {
                   gridRow: i.rowSpan ? `span ${i.rowSpan}` : "span 2",
                   gridColumn: i.colSpan ? `span ${i.colSpan}` : "span 1"
                 },
-                children: /* @__PURE__ */ a.jsxs(
-                  j,
+                children: /* @__PURE__ */ t.jsxs(
+                  w,
                   {
                     sx: {
                       position: "relative",
@@ -271,16 +270,16 @@ const b = ({ item: t, sx: o, onClick: r }) => {
                       }
                     },
                     children: [
-                      /* @__PURE__ */ a.jsx(
-                        b,
+                      /* @__PURE__ */ t.jsx(
+                        P,
                         {
                           item: i,
                           sx: { position: "absolute", inset: 0, width: "100%", height: "100%" },
-                          onClick: () => !l && s(i)
+                          onClick: () => !l && a(i)
                         }
                       ),
-                      (i.title || i.desc) && /* @__PURE__ */ a.jsxs(
-                        u,
+                      (i.title || i.desc) && /* @__PURE__ */ t.jsxs(
+                        p,
                         {
                           className: "hover-overlay",
                           sx: {
@@ -297,8 +296,8 @@ const b = ({ item: t, sx: o, onClick: r }) => {
                             backdropFilter: "blur(8px)"
                           },
                           children: [
-                            i.title && /* @__PURE__ */ a.jsx(
-                              _,
+                            i.title && /* @__PURE__ */ t.jsx(
+                              j,
                               {
                                 variant: "subtitle2",
                                 sx: {
@@ -310,8 +309,8 @@ const b = ({ item: t, sx: o, onClick: r }) => {
                                 children: i.title
                               }
                             ),
-                            i.desc && /* @__PURE__ */ a.jsx(
-                              _,
+                            i.desc && /* @__PURE__ */ t.jsx(
+                              j,
                               {
                                 variant: "caption",
                                 sx: {
@@ -331,7 +330,7 @@ const b = ({ item: t, sx: o, onClick: r }) => {
                   }
                 )
               },
-              `${i.id}-${d}`
+              `${i.id}-${c}`
             ))
           }
         )
@@ -339,31 +338,9 @@ const b = ({ item: t, sx: o, onClick: r }) => {
     ) })
   ] });
 };
-w.displayName = "SGallery";
-try {
-  b.displayName = "MediaItem", b.__docgenInfo = { description: `MediaItem - Renders individual media items (images or videos) with optimized loading and playback.
-
-For videos:
-- Intersection Observer for viewport-based autoplay/pause
-- Buffering state management with loading indicator
-- Muted autoplay with loop for engagement
-- Preloading for smooth playback
-
-For images:
-- Lazy loading via SLazyImage component
-- Optimized object-fit handling`, displayName: "MediaItem", props: {} };
-} catch {
-}
-try {
-  w.displayName = "SGallery", w.__docgenInfo = { description: "A sophisticated media gallery with drag-and-drop reordering, modal viewing, and multiple layout variants.", displayName: "SGallery", props: { mediaItems: { defaultValue: null, description: "Array of media items to display in the gallery", name: "mediaItems", required: !0, type: { name: "MediaItemType[]" } }, variant: { defaultValue: { value: "masonry" }, description: "Layout variant to use (default: 'masonry')", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"grid"' }, { value: '"masonry"' }, { value: '"spotlight"' }, { value: '"featured"' }, { value: '"highlight"' }, { value: '"custom"' }] } }, loading: { defaultValue: { value: "false" }, description: "Loading state - shows skeleton placeholders matching the variant layout", name: "loading", required: !1, type: { name: "boolean" } }, skeletonCount: { defaultValue: { value: "6" }, description: "Number of skeleton items to show when loading (default: 6)", name: "skeletonCount", required: !1, type: { name: "number" } } } };
-} catch {
-}
-try {
-  sgallery.displayName = "sgallery", sgallery.__docgenInfo = { description: "A sophisticated media gallery with drag-and-drop reordering, modal viewing, and multiple layout variants.", displayName: "sgallery", props: { mediaItems: { defaultValue: null, description: "Array of media items to display in the gallery", name: "mediaItems", required: !0, type: { name: "MediaItemType[]" } }, variant: { defaultValue: { value: "masonry" }, description: "Layout variant to use (default: 'masonry')", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"grid"' }, { value: '"masonry"' }, { value: '"spotlight"' }, { value: '"featured"' }, { value: '"highlight"' }, { value: '"custom"' }] } }, loading: { defaultValue: { value: "false" }, description: "Loading state - shows skeleton placeholders matching the variant layout", name: "loading", required: !1, type: { name: "boolean" } }, skeletonCount: { defaultValue: { value: "6" }, description: "Number of skeleton items to show when loading (default: 6)", name: "skeletonCount", required: !1, type: { name: "number" } } } };
-} catch {
-}
+A.displayName = "SGallery";
 export {
-  b as MediaItem,
-  w as SGallery,
-  w as default
+  P as MediaItem,
+  A as SGallery,
+  A as default
 };

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

@@ -1,47 +1,43 @@
-import { j as i } from "../jsx-runtime-OVHDjVDe.js";
-import { hslToRgb as s, Button as f } from "@mui/material";
-import { SMovingBorder as p } from "../s-moving-border/s-moving-border.js";
-import { blue as m } from "../theme/theme-primitives.js";
-const t = ({
-  borderRadius: e = 12,
-  children: a,
+import { j as e } from "../jsx-runtime-tc70JA_2.js";
+import { hslToRgb as s, Button as u } from "@mui/material";
+import { blue as f } from "../theme/theme-primitives.js";
+import { SMovingBorder as x } from "../s-moving-border/s-moving-border.js";
+const a = ({
+  borderRadius: t = 12,
+  children: l,
   duration: n = 3e3,
   width: o = "fit-content",
   height: r = "60px",
-  glowSize: l = 60,
-  glowColor: u = s(m[500]),
-  ...d
-}) => /* @__PURE__ */ i.jsx(
-  p,
+  glowSize: p = 60,
+  glowColor: i = s(f[500]),
+  ...m
+}) => /* @__PURE__ */ e.jsx(
+  x,
   {
     width: o,
     height: r,
     duration: n,
-    borderRadius: e,
-    glowSize: l,
-    glowColor: u,
+    borderRadius: t,
+    glowSize: p,
+    glowColor: i,
     padding: 0.3,
-    children: /* @__PURE__ */ i.jsx(
-      f,
+    children: /* @__PURE__ */ e.jsx(
+      u,
       {
         sx: {
-          borderRadius: e,
+          borderRadius: t,
           width: o,
           height: r
         },
         disableRipple: !0,
-        ...d,
+        ...m,
         fullWidth: !0,
-        children: a
+        children: l
       }
     )
   }
 );
-t.displayName = "SGlowButton";
-try {
-  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" } }, height: { defaultValue: { value: "60px" }, description: "Button height (defaults to '60px')", name: "height", 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 {
-}
+a.displayName = "SGlowButton";
 export {
-  t as default
+  a as default
 };

package/dist/s-gradient-icon/s-gradient-icon.js

@@ -1,91 +1,81 @@
-import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-const s = ({
-  hovered: o = !1,
-  IconComponent: u,
-  sx: p,
-  strokeWidth: h = 0,
-  gradientTheme: g = "blue-cyan",
-  customGradient: n,
-  gradientDirection: m = "diagonal",
-  animationDuration: v = 300,
-  animationEasing: y = "ease",
-  autoHover: f = !1,
-  gradientId: x,
-  alwaysGradient: c = !1,
-  fallbackColor: b,
-  ...t
+import { j as e } from "../jsx-runtime-tc70JA_2.js";
+const C = ({
+  hovered: x = !1,
+  IconComponent: n,
+  sx: c,
+  strokeWidth: p = 0,
+  gradientTheme: m = "blue-cyan",
+  customGradient: t,
+  gradientDirection: a = "diagonal",
+  animationDuration: y = 300,
+  animationEasing: h = "ease",
+  autoHover: i = !1,
+  gradientId: u,
+  alwaysGradient: f = !1,
+  fallbackColor: g,
+  ...d
 }) => {
-  if (!u)
+  if (!n)
     return null;
-  const l = x || `gradient-${Math.random().toString(36).substr(2, 9)}`, a = {
+  const o = u || `gradient-${Math.random().toString(36).substr(2, 9)}`, s = {
     "blue-cyan": { start: "#1469be", end: "#43ecff" },
     "purple-pink": { start: "#8b5cf6", end: "#ec4899" },
     "orange-red": { start: "#f97316", end: "#ef4444" },
     "green-teal": { start: "#10b981", end: "#06b6d4" },
     "indigo-purple": { start: "#6366f1", end: "#a855f7" },
-    custom: n ? {
-      start: n.startColor,
-      end: n.endColor,
-      middle: n.middleColor,
-      middlePos: n.middlePosition || 0.5
+    custom: t ? {
+      start: t.startColor,
+      end: t.endColor,
+      middle: t.middleColor,
+      middlePos: t.middlePosition || 0.5
     } : { start: "#1469be", end: "#43ecff" }
-  }[g], r = {
+  }[m], r = {
     horizontal: { x1: "0", y1: "0", x2: "1", y2: "0" },
     vertical: { x1: "0", y1: "0", x2: "0", y2: "1" },
     diagonal: { x1: "0", y1: "0", x2: "1", y2: "1" },
     radial: { x1: "0.5", y1: "0.5", x2: "0.5", y2: "0.5" }
-  }[m], q = c || o ? `url(#${l})` : b || "var(--s-palette-text-primary)";
+  }[a], j = f || x ? `url(#${o})` : g || "var(--s-palette-text-primary)";
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("svg", { width: 0, height: 0, children: m === "radial" ? /* @__PURE__ */ e.jsxs("radialGradient", { id: l, cx: "50%", cy: "50%", r: "50%", children: [
-      /* @__PURE__ */ e.jsx("stop", { offset: "0%", stopColor: a.start }),
-      a.middle && /* @__PURE__ */ e.jsx("stop", { offset: `${(a.middlePos || 0.5) * 100}%`, stopColor: a.middle }),
-      /* @__PURE__ */ e.jsx("stop", { offset: "100%", stopColor: a.end })
-    ] }) : /* @__PURE__ */ e.jsxs("linearGradient", { id: l, x1: r.x1, y1: r.y1, x2: r.x2, y2: r.y2, children: [
-      /* @__PURE__ */ e.jsx("stop", { offset: "0%", stopColor: a.start }),
-      a.middle && /* @__PURE__ */ e.jsx("stop", { offset: `${(a.middlePos || 0.5) * 100}%`, stopColor: a.middle }),
-      /* @__PURE__ */ e.jsx("stop", { offset: "100%", stopColor: a.end })
+    /* @__PURE__ */ e.jsx("svg", { width: 0, height: 0, children: a === "radial" ? /* @__PURE__ */ e.jsxs("radialGradient", { id: o, cx: "50%", cy: "50%", r: "50%", children: [
+      /* @__PURE__ */ e.jsx("stop", { offset: "0%", stopColor: s.start }),
+      s.middle && /* @__PURE__ */ e.jsx("stop", { offset: `${(s.middlePos || 0.5) * 100}%`, stopColor: s.middle }),
+      /* @__PURE__ */ e.jsx("stop", { offset: "100%", stopColor: s.end })
+    ] }) : /* @__PURE__ */ e.jsxs("linearGradient", { id: o, x1: r.x1, y1: r.y1, x2: r.x2, y2: r.y2, children: [
+      /* @__PURE__ */ e.jsx("stop", { offset: "0%", stopColor: s.start }),
+      s.middle && /* @__PURE__ */ e.jsx("stop", { offset: `${(s.middlePos || 0.5) * 100}%`, stopColor: s.middle }),
+      /* @__PURE__ */ e.jsx("stop", { offset: "100%", stopColor: s.end })
     ] }) }),
     /* @__PURE__ */ e.jsx(
-      u,
+      n,
       {
-        ...t,
+        ...d,
         sx: {
-          fill: q,
-          strokeWidth: h,
-          transition: `fill ${v}ms ${y}`,
+          fill: j,
+          strokeWidth: p,
+          transition: `fill ${y}ms ${h}`,
           // Auto hover functionality
-          ...f && {
+          ...i && {
             "&:hover": {
-              fill: `url(#${l})`
+              fill: `url(#${o})`
             }
           },
-          ...p
+          ...c
           // Allow custom styling to override defaults
         },
-        ...f && !c && {
-          onMouseEnter: (d) => {
-            var i;
-            (i = t.onMouseEnter) == null || i.call(t, d);
+        ...i && !f && {
+          onMouseEnter: (l) => {
+            d.onMouseEnter?.(l);
           },
-          onMouseLeave: (d) => {
-            var i;
-            (i = t.onMouseLeave) == null || i.call(t, d);
+          onMouseLeave: (l) => {
+            d.onMouseLeave?.(l);
           }
         }
       }
     )
   ] });
 };
-s.displayName = "SGradientIcon";
-try {
-  s.displayName = "SGradientIcon", s.__docgenInfo = { description: "A customizable icon component that applies gradient effects with multiple themes and animations.", displayName: "SGradientIcon", props: { hovered: { defaultValue: { value: "false" }, description: "Whether the icon should show the gradient fill (hover state)", name: "hovered", required: !1, type: { name: "boolean" } }, IconComponent: { defaultValue: null, description: "The Material-UI icon component to render with gradient effect", name: "IconComponent", required: !0, type: { name: "IconComponent" } }, sx: { defaultValue: null, description: "Additional styling props", name: "sx", required: !1, type: { name: "SxProps" } }, strokeWidth: { defaultValue: { value: "0" }, description: "Stroke width for the icon (default: 0)", name: "strokeWidth", required: !1, type: { name: "number" } }, gradientTheme: { defaultValue: { value: "blue-cyan" }, description: "Predefined gradient theme (default: 'blue-cyan')", name: "gradientTheme", required: !1, type: { name: "enum", value: [{ value: '"custom"' }, { value: '"blue-cyan"' }, { value: '"purple-pink"' }, { value: '"orange-red"' }, { value: '"green-teal"' }, { value: '"indigo-purple"' }] } }, customGradient: { defaultValue: null, description: "Custom gradient colors when theme is 'custom'", name: "customGradient", required: !1, type: { name: "CustomGradient" } }, gradientDirection: { defaultValue: { value: "diagonal" }, description: "Direction of the gradient (default: 'diagonal')", name: "gradientDirection", required: !1, type: { name: "enum", value: [{ value: '"horizontal"' }, { value: '"vertical"' }, { value: '"diagonal"' }, { value: '"radial"' }] } }, animationDuration: { defaultValue: { value: "300" }, description: "Animation duration in milliseconds (default: 300)", name: "animationDuration", required: !1, type: { name: "number" } }, animationEasing: { defaultValue: { value: "ease" }, description: "Animation easing function (default: 'ease')", name: "animationEasing", required: !1, type: { name: "enum", value: [{ value: '"ease"' }, { value: '"ease-in"' }, { value: '"ease-in-out"' }, { value: '"ease-out"' }, { value: '"linear"' }] } }, autoHover: { defaultValue: { value: "false" }, description: "Whether to automatically detect hover state (default: false)", name: "autoHover", required: !1, type: { name: "boolean" } }, gradientId: { defaultValue: null, description: "Unique identifier for the gradient (auto-generated if not provided)", name: "gradientId", required: !1, type: { name: "string" } }, alwaysGradient: { defaultValue: { value: "false" }, description: "Whether to always show gradient (overrides hovered state)", name: "alwaysGradient", required: !1, type: { name: "boolean" } }, fallbackColor: { defaultValue: null, description: "Fallback color when gradient is not shown", name: "fallbackColor", required: !1, type: { name: "string" } } } };
-} catch {
-}
-try {
-  sgradienticon.displayName = "sgradienticon", sgradienticon.__docgenInfo = { description: "A customizable icon component that applies gradient effects with multiple themes and animations.", displayName: "sgradienticon", props: { hovered: { defaultValue: { value: "false" }, description: "Whether the icon should show the gradient fill (hover state)", name: "hovered", required: !1, type: { name: "boolean" } }, IconComponent: { defaultValue: null, description: "The Material-UI icon component to render with gradient effect", name: "IconComponent", required: !0, type: { name: "IconComponent" } }, sx: { defaultValue: null, description: "Additional styling props", name: "sx", required: !1, type: { name: "SxProps" } }, strokeWidth: { defaultValue: { value: "0" }, description: "Stroke width for the icon (default: 0)", name: "strokeWidth", required: !1, type: { name: "number" } }, gradientTheme: { defaultValue: { value: "blue-cyan" }, description: "Predefined gradient theme (default: 'blue-cyan')", name: "gradientTheme", required: !1, type: { name: "enum", value: [{ value: '"custom"' }, { value: '"blue-cyan"' }, { value: '"purple-pink"' }, { value: '"orange-red"' }, { value: '"green-teal"' }, { value: '"indigo-purple"' }] } }, customGradient: { defaultValue: null, description: "Custom gradient colors when theme is 'custom'", name: "customGradient", required: !1, type: { name: "CustomGradient" } }, gradientDirection: { defaultValue: { value: "diagonal" }, description: "Direction of the gradient (default: 'diagonal')", name: "gradientDirection", required: !1, type: { name: "enum", value: [{ value: '"horizontal"' }, { value: '"vertical"' }, { value: '"diagonal"' }, { value: '"radial"' }] } }, animationDuration: { defaultValue: { value: "300" }, description: "Animation duration in milliseconds (default: 300)", name: "animationDuration", required: !1, type: { name: "number" } }, animationEasing: { defaultValue: { value: "ease" }, description: "Animation easing function (default: 'ease')", name: "animationEasing", required: !1, type: { name: "enum", value: [{ value: '"ease"' }, { value: '"ease-in"' }, { value: '"ease-in-out"' }, { value: '"ease-out"' }, { value: '"linear"' }] } }, autoHover: { defaultValue: { value: "false" }, description: "Whether to automatically detect hover state (default: false)", name: "autoHover", required: !1, type: { name: "boolean" } }, gradientId: { defaultValue: null, description: "Unique identifier for the gradient (auto-generated if not provided)", name: "gradientId", required: !1, type: { name: "string" } }, alwaysGradient: { defaultValue: { value: "false" }, description: "Whether to always show gradient (overrides hovered state)", name: "alwaysGradient", required: !1, type: { name: "boolean" } }, fallbackColor: { defaultValue: null, description: "Fallback color when gradient is not shown", name: "fallbackColor", required: !1, type: { name: "string" } } } };
-} catch {
-}
+C.displayName = "SGradientIcon";
 export {
-  s as SGradientIcon,
-  s as default
+  C as SGradientIcon,
+  C as default
 };