@solostylist/ui-kit 1.0.170 → 1.0.171

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: { 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" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, 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" } } } };
 } 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: { 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" } }, items: { defaultValue: null, description: "Array of breadcrumb items to display", name: "items", required: !0, type: { name: "BreadcrumbItem[]" } }, 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" } } } };
 } 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" | "success" | "error" | "info" | "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" | "success" | "error" | "info" | "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: '"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"' }] } }, 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" | "success" | "error" | "info" | "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" | "success" | "error" | "info" | "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: '"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"' }] } }, 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-message/s-chat-message.js

@@ -1,53 +1,53 @@
 import { j as e } from "../jsx-runtime-OVHDjVDe.js";
 import { useState as z } from "react";
-import { Box as i, Typography as r, Paper as E, IconButton as M } from "@mui/material";
-import { SAvatar as A } from "../s-avatar/s-avatar.js";
-import { SImageModal as L } from "../s-image-modal/s-image-modal.js";
+import { Box as s, Typography as n, Paper as L, IconButton as M } from "@mui/material";
+import { SAvatar as W } from "../s-avatar/s-avatar.js";
+import { SImageModal as E } from "../s-image-modal/s-image-modal.js";
 import "../s-lazy-image/index.js";
-import { SSkeleton as s } from "../s-skeleton/s-skeleton.js";
+import { SSkeleton as i } from "../s-skeleton/s-skeleton.js";
 import O from "../s-lazy-image/s-lazy-image.js";
-import { c as y } from "../createSvgIcon-DxwgGAVe.js";
+import { c as v } from "../createSvgIcon-DxwgGAVe.js";
 import { D as U } from "../Download-UsLvGg3y.js";
