@solostylist/ui-kit 1.0.170 → 1.0.171

package/dist/s-countdown/s-count-box.js

@@ -99,11 +99,11 @@ const r = ({
 };
 r.displayName = "SCountBox";
 try {
-  r.displayName = "SCountBox", r.__docgenInfo = { description: "An individual count box component that displays a single time unit with optional animations.", displayName: "SCountBox", props: { digit: { defaultValue: { value: "0" }, description: "The numeric value to display", name: "digit", required: !1, type: { name: "number" } }, title: { defaultValue: { value: "" }, description: "The label/title for this time unit", name: "title", required: !1, type: { name: "string" } }, size: { defaultValue: { value: "medium" }, description: "Size variant for the count box", name: "size", required: !1, type: { name: "enum", value: [{ value: '"small"' }, { value: '"medium"' }, { value: '"large"' }] } }, color: { defaultValue: { value: "inherit" }, description: "Color variant for the count box", name: "color", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"error"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"info"' }, { value: '"success"' }, { value: '"warning"' }] } }, animation: { defaultValue: { value: "none" }, description: "Animation type for value changes", name: "animation", required: !1, type: { name: "enum", value: [{ value: '"none"' }, { value: '"fade"' }, { value: '"slide"' }] } }, sx: { defaultValue: null, description: "Custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, digitSx: { defaultValue: null, description: "Custom digit styling", name: "digitSx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "Custom title styling", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, showSeparator: { defaultValue: { value: "false" }, description: "Show separator after this box", name: "showSeparator", required: !1, type: { name: "boolean" } }, separator: { defaultValue: { value: ":" }, description: "Custom separator element", name: "separator", required: !1, type: { name: "ReactNode" } }, digitFormat: { defaultValue: { value: "default" }, description: "Format for displaying the digit (e.g., '00' for zero-padding)", name: "digitFormat", required: !1, type: { name: "enum", value: [{ value: '"default"' }, { value: '"padded"' }] } }, hidden: { defaultValue: { value: "false" }, description: "Whether this count box is hidden", name: "hidden", required: !1, type: { name: "boolean" } } } };
+  r.displayName = "SCountBox", r.__docgenInfo = { description: "An individual count box component that displays a single time unit with optional animations.", displayName: "SCountBox", props: { digit: { defaultValue: { value: "0" }, description: "The numeric value to display", name: "digit", required: !1, type: { name: "number" } }, title: { defaultValue: { value: "" }, description: "The label/title for this time unit", name: "title", required: !1, type: { name: "string" } }, size: { defaultValue: { value: "medium" }, description: "Size variant for the count box", name: "size", required: !1, type: { name: "enum", value: [{ value: '"small"' }, { value: '"medium"' }, { value: '"large"' }] } }, color: { defaultValue: { value: "inherit" }, description: "Color variant for the count box", name: "color", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"success"' }, { value: '"error"' }, { value: '"info"' }, { value: '"warning"' }] } }, animation: { defaultValue: { value: "none" }, description: "Animation type for value changes", name: "animation", required: !1, type: { name: "enum", value: [{ value: '"none"' }, { value: '"fade"' }, { value: '"slide"' }] } }, sx: { defaultValue: null, description: "Custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, digitSx: { defaultValue: null, description: "Custom digit styling", name: "digitSx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "Custom title styling", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, showSeparator: { defaultValue: { value: "false" }, description: "Show separator after this box", name: "showSeparator", required: !1, type: { name: "boolean" } }, separator: { defaultValue: { value: ":" }, description: "Custom separator element", name: "separator", required: !1, type: { name: "ReactNode" } }, digitFormat: { defaultValue: { value: "default" }, description: "Format for displaying the digit (e.g., '00' for zero-padding)", name: "digitFormat", required: !1, type: { name: "enum", value: [{ value: '"default"' }, { value: '"padded"' }] } }, hidden: { defaultValue: { value: "false" }, description: "Whether this count box is hidden", name: "hidden", required: !1, type: { name: "boolean" } } } };
 } catch {
 }
 try {
-  scountbox.displayName = "scountbox", scountbox.__docgenInfo = { description: "An individual count box component that displays a single time unit with optional animations.", displayName: "scountbox", props: { digit: { defaultValue: { value: "0" }, description: "The numeric value to display", name: "digit", required: !1, type: { name: "number" } }, title: { defaultValue: { value: "" }, description: "The label/title for this time unit", name: "title", required: !1, type: { name: "string" } }, size: { defaultValue: { value: "medium" }, description: "Size variant for the count box", name: "size", required: !1, type: { name: "enum", value: [{ value: '"small"' }, { value: '"medium"' }, { value: '"large"' }] } }, color: { defaultValue: { value: "inherit" }, description: "Color variant for the count box", name: "color", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"error"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"info"' }, { value: '"success"' }, { value: '"warning"' }] } }, animation: { defaultValue: { value: "none" }, description: "Animation type for value changes", name: "animation", required: !1, type: { name: "enum", value: [{ value: '"none"' }, { value: '"fade"' }, { value: '"slide"' }] } }, sx: { defaultValue: null, description: "Custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, digitSx: { defaultValue: null, description: "Custom digit styling", name: "digitSx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "Custom title styling", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, showSeparator: { defaultValue: { value: "false" }, description: "Show separator after this box", name: "showSeparator", required: !1, type: { name: "boolean" } }, separator: { defaultValue: { value: ":" }, description: "Custom separator element", name: "separator", required: !1, type: { name: "ReactNode" } }, digitFormat: { defaultValue: { value: "default" }, description: "Format for displaying the digit (e.g., '00' for zero-padding)", name: "digitFormat", required: !1, type: { name: "enum", value: [{ value: '"default"' }, { value: '"padded"' }] } }, hidden: { defaultValue: { value: "false" }, description: "Whether this count box is hidden", name: "hidden", required: !1, type: { name: "boolean" } } } };
+  scountbox.displayName = "scountbox", scountbox.__docgenInfo = { description: "An individual count box component that displays a single time unit with optional animations.", displayName: "scountbox", props: { digit: { defaultValue: { value: "0" }, description: "The numeric value to display", name: "digit", required: !1, type: { name: "number" } }, title: { defaultValue: { value: "" }, description: "The label/title for this time unit", name: "title", required: !1, type: { name: "string" } }, size: { defaultValue: { value: "medium" }, description: "Size variant for the count box", name: "size", required: !1, type: { name: "enum", value: [{ value: '"small"' }, { value: '"medium"' }, { value: '"large"' }] } }, color: { defaultValue: { value: "inherit" }, description: "Color variant for the count box", name: "color", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"success"' }, { value: '"error"' }, { value: '"info"' }, { value: '"warning"' }] } }, animation: { defaultValue: { value: "none" }, description: "Animation type for value changes", name: "animation", required: !1, type: { name: "enum", value: [{ value: '"none"' }, { value: '"fade"' }, { value: '"slide"' }] } }, sx: { defaultValue: null, description: "Custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, digitSx: { defaultValue: null, description: "Custom digit styling", name: "digitSx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "Custom title styling", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, showSeparator: { defaultValue: { value: "false" }, description: "Show separator after this box", name: "showSeparator", required: !1, type: { name: "boolean" } }, separator: { defaultValue: { value: ":" }, description: "Custom separator element", name: "separator", required: !1, type: { name: "ReactNode" } }, digitFormat: { defaultValue: { value: "default" }, description: "Format for displaying the digit (e.g., '00' for zero-padding)", name: "digitFormat", required: !1, type: { name: "enum", value: [{ value: '"default"' }, { value: '"padded"' }] } }, hidden: { defaultValue: { value: "false" }, description: "Whether this count box is hidden", name: "hidden", required: !1, type: { name: "boolean" } } } };
 } catch {
 }
 export {

package/dist/s-countdown/s-count-down.js

@@ -150,7 +150,7 @@ const p = ({
 };
 p.displayName = "SCountdown";
 try {
-  p.displayName = "SCountdown", p.__docgenInfo = { description: "A comprehensive countdown timer component with extensive customization options, animations, and accessibility features.", displayName: "SCountdown", props: { expireDate: { defaultValue: null, description: "Target date timestamp in milliseconds (from Date.getTime())", name: "expireDate", required: !0, type: { name: "number" } }, size: { defaultValue: { value: "medium" }, description: "Size variant for all count boxes", name: "size", required: !1, type: { name: "enum", value: [{ value: '"small"' }, { value: '"medium"' }, { value: '"large"' }] } }, color: { defaultValue: { value: "inherit" }, description: "Color theme for the countdown", name: "color", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"error"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"info"' }, { value: '"success"' }, { value: '"warning"' }] } }, layout: { defaultValue: { value: "horizontal" }, description: "Layout orientation", name: "layout", required: !1, type: { name: "enum", value: [{ value: '"grid"' }, { value: '"horizontal"' }, { value: '"vertical"' }] } }, animation: { defaultValue: { value: "none" }, description: "Animation type for value changes", name: "animation", required: !1, type: { name: "enum", value: [{ value: '"none"' }, { value: '"fade"' }, { value: '"slide"' }] } }, showSeparators: { defaultValue: { value: "false" }, description: "Whether to show separators between units", name: "showSeparators", required: !1, type: { name: "boolean" } }, separator: { defaultValue: { value: ":" }, description: "Custom separator element", name: "separator", required: !1, type: { name: "ReactNode" } }, units: { defaultValue: { value: `{
+  p.displayName = "SCountdown", p.__docgenInfo = { description: "A comprehensive countdown timer component with extensive customization options, animations, and accessibility features.", displayName: "SCountdown", props: { expireDate: { defaultValue: null, description: "Target date timestamp in milliseconds (from Date.getTime())", name: "expireDate", required: !0, type: { name: "number" } }, size: { defaultValue: { value: "medium" }, description: "Size variant for all count boxes", name: "size", required: !1, type: { name: "enum", value: [{ value: '"small"' }, { value: '"medium"' }, { value: '"large"' }] } }, color: { defaultValue: { value: "inherit" }, description: "Color theme for the countdown", name: "color", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"success"' }, { value: '"error"' }, { value: '"info"' }, { value: '"warning"' }] } }, layout: { defaultValue: { value: "horizontal" }, description: "Layout orientation", name: "layout", required: !1, type: { name: "enum", value: [{ value: '"grid"' }, { value: '"horizontal"' }, { value: '"vertical"' }] } }, animation: { defaultValue: { value: "none" }, description: "Animation type for value changes", name: "animation", required: !1, type: { name: "enum", value: [{ value: '"none"' }, { value: '"fade"' }, { value: '"slide"' }] } }, showSeparators: { defaultValue: { value: "false" }, description: "Whether to show separators between units", name: "showSeparators", required: !1, type: { name: "boolean" } }, separator: { defaultValue: { value: ":" }, description: "Custom separator element", name: "separator", required: !1, type: { name: "ReactNode" } }, units: { defaultValue: { value: `{
     days: true,
     hours: true,
     minutes: true,
@@ -164,7 +164,7 @@ try {
 } catch {
 }
 try {
-  scountdown.displayName = "scountdown", scountdown.__docgenInfo = { description: "A comprehensive countdown timer component with extensive customization options, animations, and accessibility features.", displayName: "scountdown", props: { expireDate: { defaultValue: null, description: "Target date timestamp in milliseconds (from Date.getTime())", name: "expireDate", required: !0, type: { name: "number" } }, size: { defaultValue: { value: "medium" }, description: "Size variant for all count boxes", name: "size", required: !1, type: { name: "enum", value: [{ value: '"small"' }, { value: '"medium"' }, { value: '"large"' }] } }, color: { defaultValue: { value: "inherit" }, description: "Color theme for the countdown", name: "color", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"error"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"info"' }, { value: '"success"' }, { value: '"warning"' }] } }, layout: { defaultValue: { value: "horizontal" }, description: "Layout orientation", name: "layout", required: !1, type: { name: "enum", value: [{ value: '"grid"' }, { value: '"horizontal"' }, { value: '"vertical"' }] } }, animation: { defaultValue: { value: "none" }, description: "Animation type for value changes", name: "animation", required: !1, type: { name: "enum", value: [{ value: '"none"' }, { value: '"fade"' }, { value: '"slide"' }] } }, showSeparators: { defaultValue: { value: "false" }, description: "Whether to show separators between units", name: "showSeparators", required: !1, type: { name: "boolean" } }, separator: { defaultValue: { value: ":" }, description: "Custom separator element", name: "separator", required: !1, type: { name: "ReactNode" } }, units: { defaultValue: { value: `{
+  scountdown.displayName = "scountdown", scountdown.__docgenInfo = { description: "A comprehensive countdown timer component with extensive customization options, animations, and accessibility features.", displayName: "scountdown", props: { expireDate: { defaultValue: null, description: "Target date timestamp in milliseconds (from Date.getTime())", name: "expireDate", required: !0, type: { name: "number" } }, size: { defaultValue: { value: "medium" }, description: "Size variant for all count boxes", name: "size", required: !1, type: { name: "enum", value: [{ value: '"small"' }, { value: '"medium"' }, { value: '"large"' }] } }, color: { defaultValue: { value: "inherit" }, description: "Color theme for the countdown", name: "color", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"success"' }, { value: '"error"' }, { value: '"info"' }, { value: '"warning"' }] } }, layout: { defaultValue: { value: "horizontal" }, description: "Layout orientation", name: "layout", required: !1, type: { name: "enum", value: [{ value: '"grid"' }, { value: '"horizontal"' }, { value: '"vertical"' }] } }, animation: { defaultValue: { value: "none" }, description: "Animation type for value changes", name: "animation", required: !1, type: { name: "enum", value: [{ value: '"none"' }, { value: '"fade"' }, { value: '"slide"' }] } }, showSeparators: { defaultValue: { value: "false" }, description: "Whether to show separators between units", name: "showSeparators", required: !1, type: { name: "boolean" } }, separator: { defaultValue: { value: ":" }, description: "Custom separator element", name: "separator", required: !1, type: { name: "ReactNode" } }, units: { defaultValue: { value: `{
     days: true,
     hours: true,
     minutes: true,

package/dist/s-error-layout/s-error-layout.js

@@ -52,11 +52,11 @@ const n = ({
 );
 n.displayName = "SErrorLayout";
 try {
-  n.displayName = "SErrorLayout", n.__docgenInfo = { description: "A full-screen error layout component for displaying error pages with customizable content and styling.", displayName: "SErrorLayout", props: { imageSrc: { defaultValue: null, description: "Source URL for the error image", name: "imageSrc", required: !0, type: { name: "string" } }, imageAlt: { defaultValue: null, description: "Alt text for the error image", name: "imageAlt", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Main error title text", name: "title", required: !0, type: { name: "string" } }, description: { defaultValue: null, description: "Error description text", name: "description", required: !0, type: { name: "ReactNode" } }, buttonText: { defaultValue: null, description: "Text for the action button. If not provided, button will not be shown", name: "buttonText", required: !1, type: { name: "string" } }, imageWidth: { defaultValue: { value: "200px" }, description: "Image width. Default: '200px'", name: "imageWidth", required: !1, type: { name: "string | number" } }, imageHeight: { defaultValue: { value: "auto" }, description: "Image height. Default: 'auto'", name: "imageHeight", required: !1, type: { name: "string | number" } }, maxWidth: { defaultValue: { value: "lg" }, description: "Container max width. Default: 'lg'", name: "maxWidth", required: !1, type: { name: 'false | "xs" | "sm" | "md" | "lg" | "xl"' } }, height: { defaultValue: { value: "100vh" }, description: "Main container height. Default: '100vh'", name: "height", required: !1, type: { name: "string | number" } }, py: { defaultValue: { value: "8" }, description: "Vertical padding. Default: 8 (64px)", name: "py", required: !1, type: { name: "string | number" } }, spacing: { defaultValue: { value: "6" }, description: "Spacing between elements. Default: 6", name: "spacing", required: !1, type: { name: "number" } }, titleVariant: { defaultValue: { value: "h4" }, description: "Title typography variant. Default: 'h4'", name: "titleVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"body2"' }, { value: '"body1"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"overline"' }] } }, descriptionVariant: { defaultValue: { value: "body1" }, description: "Description typography variant. Default: 'body1'", name: "descriptionVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"body2"' }, { value: '"body1"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"overline"' }] } }, buttonVariant: { defaultValue: { value: "contained" }, description: "Button variant. Default: 'contained'", name: "buttonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"outlined"' }, { value: '"contained"' }] } }, buttonColor: { defaultValue: { value: "primary" }, description: "Button color. Default: 'primary'", name: "buttonColor", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"error"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"info"' }, { value: '"success"' }, { value: '"warning"' }] } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, imageContainerSx: { defaultValue: null, description: "Custom styles for the image container", name: "imageContainerSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content stack", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "Custom styles for the title", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, descriptionSx: { defaultValue: null, description: "Custom styles for the description", name: "descriptionSx", required: !1, type: { name: "SxProps<Theme>" } }, buttonContainerSx: { defaultValue: null, description: "Custom styles for the button container", name: "buttonContainerSx", required: !1, type: { name: "SxProps<Theme>" } }, buttonProps: { defaultValue: null, description: "Additional button props", name: "buttonProps", required: !1, type: { name: "Partial<ButtonProps>" } }, hideImage: { defaultValue: { value: "false" }, description: "Hide image. Default: false", name: "hideImage", required: !1, type: { name: "boolean" } }, customActions: { defaultValue: null, description: "Custom content to render instead of the button", name: "customActions", required: !1, type: { name: "ReactNode" } } } };
+  n.displayName = "SErrorLayout", n.__docgenInfo = { description: "A full-screen error layout component for displaying error pages with customizable content and styling.", displayName: "SErrorLayout", props: { imageSrc: { defaultValue: null, description: "Source URL for the error image", name: "imageSrc", required: !0, type: { name: "string" } }, imageAlt: { defaultValue: null, description: "Alt text for the error image", name: "imageAlt", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Main error title text", name: "title", required: !0, type: { name: "string" } }, description: { defaultValue: null, description: "Error description text", name: "description", required: !0, type: { name: "ReactNode" } }, buttonText: { defaultValue: null, description: "Text for the action button. If not provided, button will not be shown", name: "buttonText", required: !1, type: { name: "string" } }, imageWidth: { defaultValue: { value: "200px" }, description: "Image width. Default: '200px'", name: "imageWidth", required: !1, type: { name: "string | number" } }, imageHeight: { defaultValue: { value: "auto" }, description: "Image height. Default: 'auto'", name: "imageHeight", required: !1, type: { name: "string | number" } }, maxWidth: { defaultValue: { value: "lg" }, description: "Container max width. Default: 'lg'", name: "maxWidth", required: !1, type: { name: 'false | "xs" | "sm" | "md" | "lg" | "xl"' } }, height: { defaultValue: { value: "100vh" }, description: "Main container height. Default: '100vh'", name: "height", required: !1, type: { name: "string | number" } }, py: { defaultValue: { value: "8" }, description: "Vertical padding. Default: 8 (64px)", name: "py", required: !1, type: { name: "string | number" } }, spacing: { defaultValue: { value: "6" }, description: "Spacing between elements. Default: 6", name: "spacing", required: !1, type: { name: "number" } }, titleVariant: { defaultValue: { value: "h4" }, description: "Title typography variant. Default: 'h4'", name: "titleVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, descriptionVariant: { defaultValue: { value: "body1" }, description: "Description typography variant. Default: 'body1'", name: "descriptionVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, buttonVariant: { defaultValue: { value: "contained" }, description: "Button variant. Default: 'contained'", name: "buttonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"outlined"' }, { value: '"contained"' }] } }, buttonColor: { defaultValue: { value: "primary" }, description: "Button color. Default: 'primary'", name: "buttonColor", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"success"' }, { value: '"error"' }, { value: '"info"' }, { value: '"warning"' }] } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, imageContainerSx: { defaultValue: null, description: "Custom styles for the image container", name: "imageContainerSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content stack", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "Custom styles for the title", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, descriptionSx: { defaultValue: null, description: "Custom styles for the description", name: "descriptionSx", required: !1, type: { name: "SxProps<Theme>" } }, buttonContainerSx: { defaultValue: null, description: "Custom styles for the button container", name: "buttonContainerSx", required: !1, type: { name: "SxProps<Theme>" } }, buttonProps: { defaultValue: null, description: "Additional button props", name: "buttonProps", required: !1, type: { name: "Partial<ButtonProps>" } }, hideImage: { defaultValue: { value: "false" }, description: "Hide image. Default: false", name: "hideImage", required: !1, type: { name: "boolean" } }, customActions: { defaultValue: null, description: "Custom content to render instead of the button", name: "customActions", required: !1, type: { name: "ReactNode" } } } };
 } catch {
 }
 try {
-  serrorlayout.displayName = "serrorlayout", serrorlayout.__docgenInfo = { description: "A full-screen error layout component for displaying error pages with customizable content and styling.", displayName: "serrorlayout", props: { imageSrc: { defaultValue: null, description: "Source URL for the error image", name: "imageSrc", required: !0, type: { name: "string" } }, imageAlt: { defaultValue: null, description: "Alt text for the error image", name: "imageAlt", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Main error title text", name: "title", required: !0, type: { name: "string" } }, description: { defaultValue: null, description: "Error description text", name: "description", required: !0, type: { name: "ReactNode" } }, buttonText: { defaultValue: null, description: "Text for the action button. If not provided, button will not be shown", name: "buttonText", required: !1, type: { name: "string" } }, imageWidth: { defaultValue: { value: "200px" }, description: "Image width. Default: '200px'", name: "imageWidth", required: !1, type: { name: "string | number" } }, imageHeight: { defaultValue: { value: "auto" }, description: "Image height. Default: 'auto'", name: "imageHeight", required: !1, type: { name: "string | number" } }, maxWidth: { defaultValue: { value: "lg" }, description: "Container max width. Default: 'lg'", name: "maxWidth", required: !1, type: { name: 'false | "xs" | "sm" | "md" | "lg" | "xl"' } }, height: { defaultValue: { value: "100vh" }, description: "Main container height. Default: '100vh'", name: "height", required: !1, type: { name: "string | number" } }, py: { defaultValue: { value: "8" }, description: "Vertical padding. Default: 8 (64px)", name: "py", required: !1, type: { name: "string | number" } }, spacing: { defaultValue: { value: "6" }, description: "Spacing between elements. Default: 6", name: "spacing", required: !1, type: { name: "number" } }, titleVariant: { defaultValue: { value: "h4" }, description: "Title typography variant. Default: 'h4'", name: "titleVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"body2"' }, { value: '"body1"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"overline"' }] } }, descriptionVariant: { defaultValue: { value: "body1" }, description: "Description typography variant. Default: 'body1'", name: "descriptionVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"body2"' }, { value: '"body1"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"overline"' }] } }, buttonVariant: { defaultValue: { value: "contained" }, description: "Button variant. Default: 'contained'", name: "buttonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"outlined"' }, { value: '"contained"' }] } }, buttonColor: { defaultValue: { value: "primary" }, description: "Button color. Default: 'primary'", name: "buttonColor", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"error"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"info"' }, { value: '"success"' }, { value: '"warning"' }] } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, imageContainerSx: { defaultValue: null, description: "Custom styles for the image container", name: "imageContainerSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content stack", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "Custom styles for the title", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, descriptionSx: { defaultValue: null, description: "Custom styles for the description", name: "descriptionSx", required: !1, type: { name: "SxProps<Theme>" } }, buttonContainerSx: { defaultValue: null, description: "Custom styles for the button container", name: "buttonContainerSx", required: !1, type: { name: "SxProps<Theme>" } }, buttonProps: { defaultValue: null, description: "Additional button props", name: "buttonProps", required: !1, type: { name: "Partial<ButtonProps>" } }, hideImage: { defaultValue: { value: "false" }, description: "Hide image. Default: false", name: "hideImage", required: !1, type: { name: "boolean" } }, customActions: { defaultValue: null, description: "Custom content to render instead of the button", name: "customActions", required: !1, type: { name: "ReactNode" } } } };
+  serrorlayout.displayName = "serrorlayout", serrorlayout.__docgenInfo = { description: "A full-screen error layout component for displaying error pages with customizable content and styling.", displayName: "serrorlayout", props: { imageSrc: { defaultValue: null, description: "Source URL for the error image", name: "imageSrc", required: !0, type: { name: "string" } }, imageAlt: { defaultValue: null, description: "Alt text for the error image", name: "imageAlt", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Main error title text", name: "title", required: !0, type: { name: "string" } }, description: { defaultValue: null, description: "Error description text", name: "description", required: !0, type: { name: "ReactNode" } }, buttonText: { defaultValue: null, description: "Text for the action button. If not provided, button will not be shown", name: "buttonText", required: !1, type: { name: "string" } }, imageWidth: { defaultValue: { value: "200px" }, description: "Image width. Default: '200px'", name: "imageWidth", required: !1, type: { name: "string | number" } }, imageHeight: { defaultValue: { value: "auto" }, description: "Image height. Default: 'auto'", name: "imageHeight", required: !1, type: { name: "string | number" } }, maxWidth: { defaultValue: { value: "lg" }, description: "Container max width. Default: 'lg'", name: "maxWidth", required: !1, type: { name: 'false | "xs" | "sm" | "md" | "lg" | "xl"' } }, height: { defaultValue: { value: "100vh" }, description: "Main container height. Default: '100vh'", name: "height", required: !1, type: { name: "string | number" } }, py: { defaultValue: { value: "8" }, description: "Vertical padding. Default: 8 (64px)", name: "py", required: !1, type: { name: "string | number" } }, spacing: { defaultValue: { value: "6" }, description: "Spacing between elements. Default: 6", name: "spacing", required: !1, type: { name: "number" } }, titleVariant: { defaultValue: { value: "h4" }, description: "Title typography variant. Default: 'h4'", name: "titleVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, descriptionVariant: { defaultValue: { value: "body1" }, description: "Description typography variant. Default: 'body1'", name: "descriptionVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, buttonVariant: { defaultValue: { value: "contained" }, description: "Button variant. Default: 'contained'", name: "buttonVariant", required: !1, type: { name: "enum", value: [{ value: '"text"' }, { value: '"outlined"' }, { value: '"contained"' }] } }, buttonColor: { defaultValue: { value: "primary" }, description: "Button color. Default: 'primary'", name: "buttonColor", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"success"' }, { value: '"error"' }, { value: '"info"' }, { value: '"warning"' }] } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, imageContainerSx: { defaultValue: null, description: "Custom styles for the image container", name: "imageContainerSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content stack", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "Custom styles for the title", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, descriptionSx: { defaultValue: null, description: "Custom styles for the description", name: "descriptionSx", required: !1, type: { name: "SxProps<Theme>" } }, buttonContainerSx: { defaultValue: null, description: "Custom styles for the button container", name: "buttonContainerSx", required: !1, type: { name: "SxProps<Theme>" } }, buttonProps: { defaultValue: null, description: "Additional button props", name: "buttonProps", required: !1, type: { name: "Partial<ButtonProps>" } }, hideImage: { defaultValue: { value: "false" }, description: "Hide image. Default: false", name: "hideImage", required: !1, type: { name: "boolean" } }, customActions: { defaultValue: null, description: "Custom content to render instead of the button", name: "customActions", required: !1, type: { name: "ReactNode" } } } };
 } catch {
 }
 export {

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

@@ -1,7 +1,7 @@
 import { j as i } from "../jsx-runtime-OVHDjVDe.js";
 import { useRef as x } from "react";
-import { useColorScheme as g, useTheme as b, Button as h, alpha as e, Box as o } from "@mui/material";
-import { SMovingBorder as u } from "../s-moving-border/s-moving-border.js";
+import { useColorScheme as g, useTheme as b, Button as u, alpha as e, Box as o } from "@mui/material";
+import { SMovingBorder as h } from "../s-moving-border/s-moving-border.js";
 const n = ({
   borderRadius: r = 12,
   children: p,
@@ -10,7 +10,7 @@ const n = ({
 }) => {
   const s = x(null), { mode: a } = g(), t = b(), c = a === "light" ? (t.vars || t).palette.primary.main : (t.vars || t).palette.primary.light, d = a === "light" ? 90 : 110;
   return /* @__PURE__ */ i.jsx(
-    u,
+    h,
     {
       duration: l,
       borderRadius: r,
@@ -18,7 +18,7 @@ const n = ({
       glowSize: d,
       glowColor: c,
       children: /* @__PURE__ */ i.jsx(
-        h,
+        u,
         {
           variant: "text",
           sx: {
@@ -100,7 +100,6 @@ const n = ({
                 position: "relative",
                 zIndex: 2,
                 fontSize: 16,
-                fontWeight: a === "light" ? 700 : 600,
                 background: `
               ${(t.vars || t).palette.gradient.primary}, 
               linear-gradient(135deg, 

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: '"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" } } } };
+  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-in-out"' }, { value: '"ease-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" } } } };
 } 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-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" } } } };
+  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-in-out"' }, { value: '"ease-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" } } } };
 } catch {
 }
 export {

package/dist/s-moving-border/s-moving-border.d.ts

@@ -8,7 +8,7 @@ export interface SMovingBorderProps extends BoxProps {
     duration?: number;
     /** Additional CSS class name for styling */
     className?: string;
-    /** Color of the glow effect (default: '#38bdf8') */
+    /** Color of the glow effect (default: 'var(--s-palette-primary-main)') */
     glowColor?: string;
     /** Size of the glow effect in pixels (default: 250) */
     glowSize?: number;

package/dist/s-moving-border/s-moving-border.js

@@ -1,8 +1,8 @@
 import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import { useRef as f, useEffect as w } from "react";
+import { useRef as m, useEffect as w } from "react";
 import { Box as a } from "@mui/material";
 import { useMotionValue as _, useAnimationFrame as j, useTransform as g, useMotionTemplate as S, motion as C } from "framer-motion";
-const N = 250, V = "#38bdf8", h = (n, r) => ({
+const N = 250, h = (n, o) => ({
   position: "absolute",
   left: "50%",
   top: "50%",
@@ -10,35 +10,35 @@ const N = 250, V = "#38bdf8", h = (n, r) => ({
   height: `${n}px`,
   transform: "translate(-50%, -50%)",
   opacity: 0.5,
-  background: `radial-gradient(${r} 40%, transparent 60%)`,
+  background: `radial-gradient(${o} 40%, transparent 60%)`,
   filter: "blur(12px)",
   // Creates the soft glow effect
   pointerEvents: "none"
   // Prevents interference with user interactions
 });
-function x({
+function y({
   children: n,
-  duration: r,
-  rx: p,
+  duration: o,
+  rx: u,
   ry: d,
   phase: c = 0
 }) {
-  const i = f(null), s = _(0);
+  const i = m(null), s = _(0);
   j((l) => {
-    var o;
-    const t = (o = i.current) == null ? void 0 : o.getTotalLength();
+    var r;
+    const t = (r = i.current) == null ? void 0 : r.getTotalLength();
     if (t) {
-      const v = t / r;
-      s.set((l * v + t * c) % t);
+      const b = t / o;
+      s.set((l * b + t * c) % t);
     }
   });
-  const u = g(s, (l) => {
-    var t, o;
-    return (o = (t = i.current) == null ? void 0 : t.getPointAtLength(l)) == null ? void 0 : o.x;
-  }), b = g(s, (l) => {
-    var t, o;
-    return (o = (t = i.current) == null ? void 0 : t.getPointAtLength(l)) == null ? void 0 : o.y;
-  }), y = S`translateX(${u}px) translateY(${b}px) translateX(-50%) translateY(-50%)`;
+  const p = g(s, (l) => {
+    var t, r;
+    return (r = (t = i.current) == null ? void 0 : t.getPointAtLength(l)) == null ? void 0 : r.x;
+  }), x = g(s, (l) => {
+    var t, r;
+    return (r = (t = i.current) == null ? void 0 : t.getPointAtLength(l)) == null ? void 0 : r.y;
+  }), v = S`translateX(${p}px) translateY(${x}px) translateX(-50%) translateY(-50%)`;
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       "svg",
@@ -48,7 +48,7 @@ function x({
         width: "100%",
         height: "100%",
         style: { position: "absolute", inset: 0 },
-        children: /* @__PURE__ */ e.jsx("rect", { fill: "none", width: "100%", height: "100%", rx: p, ry: d, ref: i })
+        children: /* @__PURE__ */ e.jsx("rect", { fill: "none", width: "100%", height: "100%", rx: u, ry: d, ref: i })
       }
     ),
     /* @__PURE__ */ e.jsx(
@@ -59,24 +59,24 @@ function x({
           top: 0,
           left: 0,
           display: "inline-block",
-          transform: y
+          transform: v
         },
         children: n
       }
     )
   ] });
 }
-const m = ({
+const f = ({
   className: n,
-  duration: r = 6e3,
-  children: p,
-  glowColor: d = V,
+  duration: o = 6e3,
+  children: u,
+  glowColor: d = "var(--s-palette-primary-main)",
   glowSize: c = N,
   ...i
 }) => {
-  const s = f(null), u = f(null);
+  const s = m(null), p = m(null);
   return w(() => () => {
-    u.current !== null && window.cancelAnimationFrame(u.current);
+    p.current !== null && window.cancelAnimationFrame(p.current);
   }, []), // Main container with relative positioning for absolute children
   /* @__PURE__ */ e.jsxs(
     a,
@@ -93,8 +93,8 @@ const m = ({
       ...i,
       children: [
         /* @__PURE__ */ e.jsxs(a, { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, children: [
-          /* @__PURE__ */ e.jsx(x, { duration: r, rx: "100%", ry: "100%", phase: 0, children: /* @__PURE__ */ e.jsx(a, { sx: h(c, d) }) }),
-          /* @__PURE__ */ e.jsx(x, { duration: r, rx: "100%", ry: "100%", phase: 0.5, children: /* @__PURE__ */ e.jsx(a, { sx: h(c, d) }) })
+          /* @__PURE__ */ e.jsx(y, { duration: o, rx: "100%", ry: "100%", phase: 0, children: /* @__PURE__ */ e.jsx(a, { sx: h(c, d) }) }),
+          /* @__PURE__ */ e.jsx(y, { duration: o, rx: "100%", ry: "100%", phase: 0.5, children: /* @__PURE__ */ e.jsx(a, { sx: h(c, d) }) })
         ] }),
         /* @__PURE__ */ e.jsx(
           a,
@@ -129,21 +129,21 @@ const m = ({
             )
           }
         ),
-        p
+        u
       ]
     }
   );
 };
-m.displayName = "SMovingBorder";
+f.displayName = "SMovingBorder";
 try {
-  m.displayName = "SMovingBorder", m.__docgenInfo = { description: "An animated border effect component that creates smooth moving light effects around the element perimeter.", displayName: "SMovingBorder", props: { duration: { defaultValue: { value: "6000" }, description: "Duration of one complete animation cycle in milliseconds (default: 6000)", name: "duration", required: !1, type: { name: "number" } }, className: { defaultValue: null, description: "Additional CSS class name for styling", name: "className", required: !1, type: { name: "string" } }, glowColor: { defaultValue: { value: "#38bdf8" }, description: "Color of the glow effect (default: '#38bdf8')", name: "glowColor", required: !1, type: { name: "string" } }, glowSize: { defaultValue: { value: "250" }, description: "Size of the glow effect in pixels (default: 250)", name: "glowSize", required: !1, type: { name: "number" } }, children: { defaultValue: null, description: "Content to render inside the moving border container", name: "children", required: !0, type: { name: "ReactNode" } } } };
+  f.displayName = "SMovingBorder", f.__docgenInfo = { description: "An animated border effect component that creates smooth moving light effects around the element perimeter.", displayName: "SMovingBorder", props: { duration: { defaultValue: { value: "6000" }, description: "Duration of one complete animation cycle in milliseconds (default: 6000)", name: "duration", required: !1, type: { name: "number" } }, className: { defaultValue: null, description: "Additional CSS class name for styling", name: "className", required: !1, type: { name: "string" } }, glowColor: { defaultValue: { value: "var(--s-palette-primary-main)" }, description: "Color of the glow effect (default: 'var(--s-palette-primary-main)')", name: "glowColor", required: !1, type: { name: "string" } }, glowSize: { defaultValue: { value: "250" }, description: "Size of the glow effect in pixels (default: 250)", name: "glowSize", required: !1, type: { name: "number" } }, children: { defaultValue: null, description: "Content to render inside the moving border container", name: "children", required: !0, type: { name: "ReactNode" } } } };
 } catch {
 }
 try {
-  smovingborder.displayName = "smovingborder", smovingborder.__docgenInfo = { description: "An animated border effect component that creates smooth moving light effects around the element perimeter.", displayName: "smovingborder", props: { duration: { defaultValue: { value: "6000" }, description: "Duration of one complete animation cycle in milliseconds (default: 6000)", name: "duration", required: !1, type: { name: "number" } }, className: { defaultValue: null, description: "Additional CSS class name for styling", name: "className", required: !1, type: { name: "string" } }, glowColor: { defaultValue: { value: "#38bdf8" }, description: "Color of the glow effect (default: '#38bdf8')", name: "glowColor", required: !1, type: { name: "string" } }, glowSize: { defaultValue: { value: "250" }, description: "Size of the glow effect in pixels (default: 250)", name: "glowSize", required: !1, type: { name: "number" } }, children: { defaultValue: null, description: "Content to render inside the moving border container", name: "children", required: !0, type: { name: "ReactNode" } } } };
+  smovingborder.displayName = "smovingborder", smovingborder.__docgenInfo = { description: "An animated border effect component that creates smooth moving light effects around the element perimeter.", displayName: "smovingborder", props: { duration: { defaultValue: { value: "6000" }, description: "Duration of one complete animation cycle in milliseconds (default: 6000)", name: "duration", required: !1, type: { name: "number" } }, className: { defaultValue: null, description: "Additional CSS class name for styling", name: "className", required: !1, type: { name: "string" } }, glowColor: { defaultValue: { value: "var(--s-palette-primary-main)" }, description: "Color of the glow effect (default: 'var(--s-palette-primary-main)')", name: "glowColor", required: !1, type: { name: "string" } }, glowSize: { defaultValue: { value: "250" }, description: "Size of the glow effect in pixels (default: 250)", name: "glowSize", required: !1, type: { name: "number" } }, children: { defaultValue: null, description: "Content to render inside the moving border container", name: "children", required: !0, type: { name: "ReactNode" } } } };
 } catch {
 }
 export {
-  m as SMovingBorder,
-  m as default
+  f as SMovingBorder,
+  f as default
 };

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: '"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" } } } };
+  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" } } } };
 } 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: '"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" } } } };
+  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" } } } };
 } catch {
 }
 export {

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

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

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

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

package/dist/s-text-shimmer/s-text-shimmer.d.ts

@@ -1,8 +1,8 @@
-import { BoxProps } from '@mui/material';
+import { TypographyProps } from '@mui/material';
 /**
  * Props interface for STextShimmer component
  */
-export interface STextShimmerProps extends Omit<BoxProps, 'children'> {
+export interface STextShimmerProps extends Omit<TypographyProps, 'children'> {
     /** The text content to display with the shimmer effect */
     children: string;
     /** Duration of the shimmer animation in seconds */

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

@@ -1,17 +1,17 @@
-import { j as d } from "../jsx-runtime-OVHDjVDe.js";
-import { forwardRef as m, useMemo as p } from "react";
-import { Box as l } from "@mui/material";
-import { s as c } from "../styled-B0Z4EDy9.js";
-import { keyframes as u } from "@emotion/react";
-const h = u`
+import { j as s } from "../jsx-runtime-OVHDjVDe.js";
+import { forwardRef as d, useMemo as m } from "react";
+import { Typography as p } from "@mui/material";
+import { s as l } from "../styled-B0Z4EDy9.js";
+import { keyframes as c } from "@emotion/react";
+const u = c`
   0% {
     background-position: 100% center;
   }
   100% {
     background-position: 0% center;
   }
-`, f = c(l, {
-  shouldForwardProp: (e) => e !== "duration" && e !== "dynamicSpread" && e !== "component"
+`, h = l(p, {
+  shouldForwardProp: (e) => e !== "duration" && e !== "dynamicSpread"
 })(({ theme: e, duration: t, dynamicSpread: r }) => ({
   display: "inline-block",
   position: "relative",
@@ -20,15 +20,15 @@ const h = u`
   color: "transparent",
   backgroundSize: "250% 100%, auto",
   backgroundRepeat: "no-repeat, padding-box",
-  animation: `${h} ${t}s linear infinite`,
+  animation: `${u} ${t}s linear infinite`,
   "--spread": `${r}px`,
   "--base-color": (e.vars || e).palette.text.disabled,
   "--base-gradient-color": (e.vars || e).palette.text.primary,
   backgroundImage: "linear-gradient(90deg, transparent calc(50% - var(--spread)), var(--base-gradient-color), transparent calc(50% + var(--spread))), linear-gradient(var(--base-color), var(--base-color))"
-})), a = m(
-  ({ children: e, duration: t = 2, spread: r = 2, component: i = "p", ...n }, o) => {
-    const s = p(() => e.length * r, [e, r]);
-    return /* @__PURE__ */ d.jsx(f, { ref: o, component: i, duration: t, dynamicSpread: s, ...n, children: e });
+})), a = d(
+  ({ children: e, duration: t = 2, spread: r = 2, ...i }, n) => {
+    const o = m(() => e.length * r, [e, r]);
+    return /* @__PURE__ */ s.jsx(h, { ref: n, duration: t, dynamicSpread: o, ...i, children: e });
   }
 );
 a.displayName = "STextShimmer";

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

@@ -9,7 +9,7 @@ const i = ({
   const [n, r] = p(!1), s = () => {
     r(!n);
   };
-  return o === "tooltip" ? /* @__PURE__ */ t.jsx(u, { title: e || "", arrow: !0, children: /* @__PURE__ */ t.jsx(
+  return o === "tooltip" ? /* @__PURE__ */ t.jsx(u, { title: e, arrow: !0, children: /* @__PURE__ */ t.jsx(
     l,
     {
       variant: "body2",