mainstack-design-system 1.4.1 → 1.5.0

package/dist/mainstack-design-system23.js

@@ -1,27 +1,27 @@
-import { jsxs as d, jsx as f } from "react/jsx-runtime";
+import { jsxs as c, jsx as f } from "react/jsx-runtime";
 import { useCallback as g } from "react";
-import { g as x, c as u } from "./utils-DnnzGb1L.js";
-import { DropzoneUploadArea as h } from "./mainstack-design-system605.js";
+import { g as x, c as u } from "./utils-B-DK6jJO.js";
+import { DropzoneUploadArea as h } from "./mainstack-design-system606.js";
 import { useImageUploaderContext as v } from "./mainstack-design-system24.js";
 import "./mainstack-design-system355.js";
 import z from "./mainstack-design-system53.js";
 import "./player-DSenNqFV.js";
 const I = ({
   className: t,
-  children: i,
-  ...n
+  children: m,
+  ...s
 }) => {
   const {
     onValuesChange: o,
     setMainPreviewFile: a,
-    accept: l,
-    maxSize: m,
-    maxFiles: p,
+    accept: i,
+    maxSize: n,
+    maxFiles: l,
     onError: r
-  } = v(), s = g(
-    async (c) => {
+  } = v(), p = g(
+    async (d) => {
       try {
-        const e = await x(c);
+        const e = await x(d);
         o(e), a(e[0]);
       } catch (e) {
         r && r(e);
@@ -29,23 +29,23 @@ const I = ({
     },
     [o, a, r]
   );
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     h,
     {
       "data-slot": "image-uploader-dropzone-content",
       className: u(
-        "flex relative flex-col items-center gap-8 justify-center p-24 text-center h-full",
+        "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",
         t
       ),
-      onDrop: s,
-      accept: l,
-      maxFiles: p,
-      maxSize: m,
+      onDrop: p,
+      accept: i,
+      maxFiles: l,
+      maxSize: n,
       asChild: !0,
-      ...n,
+      ...s,
       children: [
         /* @__PURE__ */ f(z, { variant: "filled" }),
-        i
+        m
       ]
     }
   );

package/dist/mainstack-design-system26.cjs

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

package/dist/mainstack-design-system26.js

@@ -2,15 +2,15 @@
 import { jsx as a } from "react/jsx-runtime";
 import { FileUploaderContext as g } from "./mainstack-design-system33.js";
 import { u as y } from "./index-437EL2iq.js";
-import { c as z } from "./utils-DnnzGb1L.js";
+import { c as z } from "./utils-B-DK6jJO.js";
 import l from "react";
 const F = ({
   values: n,
-  onValuesChange: i,
+  onValuesChange: d,
   defaultValues: r = [],
   isDisabled: o,
-  accept: p = { "file/*": [".pdf", ".txt", ".docx"] },
-  maxFiles: d = 4,
+  accept: i = { "file/*": [".pdf", ".txt", ".docx"] },
+  maxFiles: p = 4,
   maxSize: s,
   multiple: m = !0,
   onError: f,
@@ -21,7 +21,7 @@ const F = ({
   const [t, C] = y({
     prop: n,
     defaultProp: r,
-    onChange: i
+    onChange: d
   }), h = !m && t.length > 0, v = l.Children.map(u, (e) => l.isValidElement(e) && e.type?.displayName === "FileUploaderDropzone" && h ? null : e);
   return /* @__PURE__ */ a(
     g.Provider,
@@ -30,8 +30,8 @@ const F = ({
         values: t,
         defaultValues: r,
         isDisabled: o,
-        accept: p,
-        maxFiles: d,
+        accept: i,
+        maxFiles: p,
         maxSize: s,
         onValuesChange: C,
         onError: f
@@ -43,7 +43,7 @@ const F = ({
           "aria-disabled": o,
           "data-slot": "file-uploader-root",
           className: z(
-            "relative flex flex-col gap-12 body-font-family",
+            "mds:relative mds:flex mds:flex-col mds:gap-12 body-font-family",
             c
           ),
           ...x,

package/dist/mainstack-design-system27.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),y=require("./utils-FBJ8OQ9f.cjs"),h=require("./mainstack-design-system33.cjs"),f=require("./mainstack-design-system386.cjs");require("./mainstack-design-system387.cjs");const j=require("./mainstack-design-system388.cjs");require("./mainstack-design-system389.cjs");require("./mainstack-design-system355.cjs");const v=require("./mainstack-design-system284.cjs");require("./player-BKifgSJo.cjs");const o=({children:s,className:a,fileId:r,fileName:c,formatedSize:u,fileExtension:d})=>{const{values:n,onValuesChange:l}=h.useFileUploaderContext(),m=p.useCallback(()=>{const t=[...n],i=t.findIndex(x=>x.id===r);i>-1&&(t.splice(i,1),l(t))},[l,r,n]);return s||e.jsxs("div",{"data-slot":"file-uploader-preview-item",className:y.cn("flex justify-between items-center w-full",a),children:[e.jsxs("div",{className:"flex items-center gap-8 grow",children:[e.jsx("div",{className:"relative flex size-10 shrink-0 px-8 py-10 rounded-8 bg-surface-neutral-l5 body-extrasmall-medium text-secondary items-center justify-center w-48 h-40",children:e.jsx("p",{className:"text-secondary body-extrasmall-medium",children:d})}),e.jsxs("div",{className:"min-w-0 flex flex-col",children:[e.jsx("p",{className:"truncate body-extrasmall-regular text-primary w-258 min-w-0 ",children:c}),e.jsx("span",{className:"truncate body-tiny-regular text-secondary",children:u})]})]}),e.jsx(j.ButtonRoot,{size:"tiny",variant:"ghost",iconOnly:!0,status:"default",onClick:m,children:e.jsx(f.ButtonIcon,{children:e.jsx(v,{className:"h-20 w-20"})})})]})};o.displayName="FileUploaderPreviewItem";exports.FileUploaderPreviewItem=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("react"),y=require("./utils-B6I16BNR.cjs"),h=require("./mainstack-design-system33.cjs"),f=require("./mainstack-design-system386.cjs");require("./mainstack-design-system387.cjs");const j=require("./mainstack-design-system388.cjs");require("./mainstack-design-system389.cjs");require("./mainstack-design-system355.cjs");const v=require("./mainstack-design-system284.cjs");require("./player-BKifgSJo.cjs");const i=({children:t,className:m,fileId:r,fileName:o,formatedSize:a,fileExtension:c})=>{const{values:n,onValuesChange:d}=h.useFileUploaderContext(),u=p.useCallback(()=>{const s=[...n],l=s.findIndex(x=>x.id===r);l>-1&&(s.splice(l,1),d(s))},[d,r,n]);return t||e.jsxs("div",{"data-slot":"file-uploader-preview-item",className:y.cn("mds:flex mds:justify-between mds:items-center mds:w-full",m),children:[e.jsxs("div",{className:"mds:flex mds:items-center mds:gap-8 mds:grow",children:[e.jsx("div",{className:"mds:relative mds:flex mds:size-10 mds:shrink-0 mds:px-8 mds:py-10 mds:rounded-8 mds:bg-surface-neutral-l5 body-extrasmall-medium mds:text-secondary mds:items-center mds:justify-center mds:w-48 mds:h-40",children:e.jsx("p",{className:"mds:text-secondary body-extrasmall-medium",children:c})}),e.jsxs("div",{className:"mds:min-w-0 mds:flex mds:flex-col",children:[e.jsx("p",{className:"mds:truncate body-extrasmall-regular mds:text-primary mds:w-258 mds:min-w-0 ",children:o}),e.jsx("span",{className:"mds:truncate body-tiny-regular mds:text-secondary",children:a})]})]}),e.jsx(j.ButtonRoot,{size:"tiny",variant:"ghost",iconOnly:!0,status:"default",onClick:u,children:e.jsx(f.ButtonIcon,{children:e.jsx(v,{className:"mds:h-20 mds:w-20"})})})]})};i.displayName="FileUploaderPreviewItem";exports.FileUploaderPreviewItem=i;

package/dist/mainstack-design-system27.js

@@ -1,6 +1,6 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { useCallback as f } from "react";
-import { c as x } from "./utils-DnnzGb1L.js";
+import { c as x } from "./utils-B-DK6jJO.js";
 import { useFileUploaderContext as h } from "./mainstack-design-system33.js";
 import { ButtonIcon as y } from "./mainstack-design-system386.js";
 import "./mainstack-design-system387.js";
@@ -10,34 +10,37 @@ import "./mainstack-design-system355.js";
 import v from "./mainstack-design-system284.js";
 import "./player-DSenNqFV.js";
 const N = ({
-  children: i,
-  className: o,
-  fileId: a,
-  fileName: m,
-  formatedSize: c,
-  fileExtension: d
+  children: t,
+  className: l,
+  fileId: d,
+  fileName: n,
+  formatedSize: o,
+  fileExtension: c
 }) => {
-  const { values: l, onValuesChange: s } = h(), p = f(() => {
-    const t = [...l], n = t.findIndex((u) => u.id === a);
-    n > -1 && (t.splice(n, 1), s(t));
-  }, [s, a, l]);
-  return i || /* @__PURE__ */ r(
+  const { values: r, onValuesChange: i } = h(), p = f(() => {
+    const s = [...r], a = s.findIndex((u) => u.id === d);
+    a > -1 && (s.splice(a, 1), i(s));
+  }, [i, d, r]);
+  return t || /* @__PURE__ */ m(
     "div",
     {
       "data-slot": "file-uploader-preview-item",
-      className: x("flex justify-between items-center w-full", o),
+      className: x(
+        "mds:flex mds:justify-between mds:items-center mds:w-full",
+        l
+      ),
       children: [
-        /* @__PURE__ */ r("div", { className: "flex items-center gap-8 grow", children: [
+        /* @__PURE__ */ m("div", { className: "mds:flex mds:items-center mds:gap-8 mds:grow", children: [
           /* @__PURE__ */ e(
             "div",
             {
-              className: "relative flex size-10 shrink-0 px-8 py-10 rounded-8 bg-surface-neutral-l5 body-extrasmall-medium text-secondary items-center justify-center w-48 h-40",
-              children: /* @__PURE__ */ e("p", { className: "text-secondary body-extrasmall-medium", children: d })
+              className: "mds:relative mds:flex mds:size-10 mds:shrink-0 mds:px-8 mds:py-10 mds:rounded-8 mds:bg-surface-neutral-l5 body-extrasmall-medium mds:text-secondary mds:items-center mds:justify-center mds:w-48 mds:h-40",
+              children: /* @__PURE__ */ e("p", { className: "mds:text-secondary body-extrasmall-medium", children: c })
             }
           ),
-          /* @__PURE__ */ r("div", { className: "min-w-0 flex flex-col", children: [
-            /* @__PURE__ */ e("p", { className: "truncate body-extrasmall-regular text-primary w-258 min-w-0 ", children: m }),
-            /* @__PURE__ */ e("span", { className: "truncate body-tiny-regular text-secondary", children: c })
+          /* @__PURE__ */ m("div", { className: "mds:min-w-0 mds:flex mds:flex-col", children: [
+            /* @__PURE__ */ e("p", { className: "mds:truncate body-extrasmall-regular mds:text-primary mds:w-258 mds:min-w-0 ", children: n }),
+            /* @__PURE__ */ e("span", { className: "mds:truncate body-tiny-regular mds:text-secondary", children: o })
           ] })
         ] }),
         /* @__PURE__ */ e(
@@ -48,7 +51,7 @@ const N = ({
             iconOnly: !0,
             status: "default",
             onClick: p,
-            children: /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(v, { className: "h-20 w-20" }) })
+            children: /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(v, { className: "mds:h-20 mds:w-20" }) })
           }
         )
       ]

package/dist/mainstack-design-system28.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("./utils-FBJ8OQ9f.cjs"),a=require("./mainstack-design-system33.cjs"),e=({children:l,className:r,...i})=>{const{values:t}=a.useFileUploaderContext();return o.jsx("div",{role:"list","data-slot":"file-uploader-preview",className:s.cn("flex items-center gap-12",r),...i,children:l({values:t})})};e.displayName="FileUploaderPreview";exports.FileUploaderPreview=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("./utils-B6I16BNR.cjs"),a=require("./mainstack-design-system33.cjs"),e=({children:l,className:r,...i})=>{const{values:t}=a.useFileUploaderContext();return o.jsx("div",{role:"list","data-slot":"file-uploader-preview",className:s.cn("mds:flex mds:items-center mds:gap-12",r),...i,children:l({values:t})})};e.displayName="FileUploaderPreview";exports.FileUploaderPreview=e;

package/dist/mainstack-design-system28.js

@@ -1,18 +1,18 @@
 import { jsx as i } from "react/jsx-runtime";
-import { c as t } from "./utils-DnnzGb1L.js";
-import { useFileUploaderContext as a } from "./mainstack-design-system33.js";
-const s = ({
+import { c as s } from "./utils-B-DK6jJO.js";
+import { useFileUploaderContext as t } from "./mainstack-design-system33.js";
+const a = ({
   children: e,
   className: r,
   ...l
 }) => {
-  const { values: o } = a();
+  const { values: o } = t();
   return /* @__PURE__ */ i(
     "div",
     {
       role: "list",
       "data-slot": "file-uploader-preview",
-      className: t("flex items-center gap-12", r),
+      className: s("mds:flex mds:items-center mds:gap-12", r),
       ...l,
       children: e({
         values: o
@@ -20,7 +20,7 @@ const s = ({
     }
   );
 };
-s.displayName = "FileUploaderPreview";
+a.displayName = "FileUploaderPreview";
 export {
-  s as FileUploaderPreview
+  a as FileUploaderPreview
 };

package/dist/mainstack-design-system29.cjs

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

package/dist/mainstack-design-system29.js

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

package/dist/mainstack-design-system30.cjs

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

package/dist/mainstack-design-system30.js

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

package/dist/mainstack-design-system31.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("./mainstack-design-system386.cjs"),n=require("./mainstack-design-system387.cjs"),t=require("./mainstack-design-system388.cjs");require("./mainstack-design-system389.cjs");require("./mainstack-design-system355.cjs");const u=require("./mainstack-design-system107.cjs"),d=require("./mainstack-design-system129.cjs");require("react");require("./player-BKifgSJo.cjs");const a=require("./utils-FBJ8OQ9f.cjs"),r=({className:s,children:i,onLibrarySelect:c,...l})=>e.jsx("div",{"data-slot":"file-uploader-dropzone-actions",className:a.cn("flex justify-center items-center gap-8 mt-16",s),...l,children:i||e.jsxs(e.Fragment,{children:[e.jsxs(t.ButtonRoot,{variant:"secondary",rounded:"sm",size:"xs",children:[e.jsx(o.ButtonIcon,{children:e.jsx(d,{})}),e.jsx(n.ButtonLabel,{children:"Upload from device"})]}),e.jsxs(t.ButtonRoot,{variant:"secondary",size:"xs",rounded:"sm",onClick:c,children:[e.jsx(o.ButtonIcon,{children:e.jsx(u,{})}),e.jsx(n.ButtonLabel,{children:"Select from library"})]})]})});r.displayName="FileUploaderDropzoneActions";exports.FileUploaderDropzoneActions=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("./mainstack-design-system386.cjs"),n=require("./mainstack-design-system387.cjs"),t=require("./mainstack-design-system388.cjs");require("./mainstack-design-system389.cjs");require("./mainstack-design-system355.cjs");const u=require("./mainstack-design-system107.cjs"),d=require("./mainstack-design-system129.cjs");require("react");require("./player-BKifgSJo.cjs");const a=require("./utils-B6I16BNR.cjs"),r=({className:s,children:i,onLibrarySelect:c,...l})=>e.jsx("div",{"data-slot":"file-uploader-dropzone-actions",className:a.cn("mds:flex mds:justify-center mds:items-center mds:gap-8 mds:mt-16",s),...l,children:i||e.jsxs(e.Fragment,{children:[e.jsxs(t.ButtonRoot,{variant:"secondary",rounded:"sm",size:"xs",children:[e.jsx(o.ButtonIcon,{children:e.jsx(d,{})}),e.jsx(n.ButtonLabel,{children:"Upload from device"})]}),e.jsxs(t.ButtonRoot,{variant:"secondary",size:"xs",rounded:"sm",onClick:c,children:[e.jsx(o.ButtonIcon,{children:e.jsx(u,{})}),e.jsx(n.ButtonLabel,{children:"Select from library"})]})]})});r.displayName="FileUploaderDropzoneActions";exports.FileUploaderDropzoneActions=r;

package/dist/mainstack-design-system31.js

@@ -1,29 +1,32 @@
 'use client';
-import { jsx as o, jsxs as r, Fragment as l } from "react/jsx-runtime";
+import { jsx as o, jsxs as r, Fragment as c } from "react/jsx-runtime";
 import { ButtonIcon as e } from "./mainstack-design-system386.js";
 import { ButtonLabel as i } from "./mainstack-design-system387.js";
 import { ButtonRoot as t } from "./mainstack-design-system388.js";
 import "./mainstack-design-system389.js";
 import "./mainstack-design-system355.js";
-import a from "./mainstack-design-system107.js";
-import s from "./mainstack-design-system129.js";
+import l from "./mainstack-design-system107.js";
+import a from "./mainstack-design-system129.js";
 import "react";
 import "./player-DSenNqFV.js";
-import { c as p } from "./utils-DnnzGb1L.js";
+import { c as p } from "./utils-B-DK6jJO.js";
 const f = ({
   className: n,
   children: m,
-  onLibrarySelect: c,
-  ...d
+  onLibrarySelect: d,
+  ...s
 }) => /* @__PURE__ */ o(
   "div",
   {
     "data-slot": "file-uploader-dropzone-actions",
-    className: p("flex justify-center items-center gap-8 mt-16", n),
-    ...d,
-    children: m || /* @__PURE__ */ r(l, { children: [
+    className: p(
+      "mds:flex mds:justify-center mds:items-center mds:gap-8 mds:mt-16",
+      n
+    ),
+    ...s,
+    children: m || /* @__PURE__ */ r(c, { children: [
       /* @__PURE__ */ r(t, { variant: "secondary", rounded: "sm", size: "xs", children: [
-        /* @__PURE__ */ o(e, { children: /* @__PURE__ */ o(s, {}) }),
+        /* @__PURE__ */ o(e, { children: /* @__PURE__ */ o(a, {}) }),
         /* @__PURE__ */ o(i, { children: "Upload from device" })
       ] }),
       /* @__PURE__ */ r(
@@ -32,9 +35,9 @@ const f = ({
           variant: "secondary",
           size: "xs",
           rounded: "sm",
-          onClick: c,
+          onClick: d,
           children: [
-            /* @__PURE__ */ o(e, { children: /* @__PURE__ */ o(a, {}) }),
+            /* @__PURE__ */ o(e, { children: /* @__PURE__ */ o(l, {}) }),
             /* @__PURE__ */ o(i, { children: "Select from library" })
           ]
         }

package/dist/mainstack-design-system32.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),a=require("./utils-FBJ8OQ9f.cjs"),g=require("./mainstack-design-system605.cjs"),f=require("./mainstack-design-system33.cjs");require("./mainstack-design-system355.cjs");const m=require("./mainstack-design-system53.cjs");require("./player-BKifgSJo.cjs");const n=({className:i,children:l,...c})=>{const{onValuesChange:o,accept:d,maxSize:s,maxFiles:u,onError:e}=f.useFileUploaderContext(),p=b.useCallback(async v=>{try{const r=await a.getFileMetadata(v);o(r)}catch(r){e&&e(r)}},[o,e]);return t.jsxs(g.DropzoneUploadArea,{"data-slot":"file-uploader-dropzone-content",className:a.cn("relative border border-dashed border-border-interactive-neutral rounded-20 bg-surface-neutral-l1 data-[active-preview=true]:overflow-hidden cursor-pointer hover:bg-interactive-secondary data-dragging:border-border-interactive-neutral active:ring-2 active:ring-border-interactive-neutral-pressed p-24 flex flex-col items-center justify-center h-full",i),onDrop:p,accept:d,maxFiles:u,maxSize:s,asChild:!0,...c,children:[t.jsx(m,{variant:"filled"}),l]})};n.displayName="FileUploaderDropzone";exports.FileUploaderDropzone=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),v=require("react"),a=require("./utils-B6I16BNR.cjs"),b=require("./mainstack-design-system606.cjs"),g=require("./mainstack-design-system33.cjs");require("./mainstack-design-system355.cjs");const f=require("./mainstack-design-system53.cjs");require("./player-BKifgSJo.cjs");const d=({className:n,children:s,...i})=>{const{onValuesChange:o,accept:l,maxSize:c,maxFiles:u,onError:e}=g.useFileUploaderContext(),m=v.useCallback(async p=>{try{const r=await a.getFileMetadata(p);o(r)}catch(r){e&&e(r)}},[o,e]);return t.jsxs(b.DropzoneUploadArea,{"data-slot":"file-uploader-dropzone-content",className:a.cn("mds:relative mds:border mds:border-dashed mds:border-border-interactive-neutral mds:rounded-20 mds:bg-surface-neutral-l1 mds:data-[active-preview=true]:overflow-hidden 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 mds:p-24 mds:flex mds:flex-col mds:items-center mds:justify-center mds:h-full",n),onDrop:m,accept:l,maxFiles:u,maxSize:c,asChild:!0,...i,children:[t.jsx(f,{variant:"filled"}),s]})};d.displayName="FileUploaderDropzone";exports.FileUploaderDropzone=d;

package/dist/mainstack-design-system32.js

@@ -1,7 +1,7 @@
-import { jsxs as p, jsx as m } from "react/jsx-runtime";
+import { jsxs as c, jsx as p } from "react/jsx-runtime";
 import { useCallback as f } from "react";
-import { a as u, c as v } from "./utils-DnnzGb1L.js";
-import { DropzoneUploadArea as b } from "./mainstack-design-system605.js";
+import { a as u, c as v } from "./utils-B-DK6jJO.js";
+import { DropzoneUploadArea as b } from "./mainstack-design-system606.js";
 import { useFileUploaderContext as g } from "./mainstack-design-system33.js";
 import "./mainstack-design-system355.js";
 import h from "./mainstack-design-system53.js";
@@ -9,12 +9,12 @@ import "./player-DSenNqFV.js";
 const x = ({
   className: t,
   children: a,
-  ...i
+  ...d
 }) => {
-  const { onValuesChange: o, accept: n, maxSize: l, maxFiles: d, onError: e } = g(), c = f(
-    async (s) => {
+  const { onValuesChange: o, accept: s, maxSize: i, maxFiles: n, onError: e } = g(), m = f(
+    async (l) => {
       try {
-        const r = await u(s);
+        const r = await u(l);
         o(r);
       } catch (r) {
         e && e(r);
@@ -22,22 +22,22 @@ const x = ({
     },
     [o, e]
   );
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ c(
     b,
     {
       "data-slot": "file-uploader-dropzone-content",
       className: v(
-        "relative border border-dashed border-border-interactive-neutral rounded-20 bg-surface-neutral-l1 data-[active-preview=true]:overflow-hidden cursor-pointer hover:bg-interactive-secondary data-dragging:border-border-interactive-neutral active:ring-2 active:ring-border-interactive-neutral-pressed p-24 flex flex-col items-center justify-center h-full",
+        "mds:relative mds:border mds:border-dashed mds:border-border-interactive-neutral mds:rounded-20 mds:bg-surface-neutral-l1 mds:data-[active-preview=true]:overflow-hidden 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 mds:p-24 mds:flex mds:flex-col mds:items-center mds:justify-center mds:h-full",
         t
       ),
-      onDrop: c,
-      accept: n,
-      maxFiles: d,
-      maxSize: l,
+      onDrop: m,
+      accept: s,
+      maxFiles: n,
+      maxSize: i,
       asChild: !0,
-      ...i,
+      ...d,
       children: [
-        /* @__PURE__ */ m(h, { variant: "filled" }),
+        /* @__PURE__ */ p(h, { variant: "filled" }),
         a
       ]
     }

package/dist/mainstack-design-system355.cjs

@@ -1 +1 @@
-"use strict";const o=require("react/jsx-runtime"),s=require("react"),w=require("./utils-FBJ8OQ9f.cjs"),c=s.forwardRef(({children:u,className:l,...r},m)=>{const i=`mask-${s.useId()}`,t=r.width||"24",n=r.height||"24",p=s.Children.map(u,e=>{if(!s.isValidElement(e))return e;const a=e.props,d=typeof e.type=="string"&&e.type.toLowerCase()==="g",k="mask"in a;return d&&k?s.cloneElement(e,{...a,mask:`url(#${i})`}):e});return o.jsxs("svg",{ref:m,xmlns:"http://www.w3.org/2000/svg",width:t,height:n,viewBox:`0 0 ${t} ${n}`,fill:"currentColor",stroke:"none",strokeWidth:"1",style:{maskType:"alpha"},className:w.cn("size-24",l),...r,children:[o.jsx("mask",{id:i,maskUnits:"userSpaceOnUse",x:"0",y:"0",width:t,height:n,children:o.jsx("rect",{width:t,height:n,fill:"white"})}),p]})});c.displayName="Icon";module.exports=c;
+"use strict";const o=require("react/jsx-runtime"),s=require("react"),w=require("./utils-B6I16BNR.cjs"),c=s.forwardRef(({children:u,className:l,...r},m)=>{const i=`mask-${s.useId()}`,t=r.width||"24",n=r.height||"24",p=s.Children.map(u,e=>{if(!s.isValidElement(e))return e;const a=e.props,d=typeof e.type=="string"&&e.type.toLowerCase()==="g",k="mask"in a;return d&&k?s.cloneElement(e,{...a,mask:`url(#${i})`}):e});return o.jsxs("svg",{ref:m,xmlns:"http://www.w3.org/2000/svg",width:t,height:n,viewBox:`0 0 ${t} ${n}`,fill:"currentColor",stroke:"none",strokeWidth:"1",style:{maskType:"alpha"},className:w.cn("mds:size-24",l),...r,children:[o.jsx("mask",{id:i,maskUnits:"userSpaceOnUse",x:"0",y:"0",width:t,height:n,children:o.jsx("rect",{width:t,height:n,fill:"white"})}),p]})});c.displayName="Icon";module.exports=c;

package/dist/mainstack-design-system355.js

@@ -1,9 +1,9 @@
 import { jsxs as f, jsx as i } from "react/jsx-runtime";
 import n, { useId as k } from "react";
-import { c as w } from "./utils-DnnzGb1L.js";
+import { c as w } from "./utils-B-DK6jJO.js";
 const h = n.forwardRef(
   ({ children: m, className: l, ...r }, c) => {
-    const o = `mask-${k()}`, t = r.width || "24", s = r.height || "24", p = n.Children.map(m, (e) => {
+    const o = `mask-${k()}`, s = r.width || "24", t = r.height || "24", p = n.Children.map(m, (e) => {
       if (!n.isValidElement(e)) return e;
       const a = e.props, u = typeof e.type == "string" && e.type.toLowerCase() === "g", d = "mask" in a;
       return u && d ? n.cloneElement(e, {
@@ -16,14 +16,14 @@ const h = n.forwardRef(
       {
         ref: c,
         xmlns: "http://www.w3.org/2000/svg",
-        width: t,
-        height: s,
-        viewBox: `0 0 ${t} ${s}`,
+        width: s,
+        height: t,
+        viewBox: `0 0 ${s} ${t}`,
         fill: "currentColor",
         stroke: "none",
         strokeWidth: "1",
         style: { maskType: "alpha" },
-        className: w("size-24", l),
+        className: w("mds:size-24", l),
         ...r,
         children: [
           /* @__PURE__ */ i(
@@ -33,9 +33,9 @@ const h = n.forwardRef(
               maskUnits: "userSpaceOnUse",
               x: "0",
               y: "0",
-              width: t,
-              height: s,
-              children: /* @__PURE__ */ i("rect", { width: t, height: s, fill: "white" })
+              width: s,
+              height: t,
+              children: /* @__PURE__ */ i("rect", { width: s, height: t, fill: "white" })
             }
           ),
           p

package/dist/mainstack-design-system356.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),m=require("./player-BKifgSJo.cjs"),y=require("./utils-FBJ8OQ9f.cjs"),p=({icon:c,size:t=18,trigger:n="loop",colors:o,className:s,delay:u})=>{const e=i.useRef(null);i.useEffect(()=>{n==="loop"&&e.current&&e.current.playFromBeginning()},[n]);const l=()=>{n==="hover"&&e.current?.playFromBeginning()},a=c;return r.jsx("div",{className:y.cn("flex items-center justify-center",s),style:{width:t,height:t},onMouseEnter:l,children:r.jsx(m.h,{ref:e,icon:a,size:t,colorize:o?`primary:${o.primary},secondary:${o.secondary}`:void 0,onComplete:()=>{n==="loop"&&setTimeout(()=>{e.current?.playFromBeginning()},u||0)}})})};exports.AnimatedIcon=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),m=require("./player-BKifgSJo.cjs"),d=require("./utils-B6I16BNR.cjs"),y=({icon:c,size:t=18,trigger:n="loop",colors:o,className:s,delay:u})=>{const e=i.useRef(null);i.useEffect(()=>{n==="loop"&&e.current&&e.current.playFromBeginning()},[n]);const l=()=>{n==="hover"&&e.current?.playFromBeginning()},a=c;return r.jsx("div",{className:d.cn("mds:flex mds:items-center mds:justify-center",s),style:{width:t,height:t},onMouseEnter:l,children:r.jsx(m.h,{ref:e,icon:a,size:t,colorize:o?`primary:${o.primary},secondary:${o.secondary}`:void 0,onComplete:()=>{n==="loop"&&setTimeout(()=>{e.current?.playFromBeginning()},u||0)}})})};exports.AnimatedIcon=y;

package/dist/mainstack-design-system356.js

@@ -1,40 +1,40 @@
 'use client';
 import { jsx as t } from "react/jsx-runtime";
-import { useRef as f, useEffect as l } from "react";
-import { h as s } from "./player-DSenNqFV.js";
-import { c as u } from "./utils-DnnzGb1L.js";
+import { useRef as a, useEffect as f } from "react";
+import { h as l } from "./player-DSenNqFV.js";
+import { c as u } from "./utils-B-DK6jJO.js";
 const x = ({
   icon: i,
   size: o = 18,
   trigger: n = "loop",
   colors: r,
-  className: c,
-  delay: m
+  className: m,
+  delay: c
 }) => {
-  const e = f(null);
-  l(() => {
+  const e = a(null);
+  f(() => {
     n === "loop" && e.current && e.current.playFromBeginning();
   }, [n]);
-  const p = () => {
+  const s = () => {
     n === "hover" && e.current?.playFromBeginning();
-  }, a = i;
+  }, p = i;
   return /* @__PURE__ */ t(
     "div",
     {
-      className: u("flex items-center justify-center", c),
+      className: u("mds:flex mds:items-center mds:justify-center", m),
       style: { width: o, height: o },
-      onMouseEnter: p,
+      onMouseEnter: s,
       children: /* @__PURE__ */ t(
-        s,
+        l,
         {
           ref: e,
-          icon: a,
+          icon: p,
           size: o,
           colorize: r ? `primary:${r.primary},secondary:${r.secondary}` : void 0,
           onComplete: () => {
             n === "loop" && setTimeout(() => {
               e.current?.playFromBeginning();
-            }, m || 0);
+            }, c || 0);
           }
         }
       )

package/dist/mainstack-design-system357.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./mainstack-design-system433.cjs"),n=require("./mainstack-design-system434.cjs"),o=require("./mainstack-design-system432.cjs"),u={Root:t.InputRoot,Field:n.InputField};exports.InputRoot=t.InputRoot;exports.InputField=n.InputField;exports.Input=o.Input;exports.InputGroup=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./mainstack-design-system434.cjs"),n=require("./mainstack-design-system435.cjs"),o=require("./mainstack-design-system433.cjs"),u={Root:t.InputRoot,Field:n.InputField};exports.InputRoot=t.InputRoot;exports.InputField=n.InputField;exports.Input=o.Input;exports.InputGroup=u;

package/dist/mainstack-design-system357.js

@@ -1,6 +1,6 @@
-import { InputRoot as o } from "./mainstack-design-system433.js";
-import { InputField as t } from "./mainstack-design-system434.js";
-import { Input as e } from "./mainstack-design-system432.js";
+import { InputRoot as o } from "./mainstack-design-system434.js";
+import { InputField as t } from "./mainstack-design-system435.js";
+import { Input as e } from "./mainstack-design-system433.js";
 const m = {
   Root: o,
   Field: t

package/dist/mainstack-design-system358.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),c=require("./mainstack-design-system433.cjs"),p=require("./mainstack-design-system434.cjs");require("./mainstack-design-system432.cjs");require("./mainstack-design-system355.cjs");const d=require("./mainstack-design-system298.cjs"),l=require("./mainstack-design-system299.cjs");require("./player-BKifgSJo.cjs");const t=s.forwardRef(({className:r,...i},u)=>{const[n,o]=s.useState("password");return e.jsxs(c.InputRoot,{className:r,children:[e.jsx(p.InputField,{...i,ref:u,type:n}),n==="password"?e.jsxs("button",{onClick:()=>o("text"),className:"border-none outline-none cursor-pointer",children:[e.jsx(l,{})," "]}):e.jsx("button",{onClick:()=>o("password"),className:"border-none outline-none cursor-pointer",children:e.jsx(d,{})})]})});t.displayName="PasswordField";exports.PasswordField=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),c=require("./mainstack-design-system434.cjs"),d=require("./mainstack-design-system435.cjs");require("./mainstack-design-system433.cjs");require("./mainstack-design-system355.cjs");const p=require("./mainstack-design-system298.cjs"),l=require("./mainstack-design-system299.cjs");require("./player-BKifgSJo.cjs");const t=o.forwardRef(({className:r,...i},u)=>{const[s,n]=o.useState("password");return e.jsxs(c.InputRoot,{className:r,children:[e.jsx(d.InputField,{...i,ref:u,type:s}),s==="password"?e.jsxs("button",{onClick:()=>n("text"),className:"mds:border-none mds:outline-none mds:cursor-pointer",children:[e.jsx(l,{})," "]}):e.jsx("button",{onClick:()=>n("password"),className:"mds:border-none mds:outline-none mds:cursor-pointer",children:e.jsx(p,{})})]})});t.displayName="PasswordField";exports.PasswordField=t;

package/dist/mainstack-design-system358.js

@@ -1,23 +1,23 @@
 'use client';
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { forwardRef as p, useState as m } from "react";
-import { InputRoot as d } from "./mainstack-design-system433.js";
-import { InputField as l } from "./mainstack-design-system434.js";
-import "./mainstack-design-system432.js";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { forwardRef as m, useState as p } from "react";
+import { InputRoot as d } from "./mainstack-design-system434.js";
+import { InputField as l } from "./mainstack-design-system435.js";
+import "./mainstack-design-system433.js";
 import "./mainstack-design-system355.js";
 import a from "./mainstack-design-system298.js";
 import c from "./mainstack-design-system299.js";
 import "./player-DSenNqFV.js";
-const u = p(
-  ({ className: e, ...n }, s) => {
-    const [r, t] = m("password");
-    return /* @__PURE__ */ i(d, { className: e, children: [
-      /* @__PURE__ */ o(l, { ...n, ref: s, type: r }),
-      r === "password" ? /* @__PURE__ */ i(
+const u = m(
+  ({ className: i, ...e }, n) => {
+    const [r, t] = p("password");
+    return /* @__PURE__ */ s(d, { className: i, children: [
+      /* @__PURE__ */ o(l, { ...e, ref: n, type: r }),
+      r === "password" ? /* @__PURE__ */ s(
         "button",
         {
           onClick: () => t("text"),
-          className: "border-none outline-none cursor-pointer",
+          className: "mds:border-none mds:outline-none mds:cursor-pointer",
           children: [
             /* @__PURE__ */ o(c, {}),
             " "
@@ -27,7 +27,7 @@ const u = p(
         "button",
         {
           onClick: () => t("password"),
-          className: "border-none outline-none cursor-pointer",
+          className: "mds:border-none mds:outline-none mds:cursor-pointer",
           children: /* @__PURE__ */ o(a, {})
         }
       )