-const H = y(/* @__PURE__ */ e.jsx("path", {
+const P = v(/* @__PURE__ */ e.jsx("path", {
   d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8"
-}), "ErrorOutline"), P = y(/* @__PURE__ */ e.jsx("path", {
+}), "ErrorOutline"), G = v(/* @__PURE__ */ e.jsx("path", {
   d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm7 7V3.5L18.5 9z"
-}), "InsertDriveFile"), G = y(/* @__PURE__ */ e.jsx("path", {
+}), "InsertDriveFile"), H = v(/* @__PURE__ */ e.jsx("path", {
   d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"
 }), "Refresh"), x = ({
   message: l,
-  variant: T = "received",
-  timestamp: v,
+  variant: A = "received",
+  timestamp: y,
   avatar: w,
-  senderName: n,
+  senderName: r,
   showAvatar: o = !0,
   showTimestamp: b = !1,
   maxWidth: j = "70%",
-  attachments: f = [],
+  attachments: g = [],
   onAttachmentClick: d,
   onDownload: m,
-  hasError: g = !1,
-  errorMessage: W = "Failed to send message",
-  onRetry: k,
+  hasError: h = !1,
+  errorMessage: T = "Failed to send message",
+  onRetry: V,
   loading: _ = !1,
   sx: C,
-  ...V
+  ...q
 }) => {
-  const [c, q] = z(null), [D, S] = z(!1), t = T === "sent", R = (a) => (typeof a == "string" ? new Date(a) : a).toLocaleTimeString("en-US", {
+  const [c, S] = z(null), [D, k] = z(!1), t = A === "sent", R = (a) => (typeof a == "string" ? new Date(a) : a).toLocaleTimeString("en-US", {
     hour: "2-digit",
     minute: "2-digit",
     hour12: !0
   }), F = (a) => {
     if (!a) return "";
-    const p = ["Bytes", "KB", "MB", "GB"], u = Math.floor(Math.log(a) / Math.log(1024));
-    return Math.round(a / Math.pow(1024, u) * 100) / 100 + " " + p[u];
+    const u = ["Bytes", "KB", "MB", "GB"], f = Math.floor(Math.log(a) / Math.log(1024));
+    return Math.round(a / Math.pow(1024, f) * 100) / 100 + " " + u[f];
   }, N = (a) => {
-    d ? d(a) : (q(a), S(!0));
+    d ? d(a) : (S(a), k(!0));
   }, B = (a) => {
     d ? d(a) : m && m(a);
-  }, h = f.filter((a) => a.type === "image"), I = f.filter((a) => a.type === "file");
+  }, p = g.filter((a) => a.type === "image"), I = g.filter((a) => a.type === "file");
   return _ ? /* @__PURE__ */ e.jsxs(
-    i,
+    s,
     {
       display: "flex",
       flexDirection: t ? "row-reverse" : "row",
@@ -59,11 +59,11 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
         alignSelf: t ? "flex-end" : "flex-start",
         ...C
       },
-      ...V,
+      ...q,
       children: [
-        o && !t && /* @__PURE__ */ e.jsx(s, { component: "rounded-avatar", width: 36, height: 36 }),
+        o && !t && /* @__PURE__ */ e.jsx(i, { component: "rounded-avatar", width: 36, height: 36 }),
         /* @__PURE__ */ e.jsxs(
-          i,
+          s,
           {
             display: "flex",
             flexDirection: "column",
@@ -71,9 +71,9 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
             gap: 0.5,
             sx: { minWidth: 0 },
             children: [
-              n && !t && /* @__PURE__ */ e.jsx(s, { variant: "text", width: 100, height: 12, sx: { ml: 0.5 } }),
+              r && !t && /* @__PURE__ */ e.jsx(i, { variant: "text", width: 100, height: 12, sx: { ml: 0.5 } }),
               /* @__PURE__ */ e.jsxs(
-                i,
+                s,
                 {
                   sx: {
                     display: "inline-block",
@@ -83,21 +83,21 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
                     ml: 0.5
                   },
                   children: [
-                    /* @__PURE__ */ e.jsx(s, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
-                    /* @__PURE__ */ e.jsx(s, { variant: "text", width: "85%", height: 16, sx: { mb: 0.5 } }),
-                    /* @__PURE__ */ e.jsx(s, { variant: "text", width: "70%", height: 16 })
+                    /* @__PURE__ */ e.jsx(i, { variant: "text", width: "100%", height: 16, sx: { mb: 0.5 } }),
+                    /* @__PURE__ */ e.jsx(i, { variant: "text", width: "85%", height: 16, sx: { mb: 0.5 } }),
+                    /* @__PURE__ */ e.jsx(i, { variant: "text", width: "70%", height: 16 })
                   ]
                 }
               ),
-              b && /* @__PURE__ */ e.jsx(s, { variant: "text", width: 60, height: 10, sx: { ml: t ? 0 : 0.5, mr: t ? 0.5 : 0 } })
+              b && /* @__PURE__ */ e.jsx(i, { variant: "text", width: 60, height: 10, sx: { ml: t ? 0 : 0.5, mr: t ? 0.5 : 0 } })
             ]
           }
         ),
-        o && t && /* @__PURE__ */ e.jsx(s, { component: "rounded-avatar", width: 36, height: 36 })
+        o && t && /* @__PURE__ */ e.jsx(i, { component: "rounded-avatar", width: 36, height: 36 })
       ]
     }
   ) : /* @__PURE__ */ e.jsxs(
-    i,
+    s,
     {
       display: "flex",
       flexDirection: t ? "row-reverse" : "row",
@@ -109,11 +109,11 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
         alignSelf: t ? "flex-end" : "flex-start",
         ...C
       },
-      ...V,
+      ...q,
       children: [
-        o && !t && /* @__PURE__ */ e.jsx(A, { avatar: w, name: n, size: 36 }),
+        o && !t && /* @__PURE__ */ e.jsx(W, { avatar: w, name: r, size: 36 }),
         /* @__PURE__ */ e.jsxs(
-          i,
+          s,
           {
             display: "flex",
             flexDirection: "column",
@@ -121,8 +121,8 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
             gap: 0.5,
             sx: { minWidth: 0 },
             children: [
-              n && !t && /* @__PURE__ */ e.jsx(
-                r,
+              r && !t && /* @__PURE__ */ e.jsx(
+                n,
                 {
                   variant: "caption",
                   sx: {
@@ -131,46 +131,41 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
                     fontWeight: 500,
                     ml: 0.5
                   },
-                  children: n
+                  children: r
                 }
               ),
               /* @__PURE__ */ e.jsxs(
-                i,
+                s,
                 {
                   sx: {
                     display: "inline-block",
                     borderRadius: 2,
                     wordBreak: "break-word",
                     maxWidth: "100%",
-                    backgroundColor: t ? "primary.main" : "",
-                    color: t ? "primary.contrastText" : "text.primary",
-                    border: t ? "none" : "1px solid",
-                    borderColor: g ? "error.main" : "divider",
-                    ...t && {
-                      backgroundColor: "primary.dark"
-                    },
-                    ...g && {
+                    border: "1px solid",
+                    borderColor: h ? "error.main" : "divider",
+                    ...h && {
                       opacity: 0.7
                     },
                     overflow: "hidden"
                   },
                   children: [
-                    h.length > 0 && /* @__PURE__ */ e.jsx(
-                      i,
+                    p.length > 0 && /* @__PURE__ */ e.jsx(
+                      s,
                       {
                         sx: {
                           display: "grid",
-                          gridTemplateColumns: h.length === 1 ? "1fr" : "repeat(2, 1fr)",
+                          gridTemplateColumns: p.length === 1 ? "1fr" : "repeat(2, 1fr)",
                           gap: 0.5,
                           p: 0.5
                         },
                         minWidth: 200,
-                        children: h.map((a) => /* @__PURE__ */ e.jsx(
-                          i,
+                        children: p.map((a) => /* @__PURE__ */ e.jsx(
+                          s,
                           {
                             sx: {
                               position: "relative",
-                              paddingTop: h.length === 1 ? "66.67%" : "100%",
+                              paddingTop: p.length === 1 ? "66.67%" : "100%",
                               cursor: "pointer",
                               borderRadius: 1.5,
                               overflow: "hidden",
@@ -199,8 +194,8 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
                         ))
                       }
                     ),
-                    I.length > 0 && /* @__PURE__ */ e.jsx(i, { sx: { p: 1.5 }, children: I.map((a, p) => /* @__PURE__ */ e.jsxs(
-                      E,
+                    I.length > 0 && /* @__PURE__ */ e.jsx(s, { sx: { p: 1.5 }, children: I.map((a, u) => /* @__PURE__ */ e.jsxs(
+                      L,
                       {
                         variant: "outlined",
                         sx: {
@@ -208,27 +203,15 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
                           alignItems: "center",
                           gap: 1.5,
                           p: 1,
-                          mt: p > 0 ? 1 : 0,
-                          cursor: "pointer",
-                          backgroundColor: t ? "blackAlpha.zero" : "background.paper",
-                          "&:hover": {
-                            backgroundColor: t ? "blackAlpha.light" : "action.hover"
-                          }
+                          mt: u > 0 ? 1 : 0,
+                          cursor: "pointer"
                         },
                         onClick: () => B(a),
                         children: [
-                          /* @__PURE__ */ e.jsx(
-                            P,
-                            {
-                              sx: {
-                                fontSize: 32,
-                                color: t ? "primary.contrastText" : "action.active"
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ e.jsxs(i, { sx: { flex: 1, minWidth: 0 }, children: [
+                          /* @__PURE__ */ e.jsx(G, { sx: { fontSize: 32 } }),
+                          /* @__PURE__ */ e.jsxs(s, { sx: { flex: 1, minWidth: 0 }, children: [
                             /* @__PURE__ */ e.jsx(
-                              r,
+                              n,
                               {
                                 variant: "body2",
                                 sx: {
@@ -236,19 +219,17 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
                                   fontWeight: 500,
                                   overflow: "hidden",
                                   textOverflow: "ellipsis",
-                                  whiteSpace: "nowrap",
-                                  color: t ? "inherit" : "text.primary"
+                                  whiteSpace: "nowrap"
                                 },
                                 children: a.name || "Unnamed File"
                               }
                             ),
                             a.size && /* @__PURE__ */ e.jsx(
-                              r,
+                              n,
                               {
                                 variant: "caption",
                                 sx: {
-                                  fontSize: "0.75rem",
-                                  color: t ? "whiteAlpha.dark" : "text.secondary"
+                                  fontSize: "0.75rem"
                                 },
                                 children: F(a.size)
                               }
@@ -258,11 +239,8 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
                             M,
                             {
                               size: "small",
-                              onClick: (u) => {
-                                u.stopPropagation(), m(a);
-                              },
-                              sx: {
-                                color: t ? "primary.contrastText" : "action.active"
+                              onClick: (f) => {
+                                f.stopPropagation(), m(a);
                               },
                               children: /* @__PURE__ */ e.jsx(U, { fontSize: "small" })
                             }
@@ -271,14 +249,14 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
                       },
                       a.id
                     )) }),
-                    l && /* @__PURE__ */ e.jsx(i, { sx: { px: 2, py: 1.5, pt: f.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ e.jsx(
-                      r,
+                    l && /* @__PURE__ */ e.jsx(s, { sx: { px: 2, py: 1.5, pt: g.length > 0 ? 0 : 1.5 }, children: /* @__PURE__ */ e.jsx(
+                      n,
                       {
                         variant: "body2",
                         sx: {
                           fontSize: "0.875rem",
-                          lineHeight: 1.4,
-                          whiteSpace: "pre-wrap"
+                          whiteSpace: "pre-wrap",
+                          color: h ? "error.main" : "inherit"
                         },
                         children: l
                       }
@@ -286,8 +264,8 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
                   ]
                 }
               ),
-              b && v && /* @__PURE__ */ e.jsx(
-                r,
+              b && y && /* @__PURE__ */ e.jsx(
+                n,
                 {
                   variant: "caption",
                   sx: {
@@ -296,11 +274,11 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
                     ml: t ? 0 : 0.5,
                     mr: t ? 0.5 : 0
                   },
-                  children: R(v)
+                  children: R(y)
                 }
               ),
-              g && /* @__PURE__ */ e.jsxs(
-                i,
+              h && /* @__PURE__ */ e.jsxs(
+                s,
                 {
                   display: "flex",
                   alignItems: "center",
@@ -311,32 +289,32 @@ const H = y(/* @__PURE__ */ e.jsx("path", {
                     mr: t ? 0.5 : 0
                   },
                   children: [
-                    /* @__PURE__ */ e.jsx(H, { sx: { fontSize: "1rem" } }),
+                    /* @__PURE__ */ e.jsx(P, { sx: { fontSize: "1rem" } }),
                     /* @__PURE__ */ e.jsx(
-                      r,
+                      n,
                       {
                         variant: "caption",
                         sx: {
                           fontSize: "0.875rem",
                           fontWeight: 500
                         },
-                        children: W
+                        children: T
                       }
                     ),
-                    k && /* @__PURE__ */ e.jsx(M, { size: "small", onClick: k, children: /* @__PURE__ */ e.jsx(G, {}) })
+                    V && /* @__PURE__ */ e.jsx(M, { size: "small", onClick: V, children: /* @__PURE__ */ e.jsx(H, {}) })
                   ]
                 }
               )
             ]
           }
         ),
-        o && t && /* @__PURE__ */ e.jsx(A, { avatar: w, name: n, size: 36 }),
+        o && t && /* @__PURE__ */ e.jsx(W, { avatar: w, name: r, size: 36 }),
         c && /* @__PURE__ */ e.jsx(
-          L,
+          E,
           {
             isOpen: D,
             onClose: () => {
-              S(!1), q(null);
+              k(!1), S(null);
             },
             selectedItem: {
               id: c.id,