mainstack-design-system 1.4.1 → 1.5.0

package/dist/mainstack-design-system16.cjs

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

package/dist/mainstack-design-system16.js

@@ -3,21 +3,21 @@ import { jsx as a } from "react/jsx-runtime";
 import { useState as u } from "react";
 import { ImageUploaderContext as x } from "./mainstack-design-system24.js";
 import { u as C } from "./index-437EL2iq.js";
-import { c as h } from "./utils-DnnzGb1L.js";
+import { c as h } from "./utils-B-DK6jJO.js";
 const P = ({
   values: r,
   onValuesChange: t,
   defaultValues: e = [],
   isDisabled: o,
-  accept: l = { "image/png": [".png", ".jpeg", ".jpg", ".webp"] },
-  maxFiles: n = 4,
-  maxSize: p,
-  onError: m,
+  accept: m = { "image/png": [".png", ".jpeg", ".jpg", ".webp"] },
+  maxFiles: l = 4,
+  maxSize: n,
+  onError: p,
   children: i,
-  className: g,
-  ...s
+  className: s,
+  ...d
 }) => {
-  const [d, c] = C({
+  const [g, c] = C({
     prop: r,
     defaultProp: e,
     onChange: t
@@ -28,16 +28,16 @@ const P = ({
     x.Provider,
     {
       value: {
-        values: d,
+        values: g,
         defaultValues: e,
         mainPreviewFile: v,
         isDisabled: o,
-        accept: l,
-        maxFiles: n,
-        maxSize: p,
+        accept: m,
+        maxFiles: l,
+        maxSize: n,
         setMainPreviewFile: f,
         onValuesChange: c,
-        onError: m
+        onError: p
       },
       children: /* @__PURE__ */ a(
         "div",
@@ -46,10 +46,10 @@ const P = ({
           "aria-disabled": o,
           "data-slot": "image-uploader-root",
           className: h(
-            "relative flex flex-col gap-12 body-font-family",
-            g
+            "mds:relative mds:flex mds:flex-col mds:gap-12 body-font-family",
+            s
           ),
-          ...s,
+          ...d,
           children: i
         }
       )

package/dist/mainstack-design-system17.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("./utils-FBJ8OQ9f.cjs"),c=require("./mainstack-design-system18.cjs"),p=require("./mainstack-design-system24.cjs"),o=({children:l,className:t,...i})=>{const{values:e,mainPreviewFile:s,maxFiles:r,setMainPreviewFile:n}=p.useImageUploaderContext(),d=r&&e?.length>0?e?.length<r:!0;return a.jsxs("div",{role:"list","data-slot":"image-uploader-preview",className:m.cn("flex items-center gap-12",t),...i,children:[l({values:e,mainPreviewFile:s,setMainPreviewFile:n}),d&&a.jsx(c.ImageUploaderPreviewItem,{isPlaceholder:!0})]})};o.displayName="ImageUploaderPreview";exports.ImageUploaderPreview=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("./utils-B6I16BNR.cjs"),c=require("./mainstack-design-system18.cjs"),p=require("./mainstack-design-system24.cjs"),o=({children:l,className:t,...i})=>{const{values:e,mainPreviewFile:s,maxFiles:r,setMainPreviewFile:n}=p.useImageUploaderContext(),d=r&&e?.length>0?e?.length<r:!0;return a.jsxs("div",{role:"list","data-slot":"image-uploader-preview",className:m.cn("mds:flex mds:items-center mds:gap-12",t),...i,children:[l({values:e,mainPreviewFile:s,setMainPreviewFile:n}),d&&a.jsx(c.ImageUploaderPreviewItem,{isPlaceholder:!0})]})};o.displayName="ImageUploaderPreview";exports.ImageUploaderPreview=o;

package/dist/mainstack-design-system17.js

@@ -1,6 +1,6 @@
-import { jsxs as s, jsx as n } from "react/jsx-runtime";
-import { c as p } from "./utils-DnnzGb1L.js";
-import { ImageUploaderPreviewItem as d } from "./mainstack-design-system18.js";
+import { jsxs as s, jsx as d } from "react/jsx-runtime";
+import { c as n } from "./utils-B-DK6jJO.js";
+import { ImageUploaderPreviewItem as p } from "./mainstack-design-system18.js";
 import { useImageUploaderContext as c } from "./mainstack-design-system24.js";
 const g = ({
   children: o,
@@ -13,7 +13,7 @@ const g = ({
     {
       role: "list",
       "data-slot": "image-uploader-preview",
-      className: p("flex items-center gap-12", a),
+      className: n("mds:flex mds:items-center mds:gap-12", a),
       ...i,
       children: [
         o({
@@ -21,7 +21,7 @@ const g = ({
           mainPreviewFile: l,
           setMainPreviewFile: t
         }),
-        m && /* @__PURE__ */ n(d, { isPlaceholder: !0 })
+        m && /* @__PURE__ */ d(p, { isPlaceholder: !0 })
       ]
     }
   );

package/dist/mainstack-design-system18.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),_=require("react"),c=require("./utils-FBJ8OQ9f.cjs");require("./mainstack-design-system355.cjs");const R=require("./mainstack-design-system53.cjs"),M=require("./mainstack-design-system223.cjs"),S=require("./mainstack-design-system239.cjs"),B=require("./mainstack-design-system284.cjs");require("./player-BKifgSJo.cjs");const A=require("./mainstack-design-system24.cjs"),F=require("./mainstack-design-system605.cjs"),u=require("./index-4R9KShCu.cjs"),d=require("./mainstack-design-system386.cjs"),q=require("./mainstack-design-system387.cjs"),m=require("./mainstack-design-system388.cjs");require("./mainstack-design-system389.cjs");const C=({className:j,children:b,previewImgSrc:p,previewId:o,isPlaceholder:y,onClick:z,...N})=>{const{values:r,maxFiles:h,accept:k,maxSize:U,onValuesChange:l,onError:v,setMainPreviewFile:n,mainPreviewFile:s}=A.useImageUploaderContext(),[D,I]=_.useState(!1),x=s?.id===o,P=_.useCallback(()=>{const t=[...r],a=t.findIndex(i=>i.id===o),f=s?.id===o;a>-1&&(t.splice(a,1),l(t),f&&n(t[0]||null))},[l,o,n,r,s]),O=_.useCallback(async t=>{const a=h||0,f=Math.max(0,a-r.length),i=t.slice(0,f);if(!(i.length===0||i.length>=a))try{const g=await c.generateImageFilePreview(i),w=[...r,...g];l(w),s||n(w[0]||null)}catch(g){v&&v(g)}},[s,h,l,n,r,v]);return b||(y?e.jsx(F.DropzoneUploadArea,{"data-slot":"image-uploader-preview-item-placeholder",className:"w-fit",noDrag:!0,accept:k,maxFiles:h,maxSize:U,onDrop:O,children:e.jsx("button",{className:c.cn("border border-dashed border-border-interactive-neutral rounded-16 h-88 shrink-0 w-117 flex justify-center items-center cursor-pointer hover:bg-interactive-secondary",j),onClick:z,...N,children:e.jsx(R,{variant:"filled"})})}):e.jsxs("div",{"data-slot":"image-uploader-preview-item","data-active-preview":x,className:c.cn("relative h-88 rounded-16 shrink-0 w-117 overflow-hidden cursor-pointer data-[active-preview=true]:outline-2 data-[active-preview=true]:outline-offset-2 data-[active-preview=true]:outline-border-interactive-neutral-active"),children:[e.jsx("img",{className:c.cn("object-cover h-full w-full ",j),src:p,alt:`Image uploaded with id ${o}`,onClick:()=>{x||n({id:o,previewSrc:p})}}),x?e.jsx(m.ButtonRoot,{className:"absolute top-4 right-4",size:"tiny",variant:"secondary",rounded:"sm",iconOnly:!0,onClick:t=>{t.stopPropagation(),P()},children:e.jsx(d.ButtonIcon,{children:e.jsx(B,{className:"size-16 text-interactive-error"})})}):e.jsxs(u.Popover,{open:D,onOpenChange:I,children:[e.jsx(u.PopoverTrigger,{asChild:!0,children:e.jsx(m.ButtonRoot,{className:"absolute top-4 right-4",size:"tiny",variant:"secondary",rounded:"sm",iconOnly:!0,onClick:t=>t.stopPropagation(),children:e.jsx(d.ButtonIcon,{children:e.jsx(M,{className:"size-16"})})})}),e.jsx(u.PopoverPortal,{children:e.jsxs(u.PopoverContent,{side:"bottom",sideOffset:2,align:"end",className:c.cn("flex flex-col p-8 bg-surface-neutral-l1 rounded-18 will-change-transform data-[state=open]:animate-content-fade-in animate-content-fade-out "),children:[e.jsxs(m.ButtonRoot,{onClick:()=>{n({id:o,previewSrc:p}),I(!1)},size:"xs",variant:"ghost",children:[e.jsx(d.ButtonIcon,{children:e.jsx(S,{className:"size-20"})}),e.jsx(q.ButtonLabel,{children:"Set as cover image"})]}),e.jsxs(m.ButtonRoot,{className:"justify-start ",size:"xs",variant:"ghost",onClick:P,children:[e.jsx(d.ButtonIcon,{children:e.jsx(B,{className:"size-20 text-interactive-error"})}),e.jsx(q.ButtonLabel,{className:" text-interactive-error",children:"Delete"})]})]})})]})]}))};C.displayName="ImageUploaderPreviewItem";exports.ImageUploaderPreviewItem=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),_=require("react"),c=require("./utils-B6I16BNR.cjs");require("./mainstack-design-system355.cjs");const R=require("./mainstack-design-system53.cjs"),M=require("./mainstack-design-system223.cjs"),S=require("./mainstack-design-system239.cjs"),B=require("./mainstack-design-system284.cjs");require("./player-BKifgSJo.cjs");const A=require("./mainstack-design-system24.cjs"),F=require("./mainstack-design-system606.cjs"),l=require("./index-4R9KShCu.cjs"),m=require("./mainstack-design-system386.cjs"),q=require("./mainstack-design-system387.cjs"),u=require("./mainstack-design-system388.cjs");require("./mainstack-design-system389.cjs");const C=({className:j,children:b,previewImgSrc:p,previewId:s,isPlaceholder:y,onClick:z,...N})=>{const{values:n,maxFiles:h,accept:k,maxSize:U,onValuesChange:d,onError:v,setMainPreviewFile:o,mainPreviewFile:r}=A.useImageUploaderContext(),[D,I]=_.useState(!1),x=r?.id===s,P=_.useCallback(()=>{const t=[...n],a=t.findIndex(i=>i.id===s),f=r?.id===s;a>-1&&(t.splice(a,1),d(t),f&&o(t[0]||null))},[d,s,o,n,r]),O=_.useCallback(async t=>{const a=h||0,f=Math.max(0,a-n.length),i=t.slice(0,f);if(!(i.length===0||i.length>=a))try{const g=await c.generateImageFilePreview(i),w=[...n,...g];d(w),r||o(w[0]||null)}catch(g){v&&v(g)}},[r,h,d,o,n,v]);return b||(y?e.jsx(F.DropzoneUploadArea,{"data-slot":"image-uploader-preview-item-placeholder",className:"mds:w-fit",noDrag:!0,accept:k,maxFiles:h,maxSize:U,onDrop:O,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",j),onClick:z,...N,children:e.jsx(R,{variant:"filled"})})}):e.jsxs("div",{"data-slot":"image-uploader-preview-item","data-active-preview":x,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 ",j),src:p,alt:`Image uploaded with id ${s}`,onClick:()=>{x||o({id:s,previewSrc:p})}}),x?e.jsx(u.ButtonRoot,{className:"mds:absolute mds:top-4 mds:right-4",size:"tiny",variant:"secondary",rounded:"sm",iconOnly:!0,onClick:t=>{t.stopPropagation(),P()},children:e.jsx(m.ButtonIcon,{children:e.jsx(B,{className:"mds:size-16 mds:text-interactive-error"})})}):e.jsxs(l.Popover,{open:D,onOpenChange:I,children:[e.jsx(l.PopoverTrigger,{asChild:!0,children:e.jsx(u.ButtonRoot,{className:"mds:absolute mds:top-4 mds:right-4",size:"tiny",variant:"secondary",rounded:"sm",iconOnly:!0,onClick:t=>t.stopPropagation(),children:e.jsx(m.ButtonIcon,{children:e.jsx(M,{className:"mds:size-16"})})})}),e.jsx(l.PopoverPortal,{children:e.jsxs(l.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(u.ButtonRoot,{onClick:()=>{o({id:s,previewSrc:p}),I(!1)},size:"xs",variant:"ghost",children:[e.jsx(m.ButtonIcon,{children:e.jsx(S,{className:"mds:size-20"})}),e.jsx(q.ButtonLabel,{children:"Set as cover image"})]}),e.jsxs(u.ButtonRoot,{className:"mds:justify-start ",size:"xs",variant:"ghost",onClick:P,children:[e.jsx(m.ButtonIcon,{children:e.jsx(B,{className:"mds:size-20 mds:text-interactive-error"})}),e.jsx(q.ButtonLabel,{className:" mds:text-interactive-error",children:"Delete"})]})]})})]})]}))};C.displayName="ImageUploaderPreviewItem";exports.ImageUploaderPreviewItem=C;

package/dist/mainstack-design-system18.js

@@ -1,6 +1,6 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import { useState as M, useCallback as N } from "react";
-import { g as U, c as d } from "./utils-DnnzGb1L.js";
+import { g as U, c as l } from "./utils-B-DK6jJO.js";
 import "./mainstack-design-system355.js";
 import A from "./mainstack-design-system53.js";
 import H from "./mainstack-design-system223.js";
@@ -8,9 +8,9 @@ import S from "./mainstack-design-system239.js";
 import y from "./mainstack-design-system284.js";
 import "./player-DSenNqFV.js";
 import { useImageUploaderContext as T } from "./mainstack-design-system24.js";
-import { DropzoneUploadArea as E } from "./mainstack-design-system605.js";
+import { DropzoneUploadArea as E } from "./mainstack-design-system606.js";
 import { P as L, a as R, b as V, c as $ } from "./index-RoCFhqzC.js";
-import { ButtonIcon as m } from "./mainstack-design-system386.js";
+import { ButtonIcon as c } from "./mainstack-design-system386.js";
 import { ButtonLabel as k } from "./mainstack-design-system387.js";
 import { ButtonRoot as p } from "./mainstack-design-system388.js";
 import "./mainstack-design-system389.js";
@@ -24,36 +24,36 @@ const q = ({
   ...I
 }) => {
   const {
-    values: i,
+    values: s,
     maxFiles: f,
     accept: O,
     maxSize: j,
-    onValuesChange: c,
+    onValuesChange: m,
     onError: h,
     setMainPreviewFile: o,
-    mainPreviewFile: a
-  } = T(), [B, w] = M(!1), v = a?.id === t, C = N(() => {
-    const r = [...i], n = r.findIndex((s) => s.id === t), g = a?.id === t;
-    n > -1 && (r.splice(n, 1), c(r), g && o(r[0] || null));
-  }, [c, t, o, i, a]), F = N(
+    mainPreviewFile: i
+  } = T(), [B, w] = M(!1), v = i?.id === t, C = N(() => {
+    const r = [...s], a = r.findIndex((n) => n.id === t), g = i?.id === t;
+    a > -1 && (r.splice(a, 1), m(r), g && o(r[0] || null));
+  }, [m, t, o, s, i]), F = N(
     async (r) => {
-      const n = f || 0, g = Math.max(0, n - i.length), s = r.slice(0, g);
-      if (!(s.length === 0 || s.length >= n))
+      const a = f || 0, g = Math.max(0, a - s.length), n = r.slice(0, g);
+      if (!(n.length === 0 || n.length >= a))
         try {
           const x = await U(
-            s
-          ), z = [...i, ...x];
-          c(z), a || o(z[0] || null);
+            n
+          ), z = [...s, ...x];
+          m(z), i || o(z[0] || null);
         } catch (x) {
           h && h(x);
         }
     },
     [
-      a,
+      i,
       f,
-      c,
+      m,
       o,
-      i,
+      s,
       h
     ]
   );
@@ -61,7 +61,7 @@ const q = ({
     E,
     {
       "data-slot": "image-uploader-preview-item-placeholder",
-      className: "w-fit",
+      className: "mds:w-fit",
       noDrag: !0,
       accept: O,
       maxFiles: f,
@@ -70,8 +70,8 @@ const q = ({
       children: /* @__PURE__ */ e(
         "button",
         {
-          className: d(
-            "border border-dashed border-border-interactive-neutral rounded-16 h-88 shrink-0 w-117 flex justify-center items-center cursor-pointer hover:bg-interactive-secondary",
+          className: l(
+            "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",
             P
           ),
           onClick: D,
@@ -80,19 +80,19 @@ const q = ({
         }
       )
     }
-  ) : /* @__PURE__ */ l(
+  ) : /* @__PURE__ */ d(
     "div",
     {
       "data-slot": "image-uploader-preview-item",
       "data-active-preview": v,
-      className: d(
-        "relative h-88 rounded-16 shrink-0 w-117 overflow-hidden cursor-pointer data-[active-preview=true]:outline-2 data-[active-preview=true]:outline-offset-2 data-[active-preview=true]:outline-border-interactive-neutral-active"
+      className: l(
+        "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: [
         /* @__PURE__ */ e(
           "img",
           {
-            className: d("object-cover h-full w-full ", P),
+            className: l("mds:object-cover mds:h-full mds:w-full ", P),
             src: u,
             alt: `Image uploaded with id ${t}`,
             onClick: () => {
@@ -103,7 +103,7 @@ const q = ({
         v ? /* @__PURE__ */ e(
           p,
           {
-            className: "absolute top-4 right-4",
+            className: "mds:absolute mds:top-4 mds:right-4",
             size: "tiny",
             variant: "secondary",
             rounded: "sm",
@@ -111,9 +111,9 @@ const q = ({
             onClick: (r) => {
               r.stopPropagation(), C();
             },
-            children: /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(y, { className: "size-16 text-interactive-error" }) })
+            children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(y, { className: "mds:size-16 mds:text-interactive-error" }) })
           }
-        ) : /* @__PURE__ */ l(
+        ) : /* @__PURE__ */ d(
           L,
           {
             open: B,
@@ -122,26 +122,26 @@ const q = ({
               /* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ e(
                 p,
                 {
-                  className: "absolute top-4 right-4",
+                  className: "mds:absolute mds:top-4 mds:right-4",
                   size: "tiny",
                   variant: "secondary",
                   rounded: "sm",
                   iconOnly: !0,
                   onClick: (r) => r.stopPropagation(),
-                  children: /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(H, { className: "size-16" }) })
+                  children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(H, { className: "mds:size-16" }) })
                 }
               ) }),
-              /* @__PURE__ */ e(V, { children: /* @__PURE__ */ l(
+              /* @__PURE__ */ e(V, { children: /* @__PURE__ */ d(
                 $,
                 {
                   side: "bottom",
                   sideOffset: 2,
                   align: "end",
-                  className: d(
-                    "flex flex-col p-8 bg-surface-neutral-l1 rounded-18 will-change-transform data-[state=open]:animate-content-fade-in animate-content-fade-out "
+                  className: l(
+                    "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: [
-                    /* @__PURE__ */ l(
+                    /* @__PURE__ */ d(
                       p,
                       {
                         onClick: () => {
@@ -153,21 +153,21 @@ const q = ({
                         size: "xs",
                         variant: "ghost",
                         children: [
-                          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(S, { className: "size-20" }) }),
+                          /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(S, { className: "mds:size-20" }) }),
                           /* @__PURE__ */ e(k, { children: "Set as cover image" })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ l(
+                    /* @__PURE__ */ d(
                       p,
                       {
-                        className: "justify-start ",
+                        className: "mds:justify-start ",
                         size: "xs",
                         variant: "ghost",
                         onClick: C,
                         children: [
-                          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(y, { className: "size-20 text-interactive-error" }) }),
-                          /* @__PURE__ */ e(k, { className: " text-interactive-error", children: "Delete" })
+                          /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(y, { className: "mds:size-20 mds:text-interactive-error" }) }),
+                          /* @__PURE__ */ e(k, { className: " mds:text-interactive-error", children: "Delete" })
                         ]
                       }
                     )

package/dist/mainstack-design-system19.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("react"),a=require("./utils-FBJ8OQ9f.cjs"),i=require("./mainstack-design-system386.cjs"),c=require("./mainstack-design-system387.cjs"),l=require("./mainstack-design-system388.cjs");require("./mainstack-design-system389.cjs");require("./mainstack-design-system355.cjs");const v=require("./mainstack-design-system107.cjs"),B=require("./mainstack-design-system129.cjs");require("./player-BKifgSJo.cjs");const h=require("./mainstack-design-system24.cjs"),b=require("./mainstack-design-system605.cjs"),u=({className:d,onLibrarySelect:m,children:t,...p})=>{const{accept:x,maxFiles:_,maxSize:g,onValuesChange:r,onError:n,setMainPreviewFile:s}=h.useImageUploaderContext(),j=q.useCallback(async I=>{try{const o=await a.generateImageFilePreview(I);r(o),s(o[0])}catch(o){n&&n(o)}},[r,s,n]);return e.jsx("div",{"data-slot":"image-uploader-dropzone-actions",className:a.cn("flex absolute left-1/2 -translate-x-1/2 bottom-24 justify-center items-center gap-8",d),...p,children:t||e.jsxs(e.Fragment,{children:[e.jsx(b.DropzoneUploadArea,{onDrop:j,accept:x,maxFiles:_,maxSize:g,noDrag:!0,asChild:!0,children:e.jsxs(l.ButtonRoot,{variant:"secondary",rounded:"sm",size:"xs",children:[e.jsx(i.ButtonIcon,{children:e.jsx(B,{})}),e.jsx(c.ButtonLabel,{children:"Upload from device"})]})}),e.jsxs(l.ButtonRoot,{variant:"secondary",size:"xs",rounded:"sm",onClick:m,children:[e.jsx(i.ButtonIcon,{children:e.jsx(v,{})}),e.jsx(c.ButtonLabel,{children:"Select from library"})]})]})})};u.displayName="ImageUploaderMainPreviewActions";exports.ImageUploaderMainPreviewActions=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("react"),a=require("./utils-B6I16BNR.cjs"),i=require("./mainstack-design-system386.cjs"),c=require("./mainstack-design-system387.cjs"),l=require("./mainstack-design-system388.cjs");require("./mainstack-design-system389.cjs");require("./mainstack-design-system355.cjs");const v=require("./mainstack-design-system107.cjs"),B=require("./mainstack-design-system129.cjs");require("./player-BKifgSJo.cjs");const h=require("./mainstack-design-system24.cjs"),b=require("./mainstack-design-system606.cjs"),d=({className:u,onLibrarySelect:m,children:t,...p})=>{const{accept:x,maxFiles:_,maxSize:g,onValuesChange:r,onError:n,setMainPreviewFile:s}=h.useImageUploaderContext(),j=q.useCallback(async I=>{try{const o=await a.generateImageFilePreview(I);r(o),s(o[0])}catch(o){n&&n(o)}},[r,s,n]);return e.jsx("div",{"data-slot":"image-uploader-dropzone-actions",className:a.cn("mds:flex mds:absolute mds:left-1/2 mds:-translate-x-1/2 mds:bottom-24 mds:justify-center mds:items-center mds:gap-8",u),...p,children:t||e.jsxs(e.Fragment,{children:[e.jsx(b.DropzoneUploadArea,{onDrop:j,accept:x,maxFiles:_,maxSize:g,noDrag:!0,asChild:!0,children:e.jsxs(l.ButtonRoot,{variant:"secondary",rounded:"sm",size:"xs",children:[e.jsx(i.ButtonIcon,{children:e.jsx(B,{})}),e.jsx(c.ButtonLabel,{children:"Upload from device"})]})}),e.jsxs(l.ButtonRoot,{variant:"secondary",size:"xs",rounded:"sm",onClick:m,children:[e.jsx(i.ButtonIcon,{children:e.jsx(v,{})}),e.jsx(c.ButtonLabel,{children:"Select from library"})]})]})})};d.displayName="ImageUploaderMainPreviewActions";exports.ImageUploaderMainPreviewActions=d;

package/dist/mainstack-design-system19.js

@@ -1,20 +1,20 @@
 'use client';
 import { jsx as e, jsxs as t, Fragment as x } from "react/jsx-runtime";
 import { useCallback as y } from "react";
-import { g as I, c as w } from "./utils-DnnzGb1L.js";
-import { ButtonIcon as m } from "./mainstack-design-system386.js";
+import { g as I, c as w } from "./utils-B-DK6jJO.js";
+import { ButtonIcon as n } from "./mainstack-design-system386.js";
 import { ButtonLabel as s } from "./mainstack-design-system387.js";
-import { ButtonRoot as c } from "./mainstack-design-system388.js";
+import { ButtonRoot as d } from "./mainstack-design-system388.js";
 import "./mainstack-design-system389.js";
 import "./mainstack-design-system355.js";
 import C from "./mainstack-design-system107.js";
 import U from "./mainstack-design-system129.js";
 import "./player-DSenNqFV.js";
 import { useImageUploaderContext as b } from "./mainstack-design-system24.js";
-import { DropzoneUploadArea as z } from "./mainstack-design-system605.js";
+import { DropzoneUploadArea as z } from "./mainstack-design-system606.js";
 const D = ({
-  className: l,
-  onLibrarySelect: d,
+  className: c,
+  onLibrarySelect: l,
   children: i,
   ...p
 }) => {
@@ -24,25 +24,25 @@ const D = ({
     maxSize: g,
     onValuesChange: a,
     onError: o,
-    setMainPreviewFile: n
+    setMainPreviewFile: m
   } = b(), h = y(
     async (v) => {
       try {
         const r = await I(v);
-        a(r), n(r[0]);
+        a(r), m(r[0]);
       } catch (r) {
         o && o(r);
       }
     },
-    [a, n, o]
+    [a, m, o]
   );
   return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "image-uploader-dropzone-actions",
       className: w(
-        "flex absolute left-1/2 -translate-x-1/2 bottom-24 justify-center items-center gap-8",
-        l
+        "mds:flex mds:absolute mds:left-1/2 mds:-translate-x-1/2 mds:bottom-24 mds:justify-center mds:items-center mds:gap-8",
+        c
       ),
       ...p,
       children: i || /* @__PURE__ */ t(x, { children: [
@@ -55,21 +55,21 @@ const D = ({
             maxSize: g,
             noDrag: !0,
             asChild: !0,
-            children: /* @__PURE__ */ t(c, { variant: "secondary", rounded: "sm", size: "xs", children: [
-              /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(U, {}) }),
+            children: /* @__PURE__ */ t(d, { variant: "secondary", rounded: "sm", size: "xs", children: [
+              /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(U, {}) }),
               /* @__PURE__ */ e(s, { children: "Upload from device" })
             ] })
           }
         ),
         /* @__PURE__ */ t(
-          c,
+          d,
           {
             variant: "secondary",
             size: "xs",
             rounded: "sm",
-            onClick: d,
+            onClick: l,
             children: [
-              /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(C, {}) }),
+              /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(C, {}) }),
               /* @__PURE__ */ e(s, { children: "Select from library" })
             ]
           }

package/dist/mainstack-design-system20.cjs

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

package/dist/mainstack-design-system20.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as m, Fragment as p } from "react/jsx-runtime";
+import { jsx as e, jsxs as c, Fragment as p } from "react/jsx-runtime";
 import { ButtonIcon as u } from "./mainstack-design-system386.js";
 import "./mainstack-design-system387.js";
 import { ButtonRoot as v } from "./mainstack-design-system388.js";
@@ -7,14 +7,14 @@ import "./mainstack-design-system355.js";
 import g from "./mainstack-design-system284.js";
 import "react";
 import "./player-DSenNqFV.js";
-import { c as f } from "./utils-DnnzGb1L.js";
+import { c as f } from "./utils-B-DK6jJO.js";
 import { useImageUploaderContext as h } from "./mainstack-design-system24.js";
 const w = ({
-  className: t,
-  children: o,
-  ...n
+  className: a,
+  children: t,
+  ...o
 }) => {
-  const { mainPreviewFile: r, onValuesChange: l, values: d, setMainPreviewFile: s } = h();
+  const { mainPreviewFile: r, onValuesChange: s, values: m, setMainPreviewFile: n } = h();
   return /* @__PURE__ */ e(
     "div",
     {
@@ -22,17 +22,17 @@ const w = ({
       "data-slot": "image-uploader-dropzone",
       "data-active-preview": !!r?.id,
       className: f(
-        "relative border border-dashed border-border-interactive-neutral rounded-20 bg-surface-neutral-l1 w-504 data-[active-preview=true]:overflow-hidden  h-378 cursor-pointer hover:bg-interactive-secondary data-dragging:border-border-interactive-neutral  active:ring-2 active:ring-border-interactive-neutral-pressed ",
-        t
+        "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 ",
+        a
       ),
-      ...n,
-      children: r ? /* @__PURE__ */ m(p, { children: [
+      ...o,
+      children: r ? /* @__PURE__ */ c(p, { children: [
         /* @__PURE__ */ e(
           "img",
           {
             src: r.previewSrc,
             alt: "Image Uploader Main Preview image ",
-            className: "absolute top-0 left-0 w-full h-full object-cover"
+            className: "mds:absolute mds:top-0 mds:left-0 mds:w-full mds:h-full mds:object-cover"
           }
         ),
         /* @__PURE__ */ e(
@@ -43,23 +43,23 @@ const w = ({
             status: "default",
             variant: "secondary",
             iconOnly: !0,
-            className: "absolute right-20 top-20 z-10",
+            className: "mds:absolute mds:right-20 mds:top-20 mds:z-10",
             onClick: () => {
-              const i = [...d], a = i.findIndex(
-                (c) => c.id === r.id
+              const d = [...m], i = d.findIndex(
+                (l) => l.id === r.id
               );
-              a > -1 && (i.splice(a, 1), l(i), s(i[0] || null));
+              i > -1 && (d.splice(i, 1), s(d), n(d[0] || null));
             },
             children: /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
               g,
               {
                 variant: "outlined",
-                className: "h-16 w-16 text-error"
+                className: "mds:h-16 mds:w-16 mds:text-error"
               }
             ) })
           }
         )
-      ] }) : o
+      ] }) : t
     }
   );
 };

package/dist/mainstack-design-system21.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("./utils-FBJ8OQ9f.cjs"),e=({className:o,...t})=>r.jsx("h5",{"data-slot":"image-uploader-dropzone-title",className:a.cn("body-small-medium text-primary",o),...t});e.displayName="ImageUploaderDropzoneTitle";exports.ImageUploaderDropzoneTitle=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("./utils-B6I16BNR.cjs"),e=({className:o,...t})=>r.jsx("h5",{"data-slot":"image-uploader-dropzone-title",className:a.cn("body-small-medium mds:text-primary",o),...t});e.displayName="ImageUploaderDropzoneTitle";exports.ImageUploaderDropzoneTitle=e;

package/dist/mainstack-design-system21.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import { c as r } from "./utils-DnnzGb1L.js";
+import { c as r } from "./utils-B-DK6jJO.js";
 const m = ({
   className: e,
   ...o
@@ -7,7 +7,7 @@ const m = ({
   "h5",
   {
     "data-slot": "image-uploader-dropzone-title",
-    className: r("body-small-medium text-primary", e),
+    className: r("body-small-medium mds:text-primary", e),
     ...o
   }
 );

package/dist/mainstack-design-system22.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("./utils-FBJ8OQ9f.cjs"),e=({className:t,...o})=>r.jsx("p",{"data-slot":"image-uploader-dropzoneSubtext",className:a.cn("body-extrasmall-regular text-secondary",t),...o});e.displayName="ImageUploaderDropzoneSubtext";exports.ImageUploaderDropzoneSubtext=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("./utils-B6I16BNR.cjs"),e=({className:t,...o})=>r.jsx("p",{"data-slot":"image-uploader-dropzoneSubtext",className:a.cn("body-extrasmall-regular mds:text-secondary",t),...o});e.displayName="ImageUploaderDropzoneSubtext";exports.ImageUploaderDropzoneSubtext=e;

package/dist/mainstack-design-system22.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import { c as r } from "./utils-DnnzGb1L.js";
+import { c as r } from "./utils-B-DK6jJO.js";
 const t = ({
   className: e,
   ...o
@@ -7,7 +7,7 @@ const t = ({
   "p",
   {
     "data-slot": "image-uploader-dropzoneSubtext",
-    className: r("body-extrasmall-regular text-secondary", e),
+    className: r("body-extrasmall-regular mds:text-secondary", e),
     ...o
   }
 );

package/dist/mainstack-design-system23.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("react"),n=require("./utils-FBJ8OQ9f.cjs"),_=require("./mainstack-design-system605.cjs"),I=require("./mainstack-design-system24.cjs");require("./mainstack-design-system355.cjs");const f=require("./mainstack-design-system53.cjs");require("./player-BKifgSJo.cjs");const l=({className:i,children:s,...c})=>{const{onValuesChange:o,setMainPreviewFile:a,accept:p,maxSize:u,maxFiles:d,onError:r}=I.useImageUploaderContext(),m=x.useCallback(async g=>{try{const e=await n.generateImageFilePreview(g);o(e),a(e[0])}catch(e){r&&r(e)}},[o,a,r]);return t.jsxs(_.DropzoneUploadArea,{"data-slot":"image-uploader-dropzone-content",className:n.cn("flex relative flex-col items-center gap-8 justify-center p-24 text-center h-full",i),onDrop:m,accept:p,maxFiles:d,maxSize:u,asChild:!0,...c,children:[t.jsx(f,{variant:"filled"}),s]})};l.displayName="ImageUploaderDropzone";exports.ImageUploaderDropzone=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("react"),n=require("./utils-B6I16BNR.cjs"),_=require("./mainstack-design-system606.cjs"),I=require("./mainstack-design-system24.cjs");require("./mainstack-design-system355.cjs");const f=require("./mainstack-design-system53.cjs");require("./player-BKifgSJo.cjs");const s=({className:l,children:i,...c})=>{const{onValuesChange:o,setMainPreviewFile:a,accept:d,maxSize:m,maxFiles:p,onError:r}=I.useImageUploaderContext(),u=x.useCallback(async g=>{try{const e=await n.generateImageFilePreview(g);o(e),a(e[0])}catch(e){r&&r(e)}},[o,a,r]);return t.jsxs(_.DropzoneUploadArea,{"data-slot":"image-uploader-dropzone-content",className:n.cn("mds:flex mds:relative mds:flex-col mds:items-center mds:gap-8 mds:justify-center mds:p-24 mds:text-center mds:h-full",l),onDrop:u,accept:d,maxFiles:p,maxSize:m,asChild:!0,...c,children:[t.jsx(f,{variant:"filled"}),i]})};s.displayName="ImageUploaderDropzone";exports.ImageUploaderDropzone=s;