synapse-react-client 4.0.1 → 4.0.3-b

package/dist/components/DownloadCart/DownloadCartPage.js

@@ -1,107 +1,109 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import * as P from "../../synapse-client/SynapseClient.js";
+import { jsx as e, jsxs as a, Fragment as $ } from "react/jsx-runtime";
+import i from "./DownloadCartPage.module.scss.js";
+import * as B from "../../synapse-client/SynapseClient.js";
 import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
 import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
 import "@sage-bionetworks/synapse-client/util/SynapseClientError";
-import { FeatureFlagEnum as S } from "@sage-bionetworks/synapse-types";
+import { FeatureFlagEnum as q } from "@sage-bionetworks/synapse-types";
 import "../../utils/functions/EntityTypeUtils.js";
 import "../../utils/SynapseConstants.js";
 import "lodash-es";
 import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
-import { useGetDownloadListStatistics as x } from "../../synapse-queries/download/useDownloadList.js";
-import { useGetFeatureFlag as O } from "../../synapse-queries/featureflags/useGetFeatureFlag.js";
-import { useSynapseContext as T } from "../../utils/context/SynapseContext.js";
-import { DeleteTwoTone as E } from "@mui/icons-material";
-import { Tooltip as g, Button as c, Typography as l } from "@mui/material";
-import { useState as r, useEffect as w } from "react";
-import { ErrorBanner as L } from "../error/ErrorBanner.js";
-import q from "../FullWidthAlert/FullWidthAlert.js";
-import { HelpPopover as b } from "../HelpPopover/HelpPopover.js";
-import t from "../IconSvg/IconSvg.js";
-import { ProgrammaticInstructionsModal as _ } from "../ProgrammaticInstructionsModal/ProgrammaticInstructionsModal.js";
-import R from "./AvailableForDownloadTable.js";
-import { CreatePackageV2 as B } from "./CreatePackageV2.js";
-import { PYTHON_CLIENT_IMPORT_AND_LOGIN as G } from "./DirectProgrammaticDownload.js";
-import { DownloadIneligibleForPackagingFilesFromListButton as W } from "./DownloadIneligibleForPackagingFilesFromListButton.js";
-import { DownloadListActionsRequired as z } from "./DownloadListActionsRequired.js";
-const H = `${G}
-dl_list_file_entities = syn.get_download_list()`, M = "synapse get-download-list";
-function ue(v) {
-  const { accessToken: y } = T(), [o, d] = r(0), [D, k] = r(!1), [F, h] = r(!1), [C, p] = r(!1), [f, A] = r(), N = O(
-    S.DOWNLOAD_CART_INELIGIBLE_FILE_DOWNLOADS
+import { useGetDownloadListStatistics as z } from "../../synapse-queries/download/useDownloadList.js";
+import { useGetFeatureFlag as H } from "../../synapse-queries/featureflags/useGetFeatureFlag.js";
+import { useSynapseContext as M } from "../../utils/context/SynapseContext.js";
+import { DeleteTwoTone as G } from "@mui/icons-material";
+import { Tooltip as g, Button as h, Typography as n } from "@mui/material";
+import { useState as c, useRef as Z, useEffect as v } from "react";
+import { ErrorBanner as V } from "../error/ErrorBanner.js";
+import Y from "../FullWidthAlert/FullWidthAlert.js";
+import d from "../IconSvg/IconSvg.js";
+import { ProgrammaticInstructionsModal as U } from "../ProgrammaticInstructionsModal/ProgrammaticInstructionsModal.js";
+import W from "./AvailableForDownloadTable.js";
+import { CreatePackageV2 as j } from "./CreatePackageV2.js";
+import { PYTHON_CLIENT_IMPORT_AND_LOGIN as J } from "./DirectProgrammaticDownload.js";
+import { calculateFriendlyFileSize as K } from "../../utils/functions/calculateFriendlyFileSize.js";
+import { DownloadIneligibleForPackagingFilesFromListButton as Q } from "./DownloadIneligibleForPackagingFilesFromListButton.js";
+import { DownloadListActionsRequired as X } from "./DownloadListActionsRequired.js";
+import w from "../ComponentCollapse.js";
+const ee = `${J}
+dl_list_file_entities = syn.get_download_list()`, ie = "synapse get-download-list", I = [
+  { label: "All Files", filter: void 0 },
+  { label: "Files included in ZIP", filter: "eligibleForPackaging" },
+  { label: "Files not included in ZIP", filter: "ineligibleForPackaging" }
+];
+function xe(S) {
+  const { accessToken: A } = M(), [t, p] = c(0), [u, x] = c(0), F = I[u].filter, [b, D] = c(!1), N = Z(null);
+  v(() => {
+    b && N.current?.scrollIntoView({
+      behavior: "smooth",
+      block: "center"
+    });
+  }, [b]);
+  const [P, y] = c(!1), [O, C] = c(!1), [k, T] = c(), L = H(
+    q.DOWNLOAD_CART_INELIGIBLE_FILE_DOWNLOADS
   ), {
-    data: i,
-    isLoading: s,
-    isError: n,
-    error: m,
-    refetch: u
-  } = x();
-  if (w(() => {
-    n && m && A(m);
-  }, [n, m]), w(() => {
-    i && i.numberOfFilesRequiringAction == 0 && d(1);
-  }, [i]), f)
-    return /* @__PURE__ */ e(L, { error: f });
-  const I = async () => {
-    await P.clearDownloadListV2(y), u();
+    data: l,
+    isLoading: m,
+    isError: r,
+    error: f,
+    refetch: E
+  } = z();
+  v(() => {
+    r && f && T(f);
+  }, [r, f]);
+  const _ = (o, s) => s === void 0 ? o.numberOfFilesAvailableForDownload : s === "eligibleForPackaging" ? o.numberOfFilesAvailableForDownloadAndEligibleForPackaging : o.numberOfFilesAvailableForDownload - o.numberOfFilesAvailableForDownloadAndEligibleForPackaging;
+  if (v(() => {
+    l && l.numberOfFilesRequiringAction == 0 && p(1), l && l.numberOfFilesAvailableForDownloadAndEligibleForPackaging === 0 && D(!1);
+  }, [l]), k)
+    return /* @__PURE__ */ e(V, { error: k });
+  const R = async () => {
+    await B.clearDownloadListV2(A), E();
   };
-  return /* @__PURE__ */ a("div", { className: "DownloadCartPage", children: [
-    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ a("div", { className: "pageHeader", children: [
-      /* @__PURE__ */ a("div", { className: "grid", children: [
-        /* @__PURE__ */ e("h3", { className: "pageHeaderTitle", children: "Your Download Cart" }),
-        /* @__PURE__ */ e(
-          g,
-          {
-            title: "Immediately removes all items from your download cart",
-            enterNextDelay: 300,
-            placement: "right",
-            children: /* @__PURE__ */ e(
-              c,
-              {
-                onClick: () => {
-                  I();
-                },
-                variant: "text",
-                color: "primary",
-                startIcon: /* @__PURE__ */ e(E, {}),
-                children: "Clear Your Download Cart"
-              }
-            )
-          }
-        )
-      ] }),
+  return /* @__PURE__ */ a("div", { className: i.DownloadCartPage, children: [
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: `${i.pageHeader}`, children: /* @__PURE__ */ e("div", { className: "container", children: /* @__PURE__ */ a("div", { className: i.grid, children: [
+      /* @__PURE__ */ e("h3", { className: "pageHeaderTitle", children: "Your Download List" }),
       /* @__PURE__ */ e(
-        l,
+        g,
         {
-          className: "description",
-          variant: "body1",
-          sx: {
-            display: { xs: "none", md: "block" }
-          },
-          children: "Your added files can be found in the tabs below. Files requiring actions before download are listed in the Access Actions Required tab, while those ready for download can be found in the Download List tab."
+          title: "Immediately removes all items from your download list",
+          enterNextDelay: 300,
+          placement: "right",
+          children: /* @__PURE__ */ e(
+            h,
+            {
+              onClick: () => {
+                R();
+              },
+              variant: "text",
+              color: "primary",
+              startIcon: /* @__PURE__ */ e(G, {}),
+              children: "Clear Your Download List"
+            }
+          )
         }
       )
-    ] }) }),
-    /* @__PURE__ */ e("div", { className: "tabs-container", children: /* @__PURE__ */ e("div", { className: "container", children: /* @__PURE__ */ a("ul", { className: "nav nav-tabs", children: [
+    ] }) }) }) }),
+    /* @__PURE__ */ e("div", { className: i.tabsContainer, children: /* @__PURE__ */ e("div", { className: "container", children: /* @__PURE__ */ a("ul", { className: i.navTabs, children: [
       /* @__PURE__ */ e(
         "li",
         {
-          className: `nav-item ${o == 0 ? "active" : ""}`,
-          "aria-selected": o == 0,
-          children: /* @__PURE__ */ a("button", { onClick: () => d(0), children: [
+          className: `${i.navItem}${t == 0 ? ` ${i.active}` : ""}`,
+          "aria-selected": t == 0,
+          children: /* @__PURE__ */ a("button", { onClick: () => p(0), children: [
             "Access Actions Required",
-            !n && !s && i && /* @__PURE__ */ e("span", { className: "fileCount", children: i.totalNumberOfFiles - i.numberOfFilesAvailableForDownload })
+            !r && !m && l && /* @__PURE__ */ e("span", { className: i.fileCount, children: l.totalNumberOfFiles - l.numberOfFilesAvailableForDownload })
           ] })
         }
       ),
       /* @__PURE__ */ e(
         "li",
         {
-          className: `nav-item ${o == 1 ? "active" : ""}`,
-          "aria-selected": o == 1,
-          children: /* @__PURE__ */ a("button", { onClick: () => d(1), children: [
+          className: `${i.navItem}${t == 1 ? ` ${i.active}` : ""}`,
+          "aria-selected": t == 1,
+          children: /* @__PURE__ */ a("button", { onClick: () => p(1), children: [
             "Download List",
-            !n && !s && i && /* @__PURE__ */ e("span", { className: "fileCount", children: i.numberOfFilesAvailableForDownload })
+            !r && !m && l && /* @__PURE__ */ e("span", { className: i.fileCount, children: l.numberOfFilesAvailableForDownload })
           ] })
         }
       )
@@ -109,173 +111,301 @@ function ue(v) {
     /* @__PURE__ */ a(
       "div",
       {
-        style: {
+        className: (
           /*
                      The DownloadListActionsRequired component stores actions in local state to track which actions are completed.
           
                      Mount the actions required component and hide it with style to ensure actions stored in component state are persisted as the user switches tabs
                      */
-          display: o == 0 && !n && !s && i ? "block" : "none"
-        },
+          t == 0 && !r && !m && l ? void 0 : i.hidden
+        ),
         children: [
-          i?.numberOfFilesRequiringAction && i.numberOfFilesRequiringAction > 0 && // Unmount instead of hiding the DownloadListActionsRequired component when there are 0 actions required
+          l?.numberOfFilesRequiringAction && l.numberOfFilesRequiringAction > 0 && // Unmount instead of hiding the DownloadListActionsRequired component when there are 0 actions required
           // The DownloadListActionsRequired cannot discern between a fulfilled action and an action that is no longer required because the
           // file was removed from the download cart.
           // In the typical case where the download cart is cleared, unmounting the component ensures that the actions are cleared out.
-          /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "actionsRequiredContainer container", children: /* @__PURE__ */ e(z, { ...v }) }) }),
-          i?.numberOfFilesRequiringAction === 0 && /* @__PURE__ */ e("div", { className: "placeholder", children: /* @__PURE__ */ e("div", { children: "No actions are currently required." }) })
+          /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "container", children: /* @__PURE__ */ e(X, { ...S }) }) }),
+          l?.numberOfFilesRequiringAction === 0 && /* @__PURE__ */ e("div", { className: i.placeholder, children: /* @__PURE__ */ e("div", { children: "No actions are currently required." }) })
         ]
       }
     ),
-    o == 1 && !n && !s && i && /* @__PURE__ */ a("div", { children: [
-      i.numberOfFilesAvailableForDownload > 0 && /* @__PURE__ */ a("div", { className: "DownloadListTabContent", children: [
-        /* @__PURE__ */ e("div", { className: "subSectionOverviewContainer", children: /* @__PURE__ */ a("div", { className: "subSectionOverview container", children: [
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ a("div", { className: "headlineWithHelp", children: [
-              /* @__PURE__ */ a(l, { variant: "headline3", sx: { mb: 2 }, children: [
-                /* @__PURE__ */ e(t, { icon: "packagableFile" }),
-                " Web Download"
+    t == 1 && !r && !m && l && /* @__PURE__ */ a("div", { children: [
+      l.numberOfFilesAvailableForDownload > 0 && /* @__PURE__ */ a("div", { className: `container ${i.DownloadListTabContent}`, children: [
+        /* @__PURE__ */ a("h3", { className: `${i.sectionTitle} pageHeaderTitle`, children: [
+          "Bulk Download Options",
+          l.sumOfFileSizesAvailableForDownload != null && /* @__PURE__ */ e(
+            g,
+            {
+              placement: "right",
+              title: /* @__PURE__ */ a($, { children: [
+                "Total file size",
+                /* @__PURE__ */ e("br", {}),
+                "Does not include files hosted outside Synapse"
               ] }),
-              /* @__PURE__ */ e(
-                b,
-                {
-                  markdownText: "This will allow you to create a .zip file that contains eligible files. Files greater that 100 MB, external links, or files which are not stored on Synapse native storage are ineligible. In most cases, ineligible files can be downloaded individually. External links will require navigation to an external site, which may require a separate login process.",
-                  helpUrl: "https://help.synapse.org/docs/Downloading-Data-From-the-Synapse-UI.2004254837.html"
-                }
-              )
+              slotProps: { tooltip: { sx: { maxWidth: 400 } } },
+              children: /* @__PURE__ */ a("span", { className: i.totalFileSize, children: [
+                K(
+                  l.sumOfFileSizesAvailableForDownload
+                ),
+                " ",
+                "total*"
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ a("div", { className: i.subSectionOverview, children: [
+          /* @__PURE__ */ a("div", { className: i.subSection, children: [
+            /* @__PURE__ */ a("div", { className: i.subSectionHeader, children: [
+              /* @__PURE__ */ e("div", { className: i.headline, children: /* @__PURE__ */ a(n, { variant: "headline3", children: [
+                /* @__PURE__ */ e(d, { icon: "packagableFile" }),
+                " Web Download (.ZIP)"
+              ] }) }),
+              /* @__PURE__ */ a("div", { className: i.subSectionActions, children: [
+                l.numberOfFilesAvailableForDownloadAndEligibleForPackaging > 0 && /* @__PURE__ */ e(
+                  h,
+                  {
+                    variant: "contained",
+                    onClick: () => {
+                      D(!0);
+                    },
+                    startIcon: /* @__PURE__ */ e(d, { icon: "download", wrap: !1 }),
+                    children: "Download Packages"
+                  }
+                ),
+                l.numberOfFilesAvailableForDownloadAndEligibleForPackaging == 0 && /* @__PURE__ */ e(
+                  g,
+                  {
+                    title: "You cannot create a .zip package because there are no eligible files.",
+                    enterNextDelay: 300,
+                    placement: "top",
+                    children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                      h,
+                      {
+                        variant: "contained",
+                        disabled: !0,
+                        startIcon: /* @__PURE__ */ e(d, { icon: "download", wrap: !1 }),
+                        children: "Download Packages"
+                      }
+                    ) })
+                  }
+                )
+              ] })
             ] }),
             /* @__PURE__ */ e(
-              l,
+              w,
               {
-                variant: "body1",
-                component: "div",
-                sx: {
-                  mb: 2,
-                  display: { xs: "none", md: "block" }
+                component: /* @__PURE__ */ a(n, { variant: "body1", component: "div", children: [
+                  "Only some files may be eligible for packaging as ZIP. Use the Individual Downloads tab, below, to download non-packageable files. ",
+                  /* @__PURE__ */ e(
+                    "a",
+                    {
+                      href: "https://help.synapse.org/docs/Downloading-Data-From-the-Synapse-UI.2004254837.html",
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      children: "More Information."
+                    }
+                  )
+                ] }),
+                collapseBoxSx: {
+                  backgroundColor: "transparent",
+                  p: 0,
+                  mt: "15px"
                 },
-                children: /* @__PURE__ */ a("ul", { children: [
-                  /* @__PURE__ */ e("li", { children: "Eligible files will be added to .ZIP packages of up to 1GB in size" }),
-                  /* @__PURE__ */ e("li", { children: "If you have more than 1GB, you can create multiple packages" }),
-                  /* @__PURE__ */ e("li", { children: "Packages will only include files which are hosted on Synapse native storage" }),
-                  /* @__PURE__ */ e("li", { children: "Packages include a CSV manifest that contains file annotations and other information for each file" })
-                ] })
-              }
-            ),
-            i.numberOfFilesAvailableForDownloadAndEligibleForPackaging > 0 && /* @__PURE__ */ e(
-              c,
-              {
-                variant: "contained",
-                onClick: () => {
-                  k(!0);
+                componentContainerSx: {
+                  backgroundColor: "transparent",
+                  p: 0
                 },
-                startIcon: /* @__PURE__ */ e(t, { icon: "download", wrap: !1 }),
-                children: "Download As .Zip Packages"
-              }
-            ),
-            i.numberOfFilesAvailableForDownloadAndEligibleForPackaging == 0 && /* @__PURE__ */ e(
-              g,
-              {
-                title: "You cannot create a .zip package because there are no eligible files.",
-                enterNextDelay: 300,
-                placement: "top",
-                children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-                  c,
+                iconSx: { width: "25px", height: "25px" },
+                children: /* @__PURE__ */ e(
+                  n,
                   {
-                    variant: "contained",
-                    disabled: !0,
-                    startIcon: /* @__PURE__ */ e(t, { icon: "download", wrap: !1 }),
-                    children: "Download As .Zip Packages"
+                    variant: "body1",
+                    component: "div",
+                    sx: { marginBottom: "15px" },
+                    children: /* @__PURE__ */ a("ul", { children: [
+                      /* @__PURE__ */ e("li", { children: "Files are bundled into .ZIPs up to 1 GB each." }),
+                      /* @__PURE__ */ e("li", { children: "Larger selections are split into multiple packages." }),
+                      /* @__PURE__ */ e("li", { children: "Includes only files stored in Synapse native storage." }),
+                      /* @__PURE__ */ e("li", { children: "Each package contains a CSV manifest with file annotations and metadata." })
+                    ] })
                   }
-                ) })
+                )
               }
-            ),
-            N && i.numberOfFilesAvailableForDownloadAndEligibleForPackaging < i.numberOfFilesAvailableForDownload && /* @__PURE__ */ e("div", { style: { marginTop: "1rem" }, children: /* @__PURE__ */ e(W, {}) })
+            )
           ] }),
-          /* @__PURE__ */ a("div", { children: [
-            /* @__PURE__ */ a("div", { className: "headlineWithHelp", children: [
-              /* @__PURE__ */ a(l, { variant: "headline3", sx: { mb: 2 }, children: [
-                /* @__PURE__ */ e(t, { icon: "code" }),
+          /* @__PURE__ */ a("div", { className: i.subSection, children: [
+            /* @__PURE__ */ a("div", { className: i.subSectionHeader, children: [
+              /* @__PURE__ */ e("div", { className: i.headline, children: /* @__PURE__ */ a(n, { variant: "headline3", children: [
+                /* @__PURE__ */ e(d, { icon: "code" }),
                 " Programmatic Download"
-              ] }),
-              /* @__PURE__ */ e(
-                b,
+              ] }) }),
+              /* @__PURE__ */ e("div", { className: i.subSectionActions, children: /* @__PURE__ */ e(
+                h,
                 {
-                  markdownText: "This will provide syntax which you can enter into your programmatic client. It is suitable for large files (>100 MB), for packages > 1GB, and for files which aren’t stored on Synapse native storage (e.g. in a special AWS S3 or Google Cloud bucket).  External links will require navigation to an external site, which may require a separate login process.",
-                  helpUrl: "https://help.synapse.org/docs/Downloading-Data-Programmatically.2003796248.html"
+                  variant: "contained",
+                  onClick: () => {
+                    y(!0);
+                  },
+                  startIcon: /* @__PURE__ */ e(d, { icon: "download", wrap: !1 }),
+                  children: "Get R / Python / CLI Code"
                 }
-              )
+              ) })
             ] }),
             /* @__PURE__ */ e(
-              l,
+              w,
               {
-                variant: "body1",
-                component: "div",
-                sx: {
-                  mb: 2,
-                  display: { xs: "none", md: "block" }
+                component: /* @__PURE__ */ a(n, { variant: "body1", component: "div", children: [
+                  "Use our Python, R, or command line clients to download files quickly. ",
+                  /* @__PURE__ */ e(
+                    "a",
+                    {
+                      href: "https://help.synapse.org/docs/Downloading-Data-Programmatically.2003796248.html",
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      children: "More Information."
+                    }
+                  )
+                ] }),
+                collapseBoxSx: {
+                  backgroundColor: "transparent",
+                  p: 0,
+                  mt: "15px"
                 },
-                children: /* @__PURE__ */ a("ul", { children: [
-                  /* @__PURE__ */ e("li", { children: "Requires installation of a programmatic client (R, Python, CLI)" }),
-                  /* @__PURE__ */ e("li", { children: "No limit to the file size or the size of the package that can be downloaded" }),
-                  /* @__PURE__ */ e("li", { children: "Will include files which are hosted on and off Synapse native storage" }),
-                  /* @__PURE__ */ e("li", { children: "Packages include a CSV manifest that contains file annotations and other information for each file" })
-                ] })
+                componentContainerSx: {
+                  backgroundColor: "transparent",
+                  p: 0
+                },
+                iconSx: { width: "25px", height: "25px" },
+                children: /* @__PURE__ */ e(
+                  n,
+                  {
+                    variant: "body1",
+                    component: "div",
+                    sx: { marginBottom: "15px" },
+                    children: /* @__PURE__ */ a("ul", { children: [
+                      /* @__PURE__ */ e("li", { children: "Requires a client (R, Python, or CLI)." }),
+                      /* @__PURE__ */ e("li", { children: "No limits on individual file size or total download size." }),
+                      /* @__PURE__ */ e("li", { children: "Includes files stored both on and off Synapse native storage." }),
+                      /* @__PURE__ */ e("li", { children: "Downloads include a CSV manifest with file annotations and metadata." })
+                    ] })
+                  }
+                )
               }
-            ),
+            )
+          ] }),
+          L && l.numberOfFilesAvailableForDownloadAndEligibleForPackaging < l.numberOfFilesAvailableForDownload && /* @__PURE__ */ a("div", { className: i.subSection, children: [
+            /* @__PURE__ */ a("div", { className: i.subSectionHeader, children: [
+              /* @__PURE__ */ e("div", { className: i.headline, children: /* @__PURE__ */ a(n, { variant: "headline3", children: [
+                /* @__PURE__ */ e(d, { icon: "multiFile" }),
+                " Multi-file Download"
+              ] }) }),
+              /* @__PURE__ */ e("div", { className: i.subSectionActions, children: /* @__PURE__ */ e("div", { className: i.ineligibleDownloadContainer, children: /* @__PURE__ */ e(Q, {}) }) })
+            ] }),
             /* @__PURE__ */ e(
-              c,
+              w,
               {
-                variant: "contained",
-                onClick: () => {
-                  h(!0);
+                component: /* @__PURE__ */ a(n, { variant: "body1", component: "div", children: [
+                  "Files which ",
+                  /* @__PURE__ */ e("strong", { children: "aren't" }),
+                  " included in a ZIP package may be downloaded as a multi-file download. "
+                ] }),
+                collapseBoxSx: {
+                  backgroundColor: "transparent",
+                  p: 0,
+                  mt: "15px"
+                },
+                componentContainerSx: {
+                  backgroundColor: "transparent",
+                  p: 0
                 },
-                startIcon: /* @__PURE__ */ e(t, { icon: "code", wrap: !1 }),
-                children: "Create Programmatic Package"
+                iconSx: { width: "25px", height: "25px" },
+                children: /* @__PURE__ */ a(
+                  n,
+                  {
+                    variant: "body1",
+                    component: "div",
+                    sx: { marginBottom: "15px" },
+                    children: [
+                      "Clicking “Start Multi-file Download” initiates a download of all files in your Download List that can’t be bundled into a ZIP—such as large files or external links—in one step. Files are saved one by one with clear progress updates, automatic handling of duplicate names, and retry support if something fails. You can cancel anytime.",
+                      /* @__PURE__ */ e("br", {}),
+                      /* @__PURE__ */ e("br", {}),
+                      "Note: in some browsers, files download individually to your default Downloads folder instead of a selected location."
+                    ]
+                  }
+                )
               }
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ a("div", { className: "availableForDownloadTableContainer container", children: [
-          D && /* @__PURE__ */ e(
-            B,
+        /* @__PURE__ */ a("div", { children: [
+          b && /* @__PURE__ */ e("div", { ref: N, children: /* @__PURE__ */ e(
+            j,
             {
               onPackageCreation: () => {
-                p(!0), u();
+                C(!0);
               }
             }
-          ),
-          /* @__PURE__ */ e(R, {})
+          ) }),
+          /* @__PURE__ */ e("h3", { className: `${i.sectionTitle} pageHeaderTitle`, children: "Download Individual Files" }),
+          /* @__PURE__ */ e("div", { className: i.tabsContainer, children: /* @__PURE__ */ a("ul", { className: i.navTabs, children: [
+            /* @__PURE__ */ e("li", { className: i.navLabel, children: "View:" }),
+            I.map((o, s) => /* @__PURE__ */ e(
+              "li",
+              {
+                className: `${i.navItem}${u === s ? ` ${i.active}` : ""}`,
+                "aria-selected": u === s,
+                children: /* @__PURE__ */ a(
+                  "button",
+                  {
+                    onClick: () => x(s),
+                    children: [
+                      o.label,
+                      !r && !m && l && /* @__PURE__ */ e("span", { className: i.fileCount, children: _(l, o.filter) })
+                    ]
+                  }
+                )
+              },
+              o.label
+            ))
+          ] }) }),
+          /* @__PURE__ */ e("div", { className: i.availableForDownloadTableContainer, children: /* @__PURE__ */ e(
+            W,
+            {
+              filter: F
+            },
+            F ?? "all"
+          ) })
         ] })
       ] }),
-      i.numberOfFilesAvailableForDownload === 0 && /* @__PURE__ */ e("div", { className: "placeholder", children: /* @__PURE__ */ e("div", { children: "Your Download Cart is currently empty." }) })
+      l.numberOfFilesAvailableForDownload === 0 && /* @__PURE__ */ e("div", { className: i.placeholder, children: /* @__PURE__ */ e(n, { variant: "body1Italic", children: "Your Download List is currently empty." }) })
     ] }),
     /* @__PURE__ */ e(
-      q,
+      Y,
       {
-        show: C,
+        show: O,
         variant: "success",
         title: "Package Created",
         description: "A package has been created with eligible files. The items contained in this .zip file have been removed from your list. If your package is over 1GB, you will need to create multiple packages.",
         autoCloseAfterDelayInSeconds: 10,
         onClose: () => {
-          p(!1);
+          C(!1);
         }
       }
     ),
-    F && /* @__PURE__ */ e(
-      _,
+    P && /* @__PURE__ */ e(
+      U,
       {
         show: !0,
-        onClose: () => h(!1),
+        onClose: () => y(!1),
         title: "Download Programmatically",
-        pythonCode: H,
-        cliCode: M
+        pythonCode: ee,
+        cliCode: ie
       }
     )
   ] });
 }
 export {
-  ue as DownloadCartPage,
-  ue as default
+  xe as DownloadCartPage,
+  xe as default
 };
 //# sourceMappingURL=DownloadCartPage.js.map