mainstack-design-system 1.16.1 → 1.16.3

package/dist/index.d.ts

@@ -4312,6 +4312,7 @@ declare type FileUploaderContextType = {
     onError?: (error: unknown) => void;
     error: string | null;
     setError: (error: string | null) => void;
+    isError?: boolean;
 } & Pick<DropzoneOptions, "accept" | "maxFiles" | "minSize" | "maxSize">;
 
 export declare const FileUploaderDropzone: {
@@ -4356,7 +4357,7 @@ export declare type FileUploaderFileType = {
 
 export declare const FileUploaderGroup: {
     Root: {
-        ({ values: controlledValues, onValuesChange: controlledonValuesChange, defaultValues, isDisabled, accept, maxFiles, maxSize, multiple, onError: externalOnError, children, className, ...props }: FileUploaderRootProps): JSX.Element;
+        ({ values: controlledValues, onValuesChange: controlledonValuesChange, defaultValues, isDisabled, accept, maxFiles, maxSize, multiple, onError: externalOnError, children, className, isError, ...props }: FileUploaderRootProps): JSX.Element;
         displayName: string;
     };
     DropZone: {
@@ -4417,7 +4418,7 @@ export declare interface FileUploaderPreviewProps extends Omit<ComponentPropsWit
 }
 
 export declare const FileUploaderRoot: {
-    ({ values: controlledValues, onValuesChange: controlledonValuesChange, defaultValues, isDisabled, accept, maxFiles, maxSize, multiple, onError: externalOnError, children, className, ...props }: FileUploaderRootProps): JSX.Element;
+    ({ values: controlledValues, onValuesChange: controlledonValuesChange, defaultValues, isDisabled, accept, maxFiles, maxSize, multiple, onError: externalOnError, children, className, isError, ...props }: FileUploaderRootProps): JSX.Element;
     displayName: string;
 };
 
@@ -4646,6 +4647,7 @@ declare type ImageUploaderContextType = {
     setMainPreviewFile: Dispatch<SetStateAction<ImageUploaderFileType | null>>;
     onValuesChange: (values: Array<ImageUploaderFileType>) => void;
     onError?: (error: unknown) => void;
+    isError?: boolean;
 } & Pick<DropzoneOptions, "accept" | "maxFiles" | "minSize" | "maxSize">;
 
 export declare const ImageUploaderDropzone: {
@@ -4680,7 +4682,7 @@ export declare interface ImageUploaderFileType extends FileUploaderFileType {
 
 export declare const ImageUploaderGroup: {
     Root: {
-        ({ values: controlledValues, onValuesChange: controlledonValuesChange, defaultValues, isDisabled, accept, maxFiles, maxSize, onError: externalOnError, children, className, ...props }: ImageUploaderRootProps): JSX.Element;
+        ({ values: controlledValues, onValuesChange: controlledonValuesChange, defaultValues, isDisabled, accept, maxFiles, maxSize, onError: externalOnError, children, className, isError, ...props }: ImageUploaderRootProps): JSX.Element;
         displayName: string;
     };
     MainPreview: {
@@ -4763,7 +4765,7 @@ export declare interface ImageUploaderPreviewProps extends Omit<ComponentPropsWi
 }
 
 export declare const ImageUploaderRoot: {
-    ({ values: controlledValues, onValuesChange: controlledonValuesChange, defaultValues, isDisabled, accept, maxFiles, maxSize, onError: externalOnError, children, className, ...props }: ImageUploaderRootProps): JSX.Element;
+    ({ values: controlledValues, onValuesChange: controlledonValuesChange, defaultValues, isDisabled, accept, maxFiles, maxSize, onError: externalOnError, children, className, isError, ...props }: ImageUploaderRootProps): JSX.Element;
     displayName: string;
 };
 

package/dist/mainstack-design-system16.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),t=require("react"),q=require("./mainstack-design-system25.cjs"),y=require("./index-C8aODXfJ.cjs"),P=require("./utils-s-0cOrOT.cjs"),g=({values:l,onValuesChange:m,defaultValues:a=[],isDisabled:n,accept:p={"image/png":[".png",".jpeg",".jpg",".webp"]},maxFiles:v=4,maxSize:b,onError:r,children:h,className:C,...f})=>{const[o,i]=y.useControllableState({prop:l,defaultProp:a,onChange:m}),[c,u]=t.useState(()=>{const e=l||a;return e&&e.length>0?e[e.length-1]:null});o&&o.length>0&&!c&&u(o[o.length-1]);const[j,s]=t.useState(null),x=t.useCallback(e=>{s(null),i(e)},[i]),I=t.useCallback(e=>{const U=e instanceof Error?e.message:"An error occurred";s(U),r&&r(e)},[r]);return d.jsx(q.ImageUploaderContext.Provider,{value:{values:o,defaultValues:a,mainPreviewFile:c,isDisabled:n,accept:p,maxFiles:v,maxSize:b,setMainPreviewFile:u,onValuesChange:x,error:j,setError:s,onError:I},children:d.jsx("div",{"data-disabled":n,"aria-disabled":n,"data-slot":"image-uploader-root",className:P.cn("mds:relative mds:flex mds:flex-col mds:gap-12 mds:body-font-family",C),...f,children:h})})};g.displayName="ImageUploaderRoot";exports.ImageUploaderRoot=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),a=require("react"),y=require("./mainstack-design-system25.cjs"),P=require("./index-C8aODXfJ.cjs"),R=require("./utils-s-0cOrOT.cjs"),m=({values:l,onValuesChange:p,defaultValues:t=[],isDisabled:n,accept:v={"image/png":[".png",".jpeg",".jpg",".webp"]},maxFiles:b=4,maxSize:h,onError:r,children:C,className:f,isError:i,...j})=>{const[o,c]=P.useControllableState({prop:l,defaultProp:t,onChange:p}),[d,u]=a.useState(()=>{const e=l||t;return e&&e.length>0?e[e.length-1]:null});o&&o.length>0&&!d&&u(o[o.length-1]);const[x,s]=a.useState(null),I=a.useCallback(e=>{s(null),c(e)},[c]),U=a.useCallback(e=>{const q=e instanceof Error?e.message:"An error occurred";s(q),r&&r(e)},[r]);return g.jsx(y.ImageUploaderContext.Provider,{value:{values:o,defaultValues:t,mainPreviewFile:d,isDisabled:n,accept:v,maxFiles:b,maxSize:h,setMainPreviewFile:u,onValuesChange:I,error:x,setError:s,onError:U,isError:i},children:g.jsx("div",{"data-disabled":n,"aria-disabled":n,"data-error":i,"data-slot":"image-uploader-root",className:R.cn("mds:relative mds:flex mds:flex-col mds:gap-12 mds:body-font-family",f),...j,children:C})})};m.displayName="ImageUploaderRoot";exports.ImageUploaderRoot=m;

package/dist/mainstack-design-system16.js

@@ -1,78 +1,81 @@
 'use client';
-import { jsx as p } from "react/jsx-runtime";
-import { useState as g, useCallback as d } from "react";
-import { ImageUploaderContext as y } from "./mainstack-design-system25.js";
-import { u as I } from "./index-437EL2iq.js";
-import { c as U } from "./utils-Z5JtG_Bc.js";
-const E = ({
+import { jsx as g } from "react/jsx-runtime";
+import { useState as d, useCallback as c } from "react";
+import { ImageUploaderContext as I } from "./mainstack-design-system25.js";
+import { u as U } from "./index-437EL2iq.js";
+import { c as F } from "./utils-Z5JtG_Bc.js";
+const N = ({
   values: s,
-  onValuesChange: c,
+  onValuesChange: u,
   defaultValues: a = [],
   isDisabled: r,
-  accept: u = { "image/png": [".png", ".jpeg", ".jpg", ".webp"] },
-  maxFiles: f = 4,
-  maxSize: h,
+  accept: f = { "image/png": [".png", ".jpeg", ".jpg", ".webp"] },
+  maxFiles: h = 4,
+  maxSize: v,
   onError: t,
-  children: v,
-  className: C,
-  ...b
+  children: C,
+  className: b,
+  isError: l,
+  ...P
 }) => {
-  const [o, l] = I({
+  const [o, m] = U({
     prop: s,
     defaultProp: a,
-    onChange: c
-  }), [m, i] = g(() => {
+    onChange: u
+  }), [i, p] = d(() => {
     const e = s || a;
     return e && e.length > 0 ? e[e.length - 1] : null;
   });
-  o && o.length > 0 && !m && i(o[o.length - 1]);
-  const [P, n] = g(null), j = d(
+  o && o.length > 0 && !i && p(o[o.length - 1]);
+  const [j, n] = d(null), w = c(
     (e) => {
-      n(null), l(e);
+      n(null), m(e);
     },
-    [l]
-  ), w = d(
+    [m]
+  ), x = c(
     (e) => {
-      const x = e instanceof Error ? e.message : "An error occurred";
-      n(x), t && t(e);
+      const y = e instanceof Error ? e.message : "An error occurred";
+      n(y), t && t(e);
     },
     [t]
   );
-  return /* @__PURE__ */ p(
-    y.Provider,
+  return /* @__PURE__ */ g(
+    I.Provider,
     {
       value: {
         values: o,
         defaultValues: a,
-        mainPreviewFile: m,
+        mainPreviewFile: i,
         isDisabled: r,
-        accept: u,
-        maxFiles: f,
-        maxSize: h,
-        setMainPreviewFile: i,
-        onValuesChange: j,
-        error: P,
+        accept: f,
+        maxFiles: h,
+        maxSize: v,
+        setMainPreviewFile: p,
+        onValuesChange: w,
+        error: j,
         setError: n,
-        onError: w
+        onError: x,
+        isError: l
       },
-      children: /* @__PURE__ */ p(
+      children: /* @__PURE__ */ g(
         "div",
         {
           "data-disabled": r,
           "aria-disabled": r,
+          "data-error": l,
           "data-slot": "image-uploader-root",
-          className: U(
+          className: F(
             "mds:relative mds:flex mds:flex-col mds:gap-12 mds:body-font-family",
-            C
+            b
           ),
-          ...b,
-          children: v
+          ...P,
+          children: C
         }
       )
     }
   );
 };
-E.displayName = "ImageUploaderRoot";
+N.displayName = "ImageUploaderRoot";
 export {
-  E as ImageUploaderRoot
+  N as ImageUploaderRoot
 };

package/dist/mainstack-design-system18.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),c=require("./utils-s-0cOrOT.cjs");require("./mainstack-design-system366.cjs");const S=require("./mainstack-design-system55.cjs"),L=require("./mainstack-design-system225.cjs"),R=require("./mainstack-design-system241.cjs"),q=require("./mainstack-design-system286.cjs");require("./player-CocaNyQC.cjs");const T=require("./mainstack-design-system25.cjs"),A=require("./mainstack-design-system629.cjs"),x=require("./index-4R9KShCu.cjs"),g=require("./mainstack-design-system401.cjs"),C=require("./mainstack-design-system402.cjs"),v=require("./mainstack-design-system403.cjs");require("./mainstack-design-system404.cjs");require("./mainstack-design-system405.cjs");const z=({className:w,children:B,previewImgSrc:f,previewId:r,isPlaceholder:N,onClick:k,...U})=>{const{values:a,maxFiles:l,accept:D,maxSize:m,onValuesChange:u,onError:s,setMainPreviewFile:n,mainPreviewFile:d}=T.useImageUploaderContext(),[O,y]=b.useState(!1),j=d?.id===r,P=b.useCallback(()=>{const o=[...a],i=o.findIndex(p=>p.id===r),_=d?.id===r;i>-1&&(o.splice(i,1),u(o),_&&n(o[0]||null))},[u,r,n,a,d]),M=b.useCallback(async(o,i)=>{const _=a.length,p=(l||0)-_;if(o.length>p||i.length>0){if(s){if(o.length>p||i.some(t=>t.errors.some(I=>I.code==="too-many-files")))return s(new Error(`You can only upload a maximum of ${l} images.`));if(i.some(t=>t.errors.some(I=>I.code==="file-too-large"))){const t=m?(m/1048576).toFixed(0):"0";return s(new Error(`Image size exceeds the ${t}MB limit.`))}return s(new Error("Invalid image type or criteria."))}return}try{const h=await c.generateImageFilePreview(o),t=[...a,...h];u(t),d||n(t[t.length-1]||null)}catch(h){s&&s(h)}},[a,l,m,u,s,d,n]);return B||(N?e.jsx(A.DropzoneUploadArea,{"data-slot":"image-uploader-preview-item-placeholder",className:"mds:w-fit",noDrag:!0,accept:D,maxFiles:l,maxSize:m,onDrop:M,children:e.jsx("button",{className:c.cn("mds:border mds:border-dashed mds:border-border-interactive-neutral mds:rounded-16 mds:h-88 mds:shrink-0 mds:w-117 mds:flex mds:justify-center mds:items-center mds:cursor-pointer mds:hover:bg-interactive-secondary",w),onClick:k,...U,children:e.jsx(S,{variant:"filled"})})}):e.jsxs("div",{"data-slot":"image-uploader-preview-item","data-active-preview":j,className:c.cn("mds:relative mds:h-88 mds:rounded-16 mds:shrink-0 mds:w-117 mds:overflow-hidden mds:cursor-pointer mds:data-[active-preview=true]:outline-2 mds:data-[active-preview=true]:outline-offset-2 mds:data-[active-preview=true]:outline-border-interactive-neutral-active"),children:[e.jsx("img",{className:c.cn("mds:object-cover mds:h-full mds:w-full ",w),src:f,alt:`Image uploaded with id ${r}`,onClick:()=>{j||n({id:r,previewSrc:f})}}),j?e.jsx(v.ButtonRoot,{className:"mds:absolute mds:top-4 mds:right-4",size:"tiny",variant:"secondary",rounded:"sm",iconOnly:!0,onClick:o=>{o.stopPropagation(),P()},children:e.jsx(g.ButtonIcon,{children:e.jsx(q,{className:"mds:size-16 mds:text-interactive-error"})})}):e.jsxs(x.Popover,{open:O,onOpenChange:y,children:[e.jsx(x.PopoverTrigger,{asChild:!0,children:e.jsx(v.ButtonRoot,{className:"mds:absolute mds:top-4 mds:right-4",size:"tiny",variant:"secondary",rounded:"sm",iconOnly:!0,onClick:o=>o.stopPropagation(),children:e.jsx(g.ButtonIcon,{children:e.jsx(L,{className:"mds:size-16"})})})}),e.jsx(x.PopoverPortal,{children:e.jsxs(x.PopoverContent,{side:"bottom",sideOffset:2,align:"end",className:c.cn("mds:flex mds:flex-col mds:p-8 mds:bg-surface-neutral-l1 mds:rounded-18 mds:will-change-transform mds:data-[state=open]:animate-content-fade-in mds:animate-content-fade-out "),children:[e.jsxs(v.ButtonRoot,{onClick:()=>{n({id:r,previewSrc:f}),y(!1)},size:"xs",variant:"ghost",children:[e.jsx(g.ButtonIcon,{children:e.jsx(R,{className:"mds:size-20 mds:text-tertiary"})}),e.jsx(C.ButtonLabel,{children:"Set as cover image"})]}),e.jsxs(v.ButtonRoot,{className:"mds:justify-start ",size:"xs",variant:"ghost",onClick:P,children:[e.jsx(g.ButtonIcon,{children:e.jsx(q,{className:"mds:size-20 mds:text-interactive-error"})}),e.jsx(C.ButtonLabel,{className:" mds:text-interactive-error",children:"Delete"})]})]})})]})]}))};z.displayName="ImageUploaderPreviewItem";exports.ImageUploaderPreviewItem=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),I=require("react"),c=require("./utils-s-0cOrOT.cjs");require("./mainstack-design-system366.cjs");const E=require("./mainstack-design-system55.cjs"),L=require("./mainstack-design-system225.cjs"),R=require("./mainstack-design-system241.cjs"),q=require("./mainstack-design-system286.cjs");require("./player-CocaNyQC.cjs");const T=require("./mainstack-design-system25.cjs"),A=require("./mainstack-design-system629.cjs"),h=require("./index-4R9KShCu.cjs"),x=require("./mainstack-design-system401.cjs"),C=require("./mainstack-design-system402.cjs"),v=require("./mainstack-design-system403.cjs");require("./mainstack-design-system404.cjs");require("./mainstack-design-system405.cjs");const z=({className:w,children:B,previewImgSrc:f,previewId:t,isPlaceholder:N,onClick:k,...U})=>{const{values:a,maxFiles:l,accept:D,maxSize:m,onValuesChange:u,onError:s,setMainPreviewFile:n,mainPreviewFile:d,isError:O}=T.useImageUploaderContext(),[M,y]=I.useState(!1),j=d?.id===t,P=I.useCallback(()=>{const r=[...a],i=r.findIndex(p=>p.id===t),_=d?.id===t;i>-1&&(r.splice(i,1),u(r),_&&n(r[0]||null))},[u,t,n,a,d]),S=I.useCallback(async(r,i)=>{const _=a.length,p=(l||0)-_;if(r.length>p||i.length>0){if(s){if(r.length>p||i.some(o=>o.errors.some(b=>b.code==="too-many-files")))return s(new Error(`You can only upload a maximum of ${l} images.`));if(i.some(o=>o.errors.some(b=>b.code==="file-too-large"))){const o=m?(m/1048576).toFixed(0):"0";return s(new Error(`Image size exceeds the ${o}MB limit.`))}return s(new Error("Invalid image type or criteria."))}return}try{const g=await c.generateImageFilePreview(r),o=[...a,...g];u(o),d||n(o[o.length-1]||null)}catch(g){s&&s(g)}},[a,l,m,u,s,d,n]);return B||(N?e.jsx(A.DropzoneUploadArea,{"data-slot":"image-uploader-preview-item-placeholder",className:"mds:w-fit",noDrag:!0,accept:D,maxFiles:l,maxSize:m,onDrop:S,children:e.jsx("button",{className:c.cn("mds:border mds:border-dashed mds:border-border-interactive-neutral mds:rounded-16 mds:h-88 mds:shrink-0 mds:w-117 mds:flex mds:justify-center mds:items-center mds:cursor-pointer mds:hover:bg-interactive-secondary",O&&"mds:ring-2 mds:bg-surface-error-l1 mds:ring-border-surface-error-l1",w),onClick:k,...U,children:e.jsx(E,{variant:"filled"})})}):e.jsxs("div",{"data-slot":"image-uploader-preview-item","data-active-preview":j,className:c.cn("mds:relative mds:h-88 mds:rounded-16 mds:shrink-0 mds:w-117 mds:overflow-hidden mds:cursor-pointer mds:data-[active-preview=true]:outline-2 mds:data-[active-preview=true]:outline-offset-2 mds:data-[active-preview=true]:outline-border-interactive-neutral-active"),children:[e.jsx("img",{className:c.cn("mds:object-cover mds:h-full mds:w-full ",w),src:f,alt:`Image uploaded with id ${t}`,onClick:()=>{j||n({id:t,previewSrc:f})}}),j?e.jsx(v.ButtonRoot,{className:"mds:absolute mds:top-4 mds:right-4",size:"tiny",variant:"secondary",rounded:"sm",iconOnly:!0,onClick:r=>{r.stopPropagation(),P()},children:e.jsx(x.ButtonIcon,{children:e.jsx(q,{className:"mds:size-16 mds:text-interactive-error"})})}):e.jsxs(h.Popover,{open:M,onOpenChange:y,children:[e.jsx(h.PopoverTrigger,{asChild:!0,children:e.jsx(v.ButtonRoot,{className:"mds:absolute mds:top-4 mds:right-4",size:"tiny",variant:"secondary",rounded:"sm",iconOnly:!0,onClick:r=>r.stopPropagation(),children:e.jsx(x.ButtonIcon,{children:e.jsx(L,{className:"mds:size-16"})})})}),e.jsx(h.PopoverPortal,{children:e.jsxs(h.PopoverContent,{side:"bottom",sideOffset:2,align:"end",className:c.cn("mds:flex mds:flex-col mds:p-8 mds:bg-surface-neutral-l1 mds:rounded-18 mds:will-change-transform mds:data-[state=open]:animate-content-fade-in mds:animate-content-fade-out "),children:[e.jsxs(v.ButtonRoot,{onClick:()=>{n({id:t,previewSrc:f}),y(!1)},size:"xs",variant:"ghost",children:[e.jsx(x.ButtonIcon,{children:e.jsx(R,{className:"mds:size-20 mds:text-tertiary"})}),e.jsx(C.ButtonLabel,{children:"Set as cover image"})]}),e.jsxs(v.ButtonRoot,{className:"mds:justify-start ",size:"xs",variant:"ghost",onClick:P,children:[e.jsx(x.ButtonIcon,{children:e.jsx(q,{className:"mds:size-20 mds:text-interactive-error"})}),e.jsx(C.ButtonLabel,{className:" mds:text-interactive-error",children:"Delete"})]})]})})]})]}))};z.displayName="ImageUploaderPreviewItem";exports.ImageUploaderPreviewItem=z;

package/dist/mainstack-design-system18.js

@@ -1,54 +1,55 @@
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { useState as U, useCallback as I } from "react";
-import { g as _, c as h } from "./utils-Z5JtG_Bc.js";
+import { useState as _, useCallback as I } from "react";
+import { g as j, c as h } from "./utils-Z5JtG_Bc.js";
 import "./mainstack-design-system366.js";
-import j from "./mainstack-design-system55.js";
-import A from "./mainstack-design-system225.js";
-import F from "./mainstack-design-system241.js";
+import A from "./mainstack-design-system55.js";
+import F from "./mainstack-design-system225.js";
+import H from "./mainstack-design-system241.js";
 import k from "./mainstack-design-system286.js";
 import "./player-Chgv-hOU.js";
-import { useImageUploaderContext as H } from "./mainstack-design-system25.js";
-import { DropzoneUploadArea as L } from "./mainstack-design-system629.js";
-import { P as $, a as V, b as Y, c as q } from "./index-RoCFhqzC.js";
-import { ButtonIcon as v } from "./mainstack-design-system401.js";
+import { useImageUploaderContext as L } from "./mainstack-design-system25.js";
+import { DropzoneUploadArea as $ } from "./mainstack-design-system629.js";
+import { P as V, a as Y, b as q, c as G } from "./index-RoCFhqzC.js";
+import { ButtonIcon as g } from "./mainstack-design-system401.js";
 import { ButtonLabel as B } from "./mainstack-design-system402.js";
-import { ButtonRoot as g } from "./mainstack-design-system403.js";
+import { ButtonRoot as v } from "./mainstack-design-system403.js";
 import "./mainstack-design-system404.js";
 import "./mainstack-design-system405.js";
-const G = ({
-  className: b,
+const J = ({
+  className: y,
   children: z,
   previewImgSrc: x,
   previewId: t,
   isPlaceholder: D,
   onClick: O,
-  ...M
+  ...E
 }) => {
   const {
     values: n,
     maxFiles: l,
-    accept: E,
+    accept: M,
     maxSize: c,
     onValuesChange: u,
     onError: s,
     setMainPreviewFile: i,
-    mainPreviewFile: m
-  } = H(), [S, C] = U(!1), w = m?.id === t, N = I(() => {
-    const r = [...n], a = r.findIndex((p) => p.id === t), P = m?.id === t;
-    a > -1 && (r.splice(a, 1), u(r), P && i(r[0] || null));
-  }, [u, t, i, n, m]), T = I(
+    mainPreviewFile: m,
+    isError: S
+  } = L(), [T, C] = _(!1), w = m?.id === t, N = I(() => {
+    const r = [...n], a = r.findIndex((p) => p.id === t), b = m?.id === t;
+    a > -1 && (r.splice(a, 1), u(r), b && i(r[0] || null));
+  }, [u, t, i, n, m]), U = I(
     async (r, a) => {
-      const P = n.length, p = (l || 0) - P;
+      const b = n.length, p = (l || 0) - b;
       if (r.length > p || a.length > 0) {
         if (s) {
           if (r.length > p || a.some(
-            (o) => o.errors.some((y) => y.code === "too-many-files")
+            (o) => o.errors.some((P) => P.code === "too-many-files")
           ))
             return s(
               new Error(`You can only upload a maximum of ${l} images.`)
             );
           if (a.some(
-            (o) => o.errors.some((y) => y.code === "file-too-large")
+            (o) => o.errors.some((P) => P.code === "file-too-large")
           )) {
             const o = c ? (c / 1048576).toFixed(0) : "0";
             return s(
@@ -60,7 +61,7 @@ const G = ({
         return;
       }
       try {
-        const f = await _(r), o = [...n, ...f];
+        const f = await j(r), o = [...n, ...f];
         u(o), m || i(o[o.length - 1] || null);
       } catch (f) {
         s && s(f);
@@ -77,25 +78,26 @@ const G = ({
     ]
   );
   return z || (D ? /* @__PURE__ */ e(
-    L,
+    $,
     {
       "data-slot": "image-uploader-preview-item-placeholder",
       className: "mds:w-fit",
       noDrag: !0,
-      accept: E,
+      accept: M,
       maxFiles: l,
       maxSize: c,
-      onDrop: T,
+      onDrop: U,
       children: /* @__PURE__ */ e(
         "button",
         {
           className: h(
             "mds:border mds:border-dashed mds:border-border-interactive-neutral mds:rounded-16 mds:h-88 mds:shrink-0 mds:w-117 mds:flex mds:justify-center mds:items-center mds:cursor-pointer mds:hover:bg-interactive-secondary",
-            b
+            S && "mds:ring-2 mds:bg-surface-error-l1 mds:ring-border-surface-error-l1",
+            y
           ),
           onClick: O,
-          ...M,
-          children: /* @__PURE__ */ e(j, { variant: "filled" })
+          ...E,
+          children: /* @__PURE__ */ e(A, { variant: "filled" })
         }
       )
     }
@@ -111,7 +113,7 @@ const G = ({
         /* @__PURE__ */ e(
           "img",
           {
-            className: h("mds:object-cover mds:h-full mds:w-full ", b),
+            className: h("mds:object-cover mds:h-full mds:w-full ", y),
             src: x,
             alt: `Image uploaded with id ${t}`,
             onClick: () => {
@@ -120,7 +122,7 @@ const G = ({
           }
         ),
         w ? /* @__PURE__ */ e(
-          g,
+          v,
           {
             className: "mds:absolute mds:top-4 mds:right-4",
             size: "tiny",
@@ -130,16 +132,16 @@ const G = ({
             onClick: (r) => {
               r.stopPropagation(), N();
             },
-            children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(k, { className: "mds:size-16 mds:text-interactive-error" }) })
+            children: /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(k, { className: "mds:size-16 mds:text-interactive-error" }) })
           }
         ) : /* @__PURE__ */ d(
-          $,
+          V,
           {
-            open: S,
+            open: T,
             onOpenChange: C,
             children: [
-              /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ e(
-                g,
+              /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ e(
+                v,
                 {
                   className: "mds:absolute mds:top-4 mds:right-4",
                   size: "tiny",
@@ -147,11 +149,11 @@ const G = ({
                   rounded: "sm",
                   iconOnly: !0,
                   onClick: (r) => r.stopPropagation(),
-                  children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(A, { className: "mds:size-16" }) })
+                  children: /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(F, { className: "mds:size-16" }) })
                 }
               ) }),
-              /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ d(
-                q,
+              /* @__PURE__ */ e(q, { children: /* @__PURE__ */ d(
+                G,
                 {
                   side: "bottom",
                   sideOffset: 2,
@@ -161,7 +163,7 @@ const G = ({
                   ),
                   children: [
                     /* @__PURE__ */ d(
-                      g,
+                      v,
                       {
                         onClick: () => {
                           i({
@@ -172,20 +174,20 @@ const G = ({
                         size: "xs",
                         variant: "ghost",
                         children: [
-                          /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(F, { className: "mds:size-20 mds:text-tertiary" }) }),
+                          /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(H, { className: "mds:size-20 mds:text-tertiary" }) }),
                           /* @__PURE__ */ e(B, { children: "Set as cover image" })
                         ]
                       }
                     ),
                     /* @__PURE__ */ d(
-                      g,
+                      v,
                       {
                         className: "mds:justify-start ",
                         size: "xs",
                         variant: "ghost",
                         onClick: N,
                         children: [
-                          /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(k, { className: "mds:size-20 mds:text-interactive-error" }) }),
+                          /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(k, { className: "mds:size-20 mds:text-interactive-error" }) }),
                           /* @__PURE__ */ e(B, { className: " mds:text-interactive-error", children: "Delete" })
                         ]
                       }
@@ -200,7 +202,7 @@ const G = ({
     }
   ));
 };
-G.displayName = "ImageUploaderPreviewItem";
+J.displayName = "ImageUploaderPreviewItem";
 export {
-  G as ImageUploaderPreviewItem
+  J as ImageUploaderPreviewItem
 };

package/dist/mainstack-design-system20.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("./mainstack-design-system401.cjs");require("./mainstack-design-system402.cjs");const v=require("./mainstack-design-system403.cjs");require("./mainstack-design-system404.cjs");require("./mainstack-design-system405.cjs");require("./mainstack-design-system366.cjs");const p=require("./mainstack-design-system286.cjs");require("react");require("./player-CocaNyQC.cjs");const g=require("./utils-s-0cOrOT.cjs"),b=require("./mainstack-design-system25.cjs"),o=({className:n,children:i,...a})=>{const{mainPreviewFile:r,onValuesChange:d,values:l,setMainPreviewFile:m}=b.useImageUploaderContext();return e.jsx("div",{role:"region","data-slot":"image-uploader-dropzone","data-active-preview":!!r?.id,className:g.cn("mds:relative mds:border mds:border-dashed mds:border-border-interactive-neutral mds:rounded-20 mds:bg-surface-neutral-l1 mds:w-504 mds:data-[active-preview=true]:overflow-hidden  mds:h-378 mds:cursor-pointer mds:hover:bg-interactive-secondary mds:data-dragging:border-border-interactive-neutral  mds:active:ring-2 mds:active:ring-border-interactive-neutral-pressed ",n),...a,children:r?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:r.previewSrc,alt:"Image Uploader Main Preview image ",className:"mds:absolute mds:top-0 mds:left-0 mds:w-full mds:h-full mds:object-cover"}),e.jsx(v.ButtonRoot,{rounded:"sm",size:"tiny",status:"default",variant:"secondary",iconOnly:!0,className:"mds:absolute mds:right-20 mds:top-20 mds:z-10",onClick:()=>{const t=[...l],s=t.findIndex(c=>c.id===r.id);s>-1&&(t.splice(s,1),d(t),m(t[0]||null))},children:e.jsx(u.ButtonIcon,{children:e.jsx(p,{variant:"outlined",className:"mds:h-16 mds:w-16 mds:text-error"})})})]}):i})};o.displayName="ImageUploaderMainPreview";exports.ImageUploaderMainPreview=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("./mainstack-design-system401.cjs");require("./mainstack-design-system402.cjs");const g=require("./mainstack-design-system403.cjs");require("./mainstack-design-system404.cjs");require("./mainstack-design-system405.cjs");require("./mainstack-design-system366.cjs");const p=require("./mainstack-design-system286.cjs");require("react");require("./player-CocaNyQC.cjs");const b=require("./utils-s-0cOrOT.cjs"),w=require("./mainstack-design-system25.cjs"),o=({className:i,children:n,...a})=>{const{mainPreviewFile:r,onValuesChange:d,values:l,setMainPreviewFile:m,isError:c}=w.useImageUploaderContext();return e.jsx("div",{role:"region","data-slot":"image-uploader-dropzone","data-active-preview":!!r?.id,className:b.cn("mds:relative mds:border mds:border-dashed mds:border-border-interactive-neutral mds:rounded-20 mds:bg-surface-neutral-l1 mds:w-504 mds:data-[active-preview=true]:overflow-hidden  mds:h-378 mds:cursor-pointer mds:hover:bg-interactive-secondary mds:data-dragging:border-border-interactive-neutral  mds:active:ring-2 mds:active:ring-border-interactive-neutral-pressed ",c&&"mds:ring-2 mds:bg-surface-error-l1 mds:ring-border-surface-error-l1",i),...a,children:r?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:r.previewSrc,alt:"Image Uploader Main Preview image ",className:"mds:absolute mds:top-0 mds:left-0 mds:w-full mds:h-full mds:object-cover"}),e.jsx(g.ButtonRoot,{rounded:"sm",size:"tiny",status:"default",variant:"secondary",iconOnly:!0,className:"mds:absolute mds:right-20 mds:top-20 mds:z-10",onClick:()=>{const s=[...l],t=s.findIndex(u=>u.id===r.id);t>-1&&(s.splice(t,1),d(s),m(s[0]||null))},children:e.jsx(v.ButtonIcon,{children:e.jsx(p,{variant:"outlined",className:"mds:h-16 mds:w-16 mds:text-error"})})})]}):n})};o.displayName="ImageUploaderMainPreview";exports.ImageUploaderMainPreview=o;

package/dist/mainstack-design-system20.js

@@ -1,33 +1,40 @@
-import { jsx as e, jsxs as c, Fragment as p } from "react/jsx-runtime";
-import { ButtonIcon as u } from "./mainstack-design-system401.js";
+import { jsx as e, jsxs as p, Fragment as u } from "react/jsx-runtime";
+import { ButtonIcon as v } from "./mainstack-design-system401.js";
 import "./mainstack-design-system402.js";
-import { ButtonRoot as v } from "./mainstack-design-system403.js";
+import { ButtonRoot as g } from "./mainstack-design-system403.js";
 import "./mainstack-design-system404.js";
 import "./mainstack-design-system405.js";
 import "./mainstack-design-system366.js";
-import g from "./mainstack-design-system286.js";
+import f from "./mainstack-design-system286.js";
 import "react";
 import "./player-Chgv-hOU.js";
-import { c as f } from "./utils-Z5JtG_Bc.js";
+import { c as b } from "./utils-Z5JtG_Bc.js";
 import { useImageUploaderContext as h } from "./mainstack-design-system25.js";
 const w = ({
-  className: t,
-  children: a,
-  ...o
+  className: o,
+  children: s,
+  ...a
 }) => {
-  const { mainPreviewFile: r, onValuesChange: s, values: m, setMainPreviewFile: n } = h();
+  const {
+    mainPreviewFile: r,
+    onValuesChange: t,
+    values: m,
+    setMainPreviewFile: n,
+    isError: l
+  } = h();
   return /* @__PURE__ */ e(
     "div",
     {
       role: "region",
       "data-slot": "image-uploader-dropzone",
       "data-active-preview": !!r?.id,
-      className: f(
+      className: b(
         "mds:relative mds:border mds:border-dashed mds:border-border-interactive-neutral mds:rounded-20 mds:bg-surface-neutral-l1 mds:w-504 mds:data-[active-preview=true]:overflow-hidden  mds:h-378 mds:cursor-pointer mds:hover:bg-interactive-secondary mds:data-dragging:border-border-interactive-neutral  mds:active:ring-2 mds:active:ring-border-interactive-neutral-pressed ",
-        t
+        l && "mds:ring-2 mds:bg-surface-error-l1 mds:ring-border-surface-error-l1",
+        o
       ),
-      ...o,
-      children: r ? /* @__PURE__ */ c(p, { children: [
+      ...a,
+      children: r ? /* @__PURE__ */ p(u, { children: [
         /* @__PURE__ */ e(
           "img",
           {
@@ -37,7 +44,7 @@ const w = ({
           }
         ),
         /* @__PURE__ */ e(
-          v,
+          g,
           {
             rounded: "sm",
             size: "tiny",
@@ -46,13 +53,13 @@ const w = ({
             iconOnly: !0,
             className: "mds:absolute mds:right-20 mds:top-20 mds:z-10",
             onClick: () => {
-              const i = [...m], d = i.findIndex(
-                (l) => l.id === r.id
+              const d = [...m], i = d.findIndex(
+                (c) => c.id === r.id
               );
-              d > -1 && (i.splice(d, 1), s(i), n(i[0] || null));
+              i > -1 && (d.splice(i, 1), t(d), n(d[0] || null));
             },
-            children: /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
-              g,
+            children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(
+              f,
               {
                 variant: "outlined",
                 className: "mds:h-16 mds:w-16 mds:text-error"
@@ -60,7 +67,7 @@ const w = ({
             ) })
           }
         )
-      ] }) : a
+      ] }) : s
     }
   );
 };

package/dist/mainstack-design-system27.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),j=require("./mainstack-design-system35.cjs"),z=require("./index-C8aODXfJ.cjs"),S=require("./utils-s-0cOrOT.cjs"),o=require("react"),p=({values:m,onValuesChange:f,defaultValues:s=[],isDisabled:r,accept:C={"file/*":[".pdf",".txt",".docx"]},maxFiles:a=4,maxSize:g,multiple:i=!0,onError:t,children:y,className:b,...h})=>{const[n,d]=z.useControllableState({prop:m,defaultProp:s,onChange:f}),[v,l]=o.useState(null),x=o.useCallback(e=>{l(null),d(e)},[d]),U=o.useCallback(e=>{const u=e instanceof Error?e.message:"An error occurred";l(u),t&&t(e)},[t]),F=!i||n.length>=a,q=n.length>0&&F,R=o.Children.map(y,e=>o.isValidElement(e)&&e.type?.displayName==="FileUploaderDropzone"&&q?null:e);return c.jsx(j.FileUploaderContext.Provider,{value:{values:n,defaultValues:s,isDisabled:r,accept:C,maxFiles:a,maxSize:g,multiple:i,error:v,setError:l,onValuesChange:x,onError:U},children:c.jsx("div",{"data-disabled":r,"aria-disabled":r,"data-slot":"file-uploader-root",className:S.cn("mds:relative mds:flex mds:flex-col mds:gap-12 mds:body-font-family",b),...h,children:R})})};p.displayName="FileUploaderRoot";exports.FileUploaderRoot=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),z=require("./mainstack-design-system35.cjs"),S=require("./index-C8aODXfJ.cjs"),_=require("./utils-s-0cOrOT.cjs"),o=require("react"),m=({values:f,onValuesChange:C,defaultValues:a=[],isDisabled:r,accept:g={"file/*":[".pdf",".txt",".docx"]},maxFiles:s=4,maxSize:y,multiple:d=!0,onError:t,children:b,className:h,isError:i,...v})=>{const[n,u]=S.useControllableState({prop:f,defaultProp:a,onChange:C}),[x,l]=o.useState(null),U=o.useCallback(e=>{l(null),u(e)},[u]),F=o.useCallback(e=>{const c=e instanceof Error?e.message:"An error occurred";l(c),t&&t(e)},[t]),q=!d||n.length>=s,R=n.length>0&&q,j=o.Children.map(b,e=>o.isValidElement(e)&&e.type?.displayName==="FileUploaderDropzone"&&R?null:e);return p.jsx(z.FileUploaderContext.Provider,{value:{values:n,defaultValues:a,isDisabled:r,accept:g,maxFiles:s,maxSize:y,multiple:d,error:x,setError:l,onValuesChange:U,onError:F,isError:i},children:p.jsx("div",{"data-disabled":r,"aria-disabled":r,"data-error":i,"data-slot":"file-uploader-root",className:_.cn("mds:relative mds:flex mds:flex-col mds:gap-12 mds:body-font-family",h),...v,children:j})})};m.displayName="FileUploaderRoot";exports.FileUploaderRoot=m;