@solostylist/ui-kit 1.0.170 → 1.0.172

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

@@ -1,8 +1,8 @@
 import { j as y } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as k, useRef as R, useEffect as E, useMemo as g } from "react";
-import { Typography as F } from "@mui/material";
-import { motion as M } from "framer-motion";
-const N = (r, o) => {
+import { useState as B, useRef as k, useEffect as R, useMemo as g } from "react";
+import { Typography as E } from "@mui/material";
+import { motion as F } from "framer-motion";
+const M = (r, o) => {
   const s = /* @__PURE__ */ new Set([...Object.keys(r), ...o.flatMap((e) => Object.keys(e))]), n = {};
   return s.forEach((e) => {
     n[e] = [r[e], ...o.map((l) => l[e])];
@@ -20,25 +20,24 @@ const N = (r, o) => {
   onAnimationComplete: w,
   stepDuration: x = 0.35,
   variant: V = "body1",
-  component: q = "p",
-  sx: T,
-  ...C
+  sx: q,
+  ...T
 }) => {
-  const i = s === "words" ? r.split(" ") : r.split(""), [_, S] = k(!1), u = R(null);
-  E(() => {
+  const i = s === "words" ? r.split(" ") : r.split(""), [C, _] = B(!1), u = k(null);
+  R(() => {
     if (!u.current) return;
     const a = new IntersectionObserver(
       ([t]) => {
-        t.isIntersecting && (S(!0), a.unobserve(u.current));
+        t.isIntersecting && (_(!0), a.unobserve(u.current));
       },
       { threshold: e, rootMargin: l }
     );
     return a.observe(u.current), () => a.disconnect();
   }, [e, l]);
-  const j = g(
+  const S = g(
     () => n === "top" ? { filter: "blur(10px)", opacity: 0, y: -50 } : { filter: "blur(10px)", opacity: 0, y: 50 },
     [n]
-  ), A = g(
+  ), j = g(
     () => [
       {
         filter: "blur(5px)",
@@ -48,18 +47,18 @@ const N = (r, o) => {
       { filter: "blur(0px)", opacity: 1, y: 0 }
     ],
     [n]
-  ), p = b ?? j, d = h ?? A, m = d.length + 1, D = x * (m - 1), I = Array.from({ length: m }, (a, t) => m === 1 ? 0 : t / (m - 1));
-  return /* @__PURE__ */ y.jsx(F, { ref: u, variant: V, component: q, sx: T, ...C, children: i.map((a, t) => {
-    const B = N(p, d), f = {
-      duration: D,
-      times: I,
+  ), p = b ?? S, d = h ?? j, m = d.length + 1, A = x * (m - 1), D = Array.from({ length: m }, (a, t) => m === 1 ? 0 : t / (m - 1));
+  return /* @__PURE__ */ y.jsx(E, { ref: u, variant: V, sx: q, ...T, children: i.map((a, t) => {
+    const I = M(p, d), f = {
+      duration: A,
+      times: D,
       delay: t * o / 1e3
     };
     return f.ease = v, /* @__PURE__ */ y.jsxs(
-      M.span,
+      F.span,
       {
         initial: p,
-        animate: _ ? B : p,
+        animate: C ? I : p,
         transition: f,
         onAnimationComplete: t === i.length - 1 ? w : void 0,
         style: {
@@ -77,7 +76,7 @@ const N = (r, o) => {
 };
 c.displayName = "SBlurText";
 try {
-  c.displayName = "SBlurText", c.__docgenInfo = { description: "A Typography component that animates text with a blur effect when it comes into view.", displayName: "SBlurText", props: { text: { defaultValue: null, description: "The text content to animate", name: "text", required: !0, type: { name: "string" } }, delay: { defaultValue: { value: "100" }, description: "Delay between animating each segment in milliseconds", name: "delay", required: !1, type: { name: "number" } }, animateBy: { defaultValue: { value: "words" }, description: "Animation granularity - animate by words or individual letters", name: "animateBy", required: !1, type: { name: "enum", value: [{ value: '"words"' }, { value: '"letters"' }] } }, direction: { defaultValue: { value: "top" }, description: "Direction of the blur animation", name: "direction", required: !1, type: { name: "enum", value: [{ value: '"bottom"' }, { value: '"top"' }] } }, threshold: { defaultValue: { value: "0.1" }, description: "Intersection observer threshold for triggering animation", name: "threshold", required: !1, type: { name: "number" } }, rootMargin: { defaultValue: { value: "0px" }, description: "Intersection observer root margin", name: "rootMargin", required: !1, type: { name: "string" } }, animationFrom: { defaultValue: null, description: "Custom starting animation state", name: "animationFrom", required: !1, type: { name: "Record<string, string | number>" } }, animationTo: { defaultValue: null, description: "Custom ending animation states (array for multi-step animations)", name: "animationTo", required: !1, type: { name: "Record<string, string | number>[]" } }, easing: { defaultValue: { value: "(t) => t" }, description: "Custom easing function for animation timing", name: "easing", required: !1, type: { name: "((t: number) => number)" } }, onAnimationComplete: { defaultValue: null, description: "Callback fired when animation completes", name: "onAnimationComplete", required: !1, type: { name: "(() => void)" } }, stepDuration: { defaultValue: { value: "0.35" }, description: "Duration of each animation step in seconds", name: "stepDuration", required: !1, type: { name: "number" } } } };
+  c.displayName = "SBlurText", c.__docgenInfo = { description: "A Typography component that animates text with a blur effect when it comes into view.", displayName: "SBlurText", props: { text: { defaultValue: null, description: "The text content to animate", name: "text", required: !0, type: { name: "string" } }, delay: { defaultValue: { value: "100" }, description: "Delay between animating each segment in milliseconds", name: "delay", required: !1, type: { name: "number" } }, animateBy: { defaultValue: { value: "words" }, description: "Animation granularity - animate by words or individual letters", name: "animateBy", required: !1, type: { name: "enum", value: [{ value: '"words"' }, { value: '"letters"' }] } }, direction: { defaultValue: { value: "top" }, description: "Direction of the blur animation", name: "direction", required: !1, type: { name: "enum", value: [{ value: '"top"' }, { value: '"bottom"' }] } }, threshold: { defaultValue: { value: "0.1" }, description: "Intersection observer threshold for triggering animation", name: "threshold", required: !1, type: { name: "number" } }, rootMargin: { defaultValue: { value: "0px" }, description: "Intersection observer root margin", name: "rootMargin", required: !1, type: { name: "string" } }, animationFrom: { defaultValue: null, description: "Custom starting animation state", name: "animationFrom", required: !1, type: { name: "Record<string, string | number>" } }, animationTo: { defaultValue: null, description: "Custom ending animation states (array for multi-step animations)", name: "animationTo", required: !1, type: { name: "Record<string, string | number>[]" } }, easing: { defaultValue: { value: "(t) => t" }, description: "Custom easing function for animation timing", name: "easing", required: !1, type: { name: "((t: number) => number)" } }, onAnimationComplete: { defaultValue: null, description: "Callback fired when animation completes", name: "onAnimationComplete", required: !1, type: { name: "(() => void)" } }, stepDuration: { defaultValue: { value: "0.35" }, description: "Duration of each animation step in seconds", name: "stepDuration", required: !1, type: { name: "number" } } } };
 } catch {
 }
 export {

package/dist/s-breadcrumbs/s-breadcrumbs.js

@@ -39,11 +39,11 @@ const l = b(
 );
 l.displayName = "SBreadcrumbs";
 try {
-  l.displayName = "SBreadcrumbs", l.__docgenInfo = { description: "A breadcrumb navigation component for displaying hierarchical navigation paths.", displayName: "SBreadcrumbs", props: { sx: { defaultValue: null, description: "System prop for custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, separator: { defaultValue: { value: '<ChevronRightIcon fontSize="small" />' }, description: "Custom separator element between breadcrumb items", name: "separator", required: !1, type: { name: "ReactNode" } }, LinkComponent: { defaultValue: null, description: "Custom link component (e.g., React Router Link) for navigation", name: "LinkComponent", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, currentColor: { defaultValue: { value: "text.primary" }, description: "Color of the current (active) breadcrumb item", name: "currentColor", required: !1, type: { name: "string" } }, linkColor: { defaultValue: { value: "primary.main" }, description: "Color of clickable breadcrumb links", name: "linkColor", required: !1, type: { name: "string" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } } } };
+  l.displayName = "SBreadcrumbs", l.__docgenInfo = { description: "A breadcrumb navigation component for displaying hierarchical navigation paths.", displayName: "SBreadcrumbs", props: { separator: { defaultValue: { value: '<ChevronRightIcon fontSize="small" />' }, description: "Custom separator element between breadcrumb items", name: "separator", required: !1, type: { name: "ReactNode" } }, sx: { defaultValue: null, description: "System prop for custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, LinkComponent: { defaultValue: null, description: "Custom link component (e.g., React Router Link) for navigation", name: "LinkComponent", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, linkColor: { defaultValue: { value: "primary.main" }, description: "Color of clickable breadcrumb links", name: "linkColor", required: !1, type: { name: "string" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, currentColor: { defaultValue: { value: "text.primary" }, description: "Color of the current (active) breadcrumb item", name: "currentColor", required: !1, type: { name: "string" } } } };
 } catch {
 }
 try {
-  sbreadcrumbs.displayName = "sbreadcrumbs", sbreadcrumbs.__docgenInfo = { description: "A breadcrumb navigation component for displaying hierarchical navigation paths.", displayName: "sbreadcrumbs", props: { sx: { defaultValue: null, description: "System prop for custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, separator: { defaultValue: { value: '<ChevronRightIcon fontSize="small" />' }, description: "Custom separator element between breadcrumb items", name: "separator", required: !1, type: { name: "ReactNode" } }, LinkComponent: { defaultValue: null, description: "Custom link component (e.g., React Router Link) for navigation", name: "LinkComponent", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, currentColor: { defaultValue: { value: "text.primary" }, description: "Color of the current (active) breadcrumb item", name: "currentColor", required: !1, type: { name: "string" } }, linkColor: { defaultValue: { value: "primary.main" }, description: "Color of clickable breadcrumb links", name: "linkColor", required: !1, type: { name: "string" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } } } };
+  sbreadcrumbs.displayName = "sbreadcrumbs", sbreadcrumbs.__docgenInfo = { description: "A breadcrumb navigation component for displaying hierarchical navigation paths.", displayName: "sbreadcrumbs", props: { separator: { defaultValue: { value: '<ChevronRightIcon fontSize="small" />' }, description: "Custom separator element between breadcrumb items", name: "separator", required: !1, type: { name: "ReactNode" } }, sx: { defaultValue: null, description: "System prop for custom styling", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, LinkComponent: { defaultValue: null, description: "Custom link component (e.g., React Router Link) for navigation", name: "LinkComponent", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, linkColor: { defaultValue: { value: "primary.main" }, description: "Color of clickable breadcrumb links", name: "linkColor", required: !1, type: { name: "string" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, currentColor: { defaultValue: { value: "text.primary" }, description: "Color of the current (active) breadcrumb item", name: "currentColor", required: !1, type: { name: "string" } } } };
 } catch {
 }
 export {

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

@@ -32,11 +32,11 @@ const t = ({
 ] });
 t.displayName = "SButtonLink";
 try {
-  t.displayName = "SButtonLink", t.__docgenInfo = { description: "A flexible link component that combines text and a clickable link element.", displayName: "SButtonLink", props: { beforeText: { defaultValue: { value: "" }, description: "Text or element displayed before the main link", name: "beforeText", required: !1, type: { name: "ReactNode" } }, afterText: { defaultValue: { value: "" }, description: "Text or element displayed after the main link", name: "afterText", required: !1, type: { name: "ReactNode" } }, mainText: { defaultValue: { value: "" }, description: "The main clickable link text or element", name: "mainText", required: !1, type: { name: "ReactNode" } }, href: { defaultValue: { value: "#" }, description: "URL for the link (defaults to '#')", name: "href", required: !1, type: { name: "string" } }, component: { defaultValue: { value: "a" }, description: "Component to render the link as (e.g., RouterLink for client-side routing)", name: "component", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, target: { defaultValue: null, description: "Target attribute for the link (e.g., '_blank' for new tab)", name: "target", required: !1, type: { name: "string" } }, color: { defaultValue: { value: "text.secondary" }, description: "Color of the surrounding text", name: "color", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"error" | "primary" | "secondary" | "info" | "success" | "warning" | "textDisabled" | "textPrimary" | "textSecondary", TypographyPropsColorOverrides>' } }, linkColor: { defaultValue: { value: "undefined" }, description: "Color of the link itself (overrides default link color)", name: "linkColor", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"error" | "primary" | "secondary" | "info" | "success" | "warning" | "textDisabled" | "textPrimary" | "textSecondary", TypographyPropsColorOverrides>' } }, lineHeight: { defaultValue: null, description: "Line height for the typography", name: "lineHeight", required: !1, type: { name: "ResponsiveStyleValue<LineHeight<string | number> | readonly NonNullable<LineHeight<string | number>>[]> | ((theme: Theme) => ResponsiveStyleValue<...>)" } }, variant: { defaultValue: { value: "body2" }, description: "Typography variant for the container text", name: "variant", 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"' }] } }, onClick: { defaultValue: null, description: "Click handler for the link", name: "onClick", required: !1, type: { name: "MouseEventHandler<HTMLAnchorElement>" } } } };
+  t.displayName = "SButtonLink", t.__docgenInfo = { description: "A flexible link component that combines text and a clickable link element.", displayName: "SButtonLink", props: { beforeText: { defaultValue: { value: "" }, description: "Text or element displayed before the main link", name: "beforeText", required: !1, type: { name: "ReactNode" } }, afterText: { defaultValue: { value: "" }, description: "Text or element displayed after the main link", name: "afterText", required: !1, type: { name: "ReactNode" } }, mainText: { defaultValue: { value: "" }, description: "The main clickable link text or element", name: "mainText", required: !1, type: { name: "ReactNode" } }, href: { defaultValue: { value: "#" }, description: "URL for the link (defaults to '#')", name: "href", required: !1, type: { name: "string" } }, component: { defaultValue: { value: "a" }, description: "Component to render the link as (e.g., RouterLink for client-side routing)", name: "component", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, target: { defaultValue: null, description: "Target attribute for the link (e.g., '_blank' for new tab)", name: "target", required: !1, type: { name: "string" } }, color: { defaultValue: { value: "text.secondary" }, description: "Color of the surrounding text", name: "color", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"primary" | "secondary" | "error" | "info" | "success" | "warning" | "textPrimary" | "textSecondary" | "textDisabled", TypographyPropsColorOverrides>' } }, linkColor: { defaultValue: { value: "undefined" }, description: "Color of the link itself (overrides default link color)", name: "linkColor", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"primary" | "secondary" | "error" | "info" | "success" | "warning" | "textPrimary" | "textSecondary" | "textDisabled", TypographyPropsColorOverrides>' } }, lineHeight: { defaultValue: null, description: "Line height for the typography", name: "lineHeight", required: !1, type: { name: "ResponsiveStyleValue<LineHeight<string | number> | readonly NonNullable<LineHeight<string | number>>[]> | ((theme: Theme) => ResponsiveStyleValue<...>)" } }, variant: { defaultValue: { value: "body2" }, description: "Typography variant for the container text", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, onClick: { defaultValue: null, description: "Click handler for the link", name: "onClick", required: !1, type: { name: "MouseEventHandler<HTMLAnchorElement>" } } } };
 } catch {
 }
 try {
-  sbuttonlink.displayName = "sbuttonlink", sbuttonlink.__docgenInfo = { description: "A flexible link component that combines text and a clickable link element.", displayName: "sbuttonlink", props: { beforeText: { defaultValue: { value: "" }, description: "Text or element displayed before the main link", name: "beforeText", required: !1, type: { name: "ReactNode" } }, afterText: { defaultValue: { value: "" }, description: "Text or element displayed after the main link", name: "afterText", required: !1, type: { name: "ReactNode" } }, mainText: { defaultValue: { value: "" }, description: "The main clickable link text or element", name: "mainText", required: !1, type: { name: "ReactNode" } }, href: { defaultValue: { value: "#" }, description: "URL for the link (defaults to '#')", name: "href", required: !1, type: { name: "string" } }, component: { defaultValue: { value: "a" }, description: "Component to render the link as (e.g., RouterLink for client-side routing)", name: "component", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, target: { defaultValue: null, description: "Target attribute for the link (e.g., '_blank' for new tab)", name: "target", required: !1, type: { name: "string" } }, color: { defaultValue: { value: "text.secondary" }, description: "Color of the surrounding text", name: "color", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"error" | "primary" | "secondary" | "info" | "success" | "warning" | "textDisabled" | "textPrimary" | "textSecondary", TypographyPropsColorOverrides>' } }, linkColor: { defaultValue: { value: "undefined" }, description: "Color of the link itself (overrides default link color)", name: "linkColor", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"error" | "primary" | "secondary" | "info" | "success" | "warning" | "textDisabled" | "textPrimary" | "textSecondary", TypographyPropsColorOverrides>' } }, lineHeight: { defaultValue: null, description: "Line height for the typography", name: "lineHeight", required: !1, type: { name: "ResponsiveStyleValue<LineHeight<string | number> | readonly NonNullable<LineHeight<string | number>>[]> | ((theme: Theme) => ResponsiveStyleValue<...>)" } }, variant: { defaultValue: { value: "body2" }, description: "Typography variant for the container text", name: "variant", 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"' }] } }, onClick: { defaultValue: null, description: "Click handler for the link", name: "onClick", required: !1, type: { name: "MouseEventHandler<HTMLAnchorElement>" } } } };
+  sbuttonlink.displayName = "sbuttonlink", sbuttonlink.__docgenInfo = { description: "A flexible link component that combines text and a clickable link element.", displayName: "sbuttonlink", props: { beforeText: { defaultValue: { value: "" }, description: "Text or element displayed before the main link", name: "beforeText", required: !1, type: { name: "ReactNode" } }, afterText: { defaultValue: { value: "" }, description: "Text or element displayed after the main link", name: "afterText", required: !1, type: { name: "ReactNode" } }, mainText: { defaultValue: { value: "" }, description: "The main clickable link text or element", name: "mainText", required: !1, type: { name: "ReactNode" } }, href: { defaultValue: { value: "#" }, description: "URL for the link (defaults to '#')", name: "href", required: !1, type: { name: "string" } }, component: { defaultValue: { value: "a" }, description: "Component to render the link as (e.g., RouterLink for client-side routing)", name: "component", required: !1, type: { name: "ElementType<any, keyof IntrinsicElements>" } }, target: { defaultValue: null, description: "Target attribute for the link (e.g., '_blank' for new tab)", name: "target", required: !1, type: { name: "string" } }, color: { defaultValue: { value: "text.secondary" }, description: "Color of the surrounding text", name: "color", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"primary" | "secondary" | "error" | "info" | "success" | "warning" | "textPrimary" | "textSecondary" | "textDisabled", TypographyPropsColorOverrides>' } }, linkColor: { defaultValue: { value: "undefined" }, description: "Color of the link itself (overrides default link color)", name: "linkColor", required: !1, type: { name: '(string & {}) | OverridableStringUnion<"primary" | "secondary" | "error" | "info" | "success" | "warning" | "textPrimary" | "textSecondary" | "textDisabled", TypographyPropsColorOverrides>' } }, lineHeight: { defaultValue: null, description: "Line height for the typography", name: "lineHeight", required: !1, type: { name: "ResponsiveStyleValue<LineHeight<string | number> | readonly NonNullable<LineHeight<string | number>>[]> | ((theme: Theme) => ResponsiveStyleValue<...>)" } }, variant: { defaultValue: { value: "body2" }, description: "Typography variant for the container text", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"inherit"' }, { value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, onClick: { defaultValue: null, description: "Click handler for the link", name: "onClick", required: !1, type: { name: "MouseEventHandler<HTMLAnchorElement>" } } } };
 } catch {
 }
 export {

package/dist/s-category-card/s-category-card.js

@@ -107,11 +107,11 @@ try {
 } catch {
 }
 try {
-  i.displayName = "SCategoryCard", i.__docgenInfo = { description: "A stylish category card component that displays an image with an overlaid title.", displayName: "SCategoryCard", props: { image: { defaultValue: null, description: "URL or path to the category image source", name: "image", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Display title for the category shown as overlay text", name: "title", required: !0, type: { name: "string" } }, width: { defaultValue: { value: "250" }, description: "Width of the category card", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "250" }, description: "Height of the category card", name: "height", required: !1, type: { name: "string | number" } }, alt: { defaultValue: { value: "category" }, description: "Alternative text for the image", name: "alt", required: !1, type: { name: "string" } }, titlePosition: { defaultValue: { value: "bottom" }, description: "Position of the title overlay on the image", name: "titlePosition", required: !1, type: { name: "enum", value: [{ value: '"bottom"' }, { value: '"top"' }, { value: '"center"' }] } }, titleAlignment: { defaultValue: { value: "center" }, description: "Text alignment of the title", name: "titleAlignment", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }, { value: '"center"' }] } }, titleVariant: { defaultValue: { value: "body1" }, description: "Typography variant for the title text", 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: '"body2"' }, { value: '"body1"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"overline"' }] } }, titleColor: { defaultValue: null, description: "Color of the title text", name: "titleColor", required: !1, type: { name: "string" } }, titleBackgroundColor: { defaultValue: { value: "background.paper" }, description: "Background color of the title overlay", name: "titleBackgroundColor", required: !1, type: { name: "string" } }, titleOpacity: { defaultValue: { value: "1" }, description: "Opacity of the title overlay (0-1)", name: "titleOpacity", required: !1, type: { name: "number" } }, borderRadius: { defaultValue: { value: "2" }, description: "Border radius of the card and title overlay", name: "borderRadius", required: !1, type: { name: "string | number" } }, disableHoverEffect: { defaultValue: { value: "false" }, description: "Disable the hover zoom effect on the image", name: "disableHoverEffect", required: !1, type: { name: "boolean" } }, hoverScale: { defaultValue: { value: "1.1" }, description: "Scale factor for hover zoom effect", name: "hoverScale", required: !1, type: { name: "number" } }, onClick: { defaultValue: null, description: "Handler called when the card is clicked", name: "onClick", required: !1, type: { name: "((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)" } }, sx: { defaultValue: null, description: "System prop for custom styling of the wrapper", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "System prop for custom styling of the title overlay", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, imageSx: { defaultValue: null, description: "System prop for custom styling of the image", name: "imageSx", required: !1, type: { name: "SxProps<Theme>" } } } };
+  i.displayName = "SCategoryCard", i.__docgenInfo = { description: "A stylish category card component that displays an image with an overlaid title.", displayName: "SCategoryCard", props: { image: { defaultValue: null, description: "URL or path to the category image source", name: "image", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Display title for the category shown as overlay text", name: "title", required: !0, type: { name: "string" } }, width: { defaultValue: { value: "250" }, description: "Width of the category card", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "250" }, description: "Height of the category card", name: "height", required: !1, type: { name: "string | number" } }, alt: { defaultValue: { value: "category" }, description: "Alternative text for the image", name: "alt", required: !1, type: { name: "string" } }, titlePosition: { defaultValue: { value: "bottom" }, description: "Position of the title overlay on the image", name: "titlePosition", required: !1, type: { name: "enum", value: [{ value: '"top"' }, { value: '"bottom"' }, { value: '"center"' }] } }, titleAlignment: { defaultValue: { value: "center" }, description: "Text alignment of the title", name: "titleAlignment", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }, { value: '"center"' }] } }, titleVariant: { defaultValue: { value: "body1" }, description: "Typography variant for the title text", 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: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, titleColor: { defaultValue: null, description: "Color of the title text", name: "titleColor", required: !1, type: { name: "string" } }, titleBackgroundColor: { defaultValue: { value: "background.paper" }, description: "Background color of the title overlay", name: "titleBackgroundColor", required: !1, type: { name: "string" } }, titleOpacity: { defaultValue: { value: "1" }, description: "Opacity of the title overlay (0-1)", name: "titleOpacity", required: !1, type: { name: "number" } }, borderRadius: { defaultValue: { value: "2" }, description: "Border radius of the card and title overlay", name: "borderRadius", required: !1, type: { name: "string | number" } }, disableHoverEffect: { defaultValue: { value: "false" }, description: "Disable the hover zoom effect on the image", name: "disableHoverEffect", required: !1, type: { name: "boolean" } }, hoverScale: { defaultValue: { value: "1.1" }, description: "Scale factor for hover zoom effect", name: "hoverScale", required: !1, type: { name: "number" } }, onClick: { defaultValue: null, description: "Handler called when the card is clicked", name: "onClick", required: !1, type: { name: "((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)" } }, sx: { defaultValue: null, description: "System prop for custom styling of the wrapper", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "System prop for custom styling of the title overlay", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, imageSx: { defaultValue: null, description: "System prop for custom styling of the image", name: "imageSx", required: !1, type: { name: "SxProps<Theme>" } } } };
 } catch {
 }
 try {
-  scategorycard.displayName = "scategorycard", scategorycard.__docgenInfo = { description: "A stylish category card component that displays an image with an overlaid title.", displayName: "scategorycard", props: { image: { defaultValue: null, description: "URL or path to the category image source", name: "image", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Display title for the category shown as overlay text", name: "title", required: !0, type: { name: "string" } }, width: { defaultValue: { value: "250" }, description: "Width of the category card", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "250" }, description: "Height of the category card", name: "height", required: !1, type: { name: "string | number" } }, alt: { defaultValue: { value: "category" }, description: "Alternative text for the image", name: "alt", required: !1, type: { name: "string" } }, titlePosition: { defaultValue: { value: "bottom" }, description: "Position of the title overlay on the image", name: "titlePosition", required: !1, type: { name: "enum", value: [{ value: '"bottom"' }, { value: '"top"' }, { value: '"center"' }] } }, titleAlignment: { defaultValue: { value: "center" }, description: "Text alignment of the title", name: "titleAlignment", required: !1, type: { name: "enum", value: [{ value: '"left"' }, { value: '"right"' }, { value: '"center"' }] } }, titleVariant: { defaultValue: { value: "body1" }, description: "Typography variant for the title text", 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: '"body2"' }, { value: '"body1"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"overline"' }] } }, titleColor: { defaultValue: null, description: "Color of the title text", name: "titleColor", required: !1, type: { name: "string" } }, titleBackgroundColor: { defaultValue: { value: "background.paper" }, description: "Background color of the title overlay", name: "titleBackgroundColor", required: !1, type: { name: "string" } }, titleOpacity: { defaultValue: { value: "1" }, description: "Opacity of the title overlay (0-1)", name: "titleOpacity", required: !1, type: { name: "number" } }, borderRadius: { defaultValue: { value: "2" }, description: "Border radius of the card and title overlay", name: "borderRadius", required: !1, type: { name: "string | number" } }, disableHoverEffect: { defaultValue: { value: "false" }, description: "Disable the hover zoom effect on the image", name: "disableHoverEffect", required: !1, type: { name: "boolean" } }, hoverScale: { defaultValue: { value: "1.1" }, description: "Scale factor for hover zoom effect", name: "hoverScale", required: !1, type: { name: "number" } }, onClick: { defaultValue: null, description: "Handler called when the card is clicked", name: "onClick", required: !1, type: { name: "((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)" } }, sx: { defaultValue: null, description: "System prop for custom styling of the wrapper", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "System prop for custom styling of the title overlay", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, imageSx: { defaultValue: null, description: "System prop for custom styling of the image", name: "imageSx", required: !1, type: { name: "SxProps<Theme>" } } } };
+  scategorycard.displayName = "scategorycard", scategorycard.__docgenInfo = { description: "A stylish category card component that displays an image with an overlaid title.", displayName: "scategorycard", props: { image: { defaultValue: null, description: "URL or path to the category image source", name: "image", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Display title for the category shown as overlay text", name: "title", required: !0, type: { name: "string" } }, width: { defaultValue: { value: "250" }, description: "Width of the category card", name: "width", required: !1, type: { name: "string | number" } }, height: { defaultValue: { value: "250" }, description: "Height of the category card", name: "height", required: !1, type: { name: "string | number" } }, alt: { defaultValue: { value: "category" }, description: "Alternative text for the image", name: "alt", required: !1, type: { name: "string" } }, titlePosition: { defaultValue: { value: "bottom" }, description: "Position of the title overlay on the image", name: "titlePosition", required: !1, type: { name: "enum", value: [{ value: '"top"' }, { value: '"bottom"' }, { value: '"center"' }] } }, titleAlignment: { defaultValue: { value: "center" }, description: "Text alignment of the title", name: "titleAlignment", required: !1, type: { name: "enum", value: [{ value: '"right"' }, { value: '"left"' }, { value: '"center"' }] } }, titleVariant: { defaultValue: { value: "body1" }, description: "Typography variant for the title text", 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: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, titleColor: { defaultValue: null, description: "Color of the title text", name: "titleColor", required: !1, type: { name: "string" } }, titleBackgroundColor: { defaultValue: { value: "background.paper" }, description: "Background color of the title overlay", name: "titleBackgroundColor", required: !1, type: { name: "string" } }, titleOpacity: { defaultValue: { value: "1" }, description: "Opacity of the title overlay (0-1)", name: "titleOpacity", required: !1, type: { name: "number" } }, borderRadius: { defaultValue: { value: "2" }, description: "Border radius of the card and title overlay", name: "borderRadius", required: !1, type: { name: "string | number" } }, disableHoverEffect: { defaultValue: { value: "false" }, description: "Disable the hover zoom effect on the image", name: "disableHoverEffect", required: !1, type: { name: "boolean" } }, hoverScale: { defaultValue: { value: "1.1" }, description: "Scale factor for hover zoom effect", name: "hoverScale", required: !1, type: { name: "number" } }, onClick: { defaultValue: null, description: "Handler called when the card is clicked", name: "onClick", required: !1, type: { name: "((event: MouseEvent<HTMLDivElement, MouseEvent>) => void)" } }, sx: { defaultValue: null, description: "System prop for custom styling of the wrapper", name: "sx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "System prop for custom styling of the title overlay", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, imageSx: { defaultValue: null, description: "System prop for custom styling of the image", name: "imageSx", required: !1, type: { name: "SxProps<Theme>" } } } };
 } catch {
 }
 export {

package/dist/s-chat-input/s-chat-input.js

@@ -1,6 +1,6 @@
 import { j as r } from "../jsx-runtime-OVHDjVDe.js";
 import { forwardRef as A, useState as c, useRef as L, useId as O, useEffect as D } from "react";
-import { Box as a, outlinedInputClasses as K, Typography as I, Popper as B, ClickAwayListener as N } from "@mui/material";
+import { Box as i, outlinedInputClasses as K, Typography as I, Popper as B, ClickAwayListener as N } from "@mui/material";
 import W from "emoji-picker-react";
 import { SFileIcon as H } from "../s-file-icon/s-file-icon.js";
 import { SIconButton as p } from "../s-icon-button/s-icon-button.js";
@@ -13,14 +13,14 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
 }), "AttachFile"), Y = S(/* @__PURE__ */ r.jsx("path", {
   d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8M12 18c-2.28 0-4.22-1.66-5-4h10c-.78 2.34-2.72 4-5 4m3.5-7c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5"
 }), "EmojiEmotions"), j = A(
-  ({ onSubmit: l, onFileSelect: u, disabled: i, acceptedFileTypes: E, maxFileSize: v, ...z }, _) => {
+  ({ onSubmit: l, onFileSelect: u, disabled: a, acceptedFileTypes: E, maxFileSize: v, ...z }, _) => {
     const [m, f] = c(""), [d, h] = c([]), [s, b] = c(/* @__PURE__ */ new Map()), [k, x] = c(!1), C = L(null), w = O(), g = (e) => e.type.startsWith("image/"), V = (e) => {
       const t = `${e.name}-${e.size}-${e.lastModified}`;
       if (s.has(t))
         return s.get(t);
       if (g(e)) {
-        const o = URL.createObjectURL(e);
-        return b((n) => new Map(n).set(t, o)), o;
+        const n = URL.createObjectURL(e);
+        return b((o) => new Map(o).set(t, n)), n;
       }
       return "";
     }, M = (e) => {
@@ -30,31 +30,31 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
     }, $ = () => {
       x(!k);
     }, F = () => {
-      i || m.trim().length === 0 && d.length === 0 || (l == null || l(m, d), f(""), s.forEach((e) => URL.revokeObjectURL(e)), b(/* @__PURE__ */ new Map()), h([]));
+      a || m.trim().length === 0 && d.length === 0 || (l == null || l(m, d), f(""), s.forEach((e) => URL.revokeObjectURL(e)), b(/* @__PURE__ */ new Map()), h([]));
     }, q = (e) => {
-      const o = Array.from(e.target.files || []).filter((n) => !(v && n.size > v));
-      h((n) => [...n, ...o]), u == null || u(o), e.target.value = "";
+      const n = Array.from(e.target.files || []).filter((o) => !(v && o.size > v));
+      h((o) => [...o, ...n]), u == null || u(n), e.target.value = "";
     }, P = (e) => {
       const t = d[e];
       if (t && g(t)) {
-        const o = `${t.name}-${t.size}-${t.lastModified}`, n = s.get(o);
-        n && (URL.revokeObjectURL(n), b((y) => {
+        const n = `${t.name}-${t.size}-${t.lastModified}`, o = s.get(n);
+        o && (URL.revokeObjectURL(o), b((y) => {
           const R = new Map(y);
-          return R.delete(o), R;
+          return R.delete(n), R;
         }));
       }
-      h((o) => o.filter((n, y) => y !== e));
+      h((n) => n.filter((o, y) => y !== e));
     }, T = (e) => {
       e.key === "Enter" && !e.shiftKey && (e.preventDefault(), F());
     };
     return D(() => () => {
       s.forEach((e) => URL.revokeObjectURL(e));
-    }, [s]), /* @__PURE__ */ r.jsxs(a, { border: "1px solid", borderColor: "divider", borderRadius: 2, padding: "8px 12px", children: [
+    }, [s]), /* @__PURE__ */ r.jsxs(i, { border: "1px solid", borderColor: "divider", borderRadius: 2, padding: "8px 12px", children: [
       /* @__PURE__ */ r.jsx(
         G,
         {
           placeholder: "Enter your message here...",
-          disabled: i,
+          disabled: a,
           value: m,
           onChange: M,
           onKeyDown: T,
@@ -90,10 +90,10 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
           ...z
         }
       ),
-      d.length > 0 && /* @__PURE__ */ r.jsx(a, { mt: 1, children: d.map((e, t) => {
-        const o = g(e), n = e.name.split(".").pop();
+      d.length > 0 && /* @__PURE__ */ r.jsx(i, { mt: 1, children: d.map((e, t) => {
+        const n = g(e), o = e.name.split(".").pop();
         return /* @__PURE__ */ r.jsxs(
-          a,
+          i,
           {
             display: "flex",
             alignItems: "center",
@@ -107,9 +107,9 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
               mb: 0.5
             },
             children: [
-              /* @__PURE__ */ r.jsxs(a, { display: "flex", alignItems: "center", gap: 1, children: [
-                o ? /* @__PURE__ */ r.jsx(
-                  a,
+              /* @__PURE__ */ r.jsxs(i, { display: "flex", alignItems: "center", gap: 1, children: [
+                n ? /* @__PURE__ */ r.jsx(
+                  i,
                   {
                     component: "img",
                     src: V(e),
@@ -123,10 +123,10 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
                       borderColor: "divider"
                     }
                   }
-                ) : /* @__PURE__ */ r.jsx(H, { extension: n }),
-                /* @__PURE__ */ r.jsxs(a, { display: "flex", flexDirection: "row", alignItems: "center", gap: 1, children: [
+                ) : /* @__PURE__ */ r.jsx(H, { extension: o }),
+                /* @__PURE__ */ r.jsxs(i, { display: "flex", flexDirection: "row", alignItems: "center", gap: 1, children: [
                   /* @__PURE__ */ r.jsx(I, { variant: "subtitle2", textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap", children: e.name }),
-                  /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsxs(I, { variant: "caption", color: "text.secondary", children: [
+                  /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsxs(I, { variant: "caption", children: [
                     "(",
                     Math.round(e.size / 1024),
                     " KB)"
@@ -139,8 +139,8 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
           `${e.name}-${t}`
         );
       }) }),
-      /* @__PURE__ */ r.jsxs(a, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 1, children: [
-        /* @__PURE__ */ r.jsxs(a, { display: "flex", gap: 1, children: [
+      /* @__PURE__ */ r.jsxs(i, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 1, children: [
+        /* @__PURE__ */ r.jsxs(i, { display: "flex", gap: 1, children: [
           /* @__PURE__ */ r.jsx(
             "input",
             {
@@ -150,14 +150,14 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
               onChange: q,
               style: { display: "none" },
               id: `file-attachment-input-${w}`,
-              disabled: i
+              disabled: a
             }
           ),
           /* @__PURE__ */ r.jsx("label", { htmlFor: `file-attachment-input-${w}`, children: /* @__PURE__ */ r.jsx(
             p,
             {
               component: "span",
-              disabled: i,
+              disabled: a,
               size: "small",
               sx: {
                 transition: "transform 0.3s ease",
@@ -173,7 +173,7 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
             {
               ref: C,
               onClick: $,
-              disabled: i,
+              disabled: a,
               size: "small",
               sx: {
                 transition: "transform 0.3s ease",
@@ -189,7 +189,7 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
           p,
           {
             onClick: F,
-            disabled: i,
+            disabled: a,
             size: "small",
             sx: {
               transition: "transform 0.3s ease",
@@ -202,7 +202,7 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
         )
       ] }),
       /* @__PURE__ */ r.jsx(B, { open: k, anchorEl: C.current, placement: "top-start", sx: { zIndex: 1300 }, children: /* @__PURE__ */ r.jsx(N, { onClickAway: () => x(!1), children: /* @__PURE__ */ r.jsx(
-        a,
+        i,
         {
           sx: {
             border: "1px solid",