@solostylist/ui-kit 1.0.168 → 1.0.170

package/dist/s-copyable-text/s-copyable-text.js

@@ -1,25 +1,21 @@
-import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as d } from "react";
-import { Paper as u, Box as y, IconButton as m, Typography as f } from "@mui/material";
-import { c as s } from "../createSvgIcon-DxwgGAVe.js";
-const x = s(/* @__PURE__ */ e.jsx("path", {
-  d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-}), "Check"), h = s(/* @__PURE__ */ e.jsx("path", {
-  d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"
-}), "ContentCopy"), r = ({ text: t, typographyProps: o, onCopied: a, paperProps: i }) => {
-  const [p, n] = d(!1), l = async () => {
-    if (t)
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import { useState as c } from "react";
+import { Paper as d, Box as u, IconButton as y, Typography as f } from "@mui/material";
+import { C as m, a as x } from "../ContentCopy-7nFBtjhs.js";
+const r = ({ text: e, typographyProps: o, onCopied: a, paperProps: s }) => {
+  const [p, n] = c(!1), i = async () => {
+    if (e)
       try {
-        await navigator.clipboard.writeText(t), n(!0), setTimeout(() => n(!1), 2e3), a == null || a();
-      } catch (c) {
-        console.error("Failed to copy text:", c);
+        await navigator.clipboard.writeText(e), n(!0), setTimeout(() => n(!1), 2e3), a == null || a();
+      } catch (l) {
+        console.error("Failed to copy text:", l);
       }
   };
-  return t ? /* @__PURE__ */ e.jsx(u, { sx: { p: 2, border: "1px dashed", borderColor: "divider" }, ...i, children: /* @__PURE__ */ e.jsxs(y, { sx: { position: "relative" }, children: [
-    /* @__PURE__ */ e.jsx(
-      m,
+  return e ? /* @__PURE__ */ t.jsx(d, { sx: { p: 2, border: "1px dashed", borderColor: "divider" }, ...s, children: /* @__PURE__ */ t.jsxs(u, { sx: { position: "relative" }, children: [
+    /* @__PURE__ */ t.jsx(
+      y,
       {
-        onClick: l,
+        onClick: i,
         size: "small",
         sx: {
           position: "absolute",
@@ -31,10 +27,10 @@ const x = s(/* @__PURE__ */ e.jsx("path", {
           color: p ? "success.main" : "inherit"
           // Green when copied
         },
-        children: p ? /* @__PURE__ */ e.jsx(x, {}) : /* @__PURE__ */ e.jsx(h, {})
+        children: p ? /* @__PURE__ */ t.jsx(m, {}) : /* @__PURE__ */ t.jsx(x, {})
       }
     ),
-    /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ t.jsx(
       f,
       {
         variant: "body1",
@@ -48,7 +44,7 @@ const x = s(/* @__PURE__ */ e.jsx("path", {
         },
         color: "text.secondary",
         ...o,
-        children: t
+        children: e
       }
     )
   ] }) }) : null;

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

@@ -78,11 +78,11 @@ const s = ({
 };
 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: '"linear"' }, { value: '"ease"' }, { value: '"ease-in"' }, { value: '"ease-out"' }, { value: '"ease-in-out"' }] } }, 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" } } } };
+  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-out"' }, { value: '"ease-in-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: '"linear"' }, { value: '"ease"' }, { value: '"ease-in"' }, { value: '"ease-out"' }, { value: '"ease-in-out"' }] } }, 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" } } } };
+  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-out"' }, { value: '"ease-in-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 {
 }
 export {

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

@@ -60,11 +60,11 @@ const l = ({
 };
 l.displayName = "SScrollReveal";
 try {
-  l.displayName = "SScrollReveal", l.__docgenInfo = { description: "A scroll-triggered animation component that reveals content with smooth animations when elements enter the viewport.", displayName: "SScrollReveal", props: { children: { defaultValue: null, description: "The content to be revealed with animation", name: "children", required: !0, type: { name: "ReactNode" } }, duration: { defaultValue: { value: "0.6" }, description: "Animation duration in seconds (default: 0.6)", name: "duration", required: !1, type: { name: "number" } }, ease: { defaultValue: { value: "easeOut" }, description: "Framer Motion easing function for the animation (default: 'easeOut')", name: "ease", required: !1, type: { name: "Easing" } }, threshold: { defaultValue: null, description: "Intersection Observer threshold (0-1) for triggering animation", name: "threshold", required: !1, type: { name: "number" } }, rootMargin: { defaultValue: null, description: "Intersection Observer root margin (CSS margin syntax)", name: "rootMargin", required: !1, type: { name: "string" } }, delay: { defaultValue: null, description: "Delay before starting animation in milliseconds", name: "delay", required: !1, type: { name: "number" } }, direction: { defaultValue: null, description: "Direction from which elements animate into view", name: "direction", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }, { value: '"up"' }, { value: '"down"' }] } }, distance: { defaultValue: null, description: "Distance in pixels that elements travel during animation", name: "distance", required: !1, type: { name: "number" } }, scale: { defaultValue: { value: "true" }, description: "Whether to include scaling effect in the animation (default: true)", name: "scale", required: !1, type: { name: "boolean" } }, rotate: { defaultValue: { value: "false" }, description: "Whether to include rotation effect in the animation (default: false)", name: "rotate", required: !1, type: { name: "boolean" } }, stagger: { defaultValue: { value: "true" }, description: "Whether to stagger animations for multiple children (default: true)", name: "stagger", required: !1, type: { name: "boolean" } }, staggerDelay: { defaultValue: { value: "0.1" }, description: "Delay between staggered child animations in seconds (default: 0.1)", name: "staggerDelay", required: !1, type: { name: "number" } } } };
+  l.displayName = "SScrollReveal", l.__docgenInfo = { description: "A scroll-triggered animation component that reveals content with smooth animations when elements enter the viewport.", displayName: "SScrollReveal", props: { children: { defaultValue: null, description: "The content to be revealed with animation", name: "children", required: !0, type: { name: "ReactNode" } }, duration: { defaultValue: { value: "0.6" }, description: "Animation duration in seconds (default: 0.6)", name: "duration", required: !1, type: { name: "number" } }, ease: { defaultValue: { value: "easeOut" }, description: "Framer Motion easing function for the animation (default: 'easeOut')", name: "ease", required: !1, type: { name: "Easing" } }, threshold: { defaultValue: null, description: "Intersection Observer threshold (0-1) for triggering animation", name: "threshold", required: !1, type: { name: "number" } }, rootMargin: { defaultValue: null, description: "Intersection Observer root margin (CSS margin syntax)", name: "rootMargin", required: !1, type: { name: "string" } }, delay: { defaultValue: null, description: "Delay before starting animation in milliseconds", name: "delay", required: !1, type: { name: "number" } }, direction: { defaultValue: null, description: "Direction from which elements animate into view", name: "direction", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }, { value: '"up"' }, { value: '"down"' }] } }, distance: { defaultValue: null, description: "Distance in pixels that elements travel during animation", name: "distance", required: !1, type: { name: "number" } }, scale: { defaultValue: { value: "true" }, description: "Whether to include scaling effect in the animation (default: true)", name: "scale", required: !1, type: { name: "boolean" } }, rotate: { defaultValue: { value: "false" }, description: "Whether to include rotation effect in the animation (default: false)", name: "rotate", required: !1, type: { name: "boolean" } }, stagger: { defaultValue: { value: "true" }, description: "Whether to stagger animations for multiple children (default: true)", name: "stagger", required: !1, type: { name: "boolean" } }, staggerDelay: { defaultValue: { value: "0.1" }, description: "Delay between staggered child animations in seconds (default: 0.1)", name: "staggerDelay", required: !1, type: { name: "number" } } } };
 } catch {
 }
 try {
-  sscrollreveal.displayName = "sscrollreveal", sscrollreveal.__docgenInfo = { description: "A scroll-triggered animation component that reveals content with smooth animations when elements enter the viewport.", displayName: "sscrollreveal", props: { children: { defaultValue: null, description: "The content to be revealed with animation", name: "children", required: !0, type: { name: "ReactNode" } }, duration: { defaultValue: { value: "0.6" }, description: "Animation duration in seconds (default: 0.6)", name: "duration", required: !1, type: { name: "number" } }, ease: { defaultValue: { value: "easeOut" }, description: "Framer Motion easing function for the animation (default: 'easeOut')", name: "ease", required: !1, type: { name: "Easing" } }, threshold: { defaultValue: null, description: "Intersection Observer threshold (0-1) for triggering animation", name: "threshold", required: !1, type: { name: "number" } }, rootMargin: { defaultValue: null, description: "Intersection Observer root margin (CSS margin syntax)", name: "rootMargin", required: !1, type: { name: "string" } }, delay: { defaultValue: null, description: "Delay before starting animation in milliseconds", name: "delay", required: !1, type: { name: "number" } }, direction: { defaultValue: null, description: "Direction from which elements animate into view", name: "direction", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }, { value: '"up"' }, { value: '"down"' }] } }, distance: { defaultValue: null, description: "Distance in pixels that elements travel during animation", name: "distance", required: !1, type: { name: "number" } }, scale: { defaultValue: { value: "true" }, description: "Whether to include scaling effect in the animation (default: true)", name: "scale", required: !1, type: { name: "boolean" } }, rotate: { defaultValue: { value: "false" }, description: "Whether to include rotation effect in the animation (default: false)", name: "rotate", required: !1, type: { name: "boolean" } }, stagger: { defaultValue: { value: "true" }, description: "Whether to stagger animations for multiple children (default: true)", name: "stagger", required: !1, type: { name: "boolean" } }, staggerDelay: { defaultValue: { value: "0.1" }, description: "Delay between staggered child animations in seconds (default: 0.1)", name: "staggerDelay", required: !1, type: { name: "number" } } } };
+  sscrollreveal.displayName = "sscrollreveal", sscrollreveal.__docgenInfo = { description: "A scroll-triggered animation component that reveals content with smooth animations when elements enter the viewport.", displayName: "sscrollreveal", props: { children: { defaultValue: null, description: "The content to be revealed with animation", name: "children", required: !0, type: { name: "ReactNode" } }, duration: { defaultValue: { value: "0.6" }, description: "Animation duration in seconds (default: 0.6)", name: "duration", required: !1, type: { name: "number" } }, ease: { defaultValue: { value: "easeOut" }, description: "Framer Motion easing function for the animation (default: 'easeOut')", name: "ease", required: !1, type: { name: "Easing" } }, threshold: { defaultValue: null, description: "Intersection Observer threshold (0-1) for triggering animation", name: "threshold", required: !1, type: { name: "number" } }, rootMargin: { defaultValue: null, description: "Intersection Observer root margin (CSS margin syntax)", name: "rootMargin", required: !1, type: { name: "string" } }, delay: { defaultValue: null, description: "Delay before starting animation in milliseconds", name: "delay", required: !1, type: { name: "number" } }, direction: { defaultValue: null, description: "Direction from which elements animate into view", name: "direction", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }, { value: '"up"' }, { value: '"down"' }] } }, distance: { defaultValue: null, description: "Distance in pixels that elements travel during animation", name: "distance", required: !1, type: { name: "number" } }, scale: { defaultValue: { value: "true" }, description: "Whether to include scaling effect in the animation (default: true)", name: "scale", required: !1, type: { name: "boolean" } }, rotate: { defaultValue: { value: "false" }, description: "Whether to include rotation effect in the animation (default: false)", name: "rotate", required: !1, type: { name: "boolean" } }, stagger: { defaultValue: { value: "true" }, description: "Whether to stagger animations for multiple children (default: true)", name: "stagger", required: !1, type: { name: "boolean" } }, staggerDelay: { defaultValue: { value: "0.1" }, description: "Delay between staggered child animations in seconds (default: 0.1)", name: "staggerDelay", required: !1, type: { name: "number" } } } };
 } catch {
 }
 export {

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

@@ -0,0 +1,6 @@
+export { default } from './s-scroll-velocity';
+export type { SScrollVelocityProps } from './s-scroll-velocity';
+export { ScrollVelocityContainer } from './scroll-velocity-container';
+export type { ScrollVelocityContainerProps } from './scroll-velocity-container';
+export { ScrollVelocityRow } from './scroll-velocity-row';
+export type { ScrollVelocityRowProps } from './scroll-velocity-row';

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

@@ -0,0 +1,8 @@
+import { SScrollVelocity as r } from "./s-scroll-velocity.js";
+import { ScrollVelocityContainer as t } from "./scroll-velocity-container.js";
+import { ScrollVelocityRow as f } from "./scroll-velocity-row.js";
+export {
+  t as ScrollVelocityContainer,
+  f as ScrollVelocityRow,
+  r as default
+};

package/dist/s-scroll-velocity/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

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

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { BoxProps } from '@mui/material';
+/**
+ * Props for the SScrollVelocity component
+ */
+export interface SScrollVelocityProps extends BoxProps {
+    /** Content to display in the scrolling marquee */
+    children: React.ReactNode;
+    /** Base scrolling speed (default: 5) */
+    baseVelocity?: number;
+    /** Scroll direction: 1 for right, -1 for left (default: 1) */
+    direction?: 1 | -1;
+}
+/**
+ * A scroll-velocity based marquee component that automatically scrolls horizontally and responds to page scroll velocity.
+ * Perfect for displaying logos, features, testimonials, or any repeating content in an engaging way.
+ *
+ * The component automatically duplicates content to create a seamless infinite scroll effect and adjusts speed based on page scroll velocity.
+ */
+export declare const SScrollVelocity: {
+    ({ children, baseVelocity, direction, sx, ...props }: SScrollVelocityProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SScrollVelocity;

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

@@ -0,0 +1,22 @@
+import { j as r } from "../jsx-runtime-OVHDjVDe.js";
+import { ScrollVelocityRow as i } from "./scroll-velocity-row.js";
+const l = ({ children: e, baseVelocity: t, direction: o, sx: a, ...n }) => /* @__PURE__ */ r.jsx(i, { baseVelocity: t, direction: o, sx: a, ...n, children: e });
+l.displayName = "SScrollVelocity";
+try {
+  l.displayName = "SScrollVelocity", l.__docgenInfo = { description: `A scroll-velocity based marquee component that automatically scrolls horizontally and responds to page scroll velocity.
+Perfect for displaying logos, features, testimonials, or any repeating content in an engaging way.
+
+The component automatically duplicates content to create a seamless infinite scroll effect and adjusts speed based on page scroll velocity.`, displayName: "SScrollVelocity", props: { children: { defaultValue: null, description: "Content to display in the scrolling marquee", name: "children", required: !0, type: { name: "ReactNode" } }, baseVelocity: { defaultValue: null, description: "Base scrolling speed (default: 5)", name: "baseVelocity", required: !1, type: { name: "number" } }, direction: { defaultValue: null, description: "Scroll direction: 1 for right, -1 for left (default: 1)", name: "direction", required: !1, type: { name: "enum", value: [{ value: "1" }, { value: "-1" }] } } } };
+} catch {
+}
+try {
+  sscrollvelocity.displayName = "sscrollvelocity", sscrollvelocity.__docgenInfo = { description: `A scroll-velocity based marquee component that automatically scrolls horizontally and responds to page scroll velocity.
+Perfect for displaying logos, features, testimonials, or any repeating content in an engaging way.
+
+The component automatically duplicates content to create a seamless infinite scroll effect and adjusts speed based on page scroll velocity.`, displayName: "sscrollvelocity", props: { children: { defaultValue: null, description: "Content to display in the scrolling marquee", name: "children", required: !0, type: { name: "ReactNode" } }, baseVelocity: { defaultValue: null, description: "Base scrolling speed (default: 5)", name: "baseVelocity", required: !1, type: { name: "number" } }, direction: { defaultValue: null, description: "Scroll direction: 1 for right, -1 for left (default: 1)", name: "direction", required: !1, type: { name: "enum", value: [{ value: "1" }, { value: "-1" }] } } } };
+} catch {
+}
+export {
+  l as SScrollVelocity,
+  l as default
+};

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { BoxProps } from '@mui/material';
+import { MotionValue } from 'framer-motion';
+/**
+ * Context for sharing scroll velocity across multiple rows
+ */
+export declare const ScrollVelocityContext: React.Context<MotionValue<number> | null>;
+/**
+ * Props for the ScrollVelocityContainer component
+ */
+export interface ScrollVelocityContainerProps extends BoxProps {
+    /** Content to render inside the container */
+    children: React.ReactNode;
+}
+/**
+ * Container component that provides scroll velocity context to child rows.
+ * Use this to synchronize multiple ScrollVelocityRow components.
+ */
+export declare function ScrollVelocityContainer({ children, sx, ...props }: ScrollVelocityContainerProps): import("react/jsx-runtime").JSX.Element;
+export default ScrollVelocityContainer;

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

@@ -0,0 +1,40 @@
+import { j as r } from "../jsx-runtime-OVHDjVDe.js";
+import y from "react";
+import { Box as u } from "@mui/material";
+import { useScroll as _, useVelocity as h, useSpring as f, useTransform as x } from "framer-motion";
+const t = y.createContext(null);
+function n({ children: o, sx: c, ...l }) {
+  const { scrollY: i } = _(), s = h(i), a = f(s, {
+    damping: 50,
+    stiffness: 400
+  }), p = x(a, (e) => {
+    const d = e < 0 ? -1 : 1, m = Math.min(5, Math.abs(e) / 1e3 * 5);
+    return d * m;
+  });
+  return /* @__PURE__ */ r.jsx(t.Provider, { value: p, children: /* @__PURE__ */ r.jsx(
+    u,
+    {
+      sx: {
+        position: "relative",
+        width: "100%",
+        ...c
+      },
+      ...l,
+      children: o
+    }
+  ) });
+}
+try {
+  n.displayName = "ScrollVelocityContainer", n.__docgenInfo = { description: `Container component that provides scroll velocity context to child rows.
+Use this to synchronize multiple ScrollVelocityRow components.`, displayName: "ScrollVelocityContainer", props: { children: { defaultValue: null, description: "Content to render inside the container", name: "children", required: !0, type: { name: "ReactNode" } } } };
+} catch {
+}
+try {
+  t.displayName = "ScrollVelocityContext", t.__docgenInfo = { description: "Context for sharing scroll velocity across multiple rows", displayName: "ScrollVelocityContext", props: {} };
+} catch {
+}
+export {
+  n as ScrollVelocityContainer,
+  t as ScrollVelocityContext,
+  n as default
+};

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

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { BoxProps } from '@mui/material';
+/**
+ * Wraps a value within a range [min, max)
+ * @param min - Minimum value of the range
+ * @param max - Maximum value of the range
+ * @param v - Value to wrap
+ * @returns Wrapped value within the range
+ */
+export declare const wrap: (min: number, max: number, v: number) => number;
+/**
+ * Props for the ScrollVelocityRow component
+ */
+export interface ScrollVelocityRowProps extends BoxProps {
+    /** Content to repeat in the scrolling row */
+    children: React.ReactNode;
+    /** Base scrolling speed (default: 5) */
+    baseVelocity?: number;
+    /** Scroll direction: 1 for right, -1 for left (default: 1) */
+    direction?: 1 | -1;
+}
+/**
+ * A horizontal scrolling row component that responds to page scroll velocity.
+ * Can be used standalone or inside ScrollVelocityContainer for synchronized scrolling.
+ */
+export declare function ScrollVelocityRow(props: ScrollVelocityRowProps): import("react/jsx-runtime").JSX.Element;
+export default ScrollVelocityRow;

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

@@ -0,0 +1,131 @@
+import { j as u } from "../jsx-runtime-OVHDjVDe.js";
+import { useContext as A, useRef as i, useState as B, useEffect as D } from "react";
+import { Box as I } from "@mui/material";
+import { useMotionValue as N, useTransform as z, useAnimationFrame as P, motion as O, useScroll as T, useVelocity as X, useSpring as Y } from "framer-motion";
+import { ScrollVelocityContext as $ } from "./scroll-velocity-container.js";
+const V = (e, n, s) => {
+  const c = n - e;
+  return ((s - e) % c + c) % c + e;
+};
+function F({
+  children: e,
+  baseVelocity: n = 5,
+  direction: s = 1,
+  sx: c,
+  velocityFactor: w,
+  ...y
+}) {
+  const g = i(null), b = i(null), [L, q] = B(1), x = N(0), W = i(s >= 0 ? 1 : -1), S = i(s >= 0 ? 1 : -1), v = N(0), R = i(!0), _ = i(!0), M = i(!1);
+  D(() => {
+    const o = g.current, t = b.current;
+    if (!o || !t) return;
+    const l = () => {
+      const p = o.offsetWidth || 0, h = t.scrollWidth || 0;
+      v.set(h);
+      const C = h > 0 ? Math.max(3, Math.ceil(p / h) + 2) : 1;
+      q((j) => j === C ? j : C);
+    };
+    l();
+    const r = new ResizeObserver(l);
+    r.observe(o), r.observe(t);
+    const d = new IntersectionObserver(([p]) => {
+      R.current = p.isIntersecting;
+    });
+    d.observe(o);
+    const f = () => {
+      _.current = document.visibilityState === "visible";
+    };
+    document.addEventListener("visibilitychange", f, {
+      passive: !0
+    }), f();
+    const a = window.matchMedia("(prefers-reduced-motion: reduce)"), m = () => {
+      M.current = a.matches;
+    };
+    return a.addEventListener("change", m), m(), () => {
+      r.disconnect(), d.disconnect(), document.removeEventListener("visibilitychange", f), a.removeEventListener("change", m);
+    };
+  }, [e, v]);
+  const k = z([x, v], ([o, t]) => {
+    const l = Number(t) || 1, r = Number(o) || 0;
+    return `${-V(0, l, r)}px`;
+  });
+  return P((o, t) => {
+    if (!R.current || !_.current) return;
+    const l = t / 1e3, r = w.get(), d = Math.min(5, Math.abs(r)), f = M.current ? 1 : 1 + d;
+    if (d > 0.1) {
+      const h = r >= 0 ? 1 : -1;
+      S.current = W.current * h;
+    }
+    const a = v.get() || 0;
+    if (a <= 0) return;
+    const m = a * n / 100, p = S.current * m * f * l;
+    x.set(x.get() + p);
+  }), /* @__PURE__ */ u.jsx(
+    I,
+    {
+      ref: g,
+      sx: {
+        width: "100%",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        ...c
+      },
+      ...y,
+      children: /* @__PURE__ */ u.jsx(
+        O.div,
+        {
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            willChange: "transform",
+            userSelect: "none",
+            x: k
+          },
+          children: Array.from({ length: L }).map((o, t) => /* @__PURE__ */ u.jsx(
+            I,
+            {
+              ref: t === 0 ? b : null,
+              "aria-hidden": t !== 0,
+              sx: {
+                display: "inline-flex",
+                flexShrink: 0,
+                alignItems: "center"
+              },
+              component: "div",
+              children: e
+            },
+            t
+          ))
+        }
+      )
+    }
+  );
+}
+function G(e) {
+  const { scrollY: n } = T(), s = X(n), c = Y(s, {
+    damping: 50,
+    stiffness: 400
+  }), w = z(c, (y) => {
+    const g = y < 0 ? -1 : 1, b = Math.min(5, Math.abs(y) / 1e3 * 5);
+    return g * b;
+  });
+  return /* @__PURE__ */ u.jsx(F, { ...e, velocityFactor: w });
+}
+function E(e) {
+  const n = A($);
+  return n ? /* @__PURE__ */ u.jsx(F, { ...e, velocityFactor: n }) : /* @__PURE__ */ u.jsx(G, { ...e });
+}
+try {
+  E.displayName = "ScrollVelocityRow", E.__docgenInfo = { description: `A horizontal scrolling row component that responds to page scroll velocity.
+Can be used standalone or inside ScrollVelocityContainer for synchronized scrolling.`, displayName: "ScrollVelocityRow", props: { children: { defaultValue: null, description: "Content to repeat in the scrolling row", name: "children", required: !0, type: { name: "ReactNode" } }, baseVelocity: { defaultValue: null, description: "Base scrolling speed (default: 5)", name: "baseVelocity", required: !1, type: { name: "number" } }, direction: { defaultValue: null, description: "Scroll direction: 1 for right, -1 for left (default: 1)", name: "direction", required: !1, type: { name: "enum", value: [{ value: "1" }, { value: "-1" }] } } } };
+} catch {
+}
+try {
+  V.displayName = "wrap", V.__docgenInfo = { description: "Wraps a value within a range [min, max)", displayName: "wrap", props: {} };
+} catch {
+}
+export {
+  E as ScrollVelocityRow,
+  E as default,
+  V as wrap
+};

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: "CardCvcElementProps | CardExpiryElementProps | CardNumberElementProps | AuBankAccountElementProps | 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: StripeCardCvcElementChangeEvent) => any) | ((event: StripeCardExpiryElementChangeEvent) => 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: "CardExpiryElementProps | CardCvcElementProps | CardNumberElementProps | AuBankAccountElementProps | 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: StripeCardCvcElementChangeEvent) => 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: "CardCvcElementProps | CardExpiryElementProps | CardNumberElementProps | AuBankAccountElementProps | 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: StripeCardCvcElementChangeEvent) => any) | ((event: StripeCardExpiryElementChangeEvent) => 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: "CardExpiryElementProps | CardCvcElementProps | CardNumberElementProps | AuBankAccountElementProps | 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: StripeCardCvcElementChangeEvent) => 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-two-pane-layout/index.js

