@solostylist/ui-kit 1.0.167 → 1.0.169

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

@@ -1,56 +1,65 @@
 import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import { Box as n, Container as w, Stack as s, Typography as l, Button as z } from "@mui/material";
-import D from "../s-lazy-image/s-lazy-image.js";
-function F({
-  imageSrc: x,
-  imageAlt: a,
-  title: o,
-  description: c,
-  buttonText: r,
-  imageWidth: d = "200px",
-  imageHeight: j = "auto",
-  maxWidth: h = "lg",
-  height: f = "100vh",
-  py: p = 8,
-  spacing: y = 6,
-  titleVariant: m = "h4",
-  descriptionVariant: u = "body1",
-  buttonVariant: g = "contained",
-  buttonColor: v = "primary",
-  containerSx: C,
-  imageContainerSx: B,
-  contentSx: E,
-  titleSx: I,
-  descriptionSx: L,
-  buttonContainerSx: t,
-  buttonProps: S,
-  hideImage: k = !1,
+import { Box as t, Container as _, Stack as u, Typography as o, Button as w } from "@mui/material";
+import "../s-lazy-image/index.js";
+import A from "../s-lazy-image/s-lazy-image.js";
+const n = ({
+  imageSrc: a,
+  imageAlt: s,
+  title: d,
+  description: m,
+  buttonText: l,
+  imageWidth: p = "200px",
+  imageHeight: c = "auto",
+  maxWidth: f = "lg",
+  height: h = "100vh",
+  py: y = 8,
+  spacing: v = 6,
+  titleVariant: g = "h4",
+  descriptionVariant: x = "body1",
+  buttonVariant: b = "contained",
+  buttonColor: V = "primary",
+  containerSx: S,
+  imageContainerSx: q,
+  contentSx: C,
+  titleSx: D,
+  descriptionSx: P,
+  buttonContainerSx: r,
+  buttonProps: T,
+  hideImage: j = !1,
   customActions: i
-}) {
-  return /* @__PURE__ */ e.jsx(
-    n,
-    {
-      component: "main",
-      sx: {
-        alignItems: "center",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        py: p,
-        height: f,
-        ...C
-      },
-      children: /* @__PURE__ */ e.jsx(w, { maxWidth: h, children: /* @__PURE__ */ e.jsxs(s, { spacing: y, children: [
-        !k && /* @__PURE__ */ e.jsx(n, { sx: { display: "flex", justifyContent: "center", ...B }, children: /* @__PURE__ */ e.jsx(D, { src: x, alt: a, width: d, height: j }) }),
-        /* @__PURE__ */ e.jsxs(s, { spacing: 1, sx: { textAlign: "center", ...E }, children: [
-          /* @__PURE__ */ e.jsx(l, { variant: m, sx: I, children: o }),
-          /* @__PURE__ */ e.jsx(l, { variant: u, color: "text.secondary", sx: L, children: c })
-        ] }),
-        i ? /* @__PURE__ */ e.jsx(n, { sx: { display: "flex", justifyContent: "center", ...t }, children: i }) : r ? /* @__PURE__ */ e.jsx(n, { sx: { display: "flex", justifyContent: "center", ...t }, children: /* @__PURE__ */ e.jsx(z, { variant: g, color: v, ...S, children: r }) }) : null
-      ] }) })
-    }
-  );
+}) => /* @__PURE__ */ e.jsx(
+  t,
+  {
+    component: "main",
+    sx: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      py: y,
+      height: h,
+      ...S
+    },
+    children: /* @__PURE__ */ e.jsx(_, { maxWidth: f, children: /* @__PURE__ */ e.jsxs(u, { spacing: v, children: [
+      !j && /* @__PURE__ */ e.jsx(t, { sx: { display: "flex", justifyContent: "center", ...q }, children: /* @__PURE__ */ e.jsx(A, { src: a, alt: s, width: p, height: c }) }),
+      /* @__PURE__ */ e.jsxs(u, { spacing: 1, sx: { textAlign: "center", ...C }, children: [
+        /* @__PURE__ */ e.jsx(o, { variant: g, sx: D, children: d }),
+        /* @__PURE__ */ e.jsx(o, { variant: x, color: "text.secondary", sx: P, children: m })
+      ] }),
+      i ? /* @__PURE__ */ e.jsx(t, { sx: { display: "flex", justifyContent: "center", ...r }, children: i }) : l ? /* @__PURE__ */ e.jsx(t, { sx: { display: "flex", justifyContent: "center", ...r }, children: /* @__PURE__ */ e.jsx(w, { variant: b, color: V, ...T, children: l }) }) : null
+    ] }) })
+  }
+);
+n.displayName = "SErrorLayout";
+try {
+  n.displayName = "SErrorLayout", n.__docgenInfo = { description: "A full-screen error layout component for displaying error pages with customizable content and styling.", displayName: "SErrorLayout", props: { imageSrc: { defaultValue: null, description: "Source URL for the error image", name: "imageSrc", required: !0, type: { name: "string" } }, imageAlt: { defaultValue: null, description: "Alt text for the error image", name: "imageAlt", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Main error title text", name: "title", required: !0, type: { name: "string" } }, description: { defaultValue: null, description: "Error description text", name: "description", required: !0, type: { name: "ReactNode" } }, buttonText: { defaultValue: null, description: "Text for the action button. If not provided, button will not be shown", name: "buttonText", required: !1, type: { name: "string" } }, imageWidth: { defaultValue: { value: "200px" }, description: "Image width. Default: '200px'", name: "imageWidth", required: !1, type: { name: "string | number" } }, imageHeight: { defaultValue: { value: "auto" }, description: "Image height. Default: 'auto'", name: "imageHeight", required: !1, type: { name: "string | number" } }, maxWidth: { defaultValue: { value: "lg" }, description: "Container max width. Default: 'lg'", name: "maxWidth", required: !1, type: { name: 'false | "xs" | "sm" | "md" | "lg" | "xl"' } }, height: { defaultValue: { value: "100vh" }, description: "Main container height. Default: '100vh'", name: "height", required: !1, type: { name: "string | number" } }, py: { defaultValue: { value: "8" }, description: "Vertical padding. Default: 8 (64px)", name: "py", required: !1, type: { name: "string | number" } }, spacing: { defaultValue: { value: "6" }, description: "Spacing between elements. Default: 6", name: "spacing", required: !1, type: { name: "number" } }, titleVariant: { defaultValue: { value: "h4" }, description: "Title typography variant. Default: 'h4'", name: "titleVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, descriptionVariant: { defaultValue: { value: "body1" }, description: "Description typography variant. Default: 'body1'", name: "descriptionVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, buttonVariant: { defaultValue: { value: "contained" }, description: "Button variant. Default: 'contained'", name: "buttonVariant", required: !1, type: { name: "enum", value: [{ value: '"outlined"' }, { value: '"text"' }, { value: '"contained"' }] } }, buttonColor: { defaultValue: { value: "primary" }, description: "Button color. Default: 'primary'", name: "buttonColor", required: !1, type: { name: "enum", value: [{ value: '"error"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"info"' }, { value: '"success"' }, { value: '"warning"' }, { value: '"inherit"' }] } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, imageContainerSx: { defaultValue: null, description: "Custom styles for the image container", name: "imageContainerSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content stack", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "Custom styles for the title", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, descriptionSx: { defaultValue: null, description: "Custom styles for the description", name: "descriptionSx", required: !1, type: { name: "SxProps<Theme>" } }, buttonContainerSx: { defaultValue: null, description: "Custom styles for the button container", name: "buttonContainerSx", required: !1, type: { name: "SxProps<Theme>" } }, buttonProps: { defaultValue: null, description: "Additional button props", name: "buttonProps", required: !1, type: { name: "Partial<ButtonProps>" } }, hideImage: { defaultValue: { value: "false" }, description: "Hide image. Default: false", name: "hideImage", required: !1, type: { name: "boolean" } }, customActions: { defaultValue: null, description: "Custom content to render instead of the button", name: "customActions", required: !1, type: { name: "ReactNode" } } } };
+} catch {
+}
+try {
+  serrorlayout.displayName = "serrorlayout", serrorlayout.__docgenInfo = { description: "A full-screen error layout component for displaying error pages with customizable content and styling.", displayName: "serrorlayout", props: { imageSrc: { defaultValue: null, description: "Source URL for the error image", name: "imageSrc", required: !0, type: { name: "string" } }, imageAlt: { defaultValue: null, description: "Alt text for the error image", name: "imageAlt", required: !0, type: { name: "string" } }, title: { defaultValue: null, description: "Main error title text", name: "title", required: !0, type: { name: "string" } }, description: { defaultValue: null, description: "Error description text", name: "description", required: !0, type: { name: "ReactNode" } }, buttonText: { defaultValue: null, description: "Text for the action button. If not provided, button will not be shown", name: "buttonText", required: !1, type: { name: "string" } }, imageWidth: { defaultValue: { value: "200px" }, description: "Image width. Default: '200px'", name: "imageWidth", required: !1, type: { name: "string | number" } }, imageHeight: { defaultValue: { value: "auto" }, description: "Image height. Default: 'auto'", name: "imageHeight", required: !1, type: { name: "string | number" } }, maxWidth: { defaultValue: { value: "lg" }, description: "Container max width. Default: 'lg'", name: "maxWidth", required: !1, type: { name: 'false | "xs" | "sm" | "md" | "lg" | "xl"' } }, height: { defaultValue: { value: "100vh" }, description: "Main container height. Default: '100vh'", name: "height", required: !1, type: { name: "string | number" } }, py: { defaultValue: { value: "8" }, description: "Vertical padding. Default: 8 (64px)", name: "py", required: !1, type: { name: "string | number" } }, spacing: { defaultValue: { value: "6" }, description: "Spacing between elements. Default: 6", name: "spacing", required: !1, type: { name: "number" } }, titleVariant: { defaultValue: { value: "h4" }, description: "Title typography variant. Default: 'h4'", name: "titleVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, descriptionVariant: { defaultValue: { value: "body1" }, description: "Description typography variant. Default: 'body1'", name: "descriptionVariant", required: !1, type: { name: "enum", value: [{ value: '"button"' }, { value: '"caption"' }, { value: '"h1"' }, { value: '"h2"' }, { value: '"h3"' }, { value: '"h4"' }, { value: '"h5"' }, { value: '"h6"' }, { value: '"inherit"' }, { value: '"subtitle1"' }, { value: '"subtitle2"' }, { value: '"body1"' }, { value: '"body2"' }, { value: '"overline"' }] } }, buttonVariant: { defaultValue: { value: "contained" }, description: "Button variant. Default: 'contained'", name: "buttonVariant", required: !1, type: { name: "enum", value: [{ value: '"outlined"' }, { value: '"text"' }, { value: '"contained"' }] } }, buttonColor: { defaultValue: { value: "primary" }, description: "Button color. Default: 'primary'", name: "buttonColor", required: !1, type: { name: "enum", value: [{ value: '"error"' }, { value: '"primary"' }, { value: '"secondary"' }, { value: '"info"' }, { value: '"success"' }, { value: '"warning"' }, { value: '"inherit"' }] } }, containerSx: { defaultValue: null, description: "Custom styles for the main container", name: "containerSx", required: !1, type: { name: "SxProps<Theme>" } }, imageContainerSx: { defaultValue: null, description: "Custom styles for the image container", name: "imageContainerSx", required: !1, type: { name: "SxProps<Theme>" } }, contentSx: { defaultValue: null, description: "Custom styles for the content stack", name: "contentSx", required: !1, type: { name: "SxProps<Theme>" } }, titleSx: { defaultValue: null, description: "Custom styles for the title", name: "titleSx", required: !1, type: { name: "SxProps<Theme>" } }, descriptionSx: { defaultValue: null, description: "Custom styles for the description", name: "descriptionSx", required: !1, type: { name: "SxProps<Theme>" } }, buttonContainerSx: { defaultValue: null, description: "Custom styles for the button container", name: "buttonContainerSx", required: !1, type: { name: "SxProps<Theme>" } }, buttonProps: { defaultValue: null, description: "Additional button props", name: "buttonProps", required: !1, type: { name: "Partial<ButtonProps>" } }, hideImage: { defaultValue: { value: "false" }, description: "Hide image. Default: false", name: "hideImage", required: !1, type: { name: "boolean" } }, customActions: { defaultValue: null, description: "Custom content to render instead of the button", name: "customActions", required: !1, type: { name: "ReactNode" } } } };
+} catch {
 }
 export {
-  F as default
+  n as SErrorLayout,
+  n as default
 };

package/dist/s-file-dropzone/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-file-dropzone.js";
+import { SFileDropzone as r } from "./s-file-dropzone.js";
 export {
-  o as default
+  r as default
 };

package/dist/s-file-dropzone/s-file-dropzone.d.ts

@@ -11,9 +11,7 @@ export type CustomFile = File | FileWithPath | {
     /** File size in bytes */
     size: number;
 };
-/**
- * Props for the SFileDropzone component, extending react-dropzone options
- */
+/** Props interface for SFileDropzone component */
 export interface SFileDropzoneProps extends DropzoneOptions {
     /** Additional hint text displayed below the main upload message */
     hint?: string;
@@ -36,52 +34,9 @@ export interface SFileDropzoneProps extends DropzoneOptions {
     /** Whether to show the 'Remove all' button */
     isShowBtnRemoveAll?: boolean;
 }
-/**
- * Advanced file dropzone component with drag-and-drop and file management
- *
- * Features:
- * - Drag and drop file upload with visual feedback
- * - Click to browse file selection
- * - File preview with icons based on file extension
- * - Individual file removal with tooltips
- * - Bulk file removal option
- * - File size display in human-readable format
- * - Form integration with error handling and validation
- * - Customizable upload area styling and messaging
- *
- * Built on react-dropzone for robust file handling and supports all dropzone options
- * including file type restrictions, size limits, and custom validation.
- *
- * @param hint - Additional descriptive text below main upload message
- * @param label - Form field label
- * @param error - Error message to display when validation fails
- * @param onRemoveAll - Handler for removing all selected files
- * @param onUpload - Optional handler for triggering upload process
- * @param onRemove - Handler for removing individual files
- * @param required - Whether file selection is required
- * @param disabledUpload - Whether upload functionality is disabled
- * @param isShowBtnRemoveAll - Whether to show bulk remove button
- * @param props - All react-dropzone options (accept, maxSize, etc.)
- * @returns JSX element containing the complete file dropzone interface
- *
- * @example
- * ```tsx
- * <SFileDropzone
- *   label="Upload Documents"
- *   hint="PDF, DOC, or TXT files only"
- *   accept={{
- *     'application/pdf': ['.pdf'],
- *     'application/msword': ['.doc', '.docx'],
- *     'text/plain': ['.txt']
- *   }}
- *   maxSize={5 * 1024 * 1024} // 5MB
- *   files={selectedFiles}
- *   onDrop={handleFileDrop}
- *   onRemove={handleFileRemove}
- *   onRemoveAll={handleRemoveAll}
- *   required
- * />
- * ```
- */
-declare const SFileDropzone: ({ hint, label, error, onRemoveAll, onUpload, onRemove, required, disabledUpload, isShowBtnRemoveAll, ...props }: SFileDropzoneProps) => React.JSX.Element;
+/** A file dropzone component with drag-and-drop, file management, and form integration. */
+export declare const SFileDropzone: {
+    ({ hint, label, error, onRemoveAll, onUpload, onRemove, required, disabledUpload, isShowBtnRemoveAll, ...props }: SFileDropzoneProps): React.JSX.Element;
+    displayName: string;
+};
 export default SFileDropzone;

package/dist/s-file-dropzone/s-file-dropzone.js

@@ -1,35 +1,35 @@
-import { j as o } from "../jsx-runtime-OVHDjVDe.js";
-import * as y from "react";
-import { c as d } from "../createSvgIcon-DxwgGAVe.js";
-import { Avatar as C, Tooltip as v, IconButton as I, Button as z } from "@mui/material";
-import { useDropzone as S } from "react-dropzone";
-import k from "../s-file-icon/s-file-icon.js";
-import w from "../s-form/s-form.js";
-import { bytesToSize as B } from "../utils/bytes-to-size.js";
-import { B as c } from "../Box-Ha0cQ4KO.js";
-import { S as e } from "../Stack-Cq2r2NmC.js";
-import { T as t } from "../Typography-B7LOtCzI.js";
-const D = d(/* @__PURE__ */ o.jsx("path", {
+import { j as e } from "../jsx-runtime-OVHDjVDe.js";
+import * as j from "react";
+import { c } from "../createSvgIcon-DxwgGAVe.js";
+import { Avatar as q, Tooltip as C, IconButton as w, Button as V } from "@mui/material";
+import { useDropzone as R } from "react-dropzone";
+import { SFileIcon as z } from "../s-file-icon/s-file-icon.js";
+import { SForm as A } from "../s-form/s-form.js";
+import { bytesToSize as S } from "../utils/bytes-to-size.js";
+import { B as u } from "../Box-Ha0cQ4KO.js";
+import { S as l } from "../Stack-Cq2r2NmC.js";
+import { T as a } from "../Typography-C8jwvSWe.js";
+const _ = c(/* @__PURE__ */ e.jsx("path", {
   d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-}), "CloseOutlined"), F = d(/* @__PURE__ */ o.jsx("path", {
+}), "CloseOutlined"), I = c(/* @__PURE__ */ e.jsx("path", {
   d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3M8 13h2.55v3h2.9v-3H16l-4-4z"
-}), "CloudUploadOutlined"), J = ({
-  hint: p,
-  label: x = "",
-  error: m,
+}), "CloudUploadOutlined"), t = ({
+  hint: r,
+  label: m = "",
+  error: f,
   onRemoveAll: h,
-  onUpload: M,
-  onRemove: n,
-  required: u = !1,
-  disabledUpload: O = !1,
-  isShowBtnRemoveAll: j = !1,
-  ...s
+  onUpload: U,
+  onRemove: i,
+  required: y = !1,
+  disabledUpload: k = !1,
+  isShowBtnRemoveAll: x = !1,
+  ...n
 }) => {
-  var l, a;
-  const { getRootProps: f, getInputProps: g, isDragActive: i } = S(s);
-  return /* @__PURE__ */ o.jsxs(y.Fragment, { children: [
-    /* @__PURE__ */ o.jsx(w, { error: m, label: x, required: u, hint: p, children: /* @__PURE__ */ o.jsxs(
-      c,
+  var s, p;
+  const { getRootProps: g, getInputProps: b, isDragActive: d } = R(n);
+  return /* @__PURE__ */ e.jsxs(j.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(A, { error: f, label: m, required: y, hint: r, children: /* @__PURE__ */ e.jsxs(
+      u,
       {
         sx: {
           alignItems: "center",
@@ -43,23 +43,23 @@ const D = d(/* @__PURE__ */ o.jsx("path", {
           outline: "none",
           p: 4,
           // Visual feedback when files are being dragged over
-          ...i && {
+          ...d && {
             bgcolor: "action.selected",
             opacity: 0.5
           },
           // Hover effect when not actively dragging
           "&:hover": {
-            ...!i && {
+            ...!d && {
               bgcolor: "action.hover"
             }
           }
         },
-        ...f(),
+        ...g(),
         children: [
-          /* @__PURE__ */ o.jsx("input", { ...g() }),
-          /* @__PURE__ */ o.jsxs(e, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
-            /* @__PURE__ */ o.jsx(
-              C,
+          /* @__PURE__ */ e.jsx("input", { ...b() }),
+          /* @__PURE__ */ e.jsxs(l, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+            /* @__PURE__ */ e.jsx(
+              q,
               {
                 sx: {
                   border: "1px dashed",
@@ -67,11 +67,11 @@ const D = d(/* @__PURE__ */ o.jsx("path", {
                   color: "text.secondary",
                   backgroundColor: "transparent"
                 },
-                children: /* @__PURE__ */ o.jsx(F, { fontSize: "small" })
+                children: /* @__PURE__ */ e.jsx(I, { fontSize: "small" })
               }
             ),
-            /* @__PURE__ */ o.jsx(e, { spacing: 1, children: /* @__PURE__ */ o.jsxs(t, { color: "text.secondary", variant: "body2", children: [
-              /* @__PURE__ */ o.jsx(t, { component: "span", sx: { textDecoration: "underline" }, variant: "inherit", children: "Click to upload" }),
+            /* @__PURE__ */ e.jsx(l, { spacing: 1, children: /* @__PURE__ */ e.jsxs(a, { color: "text.secondary", variant: "body2", children: [
+              /* @__PURE__ */ e.jsx(a, { component: "span", sx: { textDecoration: "underline" }, variant: "inherit", children: "Click to upload" }),
               " ",
               "or drag and drop your files here"
             ] }) })
@@ -79,11 +79,11 @@ const D = d(/* @__PURE__ */ o.jsx("path", {
         ]
       }
     ) }),
-    (l = s.files) != null && l.length ? /* @__PURE__ */ o.jsxs(e, { mt: 1, spacing: 1, children: [
-      /* @__PURE__ */ o.jsx(e, { component: "ul", spacing: 1, sx: { listStyle: "none", m: 0, p: 0 }, children: (a = s.files) == null ? void 0 : a.map((r) => {
-        const b = r.name.split(".").pop();
-        return /* @__PURE__ */ o.jsxs(
-          e,
+    (s = n.files) != null && s.length ? /* @__PURE__ */ e.jsxs(l, { mt: 1, spacing: 1, children: [
+      /* @__PURE__ */ e.jsx(l, { component: "ul", spacing: 1, sx: { listStyle: "none", m: 0, p: 0 }, children: (p = n.files) == null ? void 0 : p.map((o) => {
+        const v = o.name.split(".").pop();
+        return /* @__PURE__ */ e.jsxs(
+          l,
           {
             component: "li",
             direction: "row",
@@ -97,29 +97,39 @@ const D = d(/* @__PURE__ */ o.jsx("path", {
               p: 1
             },
             children: [
-              /* @__PURE__ */ o.jsx(k, { extension: b }),
-              /* @__PURE__ */ o.jsxs(c, { sx: { flex: "1 1 auto" }, children: [
-                /* @__PURE__ */ o.jsx(t, { variant: "subtitle2", children: r.name }),
-                /* @__PURE__ */ o.jsx(t, { color: "text.secondary", variant: "body2", children: B(r.size) })
+              /* @__PURE__ */ e.jsx(z, { extension: v }),
+              /* @__PURE__ */ e.jsxs(u, { sx: { flex: "1 1 auto" }, children: [
+                /* @__PURE__ */ e.jsx(a, { variant: "subtitle2", children: o.name }),
+                /* @__PURE__ */ e.jsx(a, { color: "text.secondary", variant: "body2", children: S(o.size) })
               ] }),
-              /* @__PURE__ */ o.jsx(v, { title: "Remove", children: /* @__PURE__ */ o.jsx(
-                I,
+              /* @__PURE__ */ e.jsx(C, { title: "Remove", children: /* @__PURE__ */ e.jsx(
+                w,
                 {
                   onClick: () => {
-                    n == null || n(r);
+                    i == null || i(o);
                   },
-                  children: /* @__PURE__ */ o.jsx(D, {})
+                  children: /* @__PURE__ */ e.jsx(_, {})
                 }
               ) })
             ]
           },
-          r.size
+          o.size
         );
       }) }),
-      /* @__PURE__ */ o.jsx(e, { direction: "row", sx: { alignItems: "center", justifyContent: "flex-end" }, children: j && /* @__PURE__ */ o.jsx(z, { onClick: h, size: "small", type: "button", variant: "text", children: "Remove all" }) })
+      /* @__PURE__ */ e.jsx(l, { direction: "row", sx: { alignItems: "center", justifyContent: "flex-end" }, children: x && /* @__PURE__ */ e.jsx(V, { onClick: h, size: "small", type: "button", variant: "text", children: "Remove all" }) })
     ] }) : null
   ] });
 };
+t.displayName = "SFileDropzone";
+try {
+  t.displayName = "SFileDropzone", t.__docgenInfo = { description: "A file dropzone component with drag-and-drop, file management, and form integration.", displayName: "SFileDropzone", props: { hint: { defaultValue: null, description: "Additional hint text displayed below the main upload message", name: "hint", required: !1, type: { name: "string" } }, files: { defaultValue: null, description: "Array of files currently selected/uploaded", name: "files", required: !1, type: { name: "CustomFile[]" } }, onRemove: { defaultValue: null, description: "Callback when a single file is removed", name: "onRemove", required: !1, type: { name: "((file: CustomFile) => void)" } }, onRemoveAll: { defaultValue: null, description: "Callback when all files are removed", name: "onRemoveAll", required: !1, type: { name: "(() => void)" } }, onUpload: { defaultValue: null, description: "Callback when upload is triggered (optional - for custom upload logic)", name: "onUpload", required: !1, type: { name: "(() => void)" } }, label: { defaultValue: { value: "" }, description: "Label for the form field", name: "label", required: !1, type: { name: "ReactNode" } }, disabledUpload: { defaultValue: { value: "false" }, description: "Whether upload functionality is disabled", name: "disabledUpload", required: !1, type: { name: "boolean" } }, error: { defaultValue: null, description: "Error message to display", name: "error", required: !1, type: { name: "string" } }, required: { defaultValue: { value: "false" }, description: "Whether the field is required", name: "required", required: !1, type: { name: "boolean" } }, isShowBtnRemoveAll: { defaultValue: { value: "false" }, description: "Whether to show the 'Remove all' button", name: "isShowBtnRemoveAll", required: !1, type: { name: "boolean" } } } };
+} catch {
+}
+try {
+  sfiledropzone.displayName = "sfiledropzone", sfiledropzone.__docgenInfo = { description: "A file dropzone component with drag-and-drop, file management, and form integration.", displayName: "sfiledropzone", props: { hint: { defaultValue: null, description: "Additional hint text displayed below the main upload message", name: "hint", required: !1, type: { name: "string" } }, files: { defaultValue: null, description: "Array of files currently selected/uploaded", name: "files", required: !1, type: { name: "CustomFile[]" } }, onRemove: { defaultValue: null, description: "Callback when a single file is removed", name: "onRemove", required: !1, type: { name: "((file: CustomFile) => void)" } }, onRemoveAll: { defaultValue: null, description: "Callback when all files are removed", name: "onRemoveAll", required: !1, type: { name: "(() => void)" } }, onUpload: { defaultValue: null, description: "Callback when upload is triggered (optional - for custom upload logic)", name: "onUpload", required: !1, type: { name: "(() => void)" } }, label: { defaultValue: { value: "" }, description: "Label for the form field", name: "label", required: !1, type: { name: "ReactNode" } }, disabledUpload: { defaultValue: { value: "false" }, description: "Whether upload functionality is disabled", name: "disabledUpload", required: !1, type: { name: "boolean" } }, error: { defaultValue: null, description: "Error message to display", name: "error", required: !1, type: { name: "string" } }, required: { defaultValue: { value: "false" }, description: "Whether the field is required", name: "required", required: !1, type: { name: "boolean" } }, isShowBtnRemoveAll: { defaultValue: { value: "false" }, description: "Whether to show the 'Remove all' button", name: "isShowBtnRemoveAll", required: !1, type: { name: "boolean" } } } };
+} catch {
+}
 export {
-  J as default
+  t as SFileDropzone,
+  t as default
 };

package/dist/s-file-icon/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-file-icon.js";
+import { SFileIcon as a } from "./s-file-icon.js";
 export {
-  o as default
+  a as default
 };

package/dist/s-file-icon/s-file-icon.d.ts

@@ -6,29 +6,9 @@ export interface SFileIconProps {
     /** File extension (without dot) to determine which icon to display */
     extension?: string;
 }
-/**
- * File type icon component with support for common file extensions
- *
- * Displays appropriate file type icons based on file extension.
- * Provides visual representation for common file types including:
- * - Images: JPG, JPEG, PNG, SVG
- * - Documents: PDF
- * - Videos: MP4
- * - Generic: Default icon for unsupported types
- *
- * The component assumes icon SVG files are available in the /assets/ directory
- * following the naming convention: icon-{type}.svg
- *
- * @param extension - File extension without the dot (e.g., 'pdf', 'jpg', 'png')
- * @returns JSX element containing the appropriate file type icon
- *
- * @example
- * ```tsx
- * <SFileIcon extension="pdf" />        // Shows PDF icon
- * <SFileIcon extension="jpg" />        // Shows image icon
- * <SFileIcon extension="unknown" />    // Shows generic file icon
- * <SFileIcon />                        // Shows generic file icon (no extension)
- * ```
- */
-declare const SFileIcon: ({ extension }: SFileIconProps) => React.JSX.Element;
+/** A file type icon component that displays appropriate icons based on file extensions. */
+export declare const SFileIcon: {
+    ({ extension }: SFileIconProps): React.JSX.Element;
+    displayName: string;
+};
 export default SFileIcon;

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

@@ -1,5 +1,5 @@
-import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import { B as i } from "../Box-Ha0cQ4KO.js";
+import { j as i } from "../jsx-runtime-OVHDjVDe.js";
+import { B as n } from "../Box-Ha0cQ4KO.js";
 const o = {
   jpeg: "/assets/icon-jpg.svg",
   jpg: "/assets/icon-jpg.svg",
@@ -7,11 +7,11 @@ const o = {
   pdf: "/assets/icon-pdf.svg",
   png: "/assets/icon-png.svg",
   svg: "/assets/icon-svg.svg"
-}, c = ({ extension: t }) => {
+}, t = ({ extension: e }) => {
   let s;
-  return t ? s = o[t] ?? "/assets/icon-other.svg" : s = "/assets/icon-other.svg", // Container box with fixed dimensions for consistent icon sizing
-  /* @__PURE__ */ e.jsx(
-    i,
+  return e ? s = o[e] ?? "/assets/icon-other.svg" : s = "/assets/icon-other.svg", // Container box with fixed dimensions for consistent icon sizing
+  /* @__PURE__ */ i.jsx(
+    n,
     {
       sx: {
         alignItems: "center",
@@ -23,10 +23,16 @@ const o = {
         // Standard icon container size
         height: "36px"
       },
-      children: /* @__PURE__ */ e.jsx(i, { alt: "File", component: "img", src: s, sx: { height: "100%", width: "auto" } })
+      children: /* @__PURE__ */ i.jsx(n, { alt: "File", component: "img", src: s, sx: { height: "100%", width: "auto" } })
     }
   );
 };
+t.displayName = "SFileIcon";
+try {
+  t.displayName = "SFileIcon", t.__docgenInfo = { description: "A file type icon component that displays appropriate icons based on file extensions.", displayName: "SFileIcon", props: { extension: { defaultValue: null, description: "File extension (without dot) to determine which icon to display", name: "extension", required: !1, type: { name: "string" } } } };
+} catch {
+}
 export {
-  c as default
+  t as SFileIcon,
+  t as default
 };

package/dist/s-flex-box/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-flex-box.js";
+import { SFlexBox as x } from "./s-flex-box.js";
 export {
-  o as default
+  x as default
 };

package/dist/s-flex-box/s-flex-box.d.ts

@@ -1,5 +1,14 @@
 import { BoxProps } from '@mui/material/Box';
+/**
+ * Props interface for SFlexBox component
+ */
 export interface SFlexBoxProps extends BoxProps {
 }
-declare const SFlexBox: ({ children, ...props }: SFlexBoxProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A flex container component that defaults display to flex with all Material-UI Box capabilities.
+ */
+export declare const SFlexBox: {
+    ({ children, ...props }: SFlexBoxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default SFlexBox;

package/dist/s-flex-box/s-flex-box.js

@@ -1,6 +1,16 @@
-import { j as s } from "../jsx-runtime-OVHDjVDe.js";
-import { B as t } from "../Box-Ha0cQ4KO.js";
-const a = ({ children: o, ...r }) => /* @__PURE__ */ s.jsx(t, { display: "flex", ...r, children: o });
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import { B as l } from "../Box-Ha0cQ4KO.js";
+const o = ({ children: e, ...a }) => /* @__PURE__ */ t.jsx(l, { display: "flex", ...a, children: e });
+o.displayName = "SFlexBox";
+try {
+  o.displayName = "SFlexBox", o.__docgenInfo = { description: "A flex container component that defaults display to flex with all Material-UI Box capabilities.", displayName: "SFlexBox", props: {} };
+} catch {
+}
+try {
+  sflexbox.displayName = "sflexbox", sflexbox.__docgenInfo = { description: "A flex container component that defaults display to flex with all Material-UI Box capabilities.", displayName: "sflexbox", props: {} };
+} catch {
+}
 export {
-  a as default
+  o as SFlexBox,
+  o as default
 };

package/dist/s-form/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-form.js";
+import { SForm as a } from "./s-form.js";
 export {
-  o as default
+  a as default
 };

package/dist/s-form/s-form.d.ts

@@ -15,18 +15,9 @@ export interface SFormProps {
     /** HTML 'for' attribute to associate label with input element */
     htmlFor?: string;
 }
-/**
- * SForm - A consistent form field wrapper component that provides:
- * - Standardized label styling with optional required indicator
- * - Help tooltip integration for additional context
- * - Error state handling with consistent error message display
- * - Full-width layout with proper Material-UI FormControl integration
- *
- * This component serves as the foundation for all form inputs in the design system,
- * ensuring consistent labeling, error handling, and help text patterns.
- *
- * @param props - SFormProps containing label, validation, and child elements
- * @returns JSX.Element - Material-UI FormControl with integrated label, hint, and error handling
- */
-declare const SForm: ({ label, hint, error, required, children, htmlFor }: SFormProps) => import("react/jsx-runtime").JSX.Element;
+/** A form wrapper component that provides consistent labeling, error handling, and help text. */
+export declare const SForm: {
+    ({ label, hint, error, required, children, htmlFor }: SFormProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default SForm;

package/dist/s-form/s-form.js

@@ -1,14 +1,24 @@
-import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import { FormControl as x, FormLabel as i, FormHelperText as n } from "@mui/material";
-const a = ({ label: r, hint: s, error: l, required: o, children: t, htmlFor: m }) => /* @__PURE__ */ e.jsxs(x, { error: !!l, fullWidth: !0, children: [
-  r ? /* @__PURE__ */ e.jsxs(i, { htmlFor: m, required: o, sx: { display: "flex", alignItems: "center" }, children: [
-    r,
+import { j as r } from "../jsx-runtime-OVHDjVDe.js";
+import { FormControl as s, FormLabel as u, FormHelperText as n } from "@mui/material";
+const l = ({ label: e, hint: a, error: t, required: i, children: o, htmlFor: d }) => /* @__PURE__ */ r.jsxs(s, { error: !!t, fullWidth: !0, children: [
+  e ? /* @__PURE__ */ r.jsxs(u, { htmlFor: d, required: i, sx: { display: "flex", alignItems: "center" }, children: [
+    e,
     " "
   ] }) : null,
-  t,
-  s && !l ? /* @__PURE__ */ e.jsx(n, { children: s }) : null,
-  l ? /* @__PURE__ */ e.jsx(n, { children: l }) : null
+  o,
+  a && !t ? /* @__PURE__ */ r.jsx(n, { children: a }) : null,
+  t ? /* @__PURE__ */ r.jsx(n, { children: t }) : null
 ] });
+l.displayName = "SForm";
+try {
+  l.displayName = "SForm", l.__docgenInfo = { description: "A form wrapper component that provides consistent labeling, error handling, and help text.", displayName: "SForm", props: { label: { defaultValue: null, description: "The form field label - can be text or a React element", name: "label", required: !0, type: { name: "ReactNode" } }, hint: { defaultValue: null, description: "Optional hint text displayed as a tooltip next to the label", name: "hint", required: !1, type: { name: "string" } }, error: { defaultValue: null, description: "Error message to display below the form field", name: "error", required: !1, type: { name: "string" } }, required: { defaultValue: null, description: "Whether the form field is required (adds asterisk to label)", name: "required", required: !0, type: { name: "boolean" } }, children: { defaultValue: null, description: "Child form elements (input, select, etc.) to wrap", name: "children", required: !0, type: { name: "ReactNode" } }, htmlFor: { defaultValue: null, description: "HTML 'for' attribute to associate label with input element", name: "htmlFor", required: !1, type: { name: "string" } } } };
+} catch {
+}
+try {
+  sform.displayName = "sform", sform.__docgenInfo = { description: "A form wrapper component that provides consistent labeling, error handling, and help text.", displayName: "sform", props: { label: { defaultValue: null, description: "The form field label - can be text or a React element", name: "label", required: !0, type: { name: "ReactNode" } }, hint: { defaultValue: null, description: "Optional hint text displayed as a tooltip next to the label", name: "hint", required: !1, type: { name: "string" } }, error: { defaultValue: null, description: "Error message to display below the form field", name: "error", required: !1, type: { name: "string" } }, required: { defaultValue: null, description: "Whether the form field is required (adds asterisk to label)", name: "required", required: !0, type: { name: "boolean" } }, children: { defaultValue: null, description: "Child form elements (input, select, etc.) to wrap", name: "children", required: !0, type: { name: "ReactNode" } }, htmlFor: { defaultValue: null, description: "HTML 'for' attribute to associate label with input element", name: "htmlFor", required: !1, type: { name: "string" } } } };
+} catch {
+}
 export {
-  a as default
+  l as SForm,
+  l as default
 };