@solostylist/ui-kit 1.0.174 → 1.0.176

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

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

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

@@ -1,9 +1,8 @@
-import { j as a } from "../jsx-runtime-OVHDjVDe.js";
-import { styled as d, Box as c, Typography as S } from "@mui/material";
-import "../s-lazy-image/index.js";
+import { j as r } from "../jsx-runtime-tc70JA_2.js";
+import { styled as i, Box as c, Typography as v } from "@mui/material";
 import C from "../s-lazy-image/s-lazy-image.js";
-const r = d(c)(
-  ({ disableHoverEffect: e = !1, hoverScale: t = 1.1 }) => ({
+const S = i(c)(
+  ({ disableHoverEffect: t = !1, hoverScale: o = 1.1 }) => ({
     height: "100%",
     cursor: "pointer",
     overflow: "hidden",
@@ -15,108 +14,92 @@ const r = d(c)(
       transition: "all 0.3s",
       objectPosition: "center center"
     },
-    ...!e && {
+    ...!t && {
       ":hover": {
-        img: { transform: `scale(${t})` }
+        img: { transform: `scale(${o})` }
       }
     }
   })
-), l = d(c)(({ titlePosition: e = "bottom", titleAlignment: t = "center" }) => ({
+), F = i(c)(({ titlePosition: t = "bottom", titleAlignment: o = "center" }) => ({
   left: 10,
   right: 10,
   padding: 8,
-  textAlign: t,
+  textAlign: o,
   position: "absolute",
   transition: "all 0.3s",
-  ...e === "bottom" && { bottom: 10 },
-  ...e === "top" && { top: 10 },
-  ...e === "center" && {
+  ...t === "bottom" && { bottom: 10 },
+  ...t === "top" && { top: 10 },
+  ...t === "center" && {
     top: "50%",
     transform: "translateY(-50%)"
   }
-})), i = ({
-  image: e,
-  title: t,
-  width: o = 250,
-  height: n = 250,
-  alt: p = "category",
-  titlePosition: m = "bottom",
-  titleAlignment: f = "center",
-  titleVariant: y = "body1",
-  titleColor: v,
-  titleBackgroundColor: g = "background.paper",
-  titleOpacity: h = 1,
-  borderRadius: u = 2,
-  disableHoverEffect: b = !1,
-  hoverScale: V = 1.1,
-  onClick: s,
-  sx: x,
-  titleSx: q,
-  imageSx: _
-}) => /* @__PURE__ */ a.jsxs(
-  r,
+})), T = ({
+  image: t,
+  title: o,
+  width: e = 250,
+  height: a = 250,
+  alt: l = "category",
+  titlePosition: p = "bottom",
+  titleAlignment: m = "center",
+  titleVariant: d = "body1",
+  titleColor: g,
+  titleBackgroundColor: y = "background.paper",
+  titleOpacity: b = 1,
+  borderRadius: s = 2,
+  disableHoverEffect: f = !1,
+  hoverScale: x = 1.1,
+  onClick: n,
+  sx: j,
+  titleSx: h,
+  imageSx: u
+}) => /* @__PURE__ */ r.jsxs(
+  S,
   {
-    disableHoverEffect: b,
-    hoverScale: V,
-    onClick: s,
+    disableHoverEffect: f,
+    hoverScale: x,
+    onClick: n,
     sx: {
-      borderRadius: u,
-      cursor: s ? "pointer" : "default",
-      width: o,
-      height: n,
-      ...x
+      borderRadius: s,
+      cursor: n ? "pointer" : "default",
+      width: e,
+      height: a,
+      ...j
     },
     children: [
-      /* @__PURE__ */ a.jsx(
+      /* @__PURE__ */ r.jsx(
         C,
         {
-          src: e,
-          width: o,
-          height: n,
-          alt: p,
+          src: t,
+          width: e,
+          height: a,
+          alt: l,
           style: {
             objectFit: "cover",
-            ..._
+            ...u
           }
         }
       ),
-      /* @__PURE__ */ a.jsx(
-        l,
+      /* @__PURE__ */ r.jsx(
+        F,
         {
-          titlePosition: m,
-          titleAlignment: f,
+          titlePosition: p,
+          titleAlignment: m,
           sx: {
-            borderRadius: u,
-            bgcolor: g,
-            opacity: h,
-            ...q
+            borderRadius: s,
+            bgcolor: y,
+            opacity: b,
+            ...h
           },
-          children: /* @__PURE__ */ a.jsx(S, { variant: y, color: v, children: t })
+          children: /* @__PURE__ */ r.jsx(v, { variant: d, color: g, children: o })
         }
       )
     ]
   }
 );
-i.displayName = "SCategoryCard";
-try {
-  r.displayName = "Wrapper", r.__docgenInfo = { description: "", displayName: "Wrapper", props: {} };
-} catch {
-}
-try {
-  l.displayName = "CategoryTitle", l.__docgenInfo = { description: "", displayName: "CategoryTitle", props: {} };
-} 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: '"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: '"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>" } } } };
-} 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: '"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: '"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>" } } } };
-} catch {
-}
+T.displayName = "SCategoryCard";
 export {
-  l as CategoryTitle,
-  i as SCategoryCard,
-  r as Wrapper,
-  i as default
+  F as CategoryTitle,
+  T as SCategoryCard,
+  S as Wrapper,
+  T as default
 };

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

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

