@sparkstudio/storage-ui 1.0.21 → 1.0.23

package/dist/index.cjs

@@ -295,7 +295,7 @@ var UploadDropzone = ({
   children
 }) => {
   const baseClass = "rounded-3 d-flex flex-column align-items-center justify-content-center";
-  const stateClass = isDragging ? "bg-body-secondary" : "";
+  const stateClass = isDragging ? "bg-body-secondary border-dashed border-2 border-secondary" : "bg-body-trasparent border-solid border-transparent border-2";
   const combinedClassName = `${baseClass} ${stateClass} ${className}`.trim();
   const handleDragOver = (e) => {
     e.preventDefault();
@@ -856,95 +856,103 @@ var UploadContainer = ({
     a.click();
     document.body.removeChild(a);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    UploadDropzone,
-    {
-      isDragging,
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDrop: handleDrop,
-      className: "w-100",
-      style: { minHeight: "260px", alignItems: "stretch" },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "w-100", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "w-100", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          id: "filePicker",
+          type: "file",
+          multiple: true,
+          className: "d-none",
+          onChange: (e) => {
+            if (!e.target.files) return;
+            onFilesSelected?.(e.target.files);
+            startUploadsIfNeeded(e.target.files);
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-start", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "btn btn-primary float-start",
+          onClick: () => document.getElementById("filePicker")?.click(),
+          children: "Browse files\u2026"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      UploadDropzone,
+      {
+        isDragging,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        className: "w-100",
+        style: { minHeight: "100px", alignItems: "stretch" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UploadProgressList, { uploads }) }) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "input",
-            {
-              id: "filePicker",
-              type: "file",
-              multiple: true,
-              className: "d-none",
-              onChange: (e) => {
-                if (!e.target.files) return;
-                onFilesSelected?.(e.target.files);
-                startUploadsIfNeeded(e.target.files);
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-start", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "button",
+            "div",
             {
-              type: "button",
-              className: "btn btn-primary float-start",
-              onClick: () => document.getElementById("filePicker")?.click(),
-              children: "Browse files\u2026"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UploadProgressList, { uploads }) }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "div",
-          {
-            className: "w-100 d-flex flex-wrap gap-4 align-content-start",
-            style: { minHeight: "140px" },
-            children: existingFilesLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "spinner-border text-secondary", role: "status" }) }) : existingFiles.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-              "div",
-              {
-                className: "w-100 d-flex flex-column align-items-center justify-content-center text-muted",
-                style: {
-                  minHeight: "160px",
-                  padding: "20px",
-                  cursor: "pointer",
-                  transition: "background 0.12s, border-color 0.12s"
-                },
-                onClick: () => document.getElementById("filePicker")?.click(),
-                onMouseEnter: (e) => e.currentTarget.style.borderColor = "#888",
-                onMouseLeave: (e) => e.currentTarget.style.borderColor = "#ccc",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    "input",
-                    {
-                      id: "filePicker",
-                      type: "file",
-                      multiple: true,
-                      hidden: true,
-                      onChange: (e) => {
-                        if (!e.target.files) return;
-                        onFilesSelected?.(e.target.files);
-                        startUploadsIfNeeded(e.target.files);
+              className: "w-100 d-flex flex-wrap gap-4 align-content-start",
+              style: { minHeight: "140px" },
+              children: existingFilesLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  className: "spinner-border text-secondary",
+                  role: "status"
+                }
+              ) }) : existingFiles.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "div",
+                {
+                  className: "w-100 d-flex flex-column align-items-center justify-content-center text-muted",
+                  style: {
+                    minHeight: "160px",
+                    padding: "20px",
+                    cursor: "pointer",
+                    transition: "background 0.12s, border-color 0.12s"
+                  },
+                  onClick: () => document.getElementById("filePicker")?.click(),
+                  onMouseEnter: (e) => e.currentTarget.style.borderColor = "#888",
+                  onMouseLeave: (e) => e.currentTarget.style.borderColor = "#ccc",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "input",
+                      {
+                        id: "filePicker",
+                        type: "file",
+                        multiple: true,
+                        hidden: true,
+                        onChange: (e) => {
+                          if (!e.target.files) return;
+                          onFilesSelected?.(e.target.files);
+                          startUploadsIfNeeded(e.target.files);
+                        }
                       }
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: "Drag & drop files here" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("small", { className: "mt-1", children: "\u2026or click to browse" })
-                ]
-              }
-            ) : existingFiles.map((file) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              DesktopFileIcon,
-              {
-                name: file.Name,
-                sizeBytes: file.FileSize,
-                downloadUrl: file.PublicUrl,
-                onOpen: () => handleExistingFileOpen(file),
-                onDelete: () => onDeleteFile?.(file)
-              },
-              file.Id
-            ))
-          }
-        )
-      ]
-    }
-  );
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: "Drag & drop files here" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("small", { className: "mt-1", children: "\u2026or click to browse" })
+                  ]
+                }
+              ) : existingFiles.map((file) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                DesktopFileIcon,
+                {
+                  name: file.Name,
+                  sizeBytes: file.FileSize,
+                  downloadUrl: file.PublicUrl,
+                  onOpen: () => handleExistingFileOpen(file),
+                  onDelete: () => onDeleteFile?.(file)
+                },
+                file.Id
+              ))
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
 
 // src/hooks/UseContainers.ts