@@ -1,6 +1,6 @@
 import { STwoPaneLayout as n } from "./s-two-pane-layout.js";
 try {
-  stwopanelayout.displayName = "stwopanelayout", stwopanelayout.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "stwopanelayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
+  stwopanelayout.displayName = "stwopanelayout", stwopanelayout.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "stwopanelayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
 } catch {
 }
 try {

package/dist/s-two-pane-layout/s-two-pane-layout.js

@@ -68,11 +68,11 @@ const r = ({
 };
 r.displayName = "STwoPaneLayout";
 try {
-  r.displayName = "STwoPaneLayout", r.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "STwoPaneLayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
+  r.displayName = "STwoPaneLayout", r.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "STwoPaneLayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
 } catch {
 }
 try {
-  stwopanelayout.displayName = "stwopanelayout", stwopanelayout.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "stwopanelayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
+  stwopanelayout.displayName = "stwopanelayout", stwopanelayout.__docgenInfo = { description: "A flexible two-pane layout component with customizable sidebar and content areas.", displayName: "stwopanelayout", props: { sidebar: { defaultValue: null, description: "Content to display in the sidebar pane", name: "sidebar", required: !0, type: { name: "ReactNode" } }, content: { defaultValue: null, description: "Content to display in the main content pane", name: "content", required: !0, type: { name: "ReactNode" } }, sidebarWidth: { defaultValue: { value: "280" }, description: "Width of the sidebar in pixels. Default: 280", name: "sidebarWidth", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "calc(100vh - 65px)" }, description: "Container height. Can be a CSS value or 'auto'. Default: 'calc(100vh - 65px)'", name: "height", required: !1, type: { name: "string | number" } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarSx: { defaultValue: null, description: "Custom styles for the sidebar container", name: "sidebarSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content container", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarHeaderSx: { defaultValue: null, description: "Custom styles for the sidebar header", name: "sidebarHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, contentHeaderSx: { defaultValue: null, description: "Custom styles for the content header", name: "contentHeaderSx", required: !1, type: { name: "SxProps<Theme>" } }, sidebarScrollSx: { defaultValue: null, description: "Custom styles for the sidebar scrollable area", name: "sidebarScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, contentScrollSx: { defaultValue: null, description: "Custom styles for the content scrollable area", name: "contentScrollSx", required: !1, type: { name: "SxProps<Theme>" } }, disableBorder: { defaultValue: { value: "false" }, description: "Hide border between sidebar and content. Default: false", name: "disableBorder", required: !1, type: { name: "boolean" } }, sidebarHeader: { defaultValue: null, description: "Optional header content for the sidebar", name: "sidebarHeader", required: !1, type: { name: "ReactNode" } }, contentHeader: { defaultValue: null, description: "Optional header content for the main content area", name: "contentHeader", required: !1, type: { name: "ReactNode" } }, enableSidebarScroll: { defaultValue: { value: "true" }, description: "Enable scrollbar for sidebar. Default: true", name: "enableSidebarScroll", required: !1, type: { name: "boolean" } }, enableContentScroll: { defaultValue: { value: "false" }, description: "Enable scrollbar for content. Default: false", name: "enableContentScroll", required: !1, type: { name: "boolean" } }, sidebarPosition: { defaultValue: { value: "left" }, description: "Sidebar position. Default: 'left'", name: "sidebarPosition", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }] } }, sidebarPadding: { defaultValue: { value: "1" }, description: "Padding for sidebar content. Default: 1", name: "sidebarPadding", required: !1, type: { name: "string | number" } }, contentPadding: { defaultValue: { value: "1" }, description: "Padding for main content. Default: 0", name: "contentPadding", required: !1, type: { name: "string | number" } }, sidebarHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for sidebar header. Default: 2", name: "sidebarHeaderPadding", required: !1, type: { name: "string | number" } }, contentHeaderPadding: { defaultValue: { value: "2" }, description: "Padding for content header. Default: 2", name: "contentHeaderPadding", required: !1, type: { name: "string | number" } } } };
 } catch {
 }
 export {

package/dist/s-zoom-image/index.js

@@ -1,6 +1,6 @@
 import { SZoomImage as r } from "./s-zoom-image.js";
 try {
-  szoomimage.displayName = "szoomimage", szoomimage.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "szoomimage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
+  szoomimage.displayName = "szoomimage", szoomimage.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "szoomimage", props: { height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
 } catch {
 }
 try {

package/dist/s-zoom-image/s-zoom-image.js

@@ -84,11 +84,11 @@ const o = L.forwardRef(
 );
 o.displayName = "SZoomImage";
 try {
-  o.displayName = "SZoomImage", o.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "SZoomImage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
+  o.displayName = "SZoomImage", o.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "SZoomImage", props: { height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
 } catch {
 }
 try {
-  szoomimage.displayName = "szoomimage", szoomimage.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "szoomimage", props: { borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
+  szoomimage.displayName = "szoomimage", szoomimage.__docgenInfo = { description: "An interactive image component with smooth zoom-on-hover functionality and built-in lazy loading.", displayName: "szoomimage", props: { height: { defaultValue: { value: "100%" }, description: "Image height for lazy loading skeleton", name: "height", required: !1, type: { name: "string | number" } }, transitionDuration: { defaultValue: { value: "0.3" }, description: "Duration of the spring animation in seconds", name: "transitionDuration", required: !1, type: { name: "number" } }, width: { defaultValue: { value: "100%" }, description: "Image width for lazy loading skeleton", name: "width", required: !1, type: { name: "string | number" } }, borderRadius: { defaultValue: { value: "1.5" }, description: "Border radius (number uses theme spacing, string accepts any CSS unit)", name: "borderRadius", required: !1, type: { name: "string | number" } }, src: { defaultValue: null, description: "Image source URL", name: "src", required: !0, type: { name: "string" } }, alt: { defaultValue: null, description: "Alternative text for accessibility", name: "alt", required: !0, type: { name: "string" } }, zoomScale: { defaultValue: { value: "1.2" }, description: "Scale factor to apply on zoom", name: "zoomScale", required: !1, type: { name: "number" } }, imgStyle: { defaultValue: null, description: "Custom styles applied to the image element", name: "imgStyle", required: !1, type: { name: "CSSProperties" } }, imgClassName: { defaultValue: null, description: "Custom class name for the image element", name: "imgClassName", required: !1, type: { name: "string" } }, skeletonVariant: { defaultValue: { value: "rounded" }, description: "Skeleton variant while loading", name: "skeletonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"rectangular"' }, { value: '"rounded"' }, { value: '"circular"' }] } } } };
 } catch {
 }
 export {

package/dist/theme/theme-primitives.js

@@ -329,7 +329,7 @@ const s = m(), e = {
       paper: t[100]
     },
     text: {
-      primary: "rgb(77, 77, 77)",
+      primary: "rgb(32, 33, 36)",
       secondary: t[500]
     },
     action: {