mainstack-design-system 0.3.4 → 0.3.5

package/build/mainstack-design-system.js

@@ -64874,9 +64874,11 @@ const t6e = ({
   handleChangeCoverImage: d,
   multiImagePopover: c,
   accept: m,
-  ...p
+  canUploadMultiple: p = !0,
+  uploadText: v,
+  ...g
 }) => {
-  const v = Lt(null), [g] = Cb("(max-width: 767px)");
+  const y = Lt(null), [b] = Cb("(max-width: 767px)");
   return /* @__PURE__ */ Q(tr, { children: [
     /* @__PURE__ */ f(pb, { templateColumns: "repeat(5, 1fr)", gap: "16px", children: a.length > 0 ? /* @__PURE__ */ f(Kg, { colSpan: 5, children: /* @__PURE__ */ f(
       n1,
@@ -64894,7 +64896,7 @@ const t6e = ({
         p: "24px",
         aspectRatio: 764 / 574,
         position: "relative",
-        ...p,
+        ...g,
         children: e ? /* @__PURE__ */ f(
           $i,
           {
@@ -64930,9 +64932,9 @@ const t6e = ({
                 /* @__PURE__ */ f(mf, {}),
                 /* @__PURE__ */ f(Xs, { size: "6xs", lineHeight: "20px", children: "Change image" })
               ] }),
-              onClick: (y) => {
-                var b;
-                y.preventDefault(), (b = v.current) == null || b.click();
+              onClick: (x) => {
+                var _;
+                x.preventDefault(), (_ = y.current) == null || _.click();
               }
             }
           ),
@@ -64964,35 +64966,39 @@ const t6e = ({
         _hover: {
           bgColor: oe.gray50
         },
-        p: g ? "16px" : "24px",
+        p: b ? "16px" : "24px",
         aspectRatio: 764 / 574,
         position: "relative",
-        onClick: (y) => {
-          var b;
-          y.preventDefault(), (b = v.current) == null || b.click();
+        onClick: (x) => {
+          var _;
+          x.preventDefault(), (_ = y.current) == null || _.click();
         },
-        ...p,
+        ...g,
         children: [
-          /* @__PURE__ */ f($i, { boxSize: g ? "24px" : "40px", children: /* @__PURE__ */ f(mf, { fontSize: g ? "24px" : "40px" }) }),
+          /* @__PURE__ */ f($i, { boxSize: b ? "24px" : "40px", children: /* @__PURE__ */ f(mf, { fontSize: b ? "24px" : "40px" }) }),
           /* @__PURE__ */ f(
             Xs,
             {
-              size: g ? "5xs" : "4xs",
-              mt: g ? "12px" : "24px",
-              children: "Drop your product images here."
+              size: b ? "5xs" : "4xs",
+              mt: b ? "12px" : "24px",
+              children: v ?? "Drop your product images here."
             }
           ),
-          /* @__PURE__ */ f(
+          /* @__PURE__ */ Q(
             Ya,
             {
-              size: g ? "xxs" : "xs",
+              size: b ? "xxs" : "xs",
               color: oe.gray400,
               textAlign: "center",
               mt: "10px",
-              children: "1600 *1200 (4:3) recommended, up to 10MB each. You can add up-to 5 photos"
+              children: [
+                "1600 *1200 (4:3) recommended, up to 10MB",
+                p && ` each. You can add up-to
+                5 photos`
+              ]
             }
           ),
-          /* @__PURE__ */ f(v1, { position: "absolute", bottom: g ? "16px" : "24px", children: /* @__PURE__ */ f(
+          /* @__PURE__ */ f(v1, { position: "absolute", bottom: b ? "16px" : "24px", children: /* @__PURE__ */ f(
             r5,
             {
               size: "small",
@@ -65010,16 +65016,16 @@ const t6e = ({
     e && /* @__PURE__ */ f(
       yO,
       {
-        minChildWidth: g ? "100%" : "140px",
-        gap: g ? "8px" : "16px",
-        mt: g ? "8px" : "16px",
-        children: [1, 2, 3, 4, 5].map((y, b) => /* @__PURE__ */ f(tr, { children: /* @__PURE__ */ f(
+        minChildWidth: b ? "100%" : "140px",
+        gap: b ? "8px" : "16px",
+        mt: b ? "8px" : "16px",
+        children: [1, 2, 3, 4, 5].map((x, _) => /* @__PURE__ */ f(tr, { children: /* @__PURE__ */ f(
           $i,
           {
-            borderRadius: g ? "16px" : "12px",
+            borderRadius: b ? "16px" : "12px",
             aspectRatio: 764 / 574,
-            bgImage: a[b],
-            outline: a[b] ? "1px solid" : "1px dashed",
+            bgImage: a[_],
+            outline: a[_] ? "1px solid" : "1px dashed",
             outlineColor: oe.gray50,
             bgSize: "cover",
             bgPosition: "center",
@@ -65027,15 +65033,15 @@ const t6e = ({
             position: "relative",
             _hover: {
               outline: "3px solid",
-              outlineColor: a[b] ? oe.white100 : oe.black300,
-              bgColor: a[b] ? oe.white100 : oe.gray50
+              outlineColor: a[_] ? oe.white100 : oe.black300,
+              bgColor: a[_] ? oe.white100 : oe.gray50
             },
-            children: a[b] ? /* @__PURE__ */ f(v1, { position: "absolute", top: "8px", right: "8px", children: /* @__PURE__ */ Q(Tb, { placement: "bottom-end", children: [
+            children: a[_] ? /* @__PURE__ */ f(v1, { position: "absolute", top: "8px", right: "8px", children: /* @__PURE__ */ Q(Tb, { placement: "bottom-end", children: [
               /* @__PURE__ */ f(_b, { children: /* @__PURE__ */ f(
                 Sh,
                 {
                   bg: oe.white100,
-                  size: g ? "24px" : "32px",
+                  size: b ? "24px" : "32px",
                   cursor: "pointer",
                   children: /* @__PURE__ */ f(GO, {})
                 }
@@ -65056,7 +65062,7 @@ const t6e = ({
                         alignItems: "center",
                         gap: "8px",
                         p: "14px",
-                        onClick: () => d && d(b),
+                        onClick: () => d && d(_),
                         children: [
                           /* @__PURE__ */ f($i, { children: /* @__PURE__ */ f(nne, { fill: "red" }) }),
                           /* @__PURE__ */ f(Xs, { size: "6xs", children: "Make cover image" })
@@ -65071,7 +65077,7 @@ const t6e = ({
                         gap: "8px",
                         p: "14px",
                         onClick: () => {
-                          d && l && (d(0), l(b));
+                          d && l && (d(0), l(_));
                         },
                         children: [
                           /* @__PURE__ */ f(ry, {}),
@@ -65086,15 +65092,15 @@ const t6e = ({
               $i,
               {
                 cursor: "pointer",
-                onClick: (x) => {
-                  var _;
-                  x.preventDefault(), (_ = v.current) == null || _.click();
+                onClick: (T) => {
+                  var k;
+                  T.preventDefault(), (k = y.current) == null || k.click();
                 },
                 children: /* @__PURE__ */ f(Y1e, { fontSize: "24px" })
               }
             )
           },
-          b
+          _
         ) }))
       }
     ),
@@ -65106,7 +65112,7 @@ const t6e = ({
         multiple: e,
         id: "inputFile",
         style: { display: "none" },
-        ref: v,
+        ref: y,
         onChange: n
       }
     )

package/build/src/components/Uploader/ImageUploader.d.ts

@@ -9,6 +9,8 @@ export interface IImageUpload {
     handleDeleteImage?: (e: any) => void;
     handleChangeCoverImage?: (e: any) => void;
     accept?: string;
+    uploadText?: string;
+    canUploadMultiple?: boolean;
 }
-declare const ImageUploader: ({ multiple, onHandleChange, imageArray, coverImageIndex, handleDeleteImage, handleChangeCoverImage, multiImagePopover, accept, ...props }: IImageUpload) => import("react/jsx-runtime").JSX.Element;
+declare const ImageUploader: ({ multiple, onHandleChange, imageArray, coverImageIndex, handleDeleteImage, handleChangeCoverImage, multiImagePopover, accept, canUploadMultiple, uploadText, ...props }: IImageUpload) => import("react/jsx-runtime").JSX.Element;
 export default ImageUploader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mainstack-design-system",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
   "main": "build/mainstack-design-system.js",
   "types": "build/src/index.d.ts",