@@ -1058,7 +1066,7 @@ var ContainerUploadPanel = ({
 // src/components/SingleFileProcessUploader.tsx
 var import_react8 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, label, disabled }) => {
+var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, disabled }) => {
   const [selectedFile, setSelectedFile] = (0, import_react8.useState)(null);
   const [isDragging, setIsDragging] = (0, import_react8.useState)(false);
   const [progress, setProgress] = (0, import_react8.useState)(null);
@@ -1132,10 +1140,9 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
     "text-center",
     "user-select-none",
     disabled ? "opacity-50" : "cursor-pointer",
-    isDragging ? "bg-info-subtle" : "bg-transparent"
+    isDragging ? "bg-body-secondary border-dashed border-2 border-secondary" : "bg-body-trasparent border-transparent border-2"
   ].join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "d-flex flex-column gap-2", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { className: "form-label fw-semibold", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
@@ -1174,7 +1181,10 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
     ),
     isUploading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "small", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "d-flex justify-content-between mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Uploading..." }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "spinner-border spinner-border-sm text-primary" }),
+          " Uploading..."
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
           progress ?? 0,
           "%"
@@ -1241,7 +1251,6 @@ function HomeContent() {
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         SingleFileProcessUploader,
         {
-          label: "Upload a file to process",
           accept: "*/*",
           getPresignedUrl: getPresignedUrlFromApi,
           onUploadComplete: (file, s3Url) => {

package/dist/index.d.cts

@@ -135,7 +135,6 @@ interface SingleFileProcessUploaderProps {
     getPresignedUrl: (file: File) => Promise<AWSPresignedUrlDTO>;
     onUploadComplete?: (file: File, s3Url: AWSPresignedUrlDTO) => void;
     accept?: string;
-    label?: string;
     disabled?: boolean;
 }
 declare const SingleFileProcessUploader: React__default.FC<SingleFileProcessUploaderProps>;

package/dist/index.d.ts

@@ -135,7 +135,6 @@ interface SingleFileProcessUploaderProps {
     getPresignedUrl: (file: File) => Promise<AWSPresignedUrlDTO>;
     onUploadComplete?: (file: File, s3Url: AWSPresignedUrlDTO) => void;
     accept?: string;
-    label?: string;
     disabled?: boolean;
 }
 declare const SingleFileProcessUploader: React__default.FC<SingleFileProcessUploaderProps>;

package/dist/index.js

@@ -252,7 +252,7 @@ var UploadDropzone = ({
   children
 }) => {
   const baseClass = "rounded-3 d-flex flex-column align-items-center justify-content-center";
-  const stateClass = isDragging ? "bg-body-secondary" : "";
+  const stateClass = isDragging ? "bg-body-secondary border-dashed border-2 border-secondary" : "bg-body-trasparent border-solid border-transparent border-2";
   const combinedClassName = `${baseClass} ${stateClass} ${className}`.trim();
   const handleDragOver = (e) => {
     e.preventDefault();
@@ -774,7 +774,7 @@ var DesktopFileIcon = ({
 };
 
 // src/components/UploadContainer.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var UploadContainer = ({
   onFilesSelected,
   existingFiles = [],
@@ -823,95 +823,103 @@ var UploadContainer = ({
     a.click();
     document.body.removeChild(a);
   };
-  return /* @__PURE__ */ jsxs3(
-    UploadDropzone,
-    {
-      isDragging,
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDrop: handleDrop,
-      className: "w-100",
-      style: { minHeight: "260px", alignItems: "stretch" },
-      children: [
-        /* @__PURE__ */ jsxs3("div", { className: "w-100", children: [
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsxs3("div", { className: "w-100", children: [
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          id: "filePicker",
+          type: "file",
+          multiple: true,
+          className: "d-none",
+          onChange: (e) => {
+            if (!e.target.files) return;
+            onFilesSelected?.(e.target.files);
+            startUploadsIfNeeded(e.target.files);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx4("div", { className: "text-start", children: /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "btn btn-primary float-start",
+          onClick: () => document.getElementById("filePicker")?.click(),
+          children: "Browse files\u2026"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs3(
+      UploadDropzone,
+      {
+        isDragging,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        className: "w-100",
+        style: { minHeight: "100px", alignItems: "stretch" },
+        children: [
+          /* @__PURE__ */ jsx4("div", { className: "w-100 mb-3", children: /* @__PURE__ */ jsx4("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ jsx4("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ jsx4(UploadProgressList, { uploads }) }) }) }),
           /* @__PURE__ */ jsx4(
-            "input",
-            {
-              id: "filePicker",
-              type: "file",
-              multiple: true,
-              className: "d-none",
-              onChange: (e) => {
-                if (!e.target.files) return;
-                onFilesSelected?.(e.target.files);
-                startUploadsIfNeeded(e.target.files);
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx4("div", { className: "text-start", children: /* @__PURE__ */ jsx4(
-            "button",
+            "div",
             {
-              type: "button",
-              className: "btn btn-primary float-start",
-              onClick: () => document.getElementById("filePicker")?.click(),
-              children: "Browse files\u2026"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx4("div", { className: "w-100 mb-3", children: /* @__PURE__ */ jsx4("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ jsx4("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ jsx4(UploadProgressList, { uploads }) }) }) }),
-        /* @__PURE__ */ jsx4(
-          "div",
-          {
-            className: "w-100 d-flex flex-wrap gap-4 align-content-start",
-            style: { minHeight: "140px" },
-            children: existingFilesLoading ? /* @__PURE__ */ jsx4("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ jsx4("div", { className: "spinner-border text-secondary", role: "status" }) }) : existingFiles.length === 0 ? /* @__PURE__ */ jsxs3(
-              "div",
-              {
-                className: "w-100 d-flex flex-column align-items-center justify-content-center text-muted",
-                style: {
-                  minHeight: "160px",
-                  padding: "20px",
-                  cursor: "pointer",
-                  transition: "background 0.12s, border-color 0.12s"
-                },
-                onClick: () => document.getElementById("filePicker")?.click(),
-                onMouseEnter: (e) => e.currentTarget.style.borderColor = "#888",
-                onMouseLeave: (e) => e.currentTarget.style.borderColor = "#ccc",
-                children: [
-                  /* @__PURE__ */ jsx4(
-                    "input",
-                    {
-                      id: "filePicker",
-                      type: "file",
-                      multiple: true,
-                      hidden: true,
-                      onChange: (e) => {
-                        if (!e.target.files) return;
-                        onFilesSelected?.(e.target.files);
-                        startUploadsIfNeeded(e.target.files);
+              className: "w-100 d-flex flex-wrap gap-4 align-content-start",
+              style: { minHeight: "140px" },
+              children: existingFilesLoading ? /* @__PURE__ */ jsx4("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  className: "spinner-border text-secondary",
+                  role: "status"
+                }
+              ) }) : existingFiles.length === 0 ? /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  className: "w-100 d-flex flex-column align-items-center justify-content-center text-muted",
+                  style: {
+                    minHeight: "160px",
+                    padding: "20px",
+                    cursor: "pointer",
+                    transition: "background 0.12s, border-color 0.12s"
+                  },
+                  onClick: () => document.getElementById("filePicker")?.click(),
+                  onMouseEnter: (e) => e.currentTarget.style.borderColor = "#888",
+                  onMouseLeave: (e) => e.currentTarget.style.borderColor = "#ccc",
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      "input",
+                      {
+                        id: "filePicker",
+                        type: "file",
+                        multiple: true,
+                        hidden: true,
+                        onChange: (e) => {
+                          if (!e.target.files) return;
+                          onFilesSelected?.(e.target.files);
+                          startUploadsIfNeeded(e.target.files);
+                        }
                       }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx4("strong", { children: "Drag & drop files here" }),
-                  /* @__PURE__ */ jsx4("small", { className: "mt-1", children: "\u2026or click to browse" })
-                ]
-              }
-            ) : existingFiles.map((file) => /* @__PURE__ */ jsx4(
-              DesktopFileIcon,
-              {
-                name: file.Name,
-                sizeBytes: file.FileSize,
-                downloadUrl: file.PublicUrl,
-                onOpen: () => handleExistingFileOpen(file),
-                onDelete: () => onDeleteFile?.(file)
-              },
-              file.Id
-            ))
-          }
-        )
-      ]
-    }
-  );
+                    ),
+                    /* @__PURE__ */ jsx4("strong", { children: "Drag & drop files here" }),
+                    /* @__PURE__ */ jsx4("small", { className: "mt-1", children: "\u2026or click to browse" })
+                  ]
+                }
+              ) : existingFiles.map((file) => /* @__PURE__ */ jsx4(
+                DesktopFileIcon,
+                {
+                  name: file.Name,
+                  sizeBytes: file.FileSize,
+                  downloadUrl: file.PublicUrl,
+                  onOpen: () => handleExistingFileOpen(file),
+                  onDelete: () => onDeleteFile?.(file)
+                },
+                file.Id
+              ))
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
 
 // src/hooks/UseContainers.ts
@@ -1025,7 +1033,7 @@ var ContainerUploadPanel = ({
 // src/components/SingleFileProcessUploader.tsx
 import { useCallback as useCallback2, useRef as useRef2, useState as useState5 } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, label, disabled }) => {
+var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, disabled }) => {
   const [selectedFile, setSelectedFile] = useState5(null);
   const [isDragging, setIsDragging] = useState5(false);
   const [progress, setProgress] = useState5(null);
@@ -1099,10 +1107,9 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
     "text-center",
     "user-select-none",
     disabled ? "opacity-50" : "cursor-pointer",
-    isDragging ? "bg-info-subtle" : "bg-transparent"
+    isDragging ? "bg-body-secondary border-dashed border-2 border-secondary" : "bg-body-trasparent border-transparent border-2"
   ].join(" ");
   return /* @__PURE__ */ jsxs4("div", { className: "d-flex flex-column gap-2", children: [
-    label && /* @__PURE__ */ jsx6("label", { className: "form-label fw-semibold", children: label }),
     /* @__PURE__ */ jsxs4(
       "div",
       {
@@ -1141,7 +1148,10 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
     ),
     isUploading && /* @__PURE__ */ jsxs4("div", { className: "small", children: [
       /* @__PURE__ */ jsxs4("div", { className: "d-flex justify-content-between mb-1", children: [
-        /* @__PURE__ */ jsx6("span", { children: "Uploading..." }),
+        /* @__PURE__ */ jsxs4("span", { children: [
+          /* @__PURE__ */ jsx6("div", { className: "spinner-border spinner-border-sm text-primary" }),
+          " Uploading..."
+        ] }),
         /* @__PURE__ */ jsxs4("span", { children: [
           progress ?? 0,
           "%"
@@ -1184,7 +1194,7 @@ import {
   UserInfoCard,
   useUser
 } from "@sparkstudio/authentication-ui";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function HomeView() {
   return /* @__PURE__ */ jsx7(
     AuthenticatorProvider,
@@ -1207,13 +1217,12 @@ function HomeContent() {
     const result = await res.s3.GetTemporaryPreSignedUrl(new TemporaryFileDTO({ Name: file.name, ContentType: contentType }));
     return result;
   }
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     /* @__PURE__ */ jsx7(UserInfoCard, {}),
-    user && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    user && /* @__PURE__ */ jsxs5(Fragment3, { children: [
       /* @__PURE__ */ jsx7(
         SingleFileProcessUploader,
         {
-          label: "Upload a file to process",
           accept: "*/*",
           getPresignedUrl: getPresignedUrlFromApi,
           onUploadComplete: (file, s3Url) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparkstudio/storage-ui",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -40,7 +40,7 @@
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.1.1",
     "@sparkstudio/authentication-ui": "^1.0.29",
-    "@sparkstudio/common-ui": "^1.0.26",
+    "@sparkstudio/common-ui": "^1.0.29",
     "barrelsby": "^2.8.1"
   },
   "devDependencies": {