package/dist/s-chat-input/s-chat-input.d.ts

@@ -14,6 +14,10 @@ export interface SChatInputProps extends Omit<STextFieldProps, 'onSubmit'> {
     acceptedFileTypes?: string;
     /** Maximum file size in bytes for uploaded files */
     maxFileSize?: number;
+    /** Hide the emoji picker button */
+    hideEmojiPicker?: boolean;
+    /** Hide the file attachment button */
+    hideFileAttachment?: boolean;
 }
 /**
  * A chat input component with file attachment support, emoji picker, and multiline text input.

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

@@ -1,62 +1,62 @@
-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 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";
+import { j as r } from "../jsx-runtime-tc70JA_2.js";
+import { forwardRef as V, useState as c, useRef as B, useId as D, useEffect as W } from "react";
+import { Box as s, outlinedInputClasses as H, Typography as w, Popper as N, ClickAwayListener as _ } from "@mui/material";
+import q from "emoji-picker-react";
 import { STextField as G } from "../s-text-field/s-text-field.js";
-import { C as J } from "../Close-BRlEKA2Q.js";
-import { c as S } from "../createSvgIcon-DxwgGAVe.js";
-import { A as Q } from "../ArrowUpward-DhTFpzoh.js";
-const X = S(/* @__PURE__ */ r.jsx("path", {
+import { SFileIcon as J } from "../s-file-icon/s-file-icon.js";
+import { SIconButton as d } from "../s-icon-button/s-icon-button.js";
+import { C as Q } from "../Close-DOHlPcFK.js";
+import { c as R } from "../createSvgIcon-BKymXuBG.js";
+import { A as X } from "../ArrowUpward-CEeqSc-C.js";
+const Y = R(/* @__PURE__ */ r.jsx("path", {
   d: "M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6z"
-}), "AttachFile"), Y = S(/* @__PURE__ */ r.jsx("path", {
+}), "AttachFile"), Z = R(/* @__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: 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)) {
+}), "EmojiEmotions"), ee = V(
+  ({ onSubmit: I, onFileSelect: E, disabled: a, acceptedFileTypes: S, maxFileSize: b, hideEmojiPicker: M, hideFileAttachment: F, ...z }, U) => {
+    const [p, m] = c(""), [l, u] = c([]), [i, h] = c(/* @__PURE__ */ new Map()), [j, x] = c(!1), v = B(null), C = D(), f = (e) => e.type.startsWith("image/"), $ = (e) => {
+      const o = `${e.name}-${e.size}-${e.lastModified}`;
+      if (i.has(o))
+        return i.get(o);
+      if (f(e)) {
         const n = URL.createObjectURL(e);
-        return b((o) => new Map(o).set(t, n)), n;
+        return h((t) => new Map(t).set(o, n)), n;
       }
       return "";
-    }, M = (e) => {
-      f(e.target.value);
-    }, U = (e) => {
-      f((t) => t + e.emoji), x(!1);
-    }, $ = () => {
-      x(!k);
-    }, F = () => {
-      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 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 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(n), R;
+      m(e.target.value);
+    }, L = (e) => {
+      m((o) => o + e.emoji), x(!1);
+    }, A = () => {
+      x(!j);
+    }, k = () => {
+      a || p.trim().length === 0 && l.length === 0 || (I?.(p, l), m(""), i.forEach((e) => URL.revokeObjectURL(e)), h(/* @__PURE__ */ new Map()), u([]));
+    }, O = (e) => {
+      const n = Array.from(e.target.files || []).filter((t) => !(b && t.size > b));
+      u((t) => [...t, ...n]), E?.(n), e.target.value = "";
+    }, K = (e) => {
+      const o = l[e];
+      if (o && f(o)) {
+        const n = `${o.name}-${o.size}-${o.lastModified}`, t = i.get(n);
+        t && (URL.revokeObjectURL(t), h((g) => {
+          const y = new Map(g);
+          return y.delete(n), y;
         }));
       }
-      h((n) => n.filter((o, y) => y !== e));
+      u((n) => n.filter((t, g) => g !== e));
     }, T = (e) => {
-      e.key === "Enter" && !e.shiftKey && (e.preventDefault(), F());
+      e.key === "Enter" && !e.shiftKey && (e.preventDefault(), k());
     };
-    return D(() => () => {
-      s.forEach((e) => URL.revokeObjectURL(e));
-    }, [s]), /* @__PURE__ */ r.jsxs(i, { border: "1px solid", borderColor: "divider", borderRadius: 2, padding: "8px 12px", children: [
+    return W(() => () => {
+      i.forEach((e) => URL.revokeObjectURL(e));
+    }, [i]), /* @__PURE__ */ r.jsxs(s, { border: "1px solid", borderColor: "divider", borderRadius: 2, padding: "8px 12px", children: [
       /* @__PURE__ */ r.jsx(
         G,
         {
           placeholder: "Enter your message here...",
           disabled: a,
-          value: m,
-          onChange: M,
+          value: p,
+          onChange: P,
           onKeyDown: T,
           multiline: !0,
           minRows: 1,
@@ -64,7 +64,7 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
           size: "small",
           variant: "outlined",
           fullWidth: !0,
-          inputRef: _,
+          inputRef: U,
           slotProps: {
             input: {
               sx: {
@@ -72,7 +72,7 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
                 backgroundColor: "transparent",
                 border: "none",
                 padding: 0,
-                [`&.${K.focused}`]: {
+                [`&.${H.focused}`]: {
                   outline: "none"
                 },
                 "& fieldset": {
@@ -90,10 +90,10 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
           ...z
         }
       ),
-      d.length > 0 && /* @__PURE__ */ r.jsx(i, { mt: 1, children: d.map((e, t) => {
-        const n = g(e), o = e.name.split(".").pop();
+      l.length > 0 && /* @__PURE__ */ r.jsx(s, { mt: 1, children: l.map((e, o) => {
+        const n = f(e), t = e.name.split(".").pop();
         return /* @__PURE__ */ r.jsxs(
-          i,
+          s,
           {
             display: "flex",
             alignItems: "center",
@@ -107,12 +107,12 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
               mb: 0.5
             },
             children: [
-              /* @__PURE__ */ r.jsxs(i, { display: "flex", alignItems: "center", gap: 1, children: [
+              /* @__PURE__ */ r.jsxs(s, { display: "flex", alignItems: "center", gap: 1, children: [
                 n ? /* @__PURE__ */ r.jsx(
-                  i,
+                  s,
                   {
                     component: "img",
-                    src: V(e),
+                    src: $(e),
                     alt: e.name,
                     sx: {
                       width: 40,
@@ -123,56 +123,58 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
                       borderColor: "divider"
                     }
                   }
-                ) : /* @__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", children: [
+                ) : /* @__PURE__ */ r.jsx(J, { extension: t }),
+                /* @__PURE__ */ r.jsxs(s, { display: "flex", flexDirection: "row", alignItems: "center", gap: 1, children: [
+                  /* @__PURE__ */ r.jsx(w, { variant: "subtitle2", textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap", children: e.name }),
+                  /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsxs(w, { variant: "caption", children: [
                     "(",
                     Math.round(e.size / 1024),
                     " KB)"
                   ] }) })
                 ] })
               ] }),
-              /* @__PURE__ */ r.jsx(p, { size: "small", onClick: () => P(t), sx: { minWidth: "auto", p: 0.5 }, children: /* @__PURE__ */ r.jsx(J, {}) })
+              /* @__PURE__ */ r.jsx(d, { size: "small", onClick: () => K(o), sx: { minWidth: "auto", p: 0.5 }, children: /* @__PURE__ */ r.jsx(Q, {}) })
             ]
           },
-          `${e.name}-${t}`
+          `${e.name}-${o}`
         );
       }) }),
-      /* @__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",
-            {
-              type: "file",
-              multiple: !0,
-              accept: E,
-              onChange: q,
-              style: { display: "none" },
-              id: `file-attachment-input-${w}`,
-              disabled: a
-            }
-          ),
-          /* @__PURE__ */ r.jsx("label", { htmlFor: `file-attachment-input-${w}`, children: /* @__PURE__ */ r.jsx(
-            p,
-            {
-              component: "span",
-              disabled: a,
-              size: "small",
-              sx: {
-                transition: "transform 0.3s ease",
-                "&:hover": {
-                  transform: "scale(1.1)"
-                }
-              },
-              children: /* @__PURE__ */ r.jsx(X, {})
-            }
-          ) }),
-          /* @__PURE__ */ r.jsx(
-            p,
+      /* @__PURE__ */ r.jsxs(s, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 1, children: [
+        /* @__PURE__ */ r.jsxs(s, { display: "flex", gap: 1, children: [
+          !F && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+            /* @__PURE__ */ r.jsx(
+              "input",
+              {
+                type: "file",
+                multiple: !0,
+                accept: S,
+                onChange: O,
+                style: { display: "none" },
+                id: `file-attachment-input-${C}`,
+                disabled: a
+              }
+            ),
+            /* @__PURE__ */ r.jsx("label", { htmlFor: `file-attachment-input-${C}`, children: /* @__PURE__ */ r.jsx(
+              d,
+              {
+                component: "span",
+                disabled: a,
+                size: "small",
+                sx: {
+                  transition: "transform 0.3s ease",
+                  "&:hover": {
+                    transform: "scale(1.1)"
+                  }
+                },
+                children: /* @__PURE__ */ r.jsx(Y, {})
+              }
+            ) })
+          ] }),
+          !M && /* @__PURE__ */ r.jsx(
+            d,
             {
-              ref: C,
-              onClick: $,
+              ref: v,
+              onClick: A,
               disabled: a,
               size: "small",
               sx: {
@@ -181,14 +183,14 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
                   transform: "scale(1.1)"
                 }
               },
-              children: /* @__PURE__ */ r.jsx(Y, {})
+              children: /* @__PURE__ */ r.jsx(Z, {})
             }
           )
         ] }),
         /* @__PURE__ */ r.jsx(
-          p,
+          d,
           {
-            onClick: F,
+            onClick: k,
             disabled: a,
             size: "small",
             sx: {
@@ -197,12 +199,12 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
                 transform: "scale(1.2)"
               }
             },
-            children: /* @__PURE__ */ r.jsx(Q, {})
+            children: /* @__PURE__ */ r.jsx(X, {})
           }
         )
       ] }),
-      /* @__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(
-        i,
+      /* @__PURE__ */ r.jsx(N, { open: j, anchorEl: v.current, placement: "top-start", sx: { zIndex: 1300 }, children: /* @__PURE__ */ r.jsx(_, { onClickAway: () => x(!1), children: /* @__PURE__ */ r.jsx(
+        s,
         {
           sx: {
             border: "1px solid",
@@ -292,9 +294,9 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
             }
           },
           children: /* @__PURE__ */ r.jsx(
-            W,
+            q,
             {
-              onEmojiClick: U,
+              onEmojiClick: L,
               width: 300,
               height: 400,
               searchDisabled: !1,
@@ -307,16 +309,8 @@ const X = S(/* @__PURE__ */ r.jsx("path", {
     ] });
   }
 );
-j.displayName = "SChatInput";
-try {
-  j.displayName = "SChatInput", j.__docgenInfo = { description: "A chat input component with file attachment support, emoji picker, and multiline text input.", displayName: "SChatInput", props: { onSubmit: { defaultValue: null, description: "Callback function called when message is submitted with Enter key or submit button", name: "onSubmit", required: !1, type: { name: "((value: string, files?: File[]) => void)" } }, disabled: { defaultValue: null, description: "Disable the input and submission", name: "disabled", required: !1, type: { name: "boolean" } }, onFileSelect: { defaultValue: null, description: "Optional callback function called when files are selected", name: "onFileSelect", required: !1, type: { name: "((files: File[]) => void)" } }, acceptedFileTypes: { defaultValue: null, description: 'File types accepted for upload (e.g., "image/*,.pdf,.doc")', name: "acceptedFileTypes", required: !1, type: { name: "string" } }, maxFileSize: { defaultValue: null, description: "Maximum file size in bytes for uploaded files", name: "maxFileSize", required: !1, type: { name: "number" } } } };
-} catch {
-}
-try {
-  schatinput.displayName = "schatinput", schatinput.__docgenInfo = { description: "A chat input component with file attachment support, emoji picker, and multiline text input.", displayName: "schatinput", props: { onSubmit: { defaultValue: null, description: "Callback function called when message is submitted with Enter key or submit button", name: "onSubmit", required: !1, type: { name: "((value: string, files?: File[]) => void)" } }, disabled: { defaultValue: null, description: "Disable the input and submission", name: "disabled", required: !1, type: { name: "boolean" } }, onFileSelect: { defaultValue: null, description: "Optional callback function called when files are selected", name: "onFileSelect", required: !1, type: { name: "((files: File[]) => void)" } }, acceptedFileTypes: { defaultValue: null, description: 'File types accepted for upload (e.g., "image/*,.pdf,.doc")', name: "acceptedFileTypes", required: !1, type: { name: "string" } }, maxFileSize: { defaultValue: null, description: "Maximum file size in bytes for uploaded files", name: "maxFileSize", required: !1, type: { name: "number" } } } };
-} catch {
-}
+ee.displayName = "SChatInput";
 export {
-  j as SChatInput,
-  j as default
+  ee as SChatInput,
+  ee as default
 };